Operadores Lógicos AND ( && ), OR ( || ) e NOT ( ! ) em JavaScript


Neste tutorial de nosso Curso de JavaScript Online Grátis, vamos aprender sobre os operadores lógicos de AND, OR e NOT, simbolizados por && , || e ! .

Com eles, nossos testes condicionais ficarão bem mais simples e poderosos.


Operadores Lógicos em JavaScript

Já estudamos operadores matemáticos (somar, subtrair, multiplicar e dividir):
Operadores de comparação (==, >, >=, < e <=)
Agora, vamos aprender sobre os operadores lógicos:
  1. AND
  2. OR
  3. NOT

Que vai nos ajudar, principalmente, sempre que precisarmos fazer várias comparações em nossos testes condicionais. Agora, com esses operadores, vamos poder fazer vários testes ao mesmo tempo e combinar tudo numa operação só.

Lembra no tutorial anterior, sobre:
IF e ELSE aninhado


Sobre o exercício da idade e da votação? Testamos se a idade era menor que 16, maior, menor que 18, maior que 65 etc? Vamos refazer ele, usando os operadores lógicos e vamos ver como ele nos ajudam a programar em JavaScript.

Operador lógico AND: &&

And, em inglês, significa "E".
Exemplo: isso e aquilo

Ele funciona da seguinte maneira:
Unimos mais de uma expressão, usando o operador &&
if (condicao1 && condicao2){
   codigo;
}

Agora, esse IF só sera verdadeiro se a condição1 for verdadeira E a condição2 TAMBÉM for verdadeira. Se qualquer uma delas for falsa, todo o teste condiconal será falso.
Não existem limites para o tanto de testes que podemos usar com o operador &&:
if (condicao1 && condicao2 && condicao3 &&...){
   codigo;
}



Tabela verdade: AND &&

Condição 1            Condição 2         Resultado
   Verdade                 Verdade              Verdade
   Verdade                  Falso                  Falso
   Falso                      Verdade              Falso
   Falso                      Falso                  Falso


Exemplo de uso do operador &&

Você foi contratado para fazer um site para uma empresa de consórcio.
No teste inicial, você deve perguntar para o usuário a idade dele e o seu salário.
A pessoa só pode comprar um automóvel se for de maior e ganhar mais de R$ 2.000,00

Primeiro, vamos pegar a idade e armazenar na variável idade.
Depois, pegar o salário da pessoa e armazenar na variável salario.

Precisamos fazer dois testes:
  1. idade > 17
  2. salario > 2000.00

Para ser aprovado para o consórcio, as duas condições devem ser true.
A primeira AND a segunda também!

Se qualquer uma delas for falsa, cai no else. Nosso teste condicional fica:
  • if( idade>17 && salario>2000)

Código HTML + JavaScript:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Sua idade  : <input id="age" type="number"><br />
   Seu salario:<input id="salary" type="number"><br />
   <button onclick="checar()">Checar</button>

   <script type="text/javascript">
    function checar(){
     var idade = parseInt(document.getElementById("age").value);
     var salario = parseFloat(document.getElementById("salary").value);
     
     if (idade>17 && salario>2000)
      alert("Voce esta apto para participar do consorcio");
     else
      alert("Voce NAO esta apto para participar do consorcio");
    }
 </script>

 </head>
</html>

Teste o resultado:

Sua idade :
Seu salario:



Tente fazer esse script sem o operador &&. Vai dar um trabalhão, vários IFs e ELSEs dentro de IFs ELSEs.


Operador lógico OR: ||

OR em inglês significa OU.
A sintaxe para usar o operador || é:
Unimos mais de uma expressão, usando o operador &&
if (condicao1 || condicao2){
   codigo;
}
Traduza, para o português mesmo:
Unimos mais de uma expressão, usando o operador &&
if (condicao1 OU condicao2){
   codigo;
}
Se a condição1 OU  condição2 for verdadeira, todo o teste condicional será verdadeiro.
Faz, sentido, não é?

Se um for falso e o outro for verdade, o resultado é verdade (true).

Tabela verdade: OR ||

Condição 1            Condição 2         Resultado
   Verdade                 Verdade              Verdade
   Verdade                  Falso                 Verdade
   Falso                      Verdade             Verdade
   Falso                      Falso                  Falso

