Acrescentar uma ação pequena com JavaScript

Neste capítulo você vai reconhecer seleção, condição e resposta a um botão opcional. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 13. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 14-acao-javascript do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

O script começa encontrando elementos

Document é a representação da página no navegador. QuerySelector procura um elemento pelo seletor fornecido. #orientar identifica o id do botão; #orientacao identifica a região de mensagem. Const cria um nome para guardar a referência encontrada. O arquivo acao.js é carregado com defer, que permite executá-lo depois de o HTML ser analisado. Esta é uma ponte pequena, não uma introdução completa à programação. Confira cada seleção no arquivo inteiro antes de experimentar. Não copie o script para dentro do CSS: cada arquivo tem uma linguagem e uma função.

Faça na sua cópia

Abra assets/acao.js. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

const button = document.querySelector('#orientar');
const message = document.querySelector('#orientacao');

Mude uma coisa e preveja

Troque temporariamente somente #orientar por #botao-inexistente.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A seleção não encontra o botão. A condição protege a ação e a orientação original continua no HTML. Restaure o seletor.

Se não acontecer

Confira grafia e arquivo carregado. Não apague o texto base para esconder uma seleção que falhou.

A condição protege uma dependência pequena

If verifica uma condição antes de executar o bloco entre chaves. Button && message exige que as duas referências existam. Com elas presentes, o script retira hidden do botão opcional. Hidden evita anunciar uma ação que não ganhou comportamento. Essa proteção não resolve todo erro de JavaScript; apenas controla a dependência destes elementos. O texto base já diz para ler a agenda e a descrição. Se o script estiver indisponível, a página mantém a orientação e não promete que o botão funciona.

Faça na sua cópia

Confira a condição no arquivo completo. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

if (button && message) {
  button.hidden = false;
}

Mude uma coisa e preveja

Troque somente o texto inicial da região orientacao no HTML por Consulte a agenda antes de escolher.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A base muda antes de qualquer clique. O script disponível ainda oferece sua orientação complementar.

Se não acontecer

Confira se editou o HTML e salvou. Uma mudança no texto de resposta do JS só aparece depois da ação.

Uma função responde à ação da pessoa

AddEventListener registra uma função para responder a um evento. Click é a ativação do botão, inclusive pelo teclado no controle nativo. A função é escrita entre chaves e executa quando a ação acontece. TextContent troca o conteúdo por texto, sem interpretar esse valor como tags HTML. A região usa role=status para informar a atualização. Não peça que o aluno deduza a implementação: o arquivo completo acompanha a etapa e aparece no final desta explicação. Mude uma frase de resposta e confira o momento em que ela aparece.

Faça na sua cópia

Confira a função de resposta em acao.js. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

button.addEventListener('click', () => {
  message.textContent = 'Comece pela agenda e leia a descrição da atividade.';
});

Mude uma coisa e preveja

Troque somente a frase da resposta por Leia uma atividade e confira seu horário.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A nova frase aparece depois da ativação. Antes dela, continua o texto inicial do HTML.

Se não acontecer

Confira aspas, chaves e parênteses. Use o console para localizar um erro de sintaxe, sem retirar a base útil.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

A ação completa

O arquivo assets/acao.js é pequeno. Confira a implementação inteira e reconheça seleção, condição e função de resposta.

const button = document.querySelector('#orientar');
const message = document.querySelector('#orientacao');
if (button && message) {
  button.hidden = false;
  button.addEventListener('click', () => {
    message.textContent = 'Comece pela agenda e leia a descrição da atividade.';
  });
}

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Provoque uma seleção inexistente e confira a orientação base.

2. Explique a função da condição e de hidden.

3. Troque a frase de resposta e ative com teclado.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. A condição impede usar uma referência ausente nesse bloco. O texto já escrito no HTML permanece; restaure o seletor para recuperar a ação.

2. O bloco exige os dois elementos. Hidden conserva o botão opcional fora da apresentação enquanto não há comportamento preparado.

3. A função roda na ativação; textContent apresenta a frase como texto. Um button nativo pode ser alcançado e ativado pelo teclado.

Quando seguir

Você reconhece os três passos da ação e mantém a orientação quando o complemento falha. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 14-acao-javascript, reproduzida aqui para que você possa conferir sem sair da página.

assets/acao.js

const button = document.querySelector('#orientar');
const message = document.querySelector('#orientacao');
if (button && message) {
  button.hidden = false;
  button.addEventListener('click', () => {
    message.textContent = 'Comece pela agenda e leia a descrição da atividade.';
  });
}