" />

GDT 150 Design for the Internet: Fall 2001

Javascript and Dreamweaver Behaviors

JavaScript

Most interaction in our pages so far has taken place by clicking between pages, or with CSS a:hover selectors. Doing anything more advanced requires the use of a programming language called JavaScript.

For our purposes, JavaScript is a client-side (works in the browser) language that allows web designers to introduce complex interactivity to their pages. JavaScript allows us to do everything from image-swaps and rollovers, to hiding and showing text, to making images fly across to screen, to adding new text to a page by typing it into a form field.

Events

Javascript is generally triggered by events within the browser. There are two types of events: user-triggered, and window. User-triggered events are a direct result of user interaction with the browser, such as rolling over a link. Window events are generally the indirect result of user interaction, such as the page loading.

The following is a partial list of events:

Certain elements are set up to "watch" for events. When those events are detected, the browser executes a javascript function. For example, a rollover image swap watches for 2 events: onMouseOver and onMouseOut. When the mouseover is detected, a script that changes the source (src="...") of the image. Then, when the mouseout is detected, a different script that changes the source back runs.

Unfortunately, there are several major problems with JavaScript:

  1. Browsers older than 4.0 don't have JavaScript built in
  2. Users can turn off JavaScript or firewalls sometimes filter it out
  3. Every browser supports a different amount/kind of javascript
  4. Netscape 4.x, IE4.x,5.x Windows, and IE5 mac/ Netscape 6.x/ IE6 Windows all use different Document Object Models for accessing elements

The Document Object Model

The DOM is simply a way of accessing elements within an HTML document. Think of it as a street address. The problem is that when JavaScript was developed by Netscape, they used one version of the DOM, and when Microsoft responded with their own version of JavaScript, they used a different one. Eventually, the European Computer Manufacturer's Association standardized Javascript into ECMAscript and the W3C adopted the DOM as a recommendation. Unfortunately, it's a different DOM than either NS4 or Internet Explorer. DOM1, as it's known, is supported by Netscape 6, Internet Explorer 6, Internet Explorer 5 mac, and Mozilla.

This can be a real pain, because often 3 (or more) versions of scripts must be developed to work with the different browsers.

Dreamweaver Behaviors

Dreamweaver's Behaviors are pre-written javascripts that work cross-browser (mostly). They're generally very easy to use, just requiring that you set things up properly at first. Don't try to figure out javascript by looking at the scripts generated by Dreamweaver, though. They've been specifically written to be difficult to decipher.

Using Behaviors

To insert a rollover image

  1. Create 2 versions of the graphic that will change, a normal and over. Make sure they are exactly the same size.
  2. In Dreamweaver, click the "Insert Rollover Image" from the Objects Palette and specify the two image sources. Make sure you check "Preload Images".

To show the Behaviors Palette

  1. Window > Behaviors
  2. Click on the [+] button to show a list of available behaviors

To select a window-based behavior

  1. Select a behavior to be called by a window-based event (onLoad, onFocus, etc.)

To select a user-triggered behavior

  1. Select the element that you want to have the event detected by
  2. Make it a link that points to "#"
  3. Choose a behavior from the Behaviors palette
  4. Change the event if necessary

Getting More Behaviors

Macromedia Exchange has lots more behaviors that you can download and install into Dreamweaver. You can also go there by selecting "Get More Behaviors" from the Behaviors Palette [+] menu.

Just follow the directions for installing and using each extension.

Learning more Javascript

Dreamweavers Behaviors are a good place to start with javascript, but they're a nightmare to modify. If you want to do anything more sophisticated or just different, you need to learn some javascript. The best place to start is Webmonkey's Tutorial. They've also got additional resources that you can look over.