Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

IF e ELSE em JavaScript - O que é, Como Usar, Para que serve e Exemplos de Código

Nesta aula de nossa Apostila de JavaScript online, vamos aprender o que é a instrução if else, para que serve, onde é usada, como usar e ver exemplos de código JS comentado.

Este tutorial é uma continuação de nosso curso, principalmente do tutorial anterior:
IF - O Teste Condicional do JavaScript



IF e ELSE em JavaScript - Como Usar

A sintaxe do uso das instruções if e else é a seguinte:

if (teste){
    código caso o teste seja verdadeiro ;
}else{
    código caso o teste seja falso ;
}

A lógica do IF continua a mesma, o que muda é o else, que vem sempre depois do if (e nunca sozinho).
Vamos lá, entender o que se passa:

  1. Comando if é introduzido
  2. Um teste condicional é realizado (geralmente usando operadores de comparação)
  3. Caso o teste retorne true (verdade) o código que vem ao if é executado
  4. Caso o teste retorne false (falso), o código que vem depois do else que é executado

O que é e Para que serve o IF e ELSE em JavaScript

No tutorial anterior, quando aprendemos a usar a instrução if, vimos que o código dentro dela só executava se o teste fosse verdadeiro, caso fosse falso, o código ficava inutilizado, o JS simplesmente pulava ele.

Com a instrução else, isso não ocorre mais.
Agora ou acontece uma coisa ou acontece outra.
Um dos códigos sempre é executado.

Se parar para pensar, é isso que acontece o tempo inteiro quando usamos qualquer software ou sistema. Quando digita sua senha e tenta fazer login, ou ela tá certa ou tá errada, ou seja, é ou é true ou é false.



Ou você clica em um link, ou não clica.
Ou fecha a página ou não fecha.
Ou aperta um botão ou não.

Não é a toa que em computação, o sistema mais importante é o binário.
É 1 ou 0, verdade ou falso...essa também a base de todos os testes condicionais.

Mas vamos deixar de falar e mostrar exemplos reais de código!

Exemplos de código de IF e ELSE em JS

  • Exemplo de código 1:

No exemplo abaixo, o IF será sempre executado, afinal, o teste sempre dará verdadeiro:
if (true){
 alert("JavaScript eh a melhor linguagem de programacao");
}else{
 alert("Odeio JavaScript");
}


Já no código abaixo, o IF nunca será executado, pois o teste retorna falso. Logo, o else é sempre executado:
if (false){
 alert("Eu adoro ouvir Pablo Vittar");
}else{
 alert("Adoro ouvir Iron Maiden");
}


Somente programadores JavaScript podem ver o que está dentro do primeiro ELSE do segundo IF.

  • Exemplo de código 2:

Vamos criar um login básico e simples?
Primeiro, vamos criar nosso campo de input (do tipo senha, password) e o botão de entrar.

Quando a pessoa clicar no botão "Entrar", vai ser chamada a função login() de nosso código JavaScript.

Dentro desse script,  definimos a nossa senha:
var senha="2112"

Em seguida, a função login(), que captura o que o usuário digitou na caixa de input e armazena na variável tentativa.

Por fim, usamos o teste condicional IF ELSE para verificar se a senha digita está correta.
Fazemos o teste:
senha == tentativa

Se o resultado for positivo, a pessoa digitou a senha corretamente, cai no IF que exibe uma mensagem de sucesso.

Se digitar qualquer coisa diferente da senha, cai no ELSE que avisa que não vai entrar no sistema.
Veja como ficou o código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite a senha:
   <input id="password" type="password">
   <button onclick="login()">Entrar</button> <br />

   <script type="text/javascript">
    var senha='2112';
    function login(){
     var tentativa = document.getElementById("password").value;

     if (tentativa == senha)
      alert("Senha correta, entrando no sistema...");
     else 
      alert("Senha incorreta, tente novamente");
    }
    
   </script>

 </head>
</html>

Veja como fica o resultado, teste:

Digite a senha:




  • Exemplo de código 3

"Faça um script que pergunte a idade ao usuário. Se tiver 65 anos ou mais, exiba uma mensagem dizendo que ele já pode se aposentar. Senão, o tempo que ele ainda tem que trabalhar para se aposentar".

Primeiro, criamos nosso formulário de input, do tipo numérico (number) e o botão de OK.
Ao clicar no botão (onclick), ele chama a função aposentar() do script.

Dentro do script, vai só a definição dessa função.
Inicialmente, ela pega o valor digitado pelo usuário (que é sempre uma string) e transformar em int (parseInt()), salvando esse resultado na variável idade.

Agora, pegamos essa variável e testamos se ela é maior ou igual a 65.
Se for, o teste retorna true, cai no IF e uma mensagem de parabéns é exibida.

Se for menor que 65, retorna false o teste e cai no ELSE.
O else exibe quantos anos a pessoa ainda tem que trabalho (65-idade).


Código JS:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Qual sua idade: 
   <input id="idade" type="number">
   <button onclick="aposentar()">Ok</button> <br />

   <script type="text/javascript">
    function aposentar(){
     var idade = parseInt(document.getElementById("idade").value);

     if (idade >= 65)
      alert("Parabens, voce ja pode se aposentar !");
     else 
      alert("Ainda falta " + (65-idade) +" ano(s) para se aposentar");
    }
    
   </script>

 </head>
</html>

Resultado:


Qual sua idade:


PS: no código acima só tem um detalhe, não usamos as chaves para delimitar o código dentro do IF nem do ELSE. Isso ocorreu por um motivo: quando o código for apenas uma linha, não é obrigatório usar chaves.

Um comentário: