Para poder seguir este curso debes tener conocimentos de los lenguajes HTML y CSS para construir páginas Web. Si no es así puedes aprenderlo en Aprende Web
Logo Aprende Web

Aprende Web

curso de JAVASCRIPT

por Anyelguti


Tema 8: Otras estructuras

8.1. Estructura while

La estructura while permite formar un bucle que se repite mientras se cumpla una condición.

Esta estructura puede adoptar dos maneras diferentes, while y do...while. Su comportamiento es diferente según la forma que elijamos. Veamoslo a continuación.

La estructura while

La estructura while propiamente dicha, permite formar un bucle en el que una serie de sentencias se repiten mientras se cumpla una condición.

la estructura while tiene la siguiente forma:

while(condicion) {
... sentencias javascript ...
}

La estructura es similar a la del bucle for, pero aquí en el paréntesis no se indican ni el valor inicial, ni la actualización de este valor, con lo cual para que el bucle no se repita indefinidamente, dentro del bucle tenemos que modificar las variables que controlan la condición.

A continuación se muestra una página de ejemplo donde se usa el bucle while:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bucle while</title> 
<script type="text/javascript">
function repite() {
         num = document.repetir.numero.value; //acceso a número escrito por el usuario
         num = Number(num); //convertir texto en número
         texto = document.getElementById("respuesta"); //elemento donde escribiremos
         i = 0;
         if (num<1 || num>20 || isNaN(num) == true ) { //si el número no es válido
            texto.innerHTML = "No has escrito un número entre 0 y 20, escribelo de nuevo y pulsa el botón.";
            }
         else { //si el numero es válido
            texto.innerHTML = "Voy a repetir una frase " + num + " veces.<br/>";
            while (i<num) { //repeticion hasta llegar al número de veces indicado.
                i++; //variar la condición.
                texto.innerHTML += i + " Esta es una frase repetida " + num + " veces. <br/>";
                }			
            }
         }
</script>
</head>
<body>
<h1>Utilizar el bucle while</h1>
<form action="#" name="repetir">
   <input type="text" name="numero"> Escibe un número del 1 al 20<br/><br/>
   <input type="button" onclick="repite()" value="Pulsa para repetir" />
</form>
   <p id="respuesta"></p>
</body>
</html>

El método o función interna isNaN() sirve para comprobar si una variable es un número o no. caso de que no lo sea devuelve true, y si lo es devuelve false. NaN significa Not a Number (en español no es un número). Más adelante veremos éste y otros métodos de javascript.

Puedes ver como queda esta página de ejemplo pulsando en el siguiente enlace:

Ejemplo bucle while

Estructura do while

Esta estructura es muy parecida a la anterior, forma un bucle que repite la condición indicada mientras esta se cumple. Sin embargo aquí la condición aunque no se cumpla, se ejecuta siempre la primera vez.

La estructura do ... while tiene la siguiente forma:

do {
...sentencias javascript ...
} while (condicion)

Como en la estructura while, aquí también se debe variar la condición dentro del bucle para que éste no se repita infinitas veces. El hecho de que la condición se escriba al finalizar el bucle hace que éste se ejecute siempre la primera vez, aunque la condición no se cumpla.

Veamos ahora una página de ejemplo muy parecida a la anterior, pero con la estructura do .. while:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bucle do while</title> 
<script type="text/javascript">
function repite() {
         num = document.repetir.numero.value; //acceso a número escrito por el usuario
         num = Number(num); //convertir texto en número
         texto = document.getElementById("respuesta"); //elemento donde escribiremos
         texto.innerHTML =""
         i = 0; //condición inicial del bucle
         if (num<1 || num>20 || isNaN(num) == true ) { //si el número no es válido
            texto.innerHTML = "La siguiente frase no se repite porque no has escrito un número del 1 al 20.<br/>";
            }
         do {						
            i++; //variar la condición.
            texto.innerHTML += i + " Esta frase se escribe una vez y se repite el número de veces que tu indiques.<br/>";
            } while (i<num && num<=20) //repeticion hasta llegar al número de veces indicado.		
         }
</script>
</head>
<body>
<h1>Repetir una frase con el bucle do while</h1>
<form action="#" name="repetir">
<input type="text" name="numero"> Escibe un número del 1 al 20<br/><br/>
<input type="button" onclick="repite()" value="Pulsa para repetir" />
</form>
<p id="respuesta"></p>
</body>
</html>

Puedes ver como queda esta página de ejemplo pulsando en el siguiente enlace:

Ejemplo bucle do ... while



En la siguiente página veremos la estructura switch para condicionales múltiples.

8.2. La estructura switch


Ir a la página

anteriorAnterior     Siguiente siguiente

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com manda un correo