Intro To Variables (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/

Bueno, tengo a mi buen amigo Winston aquí para ayudarnos con éste.

Y sé que ya se ve imposiblemente genial.

Pero me parece que quiero cambiar
el tamaño de sus ojos un poco.

Así que aquí es donde dibujo sus ojos.

Puedes ver que configuramos el color de relleno y dibujamos dos elipses,

y si quiero hacer esta elipse más pequeña,
puedo cambiar el ancho,

pero también quiero que sea redonda
así que cambiaré el alto,

para que sea el mismo valor.

Y si también queremos que ambos ojos sean del mismo tamaño, deberíamos cambiar

el alto y el ancho de este ojo.
Pero ahora son un poco pequeños.

Así que los cambiaré nuevamente.

¿No sería grandioso que pudiera cambiar sólo un número y que ambos ojos cambiaran?

Y aquí, es donde entran en juego las "variables".

Ahora, una variable es tan sólo como un nombre

o contenedor para algo más.

A mí me gusta pensar que una variable es un gran balde con nombre.

Puedes poner cualquier cosa que quieras en el balde,

pero el nombre se mantiene igual.

Llamamos a lo que está dentro del balde,
el "valor" de la variable.

Así que, comencemos haciendo una variable
bien arriba, aquí.

Todo lo que voy hacer es tipear "var"

que significa "variable", un espacio y luego
el nombre de la variable,

que debería describir lo que va a contener la variable,

así que la llamaremos eyeSize (tamañoDelOjo).

Y básicamente, puedes ponerle el nombre que quieras,

pero no se permite poner espacios entre las palabras del nombre.

Y, por supuesto, no olvides el punto y coma.

Entonces, ahora tenemos una variable llamada eyeSize,

porque va a contener el tamaño de los ojos de Winston,

pero hasta ahora, esta variable no tiene un valor aún.

Para darle un valor,
sólo le decimos...

eyeSize = 20
(eyeSize, luego un signo igual y luego 20).

Ok, ¿Ves ese símbolo "=" (igual)?

Olvídate lo que te haya dicho tu profesor de matemática,

Ese signo de igual, no significa "iguales",

significa "asignación".

Esto significa que estamos
asignando el valor 20 a la variable eyeSize.

En otras palabras, estamos poniendo el número "20"
en el balde llamado eyeSize.

Y ¿Recuerdas como, en la clase de matemáticas,
podías decir algo como x es igual a 3,

y 3 es igual a x, y era lo mismo? Porque...

... Daah, son iguales!...
Bueno, no puedes hacer esto aquí tampoco.

La cosa a la izquierda del signo igual es siempre la variable,

y la cosa a la derecha del signo = , es siempre el valor que estás asignando a la variable.

Una buena manera de ayudarte recordar
cuál lado es qué, es...

... mientras programas y hablas, acostúmbrate como cualquier programador hace,

a decir "recibe" en lugar de "igual"
al encontrarte con un signo =.

Entonces, esto se convierte en
"eyeSize recibe 20".

Y ahora, cada vez que utilice eyeSize en nuestro programa,

la computadora, es como que dirá
"ah sí, es una variable...

... yo sé lo que significa en realidad. Es este valor 20".

Así que mira, voy a copiar esto...

... y luego, reemplazar estos 4 números...

... por mi nueva variable eyeSize,

y voilá!!!!
Los ojos de Winston son ahora,

ambos, perfectamente redondos

y del mismo tamaño.
Y si quiero cambiar el valor de ambos ojos,

, es decir, el tamaño de los ojos, podría cambiar el valor de esta única variable.

¡Ay!! ¡Genial!

Ok, un par de notas más.

Aquí arriba, hicimos
una nueva variable llamada eyeSize,

y aquí, le dimos el valor 33.

En realidad, podemos hacer, todo en un sólo paso diciendo:

var eyeSize = 33;
(eyeSize recibe 33),

y si elimino estas dos líneas,

puedes ver que todo funciona todavía.

También, recuerda que la computadora lee tu código de arriba hacia abajo,

así que la única razón por la que supo
qué significaba eyeSize aquí abajo,

es porque ya la habíamos definido aquí arriba.

Si en lugar de ello, la pusiera aquí abajo,

entonces, cuando lleguemos a esta línea del código,

la computadora pensará
"¿eyeSize? no sé lo que es eyeSize".

De hecho, aquí recibimos un error
que dice "eyeSize no está definido".

Y quizás pienses
"sí, la definí, está aquí mismo".

Pero la computadora no es tan astuta y no lo entiende.

Así que movámosla de nuevo hacia arriba,

y siempre tienes que asegurarte de definir tu variable, antes de tratar de usarla.

Y, ahora, ya sabes acerca de variables,
Yeeeeeeaaahh!