Site hosted by Angelfire.com: Build your free website today!

Objects

The following objects are available in JavaScript:

anchor (anchors array)
button
checkbox
Date
document
elements array
form (forms array)
frame (frames array)
hidden
history
link (links array)
location

Math
navigator
password
radio
reset
select (options array)
string
submit
text
textarea
window

anchor object (anchors array)

A piece of text that can be the target of a hypertext link.

Syntax

To define an anchor, use standard HTML syntax:

<A [HREF=locationOrURL]
   NAME="anchorName"
   [TARGET="windowName"]>
   anchorText
</A>

HREF=locationOrURL identifies a destination anchor or URL. If this attribute is present, the anchor object is also a link object. See link for details.
NAME="anchorName" specifies a tag that becomes an available hypertext target within the current document.
TARGET="windowName" specifies the window that the link is loaded into. This attribute is meaningful only if HREF=locationOrURL is present. See link for details.
anchorText specifies the text to display at the anchor.

You can also define an anchor using the anchor method.

Description

If an anchor object is also a link object, the object has entries in both the anchors and links arrays.

The anchors array

You can reference the anchor objects in your code by using the anchors array. This array contains an entry for each <A> tag containing a NAME attribute in a document in source order. For example, if a document contains three named anchors, these anchors are reflected as document.anchors[0], document.anchors[1], and document.anchors[2].

To use the anchors array:


1. document.anchors[index]
2. document.anchors.length

index is an integer representing an anchor in a document.

To obtain the number of anchors in a document, use the length property: document.anchors.length.

Even though the anchors array represents named anchors, the value of anchors[index] is always null. But if a document names anchors in a systematic way using natural numbers, you can use the anchors array and its length property to validate an anchor name before using it in operations such as setting location.hash. See the example below.

Elements in the anchors array are read-only. For example, the statement document.anchors[0]="anchor1" has no effect.

Properties

The anchors object has no properties. The anchors array has the following properties:

length reflects the number of named anchors in a document

Methods

None.

Event handlers

None.

Property of

document

Examples

Example 1: an anchor. The following example defines an anchor for the text "Welcome to JavaScript".

<A NAME="javascript_intro"></A><A NAME="javascript_intro"> </A><A NAME="javascript_intro"> </A><A NAME="javascript_intro"> <H2>Welcome to JavaScript</H2> </A>

If the preceding anchor is in a file called intro.html, a link in another file could define a jump to the anchor as follows:

<A HREF="intro.html#javascript_intro">Introduction</A>

Example 2: anchors array. The following example opens two windows. The first window contains a series of buttons that set location.hash in the second window to a specific anchor. The second window defines four anchors named "0", "1", "2", and "3". (The anchor names in the document are therefore 0, 1, 2, ... (document.anchors.length-1)). When a button is pressed in the first window, the onClick event handler verifies that the anchor exists before setting window2.location.hash to the specified anchor name.

LINK1.HTML, which defines the first window and its buttons, contains the following code:

<HEAD> <TITLE>JavaScript - C omplete Reference Manual</TITLE> </HEAD> <SCRIPT> window2=open("link2.html","secondLinkWindow","scrollbars=yes,width=250, height=400") function linkToWindow(num) { if (window2.document.anchors.length > num) window2.location.hash=num else alert("Anchor does not exist!") } </SCRIPT> Links and Anchors <FORM> Click a button to display that anchor in window #2 <INPUT TYPE="button" VALUE="0" NAME="link0_button" onClick="linkToWindow(this.value)"> <INPUT TYPE="button" VALUE="1" NAME="link0_button" onClick="linkToWindow(this.value)"> <INPUT TYPE="button" VALUE="2" NAME="link0_button" onClick="linkToWindow(this.value)"> <INPUT TYPE="button" VALUE="3" NAME="link0_button" onClick="linkToWindow(this.value)"> <INPUT TYPE="button" VALUE="4" NAME="link0_button" onClick="linkToWindow(this.value)"> </FORM> LINK2.HTML, which contains the anchors, contains the following code: <XMP> <HEAD> <TITLE>Links and Anchors: Window 2</TITLE> </HEAD> <A NAME="0">Some numbers (Anchor 0)</A> <LI>one <LI>two <LI>three <LI>four <LI>five <LI>six <LI>seven <LI>eight <LI>nine <A NAME="1">Some colors (Anchor 1)</A> <LI>red <LI>orange <LI>yellow <LI>green <LI>blue <LI>purple <LI>brown <LI>black <A NAME="2">Some music types (Anchor 2)</A> <LI>R&B <LI>Jazz <LI>Soul <LI>Reggae <LI>Rock <LI>Country <LI>Classical <LI>Opera <A NAME="3">Some countries (Anchor 3)</A> <LI>Afghanistan <LI>Brazil <LI>Canada <LI>Finland <LI>India <LI>Italy <LI>Japan <LI>Kenya <LI>Mexico <LI>Nigeria <H3>See also</H3> <LI><A HREF=#link_object>link</A> object <LI><A HREF=JSmethods.html#anchor_method>anchor</A> method  <HR> <A NAME="button_object"></A><A NAME="button_object"> </A><A NAME="button_object"> </A><A NAME="button_object"> <H2>button object</H2> </A> A pushbutton on an HTML form. <H3>Syntax</H3> To define a button: <PRE> &LTINPUT TYPE="button" NAME="buttonName" VALUE="buttonText" [onClick="handlerText"]&GT </PRE> NAME="buttonName" specifies the name of the button object. You can access this value using the name property. VALUE="buttonText" specifies the label to display on the button face. You can access this value using the value property. To use a button object's properties and methods: <PRE> 1. buttonName.propertyName 2. buttonName.methodName(parameters) 3. formName.elements[index].propertyName 4. formName.elements[index].methodName(parameters) </PRE> buttonName is the value of the NAME attribute of a button object. formName is either the value of the NAME attribute of a form object or an element in the forms array. index is an integer representing a button object on a form. propertyName is one of the properties listed below. methodName is one of the methods listed below. <H3>Description</H3> A button object on a form looks as follows: <FORM> <INPUT TYPE="button" VALUE="Click me"> </FORM> A button object is a form element and must be defined within a &LTFORM&GT tag. The button object is a custom button that you can use to perform an action you define. The button executes the script specified by its onClick event handler. <H3>Properties</H3> <LI><A HREF=JSprops.html#name_property>name</A> reflects the NAME attribute <LI><A HREF=JSprops.html#value_property>value</A> reflects the VALUE attribute <H3>Methods</H3> <LI><A HREF=JSmethods.html#click_method>click</A> <H3>Event handlers</H3> <LI><A HREF=JSevents.html#onClick_event>onClick</A> <H3>Property of</H3> <LI><A HREF=#form_object>form</A> <H3>Examples</H3> The following example creates a button named calcButton. The text "Calculate" is displayed on the face of the button. When the button is clicked, the function calcFunction() is called. <XMP> <INPUT TYPE="button" VALUE="Calculate" NAME="calcButton" onClick="calcFunction(this.form)">

checkbox object

A checkbox on an HTML form. A checkbox is a toggle switch that lets the user set a value on or off.

Syntax

To define a checkbox, use standard HTML syntax with the addition of the onClick event handler:

<INPUT
   TYPE="checkbox"
   NAME="checkboxName"
   VALUE="checkboxValue"
   [CHECKED]
   [onClick="handlerText"]>
   textToDisplay

NAME="checkboxName" specifies the name of the checkbox object. You can access this value using the name property.
VALUE="checkboxValue" specifies a value that is returned to the server when the checkbox is selected and the form is submitted. This defaults to "on". You can access this value using the value property.
CHECKED specifies that the checkbox is displayed as checked. You can access this value using the defaultChecked property.
textToDisplay specifies the label to display beside the checkbox.

To use a checkbox object's properties and methods:


1. checkboxName.propertyName
2. checkboxName.methodName(parameters)
3. formName.elements[index].propertyName
4. formName.elements[index].methodName(parameters)

checkboxName is the value of the NAME attribute of a checkbox object.
formName is either the value of the NAME attribute of a form object or an element in the forms array.
index is an integer representing a checkbox object on a form.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.

Description

A checkbox object on a form looks as follows:

A checkbox object is a form element and must be defined within a <FORM> tag.

Use the checked property to specify whether the checkbox is currently checked. Use the defaultChecked property to specify whether the checkbox is checked when the form is loaded.

Properties

checked lets you programatically check a checkbox

defaultChecked reflects the CHECKED attribute

name reflects the NAME attribute

value reflects the VALUE attribute

Methods

click

Event handlers

onClick

Property of

form

Examples

Example 1. The following example displays a group of four checkboxes that all appear checked by default.

Specify your music preferences (check all that apply): <INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B <INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz <INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues <INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age

Example 2. The following example contains a form with three text boxes and one checkbox. The checkbox lets the user choose whether the text fields are converted to upper case. Each text field has an onChange event handler that converts the field value to upper case if the checkbox is checked. The checkbox has an onClick event handler that converts all fields to upper case when the user checks the checkbox.

