4.5. Contadores e acumuladores
O uso de contadores e acumuladores em um programa permite a exibição de conta¬gens e totalizações. Essas operações são realizadas sobre os dados manipulados pelo programa. Os contadores ou acumuladores possuem duas características principais:
• A variável contadora ou acumuladora deve receber uma atribuição inicial (geralmente zero).
• A variável contadora ou acumuladora deve receber ela mesma mais algum valor.
A diferença entre os contadores e os acumuladores é que o contador recebe ele mesmo mais 1 (ou algum valor constante), enquanto o acumulador recebe ele mesmo mais uma variável.
O programa 4.5 apresenta um exemplo de uso dos contadores e acumuladores. O programa faz a leitura de contas que devem ser pagas por um usuário. As contas são exibidas e no final da listagem o número de contas (contador) e a soma dos valores (acumulador) são destacados. A Figura 4.9 exibe uma tela com algumas contas digitadas na execução do programa.
Exemplo 4.5 – Código HTML do programa Contas do Mês (ex4_5.html)
<!DOCTYPE htnL> <htpil lang="pt-BR"> <head> <neta charset="UTF-8"> <neta nane="viewport" content='lwidth=devtce-width) ini.tial-scale=1.0"> <neta http-equiv="X-UA-Conpatible" content="ie=edge"> <Unk rel.="stylesheet" href="css/estUos.css"> <title>ExeiTipl.o 4.5</title> </head> <body> <ing src="img/ex4_5.jpg" alt="Contas a Pagar" class="alta"> <hl>Programa Contas do Mês</hl> <p>Descrição da Conta: <input type="text" id="inDescricao"> </p> <p>Valor a Pagar R$: <input type="text" id="inValor"> </P> <input type="button" value="Registrar Conta" id="btRegistrar"> <pre id="outListaContas" ></pre> <pre id="outTotal" ></pre> <script src="js/ex4_5.js"></script> </body> </htnl>
Código JavaScript do programa Contas do Mês (js/ex4_5.js)
// declara e inicializa contadores e acumuladores (variáveis globais) var nunContas = 0;
var valTotal = 0;
// variável string que acumula as contas
var resposta =
function registrarConta() {
// cria referência aos elementos da página manipulados pela function var inDescricao = document.getElementById("inDescricao"); var inValor = document.getElementBy!d("inValor"); var outListaContas = document.getElementBy!d("outListaContas"); var outTotal = document.getElementById("outTotal");
// obtém conteúdo dos campos
var descricao = inDescricao.value;
var valor = Number(inValor.value);
// verifica preenchimento dos campos
if (descricao == "" || valor == 0 || isNaN(valor)) { alert("Informe os dados corretamente..."); inDescricao.focus(); return;
}
// adiciona valores ao contador e acumulador numContas++; valTotal = valTotal + valor;
// concatena as contas resposta = resposta + descricao + " - R$: " + valor.toFixed(2) + "\n";
// altera o conteúdo das tags de resposta outListaContas.textContent = resposta + " ";
outTotal.textContent = numContas + " Conta(s) - Total R$: " + valTotal.toFixed(2);
// limpa campos e posiciona cursor em inDescricao inDescricao.value = inValor.value = inDescricao.focus();
}
// referencia elemento e após associa function ao evento click var btRegistrar = document.getElementById("btRegistrar"); btRegistrar.addEventListener("click", registrarConta);
Observe que nesse programa fizemos uso de variáveis globais. Como discutido na seção 2.7, uma variável global continua armazenada em memória após a execução de uma função. Para acumular os valores das contas e listá-los sempre que o usuário adicionar uma nova conta, é necessário o uso de variáveis com esse escopo. A variável nimContas atua como um contador, para apresentar a cada acréscimo de conta o número de contas inseridas pelo usuário. Já a variável vaLTotal é um acumulador, para somar o valor das contas inseridas no programa.
Podemos também utilizar os contadores e acumuladores para nos auxiliar na exibição de uma resposta. O Exemplo 4.6 recebe um número e informa se ele é ou não primo. Apenas para relembrar, um número primo é aquele que possui apenas 2 divisores: 1 e ele mesmo. Nesse programa, faremos uso de uma variável contadora para obter a quantidade de divisores do número informado pelo usuário. A Figura 4.10 exibe a tela do programa números primos.
Exemplo 4.6 – Código HTML para exibir o layout do programa Números Primos (ex4_6.html
clDOCTYPE htnl> <htnl lang="pt-br"> <head> <neta charset="UTF-8"> <neta nane="viewport" content="width=device-width, initial-scale=1.0"> <neta http-equiv="X-UA-Conpatible" content="ie=edge"> <Unk rel="stylesheet" href="css/estilos.css"> <title>Exenplo 4.6</title> </head> <body> <i.mg src="img/ex4_6.jpg" alt="Núneros Primos" class="nornal"> <hl>Programa Números Primos</hl> <p>Número: <input type="text" id="inNumero"> </P> cinput type="button" value="Verificar se é Primo" id="btVerificarPrimo"> <h3 id="outResposta"></h3> <script src="js/ex4_6.js"></script> </body> </html>
Observação: segundo novos conceitos matemáticos, o número 1 não deve mais ser considerado número primo. Em razão disso, o teste para verificar se o número é primo, no programa ex4_6.js a seguir, contém apenas a comparação if (numDivisores == 2).
Código JavaScript do programa Números Primos (js/ex4_6.js)
function verificarPrimo() {
// cria referência aos elementos da página
var inNumero = document.getElementByldf"inNumero");
var outResposta = document.getElementById("outResposta")
var num = Number(inNumero.value); // obtém o número informado
// verifica se preencheu corretamente o campo inNumero
if (num == 0 11 isNaN(num)) {
alert("Número Inválido...");
inNumero.focus();
return;
}
var numDivisores = 0; // declara e inicializa contador
// percorre todos os possíveis divisores do número
for (var i = 1; i <= num; i++) {
// verifica se i (1, 2, 3...) é divisor do num
if (num % i == 0) {
numDivisores++; // se é, incrementa contador
}
}
// se possui apenas 2 divisores, é prino
if (nunDivisores == 2) {
outResposta.textContent = num + " É primo";
} else {
outResposta.textContent = num + " Não é primo";
}
}
// referencia elemento e após associa function ao evento click
var btVerificarPrimo = document.getElementById("btVerificarPrimo");
bt\/erificarPrtmo.addEventListener("click", verificarPrimo);
Como pode ser observado nesse exemplo, o contador serve de apoio para exibir a resposta do programa. Embora funcione corretamente, esse programa pode conter várias melhorias para aprimorar o seu desempenho. Imagine se um usuário digitar a número 1000. O programa vai repetir o laço criado pelo comando for 1000 vezes e realizar igual número de testes. Porém, como o número 2 já é um divisor do número 1000, as demais 998 repetições e os testes do programa são desnecessários.
Para melhorar o desempenho desse algoritmo, podemos utilizar uma variável com am comportamento semelhante ao de um contador. A variável de controle recebe o valor inicial 0. E, caso uma condição no laço seja verdadeira, trocamos o valor dessa variável para 1 e forçamos a saída do loop (com o comando break). Essas variáveis agem como uma flag (sinalizadora ou bandeira) e indicam a presença ou ausência de algo no conjunto de dados em análise. A variável sinalizadora (flag) também poderia receber os valores lógicos true ou false.
Observe as mudanças no trecho final do programa, a fim de otimizar a sua performance.
// declara e inicializa a variável tipo flag
var tenOivisor - 0;
// percorre os possíveis divisores do nun
for (var i = 2; í <= nun / 2; i++) {
if (nun % i == 0) {
tenDivisor = 1; // nuda o flag break; // sai da repetição
}
}
// se nun > 1 e não possui divisor
if (nun > 1 && !tenDivisor) {
outResposta.textContent = nun + " É prino";
} else {
outResposta.textContent = nun + " Não é prino";
}
No comando if final, utilizamos uma particularidade da linguagem JavaScript (e de outras linguagens): o valor 0 (zero) equivale a um valor lógico false e 1 (ou outro valor diferente de 0) equivale a um valor lógico true. Assim, testar: temDivisor == 0, temDivisor == false ou, ainda, ! temDivisor produz o mesmo resultado. Usar ! temDivisor (não temDivisor) facilita a compreensão.
Com esse ajuste no loop for do programa, uma boa economia de processamento é realizada, pois, ao encontrar o primeiro divisor do número, a variável tipo flag tem o seu valor alterado e a repetição é interrompida. Para o número 1000 anteriormente citado, a repetição vai executar apenas 1 vez (já que o número 2 é um divisor do 1000). Outro detalhe: como o maior divisor inteiro possível de um número é a sua metade, indicamos que a repetição deve ir até num / 2. Talvez existam formas ainda mais eficientes para verificar se um número é primo. O objetivo neste momento não é aprofundar na matemática, mas destacar que, com pequenos ajustes, podemos otimizar o desempenho de nossos programas.
