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
GeneralSome pages about general JavaScript topics. |
|
| Introduction to JavaScript | 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? |
| Placing JavaScripts | How to add JavaScript to your HTML pages. JavaScript includes. The <noscript> tag. |
| 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. |
CoreJavaScript Core makes JavaScript a programming language. |
|
| Statements | 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. |
| 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 (&&),
OR (||) and NOT (!). |
| Objects as associative arrays | How JavaScript objects are also associative arrays. |
| The this keyword | 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. |
BOMThe Browser Object Model encompasses everything that's not a part of Core, but not a part of DOM either. |
|
| Popups | 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. |
| 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. |
EventsJavaScript events fire when the user takes a certain action. Most scripts start up only after such an action. |
|
| 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 focus
or keydown in addition to mouse events. Which non-mouse events can be paired with which mouse events? |
| 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. |
|
getElements |
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. |
| Level 0 DOM | 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 modificationJavaScript allows you to modify CSS. |
|
| style vs. className | Test script to find the fastest way to change the style of elements: by changing its style
properties or its className. |
| 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. |
| Styling an input type="file" | Can almost be done in pure CSS, but I prefer JavaScript for reasons explained on the page. |
| 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. |