Olá, estudante, na lição 10 aprendemos sobre a estrutura de repetição while e do..while. Essas estruturas de repetição são muito utilizadas –  em praticamente todos os sistemas. As estruturas de repetição como o while sempre irão realizar um teste condicional verdadeiro logo no início de sua execução e a estruturação do..while realiza teste condicional verdadeiro no final de sua estrutura. E o que você não pode esquecer para utilizar a estrutura de repetição while e do..while é que elas somente são aplicáveis quando não soubermos quantas vezes irá 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.

Os comandos existentes na estrutura de repetição garantem ao desenvolvedor de Front-End maior controle na comunicação e integração do fluxo de execução dos sistemas web. E em diversos programas, é necessário realizar a contagem ou a soma de valores manipulados em forma de variáveis globais. Esta é a razão para utilizarmos contadores e acumuladores em nossos sistemas de web.

Os contadores e acumuladores são muito utilizados para realizarem contagens (contadores) e a soma total (acumuladores) dos valores inseridos pelos usuários do sistema. Isso facilita quando precisamos programar uma operação de soma totalizando todos os itens de produtos escolhidos pelo cliente ou usuário do sistema.

Nesta lição, vamos entender como realizar operações em nosso sistema, por meio de contadores e acumuladores. Vale ressaltar que esta é uma maneira de obter boas práticas de programação, pois em alguns sistemas criam atributos em entidades com a intuição de apenas ter um campo (atributo) para somar todos os itens de pedidos, sendo que os contadores e acumuladores realizam facilmente este tipo de operação.

Diversas são as situações que necessitamos utilizar contagens de ocorrências no sistema, ou somatórios e produtórios de valores dentro de um conjunto de dados com as estruturas de repetição e estrutura condicional. Desta forma, para alinhar os contadores e acumuladores devemos utilizar variáveis específicas para fazer o armazenamento dos resultados.

Os contadores são variáveis que realizam a contagem de ocorrências de um determinado valor, digamos que estamos dentro de um conjunto de informações referentes a pedidos de vendas, nos quais constam nestes pedidos vendas de eletrônicos, como TV, smartphone, aparelhos domésticos, entre outros. Desejamos saber quantas TVs existem, e que sejam de uma marca específica 43’ (polegadas). Como fazer isso, sendo que temos uma larga escala de vendas e também entregas? Para isso, é necessário inserir no código um contador para saber quantas TVs foram vendidas de uma marca específica e também saber se é de 43’ (polegadas).

Os acumuladores devem ser utilizados de acordo com situações que realizam somatórios. No caso de somatórios, o acumulador normalmente inicia-se com valor “0” (zero) e vai somando o valor nesta mesma variável, isto depende da situação do problema em contexto. Pensamos no mesmo exemplo das TVs de tal marca e que sejam de 43’ (polegadas). Agora, queremos calcular a soma destas TVs com as mesmas especificações. Precisamos, então, inserir no código um acumulador, que deve ser inicializado com valor em “0” (zero), e então vai incrementando, ou seja, somando, desde a primeira TV, até a última existente, em todos os pedidos de vendas.

No case desta lição, vamos implementar um programa que lista a quantidade de despesas cadastradas pelo usuário e calcula o valor total das contas mensais para você ver uma situação em que os contadores e acumuladores funcionam na prática. No programa, as contas são exibidas em forma de itens, por meio de um contador, e a sua soma é realizada pelo acumulador. Tanto o contador como o acumulador são procedimentos que ocorrem com frequência nas mais diversas situações envolvendo problemas práticos.

O contador é utilizado para contar o número de vezes que tal situação ocorreu ou a quantidade de vezes que um laço foi executado em seu programa. Podemos, também, determinar o número de vezes que um valor específico ocorreu em uma determinada sequência ou monitorar o número de caracteres já consumidos em relação ao fluxo total de caracteres, ou seja, quantas vezes um caractere se repetiu em relação ao conjunto de caracteres existentes (UZAYR, 2022).

Já os acumuladores utilizam-se de somas ou produtos acumulativos e são atribuídos quando precisamos somar valores, consolidar alguns resultados, como a média de alunos que foram aprovados com nota superior a 9.0. Para entendermos tais situações, basta lembrar que o contador é uma variável numérica para contar algo. Já o acumulador é uma variável numérica para somar um valor a algo (ZAKAS, 2005).

A funcionalidade da utilização de contadores e acumuladores em um programa permite a exibição de realizar contagens e totalizações, sendo que estas operações são realizadas sobre a manipulação dos dados estabelecidos no programa (LEPSEN, 2018).

De acordo com Uzayr (2022), existem duas características principais para os contadores e acumuladores na programação em JavaScript, sendo elas: 

No nosso exemplo proposto no tópico Case, vamos programar um problema de cadastro de conta mensal, do qual o programa faz a leitura de contas que devem ser pagas por um usuário. Estas contas mensais são exibidas na página de internet e, no final da listagem, o número de contas (contador) e a soma dos valores (acumulador) que serão pagos. O código para implementação em documento HTML está disponível, a seguir:

