JavaScript enquanto Loop

Índice

    Mostrar índice

Loops podem executar um bloco de código desde que uma condição especificada seja verdadeira.

O loop while

O loop while percorre um bloco de código desde que uma condição especificada seja verdadeira.

Sintaxe

while (condition) {
      // code block to be executed
 }

Exemplo

No exemplo a seguir, o código no loop será executado repetidamente, desde que uma variável (i) é menor que 10:

Exemplo

while (i < 10) {
    text += "The number is " + i;
    i++;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript While Loop</h2>

<p id="demo"></p>

<script>
let text = "";
let i = 0;
while (i < 10) {
  text += "<br>The number is " + i;
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Se você esquecer de aumentar a variável usada na condição, o loop nunca terminará. Isso travará seu navegador.

O loop do while

O loop do while é uma variante do loop while. Este ciclo irá execute o bloco de código uma vez, antes de verificar se a condição é verdadeira, então ele irá repita o loop enquanto a condição for verdadeira.

Sintaxe

do {
      // code block to be executed
}
while (condition);

Exemplo

O exemplo abaixo usa um loop do while. O loop sempre será executado pelo menos uma vez, mesmo que a condição seja falsa, porque o bloco de código é executado antes da condição ser testada:

Exemplo

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Do While Loop</h2>

<p id="demo"></p>

<script>
let text = ""
let i = 0;

do {
  text += "<br>The number is " + i;
  i++;
}
while (i < 10);  

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Não esqueça de aumentar a variável usada na condição, caso contrário o ciclo nunca terminará!

Comparando for e while

Se você leu o capítulo anterior sobre o loop for, descobrirá que um loop while é muito parecido com um loop for, com a instrução 1 e a instrução 3 omitidas.

O loop neste exemplo usa um loop for para coletar o carro nomes da matriz cars:

Exemplo

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for (;cars[i];) {
    text += cars[i];
   
i++;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
for (;cars[i];) {
  text += cars[i] + "<br>";
  i++;
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

O loop neste exemplo usa um loop while para coletar o nomes de carros da matriz cars:

Exemplo

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";
 
 while (cars[i]) {
    text += cars[i];
   
i++;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
while (cars[i]) {
  text += cars[i] + "<br>";
  i++;
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>