Estruturas de Condio de JavaScript

Vamos comear o nosso artigo com uma curiosidade importante para entender algumas coisas que sero faladas neste artigo, que so os Operadores Lgicos e relacionais. Esses operadores so utilizados em qualquer linguagem de programao. Comearemos com os Operadores Lgicos que so: AND e OR. Esses operadores tem suas tabelas "verdades", veja as tabelas de cada operador: AND (e) p q p && q 0 0 0 1 1 0 1 1 0 0 0 1

OR (ou) p q p || q 0 0 0 1 1 0 1 1 0 1 1 1

Onde os 0 (zero) falso e 1 (um) verdadeiro. Nota: Nas linguagens de programao elas so representadas da seguinte maneira: AND - && OR - || Os Operadores Relacionais so: > maior que <= menor ou igual < menor que <= menor ou igual == igual a != diferente de

O artigo est separado em trs partes:

Parte I - Estrutura de Condio Simples; Parte II - Estrutura de Condio Composta;

Parte III - Estrutura de Mltipla Escolha.

Parte I - Estrutura de condio simples Na primeira parte ns estudaremos a estrutura de condio simples em JavaScript que o if. Sua sintaxe : 1. if (condio) { 2. ao 3. } 4. Seu peseudocdigo: 1. se (condio) for verdadeira { 2. execute as aes 3. } 4.

Um exemplo prtico quer foi muito comum na web era verificar se o usurio era maior de idade ou no: 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 nmero mpar: Exemplo 2 1. var numero = 4; 2. if (numero%2 == 0) { 3. document.write("O nmero par."); 4. } 5.

Dentro do if podemos fazer condies utilizando os Operadores Lgicos. Lembra do comeo do desse artigo? AND (e) - && e OR (ou) - ||. Veremos dois exemplos de cada um deles: Exemplo 3 - AND 1. 2. 3. 4. 5. 6. var condicao1 = 3 var condicao2 = 10 if ((condicao1 < 4) && (condicao2 == 10)) { document.write("As duas condies foram aceitas!"); }

Explicando: Neste cdigo estamos utilizando o Operador Lgico AND. Abaixo temos uma breve explicao de como feito o estudo de comparao. Primeiro vamos entender quais comparaes esto sendo feitas, para isso fazemos a leitura: 1. if ((condicao1 < 4) && (condicao2 == 10)) { - se a varivel condicao1 menor que 4 <strong>E</strong> condicao2 igual a 10 ento... 2.

Obs: Aqui estamos utilizando alguns operadores relacionais, que foram apresentado no incio deste artigo. Lembra da tabela verdade fornecida no incio deste artigo? Agora vamos utiliz-la. Primeiramente vamos ver o que verdadeiro e o que falso na nossa condio: 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) ento temos: 1. 1 && 1 Vamos verificar na nossa tabela verdade: 1. 1 && 1 = 1 Portanto ele vai executar o comando: document.write("As duas condies foram aceitas!"); Exemplo 4 - OR 1. 2. 3. 4. 5. var condicao1 = 3 var condicao2 = 10 if ((condicao1 > 4) || (condicao2 == 10)) { document.write("Uma das condies foi aceita!"); }

Neste caso acontece a mesma coisa, mas devemos apenas olhar a tabela verdade do operador lgico 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 condies foi aceita!");

Parte II - Estrutura de Condio Composta Nesse tipo de estrutura de condio composta temos if...else. Sua sintaxe : 1. if (condio) { 2. ao A 3. }else { 4. ao B 5. } 6.

Seu pseudocdigo: 1. se (condio) ento { 2. executa a ao A 3. }seno { 4. executa ao B 5. } Agora vamos aperfeioar os exemplos de estrutura de condio simples. Exemplo 5 - Aperfeioando o Exemplo 1 1. 2. 3. 4. 5. 6. var result = prompt("Qual a sua idade?"); if (result <= 18) { document.write("Voc menor de idade."); }else { document.write("Voc maior de idade."); }

Exemplo 6 - Aperfeioando o Exemplo 2 1. 2. 3. 4. 5. 6. 7. var numero = 4; if (numero%2 == 0) { document.write("O nmero par."); }else { document.write("O nmero mpar."); }

Parte III - Estrutura de Mltipla Escolha Nesta estrutura de mltipla escolha temos o case, cujo seu significado caso. Sua sintaxe : 1. switch(condio) { 2. case condio1: 3. ao1 4. break; 5. case condio2:

6. 7. 8. } 9.

ao2 break;

Em pseudocdigo: 1. escolha(condio) { 2. caso condioA: 3. ao A 4. break; 5. caso condioB: 6. ao B 7. break; 8. } Lembrando que as condies 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 especificao"; 18. break; 19. } 20. } 21. </script> 22. <body> 23. Escolha um nmeros 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 condio default caso nenhum das condies acima seja verdadeira ele executa a ao 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 especificao."; 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 ao. Tente digitar ao invs de javascript JaVaScRiPt, ele no vai executar a ao no caso javascript. Obs: O case as vezes a melhor opo quando temos vrias opes de escolhas. Veja o mesmo exemplo 8 [b]sem[/b] a utilizao 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. 2"; 7. 8.

document.getElementById('texto').innerHTML="Voc digitou }else if (op == 3) { 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 especificao"; 13. } 14. } 15. </script> 16. <body> 17. Escolha um nmeros 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.