JavaScript the Basics for Beginners - Section 5: Loops & Conditionals | Rob Merrill | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript the Basics for Beginners - Section 5: Loops & Conditionals

teacher avatar Rob Merrill, JavaScript Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (43m)
    • 1. JavaScript the Basics - Loops & Conditionals: Promo Video

    • 2. JavaScript the Basics - Loops & Conditionals: Part 1

    • 3. JavaScript the Basics - Loops & Conditionals: Part 1 Lab

    • 4. JavaScript the Basics - Loops & Conditionals: Switch Statements

    • 5. JavaScript the Basics - Loops & Conditionals: Switch Statements Lab

    • 6. JavaScript the Basics - Loops & Conditionals: For, While, Do/While Loops

    • 7. JavaScript the Basics - Loops & Conditionals: For, While, Do/While Loops Lab

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Course 5 - Loops & Conditionals in JavaScript:

  • conditional statements 
  • operators
  • switch statements
  • for loops
  • while loops
  • do/while loops

Through our whole JavaScript the Basics for Beginners course series you will find this is your one stop necessary to enter into the language of JavaScript. We are going to start from scratch and build up our understanding of the world's most popular programming language together. 

View JavaScript in action with whiteboard videos optimized for viewing on your smartphone. This is truly a course that you can engage with no matter where you are. Take your JavaScript eduction on the go! With whiteboard videos you get to visualize what JavaScript does under the hood. 

You can practice JavaScript in your web browser! Take advantage of Google Chrome developer tools to put the JavaScript you have learned during our whiteboard lesson into practice with further examples and challenges. This is our JavaScript playground.

Learning JavaScript is like learning a language. This course won't make a false promise of saying you will master JavaScript overnight. However, this course will immerse you into the world's most popular programming language. 

Each course will introduce you to something new in JavaScript :

  • JavaScript Syntax
  • JavaScript Building Blocks
  • JavaScript Best Practices
  • JavaScript Objects
  • JavaScript Arrays
  • JavaScript Regular Expressions
  • JavaScript Functional Programming
  • JavaScript Algorithms
  • JavaScript Data Structures
  • JavaScript ES6 Syntax

You'll finish this course with an understanding of JavaScript that will let you take a deeper dive into the language and possibly launch you into a new career as a JavaScript web developer.

Learning a new language can be difficult and even feel intimidating. JavaScript the Basics makes the the learning process feel accessible and welcoming!

Meet Your Teacher

Teacher Profile Image

Rob Merrill

JavaScript Instructor


Rob Merrill is a Full Stack JavaScript Developer. His specialty is in the MEAN stack focusing on AngularJS, NodeJS, ExpressJS and MongoDB.

He is a graduate of Code Fellows Advanced Full Stack JavaScript Development course and has been developing with JavaScript for three years.

