JavaScript/Controle de fluxo: mudanças entre as edições
imported>He7d3r.bot (limpeza da sintaxe, replaced: ← → ←, ↑ → ↑, → → → utilizando AWB) |
imported>Guiwp |
||
(35 revisões intermediárias por 6 usuários não estão sendo mostradas) | |||
Linha 1: | Linha 1: | ||
Controlando o que e quando é executado um comando, faz parte de todas as linguagens, e o | 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. | 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 <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="max-height:200px;overflow:auto"> | |||
{ | |||
comando; | |||
comando; | |||
... | |||
comando | |||
} | |||
</syntaxhighlight> | |||
Ou então: | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
{ | |||
comando; | |||
comando; | |||
... | |||
comando; | |||
} | |||
</syntaxhighlight> | |||
== Comando If == | |||
Talvez um dos comandos mais utilizados em todas as ''linguagens de programação'', o <code>if</code> é 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: | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
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"); | |||
</syntaxhighlight> | |||
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="max-height:200px;overflow:auto"> | |||
var hora = new Date().getHours(); | |||
if (hora < 12) | |||
alert("bom dia"); | |||
else if (hora >= 12 && hora < 18) | |||
alert("boa tarde"); | |||
else | |||
alert("boa noite"); | |||
</syntaxhighlight> | |||
Para tornar mais legível podemos escrever da seguinte forma: | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
var hora = new Date().getHours(); | |||
if (hora < 12) { | |||
alert("bom dia"); | |||
} else { | |||
if (hora >= 12 && hora < 18) { | |||
alert("boa tarde"); | |||
} else { | |||
alert("boa noite"); | |||
} | |||
} | |||
</syntaxhighlight> | |||
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. | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
while (condição) { bloco; } | |||
</syntaxhighlight> | |||
Igual ao anterior, porém o bloco é executado pelo menos uma vez, mesmo que a condição seja falsa. | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
do { bloco; } while (condição); | |||
</syntaxhighlight> | |||
== Comando Switch == | |||
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="max-height:200px;overflow:auto"> | |||
switch(variável) { | |||
case constante1: | |||
case constante2: | |||
comando1; | |||
break; | |||
case constante3: | |||
comando2; | |||
break; | |||
default: | |||
comando3; | |||
} | |||
</syntaxhighlight> | |||
== 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: | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
/* | |||
* 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++; | |||
} | |||
</syntaxhighlight> | |||
== Comando label == | |||
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="max-height:200px;overflow:auto"> | |||
label: | |||
</syntaxhighlight> | |||
== Comando continue == | |||
Salta para loop ou para loop que está após label indicado. | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
continue; | |||
continue label; | |||
</syntaxhighlight> | |||
== Comando break == | |||
Sai fora do loop corrente ou do loop que esta após label informado. | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
break; | |||
break label; | |||
</syntaxhighlight> | |||
== Comando throw == | |||
Lança ''exceção''. | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
throw expressão; | |||
</syntaxhighlight> | |||
== Comando try == | |||
Captura qualquer ''erro'' que um comando lance e ''captura'' ''exceções'' conforme ''expressão''. | |||
Abaixo o <code>comando2</code> será executado caso <code>comando1</code> lance uma exceção. | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
try { | |||
comando1; | |||
} catch(e) { | |||
comando2; | |||
} | |||
</syntaxhighlight> | |||
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="max-height:200px;overflow:auto"> | |||
try { | |||
comando1; | |||
} catch(e if e == expressão1) { | |||
comando3; | |||
} catch(e if e == expressão2) { | |||
comando4; | |||
} catch(e) { | |||
comando2; | |||
} | |||
</syntaxhighlight> | |||
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="max-height:200px;overflow:auto"> | |||
try { | |||
comando1; | |||
} catch(e) { | |||
comando2; | |||
} finally { | |||
comando3; | |||
} | |||
</syntaxhighlight> | |||
'''Exemplo''': | |||
<syntaxhighlight lang="javascript" style="max-height:200px;overflow:auto"> | |||
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; | |||
} | |||
} | |||
</syntaxhighlight> | |||
{{Obs|No exemplo acima, caso <code>x</code> fosse um ''vetor'' (<code>Array</code> de uma dimensão), não haveria erro, mas o <code>loop</code> continuaria, apresentando <code><nowiki>x[4] = undefined</nowiki></code>, <code><nowiki>x[5] = undefined</nowiki></code>, e assim por diante.}} | |||
{{AutoCat}} |
Edição atual tal como às 23h29min de 16 de janeiro de 2014
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++;
}
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 == expressão1) {
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;
}
}