Quick Start to JavaScript: Volume 1

1. Quick Start to JavaScript: Volume 1 What Is Javascript? In this lesson we'll learn a little bit about the historical context of JavaScript and also take a look at the things we can create using JavaScript as a language. Before we start learning how to use JavaScript, it's important to take a look at what it is and the kinds of things we can create using JavaScript. So, one of the most confusing things about JavaScript when people are talking about it or learning about it is it sounds very similar to another language called Java. And it actually has nothing to do with Java as a language, although it pulled some inspiration from the structure of the language. They actually have nothing to do with each other. It was named JavaScript more as a marketing ploy due to the popularity of Java as a language at the time JavaScript was created, so we kind of get that confusion in that the names are so similar because of that. JavaScript was created in 1995 by Netscape as a language that was native to the browser, so using it for a language to create products and applications that run directly in the browser to replace other languages that had been appropriated to do the same thing, but didn't run as well because they needed plugins, and things of that nature, such as Java was used prior to JavaScript in the browser to create what is called Java applets or little bits of applications that ran in the browser, but they were slower and it also need a plugin to be able to run that language since that wasn't what it was designed for originally. So JavaScript was created to kind of replace that and be that language that was meant specifically to be used on the web. And JavaScript is primarily client side, meaning it doesn't need to run through a server in order for it to work. Compare that to something like PHP or .NET that needed to run through a server in order for those to be able to work with a website, JavaScript just needs a browser in order to run. While it was originally designed as scripting language, it's actually a fully featured language. If you don't know what a scripting language is, it's basically when a language is used to communicate with an existing application. An example of this would be using JavaScript as a scripting language in a game engine like Unity 3D versus using it as a fully featured language to develop something like an application from the ground up. So what are some things we can actually create with JavaScript? Well, we can create something as simple as interactions or small enhancements like infinite scrolling. If you don't know what infinite scrolling is, if you've ever used something like Pinterest where you scroll down and it dynamically loads content depending on how far you are down the page, it's continually loading content when you reach the bottom, that's infinite scrolling. Beyond infinite scrolling and little small enhancements like that, we can create things like parallax effects in the browser, we can create entire games that run in the browser without a plugin, we can do 2D, we can do 3D games, and also JavaScript is starting to be used more and more outside of the browser, which is really interesting. This term has been coined for that called the Internet of Things, and that refers to languages like JavaScript being used in contexts other than what they were originally designed for, things like communicating with robots, creating wearable technology, and things like that, so it's really, really cool. We can do a whole lot of different things using JavaScript. It's also been used to create entire applications from the ground up. An example of this is a YouTube application for PlayStation, it was built with a JavaScript library called AngularJS. So let's take a look at some specific examples of things that were created with JavaScript. So this is another JavaScript library called parallax.js, which allows you to create parallax effects. I'll just X out this little menu over here so we can take a look at this. You can see that as I'm moving we get that kind of parallax effect and I'm using my mouse almost as the camera to kind of manipulate and change the viewport. So, to see what JavaScript's actual role in this web page is, let's take a look at the code that's running this behind the scenes. So I'm going to right-click and pull up the developer tools here by pressing Inspect Element. I'm using Firefox, so we're using Firefox's developer tools, and I'm going to start by disabling JavaScript. So right here we see the default behavior of our page, and then if I come here into the Settings I can come down here and disable JavaScript and we're going to see a change, so I'm going to click that. And, now you can see we don't have JavaScript working so you can see that kind of inner activity that was adding here to our page. We still have some basic animations and movement coming in, but this is actually being done with CSS. If we come in here and disable our CSS, I'm just going to press these little eyes, which is going to turn that off, we can see just the HTML on our page. We can see we have images, we have basic content here, but we have no styles and just a very basic inner activity such as the ability to click on links. So this is what HTML does is it gives the structure to our page. When we come in here and add CSS back in, we have the presentational aspects of that page being styled with CSS. So this kind of sets the look and feel and we can start to do more and more as CSS advances, such as basic animations. When we come back in and bring JavaScript back in, we can do a whole lot of different things, very cool things such as interacting with our web page. So here you can kind of see the separation of those three languages, or technologies, and see how they each have their own role within the web page. So let's take a look at a couple other examples that were created with JavaScript. We have this demo here, Samsung Racer, which is an example of 3D in the browser. This was created using a library called Three.js, which allows you to create 3D like this here directly in the browser without using a plugin or anything like that, which is really, really cool. Another example that was also built with Three.js is this little guy right here, this is more of a CAD type example where someone has created a mockup of an apartment, but we can use our mouse to kind of look around and control the camera, and in addition to that we can actually use our keys here and move around and take a look as well. So you can see a more practical application of 3D in the browser. You can send this to your client and they could actually walk around your mockup and get a much better feel for what you're creating or what you're designing for them, which is also very, very cool. Another example is with a motion controller. This is called Leap Motion, which is a motion controller that's controlled using your hands. You can see he's using his hand in this demo here to manipulate or control the scene, kind of move the camera, and in just a second here he is going to start to use his hands to actually interact further with this and pull off pieces of the skull. You can use JavaScript to create all of these kinds of interactions. So, there are a lot of different things even beyond the browser that we are able to do with JavaScript. So, now that we've learned a little bit about the historical context of JavaScript and what it does and also taken a look at some examples of what we can create using JavaScript, in our next lesson we're going to actually get started and write some JavaScript of our own.


