🚀 Capítulo 08: Eventos de Teclado
🎯 Objetivo da Aula
Ao final desta aula, você saberá como capturar as teclas digitadas pelo usuário usando os eventos keydown e keyup, permitindo criar controles por teclado.
🏢 O Cenário Prático (Seu Desafio)
Para pilotar a nave, precisamos usar o teclado! Seu desafio é capturar o evento de quando o usuário aperta uma tecla e mostrar na tela qual tecla foi pressionada!
🧠 Fundamentos: A Teoria Traduzida
Para ouvir o teclado, geralmente colocamos o evento no window (a tela inteira) ou no document.
Os principais eventos são:
keydown: Dispara quando você aperta a tecla para baixo.keyup: Dispara quando você solta a tecla.
Dentro do objeto evento (e), a propriedade e.key nos diz o nome da tecla (ex: “ArrowUp”, “Enter”, “a”).
📖 Exemplo Guiado: Pilotando com as Setas
window.addEventListener('keydown', function(e) {
if (e.key === 'ArrowUp') {
console.log('Nave acelerando para cima! ⬆️');
}
});🛠️ Prática Obrigatória 1
Crie um ouvinte para o evento keydown que mostre no console a tecla que o usuário acabou de apertar.
🛠️ Prática Obrigatória 2
Faça uma mensagem de alerta aparecer se o usuário apertar a tecla “Enter”.
🔑 Gabarito de Código/Fórmulas
Prática 1:
window.addEventListener('keydown', (e) => {
console.log('Tecla apertada:', e.key);
});