Carrera Creador IA · Nivel 6 de 9 · 9-15 añosPRO

Listas y bucles (JS de verdad)

Arrays y un bucle for: tu web se arma sola desde datos.

Tu Carrera · 0 de 9 nivelesse hacen en orden

Paso 1 de 6

Hoy: listas y bucles de verdad

Un array es una lista de cosas entre [ ]. Un for es un bucle: repite una acción muchas veces. Tu web va a construir su lista SOLA recorriendo el array.

👉 Mira el `<script>`: el array `cosas` y el `for` que lo recorre ya están. Dale Siguiente.

📖 Este paso es solo leer — toca “Siguiente”.

🌐 En inglés

array = lista de cosas entre [ ], se recorre en ordenloop = bucle: repite una acción (aquí el for)index = la posición en el array: empieza en 0

💡 Esto que vas a escribir tú, también se lo puedes pedir a una IA. Aquí aprendes cómo funciona el código por dentro — y en “De idea a app” aprendes a pedírselo bien a la IA.

tu código · index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body{font-family:system-ui,sans-serif;background:;color:#e8e8f0;min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:24px}
    .caja{max-width:460px;width:100%}
    h1{font-size:34px;color:;text-align:center}
    ol{font-size:19px;line-height:1.9}
    li{margin:.2em 0}
  </style>
</head>
<body>
  <div class="caja">
    <h1></h1>
    <ol id="lista"></ol>
    <p style="opacity:.5;font-size:13px;text-align:center">Hecho por mi - Academia IA Kids</p>
  </div>

  <script>
    // Un ARRAY es una lista de cosas. La escribes entre [ ].
    var cosas = ["", "", "", "", ""];
    // Solo mostramos los primeros `cuantos` (cambia el numero).
    var cuantos = ;
    var ol = document.getElementById('lista');
    // Un BUCLE for repite: i va de 0 hasta `cuantos`.
    for (var i = 0; i < cuantos && i < cosas.length; i++) {
      var li = document.createElement('li');
      li.textContent = cosas[i];
      ol.appendChild(li);
    }
    try{parent.postMessage({aik:'meta',valor:ol.children.length},'*')}catch(e){}
  </script>
</body>
</html>

tu web en vivo · 11 etiquetas

← Nivel 5 Nivel 7: Tu app y una API real →