Example 3 - Responding to Events
As was discussed earlier, JavaScript is also an event driven scripting language. That means you can execute code in response to certain events. For example, when when click on a submit button Javascript can check the form fields to verify that they have been entered correctly. Or when you move your mouse over a link you can execute code. Example 3 below illustrates how Javacript events work.
<HTML>
<HEAD>
<TITLE> Example 3 </TITLE>
</HEAD>
<BODY>
<a href="http://www.tamu.edu/" onmouseover="window.alert('Good luck')">
Texas A & M University
</a>
<br>
<a href="http://www.utexas.edu/administration/"
onmouseover="window.status='Budget, HR, Purchasing, etc.';return true;"
onmouseout="window.status='';return true;">
Administration
</a>
</BODY>
</HTML>
Example 3 above illustrates the onmouseover event for two separate links. In each case, when the mouse moves over the link, the onmouseover event is sent to the link object which executes the Javascript code in quotes. Note that this JavaScript statements do not appear between <script> tags. The are actually attributes to existing HTML tags.
The first example with Texas A &: M is a bit silly, but it illustrates the event-drive nature of Javascript. When you move the mouse ofver the link the mouseover event is triggered and JavaScript displays an alert box. This makes it pretty hard to click the link.
The second example is probably more useful. When you move your mouseover the Administration link the status property of the window object is set to dislay a message. This way you can show additional information about a link. The return true statement is needed in this case because normally the browser displays the link location when you mouse over a link. In this case you want to execute the Javascript instead of displaying the link location.
Test Example 3
|
