Skip to content

README.md

Latest commit

 

History

History
78 lines (52 loc) · 3.38 KB

README.md

File metadata and controls

78 lines (52 loc) · 3.38 KB

📚 Repaso de JavaScript

Este proyecto contiene los ejercicios de refuerzo diseñados para consolidar los pilares de JavaScript moderno esenciales para el desarrollo Full Stack (MERN).

🎯 Objetivo de la Sesión

Reforzar los siguientes conceptos fundamentales de JavaScript:

  • DOM (Document Object Model)
  • Métodos de Array (map, filter, forEach, etc.)
  • Arrow Functions
  • Bucles (for, for...of)
  • Destructuring y Spread Operator
  • Fetch (Peticiones HTTP)
  • Asincronía (async/await)

💻 Configuración Inicial

Asegúrate de tener los siguientes tres archivos en tu carpeta de proyecto y enlaza el script.js y styles.css en tu index.html.

Datos Base (script.js):

const usuarios = [
  { id: 1, nombre: "Ana", edad: 25, rol: "developer" },
  { id: 2, nombre: "Luis", edad: 32, rol: "manager" },
  { id: 3, nombre: "Carla", edad: 22, rol: "developer" },
  { id: 4, nombre: "Miguel", edad: 40, rol: "designer" },
  { id: 5, nombre: "Lucía", edad: 28, rol: "developer" },
]

📝 Enunciados de los Ejercicios

Bloque 1: Lógica y Manipulación de Datos

Ejercicio 1: Los Bucles y forEach

Utiliza el array usuarios para realizar las siguientes tareas de iteración, concentrándote en el bucle especificado:

  • Bucle for clásico: Imprime en consola solo los nombres de los usuarios.
  • Bucle for...of: Imprime en consola la edad de cada usuario.
  • Método forEach: Imprime en consola el nombre y rol de cada usuario usando una Arrow Function.

Ejercicio 2: filter y map

  • filter: Crea una nueva variable developers que contenga solo a los usuarios cuyo rol sea 'developer'.
  • map: Usando el array developers, genera un nuevo array nombresDevs que contenga solo los nombres de esos developers.

Ejercicio 3: Destructuring y Spread Operator

  • Destructuring: Modifica el forEach del Ejercicio 1.3 para usar destructuring en los parámetros de la Arrow Function, extrayendo directamente nombre y rol.
  • Spread Operator: Crea un nuevo objeto nuevoUsuario. Luego, crea un array todosLosUsuarios que sea una copia del array usuarios original, con nuevoUsuario añadido al final.

Ejercicio 4: DOM Básico

  • Usa el array nombresDevs (del Ejercicio 2.2) y el método forEach para crear elementos <li> y pintar cada nombre dentro de la ul con id lista-devs en el HTML.

Bloque 2: Asincronía y Fetch (Simulación de E-Commerce)

Ejercicio 5: fetch, async/await y DOM Avanzado

  1. Añade un Event Listener al botón con id btn-cargar.
  2. Al hacer clic, realiza una petición fetch a la URL: https://fakestoreapi.com/products?limit=5.
  3. Usa la sintaxis async/await para procesar la respuesta y muestra el array de productos en la consola.
  4. Crea una función llamada cargarProductos y declárala como async.
  5. Refactoriza el fetch anterior usando la sintaxis dentro de esta función.
  6. Maneja los errores usando un bloque try...catch.
  7. Itera sobre los productos recibidos y, usando Destructuring, pinta una "tarjeta" en la ul con id lista-productos que contenga el título, el precio y la imagen de cada producto.
  8. Asegúrate de que el Event Listener del botón llame a esta nueva función cargarProductos.