JavaScript no Browser - Frontend

JavaScript é a linguagem que dá vida à página: responde a cliques, atualiza texto sem recarregar, valida formulários, busca dados na internet.

A peça central é o DOM (Document Object Model) — a representação em memória da sua página. Com JavaScript, você lê e modifica esse modelo:

// Acha o botão e escuta o clique
const botao = document.querySelector("#cumprimentar");
botao.addEventListener("click", () => {
  document.querySelector("#mensagem").textContent = "Olá!";
});

Os três métodos do DOM que você usa 90% do tempo:

document.querySelector("seletor") — acha um elemento.
document.querySelectorAll("seletor") — acha todos (devolve uma lista).
elemento.addEventListener("click", funcao) — escuta um evento.

addEventListener é o coração de toda interação. O navegador dispara milhares de eventos por segundo — cliques, teclas, scrolls, mouse parado, redimensionamento — e seu código reage a eles.

Eventos comuns: click, input, submit, keydown, mouseover, scroll. A lista completa está no MDN.

Experimente

// Cria um botão dinamicamente e responde ao clique
const btn = document.createElement("button");
btn.textContent = "Clica em mim";
btn.style.padding = "8px 16px";
btn.style.borderRadius = "6px";
btn.style.cursor = "pointer";
btn.addEventListener("click", () => {
  alert("Oi! Você clicou.");
});
document.body.appendChild(btn);

Experimente

// recursos