Les objets

Vous disposez des objets suivants dans JavaScript:
  • anchor (anchors array)
  • button
  • checkbox
  • Date
  • document
  • elements array
  • form (forms array)
  • frame (frames array)
  • hidden
  • history
  • link (links array)
  • location
  • Math
  • Navigateur
  • 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.htm, a link in another file could define a jump to the anchor as follows:

    <A HREF="intro.htm#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.htm, 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.htm","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.htm, 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.htm, which defines the frames, contains the following code:

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

    DOC1.htm, 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.htm#numbers" TARGET="frame2">Numbers</A> <LI><A HREF="doc2.htm#colors" TARGET="frame2">Colors</A> <LI><A HREF="doc2.htm#musicTypes" TARGET="frame2">Music types</A> <LI><A HREF="doc2.htm#countries" TARGET="frame2">Countries</A> </BODY> </HTML>

    DOC2.htm, 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.htm#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.htm, 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.htm NAME="frame1"> <FRAME SRC=framcon2.htm NAME="frame2"> <FRAME SRC=framcon2.htm NAME="frame3"> <FRAME SRC=framcon2.htm NAME="frame4"> </FRAMESET> </HTML>

    FRAMSET2.htm, 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.htm NAME="frame1"> <FRAME SRC=framcon2.htm NAME="frame2"> <FRAME SRC=framcon2.htm NAME="frame3"> <FRAME SRC=framcon2.htm NAME="frame4"> </FRAMESET> </HTML>

    FRAMCON1.htm, 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.htm, which defines the content for the remaining frames, contains the following code:

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

    FRAMCON3.htm, which is referenced in a link object in FRAMCON1.htm, 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 Navigateur'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 Navigateur'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