Contents
Home
Revision
Tables
Colours
Styles
Javascript

Javascript

Javascript is one of two web scripting languages, the other being VBscript. It allows you to insert programming code within HTML, which can executed by the browser, thereby increasing the interactivity of web pages. Examples of uses for Javascript include mouseover effects, animations, and forms which take some form of user input, and then manipulate it (calculations, screen displays etc.).

JavaScript applications in the browser are largely event-driven, in other words the user does something such as clicking a button or moving the mouse over a hyperlink, and this triggers some Javascript code (the event handler).

Giving a full account of Javascript is beyond the scope of this tutorial, but equally, inserting simple Javascript on your page does not require full understanding of the complexities of Javascript. What follows is an account of how to insert mouseover effects (images which change as you move your mouse over them) on the page.

Javascript Mouseover - Demonstration

When you move the mouse over the tank image, the browser generates an event (the mouseover event). Using Javascript you can detect this event happening, and trigger a Javascript programme. In this case the Javascript program changes the tank image to another image, identical in size and shape, but of a different colour, giving the illusion of a colour change In fact the whole image has changed.

Javascript Mouseover - Code

The <head></head> section

Javascript is inserted on the page using the <script> tag as shown below.

<script language="JavaScript">
    [JavaScript code goes here]
</script>

There are older browsers which do not recognise the <SCRIPT> tag. Rather than performing the Javascript, they will display the Javascript text on the screen. To get the older browser to skip the text within the <SCRIPT> tag you write your entire Javascript code as though it were an HTML comment.

<!-- HTML comment //-->

The generic syntax for JavaScript is therefore: -

<script language="JavaScript">
    <!--
        [JavaScript code goes here] 
    // -->
</script>

The mouseover example also uses a Javascript function (a special reusable code fragment) which must be placed inside the <HEAD> </HEAD> section.

function imageSwap(imgName,imgObjName) {
if (document.images) {
    document.images[imgName].src = eval(imgObjName + ".src");
}}

This looks like gibberish, but all it does is work out which image generated the mouseover event (imgName - "tank" in this case), and swap a new image into its place (tank2.gif).

To prevent a pause whilst the browser downloads the new image, it is usual practice to preload all of the images, i.e. to get them all on to the user's computer whilst the web page is loaded. This is done with the following code: -

if (document.images){
   tank1 = new Image(100,82); tank1.src = "tank1.gif";
   tank2 = new Image(100,82); tank2.src = "tank2.gif"; }

The complete code for the head section of the page is therefore: -

<head>
<title>Javascript Demonstration</title>
<script LANGUAGE="JavaScript">
<!--
if (document.images) {
   tank1 = new Image(100,82); tank1.src = "tank1.gif";
   tank2 = new Image(100,82); tank2.src = "tank2.gif";
}

function imageSwap(imgName,imgObjName) {
  if (document.images) {
    document.images[imgName].src = eval(imgObjName + ".src");
}}
//-->
</script>
</head>

The <body></body> section

The normal syntax for a hyperlink image is: -

<a href="http://www.pageresource.com/jscript/index4.htm">
    <img src="tank1.gif" width="100" height="82"
    alt="tank1" border="0"></a>

To capture the Mouseover event with Javascript you have to put onMouseOver and onMouseOut event handlers within the <a> tag, and you also have to name the image (name="tank") within the <image> tag.

<body>
<p><a href="http://www.pageresource.com/jscript/index4.htm"
    onMouseOver="imageSwap('tank','tank2')"
    onMouseOut="imageSwap('tank','tank1')">
    <img src="tank1.gif" width="100" height="82"
    alt="tank1" border="0" name="tank"></a></p> 
</body>

Learning More About Javascript

Netscape Javascript reference: The definitive language reference - but fairly technical
pageresource.com: A chatty set of tutorials can be found at: - http://www.pageresource.com/jscript/index4.htm

HTML Workshop