Bienvenido al curso de JavaScript para principiantes de MDN.

En este primer
artículo vamos a conocer JavaScript desde un nivel muy general, contestando las
preguntas ¿Qué es? y ¿Qué hace?, con el propósito de que te sientas a gusto al
usar JavaScript.

Prerequisitos: Conocimiento básico de los conceptos de computación, y un poco de

entendimiento de HTML y CSS.

Objetivo: Familiarizarse con JavaScript , qué es, qué se puede hacer y cómo usarlo
en una página web.

Definición GeneralSección
JavaScript es un lenguaje de programación que te permite realizar actividades
complejas en una página web — cada vez más una página web hace más cosas
que sólo mostrar información estática — como mostrar actualizaciones de
contenido en el momento, interactuar con mapas, animaciones gráficas 2D/3D etc.
— puedes estar seguro que JavaScript está involucrado. Es la tercera capa del
pastel de los estándares en las tecnologías para la web, dos de las cuales son
(HTML y CSS), hablaremos de ellas más adelante con más detalle en otra parte de
nuestra Área de
 Aprendizaje.

 HTML es un lenguaje de marcado que usa la estructura para dar un sentido al

contenido web, por ejemplo define párrafos, cabeceras, tablas, imágenes y vídeos
en la página.
 CSS es un lenguaje de reglas en cascada que usamos para aplicar un estilo a
nuestro contenido en HTML, por ejemplo colocando colores de fondo, fuentes y
marginando nuestro contenido en múltiples columnas.
 JavaScript Es un lenguaje de programación que te permite crear contenido nuevo
y dinámico, controlar archivos de multimedia, crear imágenes animadas y muchas
otras cosas más. (Aunque, no todo, pero es increíble lo que puedes llegar a hacer
con tan sólo unas pocas líneas de código de JavaScript).
Las 3 capas se complementan una con la otra. Vamos a agregar un simple texto a
la etiqueta como un ejemplo. Podemos usar HTML para dar estructura y propósito:
<p>Player 1: Chris</p>

Agregamos CSS para hacer que se vea agradable:

p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor:pointer;
}

y finalmente agregamos JavaScript para implementar comportamiento dinámico:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
var name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}

Da click en el texto para ver qué sucede (también puedes encontrar la

demostración en GitHub) ve el código fuente o ejecútalo en vivo!
JavaScript puede hacer muchas cosas más - Vamos a explorar con más detalles.

Entonces, ¿Qué es lo que realmente podemos

hacer?Sección
El núcleo de JavaScript consiste en características comunes de programación que
te permiten hacer cosas como:
 Almacenar valores útiles dentro de variables. En el ejercicio anterior por ejemplo,
preguntamos por un nuevo nombre a introducir para luego almacenarlo en una
variable llamada name.
 Las operaciones escritas en formato de texto (Conocidas como "Strings" en
lenguaje de programación). En el ejemplo anterior tomamos el conjunto "Player 1:"
y lo adjuntamos a la variable name para terminar de crear el código, ejemplo: "Player
1: Chris".
 Para hacer funcionar el código en respuesta a algunos eventos que están
ocurriendo en la página web. Usamos un evento en nuestro ejemplo anterior
llamado clic para detectar cuando el botón es cliqueado para luego hacer correr el
código que actualice la etiqueta de texto.
 ¡Y muchas más cosas!
Hay algo incluso más emocionante, sin embargo es la funcionalidad construida por
encima del núcleo del lenguaje de JavaScript. Llamada Interfaz de programación
en aplicaciones - Application Programming Interfaces (API's ) proveyéndote
súper-poderes extra para usar en tú código JavaScript.
Los APIS son inserciones de líneas, incluso bloques gigantes de código listos para
usar que permiten a un desarrollador implementarlo a programas que de cualquier
otra forma podría ser difícil o incluso imposible de terminar. Así como las
herramientas para construir una casa, es lo mismo para las cosas de programación
– Es mucho más fácil tomar los paneles que ya estén cortados y atornillarlos para
hacer una librería, ya que es más trabajoso diseñarlo por ti mismo, ir y encontrar la
madera correcta, cortarla del tamaño correcto y lijarla, buscar los tornillos del
tamaño correcto y ensamblarla para hacer la librería.

Generalmente los API's se dividen en dos categorías:

 Los Navegadores APIs (Browser APIs) son construidos dentro de tu buscador
web, y son capaces de exponer información desde la cercanía en base al ambiente
de tu ordenador, o hacer cosas complejas. Por ejemplo:
 El DOM (Modelo de Objeto de Documento) API te permite manipular, crear,
remover y cambiar códigos escritos en lenguaje HTML y CSS, incluso aplicando
dinámicamente nuevos estilos a tu página web, etc. Cada vez que aparezca un
aviso (popup) en una página web, o nuevo contenido a mostrarse en ella, (Así
como vimos en el ejemplo anterior de nuestro sencillo demo) es tan sólo un
ejemplo, de lo que se puede hacer con la acción DOM.
 La Localización-Geo API restablece la información geográfica, Así es como Google
Maps permite encontrar tu dirección e imprimirla en un mapa.
 Las Canvas y el WebGL API te permiten crear animaciones y gráficos en 2D y 3D.
La gente está haciendo cosas increíbles usando estas tecnologías web – puedes
ver los Chrome Experiments y webglsamples.
 Video y Sonido APIs, como HTMLMediaElement y WebRTCte permite crear cosas
realmente interesantes, tanto como poner música y vídeo en una página web o
grabar un vídeo desde tu cámara web y que otra persona pueda verla desde su
computadora (Prueba nuestro ejercicio Snapshot demo para tener una idea).
Nota: Muchos de los tutoriales anteriores no funcionan en buscadores viejos –
cuando practicamos, es buena idea usar un navegador actualizado, como Firefox,
Chrome, Edge u Opera para hacer funcionar el código, considera que necesitarás
usar el cross browser testing en más detalle cuando llegues a la parte de entregar tu
código desarrollado (Código real que clientes reales usaran).
 APIs de Terceras personas, por determinado no son construidos dentro del
navegador, y generalmente tienes que conseguir su código e información de
alguna parte de la Web, por ejemplo:
 El Twitter API permite que hagas cosas como mostrar los últimos tweets de alguien
en tu sitio web.
 El Google Maps API permite incrustar mapas personalizados en tu sitio web y otro
tipo de funcionalidades.
Nota: Estas APIs son avanzadas, y por lo tanto en este módulo no serán explicadas,
puedes encontrar mucha más información acerca de esto en nuestro Client-side web
APIs module.
¡Hay incluso muchas más APIs! sin embargo, no te emociones muy rápido. Ya que
no tendrás la capacidad de construir en tan sólo 24 horas de estar estudiando
JavaScript el siguiente Facebook, Instagram o Google Maps – Hay muchos
conceptos básicos aún por ver. Y es por eso que estás aquí – ¡Así que sigamos
adelante!

¿Qué es lo que JavaScript hace en tu página

web?Sección
En este apartado, actualmente comenzaremos a ver unas cuantas líneas de
código, y mientras hacemos eso vamos explorando lo que actualmente está
pasando cuando haces funcionar tu código JavaScript en tu página Web.

Hagamos un breve recordatorio del historial de lo que sucede cuando cargas una
página web en tu navegador (primero hablamos acerca de cómo funciona CSS en
nuestro artículo). Cuando cargas una página Web en tu navegador, tu código
(HTML, CSS y JavaScript) es leído dentro de un ambiente de ejecución (pestaña
del navegador). Esto es como una fábrica que coge la materia prima (Las líneas de
código) y lo presenta como el producto final (la página Web).
El lenguaje JavaScript es ejecutado por el motor del navegador de JavaScript,
luego que el código HTML y CSS han sido juntados y congregados dentro de la
página Web. Esto asegura que el estilo y la estructura de la página están en su
lugar en el momento en que JavaScript comienza a ejecutarse.

Esto es algo muy bueno, algo muy común en el uso de JavaScript para modificar
dinámicamente el código HTML y CSS, para que la interfaz de usuario sea
actualizada, usando DOM o el modelo de objeto de documento (como se mencionó
anteriormente). Si al cargar JavaScript e intentar hacerlo funcionar antes de que
sea leído el código HTML y CSS, se verá afectado, ocurriendo errores de
programación.
Seguridad de navegadorSección
Cada pestaña del navegador se considera como una cubeta en un compartimento
separado para hacer funcionar el código (en términos técnicos las cubetas son
llamadas “ambientes de ejecución”) – significa que en la mayoría de los casos los
códigos en cada pestaña funcionan completamente separados, y el código en una
pestaña no puede afectar directamente el código de otra pestaña, o en otro
navegador. Esta es una buena medida de seguridad – si este no fuera el caso,
entonces los piratas informáticos podrían estar modificando tu código para robar
información de otro sitio web, y otras tantas cosas malas.

Nota: Existen formas para enviar código e información entre diferentes sitios
web/pestañas de una manera segura, pero estas son técnicas avanzadas que no
cubriremos en este curso.
JavaScript funciona con un ordenSección
Cuando el navegador encuentra un bloque de JavaScript, generalmente lo corre en
orden, de arriba hacia abajo. Esto significa que tienes que tener cuidado en qué
orden pones las cosas. Por ejemplo, regresemos al bloque de JavaScript que
vimos en nuestro primer ejemplo:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
var name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}

Aquí seleccionamos un texto del párrafo (línea 1), luego es adherido a un evento
espía (línea 3) entonces cuando el párrafo es cliqueado, el bloque de
código updateName() empieza a funcionar (línea 5 – 8). El código de
bloque updateName() (este tipo de código de bloque reusable son llamados
“funciones”) interactúa con el usuario para preguntar un nuevo nombre, y luego lo
inserta dentro del párrafo para actualizar lo que se esta visualizando.
Si tú cambias el orden de las primeras dos líneas de código, no funcionaría – de
hecho, conseguirás un error de retorno en la consola del desarrollador del
navegador – TypeError: para is undefined. Esto significa que el objeto para no
existe todavía, entonces no podremos añadir un evento espía.
Nota: Este es un error muy común – necesitas ser cuidadoso ya que el objeto de
referencia en tu código debe existir antes de intentar algo con él.
El Interpretador entre el código compiladoSección
Quizás debiste escuchar sobre los términos interpretador y el compilador en
contexto de programación, JavaScript es un lenguaje de interpretación – el código
se hace funcionar de arriba hacia abajo y el resultado de leerlo de esta manera
hace que inmediatamente responda. No tienes que transformar tu código en algo
diferente antes de que el navegador lo haga por ti.
En otra mano los lenguajes compilados son transformados (compilado) antes de
que sean leídos por la computadora. Por ejemplo C/C++ son lenguajes
congregados para compilarlos para luego ser leídos por la computadora.

Ambos accesos tienen diferentes ventajas, de los cuales no discutiremos en este

punto.

El lado-del-servidor entre el código del-lado-del-clienteSección

Quizás también debiste escuchar los términos lado-del-servidor y el código
del lado-del-cliente, especialmente en contexto de desarrollo web. El código del
cliente es código que funciona en la computadora del usuario – cuando una página
web es visualizada, la página del código del cliente es descargada, para luego ser
leída y mostrada en el navegador. En este módulo de JavaScript hablaremos
explícitamente sobre el lado-del-cliente.
Por otro lado el lado-del-servidor es leído por el servidor, entonces el resultado es
descargado y mostrado en el navegador. Ejemplos del uso popular del lenguaje
web del lado-del-servidor incluye PHP, Python, Ruby y ASP.NET. ¡Y JavaScript!
Este lenguaje también puede ser usado como un lenguaje de lado-del-servidor, por
ejemplo en el popular ambiente de Node.js – puedes encontrar más información
acerca del tema lado-del servidor usando JavaScript en nuestras páginas
dinámicas con la etiqueta programación del lado-del-servidor.
La palabra dinámico es usada para describir ambos lados-del-cliente en
JavaScript, y lenguajes del lado-del-servidor. Es referido a la habilidad para
actualizar lo visualizado de una página/app para mostrar contenido diferente en
diferentes circunstancias, requiriendo nuevo contenido a generar. Por ejemplo,
subir archivos desde una base de datos, donde el lado-del-cliente de JavaScript
genera dinámicamente nuevo contenido dentro del navegador del cliente, por
ejemplo, creando una nueva tabla en código HTML, insertando datos que son
llamados desde un servidor propio, para luego visualizarlo en la tabla de la página
web y mostrárselo al usuario, El significado es un tanto diferente entre los dos
contextos, pero teniendo relación, y aprovechando el trabajo mutuo entre (lado-del-
servidor y lado-del-cliente).
 Una página web sin ninguna actualización de contenido dinámico es llamada
