Activity 2.2 Selection: If Statements

Introduction

Activity 2.2

Selection: If Statements

Topics

Making Decisions
If Statements
Common Mistakes when Writing If Statements

Making Decisions

Programs often need to make choices. As discussed in the previous lesson, a program often needs to decide what to do based on certain circumstances.

This kind of decision-making is called selection. It lets your program follow different paths depending on what's true.

The `if` Statement

An if statement allows your program to check a condition and decide whether or not to execute a block of code based on whether its condition is true or false.

1
let age = parseInt(prompt("Enter your age: "));
2

3
if (age >= 16) {
4
  console.log("You can drive!");
5
}

Components of an `if` Statement

1
if (age >= 16) {
2
  console.log("You can drive!");
3
}

1. (if) If keyword - Denotes the beginning of an if statement.

2. (age >= 16) Condition - A boolean expression that evaluates true or false.

3. ({ }) Code Block: A group of statements surrounded by braces.

Demo: Create the Driving Age Checker

1
let age = parseInt(prompt("Enter your age: "));
2

3
if (age >= 16) {
4
  console.log("You can drive!");
5
}

1
Enter your age: 17 [Enter]
2
You can drive!

1
Enter your age: 12 [Enter]
2
[No output]

Common Mistakes

1. Forgetting to Close a Code Block: Always let your editor generate the closing brace and avoid deleting it. New programmers often forget to close their code blocks.

2. Poor indentation: Indent all code within a block by one tab. While not required by the compiler, this makes your code much easier to read and maintain.

