Scribd
Upload
26 views10 pages

JavaScript 101 - Lesson 3 - Conditional Logic - Tynker

This lesson on Conditional Logic in JavaScript teaches students how to use conditional statements to make decisions in programming. It covers various operators, including assignment, comparison, and logical operators, and includes activities such as puzzles and reading materials to reinforce learning. Students will complete a quiz at the end to assess their understanding of the concepts covered.

Uploaded by

zeinafayad
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views10 pages

JavaScript 101 - Lesson 3 - Conditional Logic - Tynker

This lesson on Conditional Logic in JavaScript teaches students how to use conditional statements to make decisions in programming. It covers various operators, including assignment, comparison, and logical operators, and includes activities such as puzzles and reading materials to reinforce learning. Students will complete a quiz at the end to assess their understanding of the concepts covered.

Uploaded by

zeinafayad
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Lesson 3 : Conditional Logic

JavaScript 101
Time: 40+ minutes

Introduction
In this lesson, students will experiment with conditional
statements, which they can use to programmatically make
decisions based on one or more conditions or variables in the
program. The operators they learn allow them to perform
calculations and check conditions.

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 1 of 10
:
p
Commands Introduced
hasPathRight(); Returns true if there is a path to the right.
Otherwise, it returns false.
hasPathLeft(); Returns true if there is a path to the left.
Otherwise, it returns false.
isObstacle(); Returns true if the path in front has an obstacle or
storm cloud. Returns false if the path is clear.

Vocabulary
Boolean: A boolean is a data type that has only two possible
values: true or false. These two values can correspond to a lot of
meanings, such as on or off. Comparison or equality testing
statements (such as x > 4) evaluate to a boolean because x is
either greater than 4 (true) or not greater than 4 (false).If you
want to create a boolean variable named "playerAlive" to track
whether the player is alive, you could do this:

var playerAlive = true;

Conditional Statement: A conditional statement checks if a


condition is true and then only executes code if the condition is
true. Examples of conditional statements are "if" statements, "if-
else" statements, and "if-else if-else" statements. Here is what it
looks like:

"if" statement:

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 2 of 10
:
p
"if-else" statement:

"if-else if-else" statement:

Assignment Operator: Assignment operators assign a value on


the right side of the operator to the left side of the operator.
When you're using an assignment operator, it will only modify the
value on the left side of the operator. These are shortcuts for
assignments that could be written out in a slightly longer way. For
example, you can use the assignment operator *= to assign the
value of x * y to x (x *= y). However, you could also write this out
as x = x * y.
Comparison Operator: Comparison operators check the values
or expressions on the left and right side of the operator and

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 3 of 10
:
p
return a boolean value of true or false based on the comparison.
For example, you can check if x is equal to y (x == y), if x is not
equal to y (x != y), or whether x is less than y (x < y).
Logical Operator: Logical operators take one or two boolean
values and return a boolean value. For example, they can check if
both are true (&&) or if either is true (||). The logical not operator
(!) returns the opposite of a boolean value.
Nested Conditional: You can add conditionals within
conditionals. Nested conditionals can be hard to read and debug
if they are not properly documented and indented.

Objectives
Students will...

Use JavaScript commands to solve puzzle modules


Use conditionals to detect whether a condition is true and only
run code in certain cases
Use assignment operators to change the value of a variable
Use comparison operators to compare values
Use logical operators to check multiple conditions at the same
time or reverse the value of a boolean
Distinguish between assignment, comparison, and logical
operators

Materials
Computers (1 per student) with student account access to
[Link]

Warm-Up (5 minutes)

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 4 of 10
:
p
Ask students to correct the syntax or spelling error in the
following code:

1. turn_Left()

2. turnRight;

3. for(var i = 0, i < 3, i++)

4. jump

5. var var

Answers:

1. turnLeft();

2. turnRight();

3. for(var i = 0; i < 3; i++)

4. jump();

5. var

Bonus: Tell students to create at least three additional syntax


error problems.

Activities (35 minutes)

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 5 of 10
:
p
Facilitate as students complete all Conditional Logic modules on
their own:

1. What Are Conditionals? (Document)


Students will read a short document that explains conditional
statements.
Check that students are playing the "Example" sections.
Tell students to click the "I’m Done" button (located at the bottom
of the document) to move on to the next module.

2. Path Left (Puzzle)


