« High School Courses
This course is included with our Coding/STEAM Curriculum - High School Plan

An introduction to JavaScript for intermediate or advanced coders in upper middle or high school with a focus on game design.

  • Grades 7+
  • Advanced
  • Web

Description

An introduction to JavaScript for intermediate or advanced coders in upper middle or high school. In this advanced lesson plan, students will be introduced to JavaScript as they complete engaging lessons, solve challenging puzzles, and build their own games in JavaScript. This course is ideal for students who have already completed at least one Tynker course and are comfortable with the basics of programming logic and computational thinking. This course will help them transition to JavaScript and adapt to the additional challenges of text-based syntax.

Students who successfully complete this lesson plan will demonstrate a strong mastery of JavaScript syntax, as well as the ability to creatively program games and other projects and debug their own code. Students will also be able to come up with an idea for a game and take it through the entire design and implementation process, creating custom versions of many of their favorite games in JavaScript.

Topics

  • JavaScript syntax
  • Sequencing
  • Repetition
  • Conditional logic
  • Nested loops
  • Automation
  • Pattern recognition
  • Simple motion
  • Keyboard and mouse events
  • Creating and using an HTML canvas
  • Operators
  • Expressions
  • Variables
  • Collision detection
  • Using arrays and objects to store structured data

What Students Learn

  • Learn JavaScript syntax
  • Use conditional logic, loops, and conditional loops to solve problems
  • Create and use variables
  • Detect and handle keyboard and mouse events
  • Write and interpret JavaScript expressions
  • Use the HTML canvas for drawing and displaying images
  • Detect win/loss conditions in a game
  • Implement collision detection between images on the canvas
  • Use arrays and objects to store structured data

Technical Requirements

* Online courses require a modern desktop computer, laptop computer, Chromebook, or Netbook with Internet access and a Chrome (29+), Firefox (30+), Safari (7+), or Edge (20+) browser. No downloads required.

Introduction

Welcome to JavaScript 101, Tynker’s first JavaScript course for schools. This course prepares students for the rigors of AP Computer Science when they get to high school and bridges the gap between block-based coding and text-based coding. We recommend JavaScript 101 for intermediate or advanced coders in upper middle or high school who have already completed at least one of our block-based coding courses to get comfortable with basic programming concepts.

In this advanced lesson plan, students will be introduced to JavaScript as they complete engaging lessons, solve challenging puzzles, and build their own games in JavaScript. As they work through the different modules in JavaScript 101, students gain a strong mastery of JavaScript syntax, as well as the ability to creatively program games and other projects and debug their own code.

Recommended Before You Begin:

  • Watch this video: https://player.vimeo.com/video/193816260

  • Have your students complete at least one Tynker Course that teaches programming fundamentals using block-based coding

  • Review how this course is different from our block coding courses in the table below

What's Included:

  • 12 scaffolded, self-guided lessons, approximately one hour each

  • 12 lesson plans (one for each lesson) with helpful tips

  • Answer keys for all puzzles, quizzes, and DIY (do-it-yourself) activities

JavaScript 101 is separated into three sections:

  • Part I - JavaScript Syntax and Basics: Students learn basic JavaScript syntax and programming as they set sail with the famous pirate Victoria Skyhart, completing puzzles to help her. They use JavaScript to navigate her pirate airship, avoid enemies, and collect treasure along the way.

  • Part II - UI and Interaction: The second part of the course teaches students to use the canvas, background images, x-y coordinates, keyboard interaction, mouse interaction, and pen drawing.

  • Part III - Game Design: This final portion of the course focuses on putting together everything students have learned to build games. Students will even build several games on their own.

How is this course different from Tynker’s block coding courses?


Block Coding Course

(e.g. Programming 101)

Text Coding Course

(e.g. JavaScript 101)

How Students Code

Connect code blocks in Tynker Workshop

Write text commands in a code editor

Interactivity Level of the Modules

Highly interactive with concept introductions, guided tutorials and puzzles.

More reading required to understand JavaScript syntax and apply concepts.

Types of Activities

Puzzles, guided tutorials, DIY projects, quizzes

Puzzles, DIY projects, quizzes

Syntax Checking

N/A

Syntax highlighting and error messages in the editor

Student Project

Tynker Projects

Tynker Notebooks

Teacher Experience

None required. Completely self-paced.

Some teacher experience required.

How to Assign Lessons

Classroom → Lesson tab

Classroom → Lesson tab


Your students will be able to move through modules and lessons at their own pace. As the teacher, you have access to answer keys for all puzzles and quizzes, as well as completed samples for all do-it-yourself projects. Your Gradebook allows you to check how your students are doing in real time. It includes metrics on which modules students have completed, as well as which concepts they understand or are struggling with. This information makes it easy to know where your assistance would be most helpful and provide accurate solutions and tips. For more information about setting up your class and starting to teach, check out our teacher training videos and quick-start teacher guide.


