Los bucles nos van a servir para realizar tareas repetitivas (verás que es algo muy útil). La forma más sencilla de realizar un bucle es utilizando las funciones for y while:
Bucles for
La función for utiliza una variable que va cambiando de valor progresivamente (contador). Gracias a esta variable podemos contar el número de veces que queremos que se lleve a cabo una operación, por ejemplo.
SINTAXIS:
for(valor_inicial; condicion; actualizacion) {
//Sentencias a ejecutar
...
}
Como podemos observar, un bucle for consta de cuatro partes:
- Valor inicial. Valor inicial del contador.
- Condición. Condición que se ha de cumplir para que el bloque de sentencias se ejecute.
- Ejecución. Conjunto de órdenes a llevar a cabo cuando la condición se cumple.
- Actualización. Actualización del contador.
Al llegar al for, se inicializa el contador en el primer argumento. A continuación se mira si la condición se cumple. Si se cumple, entonces se ejecutarán las sentencias que hay dentro del bucle. Una vez acabadas las sentencias, el contador se actualiza en función de tercer argumento del for y se vuelve a verificar si aún se cumple la condición. En el momento en que la condición no se cumpla, las sentencias que hay dentro no se ejecutarán más. Veámoslo con un ejemplo:
Por ejemplo, supongamos que queremos contar del 1 al 10 utilizando una variable llamada "i":
for (i=1; i<=10; i=i+1) {
alert(i);
}
Ver la ejecución del ejemplo
El código anterior hará que aparezcan 10 ventanas alert() mostrando los números del 1 al 10
Fíjate en los parámetros de for:
- i=1. Esto significa que la variable
i va a comenzar a contar por 1 (es el valor inicial)
- i<=10. Esto indica que el
for va a estar funcionando mientras que i sea más pequeño o igual a 10.
- i=i+1. Esto significa que a cada paso,
i va a valer uno más (se le suma 1 a i)
Es decir, aparecerían todos los números entre 1 y 10 incluidos (1, 2, 3, 4 ...)
Si modificamos la línea de for por esta otra:
for (i=10; i<=20; i=i+2) {
alert(i);
}
Ver la ejecución del ejemplo
Este caso es casi igual al anterior, pero el salto es 2, es decir, aparecerán todos los números pares (10, 12, 14, ...) entre 10 y 20 incluidos
Puedes probar de la siguiente forma (recuerda que tienes que añadir <SCRIPT LANGUAJE="JavaScript"> y </SCRIPT> dentro de la página html para que funcione).
var i
for (i=1; i<=10; i=i+1) {
document.write(i)
}
Ver la ejecución del ejemplo
Si lo has hecho bien, aparecerán los números del 1 al 10 en la ventana del navegador de la siguiente forma: 12345678910
Si quieres separar un número de otro, solo tienes que realizar un pequeño cambio en la línea de document.write:
document.write(i+"<BR>")
Ver la ejecución del ejemplo
Si actualizas el contenido de tu navegador, verás que los números aparecen uno debajo de otro. <BR>, como ya sabes, es un separador que se utiliza en html (si tienes problemas con html mira la especificación W3C en castellano)
Hay que tener cuidado con la condición que se pone, ya que podemos causar un bucle infinito y hacer que el sistema se bloquee o bien que las sentencias nunca se lleven acabo:
for(i=10; i<6; i++) Nunca se pasaría por el for, ya que el valor de i es inicialmente mayor que 6 y no se cumple la condición.
for(i= 1; i>0; i++) Provocará un bucle infinito puesto que el valor inicial del contador(i) ya es mayor que cero y al ir aumentando el valor del contador, éste siempre será mayor que cero.
Prueba ahora a modificar distintos parámetros en for para obtener numeraciones diferentes.
while
While es otra forma parecida de crear bucles. El resultado es el mismo que cuando utilizamos for, pero verás que en determinadas ocasiones es mejor utilizar una u otra. La estructura de While es la siguiente:
SINTAXIS:
valor_inicial_contador
while (condición) {
//Sentencias a ejecutar
actualizacion_contador
}
Un ejemplo: un programa que nos hace adivinar un número:
var adivinarNum = 15
var num = 0
while (adivinarNum != num){
num = prompt ("Teclea un número entre 1 y 100", "")
}
alert("Has acertado")
En este ejemplo se utilizan dos variables: adivinarNum (que contiene el número que hay que adivinar: 15) y num (que es la variable que contiene el número que nosotros decimos, inicialmente a cero).
Hay que tener en cuenta que esto es sólo un ejemplo y, por supuesto, en la práctica es absurdo adivinar un número que ya sabemos.
La idea es que el programa nos preguntará números (utilizando prompt) hasta que el número que hayamos introducido sea igual al que tenemos que adivinar (adivinarNum, o sea 15 en este caso).
La línea num = prompt ("Teclea un número entre 1 y 100", "") hará que aparezca una pequeña ventana en la pantalla preguntándonos un número entre 1 y 100. Este número se asignará automáticamente a la variable num
while, no cerrará el bucle (se repetirá indefinidamente) hasta que no tecleemos el número 15. En este casonum será igual a adivinarNum (ambos 15) y el bucle terminará.
La última línea sólo funciona una vez que el bucle termina (al escribir el número 15) y nos da el mensaje de que hemos acertado
Podríamos mejorar más aún el programa de la siguiente forma:
var adivinarNum = 15
var num = 0
while (adivinarNum != num){
num = prompt ("Teclea un número entre 1 y 100", "")
if (num < ndivinarNum) alert("El número es menor")
else {
if (num > adivinarNum) alert("El número es mayor")
}
}
alert("Has acertado")
De esta forma damos una orientación del número correcto. Comprobamos a cada paso del bucle si el número que hemos introducido es mayor o menor que el que tenemos que adivinar gracias a las dos instrucciones if.
Prueba a modificar el programa. Intenta mejorarlo con lo que conoces de JavaScript hasta ahora
Por ejemplo. Para evitar que el número sea siempre 15, podrías añadir una línea justo antes del bucle while con otro promt de forma que el ordenador nos preguntara el número que hay que adivinar. De esta forma podrían jugar dos personas.
do...while
Es una opción del while que posibilita que el bloque de sentencias se ejecute, al menos, una vez.
SINTAXIS:
valor_inicial_contador
do{
//Sentencias a ejecutar
actualizacion_contador
}
while (condición)
En este caso, primero se ejecutan las sentencias contenidas en el bloque do y a continuación se mira la condición que tiene el while. Si la condición se cumple, se vuelven a ejecutar las sentencias del bloque do.
Con un bucle for veíamos que las sentencias contenidas dentro de la siguiente sentencia de control nunca se ejecutaría:
for(i=10; i<6; i++)
Veamos un ejemplo:
var total = 0, j=10;
for( j; j< 6; j++ ){
total +=j;
}
caso 1
|
var total = 0, j=10;
while( j< 6 ){
total +=j;
j++;
}
caso 2
|
var total = 0, j=10;
do{
total +=j;
j++;
}
while( j< 6 )
caso 3
|
En los casos 1 y 2 total será cero y j=10 después de pasar por ambos bucles. En el caso 3, al final total=10 y j=11.
Sentencia break
La instrucción break hemos visto que se utiliza en la sentencia switch para mandar salir de éste a la ejecución del programa. También puede utilizarse en los bucles for y while con el fin de detener dicha ejecución en el caso de que se cumpla alguna condición.
var total = 0, j=10;
for( j; j< 100; j++ ){
total +=j;
if( total >= 100)
break;
}
En el ejemplo, si la variable total tiene un valor de 100, se sale del for aunque la condición se siga cumpliendo.
Sentencia continue
La sentencia continue sirve para que no se lleven a cabo un conjunto de sentencias y manda el foco de atención de nuevo al bucle.
var total = 0, i=0;
while(i < 10) {
i++;
// si el total es 10 no hacer la suma al total
// y seguir el bucle
if(total == 10) continue;
total += i;
}
En este caso tenemos que 1+2+3+4 = 10, por lo que cuando el contador valga 5, al ser total=10, se vuelve de nuevo a la sentencia while. Al final, pues, el resultado será:
total = 0+1+2+3+4+6+7+8+9 = 40
