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. !

Positivo ou Negativo em JavaScript? Exercício resolvido e Código comentado

Como saber se um determinado número é positivo ou negativo, usando a linguagem de programação JavaScript?

Neste tutorial de nosso Curso de JS online e grátis, vamos propor um exercício, resolver e comentar cada parte do código.

Este tutorial faz parte da seção de Testes Condicionais.
Tutorial anterior: IF e ELSE aninhados

Como saber se um número é positivo ou negativo em JavaScript

Exercício de JS

"Escreva um script em JS que vai solicitar ao usuário um número. Em seguida, vai verificar e dizer se ele é positivo ou negativo."


Questão resolvida

Bom, vamos lá.
Primeiro, vamos cuidar do HTML. Vamos usar um formulário de input do tipo numérico (number):
Digite um numero: <input id="numero" type="number"> 
Agora, o nosso botão, que ao ser clicado vai chamar a função teste() do JavaScript:
<button onclick="teste()">Testar</button>
Prontinho, agora vamos para a programação JS em si.

Vamos criar a função teste(), que vai ser acionada ao clicarem o botão.
A primeira coisa que ela vai fazer é pegar o valor digitado no formulário de input, o trecho do código que faz isso é:
  • document.getElementById("numero").value

Ele vai pegar a string, pois como estudamos, tudo digitado dentro do input é uma string.
Agora vamos pegar essa string e jogar dentro da função parseFloat() (Como converter string para float), e por fim, pegar esse float e armazenar na variável num.

Tudo isso é feito apenas com essa linha de código:
  • var num = parseFloat(document.getElementById("numero").value);

Poderia ser assim, por exemplo
  • var num;
  • num = document.getElementById("numero").value;
  • num = parseFloat(num);

Mas condensamos numa linha só, como mostrado anteriormente.
Agora vem toda a lógica do IF e ELSE.

Já temos o número digitado pelo usuário armazenado na variável num. Vamos testar ela.
Primeiro, usamos o comando IF para saber se ela é maior 0, se for, o número é positivo e acaba aí:
  • if (num > 0)
Se não for, vai pro ELSE. Ora, se não for maior que zero, é porque é menor que zero, logo é negativo, correto?

Errado! Ué, pode ser que seja igual a 0. Ou seja, nem maior nem menor que 0!
E agora, José?

Agora vamos colocar outro teste condicional dentro do ELSE.
Vamos aninhar um IF pra saber se o número é menor que 0. Se for, diz que é negativo:

E se não for? Aí cai no ELSE aninhado, par desse IF aninhado. Se cair nesse segundo else é porque não é maior, nem menor que zero...ou seja, é zero! Dizemos que é nulo!
  • if(num < 0)

Código JavaScript da questão

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite um numero: <input id="numero" type="number"> 
   <button onclick="teste()">Testar</button>

   <script type="text/javascript">
    function teste(){
     var num = parseFloat(document.getElementById("numero").value);
     
     if (num > 0)
      alert(num + " eh Positivo");
     else
      if(num < 0)
       alert(num + " eh Negativo");
      else
       alert("Nem positivo nem negativo, nulo");
    }
 </script>

 </head>
</html>

Resultado do Script

Teste você mesmo o resultado:

Digite um numero:

Qual o maior número ? Exercício de IF ELSE em JavaScript

Neste tutorial, vamos resolver uma questão e comentar seu código, usando IF e ELSE:

Faça um script que peça ao usuário dois números e em seguida exiba o maior deles. Use JavaScript.

Tutorial anterior: IF e ELSE aninhados

Exibindo o Maior Número em JavaScript

Primeiro, vamos usar dois campos de formulário, de input, do tipo number, para receber os dois números que o usuário vai digitar.

Nosso código HTML:
Primeiro numero: <input id="num1" type="number"> <br />
Segundo numero :<input id="num2" type="number"> <br />

Depois, um botão escrito "Calcular maior", que ao ser clicado (atributo onclick) vai chamar a função maior() (declarada e definida em nosso script de JS):
<button onclick="maior()">Calcular maior</button>

Design da página feito, agora vamos para a parte da programação JavaScript em si.
Vamos lá fazer nossa função maior() .

Vamos declarar duas variáveis, numero1 e numero2, que vão pegar os valores inseridos no formulário num1 e num2.

