JavaScript and DOM

JavaScript is a scripting language invented by Brendan Eich who worked at Netscape Communications at the time and is now chief architect of the Mozilla project. He called his language "JavaScript" because the syntax sorta looked like the syntax of Java. Microsoft called their version of JavaScript JScript. But Microsoft's own web browsers don't complain if you call it JavaScript.

JavaScript is a lightweight language that adds capability and delight to web pages. It's perhaps most useful when it manipulates the web page itself. There are serveral ways to do that, but the most stable (and not coincidentally, the most standards-conformant) is through the Document Object Model (DOM).

JavaScript is a client-side scripting language. That means your web browser downloads the script and runs it inside its "sandbox" and displays the results in the web browser. So if you want to play with the document or if you want to do everything right there in the web browser instead of jumping back to the server all the time, JavaScript is a good choice. If you want to access some resources on your web server, you probably want to look at our sections on CGI and Active Pages.

That ought to be enough prolog. Let's look at some resources to turn you into a JavaScript and DOM master.

JavaScript

Using Mozilla in Testing and Debugging Websites
Web builders need some different tools than web surfers, but they shouldn't neglect their old favorites, especially when those favorite tools have capabilities and add-ons that can make them especially useful to web builders. Henrik Gemal talks about using Mozilla as part of your toolkit.
comp.lang.javascript FAQ
Frequently Asked Questions for the USENET newsgroup comp.lang.javascript. Also has information on the DOM.
ECMA-262
The European Computer Manufacturers' Association (ECMA) standardized the JavaScript/JScript language syntax in their standard ECMA-262, which is available free at their website. This is just the language manual. It has nothing about the DOM, so if you leaf through the manual looking for "document.write()" and don't find it, that's why.
Write Your Own Bookmarklets
Bookmarklets are useful little JavaScript scripts, about medium in difficulty, that people can attach to their own browsers just like links. Troels Jakobsen tells you how to write your own bookmarklets.
JavaScript Tutorial and Links
Douglas Crockford's excellent tutorials. He treats JavaScript like it was a programming language, which is a nice change.

The Document Object Model

Introduction to the Document Object Model
At Brainjar. Follow it up with their tutorial on DOM Events.
DHTML Tutorial
At w3schools.com. A while back the browser companies started calling JavaScript that played with the webpage "Dynamic HTML" or "DHTML". Since there wasn't really anything to it except good old JavaScript, CSS, and the DOM, it was a terrible name for it. From time to time Microsoft tried to add ActiveX controls to the mix, and if any of them had lived any longer than a lightning bug's flash, DHTML might have been a sensible name. Anyhow, this tutorial is mostly about the DOM, so it goes on this list.
Howtocreate's W3C DOM Tutorial
At howtocreate.co.uk. Part of a JavaScript tutorial, and a very clear introduction.
Quirksmode DOM Articles
This is a step beyond the elementary level, and perhaps the best thing about it is the compatibility tables that show how each of the popular web browsers support the DOM. You can save hours by finding out that something that isn't working in your favorite browser is a browser bug, not a script bug.
W3C DOM Specs and Resources
These are without a doubt the most maddening specs we have ever seen or hope to see. If you can follow the trail through the sections, it's all there, and it's the truth, and later on when you've mastered the DOM you might even be able to use this spec, but for learning it's useless. Try any of the tutorials instead.
Introduction to the DOM Inspector
Ian Oeschger's article explaining the lovely Mozilla (and Firefox) tool, the DOM Inspector. We're Opera fans, but we think the DOM Inspector might very well push Firefox into the top spot as the browser we use the most for web development.
Scripting Projects
Angus Turnbull's collection of useful goodies: menus, tooltips, tree viewers, all cross-browser and all free (the license requires you to credit the author).
Gecko DOM Reference
Gecko is the rendering engine used in AOL-Compuserve, AOL for OS X, Camino, Firefox, IBM for OS/2, Mozilla, and Netscape 6+. This applies to all those browsers.