WebThings - by Jan Weijers
All chapters...
Table of contents
Introduction
A simple HTML document
Images
Lists
Links
Tables
Frames
Forms
Cascading style sheets
JavaScript
Programming in PHP
Server side includes
CGI & Perl
Extended characters
Examples of colours
Learn more
Software
Recent changes
Alphabetical index
In this chapter...
Date and time of the document
Hiding your e-mail address
Getting information about the platform
More browser Information
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

 

 

Taalkeuze...
U hebt gekozen om Engels als eerste taal te gebruiken.Nederlands vlaggetje Klik hier om te kiezen voor Nederlands.

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.

To the top

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.

To the top

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.

To the top

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.

To the top

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.

To the top

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.

To the top

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.

To the top

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.

To the top

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.

To the top

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.

To the top

 

Feedback welcome...

Please let me know your opinion about this guide, information you would like to be added or any errors you have discovered. Click here.

 

Open standards...

This site conforms completely to open standards of the World Wide Web Consortium (W3C). Click on the logos to verify that.

HTML 4 logo

CSS logo

 

 

©1995-2019 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.