Exemplo de uso do operador OR || em JS
Você foi contratado pelo governo para criar um script para definir as filas prioritárias. Seu site deve exibir um menu de opções, perguntando se a pessoa é Gestante, Idosa, Deficiente ou Nenhuma das alternativas.

Se ela for Deficiente, Idosa ou Gestante, tem direito a fila prioritária. Se não, não.

Bom, vamos lá.
O resultado final vai ser o seguinte (pode testar):


Você é:
1. Gestante
2. Idoso(a)
3. Deficiente
4. Nenhuma das opções acima




Primeiro, criamos um site simples, exibindo um texto com as opções:

1. Gestante
2. Idoso(a)
3. Deficiente
4. Nenhuma das opções acima

Depois um formulário de input, do tipo number e id option.
Por fim, um botão, que ao ser clicado chama a função verificar().

Dentro do JS, vamos apenas definir a função verificar().
Ela declara uma variável de nome op que vai receber a opções escolhida pelo usuário. Vale lembrar que o número digitado é capturado com o comando document.getElementById("option").value na forma de string.

Então, colocamos esse comando dentro da função parseInt() para transformar string em um inteiro.
Com o inteiro em mãos, vamos aos testes!

Vamos fazer três testes: verificar se o número digitado é 1, se é 2 ou se é 3.
Isso é feito com a seguinte linha de código:
if( (op == 1) || (op == 2) || (op == 3) )

Note que usamos o operador OR (OU) || .
Ou seja, basta um deles, qualquer ser verdadeiro, que o teste condicional if vai retornar true e ser executado!

Caso não seja 1, 2 ou 3 o valor digitado, o paciente não é prioritário e cai no else.
Bacana essa junção de teste condicional com operadores lógicos, né?

Esse é um exemplo real de código, coisas usadas no dia-a-dia, de verdade.

Código HTML + JavaScript:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Voce e:<br />
   1. Gestante<br />
   2. Idoso(a)<br />
   3. Dificiente<br />
   4. Nenhuma das opcoes acima<br />

   <input id="option" type="number"> <br />
   <button onclick="verificar()">Verificar</button>

   <script type="text/javascript">
    function verificar(){
     var op = parseInt(document.getElementById("option").value);

     if( (op == 1) || (op == 2) || (op == 3) )
          alert("Voce tem direito a fila preferencial");
     else     
          alert("Voce NAO tem direito a fila preferencial");
    }
   </script>

 </head>
</html>

Operador lógico NOT: !

NOT em inglês significa não, é a negação.
Sempre que colocamos esse operador perto de alguma condição, ele altera o valor dela de verdadeiro para falso (true para false) ou o contrário, de falso para verdadeiro.

Veja:
if(true){
   [esse codigo sempre executa];
}

if(!true){
   [esse codigo nunca executa];
}

Exemplo de uso do operador NOT em JavaScript

Crie um menu em JavaScript com diversas opções para o usuário, e caso ele digite 0, o sistema seja encerrado.


  • Script:


Menu:
0. Sair
1. Comprar
2. Vender
3. Trocar
4. Etc




  • Código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Menu:<br />
   0. Sair<br />
   1. Comprar<br />
   2. Vender<br />
   3. Trocar<br />
   4. Etc<br />

   <input id="option" type="number"> <br />
   <button onclick="verificar()">Verificar</button>

   <script type="text/javascript">

    function verificar(){
     var op = parseInt(document.getElementById("option").value);

     if(!op)
  alert("Saindo do sistema...");
 else     
      alert("Opcao escolhida: "+op);
    }
 </script>

 </head>
</html>

  • Código comentado:

Esse é um típico exemplo de uso do operador de negação NOT ! , que inverte o valor booleano.
A única coisa diferente nesse código é o:
if(!op)
Ele funciona assim:

  1. Se você digitar 0, o teste if(op) daria sempre falso, pois 0 é false. Porém, a gente colocou o operador !, então inverteu. Sempre que o usuário digitar 0, o teste !op vira true
  2. Qualquer outro número que o usuário digitar para a variável op, o teste if(op) seria true, então o teste if(!op) vai dar falso para qualquer coisa diferente de 0 que a pessoa digitar, por isso vai cair no ELSE.
Bem bacana esses operadores lógicos, não?
Ainda nesta seção vamos resolver vários exercícios que usaremos bastante os operadores:
  1. &&
  2. ||
  3. !

Nenhum comentário:

Postar um comentário