Engenhos 2020: Separando o programa Javascript do código HTML

Nossos programas estão começando a ficar maiores. Existe uma forma de separar a parte com o programa em Javascript do código HTML. Isto ajuda a legibilidade, e divide as funções de cada parte: O código HTML trata da aparência da página na tela, e o programa em Javascript define o comportamento do aplicativo.

Desta vez, você vai criar dois arquivos. Pode ser conveniente usar o mesmo nome, mudando apenas a extensão do programa para .js. Isto ajuda o editor especializado e outros aplicativos a entender que é um arquivo Javascript. No arquivo HTML, no elemento <script>, você vai usar o formato abaixo:

<script src="nome do arquivo Javascript" defer="true"></script>

Veja como vai ficar o seu programa:

Arquivo mercado.html

<!DOCTYPE HTML>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <title>Mercado - Lista de Produtos</title>
    <meta name="author" content="Joao Vianna - jvianna@gmail.com" />
    <meta name="created" content="2022-07-01" />
    <meta name="description" content="Auxílio a caixa de mercado" />
  </head>
  <body>
    <p><b>Preços de Produtos</b></p>
    <p>
      <label for="tx-comprimento">Nome do produto: </label>
      <input type="text" name="produto" id="tx-produto" />
    </p>
    <p><button type="button" onclick="mostrarProduto()">Calcular preço do produto</button></p>
    <p><button type="button" onclick="listarProdutos()">Listar Produtos</button></p>
    <p></p>
    <p id="resultado"> </p>
    <script src="mercado.js" defer="true"></script>
    <noscript>Esse aplicativo só funciona com JavaScript ativado.</noscript>
  </body>
</html>

Apareceu também um elemento <noscript> no código HTML. Ele causa a exibição de uma mensagem na tela no caso de o navegador não permitir a execução de código Javascript. Veja no arquivo Javascript abaixo (mercado.js) que aproveitamos para documentar melhor o código, e para criar uma função que converte valores fracionários em texto com o formato para valores monetários (com duas casas, e vírgula ao invés de ponto).

/* Programa mercado.js
 * Auxílio ao caixa do mercado - recupera o preço de um produto por nome.
 * Também gera a lista de preços de todos os produtos.
*/
'use strict';

// Componentes da Vista (ver .html)
const txtProduto =  document.getElementById('tx-produto');
const areaMensagem = document.getElementById('resultado');

/* Mapa de produtos
     A chave de acesso é o nome do produto, e o valor associado, o preço
*/
var produtos = new Map([
  ["abacaxi", 5.60],
  ["alho", 14.09],
  ["banana d'agua", 2.75],
  ["banana prata", 3.25],
  ["batata", 4.00],
  ["cebola", 5.20],
  ["cenoura", 5.50],
  ["laranja", 2.40]
]);
    
/* Transforma número fracionário em valor monetário,
   com duas casas decimais e vírgula no lugar de ponto.
   Parâmetros:
     valor:number - O valor a converter
   Retorna:
     string - O valor monetário correspondente
*/
function floatParaDinheiro(valor) {
  let valorMonetario = valor.toFixed(2);
  
  return valorMonetario.replace(".", ",");
}

// Mostra o preço de um produto
function mostrarProduto() {
  let produto = txtProduto.value.toLowerCase();
  
  if (produtos.has(produto)) {
    let preco = floatParaDinheiro(produtos.get(produto));
    
    areaMensagem.innerHTML = "Preço de " + produto + ": R$" + preco;
  } else {
    areaMensagem.innerHTML = "Não encontrei o preço de " + produto;
  }
}

// Mostra a lista de produtos
function listarProdutos() {
  let mensagem = "Preços dos produtos:<br />";
  let produto = "";
  let valor = 0;
  
  for ([produto, valor] of produtos) {
    mensagem = mensagem + produto + ": R$" +
               floatParaDinheiro(valor) + "<br />";
  }
  areaMensagem.innerHTML = mensagem;
}

Voltar ao Sumário (Javascript)

Engenhos 2020

Projeto Atual:

Programando Aplicativos com Javascript

14/07/2022

Separando o programa Javascript do código HTML

Nenhum comentário:

Postar um comentário