comparte el articulo 

Manual JavaScript. Bucle For

Actualizado el 02/12/2008 < > 0 Comentarios

Resumen: Un bucle for nos permite repetir un bloque de código según unas condiciones concretas, siempre que estas sean verdaderas.

Bucle For

Un bucle for nos permite repetir un bloque de código según unas condiciones concretas, siempre que estas sean verdaderas. Un bucle for tiene tres partes:

  • Inicialización: en esta parte, debemos indicar las variables que vamos a usar en las interacciones del bucle. Lo más habitual es declarar variables numéricas pero pueden ser perfectamente cadenas de caracteres, booleanos u objetos.
  • Condición: una o varias condiciones (unidas por operadores lógicos), que definen si el bucle está en condiciones de ejecutarse o no.
  • Operación: una expresión que normalmente (aunque no es imprescindible) modificará las variables definidas en la primera parte para que el código del bucle pueda usarlo en alguna operación concreta.

Un ejemplo simple de bucle for sería:

 for (x = 1; x < 10; x++)

  {

  document.write("El número es " + x + "<br>");

  }

Vamos a analizar este ejemplo. Fijémonos en la primera linea, donde podemos encontrar las tres partes que indicábamos antes:

  • x = 1: aquí usamos una variables x y le asignamos el valor ‘1’, que será el valor de inicialización del bucle.
  • x < 10: nos encontramos con una condición muy simple, y que se leería como: “si x tiene un valor menor que 10, la condición es válida”. Si la condición es válida, el bucle se seguirá ejecutando invariablemente. Veremos que eso puede generar un pequeño “problema”, que a veces podemos incluso aprovechar para nuestros propósitos, el denominado “bucle infinito”.
  • x++: aquí nos encontramos con una operación matemática usando un operador tipográfico “++”, que viene a ser la misma operación que “x = x + 1”. De hecho, también podemos usarla en vez de la que aparece, pero lo normal es que usemos un operador como este (de hecho, si estudiamos código realizado por otros, veremos que es la forma más común).

Visto como funcionan las diferentes partes de la declaración del bucle, podemos decir que significa:

“para una ‘x’ igual a 1, el bucle se ejecutará mientras el valor de ‘x’ sea menor que 10; al tiempo, cada vez que se ejecute el bucle, el valor de ‘x’ se incrementará en uno”

Así visto, el bloque de código que se encuentra entre llaves ‘{ }’ se ejecutará mientras se cumpla la condición, siendo que ‘x’ se esta incrementando constantemente en 1 con cada ejecución del bucle. Como podemos ver también en el ejemplo, podemos usar la variable en las expresiones para, como por ejemplo en este caso, visualizar su valor tantas veces como se ejecute el bucle.

También podemos influir en el bucle, como en este caso:

 <html>

  <head>

  </head>

  <body>

  <script language="javascript">

  for (x = 1; x < 16; x++)

  {

  if (x % 2)

  {

  x++;

  }

  document.write('Mi número es ' + x + '<br>');

  }

  </script>

  </body>

  </html>

Podemos apreciar en este ejemplo que el resultado no es el aparentemente esperado para este bucle, dado que aunque en la parte de operación incrementamos la variable sólo en 1, el resultado final es que sólo vemos números pares en la ventana. ¿Por qué? Fijémonos en el código del bucle:

  • El condicional if sólo será cierto en el caso de que el módulo de ‘x’ (la operación matemática de ‘resto’, representada por el operador ‘%’) devuelva como resultado un valor impar.
  • Si la condición de if se cumple, se ejecutará un trozo de código que incrementará el valor de ‘x’ en uno, influyendo de esta forma en el desarrollo del bucle.

De esta forma, en vez de mostrar los valores numéricos del 1 al 15, como sería en el caso normal, resulta que aparecen sólo valores pares. El truco en este código es sibilino pero potente: la operación ‘x % 2’ devolverá un 0 si ‘x’ es par, pero devolverá un valor distinto si es un número impar. ¿Esto que significa? Si el valor de la operación es cero, la condición es falsa (es un comportamiento muy habitual en muchos lenguajes de programación), con lo que la condición sólo será verdadera cuando ‘x’ sea impar. Un número impar devolverá un módulo mayor que cero al dividirlo entre 2. Al incrementar un valor impar en 1, se convierte en un valor par, que es lo que finalmente vemos en pantalla.

Parece enrevesado, pero un estudio a fondo de este código nos permite apreciar algunas de las propiedades ocultas de la programación en JavaScript. Muchas de estas propiedades y características se aprenden con la experiencia, pero en este curso veremos algunas de ellas que nos serán útiles en nuestro trabajo futuro.

Además, como derivación de que un bucle ejecuta código, esto nos lleva a que podemos anidar varios bucles uno dentro de otro, como en este caso:

 for (x = 1; x < 10; x++)

  for (y = 1; y < 10; y++)

  document.write(x + ":" + y);

En este ejemplo, vemos que un bucle se ejecutará dentro del otro mostrándonos los valores de forma ordenada. No es preciso escribir llaves si el código a escribir es de una sola linea.

Para terminar este apartado, veamos rápidamente como realizar un bucle infinito con for:

 for (;;)

  {

  document.write("Esto no se acaba nunca...");

  }

Esto genera un pequeño problema… Si este bucle se ejecuta constantemente… ¿Qué hacemos para detenerlo o controlarlo? Usaremos dos palabras para controlar un bucle (sea cual sea), ya sea finito o infinito: break y continue.

Break es la palabra reservada para cortar un bucle en un momento determinado. Es muy usada en condicionales if, ya que al darse una cierta condición, podemos controlar un bucle cortándolo cuando se dé un cierto momento concreto.

Continue, sin embargo, también corta la ejecución del bucle, pero no igual que break. Mientras que break finaliza definitivamente el bucle, continue salta lo que queda de bucle y sigue la siguiente interacción sin más.

 var x = 1;

  for (;;)

  {

  x++;

  if (x > 5) break;

  document.write(x + '<br>');

  }

En este ejemplo vemos que, cuando el valor de ‘x’ sea mayor de 5, el bucle se romperá. Es otro nos permite apreciar el resultado de da continue:

 for (x = 1; x < 10; x++)

  {

  if (x % 2) continue;

  document.write(x+'

' );

  }

Ya nos podemos imaginar el resultado.

Publicado el 02/12/2008, última actualización 02/12/2008.

Autor: Marcos Legido Hernández

URL: Licencia GNU

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras