The idea of this tutorial is to be a gentle introduction to event-based programming. The encryption code runs every time a keyup event is received on any of the input boxes. (view source)
I decided to use indexOf/charAt instead of charCodeAt/fromCharCode do do the conversion between letters and numbers, because there are fewer edge cases in the code, and it means there's one fewer concept to worry about.
It is an introduction to using mouse events with jQuery, SVG paths, and Raphael.
It is a pretty interesting example, and I like it a lot. In an attempt to simplify it, I made a jquery version of it here: mastermind.html (view source). The jquery version has a slightly different flavor - less string-hacking and more conceptual stuff.
Unfortunately, I do not think the jquery conversion makes the code easier to understand for a beginner. It uses too many idioms and so it is probably harder.
It uses recursion to fully explore the tic-tac-toe tree and play a perfect game against you. The code is short, but I am concerned it is probably too difficult for kids to understand. The other problem is that (at least on my laptop) IE is too slow to run the AI on move #1 without a "script appears hung" warning.
Nevertheless, "how to program Tic-Tac-Toe" is an extremely common request from the kids, so it goes into the pile of examples.
Let me know if you come up with a way of simplifying the code.
It breaks down the work for drawing a random maze into five functions:
The program is begging to be extended by adding a maze solver.
Maze-making and maze-solving is a good excuse for explaining recursion. Any ideas for a gentler (but interesting) introduction to functions?
The program is an example of a very simple state machine with three states: none chosen, a first item is chosen, and a second item is chosen.
For symbols the game uses a bunch of cute and cryptic Unicode glyphs. This works fine on Windows with its Unicode Times New Roman font. Let me know if this is problematic on other platforms.
A good candidate "first program."
The bits of wisdom are generated madlibs-style, by inserting a random choice out of of a list of words for each of several spots. A simple idea, but the resulting poems are incredibly entertaining to the 3rd-6th grader set.
So we will definitely follow up with the more-advanced (but conceptually the same) dynamic-poem.html (view source) that uses jQuery instead of document.write. That gives the poem the ability to change itself over time.
Click on the button to compute and display the next row of Pascal's triangle. Useful for figuring out how many ways to you can divide up kids into teams or for expanding powers of a binomial.
The code uses a bit of trigonometry to aim the cannon and a bit of physics to provide gravity. It introduces the idea of using timers for animation and hit-testing for collisions. The gameplay is governed by a three-state state machine with an explicit state variable.
I am still looking for more ideas. Let me know if you think of any good beginner-programmer exercises that might be able to distilled down to about 80 lines of HTML.