Los Bucles en JavaScript

En programación, la función principal de un programa es ser ejecutado para que sus instrucciones sean realizadas, bien por el procesador central (en el caso de un lenguaje compilado como C o Pascal), o por un interprete, que es un intermediario entre el programa y el procesador central. De esta forma, la ejecución lineal de las instrucciones genera acciones, cosas que nuestro programa hace porque se lo hemos indicado. Ahora bien, ¿Que ocurre cuando queremos hacer varias veces una misma cosa? Tendríamos que escribir el mismo código varias veces, aunque el problema sería más peliagudo si encima el número de veces a ejecutar el código fuera variable, cambiase según el estado del programa (definido por las variables). Para ello tenemos dos tipos de elementos fundamentales: bucles y funciones.

Un bucle permite repetir varias veces el mismo código en la misma situación, incluso aunque la repetición de ese código sea variable y no la misma cantidad de veces cada vez. Como estudiaremos luego, tenemos a nuestra disposición dos bucles, for y while. En el caso de JavaScript, los bucles son condicionales, es decir que, como en el caso de if, necesitamos de condiciones como las que hemos estudiado para realizar las repeticiones de código. En otros bucles existen bucles incondicionales, lo que significa que sólo pueden ir de cierto punto a cierto punto (por ejemplo, para contar de 1 a 10, aunque esto, como veremos, también lo podemos hacer con los condicionales).

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.

Usuarios que han visto este tema también han visto...

- Enviar mediante POST y GET usando AJAX
- Efecto Nieve
- Detectar mediante JavaScript cuando una imagen no es cargada
- Página atrás y página adelante con javascript
- Listas Dependientes en JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento