Olá! Quarta Feira, 08 de Fevereiro de 2012.



Dicas CódigoFonte.net
Quarta Feira, 20 de Janeiro 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)

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


OR (ou)

p  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 <strong>E</strong> 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

<script language="JavaScript">
function escolher(op) {
    switch (op) {
        case '1':
            document.getElementById("texto").innerHTML="Você digitou 1";
        break;
        case '2':
            document.getElementById('texto').innerHTML="Você digitou 2";
        break;
        case '3':
            document.getElementById('texto').innerHTML="Você digitou 3";
        break;
        case '4':
            document.getElementById('texto').innerHTML="Você digitou 4";
        break;
        default:
                document.getElementById('texto').innerHTML="Sem especificação";
        break;
    }
}
</script>
<body>
    Escolha um números de 1 a 4:
    <input type="text" id="valor">
    <input type="button" value="Escolha" onclick="escolher(valor.value);">
    <div id="texto"></div>
</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

<script language="JavaScript">
function escolher(op) {
    switch (op) {
        case 'codigofonte':
            document.getElementById("texto").innerHTML="<a href='http://www.codigofonte.net'>codigofonte</a>";
        break;
        case 'php':
            document.getElementById('texto').innerHTML="Você digitou <b>PHP</b>";
        break;
        case 'javascript':
            document.getElementById('texto').innerHTML="Você digitou <b>JavaScript</b>";
        break;
        case 'css':
            document.getElementById('texto').innerHTML="Você digitou <b>CSS</b>";
        break;
        default:
                document.getElementById('texto').innerHTML="Sem especificação.";
        break;
    }
}
</script>
<body>
    Digite as seguintes palavras: codigofonte, php, javascript, css.
    <input type="text" id="valor">
    <input type="button" value="Escolha" onclick="escolher(valor.value);">
    <input type="button" value="Escolha" style="display:none">
    <div id="texto"></div>
</body>

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

<script language="JavaScript">
function escolher(op) {
    if (op == 1) {
        document.getElementById("texto").innerHTML="Você digitou 1";
    }else if (op == 2) {
        document.getElementById('texto').innerHTML="Você digitou 2";
    }else if (op == 3) {
        document.getElementById('texto').innerHTML="Você digitou 3";
    }else if (op == 4) {
        document.getElementById('texto').innerHTML="Você digitou 4";
    }else {
        document.getElementById('texto').innerHTML="Sem especificação";
    }
}
</script>
<body>
    Escolha um números de 1 a 4:
    <input type="text" id="valor">
    <input type="button" value="Escolha" onclick="escolher(valor.value);">
    <div id="texto"></div>
</body>


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

Enviar um Artigo
Enviado por: Andre

Comentários do artigo [Novo comentário]

manaceias martins dos santos - 16 de Fevereiro 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:
contato slide validação formulario html java botões fonte contador de visita sistema webradio ftp login cookie atendimento script scroll orçamento noticias loading mural c janela contador de visitantes música rádio online mysql rádio usuários online busca interna editor

» Busca avançada

Siga-nos no Twitter







» Procurando iPhones?
... e que tal iPods?





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

Procurando Notebooks, Câmeras Digitais, iPhones?

CompreDeTudo.com