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”.
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.
Whenever you attach a behavior to a web page element, Dreamweaver attempts to guess what the event which should trigger the JavaScript (mouse click, rollover, etc.). If Dreamweaver fails to assign the event that you actually want, simply choose a different event from the drop-down menu next to the event name.
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.
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.
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 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.
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 training courses in London and throughout the UK.
categories: Dreamweaver,Adobe Dreamweaver CS3,JavaScript,behaviors,web development,website accessibility,computers and the internet,computer software
Feedback / Comments
Leave a Reply
