Alessandra Salvaggio - JavaScript - Guía completa

Temas tratados

•Bucle forcon í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.

• uno
• dos
• tres

Puedes encontrar este ejemplo en el archivo bucle1 .html

La parte HTML de este archivo contiene una lista no numerada (etiqueta

) de elementos (etiqueta
• ). 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 idigual a “miId”;

  • tag:busca los elementos de tipo etiqueta ( p, pre, ul...).

  En nuestro caso específico, podemos localizar los elementos LIcontenidos en el elemento ULcon 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 querySelectorAlldel 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 listaLIpara mostrar cuántos elementos hay en la lista (tres, en nuestro caso) recurriendo a la propiedad lengthdel 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 LIde 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:

  • uno
  • dos
  • tres

  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 LIestá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 valuevarias 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 forcon í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 illega 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 itemque representa el conjunto de elementos LIque 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 itemun número que representa su posición.