2. Hello World: Writing Your First JavaScript In this lesson, we'll learn how to write our first JavaScript. Before we get started by writing our first JavaScript, we need a good web browser because we're going to be writing our JavaScript directly in the browser. And we're going to be using Mozilla Firefox so if you don't have that installed you'll want to go ahead and download that and install it. Now, the next thing we want to do is we want to open a file in the browser so we have something to run our JavaScript on, and that needs to be an HTML file. So in our project files, you can see we have just our 03_begin folder and we want to open this index.html file in our Firefox web browser. So I'm going to go ahead and double-click on this and it's going to pull open our JavaScript page here. And you can see we just have a pretty bare bones document. We have a heading here, this is an h1 heading, and then some basic CSS, which just changes our background color and the color of our text, and also our font as well, so just a very bare bone project page here and we're going to be writing JavaScript on top of this. What we're going to be using to write JavaScript is the developer tools of Firefox. So we can right-click, come down here to Inspect Element, and it's going to pull up Firefox's developer tools. If you have a light background and you want to change it, you can see mine's dark, the only difference I have here is that I'm using a different theme. So if we come over here on the right side and click on this gear icon, then you can come here to our DevTools theme and switch from the light theme, which is what you see by default, to the dark theme if you want it to look like mine. The last thing we need to do in here is come down here and scroll to where it says Available Toolbox Buttons and make sure our Scratchpad button is turned on because this is going to allow us to create a sketchpad or scratchpad that allows us to write little JavaScript files here and apply them directly to our page without having to use an external program. We can write JavaScript directly in its native environment, which is the browser. So I'm going to go ahead and click on this little Scratchpad button, it's going to open up our little JavaScript Scratchpad so we can write it directly here and then we can see it in the browser on the left. So I'm going to close our developer tools because we have our Scratchpad open, and now we're ready to go. Before we start writing this, I also want to save our file so we don't lose any of our progress on accident. So I'm going to come up here and save our Scratchpad as a JavaScript file. So we're in our 03_begin folder and I already created two folders here. We want to always make sure we're organizing our files, so our CSS is in the styles folder, all our styles sheets in a styles folder, and so all of our JavaScript is going to be in a scripts folder. So I'm going to double-click on this and then we can name it whatever we want as long as it follows that file naming convention for the web. We can't have spaces or crazy characters, we're basically limited to hyphens and underscores, or CAML case to separate any words. We're just going to call this main.js and I'm going to hit Enter to save. Now, one thing we want to note before getting started with JavaScript is that the code you write at first is going to be terrible, and this is completely fine, and I mean that in the best way possible, and that's only because we can't write good code until we know what that means to actually write good code. So the most important thing is that you get practice and learn after writing things why there might be a better way and eventually get to the point where you can write awesome code, we just never start out that way. So what we're doing here with JavaScript is we're going to be telling the client, or the browser, what we want it to do using a language that it understands. So all we need to do to talk to our browser here is learn that language, which is JavaScript. So, let's start by entering a command here, which is going to communicate with our browser. So I'm going to type alert, which is going to alert the browser of something. And then directly after our alert we need some parentheses, so it's going to open and close those parentheses for us. And inside of this we need to add quotation marks so we can add some text in here, otherwise it's going to interpret this as a command rather than some contents. So we add those quotation marks, this is what's called a string. So you can see our syntax kind of is being hinted here where we're telling it alert, we're going to give it a message, and the format that message is going to be in is a string, which you can see right here. So we're going to type in our message. And we're going to tell it Hello World, which is kind of that stereotypical first message that we always write when we're learning a new language, so we can go ahead and follow that stereotype. I almost feel like it's a rule when you're starting a new language and we can go ahead and do that as well. So alert, Hello World in our quotation marks, and then we need to finish this by adding a semicolon. So I'm going to add that semicolon and that's going to tell the browser that this is a statement or a complete command. That's called a statement in JavaScript. The last thing we need to do is run our code so it's going to run this JavaScript in our HTML file over here on the left. So I'm going to come up here and run this, and very, very cool we have this pop-up window right here telling us the message we alerted, Hello World. So we can press OK. And how cool is it that we can already have some kind of functionality or interactivity on our page? But luckily we aren't limited to just alert, we have other commands we can tell the browser as well. So right below this I'm going to use another command here called confirm, so that's just confirm. And then in parentheses we have the same syntax here for this command, we're going to enter another string or another little bit of text in between here. So I'm going to type in those quotation marks and confirm that say, I love JavaScript, if I can type here, with an exclamation point. And the last thing we need is that semicolon and then we can press Run. So we have our alert saying, Hello World, we can say OK. We have this confirm, which is almost identical to our alert except for we have the ability to press Cancel as well. So I'm going to press OK and then there we go. So from there you can see that our program is running from top to bottom, it's just going to start, and then read our statements or our commands as we type them in our file here. If we come in here and add a new one, I'm going to press Enter, and we can use another one called prompt, which is pretty similar to these two except for it gives us the ability to type in some text. So, I'm going to add those quotation marks to enter our string here or our text, and let's say Do you want to learn JavaScript, and then I'm going to add our question mark. We need to add our semicolon there at the end. Very, very important we don't forget that semicolon. And after I press Run, we're going to see our alert. I'll press OK. We have our confirm, which is next say, I love JavaScript, OK. And then we have our prompt asking us, Do you want to learn JavaScript? So we can press Cancel and run away or we can press OK and continue. So I'll say Yes with a whole bunch of exclamation points because we're super excited. And then there we go we have our first program. One question you might have is the spacing we have between our commands. So, the space between each of these statements is going to be ignored. So if we wanted this all to be on one line without any space, if we run this we're going to get the exact same thing here. You can see that nothing at all is different other than it's formatted a little bit differently in our file. So the main important thing here is that it's readable for you, it's scannable. So it's best to start each new statement on a new line like this. You can even press Enter to add a space between each of these. It's going to run exactly the same. The important thing is if you add a space between this, if you have many lines of code, you want to not leave that space between each line because it actually adds to that file size, which we don't want, we don't want our code to run more slowly, which in a program that's only a couple of lines long like this one it doesn't have that big of an impact, but once we start to have larger file sizes that's going to have a huge impact, but other than that it's up to you. It's going to ignore that space between those commands. So now that we know how to setup our JavaScript Scratchpad and we've also learned a couple of commands for our browser, in our next lesson we're going to learn about operators and how we can use JavaScript with logic.


