Media CNFree content directory

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

To learn more about JavaScript training courses, visit Macresource Computer Training, an independent computer training company offering JavaScript Classes in London and throughout the UK.