Intro to While Loops (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/

Let's talk about loops. So I have a while loop here, and with just a few lines of code, I can write this message all the way down the screen.

If I go ahead and change the message like this, you know, to make it better

all of them change.

So how is this working? Well, we can revisit this code in a moment

But first let's take a step back and think about how we might write this program

using only what we know so far without using loops.

So, to do that, we're really just gonna write a bunch of text over and over and over again right?

We're gonna say text, message, I'll put it in the first place, and now it's just a matter of repeating this

enough times so that eventually we get all the way to the bottom.

And that's gonna take a lot of work, right?

Because the bottom is really far away. And it's even worse if you

then point out to me, hey, this wasn't actually 70, it needs to be closer, it needs to be at like

60. And now that affects this one because it also needs to be smaller

and all the way on, the more calls of text we have.

And in fact, this way it's gonna take even longer to get to the bottom.

So, this is really a pain, and thankfully we have loops to help us

From now on, any time you see repetitive code like this, your first thought should be

"Could I use a loop?" A loop will let us repeat this piece of code over and over and

over again, making just little changes each time. So here's

how we would rewrite this code with a loop. To get started, we need to type "while",

the parentheses, and the curly braces. We're gonna get this message, but

it's just because we're not done yet. Don't worry, it'll go away when we finish.

So every time you write a loop you need to answer three key questions.

And here they are: so,

the first question is, "What do I want to repeat?" And

whatever we want to repeat needs to go in-between these curlies.

So we want to repeat the "text" call in this case, so go ahead and put that in here.

But it's a little bit silly, right? Because right now we're just gonna be repeating

the same call of text over and over, which is not really any good right, we need something to be

changing. That brings us to question two, which is "What do I want to change each time?"

So we want to change this "y" position, right? We want it to become 60 and then we want it

to become 80. So we'll make that into a variable instead.

Called y, because it's the y position. So we'll go ahead and declare a variable

up here. I'll start it at 40. And now, finally, we just need to

be changing y. We can do that down here, we can say "y gets y +

"20" and it will be getting bigger every time. And in fact, we can use

our lesson from incrementing shortcuts here. We can just go ahead

and use the shortcut. So, this is fantastic, and we only

need to do question three now, which is "How long should we be repeating this?"

Well we want to do this over and over and over again, but we don't really want to do it forever, right?

If we do it forever, first, that's a really long time to wait, and second, it might even crash your browser.

But hopefully not. So really, we only

want to do this until we get to the bottom of the page, right? Which means we wanna do it

as long as y is less than 400. So we just put that in here, and there

we have it! We have this message being written all the way down the screen.

And you can see that this is way simpler than our previous approach, which, you know,

took us about as long to write, but we weren't even a quarter of the way finished.

So we can get rid of that, and there we have our program.

Now, let's try to get a better understanding of what's going on. To do that, I'm going

to print out y each time. I'm gonna say "y is now" and then down here

I'll just tack y onto the end of the message so we can see it.

So at the moment, the value is changing by 20, and we can change

that just by changing this variable here. Or you can make it, you know, like,

50. And now, now they're changing by 50. Similarly,

you can go ahead and play with these other values and have them change. And

you can see how that affects, you know, where the program stops.

So, to understand this, you can think of it sort of

like an "if" statement actually. We have our boolean expression in here

just like you learned. And then, we do the body of the, um, the statement

this part, only if the boolean is true, and otherwise we just jump to

the end. But what's interesting is that with a while loop we actually

have this secret thing going on at the bottom which says "go back to the start"

"of the loop". And what this secret instruction means

is that instead of leaving and just keeping on going, like with an "if"

statement, every time we do the loop body we're going to go back and check

if the condition is still true. And if it is, we're just going to repeat one

more time. And just like you might have guessed, the second time we repeat, we're gonna do the same thing...

we're gonna check hey, you know, go back to the start. Is y still less than

279? And if it is, we'll repeat one more time and keep checking.

And if it's not, we go back to the start here. And finally,

we'll get to escape and keep going with our program.

So great, there are a lot more interesting ways of using loops we're going to learn about soon, but

for now, you are off to an excellent start.