3. Unnecessary semi-colons: if (condition); { Avoid placing semi-colons after an if statement's condition. A semi-colon here separates the condition from the code block, causing the block to run unconditionally.

Key Terms

Selection: The ability of a program to choose which code to execute based on a condition.
if Statement: A fundamental control flow structure that allows a program to execute a block of code only if a specified condition is true. It consists of the if keyword, a condition, and a code block.

Key Terms

Condition: A logical expression that evaluates to a Boolean value (true or false). It determines whether the code inside an if statement's code block will be executed.
Code Block: A group of one or more programming statements enclosed in curly braces ({ }). In an if statement, this block of code is executed when the condition is met.

'F' → Fullscreen

Objectives

Constructing If Statements
Evaluating Conditions
Grouping code into code blocks

Activity Tasks

Create a new project named 2-2-if-statements.js.
Complete each task individually.

Task 1: Age Validator

1
console.log("--- Demo 1 - Age Validator ---");
2

3
let userAge = parseInt(prompt("Enter your age:"));
4

5
if (userAge >= 16) {
6
  console.log("Time to hit the road! You've earned your driving permit.\n");
7
}
8

9
if (userAge >= 18) {
10
  console.log("Adulting 101: You can now vote and live independently.");
11
  console.log("Please exit your mom's basement.\n");
12
}
13

14
if (userAge >= 35) {
15
  console.log("You're old enough to run for president.");
16
  let fullName = prompt("Enter your full name:");
17
  let electionYear = prompt("What year will you run?");
18
  let nickName = prompt("What's your nickname (e.g., 'The Awesome')?");
19

20
  console.log(`${nickName} ${fullName} for president in ${electionYear}!`);
21
}
22

23
alert("Press enter to continue...");
24
//

Task 2: Simple Score Calculator

1
console.log("--- Demo 1 - Age Validator ---");
2

3
let userAge = parseInt(prompt("Enter your age:"));
4

5
if (userAge >= 16) {
6
  console.log("Time to hit the road! You've earned your driving permit.\n");
7
}
8

9
if (userAge >= 18) {
10
  console.log("Adulting 101: You can now vote and live independently.");
11
  console.log("Please exit your mom's basement.\n");
12
}
13

14
if (userAge >= 35) {
15
  console.log("You're old enough to run for president.");
16
  let fullName = prompt("Enter your full name:");
17
  let electionYear = prompt("What year will you run?");
18
  let nickName = prompt("What's your nickname (e.g., 'The Awesome')?");
19

20
  console.log(`${nickName} ${fullName} for president in ${electionYear}!`);
21
}
22

23
alert("Press enter to continue...");
24

25
// -----------------------------------------------------------------------------
26

27
console.log("\n--- Demo 2 - Simple Score Calculator ---");
28

29
let score = parseInt(prompt("Enter your score (0-100):"));
30

31
if (score >= 60) {
32
  console.log("You passed!");
33
}
34

35
if (score < 60) {
36
  console.log("You did not pass. Keep studying!");
37
}
38

39
alert("Press enter to continue...");
40
//

Task 3: Temperature Check

1
console.log("--- Demo 1 - Age Validator ---");
2

3
let userAge = parseInt(prompt("Enter your age:"));
4

5
if (userAge >= 16) {
6
  console.log("Time to hit the road! You've earned your driving permit.\n");
7
}
8

9
if (userAge >= 18) {
10
  console.log("Adulting 101: You can now vote and live independently.");
11
  console.log("Please exit your mom's basement.\n");
12
}
13

14
if (userAge >= 35) {
15
  console.log("You're old enough to run for president.");
16
  let fullName = prompt("Enter your full name:");
17
  let electionYear = prompt("What year will you run?");
18
  let nickName = prompt("What's your nickname (e.g., 'The Awesome')?");
19

20
  console.log(`${nickName} ${fullName} for president in ${electionYear}!`);
21
}
22

23
alert("Press enter to continue...");
24

25
// -----------------------------------------------------------------------------
26

27
console.log("\n--- Demo 2 - Simple Score Calculator ---");
28

29
let score = parseInt(prompt("Enter your score (0-100):"));
30

31
if (score >= 60) {
32
  console.log("You passed!");
33
}
34

35
if (score < 60) {
36
  console.log("You did not pass. Keep studying!");
37
}
38

39
alert("Press enter to continue...");
40

41
// -----------------------------------------------------------------------------
42

43
console.log("\n--- Demo 3 - Temperature Check ---");
44

45
let currentTemp = parseInt(prompt("What is the current temperature in Fahrenheit?"));
46

47
if (currentTemp <= 32) {
48
    console.log("Brrr! It's freezing. Don't forget your coat!");
49
}
50

51
// The '&&' (AND) operator lets us check if two conditions are true at the same time.
52
// We use it here to check if a grade falls within a specific range.
53
if (currentTemp > 32 && currentTemp <= 65) {
54
    console.log("It's a bit chilly. A light jacket should be perfect.");
55
}
56

57
if (currentTemp > 65) {
58
    console.log("It's warm outside. Enjoy the nice weather!");
59
}
60

61
alert("Press enter to continue...");
62
//

Task 4: Letter Grade Calculator

1
console.log("--- Demo 1 - Age Validator ---");
2

3
let userAge = parseInt(prompt("Enter your age:"));
4

5
if (userAge >= 16) {
6
  console.log("Time to hit the road! You've earned your driving permit.\n");
7
}
8

9
if (userAge >= 18) {
10
  console.log("Adulting 101: You can now vote and live independently.");
11
  console.log("Please exit your mom's basement.\n");
12
}
13

14
if (userAge >= 35) {
15
  console.log("You're old enough to run for president.");
16
  let fullName = prompt("Enter your full name:");
17
  let electionYear = prompt("What year will you run?");
18
  let nickName = prompt("What's your nickname (e.g., 'The Awesome')?");
19

20
  console.log(`${nickName} ${fullName} for president in ${electionYear}!`);
21
}
22

23
alert("Press enter to continue...");
24

25
// -----------------------------------------------------------------------------
26

27
console.log("\n--- Demo 2 - Simple Score Calculator ---");
28

29
let score = parseInt(prompt("Enter your score (0-100):"));
30

31
if (score >= 60) {
32
  console.log("You passed!");
33
}
34

35
if (score < 60) {
36
  console.log("You did not pass. Keep studying!");
37
}
38

39
alert("Press enter to continue...");
40

41
// -----------------------------------------------------------------------------
42

43
console.log("\n--- Demo 3 - Temperature Check ---");
44

45
let currentTemp = parseInt(prompt("What is the current temperature in Fahrenheit?"));
46

47
if (currentTemp <= 32) {
48
    console.log("Brrr! It's freezing. Don't forget your coat!");
49
}
50

51
// The '&&' (AND) operator lets us check if two conditions are true at the same time.
52
// We use it here to check if a grade falls within a specific range.
53
if (currentTemp > 32 && currentTemp <= 65) {
54
    console.log("It's a bit chilly. A light jacket should be perfect.");
55
}
56

57
if (currentTemp > 65) {
58
    console.log("It's warm outside. Enjoy the nice weather!");
59
}
60

61
alert("Press enter to continue...");
62

63
// -----------------------------------------------------------------------------
64

65
console.log("\n--- Demo 4 - Letter Grade Calculator ---");
66

67
let finalGrade = parseInt(prompt("Enter your final grade percentage (0-100):"));
68

69
if (finalGrade >= 90) {
70
  console.log("You got an A! Excellent work!");
71
}
72
if (finalGrade >= 80 && finalGrade < 90) {
73
  console.log("You got a B! Great job!");
74
}
75
if (finalGrade >= 70 && finalGrade < 80) {
76
  console.log("You got a C. Solid effort.");
77
}
78
if (finalGrade >= 60 && finalGrade < 70) {
79
  console.log("You got a D. You passed, but there's room to improve.");
80
}
81
if (finalGrade < 60) {
82
  console.log("You got an F. Let's review the material and try again.");
83
}
84
//

Sample Output

Your program output should something similar to the sample output below.

--- Demo 1 - Age Validator ---
Enter your age: 35
Time to hit the road! You've earned your driving permit.

Adulting 101: You can now vote and live independently.
Please exit your mom's basement.

You're old enough to run for president.
Enter your full name: Anthony Mortimer
What year will you run? 2028
What's your nickname (e.g., 'The Awesome')? Sleepy
Sleepy Anthony Mortimer for president in 2028!
Press enter to continue... [Enter]

--- Demo 2 - Simple Score Calculator ---
Enter your score (0-100): 76
You passed!
Press enter to continue... [Enter]

--- Demo 3 - Temperature Check ---
What is the current temperature in Fahrenheit? 76
It's warm outside. Enjoy the nice weather!
Press enter to continue... [Enter]

--- Demo 4 - Letter Grade Calculator ---
Enter your final grade percentage (0-100): 66
You got a D. You passed, but there's room to improve.

Reflection Questions

You may write your reflection answers as comments at the bottom of your code.

Describe a real-life situation where you make a decision based on multiple conditions. How would you translate that decision-making process into an if statement using logical operators like && (AND) and || (OR)?

Submission

Submit your activity and reflection answers to the appropriate dropbox.

Activity 2.2 Selection: If Statements

Introduction

Activity 2.2

Selection: If Statements

Topics

Making Decisions

The if Statement

Components of an if Statement

Demo: Create the Driving Age Checker

Common Mistakes

Key Terms

Key Terms

Objectives

Activity Tasks

Task 1: Age Validator

Task 2: Simple Score Calculator

Task 3: Temperature Check

Task 4: Letter Grade Calculator

Sample Output

Reflection Questions

Submission

Activity Complete

The `if` Statement

Components of an `if` Statement