3. Introduction to Operators In this lesson we'll learn about operators or how to use JavaScript to do calculations. Before we get started in the browser we need to open up our project file for this lesson. So in our project files you'll just want to make sure in your 04_begin folder that you double-click to open up index.html and Firefox web browser. From there, we just want to pull up our JavaScript Scratchpad so we can write this and see it directly in the browser window. So once again you'll right-click and click Inspect Element to pull up your developer tools and then click on this little spiral notebook icon to pull open our Scratchpad. If you think back to our last lesson, we learned how to use commands to start to communicate with the browser window. We typed things like alert and then we just needed to put some text or some characters inside of quotation marks, which is once again called a string, in order to display the results in the browser. So we can say Hello, we just need to add our semicolon, and then once we run this you can see we see that result popping up in a pop-up window and it says Hello, and we can press OK. But we aren't just limited to commands like this. One of the most important parts of using JavaScript to create programs is learning how to use operators to perform calculations for us, so this allows us to use JavaScript with logic. One of the most common types of logic is math, so that's always a good starting point. Even though it's not very exciting, we can get a lot more practice and kind of learn more, get a better feel for JavaScript, by performing those kinds of calculations. So I'm going to go ahead and delete our alert here. And one of the most common types of math or arithmetic is addition. So if we say just how we would think of it, 2 + 2, all we need to do is just add a semicolon at the end and JavaScript is going to evaluate this expression for us, or it's going to perform this calculation and return a result. But if we press Run like we did with our alert, you can see we have nothing happening and this is because we're not telling it to do anything, rather we're kind of performing a calculation here or we're writing a statement, we're just saying 2 + 2. So, it's not going to have any kind of effect over here, but it is in fact returning a result kind of behind the scene. So in order to see that rather than pressing Run, we want to click up here and say Display. And what this does, you can read right here, it's going to insert the results in a comment so we can see what kind of value JavaScript is returning behind the scene. So I'm going to go ahead and press Display and you can see it's going to say the equivalent of this statement here is going to be 4, so 2 + 2 is equal to 4. And in addition to addition, we also can perform subtraction. So if we want to say 2 - 2, we can just add our semicolon, and then we can press Display, and we can see that 2 - 2 is equal to 0. If we were stuck with simple calculations like this it might be pretty tough to see how helpful this is since we can just do this in our head, but once we start to get really hard calculations, that's when we can start to use JavaScript to do this heavy lifting for us so we don't have to think nearly as hard. So if we had kind of two crazy numbers here and we wanted to add these together, we could just type this in, and then it will return the results here for us. So, in addition to this, in addition to addition, we have subtraction, we can perform complex calculations, we can also do things like multiplication and division as well. So the syntax for this or the symbol we use you might already be familiar with because it's not completely unique to JavaScript. JavaScript uses a kind of common syntax for this. So if we wanted to say, what is 2 times 2 we can use an asterisk, so 2 * 2, display the results, and we can see 4. So if you think back or you might already can be able to guess what we can do to divide one value by another. So if we want to say what is 2 divided by 2 we use a forward slash just like that. So if I press Display we get the result 2/2 is equal to 1. And these are pretty simple arithmetic operators, but we also have kind of funny ones as well such as this thing called a modulo. So just to show you that would be 10 and we could use the % sign and then 3. So, what does this mean? It's pretty difficult, there's not really a way you can guess what this means, but what this is doing is it's taking the first number, dividing it by the second, and returning the remainder of those two numbers. So if I press Display, we get 1. So how the heck did we get 1? Well, if we take 3 we can see how many times 3 will go into 10 as a whole number. So 3 x 3 returns 9, we can't fit 3 in another time so the whole number that's left over is 1. So 3 x 3 is 9 plus 1 equals 10, so that returns the remainder. And in fact this modulo is incredibly helpful in JavaScript as we'll see later on in this course. It can start to do some really interesting things for us even though at its face value it's kind of odd seeming. It doesn't seem like it might be super helpful. Another thing we need to kind of remember or think back to when we're using operators like this is the order of operations. If you took math in high school or earlier on this might come back to you or this might sound familiar, and the order of operations helps us determine when we have multiple operators like this, which calculation is going to be performed first. So if we have something like 30 - 2 * 3, if you take a second and kind of think about this and think about what result it might return. So I'm just going to take a second here and then I'll press Display and you can see 24. So if we perform this from left to right, just like we're used to, we would get 30 - 2, which equals 28 * 3, which it's clearly not 24. So if you don't remember what the order of operations is, it has an order of precedence in which these are going to be calculated, and multiplication and division are always going to be performed first. So we get 2 * 3, which is 6, and then it's going to subtract the result of that 6 from 30, so 30 - 6 is equal to 24. If we want to have this first part performed first, we can just use parentheses to tell JavaScript what we want to happen first, which is just like in traditional arithmetic or traditional math. So if we put in parentheses (30 - 2) and then add our * 3 outside here, we should get 28 * 3. So if we press Display, you can see that's exactly what we get, which is 84. So we need to kind of be understanding of this and be able to anticipate the results, because if we weren't familiar with order of operations you can see we would expect this to return a completely different result than it did. And while math doesn't seem incredibly helpful on its own, we're just getting values here, but what can this actually do for us? It starts to be incredibly important and helpful once we combine this with other kinds of things we can do with JavaScript. And we aren't just stuck with returning the values here, it can also be incredibly helpful to return these values somewhere else as well. So, that's what we're going to talk about in our last lesson when we talk about the console and what that is.


