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: 19-12-2017.
Visitas este mes: 159
Visitas el mes pasado: 177
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
A veces es necesario repetir un mismo trozo de código varias veces para realizar varias veces la misma acción. En este caso podemos repetir el mismo código en la página varias veces, pero es más eficiente usar un bucle.
Ejemplos típicos de bucle puede ser tener que leer o escribir todos los elementos de un array, escribir números seguidos, hacer cálculos repetitivos, etc.
Hay varias estructuras para crear un bucle, la más utilizada es la estructura
for
, la cual la veremos en esta página, dejando las demás para temas
posteriores.
La estructura for
tiene la siguiente sintaxis:
for (inicialización; condición; actualización) { ...Sentencias javascript ... }
En primer lugar escribirmos la palabra reservada for
seguida de un
paréntesis.
Dentro del paréntesis debemos escribir tres sentencias: inicializacion, condición, y actualización. El bucle funcionará mientras la condición se cumpla, para ello se toma una variable inicial -inicialización-, y en cada repetición se va variando o actualizando -actualización-.
Por último dentro de los corchetes escribimos las sentencias que queremos que se repitan
Lo normal es que queramos repetir un bucle un número determinado de veces. Vamos a ver un ejemplo
en el que veremos más claro como funciona un bucle for
, En este ejemplo queremos que el
bucle se repita 8 veces:
var i = 1
Escribimos una variable y le asignamos el valor 1:i <= 8
Escribimos la condición necesaria para que el bucle se
repita. En este caso, mientras la variable sea menor o igual a 8 el bucle se repetirá. i++
Al acabar cada repetición el valor de la variable cambia, según
lo que hayamos escrito en esta parte. Aquí tras cada repetición la variable se incrementa en una unidad.La estructura del bucle en este ejemplo será la siguiente:
for (var i = 1; i <=8 ; i++ ) { ...sentencias javascript... }
Podemos utilizar la variable i (de control del bucle) para cambiar u obtener algunos datos que forman parte de del bucle, como por ejemplo números o elementos de un array, ya que la variable i es distinta en cada repetición (cambia con cada actualización).
En el siguiente ejemplo utilizamos todas las estructuras que hemos visto hasta ahora, funcion, condicional, y bucle, como puedes observar, pueden anidarse unas dentro de otras, para obtener el efecto deseado. Código de la página:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tabla de multiplicar</title> <script type="text/javascript"> function tabla() { var num = prompt("dime un número del uno al diez") num = Number(num) var texto = document.getElementById("resultados") if (num < 1 || num > 10) { alert("El número que me has dado no está entre el 1 y el 10. \n Por favor, intentalo de nuevo.") texto.innerHTML = "<p onclick='tabla()'>Pulsa aquí para decirme el número</p>" } else { texto.innerHTML = "<p onclick='tabla()'>Pulsa aquí para decirme el número</p>" texto.innerHTML += "<h2>Tabla de multiplicar del " + num + ". </h2>" for (i = 1; i <= 10; i++) { linea = "<p>" + num + " x " + i + " = " + num*i + "</p>" texto.innerHTML += linea } } } </script> </head> <body> <h1>Tabla de multiplicar</h1> <p>Dime un número del uno al diez y yo te diré la tabla de multiplicar.</p> <div id="resultados" > <p onclick="tabla()">Pulsa aquí para decirme el número</p> </div> </body> </html>
Para ver cómo queda la página anterior pulsa en el siguiente enlace.
Si queremos recorrer todos los elementos de un array del que no sabemos con certeza su extensión, podemos hacer lo siguiente:
var extension = nuevoArray.length texto = document.getElementById("escribe") for ( var i = 0 ; i < extension ; i++ ) { texto.innerHTML += nuevoArray[i] + "<br/>" }
En este ejemplo, nuevoArray
es el array, y "escribe"
es la etiqueta id donde
aparecerán escritos los elementos del array.
Para calcular la extensión del array hemos usado la propiedad length
, que nos indica
el número de elementos, como estos se empiezan a contar desde cero, la variable de inicialización
es cero, el bucle será desde el cero hasta el número de elementos menos 1, así en la condición
ponemos el signo menor, con lo cual cuenta hasta un número antes de la extensión dada. En la actualización
incrementamos la variable en una unidad. Por otra parte utilizamos la variable para encontrar el
elemento del array (nuevoArray[i]
).
Sin embargo para recorrer el array podemos usar una estructura más simple que es la siguiente:
for (i in nuevoArray)
Poniendo la palabra reservada in
entre la variable y el nombre del array, no necesitamos
calcular la extensión del array, ya que el bucle recorrerá todos los elementos del array, deteniéndose
en el último.
Veamos un ejemplo;El código de la página será el siguiente
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Bucle for in</title> <script type="text/javascript"> function escribe() { var semana = new Array("Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"); texto = document.getElementById("dias"); for (i in semana) { texto.innerHTML += semana[i]+ "<br/>"; } } </script> </head> <body> <h1>Me he aprendido los días de la semana</h1> <p onclick="escribe()">Pulsa aquí y te los digo</p> <p id="dias"></p> </body> </html>
Para ver cómo queda la página anterior pulsa en el siguiente enlace.
Como hemos dicho antes, hay otras estructuras para crear bucles, pero eso lo veremos en temas posteriores.
En el siguiente tema veremos cómo acceder a los distintos elementos de la página, aunque hasta ahora hemos visto cómo insertar texto, veremos otras formas de acceder a los elementos.
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