Olá! Na Lição 8, aprendemos sobre a estrutura condicional if... se (se... senão), 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.

A ideia para que uma condição seja definida é compará-la por meio dos operadores lógicos, visto que é necessária a utilização dessa lógica de programação — disponibilizados na Lição 6. Relembre os operadores lógicos: podemos utilizar o not (!), and (&&) e or (||). Caso precise comparar qualquer situação por meio dos operadores lógicos, podemos utilizá-los. Para entender melhor essas situações: quando for necessário que duas ou mais comparações sejam verdadeiras, utilizamos o operador lógico and (&&). E, se precisamos que apenas uma das condições seja verdadeira, utilizamos o operador lógico or (||) (LEPSEN, 2018).

Além de a linguagem de programação JavaScript oferecer suporte para a estrutura condicional, também podemos utilizá-la para as estruturas de repetição, em nosso caso, a estrutura for (para). As estruturas de repetição permitem fazer com que um ou mais comandos em um programa sejam executados diversas vezes. Essas estruturas são denominadas laços de repetição ou loops, que complementam a programação sequencial e a programação estruturada condicional estudadas até aqui. Na verdade, alguns problemas ocorrem de forma sequencial, como identificar em um sistema que, para acessar o menu de opções, necessita-se do login e da senha, como exemplo, o site da Universidade, o Internet Banking, dentre outros. Também, temos as estruturas condicionais — que você já estudou: caso um cliente precise realizar um saque no valor de R$ 67,00, então o caixa eletrônico verifica se tem as notas de R$ 2,00, R$ 5,00, R$ 10,00 e R$ 50,00 (ZAKAS, 2005).

Nesta lição, abordaremos as estruturas que permitem fazer com que algumas ações ou condições sejam executadas diversas vezes, como pagar diversas contas ou exibir todas as movimentações financeiras do cliente especificando um intervalo de data, dentre outros problemas abordados no dia a dia.

A estrutura de repetição é muito utilizada em nosso cotidiano. Essa lógica de repetição serve para manipular listas de produtos disponíveis em um site de e-commerce (comércio eletrônico), implementar uma página da Web para listar os produtos que estão em promoção, exibindo cada produto com imagem, descrição, modelo, preço, preço de oferta. A partir de um laço de repetição — no caso, o for (para) —, conseguimos realizar a paginação do site para exibir uma quantidade de itens que ficarão disponíveis para o usuário final acessar o conteúdo.

Uma das dificuldades de trabalhar com a estruturação de repetição é que necessita de um ponto de interrupção para encerrar o loop de repetição, que pode ocorrer a partir de uma ação do usuário ou a partir de uma condição implementada pelo Desenvolvedor Front-End diretamente no programa, indicando um limite de parada da execução da estrutura de repetição. 

Imagine que, ao adquirir um veículo ou imóvel, precisamos financiá-lo em suaves parcelas. Dessa forma, o cliente recebe desconto caso queira pagar a última parcela, ou seja, o sistema precisa calcular o valor da última parcela, a data de vencimento e gerar o código de barras e o número do boleto. Suponhamos que o imóvel foi financiado em 360 parcelas. Com um laço de repetição, o processo para implementar nosso sistema se torna simples. Essa é a importância de aprender os conceitos das estruturas de repetição empregadas na linguagem JavaScript (SILVEIRA; ALMEIDA, 2013).

No desenvolvimento de páginas de web, utiliza-se muito as estruturas de repetição, facilitando a implementação em nosso sistema. Sempre as utilizamos, como, por exemplo, ao comprar uma passagem de ônibus em um site, em que temos a opção de escolher a poltrona que viajaremos. Para isso, o Desenvolvedor Front-End consegue programar utilizando uma imagem ilustrativa para representar as 42 poltronas. Na página do site, disponibiliza-se cada poltrona em forma de estrutura de repetição para que seja exibida 42 vezes.

Quando o cliente escolher em qual poltrona deseja viajar, a mesma poltrona deve alterar sua situação para ocupado. Dessa forma, o cliente conseguiu fazer a sua reserva sem perder o local de destino desejado. Ao mesmo tempo, devemos utilizar uma estrutura condicional if para indicar que a poltrona alterou sua situação para ocupado. Perceba que as estruturas de programação sequencial, condicional e repetição são utilizadas simultaneamente para realizar a construção dos nossos algoritmos.