Como esses dados vem no formato string, usamos a função parseFloat() pra transformar em float (tipo numérico decimal), fica assim:
var numero1 = parseFloat(document.getElementById("num1").value);
var numero2 = parseFloat(document.getElementById("num2").value);

Prontinho, agora temos duas variáveis do tipo float em mãos, a numero1 e a numero2.
Vamos aos testes!

Primeiro, vamos testar com IF se o primeiro número é maior que o segundo.
Se for, pronto, acabou...exibimos um alert dizendo isso e acabou.

Se o primeiro não for maior que o segundo, é porque o segundo é maior que o primeiro, correto?
Errado !!!

Pois os dois podem ser iguais! Precisamos fazer outro teste!
Então, dentro do else fazemos mais um if para verificar se o número 2 é maior que o primeiro, se for, aí sim, exibimos essa informação.

Por fim, fazemos o else desse segundo if que foi aninhado. Se o primeiro número não é maior que o segundo, nem o segundo número é maior que o primeiro, é porque eles são iguais!

Veja como ficou nosso código:
<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Primeiro numero: <input id="num1" type="number"> <br />
   Segundo numero :<input id="num2" type="number"> <br />
   <button onclick="maior()">Maior</button>

   <script type="text/javascript">
    function maior(){
     var numero1 = parseFloat(document.getElementById("num1").value);
     var numero2 = parseFloat(document.getElementById("num2").value);
     
     if (numero1 > numero2)
         alert(numero1 + " eh maior que " + numero2);
     else
         if(numero2 > numero1)
            alert(numero2 + " eh maior que " + numero1);
         else
            alert(numero1 + " eh igual a " + numero2);
    }
 </script>

 </head>
</html>

Como todas as instruções após IF e ELSE são comandos de apenas uma linha de código, não usamos chaves { }, pois não é necessário nesses casos.

Teste você mesmo o resultado:

Primeiro numero:
Segundo numero:



PS: Se quiser testar com números decimais, lembre-se de usar ponto . ao invés de vírgula ,

IF ELSE dentro de IF ELSE - Aninhamento

Neste tutorial de nosso Curso de JavaScript, vamos continuar nos aprofundando no estudo dos testes condicionais IF e ELSE, pois são a base da programação. Agora, vamos aprender como aninhar eles, ou seja, colocar um teste dentro de outro e ver a utilidade disto.

Você vai notar que nossos scripts vão ficar cada vez mais realistas e poderosos, nos permitindo programar coisas incríveis.

Tutorial anterior: IF e ELSE em JavaScript - O que é e Como usar

Usando Vários IF e ELSE em JavaScript

"Você foi contratado pelo governo para criar um script das eleições. Seu programa deve ter as seguintes características:

  • Perguntar a idade do usuário
  • Se for menor de 16 anos, avisar que não pode votar
  • Se tiver 16 ou 17, avisar que o voto é facultativo
  • Se tiver mais de 65, avisar que também é facultativo o voto
  • De 18 até 65, é obrigatório votar
Utilize a linguagem de programação JavaScript."


Ok, vamos lá.
Vamos precisar fazer mais de um teste para fazer nosso script.

Primeiro, no HTML. Vamos criar um botão do tipo numérico e de nome (ID) idade:
<input id="idade" type="number">

E um botão que chama a função votar() do JavaScript:
<button onclick="votar()">Ok</button> <br />

Suave na nave? Agora vamos começar a programar.
Primeiro, vamos pegar o que o usuário digitou no formulário "idade".
Como tudo que alguém digita é string, vamos passar pra inteiro via parseInt e guardar na variável idade:
var idade = parseInt(document.getElementById("idade").value);

Prontinho, agora temos um número inteiro.
Vamos testar se é menor que 16, se for já avisa logo que não pode votar:
if (idade < 16)
    alert("Voce ainda nao pode votar");

