<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:
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!
JavaScript provides a built-in method for obtaining input from a user. This is called the prompt method and uses the following syntax:
- 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:
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:
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.
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:
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:
Then create a link in your document with the following code in it:
where:
- onMouseOver
- is the event that occurs when the mouse pointer is positioned over the link (more on events later)
NOTE:
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:
The JavaScript in the HEAD section of your document should now look like: