Programação B

JavaScript no Navegador: Scripts, o DOM e Eventos

HTML e CSS produzem páginas estáticas. Para que a página faça algo — reagir a um clique, buscar dados de um servidor, atualizar o conteúdo sem recarregar — precisamos de JavaScript.

O navegador executa JavaScript no contexto da página. O script pode acessar e modificar os elementos HTML através de uma API chamada DOM (Document Object Model). O DOM é uma representação em árvore do documento HTML: cada elemento é um nó, e os nós têm relações de pai-filho que espelham o aninhamento das tags.

Selecionando e modificando elementos

Adicione um <script> antes do </body>:

<script>
  const button = document.querySelector("button");
  console.log(button.textContent);
</script>

document.querySelector("button") busca o primeiro <button> no DOM e retorna uma referência a ele. A partir dessa referência, você pode ler atributos (button.textContent), modificar estilos (button.style.background = "red"), adicionar classes (button.classList.add("active")) — qualquer propriedade do elemento está acessível.

Respondendo a eventos

Um evento é algo que acontece na página: um clique, um movimento do mouse, uma tecla pressionada, o carregamento de um recurso. Para reagir a um evento, usamos addEventListener:

<script>
  const button = document.querySelector("button");

  button.addEventListener("click", () => {
    button.textContent = "Confirmado ✓";
    button.style.background = "#38a169";
  });
</script>

Clique no botão. O texto muda para “Confirmado ✓” e a cor fica verde. O JavaScript modificou o DOM em tempo real, sem recarregar a página.

O primeiro argumento de addEventListener é o nome do evento ("click"). O segundo é uma função callback — o código que executa quando o evento acontece. Essa função recebe um objeto event com detalhes (posição do mouse, tecla pressionada, elemento que disparou o evento), mas aqui não precisamos dele.