<HEAD> <TITLE>Checkbox object example</TITLE> </HEAD> <SCRIPT> function convertField(field) { if (document.form1.convertUpper.checked) { field.value = field.value.toUpperCase()} } function convertAllFields() { document.form1.lastName.value = document.form1.lastName.value.toUpperCase() document.form1.firstName.value = document.form1.firstName.value.toUpperCase() document.form1.cityName.value = document.form1.cityName.value.toUpperCase() } </SCRIPT> <FORM NAME="form1"> Last name: <INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)"> First name: <INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)"> City: <INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)"> <INPUT TYPE="checkBox" NAME="convertUpper" onClick="if (this.checked) {convertAllFields()}" > Convert fields to upper case </FORM> <H3>See also</H3> <LI><A HREF=#form_object>form</A> and <A HREF=#radio_object>radio</A> objects  <HR> <A NAME="Date_object"></A><A NAME="Date_object"> </A><A NAME="Date_object"> </A><A NAME="Date_object"> <H2>Date object</H2> </A> Lets you work with dates and times. <H3>Syntax</H3> To create a Date object: <PRE> 1. dateObjectName = new Date() 2. dateObjectName = new Date("month day, year hours:minutes:seconds") 3. dateObjectName = new Date(year, month, day) 4. dateObjectName = new Date(year, month, day, hours, minutes, seconds) </PRE> dateObjectName is either the name of a new object or a property of an existing object. month, day, year, hours, minutes, and seconds are string values for form 2 of the syntax. For forms 3 and 4, they are integer values. To use Date methods: <PRE> dateObjectName.methodName(parameters) </PRE> dateObjectName is either the name of an existing Date object or a property of an existing object.. methodName is one of the methods listed below. Exceptions: The Date object's parse and UTC methods are static methods that you use as follows: <PRE> Date.UTC(parameters) Date.parse(parameters) </PRE> <H3>Description</H3> The Date object is a built-in JavaScript object. Form 1 of the syntax creates today's date and time. If you omit hours, minutes, or seconds from form 2 or 4 of the syntax, the value will be set to zero. The way JavaScript handles dates is very similar to the way Java handles dates: both languages have many of the same date methods, and both store dates internally as the number of milliseconds since January 1, 1970 00:00:00. Dates prior to 1970 are not allowed. <H3>Properties</H3> <LI>None. <H3>Methods</H3> <LI><A HREF=JSmethods.html#getDate_method>getDate</A> <LI><A HREF=JSmethods.html#getDay_method>getDay</A> <LI><A HREF=JSmethods.html#getHours_method>getHours</A> <LI><A HREF=JSmethods.html#getMinutes_method>getMinutes</A> <LI><A HREF=JSmethods.html#getMonth_method>getMonth</A> <LI><A HREF=JSmethods.html#getSeconds_method>getSeconds</A> <LI><A HREF=JSmethods.html#getTime_method>getTime</A> <LI><A HREF=JSmethods.html#getTimeZoneOffset_method>getTimeZoneoffset</A> <LI><A HREF=JSmethods.html#getYear_method>getYear</A> <LI><A HREF=JSmethods.html#parse_method>parse</A> <LI><A HREF=JSmethods.html#setDate_method>setDate</A> <LI><A HREF=JSmethods.html#setHours_method>setHours</A> <LI><A HREF=JSmethods.html#setMinutes_method>setMinutes</A> <LI><A HREF=JSmethods.html#setMonth_method>setMonth</A> <LI><A HREF=JSmethods.html#setSeconds_method>setSeconds</A> <LI><A HREF=JSmethods.html#setTime_method>setTime</A> <LI><A HREF=JSmethods.html#setYear_method>setYear</A> <LI><A HREF=JSmethods.html#toGMTString_method>toGMTString</A> <LI><A HREF=JSmethods.html#toLocaleString_method>toLocaleString</A> <LI><A HREF=JSmethods.html#UTC_method>UTC</A> <H3>Event handlers</H3> <LI>None. Built-in objects do not have event handlers. <H3>Property of</H3> <LI>None. <H3>Examples</H3> <XMP>today = new Date() birthday = new Date("December 17, 1995 03:24:00") birthday = new Date(95,12,17) birthday = new Date(95,12,17,3,24,0)

document object

Contains information on the current document, and provides methods for displaying HTML output to the user.

Syntax

To define a document object, use standard HTML syntax:

<BODY
   BACKGROUND="backgroundImage"
   BGCOLOR="backgroundColor"
   TEXT="foregroundColor"
   LINK="unfollowedLinkColor"
   ALINK="activatedLinkColor"
   VLINK="followedLinkColor"
   [onLoad="handlerText"]
   [onUnload="handlerText"]>
</BODY>

BACKGROUND specifies an image that fills the background of the document.
BGCOLOR, TEXT, LINK, ALINK, and VLINK are color specifications expressed as a hexadecimal RGB triplet (in the format "rrggbb" or "#rrggbb") or as one of the string literals listed in Color Values.

To use a document object's properties and methods:


1. document.propertyName
2. document.methodName(parameters)

propertyName is one of the properties listed below.
methodName is one of the methods listed below.

Description

An HTML document consists of a <HEAD> and <BODY> tag. The <HEAD> includes information on the document's title and base (the absolute URL base to be used for relative URL links in the document). The <BODY> tag encloses the body of a document, which is defined by the current URL. The entire body of the document (all other HTML elements for the document) goes within the <BODY> tag.

You can reference the anchors, forms, and links of a document by using the anchors, forms, and links arrays. These arrays contain an entry for each anchor, form, or link in a document.

Properties

alinkColor reflects the ALINK attribute

anchors is an array reflecting all the anchors in a document

bgColor reflects the BGCOLOR attribute

cookie specifies a cookie

fgColor reflects the TEXT attribute

forms is an array reflecting all the forms in a document

lastModified reflects the date a document was last modified

linkColor reflects the LINK attribute

links is an array reflecting all the links in a document

location reflects the complete URL of a document

referrer reflects the URL of the calling document

title reflects the contents of the <TITLE> tag

vlinkColor reflects the VLINK attribute

Methods

clear

open

write

writeln

Event handlers

None. The onLoad and onUnload event handlers are specified in the <BODY> tag but are actually event handlers for the window object.

Property of

window

Examples

The following example creates two frames, each with one document. The document in the first frame contains links to anchors in the document of the second frame. Each document defines its colors.

DOC0.HTML, which defines the frames, contains the following code:

<HEAD> <TITLE>Document object example</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="doc1.html" NAME="frame1"> <FRAME SRC="doc2.html" NAME="frame2"> </FRAMESET> DOC1.HTML, which defines the content for the first frame, contains the following code: <XMP> <SCRIPT> </SCRIPT> Some links <LI><A HREF="doc2.html#numbers" TARGET="frame2">Numbers</A> <LI><A HREF="doc2.html#colors" TARGET="frame2">Colors</A> <LI><A HREF="doc2.html#musicTypes" TARGET="frame2">Music types</A> <LI><A HREF="doc2.html#countries" TARGET="frame2">Countries</A> DOC2.HTML, which defines the content for the second frame, contains the following code: <XMP> <SCRIPT> </SCRIPT> <A NAME="numbers">Some numbers</A> <LI>one <LI>two <LI>three <LI>four <LI>five <LI>six <LI>seven <LI>eight <LI>nine <A NAME="colors">Some colors</A> <LI>red <LI>orange <LI>yellow <LI>green <LI>blue <LI>purple <LI>brown <LI>black <A NAME="musicTypes">Some music types</A> <LI>R&B <LI>Jazz <LI>Soul <LI>Reggae <LI>Rock <LI>Country <LI>Classical <LI>Opera <A NAME="countries">Some countries</A> <LI>Afghanistan <LI>Brazil <LI>Canada <LI>Finland <LI>India <LI>Italy <LI>Japan <LI>Kenya <LI>Mexico <LI>Nigeria <H3>See also</H3> <LI><A HREF=#frame_object>frame</A> and <A HREF=#window_object>window</A> objects  <HR> <A NAME="elements_object"></A><A NAME="elements_object"> </A><A NAME="elements_object"> </A><A NAME="elements_object"> <H2>elements array</H2> </A> An array of objects corresponding to form elements (such as checkbox, radio, and text objects) in source order. <H3>Syntax</H3> <PRE> 1. formName.elements[index] 2. formName.elements.length </PRE> formName is either the name of a form or an element in the forms array. index is an integer representing an object on a form. <H3>Description</H3> You can reference a form's elements in your code by using the elements array. This array contains an entry for each object (button, checkbox, hidden, password, radio, reset, select, submit, text, or textarea object) in a form in source order. For example, if a form has a text field and two checkboxes, these elements are reflected as <TT>formName.elements[0]</TT>, <TT>formName.elements[1]</TT>, and <TT>formName.elements[2]</TT>. Although you can also reference a form's elements by using the element's name (from the NAME attribute), the elements array provides a way to reference form objects programatically without using their names. For example, if the first object on the userInfo form is the userName text object, you can evaluate it in either of the following ways: <PRE> userInfo.userName.value userInfo.elements[0].value </PRE> To obtain the number of elements on a form, use the length property: <TT>formName.elements.length</TT>. Each radio button in a radio object appears as a separate element in the elements array. Elements in the elements array are read-only. For example, the statement <TT>formName.elements[0]="music"</TT> has no effect. The value of each element in the elements array is the full HTML statement for the object. <H3>Properties</H3> <LI><A HREF=JSprops.html#length_property>length</A> reflects the number of elements on a form <H3>Property of</H3> <LI><A HREF=#form_object>form</A> <H3>Examples</H3> See the examples for the <A HREF=JSprops.html#name_property>name</A> property. <H3>See also</H3> <LI><A HREF=#form_object>form</A> object  <HR> <A NAME="form_object"></A><A NAME="form_object"> </A><A NAME="form_object"> </A><A NAME="form_object"> <H2>form object (forms array)</H2> </A> Lets users input text and make choices from form objects such as checkboxes, radio buttons, and selection lists. You can also use a form to post data to a server. <H3>Syntax</H3> To define a form, use standard HTML syntax with the addition of the onSubmit event handler: <PRE> &LTFORM NAME="formName" TARGET="windowName" ACTION="serverURL" METHOD=GET | POST ENCTYPE="encodingType" [onSubmit="handlerText"]&GT &LT/FORM&GT </PRE> NAME="formName" specifies the name of the form object. TARGET="windowName" specifies the window that form responses go to. When you submit a form with a TARGET attribute, server responses are displayed in the specified window instead of the window that contains the form. windowName can be an existing window; it can be a frame name specified in a &LTFRAMESET&GT tag; or it can be one of the literal frame names _top, _parent, _self, or _blank; it cannot be a JavaScript expression (for example, it cannot be parent.frameName or windowName.frameName). Some values for this attribute may require specific values for other attributes. See <A HREF="http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt" TARGET="_top">RFC 1867</A> for details. You can access this value using the target property. ACTION="serverURL" specifies the URL of the server to which form field input information is sent. This attribute can specify a CGI or LiveWire application on the server; it can also be a mailto: URL if the form is to be mailed. See the <A HREF=#location_object>location</A> object for a description of the URL components. Some values for this attribute may require specific values for other attributes. See <A HREF="http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt" TARGET="_top">RFC 1867</A> for details. You can access this value using the action property. METHOD=GET | POST specifies how information is sent to the server specified by ACTION. GET (the default) appends the input information to the URL which on most receiving systems becomes the value of the environment variable QUERY_STRING. POST sends the input information in a data body which is available on stdin with the data length set in the environment variable CONTENT_LENGTH. Some values for this attribute may require specific values for other attributes. See <A HREF="http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt" TARGET="_top">RFC 1867</A> for details. You can access this value using the method property. ENCTYPE="encodingType" specifies the MIME encoding of the data sent: "application/x-www-form-urlencoded" (the default) or "multipart/form-data". Some values for this attribute may require specific values for other attributes. See <A HREF="http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt" TARGET="_top">RFC 1867</A> for details. You can access this value using the encoding property. To use a form object's properties and methods: <PRE> 1. formName.propertyName 2. formName.methodName(parameters) 3. forms[index].propertyName 4. forms[index].methodName(parameters) </PRE> formName is the value of the NAME attribute of a form object. propertyName is one of the properties listed below. methodName is one of the methods listed below. index is an integer representing a form object. <H3>Description</H3> Each form in a document is a distinct object. You can reference a form's elements in your code by using the element's name (from the NAME attribute) or the <A HREF=#elements_object>elements</A> array. The elements array contains an entry for each element (such as a checkbox, radio, or text object) in a form. <H4>The forms array</H4> You can reference the forms in your code by using the forms array (you can also use the form name). This array contains an entry for each form object (&ltFORM&gt tag) in a document in source order. For example, if a document contains three forms, these forms are reflected as <TT>document.forms[0]</TT>, <TT>document.forms[1]</TT>, and <TT>document.forms[2]</TT>. To use the forms array: <PRE> 1. document.forms[index] 2. document.forms.length </PRE> index is an integer representing a form in a document. To obtain the number of forms in a document, use the length property: <TT>document.forms.length</TT>. You can also refer to a form's elements by using the forms array. For example, you would refer to a text object named quantity in the second form as <TT>document.forms[1].quantity</TT>. You would refer to the value property of this text object as <TT>document.forms[1].quantity.value</TT>. Elements in the forms array are read-only. For example, the statement <TT>document.forms[0]="music"</TT> has no effect. The value of each element in the forms array is <TT>&ltobject nameAttribute&gt</TT>, where nameAttribute is the NAME attribute of the form. <H3>Properties</H3> The form object has the following properties: <LI><A HREF=JSprops.html#action_property>action</A> reflects the ACTION attribute <LI><A HREF=#elements_object>elements</A> is an array reflecting all the elements in a form <LI><A HREF=JSprops.html#encoding_property>encoding</A> reflects the ENCTYPE attribute <LI><A HREF=JSprops.html#length_property>length</A> reflects the number of elements on a form <LI><A HREF=JSprops.html#method_property>method</A> reflects the METHOD attribute <LI><A HREF=JSprops.html#target_property>target</A> reflects the TARGET attribute The forms array has the following properties: <LI><A HREF=JSprops.html#length_property>length</A> reflects the number of forms in a document <H3>Methods</H3> <LI><A HREF=JSmethods.html#submit_method>submit</A> <H3>Event handlers</H3> <LI><A HREF=JSevents.html#onSubmit_event>onSubmit</A> <H3>Property of</H3> <LI><A HREF=#document_object>document</A> <H3>Examples</H3> Example 1: named form. The following example creates a form called form1 that contains text fields for first name and last name. The form also contains two buttons that change the names to all upper case or all lower case. The function setCase shows how to refer to the form by its name. <XMP> <HEAD> <TITLE>Form object example</TITLE> </HEAD> <SCRIPT> function setCase (caseSpec){ if (caseSpec == "upper") { document.form1.firstName.value=document.form1.firstName.value.toUpperCase() document.form1.lastName.value=document.form1.lastName.value.toUpperCase()} else { document.form1.firstName.value=document.form1.firstName.value.toLowerCase() document.form1.lastName.value=document.form1.lastName.value.toLowerCase()} } </SCRIPT> <FORM NAME="form1"> First name: <INPUT TYPE="text" NAME="firstName" SIZE=20> Last name: <INPUT TYPE="text" NAME="lastName" SIZE=20> <INPUT TYPE="button" VALUE="Names to uppercase" NAME="upperButton" onClick="setCase('upper')"> <INPUT TYPE="button" VALUE="Names to lowercase" NAME="lowerButton" onClick="setCase('lower')"> </FORM> Example 2: forms array. The onLoad event handler in the following example displays the name of the first form in an alert dialog box. <XMP>

