Web Sites com Ajax

JavaScript

Loops

As declarações de looping em JavaScript, assim como em outras linguagens, tem por objetivo a execução de um mesmo bloco de código por uma determinada quantidade de vezes ou enquanto uma condição for verdadeira.

Neste tópico conheceremos as declarações de looping:

Declaração for
Looping que percorre determinado bloco de código por uma quantidade especificada de vezes.
Declaração while
Looping que percorre determinado bloco de código se e enquanto a condição for verdadeira.
Declaração do...while
Esse loop é uma variável do loop while. Ele sempre executará um bloco de código uma vez e o repetirá enquanto a condição for verdadeira.
Mesmo que uma condição seja falsa, esse loop ocorrerá uma vez pois a condição é verificada após a execução.
Declaração break e continue
São declarações especiais para se trabalhar com looping.
O break interrompe o looping e prossegue com o restante do código (se houver).
O continue pára o loop atual e continua com o próximo valor.

Você entenderá melhor nos exemplos abaixo.

Loop For

Sintaxe

for (var = valorInicial; var <= valorFinal; var = var + incremento) {
 //código a ser executado.
}

Exemplo

var numero = 1;

for (numero = 1; numero <= 5; numero++) {
 alert("O número atual é: " + numero);
}

No exemplo acima temos a variável numero que inicia com 1 e em seguida um loop for que funciona da seguinte maneira: temos o valor inicial (1) e o valor final (5) para a variável numero, seguido de um incremento (++). Isso significa dizer que o loop iniciará com a variável numero com o valor 1 e finalizará quando ela alcançar um valor menor ou igual a 5.

O código a ser executado será uma mensagem de alerta dizendo ao usuário o número atual do looping.

Veja a demonstração do Loop For.

Loop while

Sintaxe

while (var <= valorFinal) {
 //código a ser executado.
}

Exemplo

var numero = 1;

while (numero <= 5) {
 alert("O número atual é: " + numero);
 numero = numero + 1;
}

O exemplo do loop while é semelhante ao do loop for. O resultado de ambos são os mesmos, porém eles se diferenciam pelas suas características.

No exemplo do while, começamos informando o valor final (5) da variável numero, em seguida, o código a ser executado e, por fim, o incremento da variável em questão (numero).

Veja a demonstração do Loop while.

Loop do...while

Sintaxe

do {
 //código a ser executado.
} while (var <= valorFinal);

Exemplo

var numero = 1;

do {
 alert("O número atual é: " + numero);
 numero = numero + 1;
} while (numero < 1).

No exemplo acima, temos a condição (numero < 1) indicando que a variável numero é menor do que 1, ou seja, 0. Logo, o loop não deveria ser executado.

Entretanto, como expliquei anteriormente, o loop do verifica a condição após ser executado e, devido a isso, ocorreu a execução do loop.

Demonstração do Loop do...while.

Break e Continue

Exemplo - break

var numero = 95;

for (numero = 95; numero < 150; numero++) {
 if(numero == 100) {
  break;
 }
 alert("Número: " + numero);
}

Neste exemplo, o loop for deveria ocorrer até o número 149 (numero < 150). Porém, utilizamos à condição if para detectar quando a variável numero estiver no número 100.

Quando isto ocorrer, utilizamos o comando break para interromper o loop, assim, chegaremos somente até o número 100.

Veja a demonstração do Break.

Exemplo - continue

var idade = 20;

for (idade = 20; idade <= 25; idade++) {
 if(idade == 24) {
  continue;
 }
 alert("Você tem " + idade + " anos ?");
}

Conforme dito anteriormente, o comando continue interrompe o loop em um determinado momento e continua com o mesmo.

No exemplo acima, o loop for deveria rodar do número 20 até o 25, porém o comando continue interrompe a exibição do número 24.

Demonstração do Continue.