Adobe Dreamweaver CS4s JavaScript Behaviors

JavaScript is an easy-to-use programming language which runs client-side (on each web surfers 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. Adobe Dreamweaver allows you to add JavaScript to your code automatically and easily by using 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.

Dreamweavers 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 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.

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 SCRIPT src=scripts.js.

Read practical points of view in the sphere of emotional freedom technique – this is your own tips store.