Estruturas de Controle

Instrução if

A estrutura if é usada quando se deseja verificar se determinada expressão é verdadeira ou não, e, caso verdadeira, executar comandos específicos.

SINTAXE

if (condicao) comandos

Instrução if-else

A estrutura if... else é utilizada para realizar controle de fluxo baseado em expressões condicionais.

Em outras palavras, a estrutura if é usada quando se deseja verificar se determinada expressão é verdadeira ou não, e executar comandos específicos para cada caso.

if (condição) { // instruções caso condição == true } else if (condição 2) { // instruções caso condição 2 == true } else { // instruções caso ambas as condições sejam false }

Realiza determinada ação de acordo com uma condição. Sua sintaxe básica é: if (condição) { comandos } else { comandos } Caso haja mais de uma condição a ser avaliada pode-se fazer o uso da instrução ELSE IF. Observe sua sintaxe: if (condição) { comandos } else if (condição2) { comandos } else { comandos } Veja um exemplo da utilização da instrução if: <script> function condicao(){ if(form1.nome.value==""){ alert("Favor Preencher o campo"); return form1.nome.focus(); } } </script>

<form name="form1"> 

Nome: <input type="text" name="nome" onBlur="condicao(this.value)"> Neste exemplo foi criada uma função que testará o conteúdo da variável nome, que ocorrerá assim que o usuário retirar o foco do campo, caso o valor da variável esteja vazio, será exibida uma mensagem de alerta informando para o preenchimento e em seguida o foco será retornado para o campo nome. Em caso contrário, o script continuará seu processamento normal até o fim. Criaremos agora uma condição alternativa para quando o campo não estiver vazio, observe: <script> function condicao(){ if(form1.nome.value==""){ alert("Favor Preencher o campo"); return form1.nome.focus(); }else{ alert("Obrigado, "+form1.nome.value); return form1.nome.select(); } } </script>

<form name="form1"> Nome: <input type="text" name="nome" onBlur="condicao(this.value)"> Já neste exemplo, foi definido a instrução else que determinará o que deve ocorrer caso a condição seja falsa. No exemplo anterior, caso o campo não esteja vazio será exibida outra mensagem de alerta em em seguida foi definido que como retorno o texto do campo será selecionado. Além dos métodos condicionais apresentados, a linguagem JavaScript suporta um método alternativo para criar expressões condicionais. Este método já suportado em outras linguagens de programação permite ao usuário construir um exemplo prático e simples para sua utilização. Sua sintaxe básica tem a seguinte formação: (condição) ? Valor verdadeiro : Valor falso; Onde é condição, é a expressão à ser avaliada. Onde é Valor verdadeiro, especifica a ação que ocorrerá se a condição for verdadeira. Onde é Valor falso, especifica a ação que ocorrerá caso a condição seja falsa. Veja abaixo um exemplo de utilização deste tipo de expressão condicional: exemplo=prompt("Digite seu nome ou clique em Cancelar.",""); (exemplo==null) ? alert("O usuário Cancelou!") : alert("O usuário digitou: "+exemplo); Assim como na maioria das linguagens de programação a instrução if não está limitada a utilização apenas do sinal de igualdade (==). O usuário poderá fazer diferentes tipos de testes lógicos como se os valores são diferentes, maior que ou menor que, entre outros.

Exemplo: ] var a = 12; var b = 5; if (a == b) { window.alert("12 é igual a 5?!?!"); } else { window.alert("a é diferente de b"); } // No caso acima a frase escrita seria "a é diferente de b"

