From DHTML to DOM Scripting

By Christian Heilmann

The if condition checks whether the browser understands the images object, and only runs the code inside the condition if that is the case. For a long time, scripts like these were the standard way of dealing with images. In newer browsers, a lot of the JavaScript image effects can be achieved with CSS, effectively rendering scripts of this kind obsolete. However, Java-Script can manipulate images in ways CSS cannot, and we will come back to this in Chapter 6. Every browser offers us the document it displays for manipulation, via something called the Document Object Model, or DOM for short. Older browsers supported their own DOMs, but there is a standard one, defined by the W3C, that is supported by most browsers these days. You might have encountered test scripts like this one in the past:
<script type="text/javascript">
  if(document.all)
  {
    // MSIE
  }
  else if (document.layers)
  {
    // Netscape Communicator
  }
  else if (document.getElementById)
  {
    // Mozilla, Opera 6, Safari
  }
</script>
The document.all DOM was invented by Microsoft and supported by MSIE 4 and 5, while Netscape 4 had its own DOM that supported document.layers. You can test for the W3C-recommended DOM via document.getElementById, and unless you have a genuine need to support MSIE versions previous to 5.5 or Netscape 4, it is the only one you really need to test for in this day and age.

One problem is that some in-between versions of Opera support the getElementById object, but fail to support the entire W3C DOM. To determine whether this is the case, test for support of the createTextNode as well:

<script type="text/javascript">
  if (document.getElementById && document.createTextNode)
  {
    // Mozilla, Opera 6, Safari
  }
</script>
If you embed this test in your scripts in this condition, you can be quite sure that only user agents that do support DOM scripting will execute what you've written. You can save yourself one code indentation by simply returning if neither of the two conditions is true.
<script type="text/javascript">
  if (!document.getElementById || !document.createTextNode){return;}
  // Other code
</script>
The same idea applies to any other methods to come in the future--as you are checking for a standard defined by the W3C, there is a big chance that user agents will support it--a much bigger chance than any other standard different vendors might come up with. You could also support different user agents on different levels, but this can lead to a lot of code duplication and less-optimized scripts. Rather than catering to specific user agents, you test for the UA's capabilities before you apply your functionality--a process that is part of a bigger modern web design idea called progressive enhancement.

Progressive Enhancement

Progressive enhancement is the practice of providing functionality only to those who can see and use it by starting with a lowest common denominator and then testing whether successive improvements are supported. Users who don't have the capability to support those higher features will still be able to use the web site perfectly adequately. A comparable real-life process is to put on your clothes in the morning:
  • You start with a naked body that is hopefully in full working condition--or at least in the same condition as it was yesterday, so that it is no shock to you (we discount PJs and/or underwear to keep this example easy).
  • You may have a wonderful nude body, but it is insufficient in cold weather and might not appeal to other people around you--you'll need something to cover it with.
  • If there are clothes available, you can check which fit the weather, your mood, the group of people you'll be seeing this day, and whether the different garments are in good order, clean, and are the right sizes.
  • You put them on, and you can face the day. If you want to, you can start accessorizing, but please make sure to take other people into consideration when doing so (too much perfume might not be a good idea in a crowded train carriage).
In web development terms, this means the following:
  • We start with a valid, semantically correct (X)HTML document with all the content--including relevant images with text alternatives as alt attributes--and a meaningful structure.
  • We add a style sheet to improve this structure's appearance, legibility, and clarity--possibly we even add some simple rollover effects to liven it up a little.
  • We add JavaScript:
  • The JavaScript starts when the document is loaded, by using the window object's onload event handler.
  • The JavaScript tests whether the current user agent supports the W3C DOM.
  • It then tests whether all the necessary elements are available and applies the desired functionality to them.
Before you can apply the idea of progressive enhancement in JavaScript, you'll need to learn how to access and interact with HTML and CSS from your scripts. I devote two chapters of this book to that task--Chapters 4 and 5. For the moment, however, it is enough to realize that the object detection we have practiced earlier helps us implement progressive enhancement--we make sure that only those browsers understanding the right objects will try to access them.


Page 3 of 4

Previous Page
1 2 3 4
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date