WEBVTT

00:00:02.016 --> 00:00:04.164
Entonces, ya hicimos esta variable super genial,

00:00:04.164 --> 00:00:05.512
para los ojos de Winston,

00:00:05.512 --> 00:00:08.179
que ha sido de mucha ayuda
porque nos ahorra mucho tipeo,

00:00:08.179 --> 00:00:10.686
para cuando querramos cambiar el tamaño
de los ojos de Winston.

00:00:10.686 --> 00:00:13.764
Recuerda, antes teníamos que tipear
el mismo número ¡4 veces!,

00:00:13.764 --> 00:00:16.017
cada vez que queríamos cambiar 
el tamaño de ojos de Winston.

00:00:16.017 --> 00:00:19.300
Pero ¿Podemos usar variables para reemplazar números cuando no sean todos iguales?

00:00:19.300 --> 00:00:21.854
Como, ¿Qué tal si quiero mover a Winston un poquito?

00:00:21.854 --> 00:00:24.101
Podríamos cambiar cada uno de estos valores para X,

00:00:24.101 --> 00:00:26.908
pero no son todos iguales, 
así que no puedo simplemente...

00:00:26.908 --> 00:00:28.520
... reemplazarlos todos por una variable.

00:00:28.520 --> 00:00:29.764
Pero ¡espera!

00:00:29.764 --> 00:00:31.602
Una vez que le asigno un número a una variable,

00:00:31.602 --> 00:00:34.684
puedo usar esa variable, exactamente igual a como si fuera un número,

00:00:34.684 --> 00:00:37.308
lo que significa, que puedo usar variables en expresiones matemáticas.

00:00:37.308 --> 00:00:38.687
Así que, qué tal esto...

00:00:38.687 --> 00:00:40.929
Hagamos una variable para la posición X de Winston,

00:00:40.929 --> 00:00:44.398
la llamaremos var x.
Suficientemente simple...

00:00:44.398 --> 00:00:48.187
Y ahora démosle el valor de la coordenada X 
de la cara de Winston.

00:00:48.187 --> 00:00:51.669
Así que la cara está siendo dibujada 
en la coordenada X 200.

00:00:51.669 --> 00:00:54.688
Así que diremos var x=200;
(x recibe 200)

00:00:54.688 --> 00:00:59.333
Ahora, puedo reemplazar este número,
por mi nueva variable x.

00:00:59.333 --> 00:01:02.846
Queremos mover el valor x
y mover la cara de Winston.

00:01:02.846 --> 00:01:06.300
Pero no sus ojos ni su boca.
Así que para arreglar eso,

00:01:06.300 --> 00:01:10.675
vamos a definir la posición de sus ojos
y su boca,

00:01:10.675 --> 00:01:14.143
en una posición "relativa"
a la posición de su cara.

00:01:14.143 --> 00:01:17.931
Así que, las coordenadas x serán el centro
de todas las elipses,

00:01:17.931 --> 00:01:22.680
y su cara está siendo dibujada en...
... esto es 200,

00:01:22.680 --> 00:01:25.130
y veamos su ojo izquierdo primero.

00:01:25.130 --> 00:01:26.872
Así que esta elipse es su ojo izquierdo,

00:01:26.872 --> 00:01:29.901
y vemos que está siendo dibujada en 150,

00:01:29.901 --> 00:01:33.566
... justo aquí, esto es 150.

00:01:33.566 --> 00:01:37.644
Y yo sé que 150 es "50 menos que 200",

00:01:37.644 --> 00:01:41.346
así que su ojo izquierdo debería estar 
en "donde sea que esté su cara...

00:01:41.346 --> 00:01:42.899
...menos 50".

00:01:42.899 --> 00:01:47.932
Así que sería x, que es la posición de su cara, menos 50 ( x-50 ),

00:01:47.932 --> 00:01:52.705
y ahora si cambio el valor de x,
su ojo se mueve junto con su cara.

00:01:52.705 --> 00:01:54.896
Hagamos lo mismo con los otros.

00:01:54.896 --> 00:01:58.429
Entonces, su ojo derecho está siendo dibujado en 300, puedo ver...

00:01:58.429 --> 00:02:01.740
Entonces, esto aquí... es 300.

00:02:01.740 --> 00:02:06.098
Y 300, sé que es "100 más que 200".

00:02:06.098 --> 00:02:09.102
Así que su ojo derecho debería estar, en
"donde sea que esté su cara...

00:02:09.102 --> 00:02:10.515
... más 100".

00:02:10.515 --> 00:02:12.800
Eso es x + 100.

00:02:12.800 --> 00:02:17.104
Y ahora, vamos con la boca.
La boca está siendo dibujada en 250,

00:02:17.104 --> 00:02:21.021
aquí tenemos 250. 
y 250 es...

00:02:21.021 --> 00:02:24.007
"200 más 50".

00:02:24.007 --> 00:02:27.473
Entonces es, 
"donde sea que su cara esté...

00:02:27.473 --> 00:02:30.939
x más 50". (x + 50).

00:02:30.939 --> 00:02:34.406
Y ahora, me voy a deshacer de estas líneas,

00:02:34.406 --> 00:02:36.356
y cada vez que modifico el valor de x,

00:02:36.356 --> 00:02:38.134
se mueve toda su cara.

00:02:39.442 --> 00:02:41.248
Ahora, antes de que continúes, 
deberías saber...

00:02:41.248 --> 00:02:43.430
... un par de cosas más acerca de las variables.

00:02:43.430 --> 00:02:47.271
Una vez que creas una variable, utilizando "var x", puedes asignarle un valor,

00:02:47.271 --> 00:02:49.039
tantas veces como quieras.

00:02:49.039 --> 00:02:51.809
Así que luego de darle el valor a x de 198,

00:02:51.809 --> 00:02:55.184
podríamos decir x recibe 300,

00:02:55.184 --> 00:02:59.372
o, x recibe 150...

00:02:59.372 --> 00:03:01.397
Y a partir de allí, la computadora va a tratar a x,

00:03:01.397 --> 00:03:04.233
con lo que sea que le hayamos asignado la última vez.

00:03:04.233 --> 00:03:05.806
Así que en este caso, 150.

00:03:05.806 --> 00:03:08.736
Pero sólo necesitas tipear "var", una vez por variable.

00:03:08.736 --> 00:03:15.974
Si, aquí, hubiera tipeado "var x = 150;"
se habría creado una variable nueva por completo,

00:03:15.974 --> 00:03:19.267
de nombre x, destruyendo completamente la variable vieja en el proceso,

00:03:19.267 --> 00:03:21.873
así que todas estas variables se van, al tacho.

00:03:21.873 --> 00:03:24.562
Y luego, la computadora sólo usará la nueva variable.

00:03:24.562 --> 00:03:26.513
A veces, puedes hacer este tipo de cosas,

00:03:26.513 --> 00:03:28.306
sin que cosas horribles te pasen,

00:03:28.306 --> 00:03:30.188
pero yo no lo aconsejaría.

00:03:30.188 --> 00:03:33.662
Por ahora, sólo lo haremos una vez.
var x = 150;

00:03:33.662 --> 00:03:37.847
Y ahora, convenientemente, puedo mover toda la cara de Winston fuera de la pantalla,

00:03:37.847 --> 00:03:40.505
así puedo hablarles del siguiente punto.

00:03:40.505 --> 00:03:44.572
Así que, cada vez que tienes una variable igual algo
(x = algo),

00:03:44.777 --> 00:03:47.769
esa variable está en un lugar seguro y feliz.

00:03:47.769 --> 00:03:51.520
De hecho, a la izquierda del signo igual, es el único lugar,

00:03:51.520 --> 00:03:53.686
en donde la variable puede sentirse como ella misma,

00:03:53.686 --> 00:03:57.641
porque ese es el único lugar en donde la computadora la considerará una variable.

00:03:57.641 --> 00:04:00.374
En cualquier otro lugar, la computadora sólo hará de cuenta que es un valor,

00:04:00.374 --> 00:04:07.443
así que aunque que podemos hacer algo como esto:
"var x recibe 10" y luego,

00:04:07.443 --> 00:04:11.064
x recibe x,

00:04:11.064 --> 00:04:14.741
uh, confuso...
bueno, a la izquierda, tenemos x,

00:04:14.741 --> 00:04:20.620
como una variable independiente y librepensadora,
que puede crecer, puede cambiar,

00:04:20.636 --> 00:04:26.797
pero en la derecha...
sólo es 10... ¡Tan triste!.

00:04:26.797 --> 00:04:29.018
Pero eso significa que podemos hacer cosas realmente útiles como esta,

00:04:29.018 --> 00:04:34.004
Puedo decir x recibe x más 1,

00:04:34.004 --> 00:04:37.122
así que en la izquierda, tenemos nuestra variable en lugar seguro y feliz...

00:04:37.199 --> 00:04:43.095
... en la derecha, tenemos esta variable,
que sabemos que es básicamente sólo un número

00:04:43.095 --> 00:04:44.602
así que es 10.

00:04:44.602 --> 00:04:47.912
Así que podemos reemplazarla mentalmente, con 
x recibe 10 más 1,

00:04:47.912 --> 00:04:51.964
que sólo significa que x recibe 11.

00:04:51.964 --> 00:04:54.829
Así que toda está línea, sólo dice que
x recibe 11,

00:04:54.829 --> 00:04:58.107
y a partir de ahora, el valor de x es 11.

00:04:58.107 --> 00:05:01.194
Veamos qué ocurre, si metemos otra variable en la ecuación.

00:05:01.194 --> 00:05:06.688
Voy a hacer
var x = 10;

00:05:06.688 --> 00:05:10.855
var y = 20;

00:05:10.855 --> 00:05:13.020
x = y;

00:05:13.020 --> 00:05:17.696
y = 7;

00:05:17.696 --> 00:05:22.566
Ok, lo que quiero saber es cuál es el valor de x.

00:05:22.566 --> 00:05:25.691
Averiguémosolo, así que esta línea aquí,

00:05:25.691 --> 00:05:29.604
hace una nueva variable x y le asigna el valor 10,

00:05:29.604 --> 00:05:32.131
así que el valor de x es 10.

00:05:32.131 --> 00:05:36.076
En esta línea, estamos haciendo una nueva variable y dándole el valor 20,

00:05:36.076 --> 00:05:39.693
no le hacemos nada a x,
así que el valor de x sigue siendo 10.

00:05:39.693 --> 00:05:43.778
Aquí, decimos "x recibe y", y es un poco confuso,

00:05:43.778 --> 00:05:46.566
pero si piensas en ello, sabemos que 
sólo una de estas variables

00:05:46.566 --> 00:05:49.781
está en el lugar seguro y feliz,
pero la otra variable,

00:05:49.781 --> 00:05:53.999
está siendo tratada exactamente
como si fuera un número.

00:05:53.999 --> 00:05:58.276
Así que aquí podemos reemplazar mentalmente esta "y" con este valor, sólo 20...

00:05:58.276 --> 00:06:01.907
... y sabemos que lo que esta línea significa en realidad es que "x recibe 20".

00:06:01.907 --> 00:06:05.445
Entonces, el valor de x aquí es... 20.

00:06:05.445 --> 00:06:09.732
Y luego, aquí tenemos a "y" en el lugar seguro y feliz esta vez,

00:06:09.732 --> 00:06:13.190
pero no es tan confuso, porque tenemos solo un número en el otro lado.

00:06:13.190 --> 00:06:14.941
Así que aqúi está la gran pregunta...

00:06:14.941 --> 00:06:21.560
Cuando cambio el valor de "y" aquí: 
¿Eso modifica el valor de x aquí arriba?

00:06:21.560 --> 00:06:22.934
Y la respuesta:

00:06:22.934 --> 00:06:25.665
¡NOOOO...
no, no, no, no!

00:06:25.665 --> 00:06:30.186
Tienes que recordar,
aquí arriba, "y" está siendo tratada

00:06:30.186 --> 00:06:31.806
como un número.

00:06:31.806 --> 00:06:34.354
La computadora va a ignorar completamente
que es una variable...

00:06:34.354 --> 00:06:38.331
... olvidarse del hecho de que puede cambiar...
y sólo decir...

00:06:38.331 --> 00:06:42.968
"Oh, 'y', lo que en realidad quieres decir es 20".

00:06:42.968 --> 00:06:45.275
Entonces, aquí sólo estamos asignando un número a x,

00:06:45.275 --> 00:06:49.609
no estamos asignando una variable,
estamos asignando el valor de y, que es 20.

00:06:49.609 --> 00:06:54.612
Y eso significa, que el valor de x
se mantiene en 20,

00:06:54.612 --> 00:06:59.883
incluso luego de que cambiamos el valor
de esta variable "y" en la última línea.

00:07:00.143 --> 00:07:02.233
¡Ufff!
¿Capisce?

00:07:02.341 --> 00:07:06.023
Bueno, ahora muchachos, ya son
expertos totales en variables...

00:07:06.023 --> 00:07:10.000
¡¡¡Felicitaciones!!!