WEBVTT
00:00:01.083 --> 00:00:03.846
So I've got my good friend Winston here
to help us out with this one.
00:00:03.846 --> 00:00:06.424
And I know he already looks
impossibly awesome,
00:00:06.424 --> 00:00:08.911
but I think I want to change
his eye size a little bit.
00:00:08.911 --> 00:00:10.784
So here is where I draw his eyes.
00:00:10.784 --> 00:00:13.343
You can see we set the fill color,
and then drop two ellipses.
00:00:13.343 --> 00:00:15.273
And if I want to make
this ellipse smaller,
00:00:15.273 --> 00:00:18.011
I can change the width,
but then I also want it to be round,
00:00:18.011 --> 00:00:20.284
so I'm going to change the height
to be the same thing.
00:00:20.284 --> 00:00:22.955
And, well I want the eyes
to be the same size,
00:00:22.955 --> 00:00:25.381
so we should change the width
and the height of this eye.
00:00:25.381 --> 00:00:28.497
No, now the eyes are a little too small,
so I should change them back.
00:00:28.707 --> 00:00:30.839
Wouldn't I be great if I could
just change one number,
00:00:30.839 --> 00:00:32.656
and have both eyes change?
00:00:32.877 --> 00:00:36.191
And here is where variables come in.
00:00:37.232 --> 00:00:40.848
Now, a variable is just like a name
or a placeholder for something else.
00:00:41.303 --> 00:00:44.523
I like to think of a variable
as a big bucket with a name on it.
00:00:44.566 --> 00:00:46.295
You can put anything
you want in the bucket,
00:00:46.295 --> 00:00:47.588
but the name stays the same.
00:00:47.747 --> 00:00:51.937
We call the thing inside the bucket
the value of the variable.
00:00:53.702 --> 00:00:55.745
So let's start out by actually
making a variable.
00:00:55.745 --> 00:00:57.564
I'm going to do it all the way up here.
00:00:57.564 --> 00:01:00.333
All you do is type var,
which stands for variable,
00:01:00.333 --> 00:01:02.477
Space, and then
the name of the variable,
00:01:02.477 --> 00:01:04.465
which should describe
what the variable will hold.
00:01:04.465 --> 00:01:06.007
So I'm going to call this one eyeSize.
00:01:06.007 --> 00:01:07.997
And you can pretty much
name it whatever you want,
00:01:07.997 --> 00:01:10.043
but you're not allowed to have
spaces between words.
00:01:10.043 --> 00:01:11.974
And of course,
don't forget that semicolon!
00:01:12.248 --> 00:01:14.447
So now I've made
a variable called eyeSize,
00:01:14.447 --> 00:01:16.936
because it's going to hold
the size of Winston's eyes.
00:01:16.936 --> 00:01:19.511
But so far this variable
doesn't have a value yet.
00:01:19.846 --> 00:01:22.642
To give it one, we just say eyeSize,
00:01:22.642 --> 00:01:27.186
and then an =, and then 20; .
00:01:27.611 --> 00:01:29.370
Okay, now see that equal sign?
00:01:29.370 --> 00:01:31.763
Forget whatever your math teacher
taught you about it.
00:01:31.763 --> 00:01:35.086
That equal sign does not mean "equals,"
it means assignment.
00:01:35.391 --> 00:01:41.264
This means we're assigning
the value 20 to the variable eyeSize.
00:01:42.014 --> 00:01:43.716
In other words,
we're putting the number 20
00:01:43.716 --> 00:01:45.576
into the bucket called, eyeSize.
00:01:45.728 --> 00:01:48.438
And remember how in math class
you can say stuff like,
00:01:48.438 --> 00:01:51.818
x = 3, and 3 = x,
00:01:51.818 --> 00:01:54.457
and it all means the same thing,
because duuh, they're equal?
00:01:54.457 --> 00:01:56.377
Well, you can't do that here, either.
00:01:56.377 --> 00:01:58.443
The thing on the left-hand side
of the equal sign
00:01:58.443 --> 00:01:59.985
is always the variable.
00:01:59.985 --> 00:02:03.397
And the thing on the right-hand side
of the equal sign is always the value
00:02:03.397 --> 00:02:05.331
that you are assigning to the variable.
00:02:05.501 --> 00:02:07.549
A good way to help you
remember which side is what
00:02:07.549 --> 00:02:09.790
is while you're coding
and talking out loud to yourself,
00:02:09.790 --> 00:02:11.491
like every cool programmer does,
00:02:11.491 --> 00:02:15.290
if you hit an equal sign
don't say "equals," say "gets."
00:02:15.290 --> 00:02:18.587
So this becomes, eyeSize gets 20.
00:02:19.619 --> 00:02:22.049
And now, whenever I use
eyeSize in my program,
00:02:22.049 --> 00:02:24.780
the computer is going to be like,
"Oh yeah, that's a variable,
00:02:24.780 --> 00:02:27.871
I know what she really means
is this value 20."
00:02:28.312 --> 00:02:31.131
So check it out--
I'm just going to copy this,
00:02:31.419 --> 00:02:34.405
and then replace these four numbers
00:02:34.785 --> 00:02:37.058
with my new variable eyeSize,
00:02:38.255 --> 00:02:39.614
and Voila!
00:02:39.614 --> 00:02:43.920
Winston's eyes are now both
perfectly round and the same size,
00:02:43.920 --> 00:02:46.591
and if I want to change
the value of both eyes--
00:02:46.591 --> 00:02:47.730
or the size of both eyes,
00:02:47.730 --> 00:02:50.547
I can just change the value
of this one variable.
00:02:51.002 --> 00:02:53.045
Aah that's so cool!
00:02:54.309 --> 00:02:55.667
Okay, couple of last notes.
00:02:55.667 --> 00:02:58.512
Up here we made
a new variable called eyeSize.
00:02:58.512 --> 00:03:01.037
And here we gave it a value of 33.
00:03:01.037 --> 00:03:02.855
We can actually do that all in one step
00:03:02.855 --> 00:03:05.927
by saying var eyeSize,
that's the first step,
00:03:05.927 --> 00:03:08.717
gets 33,
that's the second step.
00:03:08.717 --> 00:03:10.825
And if I delete these two lines,
00:03:10.825 --> 00:03:12.626
you can see everything still works.
00:03:13.449 --> 00:03:16.761
Also remember that the computer
reads your code from top to bottom
00:03:16.761 --> 00:03:19.188
so the only reason it knew
what eyeSize was down here,
00:03:19.188 --> 00:03:21.668
was because we already
defined it up here.
00:03:21.668 --> 00:03:24.309
If I had put it down here instead,
00:03:25.021 --> 00:03:28.446
then once we got to this line of code,
the computer's going to be like,
00:03:28.446 --> 00:03:30.989
"eyeSize, what the heck is eyeSize?
I don't know what that is."
00:03:30.989 --> 00:03:34.002
In fact, here we get an error that says
eyeSize is not defined.
00:03:34.002 --> 00:03:35.570
And maybe you're thinking to yourself,
00:03:35.570 --> 00:03:37.481
"Yes, I did define it; it's right here!"
00:03:37.481 --> 00:03:39.584
But the computer's not smart,
and doesn't get that.
00:03:40.406 --> 00:03:42.636
So let's just move it back up to the top.
00:03:44.029 --> 00:03:45.549
And you've got to always make sure
00:03:45.549 --> 00:03:48.259
that you define your variable
before you try to use it.
00:03:49.137 --> 00:03:51.911
And now you know
about variables! Yaaay!