8.8 - Tornando a página interativa

🎯 Tornando a página interativa

🎯 Tornando a página interativa

Até agora, você aprendeu a:

• Encontrar elementos na página ✅

• Mudar textos e estilos ✅

• Criar novos conteúdos ✅

Mas... e se você quiser que algo aconteça quando a pessoa clica em um botão? Ou quando passa o mouse por cima de um texto?

Chegou a hora de dar vida à sua página com eventos! ⚡

---

🧠 O que são eventos?

Um evento é qualquer coisa que acontece na página:

• Alguém clicou 🖱️

• Digitou algo no teclado ⌨️

• Passou o mouse por cima 🐭

• A página carregou completamente 🌀

O JavaScript consegue "ouvir" esses eventos e responder a eles com uma ação. Isso é chamado de interatividade!

---

🖱️ O evento de clique

Vamos começar com o mais comum: o clique.

👇 HTML

<button id="meuBotao">Clique aqui!</button>
<p id="mensagem">Nada aconteceu ainda...</p>

👉 JavaScript

const botao = document.getElementById("meuBotao");
const mensagem = document.getElementById("mensagem");

botao.addEventListener("click", function() {
  mensagem.textContent = "Você clicou no botão! 🎉";
});

🔎 O que está acontecendo aqui:

• addEventListener("click", ...) → escuta o clique

• A função dentro dele é executada quando o botão é clicado

• Ela muda o texto do parágrafo com textContent

---

🧠 O que é addEventListener nesse caso ?

É uma função especial que diz:

"Ei, JavaScript, fica de olho nesse botão. Quando alguém clicar, execute essa ação!" 🕵️‍♀️

---

🧪 Outro exemplo divertido

<button id="trocarCor">Trocar cor do fundo</button>

const botao = document.getElementById("trocarCor");

botao.addEventListener("click", function() {
  document.body.style.backgroundColor = "lightblue";
});

✨ Resultado: Quando você clica no botão, o fundo da página muda de cor!

---

⚠️ Cuidado com nomes de eventos

Aqui estão alguns eventos comuns:

Evento	O que dispara
click	Clique do mouse
mouseover	Mouse passando por cima
keydown	Tecla pressionada
submit	Formulário enviado

Em breve você vai explorar todos eles. Por enquanto, foque no click!

---

✅ Conclusão

Agora você já sabe como:

✅ Detectar eventos ✅ Reagir a cliques ✅ Criar páginas que respondem aos usuários!

💬 A sua página não é mais estática — agora ela conversa com quem está usando! 😄