4. Understanding the Console In this lesson we'll learn about the web console and how we can use it to view important information about JavaScript. For this lesson you'll just want to make sure you open our index.html file from the 05_begin folder and then open up our Scratchpad from the web development tools just like we have in our last couple of lessons. And if you remember from our last lesson I mentioned that there's a different way to display the result of the code we're running other than clicking Display and viewing it as a comment. So just as a refresher, if you remember in our last lesson we learned how to run or use JavaScript to calculate the results of an expression or a mathematical expression for us, and if we say like 2 + 2 and add our semicolon we could press Display and get the results in a comment, so 2 + 2 returns 4, but there's actually a much more common way to view the results of a statement or an expression like we see here, so I want to take a look at that. And the way we can do that is we're going to be logging information to something called the console. So what we can do here is we can say console, which is going to target that console, and we'll say .log, so we're telling the console to log some information, and then we need to add that information inside some parentheses. So just like with our alert, our prompt, our confirm, we are giving a command and then putting it inside some parentheses and then we'll finish with our semicolon. The main difference here is now we're telling something specific what command we want it to do. So we're saying console log some information. So inside of these parentheses we'll say something like we did before, we can say Hello World, some exclamation points, and then the last thing we want to do is click Run. And you can see nothing is happening is here, and that's at least nothing visual is happening, but we need to look at a certain place to view the information we're logging, and that's in the console, the thing we're telling to display this little message. So the way we get there is in our developer tools. So we can right-click and choose to Inspect Element, and then in our web developer tools, I'm going to shrink this window so we can see all of our tabs here a little bit better, you can see that there is a tab that's called Console. So this is where we need to go to view that information. So I'm going to click on this, you can see if we hover over it we get a tooltip telling us we're going to view our web console, and there you go. You can see our message here. It's echoing out the content we put inside of that command, Hello World!! And we also get some additional important information here that when we return a result like this or we have information that's logged into our console it's going to tell us what line that occurred on, so if we have tons of code we can go and see exactly where we're seeing the results of that command or that code. So right here you can see we are viewing on line 14, so it's the last bit of information after that colon. And if you look over here in our Scratchpad you can see we entered that command on line 14 as well. When we have code that's this simple it's not that helpful because we remember where we entered it, but if we're getting an error or a warning or something like that, it's going to display in our console as well and that will be incredibly important especially when we have hundreds of lines of code or code we haven't written in a long time and we're coming back to it to do what is called debugging or solving issues or errors in our code, then that's going to be really, really, really helpful. So, just like I mentioned before we can see other kinds of information here. You can see we have information from the network, from CSS, JavaScript, security, etc., so there's all kinds of additional important information here as well that's unrelated to JavaScript. So this is going to be one of our best friends when we're writing software or programs for the web, it's going to know where to look for information. So let's take a look at what a warning might look like. So over here we can put out a warning, and while this isn't a real warning it will kind of emulate one so we can get a good idea of what that might look like when we see one in our code. So we can use a similar command here. We're going to target the console and then we're going to say, console.warn, so we're going to echo out a warning here, and then just like before in our parentheses we'll put our warning. So we can say, Warning!!!, and then add our semicolon and then as we run this you can see that we have now a warning being echoed out. Normally it would be something more specific about what kind of warning we're getting, right now it's just putting whatever we entered into here. And you can see that it's different from information that's just logged to the console with console.log. We have a little triangle with an exclamation point here saying that this is a warning, you need to watch out for whatever it is that we're doing, and then you can see what line the warning occurred on. And more serious than a warning is an actual error, something that is going to cause a serious issue in our code, so we can kind of take a look at that as well. And that's just console.error, and then in quotation marks we can say Error!!!, add our semicolon and run this, and we can see what an error might look like as well. You can see that it's in red so our eye is going to be immediately drawn to this, it looks kind of scary, and we have an X as well. In addition to that if we drop this down we're going to get some additional information about the nature of our error and then once again the line it occurred on. And don't worry about what these errors are saying right now, it's a little anonymous, it will make more sense as you learn more about JavaScript more as you go along. The most important thing right now is to recognize the difference between these and what they look like. So, how is this helpful you might be asking yourself, if we're giving our own warnings, we're creating our own errors right now? And one of the most important parts of this is that we can interact with our code as it's already running on our page. So we can get different messages, different information about our code as our page is live rather than writing it, and then running it, and then seeing the error. So, we can type in things just like we do in our Scratchpad in the console. So if we wanted to say console.log, we can put in the exact same thing, Hello World!, and then we can just press Enter to run that code and you can see we have what we typed in, Hello World, we have a little message that says undefined, which we'll learn what that means later, and then we have the actual information logged to our console. The main difference between adding this in our console and in our Scratchpad is that our code is already running here on our page as we're typing it in here, and we're also limited to typing it line by line, unlike in our Scratchpad where we can write an entire file or as many lines of code as we need to get what we want to do done. So, it's an important difference there as well. If we need just a little line or two here and we don't need to save it we can put it in here, otherwise, we need to add it in a file or write it in our Scratchpad. So, this is one of the most important concepts to understanding it and get a grasp of because as you get more advanced, as you get more familiar, it's going to be an essential tool to help you find errors in your code. So console.log, chances are you're going to be using this a ton throughout your JavaScript career. So now that we've taken a look at the console and learned about what it can help us do, in our next lesson we're going to continue on learning more about JavaScript and talk about different types of data that JavaScript recognizes.


