JavaScript Examples

The best way to improve your ability in any programming language is to study examples. You wouldn't try and learn to write a foreign language without also reading a lot of examples written in that language. Programming is no different.

So with that in mind, these examples document and describe the operation of some JavaScript programs in detail. Of course, the good thing about these JavaScript examples, is that you can actually see them working directly in this web site. Usually, the examples are programs that I've written because I needed the functionality for my own pages or for various teaching purposes. Each example will start with the program used in context and then go on to describe how it's put together and how it works.

Although it is usually good practice to minimize your scripts, removing comments and unnecessary white space, I have not adopted this approach here. Because I hope you will learn from these examples I have also included extensive comments throughout.

Hangman Game

The hangman game is a classic word game. This example works through the design process and a stage by stage implementation so it is easy to see the thinking behind the design and how the application develops.

Details here

Logic Circuit Simulation

This application simulates the operation of a logic circuit to control a seven segment LED. It contains a lot of discussion of the architecture of the solution so, although it's a relatively complex program, it's a good example of how to design and structure an application.

Details here

Web Animations

The next few examples are more focussed on using JavaScript for web effects, in particular using timers to trigger actions in a page.

Animating Background Colour Fade

This example uses timers to fade the background colour of a div. This is a useful introduction to the more complex use of timers and events in the slideshow discussed below.

Details here

Event-Driven Slide Show

This application is an event-driven slideshow that allows multiple slideshows to interact with each other through events attached to the frame transitions.

Details here