JavaScript Tutorial Examples

Visitors since November 21, 2000	by Chip Chapin

View Contents	Click Here to Start

My initial exposure to JavaScript was in 1996 or 1997 via an excellent class taught by my friend and former HP co-worker Dave Elliott, founder of The Web Academy. Unfortunately, I didn't use it for several years and therefore forgot it all. When I decided to re-learn JavaScript, I started by searching the web for JavaScript examples and tutorials and working through them, aided by on-line JavaScript references (I have yet to obtain any JavaScript book in paper form). As I did this I created a series of HTML documents incorporating the various examples, indexed and organized for my own ease of reference.

After adding these JavaScript tutorials to my web site and discovering that people were actually reading them, it has seemed natural to spend some effort polishing and expanding the collection, which project is ongoing. My objective is to present the material in tutorial form, using a uniform format and explanations that fully address the questions I myself had when first working through them. That task is not yet completed, but I'm making steady progress.

At first almost all of these examples were gleaned directly from various sources, with full credit given of course. The rewriting process expands or replaces each example with original content, but I have continued to acknowledge and credit the authors who have helped me learn. It is usually helpful to compare multiple sources so I hope that you, the reader, will follow the links to check out the original examples.

Scroll Down for Contents

Click Here to Start

Resources & References: Links to many useful JavaScript reference sources and learning resources.

Part 1: JavaScript Basics

Example 1-1 -- "Hello World": [cchapin] A most-basic example of adding JavaScript to a web page.
Example 1-2 -- Displaying File Modification Date and URL: [cchapin] Demonstrates how to access and use certain document properties while introducing the Date object and some JavaScript language features.
Example 1-3 -- Controlling Conditional Display of Document Contents: [cchapin] Use JavaScript to control whether or not part of a document should be displayed. Introduces the String and RegEx objects.
Example 1-4 -- Basic Event Handler (Events #1) Revised: [cchapin] Invoke a JavaScript function in response to a user action. Includes a catalog of intrinsic events. Extensively revised and expanded (December 2000).
Example 1-5 -- Validating Forms: [Dr.Clue] Use JavaScript to validate form entries before sending. This is a very basic example that could stand some elaboration.
Example 1-6 -- Animated (image replacement) menus: [Dr.Clue] Mouse over an image, the image changes. Also includes selection code for use as a menu.
Example 1-7 -- Scrolling text window and status bar: [Dr.Clue] Present horizontally scrolling text banner in a text window or in the status bar.

Part 2: Window Management

Example 2-1 -- Floating (remote) windows: [Dr.Clue/Netscape/cchapin] Pop up a separate window to announce something. You can even write its contents on the fly.
Example 2-2 -- Opening a "Webtop" Window: [Netscape] Opens the entire desktop as a window (underneath everything else). Requires Netscape browser, does not work with Microsoft.
Example 2-3 -- Using the "history" object: [cchapin] Some sample code for viewing and manipulating the history of a window. Sorry, it doesn't work right yet :-(.

Part 3: Advanced Event Handling

Example 3-1 -- Catching Mouse Events (Events #2): [Detert/cchapin] Learn to distinguish between Click and Doubleclick. The final event handler is pretty cool.
Example 3-2 -- Handling Events in a Child Window (Events #3): [Goodman/cchapin] Launch a child window and setup event handlers for it. This is a good article, I think. Event handling for Netscape and IE is compared in some practical ways and, using a minimum of conditional branching, code is developed which works on both platforms.

Supplement A: Fun with Images

Example A-1 -- Image Animation w/Speed Control: [Netscape] Uses image replacement to implement animation. Shows how successive frames can be cycled using a timer, and how the delay time can be controlled by the user.
Example A-2 -- Dr. Clue's Image Browser: [Dr.Clue] The good doctor has constructed a little application for browsing thumbnails and displaying full-size images. This example has actually been removed from my site, but the page contains a link to it at Dr. Clue's site.

Supplement B: Menu Systems

Example B-1 -- Listbox Navigation: [Dr.Clue] Use a listbox to navigate to other pages.
Example B-2 -- Dr. Clue's Pop-Up Cascading Menu System: [Dr.Clue] Cascading pop-up menus in an HTML document. This makes use of a large JavaScript package by Dr.Clue.