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.
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.
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. If you have used several JavaScript behaviors on a page, you may find that the amount of code generated by Dreamweaver becomes quite significant. It is therefore usually a good idea to place all of this code in an external JavaScript file and then link this file to your page.
To do this, click on the "Code" button in the top left of the page and locate the SCRIPT tags which contain the JavaScript. Select all of the code between the SCRIPT tags and cut it to the clipboard. Next, create a blank file with the file extension .js and paste all of the code inside it. Finally, to link your page to the .
js file, position your cursor inside the opening SCRIPT tag and type src = "myfile.js" substituting the name of your JavaScript file for "myfile.js".
The writer of this article is a developer and trainer with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver training courses at their central London training centre.
