Categorías

Bucles

agosto 11, 2023
8:25 pm

En JavaScript, los bucles son estructuras de control que te permiten repetir un bloque de código varias veces. Son fundamentales para automatizar tareas repetitivas y procesar listas de datos. JavaScript ofrece varios tipos de bucles: el bucle for, el bucle while y el bucle do-while. Vamos a explorar cada uno de ellos:

Bucle For

Bucle for: El bucle for es útil cuando conoces la cantidad exacta de veces que deseas que se repita un bloque de código. La estructura básica es la siguiente:

				
					for (inicialización; condición; incremento/decremento) {
  // Bloque de código a repetir
}

inicialización: Aquí se establece el valor inicial de la variable que controlará el bucle.
condición: Es la condición que se evalúa en cada iteración. Si la condición es true, el bucle continúa; si es false, el bucle se detiene.
incremento/decremento: Esta parte se ejecuta después de cada iteración y generalmente se usa para actualizar el valor de la variable de control.

Ejemplo de bucle for:

				
					for (let i = 0; i < 5; i++) {
  console.log(i); // Imprimirá números del 0 al 4
}

Bucle while

Bucle while: El bucle while se repite mientras una condición sea verdadera. La estructura es la siguiente:

				
					while (condición) {
  // Bloque de código a repetir
}

Ejemplo de bucle while:

				
					let contador = 0;
while (contador < 5) {
  console.log(contador); // Imprimirá números del 0 al 4
  contador++;
}

Bucle do-while

Bucle do-while: El bucle do-while es similar al while, pero asegura que el bloque de código se ejecute al menos una vez, ya que la condición se evalúa después de la primera ejecución. La estructura es la siguiente:

				
					do {
  // Bloque de código a repetir
} while (condición);

Ejemplo de bucle do-while:

				
					let x = 0;
do {
  console.log(x); // Imprimirá 0 y luego incrementará
  x++;
} while (x < 3);

Ejemplos:

Usando los bucles para mostrar una ola de patrones en la consola

				
					let counter = "1";
let line = "";
console.log("@");
while (counter <= 10) {
  line += "|";
  counter++;
  console.log(line);
}

El código utiliza un bucle while para construir una serie de líneas con barras verticales. Veamos paso a paso lo que hace:

				
					let counter = "1";   // Se inicializa la variable 'counter' con el valor de cadena "1"
let line = "";       // Se inicializa la variable 'line' como una cadena vacía
console.log("@");    // Se imprime el carácter "@" en la consola

while (counter <= 10) {
  line += "|";       // Se agrega un carácter "|" a la variable 'line'
  counter++;         // Se incrementa el valor de 'counter' (pero como es una cadena, el incremento no funciona como esperado)
  console.log(line); // Se imprime el valor actual de 'line' en la consola
}

Sin embargo, hay un detalle importante en este código. La variable counter se inicializa con el valor de cadena "1" en lugar de un número. Esto significa que cuando se realiza la comparación en el bucle while, la comparación se basará en comparaciones de cadenas en lugar de números. Esto puede generar resultados inesperados.

El bucle while debería funcionar correctamente si inicializas counter como un número:

				
					let counter = 1;    // Se inicializa la variable 'counter' con el valor numérico 1
let line = "";      // Se inicializa la variable 'line' como una cadena vacía
console.log("@");   // Se imprime el carácter "@" en la consola

while (counter <= 10) {
  line += "|";       // Se agrega un carácter "|" a la variable 'line'
  counter++;         // Se incrementa el valor de 'counter'
  console.log(line); // Se imprime el valor actual de 'line' en la consola
}

Con esta corrección, el bucle while ejecutará el bloque de código dentro de él repetidamente hasta que counter sea mayor que 10. En cada iteración, se agrega un carácter “|” a la variable line y se imprime el valor actual de line. Como resultado, verás una serie de líneas con una cantidad creciente de barras verticales “|” en cada línea.

Usando un bucle para mostrar comentarios alojados en una matriz

				
					let comments = 10;
for (i = 1; i <= comments; i += 2) {
  console.log("Comment: " + i);
}

El código utiliza un bucle for para imprimir una serie de comentarios numerados. Aquí tienes una explicación paso a paso:

				
					let comments = 10;      // Se inicializa la variable 'comments' con el valor 10

for (i = 1; i <= comments; i += 2) {
  // El bucle 'for' comienza con i = 1, se ejecuta mientras i sea menor o igual a 'comments',
  // y después de cada iteración se incrementa i en 2

  console.log("Comment: " + i);
  // Se imprime en la consola el mensaje "Comment: " seguido del valor actual de i
}

El bucle for en este código se ejecuta con los siguientes valores de i: 1, 3, 5, 7 y 9. Esto se debe a que i comienza en 1 y se incrementa en 2 en cada iteración.

Como usar los bucles para crear un programa de recibo de clientes

El código realiza ciertas operaciones para llenar una tabla HTML con información relacionada con los clientes, sus recibos y los precios de los artículos. Vamos a desglosar el código paso a paso:

				
					const customers = ["John S.", "Emma M.", "Frank T."];
