1
00:00:00,822 --> 00:00:04,314
We're back with a program
that prints out my array of friends.
2
00:00:04,314 --> 00:00:06,854
But there's something
that really annoys me about it.
3
00:00:06,854 --> 00:00:09,472
Every time I add a new friend
to the array, I have to add
4
00:00:09,472 --> 00:00:11,403
a new text command down here.
5
00:00:11,403 --> 00:00:13,232
So let's say I add Winston.
6
00:00:13,232 --> 00:00:15,333
Well, he doesn't automatically show up.
7
00:00:15,333 --> 00:00:19,915
If I want him to show up, I have to go
and say text(myFriends[3],
8
00:00:19,915 --> 00:00:22,393
and then change the y position
and then we see Winston.
9
00:00:22,393 --> 00:00:24,842
So that's way too much work.
10
00:00:24,842 --> 00:00:28,262
I just want it so that every time
I add someone else to the array,
11
00:00:28,385 --> 00:00:31,308
it does the text command automatically.
12
00:00:31,308 --> 00:00:34,056
Well, do you remember
when we learned loops?
13
00:00:34,587 --> 00:00:37,156
Loops were a great way
to repeat the same bit of code
14
00:00:37,156 --> 00:00:38,536
many times in a row.
15
00:00:38,536 --> 00:00:41,067
Like, if we wanted to have
a bunch of trees in a row
16
00:00:41,067 --> 00:00:42,746
or a bunch of balloons.
17
00:00:42,746 --> 00:00:47,197
Well, as it turns out, loops are also
a great way to run a bit of code
18
00:00:47,197 --> 00:00:49,307
on each element in an array.
19
00:00:49,766 --> 00:00:53,617
In fact, you'll use a loop almost
every time you use an array.
20
00:00:53,617 --> 00:00:56,308
They work really well together.
21
00:00:57,427 --> 00:01:00,708
So lets use a loop to display
my friends' names, instead of having
22
00:01:00,708 --> 00:01:03,118
all these text commands
to show you what I mean.
23
00:01:03,348 --> 00:01:06,488
So we'll start with the three questions
we always ask ourselves
24
00:01:06,594 --> 00:01:08,123
when we're making a loop.
25
00:01:08,123 --> 00:01:11,237
First, what do I want to repeat?
Well, look up here. What's repeated?
26
00:01:11,237 --> 00:01:12,762
The text command.
27
00:01:12,762 --> 00:01:15,824
What do I want to change each time?
Well, let me just look
28
00:01:15,824 --> 00:01:20,004
and see what's different, the y position
and the current index, right?
29
00:01:20,004 --> 00:01:25,153
So the friend num and the y position.
30
00:01:25,310 --> 00:01:28,218
And how long should we repeat?
Well, we keep going
31
00:01:28,218 --> 00:01:30,730
until there are no more friends.
32
00:01:32,600 --> 00:01:36,820
So now we know what we want,
and we can make our loop.
33
00:01:36,952 --> 00:01:40,523
We start off with a counter variable
to keep track of where we are in the loop.
34
00:01:40,523 --> 00:01:43,392
So we'll say var friendNum = 0;
35
00:01:44,417 --> 00:01:47,317
We're going to start with zero
because remember that 0
36
00:01:47,317 --> 00:01:51,816
is the first element in the array, not 1.
Then we have our while loop.
37
00:01:51,828 --> 00:01:57,208
So we'll say
while(friendNum < my friends.length).
38
00:01:57,869 --> 00:02:01,697
So we're gonna compare the current
counter variable to the total number
39
00:02:01,697 --> 00:02:05,358
of things in the array.
Inside the loop, that's where
40
00:02:05,358 --> 00:02:07,228
we use our text command.
41
00:02:07,271 --> 00:02:10,912
So we say, text(myFriends[
and then here, instead of a number,
42
00:02:10,912 --> 00:02:13,101
we're gonna put friendNum
because friendNum represents
43
00:02:13,101 --> 00:02:14,469
the current number.
44
00:02:14,469 --> 00:02:17,902
And then we'll just put
one position for now.
45
00:02:18,172 --> 00:02:22,742
This has given us a little infinite
loop error because we haven't
46
00:02:22,742 --> 00:02:25,553
actually changed anything
about friendNum.
47
00:02:25,553 --> 00:02:28,792
Remember, we need to increment
friendNum each time, otherwise the loop
48
00:02:28,792 --> 00:02:31,666
will go on forever
because that condition's always true.
49
00:02:32,022 --> 00:02:36,342
I see something happened.
Let me comment out the old code
50
00:02:36,342 --> 00:02:38,323
so I can really see what's happened.
51
00:02:38,323 --> 00:02:41,242
What we have is we've showed
all the names,
52
00:02:41,242 --> 00:02:43,543
but they're all on top of each other.
53
00:02:43,543 --> 00:02:45,494
So, we need to change our y position.
54
00:02:45,506 --> 00:02:49,235
Let's just say 'friendNum*30'.
55
00:02:49,888 --> 00:02:53,279
That's good but Sophia's off the screen
and Sophia's not going
56
00:02:53,279 --> 00:02:55,306
to be very happy if she finds that out.
57
00:02:55,306 --> 00:02:59,588
So, let's just add 30 to that.
So now they're all offset by 30.
58
00:02:59,588 --> 00:03:03,931
Beautiful! So now you see we have
a loop displaying our array.
59
00:03:04,363 --> 00:03:09,049
And that means if we add more people
like OhNoes Guy, or maybe even Sal,
60
00:03:09,049 --> 00:03:12,143
if I just add him to the array
then Sal will be my friend.
61
00:03:12,191 --> 00:03:14,232
Awesome! Now he's my buddy.
62
00:03:14,232 --> 00:03:18,030
And you see that it just automatically
shows the new friends
63
00:03:18,333 --> 00:03:20,756
because it's always going
through the whole array.
64
00:03:21,005 --> 00:03:24,185
So we can delete our old code.
We don't need that anymore.
65
00:03:24,185 --> 00:03:27,886
And let's just go through
this code here and review what it does.
66
00:03:27,886 --> 00:03:31,015
So we start off
with friendNum equal to zero.
67
00:03:31,458 --> 00:03:34,354
We check to see if friendNum is
less than the current length.
68
00:03:34,354 --> 00:03:37,515
So you imagine zero is
less than six. That's true.
69
00:03:37,856 --> 00:03:41,940
So then we go inside here
and we say text, my friends friendNum.
70
00:03:41,940 --> 00:03:44,438
So that'll be my friends zero,
the first time.
71
00:03:44,612 --> 00:03:47,588
And then 30 plus zero times 30.
72
00:03:47,588 --> 00:03:52,800
So it displays Sophia at 10 and 30.
That's what it does.
73
00:03:53,771 --> 00:03:56,350
And then friendNum++.
So then it becomes 1.
74
00:03:56,350 --> 00:03:58,380
And then it goes back around
and says, "Ok, is 1 less
75
00:03:58,380 --> 00:04:00,210
than myfriends.length?
Yeah, it is."
76
00:04:00,361 --> 00:04:02,592
And it keeps going,
keeps going, keeps going.
77
00:04:02,592 --> 00:04:05,872
And then finally we get to Sal.
Remember, Sal is actually
78
00:04:05,872 --> 00:04:10,952
the sixth element in the array,
but he's index 5, since we start at zero.
79
00:04:10,952 --> 00:04:13,803
So, is five less than six? Yes.
80
00:04:13,803 --> 00:04:16,032
So it displays myfriends five.
81
00:04:16,032 --> 00:04:20,112
And then it becomes six
and we say, "Is six less than six?"
82
00:04:20,239 --> 00:04:21,828
No. It's equal.
83
00:04:21,828 --> 00:04:25,388
So this'll be false.
So it will never display the sixth element
84
00:04:25,388 --> 00:04:29,067
which is good
because there is nothing in index six.
85
00:04:29,067 --> 00:04:33,248
There's a sixth element,
but nothing in index six.
86
00:04:33,248 --> 00:04:36,409
it can be really confusing,
the fact that it's zero and one
87
00:04:36,409 --> 00:04:39,028
and doing all that
but you'll get the hang of it.
88
00:04:39,028 --> 00:04:41,368
All right, so that's our loop.
89
00:04:41,927 --> 00:04:45,008
Now, if you want to, you can
actually use a for loop
90
00:04:45,008 --> 00:04:46,720
as well if you prefer for loops.
91
00:04:46,781 --> 00:04:51,951
For for loops, we'll just say, for,
and then, var friendNum = 0;
92
00:04:52,661 --> 00:04:54,431
and then we have our condition
93
00:04:54,431 --> 00:04:57,821
friendNum < myFriends.length
94
00:04:57,821 --> 00:05:01,241
and then our increment: friendNum++
95
00:05:01,241 --> 00:05:06,612
and then inside the for loop, we can
just put just this line of code here.
96
00:05:06,612 --> 00:05:09,482
and I'll just change the x
so that you can see
97
00:05:09,545 --> 00:05:14,234
it does exactly the same thing.
So it's up to you which one you use,
98
00:05:14,234 --> 00:05:17,094
but the point is to use a loop
with your arrays
99
00:05:17,094 --> 00:05:19,815
because it will make you so powerful.