WEBVTT

1
00:00:00.700 --> 00:00:04.007
JavaScript provides several
different ways to create loops.

2
00:00:04.007 --> 00:00:05.910
They all essentially do the same thing.

3
00:00:05.910 --> 00:00:07.375
Repeat an action over and

4
00:00:07.375 --> 00:00:11.782
over again over a given number of times
until a stopping condition is true.

5
00:00:11.782 --> 00:00:15.370
To better explain, think back to when you
learned about conditional statements.

6
00:00:15.370 --> 00:00:20.681
For example, the if statement runs a block
of code if a particular condition is true.

7
00:00:20.681 --> 00:00:25.240
An if statement looks like this,
inside the parentheses goes a condition.

8
00:00:25.240 --> 00:00:28.968
If the condition is true,
then the code inside the code block runs.

9
00:00:28.968 --> 00:00:33.141
In this example, if the value stored in
the variable name is the string Gadget,

10
00:00:33.141 --> 00:00:35.270
then an alert dialog appears.

11
00:00:35.270 --> 00:00:37.475
Loops use conditions in a similar way.

12
00:00:37.475 --> 00:00:39.771
The while loop for example,
has a structure and

13
00:00:39.771 --> 00:00:42.260
syntax that resembles an if statement.

14
00:00:42.260 --> 00:00:45.617
There's the while keyword
followed by a set of parentheses.

15
00:00:45.617 --> 00:00:48.870
A condition also goes inside
the set of parentheses.

16
00:00:48.870 --> 00:00:53.568
But instead of the code inside the block
running only once when the condition is

17
00:00:53.568 --> 00:00:57.569
true, it runs over and over again
as long as the condition is true.

18
00:00:57.569 --> 00:01:01.117
All right, let's have a go at the
challenge of logging ten random numbers to

19
00:01:01.117 --> 00:01:03.110
the console using a while loop.

20
00:01:03.110 --> 00:01:06.202
You can code along with me by launching
the workspace with this video.

21
00:01:06.202 --> 00:01:09.058
You can also download the project
files for this course and

22
00:01:09.058 --> 00:01:10.695
use your preferred text editor.

23
00:01:10.695 --> 00:01:15.670
Open the file while.js
located inside the js folder.

24
00:01:15.670 --> 00:01:18.773
This file is already linked to index.html,
and

25
00:01:18.773 --> 00:01:23.099
there's already a function in
this file called getRandomNumber.

26
00:01:23.099 --> 00:01:28.285
It returns a random number from one to
a number that's supplied to the function.

27
00:01:28.285 --> 00:01:31.825
For example,
if you call the function like this,

28
00:01:31.825 --> 00:01:34.874
it returns a random
number from one to six.

29
00:01:34.874 --> 00:01:38.515
You learned all about how this function
works in an earlier JavaScript course.

30
00:01:38.515 --> 00:01:41.266
Check the teacher's notes
if you need a refresher.

31
00:01:41.266 --> 00:01:44.916
To log ten random numbers from one to six,

32
00:01:44.916 --> 00:01:49.820
you could call the function
once inside console.log,

33
00:01:49.820 --> 00:01:54.117
then copy the statement and
paste it nine times.

34
00:01:57.030 --> 00:02:00.839
Whenever you copy and paste code to
perform the same action again and again,

35
00:02:00.839 --> 00:02:02.267
it should be a warning sign,

36
00:02:02.267 --> 00:02:06.333
there's likely a better more maintainable
way of writing and running the code.

37
00:02:06.333 --> 00:02:10.078
This is where a loop comes in,
to help you avoid code duplication.

38
00:02:10.078 --> 00:02:12.810
I'll start by adding a while statement.

39
00:02:14.260 --> 00:02:17.031
Notice that just like
a conditional statement,

40
00:02:17.031 --> 00:02:19.676
there's no semi colon
after the final brace.

41
00:02:19.676 --> 00:02:23.193
Now what should go inside this condition?

42
00:02:23.193 --> 00:02:25.970
I want to return ten random numbers.

43
00:02:25.970 --> 00:02:29.223
So I need to run this loop ten times.

44
00:02:29.223 --> 00:02:33.740
First, I'll need some way to keep track
of the number of times the loop runs.

45
00:02:33.740 --> 00:02:36.743
Tracking values sounds like a job for
a variable.

46
00:02:36.743 --> 00:02:42.218
I'll start by declaring a variable
outside the loop named counter and

47
00:02:42.218 --> 00:02:44.644
assigning it the number zero.

48
00:02:44.644 --> 00:02:48.816
Think of this counter as a lap counter at
a race that keeps track of how many times

49
00:02:48.816 --> 00:02:51.120
a runner goes around the track.

50
00:02:51.120 --> 00:02:56.228
At the start of a race, a runner has
run around the track zero times,

