Course Outline

• Project 1: The Joke Generator Application

• Learners are introduced to basic programming concepts while they complete a program that displays a joke setup and the joke punchline when buttons are clicked. 

• Lesson 1 – The JavaScript Console

• Learners understand how HTML, CSS and JavaScript are related. They are introduced to concepts such as web pages, websites, web browsers, the World Wide Web, and the Internet. They explore how JavaScript is used to create browser interactivity. They learn to output strings and numbers in the browser console perform basic string operations

• Programming Objectives: 

• Define programming

• Describe sequences in programming
   

• Lesson 2 – User Inputs in JavaScript

• Learners understand the concept of variables in programming. They learn to assign variables to user input values and explore different mathematical and string operations that can be done on variables. They understand how to declare, initialize, update, and access variable values in their programs. They are also introduced to basic manipulation of HTML elements using JavaScript

• Programming Concepts:

• Define variables in program

• Declare and initialize variables in JavaScript

• Manipulate HTML element content using JavaScript

•  

• Lesson 3 – Variables in JavaScript

• Learners explore variables in more detail. They understand how to perform basic mathematical operations on values, and how to perform string operations such as concatenation. They examine the Joke Generator application and decompose the output into constituent elements. 

• Programming Concepts:

• Perform mathematical operations on values in JavaScript

• Updating variable values and accessing them in JavaScript

• Perform string operations such as concatenation

• Define ‘expressions’ and ‘statements’ in programming
   

• Lesson 4 - Functions

• Learners understand the concept of functions in programming, and how they enhance code reusability. They explore built-in JavaScript functions and learn how to declare new functions. They understand the concept of function parameters, function arguments, and function return values. They complete developing the Joke generator application. They learn to add buttons to their web pages and define ‘button’ click functions.

• Programming Concepts:

• Define functions in programming. Identify built-in functions

• Define function parameters and function arguments

•  

• Debugging Challenge 1

•  

• Project 2: Day and Night

• Learners explore the concept of selections as control flow structures while developing an application that prompts a user to enter a random time and displays a different web page based on whether it is ‘day’ or ‘night’ 

•  

• Lesson 1 – Introduction to Selections 1

• Learners examine the ‘day and night’ application output and decompose the output into sub-tasks that can be programmed independently. They define the ‘day’ and ‘night’ functions and understand the concept of conditional statements (selections) in programming.

• Programming Concepts:

• Declare functions 

• Define selections in programming
   

•  

• Lesson 2 – Introduction to Selections 2

• Learners explore the ‘if-then’ and ‘if-then-else-if’ conditional statements in JavaScript. They understand how to evaluate conditions and execute different blocks of code based on the evaluations. They develop flowcharts that represent these conditions and use these statements to complete the ‘day and night’ application.

• Programming Concepts:

• Use ‘if-then’ conditional statements

• Use ‘if-then-else’ chained conditional statements

•  

• Project 3: The Ball Catcher

• Learners are introduced to the p5.js JavaScript library. They learn how to draw shapes and animate them. In this process they explore the concepts of iterations/loops in programming and how they control program flow. They decompose the ‘Ball Catcher’ game into sub-tasks, understand the gamification aspects in the application and develop the game from scratch. The game involves a falling ball that falls from random positions on the screen. Users control a ‘ball catcher’ object with the mouse and attempt to catch the falling ball and score points. 

•  

• Lesson 1 – Introduction to p5.js

• Learners understand the concept of libraries and are introduced to the p5.js JavaScript library. They explore a few built-in functions in this library and understand how to create a Canvas on which animations can be displayed. They are introduced to the concept of ‘iterations’ in programming and understand how these control structures can be used to create animations.

• Programming Concepts:

• Define iterations/loops in programming

•  

• Lesson 2 – Drawing in p5.js

• Learners explore the p5.js Canvas and understand how to use the coordinate system to define points and positions on the Canvas. They learn to draw simple shapes on the Canvas and use iterations along with the position coordinates of the shapes to animate them.

• Programming Concepts:

• Use iterations to animate objects on the Canvas
   

• Lesson 3 – Animation in p5.js

• Learners explore animation in p5.js in greater detail. They learn to use iterations to simulate a falling ball. They are introduced to the concept of random numbers to randomly change the position of the ball as it falls each time. They understand how iterations and iteration variables can be used to change the speed of the falling ball. 

• Programming Concepts

• Use iterations and iteration variables to animate objects on the Canvas

•  

• Lesson 4 – Gamification in p5.js

• Learners complete developing the ‘ball catcher’ game. They understand how to use built-in mouse position variables to control the movement of the ‘ball catcher’. They use variables to add a scoring system and understand how to use functions to add a scoring system to the game. They develop a basic collision detection system that uses the positions of objects to detect collisions between them. 

• Programming Concepts:

• Declare, initialize, update, and access variables

• Declare and invoke functions

•  

• Debugging Challenge 2
   

• Project 4: Rock Paper Scissors

• Learners decompose the Rock Paper Scissor output and develop the game from scratch. In this process, they learn how to load and add images in p5.js and use iterations, selections, variables, and arrays to define the logic of the game.

•  

• Lesson 1 – Rock Paper Scissors Design

• Learners decompose the Rock Paper Scissors output and define the layout of the game. They understand how to load images and place them on the Canvas in two columns, one representing the player’s choices and the other representing the computer’s choice.
   

• Lesson 2 – Rock Paper Scissors Mechanics

• Learners are introduced to the concept of JavaScript arrays. They use arrays to store images of Rock, Paper, and Scissors. They develop the game logic for the player’s turn such that the required image (rock paper or scissors) is moved to the center of the screen based on the user’s choice and the required image is moved to the center of the screen based on the computer’s choice.
   

• Lesson 3 – Rock Paper Scissors Gamification 1

• Learners use multiple chained ‘if else’ conditional statements to define how the result of a round is declared based on the player’s and computer’s choices.

•  

• Lesson 4 – Rock Paper Scissors Gamification 2

• Learners complete developing their game and add a system to declare the results of each round. 

•  

•        5.   Debugging Challenge 3

•  

• Project 5: Design Challenge

• Learners attempt to decompose and develop the design challenge output. This involves creating an animation of a randomly moving ball that bounces off the edges of the Canvas. Each time it collides with a Canvas edge, the ball color and the Canvas background color change randomly. 

•  

• 1. Design Challenge - Design

• Learners decompose design challenge output and break it down into sub-tasks. They define the variables and functions required for the output. They are introduced to the concept of 'time' in p5.js.

•  

• 2. Design Challenge - Prototype

• Learners use iterations, conditionals, expressions, operations, statements, etc. to complete developing the output for the design challenge.