JavaScript is a well-established scripting language which creates code that can execute both an HTML page loads and after it has loaded. It is very efficient since it can run independently on the computers of the visitors to your web site. Thus freeing up your server to do other things. It is so widely used on web sites that, though it is possible for a user to disable JavaScript within their browser settings, most people will need to leave it active if they are to interact with the sites they visit. Adobe Dreamweaver allows web developers to add JavaScript to their pages by using what it refers to as “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.
Dreamweaver attempts to guess the event that you would like to trigger the behavior such as an onMouseOver, onClick or OnDoubleClick. If it guesses the wrong event, simply choose the correct event from the drop-down menu next to the name of the event.
Dreamweaver has a wide selection of behaviors. However, they fall into four main categories: images, windows and alerts, forms and form fields and CSS. To see how behaviors work, let us look at some examples of some behaviors in each of those 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.
Dreamweaver’s “Open Browser Window” behavior allows you to create the controversial JavaScript pop-ups. Due to its extensive misuse, many people have developed an extreme intolerance of this feature. However, there are situations where it is useful. For example, if a user is in the middle of filling out a form and clicks a help icon next to a certain item, a pop-up window is an ideal method of displaying the help topic.
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 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.
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”.