Question:

What is an else statement?

Answer:

An else statement directly follows an if statement or else if statement, and provides a means to execute code only if previous if/else if statements are all false. Consider the following examples:

    // Example 1:
    if (CustomerAge >= 55) {
        document.write("Dude - you're old!");
    }
    document.write("<br />Rest of the code...");
    
    // Example 2:
    if (CustomerAge >= 55) {
        document.write("Dude - you're old!");
    }
    else {
        document.write("You're not old.");
    }
    document.write("<br />Rest of the code...");
    
    // Example 3:
    if (CustomerAge >= 55) {
        document.write("Dude - you're old!");
    }
    else if (CustomerAge > 35) {
        document.write("You're middle age.");
    }
    else if (CustomerAge > 19) {
        document.write("You're young.");
    }
    document.write("<br />Rest of the code...");
    
    // Example 4:
    if (CustomerAge >= 55) {
        document.write("Dude - you're old!");
    }
    else if (CustomerAge > 35) {
        document.write("You're middle age.");
    }
    else if (CustomerAge > 19) {
        document.write("You're young.");
    }
    else {
        document.write("Dude - you're too young!");
    }
    document.write("<br />Rest of the code...");
    

In every case, "Rest of the code..." writes to the document, because that statement is unaffected by if statements.

In example 1, we may or may not see: "Dude - you're old!".

In example 2, we will see either: "Dude - you're old!", or "You're not old.". We will never see neither, and we will never see both, we will ALWAYS see one or the other.

In example 3, we may or may not see any text inside the if/else if statements.

In example 4, we will ALWAYS see the text for ONE AND ONLY ONE of the if/else if/else statements.

Note:

You cannot follow an else statement by and else if statement. else signifies the end of an if/else if/else block of code. Any code that follows is independent of that if... statement. You may start another if statement after else, but the new if statement will not be connected in any way to the previous if... statement.

Question:

Can I have independent statements between if/else if/else statements?

Answer:

No. The following example has incorrect syntax:

    if (CustomerAge >= 55) {
        document.write("Dude - you're old!");
    }
    else if (CustomerAge > 35) {
        document.write("You're middle age.");
    }
    // cannot have unrelated code between if statement and else statement
    document.write("This breaks the if/else if/else block of code.");
    else if (CustomerAge > 19) {
        document.write("You're young.");
    }
    else {
        document.write("Dude - you're too young!");
    }
    

Question:

Can I follow an if statement with another if statement?

Answer:

Yes, the second if statement will be independent of the first. If an if statement is not directly followed by else if and/or else statements, code that follows is not connected to that if statement in any way. In the following example, the else statement belongs to the 2nd if statement. Therefore, we may or may not see "Member", but will always see either "Gold" or "Not Gold".

    if (CustomerIsMember == true) {
        document.write("Member");
    }
    if (CustomerIsGold == true) {
        document.write("Gold");
    }
    else {
        document.write("Not Gold");
    }
    

Finally:

If if, or else if, or else statements only have one line of code, you do not need to use curly-braces. But it doesn't hurt and may be a good idea to use them anyway. You must use curly-braces if more than one statement belongs to an if statement. The previous code could be written as:

    if (CustomerIsMember == true)
        document.write("Member");
    if (CustomerIsGold == true)
        document.write("Gold");
    else
        document.write("Not Gold");
    

if statements with more than one statement must use curly-braces:

    // correct
    if (CustomerIsMember == true) {
        document.write("Member");
        document.write(" if statement is true.");
    }
    document.write("<br />Rest of the code...");

    // While syntax is not broken, this code is not correct.
    // " if statement is true." will execute every time,
    // even when if statement is false.
    if (CustomerIsMember == true)
        document.write("Member");
        document.write(" if statement is true.");
    document.write("<br />Rest of the code...");
    

Note:

Always indent statements that belong to a parent statement. It is not clear in the following code that the document writes are not independent statements and instead belong to if statements.

    if (CustomerIsMember == true)
    document.write("Member");
    if (CustomerIsGold == true)
    document.write("Gold");
    else
    document.write("Not Gold");
    

Checkpoint

Questions 4.3

1. If I write an else statement, must it immediately follow an if statement or an else if statement?

Exercise 4.3

1. Declare 3 variable: adult = 18, toddler = 3, custAge, ticketPrice
2. Assign 18 to custAge
3. Write an if statement:
   • if custAge is less than or equal to toddler, then ticketPrice = 0
4. Write an else if statement:
   • else if custAge is less than adult, then ticketPrice = 9.50
5. Write an else statement:
   • else, then ticketPrice = 12.50

web developer toolbox 4.3

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
• href should be: javascript/decisions_else.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: decisions_else.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 statements
• Update the comments section:
  • <dt>else</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.3
• Below your code for Exercise 4.3, 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