Más variables (Versión en video)

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/

Entonces, ya hicimos esta variable super genial,

para los ojos de Winston,

que ha sido de mucha ayuda porque nos ahorra mucho lo que tecleamos,

para cuando queramos cambiar el tamaño
de los ojos de Winston.

Recuerda, antes teníamos que teclear
el mismo número ¡4 veces!,

cada vez que queríamos cambiar
el tamaño de ojos de Winston.

Pero ¿Podemos usar variables para reemplazar números cuando no sean todos iguales?

Como, ¿Qué tal si quiero mover a Winston un poquito?

Podríamos cambiar cada uno de estos valores para "X",

pero no son todos iguales, así que no puedo simplemente

reemplazarlos todos por una variable.

Pero ¡espera!

Una vez que le asigno un número a una variable,

puedo usar esa variable, exactamente igual a como si fuera un número,

lo que significa, que puedo usar variables en expresiones matemáticas.

Así que, qué tal esto:

Hagamos una variable para la posición "X" de Winston,

la llamaremos "var x".
Suficientemente simple.

Y ahora démosle el valor de la coordenada "X"
de la cara de Winston.

Así que la cara está siendo dibujada
en la coordenada "X" = 200.

Así que diremos "var x=200";

Ahora, puedo reemplazar este número,
por mi nueva variable "x".

Queremos mover el valor "x"
y mover la cara de Winston.

Pero no sus ojos ni su boca.
Así que para arreglar eso,

vamos a definir la posición de sus ojos
y su boca,

en una posición relativa a la posición de su cara.

Así que, las coordenadas "x" serán el centro
de todas las elipses,

y su cara está siendo dibujada en, esto es 200,

y veamos su ojo izquierdo primero.

Así que esta elipse es su ojo izquierdo,

y vemos que está siendo dibujada en 150,

justo aquí, esto es 150.

Y yo sé que 150 es "50 menos que 200",

así que su ojo izquierdo debería estar

dondequiera que está su cara menos 50".

Así que sería "x", que es la posición de su cara, menos 50,

y ahora si cambio el valor de "x", su ojo se mueve junto con su cara.

Hagamos lo mismo con los otros.

Entonces, su ojo derecho está siendo dibujado en 300, puedo ver eso.

Entonces, esto aquí es 300.

Y 300, sé que es "100 más que 200".

Así que su ojo derecho debería estar

en donde sea que esté su cara más 100.

Eso es "x" + 100.

Y ahora, vamos con la boca.
La boca está siendo dibujada en 250,

aquí tenemos 250. Y 250 es

200 más 50.

Entonces es, donde sea que su cara esté "x" más 50.

Y ahora, me voy a deshacer de estas líneas,

y cada vez que modifico el valor de "x",

se mueve toda su cara. ¡Sí!

Ahora, antes de que continúes,
deberías saber

un par de cosas más acerca de las variables.

Una vez que creas una variable, utilizando "var x", puedes asignarle un valor,

tantas veces como quieras.

Así que luego de darle el valor a "x" de 198,

podríamos decir "x" recibe 300,

o, "x" recibe 150.

Y a partir de allí, la computadora va a tratar a "x",

con lo que sea que le hayamos asignado la última vez.

Así que en este caso, 150.

Pero sólo necesitas teclear "var", una vez por variable.

Si, aquí, hubiera tecleado "var x = 150;"
se habría creado una variable nueva por completo,

de nombre "x", destruyendo completamente la variable vieja en el proceso,

así que todas estas variables se van a la basura.

Y luego, la computadora sólo usará la nueva variable.

A veces, puedes hacer este tipo de cosas,

sin que pasen cosas horribles,

pero yo no lo aconsejaría.

Por ahora, sólo lo haremos una vez.
"var x = 150;".

Y ahora, convenientemente, puedo mover toda la cara de Winston fuera de la pantalla,

así puedo hablarles del siguiente punto.

Así que, cada vez que tienes una variable igual algo,

esa variable está en un lugar seguro y feliz.

De hecho, a la izquierda del signo igual, es el único lugar,

en donde la variable puede sentirse como ella misma,

porque ese es el único lugar en donde la computadora la considerará una variable.

En cualquier otro lugar, la computadora sólo la considerará como un valor,

así que aunque podemos hacer algo como esto:
"var x recibe 10" y luego,

"x" recibe "x",

Uh, confuso.
Bueno, a la izquierda, tenemos "x",

como una variable independiente y librepensadora,
que puede crecer, puede cambiar,

pero en la derecha,
sólo es 10, ¡Qué tristeza!.

Pero eso significa que podemos hacer cosas realmente útiles como ésta,

Puedo decir "x" recibe "x" más 1.

Así que en la izquierda, tenemos nuestra variable en lugar seguro y feliz.

En la derecha, tenemos esta variable,
que sabemos que es básicamente sólo un número

así que es 10.

Así que podemos reemplazarla mentalmente, con
"x" recibe 10 más 1,

que sólo significa que "x" recibe 11.

Así que toda está línea, sólo dice que
"x" recibe 11,

y a partir de ahora, el valor de "x" es 11.

Veamos qué ocurre, si metemos otra variable en la ecuación.

Voy a hacer
"var x = 10;"

"var y = 20;"

"x = y;"

"y = 7;"

Ok, lo que quiero saber es cuál es el valor de "x".

Averiguémoslo, así que esta línea aquí,

hace una nueva variable "x" y le asigna el valor 10,

así que el valor de "x" es 10.

En esta línea, estamos haciendo una nueva variable "y" dándole el valor 20,

no le hacemos nada a "x",
así que el valor de "x" sigue siendo 10.

Aquí, decimos "x recibe y", y es un poco confuso,

pero si piensas en ello, sabemos que
sólo una de estas variables

está en el lugar seguro y feliz,
pero la otra variable,

está siendo tratada exactamente
como si fuera un número.

Así que aquí podemos reemplazar mentalmente esta "y" con este valor, sólo 20,

y sabemos que lo que esta línea significa en realidad es que "x recibe 20".

Entonces, el valor de "x" aquí es 20.

Y luego, aquí tenemos a "y" en el lugar seguro y feliz esta vez,

pero no es tan confuso, porque tenemos sólo un número en el otro lado.

Así que aquí está la gran pregunta,

Cuando cambio el valor de "y" aquí:
¿Eso modifica el valor de "x" aquí arriba?

Y la respuesta:

¡NOOOO,
no, no, no, no, no!

Tienes que recordar,
aquí arriba, "y" está siendo tratada

como un número.

La computadora va a ignorar completamente
que es una variable,

va a olvidarse del hecho de que puede cambiar,
y sólo va a decir:

"Oh, 'y', lo que en realidad quieres decir es 20".

Entonces, aquí sólo estamos asignando un número a "x",

no estamos asignando una variable,
estamos asignando el valor de "y", que es 20.

Y eso significa, que el valor de "x"
se mantiene en 20,

incluso después de que cambiamos el valor
de esta variable "y" en la última línea.

¡Ufff! ¿Entienden?

Bueno, ahora muchachos, ya son
expertos totales en variables.

¡Felicitaciones!