Functions (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Ahora hablemos acerca de algo que has estado usando todo el tiempo: Funciones

Cada vez que haz usado comandos cómo rsct() o fill() o tex()

haz estado llamando funciones, y esas funciones han dibujado

lo que tú le haz ordenado.

Qué es una función realmente? Es una colección de código que hemos agrupado

y dado un nombre porque queremos usar esa poca de funcionalidad muchas veces.

Piensa en rect(). ¿Qué hace rect()? Sólo dibuja cuatro lineas, correcto?

Nosotros podriamos hacer eso usando nuestra función line(), no es asi?

Y aquí tenemos lo que parece ser un rectángulo.

Pero nos damos cuenta que quisiéramos poder dibujar un rectángulo muchas veces

Y sería realmente molesto hacer los cálculos cada vez para tratar de encontrar

La forma de dibujar una línea desde una esquina a la otra, y la otra y la otra.

Así que en vez de eso, tan sólo hacemos una función rect() y esa función hace exactamente

Lo mismo que esas cuatro líneas de código, pero con mucho menos código.

Así que eso es muy cool, y rect() es una de esas funciones que tenemos disponibles para TODOS los programas que usamos aquí en Khan Academy

Pero, tu puedes también hacer tus propias funciones para usar en cada uno de tus programas.

Por ejemplo, digamos que estamos haciendo un programa y queremos dibujar "Winston" muchas veces - tal vez porque vamos a contar la historia de la vida de Winston y mostrarlo en cada época de su vida.

Así que esto es lo que sería el código para dibujar "Winston" inicialmente:

Tenemos las variables 'faceX' y 'faceY' para almacenar el centro de la cara, y entonces dibujar los ojos y la boca en posiciones relativas a esas variables.

En este momento el programa ve el código, y no está dentro de ninguna función, así que sólo lo ejecuta y este se ejecuta sólo una vez.

De acuerdo, convirtamos esto en una función. Para hacerlo, lo hacemos de la misma forma que declaramos una variable, porque en realidad eso es lo que estamos haciendo.

Así que decimos 'var drawWinston' - le damos un nombre bonito - muy descriptivo - y luego escribimos '=' pero aquí en vez de escribir un número o una cadena de caracteres, vamos a escribir 'function' (asegúrate de escribirlo correctamente) y luego abrimos y cerramos paréntesis '()' y luego abrimos corchetes '{' y cerramos corchetes '}' y nuestro punto y coma ';'

Ok así que lo que necesitamos hacer es poner todo lo que queremos dentro de nuestra función entre las corchetes. Así que tomaremos todo este código de aquí, lo ponemos en nuestra función (usamos sangría), y "ta da!"

Así que ahora lo que tenemos es una variable que almacena una función - básicamente hemos puesto una etiqueta a este bloque de código, de forma que podamos decirle a nuestro programa cuando queramos: "Oye encuentra ese bloque de código con esta etiqueta y ejecútalo!" De esta forma estamos haciendo que este fragmento del código sea re-usable.

Pero ahora fíjate, no tenemos mas a "Winston"! Hemos perdido a "Winston"! A donde fue? OK - lo que sucedió fue que una vez que pusimos el código dentro de la función le dijimos a nuestro programa "oye aqui esta este trozo de código que queremos ejecutar mas tarde, pero sólo cuando te digamos que lo ejecutes"

Así que tenemos que decirle que ejecute el código, lo que significa que debemos 'llamar' la función - tal cómo lo hacemos con ellipse(), rect() y line().

Así que sólo escribimos el nombre de la función ('drawWinston') seguida por nuestros paréntesis '()' y nuestro punto y coma y "ta da" Tenemos a Winston!

De acuerdo! Así que piensas que es cool, pero podrías pensar que no ya que lo que hemos hecho es hacer que nuestro programa haga exactamente lo mismo que hacia antes. No es eso tonto?

El punto de hacer una función es que podamos re-usarla. Así que hagamos eso. Podemos tan sólo copiar y pegar esta función y "ta da" "ta da" una y otra vez. Ummmm, pero parece igual - bien - funcionó - esta dibujando muchos Winstons, pero el problema es que están todos en el mismo lugar.

Si tuviéramos visión de rayos x podríamos ver tres Winstons, pero no tenemos (no sé tu)

Pero, podemos hacer un pequeño cambio a nuestra función que hiciera visible.

Si observamos faceX y facY - siempre son 202 y 208? Podemos cambiar estos números usando la función random() desde 50 a 350 y generará un número aleatoria cada vez, y si reiniciamos podemos obtener Winstons aleatorios - eso es genial!

Perfecto - Pienso que es genial porque se necesitaría un montón de código para escribir esto si no hubiéramos escrito una función. Tendríamos tres veces más código.

Pero todavía no es TAN útil como podría ser, porque probablemente queremos Winstons aleatorios - probablemente queremos colocar a Winston en un punto específico de la pantalla.

Así que mantente sintonizado porque próximamente hablaremos de cómo pasar parámetros a nuestras funciones.