Misión C15Nivel Creadores (13–15 años) En Celular Computador 20–30 min
Eventos en la página
Web: eventos, DOM, formularios y lista de tareas
🗺️
Tu Misión de Hoy
Una página interactiva reacciona: a clics, teclas y formularios. Son los mismos eventos que usabas en Scratch, ahora en la web.
🧰
Checklist interactivoQué Necesitas en Casa
Revisa los materiales juntos y marca las casillas a medida que los tengan listos:
Trinket → New Trinket → HTML (vista previa inmediata) o VS Code web
👣
Paso a Paso en Familia
🎮
Minijuego Interactivo: Reto C15
Aprende jugando: resuelve el reto interactivo directamente aquí abajo.
Escucha eventos del usuario con addEventListener("click"):
Clics capturados: 0 / 3
🏆 Reto Extra de Exploración
- Guarda la lista con
localStorage para que no se pierda al recargar.🐞 Si algo no funciona (¡Hora de depurar!)
-
null al buscar un elemento → el script se ejecuta antes que el HTML; ponlo al final del <body>.
- El botón no hace nada → revisa el id y la consola.💬 Muéstraselo a tu Familia
Enséñale tu lista de tareas web o tu modo oscuro.
¿Terminaron la misión? Estampa tu sello para avanzar.
Guía para el Adulto Acompañante
Tu rol es guiar con preguntas, no dar la respuesta.
🎯Objetivo
Manipular el DOM y responder a eventos del usuario.
📋Antes de empezar
Tenga el proyecto web.
❓Preguntas para hacer
- ¿En qué se parece a los eventos de Scratch?
- ¿Qué es el DOM?
- ¿Qué más podrías hacer con un botón?
Si se atasca (de menos a más ayuda):
1. Recuérdele E04 y S08.
2. Hagan juntos el contador.
3. Den el código del contador y pidan el modo oscuro.
💡Sin computador / solo celular
Solo celular: Trinket HTML funciona en el navegador del celular ⚠; un teclado Bluetooth ayuda mucho.
⭐Sello del pasaporte
✅ la página responde a eventos y modifica el contenido.
🧠Conceptos
Navegación del Programa
🤖
Jugar ➔¿Practicar con el Robot?
Prueba el simulador de cuadrícula 5x5