Javascripts Page

Web Design  Home

In the early days of the Web, surfing was remarkably similar to browsing through a paper publication. Page content was static. One could navigate to other pages and sites via 'hyperlinks' - highlighted portions of text which triggered an http request to the site server, but that was no different in concept from flicking through the pages of a magazine. What was needed was animation, and the first vehicle to deliver this was Java, in the form of small programmes called "Applets" which were embedded in the page.

Useful though it was, Java had its limitations. It was a fully-fledged programming language, with functionality far in excess of that needed by a website designer. A simpler language was needed for these limited applications, and Netscape were first to make one available in the form of "Javascript". Despite the similarity in name, and the fact that they share certain syntactical formats based on C and C++, Javascript and Java are very different languages indeed. In fact, Javascript was originally named "Livescript" by Netscape, but the change to "Javascript" was a clever marketing tactic which capitalised on the widespread interest in Java.

Today very few web pages have embedded applets, but Javascript is still widely used for client-side transactions - some serious, some just for fun. The following scripts examplify some of the things that client-side Javascript is capable of.

Hiragana Test | Katakana Test
These scripts are designed for students of Japanese who are learning the Hiragana and Katakana syllabaries.

GEDCOM Analyser
This script reads data in from a gedcom file and displays a family tree in a folding tree format.

Sortable Table
This script reads data from a text file - in this case stocks.txt, and writes it to a dynamically-created table. Clicking on the table header cells will cause the table to be sorted. The demo is configured to sort numerical values in descending numerical order and text values in ascending alphabetic order. This configuration can be easily modified.

Sortable Table  (XML source)
This version of the sortable table script reads data from an XML file - in this case stocks.xml, and writes it to a dynamically-created table. Table headers are generated automatically from the element names in the XML file.

League Table Demo
This script reads data from a text file (teams.txt) and writes it to a dynamically-created table. As the page loads the table is sorted automatically according to the value in the far right column. Maintenance of the table simply consists of updating the values in the database teams.txt.

DOM Tree Analyzer
This utility will display the DOM tree for an HTML file of your choice. Both static and dynamically-written elements will be displayed.

XML DOM Analyzer
This script generates the tree structure of an XML file (an XSL stylesheet testfile.xsl is provided to illustrate the scope of the script.) The script suppresses #text nodes as these are treated differently by Internet Explorer and Mozilla depending upon whether they represent whitespace only. The script caters for 8 levels of element nesting.

Drop-down Menubar | Floating Menubar
These scripts generate drop-down menu bars. The floating menubar maintains its position as the page scrolls.

Card Index
An interesting script which simulates a card index file and could be used as a menu.

Fade-in Text
A demonstration of how to achieve a Flash-like text fade effect using javascript.

Marquee Banners
The <MARQUEE> tag introduced by Microsoft did not gain acceptance as a standard. Consequently if you wish to have a cross-browser marquee on your site you have to make one yourself.

Rabbit calculator
A bit of fun, but with a serious side, demonstrating some aspects of object-oriented programming in javascript.

An example of the power of javascript!

Triangle Generator
Another piece of mathematical fun.

Ticker Tape Scrollers
Fancy a ticker-tape scroller on your site?

Colour Selector
A utility to help you find just the right shade for your colour scheme.

Family Tree Maker | Binary Tree Maker
These scripts can be used to display family trees. The binary tree is used to show a person's ancestors rather than descendants.

Image Rollover
An old javascript favourite!

Currency Converter | Roman Date converter
Two conversion scripts.

Towers of Hanoi
A drag and drop version of this old favourite.

Reaction Tester
Are you fit to drive? - this utility will tell you!

Web Design  Home