Domingo, 20 Noviembre 2016 18:00

JavaScript: El bucle do while

Valora este artículo
(0 votos)

Banner Tutoriales en JavaScript: Definiendo y usando variales

Bucles de programación en JavaScript: La estructura do While

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 la estructura do While, definiéndola y mostrando un ejemplo de uso, con la cual trabajaremos en clases.

La estructura do While

La estructura do while permite repetir un conjunto específico de otras sentencias hasta que se deje de cumplir la condición especificada.

Genéricamente, la sentencia do...while tiene una estructura del siguiente tipo:

     do {
          sentencia1;
          sentencia2;
          ...
          sentenciaN;
          } while (condicion);

En este esquema, las sentencias sentencia1, sentencia2,... sentenciaN se ejecutarán antes de que la condición sea evaluada; y hasta que esta condición deje de cumplirse.

Así, las sentencias primero son ejecutadas, se evalúa la condición, y si ésta es verdadera (true), el conjunto de sentencias serán ejecutadas nuevamente; cuando la condición es falsa (false), la ejecución de estas sentencias se detendrá, pasando el control a la siguiente sentencia después del bucle generado por la estrucutra do...while

Ejemplo: Usar dos botones para cambiar contenidos y recargar en una página web

   <!doctype html>
      <html>
         <head>
            <meta charset="utf-8">
            <title>Bucle do While</title>
         </head>
         <body>
            <p id="demo">Cambiar contenido de texto en un párrafo de destino.</p>
            <script>
               //javascript
               function funcionEjecutarBucle() {
                  var x = "";
                  var i = 1;
                  do {
                     x = x + "Ciclo de repetición: " + i + "<br>";
                     i++;
                     document.getElementById("demo").innerHTML = x;
                     } while (i < 6)
                  }
            </script>
            <button onclick="myFunction()">Ejecutar Función</button>
            <p>Hacer click en el botón para ejecutar la función repitiend el bucle 5 veces.</p>
         </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
  • do {
          x = x + "Ciclo de repetición: " + i + "<br>";
          i++;
          } while (i < 6)
    Repetirá la asignación x = x + "Ciclo de repetición: " + i + "<br>"; e incrementará el valor de la variable i en uno (i++;) hasta que el resultado de la evaluación i<6 sea válida.
  •  document.getElementById("demo").innerHTML = x;
    Escribirá en el en el elemento del documento cuyo id sea "demo" el valor almacenado en x una vez finalizado el bucle do...while.
  • <button onclick="funcionEjecutarBucle()">Ejecutar Función</button>
    Asocia el evento onclick a un botón del documento para hacer un llamado a la función funcionEjecutarBucle.
  • <p id="demo">Cambiar contenido de texto en un párrafo de destino.</p> Es el párrafo sobre el que se harán los cambios de contenidos.

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

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

Saludos para todos!
Plácido Luna.

Visto 266 veces Modificado por última vez en Sábado, 17 Junio 2017 03:41