Repare que, a cada lição estudada, um novo assunto é abordado e, consequentemente, os tópicos anteriormente estudados continuam sendo importantes e são utilizados conforme a necessidade de cada problema proposto. Se continuarmos analisando a reserva de ônibus, repare que, nos sites de compra de passagens, existem os assentos e o corredor. A dificuldade nesse problema é que as poltronas localizadas no ônibus estão em fila, então, do lado direito, em relação ao motorista, temos 20 poltronas, o que totaliza uma fila de 10 assentos dividida em duas. Para dividir a fila em 10 assentos, ou seja, deixar as poltronas em uma única fila, teremos que utilizar um operador lógico de módulo "%", representando o resto da divisão. A cada 10 poltronas, outra fila deve ser criada. Se o número de poltrona for % 10 e resultar em 0, é sinal de que uma nova quebra deve ser inserida, então, do lado direito do motorista, temos duas filas, contendo 10 poltronas em cada uma delas.

Para esta lição, trataremos da estruturação de repetição for (para). O problema proposto nesta lição será bem simples, para entendermos a lógica de como utilizar o laço de repetição for. Nosso problema é uma questão matemática, saber a tabuada. Então, faça um programa que receba um número, calcule e mostre a tabuada desse número.

A implementação das estruturas de repetição que podemos codificar em uma página de internet geram certas particularidades que fazem o uso de comandos como o for, while e do... while. Começaremos a analisar o funcionamento e os conceitos para empregar o comando for (para).

A estrutura do comando for é definida em três propriedades, que são: (I) o valor inicial da variável de manipulação; (II) a condição que determina se a repetição deve continuar a executar o programa (critério de parada); e (III) o incremento ou decremento da variável de manipulação.

A Figura 1 descreve cada propriedade e o funcionamento da estrutura de repetição for (para) contida na sintaxe da linguagem JavaScript. Primeiramente, definimos o nome de uma variável qualquer, por padrão, utilizamos a variável “i” e inicializamos com valor 1. Na segunda condição do parâmetro for, inserimos o operador lógico “<=”, menor igual, para que seja percorrido o “i”, de 1 até 10. Na terceira condição do parâmetro for, o “i” tem um incremento na fórmula: “i = i + 1”, e também se pode otimizar essa fórmula para “i++ (incremento) e i—(decremento)”. Entre chaves, inserimos as condições que serão executadas repetidas vezes (GRONER, 2018).

Com base nesse conceito, implementaremos o problema da tabuada. Então, faça um programa que receba um número, calcule e mostre a tabuada desse número. O código a seguir é como deve ficar o documento em HTML:

Analisemos as principais linhas do exercício proposto:

• Linha 7: nesta linha, inserimos um elemento do tipo folha de estilo em CSS com a tag “link rel=”stylesheet””, referenciando o diretório que encontra o arquivo em extensão “.css” (GRONER, 2018).

• Linhas 11 a 19: nas linhas 10 a 19, criamos o corpo <body> do problema proposto, contendo um título, com o elemento <h1>, um campo de formulário de texto para o usuário informar o número do qual deseja calcular a tabuada e o botão que tem como função “mostrarTabuada()”, o qual implementaremos a seguir. Na linha 18, referenciamos o diretório que contém a linguagem de programação JavaScript, contida no diretório “js”, com o nome “tabuada.js”.

Implementaremos o arquivo “estilos.css” para treinar a estilização da página e a estruturação do nosso código:

Na estilização do CSS, notamos que podemos inserir uma imagem que será localizada à esquerda, com largura de 250 pixels e espaçamento de 10 pixels para a direita, topo de 0 pixels, baixo de 0 pixels e esquerda de 0 pixels. Inseriu-se, no título, um estilo de borda inferior e o tamanho da fonte foi configurado para 1.2em, medida adotada internacionalmente. Caso queira alterar para pixel, troque 1.2em para 12px (UZAYR, 2022).

