JavaScript if/else
Nesta documentação de JavaScript veremos como utilizar a estrutura condicional if/else para criar scripts com diferentes fluxos de execução.
Apresentaremos aqui como utilizar o método if/else.
JavaScript if/else: Na prática
// Valor atribuído à variável mensagem: “Pode passar”
semaforo = "verde";
if (semaforo == "verde") {
mensagem = "Pode passar";
}
// Valor atribuído à variável mensagem: “Pare”
semaforo = "vermelho";
if (semaforo == "verde") {
mensagem = "Pode passar";
} else {
mensagem = "Pare";
}
// Valor atribuído à variável mensagem: “Atenção”
semaforo = "amarelo";
if (semaforo == "verde") {
mensagem = "Pode passar";
} else if (semaforo == "vermelho") {
mensagem = "Pare";
} else {
mensagem = "Atenção";
}
// Valor impresso no console: “Usuário autenticado”
username = "usuario123";
password = "123456";
if (username == "usuario123" && password == "123456") {
console.log("Usuário autenticado");
} else {
console.log("Login e/ou senha incorrretos");
}
// Valor impresso no console: “CPF válido”
cpf = "123.456.678.01";
if (cpf.length == 14) {
console.log("CPF válido");
} else {
console.log("CPF inválido");
}
// Usuário direcionado para a página: “homejovem.html”
idade = "16";
if (idade >= 18) {
window.location.href = "homeprincipal.html";
} else if (idade < 18 && idade >= 15) {
window.location.href = "homejovem.html";
} else {
window.location.href = "homeinfantil.html";
}
Como funciona o if/else?
A estrutura condicional permite avaliar uma condição e, a partir dela, executar diferentes linhas de código. Considerando o seguinte código:
var nomeUsuario = "Eduardo";
var mensagem = "";
if (nomeUsuario == "Eduardo") {
mensagem = "Nome igual";
} else {
mensagem = "Nome diferente";
}
O valor atribuído à variável mensagem será: “Nome igual”. A Figura 1 demonstra o que ocorre com a execução do código quando é declarada uma estrutura de condição.
Sintaxe
if (condicao) {
// bloco de código
}
Condicao é a estrutura de condição a ser verificada para decidir se as linhas do bloco de código serão executadas ou não.
Essa é a sintaxe básica de uma estrutura condicional, normalmente utilizada quando há apenas uma condição a ser avaliada. Caso haja mais uma condição, deve-se utilizar a opção abaixo:
if (condicao) {
// bloco de código 1
} else {
// bloco de código 2
}
Caso a condição seja falsa, o bloco de código 1 não deve ser executado, mas o bloco de código 2 sim.
Caso existam três ou mais condições, uma opção é utilizar a estrutura:
if (condicao 1) {
// bloco de código 1
} else if (condicao 2) {
// bloco de código 2
} else {
// bloco de código 3
}
Não existe limite para o número de condições declaradas com a estrutura else if (condicao n).
Exemplos de if/else
Exemplo 1
No exemplo a seguir demonstramos como programar uma estrutura condicional simples, com apenas uma condição:
var semaforo = "verde";
if (semaforo == "verde") {
console.log("Pode passar");
}
O valor impresso no console é: “Pode passar”.
Run!Exemplo 2
No exemplo a seguir demonstramos como programar uma estrutura condicional que avalia uma condição e também indica o que deve ser feito caso essa condição seja falsa:
var semaforo = "vermelho";
if (semaforo == "verde") {
console.log("Pode passar");
} else {
console.log("Pare");
}
O valor impresso no console é: “Pare”. Para isso foi executado o bloco de código declarado dentro do else.
Run!Exemplo 3
No exemplo a seguir demonstramos como programar uma estrutura condicional que avalia duas condições:
var semaforo = "vermelho";
if (semaforo == "verde") {
console.log("Pode passar");
} else if (semaforo == "vermelho") {
console.log("Pare");
} else {
console.log("Atenção");
}
O valor impresso no console é: “Pare”. Para isso foi executado o bloco de código declarado dentro do else if.
Run!Exemplo 4
No exemplo a seguir demonstramos como apresentar mensagens conforme o peso informado no sistema:
var peso = 26.3;
var status = "";
if (peso < 20.7) {
status = "Abaixo do peso";
} else if (peso >= 20.7 && peso < 26.4) {
status = "Peso normal";
} else if (peso >= 26.4 && peso < 27.8) {
status = "Pouco acima do peso";
} else if (peso >= 27.8 && peso < 31.1) {
status = "Acima do peso";
} else {
status = "Obeso";
} O valor atribuído a status é: “Peso normal”. Como existem vários condicionais a serem verificados, note que foram programadas estruturas de decisão com if (condicao), else if (condicao) e else.
Run!Exemplo 5
No exemplo a seguir demonstramos como verificar as informações de username e password do usuário em uma estrutura condicional.
var username = "usuario123";
var password = "123456";
if (username == "usuario123" && password == "123456") {
console.log("Usuário autenticado");
} else {
console.log("Login e/ou senha incorrretos");
}
O valor impresso no console é: “Usuário autenticado”.
Run!Exemplo 6
No exemplo a seguir demonstramos como declarar uma estrutura condicional para fazer o redirecionamento do usuário conforme a idade do mesmo:
var idade = 16;
if (idade >= 18) {
window.location.href = "homeprincipal.html";
} else if (idade < 18 && idade >= 15) {
window.location.href = "homejovem.html";
} else {
window.location.href = "homeinfantil.html";
}
O usuário será redirecionado para: “homejovem.html”.
Run!Compatibilidade entre navegadores
if/else é suportado por todos os browsers apresentados na Tabela 1.
| if/else | Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|---|
| Sim | Sim | Sim | Sim | Sim | Sim |
Tabela 1. Compatibilidade do método x browsers.