If the form name is musicType, the alert displays the following message:

You are looking at the <object musicType> form!

Example 3: onSubmit event handler. The following example shows an onSubmit event handler that determines whether to submit a form. The form contains one text object where the user enters three characters. The onSubmit event handler calls a function, checkData, that returns true if the number of characters is three; otherwise, it returns false. Notice that the form's onSubmit event handler, not the submit button's onClick event handler, calls the checkData function. Also, the onSubmit event handler contains a return statement that returns the value obtained with the function call.

<HEAD> </object><object musicType>   </object><object musicType>   </object><object musicType> <TITLE>Form object/onSubmit event handler example</TITLE> <TITLE>Form object example</TITLE> </HEAD> <SCRIPT> var dataOK=false function checkData (){ if (document.form1.threeChar.value.length == 3) { return true} else { alert("Enter exactly three characters. " + document.form1.threeChar.value + " is not valid.") return false} } </SCRIPT> <FORM NAME="form1" onSubmit="return checkData()"> Enter 3 characters: <INPUT TYPE="text" NAME="threeChar" SIZE=3> <INPUT TYPE="submit" VALUE="Done" NAME="submit1" onClick="document.form1.threeChar.value=document.form1.threeChar.value.toUpperCase()"> </FORM> </object> Example 4: submit method. The following example is similar to the previous one, except it submits the form using the submit method instead of a submit object. The form's onSubmit event handler does not prevent the form from being submitted. The form uses a button's onClick event handler to call the checkData function. If the value is valid, the checkData function submits the form by calling the form's submit method. <XMP> <HEAD> <TITLE>Form object/submit method example</TITLE> </HEAD> <SCRIPT> var dataOK=false function checkData (){ if (document.form1.threeChar.value.length == 3) { document.form1.submit()} else { alert("Enter exactly three characters. " + document.form1.threeChar.value + " is not valid.") return false} } </SCRIPT> <FORM NAME="form1" onSubmit="alert('Form is being submitted.')"> Enter 3 characters: <INPUT TYPE="text" NAME="threeChar" SIZE=3> <INPUT TYPE="button" VALUE="Done" NAME="button1" onClick="checkData()"> </FORM> <H3>See also</H3> <LI><A HREF=#button_object>button</A>, <A HREF=#checkbox_object>checkbox</A>, <A HREF=#hidden_object>hidden</A>, <A HREF=#password_object>password</A>, <A HREF=#radio_object>radio</A>, <A HREF=#reset_object>reset</A>, <A HREF=#select_object>select</A>, <A HREF=#submit_object>submit</A>, <A HREF=#text_object>text</A>, <A HREF=#textarea_object>textarea </A> objects  <HR> <A NAME="frame_object"></A><A NAME="frame_object"> </A><A NAME="frame_object"> </A><A NAME="frame_object"> <H2>frame object (frames array)</H2> </A> A window that can display multiple, independently scrollable frames on a single screen, each with its own distinct URL. Frames can point to different URLs and be targeted by other URLs, all within the same screen. A series of frames makes up a page. <H3>Syntax</H3> To define a frame object, use standard HTML syntax. The onLoad and onUnload event handlers are specified in the &LTFRAMESET&GT tag but are actually event handlers for the window object: <PRE> &LTFRAMESET ROWS="rowHeightList" COLS="columnWidthList" [onLoad="handlerText"] [onUnload="handlerText"]&GT [&LTFRAME SRC="locationOrURL" NAME="frameName"&GT] &LT/FRAMESET&GT </PRE> ROWS="rowHeightList" is a comma-separated list of values specifying the row-height of the frame. An optional suffix defines the units. Default units are pixels. COLS="columnWidthList" is a comma-separated list of values specifying the column-width of the frame. An optional suffix defines the units. Default units are pixels. &LTFRAME&GT defines a frame. SRC="locationOrURL" specifies the URL of the document to be displayed in the frame. The URL cannot include an anchor name; for example <TT>&LTFRAME SRC="doc2.html#colors" NAME="frame2"&GT</TT> is invalid. See the <A HREF=#location_object>location</A> object for a description of the URL components. NAME="frameName" specifies a name to be used as a target of hyperlink jumps. To use a frame object's properties: <PRE> 1. [windowReference.]frameName.propertyName 2. [windowReference.]frames[index].propertyName 3. window.propertyName 4. self.propertyName 5. parent.propertyName </PRE> windowReference is a variable windowVar from a window definition (see <A HREF=#window_object>window</A> object), or one of the synonyms top or parent. frameName is the value of the NAME attribute in the &LTFRAME&GT tag of a frame object. index is an integer representing a frame object. propertyName is one of the properties listed below. <H3>Description</H3> The &LTFRAMESET&GT tag is used in an HTML document whose sole purpose is to define the layout of frames that make up a page. Each frame is a window object. If a &LTFRAME&GT tag contains SRC and NAME attributes, you can refer to that frame from a sibling frame by using <TT>parent.frameName</TT> or <TT>parent.frames[index]</TT>. For example, if the fourth frame in a set has NAME="homeFrame", sibling frames can refer to that frame using <TT>parent.homeFrame</TT> or <TT>parent.frames[3]</TT>. The self and window properties are synonyms for the current frame, and you can optionally use them to refer to the current frame. You can use these properties to make your code more readable. See the properties listed below for examples. The top and parent properties are also synonyms that can be used in place of the frame name. top refers to the top-most window that contains frames or nested framesets, and parent refers to the window containing the current frameset. See the <A HREF=JSprops.html#top_property>top</A> and <A HREF=JSprops.html#parent_property>parent</A> properties. <H4>The frames array</H4> You can reference the frame objects in your code by using the frames array. This array contains an entry for each child frame (&ltFRAME&gt tag) in a window containing a &LTFRAMESET&GT tag in source order. For example, if a window contains three child frames, these frames are reflected as <TT>parent.frames[0]</TT>, <TT>parent.frames[1]</TT>, and <TT>parent.frames[2]</TT>. To use the frames array: <PRE> 1. [frameReference.]frames[index] 2. [frameReference.]frames.length 3. [windowReference.]frames[index] 4. [windowReference.]frames.length </PRE> frameReference is a valid way of referring to a frame, as described in the <A HREF=JSobjects.html#frame_object>frame</A> object. windowReference is a variable windowVar from a window definition (see <A HREF=#window_object>window</A> object), or one of the synonyms top or parent. index is an integer representing a frame in a parent window. To obtain the number of child frames in a window or frame, use the length property: <PRE> [windowReference.].frames.length [frameReference.].frames.length </PRE> Elements in the frames array are read-only. For example, the statement <TT>windowReference.frames[0]="frame1"</TT> has no effect. The value of each element in the frames array is <TT>&ltobject nameAttribute&gt</TT>, where nameAttribute is the NAME attribute of the frame. <H3>Properties</H3> The frame object has the following properties: <LI><A HREF=#frame_object>frames</A> is an array reflecting all the frames in a window <LI><A HREF=JSprops.html#name_property>name</A> reflects the NAME attribute of the &LTFRAME&GT tag <LI><A HREF=JSprops.html#length_property>length</A> reflects the number of child frames within a frame <LI><A HREF=JSprops.html#parent_property>parent</A> is a synonym for the window or frame containing the current frameset <LI><A HREF=JSprops.html#self_property>self</A> is a synonym for the current frame <LI><A HREF=JSprops.html#window_property>window</A> is a synonym for the current frame The frames array has the following properties: <LI><A HREF=JSprops.html#length_property>length</A> reflects the number of child frames within a frame <H3>Methods</H3> <LI><A HREF=JSmethods.html#clearTimeout_method>clearTimeout</A> <LI><A HREF=JSmethods.html#setTimeout_method>setTimeout</A> <H3>Event handlers</H3> <LI>None. The onLoad and onUnload event handlers are specified in the &LTFRAMESET&GT tag but are actually event handlers for the window object. <H3>Property of</H3> <LI>The frame object is a property of <A HREF=#window_object>window</A> <LI>The frames array is a property of both <A HREF=#frame_object>frame</A> and <A HREF=#window_object>window</A> <H3>Examples</H3> The following example creates two windows, each with four frames. In the first window, the first frame contains pushbuttons that change the background colors of the frames in both windows. FRAMSET1.HTML, which defines the frames for the first window, contains the following code: <XMP> <HEAD> <TITLE>Frames and Framesets: Window 1</TITLE> </HEAD> <FRAMESET ROWS="50%,50%" COLS="40%,60%" onLoad="alert('Hello, World.')"> <FRAME SRC=framcon1.html NAME="frame1"> <FRAME SRC=framcon2.html NAME="frame2"> <FRAME SRC=framcon2.html NAME="frame3"> <FRAME SRC=framcon2.html NAME="frame4"> </FRAMESET> FRAMSET2.HTML, which defines the frames for the second window, contains the following code: <XMP> <HEAD> <TITLE>Frames and Framesets: Window 2</TITLE> </HEAD> <FRAMESET ROWS="50%,50%" COLS="40%,60%"> <FRAME SRC=framcon2.html NAME="frame1"> <FRAME SRC=framcon2.html NAME="frame2"> <FRAME SRC=framcon2.html NAME="frame3"> <FRAME SRC=framcon2.html NAME="frame4"> </FRAMESET> FRAMCON1.HTML, which defines the content for the first frame in the first window, contains the following code: <XMP> <A NAME="frame1"></A><A NAME="frame1"> </A><A NAME="frame1"> </A><A NAME="frame1"> <H1>Frame1</H1> </A> <A HREF="framcon3.htm" target=frame2>Click here</A> to load a different file into frame 2. <SCRIPT> window2=open("framset2.htm","secondFrameset") </SCRIPT> <FORM> <INPUT TYPE="button" VALUE="Change frame2 to teal" onClick="parent.frame2.document.bgColor='teal'"> <INPUT TYPE="button" VALUE="Change frame3 to slateblue" onClick="parent.frames[2].document.bgColor='slateblue'"> <INPUT TYPE="button" VALUE="Change frame4 to darkturquoise" onClick="top.frames[3].document.bgColor='darkturquoise'"> <INPUT TYPE="button" VALUE="window2.frame2 to violet" onClick="window2.frame2.document.bgColor='violet'"> <INPUT TYPE="button" VALUE="window2.frame3 to fuchsia" onClick="window2.frames[2].document.bgColor='fuchsia'"> <INPUT TYPE="button" VALUE="window2.frame4 to deeppink" onClick="window2.frames[3].document.bgColor='deeppink'"> </FORM> FRAMCON2.HTML, which defines the content for the remaining frames, contains the following code: <XMP> This is a frame. FRAMCON3.HTML, which is referenced in a link object in FRAMCON1.HTML, contains the following code: <XMP> This is a frame. What do you think? <H3>See also</H3> <LI><A HREF=#document_object>document</A> and <A HREF=#window_object>window</A> objects  <HR> <A NAME="hidden_object"></A><A NAME="hidden_object"> </A><A NAME="hidden_object"> </A><A NAME="hidden_object"> <H2>hidden object</H2> </A> A text object that is suppressed from form display on an HTML form. A hidden object is used for passing name/value pairs when a form submits. <H3>Syntax</H3> To define a hidden object: <PRE> &LTINPUT TYPE="hidden" NAME="hiddenName" [VALUE="textValue"]&GT </PRE> NAME="hiddenName" specifies the name of the hidden object. You can access this value using the name property. VALUE="textValue" specifies the initial value of the hidden object. To use a hidden object's properties: <PRE> 1. hiddenName.propertyName 2. formName.elements[index].propertyName </PRE> hiddenName is the value of the NAME attribute of a hidden object. formName is either the value of the NAME attribute of a form object or an element in the forms array. index is an integer representing a hidden object on a form. propertyName is one of the properties listed below. <H3>Description</H3> A hidden object is a form element and must be defined within a &LTFORM&GT tag. A hidden object cannot be seen or modified by a user, but you can programmatically change the value of the object by changing its value property. You can use hidden objects for client/server communication. <H3>Properties</H3> <LI><A HREF=JSprops.html#name_property>name</A> reflects the NAME attribute <LI><A HREF=JSprops.html#value_property>value</A> reflects the current value of the hidden object <H3>Methods</H3> <LI>None. <H3>Event handlers</H3> <LI>None. <H3>Property of</H3> <LI><A HREF=#form_object>form</A> <H3>Examples</H3> The following example uses a hidden object to store the value of the last object the user clicked. The form contains a "Display hidden value" button that the user can click to display the value of the hidden object in an Alert dialog box. <XMP> <HEAD> <TITLE>Hidden object example</TITLE> </HEAD> Click some of these objects, then click the "Display value" button to see the value of the last object clicked. <FORM NAME="form1"> <INPUT TYPE="hidden" NAME="hiddenObject" VALUE="None"> <INPUT TYPE="button" VALUE="Click me" NAME="button1" onclick="document.form1.hiddenObject.value=this.value"> <INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b" onClick="document.form1.hiddenObject.value=this.value"> Soul and R&B <INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz" onClick="document.form1.hiddenObject.value=this.value"> Jazz <INPUT TYPE="radio" NAME="musicChoice" VALUE="classical" onClick="document.form1.hiddenObject.value=this.value"> Classical <SELECT NAME="music_type_single" onFocus="document.form1.hiddenObject.value=this.options[this.selectedIndex].text"> <OPTION SELECTED> Red <OPTION> Orange <OPTION> Yellow </SELECT> <INPUT TYPE="button" VALUE="Display hidden value" NAME="button2" onClick="alert('Last object clicked: ' + document.form1.hiddenObject.value)"> </FORM> <H3>See also</H3> <LI><A HREF=JSprops.html#cookie_property>cookie</A> property  <HR> <A NAME="history_object"></A><A NAME="history_object"> </A><A NAME="history_object"> </A><A NAME="history_object"> <H2>history object</H2> </A> Contains information on the URLs that the client has visited within a window. This information is stored in a history list, and is accessible through the Navigator's Go menu. <H3>Syntax</H3> To use a history object: <PRE> 1. history.propertyName 2. history.methodName(parameters) </PRE> propertyName is one of the properties listed below. methodName is one of the methods listed below. <H3>Description</H3> The history object is a linked list of URLs the user has visited, as shown in the Navigator's Go menu. <H3>Properties</H3> <LI><A HREF=JSprops.html#length_property>length</A> reflects the number of entries in the history object <H3>Methods</H3> <LI><A HREF=JSmethods.html#back_method>back</A> <LI><A HREF=JSmethods.html#forward_method>forward</A> <LI><A HREF=JSmethods.html#go_method>go</A> <H3>Event handlers</H3> <LI>None. <H3>Property of</H3> <LI><A HREF=#document_object>document</A> <H3>Examples</H3> Example 1. The following example goes to the URL the user visited three clicks ago in the current window. <XMP>history.go(-3)

Example 2. You can use the history object with a specific window or frame. The following example causes window2 to go back one item in its window (or session) history:

window2.history.back()

Example 3. The following example causes the second frame in a frameset to go back one item:

parent.frames[1].history.back()

Example 4. The following example causes the frame named frame1 in a frameset to go back one item:

parent.frame1.history.back()

Example 5. The following example causes the frame named frame2 in window2 to go back one item:

window2.frame2.history.back()

link object (links array)

A piece of text or an image identified as a hypertext link. When the user clicks the link text, the link hypertext reference is loaded into its target window.

Syntax

To define a link, use standard HTML syntax with the addition of the onClick and onMouseOver event handlers:

<A HREF=locationOrURL
   [NAME="anchorName"]
   [TARGET="windowName"]
   [onClick="handlerText"]
   [onMouseOver="handlerText"]>
   linkText
</A>

HREF=locationOrURL identifies a destination anchor or URL. See the location object for a description of the URL components.
NAME="anchorName" specifies a tag that becomes an available hypertext target within the current document. If this attribute is present, the link object is also an anchor object. See anchor for details.
TARGET="windowName" specifies the window that the link is loaded into. windowName can be an existing window; it can be a frame name specified in a <FRAMESET> tag; or it can be one of the literal frame names _top, _parent, _self, or _blank; it cannot be a JavaScript expression (for example, it cannot be parent.frameName or windowName.frameName).
linkText is rendered as a hypertext link to the URL.

You can also define a link using the link method.

To use a link object's properties:


document.links[index].propertyName

index is an integer representing a link object.
propertyName is one of the properties listed below.

Description

Each link object is a location object and has the same properties as a location object.

If a link object is also an anchor object, the object has entries in both the anchors and links arrays.

When a user clicks a link object and navigates to the destination document (specified by HREF=locationOrURL), the destination document's referrer property contains the URL of the source document. Evaluate the referrer property from the destination document.

The links array

You can reference the link objects in your code by using the links array. This array contains an entry for each link object (<A HREF=""> tag) in a document in source order. For example, if a document contains three link objects, these links are reflected as document.links[0], document.links[1], and document.links[2].

To use the links array:


1. document.links[index]
2. document.links.length

index is an integer representing a link in a document.

To obtain the number of links in a document, use the length property: document.links.length.

Elements in the links array are read-only. For example, the statement document.links[0]="link1" has no effect.

Properties

The link object has the following properties:

hash specifies an anchor name in the URL

host specifies the hostname:port portion of the URL

hostname specifies the host and domain name, or IP address, of a network host

href specifies the entire URL

pathname specifies the url-path portion of the URL

port specifies the communications port that the server uses for communications

protocol specifies the beginning of the URL, including the colon

search specifies a query

target reflects the TARGET attribute

The links array has the following properties:

length reflects the number of links in a document

Methods

None.

Event handlers

onClick

onMouseOver

Property of

document

Examples

Example 1. The following example creates a hypertext link to an anchor named javascript_intro.

<A HREF="#javascript_intro">Introduction to JavaScript</A>

Example 2. The following example creates a hypertext link to an anchor named numbers in the file DOC3.HTML in the window window2. If window2 does not exist, it is created.

<LI><A HREF=doc3.html#numbers TARGET="window2">Numbers</A>

Example 3. The following example takes the user back x entries in the history list:

<A HREF="javascript:history.go(-1 * x)">Click here</A>

Example 4. The following example creates a hypertext link to a URL. A set of radio buttons lets the user choose between three URLs. The link's onClick event handler sets the URL (the link's href property) based on the selected radio button. The link also has an onMouseOver event handler that changes the window's status property. As the example shows, you must return true to set the window.status property in the onMouseOver event handler.