5. String, Number, and Boolean Values In this lesson we'll learn about primitive data types or the basic building blocks of JavaScript. Up until this point we've used two different types of data with our JavaScript or two types of things. So let's take a look at what we've learned so far. When we learned in our last lesson that we can log things to the console, we use the console.log command and we put a value inside of these parentheses or something we want to echo out in the console. And you can see right here it's expecting us to input a string. So a string, as I mentioned before, is a string of characters or a sequence of characters inside of quotation marks. And we can type anything in here we want, it doesn't matter, it's all going to be treated like a string. So, we also learned how to use JavaScript to calculate math for us. So we could say 2 + 2, we can display the result, and we can see that it's 4. So, why is it important to understand that this is a string and these right here are numbers, that might be obvious, yes these are two very different things, but what's most important about understanding this is that JavaScript treats different types of data differently. So to take a look at this we can see 2 + 2 is equal to 4, but what if we add 2 different things that are not numbers? So, let's say 2 +, and then I put the 2 in parentheses, we now know that this is a string, anything inside those quotation marks is going to be treated like a string. So what is the results of this expression or this statement, what answer are we going to get? Well, let's go ahead and take a look, I'm going to press Display. And you can see we get 22 returned as our result and not 4, so huh? That's kind of weird, and what's happening here is when we have 2 different value types here, when we have 2 different types of information we can add them together, but our result is actually 22, and what this is called is concatenation. So this is where it's incredibly important to understand the difference between two different data types because JavaScript treats them differently. So here when we have two numbers it's going to add them together. When we have two different data types, when we have a number and a string, it's going to concatenate them or just kind of push them together into a result, which is also a string. So, what it's actually putting out is like this, it's just saying 22 is the result of that. And for example, if we add two different words or strings together, let's say we have Hello + World, so we have one string we're adding to another string, take a second and kind of guess what the answer of this might be. So if we press Display, you can see we're getting a string returned as a result as well and it's just concatenating those strings, or it's pushing them together. If you notice here it doesn't add a space between our two words here because JavaScript doesn't know that those are words, they're supposed to be separate. It can't read our mind so we have to kind of anticipate these types of results as well. So if we want to have a space in there we have to say, Hello, and then add or concatenate a space, so inside of this string we need just a space, and then we can add again and we can say World. And now when we display the results we get all of this concatenated so it'll push it together, this Hello, plus, the space, plus the World, and then the result is something more like what we expect to see, or more like we recognize as we can see below, but really it's just a concatenation of all of these things. So, this can be incredibly important if we accidently have a number that is being treated as a string, if it's being converted somewhere in our code we might get something like 22 instead of 4, which you can see is much, much different so we have to be understanding of how these are treated and be able to watch out for that kind of result when we have something kind of strange going on that might be what's happening. So, we have other types of values or data types as well. So we have numbers, we have strings, and we also have other things that can be outputted, other kinds of values. So, let's take a look at that. Let's say we have 10 is greater than 2. So let's go ahead and display the results of 10 is greater than 2. We know that this isn't going to return an answer like obviously 2 + 2 is going to return 4, so what happens here? I'm going to press Display and you can see that we get true as an answer, so it's saying yes, 10 is greater than 2. So if we say that 10 is less than 2, if you take a second and try to guess the result, you can see that just like we expect it's going to tell us no that's false, 10 is not less than 2. So, this is different. We have true and false, different type of data than a string or a number. So what kind of data is this? Well, we can actually ask JavaScript, which is really cool. We could use the typeof command. So we could say, typeof, and then we can add in parentheses what we want to know the type of. So we can say 10 is less than 2, give me the answer of that, what type of value is being returned? And now when we display this we can see it's returning boolean. So, true and false are called Boolean data types. You can see I've created a list here to kind of serve as a reference and kind of help reinforce this because this is a lot to take in at once and I realize that. So it's really important to take your time in understanding this. This will start to make more sense as we go along so don't stress out if you don't understand all of this right away. It's more important to be aware of this concept that there are different data types in JavaScript because we are going to use these as the basic building blocks of our program. We have Boolean values, these are incredibly useful, we can check to see whether something's true or false and then write our code based on the response. And usually this won't be such a simple example like it is with numbers. So I'm going to go ahead and delete these. We have a couple of other data types as well. And these data types are kind of strange. You can see right here we have two others called Null and Undefined. So, we'll get a better idea of what these are as we go along, but just real quickly, Null means a value does not exist. So if we ask JavaScript something that doesn't have a value, it's going to say that value is Null, and if we ask JavaScript something that hasn't been defined to it, if it doesn't understand it, it's going to return Undefined. So I know those concepts are kind of confusing at first, but it'll start to make more sense, especially in a couple of lessons when we start to use something called variables in JavaScript. So to get some more practice about data types, let's play a game here. This is in game.html and we'll just work through the first one together and then you can do the rest on your own between lessons or come back later because this is incredibly important to be able to anticipate what type each expression's result is going to return. So if we say 300 / 2, we can see it returns a value, which is 150. So if we take a guess at what type this result is, it's a number. And to try and check our answer we can say, typeof 300/2, and then just display the result. We can check to see if we were correct as it will tell us what that answer is. So, kind of take some time and practice between learning these types here in our little game and then join me back in my next lesson and we'll go over the answers here and we'll also talk about something incredibly important, which will help us start to actually do things with our code when we learn about variables.


