The DOM defines each object on a Web page (images, text, forms,
links, etc.) and also defines what attributes are associated with these objects
and how they can be manipulated. Using the DOM will encourage you to write
proper HTML and make it easier to use JavaScript on your pages for
interactivity. According to Webopedia, the DOM is:
the specification for how objects in a Web page (text,
images, headers, links, etc.) are represented. The DOM defines what attributes are
associated with each object, and how the objects and attributes can be
manipulated. Dynamic
HTML (DHTML) relies on the DOM to dynamically change the appearance of Web
pages after they have been downloaded to a user's browser.
As usual, I'm going to link here to several explanations. Find
the one that suits you best. You're trying to develop an accurate mental model,
so if you read them all, you might find that the repetition helps.
As these articles point out, the DOM isn't something you
memorize. It's a way of thinking about web pages. Even the experts keep a
reference guide handy to look up what methods and properties go with which
objects.
The best from-scratch explanation I can find is Chapter 17: The
Document Object Model
of David Flanagan's book for O'Reilly titled JavaScript: The Definitive Guide.
The three articles below will give you interesting points of
view that may make your mental model more accurate.
Intro
to the Document Object Model
by Taylor
Webmonkey, August 12, 1997
A Gift of
"Life": The Document Object Model
by Pankaj Kamthan
IRT.org, January 15, 1999
The Document
Object Model Dissected
by Aaron Weiss
Web Developer's Virtual Library, November 19, 1998
To learn more, you can turn to the official specs from the W3C, but as
usual, they're written in less than clear English.
After you make it that far, you're ready to learn about the
differences between the two major browsers, though it remains to be seen how
popular Netscape 6 will be.
Then try Makiko Itoh's Preparing for
standard-compliant browsers from Digital Web magazine. Note: Concentrate on
the W3C and IE material and ignore the Netscape 4 material because it's outdated
now. Finally, take a look at Introduction to the DOM of IE
5/ NS 6 by Timothy Francis Brady on Website Abstractions' site.
JavaScript
After you get a sense of the DOM, you're ready for JavaScript Tutorials, also
from Website Abstractions. Start with the JavaScript Primer.
The best way to learn JavaScript is to adapt someone else's
script. Personally, I went to Web sites such as JavaScript Source and copied and
pasted the free JavaScripts there.
To learn how to read JavaScript, I went to Webmonkey,
as usual. The first tutorial will get you started. You should also read:
How
to Steal JavaScript
by Nadav Savio
"Borrowing" JavaScript code is easy. Making it
work on your own pages, however, can prove difficult. Nadav reveals what you
need to know to make those pirated scripts sail.
That's how I learned and how I recommend that you learn: adapt, emulate, pirate, steal
JavaScript and learn only enough theory as you go along to make it work.
The doctor is in! Doc
JavaScript
About.com's JavaScript section
JavaScript Corral
JavaScript
for Non-Programmers
by Andrew Starling
WDVL, May 13, 2002
It's possible to use JavaScript in your Web pages without
spending months at night-school learning how the language works. Some scripts
are plug and play - drop them in the right place on your HTML page and they'll
work straight away. Others need only a small amount of customisation to meet
your needs. Here we take a look at JavaScript from a non-programmers point of
view.
Trouble with JavaScript?
Type JavaScript: into the Navigator address bar and press Enter.
A JavaScript window will appear, displaying a list of errors encountered and the
line number of the error(s). If you open your HTML file and count the lines of
text from the top, you'll locate the probable cause of the error.
interesting JavaScript
No right click
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer'
&& (event.button == 2 || event.button == 3)) {
alert("Copyright (c) 1999-2000 Annoying Online Marketing,
LLC. All Rights Reserved.");
return false;
}
return true;
}
drop-down menu with hot selections
JavaScriptSource.com,
for example, make this drop down
menu
Charts
Drawing
Charts with JavaScript
by Russell Bloom
WebReference.com
Dynamic HTML
Combine JavaScript and CSS -- Cascading Style Sheets -- and you
get dynamic HTML or dHTML.
AmazingHTML
Dynamic Drive -
"The future of JavaScript, Today." In the categories, click on mouse
trail effects and try them all.
The Dynamic Duo
- check out the demos and games on the lower right.
Have you ever
experienced dHTML? Thomas Brattli's Portfolio -
My name is Thomas Brattli, I am 21 years old and I live in
Northern Norway in a small town called Tromsoe.
Netscape's Dynamic HTML
Resources
WebReference's Gallery of
Hierarchical Menus
Pop-Up menu creator
A DHTML Menu creation program that allows webmasters to add
to their pages an easy to use and very impressing navigational menu. It creates
impressive DHTML menus with a WYSIWYG user interface.
Creating your own menu and installing it on your page is an extremely easy task;
the Pop-Up menu creator has build-in wizards which will guide you through the
menu creation and menu installation.
Java applets
Difference between Java (from Sun Microsystems) and JavaScript
(from Netscape). Sharon's snow scene.
Andy's moving
logo. Sources: Java Boutique.
where to find one
Internet.com's Java
Boutique
JavaPowered.com
Your source for hundreds of Free Java Applets. JavaPowered
is updated every week with new applets and web design resources free for the
picking. We got tips and info on Flash / SWF content too. So take advantage of
these resources and enhance your web page design. - Hey, rock-it to the next
level!
6sense.com
If you're looking for some of the best free java applets,
you've come to the right place. Here you will find some awesome graphics effect
applets created to be visually appealing.
how to use one
How to
Add Java Applets to Your Site
Internet.com's JavaBoutique
A lot of sites feature Java applets, and if you've been
searching through the Java Boutique's applet library, you may have found an
applet you'd like to add to your own site. This guide will help you to do just
that, and will point out some common problems and tips to simplify the task.
Adding an
applet
JavaPowered.com
First, you need to understand what applet components are
requirements for your webpage . . . And then, the required HTML
statement/instructions to bring your applet to life. You will then be able to
install, modify and use these baby "Java Applications" with no
difficulty.
how to make one
Java
Applet Basics
By Anand Narayanaswamy
This quick tutorial offers you the bare-bones basics.
OpenCube's Applet
Composer $$$
Visually Design your web site's ideal navigation system and
presentation effects with OpenCube's Applet Composer. The included effects have
been engineered to be lightweight, fast loading, fully cross browser compatible,
and highly customizable.
Server-Side Scripting
CGI World.Com - Your
Source for Web Based Software and Content Management Tools
HotScripts.com
Compiles and distributes Web programming-related resources,
geared toward webmasters, developers and programmers looking for enhancing their
Web sites and intranets with dynamic development tools.
The CGI Resource Index
DOM
