Com eles, nossos testes condicionais ficarão bem mais simples e poderosos.
Obter meu certificado!
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:
- AND
- OR
- 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 ResultadoVerdade 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:
- idade > 17
- 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 ResultadoVerdade 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:
- 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
- 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:
- &&
- ||
- !
Não consegui encontrar sentido nenhum nesse código.
ResponderExcluirO meu código foi o seguinte:
function enviar() {
var num = document.querySelector('input').value;
if (num != 0) {
alert('Você será redirecionado para a página de acordo com a opção escolhida..')
} else {
alert('Saindo...');
}
}
kkkkk somos dois! usuahsuhaus
ExcluirA primeira condição determina que qualquer número diferente de (!=) 0 que seja inserido no prompt será enviado para o primeiro alert, caso o 0 sejá inserido, o programa irá sair do código.
Excluir