DOM Scripting: Unobtrusive JavaScript at Its Best

DOM Scripting: Unobtrusive JavaScript at Its Best

By 

Author: Jeremy Keith Total Pages: 368 Publisher: Friends if ED Copyright: 2005 ISBN: 1590595335

There are changes afoot in the world of JavaScript programming. The JavaScript language is no longer seen as something used to create "nifty" little scripts to jazz up your Web site. It's now used for many important things, and can work with other languages, such as XML and PHP. It's also very powerful when used to interact with Web pages using the Document Object Model (DOM).

DOM Scripting: Web Design with JavaScript and the Document Object Model shows how this can be accomplished. The book is written by Jeremy Keith and is targeted specifically at Web designers. Its purpose is not to be a reference book, but is aimed at teaching the basics of DOM scripting. Here, Jeremy does a good job.

The book begins with a brief history of JavaScript, covers the basics of JavaScript syntax, and then moves right into working with the DOM. Jeremy writes what is called "unobtrusive JavaScript." This means that the JavaScript code is separated from the Web page and is controlled through the use of CSS classes and ids. For instance, to create a popup window, the code, placed in an external file, would generally look like this:

function newWindow(link) {
  var bookWindow;
  // Next two lines should be on one line
  bookWindow = window.open(link, "new1",
    "width=240,height=360,scrollbars,resizable");
  if (bookWindow.open) {
    bookWindow.close;
  }
  bookWindow.focus();
}

In the actual Web page, the code to call the script would be (all on one line):

<a href="newWindow.html" onclick="newWindow('this.href');
  return false;">Link for New Window</a>

If we use the method Jeremy teaches, we would place this code in an external file:

function doPopups() {
  if (!document.getElementsByTagName) return false;
  var links=document.getElementsByTagName("a");
  for (var i=0; i < links.length; i++) {
    if (links[i].className.match("popup")) {
      links[i].onclick=function() {
      // Next two lines should be on one line
        window.open(this.href, "",
          "top=40,left=40,width=500,height=625");
        return false;
      }
    }
  }
}
window.onload=doPopups;

Then we would just add the CSS declaration class="popup" to a link, e.g.,

<a href="newWindow.html" class="popup">Link for New Window</a>

Now that's unobtrusive JavaScript! This script, as well as others, are detailed in the book. In fact, there are some excellent scripts in the book that you may be able to apply to your own Web sites. Along the way, Jeremy explains everything in easy-to-understand language.

Jeremy's scripting techniques take into account those browsers that don't have JavaScript support or have it turned off. That means making scripts that degrade gracefully. If your scripts can't run in your visitor's browser, they're of little use if there's no alternative method for interacting with your visitor. Sometimes you can expect your visitors to have JavaScript enabled. For instance, if you create a Web site that is focused on the JavaScript language, you can reasonably expect that your visitors will have JavaScript turned on in their browser. It's a site about JavaScript, right? You wouldn't go to an auto dealership to buy a car and not have a valid driver's license would you? However, if you're building other types of Web sites — e-commerce, reference, news, etc., — you can't assume that your scripts can be accessed by your visitors. That's why writing scripts that degrade gracefully becomes important.

The book also includes a chapter on the future of DOM scripting and a nice reference section, as well. The reference section is also available as a free podbook.

The book has its own Web site, which includes an informative blog. In addition, the Web site that is created using the scripts in the book can be found there. There are a few errors in the book which are listed on the Web site.

Overall, the book is well written and comprehensive. Keep in mind, however, that this book focuses on DOM scripting and doesn't cover JavaScript in its entirety. Nevertheless, Jeremy will have you up and running with your own DOM-related scripts in no time at all. If you design Web sites and want to add another dimension to it, check out this book. You won't be disappointed.

URL: