Domingo, 20 Noviembre 2016 19:15

JavaScript: El bucle for

Valora este artículo
(0 votos)

Banner Tutoriales en JavaScript: Definiendo y usando variales

Bucles de programación en JavaScript: El bucle for

Cuando deseamos repetir una serie de instrucciones, tanto en JavaScript como en muchos otros lenguajes, podemos hechar mano a lo que se denominan bucles en programación; en esta entrada hablaremos brevemente sobre el bucle for, definiéndolo y trabajando sobre un ejemplo puntual que muestra como ejecutar, automáticamente, un bucle for durante 5 ciclos.

El bucle for

La estructura para generar un bucle de repetición for se corresponde con la siguiente:

   for ([valorDeInicio]; [condicionFinal]; [incremento]){
      sentencia1;
      sentencia2;
      ...
      sentenciaN;
      }

Así, la sentencia for permite repetir las sentencias sentencia1, sentencia2,... sentenciaN la cantidad de veces establecidas entre el valor de la condición de inicio (valorDeInicio) y la condición final (condicionFinal) de acuerdo al incremento asignado en cada ciclo al incremento del valor de la variable (incremento).

Para que esto sea más claro, veamos dos ejemplos:

Ejemplo1: Agregar 5 líneas a un párrafo usando la estructura for

   <!doctype html>
   <html>
      <head>
         <meta charset="utf-8">
         <title>Agregando contenidos a un párrafo con un bucle for</title>
      </head>
      <body>
         <p id="demo">Las siguientes 5 líneas se habrán escrito usando código en JavaScript:<br></p>
         <script>
         //javascript
            var x = "";
            for (var i = 0; i < 5; i++) {
               x = x + "Número de Iteracción: " + i + "<br>";
               }
            document.getElementById("demo").innerHTML += x;
         </script>
      </body>
   </html>

Breve descripción de los códigos del ejemplo:

  • La palabra reservada function: Ver Definición y llamado de funciones
  • La palabra reservada var: Ver Definición y uso de variables
  • for (var i = 0; i < 5; i++) {
          x = x + "Número de Iteracción: " + i + "<br>";
          }
    En el ejemplo i=0 corresponde al valorDeInicio; i<5 corresponde a condicionFinal; mientras que incremento, en este caso, se corresponde con i++ (la variable i sumará uno entre un ciclo y otro). Bajo estas condiciones, el bucle se repetirá 5 veces (desde el inicio, donde i vale cero, hasta el final, con i valiendo 4 (i<5), haciendo que la variable x vaya agregando a su valor anterior, la cadena "Número de Iteracción: " + i + "<br>"
  • document.getElementById("demo").innerHTML += x;
    Agregará al contenido del elemento cuyo id sea "demo" el valor almacenado en x una vez finalizado el bucle for.
  • Nota importante: En caso de que quisiésemos agregar contenido al párrafo (en lugar de reemplazarlo), bastaría con cambiar la asignación  document.getElementById("demo").innerHTML = x; (asigna el contenido anterior por el valor de la variable x) por document.getElementById("demo").innerHTML += x; (concatena al contenido anterior el valor de la variable x).

Al tratarse de un script que se encuentra dentro del body del documento, y no existir un evento que condicione su ejecución, éste se disparará automáticamente una vez cargado el mismo.

Ejercicio propuesto de clase: 

Al abrir la consola del navegador y ejecutar el còdigo JavaScript del ejemplo anterior se produce un error. Las preguntas son las siguientes:

  1. Explicar cuál es este error.
  2. ¿Para qué serviría la sentencia alert(x);?
  3. ¿Para qué serviría la sentencia document.write?

Nota importante: Esta entrada se encuentra publicada y actualizada como lección, como parte del curso de Diseño Web, en el Campus Virtual de Formación Gráfica (CVFG).

Saludos para todos!
Plácido Luna.

Visto 252 veces Modificado por última vez en Sábado, 17 Junio 2017 02:32