General | Core | BOM | Events | DOM | CSS modification | Data retrieval
|Object detection||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.|
|Functions||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||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||Boolean logic is used by all programming languages. It defines the user of AND (
|The this keyword||
BOMThe Browser Object Model encompasses everything that's not a part of Core, but not a part of DOM either.
|Browser detect||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||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.|
|Introduction to events||General introduction to event handling. Overview of the right questions and the right answers.|
|The events||Detailed description of available cross-browser events.|
|Early event handlers||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.|
|Traditional model||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.|
|Advanced models||This page discusses the advanced event registration models of W3C and Microsoft. W3C's model is good, Microsoft's isn't.|
|Event accessing||This page explains how to access an event object. This is necessary if you want to read out event properties.|
|Event properties||This page discusses interesting event properties and the severe browser incompatibilities surrounding their use.|
|Event order||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?|
|Mouse events||Detailed treatment of the mouse events: mouseover, mouseout, mousedown, mouseup, mousemove, click and dblclick.|
|Event compatibility tables||Compatibility tables for the most common events.|
|Event pairs||To keep our sites accessible to non-mouse users we must use non-mouse events like
|Detecting keystrokes||How to detect the keys the user pressed. The details are messy.|
|addEventSimple||My utility function for simple unobtrusive event handler creation.|
DOMThe 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.
|W3C DOM Introduction||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.|
|W3C DOM Compatibility Tables||The most popular resource on my site. What works in which browser?|
|Edit text||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.
|Table of Contents||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 = getElementsByTagNames('h1,h2,h3');
|W3C DOM vs. innerHTML||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.|
|Introduction to forms||An introduction to accessing forms and writing form validation scripts. Details about accessing form elements and finding out what the user has done.|
|Example form||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.|
|Usable forms||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.
|Extending forms||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.|
|Form error messages||How to write error messages next to the form field they apply to. This is clearly better than using alerts to show errors.|
|style vs. className||Test script to find the fastest way to change the style of elements: by changing its
|Find position||This script calculates the actual position of an HTML element on a page.|
|Get styles||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.
|Change style sheet||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.
|Opacity setting||Tests that change the opacity of selected HTML elements.|
|Drag and drop||A drag and drop script that's keyboard accessible.|
Data retrievalHow to silently load data into an HTML page. Also goes by the name of Ajax.
|Importing the site navigation||How I import the site navigation. The data come from the sitemap.|
|XMLHttpRequest functions||The functions I always use.|