Não estou conseguindo resolver! Exercício 6, Aula 2.

Boas Clara,

Podes publicar o que já tens feito? Fica mais fácil olhar para o que tens e sugerir mudanças, mesmo que seja o que o professor partilhou e com a indicação do que pretendes fazer. Estou assumindo que desenhar rectângulo já não seja um problema, afinal as barras nada mais são do que rectângulos.

Por outro lado é importante que tenha percebido como funcionam os arrays.

Olá Clara.

Pode seguir que o professor ensina na sequência.

Mas vou procurar se ainda tenho aqui e te envio ele comentado.

Olá leonardo, eu até poderia olhar, mas não gostaria de obter a resposta diretamente.

E Mawer, eu não consegui fazer nada! Tive muita dificuldade com o entendimento do array! Em teoria e exercícios mais diretos consigo resolver numa boa. Porém com as contextualizações acabo me perdendo. Por isso escrevi aqui no forum. Não faço ideia nem de como começar!

O que vou lhe enviar foi minha implementação.

Coloquei adicionalmente o título dos browsers. Ia dar uma 'perfumada' alinhando o título do browser exatamente na metade da altura da cor, mas para tal precisaria de uma outra variável com um incremento diferente. Então chegou no fim do dia e acabei deixando pra la.

<canvas width="600" height="400"></canvas>
<script>

    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }

    function desenhaTexto(x , y, texto,fonte) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font=fonte+'px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }


    function desenhaBarra(x, y, serie, cores, texto) {

        desenhaTexto(x, y - 10, texto,15);

        var somaAltura = 0;
        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            desenhaTexto(x+60,y+somaAltura,browsers[i],10);
            somaAltura = somaAltura + altura;
        }
    }

    var cores = ['blue','green','yellow', 'red'];
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];
    var browsers = ['Chrome','Firefox','Safari','Outros'];

    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(250, 50, serie2016, cores, '2016');

</script>

Clara, à primeira vista, implementar um loop varrendo uma array é realmente algo mais fora do comum.

Dê uma 'brincada' com outras arrays internet afora. Estude muito isto pois, mais adiante verá Array Multidimensional (matrizes), então é preciso entender este conceito bem.

Adicionalmente... vamos tentar lhe ajudar. Poste, neste exercício, até onde tu entendeu. Abaixo, poste a parte que não entendeu. Assim de repente dá pra tentar explicar com outras palavras. Lembro que quando estudei transformação de binário ensinei aos meus colegas umas 3 formas pois da forma como o prof ensinou nem todos entenderam. É assim mesmo, cada um tem um mindset.

Vamos batalhando e você acabará por entender. Vamos aos poucos.

Abraço

Muito obrigada, Leonardo!

Estou relendo as informações dadas e tentando interpretar o comando da questão.

Farei até onde eu conseguir e postarei o resultado. Abrçs!

Fiz até aqui

canvas width="600" height="400"></canvas>

<script>

    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }

    function desenhaTexto(x , y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

    function desenhaBarra(x,y,serie,cor,texto) {

        desenhaTexto(x,y-10,texto) 

        var somaAlturas = 0; 

        for(var i =0; i<serie.length; i++) {
                var altura = serie[i]

                desenhaRetangulo(x,y,largura,altura,cor[i])


        }

    }

Bem, adicionalmente, o que faltou foi o seguinte:

1- Declarar arrays

   var cores = ['blue','green','yellow', 'red'];
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];

Nada mais são que as informações a serem acessadas - as cores das barras e os dados nos períodos, ordenadas de acordo como o texto pede)

2- Chamar a função desenhaBarra (lembrando de passar os argumentos na ordem que ela pede

----SOMENTE SEU FOR É PRECISO UMA EXPLICAÇÃO MELHOR----

Vamos lá...

a) Dentro dele, sua função desenhaRetangulo tem um argumento que será sempre o mesmo e precisa "mudar". Tanto é que tu declarou uma variável auxiliar (a somaAltura). o argumento é a altura. Que tem que ser y + a altura acumulada (somaAltura).

