|
|
|
|
|
|
Putting text on the status bar
The first example demonstrates how to manupulate text on the status bar. When you move the cursor over a hyperlink, the status bar shows the destination URL. This is not very helpful. Fortunately, it is very easy to put our own brief description there.The normal HTML code for a hyperlink might be something like this:
<A HREF="mylink.htm">Click here</A>
To display something on the status bar when the mouse is moved over this link, you need to add a little more:
<A HREF="mylink.htm" onMouseOver="window.status='Click
here to know more about me'; return true" onMouseOut="window.status=''; ">Click here</A>
The above code will produce a link like this. Don't click on it. It doesn't lead anywhere.
onMouseOver is the event and the
string part is our event handler. Keep in
mind that JavaScript is case-sensitive. Microsoft
Internet Explorer is more forgiving than
Netscape Navigator, so it's better to use
Navigator for checking your pages.
Displaying "Last Updated" date on documents
This is somewhat longer than the previous example. The JavaScript required to achieve this is given below:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Last updated :");
document.write(document.lastModified);
// -->
</SCRIPT>
Insert this code into the HTML document at the point where you want it to be displayed. The source is within <!-- ... --> so that it doesn't cause problems even if the browser does not support JavaScript. Also notice the // (JavaScript style) comment for -->. This is required for some browsers to interpret it properly.
Displaying a message in a pop-up window
JavaScript has a function calledalert()
which pops up a window with the message you pass to
alert() as parameter. The simplest example
of using this function is to display a message when
your page loads. To do this just put the following
code right after the <BODY> tag (or
within the <HEAD> tag or where ever
you want).
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
alert("Press Ok to start formatting your hard disk");
// end hiding -->
</SCRIPT>
This is a great way to scare off visitors to your page
but let us see if it's possible to something more
useful. What if we want to pop-up a message box when
the user clicks on a link. It so happens that this is
indeed possible. You can try clicking
here. To understand what is going on, take a look
at how the link is coded.
<A HREF="JavaScript: alert('your message here.')">
The JavaScript: part tells the browser
that it should execute the given JavaScript statement
when the link is clicked.It is also possible to pop-up a message when a button is clicked. Here is how
<FORM>
<INPUT TYPE=BUTTON VALUE="Click me"
onClick="alert('your message here')">
</FORM>
Notes
You might have noticed that the syntax used in each of the examples are very different. While the first one was embedded within another tag (<A HREF=...> in this case), the second one was within a SCRIPT tag. Another difference is that the first one is executed only when the specified event (MouseOver in this case) occured whereas the second one is executed as soon as it is encountered in the HTML document.The real power of JavaScript comes from its ability to define and call functions. To learn more about writing functions, go to the examples page. You will find some good JavaScript tutorials on my Links page.
