Desarrollo Web Lección 3 - Listas
- Listas de JavaScript

Desarrollo Web Lección 3 - Listas

Listas de JavaScript

Objetivos

En este ejercicio, usará una matriz para almacenar una lista de elementos, usará un bucle for para repetir un bloque de código y usará una sentencia if para ejecutar diferentes instrucciones basadas en la entrada del usuario.

Configuración

Usaremos el primer archivo que creó en esta lección llamado 'lists.html', así que abra ese archivo en Visual Studio Code.
Cree un archivo llamado 'lists.js' en el mismo directorio.
También volveremos a jsfiddle para probar algunas cosas.
Comenzaremos con una pizarra en blanco para esto, así que si tiene algo en los paneles HTML , CSS o Javascript de jsfiddle, elimínelo.

JavaScript Externo

Comenzaremos en Visual Studio Code.
Así como creamos una entrada en <head> para vincular a la hoja de estilo externa, debemos decirle al navegador dónde encontrar nuestro código javascript.
Cree una nueva línea en <head> y escriba 'script', luego seleccione 'script:src'.
Escriba el nombre de nuestro archivo javascript 'lists.js' en el src atributo.

<script src="lists.js"></script>

Ahora podemos trabajar en nuestro archivo javascript y el navegador lo encontrará cuando abramos la página 'lists.html'.

Matrices

Una 'matriz' es esencialmente una lista en forma de código.
Escriba el siguiente texto en 'lists.js'.

jugadores = ['David Ospina Ramírez',
           'Johan Andrés Mojica Palacio',
           'Gustavo Leonardo Cuéllar Gallego',
           'Duván Esteban Zapata Banguera'];

A estas alturas ya debería estar familiarizado con la forma de la declaración. jugadores es el nombre de una variable y ahora contiene todo después del signo igual =.
los signos corchetes[] identifican una matriz, en este caso contiene una lista de jugadores.
Cada uno de los nombres de los jugadores es texto, por lo que los rodeamos con los signos comillas simples ' .
He incluido nombres de 4 futbolistas colombianos, pero hay muchos más. Siéntase libre de agregar cualquier otro que conozca usando el mismo formato.
He escrito cada uno de los nombres en una línea separada para que quede claro. Esta es una buena práctica, pero no es esencial: puede encadenarlos todos en la misma línea siempre que separe los elementos con una coma ,.

Elementos de Matriz de Referencia

Para mostrar estos elementos, necesitamos poder hacer referencia a ellos.
Ya has visto cómo hacer esto antes. En la lección anterior, accedimos a elementos con etiquetas específicas usando document.getElementsByTagName('span')[2]. document.getElementsByTagName('span') es una matriz (una lista) de todos los elementos con la etiqueta span. [2] significa que accedemos al 3er elemento de la lista. Recuerde que el primer elemento es [0].
Podemos ver esto más fácilmente en jsfiddle.
Cree una matriz simple en el panel de Javascript de la siguiente manera.

coches = ['Ferrari', 'Porsche', 'Lamborghini'];

Aquí, la matriz es lo suficientemente simple como para dejarla en una sola línea.
Ahora, mostremos el primer elemento de la lista en nuestra página.

document.body.innerHTML = coches[0];

Ejecute el código y vea que muestra 'ferrari', el primer elemento.
Intente cambiar el número dentro de [] y verifique los resultados para asegurarse de que comprende cómo funciona.
Usando esta técnica, podemos mostrar los resultados de nuestra lista en nuestra página de Visual Studio.
Abra 'lists.html' y agregue una lista desordenada justo antes de la etiqueta de cierre </body>.

<h2>Jugadores</h2>
  <ol></ol>
</body>

Usaremos esto para mostrar nuestra matriz de Javascript.
Después de la lista de jugadores en 'lists.js', agregue el siguiente código para generar nuestro código de lista.

listaJugadores = "";
listaJugadores += "<li>" + jugadores[0] + "</li>";
listaJugadores += "<li>" + jugadores[1] + "</li>";
listaJugadores += "<li>" + jugadores[2] + "</li>";
listaJugadores += "<li>" + jugadores[3] + "</li>";

¿Puedes ver cómo funciona esto? Estamos construyendo una cadena con todos los elementos de nuestra lista, uno en cada línea. Cada uno tiene las etiquetas de lista de apertura y cierre con el elemento de lista en el medio.
A continuación, debemos mostrar la cadena que hemos creado.

document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;

Esto busca la tercera etiqueta <ol> e inserta la cadena de lista allí.
Si ejecuta el código ahora, probablemente no funcionará porque el código Javascript se ejecuta antes de que el código HTML haya terminado de cargarse (es decir, la tercera etiqueta <ol> no existe cuando se ejecuta el código). Para evitar esto, debemos envolver el comando de visualización dentro de una función que solo se ejecuta cuando la página está completamente cargada.

window.onload = function() {
  document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;
}

