Olá, na Lição 9, aprendemos sobre a estrutura de repetição for (para), integrando-a com os elementos em HTML e a linguagem JavaScript, por meio de manipulação de rotinas de eventos DOM. Para o desenvolvedor Front-End, essa é uma das situações que a maioria dos programas e aplicativos utilizam para realizar diversas comparações entre os problemas abordados pelos clientes.

As estruturas de repetição podem ser tanto do tipo for, While e Do... While. Dentre as estruturas de repetições, estudaremos a While e a Do...While. Podemos criar um laço de repetição com o comando While, que realiza um teste condicional logo no início de sua execução, para verificar se os comandos contidos dentro da estrutura While serão, ou não, executados.

Em diversas situações, utilizamos a estrutura de repetição While, podemos utilizá-la no exemplo visto anteriormente, na Lição 9, envolvendo o problema dos números decrescentes, substituindo a estrutura de laço for pela estrutura de laço While. Nesta lição, continuararemos abordando as estruturas de repetição que permitem fazer com que algumas ações ou condições sejam executadas diversas vezes. Geralmente, optamos por utilizar o comando de repetição While e Do... While quando não soubermos quantas vezes ocorrerá a repetição em nosso programa. Para isto, devemos ter uma ação do usuário para que a lógica seja encerrada corretamente.

A estrutura de repetição pode ter, como termo de tratamento, o laço, em vez de loop, e dizemos que o laço itera (repete) certo trecho de código que queremos executar, caso ele seja verdadeiro. Um laço de repetição, também, pode ser implementado com o comando While na linguagem JavaScript, o qual realiza um teste condicional logo no seu início, de modo a verificar se os comandos do laço serão, ou não, executados.

A tradução da palavra While para o português quer dizer enquanto, o qual define bem o seu funcionamento, sendo ele: enquanto a condição for verdadeira, execute o comando implementado nele. Caso a condição do While seja falso, saia do loop (laço de repetição). A sintaxe da função While (enquanto) pode ser expressa da seguinte forma:

Esse é o modelo de estrutura de repetição com teste no início que é utilizado pelo comando While. Ele é implementado, principalmente, em sites que manipulam arquivos, para repetir a leitura de uma linha enquanto não atingir o final do arquivo. A grande dificuldade para dominar o comando While está na implementação da lógica conforme o critério de parada estabelecido para sair do loop. Importante lembrar que o comando While somente será utilizado na programação quando não soubermos o número de repetições que o laço pode percorrer. Veremos, na seção case, um problema envolvendo essa estrutura de repetição.

Outra dúvida que surge é se o teste de validação for verdadeiro, ao utilizar o comando While, a validação deve ser feita antes de iniciar a execução de um bloco de comando, que, nesse caso, a condição é sempre verdadeira, caso não seja, não entra na condição do laço.

O desenvolvedor Front-End utiliza muito as estruturas sequenciais, condicionais e de repetições para implementar os sites e aplicativos mobile. Essas estruturas o auxiliam a flexibilizar a lógica de programação e a forma de projetar a estrutura de dados para realizar diversas modificações e manutenções, de acordo com a necessidade do cliente.

Desse modo, o desenvolvedor deve ter pleno domínio dessas técnicas, além de saber estruturar e implementar as páginas de um site do início ao fim. Atualmente, existem diversos frameworks que facilitam o desenvolvimento dessas páginas, conforme a compatibilidade de cada navegador, disponível no mercado de trabalho.

As estruturas de repetição estudadas permitem que alguns comandos sejam executados várias vezes em um programa. Sendo assim, essas estruturas de repetições são muito úteis quando necessitamos implementar um sistema que receba o pagamento de várias contas de um cliente ou que um layout com as poltronas esteja na situação de disponível ou ocupadas para realizar sua reserva de passagem online ao ir viajar de ônibus ou avião.

