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: 22% [?]

Related Posts:

Dynamic HTML (DHTML) Training Course

Free Books for Web Design, Development, Programming, and Scripting

Free Book – Teach Yourself JavaScript in 24 Hours

14 DHTML Training Tutorials

More Dynamic HTML (DHTML) Tutorials

Tags for this post>> DHTML | Javascript | Web Programming

This is a freely available training course covering the material you need to learn and understand Dynamic HTML (DHTML) and to develop attractive, compelling, and interactive web sites. This training course teaches you how to use DHTML and how its collection of technologies are designed to work together. For each training module below, a link for text-only training content is listed first, followed by the link for computer based training (CBT) with Graphics, for which the quizzes are not freely available and Internet Explorer is required. Dynamic HTML: DHTML and Style Sheets: Text-only training: tinyurl.com/m3twu CBT training: tinyurl.com/r2j4w In this training unit, you’ll learn how Cascading Style Sheets, scripting languages, advanced multimedia effects, and data binding all work together to help you create compelling Web-based documents and applications. Dynamic HTML: Using JavaScript: Text-only training: tinyurl.com/my5ox CBT training: tinyurl.com/oeygt In this training unit, we’ll examine a basic requirement of Dynamic HTML — a scripting language for instructions. We’ll briefly compare the two major scripting languages available, and why JavaScript is a strong choice. We’ll also begin examining the basic building blocks of JavaScript, including statements, blocks, and comments. Dynamic HTML: Objects and Events: Text-only training: tinyurl.com/lpyra CBT training: tinyurl.com/l795a In this training unit, you will learn what an object model is and how it relates to raw data. Dynamic HTML: Styles and Content: Text-only training: tinyurl.com/reeaj CBT training: tinyurl.com/qayno In this training unit, you’ll learn about dynamic styles. This DHTML feature lets you dynamically change the characteristics of style elements during runtime. You’ll learn how to change font styles, sizes, and colors. Dynamic HTML: Data from Other Sources: Text-only training: tinyurl.com/ngyeu CBT training: tinyurl.com/m73d7 In this training unit, you will learn about the differences between traditional forms of server-side data binding and newer forms of client-side data binding. You will also learn how DHTML client-side data binding has made advances over early methods of JavaScript client-side data binding.

Popularity: 3% [?]

Related Posts:

14 DHTML Training Tutorials

More Dynamic HTML (DHTML) Tutorials

Replacing outdated DHTML with DOM Scripting in your JavaScript

Dynamic HTML Tutorials and Articles

Cascading Style Sheets Tutorials

Tags for this post>> DHTML | HTML