Computer Programming 12 - Fall / Winter 2024

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 practical with the goal of giving you the skills to bring your own creative ideas to life. Practicing, building, reverse engineering, iterations and add on's are all strategies we deploy to help you innovate. Although there is some theory in this course, the guiding principles are practical and useful. I do hope that you enjoy this course and that you have a lot of fun along the way! 

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

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

Create a one Drive share link - create an 'on line' 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  - Introduction to JavaScript     

Part ONE and TWO 

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 'sandbox' 

(# 1 - Spreadsheet) Due:

W 3 Schools Introduction to Java script structures 

In our very first introduction we will be using the W 3 for schools site to learn more about the history of JavaScript and to learn how its constructed. Please load the web site and do one or two 'try this' for each segment. Please try to 'break the code' and change it up anyway you see fit....and see what happens? Be sure to read through each of the segments but the threshold for completing exercises here is not very high. Think of this as an 'interactive' intro. 

Please share your insights from THREE of the exercises (you should include some specific script reference). (half a page or more) (Please try to look through 12 sections) 

Section # 2    JavaScript Practice - Code Academy (# 2 - Spreadsheet)

Due: 

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

 Introduction /  conditionals /  functions /  arrays /  loops /  classes  / 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!

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

Please put your final renditions into Visual Studio (add the JavaScript extension) Please add a developer comment outlining the specific changes you made to the clock. 

In this segment of JavaScript, we'll be working with CODE PEN and other resources to experiment with novel and creative uses for JavaScript. 

Resource Guides 

(*) 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 Clock Due: 

(# 3 Spreadsheet) - Analogue clock (one), Digital Clock (one)  

(*) 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 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. Try to 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!

 (NOTE: we might use a different platform for this project - stay tuned) 

Additional activity resources

Project TWO -Reinvent - Edit HTML / CSS / JavaScript together (# 4 - Spreadsheet) Due: 

Take this dreadful looking clock and related message boxes and make TEN dynamic changes to the look and behaviour. This could include ONE HTML change / ONE 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)

Experiment and make 10 to 15 changes

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!