Bucles WHILE y DO WHILE

Estamos tratando acerca de las distintas estructuras de control que existen en el lenguaje Javascript y en concreto viendo los distintos tipos de bucles que podemos implementar en este lenguaje de programación. En artículos anteriores del Manual de Javascript vimos ya el primero de los bucles que debemos conocer, el bucle for y ahora vamos a tratar sobre los otros dos tipos de estructuras de control para hacer repeticiones. Así pues, veamos ahora los dos tipos de bucles WHILE que podemos utilizar en Javascript y los usos de cada uno.

Bucle WHILE

Estos bucles se utilizan cuando queremos repetir la ejecución de unas sentencias un número indefinido de veces, siempre que se cumpla una condición. Se más sencillo de comprender que el bucle FOR, pues no incorpora en la misma línea la inicialización de las variables su condición para seguir ejecutándose y su actualización. Sólo se indica, como veremos a continuación, la condición que se tiene que cumplir para que se realice una iteración.

while (condición){
    //sentencias a ejecutar
}

Un ejemplo de código donde se utiliza este bucle se puede ver a continuación.

var color = ""
while (color != "rojo"){
    color = prompt("dame un color (escribe rojo para salir)","")
}

Este es un ejemplo de lo más sencillo que se puede hacer con un bucle while. Lo que hace es pedir que el usuario introduzca un color y lo hace repetidas veces, mientras que el color introducido no sea rojo. Para ejecutar un bucle como este primero tenemos que inicializar la variable que vamos utilizar en la condición de iteración del bucle. Con la variable inicializada podemos escribir el bucle, que comprobará para ejecutarse que la variable color sea distinto de "rojo". En cada iteración del bucle se pide un nuevo color al usuario para actualizar la variable color y se termina la iteración, con lo que retornamos al principio del bucle, donde tenemos que volver a evaluar si lo que hay en la variable color es "rojo" y así sucesivamente mientras que no se haya introducido como color el texto "rojo".

Bucle DO...WHILE

El bucle do...while es la última de las estructuras para implementar repeticiones de las que dispone en Javascript y es una variación del bucle while visto anteriormente. Se utiliza generalmente cuando no sabemos cuantas veces se habrá de ejecutar el bucle, igual que el bucle WHILE, con la diferencia de que sabemos seguro que el bucle por lo menos se ejecutará una vez.

Este tipo de bucle se introdujo en Javascript 1.2, por lo que no todos los navegadores los soportan, sólo los de versión 4 o superior. En cualquiuer caso, cualquier código que quieras escribir con DO...WHILE se puede escribir también utilizando un bucle WHILE, con lo que en navegadores antiguos deberás traducir tu bucle DO...WHILE por un bucle WHILE.

La sintaxis es la siguiente.

do {
    //sentencias del bucle
} while (condición)

El bucle se ejecuta siempre una vez y al final se evalúa la condición para decir si se ejecuta otra vez el bucle o se termina su ejecución.

Veamos el ejemplo que escribimos para un bucle WHILE en este otro tipo de bucle.

var color
do {
    color = prompt("dame un color (escribe rojo para salir)","")
} while (color != "rojo")

Este ejemplo funciona exactamente igual que el anterior, excepto que no tuvimos que inicializar la variable color antes de introducirnos en el bucle. Pide un color mientras que el color introducido es distinto que "rojo".

Ejemplo de uso de los bucles while

Vamos a ver a continuación un ejemplo más práctico sobre cómo trabajar con un bucle WHILE. Como resulta muy difícil hacer ejemplos prácticos con lo poco que sabemos sobre Javascript, vamos a adelantar una instrucción que aun no conocemos.

En este ejemplo vamos a declarar una variable e inicializarla a 0. Luego iremos sumando a esa variable un número aleatorio del 1 al 100 hasta que sumemos 1.000 o más, imprimiendo el valor de la variable suma después de cada operación. Será necesario utilizar el bucle WHILE porque no sabemos exactamente el número de iteraciones que tendremos que realizar (dependerá de los valores aleatorios que se vayan obteniendo).

var suma = 0
while (suma < 1000){
    suma += parseInt(Math.random() * 100)
    document.write (suma + "<br>")
}

Suponemos que por lo que respecta al bucle WHILE no habrá problemas, pero donde si que puede haberlos es en la sentencia utilizada para tomar un número aleatorio. Sin embargo, no es necesario explicar aquí la sentencia porque lo tenemos planeado hacer más adelante. De todos modos, si lo deseas, puedes ver este artículo que habla sobre números aleatorios en Javascript.

Podemos ver una página con el ejemplo en funcionamiento.

Con esto ya hemos conocido todos los tipos de bucles que existen en Javascript, no obstante aun vamos a dedicar un artículo para explicar las sentencias break y continue que nos sirven para alterar el funcionamiento normal de los bucles en dos sentidos.