Artigos JavaScript JavaScript if/else: criando scripts com estruturas condicionais

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.

Estrutura condicional if
Figura 1. Estrutura condicional if

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.

Veja também