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
General
Some 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.
Core
JavaScript 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 (
!).
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.
BOM
The 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.
Events
JavaScript 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 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?
addEventSimple
My utility function for simple unobtrusive event handler creation.
DOM
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.
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.
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.
getElementsByTagNames()
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.
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 modification
JavaScript 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.
Data retrieval
How to silently load data into an HTML page. Also goes by the name of Ajax.