## Objetivo da aula Entender como o JavaScript “entra” numa página web para **ler e modificar o DOM**, reagir a **eventos do usuário**, **manipular formulários**, aplicar **validação simples** e usar **localStorage** para persistência básica no navegador — tudo com JavaScript puro. ## Pré-requisitos * HTML básico (tags, atributos, formulários com `input`, `label`, `button`) * CSS básico (classes e noção de layout) * JavaScript básico (variáveis `let/const`, funções, condicionais e loops) ## O que você será capaz de explicar ao final * O que é o **DOM** e por que ele precisa existir antes de ser manipulado * Como **selecionar** elementos com `querySelector`, `querySelectorAll` e `getElementById` * Como **alterar** texto, atributos, classes e criar/remover elementos * Como funcionam **eventos** e `addEventListener`, incluindo `event.target` e `preventDefault` * Como ler e controlar dados de **formulários** sem recarregar a página * Como fazer **validação simples** (HTML + JS) com mensagens claras * O que é **localStorage**, suas limitações e como salvar/ler valores (inclusive objetos via JSON) --- # 6.1. Onde o JavaScript entra na página (modelo mental) Um jeito útil de pensar em uma página web é separar responsabilidades: * **HTML** define a **estrutura** (o que existe: títulos, parágrafos, botões, inputs). * **CSS** define a **aparência** (como parece: cores, espaçamentos, layout). * **JavaScript** define o **comportamento** (o que acontece: ao clicar, enviar, digitar, alternar tema). O JavaScript no navegador atua principalmente sobre a “representação viva” do HTML: o **DOM**. >Conceito-chave: o navegador não “enxerga” seu HTML como texto depois que a página carrega. Ele converte o HTML em uma **árvore de nós (nodes)** na memória. Essa árvore é o **DOM (Document Object Model)**. ## Momento de execução: por que o DOM precisa existir antes Se seu script roda cedo demais, ele tenta selecionar elementos que ainda **não foram criados** pelo navegador — e isso gera `null` e erros. Existem duas formas comuns (e corretas) de garantir que o DOM exista antes do JS manipular elementos: 1. **Colocar o `