JavaScript/Controle de fluxo: mudanças entre as edições
imported>Torneira m (Torneira moveu a página JavaScript/Fluxo de Controle para JavaScript/Controle de fluxo) |
imported>Guiwp mSem resumo de edição |
||
Linha 9: | Linha 9: | ||
O bloco de comando começa pelo abre chave <code>{</code> e finaliza com o fecha chave <code>}</code>, o ultimo elemento não necessáriamente necessita de finalizar com ponto e virgula <code>;</code>, mas se terminar não terá problemas, este ultimo ponto e virgula é opcional. | O bloco de comando começa pelo abre chave <code>{</code> e finaliza com o fecha chave <code>}</code>, o ultimo elemento não necessáriamente necessita de finalizar com ponto e virgula <code>;</code>, mas se terminar não terá problemas, este ultimo ponto e virgula é opcional. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
{ | { | ||
comando; | comando; | ||
Linha 20: | Linha 20: | ||
Ou então: | Ou então: | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
{ | { | ||
comando; | comando; | ||
Linha 35: | Linha 35: | ||
Por exemplo, se for necessário dar um alerta ao usuário, conforme a hora, podemos fazer o seguinte: | Por exemplo, se for necessário dar um alerta ao usuário, conforme a hora, podemos fazer o seguinte: | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
var hora = new Date().getHours(); | var hora = new Date().getHours(); | ||
if (hora < 12) | if (hora < 12) | ||
Linha 47: | Linha 47: | ||
Note que as três comparações serão feitas, independente da execução, isto é uma perda de tempo, pois se é de dia não pode ser tarde, neste caso anexamos a estrutura do <code>if</code> o comando <code>else</code> que executa o comando a seguir caso o resultado da expressão lógica seja <code>false</code>, ficando o nosso código assim. | Note que as três comparações serão feitas, independente da execução, isto é uma perda de tempo, pois se é de dia não pode ser tarde, neste caso anexamos a estrutura do <code>if</code> o comando <code>else</code> que executa o comando a seguir caso o resultado da expressão lógica seja <code>false</code>, ficando o nosso código assim. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
var hora = new Date().getHours(); | var hora = new Date().getHours(); | ||
if (hora < 12) | if (hora < 12) | ||
Linha 59: | Linha 59: | ||
Para tornar mais legível podemos escrever da seguinte forma: | Para tornar mais legível podemos escrever da seguinte forma: | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
var hora = new Date().getHours(); | var hora = new Date().getHours(); | ||
if (hora < 12) { | if (hora < 12) { | ||
Linha 78: | Linha 78: | ||
Executa ''bloco'' enquanto ''condição'' resultar em verdadeiro. | Executa ''bloco'' enquanto ''condição'' resultar em verdadeiro. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
while (condição) { bloco; } | while (condição) { bloco; } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Linha 84: | Linha 84: | ||
Igual ao anterior, porém o bloco é executado pelo menos uma vez, mesmo que a condição seja falsa. | Igual ao anterior, porém o bloco é executado pelo menos uma vez, mesmo que a condição seja falsa. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
do { bloco; } while (condição); | do { bloco; } while (condição); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Linha 92: | Linha 92: | ||
Se o conteúdo da ''variável'' for igual a <code>constante1</code> ou <code>constante2</code> será executado o <code>comando1</code>; se for igual a <code>constante3</code> será executado o <code>comando2</code>; caso contrário será executado o <code>comando3</code>; note que o comando <code>break</code> força o fluxo sair fora do comando <code>switch</code>. | Se o conteúdo da ''variável'' for igual a <code>constante1</code> ou <code>constante2</code> será executado o <code>comando1</code>; se for igual a <code>constante3</code> será executado o <code>comando2</code>; caso contrário será executado o <code>comando3</code>; note que o comando <code>break</code> força o fluxo sair fora do comando <code>switch</code>. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
switch(variável) { | switch(variável) { | ||
case constante1: | case constante1: | ||
Linha 110: | Linha 110: | ||
Efetua uma inicialização em seguida executa o comando enquanto a ''condição'' for verdadeira, após a execução do comando executa a ''expressão'' de ''incremento'', ex: | Efetua uma inicialização em seguida executa o comando enquanto a ''condição'' for verdadeira, após a execução do comando executa a ''expressão'' de ''incremento'', ex: | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
/* | /* | ||
* for(inicialização; condição; incremento) | * for(inicialização; condição; incremento) | ||
Linha 129: | Linha 129: | ||
O label permite que a indicação de uma ''posição'' que pode ser utilizado com <code>continue</code> e <code>break</code> para salto dentro de um ''loop'' (laço). | O label permite que a indicação de uma ''posição'' que pode ser utilizado com <code>continue</code> e <code>break</code> para salto dentro de um ''loop'' (laço). | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
label: | label: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Linha 137: | Linha 137: | ||
Salta para loop ou para loop que está após label indicado. | Salta para loop ou para loop que está após label indicado. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
continue; | continue; | ||
continue label; | continue label; | ||
Linha 146: | Linha 146: | ||
Sai fora do loop corrente ou do loop que esta após label informado. | Sai fora do loop corrente ou do loop que esta após label informado. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
break; | break; | ||
break label; | break label; | ||
Linha 155: | Linha 155: | ||
Lança ''exceção''. | Lança ''exceção''. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
throw expressão; | throw expressão; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Linha 165: | Linha 165: | ||
Abaixo o <code>comando2</code> será executado caso <code>comando1</code> lance uma exceção. | Abaixo o <code>comando2</code> será executado caso <code>comando1</code> lance uma exceção. | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
try { | try { | ||
comando1; | comando1; | ||
Linha 175: | Linha 175: | ||
Abaixo o <code>comando3</code> será executado caso a exceção lançada pelo <code>comando1</code> seja igual a <code>expressão1</code>, se for igual a <code>expressão2</code> o <code>comando4</code> será executado, se for lançado uma exceção que não seja igual nem a <code>expressão1</code> e nem a <code>expressão2</code> será executado o <code>comando2</code>; | Abaixo o <code>comando3</code> será executado caso a exceção lançada pelo <code>comando1</code> seja igual a <code>expressão1</code>, se for igual a <code>expressão2</code> o <code>comando4</code> será executado, se for lançado uma exceção que não seja igual nem a <code>expressão1</code> e nem a <code>expressão2</code> será executado o <code>comando2</code>; | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
try { | try { | ||
comando1; | comando1; | ||
Linha 189: | Linha 189: | ||
Executa <code>comando1</code> se este lançar uma exceção executa <code>comando2</code> em seguida <code>comando3</code>, se <code>comando1</code> não lançar nenhuma exceção executa <code>comando3</code>; | Executa <code>comando1</code> se este lançar uma exceção executa <code>comando2</code> em seguida <code>comando3</code>, se <code>comando1</code> não lançar nenhuma exceção executa <code>comando3</code>; | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
try { | try { | ||
comando1; | comando1; | ||
Linha 201: | Linha 201: | ||
'''Exemplo''': | '''Exemplo''': | ||
<syntaxhighlight lang="javascript" style="overflow:auto"> | <syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | ||
var x = [["adao"], ["eva"], ["caim"], ["abel"]]; | var x = [["adao"], ["eva"], ["caim"], ["abel"]]; | ||
Edição das 19h43min de 27 de dezembro de 2013
Controlando o que e quando é executado um comando, faz parte de todas as linguagens, e o JavaScript não é diferente.
Existem vários comandos, que por isto são tratados como palavras reservadas e portanto não devem ser utilizados como identificadores de variáveis ou constantes.
Bloco de comandos
No JavaScript, o bloco de comandos é uma estrutura para agrupar outros comandos.
O bloco de comando começa pelo abre chave {
e finaliza com o fecha chave }
, o ultimo elemento não necessáriamente necessita de finalizar com ponto e virgula ;
, mas se terminar não terá problemas, este ultimo ponto e virgula é opcional.
{
comando;
comando;
...
comando
}
Ou então:
{
comando;
comando;
...
comando;
}
Comando If
Talvez um dos comandos mais utilizados em todas as linguagens de programação, o if
é um comando utilizado para tomar a decisão de executar o próximo comando baseado numa expressão lógica, se esta expressão for verdadeira o próximo comando é executado, caso contrário ele é ignorado.
Por exemplo, se for necessário dar um alerta ao usuário, conforme a hora, podemos fazer o seguinte:
var hora = new Date().getHours();
if (hora < 12)
alert("bom dia");
if (hora >= 12 && hora < 18)
alert("boa tarde");
if (hora >= 18)
alert("boa noite");
Note que as três comparações serão feitas, independente da execução, isto é uma perda de tempo, pois se é de dia não pode ser tarde, neste caso anexamos a estrutura do if
o comando else
que executa o comando a seguir caso o resultado da expressão lógica seja false
, ficando o nosso código assim.
var hora = new Date().getHours();
if (hora < 12)
alert("bom dia");
else if (hora >= 12 && hora < 18)
alert("boa tarde");
else
alert("boa noite");
Para tornar mais legível podemos escrever da seguinte forma:
var hora = new Date().getHours();
if (hora < 12) {
alert("bom dia");
} else {
if (hora >= 12 && hora < 18) {
alert("boa tarde");
} else {
alert("boa noite");
}
}
Assim torna mais legível a o comando executado, sem falar que usando blocos de comandos podemos agrupar mais de um comando.
Comando While
Executa bloco enquanto condição resultar em verdadeiro.
while (condição) { bloco; }
Igual ao anterior, porém o bloco é executado pelo menos uma vez, mesmo que a condição seja falsa.
do { bloco; } while (condição);
Comando Switch
Se o conteúdo da variável for igual a constante1
ou constante2
será executado o comando1
; se for igual a constante3
será executado o comando2
; caso contrário será executado o comando3
; note que o comando break
força o fluxo sair fora do comando switch
.
switch(variável) {
case constante1:
case constante2:
comando1;
break;
case constante3:
comando2;
break;
default:
comando3;
}
Comando for
Efetua uma inicialização em seguida executa o comando enquanto a condição for verdadeira, após a execução do comando executa a expressão de incremento, ex:
/*
* for(inicialização; condição; incremento)
* comando;
*/
for (var i = 0; i < 3; i++)
alert(i);
//É equivalente a:
var i = 0;
while (i < 3) {
alert(i);
i = i + 1;
}
Comando label
O label permite que a indicação de uma posição que pode ser utilizado com continue
e break
para salto dentro de um loop (laço).
label:
Comando continue
Salta para loop ou para loop que está após label indicado.
continue;
continue label;
Comando break
Sai fora do loop corrente ou do loop que esta após label informado.
break;
break label;
Comando throw
Lança exceção.
throw expressão;
Comando try
Captura qualquer erro que um comando lance e captura exceções conforme expressão.
Abaixo o comando2
será executado caso comando1
lance uma exceção.
try {
comando1;
} catch(e) {
comando2;
}
Abaixo o comando3
será executado caso a exceção lançada pelo comando1
seja igual a expressão1
, se for igual a expressão2
o comando4
será executado, se for lançado uma exceção que não seja igual nem a expressão1
e nem a expressão2
será executado o comando2
;
try {
comando1;
} catch(e if e == expressao1) {
comando3;
} catch(e if e == expressão2) {
comando4;
} catch(e) {
comando2;
}
Executa comando1
se este lançar uma exceção executa comando2
em seguida comando3
, se comando1
não lançar nenhuma exceção executa comando3
;
try {
comando1;
} catch(e) {
comando2;
} finally {
comando3;
}
Exemplo:
var x = [["adao"], ["eva"], ["caim"], ["abel"]];
for (i = 0; i < 100; i++) {
try {
document.writeln("x[", i, "][0] = ", x[i][0], "<br />");
} catch (e) {
document.writeln(e, "<br />");
break;
}
}
Observação: no exemplo acima, caso x
fosse um vetor (Array
de uma dimensão), não haveria erro, mas o loop
continuaria, apresentando
x[4] = undefined
, x[5] = undefined
, e assim por diante.