Exercícios › Exercício 5

Tabuada do 5

O que você vai praticar

Repetir uma ação várias vezes com o laço for.

1. Veja funcionando

Este é o resultado do código. Ele foi escrito com JavaScript e roda agora, nesta página:

Tabuada:

2. Leia o código

O HTML essencial

O JavaScript precisa de um lugar para escrever. Aqui é um parágrafo com id="resposta":

<p id="resposta"></p>

O JavaScript

Este é o código real desta página, exatamente como está rodando:

3. Passo a passo

1. As variáveis: numero é o número da tabuada. resultado começa como texto vazio e vai juntando as linhas.

2. O laço for: for (let i = 1; i <= 10; i++) tem 3 partes: começa com i = 1, continua enquanto i <= 10, e soma 1 a i a cada volta.

3. Acumular: resultado += ... acrescenta uma linha nova ao texto a cada volta, sem apagar as anteriores. São 10 voltas, 10 linhas.

4. Mostrar na tela: Na página, o texto vai para o parágrafo com innerHTML (parte do DOM, que veremos depois). Ele é usado porque o texto tem <br>, a quebra de linha do HTML.

4. Agora é com você!

Como testar com o console: na página, aperte F12 (ou clique com o botão direito e escolha Inspecionar) e abra a aba Console. Tudo que você escrever com console.log(...) aparece ali. É a melhor forma de "espiar" o que o código está fazendo.

Abra este arquivo no seu editor e faça as mudanças, uma de cada vez. Salve e atualize a página para ver o resultado.

Desafio 1 (fácil): Mude numero para 7 e veja a tabuada do 7.
Desafio 2 (fácil): Mude i <= 10 para i <= 20. Quantas linhas aparecem?
Desafio 3 (fácil): Dentro do for, escreva console.log(i);. O console mostra o valor de i a cada volta: de 1 até 10.
Desafio 4 (médio): Faça a tabuada de trás para frente, de 10 até 1. Dica: comece com i = 10, continue enquanto i >= 1 e use i--.