JavaScript

JavaScript offers a relatively simple way to add interactive elements to your site. JavaScript was invented by Netscape and has nothing to do with Java made by Sun (which is a C++ like programming language). This page is not an extensive guide to JavaScript but offers some examples to get you started.

Date and time of the document

JavaScript offers the possibility to automatically write the date you last modified a document:

<SCRIPT TYPE="text/javascript">
<!--
document.write("Last updated: ");
document.write(document.lastModified);
//-->
</SCRIPT>

You should note that the script gets the date from the file on the server, so in practice that is the date you last uploaded the file to your server.

Hiding your e-mail address

Spammers, the people that send unsolicited (commercial) e-mail around use special software that crawls all over the web and harvests e-mail addresses. You can use javascript to make your address unrecognisable to at least part of those harvesters and avoid ending up in their databases:

<SCRIPT TYPE="text/javascript">
<!--
document.write("<A HREF=" + "ma" + "il" + "to" + ":someone" + "@" + "somewhere" + ".com" + ">" + "e-mail" + "</A>")
//-->
</SCRIPT>

Here is how you use an image as link to your email address in much the same manner. Note the use of the single and double quotes. In Javascript you can use single quotes safely inside double quotes or the other way around. If you use double quotes inside double quotes or single quotes inside single quotes you'll run into trouble.

<SCRIPT TYPE="text/javascript">
<!--
document.write('<A HREF=' + 'ma' + 'il' + 'to' + ':someone' + '@' + 'somewhere' + '.com' + '>' + '<IMG SRC="apple.gif" ALT="Click to mail me" WIDTH="56" HEIGHT="52"><' + '/A>')
//-->

As you can see the principle is very simple: the address is chopped up in little bits which a harvester will not recognise. The only disadvantage is that browsers which do not recognise Javascript will not show your e-mail address. There are better ways of hiding your e-mail adres using PHP.

Getting information about the platform

If you have access to computers with different operating systems you may already have noticed that the same font size in points displays quite differently on, for example, an Apple Macintosh and a Windows machine. Javascript can help you get information about the platform your page is displayed on:

<SCRIPT TYPE="text/javascript">
<!--
if ( navigator.platform.substring(0,3).toLowerCase() == 'win')
   document.write('Welcome, windows user');
else if ( navigator.platform.substring(0,3).toLowerCase() == 'mac')
   document.write('Welcome mac user');
else document.write('Welcome unknown guest');
// -->
</SCRIPT>

The navigator.platform object holds the name of the platform the browser that looks at the page is running on. With substring(0.3) I pick the first three characters of that and with toLowerCase() it is converted to lower case. If that equals "win" you are looking at a Windows computer. If it equals "mac" you use an Apple Macintosh.

More browser Information

You can use Javascript to get more information from your browser and then take action depending upon that information. Here is how:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
document.write('navigator.platform: ' + navigator.platform + '<BR>')
document.write('navigator.appVersion: ' + navigator.appVersion + '<BR>')
document.write('navigator.appName: ' + navigator.appName)
// -->
</SCRIPT>

This enables you to make dynamic pages that adjust themselves to the browser and platform of the user.

Displaying alerts

Javascript also offers the possibility to display alerts. You can display an alert when the mouse pointer is over a link:

<A HREF="index.php" onMouseOver="alert('This link brings you the table of contents')">Contents</A>

Contents

This looks like a normal link but as soon as you move the mouse pointer over it, an alert will appear. If you go to the link and click it fast enough, the alert will never appear. The alert will only appear once if you keep the mouse pointer over the link. The ONMOUSEOVER attribute will work with any element:

<P onMouseOver="alert('This is Latin text!')">Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur.</P>

Semper ubi sub ubi. Quone modo nunc, fulve bos? Si hoc non legere potes, tu asinus es. Tua mater tam antiqua ut linguam latinam loquatur.

The second way to display an alert is once the reader has clicked a link:

<A HREF="index.php" onClick="if(confirm('Are you sure'))this.href='index.php'; else this.href='javascript.php#_alert'">Contents</A>

Contents

This does something really nice. After clicking the link, the user is asked to confirm the choice. If 'yes' is chosen, the table of contents is loaded. If 'no' is chosen, the user returns to this page. Some browsers reload the entire page, most do not.

