Conditionals | Decision making in Code

Morning Activity: Interactivity Treasure Hunt (15 minutes)

• Find 10 examples of interactivity on web pages.
• Things to look for:
  • anything with a button
  • sliders
  • carousels
  • things where the cursor is tracked

1. Conditionals

Key Takeaways

• Conditional statements are based in boolean truthy/falsy options
• an if block doesn’t need and else block
  • the else block is generally used when there is an else if block
• JS has equality and strict equality
• any value can be converted to a boolean value

Error Handling and Fail Fast with if statements

• inside your functions, use simple if statements to check variable types and other conditions and return nothing.
• This is often used with expressions like:
  • if (isNaN(value)) { return } or if (inputValue.length <= 0) { return}

Switch Statements

• An alternative to if/else conditionals are switch statements
• These tend to be lighter and easier to read
• Here is an article that talks about the differences between switch and if else

Ternary Operators

Another way that you can check conditionals is ternary operators

• Thes are great for simple in line functions

• Unlike an if statement, an else condition is required

• they are often used to check null values

  • ie:

  const greeting = (person) => {
    const name = person ? person.name : 'stranger';
    return `Hello ${name}`
  }

Think it out activity: pseudocode conditional logic

• Pick one of the tasks from the end of day activity list to pseudo code
• Plan out your logic as we’ve been practicing
  • identify the objective
  • identify variables
  • outline the logic
  • identify unknowns and uncertains
  • research and test

2. Javascript and Forms

Key Takeaways

• Use the form element if:
  • you’re submitting data to a server
  • the controls are triggered by a submit button
• extra info on button type=submit vs input type=submit.
• event.preventDefault() is important for when the page shouldn’t refresh on submit