Além do mouse, o teclado é uma das formas mais importantes de interação com a página.

Eventos de teclado permitem criar atalhos, validar entradas em tempo real e melhorar a experiência do usuário.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Entender os principais eventos de teclado
  • Capturar teclas pressionadas
  • Criar atalhos de teclado
  • Saber quando usar cada evento
  • Evitar eventos obsoletos

Principais eventos de teclado

Os eventos de teclado mais usados são:

  • keydown
  • keyup
  • keypress (obsoleto)

keydown

O keydown é disparado quando a tecla é pressionada. 

 
  document.addEventListener("keydown", (event) => 
  { 
    console.log(event.key); 
  }); 
 console.log(event.key); // Saída será o nome da tecla pressionada

Esse evento dispara continuamente se a tecla for mantida pressionada.

keyup

O keyup é disparado quando a tecla é solta. 

 document.addEventListener("keyup", (event) => { console.log("Tecla solta:", event.key); }); 
 console.log("Tecla solta:", event.key); // Saída será exibida ao soltar a tecla

Muito usado para:

  • Detectar fim de ação
  • Confirmar comandos

E o keypress?

O evento keypress está obsoleto e não deve mais ser usado.

Ele não funciona corretamente com teclas especiais e layouts modernos.

Prefira sempre keydown e keyup.

Capturando teclas específicas

Podemos reagir a teclas específicas: 


    document.addEventListener("keydown", (event) => 
    { 
      if (event.key === "Enter") 
        { 
          console.log("Enter pressionado"); 
        }
    }); 
 console.log("Enter pressionado"); // Saída ao pressionar Enter

Criando atalhos de teclado

Podemos combinar teclas: 

 document.addEventListener("keydown", (event) => { if (event.ctrlKey && event.key === "s") { event.preventDefault(); console.log("Atalho Ctrl + S"); } }); 
 
      console.log("Atalho Ctrl + S"); // Saída ao pressionar Ctrl + S

Outras propriedades úteis:

  • event.shiftKey
  • event.altKey

Teclado e formulários

Eventos de teclado são muito usados em inputs: 

 const input = document.getElementById("nome");
    input.addEventListener("keydown", (event) => 
    {
      console.log(event.key);
    });

Mas atenção:

Para capturar o valor digitado, veremos que input é melhor que eventos de teclado.

Boas práticas com teclado

  • Prefira keydown para ações imediatas
  • Use keyup para ações finais
  • Evite keypress
  • Use preventDefault para atalhos

Resumo da aula para nunca mais esquecer

  • keydown detecta tecla pressionada
  • keyup detecta tecla solta
  • keypress está obsoleto
  • event.key identifica a tecla
  • Eventos de teclado criam atalhos e interações

Na próxima aula, vamos estudar os eventos de formulário e texto.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Ábaco

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Pac Man

Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.