The Four Partners of DHTML
Dynamic HTML is the implementation of four language
specifications - HTML, CSS, DOM, and JavaScript. Each has
its own place within the modern document. Each covers one or
more parts pertaining to the presentation of your completed
document. In a nutshell HTML is for object placement, CSS is
for coloring and formatting, DOM is the link between HTML /
CSS and JavaScript, and JavaScript is the workhorse of your
document. The below sections delve into this symbiotic
relationship in more detail.
The HTML in DHTML
In the beginning, there was only HTML with which to build
your pages. Many pages are implemented through the use of
HTML only, although most of them don't quite pop. Adding the
other parts of Dynamic HTML will add to the functionality
and make your page look great. In implementing Dynamic HTML
in your pages, HTML is the part you use to include objects
into your document, define initial colors and the basic look
of your page. The rest of the four constituent parts of
Dynamic HTML - CSS, DOM, and JavaScript - are more to
provide functionality and a 'feel' for your page. I'd
recommend starting your page design with HTML only. This is
because HTML is used to (as stated earlier) define the look
of your page, as well as specifying the inclusion of any
type of content you'll be providing. Design your graphics
and place them in their proper places within the page,
keeping in mind that you may add functionality and dynamic
content at a later stage in the evolution of your page.
The CSS in DHTML
When the CSS-1 specification was first defined, it was
heralded as a great invention, which will revolutionize the
way web documents are created. There was much hype, and it
was well founded. The implementation of Cascading Style
Sheets has revolutionized the way web pages are created. It
is an amazing set of tools that affect almost every aspect
of the web page. With it you can specify, using only one
file, all of the guidelines for the presentation of your web
site. I'm talking about external style sheets, of course,
and they really are an amazing tool to work with. Used
right, the entire look and feel of any site, large or small,
may be altered and tinkered with until it fits with what
you, the author, first envisioned when you created your
first document. By altering that one file, the entire format
of a web site may be changed. Previous to CSS, each
individual HTML document would have to have been altered one
at a time, by hand -- a horribly tedious and tremendously
boring job.
With CSS you can specify everything from border widths to
colors and textual effects such as 3D shading to create a
raised effect for borders and containers. Text headings can
be defined and implemented with one easy to use and
understand attribute (the ID or CLASS attributes). Using the
external style sheet, you may make your distinctive look
span across your entire web site.
The DOM in DHTML
The specifications of the Document Object Model are the link
between the capabilities of HTML and CSS (which work hand in
hand) and the advanced capabilities of the JavaScript
scripting engine. Every HTML element that can be defined is
represented within the Document Object Model, the
representation of which can be accessed and therefore
changed using a JavaScript function or statement. It is the
brains behind DHTML. That is, it is what is defined when you
specify what you want to change. Its hierarchical tree is
logical and ordered, and easy to understand. Using dotted
notation (much like an IP address), it is possible to access
every element of the page you are working with in a timely,
ordered manner. This is what makes DOM so great and
therefore so widely used.
The JavaScript in DHTML
JavaScript and its huge array of capabilities is the
workhorse of DHTML. It is used to encapsulate the DOM
statements for the page to use. You may define JavaScript
functions or statements and incorporate the DOM commands
into them. Navigator uses JavaScript almost exclusively to
manipulate or "make dynamic" the content of its pages. It is
possible to achieve most of the effects in JavaScript that
DOM has to offer, though in a very complex and bandwidth
heavy form. That is, to achieve one effect in JavaScript
that DOM will do, requires extensive JavaScript programming,
adding complexity and therefore download time to your
documents. Most people with even the slightest sense of
practicality will see this as a huge waste of time and
effort. Most of the time the effect is left out when the
developer realizes the depth of programming which is
involved to achieve even the slightest dynamic effect.
JavaScript can be used as a reporting tool, a container for
DOM statements, and a great source for advanced programming
functions, most of which pertain to data checking and
confirmation. That is, JavaScript can be used on the client
side (in the user's browser) to confirm that data being sent
to a CGI script on a server is in the right format and
contains no strange characters or obvious user mistakes such
as an invalid email address or postal code. Using JavaScript
in this way, the load on the server can be reduced
dramatically, saving time and bandwidth, and therefore
money.
Thanks for joining us again. Stop in next week because
now, with DHTML behind us we can move forward and actually
implement some of our work.
Getting to Know Dynamic HTML
The JavaScript Chronicles
The JavaScript Chronicles
JavaScript Introduction
Part 2: Data Types
Part 3: Arrays
Part 4: Operators
Part 5: Conditional Statements
Part 6: JavaScript Functions
Part 7: Pattern Matching - The RegExp Object
Part 8: Introduction to Server Side JavaScript
Part 9: Server Side JavaScript Mail Sending
Part 10: Server Side JavaScript and File Manipulation
Part 11: Working with Forms in JavaScript
Part 12: Getting to Know Dynamic HTML
|
