Editor - PHP

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bucles en JS — Ejemplo 1</title>
    <style>
        body  { font-family: Arial, sans-serif; padding: 20px; background: #fff; max-width: 650px; }
        h3    { margin: 20px 0 8px; font-size: 15px; color: #333; }
        .bloque { background: #f9f9f9; border-left: 4px solid #F7DF1E; padding: 10px 14px; margin: 8px 0; border-radius: 0 6px 6px 0; font-size: 14px; }
        .label  { font-size: 11px; color: #888; font-weight: bold; margin-bottom: 4px; text-transform: uppercase; }
        ul { margin: 0; padding-left: 18px; font-family: monospace; }
        li { margin: 2px 0; }
    </style>
</head>
<body>

<h2>Bucles — for clásico</h2>

<h3>Contar del 0 al 9</h3>
  <div class="bloque">
    <div class="label">for (let i = 0; i &lt; 10; i++)</div>
    <div id="r1"></div>
  </div>

<h3>Recorrer un array con índice</h3>
  <div class="bloque">
    <div class="label">frutas[i]</div>
    <ul id="r2"></ul>
  </div>

<h3>Contar hacia atrás</h3>
  <div class="bloque">
    <div class="label">for (let i = 10; i >= 0; i--)</div>
    <div id="r3"></div>
  </div>

<h3>Saltar de a dos (números pares)</h3>
  <div class="bloque">
    <div class="label">i += 2</div>
    <div id="r4"></div>
  </div>

<h3>Tabla de multiplicar del 7</h3>
  <div class="bloque">
    <div class="label">for (let i = 1; i &lt;= 10; i++)</div>
    <ul id="r5"></ul>
  </div>

<h3>Bucles anidados — cuadrado de asteriscos</h3>
  <div class="bloque">
    <div class="label">for dentro de for</div>
    <pre id="r6" style="margin:0;font-size:16px;line-height:1.4;"></pre>
  </div>

// Contar del 0 al 9
    const nums = [];
    for (let i = 0; i < 10; i++) {
        nums.push(i);
    }
    document.getElementById("r1").textContent = nums.join("  ");

// Recorrer array con índice
    const frutas = ["manzana", "naranja", "uva", "pera", "kiwi"];
    const lista2 = document.getElementById("r2");
    for (let i = 0; i < frutas.length; i++) {
        const li = document.createElement("li");
        li.textContent = `[${i}] ${frutas[i]}`;
        lista2.appendChild(li);
    }

// Contar hacia atrás
    const atras = [];
    for (let i = 10; i >= 0; i--) {
        atras.push(i);
    }
    document.getElementById("r3").textContent = atras.join("  ");

// Saltar de a dos
    const pares = [];
    for (let i = 0; i <= 20; i += 2) {
        pares.push(i);
    }
    document.getElementById("r4").textContent = pares.join("  ");

// Tabla del 7
    const lista5 = document.getElementById("r5");
    for (let i = 1; i <= 10; i++) {
        const li = document.createElement("li");
        li.textContent = `7 × ${i} = ${7 * i}`;
        lista5.appendChild(li);
    }

// Bucles anidados — cuadrado 5x5
    let cuadrado = "";
    for (let fila = 0; fila < 5; fila++) {
        for (let col = 0; col < 5; col++) {
            cuadrado += "★ ";
        }
        cuadrado += "\n";
    }
    document.getElementById("r6").textContent = cuadrado;
  </script>

</body>
</html>