Módulo 7 JavaScript

 

Módulo 7: Eventos y Manipulación del DOM en JavaScript

En este módulo aprenderás a manejar los eventos en JavaScript, que permiten que tu página web responda a las acciones del usuario, como clics y movimientos del ratón. Además, verás cómo manipular el DOM (Document Object Model) para cambiar dinámicamente el contenido y estilo de la página.

---

¿Qué es un evento?

Un evento es una acción o suceso que ocurre en la página web, como un clic, pasar el mouse por encima o presionar una tecla. JavaScript puede “escuchar” estos eventos y ejecutar código cuando ocurren.

const boton = document.getElementById('miBoton'); boton.addEventListener('click', function() { alert('¡Haz hecho clic!'); });

---

Manipulación del DOM

El DOM es la representación estructurada de la página HTML que JavaScript puede modificar en tiempo real para cambiar textos, estilos, atributos y más.

const titulo = document.querySelector('h1'); titulo.textContent = "Título cambiado por JavaScript"; titulo.style.color = "red";

---

Eventos comunes en JavaScript

• click – cuando se hace clic en un elemento.
• mouseover – cuando el cursor pasa sobre un elemento.
• keydown – cuando se presiona una tecla.
• submit – al enviar un formulario.

---

Ejemplo práctico: Cambiar texto al hacer clic

Un botón que cambia el texto de un párrafo cuando es presionado.

<button id="botonCambio">Cambiar texto</button> <p id="parrafo">Texto original</p> <script> const boton = document.getElementById('botonCambio'); const parrafo = document.getElementById('parrafo'); boton.addEventListener('click', () => { parrafo.textContent = "¡Texto cambiado!"; }); </script>

---

📥 Preguntas de repaso

Pregunta 1

¿Qué método se usa para “escuchar” un evento en un elemento?

• A) addEventListener()
• B) listenEvent()
• C) onClick()
• D) eventHandler()

✅ Respuesta correcta: A) addEventListener()

---

Pregunta 2

¿Cómo cambias el texto de un elemento con id titulo?

• A) document.getElementById('titulo').textContent = "Nuevo texto";
• B) document.querySelector('titulo').text = "Nuevo texto";
• C) cambiarTexto('titulo', "Nuevo texto");
• D) document.text('titulo') = "Nuevo texto";

✅ Respuesta correcta: A) document.getElementById('titulo').textContent = "Nuevo texto";

---

Pregunta 3

¿Cuál de estos eventos NO es común en JavaScript?

• A) click
• B) mouseover
• C) keydown
• D) onSubmitClick

✅ Respuesta correcta: D) onSubmitClick

---

Esta lección forma parte del curso básico de JavaScript. En el próximo módulo aprenderás a trabajar con Promesas y programación asíncrona.