Próximo passo de nosso script, vamos colocar outro teste, acima de 65, avisando que só vota se quiser:
if (idade > 65)
    alert("Seu voto eh facultativo);

Agora é que o bicho pega...agora precisamos testar se tem menos de 18 e 16 ou mais, para dizer que é facultativo e também testar quem tem de 18 até 65 pra dizer que é obrigatório.

Que tal um:
if (idade > 18)
    alert("Voce eh obrigado a votar");
?

Mas aí quem digitar 66 vai receber duas mensagens:
Seu voto é facultativo
Voce eh obrigado a votar

Pois vai cair nos dois IF...e agora, José ?

IF e ELSE aninhados

A solução é simples: colocar um IF dentro do outro ou dentro de um ELSE.
Vamos lá, devagar, acompanhar a lógica.

O primeiro IF continua ok. Testamos se a idade da pessoa é menor que 16.
Se for, acaba o script, ela não pode votar e ponto final.

Porém, agora vamos usar um else:
if (idade < 16){
    alert("Voce ainda nao pode votar");
}
else{ // algum codigo aqui }
O segredo agora é: vamos colocar mais testes dentro desse else.
Uma coisas sabemos: se foi pro else, é porque tem 16 anos ou mais, concorda?

Já sabemos que a idade é 16 ou mais. Agora, dentro do else, vamos testar se a idade é menor que 18.
Se for, é porque ele tem 16 ou mais e menos que 18, sendo seu voto facultativo:

if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
}
Olha que belezura...um if dentro de um else.
Vamos colocar agora mais um else...é o else deste novo if:
if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
     else{
        // codigo caso a idade seja 18 ou mais
     }
}

Lembre-se: cada else pertence somente a um if.
Esse segundo else só funciona se a idade digitada for 18 anos ou mais.

Porém, temos que tratar dois casos ali dentro:
Se for 18 ou mais, porém com 65 anos ou mais
Se for 18 ou mais, porém com menos que 65 anos

A solução?
Simples, vamos colocar mais um par de if else ali dentro desse segundo else:

if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
     else{
         if(idade > 65){
            alert("Seu voto eh facultativo");
         }
         else{
             alert("Seu voto eh obrigatorio");
      }
     }
}
Prontinho. Script pronto.
Recapitulando:
  • Se for menor que 16 a idade? Cai no primeiro if e acabou o script, não pode votar
  • Se for 16 ou mais? Ai vai pro else
  • Dentro desse else, testamos se é menor que 18...se for, tem 16 ou mais e menos que 18, logo é facultativo
  • Se tem 18 ou mais, vai pra um novo else
  • Dentro desse novo else, testamos se tem mais de 65, se sim, voto é facultativo
  • Se não tiver mais de 65, é porque tem 18 anos ou mais e 65 anos ou menos, logo o voto é obrigatório

Bacana, não?
Teste:

Qual sua idade:



IF ELSE aninhados e Indentados

Note uma coisa em nosso script: os IF e ELSE estão organizados e alinhados, isso se chama indentação.

Um par de if e else deve ficar sempre alinhado verticalmente, na mesma coluna.
Caso precise aninhar mais algum teste dentro de outro teste, dê um espaçamento e coloque esses novos testes 'dentro' dos antigos, para ficar uma estrutura organizada e clara de se entender.

if (condição1)      // Primeiro IF
   if (condição2)   // Segundo IF, dentro do primeiro IF
      [codigo];
   else             // ELSE é do segundo IF
       [codigo];

else                // ELSE do primeiro IF
    if (condição3)  // IF dentro do primeiro ELSE
       [codigo]
    else           // ELSE do terceiro IF, dentro do primeiro ELSE
        [codigo]


IF e ELSE em JavaScript - O que é, Como Usar, Para que serve e Exemplos de Código

Nesta aula de nossa Apostila de JavaScript online, vamos aprender o que é a instrução if else, para que serve, onde é usada, como usar e ver exemplos de código JS comentado.

Este tutorial é uma continuação de nosso curso, principalmente do tutorial anterior:
IF - O Teste Condicional do JavaScript

IF e ELSE em JavaScript - Como Usar

A sintaxe do uso das instruções if e else é a seguinte:

if (teste){
    código caso o teste seja verdadeiro ;
}else{
    código caso o teste seja falso ;
}

A lógica do IF continua a mesma, o que muda é o else, que vem sempre depois do if (e nunca sozinho).
Vamos lá, entender o que se passa:

  1. Comando if é introduzido
  2. Um teste condicional é realizado (geralmente usando operadores de comparação)
  3. Caso o teste retorne true (verdade) o código que vem ao if é executado
  4. Caso o teste retorne false (falso), o código que vem depois do else que é executado

O que é e Para que serve o IF e ELSE em JavaScript