Topics covered: JavaScript syntax, sequencing, repetition, conditional logic, nested loops, automation, pattern recognition, simple motion, keyboard and mouse events, creating and using an HTML canvas, operators, expressions, variables, collision detection, using arrays and objects to store structured data.



Lesson Plan

Lesson: The Basics

Time: 40+ mins

New Commands

  • forward();            Move the ship one step forward.
  • turnRight();         Turn the ship to the right.
  • turnLeft();           Turn the ship to the left.

Vocabulary

  • JavaScript: JavaScript is a programming language that is widely used in web development. Any website you’re looking at probably has (at least) three components: HTML to structure the page (what shows up where), CSS to determine the style of the page (fonts, colors, sizes), and JavaScript to manipulate the web page’s elements and to make it dynamic.
  • Syntax: Syntax is the set of rules that govern how a language is structured. All languages have a syntax. In English, sentences have a syntax that may involve subjects, verbs, and objects. JavaScript syntax is a set of rules that define what correctly formatted code looks like. But if you write a sentence in English with incorrect syntax, someone still might understand what you’re saying. If you write a line of code in JavaScript with incorrect syntax, your program won’t run!
  • Command: A command is an instruction that you give the computer. For these puzzles, students will use commands like “forward()” and “turnLeft()” to communicate with the puzzle.
  • camelCase: camelCase is a naming convention in JavaScript and other languages. Variable and function names (identifiers) cannot have spaces in them, so if you have a variable that keeps track of player scores, you could name it “playerScores” to conform to camelCase conventions.
  • Identifier: Whenever you declare a function, variable, or data structure, you need to give it a unique name that you can refer to later. This unique name is an identifier. There are certain rules governing how you can name an identifier. For example, they cannot be reserved words (such as “var”), they must begin with a letter, and they cannot contain certain symbols like exclamation marks, hyphens, periods, or commas.

Objectives

Students will...
  • Use JavaScript commands to solve puzzle modules
  • Identify coding errors
  • Apply programming knowledge to properly name variables and functions

Materials

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

Warm-Up (5 minutes)

Ask students to answer these short-response questions:
  • Today we are going to solve Tynker puzzle modules using a text-based programming language called JavaScript. Have you ever heard of JavaScript before? If so, what have you heard (e.g., you can make games like Hangman, it’s difficult to learn, it’s easy to learn)? What is one concern you have about using JavaScript and one reason you’re interested in learning this language?

Activities (35 minutes)

Facilitate as students complete The Basics modules on their own:
1. Welcome (Document)
    • Students will read a short document that introduces the structure of the course.
    • Tell students to click the “I’m Done” button (located at the bottom of the document) to move on to the next module.
2. Video (Video)
    • This short video introduces the JavaScript 101 programming course.
    • Tell students to click the orange “Done Watching Video” button (located at the top of the screen) to move on to the next module.
3. Set Sail (Puzzle)
    • In this module, students are taught to use the “forward()” command which moves the ship forward one step each time it is used. The goal of the puzzle is to move the ship to the treasure using JavaScript commands.
    • Ask students to write their code on the left side of the screen in the black coding field.
    • Tell students to click the orange “Play” button on the ride side of the screen to see their code run.
4. Smooth Sailing (Puzzle)
    • This puzzle is similar to the previous one. Students will need to use the “forward()” command to move the ship to the treasure.
    • Remind students that they need to be really careful not to miss any details. If they spell something wrong or miss a semicolon, their program will not run.
5. Turn Right (Puzzle)
    • Students are introduced to the “turnRight()” command which will turn the pirate ship to the right by 90 degrees.
    • To solve this puzzle, students will need to navigate the pirate ship to the right and get to the treasure.
    • Remind students that the “turnRight()” command does NOT move the ship forward, it will only change the direction it is facing.
6. Treasure Ahoy! (Puzzle)
    • Students will need to use “forward()” commands to get to the treasure.
    • Are students struggling? Encourage them to count the number of blocks (steps) in front of the pirate ship.
7. Turn Right, Turn Left (Puzzle)
    • Students are introduced to the “turnLeft()” command which will turn the ship to the left by 90 degrees.
    • Tell students that the “turnLeft()” command is just like the “turnRight()” command but instead of turning the pirate ship right, it turns the pirate ship left.
    • Students will need to combine their knowledge of the “turnLeft(),” “forward(),” and “turnRight()” commands to reach the treasure.
    • Give a hint: Tell students to start their code with a “turnLeft()” command.
8. What are Comments? (Document)
    • Students will read a short document that introduces both single line comments and multi-line comments.
    • Check that students are exploring the “Do it Yourself” module, which encourages students to try commenting and uncommenting the given lines and adding their own.
    • Tell students to click the “I’m Done” button to move on to the next module.
9. Turn. Turn. Turn. (Puzzle)
    • Students will need to apply their knowledge of both the “forward()” and “turnRight()” commands to code the ship to make a U-turn to grab the treasure.
    • Are students struggling? Tell them to only use “forward()” and “turnRight()” commands.
