Let’s Code: If/Else

Let's Code Header Post #2

Welcome back to Let’s Code. This week, we will be taking a look at the JavaScript if/else command.

But first, let’s get a quick review on what we learned last week: variables. There are three different types of variables, Strings, Numbers, and Booleans. To create a new variable, we type:

 

var newString = “This is a String!”;

var newNumber = 21;

var newBoolean = true;

 

To display a variable’s value using a pop-up box, we type:

 

var exampleVariable = “Hello World!”;

var display = alert(exampleVariable);

 

And to change a variable’s value, we just type:

 

var challenge = “Was this a challenge?”;

challenge = “No it wasn’t.”;

 

So, to change a variable’s value, you just type the name of the variable, with an equal sign, and then the new value. (Note, you can type “var” again before the variable’s name, but it is not necessary.)

 

Now, let’s talk about if/else commands. If/else commands basically sets up a condition you want the computer to check for. If the condition is true, then do this, else, do that. An if/else commands looks like this:

 

var test = 5;

if (test === 5) {

var display = alert(“The variable equals 5!”);

}

else {

var display = alert(“The variable does not equal 5!”);

}

 

This is a lot to take in at once, so lets break it down.

  1. First, we created a variable named test that stores the value 5.

  2. Then we begin our if/else command by typing

if (test === 5)

 

In this command, “if” begins the command and the parentheses set the condition the computer checks for. In the condition (test === 5), it is telling the computer that if the variable test equals 5, then do this. In Javascript, to have the computer check if a variable equals something, you type three equals signs (===), as typing only one tells the computer to change the value.

  1. Then we typed what the computer is to do if the condition is true. The directions for the computer is written between the curly brackets. A semicolon is not necessary after the brackets.

if (test ===5) {

var display = alert(“The variable equals 5!”);

}

 

  1. Then, the else command is pretty much typed in a similar fashion except it doesn’t need a condition. The computer will perform what is inside the “else” command’s curly brackets when the “if” command’s condition is false.

 

Note: Variables between curly brackets are considered “local”, meaning they only exist between the curly brackets, while variables not between curly brackets are considered “global”, meaning they exist throughout all the code.

 

Now that we have learned how to create if/else commands, let’s learn a simple way to get input from people. After all, games are all about interactions with the players. Using the code:

 

var input = prompt(“What’s your name?”);

 

we will be creating a pop-up box which will ask the player for their name and give them a text field to type their response. This is is very similar to the “alert” command, except that the command is a prompt, and not an alert.

An Example of using a “prompt”:

 

var userName = prompt(“What’s your name?”);

var display = alert(userName);

 

So, today we learned how to create if/else commands and how to get input from players. With this knowledge, you could already create a very simple game. See what you can make at jsfiddle or check out this example to give you some ideas. Next time, we will look at making a simple coin toss game.

 

Advice: You can put multiple if/else commands within each other like this.


Challenge of the week: Try and create your own short game. If you make an account at jsfiddle, you can save your work and share it with friends and family.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s