Conditionals: If

In this video, we're going to look at one of the fundamental control structures, the if statement. An if statement is what you use to branch in your code, depending on certain conditions. So, what we're going to do first is assign a variable based on a response to a question. So, here's the piece of code, I'm going to assign this variable answer to the result of this method of the global window object. It's called confirm, and watch what happens when I execute this. So, you can see that this string that I passed into the confirm function, it's rendered here.

And based on which of these two buttons I click, I'm going to get a different value in the answer variable. So, if I click OK, and then look at what answer is, I get true. I'm going to run this again, if I click Cancel and look at answer, I get false. So, in the course of a piece of code, you might want to ask the user for an answer to something. And this window.confirm method is a way that you could do that. Having retrieved an answer, now I need to take some action based on what the user said.

So, let's extend this block of code a little bit, I'm going to paste this in to save a little bit of typing. So, I'm going to do the same thing I'm going to assign the variable answer to the result of this question. And now here's my if statement. If and then in parenthesis I put my condition or conditions. If answer is true then I'll just log a message to the console that says you said true. And that's it, I'm going to execute this and here we go. I get asked the question and if I click OK, the answer was true so the message gets logged here in the console. Let's execute that code again.

Now if I click Cancel, nothing happens. So, you can see that by asking this question in the form of an if statement, I got to execute this code or not. Now this is really, really useful and you'll see this all the time. So, let's extend this to take a different action based on whether the answer was true, or it was false. So, I'm going to bring this code up again and now I'm going to add an else statement.

It looks just like an if statement except now, what happens is, if this condition is true, this code gets executed. And if anything else happens, whatever appears in here will be executed. So, let's say console.log you said something else. And I'll execute this, first I'll click OK. And there we go, you said true. Execute the code again, click Cancel. And that means I said something else. So, this is how you get to branch in your code and do certain things under certain conditions and do other stuff in other conditions.

If statements can be extended even further. Let's take a look at another block of code. First I'll clear the console, now here's a longer block. This time we're using window.prompt which is going to prompt me using a text field. So, I'm instructing the user to type yes, no, or maybe then click OK. And then I'm going to take some various actions based on what the user said. So first, let's just execute this code and see what it does. I get this prompt, and I have a text field, so here are my instructions.

Type Yes, No or Maybe then click OK. So, I will type Yes first and click OK. And here we go, you said yes. We'll execute it one more time and I'll try Maybe. You said maybe, I don't know what to make of that. Okay and then we'll execute it one more time. And I'm just going to type, Cookie, and it returns, You rebel you. Okay now that we've done this, let's take a look at the code and break it down. So, I'm going to switch over to a text editor with syntax highlighting to make this easier to see. So, here's that code, first here's my window.prompt method with a question. And now I've added to my if statement a couple of else if's. So, we're branching in various different ways depending on what the user said. And I'll add a little bit of white space to make this even clearer. So, my first statement is an if.

If this answer is exactly yes, log this message and then nothing else that follows will execute. But if this fails, I go down to the next condition, which is specified using else if, like this. So, this is just a subsequent if statement, that will only execute if the first one turns out not to be true. If answer was not yes, we go to the next one, and we ask, is answer maybe? And if so, execute the block contained in these curly braces. If that's not true, then we jump down to the next one, and we ask, was the answer exactly no with an else if.

And if so, execute whatever is in the following curly braces. And if that isn't true, we have a final condition else. If all of these other ones fail, we end up in this code block and we get the answer you rebel you. Just remember this is sort of cascading down through each of these subsequent conditions. And if I strip any of these out, it wont be taken into account anymore. So, I asked for yes, no or maybe, and I want it to respond specifically to each of those condition. But if I decide that I don't need to specify maybe anymore I could simply remove this condition by removing everything in those curly braces like this.

And then I will only check specificallly for yes or no with specific responses for each of those. And then anything else whatever else the person types would go into the else. So, of course, you can have multiple lines in here, you can have entire blocks. You can nest if statements within other if statements, like this. And have entire blocks, and all kinds of branching inside these if statements. And of course, the conditions in these parenthesis don't have to be a simple comparison, you can add in logical operators.

Now of course, this one wouldn't be terribly good because the answer is never going to be both of these at the same time. So instead, you could take action based on if the user said yes or no, and then do something in here. The point is that anything that appears in these parentheses is the condition under which the following curly brace delimited block will execute. So, whatever appears in here, however long it is. And then, if not, you'll jump down to this next one, specified by an else if, and then your default condition is else. And you can leave off the default condition.

So, if this condition ends up being true, do all this stuff, and then specifically check for another condition, and then, have no default action. So, you only do stuff, if, answer is yes, or down here, if answer is no. So, you can see there's a lot of power in being able to branch off and do different things in your code based on different things, whether its input from the user or conditions that you created in your own code. But that is how you can use if statements to execute different code under different conditions.

Resume Transcript Auto-Scroll

Author

Released

11/21/2012

JavaScript is the lingua franca of the web, but before using it to create dynamic websites, you need to understand how it works. In this workshop trainer and developer Joe Chellman explores the syntax behind the JavaScript language. He shows how to "speak" JavaScript by gaining an understanding of variables, types, objects, arrays, operators, control structures, loops, and functions, through a series of hands-on examples that put these ideas into action. After completing this course, most developers will understand the core syntax of JavaScript and how this scripting language works to build powerful and complex functionality on the web.

Topics include:

Enabling Firebug and web inspectors

Using a text editor

Declaring and assigning a variable

Booleans and the quest for truth

Working with objects and arrays

Using operators and control structures

Iterating with loops

Objects, references, and functions

Understanding variable scope

Skill Level Beginner

2h 55m

Duration

1,102,483

Views

Show MoreShow Less

Q: In "How to enable Firebug and web inspectors," at the Chrome Canary
part, the author mentions going to the View menu, and then Developer. My Canary
has no menu bar. The author uses a Mac, whereas I have Windows. How
do I get to the same place?

A: Click the menu button at the top right of Chrome, select More Tools, and then choose Developer Tools.