Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 81
Visitas el mes pasado: 110
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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
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:
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, el bucle 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:
En la siguiente página veremos la estructura switch
para condicionales
múltiples.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com