Aula 09 de 10

Mexendo na página de verdade

Fazer o JavaScript alterar o HTML e responder a eventos do usuário.

querySelectortextContentaddEventListener

// entendendo

Como funciona

Chegou a parte que muda tudo. Até agora seu código falava com o console. Agora ele vai mexer na página.

Três comandos e você já faz muita coisa:

// 1. achar o elemento no HTML
let titulo = document.querySelector("#titulo");

// 2. mudar o conteúdo dele
titulo.textContent = "Texto novo!";

// 3. reagir a um clique
botao.addEventListener("click", function () {
  console.log("clicaram em mim!");
});

No querySelector você usa a mesma sintaxe do CSS: "#id" pra id, ".classe" pra classe.

Nesta aula os exercícios têm um PALCO — a área branca com HTML de verdade. Seu código roda em cima dele. Clicou em Rodar, o palco reage.

// mão na massa

Agora é com você

Os campos abaixo estão vazios de propósito. Escreva, clique em Rodar e veja o resultado. Errou? Ótimo — leia o erro e tente de novo. (Atalho: Ctrl+Enter roda o código.)

Mudando o texto da página

No palco existe um título com id="titulo". Selecione ele e troque o texto por outro.

a9e1.js

// selecione o título e mude o texto

palco — o resultado aparece aqui

Título original

Este parágrafo continua igual.

Preciso de uma dica

let titulo = document.querySelector("#titulo"); e depois titulo.textContent = "Meu texto";

Observação: O # significa "procure pelo id". É a mesma regra do CSS que você já usa — o JS aproveitou a sintaxe.

O botão que responde

Faça o botão do palco, ao ser clicado, mudar o texto da mensagem. Rode e depois clique no botão de verdade.

a9e2.js

let btn = document.querySelector("#btn");
let msg = document.querySelector("#msg");

// faça o botão reagir ao clique

palco — o resultado aparece aqui

Ainda não clicaram...

Preciso de uma dica

btn.addEventListener("click", function () { msg.textContent = "Clicaram! 🎉"; });

Observação: Traduzindo addEventListener("click", ...): fique escutando; quando houver um clique, execute esta função. Isso se chama evento — é assim que todo app reage a você.

Contador de curtidas

Faça o botão ❤️ aumentar o número na tela a cada clique. Clique várias vezes pra testar.

a9e3.js

let numero = document.querySelector("#numero");
let curtir = document.querySelector("#curtir");
let total = 0;

// a cada clique, aumente o total e mostre na tela

palco — o resultado aparece aqui

Preciso de uma dica

Dentro do addEventListener: total = total + 1; e depois numero.textContent = total;

Observação: A variável total tem que ficar fora da função — se ela for criada dentro, volta pra zero a cada clique. Teste isso: mova a linha pra dentro e veja o bug acontecer.

Lendo o que o usuário digitou

Pegue o texto digitado no campo e adicione como um novo item da lista quando o botão for clicado.

a9e4.js

let campo = document.querySelector("#campo");
let lista = document.querySelector("#lista");
let add = document.querySelector("#add");

// ao clicar, crie um <li> com o texto digitado

palco — o resultado aparece aqui

Minha lista

Item inicial

Preciso de uma dica

Três passos dentro do clique: let li = document.createElement("li"); · li.textContent = campo.value; · lista.appendChild(li);

Observação: Num input, o que a pessoa digitou está em .value (não em .textContent). E campo.value = "" no final limpa o campo — detalhe que faz parecer app profissional.

// desafio

o botão que muda de humor

Desafio: o botão que muda de humor

Faça o botão alternar entre dois estados a cada clique: quando estiver "Seguindo", vira "Seguir"; quando estiver "Seguir", vira "Seguindo".

a9d1.js DESAFIO

let seguir = document.querySelector("#seguir");

// alterne o texto do botão a cada clique

palco — o resultado aparece aqui

@anadev

Preciso de uma dica

Use um if dentro do clique comparando o texto atual: if (seguir.textContent === "Seguir"). Ou guarde um booleano seguindo fora e inverta com seguindo = !seguindo.

Observação: Esse padrão se chama toggle (alternar). Curtir, salvar, seguir, modo escuro — tudo isso é toggle. Você acabou de aprender um dos comportamentos mais usados da web.

Aula 08 Aula 10