<SCRIPT> var destHREF="'http://www.netscape.com/" </SCRIPT> <FORM NAME="form1"> Choose a destination from the following list, then click "Click me" below. <INPUT TYPE="radio" NAME="destination" VALUE="netscape" onClick="destHREF='http://www.netscape.com/'"> Netscape home page <INPUT TYPE="radio" NAME="destination" VALUE="sun" onClick="destHREF='http://www.sun.com/'"> Sun home page <INPUT TYPE="radio" NAME="destination" VALUE="rfc1867" onClick="destHREF='http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt'"> RFC 1867 <A HREF="" onMouseOver="window.status='Click this if you dare!'; return true" onClick="this.href=destHREF"> Click me</A> </FORM>

Example 5: links array. The following example opens the Netscape home page in the newWindow window. The linkGetter() function uses the links array to display the value of each of its links.

newWindow=window.open("http://www.netscape.com") function linkGetter() { msgWindow=window.open("") for (var i = 0; i < newWindow.document.links.length; i++) { msgWindow.document.write(newWindow.document.links[i] + " ") } }

location object

Contains information on the current URL.

Syntax

To use a location object:


[windowReference.]location.propertyName

windowReference is a variable windowVar from a window definition (see window object), or one of the synonyms top or parent.
propertyName is one of the properties listed below.

