Event Objects and Conditional Code

Recap

• in-class code

Housekeeping

• Achievement 4: If This, Then That

---

1. Conditional code blocks

The if/else statement is used to conditionally run code when an expression (code that returns a value) is true.

Materials

• Boolean values
• Making decisions in your code - conditionals
• Comparison operators

Slides

Demo: Greeter with language support

• Greeter starter code

2. Forms: Event.preventDefault()

• submit Event
• Event.preventDefault()
• <select>: The HTML Select element

Demo: Tip Calculator with <select> menu and Event.preventDefault()

• JS Activity: Tip Calculator with drop down menu
• starter code

Breakout Activity

In pairs, take the form created in the demo, using if, else if and/or else statements, set the tipRate based on the service level selected in the menu.

• Note: The value of the select menu is stored in the form.service.value property.

3. Equality and Truthiness

Coercion in untyped languages (such as Javascript) produces a concept known as "Truthiness": some values are more equal than others, based on their value type.

Materials

• Equality comparisons and sameness

---

Lab Time

• JS Activity: Refactor Adding Machine to create Simple Calculator
• JS Activity: Tip Calculator with drop down menu
• Question: Why does 3 > 2 > 1 evaluate to false?

---

Prep

Forms

• Event.preventDefault()
• submit Event
• <select>: The HTML Select element

Conditional Code

• Boolean values
• Making decisions in your code - conditionals
• Equality comparisons and sameness
• Comparison operators