Exemplos de programas JavaScript integrados com HTML

Vamos criar alguns exemplos de programa para explorar o que foi abordado neste capítulo. Além da parte da integração com HTML, vamos utilizar as funções matemáticas e o operador módulo em diversos programas. Observe os exemplos de dados de entrada e saída de cada programa.

a) Elaborar um programa para uma Vídeo Locadora, que leia o título e a duração de um filme em minutos. Exiba o título do filme e converta a duração para horas e minutos, conforme destacado na Figura 2J.

Crie um novo arquivo (File/NewFile) e salve-o com o nome ex2_2.hthl (arquivo tipo HTML). Lembre-se do atalho ! Tab para criar a estrutura do documento. As tags <hl> … </hl> e <p> … </p> também podem ser criadas a partir de atalhos que simplificam a digitação desses comandos. Para o hl, digite hl e pressione Tab (ou Enter). Para o p, faça da mesma forma. Todas as tags HTML com abertura e fechamento podem ser criadas a partir do uso desse padrão de atalho. As demais tags podem ser criadas a partir da digitação das letras iniciais e pela seleção do complemento correspondente, conforme ilustra a Figura 2.8. Para finalizar a seleção de um comando, pressione Tab (ou Enter).

IMAGEM

Exemplo 2.2 – Código HTML do programa Vídeo Locadora (ex2_2.html)

«IDOCTYPE htnl>

chtml lang="pt-br">

<head>

<neta charset="UTF-8">

<neta nane="viewport" content="wi.dth=device-width, initial-scale=1.0">

<neta http-equiv=''X-UA-ConpatibLe" content="ie=edge">

<title>Exenplo 2.2</title>

</head>

<body>

<hl>Vídeo Locadora 3S</hl>

<hr>

<p> Título do Filme:

<ínput type="text" id="inTitulo">

</p>

<p> Duração (min):

cinput type="text" id="inDuracao">

</P>

<P>

<input type="button" value="Converter em Horas e Minutos" id="btConverter">

</P>

<p id="outTitulo"x/p>

<p id="outResposta"></p>

<script src="js/ex2_2. js"x/script>

</body>

</html>

O código HTML contém as tags de definição da estrutura da página, dos campos de digitação dos dados do filme e dos parágrafos para a exibição da resposta, a ser posteriormente preenchida pelo programa JavaScript.

Programa JavaScript que converte a duração de um filme (js/ex2_2.js)

function converterDuracao() {

// cria referência aos elementos da página

var inTitulo = document.getElementById("inTitulo");

var inDuracao = document.getElementById("inDuracao");

var outTitulo = document.getElementById("outTitulo");

var outResposta = document.getElementById("outResposta")

// obtém conteúdos dos campos de entrada

var titulo = inTitulo.value;

var duracao = Number(inDuracao.value);

// arredonda para baixo o resultado da divisão

var horas = Math.floor(duracao / 60);

// obtém o resto da divisão entre os números

var minutos = duracao % 60;

// altera o conteúdo dos parágrafos de resposta outTitulo.textContent = titulo;

outResposta.textContent = horas + " hora(s) e " + ninutos + " ninuto(s)";

}

// cria una referência ao elenento btConverter (botão)

var btConverter = docunent.getElenentById("btConverter");

// registra un evento associado ao botão, para carregar una função btConverter.addEventListener("click", converterDuracao);

Para converter a duração em horas e minutos, foi utilizada a função Math.floor() e o operador módulo %. Como destacado neste capítulo, Math. floor arredonda um valor para baixo e % retorna o resto da divisão entre dois números. Eles são necessários nesse programa. Vamos usar os dados de entrada do exemplo: 108 / 60 resulta em 1.8; Math.floor(1.8) retorna 1, que é o número de horas do filme. Para obter os minutos, usamos 108 % 60, que resulta em 48, que são os minutos restantes da duração. Insira dados de outros filmes e observe os valores de retorno.

b) Elaborar um programa para uma revenda de veículos. O programa deve ler modelo e preço do veículo. Apresentar como resposta o valor da entrada (50%) e o saldo em 12x. A Figura 2.9 ilustra uma execução desse programa.

IMAGEM

Exemplo 2.3 – Código HTML do programa Revenda de Veículos (ex2_3.html)

clDOCTYPE htnl>

<htnl lang="pt-br">

<head>

<neta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv=''X-UA-Compatible" content="ie=edge">

<title>Exemplo 2.3</title>

</head>

<body>

<hl>Revenda de Veículos 35</hl>

<p> Veículo:

cínput type="text" íd="ínVeículo"></p>

<p> Preço R$:

<ínput type="text" íd="ínPreco"></p>

<p> <ínput type="button" value="Ver Promoção" id="btVerPromocao"x/p>

<h3 íd="outVeículo"></h3>

<h3 id="outEntrada"x/h3>

<h3 íd="outParcela"x/h3>

<scrípt src="js/ex2_3.js"x/scrípt>

</body>

</html>

O código HTML segue o padrão do exemplo anterior. Ele deve conter os ids dos elementos que serão referenciados pelo programa JavaScript vinculado a esse documento a partir da tag <scrípt src.. .>.