Essas estruturas são, geralmente, utilizadas quando não soubermos exatamente quantas vezes as condições implementadas dentro de sua estrutura serão, realmente, executadas. Isso é muito importante ter em mente, pois facilita o entendimento de quais estruturas de sequência, condicional ou repetição devemos utilizar para desenvolver um sistema de página de web. Suponhamos que temos que implementar uma página que lista a quantidade de itens de pedido que o cliente comprará. Devemos pensar na seguinte pergunta: quantos produtos o cliente deseja comprar? Se soubermos a quantidade exata, utilizamos a estrutura de sequência, condicional e de repetição, o laço for. Mas e no caso de não saber essa informação? Bom, para isso, utilizamos a estrutura de sequência, condicional e de repetição While ou Do... While.

Nesse estudo de caso, aprofundar-nos-emos nas estruturas de repetição While e Do... While. Exibiremos os números em uma única linha, de forma que a exibição seja realizada em uma estrutura de repetição decrescente, com o valor inicial informado pelo usuário, por meio da página de internet criada.

A estrutura de repetição pode ser implementada com o comando While e Do... While. No comando While, o teste condicional é realizado logo no seu início, para verificar se os comandos do laço serão, ou não, executados. A tradução da palavra While, em português, significa “enquanto”; dessa forma, na prática, utilizamos a seguinte fala de lógica: “enquanto a condição for verdadeira, executa a condição...”. Portanto, a sintaxe do comando While é a seguinte:

A estrutura de repetição While com teste no início é utilizada, principalmente, em programas que manipulam arquivos, para repetir a leitura de uma linha enquanto não atingir o final do arquivo (GRONER, 2018). Na segunda opção de estrutura de repetição, temos a Do... While, em que a verificação condicional é realizada no final do laço. Assim, temos a seguinte forma de estrutura de repetição Do... While:

No exemplo proposto no case, utilizaremos a estrutura de repetição para que os números inseridos pelo usuário fiquem listados em ordem decrescente. Por exemplo, o usuário informou o número 5, e o programa executará a seguinte saída de resposta: “entre 5 e 1: 5, 4, 3, 2, 1”. O código em HTML para a solução do problema dos números em ordem decrescente pode ser implementado da seguinte forma:

No elemento <body></body>, inserimos o título da página do site como: “Programa Números Decrescentes”, localizado dentro da tag <h1></h1>. Após isso, inserimos o elemento <p></p> para pular uma linha, ou seja, chamamos de elemento para configurar um parágrafo em um texto quando precisamos redigir um conteúdo em formato de artigo. Ainda, na tag <p></p>, colocamos um campo de formulário para que o usuário insira os dados, no caso, o número inteiro. Foi inserido, também, um botão com o nome: “Decrescer até o número 1.”, assim que o usuário clicar, os números em ordem decrescente na página de internet serão listados. Por fim, vinculamos a linguagem JavaScript por meio do elemento <script src=””></script>, para que o sistema entenda que as estruturas sequencial, condicional e repetição estejam vinculadas com a linguagem HTML.

Analisemos as principais linhas do exercício proposto:

• Linha 1 a 6: na linha 1, criamos a função com o nome “mostrarNumeros()”, que utilizaremos para ordenar os números em ordem decrescente. Na linha 2, comentamos sobre as variáveis que manipularemos. Na linha 3, inserimos a função “getElementById”, que obtém o número inserido pelo usuário no formulário da página de web, feito na linguagem HTML. Na linha 4, armazenaremos, na variável “rsResposta”, a lógica de programação feita com estrutura de repetição para mostrar ao usuário a resposta dos números em ordem decrescente. Na linha 5, foi realizado um comentário para que o Desenvolvedor Front-End saiba o que está acontecendo. Na linha 6, atribuímos, na variável “numero”, o valor que o usuário informou. Repare que os números só serão aceitos se convertemos em número a informação do usuário. Por isso, o programa só aceitará número, e não letras (GRONER, 2018).

• Linha 7 a 12:  na linha 7, inserimos um comentário para alertar o Desenvolvedor Front-End que existe uma validação, caso o usuário insira uma letra ou clique diretamente no botão “Decrescer até o número 1.”. Da linha 8 a 12, temos a estrutura condicional explicando que, caso o usuário insira o número e esse número for igual à zero ou o número for isNaN (Not a Number), não for um número, o sistema exibirá um alerta, por meio de uma caixa de popup com a seguinte frase: “por favor, informe um número inteiro válido!!!”. Na próxima linha, temos o método “focus()”, que serve para que o cursor seja automaticamente alocado para o campo do formulário, sem precisar que o usuário clique nessa opção. Por fim, a linha 11 retorna para o formulário.

