Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Por que no define el parámetro serie en el loop y lo usa directamente en el for? si el lo usa como un array pero no veo antes de la función dibujarBarra que esté declarado y usa la propiedad length sin estar declarado después de crear esta función

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Gráfico de Barras

por Clara Maye Doñu
| 41k xp | 4 posts


<h1>Gráfica de barras</h1>
<canvas width="600" height="400"></canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    var serie = [];//yo lo cree aquí antes de la función

    function dibujarRectangulo(x,y,base,altura,color){

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

    }

    function escribirTexto(x,y,texto){

        pincel.font = "15px Verdana";//definir =tamaño y fuente del texto
        pincel.fillStyle = "black";
        pincel.fillText(texto,x,y);//donde se va ubicar el texto que introduzcamos

    }

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

        escribirTexto(x,y - 10,texto);//el texto esta mas arriba del inicio de la grafica
        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;


        }

    }


    //creamos un array con los valores para cada año

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

    //creamos el array con los colores de la grafica

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

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

</script>
3 respuestas
por Estudiante
| 128.9k xp | 24 posts

Hola Clara, si entendí bien tu pregunta, también podríamos decir lo mismo de la mayoría de parámetros de la función: 

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

"x" , "y" y "texto". Ninguno de ellos necesita una declaración como tal, podríamos decir que los parámetros son un alias de los valores que pasamos al llamar a nuestra función. Por ejemplo: 

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

A este llamado a la función dibujarBarra le pasamos esos valores, entonces cuando se ejecute la función:

  • x tomara el valor de 150
  • y tomara el valor de 50
  • serie tomara el valor del array serie2019 (por eso puede usar el .length y lo usa en el for)
  • colores tomara el valor de colores (en este caso coincide el valor con su alias, es lo mas legible pero no siempre se puede hacer así)
  • titulo tomara el valor de "2019"

Espero haberte ayudado.

por ANDRES DAVID NARVAEZ NASTAR
| 31.4k xp | 6 posts

Hola Clara, no es necesario, al crear la función dibujarBarra(x , y , serie , colores , texto) menciono que recibiré 5 parámetros externos y los llamaré x**, y, **serie, colores y texto , en este caso serie puede tomar los valores del array de serie2009 o serie2019 que ya están definidos. algo similar sucede si te fijas en el parámetro texto que no esta definido pero al llamar a la función:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad tendría el valor de texto="2009" o texto="2019"

por José Lizandro Araujo Barrera
| 234.5k xp | 164 posts

JavaScript es un lenguaje débilmente tipado o de tipado dinámico, esto es las variables toman el tipo de lo que tú les estas guardando, como consecuencia puedes declararlas o no (esto no es así en lenguajes fuertemente tipados como Java y TypeScript).

Ahora independientemente de tipado fuerte o dinámico, cuando tú llamas una función los parámetros que envías los recibe la misma en ese orden:

               dibujarBarra(50, 50, serie2009, colores, "2009");
function dibujarBarra(x,     y, serie,          colores, texto) // posición a posición.

Por posición ocurre que x = 5, y = 50, serie = serie2009, colores = colores y texto = "2009". Y como notarás entonces las variables son una copia exacta de las que esta recibiendo.