Enhance Your Web Pages With Dreamweaver's Javascript Behaviors

JavaScript is a simple, client-side scripting language which enables you to add exciting and interesting functionality to your HTML pages. It is built in to most web browsers and, although it can be deactivated, most people will have it enabled within their browser. JavaScript's uses includes the validation of entries within an HTML form and the detection of browser versions and presence or absence of plug-ins. Dreamweaver's implementation of JavaScript centres on the use of what it calls "behaviors".

A Dreamweaver behavior is an automatically generated JavaScript function which is activated by a given user or browser action. To use behaviors, choose Window > Behaviors. Before attaching a behavior, you must highlight one of the elements on your page such as a hyperlink or image. Then you need to choose a behavior by clicking on the plus sign in the top left of the Behaviors window.

Whenever you attach a behavior to a web page element, Dreamweaver attempts to guess what the event which should trigger the JavaScript (mouse click, rollover, etc.). If Dreamweaver fails to assign the event that you actually want, simply choose a different event from the drop-down menu next to the event name.

Dreamweaver's behaviors fall into four main categories: manipulation of images, alerts and windows, form field handling and CSS handling. To get a feel for how behaviors work, let's take an example of a behavior in each of these categories.

Perhaps the most frequently encountered JavaScript function is one that changes the appearance of an image when the mouse passes over it. Dreamweaver creates this functionality with the "Swap Image" behavior. You can also add this behavior automatically by choosing Insert > Image Objects > Rollover Image. Dreamweaver automatically adds a second behavior/function called "Restore Image" which changes the image back to the original when the mouse leaves the image.

In the alerts and windows category, we have Dreamweaver's "Open Browser Window" behavior. This creates the ever-popular pop-up window. When you assign the behavior, Dreamweaver asks you to choose the HTML page you would like displayed in the window as well as the attributes you would like to add or suppress, such as scroll bars or the ability to resize the window.

The key behavior relating to forms is called "Validate Form". It performs simple checks on any text field within a given form. (It ignores any fields other than text fields.) To use it, select a field (the validation will then occur when the user leaves the field) or select the entire form (the validation will then occur when the form is submitted). Choose "Validate Form" form the Behaviors panel menu and specify the type of validation you wish to perform, for example, ensuring that a field has not been left blank.

Dreamweaver contains a couple of very useful behaviors which manipulate the content of HTML elements. To use these, you need to give the element and ID (for example, ). The DIV element offers the greatest flexibility when using this behavior since it can contain just about anything you want. You highlight the element which will trigger the behavior and then choose Show/Hide Elements from the Behaviors panel menu. Click on any listed element then click either the Show or Hide button.

Each behavior that you choose will create one or more JavaScript functions within the head area of your page. Part of the process of optimising your website (both in terms of accessibility and search engine compatibility) is to transfer this code to an external JavaScript file and then link the web page to the JavaScript file. To do this, you need to be in Code view and locate the function(s) generated by the behavior(s) you have used on your page. Cut all of the code between the opening and closing SCRIPT tags and place it in a text file which needs to be saved with a .js extension. Next, enter an src attribute inside the opening SCRIPT tag, for example

Not yet Rated