Description

The location object represents a complete URL. Each property of the location object represents a different portion of the URL.

The following diagram of a URL shows the relationships between the location properties:

protocol//hostname:port pathname search hash

protocol represents the beginning of the URL, up to and including the first colon.
hostname represents the host and domain name, or IP address, of a network host.
port represents the communications port that the server uses for communications.
pathname represents the url-path portion of the URL.
search represents any query information in the URL, beginning with a question mark.
hash represents an anchor name fragment in the URL, beginning with a hash mark (#).

See the properties (listed below) for details about the different parts of the URL, or the href for examples.

The location object has two other properties not shown in the diagram above:

href represents a complete URL.
host represents the concatenation hostname:port.

The location object is contained by the window object and is within its scope. If you reference a location object without specifying a window, the location object represents the current location. If you reference a location object and specify a window name, for example, windowReference.location.propertyName, the location object represents the location of the specified window.

Do not confuse the location object with the location property of the document object. You cannot change the value of the location property (document.location), but you can change the value of the location object's properties (window.location.propertyName). document.location is a string-valued property that usually matches what window.location is set to when you load the document, but redirection may change it.

Syntax for common URL types

When you specify a URL, you can use standard URL formats and JavaScript statements. The following list shows the syntax for specifying some of the most common types of URLs.

URL type Protocol Example

JavaScript code javascript: javascript:history.go(-1)

Navigator info about: about:cache

World Wide Web http: http://www.netscape.com/

File file: file:///javascript/methods.htm

FTP ftp: ftp://ftp.mine.com/home/mine

MailTo mailto: mailto:info@netscape.com

Usenet news: news://news.scruznet.com/comp.lang.javascript

Gopher gopher: gopher.myhost.com

URL type	Protocol	Example
JavaScript code	javascript:	javascript:history.go(-1)
Navigator info	about:	about:cache
World Wide Web	http:	http://www.netscape.com/
File	file:	file:///javascript/methods.htm
FTP	ftp:	ftp://ftp.mine.com/home/mine
MailTo	mailto:	mailto:info@netscape.com
Usenet	news:	news://news.scruznet.com/comp.lang.javascript
Gopher	gopher:	gopher.myhost.com

The javascript: protocol evaluates the expression after the colon (:), if there is one, and loads a page containing the string value of the expression, unless it is undefined. If the expression evaluates to undefined, no new page loads.

The about: protocol provides information on Navigator and has the following syntax:


about:[cache|plugins]

about: by itself is the same as choosing About Netscape from the Navigator's Help menu.
about:cache displays disk cache statistics.
about:plug-ins displays information about plug-ins you have configured. This is the same as choosing About Plug-ins from the Navigator's Help menu.

Properties

hash specifies an anchor name in the URL

host specifies the hostname:port portion of the URL

hostname specifies the host and domain name, or IP address, of a network host

href specifies the entire URL

pathname specifies the url-path portion of the URL

port specifies the communications port that the server uses for communications

protocol specifies the beginning of the URL, including the colon

search specifies a query

target reflects the TARGET attribute of a link object

Methods

None.

Event handlers

None.

Property of

document

Examples

Example 1. The following example sets the URL of the current window to the Netscape home page:

window.location.href="http://home.netscape.com/"

Example 2. The following example sets the URL of a frame named frame2 to the Sun home page:

parent.frame2.location.href="http://www.sun.com/"

See also the example for the anchor object.

Math object

A built-in object that has properties and methods for mathematical constants and functions. For example, the Math object's PI property has the value of pi.

Syntax

To use a Math object:


1. Math.propertyName
2. Math.methodName(parameters)

propertyName is one of the properties listed below.
methodName is one of the methods listed below.

Description

The Math object is a built-in JavaScript object.

You reference the constant PI as Math.PI. Constants are defined with the full precision of real numbers in JavaScript.

Similarly, you reference Math functions as methods. For example, the sine function is Math.sin(argument), where argument is the argument.

It is often convenient to use the with statement when a section of code uses several Math constants and methods, so you don't have to type "Math" repeatedly. For example,


with (Math) {
   a = PI * r*r
   y = r*sin(theta)
   x = r*cos(theta)
}

Properties

LN2

LN10

LOG2E

LOG10E

SQRT1_2

SQRT2

Methods

abs

acos

asin

atan

ceil

cos

exp

floor

log

max

min

pow

random

round

sin

sqrt

tan

Event handlers

None. Built-in objects do not have event handlers.

Property of

None.

Examples

See the examples for the individual properties and methods.

navigator object

Contains information about the version of Navigator in use.

Syntax

To use a navigator object:


navigator.propertyName

propertyName is one of the properties listed below.

Description

Use the navigator object to determine which version of the Navigator your users have.

Properties

appCodeName specifies the code name of the browser

appName specifies the name of the browser

appVersion specifies version information for the Navigator

userAgent specifies the user-agent header

Methods

None.

Event handlers

None.

Examples

See the examples for the individual properties.

Property of

None.

password object

A text field on an HTML form that conceals its value by displaying asterisks (*). When the user enters text into the field, asterisks (*) hide anything entered from view.

Syntax

To define a password object, use standard HTML syntax:

<INPUT
   TYPE="password"
   NAME="passwordName"
   [VALUE="textValue"]
   SIZE=integer>

NAME="passwordName" specifies the name of the password object. You can access this value using the name property.
VALUE="textValue" specifies the initial value of the password object. You can access this value using the defaultValue property.
SIZE=integer specifies the number of characters the password object can accommodate without scrolling.

To use a password object's properties and methods:


1. passwordName.propertyName
2. passwordName.methodName(parameters)
3. formName.elements[index].propertyName
4. formName.elements[index].methodName(parameters)

passwordName is the value of the NAME attribute of a password object.
formName is either the value of the NAME attribute of a form object or an element in the forms array.
index is an integer representing a password object on a form.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.

Description

A password object on a form looks as follows:

A password object is a form element and must be defined within a <FORM> tag.

Properties

defaultValue reflects the VALUE attribute

name reflects the NAME attribute

value reflects the current value of the password object's field

Methods

focus

blur

select

Event handlers

None.

Property of

form

Examples

Password: <INPUT TYPE="password" NAME="password" VALUE="" SIZE=25>

radio object

A set of radio buttons on an HTML form. A set of radio buttons lets the user choose one item from a list.

Syntax

To define a set of radio buttons, use standard HTML syntax with the addition of the onClick event handler:

<INPUT
   TYPE="radio"
   NAME="radioName"
   VALUE="buttonValue"
   [CHECKED]
   [onClick="handlerText"]>
   textToDisplay

NAME="radioName" specifies the name of the radio object. All radio buttons in a group have the same NAME attribute. You can access this value using the name property.
VALUE="buttonValue" specifies a value that is returned to the server when the radio button is selected and the form is submitted. This defaults to "on". You can access this value using the value property.
CHECKED specifies that the radio button is selected. You can access this value using the defaultChecked property.
textToDisplay specifies the label to display beside the radio button.

To use a radio button's properties and methods:


1. radioName[index1].propertyName
2. radioName[index1].methodName(parameters)
3. formName.elements[index2].propertyName
4. formName.elements[index2].methodName(parameters)

radioName is the value of the NAME attribute of a radio object.
index1 is an integer representing a radio button in a radio object.
formName is either the value of the NAME attribute of a form object or an element in the forms array.
index2 is an integer representing a radio button on a form. The elements array contains an entry for each radio button in a radio object.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.

Description

A radio object on a form looks as follows:

A radio object is a form element and must be defined within a <FORM> tag.

All radio buttons in a radio button group use the same name property. To access the individual radio buttons in your code, follow the object name with an index starting from zero, one for each button the same way you would for an array such as forms: document.forms[0].radioName[0] is the first, document.forms[0].radioName[1] is the second, etc.

Properties

checked lets you programatically select a radio button

defaultChecked reflects the CHECKED attribute

length reflects the number of radio buttons in a radio object

name reflects the NAME attribute

value reflects the VALUE attribute

Methods

click

Event handlers

onClick

Property of

form

Examples

Example 1. The following example defines a radio button group to choose among three music catalogs. Each radio button is given the same name, NAME="musicChoice", forming a group of buttons for which only one choice can be selected. The example also defines a text field that defaults to what was chosen via the radio buttons but that allows the user to type a nonstandard catalog name as well. The onClick event handler sets the catalog name input field when the user clicks a radio button.

<INPUT TYPE="text" NAME="catalog" SIZE="20"> <INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b" onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul and R&B <INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz" onClick="musicForm.catalog.value = 'jazz'"> Jazz <INPUT TYPE="radio" NAME="musicChoice" VALUE="classical" onClick="musicForm.catalog.value = 'classical'"> Classical

Example 2. The following example contains a form with three text boxes and three radio buttons. The radio buttons let the user choose whether the text fields are converted to upper case or lower case, or not converted at all. Each text field has an onChange event handler that converts the field value depending on which radio button is checked. The radio buttons for upper case and lower case have onClick event handlers that convert all fields when the user clicks the radio button.

<HEAD> <TITLE>Radio object example</TITLE> </HEAD> <SCRIPT> function convertField(field) { if (document.form1.conversion[0].checked) { field.value = field.value.toUpperCase()} else { if (document.form1.conversion[1].checked) { field.value = field.value.toLowerCase()} } } function convertAllFields(caseChange) { if (caseChange=="upper") { document.form1.lastName.value = document.form1.lastName.value.toUpperCase() document.form1.firstName.value = document.form1.firstName.value.toUpperCase() document.form1.cityName.value = document.form1.cityName.value.toUpperCase()} else { document.form1.lastName.value = document.form1.lastName.value.toLowerCase() document.form1.firstName.value = document.form1.firstName.value.toLowerCase() document.form1.cityName.value = document.form1.cityName.value.toLowerCase() } } </SCRIPT> <FORM NAME="form1"> Last name: <INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)"> First name: <INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)"> City: <INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)"> Convert values to: <INPUT TYPE="radio" NAME="conversion" VALUE="upper" onClick="if (this.checked) {convertAllFields('upper')}"> Upper case <INPUT TYPE="radio" NAME="conversion" VALUE="lower" onClick="if (this.checked) {convertAllFields('lower')}"> Lower case <INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> No conversion </FORM> See also the example for the <A HREF=#link_object>link</A> object. <H3>See also</H3> <LI><A HREF=#checkbox_object>checkbox</A>, <A HREF=#form_object>form</A>, and <A HREF=#select_object>select</A> objects  <HR> <A NAME="reset_object"></A><A NAME="reset_object"> </A><A NAME="reset_object"> </A><A NAME="reset_object"> <H2>reset object</H2> </A> A reset button on an HTML form. A reset button resets all elements in a form to their defaults. <H3>Syntax</H3> To define a reset button, use standard HTML syntax with the addition of the onClick event handler: <PRE> &LTINPUT TYPE="reset" NAME="resetName" VALUE="buttonText" [onClick="handlerText"]&GT </PRE> NAME="resetName" specifies the name of the reset object. You can access this value using the name property. VALUE="buttonText" specifies the text to display on the button face. You can access this value using the value property. To use a reset object's properties and methods: <PRE> 1. resetName.propertyName 2. resetName.methodName(parameters) 3. formName.elements[index].propertyName 4. formName.elements[index].methodName(parameters) </PRE> resetName is the value of the NAME attribute of a reset object. formName is either the value of the NAME attribute of a form object or an element in the forms array. index is an integer representing a reset object on a form. propertyName is one of the properties listed below. methodName is one of the methods listed below. <H3>Description</H3> A reset object on a form looks as follows: <FORM> <INPUT TYPE="reset" VALUE="Defaults"> </FORM> A reset object is a form element and must be defined within a &LTFORM&GT tag. The reset button's onClick event handler cannot prevent a form from being reset; once the button is clicked, the reset cannot be canceled. <H3>Properties</H3> <LI><A HREF=JSprops.html#name_property>name</A> reflects the NAME attribute <LI><A HREF=JSprops.html#value_property>value</A> reflects the VALUE attribute <H3>Methods</H3> <LI><A HREF=JSmethods.html#click_method>click</A> <H3>Event handlers</H3> <LI><A HREF=JSevents.html#onClick_event>onClick</A> <H3>Property of</H3> <LI><A HREF=#form_object>form</A> <H3>Examples</H3> Example 1. The following example displays a text object with the default value "CA" and a reset button with the text "Clear Form" displayed on its face. If the user types a state abbreviation in the text object and then clicks the Clear Form button, the original value of "CA" is restored. <XMP> State: <INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"> <INPUT TYPE="reset" VALUE="Clear Form">

