JavaScript for Kids | Coding For Kids

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