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.

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.

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.

In the form manipulation behaviors category, we have “Set Text of Text Field” and “Validate Form”. The “Validate Form” behavior only applies to text fields and enables you to ensure, first of all, that a field has not been left blank; secondly, that a field contains a valid email address; thirdly, that a field contains a numeric value; and, fourthly, that a field contains a number within a given range.

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.

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.

If you want more information JavaScript training courses, visit Macresource Computer Training, an independent computer training company offering JavaScript Classes in London and throughout the UK.

categories: Dreamweaver,Adobe Dreamweaver CS3,JavaScript,behaviors,web development,website accessibility,computers and the internet,computer software

Related posts:

1. The Best New Additions To Dreamweaver CS4’s List Of Features Dreamweaver's New Related Files facility...
2. How Adobe Dreamweaver Handles Cascading Style Sheets Because of its ability to separate design from content, Cascading...
3. Creating Hyperlinks In Adobe Dreamweaver Most Dreamweaver training courses will show you how to create...
4. How Dreamweaver CS4 Speeds Up The Web Development Prcocess If you have ever wanted to build your own website,...
5. Working With HTML and XHTML in Adobe Dreamweaver CS4 HTML is a markup language used to create web pages...

Related posts brought to you by Yet Another Related Posts Plugin.