Loops são usados para lidar com conjuntos de informações. Através deles é possível executar o mesmo código repetidamente, sempre com um valor diferente.
Para entender, de forma prática, como funciona um loop vou criar um formulário onde informaremos um número entre 1 e 10 e clicaremos no botão "Gerar tabuada" este botão irá gerar um uma tabela com a tabuada de multiplicação do número informado.
Faça o teste usando o formulário abaixo!
Hands On
Agora que você já viu o formulário acima em funcionamento vamos aprender sobre loop analisando o código dele.
O formulário é um HTML bem simples.
A tag input foi definida com type="number" o que significa que só permitirá digitar números
A tag button tem um evento onclick vinculado a uma função Javascript chamada gerarTabuada()
<form>
<div class="form-group">
<label for="numero">Número</label>
<input type="number" class="form-control" id="numero">
</div>
<button type="button" class="btn btn-outline-primary" onclick="gerarTabuada()">Gerar tabuada</button>
</form>Tabela HTML que irá exibir a tabuada
Repare que a div que é o container da tabela está usando a classe d-none do Bootstrap o que significa que a tabela está invisível na tela.
<div class="table-responsive mt-5 d-none">
<table id="tabela_tabuada" class="table table-striped table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th>Operação</th>
<th>Resultado</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>O código Javascript tem algumas novidades e vamos analisá-lo linha a linha
const gerarTabuada = () => {
let numero = document.getElementById("numero").value;
let conteudoTabela = "";
for (let i = 0; i < 10; i++) {
conteudoTabela += `
<tr>
<td>${numero} x ${i + 1}</td>
<td>${numero * (i + 1)}</td>
</tr>`;
}
document.getElementById("tabela_tabuada")
.getElementsByTagName("tbody")[0].innerHTML = conteudoTabela;
let divTabela =
document.getElementsByClassName("table-responsive")[0];
divTabela.classList.remove("d-none");
}Armazena o valor do número informado no textbox dentro da variável numero
let numero = document.getElementById("numero").value;Cria uma variável que recebe uma string vazia chamada conteudoTabela
let conteudoTabela = "";Loop for, esta é a instrução responsável por executar um código repetidas vezes(loop). Este loop funciona da seguinte forma:
Criamos uma variável que funciona como um "contador", no exemplo abaixo é a variável i, esta variável irá receber um número que representará o ponto de onde queremos começar a "contar". Cada contagem feita tem o nome de iteração ,no código abaixo isso é representado pela instrução let i = 0;
Depois temos que definir até quanto queremos "contar", no caso abaixo estamos contando até 9, no código abaixo isso é representado pela instrução i < 10;. Este ponto de é super importante para que você não caia em um loop infinito.
Por fim definimos de quanto em quanto queremos contar, no código abaixo isso é representado pela instrução i++
Todas as instruções acima devem estar dentro do parênteses depois da palavra reservada for
O código que será executado em loop deve ficar dentro das chaves {} referentes a instrução for
for (let i = 0; i < 10; i++) { ... }Toda vez que o usuário clicar em "Gerar tabuada" o conteúdo da tabela deve ser gerado dinamicamente.
A variável conteudoTabela é atualizada a cada iteração
O conteúdo é montado dinamicamente através de interpolação
A primeira coluna <td> montamos a expressão ${numero} x ${i + 1}. O ${numero} é substituído pelo número informado no textbox, o x é apenas para representar visualmente na tabela que é uma operação de multiplicação e o ${i + 1} irá representar o multiplicando. Onde o i será substituído pelo número correspondente a iteração. O +1 foi usado porque, no caso deste código, o loop começa em zero e a tabuada deve começar a partir do 1
Esta expressão ${numero * (i + 1)} efetua de fato a operação matemática.
conteudoTabela += `
<tr>
<td>${numero} x ${i + 1}</td>
<td>${numero * (i + 1)}</td>
</tr>`;O operador += após a variável conteudoTabela é uma forma abreviada do código abaixo. O que significa que a variável irá receber o valor dela mesma mais um valor adicional. Como pode perceber não é muito bonito então sempre opte pela forma abreviada.
conteudoTabela = conteudoTabela + `
<tr>
<td>${numero} x ${i + 1}</td>
<td>${numero * (i + 1)}</td>
</tr>`; `
<tr>
<td>${numero} x ${i + 1}</td>
<td>${numero * (i + 1)}</td>
</tr>`;Como percebeu a tabela foi criada sem linhas (<tr>) e colunas (<td>) e isto se deve ao fato de precisarmos exibir informação dinâmica. O código abaixo localiza o elemento HTML que deve ser alterado e seta o novo conteúdo nele através do innerHTML. O conteúdo que será atribuído é o que está dentro da variável conteudoTabela, que como vimos anteriormente armazena as informações da tabuada
document.getElementById("tabela_tabuada")
.getElementsByTagName("tbody")[0].innerHTML = conteudoTabela;Por fim, o código abaixo remove a classe d-none da div onde a tabela está , fazendo com que a mesma fique visível, exibindo assim as informações esperadas
let divTabela =
document.getElementsByClassName("table-responsive")[0];
divTabela.classList.remove("d-none");Observações
Existem outras maneira de se fazer loops em Javascript. Para um iniciante, que é o foco desta série, apenas o loop for é o suficiente. Abaixo listarei o nome dos outros loops e caso você tenha interesse basta pesquisar na internet ou perguntar aqui nos comentários.
for/in
for/of
while
do/while
A cada post os exemplos ficam um pouco mais elaborados, pois tudo que foi ensinado até o momento está sendo aplicado em conjunto e é assim que a tecnologia funciona.
Se está com dificuldades, post elas nos comentários ou releia os posts anteriores. Javascript é o último assunto relacionado a frontend nesta série ( O React, que também é uma tech frontend será um assunto BÔNUS ao final do curso )
Na próxima semana irá começar a parte de backend com C#. Então fique ligado!
Desafio
Crie um formulário com dois campos "De" e "Até" com um botão "Gerar tabuada" este formulário deve gerar a tabuada do número informado no campo "De" até o número informado em "Até".
Seu formulário deverá funcionar igual ao exemplo abaixo
Comentários