Review of "DHTML Utopia: Modern Web Design Using JavaScript & DOM"

Oakland.pm

Reviews

Review of "DHTML Utopia: Modern Web Design Using JavaScript & DOM"

author: Stuart Langridge

reviewer: George Woolley

Title:      DHTML Utopia
Subtitle:   Modern Web Design 
            Using JavaScript and DOM
Author:     Stuart Langridge
Publisher:  SitePoint
Edition:    June 2005 
ISBN:       0-9579218-9-6
Pages:      400
Price:      $39.95 US, $57.95 CA 

Notes

  • SitePoint is a partner of O'Reilly.
  • This book is listed on the O'Reilly site.
  • The above information is taken from the O'Reilly catalog entry for this book.

Short Review

Smiley Rating: Excellent. :) :) :) :) :) of 5

Have you already been building websites with HTML and CSS? Do you have a bit of programming experience? Do you wish to learn to make your pages more dynamic while maintaining a maximum separation between HTML and CSS? If your answer is yes to all these questions, then I strongly recommend this book.

Understanding the Document Object Model (DOM) is critical to effective use of DHTML and this book explains it really well including giving really superb examples.

The book covers such things as using DOM scripting for

  • animation
  • form field validation
  • cool menus
  • communication with the server

If you want a bit more detail, you could take a look at my somewhat longer review. Or you could just download and dive into the 4 sample chapters offered on the SitePoint page for this book.

George Woolley of Camelot.pm and Oakland.pm

Miscellaneous

Chapter Titles

  • DHTML Technologies
  • The Document Object Model
  • Handling DOM Events
  • Detecting Browser Features
  • Animation
  • Forms and Validation
  • Advanced Concepts and Menus
  • Remote Scripting
  • Communicating With The Server
  • DOM Alternatives: XPath

Notes

Online Watch

When I looked 2006-02-10, this book was not available on Safari Tech Books Online. I did see a few SitePoint books there, though.

Checkout the SitePoint page for this book; Sitepoint offers sample chapters there as a PDF. I did the download and it included the first 4 chapters of this book.

HTML Tags

I noticed the following HTML tags in HTML examples in the book:

  • base, head, html, link, script, style, title
  • button, fieldset, form, input, label, option, select, textarea
  • dd, dl, dt, li, ul
  • em, img, span, strong
  • legend, table, td, tr
  • body, div, iframe, p
  • h1, h2

Not surprisingly, I didn't see

  • b, i
  • center, font

CSS Properties

I noticed the following CSS properties in the style sheet examples in the book:

  • font-size, color
  • background-color, background-image
  • display, height, width
  • float, position, top, left
  • border, border-style, border-color, border-bottom, border-width
  • margin, margin-left, margin-right
  • padding, padding-left, padding-right
  • z-index, overflow
  • text-align, text-decoration
  • list-style-type

Methods

Here are some of the methods I noticed in the JavaScript examples in the book:

  • addEventListener, appendChild
  • clearInterval, clearTimeout, cloneNode, createElement, createTextNode
  • getElementById, getElementsByTagName, getHours, getMinutes, getSeconds
  • insertBefore
  • match
  • removeAttribute, removeChild, replace
  • search, setAttribute, setProperty, setTimeout
  • toLowerCase, toUpperCase

Silly

"values of β will give rise to dom."

Notes

  • This is taken from a quote in the book.
  • One way to find out the context is to get the book. ;-)

Somewhat Longer Review

Contents

The Title

In this section I'll take a look at the meaning of the title and subtitle of the book.

I'll assume you are familiar with HTML and CSS. If you are not, this book is almost certainly not for you.

DHTML Utopia

DHTML is short for Dynamic HTML. It includes

  • writing semantic HTML.
  • using CSS for presentation.
  • using JavaScript to manipulate the Document Object Model (DOM) for an HTML document.

Later in this section, I'll say a little more about "semantic", "presentation", "JavaScript" and "DOM".

DHTML is an artificial construct; there is no W3C spec for DHTML. DHTML pages are pages that use HTML, CSS and JavaScript for DOM scripting. DHTML is often used to make pages more interactive. Want more points of view on DHTML? Try googling define:DHTML

By utopia I typically understand "an imaginary state of perfection". In this context though, I understand something like "DHTML as it should be".

Modern Web Design

One could certainly argue about what "Modern Web Design" means. For one thing, the word "modern" is ambiguous in the extreme.

Part of what I understand by "Modern Web Design" here is "up to date web design". And part of what I understand by up to date web design is web design that uses semantic HTML and uses CSS to control presentation.

Semantic HTML is HTML which focuses on making clear what is a heading, paragraph, list, etc. It is HTML which does not try to specify how things will appear; more specifically, it does not try to indicate color, font, alignment, etc. So you won't see font, center, b and i tags in semantic HTML.

CSS can then be used to specify how the document actually appears including color, fonts, borders, etc.

Using JavaScript & DOM

JavaScript is a dynamic programming language; client-side JavaScript can be used to change the appearance of a web page. For example, it can be used to make possible dragging an image across the page.

One of JavaScript's strengths is that it can manipulate the DOM for an HTML page. (I know, I know, I still haven't said more about DOM. That's next, OK?)

DOM is short for Document Object Model. It's a hierarchical view of an HTML page that can be searched and manipulated. Manipulating the DOM typically changes the appearance of the page.

Does the title fit the book?

Mostly, I'd say a strong yes. The book supplies lots of reasonably up to date info on DHTML for a web developer who wants to use DHTML in his web pages. And the use of JavaScript and DOM in this context is certainly addressed.

