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”.
Behaviors are editable Dreamweaver resources which generate one or more JavaScript functions. Each behavior needs to be associated with an element on your web page. After highlighting the element, you click on the Window menu and choose Behaviors. In the top left of the Behaviors window, you then click on the Add Behavior button an icon which looks like a plus sign (+). Choose on of the available behaviors to associate it with the highlighted element.
You will also need to ensure that the correct event (click, double-click etc.) is linked to the behavior. Dreamweaver will always assign an event automatically. However, if this event is not the one you actually want, just select a different event by clicking on the drop-down menu located to the right of the name of the event in the Behaviors panel.
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.
The classic example of an image manipulation behavior would be the “swapImage” behavior. This venerable JavaScript function causes the source of a given image to change when the mouse passes over the image and back to the original when the mouse leaves the image. This behavior can either be explicitly applied to an image or can be generated automatically by inserting a rollover 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 most important and useful form-handling behavior is “Validate Form”. This can be triggered either on submission of the form (“onSubmit”) or when a given text field loses focus (“onBlur”). When you assign the behavior, you choose the type of validation you wish to perform: ensuring that the field has not been left blank, contains a valid email address, contains a number or contains a number between two specific values.
Dreamweaver has a number of behaviors which can be applied manipulate the CSS attributes associated with a given page element. One such behavior is Show/Hide Elements. This enables you to make the content of an HTML element visible or hidden based on an action performed by the user. You can apply this behavior to the content of an H1, DIV, P(aragraph) basically, any element that can contain stuff.
Naturally, there is some overhead involved in using Dreamweaver’s behavior in terms of the code generated within your web page. To make your pages accessible and search engine friendly, it is recommended that you transfer JavaScript code into an external .js file and then link each of your web pages to the external JavaScript file. In Dreamweaver’s code view, highlight all of the JavaScript code between the opening and closing SCRIPT tags, then choose Cut from the Edit menu. Create an empty text file, paste in all the code and save the file with a .js file extension. Finally, in the opening SCRIPT tag on your web page type src=”myscript.js”, replacing “myscript” with the name of your file.
