Let's take a look at loops. Now remember the purpose of a loop is to cycle through JavaScript statements until a certain condition is met. The first type of loop that we will look at is the while loop. Let's take a look at the syntax for the while loop. First off, you must begin with the word while that is a reserved word. And then inside of parentheses you present the condition so very similar to the if conditional.

Then you have the block of code that will execute that can be one or more statements, and that code executes every iteration of the loop and finally, you close with a curly brace. So the two curly braces indicate the block of code which needs to execute. The code will continue to execute as long as the condition for the while loop evaluates to true as soon as it evaluates to false, it will exit out of the loop. Now there's another loop structure in JavaScript very similar to the while loop. It's not used very often, basically because it accomplishes the same thing that the while loop accomplishes. But I just want to show it to you before we do an example of the while loop.

That's the do while loop. And like I said, it works just like the while loop. The only difference is that the code block will execute at least once. So the condition is not checked until the code block has executed. So, it begins with the word do then inside of the curly braces is the block of code to execute. And then there is a while statement and a condition.

So the code blocks executes then it checks the condition if the condition is still true. It goes through and executes the code block again and continues to do that until it is false. So So the main difference between the do while and the while is that the do while will always execute the code block at least once the while not necessarily. Now you can accomplish the same thing with both types of loops. There's one more loop we'll look at in a subsequent movie, but these two are very similar the while in a do while so I presented them together. Alright, so back to the while loop syntax because this is the one we're going to do the exercise on.

Let's go ahead and open up sublime. Now what we want to accomplish with this exercise is we want to generate a random number between zero and 10. And we want to do it until we get a five and then we want to print out how many times it took to get to that number five. Okay, that's a good good situation where we would want to use a while loop. So let's first set up some variables. We want to set up a random num variable, this is going to contain our random number.

And then we also want to set up a counter. We'll use this counter to determine how many times it takes to get a five in our random number. And we need to initialize this variable to a zero because it's a counter for us. We want to start at zero. We've done it zero times. Alright, let's go ahead and create our while loop.

We begin with the keyword while then inside the parentheses. We put our conditional and we want that conditional be while the random number is not equal to five. Great and then we put our code the We put our curly braces to indicate our code block. Now first let's assign a number to random num, a random number two random. So random equals math dot random. And we want to multiply that by 10.

Because we want a random number between zero and 10. Okay. Now, as you may remember from the last time we did, we use random in the math object that it presents a decimal number between zero and one. When we multiply that by 10, there still is a number of digits after the decimal point. So how do we get rid of that? You may remember that we have to round it.

Now I could do a second line here. But instead I'm just going to put the results of math dot random multiplied by 10 inside math dot round, so open parentheses there, and then I put a close parentheses after the 10. That will round the results of math dot random times 10. Okay, and now one last thing we need to do is we need to increment our counter. Remember the increment operator plus plus, that will add one to it. That is exactly the same thing as counter equals counter plus one.

Okay, both of those would work. Obviously, counter plus plus is shorter to type. All right, now we simply need to print out our results. So let's do a console dot log. So basically, once ran num equals five, it will exit out of the loop, the loop will stop and then we can go ahead and print out our results. So while the loop is running, counter is incremented each time it goes through an iteration.

So counter will indicate how many times it went through that before it got to a five. So let's print that information out console dot log. And just for the sake of giving another example of template string literals, let's use that to print out the data. So I'm going to do a backtick it took, and then we'll put in the counter variable, because this is how many times it took to reach and now let's put in the random variable, we'll just use that variable because then we can make sure that random is set to five, if we want it to be set to five, okay. And then it will conclude that was one more backtick and the statement needs to be concluded with the semicolon. All right, let's take a look and see how this works.

So we're going to go ahead and save this. I'm going to grab the file path to my HTML file. And then we'll put that inside of the browser. Let's go ahead and open up the console. And this time, it said it took three times to reach five. All right, let me dock the console, so we can try to execute this couple more times it took three times reach five, if I refresh, we get it took 39 times to reach five.

Refresh again, took 19 times to reach five. Okay, I want to make one more change on our code here to make it a little more reusable. So right now, the code is set up to only do this if we want to find the number five How can we make this so that it could be any number we wanted between zero and 10? Well, we could set this up in a variable once again, another reason for a variable. So let's call this variable and value and let's set it equal to five. Whoops, then we can change and value anytime we want.

Now, obviously, in this small bit of code we have here it'd be just as easy to change in value as it would be to change this number. But if we were doing a large program, and we had our variables at the top, and who knows how many time we're using that variable, that would be a situation where you'd want to change the variable only and it would change it for the rest of the program. Just as an example, that we can put in value, and then we could also have n value in our console dot log statements, so then we use the variable twice. We only need to change it once up here. Okay, let's go ahead and save that. Jump out again.

Test it 20 times 52 times just kind of interesting sees one time. Wow. All right, so there's our first example of a while loop. We're going to do one more example in the next movie.