JavaScript for Kids

Intended Audience

  • A minimum of Grade 7 is required to do this course

What do I need?

  • If Live Online Training : A laptop, and a stable internet connection. The recommended minimum speed is around 10 Mbps.
  • If Classroom Training : If you are not brining your own laptop (recommended), please let us know so we can have one ready for you.

Certification

  • A progress report will be issued for an incomplete year
  • After all classwork is completed, and the assessments passed, a Competency Certificate will be issued

Duration

  • 6 Months (20 one hour lessons, 10 per term, one per week)
  • Crash Course This course can be crashed over a periond of 1-2 weeks full-time

Outcomes

  • Know how Web Pages are created
  • Know how to seperate content and style
  • Use web standards
  • Create great-looking web pagesr
  • Build modern layouts

One

Getting Started with JavaScript

    Working in JavaScript
    • Choosing a JavaScript Editor
    • Picking your test Browser
    Writing your First JavaScript Program
    • Embedding your JavaScript code
    • Creating Comments
    • Using the alert()method for output
    • Adding the semicolon
    Introducing Variables
    • Creating a variable for data storage
    • Asking the user for information
    • Responding to the user
    Using Concatenation to Build Better Greetings
    • Comparing literals and variables
    • Including spaces in your concatenated phrases
    Understanding the String Object
    • Introducing object-based programming(and cows)
    • Investigating the length of a string
    • Using string methods to manipulate text
    Understanding Variable Types
    • Adding numbers
    • Adding the user's numbers
    • The trouble with dynamic data
    • The pesky plus sign
    Changing Variables to the Desired Type
    • Using variable conversion tools
    • Fixing the addInput code

    Two

    Talking to the page

    Understanding the Document Object Model
    • Previewing the DOM
    • Getting the blues, JavaScript style
    • Writing javaScript code to change colors
    Managing Button Events
    • Adding a function for more ...functionality
    • Making a more flexible function
    • Embedding quotes within quotes
    • Writing the changeColor function
    Managing Text Input and Output
    • Introducing event-driven programming
    • Creating the HTML form
    • Using getElementById to get access to the page
    • Manipulating the text fields
    Writing to the Document
    • Preparing the HTML framework
    • writing the JavaScript
    • Finding your inner HTML
    Working with Other Text Elements
    • Building the form
    • Writing the function
    • Understanding generated source
    • What if you're not in Chrome?

    Three

    Decisions and Debugging

    Making Choices with If
    • Changing the greetings with if
    • The diferent flavors of if
    • Conditional Operators
    • Nesting your if statements
    • Making decisions with switch
    Managing Repetition with for Loops
    • Setting up the web page
    • Initializing the output
    • Creating the basic for loop
    • Introducing shortcut operators
    • Counting by fives
    • Understanding the Zen for loops
    Building While Loops
    • Making a basic while loop
    • Getting your loops to behave
    • Managing more complex loops
    Managing Errors with a Debugger
    • Debugging with the interactive console
    • Debugging Strategies
    • Resolving syntax errors
    • Squashing logic bugs

    Four

    Functions, Arrays and Objects

    Breaking Code into Functions
    • Thinking about structure
    • Building the antsFunction.html program
    Passing Data to and from Functions
    • Examining the makeSong code
    • Looking at the chorus
    • Handling the verses
    Managing Scope
    • Introducing local and global variables
    • Examining variable scope
    Building a Basic Array
    • Accessing array data
    • Using arrays with for loops
    • Revisiting the ants song
    Working with Two-Dimension Arrays
    • Setting up the arrays
    • Getting a city
    • Creating a main()function
    Creating Your Own Objects
    • Building a basic object
    • Adding methods to an object
    • Building a reusable object
    • Using your shiny new objects
    Introducing JSON
    • Storing data in JSON format
    • Buiilding a more complex JSON structure

    Five

    Getting Valid Input

    Getting Input from a Drop Down list
    • Building the form
    • Reading the list box
    Managing Multiple Selections
    • Coding a multiple selection select object
    • Writing the JavaScript Code
    Check, Please: reading Check Boxes
    • Building the form
    • Reading the list box
    Managing Multiple Selections
    • Coding a multiple selection select object
    • Writing the JavaScript code
    Check, Please: Reading Check Boxes
    • Building the check box page
    • Responfing to the check boxes
    Working with Radion Buttons Interpreting Radio Buttons Working with Regular Expressions
    • Introducing regular expressions
    • Using Characters in regular expressions
    • Marking the beginning and end of the line
    • Working with special characters
    • Conducting repetision operations
    • Working with pattern memory
    New HTML5/CSS3 Tricks for validation
    • Adding a pattern
    • Marking a files as required
    • Adding placeholder text

    Six

    Drawing on the Canvas

    Canvas Basic
    • Setting up the canvas
    • How canvas works
    Fill and Stroke Styles
    • Colors
    • Gradients
    • Patterns
    Drawing Essential Shapes
    • Rectangle functions
    • Drawing text
    • Adding shadows
    Working with Paths
    • Line-drawing options
    • Drawing arcs and circles
    • Drawing quadratic curves
    • Building a Bezier curve
    Images
    • Drawing an image in the canvas
    • Drawing part of an image

    Seven

    Animations with the Canvas

    Transformations
    • Building a transformed image
    • A few thoughts about transformations
    Animation
    • Overview of the animation loop
    • Setting up the constants
    • Initializing the animation
    • Animate the current frame
    • Moving an element
    • Bouncing off the walls
    Reading the Keyboard
    • Managing basic keyboard input
    • Moving an image with the keyboard
    Back to top