Conditional statements and comparison operators

Homework

1. Primitive values
   • Boolean values
2. Conditional Statements
   • Making decisions in your code - conditionals
   • Comparison operators
   • Equality comparisons and sameness
3. Logical operators
   • Logical NOT (!)
4. Forms
   • <select>: The HTML Select element

---

Morning reflection

Housekeeping

1. Assignment 1: classList Toggle
2. Poll: Which Gist format is better?
   • One index.html page: Adding Machine
   • Codepen style: Hiding and Element

---

1. Equality and Truthiness

Learning Objectives

• Define the boolean value type.
  • Identify a value’s type with the typeof.
  • Convert a value to a boolean value (¹).
• Define and demonstrate comparison operators.
  • Define truthiness.
  • Demonstrate the difference between equal and strict equal (identical).
• Explore the role of coercion with comparison operations.

Terminology

Boolean values

true or false (there is no maybe).

Equality (==)

When two values are equal after they are coerced to the same type (if necessary).

Strict Equality (===)

When two values are equal and they are of the same value type.

Falsy

A value that is considered false when converted to a Boolean value.

Truthy

A value that is considered true when converted to a Boolean value.

Materials

• Console!

Key Takeaways

• Use === when testing for equality (it’s safer). Use == once you understand truthiness.
• Any expression (code than returns a value) can be coerced to a boolean value.

• Some caveats when using typeof:

  Notice: typeof is one of the oldest operators in JS. So old, it doesn’t use camel case.

  Warning: typeof also has one of the oldest bugs in Javascript: typeof null returns object.

---

2. Conditional code blocks

Learning Objectives

• Explore the role of pseudo-code in development.
• Review @media queries and their relationship to Boolean values.
• Demonstrate if, else and else if.

Materials

• Review: CPNT 260 Day 5 - Media queries
• Adding Machine answer from yesterday

Key Takeaways

• A common use case: checking if a variable is initialized with ²:

  if (typeof variable !== 'undefined') {
    // the variable is defined
  }
  

  Notice: typeof has the added benefit of not throwing a “Not Defined” error if the “variable” hasn’t been declared.

---

Open lab-time

Activities

1. Try building a Greet form in HTML that uses the same logic as the sample code created in class.
2. Test your skills: Conditionals

Deep dives

• Read: Operator Overview on O’Reilly. It’s “The Definitive Guide” to operators.
  • Teach Tony: What the heck does “Shift left” and “Shift right with sign/zero extension” do?

Problem

• Why does this expression evaluate to false?

    3 > 2 > 1
  

  Hint: Search “js operator associatvity”. Associativity is the order (left-to-right/right-to-left) that operators of the same precedence are performed.

---

Tony’s goals for Lab-Time

• Create a dynamic 2x2 Grid that follows the cursor?

---

Dailies

• Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.