CSCI 101: Intro to Computer Science

Lab 5.2:   JavaScript Event Handlers

In this lab you will learn how to use the JavaScript event handlers in your dynamic webpages. There are a number of events controlled by the browsers, some are mentioned below:

• the mouse cursor is placed over a certain area on the screen
• a form button is clicked with a mouse button
• a specific webpage is loading
• a filled out form is submitted

In order to use these events for your purposes, one has to specify what has to be done if this or those events occur. This is usually done by using JavaScript functions. More exactly, in order to use an event one has

1. tell the browser which JavaScript function has to be executed if a certain event occurs
2. design the corresponding JavaScript function

Below we present some examples of this approach.

1. If you move the mouse over the green button (and do NOT click it), the balls around this button change their color. Try it.

              

   To achieve this effect one has to tell the browser to display the red balls instead of the blue ones as soon as the mouse cursor is over the green area. You have to know that all images on the current (displayed) page are automatically numbered by the browser starting with number 0. Obviously, the left ball is the first image in this order and, thus, has number 0. The green button is the next image as it appeared in HTML for this webpage and can be checked by viewing its source. Hence, the right ball has number 2, Therefore, the browser has to replace the source files for images number 0 and number 2. Furthermore, the ball colors has to be restores as soon as the mouse cursor leaves the green area. All this can be achieved with the following lines of code:

   <img src="ballblue.gif"> <img src="blank.gif" onmouseover="RedBalls()" onmouseout="BlueBalls()"> <img src="ballblue.gif">

   In the first line we request to display the blue ball (whose image is in ballblue.gif). In the second line we use the JavaScript event handlers onmouseover and onmouseout to control the mouse cursor position. In the same line we request to execute the JavaScript functions RedBalls() and BlueBalls() (to be designed later) if the desired events occur. These events occurs if the mouse cursor is put over the area determined by the opening <A> and closing </A> tags, or is put outside this area. In our case it is the area determined by the image of the green button in file blank.gif.

   If we replace the second and the third lines with the following ones:

   <a href="lab5_2.html" onmouseover="RedBalls()" onmouseout="BlueBalls()"> Change Color</a>

   then the above ball colors will be changed if the mouse cursor will be put over the hyperlink Change Color. Try this.

   It remains to consider the functions RedBalls() and BlueBalls():

   function RedBalls() { document.images[0].src = "ballred.gif"; document.images[2].src = "ballred.gif"; } function BlueBalls() { document.images[0].src = "ballblue.gif"; document.images[2].src = "ballblue.gif"; }

   As you see, the functions just refer to the list of images of the current document and replace the file names (= source) of the images number 0 and number 2, i.e. the images of the balls.

2. As soon as we speak on functions, you probably remember that usually mathematical functions have arguments. For example x is the argument of the function f(x)=x².

   JavaScript Functions also might have arguments, that are usually called parameters. The parameters allow to simplify the webpage design, reduce the number of functions, and make them more flexible. For example, if i would be the number of the image to be replaced, then by passing this number as a parameter to the function we can manipulate different images with only one function.

   To make this clear, consider the again the above situation with two balls and a button:

              

   Now the left ball, the button, and the right ball got numbers 3, 4, and 5 respectively. We can use the functions

   function RedImage(i) { document.images[i].src = "ballred.gif"; } function BlueImage(i) { document.images[i].src = "ballblue.gif"; }

   to change the color of the left ball and the right ball. Try these links. To achieve this we call the above functions for i=3 and i=5 respectively, as shown below:

   <a href="lab5_2.html" onmouseover="RedImage(3)" onmouseout="BlueImage(3)">left ball</a> and <a href="lab5_2.html" onmouseover="RedImage(5)" onmouseout="BlueImage(5)">left ball</a>

   Now, the question is what if we would call these functions for i=4? The image number 4 corresponds to the green button. Try this. To restore the green button you may click the "Reload" button of your browser or just put (and do NOT click) the mouse cursor here. Try to figure out how the restoration is done in the last case.

   You can even change the color of the left AND the right balls by using just these functions. To do so you have to slightly modify the event handler instructions and calling the functions for each ball whose color you wish to change:

   <a href="lab5_2.html" onmouseover="RedImage(3); RedImage(5)" onmouseout="BlueImage(3); BlueImage(5)">the left AND the right</a>

   So, be very attentive changing the webpage images and pay particular attention on their numbers. The principles described here are widely used in practice, for example for constructing menus, as it is done for this web page. The implementation is a bit more complicated, but the main idea is based on using the JavaScript event handlers.