Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 19-12-2017.

Visitas este mes: 159

Visitas el mes pasado: 177

logo
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.




4. Estructuras básicas (VI)

4.6 Bucles

javascript

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:

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.

Ejemplo con bucle.



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.

Ejemplo de estructura for in.


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.

Acceso al DOM



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com