Читать книгу JavaScript: Guía completa - Alessandra Salvaggio - Страница 12
ОглавлениеLos bucles
En muchas situaciones, es necesario repetir la misma operación sobre distintos datos y, para ello, nos pueden ayudar los bucles. Existen distintos tipos de bucle: aquí estudiaremos el bucle for con índice. También veremos cómo utilizar la consola del navegador para el análisis del código.
Temas tratados
•Bucle for con índice
•Seleccionar elementos en el DOM (HTML) con los selectores CSS
•Modificar atributos de elementos en el DOM
•Utilizar el operador de asignación compuesta
•Utilizar el operador de autoincremento
•Utilizar la consola del navegador
Empezamos con un caso sencillo sobre el cual trabajaremos utilizando bucles.
Nuestro objetivo es contabilizar los elementos de una lista.
<body><ul id="numeros"><li>uno</li><li>dos</li><li>tres</li></ul><p id="output"></p><script type="text/Javascript"> const listaLI = document.querySelectorAll('#numeros li'); const mensaje = `Hay ${listaLI.length} elementos en la lista UL "numeros"`; document.getElementById('output').innerHTML = mensaje;</script></body>
Puedes encontrar este ejemplo en el archivo bucle1 .html
La parte HTML de este archivo contiene una lista no numerada (etiqueta <UL>) de elementos (etiqueta <LI>). El elenco tiene un ID asociado con valor "numeros".
La primera operación que debemos llevar a cabo en nuestro código consiste en localizar esta lista dentro de la página HTML. Para ello, utilizaremos las funciones del DOM (Document Object Model) que ya hemos utilizado en los capítulos anteriores mediante el objeto document.
Recordemos que, para encontrar un elemento HTML (una etiqueta), se pueden utilizar diferentes opciones (en el capítulo dedicado al DOM retomaremos este argumento):
•Selector CSS .miClase: busca los elementos que tienen la clase CSS denominada miClase.
•Selector CSS #miId: busca los elementos que tienen un atributo id igual a “miId”;
•tag: busca los elementos de tipo etiqueta (p, pre, ul...).
En nuestro caso específico, podemos localizar los elementos LI contenidos en el elemento UL con id="numeros" con el selector CSS "#numeros li” utilizado como argumento de la función querySelectorAll() del objeto document. La función devuelve una lista de los objetos del documento que corresponden a los selectores especificados como argumentos.
const listaLI = document.querySelectorAll('#numeros li');
El objeto listaLI (de tipo NodeList, un contenedor de objetos del cual hablaremos más adelante en este libro) contiene todos los elementos localizados con el selector pasado a la función querySelectorAll del objeto document.
| NOTA | Es muy habitual buscar elementos en la página mediante librerías JavaScript, entre las cuales la más famosa es jQuery, puesto que inicialmente esta operación, realizada directamente en JavaScript, era un poco compleja. Sin embargo, con el paso de los años, los navegadores han introducido nuevas funcionalidades (como, precisamente, nuestra función querySelectorAll), que en muchos casos hacen que adoptar una librería externa no valga en absoluto la pena. |
A continuación, podemos utilizar listaLI para mostrar cuántos elementos hay en la lista (tres, en nuestro caso) recurriendo a la propiedad length del objeto listaLI, que precisamente contiene el número de elementos que contiene el objeto.
const mensaje = `Hay ${listaLI.length} elementos en la lista UL "numeros"`;document.getElementById('output').innerHTML = mensaje`;
Ahora, vamos a tratar de complicar un poco nuestro ejemplo. En lugar de limitarnos a contabilizar cuántos son los elementos de la lista, también queremos asociar a los elementos LI de esta lista un atributo “value”, cuyo valor expresa el número en cifras.
En otras palabras, queremos obtener un resultado como el que ves a continuación:
<ul id="numeros"><li value="1">uno</li><li value="2">dos</li><li value="3">tres</li></ul>
| NOTA | Naturalmente, debemos pensar que tenemos que realizar esta operación de manera dinámica, por ejemplo, porque no podemos modificar nosotros el archivo HTML (creado por otro desarrollador) o porque la misma lista UL ha sido creada dinámicamente. |
| NOTA | Para no complicar demasiado el ejercicio, supongamos que los elementos LI están definidos por orden (“uno”, “dos”...) y que, por tanto, no necesitamos saber que la palabra “dos” indica el número 2, sino que asumiremos simplemente que el primer elemento es 1, el segundo es 2, etc. |
Esto significa que debemos repetir la operación de agregar los atributos value varias veces, una para cada elemento de la lista. Para ejecutar estas operaciones, recurrimos a uno de los muchos bucles que JavaScript pone a nuestra disposición: el bucle for con índice.
Su forma es la siguiente:
for (valor índice inicial; valor máximo del índice; cuánto aumenta el índice) {instrucciones a repetir}
Por ejemplo, el bucle:
for (let i=1; i <= 10; i+=1) {instruccion(i); }
repite la instrucción 10 veces, con la variable índice i, que asume valores del 1 (i=1) al 10 (i <= 10), con paso 1 (i += 1): 1, 2, 3 hasta 10. Cuando i llega a 11, el bucle termina y la ejecución continúa desde la línea siguiente.
| NOTA | Es habitual asignar un nombre corto, como i, j, k, a las variables índice de los bucles. |
En nuestro ejemplo, hemos utilizado el operador de asignación compuesta, que combina un operador aritmético (+, en este caso) con el operador de asignación (=).
Con este operador, conseguimos realizar rápidamente 5 de i, añade 1 y asigna el resultado a i”.
La notación:
i+=1
corresponde a:
i = i+1
El operador de asignación compuesta proporciona una solución más sintética y con menos probabilidades de error, dado que no se debe repetir el nombre de la variable sobre la que se trabaja.
Una alternativa a este operador es el operador de autoincremento (i++), que desarrolla la misma función.
La diferencia principal entre el operador de asignación compuesta (i+=1) y el operador de autoincremento (i++) consiste en el hecho que el primero permite incrementos de distintas unidades (i+=2, por ejemplo), mientras que el segundo permite solo incrementos de una unidad.
Volviendo a nuestro problema, podemos añadir al código mostrado anteriormente el bucle siguiente:
for (let i=0; i < listaLI.length; i+=1) {listaLI.item(i).value = i+1;}
Puedes encontrar este ejemplo en el archivo bucles2 .html
Analicemos con detalle este código.
El bucle empieza por el número 0 y acaba antes del 3 (el valor de listaLI.length), es decir, el bucle se ejecuta 3 veces (cuando i=0, cuando i=1 y cuando i=2) y se interrumpe cuando i=3 (i < listaLI.length).
La instrucción contenida en el bucle for (es decir, que se repite en cada iteración del bucle):
listaLI.item(i).value = i+1;
utiliza el conjunto de valores item que representa el conjunto de elementos LI que se encuentran en nuestra lista UL.
Cada elemento (es decir, cada elemento LI) tiene una posición determinada en el conjunto. Podemos acceder a un elemento en concreto indicando entre los paréntesis de item un número que representa su posición.
En la primera ejecución del bucle, accedo al elemento en la posición 0 (i al inicio vale 0), en la segunda repetición, accedo al elemento en la posición 1 (i ha aumentado una unidad), en la tercera y última, accedo al elemento en la posición 2 (i ha aumentado otra unidad).
En nuestro caso específico:
•En la primera vuelta del bucle for, i = 0 y listaLI.item(i) indica el elemento LI “uno”.
•En la vuelta siguiente, i = 1 y listaLI.item(i) indica el elemento LI “dos”.
•En la tercera y última vuelta, i = 2 y listaLI.item(i) indica el elemento LI “tres”.
Observa que en JavaScript los conjuntos de valores (como listaLI) siempre tienen índices que empiezan desde 0: el primer elemento tiene índice (posición) 0, el segundo tiene índice 1 y así sucesivamente.
Ahora que ya hemos visto cómo acceder a los distintos elementos LI, debemos precisar que con listaLI.item(i).value accedemos al atributo value del elemento LI: si el atributo value ya no existe, se crea y se le asigna un valor, si no, solo se modifica el valor.
Con la instrucción listaLI.item(i).value = i+1 fijamos el valor de value al valor del índice aumentado en una unidad (para compensar el hecho de que el índice empieza desde 0 mientras que los números de la lista lo hacen desde 1).
Seguramente has observado que, en este caso, hemos escrito i + 1 y no i+=1 o i+. Esto es así porque no estamos modificando el valor de i, sino que solo lo estamos utilizando (leyendo) y, de hecho, es la instrucción for la que se ocupa de gestionar el incremento de la variable índice en cada vuelta o bucle.
La consola
Sin embargo, si ejecutamos en el navegador este código, no percibimos su acción (estamos actuando a nivel de código HTML con una modificación que no tiene ningún impacto sobre el output de la página en el navegador).
¿Y cómo podemos ver el resultado de nuestro bucle for?
Una posibilidad consiste en leer el código fuente de la página del navegador. Para acceder al código fuente de la página, pulsa con el botón derecho del ratón en cualquier punto de la página y selecciona la opción “Ver código fuente” o similar (depende del navegador): ¡verás que el código HTML ha sido modificado por nuestro código JavaScript!
Una manera más potente de analizar una página es abrir el modo de desarrolladores pulsando la tecla F12 del teclado (en Firefox y Chrome, también mediante la combinación CTRL+MAYÚS+i).
En función del navegador que se utilice, aparece una ventana independiente o una sección en la página que muestra distintas pestañas, una de las cuales permite analizar el código HTML (Figura 5.1), además de los estilos CSS y el código JavaScript cargados por la página.
Figura 5.1 – El código HTML que genera la página mostrada.
Otra sección muy interesante de las herramientas para los desarrolladores es la consola: un área donde el navegador muestra eventuales errores encontrados durante la carga de la página y/o la ejecución del código JavaScript.
Desde nuestro código, es posible utilizar la consola del navegador para escribir mensajes que nos pueden ayudar a identificar problemas (los denominados mensajes de depuración).
Por ejemplo, podemos modificar nuestro bucle for del siguiente modo.
for (let i=0; i<listaLI.length; i+=1) {console.log(`i=${i} value=${i + 1} elemento=${listaLI.item(i)}`);listaLI.item(i).value = i+1;}
Puedes encontrar este ejemplo en el archivo Bucles2 .html
La instrucción console.log llama a la función log del objeto console, que escribe un mensaje en la consola del navegador.
| NOTA | Obviamente, si la consola no está abierta, el mensaje no aparece. |
Si ejecutamos el bucle, tendremos, en la consola (Figura 5.2), líneas como estas:
i=0 value=1 elemento=[object HTMLLIElement]
i=1 value=2 elemento=[object HTMLLIElement]
i=2 value=3 elemento=[object HTMLLIElement]
Figura 5.2 – Mensajes en la consola.
Estos mensajes confirman los valores de la variable índice i, del valor calculado para el atributo value y del hecho que listaLI.item contiene objetos JavaScript que representan elementos LI.
Algunos desarrolladores suelen mostrar en pantalla estos mensajes mediante ventanas alert que se abren en la página del navegador (Figura 5.3).
alert(`i=${i} value=${i + 1} elemento=${listaLI.item(i)}`);
Figura 5.3 – La ventana alert.
Es preferible utilizar console.log en lugar de las ventanas de alert, porque console.log no interrumpe la ejecución del código y en cambio alert, sí.
