dudas

Buenos días, miembros del equipo Alura, cordial saludo.

Intenté realizar el ejercicio pero no lo pude realizar. Mi pregunta es donde puedo ver más videos sobre los ciclos for y while con el manejo de indices ya que se me dificulta utilizarlos y comprenderlos, así como también el llamado de los índices en las funciones y las funciones anidadas y a utilizar loops.

se crea una variable pero por el momento no se utiliza: 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;
}

entendí que , bueno, el ciclo for es utilizado para hacer la iteración hasta que se cumpla determinada instrucción. listo me dice que tengo colocar 3 parametros en el ciclo for, primero inicializar la variable que en este caso es la posición 0 osea var i=0, luego como segundo parámetro me dice que si la posición es menor al tamaño del arreglo i< serie.length, se cumpla el tercer parametro de incremento, es decir, incrementar en 1 la posición.

me confundo en realidad ya que hay dos arreglos var serie2009 = [6, 47, 41, 3, 3]; var serie2019 = [81, 9, 3, 3, 4]; si me dice i< serie.length cual de estos dos arreglos estaría verificando? o como hago para saber todo el proceso que realiza el código? como el paso a paso.

se capturan los valores de la serie usando el indice. var altura = serie[i]; osea a la variable altura le asigno los valores del indice.

mi duda es: ¿pero cual indice si hay 3 arreglos?var serie2009 = [6, 47, 41, 3, 3]; var serie2019 = [81, 9, 3, 3, 4]; var colores = ["blue","green","yellow", "red","gray"];

¿porque llamamos a la función dibujar barra 2 veces? me confunde mucho dibujarBarra(50, 50, serie2009, colores, "2009"); dibujarBarra(150, 50, serie2019, colores, "2019");

Agradezco su gentil y oportuna respuesta. Feliz día. Gracias

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

script>

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);    
}

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


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;
    }


}

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