Intro to JavaScript - continued

Session 10 | Main Page | Previous Page


Special Characters & <PRE> Tags

<PRE> tags may be used to allow formatting of text using the document.write() method and special characters. The backslash (\) character tells the JavaScript interpreter that the next character has a special meaning. These characters are:

Character Function
n Newline
t Tab
r Carriage Return
\ Backslash

Placing the JavaScript between the <PRE> tags allows these characters to function just as normal pre-formatted text would within the browser. For example, this code:

<PRE> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("Hello.\nThis is a sample table:\n\n"); document.write("\tItem\tDescription\n\n"); document.write("\t 1\tItem One\n\t 2\tItem Two\n\t 3\tItem Three\n\n"); document.write("\nThe table uses the tab and newline characters for formatting"); // --> </SCRIPT> </PRE>

produces this output:


The key to remember is that ALL characters (spaces, line feeds, etc) are displayed when they occur between the <PRE> tags, including any spaces before the opening <SCRIPT> tag!


User Input

JavaScript provides a built-in method for obtaining input from a user. This is called the prompt method and uses the following syntax:

prompt(<prompt-string>,<default-value>); where:
prompt-string
is the message displayed in the input box which provides instructions for the user; and
default-value
is the initial value displayed in the input field of the input box.

This method returns the value entered into the input field (or the default value if nothing is entered) to the JavaScript. Essentially, the value entered in the input field replaces the prompt command in the JavaScript code.

This value can be saved in a variable for future use, or used in place as follows:

To save the value returned from the prompt method in a variable, declare the variable using var. This may be done at the same time as calling the prompt method, if appropriate. Use an assignment statement to store the returned value in the variable as follows:

<SCRIPT LANGUAGE="JavaScript"> <!-- var name=prompt("What is your name: ",""); document.write("<B>Hello " + name + ". Welcome to CIS500!</B>"); // --> </SCRIPT>

The output is as follows:

It is important to notice that the different strings used in the write method may be joined together using the '+' operator, called the concatentation operator, when working with strings.


Messages may be given to the user, separate from the contents of the web page, using the built-in alert method. This provides a pop-up message box, containing a message and button for the user to acknowledge the message and close the box.

The syntax of the alert method is:

alert(<message-string>);

where:

message-string
is the message to display for the user

For example, the following code displays a message for the user with the users name which was previously entered using the prompt method.

<SCRIPT LANGUAGE="JavaScript"> <!-- alert("Thanks for visiting " + name); // --> </SCRIPT>


So far, all of the JavaScript we've looked at executes as soon as the page loads and cannot be reused. Many times we want to have code that runs only at certain times. To do this, the code must be placed in special blocks called functions. Functions are declared as follows:

In the HEAD section of your document, create the JavaScript function using the following syntax:

<SCRIPT LANGUAGE="JavaScript"> <!-- function <function-name>(<arguments>) { <javascript-code> } // --> </SCRIPT>

where:

function-name
is a name you make up to uniquely identify the function for future reference
arguments
are one or more values passed to the function for it to use when it executes
javascript-code
is the actual JavaScript program code you want to perform the specific operation the function is designed to fulfill

For example, place this code in the HEAD section of your document:

<SCRIPT LANGUAGE="JavaScript"> <!-- function statusmsg(msg) { window.status=msg; return true; } // --> </SCRIPT>

Then create a link in your document with the following code in it:

<A HREF="somelink.html" onMouseOver='return statusmsg("This is a test link");'>Test link</A>

where:

onMouseOver
is the event that occurs when the mouse pointer is positioned over the link (more on events later)

NOTE:

Test link

You will notice that the message is displayed in the browser's status bar, but does not disappear when the mouse is moved away from the link. This is because nothing has occurred to cause a different message to be displayed.

To ensure that the message is only seen when the mouse pointer is over the link, add the following line to your JavaScript in the HEAD section to set the default value for the status bar to nothing:

window.defaultStatus="";

The JavaScript in the HEAD section of your document should now look like:

<SCRIPT LANGUAGE="JavaScript"> <!-- window.defaultStatus=""; function statusmsg(msg) { window.status=msg; return true; } // --> </SCRIPT>


Session 10 | Main Page | Previous Page