<%response.buffer=True%> <% function rw(str) response.write str end function function html(str) response.write(server.HTMLEncode(str)) end function function url(link,str) response.write "" & str & "" end function %> [CTN162:lessons | topics]
[CTN162: Lessons & Topics]

Day 9: Event Handling

Events: With JavaScript, we can access various "Events", such as onMouseOver and onMouseOut, which we worked with earlier in relation to images. Event "Handling" speaks to JavaScript's ability to react to a user created event. Here is a way to use onMouseOver and onMouseOut to create a similar effect as a typical image mouseover without using images:

<td bgcolor="white" onMouseOver="bgColor='blue'" onMouseOut="bgColor='white'">

<a href="mypage.htm">My Page </a></td>

Calling the "bgColor" right inside the <td> allows us to create the familiar effect without having to use images.Example: TD MouseOver

Another commonly used event is the "onLoad" Event, which triggers when the page is loaded. This Event is usually used inside the body tag. On way to use this effect is to "focus" the cursor to the first field of a form, so that if a user begins to type, the cursor is already in the appropriate location:

<body onLoad="document.formName.formElement.focus()">

The "formName" and "formElement" are your names for areas of the form. Example: Set Focus

This function will allow us to use the "onChange" Event triggered in a form in HTML to create a "drop down" navigation.

<script language="JavaScript">

function jumpTo(list){

      var opt = list.options[list.selectedIndex].value;

      location.href= opt;

}

</script>

This function uses the "selectedIndex" to access which selection the user has made, and takes that selection and sends the user to that page, thereby creating a drop down navigation tool. The Event that is accessed is the "onChange" Event, which triggers when a user changes any form element. In this case, merely selecting the drop down choice carries the user to the selected page. The form setup to trigger this type of navigation could look like this:

<form name="myNav">

<select name="myList" onChange="jumpTo(myList)">

<option value="http://www.google.com">Go To Google</option>

<option value="http://www.yahoo.com">Go To Yahoo</option>

</select>

</form>

We can carry this concept further, and create a Navigation tool for all of our pages. In this version, we will write all the pages we wish to link to into arrays. One array will be for the link, the other will be for the "label", or what we want the user to see as the name of our link.

We then can carefully write a function to create the page, whereever it is called:

<script language="JavaScript">createMenu("myMenu","Click A Site!",myLinkArray,myLblArray)</script>

We will call this function on our pages where we wish to create the Select Menu. We have added code to be able to remove the current page from the list of pages, so the user is not tempted to click on the same page that they are currently on. To do this, we must access a property of the "Location" object. This is the same object we use to redirect the user over to the page they have selected, only in this case, we need to look at where the user currently is and not create an option, if they are already on the requested page.

var thisPage = location.href;

In this case, "thisPage" will show the full current URL. To be able to use this anywhere, we will strip off the domain information, in fact, everything up to the final slash "/", so we can use relative addressing:

var myStart = location.href.lastIndexOf("/") //grab last slash
var myEnd = location.href.length //find length
var thisPage = location.href.substring(myStart+1,myEnd) //grab what is past last slash, and compare

We use the function "lastIndexOf" to grab the last occurrence in the URL string of the slash. Then we find the total length of the URL, and use the "substring" function to strip away everything before the slash. The "myStart" and "myEnd" in this example are markers to keep track of where to strip the string.

Here is a working example of the "createMenu" page: Create Menu

We will continue to add more "Events" and "Event Handlers" as we learn more techniques!

 

Back To Top

2000, 2001, 2002 webdeavor, INC. & newmanic,   All rights reserved