A Few Basic JavaScript Techniques No. 1

by Raymond Yu
30th July 1998

 

Web surfing can be about information. But increasingly it is becoming more than that: the web is a source of entertainment.

As a medium that provides information all that is needed is some text with perhaps the occasional images. As an entertainment more is required. Besides interesting graphics, well layout pages and site structure a more "lively" web page can uplift its entertainment value.

One of many technologies that makes a web page more "lively" is JavaScript. Much can be done with JavaScript.

For those who wanted to incorporate JavaScript elements reference books of hundreds and even thousand of pages can be rather discouraging. Even though the JavaScript language is relatively simple, learning it still takes time.

Meanwhile, software that can generate basic JavaScript may not be economical for the occasional users.

So this series aim to introduce a few popular JavaScript techniques that can be used to add "live" to your web page.

 

JavaScript Place in HTML

Just a quick word about the placement of JavaScript codes in relation to the other HTML tags. The codes are placed mainly in between the <SCRIPT></SCRIPT> containers which are usually located within the <HEAD></HEAD>. Typically, the structure looks like this:

 

<HTML>

<HEAD>

<TITLE> </TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

[the JavaScript codes are put here]

-->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

 

The <SCRIPT></SCRIPT> container simply tells the browser to treat whatever is contained within it as a script of a particular language. In this case the language specified is "JavaScript".

The funny looking exclamation marks and dashes (ie. "<!--" and
"-->") has the effect of hiding the codes from browsers (perhaps not that many these days) that are unable to read JavaScript. Such a browser will simply ignore the codes.

Some JavaScript elements are, however, placed within the <BODY></BODY> containers, or even within other HTML tags (as in the first example).

 

Displaying Messages

The Code

 

<A HREF="anylink.html" onMouseOver="self.status='Hello!';return true">1.Moving the mouse over this text will display the message.</A>

 

What does it do?

This code causes a message to appear in the status area when the mouse is moved over a link or an object such as an image. This is a fairly simple technique, but its power lies in its simplicity. It can be used to provide "help", additional information, jokes or just something fun about the link or image that the surfer is pointing to.

 

How does it work?

The important JavaScript code here is "onMouseOver". This code belongs to a class that is commonly referred to as an "Event Handler".

When the users take some action, such as moving the mouse, messages called events are generated. This tells the program what the user is doing. These messages are passed to the Event Handler, if there is one, which then tells the program to do something.

Fig 1In this example it causes the word "Hello!" to be displayed in the status area of the browser. (Fig 1) This is achieved by the "self.status=" element which tells the browser to set the status area to display whatever text is contain within the single quotation mark.

 

 

 

 

 

 

You can easily adapt this code to display any other word or words. For example, the following display a longer message when the mouse is over the Apple logo (Fig 2):

 

<A HREF="anylink.html" onMouseOver="self.status='Hello! Your mouse is over the apple.';return true">2.<IMG SRC="apple.gif" ALIGN=MIDDLE WIDTH="32" HEIGHT="36" BORDER="0" HSPACE="0" VSPACE="0"></A>

 

Fig 2Really long message is however not advisable. Bear in mind that the number of words that can be displayed in the status area is limited by the size of the browser and monitor (and not all surfers use a 21" monitor!). If the sentence is too long it simply gets truncated. Anyway long messages tend to loose their impact. The message should be short and to the point.

 

 

 

 

 

Where else can a message goes?

The message does not just have to appear in the status area. It can be displayed in a text box within the web page for example, or in a text box or status area of another window.

Take a look at this example: (this goes within the <BODY></BODY> containers)

 

<FORM NAME='nameOfForm'>

Message will appear here:

<BR>

<TEXTAREA NAME='outputBox' ROWS='3' COLS='50'></TEXTAREA>

</FORM>

<BR>

<A HREF="anylink.html" onMouseOver="self.document.nameOfForm.outputBox.value='Hello! Your mouse is over the apple.';return true" onMouseOut="self.document.nameOfForm.outputBox.value='Bye!';return true"><IMG SRC="apple.gif" ALIGN=MIDDLE WIDTH="32" HEIGHT="36" BORDER="0" HSPACE="0" VSPACE="0"></A>

Fig 3

Moving the mouse over the apple logo will display a message in the text box on the web page. (Fig 3)

 

 

 

 

 

 

 

And moving the mouse away from the logo will display the message in Fig 4.

 

Fig 4The codes are very similar to the first example.

A text box, which is an element of an HTML form, is created. It is given a name. Here it is just "nameOfForm" which you can replace with any name you wish.

To cause the message to appear within the text box the onMouseOver handler is modified. The "self.status" is replaced with "self.document.nameOfForm.outputBox.value".

 

 

 

 

What does this mumble jumble mean? This simply refers to the value of the text box. More specifically, the "self.document" component (formally known as an "object") refers to the current browser window. The "nameOfForm.outputBox" component refers to the text box named "outputBox" in the web form named "nameOfForm". The "value" element says that we are talking about the value of the component (here it is the outputBox).

If you wish to use other name for the form and text box, remember to change all occurrences of "nameOfForm" and "outputBox".

The part to note is the additional event handler "onMouseOut". This event is triggered, as the name suggests, when the mouse moves away from the object or links. The syntax is identical to the onMouseOver event handler.

The onMouseOut event handler is not essential. But without this handler the message display by the onMouseOut handler will remain in the text box. This is different to the first example where the message in the status area will disappear once the mouse leave the object. Depending on the nature of the message you may wish it to disappear or to remain there.

As you can see using JavaScript does not have to be complicated. Indeed, so far we have just put a few simple codes within regular HTML tags. Now let us be a bit more adventurous and take a look at a simply function that extends the above example.

 

Allowing for User Input

Adds the following lines within the codes for the web form in the previous example:

 

Type your name here:

<BR>

<INPUT TYPE=TEXT NAME='theMsg' VALUE='' SIZE= 50 MAXLENGTH=80>

<A HREF='javascript: displayMessage()'>Click to display message</A>

 

Put the following JavaScript codes in the <HEAD></HEAD> containers:

 

<SCRIPT LANGUAGE="JavaScript">

function displayMessage()

{

self.document.nameOfForm.outputBox.value= "Welcome to my web site "+ document.nameOfForm.theMsg.value + ". Enjoy the stay!"

}

</SCRIPT>

 

This code grabs the text (the person’s name) entered by the user in the text box and then uses it as part of a customized message. (Fig 5) This adds a more personal touch to the message.

The "javascript: displayMessage()" element tells the browser to execute the function named "displayMessage()" when the hypertext link is clicked.

The function is defined within the <SCRIPT></SCRIPT> container in the header part of the HTML file. The "self.document.nameOfForm.outputBox.value" part of the code as explained above simply refers to the value of the outputBox. Similarly, "document.nameOfForm.theMsg.value" refers to the value of the text box named "theMsg", which is the box the user enter their name in. The plus "+" sign combines the rest of the predetermined message (which can be replace by any message of your choice) with the name entered by the user.

The "Hello" and "Bye" examples used here are not particularly imaginative. Perhaps you can do better?

The examples do show, however, that you do not need to have a degree in computer science to use JavaScript. With some thoughts and creativity even simple JavaScript techniques can make your web page much more exciting.

 

 


 

BackBack to Contents
More JavaScript TechniquesNext

 

 

Modified on: 29th November, 1998.
Copyright © 1998 Raymond Yu