This puzzle introduces the "hasPathLeft()" command, which
returns true if there is a path to the left. Otherwise, it returns
false.
Give a hint: Tell students to include an "if" statement.

3. Path Right (Puzzle)


This puzzle introduces the "hasPathRight()" command, which
returns true if there is a path to the right. Otherwise, it returns
false.
This puzzle module is similar to the previous one, but has a path
turning right instead of left.

4. More Turns! (Puzzle)


Students will need to use conditionals and a "for" loop to get the
airship to the treasure.
If students are struggling with the "for" loop, help them out by
providing their first line of code: for(var i = 0; i < 10; i++) {
Give a hint: Tell students to include two "if" statements.
Are students still struggling? Ask them to solve the puzzle without
conditionals or loops. Next, encourage them to collaborate with a
neighbor and incorporate conditionals and/or loops into their

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 6 of 10
:
p
solution.

5. What Are Assignment Operators? (Document)


Students will read a short document that explains assignment
operators.
Check that students are exploring the "Do It Yourself" module,
which encourages students to change the given values and
statements and observe how it evaluates.
Tell students to click the "I’m Done" button to move on to the next
module.

6. What Are Comparison Operators? (Document)


Students will read a short document that explains comparison
operators.
Check that students are exploring the "Do It Yourself" module,
which encourages students to add their own comparisons and
observe how it evaluates.
Tell students to click the "I’m Done" button to move on to the next
module.

7. What Are Logical Operators? (Document)


Students will read a short document that explains logical
operators.
Check that students are exploring the "Do It Yourself" module,
which encourages students to change the given values and see
how the output is affected.
Tell students to click the "I’m Done" button to move on to the next
module.

8. Stormy Path (Puzzle)


To solve this puzzle module, students will need to use conditional
logic to avoid the storm clouds.
Tell students that the storm clouds will appear in random
locations, so they will need to use the "if" statement to check for

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 7 of 10
:
p
storm clouds.
Remind students to use a "jump" command to make the character
jump over obstacles (e.g., storm clouds).
If students are struggling, encourage them to brainstorm possible
solutions with a partner.

9. What Is an "Else"? (Document)


Students will read a short document that explains the "else"
statement and "else-if" statement.
Check that students are playing the "Example" sections.
Tell students to click the "I’m Done" button to move on to the next
module.

10. Stormy Turns 1 (Puzzle)


To solve this puzzle module, students will need to use conditional
logic (i.e., "if" statements and "else-if" statements) to avoid the
storm clouds.
Tell students that the storm clouds will appear in random
locations, so they will need to use conditional logic to check for
storm clouds.
Are students struggling? Direct their attention to the "Hints"
section located below the coding panel.

11. Stormy Turns 2 (Puzzle)


This puzzle module is similar to the previous one, but uses the
"hasPathRight()" and "turnRight()" commands instead of the
"hasPathLeft()" and "turnLeft()" commands.
Remind students that the storm clouds will appear in random
locations, so they will need to use conditional logic to check for
storm clouds.

12. What Are Nested Ifs? (Document)


Students will read a short document that explains adding
conditionals within conditionals.

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 8 of 10
:
p
Check that students are exploring the "Example" sections.
Tell students to click the "I’m Done" button to move on to the next
module.

13. Stormy Night 1 (Puzzle)


To solve this puzzle module, students will need to use conditional
logic to avoid the storm clouds.
If students are struggling, encourage them to brainstorm with a
partner or provide part of the code for them. For example: for(var
i = 0; i < 21; i++) {

14. Stormy Night 2 (Puzzle)


Students will need to use conditional logic to avoid the storm
clouds.
Give a hint: Tell students to include two "else-if" statements.
If students are struggling, encourage them to brainstorm possible
solutions with a partner.

15. Review (Document)


Students will read a short document that reviews concepts
learned in this lesson.
Concepts include conditionals (i.e., if, else, else-if, nested ifs),
assignment operators, comparison operators, and logical
operators.
Encourage students to thoroughly read the document to help
them prepare for the quiz in the next module.
Tell students to click the "I’m Done" button to move on to the next
module.

16. Quiz (Multiple Choice)


Students will be asked 10 quiz questions to review concepts from
this lesson.

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 9 of 10
:
p
Discussion Questions/Follow-Up
Activities (20 minutes)
Review the following with your students:

How can you check if...


x is equal to y (Answer: x == y)
x is of equal value and equal type to y (Answer: x ===y)
x is not equal to y (Answer: x != y)
x is not of equal value or not equal type to y (Answer: x !== y)
x is less than y (Answer: x < y)
True or False: A nested conditional has conditionals within
conditionals. (True, and this is helpful if you want to check two
conditions)
True or False: A boolean is a data type that has only one possible
value: True. (False, a boolean is a data type that has two possible
values: True or False. These two values can correspond to a lot of
meanings, such as on or off.)

[Link] board&classroomId=68c680aac4fb3813c86030ea#/lessons 06/11/2025, 8 35 AM


Page 10 of 10
:
p

Common questions

Powered by AI

Tynker's puzzles might encourage students to use 'else-if' statements to illustrate multiple branching conditions where different actions need to be taken based on varying conditions. For example, in a puzzle where a student must avoid obstacles or perform different actions based on whether a storm cloud is present, 'if', 'else-if', and 'else' statements are crucial. If there is an obstacle, jump over it; if not, and there's a path left, turn left; otherwise, move forward .

The introduction of Tynker's 'hasPathRight()' and 'hasPathLeft()' commands enhances the learning of JavaScript conditionals by providing practical, interactive applications of condition checks. These commands return true if a path is clear in the specified direction and false otherwise, allowing students to visually and programmatically understand how conditionals work in decision-making processes within a coding game or simulation, thus reinforcing their learning through practical examples .

Logical operators in JavaScript combine multiple boolean expressions or values and return a boolean result. Using '&&' (logical AND), means all conditions must be true for the overall expression to be true. Using '||' (logical OR) means at least one of the conditions must be true. The '!' (logical NOT) operator reverses the boolean value of the operand. For example, the expression 'x > 5 && x < 10' checks if x is between 5 and 10 exclusively .

The pedagogical approach of using programming puzzles like 'Stormy Path' involves experiential learning, where students actively engage with conditional logic to solve problems. This method promotes cognitive engagement as students must apply theoretical knowledge to practical scenarios to navigate obstacles. 'Stormy Path' specifically encourages students to think critically and strategically about how to adapt their solutions to dynamically changing environments, such as random storm cloud appearances, thus solidifying their understanding of conditionals .

Nested conditional statements in JavaScript are conditionals within conditionals, allowing for more complex decision-making processes. However, they can negatively affect readability and make debugging more challenging if not properly documented and indented. They can lead to code that is difficult to read and maintain, as the logic can become convoluted, particularly in deeply nested constructs .

The 'jump' command is crucial in Tynker's conditional logic puzzles as it allows students to practice implementing reactions to detected conditions. In scenarios involving storm clouds indicated as obstacles, the 'jump' command enables a character to avoid these hazards, directly tying the practical aspect of game mechanics with learning objectives about conditionals in programming. It emphasizes real-time application where condition checking leads to an immediate change in behavior .

Assignment operators in JavaScript are used to assign values to variables, working with the syntax 'variable = value'. Example: x = y assigns the value of y to x. In contrast, comparison operators evaluate relationships between two values and return a boolean value (either true or false). Examples include 'x == y', checking equality; 'x != y', checking inequality; and 'x < y', checking if x is less than y .

Understanding 'true' and 'false' in the context of Boolean data types is vital for programming in JavaScript because most conditional logic relies on Boolean expressions. These expressions determine the flow of the program by enabling and disabling paths of execution. Many constructs, such as loops and conditionals, evaluate expressions that must be either true or false to proceed, influencing decisions and outcomes in the code .

'If' and 'else' statements facilitate decision-making in JavaScript by allowing code to execute specific blocks based on condition evaluations. An 'if' statement executes a block of code if the condition is true, while an 'else' statement executes an alternative block if the condition is not met. For example, 'if(x > 10) { console.log("Greater than 10"); } else { console.log("10 or less"); }' would print 'Greater than 10' if x is greater than 10, otherwise it prints '10 or less' .

Conditional statements in JavaScript allow a program to make decisions and execute specific blocks of code based on the evaluation of one or more conditions. They function by checking whether a condition is true or false and then executing the corresponding code block if the condition is true. The primary forms of conditional statements are 'if' statements, 'if-else' statements, and 'if-else if-else' chains, which help in performing different actions depending on the varying conditions .

You might also like