1
00:00:00,246 --> 00:00:03,094
Loops come in handy on many occasions.

2
00:00:03,094 --> 00:00:06,374
Now you'll use a for loop to
display content on the page.

3
00:00:06,374 --> 00:00:10,559
You'll create a loop that adds 10 div
elements to a webpage with numbers

4
00:00:10,559 --> 00:00:11,377
inside them.

5
00:00:11,377 --> 00:00:14,443
In other words,
use a for loop to repeat the same action,

6
00:00:14,443 --> 00:00:16,330
adding a div to the page 10 times.

7
00:00:16,330 --> 00:00:20,983
The divs are styled with CSS to display
as circles with white background colors.

8
00:00:20,983 --> 00:00:27,046
To code along with me,
open the file html-loop.js and

9
00:00:27,046 --> 00:00:30,916
make sure to update the script tag in

10
00:00:30,916 --> 00:00:36,084
index.html to point to js/html-loop.js.

11
00:00:36,084 --> 00:00:37,070
In this file,

12
00:00:37,070 --> 00:00:43,175
there's already a variable named main that
points to the main element in index.html.

13
00:00:43,175 --> 00:00:47,699
I'll start by declaring a new variable
that's going to hold a string containing

14
00:00:47,699 --> 00:00:49,835
the HTML I want to display on the page.

15
00:00:49,835 --> 00:00:54,948
I'll name it html and
set its initial value to an empty string.

16
00:00:54,948 --> 00:01:00,093
I'm using the variable name html because
it reflects the contents of the variable,

17
00:01:00,093 --> 00:01:02,203
a string that holds HTML div tags.

18
00:01:02,203 --> 00:01:06,934
And I'm using the let keyword because
the loop is going to update and

19
00:01:06,934 --> 00:01:12,091
add a string of HTML to the current
value of the variable each time it runs.

20
00:01:12,091 --> 00:01:13,874
And the HTML will be simple.

21
00:01:13,874 --> 00:01:16,230
Each div will look similar to this.

22
00:01:16,230 --> 00:01:19,525
An opening and closing div tag.

23
00:01:19,525 --> 00:01:21,177
And to make it more interesting,

24
00:01:21,177 --> 00:01:24,781
I'll display the number of the counter
each time we go through the loop.

25
00:01:24,781 --> 00:01:26,698
So each div will display
a different number.

26
00:01:32,501 --> 00:01:34,654
Now I'll write the for loop structure.

27
00:01:38,027 --> 00:01:43,998
First, between the parentheses, I'll
create or initialize the counter variable.

28
00:01:43,998 --> 00:01:48,500
I'll name it i, and set its value to zero.

29
00:01:48,500 --> 00:01:53,685
Remember, this variable declaration
is evaluated only once at the very

30
00:01:53,685 --> 00:01:59,050
beginning before the condition is even
tested and before the loop begins.

31
00:01:59,050 --> 00:02:03,533
Next I'll add the condition,
i is less than 10.

32
00:02:03,533 --> 00:02:08,816
As long as the value stored in i is
less than 10, the loop will run.

33
00:02:08,816 --> 00:02:13,648
Again, the condition gets evaluated
before each loop iteration.

34
00:02:13,648 --> 00:02:15,911
Now I need to make sure that
the loop ends at some point.

35
00:02:15,911 --> 00:02:20,536
I can do that by changing the value
of i each time through the loop.

36
00:02:20,536 --> 00:02:25,192
I'll use the increment operator to
add one to the current value of

37
00:02:25,192 --> 00:02:27,062
i each time the loop runs.

38
00:02:27,062 --> 00:02:31,566
In other words,
after the code in this code block runs.

39
00:02:31,566 --> 00:02:34,296
Now, I'll add the code
to run within the loop.

40
00:02:34,296 --> 00:02:36,089
Each time through the loop,

41
00:02:36,089 --> 00:02:40,653
I want to add a set of div tags to
the string assigned to the HTML variable.

42
00:02:40,653 --> 00:02:43,803
You can do that with the addition
assignment operator.

43
00:02:43,803 --> 00:02:47,991
I'll type html +=,
I'll assign it a template literal so

44
00:02:47,991 --> 00:02:53,875
that I can interpolate or insert the value
of the i variable into the string output.

45
00:02:53,875 --> 00:02:57,070
In other words,
the number of times the loop runs.

46
00:02:57,070 --> 00:03:03,640
Between the div tags I'll write ${} i.

47
00:03:03,640 --> 00:03:08,980
As soon as the value of i is no longer
less than 10, the loop ends and

48
00:03:08,980 --> 00:03:15,100
the program can display the entire
contents of the HTML variable on the page.

