[Duda] No entendi

Hola Andrea espero te encuentres bien.

A mi tambien me costo trabajo comprender el tema, de hecho partí directamente a analizar las indicaciones del instructor y de ahí descifrar el código.

Tratare de explicar los puntos basicos de los cuales yo tuve duda.

En la primera parte tenemos las funciones principales:

function dibujarRectangulo(x, y, base, altura, color) {
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle=color;
    pincel.fillRect(x,y, base, altura);
    pincel.strokeStyle="black";
    pincel.strokeRect(x,y, base, altura);
}

function escribirTexto(x , y, texto) {
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

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

//Aquí viene el texto faltante

En esta primera parte, se declaran dos funciones, la primera nos ayuda a dibujar las rectas en la grafica "dibujarRectangulo" y la segunda nos ayuda a ingresar texto a nuestra pizarra (canvas).

var serie2009 = [6, 47, 41, 3, 3];
var serie2019 = [81, 9, 3, 3, 4];

Como ya se conocen los datos de la evolución de los navegadores, se declaran por medio de ARREGLOS (se ordena el listado segun los datos de los navegadores, es decir primero va el dato de Chrome, luego Firefox, luego IE ...); y se declaran DOS arreglos debido a que contamos con los datos de dos años diferentes "serie2009", "serie2019".

var colores = ["blue","green","yellow", "red","gray"];

Se declara otro arreglo, con los colores que deseamos que lleve nuestra grafica (azul es para Chrome, verde Firefox, amarillo IE...).

function dibujarBarra(x, y, serie, colores, texto) {

    //Aquí necesitamos escribir el texto y dibujar los rectángulos

}

A continuación, se crea la función "dibujarBarra" con los siguientes parametros:

-eje X

-eje Y

-serie

-colores

-texto

Y el llamado de la función "dibujarBarra" sera de la siguiente manera:

dibujarBarra(50, 50, serie2009, colores, "2009");
dibujarBarra(150, 50, serie2019, colores, "2019");

Recordemos que los parametros siguen siendo los mismos que vienen en nuestra función "dibujarBarra", si te fijas en el segundo llamado a la función, el parametro X tiene un valor de 150 esto es para posicionar a la segunda grafica 2019 un poco mas a la derecha. (si se dejara el mismo valor que 50 pixeles, se quedaria encimada y no se apreciarian las dos columnas, recordemos el ejemplo del profe con los cuadrados verdes).

Así mismo en el llamado de las funciones, se nombran tres variables ya declaradas anteriormente, recordemos:

"serie2009"

var serie2009 = [6, 47, 41, 3, 3];

"serie2019"

var serie2019 = [81, 9, 3, 3, 4];

"colores"

var colores = ["blue","green","yellow", "red","gray"];

Importante tenerlas en consideración ya que nos ayudaran a comprender nuestro codigo mas adelante

Ahora lo complejo ahí va:

function dibujarBarra(x, y, serie, colores, texto) {

    escribirTexto(x, y - 10, texto);

}

Aquí ya se comienza a escribir algunos datos en nuestra función "dibujarBarra", lo primero que deseamos, es que a nuestra barra se le pueda agregar un texto para distinguir el año de cada grafica (2009, 2019), para ello hacemos el llamado de nuestra función "escribirTexto", con sus parametros correspondientes (x, y, texto). En el llamado de la función "escribirTexto", si te fijas al eje Y se le esta dando un valor de - 10, esto se puede traducir a que nuestro texto estara posicionado 10 pixeles arriba de nuestra grafíca (por eso y - 10);

function dibujarBarra(x, y, serie, colores, texto) {

    escribirTexto(x, y - 10, texto);

    var sumaAltura = 0; //variable auxiliar

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

    }
}

Ahora bien, para hacer que nuestros valores se comiencen a graficar, vamos a hacer uso de un ciclo for, con el objetivo que por cada vuelta que realice se vaya graficando un valor (primero Chrome, luego Firefox, luego IE). Se tienen por sentado tres parametros:

1ro: La declaración de la variable i con valor 0

2do: El limite de nuestra variable (deseamos que i sea menor que serie.length) recordemos que .length se refiere a la longitud del arreglo nombrado serie. (nuestros arreglos "serie2009", "serie2019")

3ro: Nuestro contador i++ (i + i)

Así mismo se tiene una variable auxiliar que se encuentra declarada AFUERA de nuestro ciclo, esto lo explicare mas adelante.

Continuo en un segundo comentario.

Continuo con el resumen:

function dibujarBarra(x, y, serie, colores, texto) {

    escribirTexto(x, y - 10, texto);

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

Dentro de nuestro ciclo, vamos a declarar la variable altura y esta se define como el numero de indice (i) de nuestra serie:

"serie2009" var serie2009 = [6, 47, 41, 3, 3];

"serie2019" var serie2019 = [81, 9, 3, 3, 4];

Es decir altura es igual a mi indice 0, 1, 2, 3, 4 de mi arreglo en serie2009 y serie2019.

function dibujarBarra(x, y, serie, colores, texto) {

    escribirTexto(x, y - 10, texto);

    var sumaAltura = 0;
    for (var i = 0; i < serie.length; i++) {
        var altura = serie[i];
        dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);
        sumaAltura = sumaAltura + altura;
    }
}

