CS 101: Lectures

home -- outline -- lectures -- assignments -- discussion -- tips -- links --

Wednesday March 12

The continuing wonders of Javascript

Rememer that we are using Netscape's JavaScript Guide as our online resource for the last two classes, in particular sections 1 and 2.

Event Handlers

While a web-page is being loaded and while a use looks at a document, moving over it with the mouse, certain events happen which the browser recognizes. For example you move the mouse over a link and it changes color and the URL appears in the status line of the window. Or the document is done loading and the message Document Done appears in the status window.

JavaScript allows you to initiate actions in case that some such event occurs. The following is a table of events, who is able to recognize them ("capture" them), and the name of the Event Handler that is used in the HTML tag (the table is taken from the Netscape site).

Event	Applies to	Occurs when	Event handler
Abort	images	User aborts the loading of an image (for example by clicking a link or clicking the Stop button)	onAbort
Blur	windows and all form elements	User removes input focus from window or form element	onBlur
Change	text fields, textareas, select lists	User changes value of element	onChange
Click	buttons, radio buttons, checkboxes, submit buttons, reset buttons, links	User clicks form element or link	onClick
DragDrop	windows	User drops an object onto the browser window, such as dropping a file on the browser window	onDragDrop
Error	images, windows	The loading of a document or image causes an error	onError
Focus	windows and all form elements	User gives input focus to window or form element	onFocus
KeyDown	documents, images, links, text areas	User depresses a key	onKeyDown
KeyPress	documents, images, links, text areas	User presses or holds down a key	onKeyPress
KeyUp	documents, images, links, text areas	User releases a key	onKeyUp
Load	document body	User loads the page in the Navigator	onLoad
MouseDown	documents, buttons, links	User depresses a mouse button	onMouseDown
MouseMove	nothing by default	User moves the cursor	onMouseMove
MouseOut	areas, links	User moves cursor out of a client-side image map or link	onMouseOut
MouseOver	links	User moves cursor over a link	onMouseOver
MouseUp	documents, buttons, links	User releases a mouse button	onMouseUp
Move	windows	User or script moves a window	onMove
Reset	forms	User resets a form (clicks a Reset button)	onReset
Resize	windows	User or script resizes a window	onResize
Select	text fields, textareas	User selects form element's input field	onSelect
Submit	forms	User submits a form	onSubmit
Unload	document body	User exits the page	onUnload

Defining Event Handlers

In all versions of Navigator, you define an event handler (a JavaScript function or series of statements) to handle an event. If an event applies to an HTML tag (that is, the event applies to the JavaScript object created from that tag), then you can define an event handler for it. The name of an event handler is the name of the event, preceded by "on." For example, the event handler for the focus event is onFocus. To create an event handler for an HTML tag, add an event handler attribute to the tag. Put JavaScript code in quotation marks as the attribute value. The general syntax is

<TAG eventHandler="JavaScript Code">

Here is a very simple example of how to use event-handlers. It shows you how to put stuff into the status line of the window. Look at the code that produces this

Let us see a more complex example which illustrates the usefulness of event-handlers. We can use the onClick event handler to handle submission of a form through a button we define instead of the usual submit button. This way we can include procedures that check the input to the form. Suppose for example we wanted to write a form that offers us to compute the square root of a number. As inputs we only want to allow positive numbers. Here is how we would do it:

<HTML>

<SCRIPT>
<!--
function validate_input(n) {
  if (n < 0) {
    alert("Not a positive number");
  }
  else {
    document.roots.submit()
  }
}
//-->
</SCRIPT>

<BODY>

<FORM NAME="roots" ACTION="cgi/root1.cgi" METHOD="GET">
Enter your number here: <INPUT TYPE="text" NAME="number" VALUE=0> <BR>
<INPUT TYPE="button" VALUE="Compute Square Root" OnClick="validate_input(document.roots.number.value);">

</BODY>

</HTML>

The web-page root1.html allows you to enter a number. Before we send that number to a server who does some potentially very expensive computations with it (computing a square root!), we check whether the input is suitable. We use a cgi root1.cgi to compute and display the square root. Note the new features in this JavaScript code:

We use the alert function to pop up a window with a warning message.
We use a function document.roots.submit() which simulates submitting the form with name roots. The logic behind this is object-based: there is an object document (the web-page we are looking at) which contains a from object of name roots, and this object has a method defined for it called submit which does not take any arguments (this is why we have the empty brackets). To call this method (or function) we have to say document.roots.submit()
We use the event handler OnClick for the button input type. Whenever somebody clicks this button, the piece of JavaScript code which it takes as an argument is executed. Here we call a function validate_input we defined ourselves in the header and pass to it one argument, the value that was put into the form. The way we access that value is determined by the object-based philosophy of JavaScript: there is an object called document, (the web-page) this object contains an form object called roots, the form contains an input object called number, the value of that object is stored in the field Putting things together we have to say document.roots.number.value to get the value that the user entered into the number field of the form roots in our document.




 


Of course for simple tasks like computing the square root, doing currency conversion,
temperature conversion we do not need to bother the server at all. We can do all of it
in JavaScript, so are more likely version of the above program might be the following
(remember though that the example above is helpful if the computational tasks go beyond
JavaScript's capabilities or resources).

<HTML>

<BODY>

<FORM NAME="roots">
Enter your number here: <INPUT TYPE="text" NAME="number" VALUE=0> <BR>
The square root of that number is: <INPUT TYPE="text" NAME="result" VALUE=0> <BR>
<INPUT TYPE="button" VALUE="Compute Square Root" OnClick="document.roots.result.value=Math.sqrt(document.roots.number.value); return tru
e;">

</BODY>

</HTML>


We don't even need an extra function, we can just use the sqrt method in the Math
object, and root2.html works just
as nicely.

Time for a rule:


 



 


And now for a completely different example which shows you how to change images
on your web-page. 


 















And here is how it is done.

<SCRIPT>
<!--
function on1() {
document.item1.src="skull.gif";
}
function on2() {
document.item2.src="skull.gif";
}
function on3() {
document.item3.src="skull.gif";
}
function on4() {
document.item4.src="skull.gif";
}
function off1() {
document.item1.src="empty.gif";
}
function off2() {
document.item2.src="empty.gif";
}
function off3() {
document.item3.src="empty.gif";
}
function off4() {
document.item4.src="empty.gif";
}

// -->
</SCRIPT>

<TABLE>
<TD><TR>
<a href="" onMouseOver="on1();" onMouseOut="off1()" onClick="return false;"><IMG SRC="empty.gif" NAME="item1" BORDER=0></a>
<TR>
<a href="" onMouseOver="on2();" onMouseOut="off2()" onClick="return false;"><IMG SRC="empty.gif" NAME="item2" BORDER=0></a>
<TD><TR>
<a href="" onMouseOver="on3();" onMouseOut="off3()" onClick="return false;"><IMG SRC="empty.gif" NAME="item3" BORDER=0></a>
<TR>
<a href="" onMouseOver="on4();" onMouseOut="off4()" onClick="return false;"><IMG SRC="empty.gif" NAME="item4" BORDER=0></a>
</TABLE>



The use of the event handlers does not surprise us anymore. There are only
two new features:


 We can give a name to the image element and refer to it in the JavaScript code to actually change the SRC attribute to another value.
 Note that in the anchor tag we let the onClick event handler
return false. That way the links are not actually activated if somebody clicks on the picture. 


The technique of changing pictures can be put to more helpful use than
in the above example. In a list of links it could graphically emphasize
the current link.