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.

Nenhum comentário:

Postar um comentário