No exemplo acima, configuramos o interpretador de linguagem “pt-Br”. Dentro do elemento <head></head>, no qual foram implementados os elementos metadados como: I) configuração do conjunto de caracteres que o navegador aceita a correção dos erros ortográficos “UTF-8”; II) a compatibilidade dos navegadores para interpretação da linguagem JavaScript, principalmente quando utiliza o navegador Internet Explorer e/ou Edge; III) o metadado que padroniza internacionalmente a interpretação dos comandos na linguagem HTML; e IV) o título da aba do navegador quando acessa a página (UZAYR, 2022).

No elemento <body></body>, inserimos o título da página do site como: “Programa que Apresenta as Despesas do Mês” localizado dentro da tag <h1></h1>. Após isso, inserimos três elementos do tipo <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. Na primeira tag <p></p>, colocamos um campo de formulário para que o usuário insira os dados da “Descrição da Conta”. No segundo elemento <p></p>, foi inserido “Valor a pagar R$” e o campo de formulário para que o usuário insira o valor em reais, lembrando que, para este sistema, se for inserir duas casas decimais após a vírgula, tem que ser utilizando o caractere ponto “.” e não o caractere vírgula “,”. No terceiro parágrafo, foi inserido um botão com o nome “Registrar Conta”. Por último, a inserção dos elementos <pre></pre> para destacar a formatação da fonte, quanto à letra e seu tamanho. Nestes elementos, listamos as contas cadastradas e também a soma de todas, por meio das funções contadores e acumuladores, respectivamente (SILVEIRA; ALMEIDA, 2013).

Nossa próxima codificação, é a lógica do programa implementada na linguagem JavaScript, conforme a seguir:

A variável global “numContas” atua como um contador, para apresentar o acréscimo do número de contas que o usuário registrou na página de internet. Para a variável “valorTotal”, seu comportamento é um acumulador para somar o valor das contas inseridas no programa por meio do usuário.

Foi implementado uma função com o nome “cadastrarConta()”, que serve para referenciar os elementos que estão disponíveis no documento HTML, armazenar os conteúdos inseridos no formulário e converter para os padrões da linguagem JavaScript. Também foi implementado uma estrutura condicional para validar o preenchimento correto dos dados no formulário. Caso o campo descrição esteja vazio ou o valor inserido seja zero, ou no campo de preço não seja um número, o sistema retorna um popup em forma de alerta com a seguinte mensagem: “Por favor, informe os dados corretamente!!!”.

Após isto, adiciona os valores no contador “numContas” e no acumulador “valorTotal”. Assim, os conteúdos são alterados, permitindo que o usuário insira uma nova despesa de conta e não sobreponha o registro anterior. Esta é a função de utilizar contadores e acumuladores, quando não trabalhamos com Banco de Dados ou com a linguagem SQL padrão, podemos utilizar das propriedades dos contadores e acumuladores para facilitar a implementação do nosso código.

Nesta lição, aprendemos que, em determinados programas, faz-se necessário o uso de contagem ou a soma de valores manipulados na estrutura de repetição. Ao utilizar contadores e acumuladores nos códigos, isto agiliza o processo de operações que são realizadas para manipular os dados no sistema em desenvolvimento. Devemos ficar atentos, pois tanto os contadores como os acumuladores devem receber um valor de atribuição e, em muitos casos, o valor é “zero”. Outra forma é que a variável contadora ou acumuladora tem de receber ela mesma mais algum valor (ZAKAS, 2005).

Outra forma importante que sempre devemos prestar atenção é como aplicar este tipo de contador ou acumulador para não sobrecarregar o sistema em desenvolvimento. Tudo depende da lógica da programação que deve ser implementada para satisfazer a necessidade do cliente ou usuário do programa. Não esqueça de tomar muito cuidado em como utilizar os contadores e acumuladores junto com as estruturas de repetições vistas até aqui.

Para esta lição, tente praticar os conhecimentos adquiridos das lições anteriores até aqui. Desenvolva um sistema que receba um número informado pelo usuário, o qual deve exibir se este número é ou não primo. Importante relembrar que um número primo é aquele que possui apenas 2 divisores: 1 e ele mesmo.

Na próxima lição, vamos aprender a utilizar os vetores ou arrays que permitem armazenar uma lista na memória principal do computador. Você já ouviu falar sobre eles? Conhece alguma aplicação deles? Bom, vamos nos aprofundar nesse assunto futuramente, mas apenas para não te deixar sem resposta, para os vetores existem diversas aplicações práticas, dentre elas, uma é em sites de compras. Por exemplo, se estivesse comprando uma TV em um site on-line, caso não gostasse de algum detalhe e desejasse remover, ou adicionar no carrinho de compras além da TV um celular de sua preferência, os vetores estariam aplicados nesse momento. Note que os vetores nada mais são que uma listagem onde possa inserir, remover, dentre outras funcionalidades. Bons estudos e até a próxima!