Qual o maior número ? Exercício de IF ELSE em JavaScript

Neste tutorial, vamos resolver uma questão e comentar seu código, usando IF e ELSE:

Faça um script que peça ao usuário dois números e em seguida exiba o maior deles. Use JavaScript.

Tutorial anterior: IF e ELSE aninhados

Exibindo o Maior Número em JavaScript

Primeiro, vamos usar dois campos de formulário, de input, do tipo number, para receber os dois números que o usuário vai digitar.

Nosso código HTML:
Primeiro numero: <input id="num1" type="number"> <br />
Segundo numero :<input id="num2" type="number"> <br />

Depois, um botão escrito "Calcular maior", que ao ser clicado (atributo onclick) vai chamar a função maior() (declarada e definida em nosso script de JS):
<button onclick="maior()">Calcular maior</button>

Design da página feito, agora vamos para a parte da programação JavaScript em si.
Vamos lá fazer nossa função maior() .

Vamos declarar duas variáveis, numero1 e numero2, que vão pegar os valores inseridos no formulário num1 e num2.

Como esses dados vem no formato string, usamos a função parseFloat() pra transformar em float (tipo numérico decimal), fica assim:
var numero1 = parseFloat(document.getElementById("num1").value);
var numero2 = parseFloat(document.getElementById("num2").value);

Prontinho, agora temos duas variáveis do tipo float em mãos, a numero1 e a numero2.
Vamos aos testes!

Primeiro, vamos testar com IF se o primeiro número é maior que o segundo.
Se for, pronto, acabou...exibimos um alert dizendo isso e acabou.

Se o primeiro não for maior que o segundo, é porque o segundo é maior que o primeiro, correto?
Errado !!!

Pois os dois podem ser iguais! Precisamos fazer outro teste!
Então, dentro do else fazemos mais um if para verificar se o número 2 é maior que o primeiro, se for, aí sim, exibimos essa informação.

Por fim, fazemos o else desse segundo if que foi aninhado. Se o primeiro número não é maior que o segundo, nem o segundo número é maior que o primeiro, é porque eles são iguais!

Veja como ficou nosso código:
<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Primeiro numero: <input id="num1" type="number"> <br />
   Segundo numero :<input id="num2" type="number"> <br />
   <button onclick="maior()">Maior</button>

   <script type="text/javascript">
    function maior(){
     var numero1 = parseFloat(document.getElementById("num1").value);
     var numero2 = parseFloat(document.getElementById("num2").value);
     
     if (numero1 > numero2)
         alert(numero1 + " eh maior que " + numero2);
     else
         if(numero2 > numero1)
            alert(numero2 + " eh maior que " + numero1);
         else
            alert(numero1 + " eh igual a " + numero2);
    }
 </script>

 </head>
</html>

Como todas as instruções após IF e ELSE são comandos de apenas uma linha de código, não usamos chaves { }, pois não é necessário nesses casos.

Teste você mesmo o resultado:

Primeiro numero:
Segundo numero:



PS: Se quiser testar com números decimais, lembre-se de usar ponto . ao invés de vírgula ,

Nenhum comentário:

Postar um comentário