Example 2. The following example displays two text objects, a select object, and three radio buttons; all of these objects have default values. The form also has a reset button with the text "Defaults" on its face. If the user changes the value of any of the objects and then clicks the Defaults button, the original values are restored.

<HEAD> <TITLE>Reset object example</TITLE> </HEAD> <FORM NAME="form1"> City: <INPUT TYPE="text" NAME="city" VALUE="Santa Cruz" SIZE="20"> State: <INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"> <SELECT NAME="colorChoice"> <OPTION SELECTED> Blue <OPTION> Yellow <OPTION> Green <OPTION> Red </SELECT> <INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b" CHECKED> Soul and R&B <INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"> Jazz <INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"> Classical <INPUT TYPE="reset" VALUE="Defaults" NAME="reset1"> </FORM> <H3>See also</H3> <LI><A HREF=#button_object>button</A>, <A HREF=#form_object>form</A>, and <A HREF=#submit_object>submit</A> objects  <HR> <A NAME="select_object"></A><A NAME="select_object"> </A><A NAME="select_object"> </A><A NAME="select_object"> <H2>select object (options array)</H2> </A> A selection list or scrolling list on an HTML form. A selection list lets the user choose one item from a list. A scrolling list lets the user choose one or more items from a list. <H3>Syntax</H3> To define a select object, use standard HTML syntax with the addition of the onBlur, onChange, and onFocus event handlers: <PRE> &LTSELECT NAME="selectName" [SIZE="integer"] [MULTIPLE] [onBlur="handlerText"] [onChange="handlerText"] [onFocus="handlerText"]&GT &LTOPTION VALUE="optionValue" [SELECTED]&GT textToDisplay [ ... &LTOPTION&GT textToDisplay] &LT/SELECT&GT </PRE> NAME="selectName" specifies the name of the select object. You can access this value using the name property. SIZE="integer" specifies the number of options visible when the form is displayed. MULTIPLE specifies that the select object is a scrolling list (not a selection list). OPTION specifies a selection element in the list. You can access the options using the options array. VALUE="optionValue" specifies a value that is returned to the server when the option is selected and the form is submitted. You can access this value using the value property. SELECTED specifies that the option is selected by default. You can access this value using the defaultSelected property. textToDisplay specifies the text to display in the list. You can access this value using the text property. To use a select object's properties and methods: <PRE> 1. selectName.propertyName 2. selectName.methodName(parameters) 3. formName.elements[index].propertyName 4. formName.elements[index].methodName(parameters) </PRE> selectName is the value of the NAME attribute of a select object. formName is either the value of the NAME attribute of a form object or an element in the forms array. index is an integer representing a select object on a form. propertyName is one of the properties listed below. methodName is one of the methods listed below. To use an option's properties: <PRE> 1. selectName.options[index1].propertyName 2. formName.elements[index2].options[index1].propertyName </PRE> selectName is the value of the NAME attribute of a select object. index1 is an integer representing an option in a select object. formName is either the value of the NAME attribute of a form object or an element in the forms array. index2 is an integer representing a select object on a form. propertyName is one of the properties listed below. <H3>Description</H3> A select object on a form looks as follows. The object on the left is a selection list that lets the user choose one item; the object on the right is a scrolling list that lets the user choose one or more items: <FORM> <SELECT NAME="music_type_single"> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age </SELECT> <SELECT NAME="music_type_multi" MULTIPLE> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age </SELECT> </FORM> A select object is a form element and must be defined within a &LTFORM&GT tag. <H4>The options array</H4> You can reference the options of a select object in your code by using the options array. This array contains an entry for each option in a select object (&LTOPTION&GT tag) in source order. For example, if a select object named musicStyle contains three options, these options are reflected as <TT>musicStyle.options[0]</TT>, <TT>musicStyle.options[1]</TT>, and <TT>musicStyle.options[2]</TT>. To use the options array: <PRE> 1. selectName.options 2. selectName.options[index] 3. selectName.options.length </PRE> selectName is either the value of the NAME attribute of a select object or an element in the elements array. index is an integer representing an option in a select object. To obtain the number of options in a select object, use the length property of either the options array or the select object: <PRE> 1. selectName.length 2. selectName.options.length </PRE> The select object has properties that you can access only through the options array. These properties are listed below. Even though each element in the options array represents a select option, the value of options[index] is always null. The value returned by selectName.options represents the full HTML statement for the selectName object. Elements in the options array are read-only. For example, the statement <TT>selectName.options[0]="guitar"</TT> has no effect. <H3>Properties</H3> The select object has the following properties: <LI><A HREF=JSprops.html#length_property>length</A> reflects the number of options in a select object <LI><A HREF=JSprops.html#name_property>name</A> reflects the NAME attribute <LI><A HREF=#select_object>options</A> reflects the &LTOPTION&GT tags <LI><A HREF=JSprops.html#selectedIndex_property>selectedIndex</A> reflects the index of the selected option (or the first selected option, if multiple options are selected) The options array has the following properties: <LI><A HREF=JSprops.html#defaultSelected_property>defaultSelected</A> reflects the SELECTED attribute <LI><A HREF=JSprops.html#index_property>index</A> reflects the index of an option <LI><A HREF=JSprops.html#length_property>length</A> reflects the number of options in a select object <LI><A HREF=JSprops.html#name_property>name</A> reflects the NAME attribute <LI><A HREF=JSprops.html#selected_property>selected</A> lets you programatically select an option <LI><A HREF=JSprops.html#selectedIndex_property>selectedIndex</A> reflects the index of the selected option <LI><A HREF=JSprops.html#text_property>text</A> reflects the textToDisplay that follows an &LTOPTION&GT tag <LI><A HREF=JSprops.html#value_property>value</A> reflects the VALUE attribute <H3>Methods</H3> <LI><A HREF=JSmethods.html#blur_method>blur</A> <LI><A HREF=JSmethods.html#focus_method>focus</A> <H3>Event handlers</H3> <LI><A HREF=JSevents.html#onBlur_event>onBlur</A> <LI><A HREF=JSevents.html#onChange_event>onChange</A> <LI><A HREF=JSevents.html#onFocus_event>onFocus</A> <H3>Property of</H3> <LI>The select object is a property of <A HREF=#form_object>form</A> <LI>The options array is a property of <A HREF=#select_object>select</A> <H3>Examples</H3> Example 1. The following example displays a selection list and a scrolling list. <XMP> Choose the music type for your free CD: <SELECT NAME="music_type_single"> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age </SELECT> Choose the music types for your free CDs: <SELECT NAME="music_type_multi" MULTIPLE> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age </SELECT>