No tutorial anterior, quando aprendemos a usar a instrução if, vimos que o código dentro dela só executava se o teste fosse verdadeiro, caso fosse falso, o código ficava inutilizado, o JS simplesmente pulava ele.

Com a instrução else, isso não ocorre mais.
Agora ou acontece uma coisa ou acontece outra.
Um dos códigos sempre é executado.

Se parar para pensar, é isso que acontece o tempo inteiro quando usamos qualquer software ou sistema. Quando digita sua senha e tenta fazer login, ou ela tá certa ou tá errada, ou seja, é ou é true ou é false.

Ou você clica em um link, ou não clica.
Ou fecha a página ou não fecha.
Ou aperta um botão ou não.

Não é a toa que em computação, o sistema mais importante é o binário.
É 1 ou 0, verdade ou falso...essa também a base de todos os testes condicionais.

Mas vamos deixar de falar e mostrar exemplos reais de código!

Exemplos de código de IF e ELSE em JS

  • Exemplo de código 1:

No exemplo abaixo, o IF será sempre executado, afinal, o teste sempre dará verdadeiro:


if (true){
 alert("JavaScript eh a melhor linguagem de programacao");
}else{
 alert("Odeio JavaScript");
}


Já no código abaixo, o IF nunca será executado, pois o teste retorna falso. Logo, o else é sempre executado:


if (false){
 alert("Eu adoro ouvir Pablo Vittar");
}else{
 alert("Adoro ouvir Iron Maiden");
}


Somente programadores JavaScript podem ver o que está dentro do primeiro ELSE do segundo IF.

  • Exemplo de código 2:

Vamos criar um login básico e simples?
Primeiro, vamos criar nosso campo de input (do tipo senha, password) e o botão de entrar.

Quando a pessoa clicar no botão "Entrar", vai ser chamada a função login() de nosso código JavaScript.

Dentro desse script,  definimos a nossa senha:
var senha="2112"

Em seguida, a função login(), que captura o que o usuário digitou na caixa de input e armazena na variável tentativa.

Por fim, usamos o teste condicional IF ELSE para verificar se a senha digita está correta.
Fazemos o teste:
senha == tentativa

Se o resultado for positivo, a pessoa digitou a senha corretamente, cai no IF que exibe uma mensagem de sucesso.

Se digitar qualquer coisa diferente da senha, cai no ELSE que avisa que não vai entrar no sistema.
Veja como ficou o código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite a senha:
   <input id="password" type="password">
   <button onclick="login()">Entrar</button> <br />

   <script type="text/javascript">
    var senha='2112';
    function login(){
     var tentativa = document.getElementById("password").value;

     if (tentativa == senha)
      alert("Senha correta, entrando no sistema...");
     else 
      alert("Senha incorreta, tente novamente");
    }
    
   </script>

 </head>
</html>

Veja como fica o resultado, teste:

Digite a senha:




  • Exemplo de código 3

"Faça um script que pergunte a idade ao usuário. Se tiver 65 anos ou mais, exiba uma mensagem dizendo que ele já pode se aposentar. Senão, o tempo que ele ainda tem que trabalhar para se aposentar".

Primeiro, criamos nosso formulário de input, do tipo numérico (number) e o botão de OK.
Ao clicar no botão (onclick), ele chama a função aposentar() do script.

Dentro do script, vai só a definição dessa função.
Inicialmente, ela pega o valor digitado pelo usuário (que é sempre uma string) e transformar em int (parseInt()), salvando esse resultado na variável idade.

Agora, pegamos essa variável e testamos se ela é maior ou igual a 65.
Se for, o teste retorna true, cai no IF e uma mensagem de parabéns é exibida.

Se for menor que 65, retorna false o teste e cai no ELSE.
O else exibe quantos anos a pessoa ainda tem que trabalho (65-idade).


Código JS:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Qual sua idade: 
   <input id="idade" type="number">
   <button onclick="aposentar()">Ok</button> <br />

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

     if (idade >= 65)
      alert("Parabens, voce ja pode se aposentar !");
     else 
      alert("Ainda falta " + (65-idade) +" ano(s) para se aposentar");
    }
    
 </script>

 </head>
</html>

Resultado:

Qual sua idade:



PS: no código acima só tem um detalhe, não usamos as chaves para delimitar o código dentro do IF nem do ELSE. Isso ocorreu por um motivo: quando o código for apenas uma linha, não é obrigatório usar chaves.