como estática – ya que solamente muestra el mismo contenido todo el tiempo.
¿Cómo añadir JavaScript a tu página web?Sección
JavaScript es aplicado a tu página en HTML de una manera similar al CSS. Donde
el CSS usa el elemento <link> para aplicar estilos-de-hoja externos y el
tag <style> es un elemento para aplicar estilos-de-hoja interno al HTML, JavaScript
solamente necesita de un solo amigo en el mundo del HTML - que es el
elemento <script>. Aprendamos cómo funciona esto.
JavaScript por dentroSección
1. Primero que nada, haz una copia de nuestro archivo ejemplo apply-javascript.html.
Guárdalo en algún lugar donde puedas encontrarlo.
2. Abre el archivo en tu navegador y en tu editor de texto. Verás que el HTML
creará una simple página web conteniendo un botón.
3. Luego, ve a tu editor de texto y añade lo siguiente justo antes del tag de
cerrado </body>:
4. <script>
5.
6. // JavaScript goes here
7.

</script>

8. Ahora, añadiremos algo de JavaScript dentro de nuestro tag <script> para que la
página haga algo más interesante – añade el siguiente código justo debajo de la
línea de código "// JavaScript goes here":
9. function createParagraph() {
10. var para = document.createElement('p');
11. para.textContent = 'You clicked the button!';
12. document.body.appendChild(para);
13. }
14.
15. var buttons = document.querySelectorAll('button');
16.
17. for (var i = 0; i < buttons.length ; i++) {
18. buttons[i].addEventListener('click', createParagraph);

19. Guarda tu archivo y actualiza tu navegador – ahora deberías ver cuando das clic en
el botón, que un nuevo párrafo es generado y posicionado debajo de él.
Nota : Si al parecer tu ejemplo no funciona, revisa tu código paso a paso y asegúrate
que todo lo hayas hecho bien, ¿verificaste si guardaste tu archivo con la
extensión .html? ¿Añadiste el tag <script> justo después del tag </body>?
¿Introduciste el código JavaScript como se mostraba anteriormente? JavaScript es
 sensitivo y exigente con mayúsculas y minúsculas, así que necesitas introducir la
sintaxis exactamente como se muestra, de otro modo no funcionará.
Nota: Puedes ver esta versión en GitHub apply-javascript-internal.html (Puedes
verlo en vivo también).
JavaScript ExternoSección
Esto trabaja muy bien, pero, ¿qué pasa si queremos poner nuestro JavaScript en
un archivo externo? Entonces exploremos esto ahora.

1. Primero, crea un nuevo archivo en la misma dirección o sitio de tu archivo muestra

de HTML. Llámalo script.js– asegúrate que lleve la extensión .js así es como es
reconocido un archivo JavaScript.
2. Siguiente, copia todo el código que has escrito anteriormente dentro del
elemento <script> y pégalo dentro del archivo .js y guárdalo.
3. Ahora remplaza todo del código que está dentro del elemento <script> por lo
siguiente:
<script src="script.js"></script>

4. Guarda y refresca tu navegador, y ¡deberías de ver exactamente lo mismo! En

realidad hiciste el mismo trabajo, pero ahora conseguimos que el código esté en un
archivo externo. Generalmente esto es algo bueno en términos de organizar tu
código y hacerlo reusable a través de varios archivos HTML. Además los archivos
HTML son fáciles de leer sin tantos pedazos de script por todos lados.
Nota: Puedes ver esta versión en GitHub como apply-javascript-
external.html y script.js (Puedes verlo en vivo también).
Gestores de JavaScript en líneaSección
A veces puedes notar que te encontraras con algunas líneas de JavaScript dentro
de archivos HTML. Puede que se vean algo parecido a esto:

function createParagraph() {
var para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</button>

Puedes intentar esta versión de nuestro demo abajo.

Este demo tiene exactamente la misma funcionalidad tanto como en las dos
secciones anteriores, excepto que el elemento <button> incluye un controlador de
línea onclick para hacer funcionar el código cuando el botón en presionado.
Por favor no hagas esto, de otro modo. Es una mala práctica contaminar tu
HTML con JavaScript, y es ineficiente – Deberías de incluir el
atributo onclick="createParagraph()" en cada botón que quieras para ser aplicado
por JavaScript.
 Usar los constructores de JavaScript permite seleccionar todos los botones usando
una sola instrucción. El código que usamos arriba sirve para este propósito
viéndose así:

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {

buttons[i].addEventListener('click', createParagraph);
}

Esto puede verse un poco más grande que el atributo onclick pero esto funcionará
para todos los botones sin importar cuantos haya en la página, incluso
cuando sean añadidos o removidos. JavaScript no necesita ser cambiado.
Nota: Intenta editar tu versión de apply-javascript.html y añade un poco más de
botones en el archivo. Cuando vuelvas a cargar la página, deberías notar que todos
los botones crean un párrafo cuando son cliqueados. ¿Estupendo no?
ComentariosSección
Así como en HTML y CSS, es posible escribir comentarios dentro de tu código de
JavaScript que serán ignorados por el navegador, simplemente existe para proveer
instrucciones a tus colegas desarrolladores de como el código funciona (y para ti,
por si regresas a tu código después de 6 meses y no recuerdas lo que hiciste). Los
comentarios son muy útiles, deberías usarlos más a menudo, particularmente para
grandes aplicaciones. He aquí dos tipos:

 Comentarios de una sola línea escritos después de dos barras inclinadas (//),
Ejemplo:

// I am a comment

 Comentarios de varias líneas escritos entre las cadenas /* y */, ejemplo:

 /*
 I am also
 a comment

*/

Entonces por ejemplo, podemos anotar nuestro último demo de JavaScript con
comentarios como:

// Function: creates a new paragraph and append it to the bottom of the HTML
body.

function createParagraph() {
var para = document.createElement('p');
 para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}

/*
1. Get references to all the buttons on the page and sort them in an array.
2. Loop through all the buttons and add a click event listener to each one.

When any button is pressed, the createParagraph() function will be run.

*/

var buttons = document.querySelectorAll('button');

for (var i = 0; i < buttons.length ; i++) {

buttons[i].addEventListener('click', createParagraph);
}

ResumenSección
Ahí vas, tus primeros pasos dentro del mundo de JavaScript, hemos comenzado
solamente con teoría, para comenzar a entender por qué usamos JavaScript, y
qué tipo de cosas puedes usar con él. En el camino viste unos cuantos ejemplos de
código y aprendiste cómo JavaScript encaja con el resto del código de tu página
web, entre otras cosas.

JavaScript puede que se vea un poco desalentador por ahora, pero no te

preocupes – en este curso te llevaremos a través de pasos simples que harán que
sigas adelante. En el siguiente artículo iremos directo a la práctica, consiguiendo
un salto directo para construir tus propios ejemplos en JavaScript.
Ahora que has aprendido algo acerca de la teoría de JavaScript y de lo que puedes
hacer con él, vamos a darte un curso rápido sobre las características básicas de
JavaScript con un tutorial completamente práctico. Aquí construirás paso a paso un
juego sencillo de "Adivina el número".

Prerrequisitos: Conocimiento básico de computación, HTML, CSS y qué es JavaScript.

Objetivo: Tener un poco de experiencia escribiendo JavaScript, y conseguir al

menos un entendimiento básico de lo que supone escribir un programa
de JavaScript.
No esperes entender todo el código inmediatamente — solo queremos presentarte
los conceptos de alto nivel por ahora, y darte una idea de como funciona JavaScript
(y otros lenguajes de programación). ¡Más adelante vas a volver ver estas
características con mucho más detalle!

Nota: Muchas de las características que vas a ver en JavaScript son las mismas en
otros lenguajes de programación — funciones, bucles, etc. La sintaxis del código es
diferente, pero los conceptos siguen siendo básicamente los mismos.
 Pensando como un programadorSección
Una de las cosas mas difíciles de aprender en programación no es la sintaxis que
necesitas aprender sino cómo aplicarla para resolver problemas del mundo real.
Necesitas empezar a pensar como programador — Ésto generalmente implica
buscar descripciones de qué necesita hacer tu programa, determinar qué
características de código necesita para alcanzar esas cosas y cómo hacer que
funcionen juntas.

Ésto implica una combinación de trabajo duro, experiencia con sintáxis de

programación, y práctica - más un poquito de creatividad. Mientras más programes,
más habilidoso serás haciéndolo. No te podemos prometer que vas a desarrollar un
"cerebro de programador" en cinco minutos, pero, a lo largo de este curso, te
vamos a dar muchas oportunidades de practicar pensando como un programador.

Teniendo ésto presente, veamos el ejemplo que vamos a construir en este artículo,
y revisemos el proceso general de seccionarlo y divirlo en tareas tangibles.

Ejemplo — Juego adivina el númeroSección

En este artículo vamos a mostrarte como construir el juego simple que puedes ver
abajo:

Abrir en CodePen Abrir en JSFiddle

Pruébalo jugando —Familiarízate con el juego antes de continuar.

Imaginemos que tu jefe te ha dado el siguiente resumen para crear este juego:

Quiero que crees un juego sencillo del tipo "adivina el número". Debe elegir un
número aleatorio entre 1 y 100, luego desafiar al jugador a adivinar el número en
10 intentos. Después de cada intento debería decirle al jugador si ha acertado o no
- y si está equivocado, debería decirle si se ha quedado corto, o se ha pasado.
También debería decir los números que ya se han probado anteriormente. El juego
acabará una vez que el jugador acierte o cuando se acaben los intentos. Cuando el
juego se acabe, se le debe dar al jugador la opción de volver a jugar.
Al observar este resumen, lo primero que podemos hacer es empezar a desglosar
el proyecto en tareas simples y realizables, con la mayor mentalidad de
programador posible:

1. Generar un número aleatorio entre 1 y 100.

2. Registrar el número del intento en el que el jugador se encuentre. Empezando en
1.
3. Darle al jugador una forma de adivinar cuál es el número.
4. Una vez que se ha introducido un número, registrarlo en alguna parte para que el
jugador pueda ver sus intentos previos.
5. Siguente, comprobar si el número es correcto.
6. Si es correcto:
1. Mostrar un mesaje de felicitaciones.
2. Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).
3. Mostrar un control que le permita al jugador reiniciar el juego.
7. Si es incorrecto y al jugador todavía le quedan intentos:
1. Decirle al jugador que es ha fallado.
2. Dejar al jugador intentarlo de nuevo.
3. Incrementar el número de intentos en 1.
8. Si el jugador falla y no le quedan turnos:
1. Decirle al jugador que el juego se ha acabado.
2. Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).
3. Mostrar un control que permita al jugador volver a empezar el juego.
9. Una vez que el juego se reinicia, asegurarse de que la lógica del juego y la IU
estén completamente restablecidos, volver al paso 1.
Sigamos y veamos cómo podemos transformar estos pasos en código, construir el
ejemplo, y explorar las características de JavaScript a medida que lo hacemos.

Configuración inicialSección
Para empezar este tutorial, quisiéramos que hicieras una copia local del
archivo number-guessing-game-start.html (en vivo aquí). Ábrelo en tu editor de
texto y en tu navegador web. De momento, puedes ver un sencillo encabezado, un
párrafo de instrucciones y un espacio para introducir un intento de número, pero el
formulario no hará nada por ahora.
El lugar donde agregaremos todo nuestro código es dentro del
elemento <script> en la parte de abajo del HTML.
<script>

// Tu código javascript va aqui.

</script>

Añadir variables para guardar los datosSección

Empecemos. En primer lugar, agrega las siguientes líneas dentro de tu
elemento <script>:
var randomNumber = Math.floor(Math.random() * 100) + 1;

var guesses = document.querySelector('.guesses');

var lastResult = document.querySelector('.lastResult');
 var lowOrHi = document.querySelector('.lowOrHi');

var guessSubmit = document.querySelector('.guessSubmit');

var guessField = document.querySelector('.guessField');

var guessCount = 1;
var resetButton;

Esta sección del código establece las variables que necesitamos para almacenar
los datos que usará nuestro programa. Las variables son básicamente
contenedores de valores (como números o cadenas de texto). Creas una variable
con la palabra clave var seguida del nombre de la variable. A continuación, puedes
asignar un valor a la variable con el signo de igual (=) seguido del valor que deseas
darle.
En nuestro ejemplo:

 A la primera variable - randomNumber -se le asigna un número al azar entre 1 y 100,

calculado usando un algoritmo matemático.
 Las siguientes tres variables están hechas para almacenar cada una una referencia
a los párrafos de resultados en nuestro HTML, y son usadas para insertar valores
en los párrafos más adelante en el código:

 <p class="guesses"></p>
 <p class="lastResult"></p>

<p class="lowOrHi"></p>

 Las siguientes dos variables almacenan referencias al ingreso de texto y al botón

"enviar" del formulario, y se usan para controlar los envíos de intentos más
adelante.

 <label for="guessField">Adivina el número: </label><input type="text"

id="guessField" class="guessField">

<input type="submit" value="Enviar intento" class="guessSubmit">

 Nuestras dos variables finales almacenan un conteo de intentos de 1 (que se utiliza

para tener un registro de cuántos intentos ha tenido el jugador), y una referencia al
botón de reinicio que aún no existe (pero existirá luego).

Note: Aprenderá mucho más sobre las variables más adelante en el curso,
comenzando con siguiente artículo.
FuncionesSección
A continuación, agrega lo siguiente debajo de tu código JavaScript anterior:
function checkGuess() {
alert('Soy un marcador de posición');
}

Las funciones son bloques de código reutilizables que puedes escribir una vez y
ejecutar una y otra vez, ahorrando la necesidad de seguir repitiendo el código todo
el tiempo. Es realmente útil. Hay varias maneras de definir funciones, pero por
ahora nos concentraremos en un tipo simple. Aquí hemos definido una función
usando la palabra clave function, seguida de un nombre, con paréntesis puestos
después de él. Después de eso ponemos dos llaves ({ }). Dentro de las llaves se
encuentra todo el código que queremos ejecutar cada vez que llamamos a la
función.
Cuando queramos ejecutar el código, escribimos el nombre de la función seguido
de los paréntesis.

Probemoslo ahora. Guarda tu código y actualiza la página en tu navegador. Luego

ves a la developer tools JavaScript console, e ingresa la siguiente línea:
checkGuess();

Después de presionar Return / Enter , debería aparecer una alerta que dice "Soy
un marcador de posición"; hemos definido una función en nuestro código que
crea una alerta cada vez que la llamamos.
Nota: Aprenderás mucho más sobre las funciones más adelante en el curso.
OperadoresSección
Los operadores de JavaScript nos permiten realizar pruebas, cálculos
matemáticos, unir cadenas y otras cosas similares.

Si aún no lo has hecho, guarda tu código, actualiza la página en tu navegador y

abre el developer tools JavaScript console. Luego, podemos intentar escribir los
ejemplos que se muestran a continuación — escribe cada una de las columnas
"Ejemplo" exactamente como se muestra, presionando Return / Enter después de
cada una, y mira los resultados que devuelven. Si no tienes acceso fácil a las
herramientas de desarrollo del navegador, siempre puedes usar la sencilla consola
integrada que se muestra a continuación:
Abrir en CodePen Abrir en JSFiddle
Primero echemos un vistazo a los operadores aritméticos, por ejemplo:

Operador Descripción
+ Suma
- Resta
* Multiplicación
 Operador Descripción
/ División
También puede usar el operador + para unir cadenas de texto (en la programación,
esto se llama concatenación). Intente ingresar las siguientes líneas, una a la vez:
var name = 'Bingo';
name;
var hello = ' says hello!';
hello;
var greeting = name + hello;
greeting;

También hay algunos operadores de acceso directo disponibles,

llamados operadores de asignación aumentada. Por ejemplo, si quiere
simplemente agregar una nueva cadena de texto a una existente y devolver el
resultado, puede hacer esto:
name += ' says hello!';

Esto es equivalente a

name = name + ' says hello!';

Cuando estamos ejecutando pruebas de true/false (por ejemplo, dentro de

condicionales — consulte abajo) usamos operadores de comparación. Por ejemplo:
Operador Descripción
=== Estricta igualdad (¿es exactamente lo mismo?)
!== No igualdad (¿no es lo mismo?)
< Menor que
> Mayor que
CondicionalesSección
Volviendo a nuestra función checkGuess(), no queremos que sólo nos tire un
mensaje de marcador de posición. Queremos que corrobore si el intento de un
jugador es correcto o no, y que responda de manera apropiada.
En este punto, reemplaza tu actual función checkGuess() con esta versión:
function checkGuess() {
var userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = 'Previous guesses: ';
}
guesses.textContent += userGuess + ' ';

if (userGuess === randomNumber) {

 lastResult.textContent = 'Congratulations! You got it right!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
setGameOver();
} else {
lastResult.textContent = 'Wrong!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent = 'Last guess was too low!';
} else if(userGuess > randomNumber) {
lowOrHi.textContent = 'Last guess was too high!';
}
}

