Control_Flow_pt1.md

Control Flow in JavaScript, Part 1: Understanding Conditional Statements

Duration: 2 hrs

📜 Slides

Link to Slides

🎯 Learning Objectives

By the end of this lesson, participants will be able to:

• 🔄 Understand and apply comparison operators (==, !=, <, >, <=, >=) in JavaScript.
• 🧠 Implement basic conditional statements (if, else, else if) in JavaScript, applying them in various scenarios.

🧠 Lesson

Warmup: App Navigation Analysis

Prompt:
"Choose an app on your phone and think about the different decisions you make as you navigate from one page to another. How do these decisions change the flow of the app? For example, consider what happens when you select different options in a social media app. How might these decisions be represented in code using variables and data types?"

Goals of the Activity:

1. Encourage Practical Application: This exercise helps participants relate programming concepts to real-world applications they are familiar with.
2. Connect to Control Flow: Understanding the decision-making process in apps sets the stage for learning about control flow in programming.

---

Introduction to Comparison Operators

Duration: 20 mins

Overview (5 minutes)

• Objective: Introduce comparison operators in JavaScript.
• Approach: Begin with an explanation of comparison operators. Use simple examples, such as comparing numbers or strings, to illustrate each operator. Emphasize the difference between == and ===, and != and !==.

Practice Problems (15 minutes)

• Objective: Apply comparison operators in practical scenarios.
• Approach: Demonstrate each problem and encourage participants to try them:
  1. Compare 5 and '5' using == and ===.
  2. Check if the string 'Hello' is not equal to 'hello' using !=.
  3. Determine if 10 is greater than 8 using >.
  4. Use <= to compare 7 and 9.
  5. Apply >= to see if '20' is greater than or equal to 18.

---

Understanding the if() Statement

Duration: 20 minutes

Introduction to if Statements (5 minutes)

• Objective: Learn the syntax and usage of if statements.
• Approach: Start with the basic structure of an if statement. Use a simple condition, like checking if a number is positive, and demonstrate how the if statement works.

Coding Practice (15 minutes)

• Objective: Practice writing if statements.
• Approach: Guide participants through writing if statements for these scenarios:
  1. Check if the variable age is equal to 18.
  2. Determine if a number temperature is greater than 30.
  3. Write an if statement to see if the length of a string username is more than 5 characters.
  4. Create a condition to check if a boolean variable isMember is true.
  5. Use if to determine if a numeric variable score is less than 50.

---

Exploring if-else Structures

Duration: 30 minutes

Introduction to if-else (5 minutes)

• Objective: Understand how to use if-else statements in JavaScript.
• Approach: Explain how if-else statements offer two pathways: one if the condition is true, and another if it is false. Use a basic example, like checking if a number is even or odd.

Coding Practice (25 minutes)

• Objective: Implement if-else statements in various scenarios.
• Approach: Walk through these examples with the participants:
  1. Create an if-else statement to check if a number score is greater than or equal to 75. If true, console.log Pass, otherwise Fail.
  2. Write an if-else statement to determine if a variable day is 'Saturday' or 'Sunday'. If

true, console.log Weekend, otherwise Weekday. 3. Implement if-else to check if total is less than 50. If true, console.log Low, otherwise High. 4. Use if-else to determine if a numeric variable count is greater than 10. If true, console.log Count is large, otherwise Count is small. 5. Create an if-else statement to determine if a string password has at least 8 characters. If true, console.log Valid Password, otherwise Password too short.

---

Mastering if-else-if Chains

Duration: 30 minutes

Introduction to if-else-if (5 minutes)

• Objective: Comprehend the use of if-else-if for multiple conditions.
• Approach: Explain how if-else-if chains provide a way to handle multiple different conditions sequentially. Use examples to illustrate how only the first true condition gets executed.

Coding Practice (25 minutes)

• Objective: Practice creating if-else-if structures.
• Approach: Guide participants through constructing the following scenarios:
  1. Create an if-else-if chain for a variable grade with conditions for A, B, C, D, and F based on numerical value (e.g., grade > 90 for A).
  2. Write an if-else-if structure to categorize a variable temperature into 'Hot', 'Warm', 'Cool', 'Cold' based on specific ranges.
  3. Implement an if-else-if to suggest activities like 'Swimming', 'Hiking', 'Reading', 'Resting' based on a variable weatherCondition.
  4. Use if-else-if to assign a shipping cost based on the value of a variable orderTotal (e.g., free for orders over $50).
  5. Create an if-else-if chain to determine the time of day (morning, afternoon, evening, night) based on a hours variable.