Question:

What is an if statement?

Answer:

An if statement is a method for your code to decide to perform, or not, certain statements. For example: If customer is a senior citizen, discount the price.

Question:

How do I write an if statement?

Answer:

The syntax for writing an if statement is the keyword if, followed by parentheses, followed by open and close curly-braces. Inside the parentheses is an expression that evaluates to true or false - basically: 0, null, and undefined are false, and anything else is true.

    if (true)
    {
        // insert code here
    }

There is no semicolon ; after the parentheses or closing curly-brace. Putting a ; after the parentheses will break the if statement. The reason is because a ; after the parentheses would detach the code inside the curly-braces from if statement - in other words, the ; would signify the end of the if statement, without including the curly braces.

Question:

How does an if statement work?

Answer:

If the expression inside the parentheses is true, the code inside the curly-braces will execute. If false, the code inside the curly-braces will not execute. In either case, all code after the closing curly-brace will execute.

Question:

How do I write a true/false expression to place inside the parentheses?

Answer:

Use the comparison operators:

    ==   ===   !=   !==   <   >   <=   >=

Example:

    // discount price by $2 for senior citizen
    if (CustomerAge >= 55)
    {
        Price -= 2.00;
    }
    document.write("This code will always execute.");

Question:

Can I write an if statement inside another if statement?

Answer:

Yes, that is called nesting. The inner if statement is a nested if statement. For example:

    // discount price by $2 for senior citizen
    if (CustomerAge >= 55)
    {
        Price -= 2.00;
        // discount price by $2.50 is customer also has a coupon
        if (HasCoupon === true)
        {
            Price -= 2.50;
        }
    }

Caution:

BE VERY CAREFUL TO USE === AND NOT =.

Question:

What is the difference between === and ==?

Answer:

=== compares data AND data type, == only compares data. For example:

    var var1 = 5, var2 = 5, var3 = "5";
    var1 == var2    // true
    var1 == var3    // true
    var1 === var2   // true
    var1 === var3   // false

Question:

Can I nest more than one if statement?

Answer:

Yes, you can have multiple levels of nesting, as well as multiple nested if statements. For example:

    // discount price by $2 for senior citizen
    if (CustomerAge >= 55)
    {
        Price -= 2.00;
        // discount price by $2.50 is customer also has a coupon
        if (HasCoupon === true)
        {
            Price -= 2.50;
        }
        // discount price by $3 if customer is club member
        if (ClubMember === true)
        {
            Price -= 3.00;
            // discount price additional $2 if Silver membership
            if (SilverMember === true)
            {
                Price -= 2.00;
            }
            // discount price additional $3 if Gold membership
            if (GoldMember === true)
            {
                Price -= 3.00;
            }
        }
    }

Checkpoint

Questions 4.1

1. If an if expression is true, will code inside { } execute?
2. If an if expression is false, will code inside { } execute?
3. Can you nest if statement?
4. What is the difference between === and ==?

Exercise 4.1

1. Declare 7 variables: var1 = 5, var2 = 5, var3 = "5", results1, results2, results3, results4
2. Write 4 if statements:
   • if var1 == var2, assign true to results1
   • if var1 == var3, assign true to results2
   • if var1 === var2, assign true to results3
   • if var1 === var3, assign true to results4

web developer toolbox 4.1

Add a link to the JavaScript menu

• Open menu_js.html in your favorite editor
• (Create a new dt tag to) add a category: Decisions
• (Create a new a tag inside a new dd tag to) add a link: if
• href should be: javascript/decisions_if.html

Add a new JavaScript page

• In the javascript folder, open aaa_template.html in your favorite editor, and save-as: decisions_if.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: if statements
• Update the comments section:
  • <dt>if</dt>
  • <dd>diference between === and ==</dd>
• Insert html inside the wxHtmlResults div:
  • <p id="p1"></p>
  • <p id="p2"></p>
  • <p id="p3"></p>
  • <p id="p4"></p>
  • <p id="p5"></p>

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

• Complete the instructions for Exercise 4.1
• Inside { } of the first if statement, assign the value of results1 to the innerHTML of p1 i.e.:
  • {
  • results1 = true;
  • document.getElementById("p1").innerHTML = results1;
  • }
• Inside { } of the 2nd if statement, assign the value of results2 to the innerHTML of p2
• Inside { } of the 3rd if statement, assign the value of results3 to the innerHTML of p3
• Inside { } of the 4th if statement, assign the value of results4 to the innerHTML of p4
• Below your code for Exercise 4.1, assign the value of results4 to the innerHTML of p5

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

Click on the Run javascript button to test your code