Question:

What is an else if statement?

Answer:

An else if statement directly follows an if statement or other else if statement, and provides a means to execute code if the previous if/else if statement was false. The previous discussion showed an example where if a customer is a senior citizen, code inside the curly braces executed, but nothing special happened if a customer is not a senior citizen. As mentioned earlier, all code after the closing curly-brace executes, regardless whether the customer is a senior citizen or not. But there may be other customers who should receive a discount. For example:

    // discount price by $2 for senior citizen
    if (CustomerAge >= 55) {
        Price -= 2.00;
    }
    // discount price by $1 for pre-teens
    else if (CustomerAge > 5 && CustomerAge < 13) {
        Price -= 1.00;
    }
    // small children get in free
    else if (CustomerAge <= 5) {
        Price = 0;
    }
    document.write("This code will always execute.");
    

Notice the middle statement combines 2 expressions inside the (). Expressions inside () can be combined with && (and) and || (or). Ultimately, the total expression inside () evaluates to true or false. If I had used || instead of &&, everybody would get the pre-teen discount, because everybody is either younger than 13 or older than 5. Using &&, a customer has to be both younger than 13 and older than 5, in other words, between 5 and 13 to get the pre-teen discount.

When using &&, both left and right side must be true for the expression to be true, otherwise the expression is false. When using ||, only one side needs to be true for the expression to be true. Only when both sides are false will the expression be false.

Expressions inside () may be as complicated as needed. Keep in mind, if an expression becomes too complicated to decipher (by humans, not the computer), it may be better to use nested if statements instead.

Complex expressions can be controlled by grouping expressions inside nested (). As mentioned in a previous lecture, code inside () will execute first. The following examples provide different results:

    // discount price by $2 for seniors and pre-teens
    if ( CustomerAge >= 55 || (CustomerAge > 5 && CustomerAge < 13) ) {
        Price -= 2.00;
    }
    
    // this does not provide the correct results
    if ( (CustomerAge >= 55 || CustomerAge > 5) && CustomerAge < 13 ) {
        Price -= 2.00;
    }
    

Seniors would never get a discount with the 2nd example, because no one can be both older than 54 and younger than 13 at the same time. Pre-teens, however, would get their discount.

Finally, notice that each expression is a complete expression. The following example has incorrect syntax:

    // the true/false expression has incorrect syntax
    if (CustomerAge > 5 && < 13) {
        Price -= 1.00;
    }
    

Checkpoint

Questions 4.2

1. If I write an else if statement, must it immediately follow an if statement or another else if statement?
2. Can if / else if expressions perform more than one comparisons?

Exercise 4.2

1. Declare 3 variable: adult = 18, todler = 3, custAge, ticketPrice
2. Assign 15 to custAge, and 12.50 to ticketPrice
3. Write an if statement:
   • if custAge is less than or equal to todler, then ticketPrice = 0
4. Write an else if statement:
   • else if custAge is less than adult, then ticketPrice = 9.50
5. What would be the value of ticketPrice if the above if / else if logic were reversed and custAge was 2?

web developer toolbox 4.2

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• Below your Decisions category, (create a new a tag inside a new dd tag to) add a link: else if
• href should be: javascript/decisions_elseif.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: decisions_elseif.html
• Below the comment "edit category name", change text from template to Decisions
• Below the comment "edit publish and update dates", change both dates to the current date

Update the new page

• Below the comment "edit company name, page title, and page description", change:
  • Company Name to: your name
  • Template to: Decisions
  • ...template to: else if statements
• Update the comments section:
  • <dt>else if</dt>
  • <dd>Must immediately follow if or else if statement</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="p1"></p>

Add JavaScript below the line of asterisks following the text:
** BEGIN DEVELOPER JAVASCRIPT SECTION

• Complete the instructions for Exercise 4.2
• Below your code for Exercise 4.2, assign the value of ticketPrice to the innerHTML of p1

Open menu_js.html in your browser and click on your new link

Click on the Run javascript button to test your code