Al's TAFE Certificate IV I.T. (Website Design) Exercises

Client Side Script 1

Lesson 1 » Produce Client Side Script – Javascript & Dreamweaver.

JavaScript is a scripting language and therefore it can be written as a simple text file and the browser will execute the functions it finds in the script when it reads the file.

Dreamweaver Behaviours

In Dreamweaver you talk of behaviours, which are really like JavaScript interactions, having an event and an action. The event, like clicking something, then produces an action, like swapping images or music playing, or a new window opening.
Events – Your browser is on the lookout for events to see if there is an event handler associated with that event that gives instructions on how to handle that event. For example when someone clicks a button; is there an event handler associated with that button click.
- Some examples of events are: -
  1. Loading a page in the browser (onLoad)
  2. Clicking (onClick)
  3. Moving a mouse over something on the page (onMouseover)
Actions – They tell the browser what to do when the event happens. Like open this file, and play this music. Where events need to happen several times on a page or site it becomes better to use functions, because they are, as we learned before, like combinations of action statements. For example, when an event happens, the event handler can say go and do this or that function, and the function will specify all the necessary actions to take. The function might be called playMusic.
- Some examples of actions are: -
  1. Checking to see what browser the end-user is using
  2. Changing any element (image or text) on a web page
  3. Going to another web page

Behaviours in Dreamweaver

When Dreamweaver writes a behaviour it puts the actions of the behaviour into a function. So Dreamweaver actually creates functions, or groups of behaviours or actions, that are called on by event handlers. When the browser sees the event handler it then executes the Dreamweaver function. But the Dreamweaver function will only execute when called upon by the event handler as it responds to an event.
To view all of this in terms of coding, let's use an example of a Popup Message behaviour. This function might be activated by the event of clicking on a simple text link. Dreamweaver will add some code to your text link as follows: -

<a href= "javascript:;" onClick="MM_popupMsg('I understand this stuff!')">Click here!</a>

The <a> tag contains a link ("javascript:;"), and an event handler called onClick that activates or calls on a function "MM_popupMsg('I understand this stuff!')" (The link to javascript is a null link that doesn't send the browser anywhere, so you can have the text clickable without it taking the user anywhere.)
The actual function sits in the <head> section of the page within script tags, as we have learned previously. The reason for sitting the function in the head is that the head section loads first and so the function is read and stored by the browser even before the page loads fully.
The function code in the head looks like this: -

<script language="JavaScript" type="text/JavaScript">



</script>

Using Behaviours in Dreamweaver

We will look now at how we cane use the JavaScript like behaviours in Dreamweaver to enhance the dynamic functionality of your web pages and make them more professional and interesting.
This is done using the behaviours panel in Dreamweaver. To open this panel use Window > Behaviours or press Shift + F3.
This is what the Behaviours panel looks like: -

The + will add a new behaviour. The – will remove behaviours. The arrows will change the order of behaviours, but only where the same event has more than one action. Otherwise the order is determined by the events. The events will vary depending on which browser versions you are designing for in your target market.

Activity One

Open a new document in Dreamweaver and type the words "behaviour test" in the Design Window.
1. Select the word “behaviour” and type javascript:; in the Property Inspector in the Link area.
2. Open the behaviours panel
3. Then select the word test.
4. Click the plus button and select Popup Message.
5. Type a message in the dialog box that appears.
6. Back to the behaviours panel and click the down arrow beside Events and see what options you have.
7. Click on onLoad and then click the arrow beside onLoad and choose Show Events For. Alter the Browser option to 3.0 and later, or 4.0 and later depending on what is now ticked.
8. Notice the change in your options for events.
9. Now highlight the word behaviours, which is the linked text, and notice the event options available for it are greater than those available for the word "test". Set the onClick event for this text to show a Popup Message.
10. Change the Show Events For to IE 6.0 and notice the greater number of events that are now available.
11. Set to onClick and then preview the page in your browser (F12) and test the onClick event.
Click here to see my behaviour test

Note that some availability of behaviours will be more dependent on the content that is on your page than on the Browser level you are aiming for.

Behaviours and the <body> tag.

Some behaviours are designed for the body tag, and the event that will activate these behaviours is then simply the loading of the page in the browser, e.g. onLoad.
The behaviours that are usually attached to the <body> tag are: -
1. Check browser
2. Check plugin
3. Preload images
Some others that may be attached to the <body> tag are:-
1. Call JavaScript
2. Go to URL
3. Open Browser Window
4. Play Sound
5. Popup message
6. Set Text of Status Bar
You need to make sure that the <body> tag has focus, before you can successfully attach a behaviour to it.
You may want to add a Check Browser Action (or Function) to the onLoad event of the page opening in their browser window.

Adding Behaviours to Images

You can add a behaviour to an image as you can to a piece of text, but in both cases it is best to make the image (or the text) into a hyperlink first. This gives the visual cue of the cursor changing to a hand when the user mouseovers the object and therefore the user then knows that something is likely to happen when they click on the image ( or the text). Otherwise there is no indication that an event is attached to that object on the web page. You will find that some browsers actually handle event handlers and behaviours that are contained in links better.
When you apply some behaviours they will add their own link tag anyway. For example if you apply a Popup Message to an image you will find that the image is then enclosed in a link <a> tag, and that the behaviour actually gets applied to the link tag rather than to the image itself.

Activity Two

Place an image on a blank page in Dreamweaver
Add an onClick event with a Popup Message behaviour to the image.
Preview this in a browser and note that the image has no indication that it is clickable. Have a look at the code for this onClick event.
Now remove that onClick event and instead replace it with an (onClick) event that is enclosed in parenthesis.
When you preview this in a browser you will now see that the image is visually clickable as the cursor will change to a hand when you mouseover the image. Check the HTML code for this new (onClick) event and compare with the code for the previous onClick event.

Click here to see my onClick message pop-up

Activity Three

Try using the following behaviours that Dreamweaver offers and test them in your browser.
1. Pop-Up menu. Attach this to an image on your page. Add a few levels of menu to the image.
  Click here to see my image rollover pop-up menu
2. Open Browser Window. You will need two html pages for this one. One page will contain an object used to trigger the event behaviour of "Open Browser Window", and the second page will be the page opened in the new browser window.
  Click here to see my close.html page open when you click to open another page
3. Set the Text of the Status Bar. This behaviour will need to be added to the onLoad event of a page.
  Click here to see some text in my status bar
4. Perform a Browser Check.
  Click here to see my browser check
5. Swapping Images with a preloaded Rollover. Try using a multiple image swap, where you have two or more images, and swap two or more images when users mouseover the first image.
  Click here to see my rollover, also this is another multiple image rollover sample (click here)