So I've got my good friend Winston here to help us out with this one.
And I know he already looks impossibly awesome,
but I think I want to change his eye size a little bit.
So here is where I draw his eyes.
You can see we set the fill color, and then drop two ellipses.
And if I want to make this ellipse smaller,
I can change the width, but then I also want it to be round,
so I'm going to change the height to be the same thing.
And, well I want the eyes to be the same size,
so we should change the width and the height of this eye.
No, now the eyes are a little too small, so I should change them back.
Wouldn't I be great if I could just change one number,
and have both eyes change?
And here is where variables come in.
Now, a variable is just like a name or a placeholder for something else.
I like to think of a variable as a big bucket with a name on it.
You can put anything you want in the bucket,
but the name stays the same.
We call the thing inside the bucket the value of the variable.
So let's start out by actually making a variable.
I'm going to do it all the way up here.
All you do is type var, which stands for variable,
Space, and then the name of the variable,
which should describe what the variable will hold.
So I'm going to call this one eyeSize.
And you can pretty much name it whatever you want,
but you're not allowed to have spaces between words.
And of course, don't forget that semicolon!
So now I've made a variable called eyeSize,
because it's going to hold the size of Winston's eyes.
But so far this variable doesn't have a value yet.
To give it one, we just say eyeSize,
and then an =, and then 20; .
Okay, now see that equal sign?
Forget whatever your math teacher taught you about it.
That equal sign does not mean "equals," it means assignment.
This means we're assigning the value 20 to the variable eyeSize.
In other words, we're putting the number 20
into the bucket called, eyeSize.
And remember how in math class you can say stuff like,
x = 3, and 3 = x,
and it all means the same thing, because duuh, they're equal?
Well, you can't do that here, either.
The thing on the left-hand side of the equal sign
is always the variable.
And the thing on the right-hand side of the equal sign is always the value
that you are assigning to the variable.
A good way to help you remember which side is what
is while you're coding and talking out loud to yourself,
like every cool programmer does,
if you hit an equal sign don't say "equals," say "gets."
So this becomes, eyeSize gets 20.
And now, whenever I use eyeSize in my program,
the computer is going to be like, "Oh yeah, that's a variable,
I know what she really means is this value 20."
So check it out-- I'm just going to copy this,
and then replace these four numbers
with my new variable eyeSize,
and Voila!
Winston's eyes are now both perfectly round and the same size,
and if I want to change the value of both eyes--
or the size of both eyes,
I can just change the value of this one variable.
Aah that's so cool!
Okay, couple of last notes.
Up here we made a new variable called eyeSize.
And here we gave it a value of 33.
We can actually do that all in one step
by saying var eyeSize, that's the first step,
gets 33, that's the second step.
And if I delete these two lines,
you can see everything still works.
Also remember that the computer reads your code from top to bottom
so the only reason it knew what eyeSize was down here,
was because we already defined it up here.
If I had put it down here instead,
then once we got to this line of code, the computer's going to be like,
"eyeSize, what the heck is eyeSize? I don't know what that is."
In fact, here we get an error that says eyeSize is not defined.
And maybe you're thinking to yourself,
"Yes, I did define it; it's right here!"
But the computer's not smart, and doesn't get that.
So let's just move it back up to the top.
And you've got to always make sure
that you define your variable before you try to use it.
And now you know about variables! Yaaay!