Title: Actividad 14: Arreglos y Bucles en JavaScript
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

🎯 Objetivo

Practicar el manejo de arreglos (arrays) y el uso de bucles y métodos de iteración en JavaScript (for, for...of, forEach, map, filter, reduce) para transformar y analizar datos desde el DOM.

🧩 Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Crea tres archivos: index.html, styles.css (solo para dar estilo básico si lo deseas) y app.js.
3. Estructura HTML (copia en index.html)
No modifiques el HTML, todo el comportamiento va en app.js.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad 14 - Arreglos y Bucles</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <main class="wrap">
    <h1>Arreglos y Bucles en JS</h1>

    <section class="input-area">
      <label for="datos">Ingresa números separados por coma:</label>
      <textarea id="datos" rows="4" placeholder="Ej: 10, 5, 8, 12, 3"></textarea>
      <div class="acciones">
        <button id="btnCargar">Cargar datos</button>
        <button id="btnLimpiar">Limpiar</button>
      </div>
    </section>

    <section class="acciones-metricas">
      <h2>Operaciones</h2>
      <div class="grid">
        <button class="op" id="btnMostrar">Mostrar lista</button>
        <button class="op" id="btnSumar">Sumar</button>
        <button class="op" id="btnPromedio">Promedio</button>
        <button class="op" id="btnMaxMin">Máx / Mín</button>
        <button class="op" id="btnDobles">Map: x2</button>
        <button class="op" id="btnPares">Filter: pares</button>
        <button class="op" id="btnMayores">Contar > 10</button>
        <button class="op" id="btnBuscar">Buscar valor</button>
      </div>

      <div class="busqueda">
        <label for="valorBuscar">Valor a buscar:</label>
        <input id="valorBuscar" type="number" placeholder="Ej: 8" />
      </div>
    </section>

    <section class="salida">
      <h2>Resultados</h2>
      <pre id="output">[Resultados aquí]</pre>
    </section>
  </main>

  <script src="app.js"></script>
</body>
</html>


