Loops em JavaScript

Introdução

Neste laboratório, você aprenderá a usar loops em JavaScript. Loops são um conceito fundamental na programação que permitem executar um bloco de código repetidamente. Isso é útil para tarefas como iterar sobre listas de dados ou realizar uma ação um número específico de vezes.

Você explorará os três tipos principais de loops em JavaScript:

• Loop for: Repete um bloco de código um número conhecido de vezes.
• Loop while: Repete um bloco de código enquanto uma condição especificada for verdadeira.
• Loop do-while: Semelhante a um loop while, mas executa o bloco de código pelo menos uma vez antes de verificar a condição.

Você também aprenderá a usar a instrução break para sair de um loop antecipadamente.

Todo o seu trabalho será feito no WebIDE. Você escreverá código JavaScript no arquivo script.js, que já está vinculado em index.html. Você pode ver a saída do seu código alternando para a aba Web 8080 no ambiente do laboratório.

Criar loop for com inicializador e condição

Nesta etapa, você criará seu primeiro loop for. O loop for é ideal quando você sabe de antemão quantas vezes deseja repetir uma ação.

A sintaxe básica de um loop for é:
for (inicializador; condição; expressão-final) { // código a ser executado }

• Inicializador: let i = 0 é um exemplo. Ele é executado uma vez no início para declarar e inicializar uma variável contadora.
• Condição: i < 5 é um exemplo. Esta expressão é verificada antes de cada iteração do loop. Se for verdadeira, o loop continua; se for falsa, o loop para.

Vamos criar um loop simples que gera uma lista de itens. Abra o arquivo script.js no explorador de arquivos à esquerda e adicione o seguinte código.

const output = document.getElementById("output");
let htmlContent = "<ul>";

// Este loop for tem um inicializador (let i = 0) e uma condição (i < 3)
for (let i = 0; i < 3; i++) {
  htmlContent += `<li>Item ${i}</li>`;
}

htmlContent += "</ul>";
output.innerHTML = htmlContent;

Neste código:

• let i = 0 inicializa o contador do loop i com 0.
• i < 3 é a condição que mantém o loop em execução enquanto i for menor que 3.
• i++ é a expressão final que incrementa o contador após cada iteração (focaremos nisso na próxima etapa).

Após adicionar o código, salve o arquivo. Em seguida, clique na aba Web 8080 para ver a saída. Você deverá ver uma lista não ordenada com três itens.

Usar incremento no loop for para contar

Nesta etapa, você se concentrará na terceira parte do loop for: a expressão final, que é tipicamente usada para incrementar o contador.

A expressão-final (por exemplo, i++) é executada no final de cada iteração do loop. Ela atualiza o contador do loop, aproximando-o do ponto em que a condição se torna falsa. i++ é uma abreviação comum para i = i + 1.

Vamos modificar o loop para contar de 1 a 5. Substitua o código existente em script.js pelo seguinte:

const output = document.getElementById("output");
let htmlContent = "<h2>Contando de 1 a 5:</h2>";

// A expressão final i++ incrementa o contador após cada loop
for (let i = 1; i <= 5; i++) {
  htmlContent += `Contagem: ${i}<br>`;
}

output.innerHTML = htmlContent;

Observe as mudanças:

• O inicializador agora é let i = 1, então começamos a contar a partir de 1.
• A condição é i <= 5, então o loop é executado enquanto i for menor ou igual a 5.
• A expressão i++ garante que o contador aumente a cada iteração.

Salve o arquivo e atualize a aba Web 8080. Você verá a saída mudar para uma lista de contagens de 1 a 5.

Implementar loop while para repetição

Nesta etapa, você aprenderá sobre o loop while. Um loop while continua a executar um bloco de código enquanto uma condição especificada for verdadeira.

A sintaxe é mais simples que a de um loop for:
while (condição) { // código a ser executado }

Com um loop while, você deve lidar com a inicialização da variável contadora antes do loop e com o seu incremento dentro do loop. Esquecer de incrementar o contador resultará em um loop infinito, que pode travar seu navegador.

Vamos reescrever o exemplo de contagem anterior usando um loop while. Substitua o código em script.js por este:

const output = document.getElementById("output");
let htmlContent = "<h2>Contando com um loop while:</h2>";

let i = 1; // 1. Inicializador
while (i <= 5) {
  // 2. Condição
  htmlContent += `Contagem: ${i}<br>`;
  i++; // 3. Incremento
}

output.innerHTML = htmlContent;

Este código atinge o mesmo resultado que o loop for na etapa anterior, mas a estrutura é diferente. O inicializador, a condição e o incremento são agora instruções separadas.

Salve o arquivo e verifique a aba Web 8080. A saída deve ser idêntica à da etapa anterior, demonstrando uma maneira diferente de alcançar a mesma repetição.

Adicionar loop do-while para pelo menos uma execução

Nesta etapa, você explorará o loop do-while. Este loop é uma variante do loop while com uma diferença fundamental: o loop do-while sempre executará seu bloco de código pelo menos uma vez, antes de verificar a condição.

A sintaxe é:
do { // código a ser executado } while (condição);

Isso é útil quando você precisa realizar uma ação primeiro e depois decidir se deve repeti-la. Vamos ver isso em ação com um exemplo onde a condição é inicialmente falsa.

Substitua o código em script.js pelo seguinte:

const output = document.getElementById("output");
let htmlContent = "<h2>Testando um loop do-while:</h2>";

let i = 10; // Começa com um valor que torna a condição while falsa

// Este loop será executado uma vez, mesmo que i não seja menor que 5
do {
  htmlContent += `O valor de i é: ${i}<br>`;
  i++;
} while (i < 5);

output.innerHTML = htmlContent;

Neste exemplo, a condição i < 5 é falsa desde o início porque i é 10. No entanto, como é um loop do-while, o código dentro do bloco do é executado uma vez antes que a condição seja verificada.

Salve o arquivo e olhe a aba Web 8080. Você verá a mensagem "O valor de i é: 10", provando que o loop foi executado exatamente uma vez.

Sair do loop com a instrução break

Nesta etapa, você aprenderá como sair de um loop prematuramente usando a instrução break. A instrução break encerra imediatamente o loop atual e transfere o controle para a instrução seguinte ao loop.

Isso é útil quando você está procurando por algo em um loop e deseja parar assim que o encontrar, sem completar as iterações restantes.

Vamos usar um loop for que tem a intenção de rodar 10 vezes, mas que parará mais cedo quando uma determinada condição for atendida. Substitua o código em script.js por este:

const output = document.getElementById("output");
let htmlContent = "<h2>Usando a instrução break:</h2>";

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    htmlContent += "Encontrei 6! Saindo do loop.<br>";
    break; // Sai do loop imediatamente
  }
  htmlContent += `O número atual é ${i}<br>`;
}

htmlContent += "Loop finalizado.";
output.innerHTML = htmlContent;

Neste código, o loop for está configurado para contar de 1 a 10. No entanto, a instrução if verifica se i é igual a 6. Quando for, a instrução break é executada e o loop é encerrado. O código não imprimirá os números de 7 a 10.

Salve o arquivo e visualize a aba Web 8080. Você verá a contagem parar em 5, seguida pela mensagem "Saindo do loop".

Resumo

Parabéns por completar este laboratório sobre loops em JavaScript! Você aprendeu a controlar o fluxo dos seus programas repetindo blocos de código.

Neste laboratório, você cobriu:

• O loop for, que é perfeito quando você sabe o número de iterações com antecedência, usando um inicializador, uma condição e uma expressão final.
• O loop while, que repete enquanto uma condição for verdadeira e requer o gerenciamento manual do contador.
• O loop do-while, que garante pelo menos uma execução do bloco de código antes de verificar a condição.
• A instrução break, que fornece uma maneira de sair de qualquer loop prematuramente com base em uma condição.

Dominar loops é um passo crítico para se tornar um desenvolvedor JavaScript proficiente. Sinta-se à vontade para experimentar ainda mais com o código deste laboratório para solidificar seu entendimento.