6. Variables In this lesson we'll learn how to use variables to store information. In our last lesson we ended in an exercise to start to be able to try to guess or anticipate the type of an expression's result. So I want to go over some of these answers and take a look at that. We learned that the result of 300/2 was 150, and 150 is a number. While that seems kind of obvious to us, it's not as obvious to our code. It doesn't really understand what a number is that's actually defined for it in a certain way in the language itself and JavaScript itself, so we have to be able to understand how JavaScript is thinking about each of these things. So let's take a look at Hello + World. And if we press Display here we get the result. We can see it's crammed together, but it's kind of hard to understand in the context of our Scratchpad what the results will be here. So I want to take a look at our console so we can get a better idea. So I'm going to bring up our developer tools and come over to our Console tab and then just enter exactly what we entered in here. So we can see Hello + World, and we're going to ask it what the result is and it's going to tell us that that's Helloworld. And now it's much easier to see that this is a string, that our result is a string, so we see those little quotation marks and we don't see them over here. And if you remember when we added two numbers together it returned a number, but if we add two things that are not numbers together it concatenates them and returns it as a string. So this is what we're seeing here. And JavaScript doesn't know that these are separate words, even though these are readable to us, we have to remind ourselves constantly that we aren't reading this like text on a page or something like that, it doesn't understand these are words. So it's just going to cram it together, it's not going to know that there's a space in there. So if we wanted something like that we'd have to say Hello and then add in that space ourselves, and then add in our World, and then we would get the result. It would just read this as a string too and insert it. And although this looks very readable to us it's actually just pushing it all together and we're actually getting three separate strings here concatenated. So we have to constantly remind ourselves to think in a new way when we're writing that code. So we have Hello World, it's returning a string. So how about 4 is less than 2? So we type in 4 is less than 2 and you can see we get false, and if we remember back to our last lesson false is a Boolean value, we have true and false, which are both Booleans. So if we ask it what typeof 4 is less than 2 is, it's going to evaluate 4 is less than 2, it's going to return false as we see here, and then it's going to ask what type of the result is. What is the type of false? And then we get boolean return, so very, very interesting. And continuing along we have a+b, which I want to do that last and there's a reason why, which we'll get to in just a second, but 3 + 6, if we add this together, so 3 + 6, we have a number here and we have, this looks like a number to us, but since we put it in quotation marks it's actually being treated as a string so JavaScript treats it as a string. It doesn't know that that's a number since we didn't treat it that way. And then we get it concatenated and returned as 36. So if we say, typeof 3+6, then we can see it returns a string. So we have to remind ourselves also that it's going to concatenate those numbers and it's going to return it as a string. So, how about a+b? If we say a + b, it's going to return an error and say a is not defined. So this is actually a special type, if we say, typeof, let's say c this time, it's going to say that its type is undefined. So this is another value type as well, which we started to learn about in our last lesson. So how do we correct this error? What if we want to use c and have that mean something in our code? We have to create what is called a variable, which is going to define things for JavaScript. So it's no longer going to be undefined, it's going to have a definition in our code, and it's going to be very helpful for other reasons as well. So let's go ahead and take a look at that. I'm going to switch over here to our project file for this lesson, which is our index.html file in our 07_begin folder. And let's take a look, I'm going to pull up our console again so we can see any results that are being spit out to our console here. And if you see this reflow, when I remove this it's just telling us that our code is being recalculated, our CSS, we get that little reflow message. So I'll clear that. I just wanted to point that out in case you were wondering what that is. Let's say we want to define for JavaScript so we no longer get undefined, we need to use the variable keyword, which is var for short. So we just say var, oops and make sure you don't have your caps lock turned on like I did, so we say var, and then we need to give our variable a name. So if we want to name it something like a, we can name it a, and then we need to set an equal sign so we're telling it what it is. We're saying var, we have our variable, we're going to call it a, and then we're going to define it using the equals sign. So let's say we want a to equal 2, for example. Then now if we run our code and we ask what type of a is, maybe take a second and guess. What do you think it's going to return? What is it going to tell us? Well if we press Enter you can see it's returning a number. So since we said a is 2, now it's reading when it sees a it's going to point to this value, it's going to say well, a is 2 and 2 is a number, so it's going to return a number. So now we don't any longer get that undefined. If we say var b, and we want this to be something else, then now we can use these variables anywhere we want to refer to that value. So if we run this. So we define our variables, we're saying these exists, and now we can say a + b, maybe we want to say a + b, if I can type that in, it's going to return 6, which is 2 + 4. So, now we no longer get that error. We can say typeof a + b and we get a number as well. So now we're saying it exists. It's no longer undefined. So that's why we got that error, it's saying it expected a variable, but since we hadn't defined it for JavaScript it was telling us it doesn't know what we mean; therefore, it's undefined, so very, very interesting. And we aren't just limited to numbers here, we can store all kinds of information in the form of a variable. So, let's say we want to store something like a string, we can do that as well. So we just need to use our variable keyword and we can give it a name. So let's say we want to say my name, I could say my and then Name, which I'm using CAML case here because we can't use spaces in variables names. It's going to treat these as two separate things so we can't have a space in our name, and we want to set it equal to the value we want our variable to mean or what we want that definition to be, and say I just want to put my name in here, I'm going to say Susan and then I can run my code, which will run our code. And then I can say myName or I can type it in my console, and now it's going to return Susan when we say myName, so that's really, really cool. If we wanted to use this with a command like we did before we can say alert myName, and then if we run this, you got it, you can see it's going to say not myName, but Susan because now we've defined it to mean our name, so it's really, really cool and this is a very, very powerful essential building block of JavaScript in addition to understanding types as well. So just to take a look at this, a little review. We have a variable, this is a syntax, which we just saw. So let's say we wanted to create a variable called catNoise and we want it to mean a string of meow. Well, we have our special keyword, var, that indicates we're creating a variable. It triggers or tells JavaScript that anything after this it's going to expect a name. So we give it a name and then we set our name to whatever we want our value to be. It can be a string, it can be a number, it can be a Boolean value, and we can even make it more complicated and set it to an expression. So if we want our catNoise to equal 2 + 4 or something like that, which doesn't really make sense, but we can set it to many things, this is very, very flexible. But we do have some naming rules for our variables. We can't start with a number, we can't have spaces like we saw before, which is why I was using CAML case for the name or meaning, the second word in that name I just capitalized to show that separation between those multiple words, and we can't use reserve words or keywords. So, examples of those are break, case, catch, continue debugger, there's a whole list you can see. We have var, since that means a variable we can't use that. We can't use typeof since that already is defined, it already means something different in JavaScript and you can confuse it, so we have to watch out and not use any of these things that already mean other things as well. Beyond that, we want no punctuation except for an underscore or a dollar sign, and as a last kind of unspoken rule we want our name to mean something, we want it to stand for something to us. So for example, myName means something to us, it's human readable, it's concise, and if we came back a couple of months after writing our code we would still remember what that means. And if someone else was reusing our code or adding to it, chances are they would understand what it means as well. So, that's just a brief introduction to our variable. So, in our next lesson I want to continue using variables and see what other kinds of things we can use them to accomplish in our code.


