HTML Learning Package - Javascript © Nigel Martin 2000

Javascript

Contents

Brief Introduction

Javascript radically improves a standard HTML page. It allows you to swap images when you move a cursor over them or highlight a hyperlink, allows form elements to influence each other on the fly, and allows calculations to be made without having to resort to server side programming such as a CGI script. One of the biggest advantages with using JavaScript though is that you can do a lot with very little programming. You also don't need any software other than a word processor and a Web browser, and you don't need access to a Web server so you can do all your work on your own computer. As Javascript is so versatile and expansive we will only concentrate on a few basic examples that are commonly used in web pages.

Basics

<SCRIPT language="JavaScript">

JavaScript programs are defined inside an HTML page by the use of the line above. This can be placed anywhere in the HTML page although it is preferable to place it before the </HEAD> tag. A JavaScript program is finished by the </SCRIPT> tag.

N.B. If using document.write the JavaScript program will need to be kept where the HTML needs to appear on the page.

The middle two extra lines shown here can be placed inside the JavaScript code so that compatibility with older browsers is kept:

You will also notice the use of the double-slash '//', this indicates a comment in JavaScript.

For re-usability it is better to create an external file say 'mine.js' to keep the code in and access it with the following line:

Dynamic HTML (or DHTML)

One of JavaScript's biggest uses is the ability to create HTML dynamically. Using the function 'document.write' we can create HTML dynamically.

For example the following JavaScript program creates a simple table as shown below the code:

<SCRIPT language="JavaScript">

</SCRIPT>

Link Events

Whenever a user clicks on a link, or moves the cursor over one, JavaScript is sent a link event. One link event is called 'onClick', and it gets sent whenever the user clicks on a link. Another link event is called 'onMouseOver'. This one gets sent when the user moves the cursor over the link.

HTML Code Needed

What gets displayed

<a href="jscript.htm#linkev" onClick="alert('Click me again!');">Click Here</a>

<a href="#" onMouseOver="alert('Click Ok!!');">Mouse over me!</a>

Click Here

Mouse over me!

The first interesting thing is that there are no <script> tags. That's because anything that appears in the quotes of an onClick or an onMouseOver is automatically interpreted as JavaScript. In fact, because semicolons mark the end of statements allowing you to write entire JavaScripts in one line, you can fit an entire JavaScript program between the quotes of an onClick although this isn't advised.

This is just like a normal anchor tag, but it has the onClick="" element, which says, "When someone clicks on this link, run the little bit of JavaScript between my quotes." Notice, there's even a terminating semicolon at the end of the alert.

Other Event handlers will be mentioned later in this tutorial.

Menu Selection

As can be seen from the top of this page, for example, there is a menu in Javascript that allows you to link to any part of the page. It's just like using hyperlinks but neater.

The javascript code for this is as follows:

The corresponding form code (using a select form) is:

<select name="select1" onChange="surfto(this.form)" size=7 class="contentli" >
<option value="0" selected>--- Choose a Lesson --- </option>
<option value=""></option>
<option value="#basics">BASICS</option>
<option value="#dhtml">DYNAMIC HTML</option>
<option value="#linkev">LINK EVENTS</option>
<option value="#menus">MENU SELECTION</option>
<option value="#openwin">OPEN WINDOW ON CLOSE</option>
<option value="#roll">ROLL-OVERS</option>
<option value="#lurl">DYNAMIC LOADING OF URL's</option>
<option value="#lurl">TIME FUNCTIONS</option>
</select>

The 'var' keyword in the code just defines a variable which is given the value of the form 'select1' option value i.e. 'ROLL-OVERS' in the form is given the value '#roll' which will take you to that part of the page.

The 'onChange' is another event handler in JavaScript and allows the function (as shown in the JavaScript code) to be launched when the user clicks on a different feature, in this case selects a different option.

Opening Windows

With Javascript you can cause a new window to open on the close of the current window being viewed (using onUnload) or indeed on opening the current window (using onLoad). The code is added to the <BODY> tag as follows for opening a window on closing the current one:

and for opening a new window on open the page (onLoad):

N.B. Watch what happens when this page is closed.

Roll-Overs

In the most common form, a roll-over consists of an image serving as a hypertext link. While the mouse pointer is over the image, it changes appearence to attract attention to the link. For example, you could add a glow effect, a drop shadow or simply change the background color. Here is an example:

function chgImg(name, image)
{
if (document.images)
{document[name].src = eval(image+".src");
}
}
-->
</script>

The HTML code is as follows:

Move your mouse over this image to see it change:

Dynamically Loading New Pages

With Javascript it is possible to have a new window opening with a specified URL input by the user.

Type in a URL (e.g. http://www.surrey.ac.uk) here to open a new window with that URL:

The Javascript code for this:

The code for the form:

Time Functions

It is possible in Javascript to display the current time/date.

Some methods for the date object: (uses the time displayed on your computer)

getDate() returns the day of the month
getDay() Returns the day of the week
getHours() returns the hour (Starts from 0-23)!
getMinutes() returns the minutes
getSeconds() returns the seconds
getMonth() returns the month. (Starts from 0-11)!
getYear() returns the year
getTime() returns the complete time

It is also possible to create a form and have the time updated automatically every second or at any time interval you desire as shown here:

Here is the Javascript code:

You can also display today's date:

Here is the code:

Changing a picture dependent on the time of day

Using the document.write command which we saw earlier we can manipulate the HTML so that dependent on the time a certain picture is loaded. Here is the code:

<script language="JavaScript">

</SCRIPT>

I have created a couple of applications to show how Javascript can be used:

A Scientific Calculator Created using JavaScript:

--> View JScript Calculator

A JavaScript solution to the conjugate match problem:

--> View Conjugate Match

--> JAVA lesson