Olá! Monday, 09 de December de 2024.



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 é:

if (condição) {     ação }

Seu peseudocódigo:

se (condição) for verdadeira {     execute as ações }


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

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

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

Exemplo 2

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


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

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


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:

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


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:

3 é menor que 4 - verdadeiro 10 é igual a 10 - verdadeiro

Ficamos assim:

verdadeiro && verdadeiro

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

1 && 1

Vamos verificar na nossa tabela verdade:

1 && 1 = 1

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

Exemplo 4 - OR

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

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

0 || 1

Segundo nossa tabela verdade:

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 é:

if (condição) {     ação A }else {     ação B }


Seu pseudocódigo:

se (condição) então {     executa a ação A }senão {     executa ação B }

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

Exemplo 5 - Aperfeiçoando o Exemplo 1

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 - Aperfeiçoando o Exemplo 2

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


Parte III - Estrutura de Múltipla Escolha

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

Sua sintaxe é:

switch(condição) {     case condição1:         ação1     break;     case condição2:         ação2     break; }

Em pseudocódigo:

escolha(condição) {     caso condiçãoA:         ação A     break;     caso condiçãoB:         ação B     break; }

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

Exemplo 7 - Case com Inteiro

    Escolha um números de 1 a 4:            

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

    Digite as seguintes palavras: codigofonte, php, javascript, css.                

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

    Escolha um números de 1 a 4:            


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 » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010