3.6 Exemplos
Vamos construir novos exemplos para discutir sobre a aplicação das condições em um programa? Começamos com um exemplo simples, que utiliza apenas o if (sem o else). Após, exemplos com if… else e também else if.
- a) Sabendo que o fuso horário da França em relação ao Brasil é de + 5 horas (no horário de verão na França), elaborar um programa que leia a hora no Brasil e informe a hora na França. A Figura 3.4 ilustra a tela com dados de entrada e saída do programa.
TABELA
Exemplo 3.4 – Código HTML do programa Fuso Horário (ex3_4.html)
<!DOCTYPE htnl> <htnl Lang="pt-br"> <head> «neta charset="UTF-8"> <neta nane="viewport" content="width=device-width, initial-scale=1.0"> <neta http-equiv="X-UA-Conpatible" content="ie=edge"> <Unk rel="stylesheet" href="css/estiios.css"> <title>Exenplo 3.4</title> </head> <body> <ing src="ing/ex3_4.jpg" alt="Globo Terrestre"> <hl>Prograna Fuso Horário</hl> <p>Hora no Brasil (h.n): cinput type="text" id="inHoraBrasil"> </p> <p> <input type="button" value=''Exibir Hora na França" id="btExibir"> </P> <h3 id=''outHoraFranca"></h3> <script src="js/ex3_4.js"></script> </body> </htnl>
Observe que na tag ing há o atributo alt. Ele está relacionado com questões de acessibilidade e deve ser utilizado para exibir um texto alternativo em navegadores não gráficos e em leitores de página para pessoas portadoras de necessidades especiais. Crie, na sequência, o programa JavaScript que vai calcular o horário na França, conforme o enunciado do exemplo.
Programa JavaScript do exemplo 3.4 (js/ex3_4.js)
functton calcularFuso() {
// cria una referência aos elenentos da página
var inHoraBrasil = docunent.getElenentById("inHoraBrasil");
var outHoraFranca = docunent.getElenentById("outHoraFranca");
// obtén e converte o conteúdo do canpo inHoraBrasil
var horaBrasil = Nunber(inHoraBrasil.value);
// se não preencheu ou Not-a-Nunber (NaN)
if (InHoraBrasil.value == "" || IsNaN(horaBrasil)) {
alert("Inforne a hora no Brasil corretanente"); // exibe alerta
inHoraBrasil.focus(); // posiciona en InHoraBrasil
return;
}
var horaFranca = horaBrasil + 5; // calcula o horário na França
// se passar das 24 horas na Franca ...
if (horaFranca > 24) {
horaFranca = horaFranca - 24; // ... subtrai 24
}
// exibe resposta (altera conteúdo do elemento outHoraFranca)
outHoraFranca.textContent = "Hora na França: " + horaFranca.toFixed(2);
}
// cria uma referência ao elemento btExibir e registra evento associado a function
var btExibir = document.getElementById("btExibir");
btExibir.addEventListener("click'', calcularFuso);
A function calcularFuso( ) segue o padrão de código do Exemplo 3.2. Novamente a function começa pela criação de variáveis que referenciam os elementos manipulados pelo programa. Após, obtém-se o conteúdo do campo inHoraBrasil, convertido para número. Caso o usuário não tenha informado a hora no Brasil ou digite um valor inválido, uma mensagem de advertência é exibida, o programa joga o foco no campo inHoraBrasil e retorna à página.
O próximo passo é calcular o horário na França. Para isso, adicionamos 5 ao horário do Brasil. Esse cálculo fica correto para a maioria dos horários. Contudo, caso no Brasil sejam 20 horas, por exemplo, o programa não pode informar que na França são 25 horas. Então, caso o horário da França ultrapasse as 24 horas, significa que já é o próximo dia e deve-se subtrair 24 desse valor obtido. Após a condição, o valor da variável horaFranca é atribuído à propriedade textContent, junto com um texto inicial, de modo a exibir o valor calculado.
b) Elaborar um programa que leia um número e calcule sua raiz quadrada. Caso a raiz seja exata (quadrados perfeitos), informá-la, caso contrário, informe: ‘Não há raiz exata para A Figura5 ilustra uma execução desse programa.
TABELA
Exemplo 3.5 – Programa Raiz Quadrada – código HTML (ex3_5.html)
dDOCTYPE html> chtnl lang="pt-br"> <head> «neta charset="UTF-8"> «neta nane="viewport" content="width=device-width, initial-scale=1.0"> «neta http-equiv="X-UA-Conpatible" content="ie=edge"> «link rel="stylesheet" href="css/estUos.css"> <title>Exenplo 3.5</title> </head> <body> <ing src="ing/ex3_5.jpg" alt="Raiz Quadrada"> <hl>Prograna Raiz Quadrada</hl> <p>Núnero: cinput type="text" id="inNunero"> </p> <p> cinput type="button" value="Exibir Raiz Quadrada" id="btExibir"> </p> <h3 id="outResposta"></h3> «script src="js/ex3_5. js"x/script> </body> «/htnl>
Programa Raiz Quadrada – código JavaScript (js/ex3_5.js)
function calcularRaiz() {
// cria una referência aos elenentos da página
var inNunero = docunent.getElenentById("inNunero");
var outResposta = docunent.getElenentById("outResposta");
var nunero = Nunber(inNunero.value); // obtén conteúdo do canpo inNunero
// se nâo preencheu ou Not-a-Nunber (NaN)
if (nunero == 0 11 isNaN(nunero)) {
aLert("Inforne un nunero válido..."); // exibe alerta
inNunero.focus(); // posiciona no canpo inNunero
return; // retorna
}
var raiz = Math.sqrt(nunero); // calcula raiz quadrada do núnero
// se valor da variável raiz igual a este valor arredondado para baixo...
if (raiz == Math.floor(raiz)) {
outResposta.textContent = "Raiz: " + raiz; // mostra a raiz
} else {
// senão, exibe mensagem indicando que não há raiz exata
outResposta.textContent = "Não há raiz exata para " + numero;
}
}
// cria referência ao elemento btExibir e registra evento que irá carregar function var btExibir = document.getElementById(''btExibir");
btExibir.addEventListener("click", calcularRaiz);
No programa ex3_5.js, é realizada a captura dos elementos e a validação dos dados já discutida nos exemplos anteriores. Em seguida, realiza-se o cálculo da raiz quadrada a partir da função Math.sqrt( ). Agora há duas possibilidades. O cálculo vai retornar um número com decimais ou sem decimais. Por exemplo, a raiz de 16 é 4.0, já a raiz de 15 é 3.872983…
Para verificar se os números não têm decimais, podemos submetê-lo à função Math.floor( ), que arredonda o valor para baixo, ou seja, remove as decimais do número. Se a raiz for igual à aplicação da Math.floor( ) sobre a raiz, significa que não há decimais, pois 4.0 é igual a Math.floor(4.0), por exemplo. Já 3.872983… é diferente de Math.floor(3.872983..) – que retorna 3.0. Há outras formas de solucionar esse exercício. Por exemplo, o teste condicional do if ( ) poderia ser substituído pelo comando exibido a seguir:
if (raiz % 1 == 0) { ... }
Pois, seguindo no exemplo da raiz de 16, 4.0 % 1 retorna 0. Já a raiz de 15, que é 3.872983…% 1, retorna 0.872983… A regra vale para os demais números que podem ser informados pelo usuário.
c) Em um determinado momento do dia, apenas notas de 10,50 e 100 estão disponíveis em um terminal de caixa eletrônico. Elaborar um programa que leia um valor de saque de um cliente, verifique sua validade (ou seja, se pode ser pago com as notas disponíveis) e informe o número mínimo de notas de 100, 50 e 10 necessárias para pagar esse saque. A Figura 3.6 exemplifica uma execução do programa.
TABELA
Exemplo 3.6 – Programa Caixa Eletrônico – código HTML (ex3_6.html)
dDOCTYPE htnl> chtnfl lang="pt-br"> <head> <neta charset="UTF-8"> <neta nane=''viewport" content="width=device-width, initial-scale=1.0"> <neta http-equiv="X-UA-Coripatible" content="ie=edge"> <link rel="stylesheet" href="css/estilos.css"> <title>Exenplo 3.6</title> </head> <body> <ing src="ing/ex3_6.jpg" ait="Caixa Eletrôntco"> <hl>Prograna Caixa Eletrònico</hl> <p>Vaior do Saque R$: cinput type="text" id="inSaque"> </p> <p> <input type-'button" vaLue="Exibir Notas para Saque" id="btExibir"> </p> <h3 id="outNotasCen"></h3> <h3 id="outNotasCinquenta"></h3> <h3 id="outNotasDez"></h3> <script src="js/ex3_6.js"x/script> </body> </htnl>
Observe que, no código HTML do Exemplo 3.6, foram inseridas três linhas h3 para a exibição das respostas. Ou seja, o número de notas de 100,50 e 10 reais será exibido nesses locais da página. Crie agora o arquivo ex3_6.js, na pasta js, para validar e apresentar o número de notas necessárias para pagar o valor solicitado.
Programa Caixa Eletrônico – código JavaScript (js/ex3_6.js)
function calcularNotas() {
// cria una referência aos elenentos da página
var inSaque = docunent.getElenentBy!d("inSaque");
var outNotasCen = docunent.getElenentBy!d("outNotasCen");
var outNotasCinquenta = docunent.getElenentBy!d("outNotasCinquenta");
var outNotasDez = docunent.getElenentById("outNotasDez");
// Linpa nensagens (caso, segunda execução)
outNotasCen.textContent =
outNotasCinquenta.textContent =
outNotasDez.textContent =
var saque = Nunber(inSaque.value); // converte conteúdo do canpo inSaque
// se não preencheu ou Not-a-Nunber (NaN)
if (saque == 0 || isNaN(saque)) {
alert("Inforne o valor do saque corretanente"); // exibe alerta inSaque.focus(); // posiciona en inSaque
return;
}
// verifica se saque não é núltiplo de 10
if (saque % 10 != 0) {
alert("Valor inválido para notas disponíveis (R$ 10, 50, 100)");
inSaque.focus();
return;
}
// calcula notas de 100, 50 e 10
var notasCen = Math.floor(saque / 100);
var resto = saque % 100;
var notasCinquenta = Math.fioor(resto / 50);
resto = resto % 50;
var notasDez = Math.floor(resto / 10);
// exibe as notas apenas se houver
if (notasCen > 0) {
outNotasCen.textContent = "Notas de R$ 100: " + notasCen;
}
if (notasCinquenta > 0) {
outNotasCinquenta.textContent = "Notas de R$ 50: " + notasCinquenta;
}
if (notasDez > 0) {
outNotasDez.textContent = "Notas de R$ 10: " + notasDez;
}
}
// cria referência ao elenento btExibir e associa function ao evento click
var btExibir = docunent.getEtenentById("btExibir");
btExibir.addEventListener("click", calcularNotas);
Nesse exemplo, recorremos novamente ao operador módulo (%). A partir dele é possível verificar se o valor solicitado para o saque pode ser pago com as notas disponíveis. Se o valor solicitado não for múltiplo de 10, o resto da divisão do valor por 10 vai produzir um valor diferente de zero, e a mensagem de advertência será exibida.
A realização de testes de validação contendo o comando return são uma forma de evitar a criação de diversos comandos else no programa. Assim, caso algum campo apresente um erro de validação, a mensagem é exibida e o programa retorna à página. Após as validações, a programação da função é realizada sem os possíveis problemas que dados inválidos poderíam causar, como uma divisão por zero.
Para calcular o número mínimo de notas de 100,50 e 10 necessárias para pagar um saque, começamos pelo cálculo do número de notas de 100. Utilizamos a função Math.floor( ) para arredondar para baixo o resultado da divisão do valor solicitado por 100. Imagine alguns valores: 490/100 => 4.9, com Math.floor( ) resulta 4; 1240/100 => 12.4, com Math.floor( ) resulta 12.
O próximo passo é obter o valor que ainda não foi pago com as notas de 100. Para isso, podemos utilizar o operador módulo (%) outra vez. Com os valores exemplificados no parágrafo anterior: 490 % 100, resulta 90; 1240 % 100, resulta 40. Ou seja, os valores que precisam ser pagos com as notas de 50 e 10. E o processo para o cálculo das notas de 100 e para o cálculo do resto é então aplicado novamente para as notas de 50 e 10. Aliás, ele poderia ser empregado para outras notas (20 ou 5, por exemplo), caso necessário.
Mas por que foi criada uma condição antes de exibir cada número de notas? Apenas para evitar que as mensagens com o número de notas com zero seja exibida. Por exemplo, se alguém quiser sacar R$ 50,00, não fica bem o programa apresentar Notas de 100: 0 e Notas de 10: 0. Ele apenas deve apresentar as saídas com o número de notas se houver notas do valor exibido.