Na linguagem JavaScript, criaremos as estruturas sequenciais, condicionais e repetições, ou seja, sempre que for implementar algum problema, as estruturas são a base para solucionar a maioria dos problemas vinculados no mundo corporativo. Vejamos como fica a codificação em JavaScript:

O código implementado para o problema matemático de tabuada em linguagem JavaScript se inicia com o nome da função "function mostrarTabuada ()". Repare que o que está dentro das chaves "{...}" será a lógica de programação de acordo com as estruturações vistas até aqui. No início, temos um comentário sobre a captura dos elementos e validação do preenchimento e, também, declaramos as variáveis às quais serão atribuídas o número que o usuário informar na página de internet e a resposta de saída na variável "outtabuada".

Nas linhas 15 a 21, temos duas situações: a primeira é a estruturação sequencial que cria a variável resposta para realizar e acumular os dados dentro da estruturação de repetição for (para). A variável resposta é do tipo primitivo string, ou seja, aceita receber números e letras, mas, para exemplo didático, o usuário sempre inserirá um número, sendo inteiro ou ponto flutuante, com casas decimais, como exemplo: “Qual é a tabuada do 2.5?”. O sistema também calcula esse tipo de dado inserido pelo usuário.

Na linha 17, a repetição inicia com a variável i tem atribuição igual a 1. A variável i permanece verdadeira enquanto o valor da variável for menor ou igual a 10. Assim, existe mais uma condição, em que a variável i terá que ser incrementada por "i = i + 1". A variável i está na forma otimizada: "i++". A condição para ser verdadeira é que, ao percorrer a estrutura de repetição for, deve armazenar a informação na variável reposta, criada fora do loop, para que possamos utilizar essa variável como resposta. Para gerar a quebra de linha, foi utilizado o caractere especial "\n" e, depois de acumular os números, monta-se a forma da tabuada, e o conteúdo da variável "resposta" é inserido na página web. Na linha 23, adicionamos, na variável "outTabuada", o conteúdo do laço for sendo o seguinte exemplo: 5x1=5, 5x2=10, e assim sucessivamente. Nas linhas 27 a 29, inserimos, no botão "btMostrar" do formulário, o evento que, assim que o usuário clicar nessa opção, chamará a função "mostrarTabuada".

Nesta lição, aprendemos como utilizar praticamente todo o conteúdo abordado das lições anteriores. Dentre elas, focamos na estrutura sequencial do algoritmo, a estrutura condicional if... else (se... senão), de modo simples e com múltiplas condições, dependendo do problema proposto. 

Especificamente, a estruturação de repetição, com comando do laço for, é muito utilizada em nosso dia a dia para otimizar problemas, como sacar dinheiro do caixa eletrônico, implementar uma lista de produtos, exibir todos os pedidos que a empresa vendeu nos últimos 15 dias, dentre outros.

Esse tipo de estrutura de repetição é uma ferramenta primordial para o Desenvolvedor Front-End para solucionar problemas que costumam ser complexos. Tudo depende do esforço e estudo do Desenvolvedor Front-End, da dificuldade e, também, do grau de evolução na prática com os métodos, funções e, principalmente, no estudo das bibliotecas que compõem a linguagem JavaScript.

A estruturação de repetição for (para) ajuda a resolver diversos problemas existentes em nosso dia a dia. Uma dica importante é que o comando for é interessante para ser utilizado quando soubermos o número de repetições que devem ocorrer na página do site. O exemplo da tabuada demonstra muito bem essa situação, independentemente do número informado pelo usuário na página do site. O for sempre percorrerá de 1 até 10 e mostrará o cálculo da tabuada para o cliente que informou o número da tabuada.

Na próxima lição, aprenderemos a manipular a estrutura de repetição while (enquanto): quando devo utilizar a estrutura de repetição while? Veremos seus conceitos, sua sintaxe e implementaremos um exemplo para entender o seu funcionamento.

Agora, é a sua vez de aplicar os conhecimentos adquiridos até aqui, implementando com a estruturação de repetição for (para). Elabore um programa que leia um número informado pelo usuário e mostre a sua ordem decrescente até o número 1. Por exemplo, se o usuário inseriu o número 10, o programa apresentará como resposta a seguinte sequência: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1. 

Bons estudos e até a próxima!