1
00:00:00,700 --> 00:00:07,260
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.

2
00:00:07,260 --> 00:00:10,335
If I go ahead and change the message like this, you know, to make it better

3
00:00:10,335 --> 00:00:11,926
all of them change.

4
00:00:11,926 --> 00:00:15,833
So how is this working? Well, we can revisit this code in a moment

5
00:00:15,833 --> 00:00:19,422
But first let's take a step back and think about how we might write this program

6
00:00:19,422 --> 00:00:22,471
using only what we know so far without using loops.

7
00:00:22,471 --> 00:00:26,751
So, to do that, we're really just gonna write a bunch of text over and over and over again right?

8
00:00:26,751 --> 00:00:32,590
We're gonna say text, message, I'll put it in the first place, and now it's just a matter of repeating this

9
00:00:32,590 --> 00:00:36,336
enough times so that eventually we get all the way to the bottom.

10
00:00:36,336 --> 00:00:38,949
And that's gonna take a lot of work, right?

11
00:00:38,949 --> 00:00:42,753
Because the bottom is really far away. And it's even worse if you

12
00:00:42,753 --> 00:00:46,758
then point out to me, hey, this wasn't actually 70, it needs to be closer, it needs to be at like

13
00:00:46,758 --> 00:00:50,709
60. And now that affects this one because it also needs to be smaller

14
00:00:50,709 --> 00:00:55,036
and all the way on, the more calls of text we have.

15
00:00:55,036 --> 00:00:58,261
And in fact, this way it's gonna take even longer to get to the bottom.

16
00:00:58,261 --> 00:01:02,176
So, this is really a pain, and thankfully we have loops to help us

17
00:01:02,176 --> 00:01:06,210
From now on, any time you see repetitive code like this, your first thought should be

18
00:01:06,210 --> 00:01:10,087
"Could I use a loop?" A loop will let us repeat this piece of code over and over and

19
00:01:10,087 --> 00:01:14,251
over again, making just little changes each time. So here's

20
00:01:14,251 --> 00:01:17,868
how we would rewrite this code with a loop. To get started, we need to type "while",

21
00:01:17,868 --> 00:01:22,089
the parentheses, and the curly braces. We're gonna get this message, but

22
00:01:22,089 --> 00:01:26,301
it's just because we're not done yet. Don't worry, it'll go away when we finish.

23
00:01:26,301 --> 00:01:30,810
So every time you write a loop you need to answer three key questions.

24
00:01:30,825 --> 00:01:33,370
And here they are: so,

25
00:01:33,370 --> 00:01:37,371
the first question is, "What do I want to repeat?" And

26
00:01:37,371 --> 00:01:41,466
whatever we want to repeat needs to go in-between these curlies.

27
00:01:41,466 --> 00:01:46,198
So we want to repeat the "text" call in this case, so go ahead and put that in here.

28
00:01:46,198 --> 00:01:49,571
But it's a little bit silly, right? Because right now we're just gonna be repeating

29
00:01:49,571 --> 00:01:53,477
the same call of text over and over, which is not really any good right, we need something to be

30
00:01:53,477 --> 00:01:57,710
changing. That brings us to question two, which is "What do I want to change each time?"

31
00:01:57,710 --> 00:02:01,423
So we want to change this "y" position, right? We want it to become 60 and then we want it

32
00:02:01,423 --> 00:02:05,503
to become 80. So we'll make that into a variable instead.

33
00:02:05,503 --> 00:02:09,476
Called y, because it's the y position. So we'll go ahead and declare a variable

34
00:02:09,476 --> 00:02:13,376
up here. I'll start it at 40. And now, finally, we just need to

35
00:02:13,376 --> 00:02:17,205
be changing y. We can do that down here, we can say "y gets y +

36
00:02:17,205 --> 00:02:21,088
"20" and it will be getting bigger every time. And in fact, we can use

37
00:02:21,088 --> 00:02:24,745
our lesson from incrementing shortcuts here. We can just go ahead

