JS FUNDAMENTOS 3

El bucle “while”

El bucle while (mientras) tiene la siguiente sintaxis:

Codigo

<script>
while (condition) 
{
  // código
  // llamado "cuerpo del bucle"
}
</script>

Mientras la condición condition sea verdadera, el código del cuerpo del bucle será ejecutado.

Por ejemplo, el bucle debajo imprime i mientras se cumpla i < 3

  <script>
  let i = 0;
  while (i < 3) 
  { // muestra 0, luego 1, luego 2
    alert( i );
    i++;
  }
  </script>

Cada ejecución del cuerpo del bucle se llama iteración. El bucle en el ejemplo de arriba realiza 3 iteraciones.

Si faltara i++ en el ejemplo de arriba, el bucle sería repetido (en teoría) eternamente. En la práctica, el navegador tiene maneras de detener tales bucles desmedidos; y en el JavaScript del lado del servidor, podemos eliminar el proceso.

Cualquier expresión o variable puede usarse como condición del bucle, no solo las comparaciones: El while evaluará y transformará la condición a un booleano.

CODIGO BASE PARA PRUEBAS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ciclo While</title>
</head>
<body>

<div id="contenedor"></div>

<script>
    let i = 0;
    while (i <= 5) 
  {
        let parrafo = document.createElement("p");
        parrafo.textContent = "Valor del ciclo: " + i;
        document.getElementById("contenedor").appendChild(parrafo);
        i++;
    }
</script>
</body>

En el código de arriba:

Existe un div con el id "contenedor" donde se agregarán los párrafos.
Se utiliza un ciclo while que se ejecuta desde i = 0 hasta i = 5.
Dentro del ciclo, se crea un elemento <p> utilizando document.createElement("p").
Se asigna el texto del párrafo utilizando parrafo.textContent.
Se agrega el párrafo al contenedor utilizando appendChild.
Incrementa el valor de i en 1.

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior.

Modificalo para que solicite el valor numerico Limite mediante PROMPT.

Investiga como usar parseInt para convertir la entrada del usuario a un número entero.

Condicion para salir del While i==Limite.

Procura no copiar directamente la respuesta desde una IA

El bucle “do…while”

La comprobación de la condición puede ser movida debajo del cuerpo del bucle usando la sintaxis do..while

Codigo

<script>
do 
{
  // cuerpo del bucle
} while (condition);
</script>

El bucle primero ejecuta el cuerpo, luego comprueba la condición, y, mientras sea un valor verdadero, la ejecuta una y otra vez.

Codigo

<script>
let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);
</script>

Esta sintaxis solo debe ser usada cuando quieres que el cuerpo del bucle sea ejecutado al menos una vez sin importar que la condición sea verdadera. Usualmente, se prefiere la otra forma: while(…) {…}.

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior.

Modificalo para que solicite el valor numerico Limite mediante PROMPT.

Los datos del ciclo deberan presentarse como parrafos dentro del HTML.

Condicion para salir del While i==Limite.

Procura no copiar directamente la respuesta desde una IA

El bucle “for”

El bucle for es más complejo, pero también el más usado.

Codigo

<script>
for (begin; condition; step) 
{// (comienzo, condición, paso)
  // ... cuerpo del bucle ...
}
</script>

Aprendamos el significado de cada parte con un ejemplo. El bucle debajo corre alert(i) para i desde 0 hasta (pero no incluyendo) 3:

Codigo

<script>
for (let i = 0; i < 3; i++) 
{ // muestra 0, luego 1, luego 2
  alert(i);
}
</script>

Vamos a examinar la declaración for parte por parte:

comienzo	`let i = 0`	Se ejecuta una vez al comienzo del bucle.
condición	`i < 3`	Comprobada antes de cada iteración del bucle. Si es falsa, el bucle finaliza.
cuerpo	`alert(i)`	Se ejecuta una y otra vez mientras la condición sea verdadera.
paso	`i++`	Se ejecuta después del cuerpo en cada iteración.

El algoritmo general del bucle funciona de esta forma:

Se ejecuta comenzar
  → (si condición → ejecutar cuerpo y ejecutar paso)
  → (si condición → ejecutar cuerpo y ejecutar paso)
  → (si condición → ejecutar cuerpo y ejecutar paso)
  → ...

Rompiendo el bucle

Normalmente, se sale de un bucle cuando la condición se vuelve falsa.

Pero podemos forzar una salida en cualquier momento usando la directiva especial break.

Por ejemplo, el bucle debajo le pide al usuario por una serie de números, “rompiéndolo” cuando un número no es ingresado:

Codigo

<script>
let sum = 0;
while (true) 
{
  let value = +prompt("Ingresa un número", '');
  if (!value) {break;} //(*) La directiva break es activada si el usuario ingresa una línea vacía o cancela la entrada.
  sum += value;
}
alert( 'Suma: ' + sum );
</script>

La directiva break es activada en la línea (*) si el usuario ingresa una línea vacía o cancela la entrada. Detiene inmediatamente el bucle, pasando el control a la primera línea después de el bucle. En este caso, alert.

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior, modificalo

para que los datos parciales del ciclo deberan presentarse como adicionales parrafos dentro del HTML.

la suma toda debera presentarse como h3 dentro del HTML.

Procura no copiar directamente la respuesta desde una IA

Resumen de ciclos

Cubrimos 3 tipos de bucles:

while – La condición es comprobada antes de cada iteración.
do..while – La condición es comprobada después de cada iteración.
for (;;) – La condición es comprobada antes de cada iteración, con ajustes adicionales disponibles.

switch

Una sentencia switch puede reemplazar múltiples condiciones if.

Provee una mejor manera de comparar un valor con múltiples variantes.

Codigo

<script>
switch(x) 
{
  case 'valor1':  // if (x === 'valor1')
    ...
    [break;]

  case 'valor2':  // if (x === 'valor2')
    ...
    [break;]

  default:
    ...
    [break;]
}
</script>

El valor de x es comparado contra el valor del primer case (en este caso, valor1), luego contra el segundo (valor2) y así sucesivamente, todo esto bajo una igualdad estricta.
Si la igualdad es encontrada, switch empieza a ejecutar el código iniciando por el primer case correspondiente, hasta el break más cercano (o hasta el final del switch).
Si no se cumple ningún caso entonces el código default es ejecutado (si existe).

Ejemplo

Codigo

<script>
let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Muy pequeño' );
    break;
  case 4:
    alert( '¡Exacto!' );
    break;
  case 5:
    alert( 'Muy grande' );
    break;
  default:
    alert( "Desconozco estos valores" );
}
</script>

Aquí el switch inicia comparando a con la primera variante case 3. La comparación falla.
Luego 4. La comparación es exitosa, por tanto la ejecución empieza desde case 4 hasta el break más cercano.
Si no existe break entonces la ejecución continúa con el próximo case sin ninguna revisión.

ACTIVIDADES A REALIZAR

Crea un HTML con el script anterior, modificalo

para que solicite mediante PROMPT el valor de la variable a

Expande los casos CASE a 8 elementos.

El datos de respuesta debe presentarse dentro del HTML.

Procura no copiar directamente la respuesta desde una IA