cabecera javascript para novatos

El bucle «for» | JavaScript para novatos #9º

Continuando con los bucles, hoy toca hablar del bucle «for».

Índice general del «Curso de JavaScript»:

  1. Introducción
  2. Las variables
  3. Tipos de datos
  4. Los operadores
  5. Declaraciones if y else
  6. Condiciones complejas y anidadas
  7. Estructuras else if y switch
  8. Bucles while y do while
  9. Bucle for
  10. Integrando JavaScript
  11. Las funciones
  12. Alcance de las variables
  13. Funciones predefinidas
  14. Programación orientada a objetos I
  15. Programación orientada a objetos II
  16. Herencia y prototipos
  17. Closure
  18. Los array I
  19. Los array II
  20. El DOM
  21. Acceso a los nodos del DOM
  22. Crear nuevos nodos en el DOM
  23. Eliminar nodos del DOM
  24. Modificar contenido de los nodos
  25. Modificar atributo style (DOM)
  26. Modificar atributo class (DOM)
  27. Programación basada en eventos I

Bucle “for”

La estructura “for” utiliza una variable como contador para limitar las iteraciones  del bucle. El bloque que contiene el “for” se ejecutará hasta que el contador llegue a un determinado punto. Aunque pueda parecer un poco confuso de primeras, en seguida lo veremos con más claridad.

Gráfico diagrama bucle for
9.1 Diagrama bucle for

Conozcamos los tres parámetros que necesitamos para que nuestro “for” funcione como un contador.

Sintaxis parametros for
9.2 Sintaxis parámetros for

– Expresión de inicialización:

Aquí inicializamos una variable dándole el valor inicial con el cual comenzará el contador. Ejemplo. (contador = 0).

– Expresión de evaluación:

Aquí comprobaremos si la condición se cumple o no. Si se cumple se ejecutarán las instrucciones que contiene el bucle, y en caso contrario se saldrá del mismo. (contador < 10).

– Expresión de actualización:

Aquí incrementamos o decrementamos el valor de la variable declarada en la expresión de inicialización. De ese modo hacemos que en alguna de las vueltas la condición no se cumpla y salgamos del bucle.

Ahora veamos la sintaxis completa del “for”.

Gráfico sintaxis for
9.3 sintaxis for

Practiquemos con un ejemplo.

for (i = 1; i < 11; i++) {
      document.write("En esta vuelta \"i\" vale: " + i + "</br>");
}

En el código de arriba le estamos ordenando:

– La variable «i» vale 1 ( i = 1 ).

– Vas a repetir este bucle mientras «i» sea menor que 11 ( i < 11 ).

– En cada vuelta del bucle vas a incrementar «i» en 1 ( i++ ) y vas a escribir en el documento («En esta vuelta \»i\» vale: » + i + «</br>»).

NOTA DE INTERÉS:

En la expresión de inicialización hemos llamado «i» a la variable que utilizamos como contador.

Si bien se puede llamar de cualquier otra forma, en los bucles “for” se suele llamar «i» en alusión a índice (index) por una cuestión práctica.

RECORDATORIO:

Los bucles «while» y «for» comprueban la expresión de evaluación al comienzo del bucle. Por lo que si se evalúa como falsa no se ejecutará ni una sola vez.

En el caso de «do while», al evaluarse la expresión al final, como mínimo se ejecutará una vez.

Ruptura de bucle con «break»

Además de utilizarse en las estructuras «switch», como ya hemos visto, «break» también nos permite salir de un bucle antes de tiempo.

Vamos con un ejemplo.

for (i = 1; i < 11; i++) {
      document.write("En esta vuelta \"i\" vale: " + i + "</br>");
      if (i == 6) {
      break;
      }
}

En este caso, al introducir un condicional if que ejecuta un «break» cuando «i» sea igual a 6, al llegar a la iteración número 6 se sale del bucle.

Ruptura de bucle con «continue»

La declaración «continue» nos permite omitir una iteración de un bucle si se cumple una condición y proseguir el bucle en la iteración siguiente.

Veámoslo.

for (i = 1; i < 11; i++) {
      if (i == 6) {
            continue;
      }
      document.write("En esta vuelta \"i\" vale: " + i + "</br>");
}

En éste último código, en la vuelta que se cumple «i» es igual a 6, «continue» salta el código que se sitúa a continuación y pasa a la siguiente iteración.

Se denomina «bloque de código» al código que está entre llaves, «{ }». Las declaraciones «break» y «continue» son las únicas que pueden hacer saltar fuera de un bloque de código.

NOTA DE INTERÉS:

Recordar otra vez la importancia de que toda estructura de bucle tenga una condición que haga que en algún momento se salga del mismo. De lo contrario, el bucle será infinito y se corre el riesgo de colgar el equipo del usuario.

Hasta aquí el espacio dedicado a los bucles, en la próxima entrega de este tutorial de javascript trataremos las funciones y veremos cómo nos facilitan el trabajo.


Ir a Javascript para novatos 10ª parte

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *