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

• Apostila em PDF: Fazer download

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]