Aula 05 — Repetir sem copiar e colar | Curso de JavaScript gustavoweb

// entendendo

Como funciona

Precisa mostrar os números de 1 a 100. Você vai escrever 100 console.log? Não. Usa um laço.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

O for tem três partes separadas por ;:

onde começa — let i = 1
até quando repete — i <= 5
o que faz a cada volta — i++ (soma 1)

O while é o primo mais simples: repete enquanto a condição for verdadeira.

let vidas = 3;
while (vidas > 0) {
  console.log("Vidas:", vidas);
  vidas--;
}

// mão na massa

Agora é com você

Os campos abaixo estão vazios de propósito. Escreva, clique em Rodar e veja o resultado. Errou? Ótimo — leia o erro e tente de novo. (Atalho: Ctrl+Enter roda o código.)

Contando até 10

Use um for pra mostrar os números de 1 até 10, um por linha.

a5e1.js

// mostre de 1 até 10

Preciso de uma dica

for (let i = 1; i <= 10; i++) { console.log(i); }

Observação: i++ é atalho pra i = i + 1. O i vem de "índice" — é só um nome de variável, poderia ser contador.

Tabuada automática

Peça um número com prompt e mostre a tabuada dele de 1 a 10, no formato 7 x 3 = 21.

a5e2.js

let numero = Number(prompt("Tabuada de qual número?"));

// mostre a tabuada de 1 a 10

Preciso de uma dica

Dentro do laço, use template literal: console.log(`${numero} x ${i} = ${numero * i}`);

Observação: Esse é o momento em que a maioria entende pra que serve programação: uma linha de código fez o trabalho de dez.

Contagem regressiva

Use um while pra fazer a contagem regressiva de 5 até 1 e no final mostrar "Bora! 🚀".

a5e3.js

let contador = 5;

// contagem regressiva com while


console.log("Bora! 🚀");

Preciso de uma dica

Dentro do while você precisa diminuir o contador: contador--; — senão ele nunca chega a 0.

Observação: Perigo real: se você esquecer o contador--, o laço nunca termina e a página trava. É o famoso loop infinito. Se travar, feche a aba e abra de novo.

// desafio

barra de XP

Desafio: barra de XP

Um jogador precisa de 5 níveis pra chegar ao topo. Para cada nível, mostre uma barra crescente de blocos, tipo: Nível 1 ▓ · Nível 2 ▓▓ · e assim por diante.

a5d1.js DESAFIO

// barra de progresso de 5 níveis

Preciso de uma dica

Existe um truque: "▓".repeat(3) devolve ▓▓▓. Use o i do laço como número de repetições.

Observação: Esse tipo de saída visual em texto é chamado de ASCII art. Muitos jogos de terminal são feitos assim.