Javascript para novatos 8º

Javascript para novatos 8º

publicado en: Diseño web | 0

En este capítulo de “Javascript para novatos” vamos a ver los bucles, estructuras que nos servirán para repetir un conjunto de sentencias.

Básicamente un bucle es una estructura que ejecuta un grupo de instrucciones repetidamente mientras se cumple una condición. Cuando esa condición no se cumple se sale de la estructura para continuar con el flujo normal.

Javascript nos proporciona varios tipos de bucle; «while», «do while», «for». También tenemos «for in» pero éste lo veremos más adelante.

 

Bucle “while”

Un bucle «while» repite un bloque de código mientras una condición sea verdadera.

Gráfico diagrama bucle while
Gráfico 8.1

Sigamos el diagrama de arriba. Primero nos encontramos con la condición, en el caso de que nos devuelva «true» (la condición se cumple) se ejecuta 1º la instrucción y en segundo lugar la expresión de actualización. Finalmente se vuelve a comprobar la condición.

La expresión de actualización nos sirve para variar en cada repetición el valor de la variable, de tal manera que en algún momento la condición se deje de cumplir y devuelva false, de lo contrario estaríamos creando un bucle infinito.

Cuando la condición no se cumpla, se abandonará el bucle y continuará el flujo normal.

Veamos la sintaxis.

Gráfico sintaxis while
8.2 sintaxis while

Como siempre la mejor manera de entenderlo es con un ejemplo.

var vuelta = 1;  // Inicializamos la variable con el valor "1"
document.write("Comienza el bucle. ")
while (vuelta<11) {
      document.write("Esta es la vuelta: " + vuelta + "<br/>");
      vuelta = ++vuelta;  //Actualizamos el valor de vuelta incrementándolo en 1
}

document.write("Hemos salido del bucle");

En el código de arriba estamos diciendo:

Mientras (while) la variable «vuelta» tenga un valor menor de «1», escribe en pantalla («Esta es la vuelta: » + vuelta + «<br/>»).

– A continuación actualiza el valor de «vuelta» incrementándolo en 1, así en la siguiente vuelta su valor será 2.

– Este bucle será repetido hasta que el valor de «vuelta» llegue a «11», en ese momento dejará de ejecutarse el bucle y continuará con la siguiente instrucción que escribirá en pantalla «Hemos salido del bucle».

Bucle “do while”

El bucle «do while» es muy parecido a «while» pero su característica es que ejecutará el código al menos una vez. Recordemos que «while» primero evalúa la condición y si esta no se cumple no ejecuta el bloque de código que contiene. Con «do while» primero se ejecuta el bloque de instrucciones y luego evalúa la condición para permitir que se vuelva a ejecutar o no.

Diagrama bucle do while
8.3 Diagrama bucle do while

Sigamos el diagrama de arriba. En primer lugar se ejecuta la instrucción y seguidamente se actualiza el valor de la variable. Cuando se llega a la condición, si ésta se cumple, se volverá al comienzo para ejecutar de nuevo el bucle, y si no se cumple se saldrá del bucle.

Vamos a ver la sintaxis.

Sintaxis do while
8.4 Sintaxis do while

Clarifiquémoslo con un ejemplo.

var vuelta = 1;  // Inicializamos la variable con el valor "1"

document.write("Comienza el bucle. ")

do {
      document.write("Esta es la vuelta: " + vuelta + "<br/>");
      vuelta = ++vuelta;  //Actualizamos el valor de vuelta incrementándolo en 1
} while (vuelta <11);  // Mientras ésta expresión devuelva true se repetirá el bucle.

document.write("Hemos salido del bucle");

 

Con este código le estamos ordenando:

Ejecuta (do) lo siguiente. Escribe en el documento («Esta es la vuelta: » + vuelta + «<br/>») y actualiza el valor de “vuelta” incrementándolo en 1.

– Repite esto mientras (while) el valor de “vuelta” sea menor de 11.

Como podemos ver es una estructura sencilla y similar a “while”,  la diferencia radica en que ésta la usaremos cuando necesitemos que la instrucción que contiene el bucle se ejecute al menos una vez.

Nota de interés:

A las repeticiones de un bucle se les llama iteraciones.

En el próximo capítulo hablaremos del bucle “for”.

 


Ir a Javascript para novatos 9ª parte

Share on LinkedInShare on FacebookShare on Google+Tweet about this on Twitter

Dejar una opinión