Encontre elementos e responda a eventos
Use os métodos do DOM para atualizar uma página quando alguém age.
- Selecionar um elemento com querySelector
- Mudar textContent e classList
- Associar um listener de eventos sem JavaScript inline
Um seletor encontra um elemento no DOM. document.querySelector("#message") encontra o primeiro elemento que corresponde ou devolve null. Um evento do navegador é um sinal, como um clique, uma digitação ou um envio. Passe uma função para addEventListener; o navegador a chama mais tarde, quando o evento acontece.
1const button = document.querySelector("#reveal");
2const message = document.querySelector("#message");
3button.addEventListener("click", () => {
4 message.textContent = "Your order is ready";
5 message.classList.add("visible");
6});Num checkout de verdade, o HTML poderia conter <button id="reveal">Show status</button> e <p id="message" role="status"></p>. O CSS pode estilizar .visible. Use textContent para texto fornecido pelo usuário: ele trata o texto como texto, em vez de interpretá-lo como HTML. Verifique se um elemento selecionado existe antes de usá-lo em páginas onde a marcação pode variar.
Experimente
Até 15 XPAcompanhe o clique
Siga um clique da pessoa pelo evento do navegador, pelo handler de JavaScript e pela atualização do DOM. Preveja a próxima mensagem antes de revelá-la.
Principais conclusões
Encontre elementos com querySelector e trate um possível resultado null.
addEventListener registra um callback para um evento futuro.
Use textContent para texto não confiável e classList para estados de CSS.
Quiz da aula
4 perguntas · aprovação com 3 acertos · até 50 XP
Ao passar, você conclui a aula e mantém sua sequência. As perguntas erradas voltarão em sessões de revisão.
Pratique: escreva código em JavaScript
Escreva o programa, execute-o com os casos de teste e use o retorno para desenvolver suas habilidades em JavaScript.
Ligue um contador de cliques
O código inicial cria um botão e um parágrafo de status na página isolada do exercício. Adicione ao botão um listener de clique que incremente count e atualize o parágrafo com Clicks: N. O teste simula o número de cliques indicado em input e imprime o texto do parágrafo.
- Três cliques
- Nenhum clique
O JavaScript roda em um frame isolado do navegador, com limite de 1,5 segundo. A entrada fica disponível na variável de string input.
Dúvidas sobre esta lição
Travou em algum ponto? Pergunte. Descobriu algo? Compartilhe. Explicar também é uma ótima forma de aprender.
Carregando publicações…