WDD 131: Fundamentos da Web Dinâmica

S02 – Atividade de Aprendizagem: Manipulando Eventos DOM

Visão Geral

Manipular eventos DOM em JavaScript é uma parte fundamental da criação de páginas web interativas. Nesta atividade, você aprenderá tudo sobre os diferentes eventos que pode manipular, como manipulá-los e como passar dados entre o manipulador de eventos e o restante do seu código.

Preparação

Alguns conceitos/casos de uso comuns de eventos DOM. Esses são apenas alguns exemplos, há muitos outros eventos e casos de uso.

• Evento de Clique: Disparado quando um usuário clica em um elemento. Em grande parte, é utilizado para manipular cliques de botões e de links ou qualquer interação que envolva um clique do mouse.

  buttonElement.addEventListener('click', function() {
    // Código a ser executado quando o elemento for clicado
  });

  O método addEventListener recebe dois argumentos: o nome do evento e uma função a ser executada quando o evento for acionado. A função é chamada de manipulador de eventos. Aprenderemos mais sobre como escrever funções mais adiante no curso. Por enquanto, é importante saber que a função é um bloco de código que será executado quando o evento for acionado. A função também é chamada de função de retorno de chamada porque ela é chamada de volta quando o evento é acionado.

• Evento Keyup: Disparado quando o usuário solta uma tecla. Útil para manipular entradas de teclado.

  buttonElement.addEventListener('keyup', function() {
    // Código a ser executado quando uma tecla for solta
  });

• Evento DOMContentLoaded: Disparado quando o documento HTML foi completamente analisado e todos os scripts adiados foram executados. É amplamente utilizado para inicializar aplicações JavaScript.

  document.addEventListener("DOMContentLoaded", function() {
    // Código a ser executado quando o DOM for analisado
  });

Instruções da Atividade

Esta atividade adiciona funcionalidade à aplicação Livro de Mórmon 10 Principais iniciada na atividade de aprendizagem anterior no DOM. Organizaremos o código para responder ao clique do botão Adicionar Capítulo para criar o item da lista. Além disso, a funcionalidade do botão excluir será adicionada junto com algumas expectativas de interface do usuário.

1. Abra o arquivo JavaScript compatível com a aplicação bom.html, se necessário.
2. Crie um ouvinte de evento de clique para o botão Adicionar Capítulo usando um addEventListener.
   Avalie Seu Conhecimento

   button.addEventListener('click', function() {
               // Código a ser executado quando o botão for clicado
             });
           

3. No bloco de função do evento de clique do botão Adicionar Capítulo, dentro do bloco da função de retorno de chamada { ... }, faça o seguinte:
   • Verifique se a entrada não está em branco antes de concluir as tarefas restantes nesta lista usando um bloco if que exibe uma mensagem ou não faz nada e retorna o .focus() para o campo de entrada.
     Avalie Seu Conhecimento

     if (input.value.trim() !== '') { ... }

     O que o método .trim() faz?
     O branch else deve ser adicionado a essa condicional?
     Qual código deve ser incluído no bloco de condição verdadeira { ... }?

   • Mova o código que você escreveu na última atividade para este bloco if para dar suporte ao fluxo correto do programa.
     Avalie Seu Conhecimento

     O usuário clica no botão Adicionar Capítulo e o programa verifica se o campo de entrada não está vazio. Então é hora de começar a criar e preencher elementos.
   • Adicione um ouvinte de evento ao botão de exclusão que remove o elemento li quando clicado.
     Avalie Seu Conhecimento

     botaoExcluir.addEventListener('click', function () {
       list.removeChild(li);
       input.focus();
     });

   • Altere o valor de entrada para nada ou para uma string vazia a fim de limpar a interface para o usuário.
     Avalie Seu Conhecimento

     input.value = '';

   • Independentemente de um item de lista ter sido criado ou não, o foco (cursor ativo) deve ser enviado para o elemento de entrada.
     Avalie Seu Conhecimento

     input.focus();

Teste e Envio

• Teste sua aplicação minuciosamente no navegador. Isso pode ser feito localmente.
• O que mais você adicionaria para aumentar a usabilidade desta aplicação?
• Confirme (commit) e envie (push) seu trabalho para o repositório wdd131 habilitado para o GitHub Pages.