Examples
All examples on this page and elsewhere in my JavaScript tutorial are provided free of charge. Please see the terms and conditions page for terms of use.
These examples are all useful in their own right but when used together can produce spectacular results. I will leave that to your own creativity.
Note that the syntax highlighted source of all the header files I use in these examples, as well as several others, is available on my JavaScript libraries page. The header files can also be downloaded from there.
The header file scripts are meant to be real scripts for real use, not tutorials. I have included them on this page as they can be viewed as examples of real programming, not lessons on how to program. I agree that they are not always easy to read, but that is mainly because they are optimised for real use. You may choose to see this as a bad programming method, but I do not, as I can always see what I was intending for the script to do, and it helps to cut down on the transmitted file size, something which modem users are always happy for.
To give you an example of a more 'friendly' format, which is easier to use as a learning aid, one of my readers has kindly produced a reformatted version of my generic re-writable elements script, which is included in the email they sent me.
Non DHTML
The most popular use of JavaScript; changing images when the mouse hangs over a link
The next most popular use of JavaScript; opening new browser windows
The next most popular use of JavaScript; writing dynamic content
The next most popular use of JavaScript; checking forms
Slightly less used but just as useful, retaining variables from one page for use on another page
- Complicated string manipulation, taking variables from the location bar.
- Creating, reading and modifying cookies.
Some specialist scripts
- Form manipulation, offering the correct countries for a continent.
- More form manipulation, expandable tree structure.
The most irresponsible script
- Browser sniffing - to be used only to help avoid browser specific bugs, not to determine capability.
DHTML
Appearing / disappearing content
- Popup Menus.
- Popup Menus with delay - see Gecko engine bug.
- Auto-generation Popup Menus with delay - Gecko engine bugs removed.
- Tooltips.
Movable content
- Tooltips.
- Static logo.
- Falling objects (snow).
- Flying stars (changes apparent size of div elements).
- Fireworks (demonstrates changing colour).
- Analogue clock.
Mouse trails
Rewritable document content
W3C DOM
- Importing XML data files - a very advanced scripting topic.
- Solitaire game - a very advanced script.
These scripts any many more are included on my JavaScript libraries page. The page also contains several utility scripts, which you may find useful for your Web development. Please see the terms and conditions page for terms of use.
Games
Ok, so they are far too complicated to be examples, but all of the principles are the same as I have described in these tutorials. These games require various different technologies like HTML, CSS, DHTML, etc. Not all browsers will be able to use all of the games, in particular the 3D games, because they are demanding on resources. The simpler games may even work in archaic browsers like Netscape 3.
These games are all on my games site.
Last modified: 19 March 2011