Conhecendo JavaScript - Estruturas de Repetição
Estruturas de RepetiçãoEstruturas de repetição também conhecida como Loops ou laços, é uma estrutura que nos permite fazer repetição de um bloco de códigos ou de um comando até uma determinada condição de parada, onde finaliza sua repetição.
No JavaScript existe três estruturas de controle : while / do while / for
Antes de começarmos vamos criar um novo arquivo.html para testar nosso scritp.
While
While traduzindo para o português significa "enquanto", dessa maneira podemos pensar nessa estrutura que ela vai realizar sua repetição "Enquanto" algo não for satisfeito, ou seja, uma condição que faça ela parar, no caso de uma condição que não satisfaça ela fica no "enquanto" em entra em um loop infinito o que não é desejado.
As condições como já vimos no if - operadores de comparação e lógicos eles nos retornam true ou false, no caso do while se for true continua a repetição, false faz parar.
Sua sintaxe;
while(condicao){
//comando
}
Vamos testar criar e fazer algo mais prático. Primeiro vamos fazer o while percorrer do 1 ao 10.
/*atribuir a uma variável o valor 1
*Observação criar uma condição que não gere loop infinito*/
A ideia é mostrar do 1 ao 10 no Browser.
/*( Teste 1)*/
var i = 1;
while( i <=10 ){
document.write(i);
}
O resultado é um loop infinito que vai gerar uma sobrecarga e muita lentidão, pois a variável "i" sempre vai ser menor que 10.
(teste 2)
var i = 1;
while( i <=10 ){
document.write(i);
i++;
}
O resultado
Observe que fica mais claro agora seu entendimento, a variável "i" é menor que 10 , o while só vai parar quando o i for igual a 11, nesse caso usamos o pós-incremento (fazer teste com pré-incremento e analisar),
Do While
A estrutura Do While é diferente em sua escrita, em português "Do" traduzido significa "FAÇA", então temos "FAÇA" "ENQUANTO", dessa maneira sempre a primeira interação independente da condição será executa uma vez. No caso da estrutura While se a condição de entrada não for satisfeita ele não entra dentro do bloco de código, agora o "do" "while" sempre executa o que esta dentro do "do"na primeira vez.
Sintaxe:
do{
//comando
}while(condição);
Agora que sabemos sua sintaxe e seu funcionamento vamos começar a testar.
Para verificar se realmente sua interação acontece como descrito vamos exibir algo e passar false como condição.
do{
document.write("Estamos aqui");
}while(false);
Resultado.
(Teste 1)
var i = 1; //variavel inicializada
do{
document.write(i + "</br>");
}while(i <=10);
Mas agora se observar não temos uma logica que faça parar é necessário que a variável seja incrementada a cada loop até ser 11, ou seja , adicionar i++ a nosso laço. Só prestar atenção o "i" começa com valor 1, exibe 1 e é incrementado no final e depois a condição faz a verificação, então como exemplo se "i" = 9 , exibe 9 e depois incrementa i++ = 10, (i<=10) = true, retorna o loop exibe 10, i++ = 11, verifica a condição que recebe false e dessa maneira o laço termina.
(Teste 2)
var i = 1; //variavel inicializada
do{
document.write(i + "</br>");
i++;
}while(i <=10);
Resultado.
Comando Break
O comando break é utilizado para quebrar o laço, ou seja, ele sai do loop , segue exemplo simples.
var i = 1; //variavel inicializada
do{
document.write(i + "</br>");
i++;
if( i == 6 ){
break;
}
}while(i <=10);
Resultado como esperado ele sai do loop, no momento que entra no IF e chega no break;
Comando Continue
O comando continue pula uma iteração do laço, porem sem uma logica especifica ele entra em loop infinito, repare no exemplo acima o incremento de i++ foi implementado antes da condição if, porem se ela estivesse abaixo do if.
var i = 1; //variavel inicializada
do{
document.write(i + "</br>");
//i++;
if( i == 6 ){
break;
}
i++;
}while(i <=10);
O break não quebraria o loop no valor imaginado pois ele incrementa seu valor depois do if
exemplo se ( "i"=5 depois i == 5 /false , i++ = 6 / repete exibe 6 / i ==6 / true), da mesma maneira imaginamos para o uso do continue. Como ele pula uma iteração do laço pode se dizer que ele vai pular toda a instrução que esta abaixo, dependendo da condição que estão no loop ele acaba entrando loop infinito.
exemplo ( "i"=5 depois i == 5 /false , i++ = 6 / repete e exibe 6 / i == 6 / true, agora use o continue / o ainda vale i=6 )
do{
document.write(i + "</br>");
//i++;
if( i == 6 ){
continue;
}
i++;
}while(i <=10); // gera loop infinito
-----------------------------------------------------------------------------------------------
do{
document.write(i + "</br>");
i++;
if( i == 6 ){
i++;
continue;
}
//i++;
}while(i <=10);
Resultado;
For
O comando for é simples em sua estrutura e de fácil visualização lógica, o for recebe uma variável como ponto inicial, uma condição de parada e o incremento, eles são divididos por ponto e virgula.
Sintaxe:
for(variavel;condição;incremento){
//bloco de código
}
A maior diferença esta na variável que é passada no inicio como parametro dentro do for, e também é necessária sua inicialização a condição em seguida verifica essa variável até atingir o desejado, e o incremento faz seu papel como já foi visto .
Assim podemos elaborar nosso exemplo:
for(var i =0 ; i<10 ; i++){
document.write(i + "</br>");
}
Resultado.
Nesse momento é bom fazer mais testes e verificar sua possibilidades, o uso de While ou For passa a ser algo mais de gosto. No próximo post estaremos estudando funções para ampliar mais ainda nossa fixação de conhecimento.
Até Mais
Comentários
Postar um comentário