Laço WHILE em JavaScript

Neste tutorial, vamos aprender o que é o laço While em JavaScript, para que serve, como funciona, como usar e alguns exemplos práticos deste loop.

Estudar JavaScript pela apostila

Laço WHILE: O que é e Como funciona

O WHILE é um comando, uma estrutura de repetição, que em inglês significa 'enquanto'.

Basicamente ela funciona assim: enquanto uma condição for satisfeita, ela fica repetindo e repetindo um determinado trecho de código.

Através deste laço ou loop, conseguimos que um mesmo pedaço de código se repita quantas vezes desejarmos.

A declaração do laço while, em JavaScript, é:

while(teste){
   [codigo]
   [codigo]
   [codigo]
}

Ou seja, primeiro digitamos while, depois algum teste condicional (como fazemos com o IF), em seguida um trecho de código entre chaves.

O laço while funciona assim: ele verifica o teste.

Se for verdadeiro, ele executa o código.

Depois, faz o teste condicional novamente e enquanto for true, vai continuar a executar de novo, de novo e de novo o código entre chaves.

O laço while só para de executar quando o teste der falso.

Como usar o Laço While

Vamos criar um script que simplesmente vai escrever no documento HTML os números de 1 até 10.

Veja:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
    <button onclick="contar()">Contar</button><br />

    <script type="text/javascript">
   function contar(){
    var count = 1;

    while (count<=10){
     document.writeln(count+"<br />");
     count = count+1;
    }
   }
    </script>
 </head>
</html>

O código acima simplesmente exibe um botão na página.

Quando você clica, ele chama a função contar() do JavaScript.

Nessa função, declaramos uma variável de nome count e inicializamos com valor 1.

Agora vamos para o laço while.

O teste condicional dele é: count<=10

Ou seja, enquanto a variável count for menor ou igual a 10, o teste é verdadeiro, e o código do laço executa. O código do laço é simplesmente exibir o valor de count e dar uma quebra de linha.

Em seguida, incrementamos o valor de count em uma unidade.

Ou seja, ele imprime, e incrementa.

Imprime, e incrementa.

Vai fazendo isso...imprime 1, 2, 3, 4, ...até no 10 ele imprime.

Na última 'rodada', chamada de iteração, ele imprime o 10.

Incrementa o valor, e temos count=11

Então, o teste vai passar a ser falso, logo, o while vai parar de executar.

E o resultado é uma contagem de 1 até 10 na sua tela.

Experimente colocar 1000 e veja como seu computador é rápido.

Exemplo de laço While

Faça um script que printe na tela todos os números pares de 1 até 100.

A lógica aqui é a mesma: temos que criar uma variável que vai ficar mudando de valor e vamos imprimindo na tela esses valores.

A diferença agora é que em vez de incrementar em uma unidade, vamos incrementar em duas (count = count+2), veja como fica nosso código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
    <button onclick="contar()">Contar</button><br />

    <script type="text/javascript">
   function contar(){
    count = 2;

    while (count<=100){
     document.writeln(count+"<br />");
     count = count + 2;
    }
   }
    </script>
 </head>
</html>

Teste, de verdade, esse código.

Exemplo de uso do Laço While

Crie um script que exiba todos os múltiplos de 3, de 1 até 100, usando laço while.

O que vamos fazer de diferente neste exemplo é inserir um teste condicional IF dentro do laço WHILE.

Vamos usar uma variável count, que vai receber todos os valores, de 1 até 100.

A cada valor que ela receber, vamos usar o IF para saber se ela é múltipla de 3, analisando o resto da divisão.

Se for múltiplo de 3, imprimimos o valor de count. Senão, nada acontece.

Independente do que ocorra, incrementamos em um o valor de count, senão o loop nunca acaba.

Veja como fica nosso código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
    <button onclick="contar()">Contar</button><br />

    <script type="text/javascript">
   function contar(){
    count = 1;

    while (count<=100){
     if(count%3 == 0)
      document.writeln(count+"<br />");
     count = count + 1;
    }
   }
    </script>
 </head>
</html>