if (ano < 0) { alert("Digite um ano D.C."); } else if ( ((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0)) { alert(ano + " é bissexto!"); } else { alert(ano + " não é bissexto!"); } A operação do if...else pode ser realizada também de uma forma mais compacta (e geralmente menos legível) através do operador condicional. A sua sintaxe é expressão ? instruções se expressão=true : instruções se expressão=false Exemplo: ano = 1994; teste = ((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0)); alert ( teste ? ano + " não é bissexto!" : ano + " é bissexto!" );

Exemplo 2: var a = 10; if (a < 6) { window.alert("a menor que 6"); } else if (a > 6) { window.alert("a maior que 6"); } else { window.alert("se a não é maior nem menor que 6, a é 6!"); }

Instrução while

A instrução while realiza uma ação enquanto determinada condição for satisfeita. Sua sintaxe básica é: while (expressão) { comandos } Veja no exemplo seguinte a utilização do laço while que é repetido por total de 10 vezes: num=0; while(num<10){ document.write("Número: "+num+"
"); num++; } Neste exemplo, foi definido a variável num com o valor zero, em seguida este valor é comparado na condição while que é num<10, que caso seja verdadeira a variável num é incrementada com mais 1 e exibido na tela, quando ele atinge o valor limite que é 10, o código é desviado para a primeira condição após o laço. Veja agora um exemplo prático de sua utilização:

<script>

function condicao(){

while(form1.nome.value==""){
alert("Favor Preencher o campo");
form1.nome.value=prompt("Digite seu nome agora","");
}
alert("Obrigado, "+form1.nome.value);
}
</script>

 <form name="form1">
 Nome:
 <input type="text" name="nome" onBlur="condicao(this.value)">
 </script> 

Instrução for

As estruturas for e while são usadas para repetições baseadas em condições. O bloco for contém de três parâmetros opcionais: uma inicialização, uma condição e um incremento. A sintaxe é a seguinte: for(inicialização; condição; incremento) { // instruções a serem realizadas enquanto condição for true } Por exemplo: for (i = 0; i < 10; i = i + 1) {

document.write("

Linha " + i); } Neste exemplo, a variável i é local ao bloco for (ela não é conhecida fora do bloco. Para que ela seja visível fora do bloco é preciso que ela seja declarada fora dele. A primeira coisa realizada no bloco for é a inicialização. É feita uma vez apenas. A condição é testada cada vez que o loop é reiniciado. O incremento é realizado no final de cada loop. Os elementos do for são todos opcionais. A mesma expressão acima poderia ser realizada da maneira abaixo: i = 0; for (; i < 10;) { document.write("

Linha " + i); i++; } A única diferença entre esta forma e a anterior é que a variável i agora é visível fora do bloco for (não é mais uma variável local ao bloco): Uma instrução do tipo: for (;;) { document.write("

Linha"); } é interpretada como um loop infinito. Loops infinitos em blocos <SCRIPT> de páginas HTML fazem com que a carga de uma página nunca termine. Em alguns browsers, o texto acima nunca será exibido. Em outros, pode fazer o browser travar. INSTRUÇÃO FOR A instrução for realiza uma ação até que determinada condição seja satisfeita. Sua sintaxe básica é: for (início;condição;incremento) { comandos } O início determina o valor inicial do laço for. Normalmente é 0 ou 1, porém poderá ser especificado qualquer outro valor. O valor especificado é atribuído em uma variável, por exemplo i=0, count=1. A condição determina a expressão que irá controlar o número de repetições do laço. Enquanto esta expressão for verdadeira, o laço continuará, caso o laço seja falso, o laço terminará. Por exemplo: i<20. Enquanto o valor de i for menor que 20, a condição é verdadeira. O incremento determina como o laço irá contar, de 1 em 1, 2 em 2, 5 em 5, 10 em 10, enfim. Exemplo: i++. Será aumentado o valor da variável i a cada repetição. Diferente de todas as outras linguagens, em JavaScript, a instrução for, utiliza ponto e vírgula para separar os argumentos ao invés de vírgula. Vejamos um exemplo prático de utilização do laço for que conta valores de 1 até 10, acrescentando um valor de cada vez: <script> for (i=1 ; i<=10 ; i++){ document.write("número: "+ i +"
"); } </script> i é a variável utilizada para armazenar o contador do laço for. Logo mais, o laço inicia com 1 e continua até 10. A expressão condicional é i<10 (i é menor que 10). Enquanto a expressão condicional for verdadeira, o laço for continua. No incremento, a cada repetição do laço será adicionado a variável i mais 1. Veja outro exemplo: <script> for (i=1 ; i<=10 ; i=i+2){ document.write("iteração: "+i+"
"); } </script>

INSTRUÇÃO FOR...IN

Podemos dizer que o laço for...in é uma versão especial da instrução for, que é usada para saber os nomes de propriedades e conteúdos das propriedades de objetos no JavaScript. Esta instrução é muito usada na depuração de códigos. Por exemplo, caso uma parte do código JavaScript não esteja funcionando corretamente e existe uma suspeita de que existe uma falha do objeto JavaScript, o usuário poderá usar for...in para examinar as propriedades do objeto usado. Sua sintaxe é formada da seguinte maneira: for (variável in objeto){ instruções; } Veja pelo exemplo a seguir, o uso do laço for...in para determinar as propriedades do objeto navigator que contém informações sobre o browser. Ao listar todas as propriedades do objeto, o laço automaticamente se encerrará: for (teste in document){ alert(teste); } Neste laço, foi criado uma variável chamada teste que foi atribuído o conteúdo do objeto document. Dentro do laço foi executado a instrução alert que exibe o conteúdo da variável teste.

RETURN

Esta instrução tem como finalidade marcar o final de uma função. A linguagem JavaScript ao encontrar esta instrução ele irá retornar para o ponto imediatamente após a chamada da função. Ela ainda pode ser definida com um valor de retorno ou não. Quando um valor é incluído com esta instrução, a função irá retornar este valor definido pela instrução. Quando um valor não é inclído com a instrução return, então a função retorna um valor nulo. Por padrão, esta instrução jamais é usada fora de uma função. Quando isto acontece, a linguagem irá retornar um erro quando a mesma estiver definida fora de uma função. Os parênteses apresentados no exemplo abaixo não são obrigatórios. Vejamos alguns exemplos de scripts usando a instrução return. <script>

</script>

Instrução SWITCH

Esta instrução é bem semelhante com uma estrutura IF, porém é mais eficiente em razão de ser mais simples sua utilização e seu entendimento.

As estruturas do tipo switch são usadas quando queremos selecionar uma opção dentre várias disponíveis.

Veja

a sintaxe utilizada para o uso de instruções SWITCH: switch (expressão){ case CONSTANTE: comandos; break; case CONSTANTE2: comandos; break; case default: comandos; break;

---

<< AULA 6 - Objetos	AULA 7 - Estruturas de Controle	AULA 8 - Funções >>

<<= Página do curso