JavaScript Examples

Contents: About JavaScript - Date And Time Of The Document - Hiding Your E-mail Address - Loading Stylesheets Depending on Platform - More Browser Information - Messages In The Status Bar - Displaying Alerts - Default Values in Forms - A Button As A Link - Using A Pop-Up Menu To Link - A Pop-Up Menu with a confirm button

Chapters

Table of Contents
Introduction
Basic HTML
Text
Images
Lists
Anchors
Tables
Frames
Forms
Javascript
SSI
CGI & Perl
Style Sheets
Special characters
Colour examples
HTML resources
Recent Updates
Index

About 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 small -and usable- 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. The script is very simple:

<SCRIPT TYPE=text/javascript> var theDate = ""
theDate = document.lastModified
document.writeln("Last Updated: ");
document.write(theDate);
document.write();
</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. Also, the date is returned in a format that may not be clear to everyone (month/day/year). You may prefer to just put in the date yourself or use a server side include which allows you control over the way the date is displayed.

Another important thing to know for this example and the ones below, is that most browsers get really nervous if there are hard returns in a line of Javascript. Therefore, you can use the text wrap feature of your HTML editor but you are better of not putting any returns in any line of JavaScript.

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 these harvesters and avoid ending up in their databases. This is how my e-mail address is included at the bottom of this page:

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.

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 so you may want leave some sort of back door.

Loading Stylesheets Depending on 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 make your page look more or less the same on different platforms, by loading a style sheet depending on the platform. Here is the script that is in the header of these pages:

<SCRIPT TYPE=text/javascript LANGUAGE=JavaScript>

</SCRIPT>

<LINK HREF=styles.common.css REL=stylesheet TYPE=text/css>

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" the stylesheet for Windows is loaded, otherwise that for Macintosh. By taking the first three characters and converting that to lowercase the script should recognise al flavours of windows: WinNT, Win98, Windows 2000, etc. These pages use three style sheets: one for Macintosh, one for Windows and a third one with common styles for both platforms. Depending on which platform your computer runs on it will load either the windows or Macintosh stylesheet and the common one. In fact the two style sheets for each platform contain only font size (9pt for Windows and 12pt for Macintosh). All other styles are defined in styles.common.css.

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>

</SCRIPT>

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

Messages In The Status Bar

Javascript makes some things really very simple. One of them is to display a message in the statusbar of the browser as long as the mouse pointer is over a link. This is all it takes:

<A HREF=index.html onMouseOver="self.status='The index to my HTML Guide';return true">Contents</A>

Contents

This shows in the document as a normal link. However, if you move your mouse pointer over the link, you will see that the status bar displays the message rather than the usual URL of the document. I have used this in the table of contents of this Guide.

Displaying Alerts

Javascript also offers the possibility to display alerts. Here are two ways of doing this: the first one is to display an alert when the mouse pointer is over a link. It looks similar to the status bar thing above:

<A HREF=index.html 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. Personally, I find this one really irritating, but there's no arguing about taste.

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

<A HREF=index.html onClick="if(confirm('Are you sure'))this.href='index.html'; else this.href='tricks.html#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. There is no way to avoid a reload of the page.

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.

As soon as you click in the email field, you see the text "your email" disappears.

A Button As A Link

As you can see above, I have buttons linking to the index of this guide and to my home page. This is quite simple to do. For every button there is the following bit of Javascript in the header of the document:

As you can see it is really simple. The input type is a button. The onClick attribute tells the browser to call the function index() when the button is clicked and the VALUE attribute tells what the text in the button should be. The function, by the way, can have any name. the function index is defined in script tags in the header of the document.

If you want to use more than one button, you have to define a function within the <SCRIPT> and </SCRIPT> tags for each page you want to link to. Make sure the functions have different names. For each function you can put as many buttons as you want all over your page.

Using A Pop-Up Menu To Link

Using JavaScript, it is realy easy to create a pop-up menu to switch pages. In the header of every chapter there is the following bit of Javascript:

<HTML><HEAD>

<SCRIPT TYPE=text/javascript>

</SCRIPT></HEAD><BODY>

<CENTER><FORM NAME=jump>
<SELECT NAME=chapter onChange='jump_around();'>
<OPTION>HTML Guide Index
<OPTION>My home page
<OPTION>World Liberalism
<OPTION SELECTED>Select a chapter
</SELECT>
</FORM></CENTER>

You can probably see a similarity between this one and the button explained above. There is a function jump_around() which is called by the form when a choice is made from the pop up menu. In the function you see the document.jump.elements[0].selectedIndex bit. You recognise the "document" bit and the "jump" bit (which is the name of the form. The "elements[0]" refers to the number of items in the form. In this case the pop-up menu is the first element of the form, so the value is 0. In the form that is on top of every chapter the pop-up menu is the second element (the button is the first one) so in that case is says "elements[1]". This is how the form will show up on your page:

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.

Chapters

A Pop-Up Menu With A Confirm Button

It is also possible to use a pop-up menu with a confirm button. Look at this example:

<CENTER><FORM NAME=jump_again>
<SELECT NAME=chapter>
<OPTION SELECTED>HTML Guide Index
<OPTION>My home page
<OPTION>World Liberalism
</SELECT>
<INPUT TYPE=button onClick=jump_around_again() VALUE=Go!>
</FORM></CENTER>

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:

In this case, it is the button that calls the function. But the function looks at what was selected in the menu. The function jump_around_again() is identical to jump_around() used above. However, calling the same function from two different forms can potentially cause problems and is best avoided.

Please send comments and suggestions to me by [email protected].
I will also try to answer any questions you may have.

I'd be pleased if you would visit my home page.