Dessa forma sua linha que era:

desenhaRetangulo(x,y,largura,altura,cor[i])

Deverá ficar:

desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);

b) Incrementar a var somaAltura fazendo o seguinte:

somaAltura = somaAltura + altura;

SEU FOR PASSARÁ A SER ASSIM:

        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];

            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }

SUA FUNÇÃO desenhaBarra PASSARÁ A SER ASSIM:

    function desenhaBarra(x, y, serie, cores, texto) {

        desenhaTexto(x, y - 10, texto);

        var somaAltura = 0;

        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];

            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }
    }

SEU CÓDIGO COMPLETO FICARÁ ASSIM:

<canvas width="600" height="400"></canvas>
<script>

    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }

    function desenhaTexto(x , y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

    function desenhaBarra(x, y, serie, cores, texto) {

        desenhaTexto(x, y - 10, texto);

        var somaAltura = 0;

        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];

            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }
    }

    var cores = ['blue','green','yellow', 'red'];
    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];

    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');

</script

Espero que tenha começado a aclarar a ideia. Treine bastante pois futuramente fará varrerdura em matriz, em nós de elementos como por exemplo XML/JSON e até mesmo no DOM de um html usando JS. Mas isto os professores vão colocando beeeeem devagar; curso a curso.

Não se assuste, é um passo de cada vez. Logo estará "com a senha" rs

Acredito que isso foi o mais perto que cheguei ao resultado. Ainda não deu certo, mas segue o programa juntamente com algumas observações.

Corrijam-nas se estiverem erradas.

Obrigada pelo apoio pessoal!

<canvas width="600" height="400"></canvas>

<script>

    function desenhaRetangulo(x, y, largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x,y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x,y, largura, altura);
    }

    function desenhaTexto(x , y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

    function desenhaBarra(x,y,serie,cor,texto) {
        desenhaTexto(x,y-10,texto); // começo acionando a função para desenhar o texto, pois, em qualquer barra que eu desenhar, o seu respectivo texto vai estar 10x acima dele.

        var somaAlturas = 0 // a soma das alturas começa em 0 pois ela parte do pressuposto de que nada foi desenhado ainda. Há apenas um ponto na coordenada. 

        for(var i = 0; i<serie.length; i++) { //um for para fazer o loop. Enquanto i for menor que a quantidade de itens dentro do array todos os comandos abaixo serão rodados.

            var altura = serie[i] // Aqui ele me diz que a altura( que é um parâmetro da função desenhaRetâgulo) é igual ao numêro da respectiva posição acionada no loop 

            desenhaRetangulo(x,y+somaAlturas,50,altura,cor[i]) // Chamei s a função para desenhar os retângulos. "x" será será informado depois, "y" é somado todas as vezes com a soma das alturas(inicialmente 0), a largura é sempre a mesma(50) e a altura como definida antes, é o valor da posição da série. Por fim a cor, como tb virou um array, tem dentro de seus colchetes o i. 

            somaAlturas = altura + somaAlturas //por fim a soma das altura é somada com a altura atual, para que ela saia do 0.



        }

          var cores = ['blue','green','yellow', 'red'];
          var serie2015 = [50,25,20,5];
          var serie2016 = [65,20,13,2];

          //depois dei os valores dos arrays. 


          desenhaBarra(50,50,serie2015,cores,'2015')
          desenhaBarra(150,50,serie2016,cores,'2016') 
          //e chamei as funções. 

    }

    </script>

Não tinha visto a resolução que você mandou anteriormente ao meu programa completo!

Por falta de atenção não coloquei as chaves no final da função!!

Compreendi tudo!!!

Muitíssimo obrigada!

Clara, quero dar meus parabéns!

Continue assim! Não prossiga enquanto não entender bem.

Assim se constrói um castelo bem feito, com blocos bem assentados.

Abraço