Código JavaScript do programa Revenda de Veículos (js/ex2_3.js)

functíon mostrarPromocao() {

// cria referência aos elementos manipulados pelo programa

var inVeiculo = docunent.getElementById("inVeiculo");

var inPreco = docunent.getElenentById("inPreco");

var outVeiculo = document.getElementById("outVeiculo");

var outEntrada = document.getElementById("outEntrada");

var outParcela = docunent.getElementById("outParcela");

// obtém conteúdo dos campos de entrada

var veiculo = inVeiculo.value;

var preço = Number(inPreco.value);

// calcula valor da entrada e das parcelas

var entrada = preço * 0.50;

var parcela = (preco * 0.50) / 12;

// altera o conteúdo dos parágrafos de resposta

outVeiculo.textContent = "Promoção: " + veiculo;

outEntrada.textContent = "Entrada de R$: " + entrada.toFixed(2);

outParcela.textContent = "+ 12x de R$: " + parcela.toFixed(2);

}

// cria uma referência ao elemento btVerPronocao (botão)

var btVerPronocao = document.getElementById("btVerPromocao");

// registra um evento associado ao botão, para carregar uma função btVerPromocao.addEventListener("click”, mostrarPromocao);

Os cálculos para obter o valor da entrada e das parcelas podem ser feitos de várias maneiras. Considerando que a entrada é 50%, poderiamos também dividir preço por 2. Para o cálculo das parcelas, também poderiamos utilizar a própria variável entrada e dividir por 12.

O programa inicia pela criação das variáveis associadas aos elementos da página. Na sequência, obtêm-se os conteúdos digitados nos campos de formulário da página HTML. Em seguida, é realizado o cálculo dos valores a serem apresentados como resposta. E, no final da function, são apresentadas as informações nos respectivos elementos de saída da página HTML. A propriedade textContent recebe os dados a serem exibidos.

Observe que os programas seguem um padrão. Os exemplos HTML devem conter as tags básicas de estruturação da página e do conteúdo a ser exibido. Os programas JavaScript iniciam pela declaração da função. Nesta ocorrem as etapas destacadas no capítulo anterior: entrada, processamento e saída. E, por fim, a forma de referenciar o botão identificado na página e registrar um evento associado a esse botão.

c) Elaborar um programa para um restaurante que leia o preço por kge o consumo (em gramas) de um cliente. Exiba o valor a ser pago, conforme ilustra a Figura 2.10.

IMAGEM

Exemplo 2.4 – Código HTML do programa Revenda de Veículos (ex2_4.html)

<!DOCTYPE html>

<html lang="pt-br">

<head>

<neta charset="UTF-8">

<neta name="viewport" content="width=device-width, initial-scale=1.0">

<neta http-equtv="X-UA-Conpatible" content="ie=edge">

<title>Exemplo 2.4</title>

</head>

<body>

<hl>Restaurante 3S</hl>

<p>Buffet por Quilo R$:

<input type="text" id="inQuilo">

</p>

<p>Consuno do Cliente (gr):

<input type="text" id="inConsumo">

</p>

<p>

<input type="button" value="Calcular Preço" id="btCalcular">

</p>

<h3 id="outValor"></h3>

<script src="js/ex2_4.js"></script>

</body>

</html>

Observe que o código HTML modifica pouco em relação aos exemplos anteriores. O arquivo contendo o código JavaScript para implementar o cálculo e a exibição do valor a ser pago pelo cliente é exibido no programa a seguir.

Código JavaScript do programa Restaurante JS (js/ex2_4.js)

function calcularPreco() {

// cria referência aos elementos da página

var inQuilo = document.getElementById("inQuilo");

var inConsumo = document.getElementById("inConsumo");

var outValor = document.getElepientById("outValor")

// obtém conteúdo dos canpos de entrada

var quilo = Nunber(inQuilo.value);

var consumo = Nunber(inConsuno.value);

// calcula valor a ser pago

var valor = (quilo / 1000) * consumo;

// altera o conteúdo da linha de resposta

outValor.textContent = "Valor a pagar R$: " + valor.toFixed(2);

}

// cria referência ao elemento btCalcular

var btCalcular - document.getElementById("btCalcular");

// registra um evento associado ao botão, para carregar uma função btCalcular.addEventListener("click", calcularPreco);

A função JavaScript inicia pela referência aos elementos da página. Após, obtêm-se os valores informados nos campos inQuilo e inConsumo. Como os valores estão em grandezas diferentes (quilo e gramas), é necessário converter quilo para gramas (quilo/1000). Esse valor é então multiplicado pelo consumo do cliente. O próximo passo é apresentar o valor a ser pago pelo cliente. Observe a ocorrência das etapas de entrada (obtenção do preço do quilo e consumo do cliente), processamento (cálculo do valor) e saída (exibição do valor a pagar), discutidas no Capítulo 1. Elas também estarão presentes nos exercícios propostos a seguir.

Exemplos de programas JavaScript integrados com HTML

MAPA DO SITE

Contato

Mapa do Site