What do you want to learn?
Skip to main content
by Susan Simkins
Resume CourseBookmarkAdd to Channel
Table of contents
Introduction and Project Overview
Introduction and Project Overview
Introduction to Operators
Understanding the Console
String, Number, and Boolean Values
In this lesson we'll learn more about using variables in our code. In our last lesson we learned how we can create variables, which is almost like telling our code to remember certain things. So let's get some more practice using those. Let's say we want to create a variable that stores our favorite movie. Well, we remember we can use the var keyword to create our variable. Then we just need to give it a name like myFavoriteMovie, and then we need to give it a value using the equal sign. So, let's say we want our favorite movie to be troll 2, we can just add that, and then our semicolon. And now we can use this variable anywhere we want in our code and do just about anything we want with this, which is really, really cool. Let's say we just want to alert our variable. We can say alert myFavoriteMovie, and then it's just going to look for our variable in our code, look for where we declared it or where we defined it, and then it's just going to pull whatever value we insert in here. So if we run this, we can see it alerts Troll 2. If we want to do something different with this, let's say we want to log it to our console, we can use this as many times as we want in our code. So we can say console.log myFavoriteMovie, and now we get it alerting our favorite movie and then we can get it logging to the console as well. So this is really, really cool. But what if we want to make this a little bit more interesting? We can do more than just alert a variable, we can start to build on this in different ways. Let's say we want it to alert a full response, well we can just use some of our handy operators to do this. So I want to add a string to this. Let's say My favorite movie is, then we just need our space, and then we're using concatenation, so when we run this we get the response, My favorite movie is Troll 2, whatever our variable is. So this is really, really cool. Well, what if we want our variable to respond to a situation? Well, we aren't just limited to setting our variable to a static value like a string or a number or Boolean or something like that, we can actually use it to store the response to something that happened. So I'm going to delete our string here, and let's say we want it to ask us what our favorite movie is. Well we can just use a prompt, insert our question here, so what is your favorite movie? And then if we run this, now it's going to look in our variable, it's going to use our prompt, ask us what our favorite movie is, and we can say something like maybe our favorite movie is Gladiator, and press OK. And then it's going to alert us whatever we inserted into our prompt. It's going to store that information or that value that we type in our text box here and then it'll use that anywhere we want to in our code, which is really, really, really cool. So, let's take a look at a different kind of variable. Maybe we want a variable that stores a random number. Well we can just use var, and then we want to give it a name, so let's say, var randomNumber, and then we can set it equals to. And what if we want our code to generate a random number for us? Well, there's a special command for that that already does that for us in our code so we don't have to figure out how to write that from scratch, and that's Math.random, which is going to create a random for us. So we use a capital M for Math, then we use .random, and then we need some parentheses. And it's going to look at this and say okay I need to generate a random number here. So if we were to alert our randomNumber, let's take a look at this. I'm going to add our semicolon. If we run this now we get our prompt. So we say our favorite movie. It's alerting our favorite movie, and now we're generating a random number as well, which is kind of an important note here, this randomNumber command here is going to generate a random decimal between 0 and 1. So if we wanted a random number between 1 and 5 for example, then we can just multiply the result by 5. So you can see we can build on our variables in different ways to make them more flexible. So if we run this, we get this asking our favorite movie, and then now we have a different number and it's 2.3, so we can see now it's going to be not just between 0 and 1, we can get a bigger range here. So I'm going to go ahead and delete this first part so we don't see that every time. If we run this again, you can see now we're getting 3.8, we're getting 0.6. And so this is really intriguing as well. So, now behind the scenes it's creating a random number for us and then it's going to tell us that random number so we don't have to do anything here at all, it's just going to do all of the hard work for us. So you can see that our variables can be very flexible, we can do very interesting things, and we can have our code kind of do that hard work for us. But what if we wanted to do things based on what kind of response we get or based on a scenario? Well let's take a look at how we can do that in our next lesson when we talk about control flow and how to use if/else statements to run our code under certain conditions.
Introduction to Control Flow: if/else Statements
Using else if
In this lesson we will learn how to use if/else statements to check for multiple conditions. In our last lesson we learned how to use if/else statements to do something called control flow or to have code run only in certain situations. So let's continue practicing using our if/else statements and build onto our quiz we have here. So, so far we have a question, it asks us what the capital of New York is, and we get a different response depending if different conditions have been met. So if our answer is Albany we are told that it's correct; otherwise, we're told our answer is not correct. But what if we want to check for multiple scenarios? Well we can see use and if/else statement, but we have to modify the syntax to be just a little bit different. So let's add another answer to our quiz. So let's ask if, maybe what our favorite animal is, something that has more than one possible correct answer. So let's say var favoriteAnimal, and then we want to ask a question with our prompt command and let's say, What is your favorite animal? And then we need our semicolon. And then we can start our if/else statement. So our first condition we want to ask if and then put our condition in parentheses, so let's say if our favoriteAnimal is equal to, and remember we use triple equals to check to see if something is equal to something else, so let's say if our favoriteAnimal is equal to cat, we can alert a message like maybe Cats are awesome!, add our semicolon. And what if we want to check for a second condition or a second favorite animal and print out a response based on that condition and if that condition has been met? Well, rather than using else and rather than adding another if, we can use a combination of the two so it will check if this is met, and then we need to use something called else/if to check for another condition. So we can press Enter to come onto a new line or we can continue on that line as well, whatever is easiest for you to read. So we could say, else if, which is two words, we can add our additional condition, so we could say else if favoriteAnimal is equal to maybe something like dog, or not dig, but dog if I can type correctly, and then we need our curly brackets to check for our second condition. So maybe we want to alert Dogs are okay. We could add our semicolon. So we have our first condition, we have our second condition, and then we can either continue checking for multiple conditions using else/if or we can just do our else statement. So we'll say, else, and then we need curly brackets, we don't have parentheses here because we're not checking for a condition we're just saying otherwise do this. So maybe otherwise alert good choice. And then add our semicolon. Maybe we want to capitalize our sentence here so it's correctly formatted. And now let's go ahead and run this and see what happens here. So we have our first question. We can insert our answer. And then it'll ask us our favorite animal. And maybe we want to say dog. And then it will check for multiple conditions. It'll check for this one, then go to our else/if condition, and then otherwise we'll get our else. So this is really, really cool. We can check for multiple things and we aren't just limited to one or the other. So this gives us even more flexibility with our syntax or our formatting here for our control flow. So, I'm going to go ahead and delete this and let's take a look and I want to try a common coding question that's asked in interviews and it's designed to filter out candidates. So if we can do this then it means we're doing a good job. So we're not going to use the exact question that's asked in interviews, we're going to use a modified version, and it's a little game called FizzBuzz. So, I have the console pulled up here and I'm going to clear it so we have all of our information cleared out and we're starting fresh. And if you don't remember how to get to the console we just want to right-click, bring you our developer tools, and then my screen is small so we can't read it, but we want this Console tab, which we get that little reflow message every time we resize the window so that's what that means once again. So we're going to press Clear. And the way we do an exercise like this is rather than trying to do everything at once we can make it much easier by trying to start with the smallest part, and once we can do that successfully then we can continue to build on it. It's much simpler, it makes it much easier on ourselves to think about things one thing at a time. So let's start by trying to generate a random number. Our goal here is we want to generate a random number between 0 and 5, if our result is divisible by 3 we're going to alert one thing, if it's divisible by 5 we'll alert something else. Otherwise, we'll just print the number to the console using console.log. So, we're going to start by creating our random number. So we want to store our random number in a variable so our code can remember that random number. So we want to say, var randomNumber. And if you remember a couple of lessons back we used some math commands to generate a random number. So that was with a capital M, then Math.random, and then parentheses because we're going to tell it to generate that random number and insert the result. We'll add our semicolon. And let's go ahead and also log what we're doing here to the console so we can see how we need to adapt this to fit our problem here. So we're going to console.log that random number to see what's being generated, so random number, add our semicolon. I'm going to go ahead and run this. And you can see we're getting a number, a random number. We get a new random number every time we run our code, but it's a decimal. And if your remember back from our math questions earlier we also learned that Math.random generates a random decimal between 0 and 1. So, we don't want a decimal we want a random number between 0 and 5. And we're going to be checking for whole numbers so it doesn't make sense to have decimals either. So we want to start by rounding this number to a whole number, and it turns out there's another command for that. We can use Math.round to round our numbers. So instead of Math.random let's test that out, it's just Math.round with a capital M for that Math. And it's going to round whatever we put in parentheses. So just to test this out let's test this out with a decimal that we choose. So we say round .5, and if we run this, you can see it's rounding up so we get 1. If we had something different here, maybe we have .3, if we run this you can see it's going to round down to 0. So this is going to round this to a whole number so now we're getting a whole number, but we still need it to be a random whole number. So rather than rounding whatever value we insert in there we can still use that random number command to generate a random number. So inside of our parentheses instead of that static value we're going to say, Math.random, and then we need the parentheses for that one as well. So I'm going to add some space here so we can read this a little bit better. So what we're doing here is we're generating a random number, which we saw generated a decimal. So it's going to execute or run the code inside first, it's going to say generate that random number, and then we're going to round whatever that random number is. So let's take a look at this. You can see we're getting 0 and we're getting 0 a lot of times. You can see this scary looking red number here. It just means we're getting the same results multiple times. So, we're getting 0 five times and we got a 1. So let's take a look, we get 1 again, 1 again, and then 0. So now we're consistently getting whole numbers between 0 and 1, or they're either a 0 or 1. But our problem here says we want a random number between 1 and 5, so how can we change our variable so that we're getting a range of numbers. So maybe take a second and try to think about how we might accomplish that with our current code. Well, one thing we can do is we can take our original results here, our decimal, and multiply it by 5. So it's going to take a decimal, it's going to multiply it by 5, and then it's going to round that number. And this is going to have the effect of increasing our range from 0-1 to being 0-5. So, if we multiply this by 5, let's go ahead and test this out. So I'm going to run this and now we can already see we're getting 2, which is not in our original result so we're definitely getting closer. And you can see we get 5, 4, 1, 5, and we can continue to test this and we can see now we've met our first condition and we have a variable that's creating a random number between 0 and 5. So, excellent work. So let's go ahead and continue on and see if we can do the rest of our challenge. So, we want to see if the result is divisible by 3, and then if that condition has been met, we want to alert Fizz. So we can use our if/else statement here. So we want to say if our randomNumber is divisible by 3, then we'll do this. So let's come back to our condition here in a just a second and add what we want to happen. So we want to alert fizz if it's divisible by 3. Okay, so we can come back to our condition. So, we want our random number if it's only divisible by 3, we want it to alert fizz. So, we can use that funny little thing we learned back a couple of lessons called modulo, which if you remember was a percent sign. And what this does is it checks to see if there's a remainder after dividing a value by whatever number we chose. So, we want to see if it's divisible by 3. So using modulo it's going to check and see if our number is divisible by 3, but it's not quite right, it's going to return a remainder, not just see if it's divisible by 3. So what we want to do here is we want to use our triple equal sign to see if the remainder is equal to 0, because if we divide a number by 3 and we get 0 as that remainder it means it's exactly divisible by 3 and there's no whole number left over, which I know can be kind of confusing to think about at first, but if we kind of break it down like this and really try to think about what's happening here we can see that this is going to give us that intended result. So now if we have a number that's divisible by 3 we'll get fizz. And then we want to check for an additional condition. So remember we can use else/if. So I can say, else if a randomNumber, and just like with our 3 when we want to use our modulo to see if we divide it by 5, if the remainder is equal to 0 then we want to alert buzz. So we can say, alert buzz, and then we need our semicolon. So, let's go ahead and check this so far. So, we get 5, so it's alerting buzz, 5 is divisible by 5. So we could say OK. When we check it again we just get 4, 2, 2, and then now we're getting buzz. So, we can say we have that working and we've met most of the condition. We otherwise want to print the number to the console. So rather than logging it here we can just use our else statement to only log the number if it's not divisible by 3 or 5. So we want to say, else, I'm going to hit Ctrl+X to cut this, and then we'll log it to the console. So, we have most of our questions, conditions being met, but if it is 0, if our number is going to be 0 here, it's going to print the result and say it's divisible by 3 and it's also going to say it's divisible by 5. So, technically 0 isn't divisible by 3 or 5. So in our next lesson we're going to continue learning about else/if statements, control flow, and we're also going to use comparison operators to check things like or and and/not.
Control Flow and Comparison Operators
Putting It All Together: Zombie Text Adventure Game
In this lesson we'll put everything we've learned so far together to create a simple zombie text adventure game Up until this point, we've learned a lot of things so far and we've definitely learned enough to do something fun like create a little text adventure game to help us practice thinking in a new way, because just like I mentioned before, we really are training our brain to think in a new way. So I want to create a little text adventure game called Zombie Apocalypse where we chose a weapon to fight the zombie with and we have a 50/50 chance of either defeating the zombie or getting bitten and losing the game. So, just like we did with our fizzbuzz game we can start to break this down into parts to make it easier to write our code. It's really easy to try to do everything at once and then get really overwhelmed. So, the first thing we want to do with our game is we want to kind of set the scenario or set the scene. So, I'm going to use alert to alert on the page what kind of scenario we're encountering here. So I'm going to say alert, and then we're going to enter a string into our alert, and just to save you the time of watching me type this out I kind have written a little example scenario. So you can feel free to create your own or you can type in what I've created here. So I'm going to say, oops and it cut off my it, It is the zombie apocalypse. You are looting a store and suddenly a zombie bursts through the door, which I'm going to go ahead and shrink this window a little bit so we can see more of our Scratchpad here. So we have our zombie apocalypse, we're looting a store. So let's go ahead and run our code so far. So we get a little message and we've done a good job so far of kind of setting the tone. So we can say OK. And next we want to ask our user to choose a weapon. So we want to store our weapon choice as a variable so our code can remember what our choice was and we can refer to it throughout our code. So we can say, var weapon, and then we want to store the results of our response. So we can use our prompt and then we can insert a little bit more here. We could just ask what our weapon was, but we want to kind of build on our scenario. So I wrote something else out here. So, I'm going to copy it and then paste it so you don't have to watch me type all of this. You could say, You search around frantically for a weapon. What do you choose? And we have a couple of different choices here, we can choose a bow and arrow, an axe, or a rubber chicken. So we want to add our semicolon. And let's go ahead and run this so we can see what we have so far. So we have our beginning scenario. We have a zombie bursting through the door and we have to search around frantically for a weapon. So we can make our choice, maybe we want to choose rubber chicken, and then OK. So now we need to do something with our weapon choice. So I would like to start by maybe inserting or telling the user what they chose. So, then we can say, alert You attack the zombie with your, and then we want to add a space here by adding a string with just a space in it, and then we can just use our variable to repeat whatever our user typed in. So we're going to say You attacked the zombie with your weapon. So let's go ahead and test this. We say it's a zombie apocalypse, and let's say axe this time. So we can say, You attacked the zombie with your axe. So we already have a really good start. We have our scenario, we're asking the user to choose a weapon, and then we're alerting our response. So now what we want to do is we want to have a 50/50 chance of either defeating the zombie or getting bitten. So I'm going to press Enter. And I like to keep my variables all in the same spot, that's a good practice. So what we want to do is we want to create a randomNumber once again, so we have our fun math functions coming back in. So let's say var randomNumber, and then we want to have a 50/50 chance so if we use our randomNumber here and we use the rounding to round that randomNumber, then we're either going to get a 0 or a 1. So we have a 50/50 chance of getting either 0 or a 1. So we want to say, Math.round, so we're going to round the result of our randomNumber. So round our randomNumber. And then we don't want to multiply this by anything cause either 0 or 1 is fine. So, now we're going to have our scenario. We're going to be asked for our choice. It's going to attack our zombie with our choice. And we also have this randomNumber, but we're not doing anything with it. So this is a perfect opportunity to use our if else statement. So we want to check and see if our randomNumber is equal to 0, and then we could have one thing happen or we could say, else if our random number is equal to 1 then we want something else to happen instead. And we can leave off that else statement and our code is going to run just fine, we just won't have something if we happen to get a 2 or a 3 nothing would happen instead. So we can do something a little bit different here with our else if statement. So if our number is 0 I want us to get bitten and lose. So if our number is 0, we're going to alert The zombie bites you. You lose!!!. And then our semicolon. Otherwise, if we get a 1 we can say, alert, then we can say You kill the zombie with your, and then we can just reuse our weapon again. So we can say plus and then our space, woops, make sure you use a plus and not our equals sign, and then with our weapon, and then we could say, You win!, and then our semicolon. And let's go ahead and test our little game. So I'm going to go ahead and run this. We get our scenario. And we have, oh no, a zombie bursting through the door. We can choose our weapon, so let's say rubber chicken. So we attack the zombie with our rubber chicken and then we kill the zombie and we win. So we can go ahead and play again and let's see if we can get bitten. And we win again, but you can see here that we can start to do some really fun things. We aren't just limited to doing kind of boring exercises like fizzbuzz. By slowly breaking this down we can start to build things and increase our complexity. So in our next lesson I want to go over your volume 1 assignment and learn how we can use everything we've learned so far to create an adventure game of your own.
Volume 1 Assignment: Choose Your Own Adventure
Susan is a web design author for Pluralsight. Growing up, Susan was both a passionate artist as well as a computer tech aficionado. When she discovered the world of web development, she found that...
Released19 Nov 2014