1. Requisitos (implementa en app.js)
Implementa el siguiente comportamiento usando addEventListener y arrays:
  - Cargar datos (#btnCargar):
    - Lee el contenido de #datos, separa por comas, limpia espacios, convierte a números y valida (ignora entradas vacías y no numéricas).
    - Guarda el arreglo en una variable global (por ejemplo, let numeros = []).
    - Muestra en #output el arreglo cargado.
  - Limpiar (#btnLimpiar):
    - Limpia #datos, #valorBuscar, borra #output y reinicia el arreglo a [].
  - Mostrar lista (#btnMostrar):
    - Recorre el arreglo con for...of y muestra los elementos formateados (ej. Índice: valor).
  - Sumar (#btnSumar):
    - Usa reduce para obtener la suma total.
  - Promedio (#btnPromedio):
    - Calcula promedio = suma / longitud. Maneja el caso de arreglo vacío.
  - Máx / Mín (#btnMaxMin):
    - Obtén máximo y mínimo (puedes usar Math.max(...arr) / Math.min(...arr) o un for).
  - Map: x2 (#btnDobles):
    - Usa map para generar un nuevo arreglo con cada valor * 2; no modifiques el original.
  - Filter: pares (#btnPares):
    - Usa filter para obtener un arreglo con solo números pares.
  - Contar > 10 (#btnMayores):
    - Usa filter o un forEach para contar cuántos valores son mayores que 10.
  - Buscar valor (#btnBuscar):
    - Lee #valorBuscar y determina si existe en el arreglo.
    - Muestra el índice (primera coincidencia) o un mensaje “no encontrado”.
    - Sugerencia: indexOf o un for.
  - Validaciones mínimas:
    - Si no hay datos cargados, muestra un mensaje “Primero carga los datos”.
    - Evita que se rompa el programa con entradas vacías o no válidas.
2. Buenas prácticas que se evalúan
  - Uso de funciones pequeñas y descriptivas (ej. cargarDatos(), sumar(), mostrar(), etc.).
  - No duplicar lógica: reutiliza funciones.
  - Mensajes claros en #output usando plantillas literales.

📁 Evidencia

Un solo PDF que incluya:

- El contenido completo de tu app.js.
- Una captura mostrando datos cargados y al menos tres operaciones distintas funcionando (por ejemplo: Sumar, Map x2, Buscar).
- Al inicio: tu nombre y el nombre del profesor.

📤 Método de entrega

Sube tu PDF a la plataforma.

🎯 Objetivo

Practicar el manejo de arreglos (arrays) y el uso de bucles y métodos de iteración en JavaScript (for, for...of, forEach, map, filter, reduce) para transformar y analizar datos desde el DOM.

🧩 Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Crea tres archivos: index.html, styles.css (solo para dar estilo básico si lo deseas) y app.js.
3. Estructura HTML (copia en index.html)
No modifiques el HTML, todo el comportamiento va en app.js.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad 14 - Arreglos y Bucles</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <main class="wrap">
    <h1>Arreglos y Bucles en JS</h1>

    <section class="input-area">
      <label for="datos">Ingresa números separados por coma:</label>
      <textarea id="datos" rows="4" placeholder="Ej: 10, 5, 8, 12, 3"></textarea>
      <div class="acciones">
        <button id="btnCargar">Cargar datos</button>
        <button id="btnLimpiar">Limpiar</button>
      </div>
    </section>

    <section class="acciones-metricas">
      <h2>Operaciones</h2>
      <div class="grid">
        <button class="op" id="btnMostrar">Mostrar lista</button>
        <button class="op" id="btnSumar">Sumar</button>
        <button class="op" id="btnPromedio">Promedio</button>
        <button class="op" id="btnMaxMin">Máx / Mín</button>
        <button class="op" id="btnDobles">Map: x2</button>
        <button class="op" id="btnPares">Filter: pares</button>
        <button class="op" id="btnMayores">Contar > 10</button>
        <button class="op" id="btnBuscar">Buscar valor</button>
      </div>

      <div class="busqueda">
        <label for="valorBuscar">Valor a buscar:</label>
        <input id="valorBuscar" type="number" placeholder="Ej: 8" />
      </div>
    </section>

    <section class="salida">
      <h2>Resultados</h2>
      <pre id="output">[Resultados aquí]</pre>
    </section>
  </main>

  <script src="app.js"></script>
</body>
</html>


1. Requisitos (implementa en app.js)
Implementa el siguiente comportamiento usando addEventListener y arrays:
  - Cargar datos (#btnCargar):
    - Lee el contenido de #datos, separa por comas, limpia espacios, convierte a números y valida (ignora entradas vacías y no numéricas).
    - Guarda el arreglo en una variable global (por ejemplo, let numeros = []).
    - Muestra en #output el arreglo cargado.
  - Limpiar (#btnLimpiar):
    - Limpia #datos, #valorBuscar, borra #output y reinicia el arreglo a [].
  - Mostrar lista (#btnMostrar):
    - Recorre el arreglo con for...of y muestra los elementos formateados (ej. Índice: valor).
  - Sumar (#btnSumar):
    - Usa reduce para obtener la suma total.
  - Promedio (#btnPromedio):
    - Calcula promedio = suma / longitud. Maneja el caso de arreglo vacío.
  - Máx / Mín (#btnMaxMin):
    - Obtén máximo y mínimo (puedes usar Math.max(...arr) / Math.min(...arr) o un for).
  - Map: x2 (#btnDobles):
    - Usa map para generar un nuevo arreglo con cada valor * 2; no modifiques el original.
  - Filter: pares (#btnPares):
    - Usa filter para obtener un arreglo con solo números pares.
  - Contar > 10 (#btnMayores):
    - Usa filter o un forEach para contar cuántos valores son mayores que 10.
  - Buscar valor (#btnBuscar):
    - Lee #valorBuscar y determina si existe en el arreglo.
    - Muestra el índice (primera coincidencia) o un mensaje “no encontrado”.
    - Sugerencia: indexOf o un for.
  - Validaciones mínimas:
    - Si no hay datos cargados, muestra un mensaje “Primero carga los datos”.
    - Evita que se rompa el programa con entradas vacías o no válidas.
2. Buenas prácticas que se evalúan
  - Uso de funciones pequeñas y descriptivas (ej. cargarDatos(), sumar(), mostrar(), etc.).
  - No duplicar lógica: reutiliza funciones.
  - Mensajes claros en #output usando plantillas literales.

📁 Evidencia

Un solo PDF que incluya:

- El contenido completo de tu app.js.
- Una captura mostrando datos cargados y al menos tres operaciones distintas funcionando (por ejemplo: Sumar, Map x2, Buscar).
- Al inicio: tu nombre y el nombre del profesor.

📤 Método de entrega

Sube tu PDF a la plataforma.