Até aqui, vimos eventos de mouse e teclado. Mas a maior parte da interação do usuário com uma aplicação acontece em inputs, formulários e campos de texto.

Nesta aula, vamos aprender os eventos certos para lidar com digitação, foco, mudanças de valor e envio de formulários.

🎯 Objetivo da aula

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

  • Usar eventos de formulário corretamente
  • Entender a diferença entre input e change
  • Capturar foco e perda de foco
  • Controlar o envio de formulários
  • Criar validações em tempo real

O evento input

O evento input é disparado toda vez que o valor do campo muda.

Ele é ideal para validações em tempo real. 

 
  const campo = document.getElementById("nome");
  campo.addEventListener("input", (event) => 
  {
    console.log(event.target.value);
  });

 console.log(event.target.value); // Saída será o texto digitado em tempo real

input vs keydown

Diferença importante:

  • keydown → detecta a tecla
  • input → detecta o valor final
Para trabalhar com texto digitado, prefira sempre input.

O evento change

O change é disparado quando:

  • O valor muda
  • E o campo perde o foco
 campo.addEventListener("change", () => { console.log("Valor confirmado"); }); 
 console.log("Valor confirmado"); // Saída ocorre ao sair do campo

Muito usado para:

  • Selects
  • Confirmações de valor

focus e blur

Esses eventos detectam quando o campo ganha ou perde foco. 

 
  campo.addEventListener("focus", () => 
  { 
    console.log("Campo em foco"); });
    campo.addEventListener("blur", () =>
    {
      console.log("Campo perdeu foco");
    });

 console.log("Campo em foco"); // Ao clicar no campo console.log("Campo perdeu foco"); // Ao sair do campo

Eles são muito usados para:

  • Mostrar mensagens de ajuda
  • Validações
  • Destaques visuais

O evento submit

O submit é disparado quando o formulário é enviado. 

 
  const form = document.getElementById("formulario");
  form.addEventListener("submit", (event) => 
  {
    event.preventDefault();
    console.log("Formulário enviado");
  });

 console.log("Formulário enviado"); // Saída ocorre ao clicar em enviar

O preventDefault impede o recarregamento da página.

Exemplo real: validação simples

 campo.addEventListener("input", () => { if (campo.value.length < 3) { campo.classList.add("erro"); } else { campo.classList.remove("erro"); } });

Aqui combinamos:

  • Evento input
  • Manipulação de classes CSS

Boas práticas com formulários

  • Use input para texto em tempo real
  • Use change para confirmação
  • Use submit no formulário, não no botão
  • Sempre trate o envio com preventDefault
Formulários são o coração de muitas aplicações web.

Resumo da aula para nunca mais esquecer

  • input reage a cada mudança de valor
  • change reage após confirmação
  • focus e blur controlam foco
  • submit controla o envio do formulário
  • Essenciais para validações e UX

Na próxima aula, vamos fechar esse mini-bloco com uma introdução ao Drag and Drop.

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?

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

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".