7. Using Variables 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.


8. Introduction to Control Flow: if/else Statements In this lesson we'll be introduced to control flow or how to make our code run only under certain conditions. Up until this point all of our code has run just from top to bottom and it would always run no matter what, but if this was the case we'd be pretty limited in what we could do. Fortunately there's a way we can make our code only run if certain conditions are met. So, we can use what's called an if/else statement to run our code if a certain condition is first met. So let's take a look at this. Let's say we want to ask a question and print out a response that tells the user if they're right or wrong. So we can first create a variable to store our answer. So let's say we have a variable. We declare it with our variable keyword once again, var. We need to give it a name so let's just call it answer since we're going to be saving an answer, gathering a response. And then we'll store a prompt. So we'll store the response to our question. So let's say our prompt command, and then we need to ask our question in the form of a string. So let's say we ask what the capital of New York City is or New York and we want to gauge and see if they are right. If they answer it correctly we'll give them one response, if not we'll give them another response. So let's say What is the capital of New York? And then the if/else statement we first need to say if, and then we add some parentheses, opening and closing parentheses, and we need to put our condition inside of those parentheses. So if this condition is met we'll do something else. So if our answer, and then we need to ask if it's equal to the correct answer. So up until this point we have been using a single equal sign and in JavaScript this has a special meaning in that it assigns a value to a variable or it sets something equal to something else instead of asking if something is equal to something else, which is a traditional use of an equal sign that we're used to using as we do math and things like that. So we have to ask if something is equal to something else in a different way. And the way we do that is with three equal signs. So instead of one, we just use three. So we're going to be asking if our answer is equal to, and then we'll put in our capital. So we have Albany, which is the capital of New York. And then to run the code only if this condition is met we need some curly brackets here. So we open them right after our condition and then we close them right here. And then we're going to put everything inside of here that we want to happen if our answer is equal to Albany. So we want to say if it is correct we want to alert the user that they're correct. So we want to alert You are correct, and then to run our statement here we need our semicolon. And then we need to provide an alternative in case our condition is not met. So we have if the answer is Albany we'll tell them they're correct, and we can use the else keyword, so we'll say else do something different. So we have if and then our condition and then whatever we want to happen inside of our first set of curly brackets, then we have our else, and if you find it easier to read this we can also just press Enter to bring this onto a new line, else do something different. So we can say otherwise, let's say Sorry, and then maybe we want it to show them the response again, sorry + we need our space, and then our answer, another space, and then the rest of our message, Sorry that is not correct. And then we need our semicolon. So let's take a look. I know this syntax is different than what we've been using so far, but let's take a look and see what this does. So we're going to run this. It's going to ask us what the capital of New York is. So we can say, maybe we guess, and we're like oh, New York City. And we press OK. And it says, Sorry, New York City is not correct. So, how cool is this? We now have our code responding to a scenario. We've built a little quiz here and now we have customized response depending on what answer we type in. I think this is just so cool. So let's go ahead and run this again. We have what is the capital of New York? And let's say we get our answer right this time, we say it's Albany. And then we have our response saying, You are correct. And maybe we want to add an exclamation point in here so it's a little bit more excited about the fact that we got it right. So we can press OK. So you can see here that we can have multiple things happening. We can start to have a customized response or code that only runs if something else happens first. So we're no longer just running things from top to bottom no matter what happens. Now we can only execute certain code if something else happens first. So this is where our code starts to be incredibly powerful and things start to get really fun. So, in our next lesson I want to continue using if/else statements and learn how to check and see if multiple conditions have been met.


9. 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.


