Functions | Computer Programming | Khan Academy

Summary

El guion trata sobre las funciones en programación, cómo se utilizan y su importancia. Se explica que una función es un conjunto de código con un nombre, diseñado para ser reutilizable. Se da un ejemplo práctico con la función 'rect()' y se muestra cómo crear una función personalizada para dibujar a Winston. Se resalta la ventaja de las funciones al evitar la repetición de código y se menciona la posibilidad de personalizar la posición de los elementos al usar parámetros en las funciones.

Takeaways

• 😀 Una función es un conjunto de código que se agrupa y le da un nombre para poder reutilizarlo fácilmente.
• 🎨 Los comandos rect(), fill(), text() son ejemplos de funciones que se utilizan para dibujar en programas.
• 📐 La función rect() es un atajo para dibujar un rectángulo usando solo una función en lugar de cuatro líneas individuales.
• 💡 Al crear una función propia, se le da un nombre descriptivo y se define con la palabra clave 'function', seguidos de paréntesis y llaves.
• 🔄 Para hacer que una función se ejecute, se debe 'invocar' o 'llamar' a esa función, como se hace con las funciones preexistentes.
• 🖌️ Al transformar un bloque de código en una función, este no se ejecutará hasta que se llame explícitamente.
• 🤹‍♂️ Las funciones son útiles para evitar repetir código; se pueden llamar varias veces para realizar la misma tarea.
• 🔄 Al utilizar la función random() dentro de una función, se pueden generar resultados aleatorios cada vez que se llama a la función.
• 🎭 Al cambiar los valores fijos (como coordenadas) dentro de una función por valores aleatorios o variables, se pueden crear múltiples instancias únicas.
• 🔍 La capacidad de pasar parámetros a las funciones permitirá controlar más precisamente cómo se ejecutan, permitiendo la personalización de la función en diferentes situaciones.

Q & A

¿Qué es una función en el contexto de programación?

Una función es un conjunto de código que se agrupa y se le da un nombre para poder reutilizar esa funcionalidad varias veces.

¿Cuál es el propósito de crear una función como rect()?

El propósito de crear una función como rect() es simplificar el proceso de dibujar un rectángulo utilizando solo una función en lugar de calcular y dibujar cuatro líneas individuales.

¿Cómo se declara una función en el código?

Se declara una función de manera similar a la declaración de una variable, utilizando la palabra clave 'function', seguido de paréntesis vacíos y llaves que contienen el código de la función.

¿Qué sucede si se crea una función pero no se llama para ejecutarla?

Si se crea una función pero no se llama, el código dentro de la función no se ejecutará. Es necesario llamar a la función para que se active y se ejecute el código que contiene.

¿Cómo se llama a una función para ejecutarla?

Se llama a una función escribiendo su nombre seguido de paréntesis vacíos y un punto y coma. Esto indica al programa que ejecute el código dentro de la función.

¿Por qué es útil poder reutilizar funciones en un programa?

Es útil poder reutilizar funciones porque permite ahorrar tiempo y evitar la repetición de código, lo que facilita la modificación y el mantenimiento del programa.

¿Cómo se pueden posicionar los dibujos de un objeto como Winston en diferentes lugares utilizando funciones?

Se pueden posicionar los dibujos en diferentes lugares utilizando funciones al cambiar los valores de las variables que controlan la posición dentro de la función, como se sugiere con el uso de la función random() para generar números aleatorios.

¿Qué ventajas aporta el uso de parámetros en las funciones?

El uso de parámetros en las funciones permite personalizar el comportamiento de la función cada vez que se llama, lo que aumenta la flexibilidad y la utilidad de la función en diferentes situaciones.

¿Cuál es la diferencia entre una función integrada como rect() y una función personalizada como drawWinston?

La diferencia es que las funciones integradas están disponibles para todos los programas en Khan Academy, mientras que las funciones personalizadas son específicas de cada programa y se crean para satisfacer necesidades particulares del mismo.

¿Cómo se pueden hacer funciones más útiles al permitir la personalización de sus resultados?

Se pueden hacer funciones más útiles permitiendo que se le pasen parámetros que alteren su comportamiento o resultados, permitiendo así una mayor personalización y flexibilidad en su uso.

Outlines

00:00

😀 Funciones en programación