IF - Teste Condicional em JavaScript

Neste tutorial, vamos falar de um dos assuntos mais importantes da programação em JavaScript, o teste condicional IF.

Para entender e usar o IF, você precisa ter lido o tutorial anterior:
Operadores de comparação

Comando IF : Como Usar

A estrutura, o protótipo do comando IF, em JavaScript, é:

if (condicao) {
   codigo ;
   codigo ;
}

Primeiro, digitamos o comando if.
Em seguida, é necessário vir um teste, uma comparação: foi por isso que estudamos operadores de comparação no tutorial passado de nosso Curso de JavaScript, pois o teste condicional IF só funciona com uma expressão de comparação.

Caso a condição retorne true (ou seja, seja verdadeira), o código entre os colchetes { } será executado.

Caso a condição retorne false, o código dentro dos colchetes não é executado. Este bloco inteiro de IF é pulado e o script continua rodando normalmente, como se aquele trecho não existisse.

Uma maneira ainda mais simples e fácil de entender a instrução if é pensar em sua tradução.
If significa se, em português.
Então, a lógica é assim: "se isso é verdade, executar a seguinte instrução ; se isso for falso, não fazer nada, pular a instrução seguinte".

Teste condicional IF : Exemplos de Uso

Agora que aprendemos a definição, e a importância dos testes condicionais (ler seção Testes e Laços), vamos ver um exemplo de uso do comando IF em JavaScript.

Você foi contratado para criar um site no ramo adulto. Você deve criar um script que pergunte a idade do usuário, se ele for menor deve aparecer uma janela de alert informando que ele não pode acessar o conteúdo.

Primeiro, vamos pedir os dados do usuário em um formulário do tipo input.
Vamos pegar esse valor, via JavaScript, e armazenar na variável idade.

Como os valores que o usuário fornece são strings, passamos para inteiro via parseInt().

Agora vem o pulo do gato.
Vamos fazer um teste, testar se a variável idade é menor que 18:

if (idade<18){
      alert("Voce tem " + idade + " anos,  menores de idade 
             nao podem entrar");
}

Se tiver digitado um valor menor que 18, o teste IF vai retornar verdadeiro e tudo dentro dos colchetes do IF será executado.

No caso, aparece uma mensagem dizendo sua idade e que menores não podem acessar o site.
O código completo do site com o script, fica:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite sua idade:
   <input id="idade" type="text">
   <button onclick="entrar()">Entrar</button> <br />

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

     if (idade<18){
      alert("Voce tem " + idade + " anos,  menores de idade 
             nao podem entrar");
     }
    }
    
 </script>

 </head>
</html>

Veja abaixo o resultado do script:

Digite sua idade:



Caso digite 17, por exemplo, e tentar entrar, vai ver este resultado na tela:

Teste condicional IF em JS

E o que acontece se você digitar 18 ou mais? Nada.
Afinal, o operação de comparação vai retornar false e o IF não vai ser executado, e o código corre normalmente.

Como não tem nada depois do IF, nada ocorre.

Entenda a natureza da coisa: o que vai acontecer vai depender do que o usuário fizer.
Nosso script está rodando baseado em condições, e não simplesmente rodando do começo até o fim, linha por linha, como era bem antigamente, antes da existência do JS (sim, as páginas sempre rodava do mesmo jeito, abriam e funcionavam da mesma maneira sempre, pra todos - agora não, são dinâmicas, 'conversam' com os internautas).

Operadores de comparação no Teste Condicional IF

Uma das coisas mais legais da programação, é o fato de ser possível fazer a mesma coisa de maneiras bem diferentes.

O código de um programador é como se fosse uma impressão digital, é único. Por isso, não tente nunca imitar ninguém, vá desenvolvendo sua lógica, seu raciocínio e sua criatividade.

Existem, por exemplo, outras maneiras de fazer esse mesmo teste condicional do exemplo passado, para saber se o usuário tem menos de 18 anos, como por exemplo:

if (idade<=17){
      alert("Voce tem " + idade + " anos,  menores de idade nao podem entrar");
}

Consegue entender por que vai ser a mesma coisa?
No tutorial a seguir, vamos estudar o ELSE e vamos ver outras possibilidades de se fazer essa mesma comparação.