guessCount++;
guessField.value = '';
guessField.focus();
}

Ésto es un montón de código - uf! Vayamos por cada sección para explicar qué
hace.

 La primera línea (línea 2 desde arriba) declara una variable llamada userGuess y
establece su valor al actual ingresado en el campo de texto. También ejecutamos
este valor a través del método incorporado Number(), sólo para asegurarnos que el
valor definitivamente es un número.
 Luego nos encontramos con nuestro primer bloque de código condicional (líneas
3-5 desde arriba). un bloque de código condicional te permite ejecutar código de
manera selectiva, dependiendo de que cierta condición sea verdadera o no. Se
asemeja un poco a una función, pero no lo es. La forma más simple de un código
condicional comienza con la palabra clave if, luego unos paréntesis, luego unas
llaves. Dentro de los paréntesis incluímos un test. Si el test resulta verdadero,
ejecutamos el código dentro de las las llaves. Si no, no lo hacemos y pasamos al
siguente segmento de código. En este caso, en test analiza si la
variable guessCount es igual a 1 (por ejemplo, si fue el primer intento del jugador o
no):
guessCount === 1

Si lo es, hacemos que el contenido del texto del parrafo de intentos sea igual a
"intentos previos". Si no, no lo hacemos.
 La línea 6 añade el valor actual de userGuess al final del párrafo de guesses, más un
espacio en blanco así hay espacio entre cada intento que se muestra.
 El siguiente bloque (líneas 8-24 de arriba) realiza un par de corroboraciones:
o El primer if(){ } comprueba si el intento del jugador es igual
al randomNumberestablecido al comienzo de nuestro JavaScript. Si lo es, el jugador
 ha adivinado correctamente y se ha ganado el juego, así que le mostramos al
jugador un mensaje de felicitaciones en color verde, limpiamos los contenidos del
cuadro de información de intentos Low/High, y ejecutamos una función
llamada setGameOver(), que luego discutiremos.
o Ahora hemos encadenado otro test al final del último usando la estructura else
if(){ }. Éste comprueba si este turno es el último turno del jugador. Si lo es, el
programa hace lo mismo que en el bloque anterior, excepto que en vez de mostrar
un mensaje de felicitaciones, muestra uno de fin del juego.
o El bloque final encadenado al final de este código (el else { }) contiene código que
sólo es ejecutado si ninguno de los otros dos tests anteriores dio verdadero (por
ejemplo si el si el jugador no tuvo ningún acierto pero aún le quedan intentos). En
este caso, les decimos que son incorrectos, luego realizamos otro test condicional
para comprobar si el intento fue más alto o más bajo que la respuesta, mostrando
un mensaje para decirle si tiene que ir más alto o bajo, según sea apropiado.
 Las últimas tres líneas en la función (línea 26-28 de arriba) nos preparan para que
se envíe el siguiente intento. Añadimos 1 a la variable guessCount así el jugador usa
su turno (++ es una operación de incremento - incremento en 1), y vaciamos el valor
del campo de texto, dejándolo listo para que el siguiente intento sea ingresado.
EventosSección
A esta altura, hemos implementado muy bien la función checkGuess(), pero no hará
nada porque aún no la hemos llamado. Lo ideal sería que sea llamada cuando se
presiona el botón de "Enviar intento", y para hacer esto necesitamos usar un
evento. Los eventos son acciones que ocurren en el navegador, como clikear sobre
un botón , o una página que se carga, un video que se reproduce, en respuesta a
los cuales podemos ejecutar bloques de código. Los constructos que escuchan si
escucha algún evento se llaman escuchadores de eventos, y los bloques de
código ejecutados en respuesta a la puesta en marcha del evento se
llaman manejadores de eventos.
Añade la siguiente línea debajo de tu función checkGuess():
guessSubmit.addEventListener('click', checkGuess);

Aquí estamos agregando un escuchador de evento al botón guessSubmit. Éste es un

método que lleva dos valores de entrada (llamados argumentos) - el tipo de evento
que queremos escuchar (en este caso click) como una cadena, y el código que
queremos ejecutar cuando ocurra el evento (en este casi la función checkGuess() -
fíjate que no necesitamos especificar los paréntesis cuando lo escribimos
dentro addEventListener()).
Prueba de guardar y refrescar tu código ahora, y tu ejemplo ahora debería
funcionar, hasta cierto punto. El único problema ahora es que si tu aciertas la
respuesta correcta o te quedas sin intentos, el juego dejará de funcionar porque
todavía no hemos definido la función setGameOver() que se supone que se tiene que
ejecutar una vez que el juego ha acabado. Agreguemos nuestro código faltante
ahora y completemos la funcionalidad del ejemplo.
Finalizando la funcionalidad del juegoSección
Agreguemos esa función setGameOver al pie de nuestro código y luego repasémoslo.
Agrega ésto ahora, debajo del resto de tu JavaScript:
 function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}

 Las primeras dos líneas deshabilitan la entrada de texto y el botón al fijar sus
propiuedades deshabilitadas como verdadero. Ésto es necesario, porque si no lo
hiciéramos, el usuario podría seguir enviando más intentos luego de que el juego
hubiera acabado, lo cual complicaría las cosas.
 Las siguientes tres líneas generan un elemento <button>, fijan su etiqueta de texto
a "Comenzar nuevo juego", y lo añaden al pie de nuestro HTML existente.
 La línea final establece un escuchador de eventos en nuestro botón nuevo de
manera que cuando se haga click sobre él, una función llamada resetGame() sea
ejecutada.
Ahora necesitamos definir esta función también! Agrega el siguiente código, de
nuevo al final de tu JavaScript:

function resetGame() {
guessCount = 1;

var resetParas = document.querySelectorAll('.resultParas p');

for (var i = 0 ; i < resetParas.length ; i++) {
resetParas[i].textContent = '';
}

resetButton.parentNode.removeChild(resetButton);

guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();

lastResult.style.backgroundColor = 'white';

randomNumber = Math.floor(Math.random() * 100) + 1;

}

Este más bien largo bloque de código reinicia todo completamente al estado en el
que estaba el juego al comienzo, así el jugador puede jugar nuevamente. Ésto:

 Baja el guessCount de nuevo a 1

 Limpia todos los párrafos de información.
 Quita de nuestro código el botón de reinicio.
 Habilita los elementos de forma, y vacía y centra el campo de texto, lo cual queda
listo para que se ingrese un nuevo intento.
 Remueve el color de fondo del párrafo lastResult.
 Genera un nuevo número al azar así no sigues intentando adivinar el mismo
número otra vez.

A esta altura deberias tener un juego (simple) funcionando completamente -

felicitaciones!
Lo único que nos queda por hacer ahora en este artículo es hablar acerca de
algunas otras caractéristicas importantes de código que tal vez ya has visto aunque
tal vez no hayas notado.

BuclesSección
Una parte del código anterior, al cual tenemos que examinar más en detalle, es el
bucle for. En programación, los bucles son un concepto muy importante que te
permiten seguir ejecutando un segmento de código una y otra vez, hasta que se
cumpla una condición determinada.
Para comenzar, ve nuevamente a tu consola JavaScript de las herramientas de
Desarrollador del navegador e ingresa lo siguiente:
for (var i = 1 ; i < 21 ; i++) { console.log(i) }

¿Qué sucedió? Los números del 1 al 20 se imprimieron en la consola. Ésto es

debido al bucle. Un bucle for lleva tres valores de entrada (argumentos):
1. Un valor de inicio: En este caso, comenzamos un conteo en 1, pero este número
podría ser el que tu quieras. También puedes reemplazar i con cualquier nombre
que quieras, pero por convención se usa i porque es corto y fácil de recordar.
2. Una condición de salida: Aquí hemos especificado i < 21 - el bucle va a continuar
hasta que i deje de ser menos de 21. Cuando i alcance el 21, el bucle va a dejar
de ser ejecutado.
3. Un operador de incremento: Hemos especificado i++, que significa "agregar 1 a
i"El bucle se va a ejecutar una vez por cada valor de i hasta que i alcance un valor
de 21 (como dijimos arriba). En este caso, simplemente estamos imprimiendo el
valor de i a la consola en cada iteración usando console.log().
Ahora echémosle un vistazo nuevamente al bucle en nuestro juego de adivinar el
número - lo siguiente se puede hallar dentro de la función resetGame():
var resetParas = document.querySelectorAll('.resultParas p');
for (var i = 0 ; i < resetParas.length ; i++) {
resetParas[i].textContent = '';
}

Este código crea una variable que contiene una lista de todos los párrafos dentro
de <div class="resultParas"> usando el método querySelectorAll(), luego realiza
bucles a través de cada uno, removiendo el contenido textual a su paso.
Una pequeña discusión acerca de objetosSección
Agreguemos una última mejora antes de que nos metamos en esta discusión.
Agrega la siguiente línea justo debajo de la línea var resetButton; cerca del borde
superior de tu JavaScript, luego guarda tu archivo:
guessField.focus();

Esta línea utiliza el método focus() para poner el cursor de texto en el campo de
texto <input> apenas se carga la página, lo que significa que el usuario puede
comenzar a ingresar su primer intento inmediatamente, y no hace falta que primero
haga click en el campo de formulario. Es sólo una pequeña adición pero mejora la
usabilidad - dándole al usuario una buena señal visual acerca de qué tiene que
hacer para jugar el juego.
Analicemos que está ocurriendo acá un poquito más a fondo. En JavaScript todo
es un objeto. Un objeto es una colección de funcionalidad relacionada almacenada
en un solo grupo. Tú puedes crear tus propios objetos pero eso es bastante
avanzado y no lo vamos a ver sino hasta mucho más adelante en el curso. Por
ahora, simplemente discutiremos de manera breve los objetos integrados que
contiene tu navegador, los cuales te permiten realizar un montón de cosas útiles.

