davidbau.com

Tutorial: Caesar Cipher

Another javascript tutorial for middle-schoolers, based on Shakeel's idea. The short file caesar-cipher.html implements a simple Caesar Cipher in javascript, rotating letters of cleartext into ciphertext by shifting them by a fixed number.

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.

Tutorial: Polygon Drawing

Continuing the Javascript tutorial series, based on MWinser's observation that 'drawing simple graphs' was a launching off point for him.

Here is a simpler variant: polygon-drawing.html is a 50-line program (view source) that lets you experiment with drawing polygons on the screen. The user can click or enter SVG path syntax directly.

It is an introduction to using mouse events with jQuery, SVG paths, and Raphael.

Tutorial: Mastermind

Terran implemented a nice 80-line Mastermind implementation in javascript here.

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.

But maybe it is useful as an advanced example some jquery and javascript tricks. What do you think? Is there a simpler way?

Tutorial: Tic Tac Toe

Continuing with the javascript tutorials - tic-tac-toe.html (view source) is an example of a bare-bones board game AI.

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.

Tutorial: Maze Maker

The tutorial maze-maker.html (view source) is an introduction to functions.

It breaks down the work for drawing a random maze into five functions:

• fillsquares sets up a global array with a grid of SVG squares.
• setcolor sets the color of a single square at position (x, y).
• getcolor returns the color of a single square at position (x, y).
• shuffled returns a shuffled copy of an array.
• makemaze draws a random maze in the grid using recursion.

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?

Tutorial: Histogram

Another javascript tutorial: histogram.html (view source) is a program to let you play with the probability distribution of rolling five dice. Its code is a brief demonstration of how to call Math.random() and how to organize basic coordinate geometry on the screen.

Tutorial: Concentration

Another 80-line javascript tutorial: concentration.html (view source) lets you test your memory by trying to find pairs of symbols. When you miss a pair, it flips them back to black after a second. How well can you do?

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.

Tutorial: Custom Poem

A good candidate "first program."

The kids love custom-poem.html (view source), which uses document.write to produce a one-of-a-kind custom poem just for you. Refresh to get a new poem.

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.

I chatted with one of the kids who will be in my trial "programming class," and I was floored to hear this sixth-grader say - without me mentioning jQuery at all - that he "wants to learn jQuery." When I pointed him to Douglas Crockford's talks about the good parts of Javascript, he said, "oh yeah, I've watched that."

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.

Tutorial: Pascal's Triangle

Arrays can be mysterious if you have never used them before. Here is a simple introduction: pascals-triangle.html (view source).

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.

Tutorial: Cannon Game

The canonical cannon game in 80 lines of javascript: cannon-game.html (view source). Move the mouse to aim, and click to fire the cannonball. If you hit the target, it gets moved and you can test your artillery skills again.

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.