Lesson Plan

Lesson: Introduction to JavaScript

Time: 50+ mins

Introduction

In this advanced lesson, students will use JavaScript commands and “for” loops to complete 10 puzzle
modules that involve helping agent Skyla reach a portal. As students work through the different puzzle
modules, they will gain a stronger mastery of JavaScript syntax, become better prepared for rigorous
computer science high school courses, and bridge the gap between block-based coding and text-based
coding.

Teacher Tip: As students work through the modules, check that they…

Follow any command with open and close parentheses

End the command with a semicolon

Spell and capitalize the command correctly

Commands

forward();

Move the Actor forward two times.

turnLeft();

Turn the Actor to the left.

turnRight();

Turn the Actor to the right.

for

Repeat the commands inside the loop a given number of times.

longJump();

Move the Actor forward over a one-block gap.

highJump();

Move the Actor up and forward one block.

fire();

Launch a laser.

Vocabulary

JavaScript: JavaScript is a text-based programming language that is widely used in web development.

Comments: Comments use certain symbols to document code and help other people understand what
your code does. In JavaScript, single line comments are started with two forward slashes (//).

"For" loop: "For" loops execute the same code a certain number of times. They are useful when you
need to count (e.g., count from 0 to 9) or repeat an action multiple times.

Syntax: Syntax is the set of rules that govern how a language is structured. JavaScript syntax is a set of
rules that define what correctly formatted code looks like, but if you write a line of code in JavaScript
with incorrect syntax, your program won’t run!

Objectives

Students will...

Use JavaScript commands to move an Actor

Identify patterns in their code

Use "for" loops to reduce lines of code

Add descriptions to their code with comments

Materials

Computers (1 per student) with student account access to Tynker.com

Warm-Up (5 minutes)

Tell students to answer these short-response questions:

What do you know about text-based programming languages (e.g., JavaScript, Python)? Have you ever
used a text-based programming language?

Today we are going to solve Tynker puzzle modules using a text-based language called JavaScript. What is
one concern you have about using JavaScript and one reason you’re interested in learning this language?
Getting Started (10 minutes)

1. Use your projector and open “Module 1: Start the Hack.”

2. Read the “Start the Hack” introduction out loud to your students.

3. As a class, solve the puzzle module by using two “forward” commands.

4. Explain that JavaScript syntax needs to be exact. Model this by deliberately making syntax errors such
as:

Not including the open and close parentheses after a command

Not including a semicolon

Capitalizing every letter in the word “forward”

Misspelling the word “forward”

5. Point out the errors and emphasize the importance of using the correct JavaScript syntax.

Activities (35 minutes)

Facilitate as students complete the Introduction to JavaScript modules on their own:

1. Start the Hack (Puzzle)

Students are introduced to the main Actor, Skyla. Their goal is to move Skyla to the portal using
JavaScript commands.

In this module, students are taught to use the forward command which moves Skyla forward one step
each time it is used.

Remind students to include a semicolon at the end of each command.

Tell students to click the orange “Play” button on the bottom right of their screen to run their code.

2. Step Up (Puzzle)

Students are taught how to comment out code in JavaScript using two forward slashes "//".

This puzzle has too many “forward” commands. Remind students that commenting out code before the
command makes the computer skip over that command. Students will need to use the forward slashes
to comment out the extra forward commands in the code so that Skyla can get to the portal.

Tell students that the stairs do not count as a block so one forward command will move Skyla to the next
colored block.

3. Turn The Corner (Puzzle)

Students are introduced to the “turnLeft” command which will turn Skyla to the left.

Tell students that the “turnLeft” command does NOT move Skyla forward, it will only change the
direction she is facing.

4. Staircase (Puzzle)

Students will need to apply their knowledge of both the “forward” and “turnLeft” command to code
Skyla to move up the first staircase, turn left, then move up the second staircase.

Remind students that Skyla will climb the stairs automatically without any additional forward commands.

5. Zig-Zag (Puzzle)

This module introduces the “turnRight” command which turns Skyla to the right.

Tell students that the “turnRight” command does NOT move Skyla forward, it will only change the
direction she is facing.

Students will need to use the “forward,” “turnRight,” and “turnLeft” commands to move Skyla through
the sharp corners.

6. Deja Vu (Puzzle)

This module explains the concept of "for" loops, which are used when there is a pattern in the
commands that needs to be repeated a specific number of times.

Students will need to determine what the pattern is in the puzzle and then write a "for" loop that
repeats that pattern until Skyla reaches the portal.

Give a hint: Tell students that they need to include one forward command inside the “for” loop.

Note: By convention, people tend to use “0” as the initial value for initializer and use the “<” operation in
the end condition.

7. Up and Down (Puzzle)

Two new commands are added to the list of commands available for students: “longJump” and
“highJump.”

Tell students that the “longJump” command will move Skyla forward over a one block gap while the
“highJump” command will move Skyla up to a platform in front of her.

Are students struggling? Check that they are using each jump command at the correct time.

8. Onwards, Forward! (Puzzle)

In this module, students will need to combine their knowledge of "for" loops with the new command,
“fire.”

Tell students that the “fire” command launches a laser that will travel up to 5 tiles ahead, so Skyla should
use that command when she is close to the enemy.

9. Jump, Forward (Puzzle)

Encourage students to find a repeatable pattern of commands that can be used inside a "for" loop. They
do not need to use a "for" loop to complete this puzzle, but using a loop will eliminate repetitive lines of
code.

Give a hint: Remind students that firing the laser shoots the laser for 5 blocks, so they can fire before
they jump.

10. Forward, Jump (Puzzle)

Encourage students to identify the pattern and create a “for” loop to move Skyla to the portal.

Optional Activities (10 minutes each)

Find the Error!

Tell students to identify the syntax error in the following code:

1. turnleft();

2. turnRight()

3. FoRwArD();

4. LongJump();

5. forward;

Answers:

1. The “l” needs to be capitalized

2. Missing a semicolon

3. Needs to be spelled “forward”

4. The “L” needs to be lowercase

5. Missing an open and close parenthesis before the semicolon

Bonus: Tell students to create at least three additional syntax error problems and ask their neighbor to
identify it.

Match It!

Tell students to match the description to the correct command:

a. forward(); ___ Turn the Actor to the left.

b. turnLeft(); ___ Turn the Actor to the right.

c. turnRight(); ___ Launch a laser.

d. longJump(); ___ Move the Actor forward two times.

e. highJump(); ___ Move the Actor forward over a one-block gap.

f. fire(); ___ Move the character up and forward one block.

Discussion

Ask your students how they enjoyed text-based coding (e.g., JavaScript) compared to block-based
coding.

Were there any parts of this lesson that your students found tricky? How did they problem-solve? (e.g.,
asked a friend or teacher for help, counted the number of steps in front of the Actor)

Standards

CCSS-ELA: RI.6.4, RI.6.7, SL.6.1, SL.7.1, SL.8.1

CCSS-Math: MP.1, MP.2, MP.4

CSTA: 2-AP-12, 2-AP-13, 2-AP-15, 2-AP-17, 2-AP-19

CS CA: 6-8.AP.12, 6-8.AP.13, 6-8.AP.15, 6-8.AP.17, 6-8.AP.19

ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 7.c