Table of contents

The JavaScript part of my site contains all JavaScript pages except for the W3C DOM ones. It is by far the largest part of my site.

I divided the pages in 'Beginner' and 'Intermediate' ones (the W3C DOM being 'Advanced'). If you're new to JavaScripting I advise you to stick to the 'Beginner' pages and understand 80% of them before moving on to 'Intermediate'.

If you're searching for a script that was on the old JavaScript Section but doesn't appear in the table below, see under 'Odds and ends' -> 'JavaScript Archives' in the navigation frame.

Building blocks | Miscellaneous scripts | Forms | Frames and windows | Date and time | DHTML | Events

This page gives an introduction to JavaScript.
The difference between JavaScript and Java. What are the possibilities and restrictions of JavaScript? Security. Which JavaScript versions exist? What about versions? How to debug a script?

Building blocks

These pages are about fundamental features of JavaScript. They don't contain practical scripts but describe techniques that will serve as building blocks for your own scripts.
How to add JavaScript to your HTML pages. JavaScript includes. The <noscript> tag.
A very important concept that beginners should study carefully. If you write a complex script, you start by finding out if your users' browsers support advanced scripting. To do this, you need object detection The page includes a few old case studies.
Statements are JavaScript commands. On this page I describe the two most important ones: if() and for(). You use these statements in any script you'll ever write, so they're worth studying in detail.
Every script you'll write consists of functions. A function is a short series of commands that does something for you. This page details how functions work, what you can expect of them and what they expect from you.
Strings are enormously important, too. A string is a series of characters, like 'Hello!' or 'http://www.quirksmode' or '14'. You often need to read out or change something in a string. This page gives the gory details.
JavaScript is meant to change something on the page. To do this, it needs access to the HTML document, for instance to check user input in a form or to change an image src onmouseover. Therefore all browsers have a Document Object Model, which gives you access to various parts of the document. The Level 0 DOM is the oldest of them. It was implemented in Netscape 2 and 3 and still works in all JavaScript browsers. It gives easy access to forms and their elements, images and links.
Theoretically your JavaScript pages should remain accessible by noscript browsers or non-traditional devices like screen readers. Unfortunately there are no simple general rules to make scripts accessible. Besides, some scripts simply can't be made accessible. This page gives some case studies that will help you understand the issues and devise your own solutions.
Although accessibility is important for beginners, too, I placed this page in the Intermediate class because you have to be familiar with the basics of JavaScript to read or write a good case study.
Boolean logic is used by all programming languages. It defines the user of AND (&&), OR (||) and NOT (!).
Netscape 4 and Explorer 4 each supported their own intermediate Document Object Model, document.layers and document.all. These were meant to support DHTML, the changing of CSS by means of JavaScript. Of course they're as different as DOMs can be. Purpose of this page is to teach you cross-browser DHTML. Therefore this page treats both intermediate DOMs, and also a bit of the W3C DOM.
JavaScript allows you to define your own objects. In general they are completely useless: the browsers automatically generate more than enough objects to keep everybody happy.
This page details the only use of programmer-defined objects that I ever found: creating associative arrays. This page also explains for (var i in object).
this is a very powerful keyword, but hard to use if you don't know exactly how it works. This page treats this in event handling.

Miscellaneous scripts

These are the scripts that aren't easily classified, ranging from golden oldies to experimental new ones.
My version of this golden oldie. Far easier to use than most mouseover scripts, though you'll have to use my naming system.
The sequel to the mouseover. Adds an extra 'clicked' state to your buttons.
window.print() prints out a page, but some browsers don't support this method. This page contains a VBScript that also works in older Explorers.
Do not use this script. Newbies often overrate the importance of a browser detect. Read the Object detection page first.
Any script that uses a browser detect is incorrect.
An extension of my browser detect script that serves to keep multiple versions of Explorer running on the same Windows box apart.
This script checks if a browser has the Flash plugin installed, and if so which version. This script is far simpler and better than Macromedia's one, or any other you can find on the WWW.
Works also for other plugins like Real Player and Acrobat.
How to communicate between ActionScript and JavaScript. ActionScript to JavaScript is easy, JavaScript to ActionScript is far more complicated.
Cookies store information about your users or their preferences. This information is stored in your users' browsers and is available when that particular user visits your site again.
This small script finds text the user has selected with his mouse.
This script writes new content into a layer. It's somewhat buggy in Netscape 4.

Forms

Form influencing is as old as JavaScript. It has remained important up to the present day. In addition, the basics of form handling are not very difficult. Influencing forms is an excellent way to get to know JavaScript better.
An introduction to accessing forms and writing form validation scripts. Details about accessing form elements and finding out what the user has done.
A simple example script that validates a form. I can't give generic scripts for form validation since every form is different and every site needs its own brand of form validation.
Select boxes have become powerful navigation tools. This simple script allows you to switch pages based on the selection of an option.
You can change which options are shown in a select box. This is often useful when you have several select boxes for a complicated navigation or for complicated selection tasks.
Sometimes it's useful to disable a form field. The user cannot enter anything, and in modern browsers gets a visual cue, too. This page includes a workaround for browsers that don't support the disabled property.