10. Control Flow and Comparison Operators In this lesson we will learn how to have more control over our conditions by using comparison operators. In our last lesson we ended in an exercise to calculate to see whether a number is divisible by 3 or 5 and alert a different word under each condition. Otherwise, it would just print our number out to our console, but one issue with our code so far is if our number is 0, which is not divisible by 3 or 5, it's still going to alert fizz or buzz. So just to kind of test this out I'm going to comment out our randomNumber here and this brings up another good point. We can comment out a single line of code, so it's not run, by using two forward slashes. So we can press two forward slashes and then you can see our code is turning gray and that it's no longer running. So I want to say var randomNumber and set it equal to 0 so we can test our code under this condition and see what's going to happen. So if we run this you can see we get fizz. So from this we can see we're not having exactly the right thing happening. So I'm going to go ahead comment out our 0 and bring back in our randomNumber variable. So how can we fix our code so 0 isn't going to alert fizz or buzz? Well we can use what's called comparison operators to check for additional conditions in our code. So we want to check for an additional condition. Let's start with our first condition if it's divisible by 3, and we say if it's divisible by 3 and another condition has been met. And the way that we can do that in JavaScript is by using two ampersands. So we can say if randomNumber is divisible by 3 and this other condition. So what we want to check for here is that our number is not equal to 0. So we haven't learned how to do this yet. So we have an operator, a special operator, that checks whether something is not equal to something else. So we want to target our variable, so we want to say randomNumber is not equal to, and the way we do that is with an exclamation point and an equal. So we want to say it's not equal to 0. So this is kind of confusing at first, but we really have to start to retrain our brain how we're thinking and to read things how it's going to evaluate in our code. So just to go over this once again, we're going to say if our randomNumber is divisible by 3 and our randomNumber is not 0, then we're going to alert fizz. So we want to do the same thing for our second condition. So we also want to say, and if our randomNumber is not equal to 0, then we can alert buzz. So only if both of these conditions are met then will we do this. So let's go ahead and test this with 0 again to see if we fixed this issue. So, let's run this and you can see now we're just getting 0 echoed out to our console, it's no longer alerting fizz or buzz, so awesome. We've fulfilled that condition that if our randomNumber is 0 it's not going to return any of these answers. So I'm going to comment this back out again and we have an additional condition now that we want to meet. We are kind of building in the complexity of our program here. So we're going to say if a number is divisible by 3 and 5 alert fizzbuzz. So we're going to add an additional condition here. So right under this we're going to say, else if, and then our additional condition. So we want to check and see if our randomNumber is divisible by 3 and it's also divisible by 5. So we want to see if our randomNumber is also divisible by 5. And then we're going to alert something different, we're going to say fizzbuzz, so fizzbuzz. Then we just need our semicolon, but in our current program we're never going to get fizzbuzz because our range is only between 0 and 5. So now we're going to choose a random number between 0 and 15, that way we have a possibility of this condition being met. So we're going to multiply this by 15 instead of 5. So, let's go ahead and run this. So we get fizz, we get buzz, fizz, and we can continue to run this or we can just set our randomNumber to 15 to see if we're going to get fizzbuzz and our code is going to work. So I'm going to comment this back out and then we'll set our randomNumber to equal 15 and we should get fizzbuzz. So let's go ahead and run this. And we can see we get fizz. And so we're getting the exact same problem where we were getting 0 in that we first need to make sure that condition isn't met in our first if statement here because otherwise we're never going to get our last statement. So clearly we need to evaluate this a little bit differently in our code. So, right below here, well let's go ahead and keep what we have so far, but start thinking about how we can improve this so we don't get that result. So, we're going to start again with our randomNumber and see if it's divisible by 3, so if it's divisible by 3, and it's not 0. So if it's not equal to 0 then we're going to have some conditions. So just from the start we want to also check if it's divisible by 3 and if it's also divisible by 5 so we can get fizzbuzz. So what we can do here is we can add an additional if statement inside of another if statement. So let's take a look at what this looks like. We can say if our randomNumber is also divisible by 5, then we'll alert our fizzbuzz, otherwise, we're going to alert just fizz. So otherwise else just alert fizz because it's not divisible by both. So this is going to be kind of confusing at first, but we can really start to slowly build up the complexity of our code by testing it under a certain condition and really making sure it's doing exactly what we want it to. So we have our first condition, so let's go ahead and add our second condition. So we want to say, else if our randomNumber is divisible by 5, and then we still want to check if it's not 0, so and our randomNumber is not equal to 0 we want to alert buzz, otherwise, we want to just log our number to the console. So we can say console.log and then our random number. So now let's go ahead and test this. We're going to go ahead and delete our original code and evaluate it and see if 15 will now return fizzbuzz instead of fizz. So let's go ahead and run this, and you can see we get fizzbuzz. So, this is awesome. You can see that even though it took us awhile to get to this kind of end result and to get to something that works just by slowly coming in here and testing this under certain conditions, we can make sure that we are getting the results we intend and we're not accidentally letting things kind of slide through like we were before. So we have to be creative and build on the complexity using the smaller parts that we know. I know this isn't a very exciting example, this isn't very fun to do something, an exercise like fizzbuzz, but it really can help us retrain our brain to think in a way that we can translate our thoughts into code. So, now that we've learned about control flow and how we can use and, and not equals, and also use if/else statements inside of another if statement to improve what we're checking for, in our next lesson we're going to be putting it all together and doing something a little bit more fun by creating a zombie text adventure game.


11. 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.


12. Volume 1 Assignment: Choose Your Own Adventure In this lesson we'll get our volume 1 assignment so we can apply the skills we've learned so far in this course. In our last lesson we applied everything we've learned so far in this course to build our own zombie text adventure game. So for your volume 1 assignment I challenge you to not only create an adventure game of your own, but to have fun doing so, and to practice using all of the little pieces of code we've learned how to use, which I've just created this little list to remind you of the different things we've used throughout this course. It's essential to keep on practicing because we really have to retrain our brain to think in a new way when we learn something like JavaScript. So keep up the good work and have fun creating a game of your own using everything we've learned so far. I hope you've enjoyed Quick Start to JavaScript, Volume 1, and I'll see you around for Volume 2.