Past Tense

JavaScript is an easy-to-use programming language which runs client-side (on each web surfer’s computer) and adds useful or decorative interactivity to web pages. No extra plug-ins need to be installed into the browser for JavaScript to run and, although it can be disabled by users to stop script running, it is safe to assume that any JavaScript code added to your pages will run on the vast majority of the computers of visitors to your site. Dreamweaver allows you to add JavaScript to your code automatically and easily by using “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 contains several types of JavaScript behaviors. Some relate to images, others display windows and messages, others can be used on forms and form fields and still others can be used to manipulate CSS attributes. To get a flavour of how behaviors work, let us examine a behavior in each of the above categories.

There was a time when almost every website featured the rollover effect on its navigation buttons. With the development of CSS, this is no longer the case. However, the facility of having an image change appearance when the mouse passes over it is still useful. Dreamweaver achieves this effect with the “Swap Image” behavior which can either be added to an image or can be created automatically by inserting a rollover image (Insert > Image Objects > Rollover Image) rather than a static one.

As far as alerts and windows behaviors is concerned, as well as the simple “Pop-up Message”, which just causes a system alert box to appear, Dreamweaver also offers the more sophisticated “Open Browser Window”. This Dreamweaver behavior allows you to create a pop-up window of any specified dimension and allows you to choose the attributes of the window: the HTML file it displays, the presence or absence of the title bar, scroll bars, etc.

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.

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.