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”.
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.
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′s behaviors fall into four main categories: manipulation of images, alerts and windows, form field handling and CSS handling. To get a feel for how behaviors work, let’s take an example of a behavior in each of these 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.
In the alerts and windows category, we have Dreamweaver′s “Open Browser Window″ behavior. This creates the ever-popular pop-up window. When you assign the behavior, Dreamweaver asks you to choose the HTML page you would like displayed in the window as well as the attributes you would like to add or suppress, such as scroll bars or the ability to resize the window.
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.
An example of a behavior which manipulates CSS attributes is “Show/Hide Elements”. This enables you to control the visibility of the content inside an HTML element, such as a DIV, heading or paragraph, based on user action. So, for example, when if you have a picture of a product, you can create DIVs with information on various aspects of the product and have the appropriate DIV content become visible as the user mouses over various parts of the product image.
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”.
You can find out more about JavaScript training courses, visit Macresource Computer Training, an independent computer training company offering JavaScript Classes at their central London training centre.