Aulas
Disciplinas

Cursos / Informática para Internet / Plataformas de aplicações Web / Aula

arrow_back Aula 07 - Comportamento dinâmico com Javascript

Criando o projeto - HTML+CSS+Javascript

Dentro da pasta "pages" crie um arquivo chamado "animais.html" com o seguinte conteúdo:


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
  <title>Animais</title>
  <script>
    async function escolherTipoAnimal() {
      // obtém o valor do tipo de animal escolhido ('caes' ou 'gatos')
      const tipoAnimal = document.getElementById('tipoAnimal').value;

      if (tipoAnimal == '') return; // finaliza se nenhum tipo foi escohido

      // cria uma URL com o caminho correto para o tipo escolhido
      // 'dados/caes.json' ou 'dados/gatos.json'
      const animaisJSONURL = `dados/${tipoAnimal}.json`;

      // usa o fetch para obter o conteúdo do documento JSON da url gerada
      const resultado = await fetch(animaisJSONURL);

      if (resultado.ok) {
        // Caso a requisição do documento tenha sido realizada com sucesso
        // coloca o conteúdo json do documento (um array de animais) na variável "animais".
        const animais = await resultado.json();

        // chama a função listarAnimais com o array recebido do documento json.
        listarAnimais(animais);
      }
    }

    async function listarAnimais(animais) {
      // obtém o elemento UL com a lista de animais
      const animaisUL = document.getElementById('animaisUL');

      // limpa todo os LI da lista de animais (limpa a lista UL)
      animaisUL.innerHTML = "";

      // para cada animal do array passado
      for (const animal of animais) {
        // cria um novo elemento LI,
        const novoLI = document.createElement('LI');

        // adiciona o nome - raça do animal como conteúdo do LI
        novoLI.innerHTML = `${animal.nome} - ${animal.raca}`;

        // e adiciona o LI como novo filho da lista de animais
        animaisUL.appendChild(novoLI);
      }
    }
  </script>
</head>
<body>
  <div class="container">
    <h1>Animais</h1>
    <select id="tipoAnimal" onChange="escolherTipoAnimal()" class="form-select">
      <option value="">Escolha um tipo abaixo</option>
      <option value="caes">Cães</option>
      <option value="gatos">Gatos</option>
    </select>

    <ul id="animaisUL">
    </ul>

  </div>
</body>
</html>

Repare que nesse HTML estamos usando o Bootstrap somente para estilizar melhor os nossos elementos.

O animais.html contém um SELECT com o id="tipoAnimal" com as opções com value "caes" e "gatos". No onChange="escolherTipoAnimal()" o HTML está sendo informado que quando o usuário mudar a opção uma função chamada escolherTipoAnimal() será executada em Javascript.

A função escolherTipoAnimal() realiza algumas operações.

Primeiro ela obtém o valor do tipo de animal escolhido ('caes' ou 'gatos') do select. Caso não seja nada (o usuário escolheu a opção em branco chamada "Escolha um tipo abaixo" ela simplesmente retorna sem fazer nada.

const tipoAnimal = document.getElementById('tipoAnimal').value;
if (tipoAnimal == '') return;

Em seguida é criada uma URL específica para a opção escolhida com o código:

const animaisJSONURL = dados/${tipoAnimal}.json`;

Esse código atribui a variável animaisJSONURL os valores possíveis: 'dados/caes.json' ou 'dados/gatos.json', de acrodo com o que foi escolhido.

Em seguida é utilizada a função fetch para acessar essa URL e se obter o conteúdo JSON do documento escolhido:

const resultado = await fetch(animaisJSONURL);

O fetch retorna um Promise, e é assíncrono, portanto você pode utiliza a sintaxe "await" para se "aguardar" o retorno dele sem bloquear a interface do usuário. Para mais informaçòes sobre o await visite: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Em um caso real, com o sistema em produção na Internet, o retorno do "fetch(animaisJSONURL)" pode falhar, caso a internet esteja fora do ar, por exemplo, ou algum erro aconteca no servidor que está fornecendo os dados JSON. Então é uma boa prática verificar se o retorno foi obtido com sucesso (verificando o "resultado.ok") e só então obter o conteúdo JSON desse retorno (conteúdo do documento que foi retornado):

if (resultado.ok) {
  // Caso a requisição do documento tenha sido realizada com sucesso
  // coloca o conteúdo json do documento (um array de animais) na variável "animais".
  const animais = await resultado.json();

  // chama a função listarAnimais com o array recebido do documento json.
  listarAnimais(animais);
}

Repare que se o resultado estiver "ok" é obtido na variável "animais" o conteúdo do documento JSON que foi solicitado. Então é chamada a função listarAnimais(animais) para exibir esse Array JSON como na lista no HTML, trocando seu conteúdo por um novo.

A função listarAnimais(animais) realiza a troca do conteúdo da lista UL de animais por um novo com uma sequência de operações que estão comentadas no código HTML acima. Basicamente é obtido o elemento UL, seu conteúdo é limpo atribuindo o innterHTML = "", depois é feito uma iteração na lista de animais recebidas e para cada um é criado em Javascript um elemento LI e adicionado esse elemento na lista de animals usando o método appendChild.

Temos agora todos os documentos necessários no nosso projeto, com exceção da aplicação Express que vai servir todos eles para o navegador nas rotas que desejamos.


Versão 5.3 - Todos os Direitos reservados