Example 2. The following example displays two selection lists that let the user choose a month and day. These selection lists are initialized to the current date. The user can change the month and day by using the selection lists or by choosing preset dates from radio buttons. Text fields on the form display the values of the select object's properties and indicate the date chosen and whether it is Cinco de Mayo.

<HEAD> <TITLE>Select object example</TITLE> </HEAD> <SCRIPT> var today = new Date() //--------------- function updatePropertyDisplay(monthObj,dayObj) { // Get date strings var monthInteger, dayInteger, monthString, dayString monthInteger=monthObj.selectedIndex dayInteger=dayObj.selectedIndex monthString=monthObj.options[monthInteger].text dayString=dayObj.options[dayInteger].text // Display property values document.selectForm.textFullDate.value=monthString + " " + dayString document.selectForm.textMonthLength.value=monthObj.length document.selectForm.textDayLength.value=dayObj.length document.selectForm.textMonthName.value=monthObj.name document.selectForm.textDayName.value=dayObj.name document.selectForm.textMonthIndex.value=monthObj.selectedIndex document.selectForm.textDayIndex.value=dayObj.selectedIndex // Is it Cinco de Mayo? if (monthObj.options[4].selected && dayObj.options[4].selected) document.selectForm.textCinco.value="Yes!" else document.selectForm.textCinco.value="No" } </SCRIPT>  <FORM NAME="selectForm"> Choose a month and day: Month: <SELECT NAME="monthSelection" onChange="updatePropertyDisplay(this,document.selectForm.daySelection)"> <OPTION> January <OPTION> February <OPTION> March <OPTION> April <OPTION> May <OPTION> June <OPTION> July <OPTION> August <OPTION> September <OPTION> October <OPTION> November <OPTION> December </SELECT> Day: <SELECT NAME="daySelection" onChange="updatePropertyDisplay(document.selectForm.monthSelection,this)"> <OPTION> 1 <OPTION> 2 <OPTION> 3 <OPTION> 4 <OPTION> 5 <OPTION> 6 <OPTION> 7 <OPTION> 8 <OPTION> 9 <OPTION> 10 <OPTION> 11 <OPTION> 12 <OPTION> 13 <OPTION> 14 <OPTION> 15 <OPTION> 16 <OPTION> 17 <OPTION> 18 <OPTION> 19 <OPTION> 20 <OPTION> 21 <OPTION> 22 <OPTION> 23 <OPTION> 24 <OPTION> 25 <OPTION> 26 <OPTION> 27 <OPTION> 28 <OPTION> 29 <OPTION> 30 <OPTION> 31 </SELECT> Set the date to: <INPUT TYPE="radio" NAME="dateChoice" onClick=" monthSelection.selectedIndex=0; daySelection.selectedIndex=0; updatePropertyDisplay(document.selectForm.monthSelection,document.selectForm.daySelection)"> New Year's Day <INPUT TYPE="radio" NAME="dateChoice" onClick=" monthSelection.selectedIndex=4; daySelection.selectedIndex=4; updatePropertyDisplay(document.selectForm.monthSelection,document.selectForm.daySelection)"> Cinco de Mayo <INPUT TYPE="radio" NAME="dateChoice" onClick=" monthSelection.selectedIndex=5; daySelection.selectedIndex=20; updatePropertyDisplay(document.selectForm.monthSelection,document.selectForm.daySelection)"> Summer Solstice Property values: Date chosen: <INPUT TYPE="text" NAME="textFullDate" VALUE="" SIZE=20"> monthSelection.length <INPUT TYPE="text" NAME="textMonthLength" VALUE="" SIZE=20"> daySelection.length <INPUT TYPE="text" NAME="textDayLength" VALUE="" SIZE=20"> monthSelection.name <INPUT TYPE="text" NAME="textMonthName" VALUE="" SIZE=20"> daySelection.name <INPUT TYPE="text" NAME="textDayName" VALUE="" SIZE=20"> monthSelection.selectedIndex <INPUT TYPE="text" NAME="textMonthIndex" VALUE="" SIZE=20"> daySelection.selectedIndex <INPUT TYPE="text" NAME="textDayIndex" VALUE="" SIZE=20"> Is it Cinco de Mayo? <INPUT TYPE="text" NAME="textCinco" VALUE="" SIZE=20"> <SCRIPT> document.selectForm.monthSelection.selectedIndex=today.getMonth() document.selectForm.daySelection.selectedIndex=today.getDate()-1 updatePropertyDisplay(document.selectForm.monthSelection,document.selectForm.daySelection) </SCRIPT> </FORM> See also the examples for the <A HREF=JSprops.html#defaultSelected_property>defaultSelected</A> property. <H3>See also</H3> <LI><A HREF=#form_object>form</A> and <A HREF=#radio_object>radio</A> objects  <HR> <A NAME="string_object"></A><A NAME="string_object"> </A><A NAME="string_object"> </A><A NAME="string_object"> <H2>string object</H2> </A> A series of characters. <H3>Syntax</H3> To use a string object: <PRE> 1. stringName.propertyName 2. stringName.methodName(parameters) </PRE> stringName is the name of a string variable. propertyName is one of the properties listed below. methodName is one of the methods listed below. <H3>Description</H3> The string object is a built-in JavaScript object. A string can be represented as a literal enclosed by single or double quotes; for example, "Netscape" or 'Netscape'. <H3>Properties</H3> <LI><A HREF=JSprops.html#length_property>length</A> reflects the length of the string <H3>Methods</H3> <LI><A HREF=JSmethods.html#anchor_method>anchor</A> <LI><A HREF=JSmethods.html#big_method>big</A> <LI><A HREF=JSmethods.html#blink_method>blink</A> <LI><A HREF=JSmethods.html#bold_method>bold</A> <LI><A HREF=JSmethods.html#charAt_method>charAt</A> <LI><A HREF=JSmethods.html#fixed_method>fixed</A> <LI><A HREF=JSmethods.html#fontcolor_method>fontcolor</A> <LI><A HREF=JSmethods.html#fontsize_method>fontsize</A> <LI><A HREF=JSmethods.html#indexOf_method>indexOf</A> <LI><A HREF=JSmethods.html#italics_method>italics</A> <LI><A HREF=JSmethods.html#lastIndexOf_method>lastIndexOf</A> <LI><A HREF=JSmethods.html#link_method>link</A> <LI><A HREF=JSmethods.html#small_method>small</A> <LI><A HREF=JSmethods.html#strike_method>strike</A> <LI><A HREF=JSmethods.html#sub_method>sub</A> <LI><A HREF=JSmethods.html#substring_method>substring</A> <LI><A HREF=JSmethods.html#sup_method>sup</A> <LI><A HREF=JSmethods.html#toLowerCase_method>toLowerCase</A> <LI><A HREF=JSmethods.html#toUpperCase_method>toUpperCase</A> <H3>Event handlers</H3> <LI>None. Built-in objects do not have event handlers. <H3>Property of</H3> <LI>None. <H3>Examples</H3> The following statement creates a string variable. <XMP> var last_name = "Schaefer" The following statements evaluate to 8, "SCHAEFER", and "schaefer": last_name.length last_name.toUpperCase() last_name.toLowerCase()

submit object

A submit button on an HTML form. A submit button causes a form to be submitted.

Syntax

To define a submit button, use standard HTML syntax with the addition of the onClick event handler:

<INPUT
   TYPE="submit"
   NAME="submitName"
   VALUE="buttonText"
   [onClick="handlerText"]>

NAME="submitName" specifies the name of the submit object. You can access this value using the name property.
VALUE="buttonText" specifies the label to display on the button face. You can access this value using the value property.

To use a submit object's properties and methods:


1. submitName.propertyName
2. submitName.methodName(parameters)
3. formName.elements[index].propertyName
4. formName.elements[index].methodName(parameters)

