Possums: A Tribute

Javascript Tutorial: If Statements

Introduction

Conditional statements, or decision making statements, perform a certain set of statements depending on certain criteria. The most common of these is the if statement. Just like it sounds, if statements perform tasks based on "if" a condition is met. The typical if statement at its most basic is formatted like this:

if (condition) {
    /* This section is the command block. If the condition 
    is true, the statements here are performed */
}

Conditions can be anything. If a certain choice is made by user input, the time of day, if a word is more or less than a certain length. Here are some examples:

Greeting

The code:

if (name != "") { // condition: If "name" is NOT empty:
        message.innerHTML // refers to contents of the message box
        = "Hello, " + name + "!"; // Displays "Hello, *name*!"
    }

This is great! But what happens when someone presses the button without entering a name? Well, nothing, because the condition isn't met. But if we want something to happen if the condition isn't met, we can use an else statement.

Now you can see what appears when no name is entered. The code:

if (name != "") { 
    message.innerHTML 
    = "Hello, " + name + "!"; 
}

// (The code above remains the same)
        
else { // Here, the previous condition is false (the name value is empty)
     message.innerHTML // refers to contents of the message box
     = "Hello, stranger!"; // Displays "Hello, stranger!"
}

Excellent! Now all of our bases are covered. We have something for both conditions: when the name is empty, and when it is not. But what if we have a different situation where we want more than one condition?

Ticket Prices

When the if statement condition is false, and we want to test an another condition after that before the else statement, we can use and else if statement! In fact, you can use multiple else if statements.

Say we want a user to enter their age, and then automatically display their ticket price based on their age group. Take the following ticket prices:

• Child Price (Under 10) : $10
• Regular Price (10 - 64) : $15
• Senior Price (65 +) : $12

We can start with an if statement.

if (age < 10) { // checks if number is under 10. IF true, executes statements:
    ticketPrice = 10; // sets ticket price to 10
}

Then we add the else if statement. This statement is only performed after we know the age is not under 10.

else if (age < 65) { // now it checks if age is under 65. If so:
    ticketPrice = 15; // sets ticket price to 15
}

Finally, we include the else statement. It assumes the age is above 65, since the program has already checked whether or not it is under 10 or under 65, and found both to be false.

else { // determines that the age is above 65
    ticketPrice = 12; // sets ticket price to 12
}

Finally, we put all the code together.

if (age < 10) { // checks if number is under 10. IF true, executes statements:
    ticketPrice = 10; // sets ticket price to 10
}
    
else if (age < 65) { // now it checks if age is under 65. If so:
    ticketPrice = 15; // sets ticket price to 15
}           
            
else { // determines that the age is above 65
    ticketPrice = 12; // sets ticket price to 12
}    

var message = "Your ticket price is $" + ticketPrice + "."; // sets up a message template variable
         
demo.innerHTML = message; // displays message

When we nest this in a function, we can make it act when a user submits their age. Try it out below!

Conclusion