In his spare time he travels around Seattle's finest craft breweries with his wife and their dog.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. JavaScript the Basics - Loops & Conditionals: Promo Video : Welcome to Java script. The Basics. JavaScript is the most popular programming language in the world has been called the language of the Web Stack Overflow listed as the most popular deaf technology and get have numbers it as the top ranks language learning JavaScript will allow you to be a full stack developer or fund a specialty on the front end or the back end. With JavaScript, you'll be able to cope with front and frameworks like react and angular on the client side . And you can also cut on the back end server side with no Js and create databases with Mongo . DB JavaScript is a language, so it's going to take some time to learn before you can write poetry or a novel in any language, you have to first learn the languages alphabet, how to make words and see how others use it. To learn JavaScript. We're gonna look under the hood. This isn't just going to be an exercise in copying someone else's code to wind up with an application you don't understand. Everything we do will be visual in the form of a whiteboard lesson where you can really see how everything works and connects. If you are a visual learner, this is the course for you. This isn't about going 0 to 60 or zero to hero, because if you really are starting at zero, those courses leave you behind quickly. It's about learning. Understanding and applying is that you could build and create with JAVASCRIPT. Way will then follow our white board. Lessons into the lab way will enter into the Google Chrome software developer. Consul thistles are Java script playground. There is nothing you will need to download for this course. No special tools, no extra steps. Just Google, chrome, everything. You learnt the lesson we will then recreate in the lab together. I'll then give you a code challenge to recreate what we learned together and then we'll look together at a possible solution. Welcome to Java Script. The basics. Let's start speaking job script 2. JavaScript the Basics - Loops & Conditionals: Part 1: All right, welcome back to Java. Script. The basics. In this section, we're going to look at Loops and Jolla script. What is a loop in JavaScript? Loops? Evaluated condition. If true, we enter a code block and run the statements within the code block. After running the co block, we check the condition again, and if it is still true, the code block will run again. We repeat this until the condition returns false. But before we can look at loops, we have to examine what it means to check a condition. And JavaScript? What does it mean to check in condition conditional statements, execute or skip other statements depending on the value of a specified expression? These statements are the decision points of your code, and they're also sometimes known as branches or paths. It is like saying, if it is true, go this path if his false take this path. If you imagine Java script interpreter following a path through your code, the conditional statements are the places where the code branches into two or more paths. As the interpreter chooses which path to follow. Let's look a true and false conditions. Way saw this in earlier lessons when we looked at equality and inequality operators and a value in an expression as true or false string with the character. Eight is equal in value to the number eight because of coercion and JavaScript. However, when we use the strict equality operator of triple equals, we find that the type of string and number are not the same, so evaluate the expression is false. In our first case, we would take the true path and enter into the code block. In our second case, we would take the false path and step over the code block we can use. Greater and less than symbol is well to evaluate expressions. Number five is greater than four, so the expression evaluates to true and we step into the code block. In our second example, Number four is not greater than six, so it evaluates the false and we step over the code block. They're also truth Ian false e expressions in JavaScript. Every new to programming thes terms, truth and falsity might be an odd concept toe. Understand the context of truth and falsity expressions. We have to look at Boolean. It's Boolean Zehr, named after George Boole, an English mathematician, educator, philosopher and logician. So what are truth and falsity? Values? Ah, fall. See, value is the value that translates the false when evaluated in a bowling context. A truth e value is a value that translates to true when evaluated in a Boolean context. Let's start off with false e values. False by itself is a false the value zero an empty string, No undefined and not a number are all false e values. What the's false e values mean our that we choose the path that steps over the code block. We don't look inside of it. So what is the truth value? It's everything that's not a full see value. No list to remember if it isn't a false. The statement that we looked at above than it is a truth e statement. So we've looked at equality, inequality operators greater than and less than operators, along with truth, e and false e values. Let's look at one more way to evaluate an expression. Let's look at logical operators. Logical operators allow you to compare the results of more than one comparison operator. We're gonna look at the logical and as well as the logical or operators. Let's begin with a logical aunt. This operator is going to test for more than one condition. We will use the double ampersand sign. We find this on our keyboard with Shift seven. Let's look at some code we have five is greater than four. Double ampersand eight is greater than three. Double ampersand tells us that within the opening and closing parentheses that both of our expressions must value it to. True for the whole expression to evaluate to. True, so five is greater than four and eight is greater than three are both true, so we evaluate this to true. Our next examples all translate to false because both of the expressions are not true. Onley, in our first case with a true value, lead us into the code block. While all other expressions evaluate to false taking us on a path to step over the coat. Now it's turned to the logical operator, or this operator is looking for at least one condition to be true. Let's look at her previous code. Example. Let's remove the double Amper sends and will replace it for the two pipes for the or operator five is better than four, So our expression will value it to true, no matter what the second condition is. WAY said this for our second and third examples as well. We don't need both conditions to be true. Only one in our last example. Both conditions air false, so our or operator returns this expression as false. So we've talked a lot about a value in expressions and paths. Let's talk about our path signs informing our JavaScript interpreter where we want to go. Let's look at if statements else, statements and else if statements, let's begin with if statements. The if statement is the fundamental control statement. The if statement is the fundamental control statement that allows JavaScript to make decisions or more precisely, to execute statements conditionally and know which path to take. Syntax of the if statement will involve the keyword if followed by parentheses filled with an expression, then followed by a block of code. If the expression of value waste true, we will enter into the code block. If the expression evaluates to false, then we will step over that code that should sound like reviewed to what we just covered. If the number five is greater than the number four, then we're going to enter into the code block. This will allow us to log this string true condition now if we switch it up and put a condition that it's false like five is greater than six. When we run our code, we will not enter that code block and do not have access to the string. True condition the second form of the if statement, introduces the else clause which will be executed when the expression is false. What if you want several options to evaluate to True, Let's declare a variable called test score will give it a value of 88 will then create an if else statement and we have test score as expression is greater than 90. We have a code block. This is congratulations. You got a name After that? We have an else statement and we have a console log says you failed. Better study more next time in our if else statement, if we evaluated, true would get a responsive congratulations. You got a name? If we evaluate to false, we take the path to the else statement and you receive a responsive you failed better study next time, you could imagine that this isn't super helpful with a score of 88 which is well above failing. So let's add some else. If options, if the score is above an 80 will go into the code block that returns the string. Great job you gotta be and then repeat that pattern of else. If for more specific feedback, this section of code does a much better response to an 88 78 or 68 rather than a pass fail only version of the coat. All right, that's all we have. For now. Thanks for taking a first look at evaluating conditions. We're all set for our next lesson on JavaScript Loops. But first, let's head to the lab and put what we have learned into practice. 3. JavaScript the Basics - Loops & Conditionals: Part 1 Lab: All right, welcome back to the lab and our lesson. We talked about spending this section looking at Java script loops. But before we can get that foreigner JavaScript loops, we must first evaluate an expression to determine if it is true or false. So we reviewed and learn more about evaluating conditions. We talked about our condition being like a path. Whether an expression is true or false will determine what our JavaScript interpreter does with our source code. We reviewed the equality operators and talked about the greater than and less than operators. Next we looked at the truth e and false E expressions. We looked at the specific list of falsely expressions and then discussed that anything that isn't false e is true. We also looked at logical operators and and or lastly, we stepped into her. If an l statements, these air like this signs air javascript interpreter reads when true and false results have said it on a path. So let's go ahead and get to work. We'll start off with the challenge. Below are several JavaScript expressions. I would like you to go in and change the code in all of these examples to make them true if they're currently returning false. All right, How that go? Hopefully that wasn't too difficult for you. In our first example, we could have solved this in a couple of ways. We could have changed the direction of the greater than sign Toe haven't say that five is less than seven. We also could have changed the number five to a larger number like nine to make this true expression as well. Next, we have the number seven strictly equaling the string with the number seven character in it . Strict operators look for value, which in this case is the same and type, which in this case is not the same. So we can change the triple equal to a double equal, and we're all set following that. We have the number seven set strictly equal to a string with the characters that spell seven Java script wants to be our friend and will offer to do coercion as in the previous example. But it will not coerced these values to be the same. There is nothing that we can do to make them equal so we can change the equality operator to an inequality operator. An exclamation mark followed with either a single or double equal sign. Will both return a value of True because there another true of value or type. Lastly, we have a false e value of false in its place. We can place any value that isn't a false see value that we discussed in our lesson. All right, time for a next challenge. Let's use logical operators. I would like you to use the and operator to show the four different options that you can use to return One true and three false is. Then I want you to use the or logical operator and show for examples and which three responses are true and one response is false. Go ahead and pause. A video in a few moments will come back together and find a solution. All right, This challenge was pretty open ended so you could have come up with any number of solutions . We'll start off with four different approaches to the and operator that wind up with one true and three false expressions we have. Five is greater than three and 10 is greater than true, which evaluates to true. We have five is less than three which is false and 10 is greater than two, which is true. But this will evaluate to false because the and logical operator expects both expressions to return true for the whole expression to return. True, we find this as the case in the third example is well and our fourth example. Both of our expressions returned false, so it should be no surprise that we get false as well. Now let's look at our or operator. In this example, we use the same code but switched the and operator with the or operator. The results is that the 1st 3 examples returned true, because in the second and third case, we only need a minimum of one expression to return. True for the whole expression to return. True, the last example shows how we need all the expressions to equal false to return a false statement. All right, let's close up this wah by looking at the if else and else. If statements this is going to be our big challenge, I want you to use the if else and else if statements use one. If two else ifs and one else in the statement in our lesson, we imagine test scores. Feel free to do whatever you want. However, if you need a suggestion, you might try something that has to do with what you should do depending on what the weather is like. The real challenge of this problem is I want you to use one example of the logical operator and or or all right, go ahead and give this a shot positive video and in a few moments will come together to find a solution. All right, How to go? Hopefully that was a bit of a challenge. I'm going to go ahead and declare a variable called temperature all set it equal to the number 74 all. Then declare another variable called rainy and set it to the Boolean. True from there we will open with our first If statement we will evaluate the expression temp is greater than 90. If that is true, we will log to the console. I am going swimming because the temple US 74 the expression will evaluate to false. That means that we will step over that could block and look at the next expression, which is an else. If statement here we have temp is greater than 80. If true, we will log. I am goingto work on my 10. However, it will evaluate to false as well. Let's move on to our next else. If statement, we're going to use the logical operator. And that means that both expressions must evaluate to true for us to enter into our code block. The first is that the temp is greater than 70 which in this case is true. The second is an inequality operator attached the variable rainy. We know that Rainey has a value of the Boolean. True, but the in equality operator will reverse that, making expression false, which means that we will step over the code into our next else if statement when we do that , we find that it is true that our temp is over 70 and that rainy is a bullying of true, which means that we can finally enter into our code block and log to the console. I'm going to grab my umbrella because that was true. We will step over our final else statement. All right, If that was still a little challenging, try again. Maybe this time, imagine activities you might do depending on what your bank account is and what your energy level is. It is important that you don't rush onto a new subject until you have at least wrestled with the topic. You don't need to master the topic, but wrestling with it is essential. Hope you enjoy this lab on evaluating statements and if else clauses and we'll see you in our next lesson, where we dive into loops. 4. JavaScript the Basics - Loops & Conditionals: Switch Statements: Welcome back to Java script, The basics and this lesson. We're going to look at switch statements now that we have learned about condition ALS and using if else and else if statements we're going to look at a statement that doesn't use those called the switch statement. What is a switch statement? The switch statement is used to evaluate an expression, then associating it with a case clause and finally running code executing statements matching that case. Let's look at some syntax. We have the JavaScript reserved keywords switch. We then have an expression within parentheses. This expression is what we will attempt to find a match case as we enter into our code block way. Then use the keyword case. What we put after case is the value we're looking to see whether it matches the expression argument we put in our switch statement to begin with. If there is a match for that case, then we enter into the specific code block. If there is not a match, then we move onto the next case. We continue to move case to case, looking for a match. If we don't find one, then we have the JavaScript preserved word default. If we reach the default without funding a match, then we will automatically run that block of coat. One other thing you might notice it is the brake keyword. What this does is break out of our switch statement. If we have found a matching case, for instance, if our first case was a match, we don't want to ask if the next cases are a match because we have already found our match . The break you bird will break us out of the switch statement as soon as we have found a matching value. Now that we have looked at the syntax, let's go ahead and look at an example. Let's create a switch statement that responds to someone's grade on a test. We'll start by declaring a variable called grade remark will sign it the value of a string Be well. First, declare our switch cured than inside of the parentheses will put our grade remark variable as our expression. This will lead us into our code block. We'll start by looking at the first case. It is the string A. The string A doesnt match the value of the expression for grade remark that we know is the string be so we skip over the break and move onto the next case, which this string be. That is a match. So we run the block of code that comes after it, in which we get an alert with the string that says Good job. So when we actually run this, we break out of our code after the alert. This is the basics of using the switch statement to review. This is how it works. The switch expression, the value between the parentheses is evaluated once the value of the expression is compared with the values of each case. If there is a match, the associative block of code is executed. All right. Thanks for taking a look at switch statements with me. I'll see you soon in the lab to put what we have learned into practice. 5. JavaScript the Basics - Loops & Conditionals: Switch Statements Lab : All right. Welcome back to the lab where we're going to look at using a switch statement. The switch statement will be recognized by the switch. Keyword. The expression that we give in the parentheses will enter into the block of code, looking for case that it matches. When it finds that match, it will run the block of code assigned to that match. Each block of code has a break assigned to it. This is so we can break out of the switch statement when we find the matching case, rather than continuing to execute the rest of this statement at the end of the cases will have a default keyword with the code block associated with it. That way, in case we weren't able to find a match, we will still have a response to the expression passed in the beginning to the switch statement. Let's go ahead and write out this. Intacs together will write our switch keyword, which we will pass an expression into this takes us into the code block where we have the first case. We check against the expression If it is a match, then we run the code block associated with it. then break out of our switch statement. If it doesn't, we move onto the next case and we repeat the process for as many possible matches as we would like to make. Then, in case we can't find a match, we have the default cured. That will then take us into a code block that we want to return if we cannot find a match. So now here is a challenge, and this might be a little elaborate. I want you to create a switch statement and passed to it. An expression regarding a dice roll will say that six is the best and one is the worst. Create a co block of your choice for any match and be sure to end all your possible cases with the default code block. You can choose to actually enter in any of the numbers one through six or for your expression, you can choose to hard code any of the numbers one through six. Or you can do some research that will come up with a method that will randomly pass a different number. Two. The expression each time. Go ahead and pause the video and give it a shot and in a few minutes, we'll come up with the solution, All right. How'd it go? Let's go ahead and look at a possible solution. We'll go ahead and declare a variable called dice and we will hard code of value of the number six. We will then create a switch statement that we will pass to it. Well, then create the switch statement and will pass to it an expression to be evaluated in this case, the variable dice. We then create a case for all the possible options numbers one through six. For each of them, we have a code block that will learn a specific string when it finds a match. We then have the break cured to immediately break out of the switch statement once we find a match and then we close off with their default statement. If there was no match, hopefully that was simple enough. No, let's look at the bonus question right now. This looks kind of boring. We're hard coating of value, then creating all this code for different possible answers. But we already know what the answer is. So let's learn one way of making the dice roll random. We are going to use two ingredients. First, we have the math, that floor method. This will take any Java script number value and round it down to the nearest integer. Let's go ahead and look at a few examples of math thought Floor in action. Next would use the math dot random method. This will not pick a random number across any range, but it will choose a random number greater than or equal to zero and less than one. So basically anything from 2.9999 and so on. Let's look at running the math dot random method a couple times to see how it operates, so we're going to want a result between one and six. If you want. Pause the video and try out the code in the consul to get a feel for it. Or you can hang on for some pseudo code pseudo code is just running out. What you want to do in English to help with a plan of action will plan on using the math dot floor method. We're going to pass to it an argument that we want to take the value and lure it to the nearest integer. If we're using the math dot random method that will return of value that is greater than or equal to zero and less than one. So the question is, what will you need to multiply Matha random by as your argument within the math dot floor method? Go ahead and pause the video and give it a shot. All right, How to go? Let's work on a solution will take the math thought floor method and passed to it. The argument of math dot random method and will multiply it by seven. We have to do seven because we're always going to round down 70.999 multiplied by six is always going to be five point something, which will be rounded down to five by math dot floor. Let's run this a few times to see the results. Okay, now we can't just assign this value to dice. If we do the first time. Dice is a signed of value, it will be random, but then, from that point, the value is now set to the originally random number. So instead, we're going to pass this random dice Roll creator directly to our switch statement. So when we run our switch statement, we can see that our random number creator is working. Every time we run our switch statement, the random number is funding a case match and returning the appropriate block of code, alerting us with a message. All right, That's all we have for now. Thanks for taking this. Look with me at switch statements and we'll see you in our next lesson. 6. JavaScript the Basics - Loops & Conditionals: For, While, Do/While Loops: All right, welcome back to Java script. The basics and this lesson. We're going to look at three kinds of loops, while loops do while loops and four loops will close out our lesson by looking at loop specifically with a raise. In our last lesson, we imagine the Java script interpreter encountering a conditional statement and that causing the code to branch off in different possible paths through your source code. Looping statements are those that return the path back upon itself to repeat portions of your coat. We keep choosing the entry to the true path until we evaluate an expression is false or false. E Let's start with the wild. Let's look at the basic syntax. We placed the well keyword than within the parentheses. We placed our expression to evaluate. As long as this is true, we will enter into the code block again and again. This loop will run as long as the expression is true. Let's look at some code will declare a variable named score will then use the keyword while to determine our while. Lou, our expression is that score is less than five. Our Java script interpreter will first evaluate the expression. If it is false, it will step over the code. If the expression is true, interpreter will execute this statement. In this case, the score zero is less than five, which is true. So we execute the statement which means logging the value of the score which is zero. We then increment the score variable by a value of one. Next the JavaScript interpreter evaluates if this new value of one is less than five, which is true. So we execute this statement again way, then logged the value of the score which is one we then increment the value of the score by one again. We then increment the value of the score by one. We go back to our expression and find that too is still less than five. And so we execute this statement again this logs of value of our score, which is to then we increment our value. Again. We enter this code block again and again until we arrive at the Expression five is less than five, which is false, which means we don't execute the code. But step over it. And that is how a while loop works. We run the code block, while the expression is true. Next, let's look at the do while loop. This will operate just like the while loop. With one exception, we will run the code block at least once before evaluating. If an expression is true or not, Let's look at an example, will declare a variable and said it equal to the value of five. Then we'll use our do keyword, followed by a code block, logging our value, increasing it by one. Then we evaluate the expression. This evaluates the false, but that was after we already logged the value and increased it by one. Next we have our for Luke. This by far will be the loop that you find yourself using again and again. Our loops will typically have a variable counter of some kind. This will be initialized before the loop starts and will be tested after each iteration or trip through the loop. Finally, the counter variable is incriminated or updated in some sort of way, and then we test it again. If true, we go back into the loop thes air. The three parts initialization conditional test an update statement. One is executed before the loop starts statement to defines the condition for running the loop Either true or false statement three is executed each time after the loop has been executed. Let's look at some code. We have the key word for statement one is there initialization? We have declared the variable I and assigned it the value of zero. Something to note is that this is not like scope. This is not a local variable. It is global way. Then test the condition. Looking at the second statement is zero less than 10. Yes. Before we move on to the third statement, we enter into the code block. We logged the string. My favorite number is then can catch the value of the variable I which at this point is zero. Then we could cat an exclamation mark. We now look at our third statement. It says that we increment the value of I buy one. So now we start over. We go to our statement number two and we test whether this is true or false is one less than 10. Yes. So we enter into the code block again and lauded the code which now says that one is your favorite number. We repeat these steps and tell you the value of I is 10 which is not less than 10. So expression is false. We don't enter the code block, but step over it at this 100.4 loops. And while loops are not exclusive of each other, let's look at them side by side. Let's look at some code to see how they compare. You can see that we initialize the variable of I equals zero. Then we have a condition to check. In this case, I, with the value zero, is less than 10. So we go into the code block, and the difference is that within the Coe block is where we increments are update our value , and the difference is that it is within our code block that we increment or update our value in a while Loop. We then test, are updated value again, and, if true, we go back into our code block, run the code and update our value again until the test is no longer true. Both of these approaches are equally valid. You'll often find cases where you can use a while or four loop. Let's close out by looking at looping through an array. This will be a common case. Use for four loops. First, let's go ahead and declare an array will call it zoo names. Remember, arrays are great for the list. We'll also need the length of our array. We can do this a couple of ways. In our four loop, we can put zoo names dot length, or we could declare new variable and a son at the value of zoo names dot length. We'll go ahead and do that. Let's go ahead and put this together in our four loop. We will use the key word for then we'll input are three statements will initialize or counter to zero than our test case is whether the counter is less than the length of the array, which at this point is three than our third statement, is the update in which we increment or value by one. If our second statement, which is a test, returns true, then we go into her code block and Logar string that we have concocted together our value for eyes and then updated toe. One one is less than that array length of three. So we go into the co block again ever turned the string. My favorite zoo animal is a tiger. We then update our value, another time to To which is less than three. So we go into our code block again and get my favorite zoo. Animal is the bear with an update, our value by one. And now we find that three is not less than array length, which is three. So we step over our code and we're done. All right. That's all we have for now. Thanks for taking this first. Look at loops with me. Now let's head into the lab to put what we have learned into practice. 7. JavaScript the Basics - Loops & Conditionals: For, While, Do/While Loops Lab: All right, welcome back to our lab. In our lesson, we took our first look at loops. We first looked at wild loops who will run a block of code over and over while in expression is true. Next we looked at do while loops that will do the same. But even if the initial expression is untrue, the block of code will be ran at least once. And finally we looked at our four loop, by far the most popular, which contains three statements. The first initialize is the variable. The second runs the test condition, and then the third updates the value. We closed by looking at how to use four loops with the race. Let's get started with a while loop. I want you to create a while loop that will run five times. Remember, you will need to establish some sort of counter. You will need the cured while then fill the parentheses with an evaluation that is either true or false than a co block. For to enter into when the expression is true, then you will need to update the counter, go ahead and pause the video, and in a few minutes we'll come together and find a solution. All right, How to go First, let's go ahead and declare a variable to be our counter. We can call it whatever we want. I just called it I and assigned it the value of zero. We then wrote our keyword while and the expression I is less than five, which at this point it is zero. So this expression is true. We then log to the consul a contamination of the string. The counter has run. One time to do that, we have to take the counter value and add one to it. That didn't change the value. It just changed what was long. The next line of code is what we'll update our value. I is never value of one. So we will go back into the code and repeat the process again and again until I has the value of five in which the expression becomes false and we step over the code. And this is our results. All right, let's go ahead and move on to the do wild loop. Remember, this is the loop that will run at least once. Even if the expression is false. Here's your challenge. We want one to be an example of a loop that will run even though the first instance of the expression is false. Go ahead and pause the video and in a few moments will come back together and find a solution. All right, How to go? Let's solve this. Together we first declare a variable counter and a sign in the value of five. Well, then use the do keyword, followed by a code block. Within that code. Block will log the string looped, ran even with false expression. Then, after the code block will use the wild keyword and the expression counter is less than five , which isn't true, since five isn't less than five. All right, we get the initial log to the console and then because their expression is false, we step over the code block and we're done with it. Next. Let's look at our last loop, The four loop. This is by far the most popular loop. We're going to close with a big challenge. I want you to create an array and fill it with at least five values. In this case, preferably numbers. Remember, a raise are great for list home runs, test scores, temperatures, paychecks In the such, I want you to look through that array with a for loop. As in last lab, I want you to then run each of those values through a set of, if else and else if statements, a total of one if to else ifs and one else. You have all the tools to do this between the previous lessons and labs. If you struggle, that's okay. Take your time. Don't burn yourself out. But if you struggle with this for about 15 to 30 minutes, that's just right. If you do that before you continue on to the answer, you will learn far, far more than by just watching me type in a solution. Go ahead and pause the video and give it a shot. All right, How do you go? There are a number of ways that you could have solved this. First, let's go ahead and create an array. I'm going to go with the sports theme. My idea is going to be decreed. An array with values in regards to a baseball teams batting average per player. I'm going to loop through that array and use else if statements to determine whether a player gets a big raise, a small raise, a pat on the back or gets shown the door. So go ahead and create my array of batting averages. 3 33 3 27 to 67 to 94 3033 10 to 55 to 42 2 17 And I'll sign this array value to the variable batting average so well, right out are four key word to tell the JavaScript interpreter that we're going to use a loop right here. Well, then, Philip, our expression with three statements are First statement is initializing the counter. So we'll set variable I 20 because a race start counting at zero. We'll do this for the first batter in our lineup. Our test will then be toe ask if our initial value of zero is less than our array length, which is a value of nine. If so, we will enter into the code block and the code block. We will have our if else and else of statements. Our first batter is hitting 3 33 so our first expression of batting average of index zero is greater than 300 This is true. So we enter into that block of code, we will lock to the consul. Here is a $1,000,000 bonus. Because that was true. We won't step into any other parts of the code will move on to the third statement in our loop that updates our initial value by one. From there, we test our value with the second statement. One is less than nine. So we go back into a Kobach. We have a batting average of index one with a value of 3 27 We will go ahead and repeat the exact same process. When we go into our if else clause, we see that the first expression is true again. So we love to the console. Here is your $1,000,000 bonus. We then go back to our statement. Three of the loop the update. Our initial value, which is now too two is less than nine. So we go back into our code block. We do this again and again until our initial value is now in nine, which is not less than nine. So we don't go into our code block. All right. Hope that was a challenge for you, but I'm also hoping that you're starting to see how everything we have been learning is beginning to pull together and also that you're noticing that there are lots of ways to solve problems. Thanks for taking a look at loops with me in this lab and we'll see you in our next lesson .