10. Buggy Code (Puzzle)
    • In this puzzle module, students will need to fix the given commands.
    • Check that students are using the correct syntax.
11. What are Naming Conventions? (Document)
    • Students will read a short document that introduces basic rules when naming variables and functions.
    • Check that students are exploring the “Example” modules, which encourages students to experiment with concepts covered in this document.
    • Optional: Read the “Reserved Word” list to your students. Remind them that they cannot use these when declaring variables.
12. More Bugs? (Puzzle)
    • In this puzzle module, students will need to fix the given commands.
    • Check that students are including the correct syntax.
    • Tell students to read the comments for hints.
13. Complete the Path (Puzzle)
    • To solve this puzzle module, students will need to add more commands to the given code.
    • Give a hint: Tell students that they will need to use the “forward(),” “turnLeft(),” and “turnRight()” commands to reach the treasure.
14. Light it Up! (DIY)
    • In this DIY (do-it-yourself) module, students are provided code that lights up a square.
    • Encourage students to experiment with their code and create their own designs. Here are some ideas: Light up all the squares, spell the initial of their first or last name, or design a funky shape.
    • Tell students to click the orange “I’m Done” button to move on to the next module.
15. Review (Document)
    • Students will read a short document that reviews concepts learned in this lesson.
    • Concepts include syntax, commands, function calls, function names, comments, and naming conventions.
    • 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.

Discussion Questions/Follow-Up Activities (20 minutes)

Lead a discussion with your students:
  • Why is it important that programmers follow the same conventions for naming things in code?
  • What is an algorithm? How does solving a puzzle in Tynker require creating an algorithm?
  • Students are starting to learn the rules—or grammar—of JavaScript programming. How does JavaScript grammar compare to English grammar? How flexible are the rules in each system? What happens if you don’t follow the rules in English (for example, by not capitalizing the first word of a sentence or using a double negative) versus when you don’t follow the rules of JavaScript (for example, by naming an identifier with a reserved word)?
Bonus: Have students write out valid and invalid identifiers and quiz each other on which ones are acceptable.

US Standards

  • CCSS-ELA: SL.7.1, SL.8.1, RI.9-10.3, RI.9-10.6, L.9-10.3, L.9-10.6
  • CCSS-Math: HSN.Q.A.1, HSN.Q.A.2, HSN.Q.A.3, MP.1
  • CSTA: 2-AP-13, 2-AP-17, 3A-AP-17, 3A-AP-19, 3B-AP-11, 3B-AP-12
  • CS CA: 6-8.AP.13, 6-8.AP.17, 9-12.AP.12, 9-12.AP.14, 9-12.AP.16
  • ISTE: 1.c, 1.d, 4.d, 5.c, 5.d

UK Standards

National Curriculum of England (Computing)
Key Stage 3:
  • Design, use, and evaluate computational abstractions that model the state and behaviour of real-world problems and physical systems
  • Understand several key algorithms that reflect computational thinking (for example, ones for sorting and searching); use logical reasoning to compare the utility of alternative algorithms for the same problem
  • Use two or more programming languages, at least one of which is textual, to solve a variety of computational problems; make appropriate use of data structures (for example, lists, tables, or arrays); design and develop modular programs that use procedures or functions
  • Understand simple Boolean logic (for example, AND, OR, and NOT) and some of its uses in circuits and programming; understand how numbers can be represented in binary, and be able to carry out simple operations on binary numbers (for example, binary addition, and conversion between binary and decimal)
  • Understand how instructions are stored and executed within a computer system; understand how data of various types (including text, sounds, and pictures) can be represented and manipulated digitally, in the form of binary digits
Key Stage 4:
  • Develop their capability, creativity, and knowledge in computer science, digital media, and information technology
  • Develop and apply their analytic, problem-solving, design, and computational thinking skills

Class Presentations

These student-facing slide presentations help educators seamlessly run Tynker lessons in a virtual or physical classroom setting. Each lesson has its own set of slides that introduce the big ideas, suggest unplugged activities, and include a section for each activity module. While running lesson slides, you can switch back and forth between the activity, the slides, answer keys and other lesson materials.
A sample slide presentation is available for your review. Please log in to view all the class presentations available with your plan..
Lesson 1
The Basics
31 Slides
Lesson 2
Loops and Patterns
36 Slides
Lesson 3
Conditional Logic
39 Slides
Lesson 4
Conditional Loops
26 Slides
Lesson 5
Variables
28 Slides
Lesson 6
Expressions
33 Slides
Lesson 7
Using the Canvas
34 Slides
Lesson 8
User Interaction
25 Slides
Lesson 9
Game Design
30 Slides
Lesson 10
Snake
12 Slides
Lesson 11
Breakout
13 Slides
Lesson 12
Pong
12 Slides
Lesson 13
Final Game
15 Slides