JavaScript - Table of contents

The JavaScript part of my site contains all JavaScript pages. It is by far the largest section of my site.

I have created seven JavaScript categories that follow my book's subdivision: General (chapters 1-4), Core (5), BOM (6), Events (7), DOM (8), CSS modification (9), and Data Retrieval (10).

General | Core | BOM | Events | DOM | CSS modification | Data retrieval


Some pages about general JavaScript topics.
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?
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.


JavaScript Core makes JavaScript a programming language.
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.
Boolean logic is used by all programming languages. It defines the user of AND (&&), OR (||) and NOT (!).
How JavaScript objects are also associative arrays.
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.


The Browser Object Model encompasses everything that's not a part of Core, but not a part of DOM either.
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.
Do not use this script. Newbies often overrate the importance of a browser detect. Read the Object detection page first.
Almost any script that uses a browser detect is incorrect.
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.


JavaScript events fire when the user takes a certain action. Most scripts start up only after such an action.
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.
Compatibility tables for the most common events.
To keep our sites accessible to non-mouse users we must use non-mouse events like focus or keydown in addition to mouse events. Which non-mouse events can be paired with which mouse events?
How to detect the keys the user pressed. The details are messy.
My utility function for simple unobtrusive event handler creation.


The Document Object Model is a model for all objects (HTML tags) in a Web page. You can change this model, and the HTML page will also change.
An introduction to the W3C DOM and its many possibilities. The DOM treee, nodes, how to change them and how to create and delete them.
The most popular resource on my site. What works in which browser?
How to let the user click on a paragraph and let him edit its text in an input box. When the user is ready, the text becomes paragraph again.
This is a very useful script for content management systems. The only flaw is that there is no simple way to send the revised texts to the server.
How to generate a Table of Contents based on the headers in the page. I use this script on every page of my site.
A custom script for getting elements by several tag names in the order they appear in the document. For instance:
var headerList =
Test script to see which method of writing large amounts of content into a page is fastest. I use some pure W3C DOM scripts and some scripts that mess with innerHTML.
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.
How to show and hide form fields based on user actions.
For once the explanation of the script is not on my site. I published the companion Forms, usability, and the W3C DOM article on Digital Web Magazine.
Example script for the way the W3C DOM is going to change the interaction of web sites. In this example the user can choose how many form fields he'd like to see. We web developers don't have to decide on a maximum number any more, the user is completely free to do as he likes.
How to write error messages next to the form field they apply to. This is clearly better than using alerts to show errors.
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.

CSS modification

JavaScript allows you to modify CSS.
Test script to find the fastest way to change the style of elements: by changing its style properties or its className.
This script calculates the actual position of an HTML element on a page.
How to get the default styles of HTML elements. For instance, a paragraph gets a percentual width from a general style sheet. How wide is the paragraph?
Doesn't work perfectly yet, but you can read out some interesting information.
This script changes an entire style sheet, so that you can, for instance, change the text colour of all your paragraphs with just a few lines of code.
Unfortunately there are grave browser incompatibilities that make this technique badly usable for the moment.
Tests that change the opacity of selected HTML elements.
Can almost be done in pure CSS, but I prefer JavaScript for reasons explained on the page.
A drag and drop script that's keyboard accessible.

Data retrieval

How to silently load data into an HTML page. Also goes by the name of Ajax.
How I import the site navigation. The data come from the sitemap.
The functions I always use.