JavaScript
select
Object (options Array)A select object is one selection box (drop-down list) on a form.
Syntax
To access a select box's object's properties and methods from JavaScript, use any one of these syntaxes:
selectName.propertyName
selectName.methodName(parameters)
formName.elements[index].propertyName
formName.elements[index].methodName(parameters)
where selectName is the NAME attribute as defined in the <SELECT> tag, formName is the NAME attribute as defined in the <FORM> tag (or an element in the forms array), index is an integer representing the fields position in the elements array, propertyName, methodName, and parameters are any valid options for the Select object as defined in the next sections.
To get to the specific options within a select box, use one of these syntaxes:
selectName.options[index1].propertyName
formName.elements[index2].options[index1].propertyName
where selectName is the NAME attribute as defined in the <SELECT > tag, index1 is the option's position within the <SELECT > tag (starting at 0), formName is the NAME attribute as defined in the <FORM > tag (or an element in the forms array), index2 is an integer representing the select field's position in the form, and propertyName is one of the valid properties for the options array as defined in the following sections.
You can refer to options in the <SELECT > tag's options list using any of these syntaxes:
selectName.options
selectName.options[index]
selectName.options.length
where selectName is the NAME attribute as defined in the <SELECT> tag, index is the option's position in the <OPTION> list. The .length property returns the total number of options within the <SELECT> tag.
Properties
The select object has the following properties:
.length Reflects the number of options in a select object.
.name Reflects the NAME attribute as defined in the <SELECT> tag.
.options Reflects the <OPTION> tags.
.selectedIndex Reflects the numeric 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 as defined in the <OPTIONS> list.
.index Reflects the position of an option within the list.
.length Reflects the number of options in the select box.
.name Reflects the NAME attribute as defined in the <SELECT> tag.
.selected Lets you programatically select an option.
.selectedIndex Reflects the position of the selected option in the options list.
.text Reflects the textToDisplay that follows an <OPTION> tag.
.value Reflects the VALUE attribute as defined in the <OPTION> tag.
Methods
.blur() Removes the focus from the select box.
.focus() Moves the focus to the select box.
Event Handlers
onBlur Triggered when the reader moves the insertion point out of the select box.
onChange Triggered when the reader moves the insertion point out the to select box after having changed the contents of the select box.
onFocus Triggered when the reader first puts the insertion point into the select box.
Description
To create a select box, choose Insert > Form Field > Selection. To create a selection box manually, type in a complete <SELECT>...</SELECT> tag between a pair of <FORM>...</FORM> tags.
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> option in the <SELECT> tag, where the first item is .options[0].
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 myDrop.options[0]="pick me" has no effect.
The select object is a property of the form object. The options array is a property of select object.
Example
The following Web page defines a custom function named showFacts() whose sole purpose is to display a bunch of information about a select box named mySelect in a form named test. The select box itself is defined in <FORM> tags in the body of the page.
<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
function showFacts() {
factswindow = window.open("","Facts")
factswindow.document.write("<b>Facts about the Select Box</b><p>")
factswindow.document.write ('document.test.mySelect.name =
',document.test.mySelect.name,'<br>')
factswindow.document.write ('document.test.mySelect.length =
',document.test.mySelect.length,'<br>')
factswindow.document.write ('document.test.mySelect.options =
',document.test.mySelect.options,'<br>')
factswindow.document.write ('document.test.mySelect.selectedIndex =
',document.test.mySelect.selectedIndex, '<p>')
factswindow.document.write("<b>Facts about the Options Array</b><p>")
var howmany = document.test.mySelect.options.length
var biggest = howmany - 1
factswindow.document.write ('document.test.mySelect.options.length = ',howmany,'<p>')
for (var i=0; i<= biggest; i++) {
factswindow.document.write ('document.test.mySelect.options[',i,'].selected =
',document.test.mySelect.options[i].selected, '<br>')
factswindow.document.write ('document.test.mySelect.options[',i,'].defaultSelected =
',document.test.mySelect.options[i].defaultSelected,'<br>')
factswindow.document.write ('document.test.mySelect.options[',i,'].index =
',document.test.mySelect.options[i].index, '<br>')
factswindow.document.write ('document.test.mySelect.options[',i,'].value =
',document.test.mySelect.options[i].value,'<br>') factswindow.document.write ('<p>')
}
factswindow.document.close()
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name = "test">
<SELECT NAME="mySelect" >
<OPTION SELECTED VALUE="1">first choice
<OPTION VALUE="2">second choice
<OPTION VALUE="3">third choice
<OPTION VALUE="4">fourth choice
</SELECT>
<P>
<INPUT type="button" value = "Click me for Facts" onClick = "showFacts()">
</FORM>
</BODY>
</HTML>When you open this page, just the select box and a button are displayed. You can make a choice from the select box, then click the button. Clicking the button triggers the showFacts() function which displays lots of information about the current status of the select box. For example, if you choose third choice from the select box, then click on the button, the screen displays all information about the select box, and its options array.
Facts about the Select Box
document.test.mySelect.name = mySelect
document.test.mySelect.length = 4
document.test.mySelect.options = first choice second choice third choice fourth choice
document.test.mySelect.selectedIndex = 2Facts about the Options Array
document.test.mySelect.options.length = 4
document.test.mySelect.options[0].selected = false
document.test.mySelect.options[0].defaultSelected = true
document.test.mySelect.options[0].index = 0
document.test.mySelect.options[0].value = 1
document.test.mySelect.options[1].selected = false
document.test.mySelect.options[1].defaultSelected = false
document.test.mySelect.options[1].index = 1
document.test.mySelect.options[1].value = 2
document.test.mySelect.options[2].selected = true
document.test.mySelect.options[2].defaultSelected = false
document.test.mySelect.options[2].index = 2
document.test.mySelect.options[2].value = 3
document.test.mySelect.options[3].selected = false
document.test.mySelect.options[3].defaultSelected = false
document.test.mySelect.options[3].index = 3
document.test.mySelect.options[3].value = 4
string
ObjectA string object is any series of characters, such as "Stephanie Miller" (as opposed to a number like 123.45). All strings in JavaScript are string objects.
Syntax
To use the properties and methods of the string object, use either of these syntaxes:
stringName.propertyName
or
stringName.methodName(parameters)
where stringName is the name of a string variable that contains a string, and propertyName, methodName, and parameters are any of the valid options listed below.
Properties
.length Reflects the length of the string.
Methods
.anchor(name) Programatically creates an anchor.
.big() Displays string in big font size.
.blink() Causes the string to blink.
.bold() Displays string in boldface.
.charAt(n) Displays the character at position n in the string, where the first charater is number 0.
.fixed() Displays string in fixed-pitch font.
.fontcolor(color) Displays string in color where color is any valid Color Value.
.fontsize(n) Displays string in relative font size n where n is a value between 1 and 7.
.indexOf(smallstring,start) Returns the position of the first occurrence of smallstring within the larger string, beginning the search at the start value.
.italics() Displays the string in italics.
.lastIndexOf() Returns the position of the last occurrence of smallstring within the larger string, beginning the search at the start value.
.link(URL) Converts string to a hyperlink with the target specified in URL.
.small() Displays string in small text size.
.strike() Displays string in strikeout font.
.sub() Displays string as a subscript.
.substring(x,y) Displays a portion of string starting at character x going to character y where the first character is number 0.
.sup() Displays string as a superscript.
.toLowerCase() Displays string in all lowercase letters.
.toUpperCase() Displays string in all uppercase letters.
Description
A string can be represented as a literal enclosed by single or double quotes. For example, both of the following statements assign the string Stephanie Miller to a variable named UserName:
var UserName = "Stephanie Miller"
var UserName ='Stephanie Miller'
You can alternate single and double quotation marks to place one type of quotation mark within the string. For example, these two JavaScript statements
var msg = 'I said "Hello" but you ignored me.'
document.write (msg)
display this on the screen:
Strings can be concatenated (stuck together) and you can mix variables and literals using a plus (+) operator. For example, these commands
var x = "Hello"
var y = "There"
var z = x + " " + y + "!"
document.write (x)will display this on the screen:
Example
Opening the following Web page
<HTML>
<BODY>
<SCRIPT Language = "JavaScript">
var fullname = "Angie Myma"
document.write ("fullname = ",fullname,'<br>')
document.write ("fullname.length = ",fullname.length,'<br>')
document.write ("fullname.bold() = ",fullname.bold(),'<br>')
document.write ("fullname.italics() = ",fullname.italics(),'<br>')
document.write ("fullname.charAt(6) = ",fullname.charAt(6),'<br>')
document.write ("fullname.toLowerCase() = ",fullname.toLowerCase(),'<br>')
document.write ("fullname.toUpperCase() = ",fullname.toUpperCase(),'<br>')
</SCRIPT>
</BODY>
</HTML>displays the following on the screen:
fullname = Stephanie Miller
fullname.length = 10
fullname.bold() = Stephanie Miller
fullname.italics() = Stephanie Miller
fullname.charAt(6) = A
fullname.toLowerCase() = stephanie miller
fullname.toUpperCase() = STEPHANIE MILLER
submit
ObjectThe submit object refers to the Submit button on a form. Clicking the button causes the form to be submitted to whatever address is specified in the button's <FORM> tag.
Syntax
To create a Submit button, choose Insert > Form Field > Submit Button. To create a Submit button, manually use the TYPE="submit" attribute in an <INPUT> tag between a pair for <FORM>...</FORM> tags.
To get at a Submit button's properties and methods from JavaScript code, use any one of these syntaxes:
submitName.propertyName
submitName.methodName(parameters)
formName.elements[index].propertyName
formName.elements[index].methodName(parameters)
where submitName is the NAME attribute of the button as defined in its <INPUT> tag, formName is the name of the form as defined in the <FORM> tag (or an element in the forms array), index is an integer representing the submit button's position on the form, and propertyName, methodName and parameters are valid options for the submit object as listed below.
Properties
.name Reflects the NAME attribute as defined in the button's <INPUT> tag.
.value Reflects the VALUE attribute as defined in the button's <INPUT> tag.
Methods
.click() Programatically clicks the button.
Event Handlers
onClick Triggered when the reader clicks the Submit button.
Description
A form's Submit button must be defined with an <INPUT> tag within the form's <FORM>...</FORM> tags. Clicking the Submit button submits a form to the URL specified by the form's ACTION action attribute.
The onClick event handler for a Submit button cannot prevent a form from being submitted. However, the form's onSubmit event handler, and the form's submit method, can be used to submit an object from a regular button. The submit object is a property of the larger form object.
Example
The Submit button gets information on where to send the form's data from the ACTION, METHOD, and ENCTYPE attributes of <FORM> tag that houses the button. In the example below, clicking the Submit button will send the data from the form to an e-mail address like thebees@bton.com.
<HTML>
<BODY>
<FONT SIZE=6 COLOR=#0000FF>Ask Alan</FONT><BR>
<FORM METHOD=POST ACTION="/cgi-bin/mailto?thebees@bton.com:Ask_the_Bees">
<P>
Question:<TEXTAREA NAME="01Question" ROWS=5 COLS=80></TEXTAREA>
<P>
My e-mail address is: <INPUT NAME="02ReturnAdd"VALUE="" MAXLENGTH="70" SIZE=70>
<P>
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET">
<BR>
</FORM>
</BODY></HTML>
text
ObjectA text object is a single text field in a form.
Syntax
To create a form field manually, type an <INPUT> tag between a pair of <FORM>...</FORM> tags. To refer to a text box field from JavaScript code use any of these syntaxes:
textName.propertyName
textName.methodName(parameters)
formName.elements[index].propertyName
formName.elements[index].methodName(parameters)
where textName is the NAME attribute as defined in the <INPUT> tag, formName is the NAME attribute as defined in the <FORM> tag, (or an element in the forms array), index is an integer representing the field's position on the form, propertyName, methodName, and parameters are the valid options listed in the next sections.
Properties
.defaultValue Reflects the VALUE attribute as defined in the field's <INPUT> tag.
.name Reflects the NAME attribute as defined in the field's <INPUT> tag.
.value Reflects the current value (contents) of the text field.
Methods
.focus() Moves the focus into the text field.
.blur() Moves the focus out of the text field.
.select() Selects the contents of the text field.
Event Handlers
onBlur Triggered when the reader leaves the text field.
onChange Triggered when the reader makes a change then leaves the text field.
onFocus Triggered when the reader enters the text field.
onSelect Triggered when the reader selects text in the text field.
Description
You can use JavaScript code to test and to change text in a text form field. The text object is a property of the larger form object.
Example
In the following Web page, a custom function named pcase() is defined. This function accepts any string and converts it to proper-noun case (that is, converts wAndA bEe? to Wanda Bee?. The first text box in the form, located down in the body of the page, calls up the pcase() function to change whatever the reader types into the fullname field to proper case:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
//custom function to convert text to proper-noun case (initial caps).
function pcase(str) {
strlen = str.length
jj = str.substring(0,1).toUpperCase()
jj = jj + str.substring(1,strlen).toLowerCase()
for (i = 2; i <= strlen; i++) {
if (jj.charAt(i)==" ") {
lefthalf = jj.substring(0,i+1)
righthalf = jj.substring(i+1,strlen)
righthalf = righthalf.substring(0,1).toUpperCase()+righthalf.substring(1,strlen)
jj=lefthalf+righthalf
}
}
return jj
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>Type your full name:
<INPUT NAME="fullname" VALUE="" MAXLENGTH="50" SIZE=50
onChange = "this.value = pcase(this.value)">
<P>
Type your address: <INPUT NAME="address" VALUE="" MAXLENGTH="50" SIZE=50>
<P>
</FORM>
</BODY>
</HTML>
textarea
ObjectA textarea object is one multiline text field in a form.
Syntax
To create a textarea field, type HTML <TEXTAREA>...</TEXTAREA> tags within a pair of <FORM>...</FORM> tags. To access a textarea field from JavaScript code, use any one of these syntaxes:
textareaName.propertyName
textareaName.methodName(parameters)
formName.elements[index].propertyName
formName.elements[index].methodName(parameters)
where textareaName is the NAME attribute as defined in the <TEXTAREA> tag, formName is the name of the form as defined in the NAME attribute of the <FORM> tag (or an element in the forms array), index is an integer representing a textarea field's position on the form, and propertyName, methodName, and parameters are any of the valid options listed in the next sections.
Properties
.defaultValue Reflects the VALUE attribute as defined in the <TEXTAREA> tag.
.name Reflects the NAME attribute as defined in the <TEXTAREA> tag.
.value Reflects the current value of the textarea object.
Methods
.focus() moves the focus into the textarea field.
.blur() moves the focus out of the textarea field.
.select() selects the text in the texarea field.
Event Handlers
onBlur Triggered when the reader leaves the textarea field.
onChange Triggered when the reader changes the contents of the textarea field then leaves the field.
onFocus Triggered when the reader moves the insertion point into the textarea field.
onSelect Triggered when the reader selects text in the field.
Description
With JavaScript code, you can test the value of a textarea field and change its contents. When writing to a textarea field, you can begin a new line using the newline character. In Windows, the newline character is \r\n. In Unix and Macintosh, it is \n. You can use the .appVersion property of the navigator object to test for the operating system in use.
The textarea object is a property of the larger form object.
The following page first defines a custom function named noBlanksAllowed that tests the value of anyval passed to it. If anyval is blank (""), it displays a warning and moves the focus into a form field named question on a form named askme.
The form and field are created in the body of the document and two events are used to trigger the noBlanksAllowed function: when the reader leaves the field named question and when the reader clicks on the button labeled Click Me. In either case, if the question textarea field is empty when the event occurs, the Please answer this question! alert message appears.
<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
function noBlanksAllowed(anyval) {
if (anyval == "") {
document.askme.question.setFocus alert ("Please answer this question.")
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name = "askme">
Question:<BR>
<TEXTAREA NAME="question" ROWS=4 COLS=25 onChange = "noBlanksAllowed(this.value)">
</TEXTAREA><P>
Your Name:
<INPUT NAME = "readername"><P>
<INPUT TYPE="button" value = "Click Me" onClick = noBlanksAllowed(document.askme.question.value)">
</FORM>
</BODY>
</HTML>
window
ObjectA window object is the top-level object for each document, location, and history object.
Syntax
To open a new window, use the following syntax:
[windowVar = ][window].open("URL", "windowName", ["windowFeatures"])
where windowVar is a name that you create for the new window and also the name you will use when referring to a window's properties, methods, and containership in JavaScript code. URL specifies the URL to open in the new window. It can be null ("") to open a window with no document. The windowName portion represents the window name to use in the TARGET attribute of a <FORM> or <A> tag sets. The optional windowFeatures is a comma-separated list of any of the following options and values:
toolbar[=yes|no]| or [=1|0] Display Navigator window toolbar?
location[=yes|no] or [=1|0] Display Navigator window Location: box?
directories[=yes|no] or [=1|0] Display Navigator window directory buttons?
status[=yes|no] or [=1|0] Display Navigator window status bar?
menubar[=yes|no] or [=1|0] Display Navigator window menu bar?
scrollbars[=yes|no] or [=1|0] Display Navigator window scrollbars?
resizable[=yes|no] or [=1|0] Make window resizeable?
width=pixels Width of the window.
height=pixels Height of the window.
where pixels is a positive integer specifying the dimension in pixels. You may use any subset of these options. Separate options with a comma. Do not put spaces between the options. Enclose the entire set of options in a pair of single quotation marks.
To refer to an opened window's properties and methods in JavaScript code, use any of these syntaxes:
window.propertyName
window.methodName(parameters)
self.propertyName
self.methodName(parameters)
top.propertyName
top.methodName(parameters)
parent.propertyName
parent.methodName(parameters)
windowVar.propertyName
windowVar.methodName(parameters)
propertyName
methodName(parameters)
where windowVar is the variable created when the window was opened, propertyName, methodName, and parameters are valid options for the window object as listed in the following sections.
Properties
.defaultStatus Reflects the default message displayed in the window's status bar.
.frames 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 Refers to a window containing a <FRAMESET> tags.
.self Refers to the current window.
.status Specifies message to display in the window's status bar.
.top Refers to the top-most Navigator window.
.window Refers to the current window.
.document Refers to the document on display within the window.
.frame Refers to an independently-scollable frame created with a <FRAME> tag.
.location Contains information on the URL of the document displayed in the window.
Methods
.alert("msg") Displays a JavaScript alert message box with msg and OK button.
.close() Closes the window.
confirm("msg") Displays a JavaScript confirm message box with msg and OK and Cancel buttons.
.open("URL", "windowName", ["windowFeatures"]) Opens a window displaying URL with windowName as target name and optional windowFeatures.
prompt("msg",["default"]) Displays a JavaScript prompt box with msg and optional default text.
timerID = setTimeout(exp,msec) Delays execution of expression msec (milliseconds).
clearTimeout(timerid) Cancels timerid created by setTimeOut().
Event Handlers
onLoad Defined in a <BODY> or <FRAMESET> tag.
onUnload Defined in a <BODY> or <FRAMESET> tag.
Description
The window object is the top-level object in the JavaScript object hierarchy. Frame objects are also windows. The self and window properties are synonyms for the current window, and you can use them to refer to the current window. For example, you can close the current window by calling either window.close() or self.close().
The top and parent properties also are synonyms that can be used in place of the window name. The top property refers to the top-most Navigator window and parent refers to a window containing a frameset.
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, even though the document is an object of the larger window object, it is not necessary to precede every document statement with a window name. For example, document.write("Hello") is valid. The omission of a window name before the document name just assumes that the document object being referred to is the document in the current window.
On the other hand, when using the open() and close() methods in event handlers, you should always specify window or self. Otherwise, close() by itself just closes the input stream to the current document. For example, if you want a button to close the entire window that houses the button, the onClick event handler for that button should be self.close() rather than close().
Although technically, the onLoad and onUnload event handlers are part of the window object, the window object has no event handler until an HTML <BODY> or <FRAMESET> tag is written to the window. The onLoad and onUnload event handlers can be specified within those tags.
Example
In the following example, the myMsgBox() custom function is capable of displaying a small window that shows a message and OK button. This window can be used as an alternative to the JavaScript alert() message box. The body of the page contains a button that tests the custom function by calling upon it to display the message Hello!:
<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
function myMsgBox(msg) {
//set up window options
stats='toolbar=no,location=no,directories=no,status=no,menubar=no,'
stats += 'scrollbars=no,resizable=no,width=200,height=100'
//open the window
MsgBox = window.open ("","msgWindow",stats)
//set window back color, text color, show msg, and OK button.
MsgBox.document.write ("<BODY bgColor='black' text='white'>")
MsgBox.document.write ("<H2><CENTER>",msg,"</CENTER></H2>")
MsgBox.document.write ("<FORM><CENTER>")
//when reader clicks the OK button in this message window, close the message window.
MsgBox.document.write ("<INPUT type='button' value='OK' onClick = 'self.close()'>")
MsgBox.document.write ("</CENTER></FORM>")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<! Call upon myMsgBox to display a "Hello!" message.>
<INPUT type='button' value = 'Click me to see a custom message window'
onClick = 'myMsgBox("Hello!")'>
</FORM>
</BODY>
</HTML>
|
|
   |
 |
