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"><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:

    <HTML> <HEAD> <TITLE>Links and Anchors: Window 1</TITLE> </HEAD> <BODY> <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> <B>Links and Anchors</B> <FORM> <P>Click a button to display that anchor in window #2 <P><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> </BODY> </HTML>

    LINK2.HTML, which contains the anchors, contains the following code:

    <HTML> <HEAD> <TITLE>Links and Anchors: Window 2</TITLE> </HEAD> <BODY> <A NAME="0"><B>Some numbers</B> (Anchor 0)</A> <LI>one <LI>two <LI>three <LI>four <LI>five <LI>six <LI>seven <LI>eight <LI>nine <P><A NAME="1"><B>Some colors</B> (Anchor 1)</A> <LI>red <LI>orange <LI>yellow <LI>green <LI>blue <LI>purple <LI>brown <LI>black <P><A NAME="2"><B>Some music types</B> (Anchor 2)</A> <LI>R&B <LI>Jazz <LI>Soul <LI>Reggae <LI>Rock <LI>Country <LI>Classical <LI>Opera <P><A NAME="3"><B>Some countries</B> (Anchor 3)</A> <LI>Afghanistan <LI>Brazil <LI>Canada <LI>Finland <LI>India <LI>Italy <LI>Japan <LI>Kenya <LI>Mexico <LI>Nigeria </BODY> </HTML>

    See also

  • link object
  • anchor method

    button object

    A pushbutton on an HTML form.

    Syntax

    To define a button:

    <INPUT
       TYPE="button"
       NAME="buttonName"
       VALUE="buttonText"
       [onClick="handlerText"]>
    
    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:

    1. buttonName.propertyName
    2. buttonName.methodName(parameters)
    3. formName.elements[index].propertyName
    4. formName.elements[index].methodName(parameters)
    
    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.

    Description

    A button object on a form looks as follows:

    A button object is a form element and must be defined within a <FORM> 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.

    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 button named calcButton. The text "Calculate" is displayed on the face of the button. When the button is clicked, the function calcFunction() is called.

    <INPUT TYPE="button" VALUE="Calculate" NAME="calcButton" onClick="calcFunction(this.form)">

    See also

  • form, reset, and submit objects

    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:

    Overnight delivery

    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.

    <B>Specify your music preferences (check all that apply):</B> <BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B <BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz <BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues <BR><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.

    <HTML> <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> <BODY> <FORM NAME="form1"> <B>Last name:</B> <INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)"> <BR><B>First name:</B> <INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)"> <BR><B>City:</B> <INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)"> <P><INPUT TYPE="checkBox" NAME="convertUpper" onClick="if (this.checked) {convertAllFields()}" > Convert fields to upper case </FORM> </BODY> </HTML>

    See also

  • form and radio objects

    Date object

    Lets you work with dates and times.

    Syntax

    To create a Date object:

    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)
    
    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:

    dateObjectName.methodName(parameters)
    
    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:

    Date.UTC(parameters)
    Date.parse(parameters)
    

    Description

    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.

    Properties

  • None.

    Methods

  • getDate
  • getDay
  • getHours
  • getMinutes
  • getMonth
  • getSeconds
  • getTime
  • getTimeZoneoffset
  • getYear
  • parse
  • setDate
  • setHours
  • setMinutes
  • setMonth
  • setSeconds
  • setTime
  • setYear
  • toGMTString
  • toLocaleString
  • UTC

    Event handlers

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

    Property of

  • None.

    Examples

    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
  • close
  • 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:

    <HTML> <HEAD> <TITLE>Document object example</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="doc1.html" NAME="frame1"> <FRAME SRC="doc2.html" NAME="frame2"> </FRAMESET> </HTML>

    DOC1.HTML, which defines the content for the first frame, contains the following code:

    <HTML> <SCRIPT> </SCRIPT> <BODY BGCOLOR="antiquewhite" TEXT="darkviolet" LINK="fuchsia" ALINK="forestgreen" VLINK="navy"> <P><B>Some links</B> <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> </BODY> </HTML>

    DOC2.HTML, which defines the content for the second frame, contains the following code:

    <HTML> <SCRIPT> </SCRIPT> <BODY BGCOLOR="oldlace" onLoad="alert('Hello, World.')" TEXT="navy"> <P><A NAME="numbers"><B>Some numbers</B></A> <LI>one <LI>two <LI>three <LI>four <LI>five <LI>six <LI>seven <LI>eight <LI>nine <P><A NAME="colors"><B>Some colors</B></A> <LI>red <LI>orange <LI>yellow <LI>green <LI>blue <LI>purple <LI>brown <LI>black <P><A NAME="musicTypes"><B>Some music types</B></A> <LI>R&B <LI>Jazz <LI>Soul <LI>Reggae <LI>Rock <LI>Country <LI>Classical <LI>Opera <P><A NAME="countries"><B>Some countries</B></A> <LI>Afghanistan <LI>Brazil <LI>Canada <LI>Finland <LI>India <LI>Italy <LI>Japan <LI>Kenya <LI>Mexico <LI>Nigeria </BODY> </HTML>

    See also

  • frame and window objects

    elements array

    An array of objects corresponding to form elements (such as checkbox, radio, and text objects) in source order.

    Syntax

    1. formName.elements[index]
    2. formName.elements.length
    

    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.

    Description

    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 formName.elements[0], formName.elements[1], and formName.elements[2].

    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:

    userInfo.userName.value
    userInfo.elements[0].value
    

    To obtain the number of elements on a form, use the length property: formName.elements.length. 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 formName.elements[0]="music" has no effect.

    The value of each element in the elements array is the full HTML statement for the object.

    Properties

  • length reflects the number of elements on a form

    Property of

  • form

    Examples

    See the examples for the name property.

    See also

  • form object

    form object (forms array)

    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.

    Syntax

    To define a form, use standard HTML syntax with the addition of the onSubmit event handler:

    <FORM
       NAME="formName"
       TARGET="windowName"
       ACTION="serverURL"
       METHOD=GET | POST
       ENCTYPE="encodingType"
       [onSubmit="handlerText"]>
    </FORM>
    

    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 <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). Some values for this attribute may require specific values for other attributes. See RFC 1867 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 location object for a description of the URL components. Some values for this attribute may require specific values for other attributes. See RFC 1867 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 RFC 1867 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 RFC 1867 for details. You can access this value using the encoding property.

    To use a form object's properties and methods:

    1. formName.propertyName
    2. formName.methodName(parameters)
    3. forms[index].propertyName
    4. forms[index].methodName(parameters)
    
    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.

    Description

    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 elements array. The elements array contains an entry for each element (such as a checkbox, radio, or text object) in a form.

    The forms array

    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 (<FORM> tag) in a document in source order. For example, if a document contains three forms, these forms are reflected as document.forms[0], document.forms[1], and document.forms[2].

    To use the forms array:

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

    index is an integer representing a form in a document.

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

    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 document.forms[1].quantity. You would refer to the value property of this text object as document.forms[1].quantity.value.

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

    The value of each element in the forms array is <object nameAttribute>, where nameAttribute is the NAME attribute of the form.

    Properties

    The form object has the following properties:

  • action reflects the ACTION attribute
  • elements is an array reflecting all the elements in a form
  • encoding reflects the ENCTYPE attribute
  • length reflects the number of elements on a form
  • method reflects the METHOD attribute
  • target reflects the TARGET attribute

    The forms array has the following properties:

  • length reflects the number of forms in a document

    Methods

  • submit

    Event handlers

  • onSubmit

    Property of

  • document

    Examples

    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.

    <HTML> <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> <BODY> <FORM NAME="form1"> <B>First name:</B> <INPUT TYPE="text" NAME="firstName" SIZE=20> <BR><B>Last name:</B> <INPUT TYPE="text" NAME="lastName" SIZE=20> <P><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> </BODY> </HTML> Example 2: forms array. The onLoad event handler in the following example displays the name of the first form in an alert dialog box. <BODY onLoad="alert('You are looking at the ' + document.forms[0] + ' form!')">

    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.

    <HTML> <HEAD> <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> <BODY> <FORM NAME="form1" onSubmit="return checkData()"> <B>Enter 3 characters:</B> <INPUT TYPE="text" NAME="threeChar" SIZE=3> <P><INPUT TYPE="submit" VALUE="Done" NAME="submit1" onClick="document.form1.threeChar.value=document.form1.threeChar.value.toUpperCase()"> </FORM> </BODY> </HTML>

    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.

    <HTML> <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> <BODY> <FORM NAME="form1" onSubmit="alert('Form is being submitted.')"> <B>Enter 3 characters:</B> <INPUT TYPE="text" NAME="threeChar" SIZE=3> <P><INPUT TYPE="button" VALUE="Done" NAME="button1" onClick="checkData()"> </FORM> </BODY> </HTML>

    See also

  • button, checkbox, hidden, password, radio, reset, select, submit, text, textarea objects

    frame object (frames array)

    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.

    Syntax

    To define a frame object, use standard HTML syntax. The onLoad and onUnload event handlers are specified in the <FRAMESET> tag but are actually event handlers for the window object:

    <FRAMESET
       ROWS="rowHeightList"
       COLS="columnWidthList"
       [onLoad="handlerText"]
       [onUnload="handlerText"]>
       [<FRAME SRC="locationOrURL" NAME="frameName">]
    </FRAMESET>
    
    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.
    <FRAME> 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 <FRAME SRC="doc2.html#colors" NAME="frame2"> is invalid. See the location 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:

    1. [windowReference.]frameName.propertyName
    2. [windowReference.]frames[index].propertyName
    3. window.propertyName
    4. self.propertyName
    5. parent.propertyName
    
    windowReference is a variable windowVar from a window definition (see window object), or one of the synonyms top or parent.
    frameName is the value of the NAME attribute in the <FRAME> tag of a frame object.
    index is an integer representing a frame object.
    propertyName is one of the properties listed below.

    Description

    The <FRAMESET> 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 <FRAME> tag contains SRC and NAME attributes, you can refer to that frame from a sibling frame by using parent.frameName or parent.frames[index]. For example, if the fourth frame in a set has NAME="homeFrame", sibling frames can refer to that frame using parent.homeFrame or parent.frames[3].

    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 top and parent properties.

    The frames array

    You can reference the frame objects in your code by using the frames array. This array contains an entry for each child frame (<FRAME> tag) in a window containing a <FRAMESET> tag in source order. For example, if a window contains three child frames, these frames are reflected as parent.frames[0], parent.frames[1], and parent.frames[2].

    To use the frames array:

    1. [frameReference.]frames[index]
    2. [frameReference.]frames.length
    3. [windowReference.]frames[index]
    4. [windowReference.]frames.length
    

    frameReference is a valid way of referring to a frame, as described in the frame object.
    windowReference is a variable windowVar from a window definition (see window 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:

    [windowReference.].frames.length
    [frameReference.].frames.length
    

    Elements in the frames array are read-only. For example, the statement windowReference.frames[0]="frame1" has no effect.

    The value of each element in the frames array is <object nameAttribute>, where nameAttribute is the NAME attribute of the frame.

    Properties

    The frame object has the following properties:

  • frames is an array reflecting all the frames in a window
  • name reflects the NAME attribute of the <FRAME> tag
  • length reflects the number of child frames within a frame
  • parent is a synonym for the window or frame containing the current frameset
  • self is a synonym for the current frame
  • window is a synonym for the current frame

    The frames array has the following properties:

  • length reflects the number of child frames within a frame

    Methods

  • clearTimeout
  • setTimeout

    Event handlers

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

    Property of

  • The frame object is a property of window
  • The frames array is a property of both frame and window

    Examples

    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:

    <HTML> <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> </HTML>

    FRAMSET2.HTML, which defines the frames for the second window, contains the following code:

    <HTML> <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> </HTML>

    FRAMCON1.HTML, which defines the content for the first frame in the first window, contains the following code:

    <HTML> <BODY> <A NAME="frame1"><H1>Frame1</H1></A> <P><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> <P><INPUT TYPE="button" VALUE="Change frame2 to teal" onClick="parent.frame2.document.bgColor='teal'"> <P><INPUT TYPE="button" VALUE="Change frame3 to slateblue" onClick="parent.frames[2].document.bgColor='slateblue'"> <P><INPUT TYPE="button" VALUE="Change frame4 to darkturquoise" onClick="top.frames[3].document.bgColor='darkturquoise'"> <P><INPUT TYPE="button" VALUE="window2.frame2 to violet" onClick="window2.frame2.document.bgColor='violet'"> <P><INPUT TYPE="button" VALUE="window2.frame3 to fuchsia" onClick="window2.frames[2].document.bgColor='fuchsia'"> <P><INPUT TYPE="button" VALUE="window2.frame4 to deeppink" onClick="window2.frames[3].document.bgColor='deeppink'"> </FORM> </BODY> </HTML>

    FRAMCON2.HTML, which defines the content for the remaining frames, contains the following code:

    <HTML> <BODY> <P>This is a frame. </BODY> </HTML>

    FRAMCON3.HTML, which is referenced in a link object in FRAMCON1.HTML, contains the following code:

    <HTML> <BODY> <P>This is a frame. What do you think? </BODY> </HTML>

    See also

  • document and window objects

    hidden object

    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.

    Syntax

    To define a hidden object:

    <INPUT
       TYPE="hidden"
       NAME="hiddenName"
       [VALUE="textValue"]>
    
    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:

    1. hiddenName.propertyName
    2. formName.elements[index].propertyName
    
    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.

    Description

    A hidden object is a form element and must be defined within a <FORM> 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.

    Properties

  • name reflects the NAME attribute
  • value reflects the current value of the hidden object

    Methods

  • None.

    Event handlers

  • None.

    Property of

  • form

    Examples

    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. <HTML> <HEAD> <TITLE>Hidden object example</TITLE> </HEAD> <BODY> <B>Click some of these objects, then click the "Display value" button <BR>to see the value of the last object clicked.</B> <FORM NAME="form1"> <INPUT TYPE="hidden" NAME="hiddenObject" VALUE="None"> <P> <INPUT TYPE="button" VALUE="Click me" NAME="button1" onclick="document.form1.hiddenObject.value=this.value"> <P> <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 <P> <SELECT NAME="music_type_single" onFocus="document.form1.hiddenObject.value=this.options[this.selectedIndex].text"> <OPTION SELECTED> Red <OPTION> Orange <OPTION> Yellow </SELECT> <P><INPUT TYPE="button" VALUE="Display hidden value" NAME="button2" onClick="alert('Last object clicked: ' + document.form1.hiddenObject.value)"> </FORM> </BODY> </HTML>

    See also

  • cookie property

    history object

    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.

    Syntax

    To use a history object:

    1. history.propertyName
    2. history.methodName(parameters)
    
    propertyName is one of the properties listed below.
    methodName is one of the methods listed below.

    Description

    The history object is a linked list of URLs the user has visited, as shown in the Navigator's Go menu.

    Properties

  • length reflects the number of entries in the history object

    Methods

  • back
  • forward
  • go

    Event handlers

  • None.

    Property of

  • document

    Examples

    Example 1. The following example goes to the URL the user visited three clicks ago in the current window.

    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()

    See also

  • location object

    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"> <B>Choose a destination from the following list, then click "Click me" below.</B> <BR><INPUT TYPE="radio" NAME="destination" VALUE="netscape" onClick="destHREF='http://www.netscape.com/'"> Netscape home page <BR><INPUT TYPE="radio" NAME="destination" VALUE="sun" onClick="destHREF='http://www.sun.com/'"> Sun home page <BR><INPUT TYPE="radio" NAME="destination" VALUE="rfc1867" onClick="destHREF='http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt'"> RFC 1867 <P><A HREF="" onMouseOver="window.status='Click this if you dare!'; return true" onClick="this.href=destHREF"> <B>Click me</B></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] + "<BR>") } }

    See also

  • anchor object
  • link method

    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 typeProtocolExample
    JavaScript codejavascript:javascript:history.go(-1)
    Navigator infoabout:about:cache
    World Wide Webhttp:http://www.netscape.com/
    Filefile:file:///javascript/methods.html
    FTPftp:ftp://ftp.mine.com/home/mine
    MailTomailto:mailto:info@netscape.com
    Usenetnews:news://news.scruznet.com/comp.lang.javascript
    Gophergopher: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.

    See also

  • history object
  • location property

    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

  • E
  • LN2
  • LN10
  • LOG2E
  • LOG10E
  • PI
  • 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.

    See also

  • link object
  • anchors object

    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:

    Enter your password:

    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

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

    See also

  • form and text objects

    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:

    R&B
    Jazz
    Soul

    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.

    <HTML> <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> <BODY> <FORM NAME="form1"> <B>Last name:</B> <INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)"> <BR><B>First name:</B> <INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)"> <BR><B>City:</B> <INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)"> <P><B>Convert values to:</B> <BR><INPUT TYPE="radio" NAME="conversion" VALUE="upper" onClick="if (this.checked) {convertAllFields('upper')}"> Upper case <BR><INPUT TYPE="radio" NAME="conversion" VALUE="lower" onClick="if (this.checked) {convertAllFields('lower')}"> Lower case <BR><INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> No conversion </FORM> </BODY> </HTML>

    See also the example for the link object.

    See also

  • checkbox, form, and select objects

    reset object

    A reset button on an HTML form. A reset button resets all elements in a form to their defaults.

    Syntax

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

    <INPUT
       TYPE="reset"
       NAME="resetName"
       VALUE="buttonText"
       [onClick="handlerText"]>
    
    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:

    1. resetName.propertyName
    2. resetName.methodName(parameters)
    3. formName.elements[index].propertyName
    4. formName.elements[index].methodName(parameters)
    
    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.

    Description

    A reset object on a form looks as follows:

    A reset object is a form element and must be defined within a <FORM> 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.

    Properties

  • 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 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.

    <B>State: </B><INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"> <P><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.

    <HTML> <HEAD> <TITLE>Reset object example</TITLE> </HEAD> <BODY> <FORM NAME="form1"> <BR><B>City: </B><INPUT TYPE="text" NAME="city" VALUE="Santa Cruz" SIZE="20"> <B>State: </B><INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"> <P><SELECT NAME="colorChoice"> <OPTION SELECTED> Blue <OPTION> Yellow <OPTION> Green <OPTION> Red </SELECT> <P><INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b" CHECKED> Soul and R&B <BR><INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"> Jazz <BR><INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"> Classical <P><INPUT TYPE="reset" VALUE="Defaults" NAME="reset1"> </FORM> </BODY> </HTML>

    See also

  • button, form, and submit objects

    select object (options array)

    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.

    Syntax

    To define a select object, use standard HTML syntax with the addition of the onBlur, onChange, and onFocus event handlers:

    <SELECT
       NAME="selectName"
       [SIZE="integer"]
       [MULTIPLE]
       [onBlur="handlerText"]
       [onChange="handlerText"]
       [onFocus="handlerText"]>
       <OPTION VALUE="optionValue" [SELECTED]> textToDisplay [ ... <OPTION> textToDisplay]
    </SELECT>
    
    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:

    1. selectName.propertyName
    2. selectName.methodName(parameters)
    3. formName.elements[index].propertyName
    4. formName.elements[index].methodName(parameters)
    
    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:

    1. selectName.options[index1].propertyName
    2. formName.elements[index2].options[index1].propertyName
    
    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.

    Description

    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:

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

    The options array

    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 (<OPTION> tag) in source order. For example, if a select object named musicStyle contains three options, these options are reflected as musicStyle.options[0], musicStyle.options[1], and musicStyle.options[2].

    To use the options array:

    1. selectName.options
    2. selectName.options[index]
    3. selectName.options.length
    

    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:

    1. selectName.length
    2. selectName.options.length
    

    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 selectName.options[0]="guitar" has no effect.

    Properties

    The select object has the following properties:

  • length reflects the number of options in a select object
  • name reflects the NAME attribute
  • options reflects the <OPTION> tags
  • selectedIndex reflects the index of the selected option (or the first selected option, if multiple options are selected)

    The options array has the following properties:

  • defaultSelected reflects the SELECTED attribute
  • index reflects the index of an option
  • length reflects the number of options in a select object
  • name reflects the NAME attribute
  • selected lets you programatically select an option
  • selectedIndex reflects the index of the selected option
  • text reflects the textToDisplay that follows an <OPTION> tag
  • value reflects the VALUE attribute

    Methods

  • blur
  • focus

    Event handlers

  • onBlur
  • onChange
  • onFocus

    Property of

  • The select object is a property of form
  • The options array is a property of select

    Examples

    Example 1. The following example displays a selection list and a scrolling list.

    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> <P>Choose the music types for your free CDs: <BR><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.

    <HTML> <HEAD> <TITLE>Select object example</TITLE> </HEAD> <BODY> <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"> <P><B>Choose a month and day:</B> 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> <P><B>Set the date to: </B> <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 <P><B>Property values:</B> <BR>Date chosen: <INPUT TYPE="text" NAME="textFullDate" VALUE="" SIZE=20"> <BR>monthSelection.length<INPUT TYPE="text" NAME="textMonthLength" VALUE="" SIZE=20"> <BR>daySelection.length<INPUT TYPE="text" NAME="textDayLength" VALUE="" SIZE=20"> <BR>monthSelection.name<INPUT TYPE="text" NAME="textMonthName" VALUE="" SIZE=20"> <BR>daySelection.name<INPUT TYPE="text" NAME="textDayName" VALUE="" SIZE=20"> <BR>monthSelection.selectedIndex<INPUT TYPE="text" NAME="textMonthIndex" VALUE="" SIZE=20"> <BR>daySelection.selectedIndex<INPUT TYPE="text" NAME="textDayIndex" VALUE="" SIZE=20"> <BR>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> </BODY> </HTML>

    See also the examples for the defaultSelected property.

    See also

  • form and radio objects

    string object

    A series of characters.

    Syntax

    To use a string object:

    1. stringName.propertyName
    2. stringName.methodName(parameters)
    
    stringName is the name of a string variable.
    propertyName is one of the properties listed below.
    methodName is one of the methods listed below.

    Description

    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'.

    Properties

  • length reflects the length of the string

    Methods

  • anchor
  • big
  • blink
  • bold
  • charAt
  • fixed
  • fontcolor
  • fontsize
  • indexOf
  • italics
  • lastIndexOf
  • link
  • small
  • strike
  • sub
  • substring
  • sup
  • toLowerCase
  • toUpperCase

    Event handlers

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

    Property of

  • None.

    Examples

    The following statement creates a string variable.

    var last_name = "Schaefer" The following statements evaluate to 8, "SCHAEFER", and "schaefer": last_name.length last_name.toUpperCase() last_name.toLowerCase()

    See also

  • text and textarea objects

    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.

    <INPUT TYPE="submit" NAME="submit_button" VALUE="Done">

    See also the examples for the form object.

    See also

  • button, form, and reset objects
  • submit method
  • onSubmit event handler

    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:

    Last name:

    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.

    <B>Last name:</B> <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"> <BR><B>City: </B><INPUT TYPE="text" NAME="city" VALUE="Anchorage" SIZE="20" onFocus="this.select()"> <B>State: </B><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.

    See also

  • form, password, string, and textarea objects

    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.

    <B>Description:</B> <BR><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.

    See also

  • form, password, string, and text objects

    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
  • close
  • 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:

    <HTML> <HEAD> <TITLE>Window object example: Window 1</TITLE> </HEAD> <BODY BGCOLOR="antiquewhite"> <SCRIPT> window2=open("win2.html","secondWindow","scrollbars=yes,width=250, height=400") document.writeln("<B>The first window has no name: " + window.name + "</B>") document.writeln("<BR><B>The second window is named: " + window2.name + "</B>") </SCRIPT> <FORM NAME="form1"> <P><INPUT TYPE="button" VALUE="Open a message window" onClick="window3=window.open('','messageWindow','scrollbars=yes,width=175, height=300')"> <P><INPUT TYPE="button" VALUE="Write to the message window" onClick="window3.document.writeln('Hey there');window3.document.close()"> <P><INPUT TYPE="button" VALUE="Close the message window" onClick="window3.close()"> <P><INPUT TYPE="button" VALUE="Close window2" onClick="window2.close()"> </FORM> </BODY> </HTML>

    WIN2.HTML, which defines the content for window2, contains the following code:

    <HTML> <HEAD> <TITLE>Window object example: Window 2</TITLE> </HEAD> <BODY BGCOLOR="oldlace" onLoad="alert('Message from ' + window.name + ': Hello, World.')" onUnload="alert('Message from ' + window.name + ': I\'m closing')"> <B>Some numbers</B> <LI>one <LI>two <LI>three <LI>four <LI>five <LI>six <LI>seven <LI>eight <LI>nine </BODY> </HTML>

    See also the example for the frame object.

    See also

  • document and frame objects