DS & II

Capítulo 03 - O Sentido Aranha

Leitura de 4 min

🚀 Capítulo 03: O Sentido Aranha (Tema: Homem-Aranha)

NOTE

Este capítulo utiliza a temática de Homem-Aranha para explicar os Eventos no JavaScript. Faça a sua página reagir a qualquer estímulo do usuário instantaneamente!

1. 🎯 Objetivo da Aula

Aprender a capturar e manipular Eventos do usuário (cliques, digitação, movimentos do mouse) no JavaScript para criar páginas web verdadeiramente interativas.

2. 🏢 O Cenário Prático (Seu Desafio)

O herói Homem-Aranha possui uma habilidade biológica incrível chamada “Sentido Aranha”. É um sexto sentido que avisa o cérebro dele milésimos de segundo antes de um perigo acontecer. Se um inimigo joga um objeto pelas costas dele, o sentido aranha avisa e ele desvia no reflexo. Ele não toma decisões no escuro; ele reage aos estímulos e ações do ambiente!

No desenvolvimento web, os Eventos do JavaScript são o nosso Sentido Aranha!

  • Eles servem para o nosso código ficar “escutando” o que o usuário está fazendo na tela.
  • O usuário clicou em um botão? O sentido aranha avisa e nós rodamos uma função!
  • O usuário digitou algo ou passou o mouse por cima? O sentido aranha detecta! Seu desafio é ligar os sensores!

🧠 Fundamentos: A Teoria Traduzida

Um Evento é qualquer ação que acontece na página web (geralmente causada pelo usuário) que o navegador consegue detectar.

🕸️ 1. Os Eventos mais comuns:

  • click: Quando o usuário clica em algum elemento (o mais famoso!).
  • keydown: Quando o usuário aperta qualquer tecla do teclado.
  • submit: Quando o usuário tenta enviar um formulário de cadastro.

👂 2. O Escutador de Eventos (addEventListener):

Em vez de colocar o código direto no HTML (como fizemos no capítulo anterior com onclick), a forma profissional e moderna de capturar eventos no JavaScript é usando um “escutador de eventos”:

// 1. Achamos o botão no HTML
let botaoTeia = document.getElementById("lancarTeia");
 
// 2. Ligamos o Sentido Aranha (Escutador) nele!
botaoTeia.addEventListener("click", function() {
    alert("THWIP! Teia lançada! 🕸️");
});

O código acima diz: “Fique escutando o botão. Se acontecer um ‘click’, execute essa função!“.

4. 📖 Exemplo Guiado: Contador de Cliques

Podemos usar eventos para contar quantas vezes o usuário clicou em um botão:

let contador = 0;
let botao = document.getElementById("meuBotao");
 
botao.addEventListener("click", function() {
    contador = contador + 1;
    console.log("Você clicou " + contador + " vezes!");
});

5. 🛠️ Prática Obrigatória 1: Escolhendo o Evento

Qual evento do JavaScript você usaria para resolver as seguintes situações no seu aplicativo?

  1. Você quer que uma música comece a tocar assim que o usuário clicar na foto do álbum.
  2. Você quer mostrar um aviso de “Caps Lock Ativado” enquanto o usuário estiver digitando a senha no teclado.

6. 🛠️ Prática Obrigatória 2: O addEventListener

  1. Qual a principal vantagem de usar o addEventListener no arquivo JavaScript em vez de colocar atributos como onclick="..." direto nas tags do arquivo HTML?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 03 FS_SentidoAranha) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

proj_aplicacoes_full_stack/
├── capitulos/
│   ├── capitulo_03_sentido_aranha.md
│   └── codigos/
│       └── cap03/
│           └── eventos.js

💡 Checkpoint de Lógica

Você pode passar informações sobre o evento (como qual tecla exata o usuário apertou) passando um parâmetro (geralmente chamado de e ou event) para a função do escutador!

10. 🔥 Desafio de Fixação

Tente criar um código que mude a cor de um quadrado para vermelho quando o mouse passar por cima dele e volte para a cor original quando o mouse sair.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Evento click.
  2. Evento keydown (ou keyup). Gabarito da Prática 2:
  3. Organização e separação de responsabilidades! Misturar código JavaScript dentro do HTML deixa o projeto bagunçado e difícil de manter. Usando o addEventListener, o seu HTML fica limpo (apenas com a estrutura) e toda a lógica fica guardada no arquivo JavaScript.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks