On the following page you will find an article that was initially commissioned by a Webzine for publication and deemed not fit for release for the audience it was intended to. As I am too busy with my book to rewrite it (this is already the 2nd version) I chose to not bother and simply give it out to you folks independently of a webzine.
The article takes a normal web development task of creating a dynamic web page with a tabbed interface, a popping-up product shot and a slide show and shows two ways of reaching the same result:
- A DHTML approach as it was common practice in 1999-2001(roughly) explaining what the issues with the different techniques are and
- A DOM scripting approach explaining alongside what the different ideas of implementation are.
I hope that this article will help newer JavaScript developers to understand what scripts to avoid and older JavaScript developers to understand why and how to change their ways.
Please don't hesitate to comment on my blog, but be patient in case you find mistakes or want more detailed explanations - I am writing about 13,000 words/day now to get the book finished in time.
Cheers, Chris Heilmann
or jump directly to one of the sections:
Table of Contents
- Preface
- What is DHTML and what is DOM scripting?
- Creating the page in DHTML
- The goal of DHTML
- The tabbed navigation in DHTML
- DHTML issue #1: Script dependence
- Showing, hiding and tab highlight in DHTML
- DHTML issue #2: Mixing presentation and functionality
- The Product Photo in DHTML
- DHTML issue #3: Assuming functionality without testing for it
- The Slide Show in DHTML
- DHTML issue #4: Keeping maintenance JavaScript based
- DHTML issue #5: Mixing HTML and JavaScript
- DHTML issue #6: Blaming the user
- DHTML issue #7: Taking over the document
- Introducing DOM scripting
- The goal of DOM scripting
- DOM scripting asset #1: Progressive Enhancement
- DOM scripting asset #2: Ease of maintenance
- DOM scripting asset #3: Separation of Presentation and Behaviour
- DOM scripting asset #4: Separation of Structure and Behaviour
- DOM scripting asset #5: Using modern event handling
- DOM scripting asset #6: Avoiding clashes with other scripts
- Re-creating the demo page with DOM scripting
- Where to now?
Download PDF version (202KB)
at Amazon