window, como document identifica toda la página.
.onload se activa cuando el código HTML ha terminado de cargarse.
Cuando esto es cierto, el navegador ejecutará el function que contiene todo el código entre {}.
No es necesario que recuerde o comprenda todo esto por completo, pero debe poder reconocer este patrón y poder aplicarlo cuando sea necesario. Lo usaremos a menudo durante el curso para que se familiarice con él.
El código debería funcionar ahora cuando lo ejecuta, pero si ha agregado los 16 jugadores, enumerarlos a todos requeriría más trabajo. Y algunas listas (como la lista de productos en MercadoLibre) tienen miles de entradas.
Podemos ahorrarnos mucho tiempo escribiendo un 'bucle for' que se ejecutará a través de todas las entradas y creará la cadena dinámicamente.

Bucles 'For'

El nombre 'bucle for' parecerá extraño si eres nuevo en la programación. Esencialmente significa que 'para' cada elemento de la lista, haremos un 'bucle' a través de un bloque de código dado. es decir. vamos a aplicar el mismo código (añadir el elemento a nuestra cadena) a cada jugador.
Volvamos a jsfiddle para ver cómo funciona esto.
Escriba el siguiente código en la sección de Javascript debajo de la matriz de autos.

for (i = 0; i < 10; i++) {
}

for es la función, que ejecutará el código dentro {} de varias veces de acuerdo con las reglas dentro de ().
Las reglas se dividen en 3 partes: condición inicial, condición continua y cambios realizados cada vez, todo separado por ;.
Para cada uno de estos, por convención, usaremos una variable i, abreviatura de 'iterador'.
i = 0 significa que la primera vez que ejecutemos el código, la variable i tendrá un valor de cero.
Ejecutaremos el código siempre que i < 10 sea cierto.
Finalmente, i++ es lo mismo que i = i + 1 cada vez que recorremos el código, incrementaremos la variable i. Entonces se ejecutará con un valor de i incrementando de 0 a 9.
Veamos esto en acción agregando una 'alerta' para mostrar el valor de i.
Agregue el siguiente código entre el {}.

alert("i = " + i);

Cuando ejecute el código, debería ver una serie de ventanas emergentes que muestran el valor de i.
Comente eso con // .
Ahora, vamos a escribirlo en nuestra página directamente. Agregue el siguiente código dentro de {} .

	texto += i + "<br />";
	document.body.innerHTML = texto;

¿Puedes resolver esto?
texto es una variable que usaremos para contener el texto que se mostrará.
+= significa que agregaremos el nuevo texto a la cadena completa que estamos construyendo.
La nueva cadena es la variable i y una etiqueta <br> que agrega una nueva línea.
document.body.innerHTML se refiere a todo el contenido ( body) del documento HTML .
Asignaremos la cadena que hemos creado (texto) al cuerpo HTML .
Hay un problema con esto y si lo ejecuta no verá nada todavía.
Nuestro navegador no sabe cuál texto es la primera vez que lo ve.
Agrega el siguiente código en la parte superior de la sección Javascript (antes del bucle for).

var texto = "";

Aquí le estamos diciendo al navegador que texto es una variable (var de tipo String("")).
Ahora ejecute el código y vea la lista de números del 0 al 9.

Iterando arreglos

Entonces, ahora que comprende cómo funcionan los bucles for, podemos aplicarlo a una matriz.
Abre otra vez tu jsfiddle.
Editemos el bucle for que ya tienes.

var text = "";
for (i = 0; i < 10; i++) {
	text += i + "<br />";
}
document.body.innerHTML = text;

Para diferenciar las dos listas, cambiemos el nombre de la nueva lista a carList.

var listaCoche = "";
for (i = 0; i < 10; i++) {
	listaCoche += coches[i] + "<br />";
}
document.body.innerHTML = listaCoche;

En el ciclo for, la condición de inicio i = 0 y la instrucción de iteración i++ siguen siendo válidas, pero debemos ajustar la condición de continuación para que se detenga en 3 elementos.

var listaCoche = "";
for (i = 0; i < 3; i++) {
  carList += coches[i] + "<br />";
}
document.body.innerHTML = listaCoche;

Si ejecuta el suyo ahora, debería mostrar los 3 autos, uno en cada línea.
Ahora intente aplicar esto usted mismo a la lista de jugadores en Visual Studio Code.
Aquí está mi versión.

players = ['David Ospina Ramirez',
           'Johan Andres Mojica Palacio',
           'Gustavo Leonardo Cuellar Gallego',
           'Duvan Esteban Zapata Banguera'];

window.onload = function () {
  listaJugadores = "";
  for (i = 0; i < 4; i++) {
    listaJugadores += "<li>" + jugadores[i] + "</li>";
  }
  document.getElementsByTagName('ol')[2].innerHTML = listaJugadores;
}

¿Tuviste algo similar?
Si agregó más jugadores, no usará el número 4. O si lo hizo, no verá la lista completa.
De hecho, si extrae una lista de una base de datos, lo que haremos más adelante en el curso, es probable que no sepa cuántos elementos hay en la lista. ¿Que haces entonces?
Afortunadamente, Javascript puede contar los elementos numéricos en una matriz para usted usando .length que significa lo 'largo' de la lista.
Veamos cómo funciona esto en jsfiddle.
Agregue una alerta a su código Javascript.