I'm not sure how well the word "utopia" fits though. Having to deal with sniffing out what features the browser supports does not seem ideal or even as it should be. For older browsers, one could argue this is inevitable, however this is necessary for current browsers too.

About the Reviewer

In this section, I've included some information about myself that I thought might help you to make better use of this review.

HTML & CSS Experience

I'm an amateur web developer. I've built a number of websites using HTML and CSS.

I'd read and reviewed 6 books on HTML & CSS before diving into this book.

Programming Experience

I don't need to work these days, however when I worked, I worked as a software developer. I've made significant use of more than 20 computer languages.

I've made some use of JavaScript but my style is archaic. I've made some use of PHP which is relevant because PHP code appears in some examples in the second half of the book.

Most of my web related programming experience is on the server side using Perl or PHP.

Experience with Sitepoint Books

Earlier, I read and reviewed "HTML Utopia: Designing Without Tables Using CSS". I thought it was rather good.

Training Experience

I have a small amount of experience as a teacher.

I have several years experience developing self-teach computer manuals.

Interest in DOM Alternatives

I'm not ready to deal with DOM alternatives just now. I read the Chapter on DOM Alternatives, but I didn't try anything out.

What You Get

The book includes an introduction, 10 chapters and an index. The 10 chapters take up 304 pages.

Introductory Material

The Introduction and the first chapter present introductory material. The Introduction is an introduction to the book; the first chapter is an introduction to DHTML.

DOM Chapters

There are two chapters on DOM (chapters 2 & 3). One chapter explains the Document Object Model; the other chapter tells how to handle DOM events.

Browser Differences

There is one chapter (chapter 4) that shows how to determine if a browser supports a particular DOM feature.

Various Dynamic Capabilities

There are 3 chapters (chapters 5-7) that each focuses on a particular dynamic capability.

These chapters focus on animation, forms & validation and menus.

Interaction with the Server

There are two chapters (chapters 8 & 9) on interacting with the server.

One chapter focuses on retrieving dynamic content from the server; the other chapter deals with communication both directions.

DOM Alternatives

There's a single chapter (chapter 10) that explores alternatives to DOM.

What I Like

Presentation of DOM Clear

The presentation of DOM is unusually clear, which is nice since it's the key to understanding DHTML.

Chapter 1 "DHTML Technologies" barely mentions DOM but nevertheless lays the groundwork for what follows. Chapter 2 "The Document Object Model" says what DOM is and gives the basics of how you can manipulate the DOM of a web page. Chapter 3 "Handling DOM Events" goes into more detail on how you can control what happens when various events occur such as:

  • the mouse clicking on a link
  • the mouse moving over a certain element
  • the page is loaded (or unloaded)
  • a text field in a form has changed and focus has moved away from it

Chapter 4 "Detecting Browser Features" tells what features of DOM are supported by the the particular browser that is accessing the page.

Later chapters (5-10) take advantage of the groundwork laid by these earlier chapters.

I thought both the explanations of DOM and the examples were super clear. I found it easy to move from them to doing what I wanted to do.

Material Covered Well-Chosen

The selection of material is excellent.

The basics of DOM are nailed down up front, then the author addresses such things as using DHTML for:

  • animation
  • form validation
  • cool menus
  • communication with the server

All of this is of interest to me and, I would think, to most people interested in creating websites. The material is not too difficult either.

Who the Book Is for Stated Explicitly

The first section in the Introduction is entitled "Who Should Read This Book". I really appreciate that the book explicity says who it's intended for.

4 Sample Chapters Provided

On the page for this book on the SitePoint site, I discovered I could download the first 4 chapters of the book as a sample.

Gripes

JavaScript is not Simple

The book says JavaScript is a simple language. I don't think JavaScript is an especially easy language to learn or to develop with.

As best I understand, the book is aimed at people who have experience building websites with HTML & CSS who may or may not have any programming experience. However, in my opinion, it would be difficult to follow this book without some experience with programming.

Who's the Book for?

The book would be ideal for someone who

  • has a good grasp of HTML.
  • has a good grasp of CSS.
  • wants to make their websites more interactive
  • embraces the idea of writing semantic HTML (and using CSS for presentation)
  • has some experience programming.

The book would be just plain annoying for someone who

  • uses presentational tags regularly in their HTML and is happy about it.
  • doesn't know CSS and has no interest in learning it.
  • has no experience at all programming and has neither the patience nor the inclination to learn to program.

HTML & CSS Experience

The book makes it clear that it aims at people who have experience building websites with HTML & CSS

You don't have to have anywhere near total mastery of HTML, though if not you probably should have access to a good HTML reference and feel comfortable using it. There's a list of HTML tags used in the left column to give you an idea of what HTML tags the author uses in markup examples. You certainly don't need to know all of them.

You also don't have to have anywhere near total mastery of CSS, though if not you probably should have access to a good CSS reference and feel comfortable using it. There's a list of CSS properties used in the left column to give you an idea of what properties the author uses in style sheet examples. You certainly don't need to know all of them. Nor do you need to know every last selector, etc.

Programming Experience

The book does not discourage people without programming experience from using it.

My opinion is that programming experience is a prerequisite. I also think it would be highly desirable to have been exposed to object oriented concepts. Also, I found it quite useful to have a good JavaScript reference available.

Final Thoughts

I think this would likely be an excellent book for you if you:

  • have some experience with HTML & CSS and with some kind of programming
  • wish to make your websites more interactive
  • embrace (or are at least open to) the idea of semantic HTML

draft on Web: 2006-02-12b

removed draft status: 2006-02-20b