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

IF ELSE dentro de IF ELSE - Aninhamento

Neste tutorial de nosso Curso de JavaScript, vamos continuar nos aprofundando no estudo dos testes condicionais IF e ELSE, pois são a base da programação. Agora, vamos aprender como aninhar eles, ou seja, colocar um teste dentro de outro e ver a utilidade disto.

Você vai notar que nossos scripts vão ficar cada vez mais realistas e poderosos, nos permitindo programar coisas incríveis.

Tutorial anterior: IF e ELSE em JavaScript - O que é e Como usar

Usando Vários IF e ELSE em JavaScript

"Você foi contratado pelo governo para criar um script das eleições. Seu programa deve ter as seguintes características:

  • Perguntar a idade do usuário
  • Se for menor de 16 anos, avisar que não pode votar
  • Se tiver 16 ou 17, avisar que o voto é facultativo
  • Se tiver mais de 65, avisar que também é facultativo o voto
  • De 18 até 65, é obrigatório votar
Utilize a linguagem de programação JavaScript."


Ok, vamos lá.
Vamos precisar fazer mais de um teste para fazer nosso script.

Primeiro, no HTML. Vamos criar um botão do tipo numérico e de nome (ID) idade:
<input id="idade" type="number">

E um botão que chama a função votar() do JavaScript:
<button onclick="votar()">Ok</button> <br />


Suave na nave? Agora vamos começar a programar.
Primeiro, vamos pegar o que o usuário digitou no formulário "idade".
Como tudo que alguém digita é string, vamos passar pra inteiro via parseInt e guardar na variável idade:
var idade = parseInt(document.getElementById("idade").value);

Prontinho, agora temos um número inteiro.
Vamos testar se é menor que 16, se for já avisa logo que não pode votar:
if (idade < 16)
    alert("Voce ainda nao pode votar");

Próximo passo de nosso script, vamos colocar outro teste, acima de 65, avisando que só vota se quiser:
if (idade > 65)
    alert("Seu voto eh facultativo);

Agora é que o bicho pega...agora precisamos testar se tem menos de 18 e 16 ou mais, para dizer que é facultativo e também testar quem tem de 18 até 65 pra dizer que é obrigatório.

Que tal um:
if (idade > 18)
    alert("Voce eh obrigado a votar");
?

Mas aí quem digitar 66 vai receber duas mensagens:
Seu voto é facultativo
Voce eh obrigado a votar

Pois vai cair nos dois IF...e agora, José ?



IF e ELSE aninhados

A solução é simples: colocar um IF dentro do outro ou dentro de um ELSE.
Vamos lá, devagar, acompanhar a lógica.

O primeiro IF continua ok. Testamos se a idade da pessoa é menor que 16.
Se for, acaba o script, ela não pode votar e ponto final.

Porém, agora vamos usar um else:
if (idade < 16){
    alert("Voce ainda nao pode votar");
}
else{ // algum codigo aqui }
O segredo agora é: vamos colocar mais testes dentro desse else.
Uma coisas sabemos: se foi pro else, é porque tem 16 anos ou mais, concorda?

Já sabemos que a idade é 16 ou mais. Agora, dentro do else, vamos testar se a idade é menor que 18.
Se for, é porque ele tem 16 ou mais e menos que 18, sendo seu voto facultativo:

if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
}
Olha que belezura...um if dentro de um else.
Vamos colocar agora mais um else...é o else deste novo if:
if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
     else{
        // codigo caso a idade seja 18 ou mais
     }
}

Lembre-se: cada else pertence somente a um if.
Esse segundo else só funciona se a idade digitada for 18 anos ou mais.

Porém, temos que tratar dois casos ali dentro:
Se for 18 ou mais, porém com 65 anos ou mais
Se for 18 ou mais, porém com menos que 65 anos

A solução?
Simples, vamos colocar mais um par de if else ali dentro desse segundo else:

if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
     else{
         if(idade > 65){
            alert("Seu voto eh facultativo");
         }
         else{
             alert("Seu voto eh obrigatorio");
      }
     }
}
Prontinho. Script pronto.
Recapitulando:
  • Se for menor que 16 a idade? Cai no primeiro if e acabou o script, não pode votar
  • Se for 16 ou mais? Ai vai pro else
  • Dentro desse else, testamos se é menor que 18...se for, tem 16 ou mais e menos que 18, logo é facultativo
  • Se tem 18 ou mais, vai pra um novo else
  • Dentro desse novo else, testamos se tem mais de 65, se sim, voto é facultativo
  • Se não tiver mais de 65, é porque tem 18 anos ou mais e 65 anos ou menos, logo o voto é obrigatório

Bacana, não?
Teste:

Qual sua idade:



IF ELSE aninhados e Indentados

Note uma coisa em nosso script: os IF e ELSE estão organizados e alinhados, isso se chama indentação.

Um par de if e else deve ficar sempre alinhado verticalmente, na mesma coluna.
Caso precise aninhar mais algum teste dentro de outro teste, dê um espaçamento e coloque esses novos testes 'dentro' dos antigos, para ficar uma estrutura organizada e clara de se entender.

if (condição1)      // Primeiro IF
   if (condição2)   // Segundo IF, dentro do primeiro IF
      [codigo];
   else             // ELSE é do segundo IF
       [codigo];

else                // ELSE do primeiro IF
    if (condição3)  // IF dentro do primeiro ELSE
       [codigo]
    else           // ELSE do terceiro IF, dentro do primeiro ELSE
        [codigo]


6 comentários:

  1. Show de bola mas qual é a desses "eh"??? Cuidado com isso aí. As vezes nos ligamos muito no modo de escrita das rede sociais e acabamos levando pra vida.

    ResponderExcluir
    Respostas
    1. Tem quantos anos ? 90 ???

      Excluir
    2. Tenta colocar 'é' pra ver o que acontece, dá erro em vários browsers, pois tem acento. E tão coloquial quanto 'eh' é dizer 'qual é a desses'. E mesmo se fosse proposital, qual seria o problema ?

      Excluir
    3. Toooooooooma Distraído. Muito bom man. Excelente conteúdo, didática e iniciativa. Show!!!

      Excluir
  2. muito esclarecedora essa explicação, amei tirou todas minhas duvidas

    ResponderExcluir