alert("La lista coches tiene " + coches.length + " elementos.");

Ejecuta eso y comprueba que hace lo que crees que debería.
Entonces podemos cambiar nuestra condición continua para la lista de jugadores de la siguiente manera.

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

Ejecútelo ahora y vea que muestra exactamente tantos jugadores como tiene en su lista.
Felicitaciones por crear una lista usando Javascript.

Declaraciones Condicionales

A veces, la acción que realice dependerá de algún otro factor: entrada del usuario, acciones anteriores o información de una base de datos, por ejemplo.
La más simple de ellas es la 'sentencia if'.
Volvamos a jsfiddle para ver cómo funciona. Comentar (//) todo el Javascript que tengas ahí en este momento.
Ingrese el siguiente código en el panel de Javascript.

var x = 2;
if (x == 2) {
	alert ('la condición es verdadera');
}

La estructura básica de este código es if (condición) { codigo para ejecutar si es verdadero }.
Tenemos una condición dentro de (), y solo si ese código es verdadero ejecutamos el código dentro de {}.
En este caso, nuestra condición es x == 2, que comprueba el valor de x y el valor de 2. Si el valor de x es 2, ejecutará el código mostrando una alerta.
Como acabamos de definir x = 2 (primera línea), esta condición es verdadera y se mostrará la alerta. Pruebalo ahora.
Ahora cambie el valor de x a 5 (o cualquier cosa menos 2) y vuelva a ejecutar el código.
No se muestra nada. Agreguemos un mensaje si falla también.

var x = 2;
if (x == 2) {
	alert ('la condición es verdadera');
} else {
	alert ('la condición es falso');
}

Aquí, hemos agregado un elsecódigo que se ejecutará si no se cumple la condición. Vuelva a ejecutar el código con el valor incorrecto de x y vea la nueva declaración.
Ahora, apliquemos eso a nuestra lista de verificación en 'lists.html' usando Visual Studio Code.
Si el usuario marca una casilla de verificación, pondremos gris el texto asociado. Si lo desmarcan, haremos que el texto vuelva a ser negro.
Agregue un atributo a cada uno de los elementos de la lista para llamar a una función de Javascript.

        <li><input type="checkbox" name="harina" onchange="cambiarColor('harina')">100g harina</li>
        <li><input type="checkbox" name="huevos" onchange="cambiarColor('huevos')">2 huevos</li>
        <li><input type="checkbox" name="leche" onchange="cambiarColor('leche')">300ml leche</li>

onchange="" se activará cada vez que haya un cambio en el elemento; en este caso, cuando la casilla de verificación esté marcada o desmarcada. Cuando se active, ejecutará el código Javascript entre "".
Llamaremos a nuestra función de Javascript 'toggleCheckbox' y le pasaremos a la función el nombre del elemento de la casilla de verificación para que la función sepa qué línea actualizar.
Ahora, guarde 'lists.html' y abra 'lists.js'.
Agregue nuestra función debajo del código existente.

function cambiarColor(item) {
}

Primero, definimos el código como una 'función' usando function lo que significa que solo se ejecutará cuando se le llame específicamente. En este caso, lo llamaremos haciendo clic en la casilla de verificación, pero también podría llamarse desde otro código.
A continuación, llamamos a la función 'toggleCheckbox'.
Luego asignamos la información pasada por el onChange atributo (el nombre de la casilla de verificación) a la variable llamada item.
Finalmente, tenemos {} listo el contenido de nuestro código para ser ejecutado.
Para hacer las cosas un poco más fáciles, encontraremos la casilla de verificación real usando el nombre y la asignaremos a una variable. Copia el siguiente código dentro del {}.

  cb = document.getElementsByName(item)[0];

Hemos llamado a nuestra casilla de verificación 'cb'.
Esta vez buscamos nuestro elemento por nombre en lugar de etiqueta, así que usamos .getElementsByName. Luego elegimos el primero de la lista ([0]).
Ahora podemos agregar nuestra condición.

  if (cb.checked) {
  } else {
  }

Si nuestra casilla de verificación 'cb' está marcada, ejecutaremos un código para que el texto sea gris; de lo contrario, ejecutaremos un código para que sea negro.
El texto no forma parte de nuestra casilla de verificación, por lo que debemos encontrar el elemento al que pertenece, que en este caso es el elemento principal (nuestro elemento <input> está directamente dentro de nuestro elemento <li>), por lo que usamos .parentElement
El código completo es entonces el siguiente.

function cambiarColor (item) {
    cb = document.getElementsByName(item)[0];
    if (cb.checked) {
        cb.parentElement.style.color = "gray";
    } else {
        cb.parentElement.style.color = "black";
    }
}

Ejecuta eso y pruébalo por ti mismo.

Final Code

Siguiente: Ejercicios

Table of Contents