(upbeat music)
- [Dough] The For Loops starts with the for statement
and then you need to define the iterator, conditional test
and the step increment for the iterator variable.
Let's create a for loop that we'll step
through the numbers zero through 24
and find the squares for each number.
First, we'll start with the for statement,
then we create a set of parentheses.
Inside, we first need to create our iterator variable
which is often just called I
and we initially set it to zero.
Then we add a semi-colon.
Next, we take the iterator and we create a conditional test.
This test must be true before it will attempt to run
through the loop of code we'll test that I is less than 25.
Then add another semi-colon.
Last, we need to tell the loop
how much we want to change the iterator
each time the loop runs.
We can use the increment operator to increase it by 1
each time the loop runs.
Then we create the loop body using curly braces.
Inside the code block,
we will create a message for the console log.
We'll create a string that will provide
the current value of I, and then we will calculate
what I to the second power is.
We can find the square by using a special function
that is called using Math.pow, for power.
Inside we provide the number we want to increase
to a certain exponential power.
Then we place a comma
and enter the power we want to raise the number to.
In this case, two.
There are assumptions that are part of math that you can use
either from algebra or trigonometry.
Now, save and open the browser.
You'll get a number of lines display in browser console
based on the for loop that we created.
It starts with the number zero
it'll initially set the iterator variable to,
and it moves through each number until it reaches 25.
When it is 25, it renders the conditional test
the top of the for loop false, and exits out of the loop.
You can nest for loops inside of each other
and we'll do that in our next example.
Using nested loops we can create a table of data.
We can build it by creating the columns for a single row
and then repeat that process for each row.
Let's create a multiplication table
for all values from 1 to 12.
A multiplication table we'll take a number at one axis
and multiply it by the value on the other axis.
As a result, you create a grid of values
that show what the product is at each row and column.
This example is a little more complicated.
So let's walk through it a bit more.
I'll create a multi-line comment illustrate how it work.
We can do that
by starting the comment with a slash and an asterisk.
Then we can close the comment with asterisk and then a slash
anything between these will be considered a comment.
We know we have two values,
one for the row which we can call A
and one for the column which we can call B.
When we start a row
we will take the value of A and multiply it by B.
Then we can add some space
and repeat adding one to B and multiplying again.
And we can continue to go through all the numbers
until we reached 12, which will be the last.
But now we need to repeat everything
over again for another row,
starting with the next value of A,
then repeat this over again for each column.
And then we will repeat again and again.
I think I got the idea by now.
To do this, we will create two loops,
one for the row which would be the outer loop
and then another for the column
which will be the inner loop.
We start with a for statement
and set it up by defining our iterator A
and we want to start it off as one.
And we create a conditional test
to make sure that it never gets higher than 12,
within when to increment it with each loop.
Now, we can create our inner loop.
We start again with the for statement
and set it up with our second iterator variable B.
Is important not to mix up the iterators
or to accidentally repeat their use,
doing that might cause some confusion
with how your loop runs.
Then we want to set the conditional test
and the iterator step.
Now, we have two loops, one nested within the other.
Our next step is to put some code inside of these.
After we start the first loop
we need to create a variable that will be the string
that will contain our row of numbers,
var tableRow, and we'll set that equal to an empty string.
We do this because we always want to make sure that is empty
every single time the loop repeats.
We can do that with the empty quotation marks.
Now, we need to go inside of our inner loop.
We first want to find out what the product is,
we the calculate that using the multiplication operator
which is an asterisk and multiply A and B together.
We'll create a variable called product
and set that equal to A times B.
Then we take the value
and we want to convert it to a string.
But we need to put some space between the columns
so they look nice and clean.
We can do that with an escape character.
We'll create a new variable called productString
and we'll set that equal to the product,
convert that to a string,
and then we'll concatenate that scape character.
An escape character is an invisible character
that is typed by the code.
In this case, we want to create a tab space
which is the same as pressing the tab key on your keyboard.
An escape sequence starts with a backslash
and to create a tab immediately add the letter T.
These two letters won't be printed in the console
but the code will know that you want to add a tab space
added after the string that you're creating before it.
We then want to take that string and concatenate it
to the end of the existing tableRow string.
We want to do it this way
so that each time the inner loop runs,
we're adding a new column to the end of the row
tableRow plus equals productString.
When all the rows are finished, then the inner loop ends.
Now, we need to take the completed string of the column
and add it to the console log
console log tableRow.
Okay, let's see what we've got.
Save and reload the browser.
(mouse clicking)
As you can see, we now have a table in our console.
If you look carefully at the items on the right-hand side
you'll see at the code on line 24 runs each time
and it runs for a total of 12 times.
You'll also notice that each line has 12 columns
just what we wanted to do in our code.
Just as a reminder for loops in JavaScript
require a few things.
You start with the for statement
and then need to provide three sections.
To find the iterator variable,
create a conditional test
and add a step for the iterator to change
with each execution of the loop.
You can nest slips inside of each other as well
which is helpful for working with rows
and columns of information.
(upbeat music)