DOM, Javascript, and HTML Forms

This is where we switch gears from design to implementation. We'll start with client-side programming using JavaScript, which is used for everything from simple rollovers to complex calculators.

To make JavaScript work consistently, you need to understand the Document Object Model, or DOM, that the browser uses to represent objects to be manipulated (images, form fields, etc).

Javascript and the DOM: Studio Exercise

Work through the BrainJar.com tutorials on Introduction to the DOM and The DOM Event Model.

Create example web pages that use the techniques explained in these pages, and create an entry in your weblog that points to the examples. (You can also embed the examples in your weblog entry, if you'd prefer.)

Readings on DOM and Basic Javascript

• BrainJar.com: Introduction to the DOM
• Thau's JavaScript Tutorial, Lessons 1-3
• Chapter 15 of Designing With Web Standards (pages 361-381)

Readings on HTML Forms

• W3Schools HTML Forms and Input
• Simon Willison's Simple Tricks for More Usable Forms
• The Man in Blue's Accessible, Stylish Form Layout
• Enhancing Forms - Unobtrusive Javascript