- The for Loop 4:52
- Create a for Loop 1 objective
- Dynamically Display HTML with a Loop 6:52
- Exit a Loop
- Terminate a Loop 1 objective
- The Refactor Challenge 3:00
- The Refactor Challenge – One Solution 3:05
- The Refactor Challenge – Duplicate Code 6:01
- Review for Loops and Exiting Loops 6 questions
- Refactor Code with a Loop 1 objective
Preview
Video Player
00:00
00:00
Dynamically Display HTML with a Loop
6:52Use a `for` loop to build a string holding HTML, then display it on a web page.
Loops come in handy on many occasions.
0:00
Now you'll use a for loop to
display content on the page.
0:03
You'll create a loop that adds 10 div
elements to a webpage with numbers
0:06
inside them.
0:10
In other words,
use a for loop to repeat the same action,
0:11
adding a div to the page 10 times.
0:14
The divs are styled with CSS to display
as circles with white background colors.
0:16
To code along with me,
open the file html-loop.js and
0:20
make sure to update the script tag in
0:27
index.html to point to js/html-loop.js.
0:30
In this file,
0:36
there's already a variable named main that
points to the main element in index.html.
0:37
I'll start by declaring a new variable
that's going to hold a string containing
0:43
the HTML I want to display on the page.
0:47
I'll name it html and
set its initial value to an empty string.
0:49
I'm using the variable name html because
it reflects the contents of the variable,
0:54
a string that holds HTML div tags.
1:00
And I'm using the let keyword because
the loop is going to update and
1:02
add a string of HTML to the current
value of the variable each time it runs.
1:06
And the HTML will be simple.
1:12
Each div will look similar to this.
1:13
An opening and closing div tag.
1:16
And to make it more interesting,
1:19
I'll display the number of the counter
each time we go through the loop.
1:21
So each div will display
a different number.
1:24
Now I'll write the for loop structure.
1:32
First, between the parentheses, I'll
create or initialize the counter variable.
1:38
I'll name it i, and set its value to zero.
1:43
Remember, this variable declaration
is evaluated only once at the very
1:48
beginning before the condition is even
tested and before the loop begins.
1:53
Next I'll add the condition,
i is less than 10.
1:59
As long as the value stored in i is
less than 10, the loop will run.
2:03
Again, the condition gets evaluated
before each loop iteration.
2:08
Now I need to make sure that
the loop ends at some point.
2:13
I can do that by changing the value
of i each time through the loop.
2:15
I'll use the increment operator to
add one to the current value of
2:20
i each time the loop runs.
2:25
In other words,
after the code in this code block runs.
2:27
Now, I'll add the code
to run within the loop.
2:31
Each time through the loop,
2:34
I want to add a set of div tags to
the string assigned to the HTML variable.
2:36
You can do that with the addition
assignment operator.
2:40
I'll type html +=,
I'll assign it a template literal so
2:43
that I can interpolate or insert the value
of the i variable into the string output.
2:47
In other words,
the number of times the loop runs.
2:53
Between the div tags I'll write ${} i.
2:57
As soon as the value of i is no longer
less than 10, the loop ends and
3:03
the program can display the entire
contents of the HTML variable on the page.
3:08
Finally, I've selected the main element
and assigned it to the variable main.
3:15
So I'll set the HTML to display inside
3:20
main with main.innerHTML = html.
3:24
I'll save the file and
preview the results in the browser.
3:28
Notice how the browser displays 10
divs with the numbers 0 through 9.
3:34
To display the numbers 1 through
10 initialize the counter or
3:40
i variable to one and change the condition
to i is less than or equal to 10.
3:45
Now the loop starts counting from one.
3:51
Once the value in i is no longer
less than or equal to 10,
3:54
the loop ends and the numbers 1
through 10 display on the page.
3:59
Now if you don't want to
change your initialization and
4:03
condition, another option is
to interpolate i + 1 like so.
4:07
The results are the same, but I'll set
it back to how I previously had it.
4:12
To make the program display more divs,
like 100,
4:23
change the condition to i is less than or
equal to 100.
4:27
And what if you want the loop to
count by a higher number, like five?
4:34
Well, initialize the counter variable
to five then increment it by five at
4:38
the end of each loop iteration like this.
4:43
The result is 20 divs starting with
number five and counts to 100 by fives.
4:52
Good, I encourage you to
experiment with this loop and
4:58
try a few more values on your own.
5:02
Another way you might write the for
5:04
loop is by placing the main.innerHTML
statement inside the loop.
5:07
Notice how this produces
the same results in the browser.
5:13
Now with this approach, the browser has to
do extra work by replacing the contents
5:16
inside the main element each time the loop
runs with more and more div tags.
5:20
This happens so
fast you'll only see the final value.
5:24
In fact, if you console.log the value
of the HTML variable inside the loop,
5:30
you can explicitly see how
the loop builds the string from
5:36
one div tag to two, to three,
all the way to 20 div tags.
5:41
You might also add an if statement
inside the loop that for example checks
5:50
if i strictly equals 100, then sets
the innerHTML of main with a final string.
5:55
For this short and simple program I
prefer to build the entire string in
6:00
a temporary HTML variable first, and
then let innerHTML update the page.
6:05
By keeping this statement
outside of the loop,
6:11
I can clearly see that when the loop ends,
the rest of the program continues
6:13
by updating the content
inside the main element.
6:18
It's also more performance, because
I'm not asking the browser to replace
6:20
the main element's HTML over and
over again.
6:25
There are yet other ways to insert HTML
into the page, many of which you'll learn
6:27
in a later course on JavaScript and
the DOM or document object model.
6:32
All right, so now you've learned how to
write and work with three different types
6:35
of JavaScript loops, the while,
do while, and for loop.
6:40
Hopefully you're starting to see how
useful they are and how quick and
6:43
easy they make executing the same code 10,
20, or even 100 times.
6:47