submitName is the value of the NAME attribute of a submit object.
formName is either the value of the NAME attribute of a form object or an element in the forms array.
index is an integer representing a submit object on a form.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.

Description

A submit object on a form looks as follows:

A submit object is a form element and must be defined within a <FORM> tag.

Clicking a submit button submits a form to the URL specified by the form's action property. This action always loads a new page into the client; it may be the same as the current page, if the action so specifies or is not specified.

The submit button's onClick event handler cannot prevent a form from being submitted; instead, use the form's onSubmit event handler or use the submit method instead of a submit object. See the examples for the form object.

Properties

name reflects the NAME attribute

value reflects the VALUE attribute

Methods

click

Event handlers

onClick

Property of

form

Examples

The following example creates a submit object called submit_button. The text "Done" is displayed on the face of the button.

See also the examples for the form object.

text object

A text input field on an HTML form. A text field lets the user enter a word, phrase, or series of numbers.

Syntax

To define a text object, use standard HTML syntax with the addition of the onBlur, on Change, onFocus, and onSelect event handlers:

<INPUT
   TYPE="text"
   NAME="textName"
   VALUE="textValue"
   SIZE=integer
   [onBlur="handlerText"]
   [onChange="handlerText"]
   [onFocus="handlerText"]
   [onSelect="handlerText"]>

NAME="textName" specifies the name of the text object. You can access this value using the name property.
VALUE="textValue" specifies the initial value of the text object. You can access this value using the defaultValue property.
SIZE=integer specifies the number of characters the text object can accommodate without scrolling.

To use a text object's properties and methods:


1. textName.propertyName
2. textName.methodName(parameters)
3. formName.elements[index].propertyName
4. formName.elements[index].methodName(parameters)

textName is the value of the NAME attribute of a text object.
formName is either the value of the NAME attribute of a form object or an element in the forms array.
index is an integer representing a text object on a form.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.

Description

A text object on a form looks as follows:

A text object is a form element and must be defined within a <FORM> tag.

text objects can be updated (redrawn) dynamically by setting the value property (this.value).

Properties

defaultValue reflects the VALUE attribute

name reflects the NAME attribute

value reflects the current value of the text object's field

Methods

focus

blur

select

Event handlers

onBlur

onChange

onFocus

onSelect

Property of

form

Examples

Example 1. The following example creates a text object that is 25 characters long. The text field appears immediately to the right of the words "Last name:". The text field is blank when the form loads.

Last name: <INPUT TYPE="text" NAME="last_name" VALUE="" SIZE=25>

Example 2. The following example creates two text objects on a form. Each object has a default value. The city object has an onFocus event handler that selects all the text in the field when the user tabs to that field. The state object has an onChange event handler that forces the value to upper case.

<FORM NAME="form1"> City: <INPUT TYPE="text" NAME="city" VALUE="Anchorage" SIZE="20" onFocus="this.select()"> State: <INPUT TYPE="text" NAME="state" VALUE="AK" SIZE="2" onChange="this.value=this.value.toUpperCase()"> </FORM>

See also the examples for the onBlur, onChange, onFocus, and onSelect event handlers.

textarea object

A multiline input field on an HTML form. A textarea field lets the user enter words, phrases, or numbers.

Syntax

To define a text area, use standard HTML syntax with the addition of the onBlur, onChange, onFocus, and onSelect event handlers:

<TEXTAREA
   NAME="textareaName"
   ROWS="integer"
   COLS="integer"
   [onBlur="handlerText"]
   [onChange="handlerText"]
   [onFocus="handlerText"]
   [onSelect="handlerText"]>
   textToDisplay
</TEXTAREA>

NAME="textareaName" specifies the name of the textarea object. You can access this value using the name property.
ROWS="integer" and COLS="integer" define the physical size of the displayed input field in numbers of characters.
textToDisplay specifies the initial value of the textarea object. A textarea allows only ASCII text, and new lines are respected. You can access this value using the defaultValue property.

To use a textarea object's properties and methods:


1. textareaName.propertyName
2. textareaName.methodName(parameters)
3. formName.elements[index].propertyName
4. formName.elements[index].methodName(parameters)

textareaName is the value of the NAME attribute of a textarea object.
formName is either the value of the NAME attribute of a form object or an element in the forms array.
index is an integer representing a textarea object on a form.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.

Description

A textarea object on a form looks as follows:

A textarea object is a form element and must be defined within a <FORM> tag.

textarea objects can be updated (redrawn) dynamically by setting the value property (this.value).

To begin a new line in a textarea object, you can use a newline character. This character varies from platform to platform: Unix is \n, Windows is \r\n, and Macintosh is \n. One way to enter a newline character programatically is to test the appVersion property to determine the current platform and set the newline character accordingly. See the appVersion property for an example.

Properties

defaultValue reflects the VALUE attribute

name reflects the NAME attribute

value reflects the current value of the textarea object

Methods

focus

blur

select

Event handlers

onBlur

onChange

onFocus

onSelect

Property of

form

Examples

The following example creates a textarea object that is 6 rows long and 55 columns wide. The textarea field appears immediately below the word "Description:". When the form loads, the textarea object contains several lines of data, including one blank line.

Description: <TEXTAREA NAME="item_description" ROWS=6 COLS=55> Our storage ottoman provides an attractive way to store lots of CDs and videos--and it's versatile enough to store other things as well. It can hold up to 72 CDs under the lid and 20 videos in the drawer below. </TEXTAREA>

See also the examples for the onBlur, onChange, onFocus, and onSelect event handlers.

window object

The top-level object for each document, location, and history object group.

Syntax

To define a window, use the open method:

windowVar = window.open("URL", "windowName" [,"windowFeatures"])

windowVar is the name of a new window. Use this variable when referring to a window's properties, methods, and containership.
windowName is the window name to use in the TARGET attribute of a <FORM> or <A> tag.

For details on defining a window, see the open method.

To use a window object's properties and methods:


 1. window.propertyName
 2. window.methodName(parameters)
 3. self.propertyName
 4. self.methodName(parameters)
 5. top.propertyName
 6. top.methodName(parameters)
 7. parent.propertyName
 8. parent.methodName(parameters)
 9. windowVar.propertyName
10. windowVar.methodName(parameters)
11. propertyName
12. methodName(parameters)

windowVar is a variable referring to a window object. See the preceding syntax for defining a window.
propertyName is one of the properties listed below.
methodName is one of the methods listed below.

To define an onLoad or onUnload event handler for a window object, use the <BODY> or <FRAMESET> tags:

<BODY
   ...
   [onLoad="handlerText"]
   [onUnload="handlerText"]>
</BODY>

<FRAMESET
   ROWS="rowHeightList"
   COLS="columnWidthList"
   [onLoad="handlerText"]
   [onUnload="handlerText"]>
   [<FRAME SRC="locationOrURL" NAME="frameName">]
</FRAMESET>

For information on the <BODY> and <FRAMESET> tags, see the document and frame objects.

Description

The window object is the top-level object in the JavaScript client hierarchy. Frame objects are also windows.

The self and window properties are synonyms for the current window, and you can optionally use them to refer to the current window. For example, you can close the current window by calling either window.close() or self.close(). You can use these properties to make your code more readable, or to disambiguate the property reference self.status from a form called status. See the properties and methods listed below for more examples.

The top and parent properties are also synonyms that can be used in place of the window name. top refers to the top-most Navigator window, and parent refers to a window containing a frameset. See the top and parent properties.

Because the existence of the current window is assumed, you do not have to reference the name of the window when you call its methods and assign its properties. For example, status="Jump to a new location" is a valid property assignment, and close() is a valid method call. However, when you open or close a window within an event handler, you must specify window.open() or window.close() instead of simply using open() or close(). Due to the scoping of static objects in JavaScript, a call to close() without specifying an object name is equivalent to document.close().

You can reference a window's frame objects in your code by using the frames array. The frames array contains an entry for each frame in a window with a <FRAMESET> tag.

Windows lack event handlers until some HTML is loaded into them containing a <BODY> or <FRAMESET> tag.

Properties

defaultStatus reflects the default message displayed in the window's status bar

frames is an array reflecting all the frames in a window

length reflects the number of frames in a parent window

name reflects the windowName argument

parent is a synonym for the windowName argument and refers to a window containing a frameset

self is a synonym for the windowName argument and refers to the current window

status specifies a priority or transient message in the window's status bar

top is a synonym for the windowName argument and refers to the top-most Navigator window

window is a synonym for the windowName argument and refers to the current window

Methods

alert

confirm

open

prompt

setTimeout

clearTimeout

Event handlers

onLoad

onUnload

Property of

None.

Examples

In the following example, the document in the top window opens a second window, window2, and defines pushbuttons that open a message window, write to the message window, close the message window, and close window2. The onLoad and onUnload event handlers of the document loaded into window2 display alerts when the window opens and closes.

WIN1.HTML, which defines the frames for the first window, contains the following code:

<HEAD> <TITLE>Window object example: Window 1</TITLE> </HEAD> <SCRIPT> window2=open("win2.html","secondWindow","scrollbars=yes,width=250, height=400") document.writeln("The first window has no name: " + window.name + "") document.writeln(" The second window is named: " + window2.name + "") </SCRIPT> <FORM NAME="form1"> <INPUT TYPE="button" VALUE="Open a message window" onClick="window3=window.open('','messageWindow','scrollbars=yes,width=175, height=300')"> <INPUT TYPE="button" VALUE="Write to the message window" onClick="window3.document.writeln('Hey there');window3.document.close()"> <INPUT TYPE="button" VALUE="Close the message window" onClick="window3.close()"> <INPUT TYPE="button" VALUE="Close window2" onClick="window2.close()"> </FORM> WIN2.HTML, which defines the content for window2, contains the following code: <XMP> <HEAD> <TITLE>Window object example: Window 2</TITLE> </HEAD> Some numbers <LI>one <LI>two <LI>three <LI>four <LI>five <LI>six <LI>seven <LI>eight <LI>nine See also the example for the <A HREF=#frame_object>frame</A> object. <H3>See also</H3> <LI><A HREF=#document_object>document</A> and <A HREF=#frame_object>frame</A> objects  <HR> <SCRIPT> document.write("Last modified " + document.lastModified) </SCRIPT> </body> </HTML>