Ahora bien, dentro de nuestro ciclo, vamos a hacer el llamado a nuestra Función "dibujarRectangulo" la cual nos va a permitir pintar nuestras barras. Recordemos que al hacer el llamado de la función, se tienen que considerar los parametros que estan declarados previamente:

-x

-y (en el llamado de la función, y se le asigna un nuevo valor y + sumaAltura, que esta declarada afuera de nuestro ciclo con un valor 0; sin embargo este valor se va a ir incrementando, se explicara mas adelante)

-base (en el llamado de la función, base tiene un valor de 50 pixeles)

-altura

-colores (en el llamado de la función, colores tiene la casilla [i] esto nos va a permitir mover la posición del indice del arreglo "colores" (primero es azul, luego verde, luego amarillo));

Es importante definir el valor sumaAltura, dentro de mi ciclo :

sumaAltura = sumaAltura + altura;

Lo que se dice en esta declaración, es que sumaAltura sera igual a sumaAltura (que su valor INICIAL es 0) + altura (altura que va a ser igual al valor que tenga acorde al indice de la serie).

Esto es un poco complicando de explicar, pero imagina que en la primera vuelta iniciemos sumaAltura el cual es 0, entonces si sustituimos el valor, seria

0 = 0 + altura

Ahora bien, como altura es igual al valor de nuestro indice en el arreglo de serie:

var serie2009 = [6, 47, 41, 3, 3];

si lo sustituimos seria:

0 = 0 + 6 (esta es una primera vuelta),

6 = 6 + 47 (esta es una segunda vuelta), el valor de sumaAltura se modifica a 6, ya que ese fue el resultado de la primera vuelta

53 = 53 + 41 (esta es una tercera vuelta), el valor de sumaAltura se modifica a 53, ya que ese fue el resultado de la segunda vuelta (6+47)

En resumen le estamos diciendo a la a Función "dibujarRectangulo", que por cada incremento que tenga en mi eje Y, se vaya dibujando un rectangulo de distinto color.

function dibujarRectangulo(x, y, base, altura, color) {
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle=color;
    pincel.fillRect(x,y, base, altura);
    pincel.strokeStyle="black";
    pincel.strokeRect(x,y, base, altura);
}

function escribirTexto(x , y, texto) {
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

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

function dibujarBarra(x, y, serie, colores, texto) {

    escribirTexto(x, y - 10, texto);

    var sumaAltura = 0;
    for (var i = 0; i < serie.length; i++) {
        var altura = serie[i];
        dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);
        sumaAltura = sumaAltura + altura;
    }
}

var colores = ["blue","green","yellow", "red","gray"];
var serie2009 = [6,47,41,3,3];
var serie2019 = [81,9,3,3,4];

dibujarBarra(50, 50, serie2009, colores, "2009");
dibujarBarra(150, 50, serie2019, colores, "2019");

Al final el código se queda de esta manera.

Todavía me quedaron algunas dudas, pero trate de explicarlo conforme lo que comprendí, espero haber apoyado.

Saludos

Muchas gracias por el desglose, compañera Mariana, me queda ahora algo más claro que en el ejercicio base, siento que el salto de complejidad fué considerable

Hola Mariana!!

Muchas gracias por tu explicacion tan detallada. Al igual que la compañera Andrea me costo muchismo trabajo lograr compreder la logica, pero con tu explicacion me quedo mas claro y entendible.

Buenas tardes y gracias por tu explicación Mariana, pero hay unas cosas que sigo sin entender, y estas serían:

**2do: El limite de nuestra variable (deseamos que i sea menor que serie.length) recordemos que .length se refiere a la longitud del arreglo nombrado serie. (nuestros arreglos "serie2009", "serie2019")

3ro: Nuestro contador i++ (i + i)

Esa parte no la entendí. La siguiente es:

Dentro de nuestro ciclo, vamos a declarar la variable altura y esta se define como el numero de indice (i) de nuestra serie: Es decir altura es igual a mi indice 0, 1, 2, 3, 4 de mi arreglo en serie2009 y serie2019.

**Lo que se dice en esta declaración, es que sumaAltura sera igual a sumaAltura (que su valor INICIAL es 0) + altura (altura que va a ser igual al valor que tenga acorde al indice de la serie).

Esto es un poco complicando de explicar, pero imagina que en la primera vuelta iniciemos sumaAltura el cual es 0, entonces si sustituimos el valor, seria

0 = 0 + altura ** Ahora bien, como altura es igual al valor de nuestro indice en el arreglo de serie:

var serie2009 = [6, 47, 41, 3, 3];

si lo sustituimos seria: ** 0 = 0 + 6 (esta es una primera vuelta),**

6 = 6 + 47 (esta es una segunda vuelta), el valor de sumaAltura se modifica a 6, ya que ese fue el resultado de la primera vuelta

53 = 53 + 41 (esta es una tercera vuelta), el valor de sumaAltura se modifica a 53, ya que ese fue el resultado de la segunda vuelta (6+47)

Esos fueron los apartados que no pude entender.