Requisitos para estar aqui:
- Ter explorado o conteúdo introdutório sobre Estrutura de Decisão!
- Caso não tenha feito, CLIQUE AQUI.
Nem todo if tem um else, mas todo if é baseado em uma condição. Dizemos para um programa que, baseando-se em uma condição, ele deve executar uma ação, que contempla uma ou mais instruções que são programadas para serem processadas.
Um exemplo básico de if é o seguinte:
if (condição) {
// instruções que serão executadas caso a condição seja verdadeira
}Para que o if funcione corretamente, é necessário que a condição seja verdadeira, ou seja, que o resultado da condição seja true. Caso a condição seja falsa, ou seja, o resultado da condição seja false, o programa não executará as instruções que estão dentro do bloco do if.
Para que o programa execute uma ação caso a condição seja falsa, utilizamos o else.
if (condição) {
// instruções que serão executadas caso a condição seja verdadeira
} else {
// instruções que serão executadas caso a condição seja falsa
}Para que possamos entender o que são condições verdadeiras e falsas, precisamos entender o que são valores booleanos. Os valores booleanos são um dos tipos de dados que foram abordados no início da disciplina de Programação I.
Booleano: é um tipo de dado que pode assumir apenas dois valores: true ou false.
String: é um tipo de dado que representa um conjunto de caracteres.
Number: é um tipo de dado que representa números, sejam eles inteiros ou decimais.
Agora que relembramos os tipos de dados, vamos falar sobre os operadores relacionais. Eles serão essenciais para que possamos entender o que são condições verdadeiras e falsas.
Os operadores relacionais nos acompanharão durante todo o aprendizado de programação, pois eles são utilizados para comparar valores e, a partir dessa comparação, obter um resultado booleano, ou seja, true ou false.
A Tabela abaixo contempla os Operadores Relacionais utilizados em JavaScript.
| Operador | Símbolo | Significado |
|---|---|---|
| == | Igual a | Retorna verdadeiro (true) caso os dados contenham o mesmo conteúdo |
| === | Estritamente igual a | Retorna verdadeiro (true) caso os dados contenham o mesmo conteúdo e sejam do mesmo tipo |
| != | Diferente de | Retorna verdadeiro (true) caso os dados não contenham o mesmo conteúdo |
| !== | Estritamente diferente de | Retorna verdadeiro (true) caso os dados não contenham o mesmo conteúdo ou sejam de tipos diferentes |
| > | Maior que | Retorna verdadeiro (true) caso o dado da esquerda seja maior que o dado da direita |
| >= | Maior ou igual a | Retorna verdadeiro (true) caso o dado da esquerda seja maior ou igual ao dado da direita |
| < | Menor que | Retorna verdadeiro (true) caso o dado da esquerda seja menor que o dado da direita |
| <= | Menor ou igual a | Retorna verdadeiro (true) caso o dado da esquerda seja menor ou igual ao dado da direita |
A Tabela acima está disponível também via imagem, clicando aqui.
Agora que já foram apresentados os Operadores Relacionais utilizados em JavaScript, atentem-se aos dois exemplos apresentados na sequência.
Desenvolva um programa que peça para o usuário informar a sua idade e retorne se o usuário já atingiu a maioridade ou não.
O código fonte deste programa pode ser acessado clicando aqui.
<script>
const idade = prompt("Informe a sua idade: ");
if (idade >= 18) {
alert("Você já atingiu a maioridade!");
} else {
alert("Você ainda não atingiu a maioridade!");
}
</script>Desenvolva um programa que peça para o usuário informar o valor que deseja sacar e retorne se o valor é maior que o saldo disponível na conta. Considere que o valor disponível em conta seja R$ 500,00.
O código fonte deste programa pode ser acessado clicando aqui.
<script>
const saldo = 500;
const valorSaque = prompt("Informe o valor que deseja sacar: ");
if (valorSaque > saldo) {
alert("Saldo insuficiente!");
} else {
alert("Saque realizado com sucesso!");
}
</script>Nestes exemplos acima haviam apenas duas possibilidades de resultado. Mas e se houvessem mais possibilidades? Como poderíamos tratar isso?
Para isso, utilizamos o else if, que também podemos chamar de if else aninhado, pois aninha/agrupa todas as possibilidades de resultado em uma estrutura de decisão. Ou seja, se a primeira condição for falsa, o programa verifica a próxima condição, e assim sucessivamente até que uma condição seja verdadeira ou até que não hajam mais condições para serem verificadas.
if (condição) {
// instruções que serão executadas caso a condição seja verdadeira
} else if (condição) {
// instruções que serão executadas caso a condição seja verdadeira
} else {
// instruções que serão executadas caso a condição seja falsa
}Vamos então adicionar complexidade ao nosso exemplo do programa desenvolvido para identificar se o usuário atingiu a maioridade ou não. Consideremos validar se:
- Ainda não atingiu a maioridade
- Já atingiu a maioridade
- Já chegou na terceira idade
Desenvolva um programa que peça para o usuário informar a sua idade e retorne se o usuário já atingiu a maioridade ou não ou talvez já tenha chego na terceira idade.
O código fonte deste programa pode ser acessado clicando aqui.
<script>
const idade = prompt("Informe a sua idade: ");
if (idade < 18) {
alert("Você ainda não atingiu a maioridade!");
} else if (idade < 60) {
alert("Você já atingiu a maioridade!");
} else {
alert("Você já está na terceira idade!");
}
</script>Note que no exemplo acima, a primeira condição verifica se a idade é menor que 18, ou seja, se o usuário ainda não atingiu a maioridade. Caso a idade seja menor que 18, o programa não verifica as demais condições, pois já sabe que o usuário ainda não atingiu a maioridade.
Na segunda possibilidade, o programa analisa se a idade é menor que 60, ou seja, se o usuário já atingiu a maioridade. Caso a idade seja menor que 60, o programa não verifica a última condição, pois já sabe que o usuário já atingiu a maioridade. Não é necessário, na segunda possibilidade - else if (idade < 60) - também validar se a idade é maior que 18, pois esta condição só será validada se a primeira condição for falsa, ou seja, se a idade do usuário não for menor que 18. Caso a idade seja inferior a 18 anos, o programa não verifica a próxima condição e já finaliza a estrutura de decisão, pois encontrou uma condição verdadeira.
Na terceira possibilidade, o programa analisa se a idade é maior ou igual a 60, ou seja, se o usuário já chegou na terceira idade. Esta validação será feita apenas se as condições anteriores não forem verdadeiras, ou seja, se a idade do usuário não for menor que 18 e se a idade do usuário não for menor que 60. Caso alguma das condições anteriores seja verdadeira, o programa não verifica a última condição, pois já sabe que o usuário ainda não chegou na terceira idade.
Vale ressaltar que o if...else aninhado serve para analisar diversas possibilidades de resultado. A quantidade de else if que podemos utilizar é ilimitada, mas é importante que o programador tenha em mente que, quanto mais else if forem utilizados, mais complexo o programa ficará, e isso pode dificultar a manutenção do código.
Entretanto, para reforçar o aprendizado, vamos adicionar mais algumas possibilidades de resultado ao nosso exemplo.
Desenvolva um programa que peça para o usuário informar a idade e retorne a categoria de idade correspondente. As categorias são:
- Bebê: de 0 a 2 anos
- Criança: de 2 a 11 anos
- Adolescente: de 11 a 18 anos
- Adulto: de 18 a 60 anos
- Idoso: acima de 60 anos
O código fonte deste programa pode ser acessado clicando aqui.
<script>
const idade = prompt("Informe a sua idade: ");
if (idade < 2) {
alert("Bebê!");
} else if (idade < 11) {
alert("Criança!");
} else if (idade < 18) {
alert("Adolescente!");
} else if (idade < 60) {
alert("Adulto!");
} else {
alert("Idoso!");
}
</script>Note que, neste exemplo, a primeira condição verifica se a idade é menor que 2, ou seja, se o usuário é um bebê. Caso a idade seja menor que 2, o programa não verifica as demais condições, pois já sabe que o usuário é um bebê.
A segunda condição verificará se a idade é menor que 11, ou seja, se o usuário é uma criança. Caso a idade seja menor que 11, o programa não verifica as demais condições, pois já sabe que o usuário é uma criança. Não é necessário, na segunda condição - else if (idade < 11) - também validar se a idade é maior que 2, pois esta condição só será validada se a primeira condição for falsa, ou seja, se a idade do usuário não for menor que 2.
As mesmas regras são aplicadas para validar se a idade é menor que 18 - else if (idade < 18) - e se a idade é menor que 60 - else if (idade < 60).
A última condição - else - será validada apenas se as condições anteriores não forem verdadeiras, ou seja, se a idade do usuário não for menor que 2, se a idade do usuário não for menor que 11, se a idade do usuário não for menor que 18 e se a idade do usuário não for menor que 60. Caso alguma das condições anteriores seja verdadeira, o programa não verifica a última condição, pois já sabe que o usuário não é um bebê, não é uma criança, não é um adolescente e não é um adulto.
Finalizando a introdução sobre if...else e if...else if...else, segue abaixo mais um exemplo de programa que utiliza esta estrutura de decisão.
Desenvolva um programa que peça para o usuário informar se está chovendo ou não ou, ainda, se há possibilidade de chuva para a cidade. As opções a serem validadas são:
-S: Sim
-N: Não
-T: Talvez
O código fonte deste programa pode ser acessado clicando aqui.
const chuva = prompt(`Está chovendo? (Responda S-Sim, N-Não, T-Talvez)`).toUpperCase().trim();
if (chuva == "S") {
alert(`Leve o guarda-chuva!`);
}
else if (chuva == "N") {
alert(`Não precisa do guarda-chuva!`);
}
else if (chuva == "T") {
alert(`Bom levar o guarda-chuva!`);
}
else {
alert(`Opção Inválida - Responda S-Sim, N-Não ou T-Talvez!`);
}Neste exemplo, valida-se o dado informado pelo usuário, que deverá ser S, N ou T. Caso o usuário informe S, o programa informa que o usuário deve levar o guarda-chuva. Caso o usuário informe N, o programa informa que o usuário não precisa levar o guarda-chuva. Caso o usuário informe T, o programa aconselha o usuário a levar o guarda-chuva.
Caso o usuário informe qualquer outra opção, o programa informa que a opção é inválida e solicita que o usuário informe uma das opções válidas.
Para complementar o assunto sobre estrutura de decisão usando if...else e if...else if...else, falaremos sobre os Operadores Lógicos.