38
00:02:24,745 --> 00:02:29,092
and use the shortcut. So, this is fantastic, and we only

39
00:02:29,092 --> 00:02:32,705
need to do question three now, which is "How long should we be repeating this?"

40
00:02:32,705 --> 00:02:36,531
Well we want to do this over and over and over again, but we don't really want to do it forever, right?

41
00:02:36,531 --> 00:02:41,252
If we do it forever, first, that's a really long time to wait, and second, it might even crash your browser.

42
00:02:41,252 --> 00:02:44,471
But hopefully not. So really, we only

43
00:02:44,471 --> 00:02:48,371
want to do this until we get to the bottom of the page, right? Which means we wanna do it

44
00:02:48,371 --> 00:02:52,469
as long as y is less than 400. So we just put that in here, and there

45
00:02:52,469 --> 00:02:56,426
we have it! We have this message being written all the way down the screen.

46
00:02:56,426 --> 00:02:59,920
And you can see that this is way simpler than our previous approach, which, you know,

47
00:02:59,920 --> 00:03:04,175
took us about as long to write, but we weren't even a quarter of the way finished.

48
00:03:04,175 --> 00:03:08,090
So we can get rid of that, and there we have our program.

49
00:03:08,090 --> 00:03:11,711
Now, let's try to get a better understanding of what's going on. To do that, I'm going

50
00:03:11,711 --> 00:03:15,634
to print out y each time. I'm gonna say "y is now" and then down here

51
00:03:15,634 --> 00:03:19,410
I'll just tack y onto the end of the message so we can see it.

52
00:03:19,410 --> 00:03:23,343
So at the moment, the value is changing by 20, and we can change

53
00:03:23,343 --> 00:03:27,257
that just by changing this variable here. Or you can make it, you know, like,

54
00:03:27,257 --> 00:03:31,426
50. And now, now they're changing by 50. Similarly,

55
00:03:31,426 --> 00:03:35,578
you can go ahead and play with these other values and have them change. And

56
00:03:35,578 --> 00:03:39,201
you can see how that affects, you know, where the program stops.

57
00:03:39,201 --> 00:03:44,007
So, to understand this, you can think of it sort of

58
00:03:44,007 --> 00:03:47,342
like an "if" statement actually. We have our boolean expression in here

59
00:03:47,342 --> 00:03:52,009
just like you learned. And then, we do the body of the, um, the statement

60
00:03:52,009 --> 00:03:55,469
this part, only if the boolean is true, and otherwise we just jump to

61
00:03:55,469 --> 00:03:59,093
the end. But what's interesting is that with a while loop we actually

62
00:03:59,093 --> 00:04:03,864
have this secret thing going on at the bottom which says "go back to the start"

63
00:04:03,864 --> 00:04:07,202
"of the loop". And what this secret instruction means

64
00:04:07,202 --> 00:04:11,071
is that instead of leaving and just keeping on going, like with an "if"

65
00:04:11,071 --> 00:04:15,032
statement, every time we do the loop body we're going to go back and check

66
00:04:15,032 --> 00:04:19,204
if the condition is still true. And if it is, we're just going to repeat one

67
00:04:19,204 --> 00:04:23,238
more time. And just like you might have guessed, the second time we repeat, we're gonna do the same thing...

68
00:04:23,238 --> 00:04:27,086
we're gonna check hey, you know, go back to the start. Is y still less than

69
00:04:27,086 --> 00:04:31,565
279? And if it is, we'll repeat one more time and keep checking.

70
00:04:31,565 --> 00:04:34,591
And if it's not, we go back to the start here. And finally,

71
00:04:34,591 --> 00:04:38,478
we'll get to escape and keep going with our program.

72
00:04:38,478 --> 00:04:42,703
So great, there are a lot more interesting ways of using loops we're going to learn about soon, but

73
00:04:42,703 --> 00:04:46,703
for now, you are off to an excellent start.