Copyright, 1998, Susan Anderson-Freed
The document.write() Function
In our last class, we examined the following piece of JavaScript Code:
<Script Language = "JavaScript1.1"
<!--
var x,y, z;
x = 10;
y = 15;
z = x + y;
document.write(x);
document.write(y);
document.write(z);
//-->
</Script>
|
This code produced the following, unsightly output.
JavaScript and HTML Output
The first step in producing a more user-friendly output is learning how to
incorporate HTML. The following code uses the document.write() function
to print a short message. Notice how the message and HTML tags are interspersed
in the Message variable.
The following table shows what is written to the Web page by this JS Script.
Execution of the JavaScript Code
Today is Thursday
|
Overloading the Addition Operator
Normally, when we consider the + symbol, we think of addition. Many
programming languages attach a second meaning to this symbol. When an operator
has more than one meaning, we say that the operator is overloaded. In the
case of the + operator, it can mean either addition or concatenation.
Concatenation is the string equivalent of addition. Assume that we have
two strings dog and house. Now let's apply the concatenation
operator to these string: dog + house. This produces a new string:
doghouse. Notice that the second string is appended to the first
string.
In JavaScript, we can use the concatenation operator in string variables or in
the document.write() function. The following table shows the desired
output for our arithmetic program.
There are at least two different ways to achieve this result:
- Intersperse the JS variables and HTML tags in the document.write()
statement.
- Create a string variable that concatenates each portion of the message as
we develop the code.
Placing JS variables and HTML tags in the document.write()
statement.
The document.write() statement handles a single string.
However, we may produce this single string through concatenation. The following
JavaScript code modifies the document.write() statements in our
original program so that labels are printed with the variables' values. Notice
that we must explicitly use
tags to move to the next line.
Using a String Variable to PrintMessages
Frequently, we wish to develop a message's contents as we progress throught the
JS program. This will be a favorite technique when we learn about forms and
form variables. The following JS code uses a string variable, message, to
create a message in increments. A single document.write() statement is
used to print the message.
The above code works because message slowly accumulates the JS variables, string
literals, and HTML tags that we wish printed. The following table shows the
final contents of the message variable.
Contents of message
"x = " + x + "
y =
" + y + "
" + x + " + " + y + " = " + z + "
"
|
The JS code in this table produces exactly the same output as the
previous JS code. The code works because the
tags are
interspersed with the string literals and the JS variables.
The alert, confirm, and prompt Windows
Netscape uses three small windows to send or request information to user. The
windows are:
- Alert. Although Netscape calls this an alert window, it's actually
an error window. You'll probably see this window frequently when writing
JavaScript code. Every time you make a programming mistake at least one of
these windows will appear. The window contains a small OK button that
must be clicked before the window disappears.
The following table shows an alert box.
An Alert Box
|
- Confirm. If you've surfed the web frequently, you will have notice
that many times you'll receive a message like the following:
The warning is placed in a Confirm Window. You have two options you may
continue or you may cancel.
- Prompt. A prompt window asks the user a question, and then provides
space for a short answer. This will be the easiest way for us to obtain user
input. The other techniques are more complicated and involve forms.
The following table shows a prompt box.
A Prompt Box
|
The following form lets you explore the built-in Netscape windows. Just click
on the window that you desire. The JavaScript code displays the window. The
small pink rectangle is used to display any information returned by the window.
Click a Button to see the window
Displaying an Alert Window
We begin by writing the code to display an alert window. The code is simple;
however, given our present programming knowledge this window will ALWAYS appear
in our HTML pages. In the next class we'll learn how to control the appearance
of this window.
Notice that the code uses a built-in function, alert(). We place the
desired string message in the parentheis. In our example, we places a string
literal, but we could also use a string variable as indicated by the following
code.
The Alert Box with a String Variable
|
The Confirm Box
The Confirm box function asks the user a question that involves a yes/no answer.
This function returns a true/false value. True is returned if the user clicks
the yes button; false is returned if the user clicks the No button.
The Prompt Box
The prompt box contains a small message space and three clickable buttons. The
small message field is called a TEXT field. Initially, the contents of
these field is undefined. The buttons determine the new contents of this
text field as follows:
- OK. Signals acceptance of the current contents of the text field.
- Clear. Removes the the contents of the next field. You would
typically do this before you enter a new value.
- Cancel cancels the current operation.
The following table contains the code for a simple prompt box. This box asks
the user to enter his/her name. The WEB page changes automatically in response
to the user's entry.
Notice that the prompt() statement contains two strings. The first
string represents the message that we wish to display. The second string is
optional, but if present it changes the default value of "undefined" that
initially appears in the box. By setting the second string to the empty string,
we save the user from having to clear the box. 