Olá! Wednesday, 22 de February de 2017.



Dicas CódigoFonte.net
Wednesday, 20 de January de 2010

Estruturas de Condição de JavaScript

Vamos começar o nosso artigo com uma curiosidade importante para entender algumas coisas que serão faladas neste artigo, que são os Operadores Lógicos e relacionais. Esses operadores são utilizados em qualquer linguagem de programação.

Começaremos com os Operadores Lógicos que são: AND e OR. Esses operadores tem suas tabelas "verdades", veja as tabelas de cada operador:

AND (e)

q p && q
0 0 0
0 1 0
1 0 0
1 1 1


OR (ou)

q p || q
0 0 0
0 1 1
1 0 1
1 1 1


Onde os 0 (zero) é falso e 1 (um) é verdadeiro.

Nota: Nas linguagens de programação elas são representadas da seguinte maneira:

AND - &&
OR - ||

Os Operadores Relacionais são:

> maior que
<= menor ou igual
< menor que
<= menor ou igual
== igual a
!= diferente de


O artigo está separado em três partes:

  • Parte I - Estrutura de Condição Simples;
  • Parte II - Estrutura de Condição Composta;
  • Parte III - Estrutura de Múltipla Escolha.


Parte I - Estrutura de condição simples

Na primeira parte nós estudaremos a estrutura de condição simples em JavaScript que é o if.

Sua sintaxe é:

  1. if (condição) {
  2.     ação
  3. }
  4.  

Seu peseudocódigo:

  1. se (condição) for verdadeira {
  2.     execute as ações
  3. }
  4.  


Um exemplo prático quer foi muito comum na web era verificar se o usuário era maior de idade ou não:

Exemplo 1

  1. var result = prompt("Qual a sua idade?");
  2. if (result <= 18) {
  3.     document.write("Você é menor de idade.");
  4. }
  5.  

Veja um outro exemplo que verifica se o número é ímpar:

Exemplo 2

  1. var numero = 4;
  2. if (numero%2 == 0) {
  3.     document.write("O número é par.");
  4. }
  5.  


Dentro do if podemos fazer condições utilizando os Operadores Lógicos. Lembra do começo do desse artigo? AND (e) - && e OR (ou) - ||. Veremos dois exemplos de cada um deles:

Exemplo 3 - AND

  1. var condicao1 = 3
  2. var condicao2 = 10
  3. if ((condicao1 < 4) && (condicao2 == 10)) {
  4.     document.write("As duas condições foram aceitas!");
  5. }
  6.  


Explicando: Neste código estamos utilizando o Operador Lógico AND. Abaixo temos uma breve explicação de como é feito o estudo de comparação.

Primeiro vamos entender quais comparações estão sendo feitas, para isso fazemos a leitura:

  1. if ((condicao1 < 4) && (condicao2 == 10)) { - se a variável condicao1 é menor que 4 <strong>E</strong> condicao2 é igual a 10 então...
  2.  


Obs: Aqui estamos utilizando alguns operadores relacionais, que foram apresentado no início deste artigo.

Lembra da tabela verdade fornecida no início deste artigo? Agora vamos utilizá-la. Primeiramente vamos ver o que é verdadeiro e o que é falso na nossa condição:

  1. 3 é menor que 4 - verdadeiro
  2. 10 é igual a 10 - verdadeiro
  3.  

Ficamos assim:

  1. verdadeiro && verdadeiro
  2.  

Como sabemos, que falso é 0 (zero) e verdadeiro é 1 (um) então temos:

  1. 1 && 1

Vamos verificar na nossa tabela verdade:

  1. 1 && 1 = 1

Portanto ele vai executar o comando: document.write("As duas condições foram aceitas!");

Exemplo 4 - OR

  1. var condicao1 = 3
  2. var condicao2 = 10
  3. if ((condicao1 > 4) || (condicao2 == 10)) {
  4.     document.write("Uma das condições foi aceita!");
  5. }

Neste caso acontece a mesma coisa, mas devemos apenas olhar a tabela verdade do operador lógico OR. Portanto nesse caso devemos ter:

  1. 0 || 1

Segundo nossa tabela verdade:

  1. 0 || 1 = 1

Portanto ele vai executar o comando: document.write("Uma das condições foi aceita!");

Parte II - Estrutura de Condição Composta

Nesse tipo de estrutura de condição composta temos if...else.

Sua sintaxe é:

  1. if (condição) {
  2.     ação A
  3. }else {
  4.     ação B
  5. }
  6.  


Seu pseudocódigo:

  1. se (condição) então {
  2.     executa a ação A
  3. }senão {
  4.     executa ação B
  5. }

Agora vamos aperfeiçoar os exemplos de estrutura de condição simples.

Exemplo 5 - Aperfeiçoando o Exemplo 1

  1. var result = prompt("Qual a sua idade?");
  2. if (result <= 18) {
  3.     document.write("Você é menor de idade.");
  4. }else {
  5.     document.write("Você é maior de idade.");
  6. }


Exemplo 6 - Aperfeiçoando o Exemplo 2

  1. var numero = 4;
  2. if (numero%2 == 0) {
  3.     document.write("O número é par.");
  4. }else {
  5.     document.write("O número é ímpar.");
  6. }
  7.  


Parte III - Estrutura de Múltipla Escolha

Nesta estrutura de múltipla escolha temos o case, cujo seu significado é caso.

Sua sintaxe é:

  1. switch(condição) {
  2.     case condição1:
  3.         ação1
  4.     break;
  5.     case condição2:
  6.         ação2
  7.     break;
  8. }
  9.  

Em pseudocódigo:

  1. escolha(condição) {
  2.     caso condiçãoA:
  3.         ação A
  4.     break;
  5.     caso condiçãoB:
  6.         ação B
  7.     break;
  8. }

Lembrando que as condições podem ser de qualquer tipo. Veja um exemplo utilizando inteiro e a outra string:

Exemplo 7 - Case com Inteiro

  1. <script language="JavaScript">
  2. function escolher(op) {
  3.     switch (op) {
  4.         case '1':
  5.             document.getElementById("texto").innerHTML="Você digitou 1";
  6.         break;
  7.         case '2':
  8.             document.getElementById('texto').innerHTML="Você digitou 2";
  9.         break;
  10.         case '3':
  11.             document.getElementById('texto').innerHTML="Você digitou 3";
  12.         break;
  13.         case '4':
  14.             document.getElementById('texto').innerHTML="Você digitou 4";
  15.         break;
  16.         default:
  17.                 document.getElementById('texto').innerHTML="Sem especificação";
  18.         break;
  19.     }
  20. }
  21. </script>
  22. <body>
  23.     Escolha um números de 1 a 4:
  24.     <input type="text" id="valor">
  25.     <input type="button" value="Escolha" onclick="escolher(valor.value);">
  26.     <div id="texto"></div>
  27. </body>

Nota: A condição default é caso nenhum das condições acima seja verdadeira ele executa a ação do default.

Exemplo 8 - Case com String

  1. <script language="JavaScript">
  2. function escolher(op) {
  3.     switch (op) {
  4.         case 'codigofonte':
  5.             document.getElementById("texto").innerHTML="<a href='http://www.codigofonte.net'>codigofonte</a>";
  6.         break;
  7.         case 'php':
  8.             document.getElementById('texto').innerHTML="Você digitou <b>PHP</b>";
  9.         break;
  10.         case 'javascript':
  11.             document.getElementById('texto').innerHTML="Você digitou <b>JavaScript</b>";
  12.         break;
  13.         case 'css':
  14.             document.getElementById('texto').innerHTML="Você digitou <b>CSS</b>";
  15.         break;
  16.         default:
  17.                 document.getElementById('texto').innerHTML="Sem especificação.";
  18.         break;
  19.     }
  20. }
  21. </script>
  22. <body>
  23.     Digite as seguintes palavras: codigofonte, php, javascript, css.
  24.     <input type="text" id="valor">
  25.     <input type="button" value="Escolha" onclick="escolher(valor.value);">
  26.     <input type="button" value="Escolha" style="display:none">
  27.     <div id="texto"></div>
  28. </body>
  29.  

Note que conforme você especificar no case a string, você deverá escrever na caixa de texto da mesma forma para ele executar a ação. Tente digitar ao invés de javascript JaVaScRiPt, ele não vai executar a ação no caso javascript.

Obs: O case as vezes é a melhor opção quando temos várias opções de escolhas. Veja o mesmo exemplo 8 [b]sem[/b] a utilização do case:

Exemplo 9

  1. <script language="JavaScript">
  2. function escolher(op) {
  3.     if (op == 1) {
  4.         document.getElementById("texto").innerHTML="Você digitou 1";
  5.     }else if (op == 2) {
  6.         document.getElementById('texto').innerHTML="Você digitou 2";
  7.     }else if (op == 3) {
  8.         document.getElementById('texto').innerHTML="Você digitou 3";
  9.     }else if (op == 4) {
  10.         document.getElementById('texto').innerHTML="Você digitou 4";
  11.     }else {
  12.         document.getElementById('texto').innerHTML="Sem especificação";
  13.     }
  14. }
  15. </script>
  16. <body>
  17.     Escolha um números de 1 a 4:
  18.     <input type="text" id="valor">
  19.     <input type="button" value="Escolha" onclick="escolher(valor.value);">
  20.     <div id="texto"></div>
  21. </body>
  22.  


Obs: Aqui o nosso else, na função escolher, tem a mesma condição que o default do case.


Enviado por: Andre

Comentários do artigo [Novo comentário]

manaceias martins dos santos - 16 de February de 2010 - 17:08
não consigui adicionar meu mural em meu blog. Como fazer? obrigado!
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » CodigoFonte.eti.br » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010