• Linha 13 a 16: nas linhas 13 e 14, comentamos a respeito da inicialização da variável resposta, assim que a estrutura de repetição While for iniciada e finalizada, serão atribuídos os dados para a variável resposta e serão apresentados na página de internet do navegador web. Nas linhas 15 e 16, foi implementada a variável “i”, para que seja atribuído o número que o usuário inseriu e armazenado nessa variável.

• Linha 17 a 23: na linha 17, comentamos sobre a lógica de como programar utilizando a estrutura de repetição While. Na linha 18, iniciamos a estrutura do laço While, com a seguinte condição: “enquanto a variável i for maior do que zero, faça...”. Isso significa que, se o usuário inserir o número “5”, o sistema verificará até i atingir o número 1, ou seja, começa no 5 e termina no 1. Nas linhas 19 e 20, foram implementadas as condições para atender ao laço While. Da linha 21 a 23, temos o decremento da variável “i”, em que ela inicia com o número que o usuário inseriu e vai decrescendo até atingir o valor 1.

• Linha 24 a 26: nessas linhas, é configurada a resposta que aparecerá para o usuário final, transformando o conteúdo em texto para ser apresentado no navegador que o usuário estiver utilizando.

• Linha 27 a 29: foi adicionado um comentário explicando para o Desenvolvedor Front-End que o botão “btDescrever” será integrado no elemento “getElementById”, em que capturamos o “id”, identificador implementado na página de HTML, na linha 15, especificamente. Assim que o usuário clicar no botão “Decrescer até o número 1.”, será exibida a lista em ordem decrescente na página de internet.

Outra dica é que, se o usuário inserir o número 0 (zero), a condição será falsa na primeira verificação, então, o programa não entra no laço de repetição While. A grande diferença nas estruturas de repetição While e Do... While é que, na estrutura de repetição While, a condição é testada no início do laço, enquanto, na Do... While, a condição é testada no final do laço. Assim, para a estrutura While, os comandos que estão dentro desse laço podem não ser executados, se a condição retornar falso na sua primeira verificação. Para a estruturação Do... While, temos a garantia que, no mínimo, uma vez que os comandos do laço são executados, o programa percorrerá até o final do laço para verificar se o teste condicional é falso (SILVEIRA; ALMEIDA, 2013).

Aprendemos, nesta lição, que as estruturas de repetição são muito utilizadas em nosso cotidiano, para realizar um pedido de fastfood, para realizar pagamentos online de diversas contas, para realizar uma viagem e escolher em qual poltrona devemos assentar durante o trajeto escolhido etc. O interessante é saber que, para utilizar as estruturas de repetição While e Do... While, previamente, não sabemos quantas vezes são executados os comandos implementados dentro do laço While. Portanto, tome muito cuidado ao implementar essas estruturas, pois, caso tenha dúvida na lógica de programação, o computador entre em loop ou laço infinito e sobrecarrega a memória do computador ou laptop até ser forçado o seu desligamento. Isso pode danificar, com o tempo, a memória ou outros componentes do computador ou laptop (ZAKAS, 2005).

Para esta lição, tente aplicar as estruturas de repetição em um problema de estoque de um casal de coelhos. Digamos que o número de coelhos de uma fazenda triplica a cada ano, após o primeiro ano. Pode-se elaborar um programa que leia o número inicial de coelhos e anos e informe, ano a ano, o número médio previsto de coelhos na fazenda, durante os próximos cinco anos. Para isso, você precisa validar a entrada para que o número inicial de coelhos seja maior ou igual a dois (um casal).

Na próxima lição, veremos para que serve a utilização de contadores e acumuladores, sendo essas operações muito úteis para auxiliar na manipulação de dados pelo programa. Estudaremos sobre suas características principais, a diferença entre contadores e acumuladores, visto que podemos criar programas que façam a leitura de contas que devem ser pagas por um usuário. As contas serão todas exibidas na página de internet, realizando, assim, uma listagem de contas (contador) e a soma dos valores (acumulador), para que o cliente possa realizar o pagamento de sua conta no final do mês. Bons estudos e até a próxima!