LESSONS
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13

JavaScript 101

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
Request Quote

Answer Key

Module 5: Create a Slideshow

Open Sample Project

Module 7: Design a Scene

Open Sample Project

Module 9: Draw a Snowman

Open Sample Project

Module 10: Draw Concentric Shapes

Open Sample Project

Module 12: Animation

Open Sample Project

Module 14: Quiz

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

Lesson 7: Using the Canvas

Course: | Web

  • What Is the HTML Canvas?
  • How Do You Set Up the Canvas?
  • How Do You Add Delays?
  • How Do You Add Images?
  • Create a Slideshow
  • What Are Canvas Coordinates?
  • Design a Scene
  • What Is Canvas Drawing?
  • Draw a Snowman
  • Draw Concentric Shapes
  • How Do You Create Timed Loops?
  • Animation
  • Review
  • Quiz

Lesson 7 : Using the Canvas
JavaScript 101

Time: 40+ minutes

Introduction

Commands Introduced

Vocabulary

Objectives

Materials

Warm-Up (5 minutes)

Activities (35 minutes)

Facilitate as students complete all Using the Canvas modules on their own:

1. What Is the HTML Canvas Element? (Document)
2. How Do You Set Up the Canvas? (Document)
3. Writing Your Own Functions (Document)
4. How Do You Add Delays? (Document)
5. How Do You Add Images? (Document)
6. Create a Slideshow (DIY)
7. What are Canvas Coordinates? (Document)
8. Design a Scene (DIY)
9. What Is Canvas Drawing? (Document)
10. Draw a Snowman (DIY)
11. Draw City Concentric Shapes (DIY)
12. How Do You Create Timed Loops? (Document)
13. Animation (DIY)
14. Review (Document)
15. Quiz (Multiple Choice)

Discussion Questions/Follow-Up Activities (20 minutes)

U.S. 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, HSA.CED.A.1, HSA.CED.A.3, MP.1, MP.2, MP.3
  • CSTA: 2-AP-11, 2-AP-13, 2-AP-16, 2-AP-17, 3A-AP-17, 3B-AP-11, 3B-AP-12, 3B-AP-22
  • CS CA: 6-8.AP.11, 6-8.AP.12, 6-8.AP.13, 6-8.AP.16, 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, 6.b

U.K. Standards

Key stage 3
Pupils should be taught to:
  • 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
  • undertake creative projects that involve selecting, using, and combining multiple applications, preferably across a range of devices, to achieve challenging goals, including collecting and analysing data and meeting the needs of known users
  • create, reuse, revise and repurpose digital artefacts for a given audience, with attention to trustworthiness, design and usability
  • understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct, and know how to report concerns
Key stage 4
All pupils must have the opportunity to study aspects of information technology and computer science at sufficient depth to allow them to progress to higher levels of study or to a professional career. Pupils should be taught to:
  • 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
  • understand how changes in technology affect safety, including new ways to protect their online privacy and identity, and how to report a range of concerns