Welcome to Computer Programming 12 

This fast paced course has been designed to build off of the structure introduced in Programming 11. We will revisit familiar units of study but with an entire new level of depth. For example, in Programming 11, we studied HTML and CSS; in Programming 12 we delve into JavaScript (the behaviour side of web development). Everything in this course is unique but relates to a larger whole. We endevour to keep the units covered in the course  'hands on' and useful in order to bring your creative ideas to life. Practicing, building, reverse engineering, software iterations and scaling are all strategies deployed to help you innovate. Although there is some theory in this course, the guiding principles are practical and useful. 

Throughout this course, we will use a simple programming cycle:

LEARN → EXPERIMENT → BREAK → DEBUG → REINVENT → CREATE

Computer Programming 12 - Course Syllabus 2026

Please submit course assignment 'one drive' links into your spreadsheet in the correct 'drop box'

Drop Box - Programming 12 - Block 1  (spreadsheet only)

If you can't make up links for the spreadsheet, then create a folder with your full name on it and drag and drop all your files into this ONE folder only!

Create a one Drive share link - create an 'online' spreadsheet for sharing course assignments 

Create and Share links in ONE drive - A 'how to' guide

Example - T Linburg - (using Google Sheets - but you could use your Microsoft version of Excel) 

T Linburg - grade and assessment link spreadsheet (adjust the share permissions to allow Mr. Linburg to edit) 

MODULE #1 — JavaScript: From Code to Interaction

JavaScript - one of the world's most popular computer language   

Unit Description

We will be starting this unit by completing some structured introductory tutorials to help you learn the language structures; then we will give you actual working JavaScript made by developers for you to break, modify and then improve. 

Finally, we will invent our own apps based upon the skills of other developers. 

History of JavaScript - an interesting read! 

JavaScript intro 1  / JavaScript intro 2

Section # 1 - JavaScript Intro - 'Sandbox' activity

In Programming 11, you learned that HTML gives a webpage structure and CSS gives it appearance. Now we add the third part: JavaScript gives a webpage behaviour.

JavaScript allows a webpage to respond. A button can be clicked, a score can change, an image can move, a menu can open, a game can react to your decisions, and a webpage can retrieve information from somewhere else.

This unit is not about memorizing JavaScript. It is about learning to make things happen.

As mentioned above... we will use a simple programming cycle:

LEARN → EXPERIMENT → BREAK → DEBUG → REINVENT → CREATE

What can JavaScript actually do?

Before studying the language in detail, experiment with some working JavaScript.

Explore:

MDN — What is JavaScript?

W3Schools — JavaScript Tutorial

Experiment with the examples. Change things. Break things. Fix them.

Quick Challenge

Find THREE examples that demonstrate JavaScript doing something interesting.

For each example, answer:

1. What does the program do?

2. What part of the code makes it happen?

3. What happens when you change the code?

Put your responses on a MS Word document and be sure to back up your comments with a code 'snippet' - you can use the snip tool to make a PNG of your screen work and paste into the document. The point here is to explore the resources and to comment on a few different sections of the resource! 

Section # 2    JavaScript Practice - Code Academy 

Sequential Code Academy lessons (free lesson segments - see below) 

 Introduction /  conditionals /  functions /  arrays /  loops /  iterators / objects

Please complete this introductory work on JavaScript:  Code Academy site. Please be sure you have completed the lessons as described above. PLEASE complete all the "free" segments. 

ITERATORS IS NO LONGER REQUIRED FOR CODE ACADEMY. You will submit a screen shot of your 'progress' and your account name put on a word document - and then create a one drive link on your spreadsheet. 

Section # 3   JavaScript "Reinvents"   Utilize existing JavaScript projects to improve their function and design 

Use Code Pen for these project 'reinvents'. Be sure you sign up for an account so that you can save the changes you make! 

Resource Guides 

• reference - W 3 JavaScript - reference guide to functionality and features. 

(*) Note: please write a specific developer comment in the 'redo' explaining what you actually did to improve the function and design!

Project ONE - Reinvent -JavaScript Analogue Clock Due: 

Analogue clock (# 3 Spreadsheet) 

(*) Note: One option is to set up your own Code Pen Account and put your edited projects right on that hosted platform and then send me the link to your finished "reinvent". There are other methods we could discuss in class. 

(*) Note: you may want to move your clock code over to either Visual Studio OR Code Pen if you have your own account. If you just A edit it off of the W3 school's site there is NO save as function!

Edit in W 3 Schools  

• A JavaScript clock - Please make all your changes right on the W 3 browser. Make a minimum of FIVE changes to its look / function / and design. 

• Take a look at these 'far out examples' - that you could use for your inspiration and edits! Go crazy and have fun (look below at the video for links to the ACTUAL coding samples!) - Have fun! 

• Here is another cool clock example!

Project TWO -Reinvent a Digital Clock- Edit HTML / CSS / JavaScript together

 (# 4 - Spreadsheet) Due: 

Use this dreadful looking clock and add TEN dynamic changes to the the clock's design, functionality and behaviour. This might include ONE HTML change / TWO CSS change / and SEVEN JavaScript modifications (i.e. modify a function or change an array)   

Project THREE - Reinvent - Modify the Code Pen version of the game hangman - (# 5 - Spreadsheet) 

Here is a great guide that builds out a game of Hangman - clear instructions (you can use this if you prefer!)

Experiment and make min 10 changes 

• (Proficient) Example changes - to the canvas / colour scheme / 'look and feel' 

• (Proficient) Example changes to the way the game is played (behaviour Javascript) - ie when you button click with the correct letter another event is triggered (eg. fireworks goes off...) 

•  (Extending) Example project 'innovations'- Can you make the classic word game 'Hangman' 'new in some way (eg. the letters are already in the blanks but in a scrambled sequence - maybe you have to move the letters around to make the correct answer

A JavaScript game of hangman - Experiment with this JavaScript version of Hangman. Use the reference guides provided. Try to read through the ENTIRE JavaScript, experimenting and changing it as you go. You are only using this for practice, so break it in all ways that you can think of. All your changes will show in the display at the bottom of the page.

Here is a useful 'textbook' help guide that helps walk you through the code for this game! 

More to come ....stay tuned! :)