const receipts = [
  ["eggs", "white bread", "milk"],
  ["milk", "cheese", "butter", "pancake mix", "flour"],
  ["cereal", "whole wheat bread", "milk", "cheese", "eggs", "vanilla"]
];
const prices = {
  // ... (definición de precios para varios artículos)
};

function setElementText(id, text) {
  document.getElementById(id).innerText = text;
}

function populateTable() {
  // Your code starts here
  for (let i = 0; i < customers.length; i++) {
    const customer = customers[i];
    const receipt = receipts[i];
    let receipt_list = "";
    let sum = 0;

    for (let j = 0; j < receipt.length; j++) {
      const item = receipt[j];
      const price = prices[item];
      receipt_list = receipt_list + item + "\n";
      sum = sum + price;
    }

    setElementText("customer" + i.toString(), customer);
    setElementText("receipt" + i.toString(), receipt_list);
    setElementText("total" + i.toString(), sum);
  }
}

Aquí hay un resumen de lo que hace el código:

Se definen tres matrices:
- customers: Contiene los nombres de los clientes.
- receipts: Contiene las listas de productos comprados por cada cliente.
- prices: Un objeto que almacena los precios de los artículos.
La función setElementText(id, text) se utiliza para cambiar el contenido de un elemento HTML por su ID.
La función populateTable() llena una tabla HTML con la información de los clientes, sus recibos y los totales:
- El primer bucle for recorre cada cliente en customers.
- Se obtiene la lista de productos comprados por el cliente actual (receipt).
- Se inicializan las variables receipt_list para almacenar los nombres de los productos y sum para almacenar el total de la compra.
- El segundo bucle for recorre cada artículo en el recibo del cliente.
- Se busca el precio del artículo actual en el objeto prices.
- Se actualiza la lista de productos comprados y se suma el precio al total.
- Finalmente, se utiliza la función setElementText para actualizar los elementos HTML correspondientes con los datos del cliente, su recibo y el total.

En resumen, el código toma los datos de los clientes, sus recibos y los precios de los artículos para llenar una tabla HTML con esta información.

				
					const customers = ["John S.", "Emma M.", "Frank T."];
const receipts = [
  ["eggs", "white bread", "milk"],
  ["milk", "cheese", "butter", "pancake mix", "flour"],
  ["cereal", "whole wheat bread", "milk", "cheese", "eggs", "vanilla"]
];
const prices = {
  "eggs": 3.50,
  "white bread": 4.50,
  "milk": 5.99,
  "cheese": 6.50,
  "butter": 3.45,
  "pancake mix": 4.50,
  "flour": 5.75,
  "cereal": 4.50,
  "whole wheat bread": 6.50,
  "vanilla": 8.75
};

function setElementText(id, text) {
  document.getElementById(id).innerText = text;
}

function populateTable() {
  // Your code starts here
  for (let i = 0; i < customers.length; i++) {
    const customer = customers[i];
    const receipt = receipts[i];
    let receipt_list = "";
    let sum = 0;
    for (let j = 0; j < receipt.length; j++) {
      const item = receipt[j];
      const price = prices[item];
      receipt_list = receipt_list + item + "\n";
      sum = sum + price;
    }
    setElementText("customer" + i.toString(), customer);
    setElementText("receipt" + i.toString(), receipt_list);
    setElementText("total" + i.toString(), sum);
  }
}

				
					<!doctype html>
<html>
  <head>
    <title>Receipt Summary</title>
    <script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body onload="populateTable()">
    <div id="project">
      <h2>Customer Receipts</h2>
      <table>
        <tr>
          <th class="bold">Customer:</th>
          <th id="customer0"></th>
          <th id="customer1"></th>
          <th id="customer2"></th>
        </tr>
        <tr>
          <td class="bold">Items:</td>
          <td id="receipt0"></td>
          <td id="receipt1"></td>
          <td id="receipt2"></td>
        </tr>
        <tr>
          <td class="bold">Total:</td>
          <td id="total0"></td>
          <td id="total1"></td>
          <td id="total2"></td>
        </tr>
      </table>
    </div>
  </body>
</html>

				
					body {
  background-color: #273C75;
  color: white;
}

#project {
  font-family: sans-serif;
}

.bold {
  font-weight: bold;
}

h3 {
  margin-top: 20%;
}

table {
  border-collapse: collapse;
  font-size: 10px;
}

tr,
th,
td {
  border: 5px solid white;
  padding: 10px;
}

Si te gusto el artículo, ¡ayúdame a compartirlo!

Muari Azpeitia

Bucles

Índice

Bucle For

Bucle while

Bucle do-while

Ejemplos:

Usando los bucles para mostrar una ola de patrones en la consola

Usando un bucle para mostrar comentarios alojados en una matriz

Como usar los bucles para crear un programa de recibo de clientes

Últimos artículos

Resumen General de DotCom Secrets en español de Russell Brunson

Embudo de Venta de Alto Precio a través de 3 pasos | Embudo #7 | Dot Com Secrets

Categorias

Etiquetas

Newsletters