The following objects are available in JavaScript:
A piece of text that can be the target of a hypertext link.
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.
You can also define an anchor using the anchor method.
If an anchor object is also a link object, the object has entries in both the anchors and links arrays.
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.
The anchors object has no properties. The anchors array has the following properties:
Example 1: an anchor. The following example defines an anchor for the text "Welcome to JavaScript".
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:
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:
LINK2.HTML, which contains the anchors, contains the following code:
A pushbutton on an HTML form.
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.
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.
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.
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.
A checkbox on an HTML form. A checkbox is a toggle switch that lets the user set a value on or off.
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"]> textToDisplayNAME="checkboxName" specifies the name of the checkbox object. You can access this value using the name property.
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.
A checkbox object on a form looks as follows:
A checkbox object is a form element and must be defined within a <FORM> tag.
Use the checked property to specify whether the checkbox is currently checked. Use the defaultChecked property to specify whether the checkbox is checked when the form is loaded.
Example 1. The following example displays a group of four checkboxes that all appear checked by default.
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.
Lets you work with dates and times.
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.
To use Date methods:
dateObjectName.methodName(parameters)dateObjectName is either the name of an existing Date object or a property of an existing object..
Exceptions: The Date object's parse and UTC methods are static methods that you use as follows:
Date.UTC(parameters) Date.parse(parameters)
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.
Contains information on the current document, and provides methods for displaying HTML output to the user.
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.
To use a document object's properties and methods:
1. document.propertyName 2. document.methodName(parameters)propertyName is one of the properties listed below.
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.
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:
DOC1.HTML, which defines the content for the first frame, contains the following code:
DOC2.HTML, which defines the content for the second frame, contains the following code:
An array of objects corresponding to form elements (such as checkbox, radio, and text objects) in source order.
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.
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.
See the examples for the name property.
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.
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.
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.
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.
The form object has the following properties:
The forms array has the following properties:
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.
If the form name is musicType, the alert displays the following message:
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.
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.
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.
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.
To use a frame object's properties:
1. [windowReference.]frameName.propertyName 2. [windowReference.]frames[index].propertyName 3. window.propertyName 4. self.propertyName 5. parent.propertyNamewindowReference is a variable windowVar from a window definition (see window object), or one of the synonyms top or parent.
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.
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.
The frame object has the following properties:
The frames array has the following properties:
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:
FRAMSET2.HTML, which defines the frames for the second window, contains the following code:
FRAMCON1.HTML, which defines the content for the first frame in the first window, contains the following code:
FRAMCON2.HTML, which defines the content for the remaining frames, contains the following code:
FRAMCON3.HTML, which is referenced in a link object in FRAMCON1.HTML, contains the following code:
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.
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.
To use a hidden object's properties:
1. hiddenName.propertyName 2. formName.elements[index].propertyNamehiddenName is the value of the NAME attribute of a hidden object.
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.
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.
To use a history object:
1. history.propertyName 2. history.methodName(parameters)propertyName is one of the properties listed below.
The history object is a linked list of URLs the user has visited, as shown in the Navigator's Go menu.
Example 1. The following example goes to the URL the user visited three clicks ago in the current window.
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:
Example 3. The following example causes the second frame in a frameset to go back one item:
Example 4. The following example causes the frame named frame1 in a frameset to go back one item:
Example 5. The following example causes the frame named frame2 in window2 to go back one item:
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.
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.
You can also define a link using the link method.
To use a link object's properties:
document.links[index].propertyNameindex is an integer representing a link object.
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.
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.
The link object has the following properties:
The links array has the following properties:
Example 1. The following example creates a hypertext link to an anchor named javascript_intro.
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.
Example 3. The following example takes the user back x entries in the history list:
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.
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.
Contains information on the current URL.
To use a location object:
[windowReference.]location.propertyNamewindowReference is a variable windowVar from a window definition (see window object), or one of the synonyms top or parent.
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.
When you specify a URL, you can use standard URL formats and JavaScript statements. The following list shows the syntax for specifying some of the most common types of URLs.
| URL type | Protocol | Example |
|---|---|---|
| JavaScript code | javascript: | javascript:history.go(-1) |
| Navigator info | about: | about:cache |
| World Wide Web | http: | http://www.netscape.com/ |
| File | file: | file:///javascript/methods.html |
| FTP | ftp: | ftp://ftp.mine.com/home/mine |
| MailTo | mailto: | mailto:info@netscape.com |
| Usenet | news: | news://news.scruznet.com/comp.lang.javascript |
| Gopher | gopher: | gopher.myhost.com |
The javascript: protocol evaluates the expression after the colon (:), if there is one, and loads a page containing the string value of the expression, unless it is undefined. If the expression evaluates to undefined, no new page loads.
The about: protocol provides information on Navigator and has the following syntax:
about:[cache|plugins]about: by itself is the same as choosing About Netscape from the Navigator's Help menu.
Example 1. The following example sets the URL of the current window to the Netscape home page:
Example 2. The following example sets the URL of a frame named frame2 to the Sun home page:
See also the example for the anchor 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.
To use a Math object:
1. Math.propertyName 2. Math.methodName(parameters)propertyName is one of the properties listed below.
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)
}
See the examples for the individual properties and methods.
Contains information about the version of Navigator in use.
To use a navigator object:
navigator.propertyNamepropertyName is one of the properties listed below.
Use the navigator object to determine which version of the Navigator your users have.
See the examples for the individual properties.
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.
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.
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.
A password object on a form looks as follows:
A password object is a form element and must be defined within a <FORM> tag.
A set of radio buttons on an HTML form. A set of radio buttons lets the user choose one item from a list.
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"]> textToDisplayNAME="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.
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.
A radio object on a form looks as follows:
A radio object is a form element and must be defined within a <FORM> tag.
All radio buttons in a radio button group use the same name property. To access the individual radio buttons in your code, follow the object name with an index starting from zero, one for each button the same way you would for an array such as forms: document.forms[0].radioName[0] is the first, document.forms[0].radioName[1] is the second, etc.
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.
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.
See also the example for the link object.
A reset button on an HTML form. A reset button resets all elements in a form to their defaults.
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.
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.
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.
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.
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.
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.
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.
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.
To use an option's properties:
1. selectName.options[index1].propertyName 2. formName.elements[index2].options[index1].propertyNameselectName is the value of the NAME attribute of a select object.
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.
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.
The select object has the following properties:
The options array has the following properties:
Example 1. The following example displays a selection list and a scrolling list.
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.
See also the examples for the defaultSelected property.
A series of characters.
To use a string object:
1. stringName.propertyName 2. stringName.methodName(parameters)stringName is the name of a string variable.
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'.
The following statement creates a string variable.
A submit button on an HTML form. A submit button causes a form to be submitted.
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.
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.
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.
The following example creates a submit object called submit_button. The text "Done" is displayed on the face of the button.
See also the examples for the form object.
A text input field on an HTML form. A text field lets the user enter a word, phrase, or series of numbers.
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.
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.
A text object on a form looks as follows:
A text object is a form element and must be defined within a <FORM> tag.
text objects can be updated (redrawn) dynamically by setting the value property (this.value).
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.
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.
See also the examples for the onBlur, onChange, onFocus, and onSelect event handlers.
A multiline input field on an HTML form. A textarea field lets the user enter words, phrases, or numbers.
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.
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.
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.
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.
See also the examples for the onBlur, onChange, onFocus, and onSelect event handlers.
The top-level object for each document, location, and history object group.
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.
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.
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.
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.
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:
WIN2.HTML, which defines the content for window2, contains the following code:
See also the example for the frame object.