"Build a Simple PHP Application" was retired on March 31, 2016. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Loops!
You have completed JavaScript Loops!
Preview
Use a `for` loop to build a string holding HTML, then display it on a web page.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up