51
00:02:56.228 --> 00:03:00.443
each time around the track,
or each time the loop runs,

52
00:03:00.443 --> 00:03:02.883
we'll add one to this counter.

53
00:03:02.883 --> 00:03:07.604
Inside the braces,
you update the counter variable by

54
00:03:07.604 --> 00:03:12.846
adding one to its current value
with counter plus equals 1.

55
00:03:12.846 --> 00:03:18.350
This code block contains all of the code
that runs each time the loop runs.

56
00:03:18.350 --> 00:03:22.474
For each time through the loop,
the counter increments by one.

57
00:03:22.474 --> 00:03:26.052
So now that I have a way to keep track
the number of times the loop runs,

58
00:03:26.052 --> 00:03:28.440
I'll create a test condition.

59
00:03:28.440 --> 00:03:33.699
Between the parentheses,
type counter is less than 10.

60
00:03:33.699 --> 00:03:38.518
In other words, as long as the number
assigned to the counter variable is

61
00:03:38.518 --> 00:03:41.520
less than ten,
the loop will repeat itself.

62
00:03:42.790 --> 00:03:46.915
Now I'll execute some
code inside the loop.

63
00:03:46.915 --> 00:03:49.805
I'll use the getRandomNumber function

64
00:03:49.805 --> 00:03:54.653
to generate a random number from one
to ten and log it to the console.

65
00:03:59.710 --> 00:04:02.551
I want to display the random
number in a message.

66
00:04:02.551 --> 00:04:07.369
So I'll use backticks to
create a template literal that

67
00:04:07.369 --> 00:04:11.673
displays the message,
the random number is, and

68
00:04:11.673 --> 00:04:16.900
to insert or interpolate
the number into the string output,

69
00:04:16.900 --> 00:04:24.508
I'll place the call to the getRandomNumber
function within dollar sign curly braces.

70
00:04:24.508 --> 00:04:26.840
I'll save the file.

71
00:04:26.840 --> 00:04:30.226
When I preview index.html
in the browser and

72
00:04:30.226 --> 00:04:34.692
open the JavaScript console,
ten random numbers appear.

73
00:04:34.692 --> 00:04:38.180
Now, what if you want 100 random numbers?

74
00:04:38.180 --> 00:04:39.864
The loop makes it really simple.

75
00:04:39.864 --> 00:04:46.951
Back in the while.js, change the test
condition to counter is less than 100.

76
00:04:49.210 --> 00:04:50.969
How about 1,000?

77
00:04:54.140 --> 00:04:55.915
Okay, I'll set this back to ten.

78
00:05:02.644 --> 00:05:07.120
Now let's take a moment to look into the
inner workings of the JavaScript engine.

79
00:05:07.120 --> 00:05:10.618
We'll slow everything down and
look at how this program works and

80
00:05:10.618 --> 00:05:14.383
how the browser's JavaScript engine or
interpreter runs this code.

81
00:05:14.383 --> 00:05:17.400
First, it loads and
reads through the program.

82
00:05:17.400 --> 00:05:20.984
It memorizes the function and
checks for any syntax errors.

83
00:05:20.984 --> 00:05:23.130
Then it starts to run the program.

84
00:05:23.130 --> 00:05:27.285
It creates a variable named counter
which points to the value zero.

85
00:05:27.285 --> 00:05:29.010
Then it looks at the while loop.

86
00:05:29.010 --> 00:05:30.576
It evaluates the condition.

87
00:05:30.576 --> 00:05:34.016
At this point,
the counter variable holds the value zero.

88
00:05:34.016 --> 00:05:37.818
The loop condition asks,
is counter less than ten?

89
00:05:37.818 --> 00:05:39.588
Zero is indeed less than ten, so

90
00:05:39.588 --> 00:05:44.150
the JavaScript engine enters the code
block and does several things.

91
00:05:44.150 --> 00:05:49.220
First, it calls the function to generate
a random number from one to ten and

92
00:05:49.220 --> 00:05:51.486
it increases the counter by one.

93
00:05:51.486 --> 00:05:54.480
The counter variable now
holds the value one.

94
00:05:54.480 --> 00:05:57.309
Then the loop goes back to
the while condition and

95
00:05:57.309 --> 00:06:00.281
checks the condition again,
is one less than ten?

96
00:06:00.281 --> 00:06:02.980
Yes it is, so the loop runs again.

97
00:06:02.980 --> 00:06:07.065
It runs again and again until
the condition is no longer true.

98
00:06:07.065 --> 00:06:11.333
When the counter variable is equal to ten,
the condition is no longer true, so

99
00:06:11.333 --> 00:06:14.191
the loop ends and
the rest of the program continues.

100
00:06:14.191 --> 00:06:17.377
In this case, the loop is
the last part of this program, so

101
00:06:17.377 --> 00:06:19.997
the entire script is done and
the program ends.