Oi Luiz Fernando, tudo certo?
“Pouco” ou “muito” código são coisas bem relativas. Às vezes, para ter um código legível, realmente precisamos escrever um pouco mais. Porém, devemos nos atentar ao que pode ser otimizado, como as linhas que estão se repetindo no seu código, por exemplo. Repare que, a partir da linha 24, você foi repetindo praticamente o mesmo código, trocando apenas os índices do array cores.
Nesse caso específico, você repetiu o mesmo código 4 vezes, porque tínhamos 4 cores, mas imagine se tivéssemos 1000 cores no array! Seria praticamente impossível trabalhar copiando o mesmo código todas essas vezes. Por isso, é muito bom utilizarmos os loops.
Dessa forma, utilizando o while - uma das formas de fazer um loop, ou de iterar, poderíamos simplificar:
<canvas width="600" height="400"><canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillstyle="lightgrey";
pincel.fillRect(0,0,600,400);
pincel.strokeRect(0,0,600,400);
pincel.beginPath();
var serie2015 = [50,25,20,5];
var serie2016 = [65,20,13,2];
var cores = ["blue", "green", "yellow", "red"];
function desenhaBarra(x, y, serie, cores, ano){
pincel.beginPath();
pincel.font="18px Georgia";
pincel.fillstyle="black";
pincel.fillText(ano,x,y -10);
var contador = 0;
var yAcumulado = y;
while(contador < 4){
pincel.beginPath();
pincel.fillstyle=cores[contador];
pincel.fillRect(x, y, 50, serie[contador]);
pincel.strokeRect(x, yAcumulado, 50, serie[0]);
yAcumulado = yAcumulado+serie[contador];
contador++;
}
}
desenhaBarra (50, 50, serie2015, cores, '2015');
desenhaBarra (150, 50, serie2016, cores, '2016');
</script>
O while tem um fluxo que funciona da seguinte forma: definimos, antes dele, a variável contador, que inicia em 0 porque é esse o valor do qual precisamos. Quando lemos while(contador<4), estamos realmente testando: “contador é menor que 4?” e, como essa é uma condição válida, entramos no loop e executamos tudo que está determinado dentro do laço. Repare que a última linha atualiza o valor de contador. Então, se ele valia 0, passa a valer 1. Voltamos então à condição do while, fazemos a verificação e executamos os comandos.
E isso vai sendo feito até que contador passa a valer a 4. Nesse momento, quando voltamos à linha de verificação do while, contador não é menor que 4, contador é igual a 4. Por isso, não entramos mais dentro do loop e continuamos o programa normalmente.
Dentro do loop, ao invés de escrevermos 0, 1, 2, … como estávamos fazendo antes, apenas substituímos por contador. Essa é a mágica do loop!
Outra mudança que possibilitou o uso do loop foi a criação da variável yAcumulado. Ela começa com y e vai incrementando o valor da série: ao invés de fazer y + serie[0], vamos simplesmente acumulando isso tudo. Novamente, nos livramos de um grande problema: se tivéssemos 1000 valores pra trabalhar, teríamos que somar tudo isso, o que é bem complicado!
Recomendo que, para fixar o conteúdo, você tente ir vendo como o fluxo do loop funciona, anotando mesmo o valor de cada variável que vai mudando.
Além do while, existem outras formas de iterar, que provavelmente você conhecerá nos seus próximos mergulhos! Caso queira ler um pouco mais sobre isso, [esse artigo] (https://betterprogramming.pub/all-javascript-loops-f6424cabfcb6) pode ser bastante útil! O artigo está em inglês, então caso tenha dificuldades com o idioma, você pode utilizar o tradutor do navegador.
Espero que tenha ficado um pouco mais claro e qualquer dúvida estou aqui.
Abraços e ótimos estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado. ✓