En este caso en particular, primero creamos una variable guessField que almacena
una referencia al campo de formulario de entrada de texto en nuestro HTML - la
siguiente línea puede encontrarse dentro de nuestras declaraciones de variables
cerca del borde superior:
var guessField = document.querySelector('.guessField');

Para conseguir esa referencia, usamos el método querySelector() del

objeto document. querySelector() lleva una pieza de información - un selector
CSS que selecciona el elemento al cual tú quieres hacer referencia.

Como guessField ahora contiene una referencia a un elemento <input>, ahora

tendrá acceso a una cantidad de propiedades (básicamente, variables
almacenadas dentro de objetos, algunos de los cuales no pueden tener cambios en
su valor) y métodos (básicamente, funciones almacenadas dentro de objetos. Un
método disponible para elementos de entrada es focus(), así que ahora podemos
usar esta línea para hacer foco en la entrada de texto
guessField.focus();

Las variables que no contienen referencias a elementos de formulario, no

tendrán focus()disponible para ellos. Por ejemplo, la variable guesses contiene una
referencia a un elemento <p>, y guessCount contiene un número.
Jugando con los objetos en el navegadorSección
Juguemos un poquito con algunos objetos del navegador.
1. Primero que nada, abre tu programa en un navegador.
2. Luego, abre tus herramientas de desarrollador del navegador y asegúrate que la
pestaña de consola de JavaScript esté abierta.
3. Escribe guessField y la consola te mostrará que la variable contiene un
elemento <input>. También notarás que la consola autocompleta nombres de
objetos que existen dentro del entorno de ejecución, incluídas tus variables!
4. Ahora escribe lo siguiente:

guessField.value = 'Hello';

5. La propiedad value representa el valor actual ingresado en el campo de texto.

Verás que al ingresar este comando, hemos cambiado lo que es!
6. Ahora intenta ingresar guesses y presionar volver (return). La consola te mostrará
que la variable contiene un elemento <p>.
7. Ahora intenta ingresar la siguiente línea:

guesses.value

8. El navegador te dará un undefined como resultado porque value no existe en los

párrafos.
9. Para cambiar el texto dentro de un párrafo, necesitas la propiedad textContent.
Prueba con ésto:
guesses.textContent = 'Where is my paragraph?';

10. Ahora, sólo por diversión, intenta ingresr las líneas que figuran debajo, una por
una:

11. guesses.style.backgroundColor = 'yellow';

12. guesses.style.fontSize = '200%';
13. guesses.style.padding = '10px';

guesses.style.boxShadow = '3px 3px 6px black';

Cada elemento en una página tiene una propiedad style, que en sí misma contiene
un objeto cuyas propiedades contienen todos los estilos CSS inline aplicadas a ese
elemento. Ésto permite fijar de manera dinámica nuevos estilos de CSS sobre
elementos usando JavaScript.
Terminamos por ahora...Sección
Así que eso es todo para construir el ejemplo - llegaste al final, bien hecho! Prueba
tu código final, o juega aquí con la versión terminada. Si no puedes lograr que tu
ejemplo funcione, contrástalo con el código fuente.

Cuando construiste el juego "Adivina el número" en el artículo anterior, puede que

te hayas dado con que no funcionaba. Tranquilo - este artículo apunta a brindarte
 algunos consejos simples acerca de cómo encontrar y reparar errores en
programas de JavaScript, y de esta manera evitar que te arranques los cabellos
ante problemas así.

Prerrequisitos: Conocimientos básicos de computación, entendimiento básico de HTML y CSS, y

entendimiento de lo que es JavaScript.

Objetivo: Ganar habilidad y confianza para comenzar a reparar problemas simples en tu

propio código.

Tipos de erroresSección
En general, cuando haces algo mal en programación, hay dos tipos de errores
principales con los que te puedes encontrar:

 Errores sintácticos: Son los errores de ortografía en tu código que provocan que
tu programa no se ejecute en absoluto, o que deje de funcionar a mitad de camino -
también te van a aparecer mensajes de error. Por lo general no es tan difícil
corregirlos, ¡siempre y cuando conozcas las herramientas correctas y sepas qué
significan los mensajes de error!
 Errores lógicos: Estos son errores en donde la sintaxis es correcta pero el código
no resulta lo que tu esperabas, lo cual significa que el programa se ejecuta de
manera exitosa pero da resultados incorrectos. Éstos son más difíciles de arreglar
que los errores sintácticos, ya que generalmente no hay ningún mensaje de error
que te pueda orientar hacia la fuente del error.
Bueno, tampoco es que es así de simple - a medida que hurgues más a fondo,
verás que hay algunos otros diferenciadores. Pero las clasificaciones de arriba vas
a servirnos en esta etapa temprana de tu carrera. Vamos a examinar estos dos
tipos mientras avanzamos.
Un ejemplo erróneoSección
Para comenzar, volvamos a nuestro juego de adivinar el número - excepto que esta
vez vamos a explorar una versión que tiene insertados algunos errores de manera
deliberada. Ve a Github y hazte una copia local de number-game-
errors.html (puedes verlo ejecutado en vivo aquí).
1. Para comenzar, abre la copia local dentro de tu editor de texto favorito, y tu
navegador.
2. Intenta Jugar el juego - notarás que cuando presionas "Enviar Intento" ("Submit
guess"), no funciona!
Nota: Puede suceder que tengas tu propia versión de ejemplo del juego que no
funcione y que quieras arreglar. Igualmente nos gustaría que en este artículo
trabajes con nuestra versión para que puedas aprender las técnicas que estamos
enseñando aquí. Luego puedes regresar y tratar de arreglar tu ejemplo.
En este punto, consultemos la consola de desarrollador para ver si podemos ver
algún error de sintaxis y, luego, tratar de corregirlo. Abajo aprenderás cómo.
 Arreglando errores sintácticosSección
Anteriormente en este curso, te hicimos escribir algunos comandos simples de
JavaScript en la consola JavaScript de herramientas de desarrollador (si no te
acuerdas cómo abrirlo en tu navegador, sigue el enlace). Algo aún más útil es que
la consola te brinda mensajes de error cada vez que ocurre algún error sintáctico
dentro del JavaScript que alimenta el motor JavaScript del buscador. Ahora, vamos
a la caza.
1. Ve a la pestaña donde tienes abierto number-game-errors.html, y abre tu consola
JavaScript. Deberías ver un mensaje de error a lo largo de las siguientes
líneas:

2. Éste es un error bastante fácil de rastrear, y el navegador te da varios pedacitos de

información útiles para ayudarte (la captura de pantalla de arriba es de Firefox,
pero otros navegadores proveen información similar). De izquierda a derecha,
tenemos:
 Una "x" roja para indicar que ésto es un error.
 Un mensaje de error que indica qué fue lo que salió mal: "TypeError:
guessSubmit.addeventListener is not a function"
 Un enlace de "Aprenda más"("Learn more") que conecta con una página de MDN
que explica de manera bien detallada qué significa este error.
 El nombre del archivo JavaScript, que conecta con la pestaña del Depurador de
DevTools. Si sigues este enlace, verás la línea exacta donde el error está
resaltado.
 El número de línea donde está el error, y el número de caracter de esa línea donde
el error se observa por primera vez. En este caso, tenemos línea 86, caracter
número 3.
1. Si nos fijamos en la línea 86 de nuestro editor de código, encontraremos ésto:

guessSubmit.addeventListener('click', checkGuess);

2. El mensaje de error dice "guessSubmit.addeventListener is not a function", así que

probablemente hemos escrito algo mal. Si no estás seguro de cómo se escribe
algún segmento sintáctico , siempre es buena idea buscar la función en MDN. La
mejor forma de hacerlo es, en tu navegador favorito, buscar "nombre-de-función".
Aquí tienes un atajo para ahorrarte algo de tiempo en esta
ocasión: addEventListener().
3. Entonces, viendo esta página, parece que el error es que hemos escrito mal el
nombre de la función! Recuerda que JavaScript distingue mayúsculas de
minúsculas, así que la más mínima diferencia de ortografía o tipografía va a
provocar un error. Cambiar addeventListener por addEventListener debería
solucionarnos el problema. Hazlo ahora.
Nota: Héchale un vistazo a nuestra página de referencia TypeError: "x" is not a
function para más detalles acerca de este error.
Errores sintácticos: segunda rondaSección
1. Guarda tu página y refresca, y verás que el error ya no está.
2. Ahora, si tratas de ingresar un intento y presionas el botón de enviar, verás... ¡otro
error!

3. Esta vez, el error que se reporta es "TypeError: lowOrHi is null", en la línea 78.
Nota: Null es un valor especial que significa "nada" o "sin valor", así que lowOrHi ha
sido declarada e inicializada, pero no con ningún valor significativo - no tiene
ningún tipo o valor.
Nota: Este error no apareció apenas se cargó la página porque ocurrió dentro de
una función (dentro del bloque checkGuess() { ... }). Como ya aprenderás pronto
más en detalle en nuestro artículo acerca de funciones, el código dentro una función
se ejecuta con un alcance diferente del código fuera de una función. En este caso, el
código no fue ejecutado y el error no saltó sino hasta que la función checkGuess()fue
ejecutada por la línea 86.
4. Fíjate en la línea 78 y verás el siguiente código:

lowOrHi.textContent = 'Last guess was too high!';

5. Esta línea está tratando de fijar la propiedad textContent de la variable lowOrHi a

una cadena de texto, pero no está funcionando porque lowOrHi no contiene lo que
se supone que contenga. Veamos por qué - intenta encontrar otras instancias
 de lowOrHien el código. La instancia más temprana que encontrarás en el
JavaScript es en la línea 48:
var lowOrHi = document.querySelector('lowOrHi');

6. Acá estamos tratando de que la variable contenga una referencia a un elemento en

el documento del HTML. Veamos si el valor es null después de que la línea ha
sido ejecutada. Añade el siguiente código en la línea 49:
console.log(lowOrHi);

Nota: console.log() es una función depuradora realmente útil que imprime un valor
a la consola. Así que imprimirá el valor de lowOrHi a la consola en cuanto hayamos
tratado de fijarlo en la línea 48.
7. Guarda y refresca, y deberías ahora ver el resultado de console.log() en tu
consola. Como era de esperar, el valor de lowOrHi es null en este punto, así que
definitivamente hay un problema con la línea 48.
8. Pensemos cúal podría ser el problema. La línea 48 está usando el
método document.querySelector() para tener la referencia de un elemento al
seleccionarlo con un selector CSS. Revisando más a fondo nuestro archivo,
encontramos el párrafo en cuestión:
<p class="lowOrHi"></p>

9. Entonces, aquí necesitamos un selector CSS, que comienza con un punto (.), pero
el selector del método querySelector() en la línea 48 no tiene ningún punto. ¡Ésto
podría ser un problema! Intenta cambiar de lowOrHi a .lowOrHi en la línea 48.
10. Prueba de guardar y refrescar nuevamente, y tu declaración console.log() debería
traerte el elemento <p> que queremos. ¡Uf! Otro error corregido! Ahora puedes
borrar tu línea console.log(), o guardarla como referencia para luego - como tú
quieras.
Nota: Visita nuestra página de referencia TypeError: "x"is (not) "y" para más
detalles acerca de este error.
Errores sintácticos: Tercera rondaSección
1. Si intentas ahora jugar nuevamente, te debería ir un poco mejor - el juego se
debería poder jugar perfectamente bien hasta el final, ya sea porque acertaste con
el número correcto o porque te quedaste sin vidas.
2. En este punto, el juego falla una vez más y nos tira el mismo error que obtuvimos al
comienzo - "TypeError: resetButton.addeventListener is not a function". Sin
embargo, esta vez figura que el error proviene de la línea 94.
3. Revisando la línea 94, es fácil ver que aquí cometimos el mismo error. Nuevamente
tenemos que cambiar addevent.Listener por addEventListener. Hazlo ahora.
Un error de lógicaSección
A esta altura, el juego se debería poder jugar bien; sin embargo, después de haber
jugado un par de veces notarás, indudablemente, que el número "al azar" que
debes adivinar es siempre 0 o 1. ¡No es precisamente así la manera en que
queremos jugar!
 En algún lugar hay, obviamente, un error en la lógica del juego - el juego no nos tira
ningún error, simplemente no está jugando bien.

1. Busca la variable randomNumber y las líneas donde se estableció por primera vez el
número al azar. La instancia que almacena el número al azar que queremos
adivinar al comienzo del juego debería estar alrededor de la línea número 44:
var randomNumber = Math.floor(Math.random()) + 1;

Y la que genera el número al azar antes de cada juego subsecuente está alrededor
de la línea 113:
randomNumber = Math.floor(Math.random()) + 1;

2. Para verificar si estas líneas son, en efecto, el problema, vayamos nuevamente con
nuestra amiga console.log() - inserta la siguiente línea directamente debajo de
cada una de las dos líneas anteriores.
console.log(randomNumber);

3. Guarda y refresca, y luego juega un par de veces - verás que randomNumber es igual
a 1 en cada punto en donde está conectado a la consola.
Desentrañando la lógicaSección
Para arreglar ésto, consideremos cómo está funcionando esta línea. Primero,
invocamos Math.random(), que genera un número decimal al azar entre 0 y 1, por
ejemplo: 0.5675493843.
Math.random()

A continuación, pasamos el resultado de invocar Math.random() a través

de Math.floor(), que redondea el número al entero más cercano. Luego agregamos
1 a ese resultado:
Math.floor(Math.random()) + 1

Redondear un número decimal al azar entre 0 y 1 siempre va a resultar en 0, así

que si le agregamos 1, siempre va a resultar en 1. Necesitamos multiplicar el
número al azar por 100 antes de redondearlo. Hacerlo nos daría un número al azar
entre 0 y 99:

Math.floor(Math.random()*100);

Por consiguiente, si queremos agregar 1 para que nos dé un número al azar entre
1 y 100:

Math.floor(Math.random()*100) + 1;
Intenta cambiar ambas líneas, luego guárdalas y refresca - ¡el juego debería ahora
funcionar de la manera que queremos!

Otros errores comunesSección

Hay otros errores comunes que encontrarás en tu código. En ésta sección te
resaltamos la mayoría de ellos.

SyntaxError: missing ; before statementSección

Este error generalmente significa que te salteaste un punto y coma al final de una
de tus líneas de código, pero a veces puede ser más críptico. Por ejemplo, si
cambiamos esta linea dentro de la función checkGuess():
var userGuess = Number(guessField.value);

var userGuess === Number(guessField.value);

Ésto nos tira un error porque piensa que estás tratando de hacer algo diferente.
Deberías asegurarte de no confundir el operador de asignación (=) - que fija la
variable para que sea igual a un valor - con el operador de igualdad estricta (===),
testea si un valor es igual a otro, y tira un resultado verdadero/falso.
Nota: Visita nuestra página de referencia SintaxError: missing ; before
statement para más detalles acerca de éste error.
El programa siempre dice que has ganado, más allá de lo que hayas
ingresadoSección
Ésto podría ser otro síntoma de haber confundido los operadores de asignación y
de igualdad estricta. Por ejemplo, si fuésemos a cambiar esta línea dentro
de checkGuess():
if (userGuess === randomNumber) {

if (userGuess = randomNumber) {

el test siempre resultaría verdadero, lo que provocaría que el programa reporte que
se ha ganado el juego. ¡Ten cuidado!
SyntaxError: missing ) after argument listSección
Éste es bastante simple - generalmente significa que te ha faltado cerrar paréntesis
al final de una llamada de función o método.
Nota: Visita nuestra página de referencia SyntaxError: missing ) after argument
list para más detalles acerca de éste error.
SyntaxError: missing : after property idSección
Este error generalmente se relaciona con un objeto JavaScript formado de manera
incorrecta, pero en este caso lo obtuvimos al cambiar

function checkGuess() {

por

function checkGuess( {

Ésto provocó que el navegador pensara que estamos tratando de pasar los
contenidos de la función a la función como un argumento. ¡Ten cuidado con esos
paréntesis!

SyntaxError: missing } after function bodySección

Éste es fácil - generalmente significa que te ha faltado poner una de las llaves de
una función o estructura condicional. Nos dio este error al borrar una de las llaves
hacia el final de la función checkGuess().
SyntaxError: expected expression, got 'string' or SyntaxError:
unterminated string literalSección
Estos errores generalmente significan que te ha faltado las comillas de apertura o
de cierre del valor de una cadena. En el primer error de arriba, string (cadena) se
reemplazaría con el/los caracter/es que el navegador encontró en lugar de una
comilla al comienzo de una cadena- El segundo error significa que la cadena no ha
sido finalizada con una comilla.
Para todos estos errores, piensa acerca de cómo resolvimos los ejemplos que
trabajamos en la guía. Cuando surja algún error, fíjate en el número de línea que
se te indica, ve a esa línea y fíjate si puedes darte cuenta de lo que está mal. Ten
en cuenta que el error no necesariamente se va a encontrar en esa línea, ni puede
que haya sido causado por exactamente el mismo problema que mencionamos
antes.

Nota: Visita nuestras páginas de referencia SyntaxError: Unexpected

token y SyntaxError: unterminated string literal para conocer acerca de estos
errores más en detalle.
ResumenSección
Así que ahí lo tenemos, conocimientos básicos para resolver errores en programas
simples en JavaScript. No siempre va a ser así de fácil darse cuenta de qué está
mal con tu código, pero al menos esto te quitará menos horas de sueño y te
permitirá avanzar un poco más rápido cuando las cosas no salen bien en tu camino
de aprendizaje.
 Te puede servirSección
 Hay muchos otros tipos de errores que no están listados aquí; estamos compilando
una referencia que explica detalladamente qué significan - Visita la Referencia de
errores en JavaScript.
 Si te topas dentro de tu código con algún error que no estás seguro de cómo
arreglarlo despues de haber leído este artículo, ¡Puedes obtener ayuda! Pregunta
en el Hilo de discusión del área de aprendizaje, o en el canal IRC #mdn en Mozilla
IRC. Cuéntanos cuál es es error que has obtenido y nosotros trataremos de
ayudarte. Un listado de tu código también nos sería de utilidad.
Anterior Overview: First stepsSiguiente

Etiquetas y colaboradores del documento

Etiquetas:
 Aprender

 Artículo

 console.log

 depurar

 Error

 Herramientas de Desarrollador

 Principiante

 Tutorial
Colaboradores en esta página: Alfacoy, NataliaCba, esencialinux
Última actualización por: Alfacoy, 10 oct. 2018 10:25:31
1. Aprende sobre desarrollo web
2. JavaScript
3. Primeros pasos con JavaScript
4. ¿Qué salió mal? Reparando errores en JavaScript
Temas relacionados
1. Complete beginners start here!
2. Getting started with the Web
Después de leer los dos últimos artículos, ahora debe saber qué es JavaScript, qué
puede hacer por usted, cómo lo usa junto con otras tecnologías web y cuáles son
sus características principales desde un alto nivel. En este artículo vamos a
centrarnos en lo básico, y veremos cómo trabajar con la mayoría de los
componentes más básicos de JavaScript: Variables.
 Prerrequisitos: Conocimientos básicos de informática, comprensión básica de HTML y
CSS, comprensión de lo que es JavaScript.

Objectivo: Familiarizarse con los conceptos básicos de las variables de JavaScript.

Herramientas que necesitasSección

A lo largo de este artículo, se le pedirá que escriba las líneas de código para probar
su comprensión del contenido. Si está utilizando un navegador de escritorio, el
mejor lugar para escribir su código de muestra es la consola de JavaScript de su
navegador (consulte Qué son las herramientas de desarrollo del navegador para
obtener más información sobre cómo acceder a esta herramienta).
Sin embargo, también proporcionamos una consola JavaScript simple incrustada
en la página siguiente para que ingrese este código, en caso de que no esté
utilizando un navegador con una consola JavaScript fácilmente disponible, o
encuentre una consola en la página más cómoda.

¿Qué es una variable?Sección

Una variable es un contenedor para un valor, como un número que podríamos usar
en una suma, o una cadena que podríamos usar como parte de una oración. Pero
una cosa especial acerca de las variables es que sus valores contenidos pueden
cambiar. Veamos un ejemplo simple:

<button>Press me</button>
var button = document.querySelector('button');

button.onclick = function() {
var name = prompt('What is your name?');
alert('Hello ' + name + ', nice to see you!');
}

En este ejemplo, presionar el botón ejecuta un par de líneas de código. La primera

línea muestra un cuadro en la pantalla que le pide al lector que ingrese su nombre,
y luego almacena el valor en una variable. La segunda línea muestra un mensaje
de bienvenida que incluye su nombre, tomado del valor de la variable.

Para entender por qué esto es tan útil, pensemos en cómo escribiríamos este
ejemplo sin usar una variable. Terminaría luciendo algo como esto:

var name = prompt('What is your name?');

if (name === 'Adam') {

alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
 alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
alert('Hello Chris, nice to see you!');
}

// ... and so on ...

Puede que no comprendas del todo la sitaxis que estamos utilizando (todavía),
pero serás capaz de entender la idea — si no tuviesemos las variable disponibles,
tendríamos que implementar un bloque gigante de código que compruebe el
nombre enviado por el usuario, y después muestre el mensaje correspondiente
para ese nombre. Obviamente eso es ineficiente (el código es muy grande, incluso
para solo cuatro opciones), y seguiría sin funcionar — posiblemente no pudiese
almacenar todas esas opciones.

Las variables tienen sentido, y a medida que vayas aprendiendo más sobre
JavaScript, te irán resultando más naturales.

Otra cosa especial de las variables es que pueden tener de todo — no solo
cadenas y números. Las variables también pueden contener datos complejos e
incluso funciones enteras con las que hacer cosas asombrosas. Aprenderás más
sobre esto más adelante.

Recuerda que hemos dicho que las variables contienen valores. Es una importante
diferencia a tener en cuenta. Las variables no son valores por sí mismas; son
contenedores de valores. Puedes pensar en ellas con una caja de cartón donde
puedes guardar cosas dentro.

Declarando una variableSección

Para usar una variable, primero tienes que crearla — más especificamente, a esto
se le llama declarar una variable. Para hacer esto, escribimos la palabra clave var o
let seguido del nombre que le quieres poner a la variable:

var myName;
var myAge;

Ahora estamos creando dos variable llamadas myName y myAge. Ahora prueba a
escribir estas líneas en la consola de tu navegador, o en la consola de debajo
(Puedes abrir la consola en una pestaña o en una ventana diferente, si así lo
prefieres). Después, prueba creando una variable (o dos) con los nombres que tú
elijas.
Abrir en CodePen Abrir en JSFiddle
Nota: En JavaScript, todas las instrucciones deben terminar con punto y coma (;) —
tu código puede funcionar correctamente para líneas singulares, pero
probablemente no funcionará cuando estés escribiendo múltiples líneas de código
juntas. Procura acostumbrarte a incluirlo.
Puedes probar si estos valores existen ahora en el entorno de ejecución tecleando
únicamente el nombre de las variables, por ejemplo:

myName;
myAge;

Ahora mismo no tienen ningún valor, son contenedores vacíos. Cuando tecleas el
nombre de las variables, recibirás de vuelta el resultado undefined. Si las variables
no existen, recibirás un mensaje de error — prueba a teclear:
scoobyDoo;

Nota: No confundas una variable que existe y que no tiene asignado ningún valor,
con una variable que no existe — son cosas diferentes.
Inicializar una variableSección
Una vez que has declarado la variable, puedes inicializarla con un valor. Haz esto
escribiendo el nombre de la variable, seguido del signo de igual (=), continuado por
el valor que le quieres dar. Por ejemplo:
myName = 'Chris';
myAge = 37;

Intenta volver a la consola y escribe estas líneas. You should see the value you've
assigned to the variable returned in the console to confirm it, in each case. Again,
you can return your variable values by simply typing their name into the console —
try these again:

myName;
 myAge;

Puedes declarar e inciar una variable al mismo tiempo de la siguiente forma:

var myName = 'Chris';

Probablemente esto sea lo que hagas la mayoría del tiempo, es más rápido que
hacer las dos acciones en líneas de código diferentes.

Note: If you write a multiline JavaScript program that declares and initializes a
variable, you can actually declare it after you initialize it and it will still work. This
is because variable declarations are generally done first before the rest of the code is
executed. This is called hoisting — read var hoisting for more detail on the subject.
Actualizando una variableSección
Una vez que has inicializado la variable con un valor, puedes cambiar (o actualizar)
ese valor simplemente dándole un valor diferente. Intenta introducir las siguientes
líneas en tu consola:

myName = 'Bob';
myAge = 40;

An aside on variable naming rulesSección

You can call a variable pretty much anything you like, pero hay limitaciones.
Generally you should stick to just using Latin characters (0-9, a-z, A-Z) and the
underscore character.

 You shouldn't use other characters because they may cause errors or be hard to
understand by an international audience.
 Don't use underscores at the start of variable names — this is used in certain
JavaScript constructs to mean specific things, so may get confusing.
 Don't use numbers at the start of variables. This isn't allowed and will cause an
error.
 A safe convention to stick to is so-called "lower camel case", where you stick
together multiple words, using lower case for the whole first word and then
capitalize subsequent words. We've been using this for our variable names in the
article so far.
 Make variable names intuitive, so they describe the data they contain. Don't just use
single letters/numbers, or big long phrases.
 Variables are case sensitive — so myage is a different variable to myAge.
 One last point — you also need to avoid using JavaScript reserved words as your
variable names — by this, we mean the words that make up the actual syntax of
JavaScript! So you can't use words like var, function, let, and for as variable
names. Browsers will recognize them as different code items, and so you'll get
errors.
Note: You can find a fairly complete list of reserved keywords to avoid at Lexical
grammar — keywords.
Good name examples:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

Bad name examples:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

Error-prone name examples:

var
Document

Prueba a crear unas cuantas variables más, con la siguiente guía en mente.

Tipos de variablesSección
There are a few different types of data we can store in variables. In this section we'll
describe these in brief, then in future articles you'll learn about them in more detail.

So far we've looked at the first two, but there are others.

NúmerosSección
You can store numbers in variables, either whole numbers like 30 (also called
integers) or decimal numbers like 2.456 (also called floats or floating point
numbers). You don't need to declare variable types in JavaScript, unlike some other
programming languages. When you give a variable a number value, you don't
include quotes:
var myAge = 17;

StringsSección
Strings are pieces of text. When you give a variable a string value, you need to
wrap it in single or double quote marks, otherwise JavaScript will try to intepret it as
another variable name.

var dolphinGoodbye = 'So long and thanks for all the fish';

BooleanosSección
Booleans are true/false values — they can have two values, true or false. These
are generally used to test a condition, after which code is run as appropriate. So for
example, a simple case would be:
var iAmAlive = true;

Whereas in reality it would be used more like this:

var test = 6 < 3;

This is using the "less than" operator (<) to test whether 6 is less than 3. As you
might expect, it will return false, because 6 is not less than 3! You will learn a lot
more about such operators later on in the course.
ArraysSección
An array is a single object that contains multiple values enclosed in square brackets
and separated by commas. Try entering the following lines into your console:

var myNameArray = ['Chris', 'Bob', 'Jim'];

var myNumberArray = [10,15,40];

Once these arrays are defined, you can access each value by their location within
the array. Try these lines:

myNameArray[0]; // should return 'Chris'

myNumberArray[2]; // should return 40

The square brackets specify an index value corresponding to the position of the
value you want returned. You might have noticed that arrays in JavaScript are zero-
indexed: the first element is at index 0.

You'll learn a lot more about arrays in a future article.

ObjetosSección
In programming, an object is a structure of code that models a real life object. You
can have a simple object that represents a car park and contains information about
its width and length, or you could have an object that represents a person, and
contains data about their name, height, weight, what language they speak, how to
say hello to them, and more.

Try entering the following line into your console:

var dog = { name : 'Spot', breed : 'Dalmatian' };

To retrieve the information stored in the object, you can use the following syntax:

dog.name

We won't be looking at objects any more for now — you can learn more about those
in a future module.

Loose typingSección
JavaScript is a "loosely typed language", which means that, unlike some other
languages, you don't need to specify what data type a variable will contain (e.g.
numbers, strings, arrays, etc).

For example, if you declare a variable and give it a value encapsulated in quotes,
the browser will treat the variable as a string:

var myString = 'Hello';

It will still be a string, even if it contains numbers, so be careful:

var myNumber = '500'; // oops, this is still a string

typeof(myNumber);
myNumber = 500; // much better — now this is a number
typeof(myNumber);

Try entering the four lines above into your console one by one, and see what the
results are. You'll notice that we are using a special function called typeof() — this
returns the data type of the variable you pass into it. The first time it is called, it
should return string, as at that point the myNumber variable contains a string, '500'.
Have a look and see what it returns the second time you call it.
Ahora que hemos analizado los conceptos básicos de las cadenas, aumentemos la
velocidad y comencemos a pensar qué operaciones útiles podemos hacer en
cadenas con métodos integados, como encontrar la longitud de una cadena de
texto, unir y dividir cadenas, sustituyendo un caracter de una cadena por otro, y
más.

Prerequisitos: Conocimientos básicos de informática, una comprensión básica de HTML

y CSS, una comprensión de lo que es JavaScript.

Objectivo: Comprender que las cadenas son objetos y aprender a usar algunos de
los métodos básicos disponibles en esos objetos para manipular cadenas.

Cadenas como objetosSección

Ya lo dijimos antes, y lo diremos de nuevo — todo es un objeto en JavaScript.
Cuando creas una cadena, por ejemplo, usando:
var string = 'This is my string';

Tu variable se convierte en una instancia del objeto cadena y, como resultado,

tiene una gran cantidad de propiedades y métodos disponibles. Puedes ver esto si
vas a la página de objeto Cadena y miras la lista al costado de la página.
Ahora, antes de que tu cerebro comience a derretirce, ¡no te
preocupes! Realmente no necesitas saber acerca de la mayoría de estos
principios en su viaje de aprendizaje. Pero hay algunos que posiblemente utilizará
con bastante frecuencia así como veremos aquí.
Ingresemos algunos ejemplos en una nueva consola. A continuación,
proporcionamos uno (también puedes abrir esta consola en una ventana o
pesataña por separado, o si prefieres usar la consola de desarrolladores del
navegador).
Encontrar la longitud de un cadenaSección
Esto es fácil — simplemente usa la propiedad length . Intenta ingresar las
siguientes líneas:
var browserType = 'mozilla';
browserType.length;

Esto debería devolver el número 7, porque "mozilla" tiene 7 caracteres. Esto es útil
por muchas razones; por ejemplo, es posible que quieras buscar las longitudes de
una serie de nombres para que puedas mostrarlos en orden de su longitud, o dejar
que un usuario sepa que un nombre ingresado en un campo de formmulario es
demasiado largo o si tiene una longitud determinada.

Extrayendo un específico caracter de la cadenaSección

En una nota relacionada, puedes devolver cualquier carácter de una cadena
usando la notación de corchetes — esto significa que incluyes corchetes ([]) al
final del nombre de tu variable. Dentro de los corchetes, incluye el número del
caracter que deseas extraer, así que, por ejemplo, para extraer la primera letra
harías esto:
 browserType[0];

¡ Las computadoras cuentan desde 0, no desde 1! Para extraer el último caracter

de cualquiercadena, podríamos usar la siguiente línea, combinando esta técnica
con la propiedad lengthque vimos arriba:
browserType[browserType.length-1];

El largo de "mozilla" es 7, pero es prque el contador comienza en 0, la posición del

caracter es 6, por lo tanto, necesitamos length-1. Puedes usar esto para, por
ejemplo, encontrar la primer letra de una serie de cadenas y ordenarlas
alfabéticamente.
Encontrar una subcadena dentro de una cadena y extraerlaSección
1. Algunas veces querrás encontrar si hay una cadena más pequeña dentro de una
más grande (generalmente decimos si una subcadena está presente dentro de una
cadena). Esto se puede hacer utilizando el método indexOf(), que toma un
único parametro — la subcadena que deseas buscar. Intenta esto:
browserType.indexOf('zilla');

Esto nos dá un resultado de 2, porque la subcadena "zilla" comienza en la posición

2 (0, 1, 2 — so 3 characters in) dentro de "mozilla". Tal código podría usarse para
filtrar cadena. Por ejemplo, podemos tener una lista de direcciones web y solo
queremos imimprimir las que contienen "mozilla".
2. Esto se puede hacer de otra manera, que posiblemente sea aún más efectiva.
Intenta lo siguiente:

browserType.indexOf('vanilla');

Esto debería date un resultado de -1 — Esto se devuleve cuando la subcadena, en

este caso 'vanilla', no es encontrada en la cadena principal.

Puedes usar esto para encontrar todas las instancias de las cadenas
que no contengan la subcadena 'mozilla', o hacer, si usas el operador de
negación, como se muestra a continueción. Podrías hacer algo como esto:
if(browserType.indexOf('mozilla') !== -1) {
// do stuff with the string
}

3. Cuando sabes donde comienza una subcadena dentro de una cadena, y sabes
hasta cuál caracter deseas que termine, puede usarse slice() para extraerla.
Prueba lo siguiente:
browserType.slice(0,3);

Esto devuelve "moz" — El primer parámetro es la posición del caracte en la que

comenzar a extraer, y el segundo parámetro es la posición del caracter posterior al
último a ser extraído. Por lo tanto, el corte ocurre desde la primer posición en
 adelante, pero excluyendo la última posición. En este ejemplo, dado que el índice
inicial es 0, el segundo parámetro es igual a la longitud de la cadena que se
devuelve.

4. Además, si sabes que deseas extraer todos los caracteres restantes de una
cadena después de cierto caracter, ¡no necesitas incluir el segundo parámetro! En
cambio, solo necesitas incluir la posición del caracter desde donde deseas extraer
los caracteres restante en la cadena. Prueba lo siguiente:

browserType.slice(2);

Esto devuelve "zilla" — debido a que la posición del caracter de 2 es la letra z, y

como no incluiste un segundo parámetro, la subcadena que que se devolvío fué el
resto de los caracteres de la cadena.
Nota: El segundo parámetro de slice() es opcional: si no lo incluyes, el corte
termina al final de la cadena original. Hay otras opciones también; estudia la
página slice() para ver que mas puedes averiguar.
Cambiando todo a mayúscula o minúsculaSección
Los métodos de cadena toLowerCase() y toUpperCase() toman cadena y convierten
todos los caracteres a mayúscula o minúscula, respectivamente. Esto puede ser
útil, por ejemplo, si deseas normalizar todos los datos ingresados por el usuario
antes de almacenarlos en una base de datos.
Intentemos ingresar las siguentes líneas para ver que sucede:

var radData = 'My NaMe Is MuD';

radData.toLowerCase();
radData.toUpperCase();

Actualizando partes de una cadenaSección

En una cadena puedes reemplazar una subcadena por otra usando el
método replace(). Esto funciona de manera muy simple a un nivel básico, aunque
hay algunas cosas avanzadas que puedes hacer con él en lo que todavía no
entraremos.
Toma dos parámetros — la cadena que deseas reemplazar, y la cadena con la que
deseas reemplazarla. Prueba este ejemplo:

browserType.replace('moz','van');

Ten en cuenta que para obtener realmente el valor actualizado reflejado en la

variable browserType en un programa real, debes establecer que el valor de la
variable sea el resultado de la operación; No solo actualiza el valor de la
subcadena automáticamente. Así que tendrías que escribir esto: browserType =
browserType.replace('moz','van');
Ejemplos de aprendizaje activoSección
 En esta sección, conseguiremos que intentes escribir algún código de manipulación
de cadenas. En cada ejercicio a continuación, tenemos una matríz de cadenas y un
bucle que procesa cada valor en la matríz y lo muestra en una lista con viñetas. No
es necesario que comprendas matrices y bucles en este mismo momento — estos
se explicarán en futuros artículos. Todo lo que necesitas hacer en cada caso es
escribir el código que dará de salida a las cadenas en el formato que las queremos.

Cada ejemplo viene con un botón de "Reset" , Que puedes utilizar para
reestablecer el código si cometes un error y no puedes hacerlo funcionar
nuevamente, y un botón "Show solution" que puedes presionar para ver una
posible respuesta si te encuentras realmente atorado.

Filtrado de mensajes de saludoSección

En el primer ejercicio, comenzamos de manera simple — tenemos una matríz de
mensajes de tarjetas de felicitación, pero queremos ordenarlos para que aparezcan
solo los mensajes de Navidad. Queremos que completes un test condicional dentro
de la estructura if( ... ), para comprobar cada cadena y solo imprimirla en la lista
si es un mensaje de Navidad.
1. Primero piensa en cómo puedes probar si el mensaje en cada caso es un mensaje
de Navidad. ¿Qué cadena está presente en todos esos mensajes, y qué método
podrías usar para comprobar si está presente?
2. A continuación, deberá escribir un test condicional de la forma operand1 operator
operand2. ¿Es lo que está a la izquierda igual a lo que está a la derecha? O en
este caso, ¿el método llamado a la izquierda devuelve el resultado a la derecha?
3. Sugerencia: En este caso, probablemente sea más útil comprobar si la llamada al
método no es igual a un determinado resultado.
Corrección de mayúsculaSección
En este ejercicio tenemos los nombres de las ciudades del Reino Unido, Pero las
mayúsculas estan completamente desordenadas. Queremos que los cambies para
que estén en minúscula, a excepción de la primera letra. Una buena manera de
hacerlo es:

1. Convierte la totalidad de la cadena contenida en la variable input a minúsculas y

guárdalas en una nueva vaiable.
2. Toma la primera letra de la cadena en esta nueva variable y guárdala en otra
variable.
3. Usando esta última variable como una subcadena, reemplaza la primera letra de la
cadena en minúscula con la subcadena en mayúscula. Almacena el resultado de
este procedimiento de reemplazo en otra nueva variable.
4. Cambia el valor de la variable result a igual al resultado final. en vez de input.
Nota: Una pista — los parámetros de los métodos de cadena no tienen que ser
literales de cadenas; también pueden ser variables, o incluso variables con un
método invocados en ellas.
Creando nuevas cadenas de partes viejasSección
 En este último ejercicio, la matríz contiene un conjunto de cadenas que contienen
información sobre estaciones de tren en el Norte de Inglaterra. Las cadenas son
elementos de datos que contienen el código de estación de tres letras, seguidos de
más datos legibles por máquina, seguidos de un punto y coma, seguidos por el
nombre de la estación legible por humanos. Por ejemplo:

MAN675847583748sjt567654;Manchester Piccadilly

Queremos extraer el código y el nombre de la estación, y juntarlos en una cadena

con la siguiente estructura:

MAN: Manchester Piccadilly

Recomendamos hacerlo así:

1. Extrae las tres letras del código de estación y almacénalo en una nueva variable.
2. Encuentra el número de índice de caracter del punto y coma.
3. Extrae el nombre de la estación legible por humanos utilizando el número de índice
de caracter del punto y coma a modo de referencia y guardalo en una nueva
variable.
4. Concatenar las dos nuevas variables y un literal de cadena para hacer la cadena
final.
5. Cambia el valor de la variable de result a igual a la cadena final, no a input.

En este último artículo de este módulo, veremos las matrices — una manera
ordenada de almacenar una lista de elementos de datos bajo un solo nombre de
variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear una matriz,
recuperar, agregar y eliminar elementos almacenados en una matriz, y más.

Prerrequisitos: Conocimientos básicos de informática, una comprensión básica de HTML

y CSS, una idea de lo que es JavaScript.

Objectivo: Para entender qué son las matrices y cómo manipularlas en JavaScript.

¿Qué es una matriz?Sección

Las matrices se describen como "objetos tipo lista"; básicamente son objetos
individuales que contienen múltiples valores almacenados en una lista. Los objetos
de matriz pueden almacenarse en variables y tratarse de la misma manera que
cualquier otro tipo de valor, la diferencia es que podemos acceder individualmente
a cada valor dentro de la lista y hacer cosas útiles y eficientes con la lista, como
recorrerlo con un bucle y hacer una misma cosa a cada valor. Tal vez tenemos una
serie de productos y sus precios almacenados en una matriz, y queremos
 recorrerlos e imprimirlos en una factura, sumando todos los precios e imprimiendo
el total en la parte inferior.

Si no tuvieramos matrices, tendríamos que almacenar cada elemento en una

variable separada, luego llamar al código que hace la impresión y agregarlo por
separado para cada artículo. Esto sería mucho más largo de escribir, menos
eficiente y más propenso a errores. si tuviéramos 10 elementos para agregar a la
factura, ya sería suficientemente malo, pero ¿ qué pasa con 100 o 1000 artículos?
Volveremos a este ejemplo más adelante en el artículo.

Como en artículos anteriores, aprendamos sobre los aspectos básicos reales de

las matrices ingresando algunos ejemplos en una consola de JavaScript. A
continuación proporcionamos uno (también puedes abrir en consola en una
pestaña o ventana separadas, o usar la consola de desarrollador de navegador, si
lo prefieres).
Creando una matrizSección
Las matrices se construyen con corchetes, que contiene una lista de elementos
separdos por comas.

1. Digamos que queríamos almacenar una lista de compras en una matriz —

haríamos algo como lo siguiente. Ingresa las siguientes líneas en la consola:

2. var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];

shopping;

3. En este caso, cada elemento de la matriz es una cadena, pero ten en cuenta que
puedes almacenar cualquier elemento en una matriz — cadena, número, objeto,
otra variable, incluso otra matriz. También puedes mezclar y combinar tipos de
elementos — no todos tienen que ser números, cadenas, etc. Prueba estos:

4. var sequence = [1, 1, 2, 3, 5, 8, 13];

var random = ['tree', 795, [0, 1, 2]];

5. Intenta creando un par de matrices por tu cuenta, antes de continuar.

Accediendo y modificando elementos de la matrizSección
Puedes entonces acceder a elementos individuales en la matriz mediante la
notación de corchetes, del mismo modo que accediste a las letras de una cadena.
1. Ingresa lo siguiente en tu consola:

2. shopping[0];
 // returns "bread"

3. también puedes modificar un elemento en una matriz simplemente dando a un item

de la matriz un nuevo valor. Prueba esto:

4. shopping[0] = 'tahini';
5. shopping;

// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]

Nota: Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras

comienzan a contar desde 0!
6. Ten en cuanta que una matriz dentro de otra matriz se llama matriz
multidimensional. Puedes acceder a los elementos de una matris que está dentro
de otra encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de
los elementos dentro de la matriz que a su vez es el tercer elemento dentro de la
matriz random (ver sección anterior), podríamos hacer algo como esto:
random[2][2];

7. Intenta seguir jugando y haciendo algunas modificaciones más a tus ejemplos de

matriz antes de continuar.
Encontrar la longitud de una matrizSección
Puedes averiguar la longitud de una matriz (cuantos elementos contiene)
exactamente de la misma manera que determinas la longitud (en caracters) de una
cadena— utilizando la propiedad length. Prueba lo siguiente:
sequence.length;
// should return 7

Esto tiene otros usos, pero se usa mas comunmente para indicarle a un ciclo que
continúe hasta que haya recorrido todos los elementos de la matriz. Así por
ejemplo:

var sequence = [1, 1, 2, 3, 5, 8, 13];

for (var i = 0; i < sequence.length; i++) {
console.log(sequence[i]);
}

Aprenderas acerca de bucles correctamente en un artículo futuro, pero

brevemente, este código dice:

1. Comienza el bucle en el elemento de la posición 0 en la matriz.

2. Detén el bucle en el número de item igual a la longitud de la matriz. Esto funcionará
para una matriz de cualquier longitid, pero en este caso el ciclo se detendrá en el
 elemento número 7 (esto es bueno, ya que el último elemento — que queremos
que recorra el bucle — es 6.
3. Para cada elemento, imprime en la consola del navegador con console.log().
Alguno métodos de matriz útilesSección
En esta sección veremos algunos métodos bastante útiles relacionados con
matrices que nos permiten dividir cadenas en elementos de matriz y viceversa, y
agregar nuevos elementos en matrices.

Conversión entre matrice y cadenasSección

A menudo se te presentarán algunos datos brutos contenidos en una cadena larga
y grande, y es posible que desees separar los elementos útiles de una forma más
conveniente y luego hacerle cosas, como mostrarlos en una tabla de datos. Para
hacer esto, podemos usar el método split(). En su forma más simple, esto toma
un único parámetro, el caracter que quieres separar de la cadena, y devuelve las
subcadenas entre el separador como elementos en una matriz.
Nota: Bien, esto es técnicamente un método de cadena, no un método de matriz,
pero lo hemos incluido con las matrices, ya que va bien aquí.
1. Vamos a jugar con esto, para ver como funciona. Primero, crea una cadena en tu
consola:

var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

2. Ahora dividámoslo en cada coma:

3. var myArray = myData.split(',');

myArray;

4. Finalmente, intenta encontrar la longitud de tu nueva matriz y recuperar algunos

elementos de ella:

5. myArray.length;
6. myArray[0]; // the first item in the array
7. myArray[1]; // the second item in the array

myArray[myArray.length-1]; // the last item in the array

8. También puedes ir en la dirección opuesta usando el método join(). Prueba lo

siguiente:
9. var myNewString = myArray.join(',');

myNewString;
10. Otra forma de convertir una matriz en cadena es usar el
método toString(). toString() es posiblemente más simple que join() ya que no
toma un parámetro, pero es más limitado. Con join() puedes especificar diferentes
separadores (intenta ejecutar el Paso 4 con un caracter diferente a la coma).
11. var dogNames = ['Rocket','Flash','Bella','Slugger'];

dogNames.toString(); //Rocket,Flash,Bella,Slugger

Agregar y eliminar elementos de la matrizSección

Todavia no hamos cubierto la posibilidad de agregar y eliminar elementos de la
matriz — echemos un vistazo a esto ahora. Usaremos la matriz myArray con la que
terminamos en la última sección. Si todavía no has seguido esa sección, primero
crea la matriz en tu consola:
var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds',
'Carlisle'];

Antes que nada, para añdir o eliminar un elemento al final de una matriz podemos
usar push() y pop() respectivamente.
1. primero usemos push() — nota que necesitas incluir uno o más elementos que
desees agregas al final de tu matriz. Prueba esto:
2. myArray.push('Cardiff');
3. myArray;
4. myArray.push('Bradford', 'Brighton');

myArray;

5. La nueva longitud de la matriz se devuelve cuando finaliza la llamada al método. Si

quisieras almacenar la nueva longitud de matriz en una variable, podrías hacer algo
como esto:

6. var newLength = myArray.push('Bristol');

7. myArray;

newLength;

8. Eliminar el último elemento de una matriz es tan simple como correr pop() en ella.
Prueba esto:
myArray.pop();

9. El elemento que sé eliminó se devuelve cuando se completa la llamada al método.

Para guardar este elemento en una variable, puedes hacer lo siguiente:

10. var removedItem = myArray.pop();

11. myArray;

removedItem;

unshift() y shift() funcionan exactamente igual de push() y pop(),

respectivamente, excepto que funcionan al principio de la matriz, no al final.
1. Primero unshift() — prueba el siguiente comando:
2. myArray.unshift('Edinburgh');

myArray;

3. Ahora shift(); prueba estos!

4. var removedItem = myArray.shift();
5. myArray;

removedItem;

Aprendizaje activo: ¡Imprimiendo esos

productos!Sección
Volvamos al ejemplo que describimos anteriormente — imprima los nombres de los
productos y los precios en una factura, luego, sume los precios e imprímelos en la
parte inferior. En el ejemplo editable a continuación, hay comentarios que
contienen números — cada uno de estos marca un lugar donde debe agregar algo
al código. Ellos son los siguientes:

1. Debajo de // number 1 hay un número de cadena, cada una de las cuales contiene
un nombre de producto y un precio separados por dos puntos. Nos gustaría que
conviertas esto en una matriz y lo almacenamos en una matriz llamda products.
2. En la misma línea que el comentario // number 2 es el comienzo de un ciclo for. En
esta línea, actualmente tenemos i <= 0, que es una prueba condicional que hace
que el bucle que el bucle for se detenga inmediatamente, porque dice "detener
cuando i es menor o igual 0", y i comienza en 0. Nos gustaría que reemplazaras
esto con una prueba condicional que detenga el ciclo cuando i no sea inferior a la
longitud la matriz products .
3. justo debajo del comentario // number 3 queremos que escriba una línea de código
que divide el elemento actual de la matriz (nombre:precio) en dos elementos
separados, uno que contiene solo el nombre y otros que contienen solo el precio.
Si no está seguro de cómo hacerlo, consulte el artículo Métodos de cadenas
útiles para obtener ayuda o, mejor aún, consulte la sección Converting between
strings and arraysde este artículo.
4. Como parte de la línea de código anterior, también querras convertir el precio de
una cadena a un número. Si no pudes recordar como hacerlo, consulta el primer
artículo de cadenas.
5. Hay una variable llamada total que se crea y se le da un valor de 0 en la parte
superior del código. Dentro del ciclo (debajo de // number 4) queremos que
agregues una línea que añade el precio actual del artículoa ese total en cada
iteración del ciclo, de modo que al final del código el total correcto se imprima en la
factura. Es posible que necesites un operador de asignación para hacer esto.
6. Queremos que cambies la línea justo de bajo // number 5 para que la
variable itemText se iguale a "nombre de elemnto actual — $precio de elemento
actual", por ejemplo "Zapatos — $23.99" en cada caso, por lo que la ionformación
correcta artículo está impreso en la factura. Esto es simplemente una
concatenación de cadenas, lo que debería ser familiar para ti.
Aprendizaje Activo: Top 5 búsquedasSección
Un buen uso para los métodos de matriz como push() y pop() es cuando estás
manteniendo un registro de elementos actualmente activos en una aplicación web.
En una escena animada por ejemplo, es posible que tengas una matriz de objetos
que representan los gráficos de fondo que se muestran actualmente, y es posible
que sólo desees que se muestren 50 a la vez, por razones de rendimiento o
desorden. A medida que se crean y agrgan nuevos objetos a la matriz, se puede
eliminar los más antiguos de la matriz para mantener el número deseado.
En este ejemplo vamos a mostrar un uso mucho más simple — aquí te daremos un
sitio de búsqueda falso, con un cuadro de búsqueda. La idea es que cuadno lo
términos se ingresan en eun cuadro de búsqueda, se muetran el top 5 de términos
de búsqueda previos en la lista. Cuando el número de términos supera el 5, el
último término comienza a borrarse cada vez que agregas un nuevo término a la
parte superior, por lo que siempre se muestran los 5 términos anteriores.

Nota: En una aplicación de búsqueda real, probablemente puedas hacer clic en los
términos de búsqueda anteriores para volver a los términos de búsqueda anteriores
y ¡se motrarán los resultados de búsqueda reales! Sololamente lo mantendremos
simple por ahora.
Para completar la aplicación necesitamos:

1. Agregar una línea debajo del comentario // number 1 que agrega el valor actual
ingresado en la entrada de la búsqueda al inicio de la matriz. Esto se puede
recuperar usando searchInput.value.
2. Agrega una línea debajo del comentario // number 2 que elimina el valor
actualmente al final de la matriz.
ConclusiónSección
Después de leer este artículo, estamos seguros de que estaras de acuerdo en que
las matrices parecen bastante útiles; las verás aparecer en todas partes en
JavaScript, a menudo en asociación con bucles para hacer una misma cosa con
cada elemento de la matriz. Te enseñaremos todos los aspectos básicos útiles que
hay que conocer sobre los bucles en el siguiente módulo, pero por ahora debes
darte un aplauso y tomarte un merecido descanso; ¡has trabajado en todos los
artículos de este módulo!

Lo único que queda por hacer es trabajar a través de la evaluación de este módulo,
que te pondrá a prueba tu comprensión de los de los artículos anteriores.

En este último artículo de este módulo, veremos las matrices — una manera
ordenada de almacenar una lista de elementos de datos bajo un solo nombre de
variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear una matriz,
recuperar, agregar y eliminar elementos almacenados en una matriz, y más.

Prerrequisitos: Conocimientos básicos de informática, una comprensión básica de HTML

y CSS, una idea de lo que es JavaScript.

Objectivo: Para entender qué son las matrices y cómo manipularlas en JavaScript.

¿Qué es una matriz?Sección

Las matrices se describen como "objetos tipo lista"; básicamente son objetos
individuales que contienen múltiples valores almacenados en una lista. Los objetos
de matriz pueden almacenarse en variables y tratarse de la misma manera que
cualquier otro tipo de valor, la diferencia es que podemos acceder individualmente
a cada valor dentro de la lista y hacer cosas útiles y eficientes con la lista, como
recorrerlo con un bucle y hacer una misma cosa a cada valor. Tal vez tenemos una
serie de productos y sus precios almacenados en una matriz, y queremos
recorrerlos e imprimirlos en una factura, sumando todos los precios e imprimiendo
el total en la parte inferior.

Si no tuvieramos matrices, tendríamos que almacenar cada elemento en una

variable separada, luego llamar al código que hace la impresión y agregarlo por
separado para cada artículo. Esto sería mucho más largo de escribir, menos
eficiente y más propenso a errores. si tuviéramos 10 elementos para agregar a la
factura, ya sería suficientemente malo, pero ¿ qué pasa con 100 o 1000 artículos?
Volveremos a este ejemplo más adelante en el artículo.

Como en artículos anteriores, aprendamos sobre los aspectos básicos reales de

las matrices ingresando algunos ejemplos en una consola de JavaScript. A
continuación proporcionamos uno (también puedes abrir en consola en una
pestaña o ventana separadas, o usar la consola de desarrollador de navegador, si
lo prefieres).
Creando una matrizSección
Las matrices se construyen con corchetes, que contiene una lista de elementos
separdos por comas.
1. Digamos que queríamos almacenar una lista de compras en una matriz —
haríamos algo como lo siguiente. Ingresa las siguientes líneas en la consola:

2. var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];

shopping;

3. En este caso, cada elemento de la matriz es una cadena, pero ten en cuenta que
puedes almacenar cualquier elemento en una matriz — cadena, número, objeto,
otra variable, incluso otra matriz. También puedes mezclar y combinar tipos de
elementos — no todos tienen que ser números, cadenas, etc. Prueba estos:

4. var sequence = [1, 1, 2, 3, 5, 8, 13];

var random = ['tree', 795, [0, 1, 2]];

5. Intenta creando un par de matrices por tu cuenta, antes de continuar.

Accediendo y modificando elementos de la matrizSección
Puedes entonces acceder a elementos individuales en la matriz mediante la
notación de corchetes, del mismo modo que accediste a las letras de una cadena.
1. Ingresa lo siguiente en tu consola:

2. shopping[0];

// returns "bread"

3. también puedes modificar un elemento en una matriz simplemente dando a un item

de la matriz un nuevo valor. Prueba esto:

4. shopping[0] = 'tahini';
5. shopping;

// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]

Nota: Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras

comienzan a contar desde 0!
6. Ten en cuanta que una matriz dentro de otra matriz se llama matriz
multidimensional. Puedes acceder a los elementos de una matris que está dentro
de otra encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de
los elementos dentro de la matriz que a su vez es el tercer elemento dentro de la
matriz random (ver sección anterior), podríamos hacer algo como esto:
random[2][2];
7. Intenta seguir jugando y haciendo algunas modificaciones más a tus ejemplos de
matriz antes de continuar.
Encontrar la longitud de una matrizSección
Puedes averiguar la longitud de una matriz (cuantos elementos contiene)
exactamente de la misma manera que determinas la longitud (en caracters) de una
cadena— utilizando la propiedad length. Prueba lo siguiente:
sequence.length;
// should return 7

Esto tiene otros usos, pero se usa mas comunmente para indicarle a un ciclo que
continúe hasta que haya recorrido todos los elementos de la matriz. Así por
ejemplo:

var sequence = [1, 1, 2, 3, 5, 8, 13];

for (var i = 0; i < sequence.length; i++) {
console.log(sequence[i]);
}

Aprenderas acerca de bucles correctamente en un artículo futuro, pero

brevemente, este código dice:

1. Comienza el bucle en el elemento de la posición 0 en la matriz.

2. Detén el bucle en el número de item igual a la longitud de la matriz. Esto funcionará
para una matriz de cualquier longitid, pero en este caso el ciclo se detendrá en el
elemento número 7 (esto es bueno, ya que el último elemento — que queremos
que recorra el bucle — es 6.
3. Para cada elemento, imprime en la consola del navegador con console.log().
Alguno métodos de matriz útilesSección
En esta sección veremos algunos métodos bastante útiles relacionados con
matrices que nos permiten dividir cadenas en elementos de matriz y viceversa, y
agregar nuevos elementos en matrices.

Conversión entre matrice y cadenasSección

A menudo se te presentarán algunos datos brutos contenidos en una cadena larga
y grande, y es posible que desees separar los elementos útiles de una forma más
conveniente y luego hacerle cosas, como mostrarlos en una tabla de datos. Para
hacer esto, podemos usar el método split(). En su forma más simple, esto toma
un único parámetro, el caracter que quieres separar de la cadena, y devuelve las
subcadenas entre el separador como elementos en una matriz.
Nota: Bien, esto es técnicamente un método de cadena, no un método de matriz,
pero lo hemos incluido con las matrices, ya que va bien aquí.
1. Vamos a jugar con esto, para ver como funciona. Primero, crea una cadena en tu
consola:
 var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

2. Ahora dividámoslo en cada coma:

3. var myArray = myData.split(',');

myArray;

4. Finalmente, intenta encontrar la longitud de tu nueva matriz y recuperar algunos

elementos de ella:

5. myArray.length;
6. myArray[0]; // the first item in the array
7. myArray[1]; // the second item in the array

myArray[myArray.length-1]; // the last item in the array

8. También puedes ir en la dirección opuesta usando el método join(). Prueba lo

siguiente:
9. var myNewString = myArray.join(',');

myNewString;

10. Otra forma de convertir una matriz en cadena es usar el

método toString(). toString() es posiblemente más simple que join() ya que no
toma un parámetro, pero es más limitado. Con join() puedes especificar diferentes
separadores (intenta ejecutar el Paso 4 con un caracter diferente a la coma).
11. var dogNames = ['Rocket','Flash','Bella','Slugger'];

dogNames.toString(); //Rocket,Flash,Bella,Slugger

Agregar y eliminar elementos de la matrizSección

Todavia no hamos cubierto la posibilidad de agregar y eliminar elementos de la
matriz — echemos un vistazo a esto ahora. Usaremos la matriz myArray con la que
terminamos en la última sección. Si todavía no has seguido esa sección, primero
crea la matriz en tu consola:
var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds',
'Carlisle'];

Antes que nada, para añdir o eliminar un elemento al final de una matriz podemos
usar push() y pop() respectivamente.
1. primero usemos push() — nota que necesitas incluir uno o más elementos que
desees agregas al final de tu matriz. Prueba esto:
2. myArray.push('Cardiff');
3. myArray;
4. myArray.push('Bradford', 'Brighton');

myArray;

5. La nueva longitud de la matriz se devuelve cuando finaliza la llamada al método. Si

quisieras almacenar la nueva longitud de matriz en una variable, podrías hacer algo
como esto:

6. var newLength = myArray.push('Bristol');

7. myArray;

newLength;

8. Eliminar el último elemento de una matriz es tan simple como correr pop() en ella.
Prueba esto:
myArray.pop();

9. El elemento que sé eliminó se devuelve cuando se completa la llamada al método.

Para guardar este elemento en una variable, puedes hacer lo siguiente:

10. var removedItem = myArray.pop();

11. myArray;

removedItem;

unshift() y shift() funcionan exactamente igual de push() y pop(),

respectivamente, excepto que funcionan al principio de la matriz, no al final.
1. Primero unshift() — prueba el siguiente comando:
2. myArray.unshift('Edinburgh');

myArray;

3. Ahora shift(); prueba estos!

4. var removedItem = myArray.shift();
5. myArray;

removedItem;

Aprendizaje activo: ¡Imprimiendo esos

productos!Sección
 Volvamos al ejemplo que describimos anteriormente — imprima los nombres de los
productos y los precios en una factura, luego, sume los precios e imprímelos en la
parte inferior. En el ejemplo editable a continuación, hay comentarios que
contienen números — cada uno de estos marca un lugar donde debe agregar algo
al código. Ellos son los siguientes:

1. Debajo de // number 1 hay un número de cadena, cada una de las cuales contiene
un nombre de producto y un precio separados por dos puntos. Nos gustaría que
conviertas esto en una matriz y lo almacenamos en una matriz llamda products.
2. En la misma línea que el comentario // number 2 es el comienzo de un ciclo for. En
esta línea, actualmente tenemos i <= 0, que es una prueba condicional que hace
que el bucle que el bucle for se detenga inmediatamente, porque dice "detener
cuando i es menor o igual 0", y i comienza en 0. Nos gustaría que reemplazaras
esto con una prueba condicional que detenga el ciclo cuando i no sea inferior a la
longitud la matriz products .
3. justo debajo del comentario // number 3 queremos que escriba una línea de código
que divide el elemento actual de la matriz (nombre:precio) en dos elementos
separados, uno que contiene solo el nombre y otros que contienen solo el precio.
Si no está seguro de cómo hacerlo, consulte el artículo Métodos de cadenas
útiles para obtener ayuda o, mejor aún, consulte la sección Converting between
strings and arraysde este artículo.
4. Como parte de la línea de código anterior, también querras convertir el precio de
una cadena a un número. Si no pudes recordar como hacerlo, consulta el primer
artículo de cadenas.
5. Hay una variable llamada total que se crea y se le da un valor de 0 en la parte
superior del código. Dentro del ciclo (debajo de // number 4) queremos que
agregues una línea que añade el precio actual del artículoa ese total en cada
iteración del ciclo, de modo que al final del código el total correcto se imprima en la
factura. Es posible que necesites un operador de asignación para hacer esto.
6. Queremos que cambies la línea justo de bajo // number 5 para que la
variable itemText se iguale a "nombre de elemnto actual — $precio de elemento
actual", por ejemplo "Zapatos — $23.99" en cada caso, por lo que la ionformación
correcta artículo está impreso en la factura. Esto es simplemente una
concatenación de cadenas, lo que debería ser familiar para ti.
Aprendizaje Activo: Top 5 búsquedasSección
Un buen uso para los métodos de matriz como push() y pop() es cuando estás
manteniendo un registro de elementos actualmente activos en una aplicación web.
En una escena animada por ejemplo, es posible que tengas una matriz de objetos
que representan los gráficos de fondo que se muestran actualmente, y es posible
que sólo desees que se muestren 50 a la vez, por razones de rendimiento o
desorden. A medida que se crean y agrgan nuevos objetos a la matriz, se puede
eliminar los más antiguos de la matriz para mantener el número deseado.
En este ejemplo vamos a mostrar un uso mucho más simple — aquí te daremos un
sitio de búsqueda falso, con un cuadro de búsqueda. La idea es que cuadno lo
términos se ingresan en eun cuadro de búsqueda, se muetran el top 5 de términos
de búsqueda previos en la lista. Cuando el número de términos supera el 5, el
 último término comienza a borrarse cada vez que agregas un nuevo término a la
parte superior, por lo que siempre se muestran los 5 términos anteriores.

Nota: En una aplicación de búsqueda real, probablemente puedas hacer clic en los
términos de búsqueda anteriores para volver a los términos de búsqueda anteriores
y ¡se motrarán los resultados de búsqueda reales! Sololamente lo mantendremos
simple por ahora.
Para completar la aplicación necesitamos:

1. Agregar una línea debajo del comentario // number 1 que agrega el valor actual
ingresado en la entrada de la búsqueda al inicio de la matriz. Esto se puede
recuperar usando searchInput.value.
2. Agrega una línea debajo del comentario // number 2 que elimina el valor
actualmente al final de la matriz.
ConclusiónSección
Después de leer este artículo, estamos seguros de que estaras de acuerdo en que
las matrices parecen bastante útiles; las verás aparecer en todas partes en
JavaScript, a menudo en asociación con bucles para hacer una misma cosa con
cada elemento de la matriz. Te enseñaremos todos los aspectos básicos útiles que
hay que conocer sobre los bucles en el siguiente módulo, pero por ahora debes
darte un aplauso y tomarte un merecido descanso; ¡has trabajado en todos los
artículos de este módulo!

Lo único que queda por hacer es trabajar a través de la evaluación de este módulo,
que te pondrá a prueba tu comprensión de los de los artículos anteriores.