contacto[arroba]digitallearning.es
Título curso Aprende a programar (con Javascript)

Bucle for

Con frecuencia ideamos algoritmos o programas en los que necesitamos que una serie de acciones se repitan varias veces hasta que una condición se cumpla (o deje de cumplirse) para que pueda completarse. Estamos hablando del uso de bucles (o ‘loops’) en programación.

¿Qué queremos decir con eso? Utilizando un símil sencillo, pensemos en el proceso de hinchar el neumático de un coche con una compresor en una gasolinera. Los pasos serían básicamente darle aire y comprobar por la aguja del compresor en cuánto queda la presión de la rueda; si sigue baja, volver a darle aire y volver a comprobar y así sucesivamente hasta llegar a la presión adecuada (simplificamos este ejemplo, pensando que no sobrepasamos nunca esa presión). Básicamente estamos repitiendo varias veces un paso, ‘dar aire’, hasta que no cumpla una condición,  ‘alcanzar la presión correcta’.

Veamos ahora como funciona en Javascript la sentencia que nos permite repetir una o varias instrucciones mientras se cumpla una condición: el bucle ‘for’.

Comenzamos con un ejemplo muy básico, sin mucha utilidad, para ver su sintaxis y cómo funciona. Vamos a escribir una misma frase cinco veces en pantalla:

Como puedes ver, la estructura tiene ciertas similitudes a la sentencia ‘if’:

  • Después de la palabra clave ‘for’, dejamos espacio en blanco y entre paréntesis encerramos 3 instrucciones:
    • En la 1ª, (var i = 0;) declaramos una variable ‘i’ que le damos el valor cero ( podríamos haberla llamado de cualquier otra forma)
    • Luego, ponemos una condición (i < 5;), es decir que este valor sea menor que cinco
    • Por último, incrementamos el valor de i en ‘1’ (i++)
  • Como ocurría con ‘if’, si esa condición es válida se ejecuta lo que hay entre las llaves ‘{‘…’}’ . En este caso es la instrucción  document.write (linea 3) que imprime una frase y el valor de ‘i’.
  • Al finalizar estas instrucciones se vuelve a comprobar la condición primera, y como en este caso ‘i’ vale 1, sigue cumpliéndose que es menor que 5 y las ejecuta otra vez. En el siguiente paso ‘i’ vale 2, y se vuelve a ejecutar, así hasta que ‘i’ vale 5, finalizándose el bucle. La siguiente instrucción tras salir del bucle (linea 5) nos avisa con un mensaje.

La variable ‘i’  actúa como contador, ya que se incrementa en una unidad en cada ejecución del bucle, hasta alcanzar el valor límite impuesto en la condición.

Ejercicio

Prueba a hacer el sistema del contador al revés, es decir, que comience en 5 y el bucle se pare al llegar este contador a 0

Sintaxis de ‘for’

De forma general, si incluimos más de una instrucción a ejecutar,  la sentencia for tiene la siguiente sintaxis:

Ejemplo con bucle 'for' y un condicional 'if'

Veamos ahora otro ejemplo, algo más elaborado que el anterior.

Imaginemos que vamos a escribir un script para pasar un test online. En ese test, el usuario debe acertar una pregunta antes de agotar 3 intentos. El script consistiría básicamente en:

  • Definimos un contador de intentos a través de una variable y le damos un valor de partida ‘0’ (var contador = 0;)
  • Comparamos el valor del contador con un valor límite de intentos, en este caso ‘3’
    • Si el valor del contador está por debajo del límite:
      • Mostramos una pregunta a través de un una instrucción ‘prompt’, para que él pueda introducir ahí su respuesta.
        • ¿Es la respuesta correcta? (utilizamos un ‘if’ comparando su contestación con la respuesta correcta)
          • Sí –> se muestra un mensaje de acierto y se acaba el test
          • No –> Se incrementa el contador en ‘1’ y se vuelve al segundo paso, para compararlo de nuevo con el valor límite
    • Si el valor del contador no es menor que el límite:
      • Mostramos un mensaje de fallo y se acaba el test

Esto, traducido a Javascript utilizando la sentencia for, podría escribirse:

Notas:

1) Hemos utilizado la palabra clave ‘break‘ que permite salir de un bucle ‘for’ antes de que se completen todos sus ciclos. Lo hemos utilizado porque si se está evaluando las instrucciones dentro del ‘if’, es que el usuario ha acertado ya la pregunta y no tiene sentido seguir preguntándole.

2) En la última sentencia podríamos haber escrito la condición como: (acierto === false), sin embargo, hemos empleado el operador “negación lógica” (!) antes del nombre de la variable: (!acierto).
Es decir, si acierto tiene el valor booleano ‘true‘ (verdad), entonces  !acierto tiene el valor booleano ‘false‘ (falso) y viceversa. Esta última es la forma más habitual de hacerlo.

Ejercicio

Intenta modificar el anterior ejemplo para que no sea necesario utilizar un ‘break’, es decir, que aunque no lo incluyamos, el bucle acabará igualmente si el usuario escribe la respuesta correcta.