Replacing outdated DHTML with DOM Scripting in your JavaScript

This JavaScript Tutorial is aimed at beginners to help them understand how old and outdated JavaScript techniques can cause issues on a web page. The tutorials proceeds by analyzing the source code of a web page that was written several years ago using concepts that were ok good to use then, but in the current Web will render inaccessible or broken pages in a browser.

Three dynamic elements using JavaScript are reviewed and explained from the point of view when they were originally developed, and then a more current method of re-writing them is demonstrated making them more hardened and less error-prone in regards to DOM scripting. The tutorial starts with providing some understanding about what DHTML and the DOM are. The example web site containing the JavaScript code examples are available for download as a zip file.

From DHTML to DOM Scripting – How to replace outdated javascript techniques

Download PDF version (202KB)


Table of Contents

• Preface
• What is DHTML and what is DOM scripting?
  • What is the DOM?
• 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
  • The tab navigation in DOM scripting
  • The popup window in DOM scripting
  • The slide show in DOM scripting
  • Fixing for Safari
• Where to now?

Popularity: 19% [?]