Main Page

Basics

Scripts

JS Links





















































































The HTML Writers Guild


Email Sunshine


Basic JavaScript

JavaScript is a great way to enhance your web page - especially for those of us who don't know how to write the scripts ourselves.

Status Bar Text

The first script demonstrates how to manipulate text on the status bar. When you move the cursor over a hyperlink, the status bar shows the destination URL. This script allows you to easily replace the URL address with whatever you'd like. A common use is to add a brief description of the URL or brief title.

The normal HTML code for a hyperlink might be something like this:

<A HREF="hyperlink.html">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="hyperlink.html" onMouseOver="window.status='Click
here to know more about me'; return true">Click here</A>

The above code will produce a link like this link. Don't click on it now because it doesn't go 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.

Last Updated

This is script requires a little more coding than the one above:

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Last updated :");
document.write(document.lastModified);
// -->
</SCRIPT>

Place this script into the HTML document at the point where you want the date updated 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 Message in Popup Window
JavaScript has a function called alert() which pops up a window with the message you pass to alert() as parameter. The simplest example of 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>
Using this scripting incorrectly or too often will cause visitors to leave your site. Too many pop-up windows or pop-up windows that serve no purpose are very annoying.

Pop-up windows can be useful in some cases.If you'd like to pop-up a message window when clicking on a link it's very simple. Try clicking here. To understand, 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: 

<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 scripts is 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) occurred 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 Scripts page. You will find some good JavaScript references on my Links page.