Este párrafo introduce el concepto de funciones en programación, explicando cómo se utilizan en comandos básicos como rect(), fill() o text(). Una función es un conjunto de código con un nombre que permite reutilizar un bloque de funcionalidad. Se da un ejemplo práctico con rect(), que aunque podría implementarse con líneas, se agrupa en una función para simplificar el proceso. Además, se menciona la capacidad de crear funciones propias, como 'drawWinston', para dibujar un personaje múltiples veces. Se detalla cómo se declara una función, asignándole un nombre, y se muestra cómo se convierte un bloque de código en una función reutilizable. Finalmente, se destaca la necesidad de 'llamar' a la función para ejecutar su código, demostrando cómo hacerlo y cómo, al hacerlo, se puede generar múltiples instancias del personaje.

Keywords

💡Función

Una función es un conjunto de instrucciones que se agrupan bajo un nombre común y se pueden ejecutar repetidamente sin tener que escribir el código cada vez. En el vídeo, se explica que las funciones como rect() o fill() son bloques de código con etiquetas que permiten a los programadores utilizarlos en diferentes partes del programa sin tener que volver a escribir el código. Esto se relaciona con el tema del vídeo, que es la reutilización del código para simplificar y agilizar el proceso de programación.

💡rect()

rect() es una función específica que se utiliza para dibujar un rectángulo. En el guion, se menciona que rect() es una función predefinida que se ha hecho disponible para todos los programas en Khan Academy, y que internamente, podría estar compuesto por cuatro líneas de código que se ejecutan para dibujar cuatro líneas que forman un rectángulo.

💡line()

line() es otra función mencionada en el guion que se utiliza para dibujar líneas. Se utiliza para ilustrar cómo podríamos dibujar un rectángulo utilizando solo line() en lugar de rect(), lo que demuestra la flexibilidad de las funciones y cómo pueden ser utilizadas para construir formas más complejas a partir de primitivas básicas.

💡Dibujar

Dibujar es el proceso de crear imágenes o formas en una pantalla o lienzo. El vídeo trata sobre cómo las funciones pueden ser utilizadas para dibujar diferentes elementos, como rectángulos o personajes, como Winston. El dibujo es un concepto central en programación gráfica, y el vídeo utiliza el dibujo como un medio para enseñar sobre las funciones.

💡Variables

Las variables son contenedores para almacenar datos en un programa. En el guion, se mencionan variables como 'faceX' y 'faceY' que se utilizan para almacenar la posición central de la cara de Winston. Estas variables son cruciales para el dibujo de formas en un programa, ya que permiten a los programadores manipular y reutilizar valores en diferentes funciones.

💡Programa

Un programa es una serie de instrucciones que un ordenador puede ejecutar. En el contexto del vídeo, un programa se refiere al conjunto de código que se está escribiendo para dibujar y manipular gráficos en una pantalla. El vídeo enseña cómo se pueden utilizar las funciones dentro de un programa para hacer que el código sea más eficiente y fácil de entender.

💡Reutilización del código

La reutilización del código es el concepto de usar bloques de código que ya han sido escritos y probados en diferentes partes de un programa o en múltiples programas. El vídeo enfatiza la importancia de la reutilización del código a través de las funciones, ya que permite ahorrar tiempo y evitar errores al no tener que recrear constantemente el mismo código.

💡Declaración de función

La declaración de función es el proceso de definir una función en un programa. En el guion, se describe cómo se declara una función con la palabra clave 'function', seguida de un nombre, paréntesis y llaves que contienen el código de la función. Esta declaración es esencial para crear funciones personalizadas que se pueden llamar y ejecutar en un programa.

💡Llamar una función

Llamar una función es el acto de ejecutar o invocar una función en un programa. En el vídeo, se muestra cómo se llama a una función personalizada, como 'drawWinston()', para dibujar el personaje Winston en la pantalla. La llamada a la función es una parte crucial de la programación, ya que permite ejecutar el código definido dentro de la función.

💡Parámetros

Los parámetros son valores que se pasan a una función cuando se llama. Aunque no se mencionan explícitamente en el guion, el concepto está implícito en la discusión sobre cómo se podrían mejorar las funciones para dibujar múltiples instancias de un objeto en diferentes lugares. Los parámetros permitirían a los programadores personalizar la ejecución de una función cada vez que se llame, pasando valores específicos para variables como coordenadas de dibujo.

Highlights

Functions are a way to group code together for reuse.

rect() is a pre-defined function that draws rectangles.

Functions like rect() can be created by combining basic drawing commands.