Default values in forms

You can use Javascript to set a value in a field and make that disappear when the cursor moves to that field.

<INPUT TYPE="TEXT" NAME="email" SIZE="30" VALUE="Your email" onFocus="if(this.value=='Your email')this.value='';">

As soon as you click in the email field, you see the text "Your email" disappears. You can use this in exactly the same way with a text area:

<TEXTAREA NAME="email" ROWS="3" COLS="40" onFocus="if(this.value=='Your comments')this.value='';">
Your comments</TEXTAREA>

You can restore the default value if the user leaves the field without entering a value:

<INPUT TYPE="TEXT" NAME="email" SIZE="30" VALUE="Your Email" onFocus="if(this.value=='Your Email')this.value='';" onBlur="if(this.value=='')this.value='Your Email';">

As you can see the field empties if you click in it and fills again with "your email" if you leave the field (click outside the field) without typing anything. If you do type any other text than "Your email" that value will be left in the field.

You can apply the same line of Javascript to a text area:

<TEXTAREA NAME="email" ROWS="3" COLS="40" onFocus="if(this.value=='Your comment')this.value='';" onBlur="if(this.value=='')this.value='Your comment';">
Your Email
</TEXTAREA>

You could use the onBlur attribute also to validate form input.

A button as a link

It is possible to use a button as a link:

<INPUT TYPE="button" onClick="location='index.php'" VALUE="HTML Guide Index">

As you can see it is really simple. The input type is a button. The onClick attribute contains a small bit of JavaScript that tells the browsers to go to index.php.

Using a pop-up menu to link

Using JavaScript, it is really easy to create a pop-up menu to switch pages:

<SCRIPT TYPE="text/javascript">
<!--

function jump_around() {
if (document.jumper.choice.value == 1) location = 'index.php';
else if (document.jumper.choice.value == 2) location = '../index.php';
else if (document.jumper.choice.value == 3) location = 'http://www.dederdekamer.org/';
}

//-->
</SCRIPT>

<FORM NAME="jumper" ACTION="">
<P><SELECT NAME="choice" onChange="jump_around();">
<OPTION SELECTED>Select a chapter
<OPTION VALUE="1">HTML Guide Index
<OPTION VALUE="2">My home page
<OPTION VALUE="3">My work
</SELECT></P>
</FORM>

There is a function jump_around() which is called by the form when a choice is made from the pop up menu. The ONCHANGE="jump_around();" attribute takes care of that. In the function you see the document.jumper.choice.value bit. You recognise the "document" bit. The form has been given the name "jumper"and the SELECT tag the name "choice". This is the easiest way of referencing forms.

Normally when you load this page, the form will say "Select a chapter" which is the OPTION SELECTED. If you select this option, nothing will happen, because it is not defined in the jump_around() function.

A pop-up menu with a confirm button

It is also possible to use a pop-up menu with a confirm button. The reader has to chose from a list first and then confirm that choice with a button:

<SCRIPT TYPE="text/javascript">
<!--

function jump_around_again() {
if (document.confirmjump.elements[0].selectedIndex == 0) location = 'index.php';
else if (document.confirmjump.elements[0].selectedIndex == 1) location = '../index.php';
else if (document.confirmjump.elements[0].selectedIndex == 2) location = 'http://www.dederdekamer.org/';
}

//-->
</SCRIPT>

<FORM ACTION="" NAME="confirmjump">
<P><SELECT>
<OPTION SELECTED>HTML Guide Index
<OPTION>My home page
<OPTION>My work
</SELECT>
<INPUT TYPE="button" onClick="jump_around_again()" VALUE="Go!"></P>
</FORM>

This uses the same pop-up menu. However, it is not the menu that calls the jump_around_again() function, but the button. That means you have to make a choice from the menu, and then press the "Go!" button. This is how the form will look:

The function looks at what was selected in the menu. The function jump_around_again() is almost identical to jump_around() used above. You can see here that the form is referenced by name (confirmjump) but the select element not. All the elements within a form are numbered, starting with 0. That is why this SELECT element can be referenced to with elements[0]. The selectedIndex method is then used to find out with option was selected. Incidentally, all the forms within a page are also numbered starting at zero, so you can reference forms with forms[0], forms[1], etc.