Aprende Web
Crea y diseña tus sitios en la Web.
Manual de Javascript
Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
Ültima modificación: 29-01-2016.
Visitas este mes: 93
Visitas el mes pasado: 110
WEB-GRAFÍA
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
- Desarrollo Web: manual de Javascript
- Desarrollo Web, por Miguel Angel Álvarez
- Libros Web: introducción a Javascript
- Libros web, por Javier Eguíluz Pérez
- Curso de Javascript: Programación Web
- www.programacionweb.net
- WebEstilo: JavaScript
- www.webestilo.com
- W3 schools; Javascript Tutorial
- www.w3schools.com
- Manual de Javascript: José Antonio Rodríguez.
- Jose Antonio Rodriguez: manual en PDF
Donativos
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.
4. Estructuras básicas (VI)
4.6 Bucles
Definició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.
Estructura for
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:
- Inicialización:
var i = 1Escribimos una variable y le asignamos el valor 1: - Condición:
i <= 8Escribimos 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á. - Actualización:
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).
Ejemplo de página con bucle
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.
Estructura for in para arrays
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.
imprimir esta página
Página creada por ANYELGUTI.
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