Creating a function reduces the amount of code needed for repetitive tasks.

Custom functions can be created for specific tasks in a program.

The process of defining a function is similar to declaring a variable.

Function definition includes a name, parentheses, and curly braces.

Code within a function is not executed until the function is called.

Functions can be called to execute their code multiple times.

Functions can be used to draw the same object multiple times with ease.

Randomness can be introduced within functions to create variability.

Using random() function can place objects like Winston at random positions.

Functions make it possible to write less code for complex tasks.

Parameters will be discussed next for even more function control.

Parameters will allow functions to be more versatile and useful.

Transcripts

Now let's talk about something you've been using

this whole time: Functions.

Whenever you've used commands like rect() or fill() or text(),

you've been calling functions, and those functions have drawn

what you've told them to do.

What is a function really?

It's a collection of code that we've grouped together

and given a name because we want to be able

to use that bit of functionality many times.

Think about rect()? What does a rect() do?

It just draws four lines, right?

We could just do that using our line() function, right?

And here we have what looks like a rectangle.

But we realize that we kind of want to be able

to draw a rectangle a lot of times,

and it would be really annoying

to do the math every time to try and figure out

how to draw a line from one corner to the next

and next and next.

So instead, we just made a rect() function,

and that function does exactly the same thing

that those four lines of code did, but in much less code.

So that's pretty cool, and rect() is one of those functions

that we've made available for ALL programs

to use here on Khan Academy.

But - you can also make up your own functions

to use in each of your programs.

For example - let's say we are making a program

and we want to draw Winston multiple times -

maybe cause we're going to tell the life story of Winston

and show him at every age in his life.

So, here's what our Winston drawing code might start off as:

We have 'faceX' and 'faceY' variables

to store the center of the face,

and then we draw the eyes and the mouth

relative to those variables.

Right now the program sees the code,

and it's not inside any function, so it just runs it,

and it only runs it once.

OK, let's turn this into a function.

To do that, we do it very similarly to the way

we declare a variable, because that's actually

what we are doing.

So we say 'var drawWinston'.

We give it a nice name, very descriptive,

and then '=', but here, instead of writing a number or a string,

we're going to write 'function' (make sure you spell it right)

and then empty parentheses '()' and then an open curly '{'

and then a close curly '}' and our semicolon ';'

OK so what we need to do is put everything

that we want inside our function in between the start and end curly.

So we're going to take all this code here,

put it in our function (indent it nicely), and Ta Da!

So now what we have is we have this variable

that is storing a function - so basically we've given

a label to this block of code, so that we'd be able to tell

our program at any time,

"Hey, find that block of code with that label and run it!"

We we're making this bit of code reusable.

But now notice, that we have no Winston anymore!

We've lost Winston! Where did he go?

OK - so what happened is that once we put this inside a function,

we told our program "hey here's a bunch of code

that I want to be able to run later,

but only when I TELL you to run it"

So we have to tell it to run the code, which means we need

to 'call' the function - just like we do with ellipse() and rect() and line().

So we just write the function name ('drawWinston')

followed by our start and end parentheses '()'

and, of course, our semicolon, and Ta Da -

We have a Winston!

OK! So I think it's cool, but you might not think it's cool

because all we've done is made our program do exactly

what it did before. Kinda silly huh?

The whole point of functions is we can reuse them.

So let's do that now.

We can just copy and paste this function called "ta da!" "ta da!" over and over.

Hmmm, but it looks the same - - well - it worked -

it's drawing multiple Winstons, but the problem

is they're all in the same place.

If we had x-ray vision, we could x-ray the canvas

and see three Winstons, but I don't have x-ray vision.

(I don't know about you).

But, we can make a small change to our function

that WILL make it obvious.

So you see faceX and faceY - they're always 202 and 208?

We can change this to using the random() function -

- let's say like random() from 50 to 350 and it'll generate

a random number between those two - and we can do the same thing for here -

and so every time this function is called, it generates this new random number,

and if we push restart, we can keep getting random Winstons.

So cool! Whoo!!

Alright - so I think this is cool because it would have been

a lot of code to write this if we didn't have it in a function.

It would have been three times the amount of code.

But it's still not AS useful as it could be,

because we probably don't want random Winstons.

We probably want to be able to position a Winston

at specific points on the screen.

So stay tuned, 'cause we'll talk about how pass parameters

to our functions next, and then you'll be able

to do exactly that.