p10.html

	Previous Contents Next
10. Document Properties & Methods

The document object is associated with the contents of a window. It is a property of the window object and also is an object itself. It has properties and methods that permit JavaScript control over the look and feel of an HTML document.

Document Properties

Several of the properties of the document object are described in the following table:

**Properties of the document Object**
Property	Description
alinkColor	The color of the text used to display an active link--one the user has clicked on, but not yet released the mouse button.
bgColor	The color of the document background.
fgColor	The color of the document text (foreground). The color of text cannot be changed in a loaded document except with Internet Explorer.
lastModified	The date (as taken from the computer's clock) on which the document was last modified.
linkColor	The color of the text used to display a link that the user has not yet viewed.
location	The URL of the document.
referrer	The URL of the document from which the user arrived at the curent document by clicking a link.
title	The title of the document as given in the documents <TITLE> section.
vlinkColor	The color of the text used to display a link the user has visited.
	Properties That Are Objects Themselves
form	A form object and associated fields displayed in a document.

These properties are accessible with a command in the form:

document.property

If the reference is to the current document, you can leave off the document. prefix; however, for good script documentation, you probably should include it.

The location property provides a convenient way to navigate through a web. It is a reference to the browser's Location dialog box containing the URL of the current document. Therefore, if you need to link to a different document, just assign that document's URL to the location property:

These buttons work exactly like <A HREF=> links. In this case the name of the target document is simply assigned to the document.location property as in the following example coding from the first radio button:

<INPUT TYPE=RADIO onclick = "document.location='p01.html' " >1. The JavaScript Language

Other useful document properties are illustrated with the following buttons:

Also, check out the following link to see how you can use the referrer property.

Using document.referrer Property (Netscape Navigator 3.0)

Document Methods

The document methods relate to opening, closing, and writing to a document. They are summarized in the following table:

**Methods of the document Object**
Method	Description
clear ( )	Clears the contents of the specified document.
close ( )	Closes the document stream.
open ( )	Opens the document stream.
write ( )	Writes to the specified document.

In earlier examples we haven't used the document.open ( ) or document.close ( ) methods when to writing to a window. By using only document.write ( ), a new document is opened automatically and subsequent writing is to that document. However, the more formal and appropriate way of writing to windows makes use of the document stream.

The document.open ( ) method opens what is called an output stream to collect the output of subsequent document.write ( ) methods. After all such writes are performed, the document.close ( ) method causes any output written to the document stream to be displayed in the document.

<SCRIPT>
    Win1 = open ( "", "secondary")
    Win1.document.open ( )
    Win1.document.write (...stuff to write...)
    Win1.document.close ( )
</SCRIPT>

You can write text, HTML tags, and even pictures to the document stream. The following is a quick example:

<SCRIPT>
function WriteWin ( )
{
    Win1 = open ("", "", "width=450,height=250")

    Win1.document.open ( )
    Win1.document.write ("<HTML>")
    Win1.document.write ("<BODY>")
    Win1.document.write ("<H3>Writing to Documents</H3>")
    Win1.document.write ("Here are some HTML tags, some text, a couple of pictures, and ")
    Win1.document.write ("a button that are written to the document stream."
    Win1.document.write ("<P>")
    Win1.document.write ("<IMG SRC='media/netscape.gif '>")
    Win1.document.write ("<IMG SRC='media/mix.gif '>")
    Win1.document.write ("<P>")
    Win1.document.write ("<FORM>")
    Win1.document.write ("<INPUT TYPE=BUTTON VALUE='Close' onclick='self.close ( )'>")
    Win1.document.write ("</FORM>")
    Win1.document.write ("</BODY>
    Win1.document.write ("</HTML>")
    Win1.document.close ( )
}
</SCRIPT>

It is not necessary to use as many document.write statements as has been done here for readability. Just remember, though, you cannot break a line in the middle of the quotes. Also, when specifying an image file in an <IMG> tag within a document.write statement, you probably will need to use the full URL, beginning with "http://".

External Documents

You need to keep your web updated with fresh information if it is to be interesting and informative. If your web is part of a business intranet, for example, you might wish to display memos or flyers that are produced routinely, or provide spreadsheet data or charts and graphs that change on a daily basis. One of the ways of providing this information is through secondary windows. By doing so, you do not have to revise your web pages extensively, adding all the HTML code to integrate the changing information. You can simply stick in a button or a link to call up the information in a secondary window.

Current Correspondence

<SCRIPT>
function Display ( File )
{
Win1 = open (File, "secondary", "width=450,height=275,toolbar,scrollbars")
}
</SCRIPT>

<FORM>
<INPUT TYPE=BUTTON VALUE="Memo of 1/1/97 " onclick = "Display ( 'memo1-7-97.html' )" >
<A HREF="memo1-7-97.html" TARGET="Win2">Memo of 1/1/97</A><

<INPUT TYPE=BUTTON VALUE="Chart of 1/1/97 " onclick = "Display ( 'chart1-1-97.html' )" >
<A HREF="chart1-1-97.html" TARGET="Win1">Chart of 1/1/97</A>

<INPUT TYPE=BUTTON VALUE="Graph of 1/1/97 " onclick = "Display ( 'graph1-1-97.gif' )" >
<A HREF="graph1-1-97.gif" TARGET="Win1">Chart of 1/1/97</A>
</FORM>

If you use buttons for your secondary window displays, then you can employ a script to control the size and components of the window. In the above example, the Display ( File ) function gets the name of the file to display from the button and formats it in the specially sized and configured window. All items displayed use the same configuration.

You can also use an HTML link (<A HREF=...>) with a targeted window (TARGET="Win1"). If the window doesn't exist--which it doesn't--the browser will create one (fully configured) and display the document in it.

The above example memo was produced with a word processor (word-wrap off) and then saved as a text file with a .html extension. The only HTML code requirement is to include the <HTML>...</HTML> header and <PRE>...</PRE> format tags surrounding the text. You can, of course, provide full HTML formatting of the document if you want. You can also use text-to-HTML converters or use, say, the Microsoft Internet Assistant add-on for Word to format and save the document in HTML format.

The example chart was produced with Microsoft Excel and saved as a text file. A text editor was used to wrap the chart in the <HTML> and <PRE> tags and to save the file with a .html extension. Again, you can use the Microsoft Internet Assistant for Excel to directly produce the HTML file.

The example graph was produced within the Excel spreadsheet, copied to the clipboard, and opened as a new document in Corel PhotoPaint. It was then saved as a GIF file for direct import into the web.

By using secondary windows you save yourself much of the HTML and JavaScript coding that would be necessary to integrate external documents into the web page. With this technique you only have to add a button or link to make the document accessible.

Confirming Links

Before your scripts proceed to linked documents you may want to get user confirmation. You can tie your links to Confirmation boxes for this verification:

<SCRIPT>
function Confirm ( )
{
    var Msg1 = "\nYou must be 18 years of age or older to view this document.\n"
    var Msg2 = "If you are under 18, or if you live in an area where such images are illegal, "
    var Msg3 = "DO NOT CONTINUE. Click the Cancel button to return to the current page."

    if ( confirm (Msg1 + Msg2 + Msg3) ) {
        open ("beastiality1.html", "secondary", "width=350,height=300") }
}
</SCRIPT>

Adult Picture! (Netscape Navigator 3.0)

<SCRIPT>
var Msg1 = "\nYou must be 18 years of age or older to view this document.\n"
var Msg2 = "If you are under 18, or if you live in an area where such images are illegal, "
var Msg3 = "DO NOT CONTINUE. Click the Cancel button to return to the current page."
</SCRIPT>

<A HREF="beastiality2.html" onclick = "return confirm (Msg1+Msg2+Msg3 )" >Adult Picture!</A>

Form Objects

A form is a property of the document object. It also is an object in its own right. A form object is created when a <FORM> tag appears in the document. The following form containing three elements was created with the accompanying HTML code:

<FORM NAME="MyForm">
<INPUT TYPE=TEXT SIZE=15 NAME="MyTextBox" VALUE="My Text Box">
<INPUT TYPE=BUTTON NAME="MyButton" VALUE="My Button">
<INPUT TYPE=CHECKBOX NAME="MyCheckbox">My Checkbox
</FORM>

If you give a form a name in the <FORM> tag, its elements can be referenced in dot format just as with other JavaScript objects. That is, you can refer to a form element with the notation:

document.FormName.ElementName.property

So, for instance, the setting for the checkbox--on (true) or off (false)--is accessed and displayed with the notation:

Often, you will need to refer to the values users type in text fields. Here is where you're most likely to get the data that will be processed by your scripts. As you've seen in several examples already, the values residing in text fields are referenced through the value property of the field. In the above example, the value in the field named "MyTextBox" is given by:

As long as the form is named to distinguish it from other forms in your document, you can use this notation even in scripts that refer to elements in more than one form. Every element in every form must have a unique reference--and this can be provided by the form name even if element names are not unique. The following text fields have the same names but are defined in two differently named forms. So, their values can be referenced by the notations shown:

Sometimes when using functions to process form data it is convenient to pass the entire form to the function. You should recognize this method from previous examples:

<SCRIPT>
function ProcessForm ( form )
{
    var A = form.Text1.value
    var B = form.Text2.value
    var C = form.Text2.value
}
</SCRIPT>

The parameter this.form in the function call passes a reference to the current form, even though it is not named in the <FORM> tag. This reference is received as argument form in the function. (Note that the name form is nothing special; we could have named the argument anything we wanted.)

With a full reference to the form being passed to the function, it makes coding of the function a little easier since we need only to prefix field names with the form. notation rather than with the full document.FormName. notation. At least it takes less typing. Also, with this method, you still can use the same field names in two or more different forms. They are distinguished from one another by the passing of this.form. You can use either method of referring to forms and their fields. It's a matter of preference more than anything else.

Previous Contents Next