Frames and windows

JavaScript allows communication between frames and with windows that are opened by JavaScript. The basics are quite simple, but there are some special cases in which influencing frames or windows is much more complicated.
This page explains how to access other frames.
Popups are windows opened by JavaScript. The advantage is that you can specify the appearance of popups in great detail. The disadvantage is that many users are fed up with popups because often they don't serve any purpose.
Once you opened a popup you can establish communication between the popup and the opening page. This page gives the details.
Creating a customized frameset, in which you can select which pages are loaded into the frames, is useful when you're working with a frames site but nonetheless want to allow 'deep-linking'. I use the script on this site to allow users to enter on any page they like, but within my frameset.
Some site owners wish to claim the content of external sites by capturing it in their own frameset. This script details how you can find out whether this has happened, and how you can bust out of someone else's frameset.
Iframes are inline frames, which means they're shown within a normal HTML page. Accessing an iframe is tricky. This page gives the details.
Parts have moved to the Viewport section. I retain the link here only for backwards compatibility with my old JavaScript Section.
The less interesting part has been moved to the Archives.

Date and time

JavaScript can read out the date and time according to the user's computer. Although this seems quite useful, the illogical date formats we humans use combined with browser incompatibilities in handling daylight saving time and timezones and such make the writing of a serious Date and Time script a very difficult job.
General information. Epoch time, the Date object, the millennium problem.
Finding the date and time and displaying it in a user friendly way.
Finding out if a date a user has entered exists, and whether it lies in the past or the future.
Internet Beat time is a time measurement system that divides the day into 1000 beats of 86.4 seconds each. It creates a truly worldwide time system so that people in wildly different timezones can agree to mail "around @600". This page gives a simple script to calculate the Internet Beat.
document.lastModified gives the last modification date of an HTML page, if the server is configured to send this information. This page gives a script to present last modification information in a user friendly way. I use it on every page on this site.

DHTML

DHTML is the changing of CSS by means of JavaScript. Modern browsers can handle pretty much anything you can throw at them, so you can enliven your page with some well-chosen DHTML effects. These pages give the gory details of cross-browser DHTML scripting and some example scripts.
A detailed explanation of what DHTML is.
The worst DHTML problem is accessing an element. You need no less than three code blocks to do it properly. This tiny script manages element accessing for you. It's my answer to the hideous 100K object oriented junkyard bloatware that's wandering around the WWW in ghostly torment. You don't need a library, just my function and some general DHTML knowledge.
Some simple DHTML examples to show what DHTML can do for you.
Archetypical DHTML functionality: a layer based navigation. When you mouse over a link that has a subnavigation attached, this subnavigation opens.
The script I use in the navigation frame. It's based on the changing of the display style of certain elements.
This script calculates the actual position of an HTML element on a page.
This script creates and manages a scrolling layer for you.
This script manages a 'sticky' menu that appears in the same position every time the user stops scrolling. It's my emulation of position: fixed.
This script creates an interface for bilingual pages. The user selects a preferred language, which is shown large. The other language disappears to the side, but remains clickable. I use this script in, for instance, my my Portfolio or Publications pages.
This script enables and disables entire style sheets, so you can radically change the layout of your pages without a round-trip to the server.

Events

Without event handling there is no JavaScript. Any script waits for a certain user action (mousing over a link, clicking on the Submit button) and then reacts to this event. These pages give a complete overview of event handling, both ancient and modern. There are no example scripts since event handling is ubiquitous. See any other script on this site for a good example.
General introduction to event handling. Overview of the right questions and the right answers.
Detailed description of available cross-browser events.
This page details event handling as supported by Netscape 2 and 3, and hence by all other browsers. Registring event handlers, default actions and the preventing thereof.
This page explains the traditional event registration model, which works in all modern browsers. It also discusses the use of anonymous functions and some drawbacks of the model.
This page discusses the advanced event registration models of W3C and Microsoft. W3C's model is good, Microsoft's isn't.
This page explains how to access an event object. This is necessary if you want to read out event properties.
This page discusses interesting event properties and the severe browser incompatibilities surrounding their use.
This page discusses the two event order models. When the user clicks on a nested element and both this element and its parent element have an onclick event handler, which one fires first?
Detailed treatment of the mouse events: mouseover, mouseout, mousedown, mouseup, mousemove, click and dblclick.
This page details the Netscape 4 event model. It's pretty complicated and even Netscape 4 itself doesn't always follow this model, and its documentation is incorrect at certain points.
Quick compatibility tables for the most common events and event properties. Includes links to the event pages where the properties are discussed.