49
00:03:15,100 --> 00:03:20,156
Finally, I've selected the main element
and assigned it to the variable main.

50
00:03:20,156 --> 00:03:24,626
So I'll set the HTML to display inside

51
00:03:24,626 --> 00:03:28,965
main with main.innerHTML = html.

52
00:03:28,965 --> 00:03:34,894
I'll save the file and
preview the results in the browser.

53
00:03:34,894 --> 00:03:40,061
Notice how the browser displays 10
divs with the numbers 0 through 9.

54
00:03:40,061 --> 00:03:45,288
To display the numbers 1 through
10 initialize the counter or

55
00:03:45,288 --> 00:03:51,405
i variable to one and change the condition
to i is less than or equal to 10.

56
00:03:51,405 --> 00:03:54,956
Now the loop starts counting from one.

57
00:03:54,956 --> 00:03:59,106
Once the value in i is no longer
less than or equal to 10,

58
00:03:59,106 --> 00:04:03,870
the loop ends and the numbers 1
through 10 display on the page.

59
00:04:03,870 --> 00:04:07,973
Now if you don't want to
change your initialization and

60
00:04:07,973 --> 00:04:12,521
condition, another option is
to interpolate i + 1 like so.

61
00:04:12,521 --> 00:04:15,746
The results are the same, but I'll set
it back to how I previously had it.

62
00:04:23,828 --> 00:04:27,259
To make the program display more divs,
like 100,

63
00:04:27,259 --> 00:04:30,930
change the condition to i is less than or
equal to 100.

64
00:04:34,277 --> 00:04:38,504
And what if you want the loop to
count by a higher number, like five?

65
00:04:38,504 --> 00:04:43,341
Well, initialize the counter variable
to five then increment it by five at

66
00:04:43,341 --> 00:04:46,048
the end of each loop iteration like this.

67
00:04:52,121 --> 00:04:58,410
The result is 20 divs starting with
number five and counts to 100 by fives.

68
00:04:58,410 --> 00:05:02,079
Good, I encourage you to
experiment with this loop and

69
00:05:02,079 --> 00:05:04,324
try a few more values on your own.

70
00:05:04,324 --> 00:05:07,398
Another way you might write the for

71
00:05:07,398 --> 00:05:13,451
loop is by placing the main.innerHTML
statement inside the loop.

72
00:05:13,451 --> 00:05:16,532
Notice how this produces
the same results in the browser.

73
00:05:16,532 --> 00:05:20,859
Now with this approach, the browser has to
do extra work by replacing the contents

74
00:05:20,859 --> 00:05:24,824
inside the main element each time the loop
runs with more and more div tags.

75
00:05:24,824 --> 00:05:27,531
This happens so
fast you'll only see the final value.

76
00:05:30,198 --> 00:05:36,422
In fact, if you console.log the value
of the HTML variable inside the loop,

77
00:05:36,422 --> 00:05:41,019
you can explicitly see how
the loop builds the string from

78
00:05:41,019 --> 00:05:45,740
one div tag to two, to three,
all the way to 20 div tags.

79
00:05:50,020 --> 00:05:55,040
You might also add an if statement
inside the loop that for example checks

80
00:05:55,040 --> 00:06:00,732
if i strictly equals 100, then sets
the innerHTML of main with a final string.

81
00:06:00,732 --> 00:06:05,806
For this short and simple program I
prefer to build the entire string in

82
00:06:05,806 --> 00:06:11,227
a temporary HTML variable first, and
then let innerHTML update the page.

83
00:06:11,227 --> 00:06:13,890
By keeping this statement
outside of the loop,

84
00:06:13,890 --> 00:06:18,084
I can clearly see that when the loop ends,
the rest of the program continues

85
00:06:18,084 --> 00:06:20,895
by updating the content
inside the main element.

86
00:06:20,895 --> 00:06:25,183
It's also more performance, because
I'm not asking the browser to replace

87
00:06:25,183 --> 00:06:27,555
the main element's HTML over and
over again.

88
00:06:27,555 --> 00:06:32,006
There are yet other ways to insert HTML
into the page, many of which you'll learn

89
00:06:32,006 --> 00:06:35,817
in a later course on JavaScript and
the DOM or document object model.

90
00:06:35,817 --> 00:06:40,314
All right, so now you've learned how to
write and work with three different types

91
00:06:40,314 --> 00:06:43,590
of JavaScript loops, the while,
do while, and for loop.

92
00:06:43,590 --> 00:06:47,552
Hopefully you're starting to see how
useful they are and how quick and

93
00:06:47,552 --> 00:06:51,802
easy they make executing the same code 10,
20, or even 100 times.