JavaScript
anchor
Objects (anchors array)An anchor object is a built-in array that contains one element for every anchor in the current Web page.
Syntax
The syntax for the anchor object is
document.anchor[n]
where n is some number representing an item's position in the list. Alternatively, you can use
document.anchor.length
to identify the number of items in the list.
Properties
.length Identifies how many items are in the anchors array.
Description
When your page is displayed to a reader, the anchors array creates an element for each anchor in the page. The first anchor is anchor[0], the next is anchor[1], and so forth. The anchors.length value reflects the number of items in the array.
The actual name of the anchor is always null. That is, you cannot use the anchors array to discover an anchor's name. You also cannot create an anchor programatically. For example, the statement anchor[0]="hello" does nothing.
The anchor object is a property of the larger document object.
Example
The custom function in the following listing returns true if the current page has at least one anchor in it. It returns false if the page contains no anchors.
function hasAnchors() {
retval = true
if (document.anchors.length == 0) {
retval = false
} return retval
}
button
ObjectThe button object refers to a clickable button on a form.
Syntax
The syntax for the button object is
<INPUT type="button" value="button text">
where button text is the text that appears on the button face. The <INPUT...> tag must be placed within a pair of <FORM>...</FORM> tags. The INPUT tag can also contain other INPUT attributes, including JavaScript event handlers.
Properties
.name reflects the NAME attribute in the <INPUT> tag
.value reflects the VALUE attribute in the <INPUT> tag
Methods
.click() Clicks the button
Event Handlers
onClick Triggered when the reader clicks the button.
Description
Use button and the onClick event handler in the <INPUT> tag of a form - not in JavaScript code. The <SCRIPT>...</SCRIPT> tags are not required but the <FORM>...</FORM> tags are.
The button object is a property of the larger form object.
Example
The following example displays on a button on the reader's Web page that says Click Here on its face. When the reader clicks the button, an alert message says Hello!
<FORM name="OneButton">
<INPUT type="button" value="Click Here" onClick = "alert('Hello!')">
</FORM>
Checkbox
ObjectIn an <INPUT> tag, a checkbox object specifies a checkbox form field. In JavaScript, it refers to a checkbox on a form.
Syntax
The following line
<INPUT type="checkbox">
when placed between a pair of <FORM> tags, puts a checkbox on the current form. The statement also can contain other INPUT attributes, including the CHECKED, NAME, and VALUE attributes, and a JavaScript onClick event handler.
Properties
.checked true if box is checked, false if box is clear.
.defaultchecked Reflects the CHECKED attribute of the <INPUT> tag.
.name Reflects the NAME attribute of the <INPUT> tag.
.value Reflects the VALUE attribute of the <INPUT> tag.
Methods
.click() Programatically clicks on the checkbox.
Event Handlers
onClick Triggered when the reader clicks on the checkbox.
Description
To create a checkbox, choose Insert > Form Field > Check box. To create a checkbox manually, use the TYPE="checkbox" attribute in an <INPUT> tag between a pair of <FORM>...</FORM> tags.
Use event handlers within the <INPUT> tag to trigger a script when the reader clicks on the checkbox.
Example
In the following example, the areyousure() custom function displays a custom alert message. However, that function is called up only if the reader opts to pay now by credit card when presented with the form. Note the <INPUT ... TYPE="checkbox"> tag and its onClick property that calls up areyousure only if the checkbox is checked.
<HEAD>
<SCRIPT Language = "JavaScript">
function areyousure() {
alert("Warning: This is not a secured Web page!")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="payment_method">
<INPUT TYPE="checkbox" NAME="creditcard" onClick="if (this.checked) {areyousure()}">
Pay now by credit card
</FORM>
</BODY>Here's another example where a custom function named clearCheckbox() automatically removes the check mark from a checkbox by settings its .checked property to false. The function is called when the reader clicks the button defined by the <INPUT type='button'> tag:
<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
function clearCheckbox() {
if (document.cake.eat.checked) {
document.cake.eat.checked = false
alert ("Can't have cake and eat it too")
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="cake">
<INPUT type="checkbox" name="eat"> I want to eat my cake.<P>
<INPUT type='button' value = 'I want to keep my cake' onClick = 'clearCheckbox()'>
</FORM>
</BODY>
</HTML>
Date
ObjectA date object defines a date/time as the number of milliseconds since a specified start (such as May 15, 1990).
Syntax
To create a new date object, use the following syntax:
dateObjectName = new Date()
or
dateObjectName = new Date(year, month, day)
or
dateObjectName = new Date(year, month, day, hours, minutes, seconds)
or
dateObjectName = new Date("month day, year hours:minutes:seconds")
where dateObjectName is either the name of a new object or a property of an existing object, month, day, year, hours, minutes, and seconds are integers or, in the last form, strings.
To use Date methods, follow this syntax
dateObjectName.methodName(parameters)
where dateObjectName is either the name of an existing Date object or a property of an existing object and methodName is one of the methods listed in the following section.
Methods
.getDate() Returns the day of month (1 to 31).
.getDay() Returns the day of the week from 0 (Sunday) to 6 (Saturday).
.getHours() Returns the hour from 0 (midnight) to 23 (11:00 PM).
.getMinutes() Returns the minute from 0 to 59.
.getMonth() Returns the month from 0 (January) to 11 (December).
.getSeconds() Returns the seconds (0 to 59).
.getTime() Returns the milliseconds transpired since 5/15/90.
.getTimezoneOffset() Returns the difference between local time and GMT (meridian time).
.getYear() Returns the two-digit year, such as 97 for 1997.
.parse(string) Converts a string in Dec 25, 1997 to the number of milliseconds transpired since 5/15/90.
.setDate(num) Sets the day of an existing object to num where num is a value between 1 and 31.
.setHours(num) Sets the hour of an existing object to num where num is a value between 0 and 23.
.setMinutes(num) Sets the minutes of an existing object to num where num is a value between 0 and 59.
.setMonth(num) Sets the month of an existing object to num where num is a value between 0 and 11.
.setSeconds(num) Sets the seconds of an existing object to num where num is a value between 0 and 59.
.setTime(num) Sets the date and time of an existing object to num where num represents the number of milliseconds transpired from 5/15/90.
.setYear(num) Sets the year of an existing object to num where num is a value between 70 and 99.
.toGMTString(dateobject) Converts the dateobject to a string expressed in Internet GMT format.
.toLocaleString(dateobject) Converts the dateobject to a string expressed in local date/time format.
.UTC(year, month, day [, hrs] [, min] [, sec]) Converts date/time values expressed in Universal Coordinated Time values to the number of milliseconds transpired since 5/15/90.
Description
The way JavaScript handles dates is very similar to the way Java handles dates. Both languages store dates internally as the number of milliseconds that have elapsed since May 15, 1990 00:00:00. Dates prior to 1990 are not allowed.
Example
Opening the following page on August 5, 1998, at approximately 11:30 p.m.
<HTML>
<BODY>
<SCRIPT Language="JavaScript">
today = new Date()
document.write ('today = ',today,'<br>')
document.write ('today.getDate() = ',today.getDate(),'<br>')
document.write ('today.getHours() = ',today.getHours(),'<br>')
document.write ('today.toGMTString() = ',today.toGMTString(),'<br>')
document.write ('today.toLocaleString() = ',today.toLocaleString())
</SCRIPT>
</BODY>
</HTML>would display this in the Web browser document:
today = Wed Aug 4 23:30:01 PST 1998
today.getDate() = 31
today.getHours() = 16
today.toGMTString() = Tue, 06 Aug 1998 00:30:01 GMT
today.toLocaleString() = 08/05/98 23:30:01
Document
ObjectThe document object represents the entire page currently on display in the Web browser.
Syntax
The syntax for the document object is
document.propertyName
or
document.methodName(parameters)
Properties
.alinkColor Reflects the ALINK attribute of the document's <BODY> tag.
anchors An array reflecting all anchors in a document.
.bgColor Reflects the BGCOLOR attribute of the document's <BODY> tag.
.cookie Specifies a cookie.
.forms An array reflecting all forms defined within the page using <FORM> tags.
.lastModified The date/time that the page was last modified.
.linkColor Reflects the LINK attribute of the document's <BODY>tag.
.links An array reflecting all links in a document.
.location Reflects the complete URL of the current page.
.referrer Reflects the URL of the calling page.
.title Reflects the contents of the <TITLE> tag.
.vlinkColor Reflects the VLINK attribute in the document's <BODY> tag.
The anchor object, form object, history object, and link object are also properties of the document object.
Methods
.clear() Removes the page from the browser window.
.close() Terminates the input stream to the page, but leaves the page displayed on the screen.
.open(mimetype) Opens the input stream to a page to collect incoming write() and writeln(). If ommitted, mimetype is standard text/HTML.
.write(string_expression) Writes string_expression directly to the page.
.writeln(string_expression) Writes string_expression directly to the page and sends a line break (Unix only).
Event Handlers
onLoad When used in the <BODY> tag, specifies JavaScript code to be executed as soon as the page is opened.
onUnload When used in the <BODY> tag, specifies JavaScript code to be executed as soon as the page is unloaded.
Though onLoad() and onUnload() technically are event handlers for the larger window object, you place them within the <BODY> tag of the current page.
Description
JavaScript's document object provides access to the entire Web page, including the <HEAD> section, <BODY> definition, and various objects within the page, such as anchors, forms, and links.
The document object is a property of the larger window object.
Example
<HTML>
<HEAD>
<TITLE>JavaScript Document Object</TITLE>
</HEAD>
<BODY>
<P>Hello, my name is JavaScript Document Object and I'll be your web page. I have two hyperlinks in me, one to <A HREF="http://www.coolnerds.com" >Alan's Coolnerds site</A>
The other to <A HREF="http://home.netscape.com" >Netscape's home page</A>. Below are some of the properties about me.<BR>
<P><SCRIPT LANGUAGE = "JavaScript">
document.write ("document.bgColor = ",document.bgColor,"<BR>")
document.write ("document.fgColor = ",document.fgColor,"<BR>")
document.write ("document.linkColor = ",document.linkColor,"<BR>")
document.write ("document.alinkColor = ",document.alinkColor,"<BR>")
document.write ("document.vlinkColor = ",document.vlinkColor,"<BR>")
document.write ("document.location = ",document.location,"<BR>")
document.write ("document.lastModified = ",document.lastModified,"<BR>")
document.write ("document.title = ",document.title,"<BR>")
</SCRIPT>
</BODY>
</HTML>
form
Object (forms array)The form object refers to a single form within a Web page. The forms array is a list that contains one element for every form in the Web page (one element for every <FORM> tag.)
Syntax
You create a form by using Insert > Form Field or by manually typing <FORM>...</FORM> tags into a page. To refer to a form, property, or method from within JavaScript code. you can use any of these syntaxes:
document.formName.propertyName
document.formName.methodName(parameters)
document.forms[index].propertyName
document.forms[index].propertyName(parameters)
document.forms.length
where formName is the value of the NAME attribute in the <FORM> tag, propertyName is one of the pre-defined form properties, methodName is one of the pre-defined methods of forms, index is an integer representing a form object where forms[0] is the first form in the page, forms[1] is the second form in the page, and so on. The last syntax, document.forms.lengths, returns the number of forms defined within the current page (such as 1 if the page contains one form).
Properties
.action Reflects the ACTION attribute as defined in the <FORM> tag
.elements An array reflecting all the elements (fields) in the form
.encoding Reflects the ENCTYPE attribute as defined in the <FORM> tag
.length Reflects the number of elements in a single form
.method Reflects the METHOD attribute as defined in the <FORM> tag
.target Reflects the TARGET attribute as defined in the <FORM> tag
The following JavaScript objects are also properties of the form object. Each of these objects is created with <INPUT> tags that are placed between a pair of <FORM>...</FORM> tags:
button object A clickable button on the form.
checkbox object A checkbox on the form.
hidden object A hidden text field.
password object A password box on the form.
radio object A radio button on the form.
reset object The form's Reset button.
select object A select box (drop-list) on the form.
submit object The form's Submit button.
text object A text box form field.
textarea object A multi-line text box form field.
The forms array has one property, .length, which reflects the number of forms in a document.
Methods
.submit() When executed, it submits the form as though the reader had clicked the Submit button.
Event Handlers
onSubmit Triggered when the reader clicks the Submit button.
Description
Each form in a document is a distinct object with a name, as defined in the NAME attribute of the form, and a number. The number is assigned automatically when the page is opened. So, for example, if the current page contains one form, but that form's <FORM> tag doesn't contain a NAME attribute, you can still refer to the form from within JavaScript code as document.forms[0].
The form object is a property of the larger document object.
Example
The page that follows illustrates the use of a form's submit() method to check the validity of entered data before submitting a form. When the reader clicks the Done button, that button's onClick event handler calls upon the checkData() function. CheckData() uses the custom contains() function to see if the reader's entry (which is supposed to be an email address) contains an @ character. If the entry doesn't contain an @ character, only the message This doesn't appear to be an e-mail address! Nothing is submitted. If the entry does contain an @ character, the document.myform.submit() submits the form.
(Note: For a submission to happen, the <FORM> tag set needs to specify where to send the submitted form.)
<HTML>
<HEAD>
<SCRIPT Language = "JavaScript">
var dataOK=false
function contains(onechar,lstring) {
retval = false
for (var i=1;i<=lstring.length;i++) {
if (lstring.substring(i,i+1)==onechar) {
retval=true
break
}
}
return retval
}
function checkData (){
if (contains("@",document.myform.eaddress.value)) {
document.myform.submit()} //submit myform.}
else {
alert("This doesn't appear to be an e-mail address!")
return false
}
}
</SCRIPT>
<BODY>
<FORM NAME="myform">
<B>Enter your email address:</B>
<INPUT TYPE="text" NAME="eaddress"><P>
<INPUT TYPE="button" VALUE="Done" NAME="button1" onClick="checkData()">
</FORM>
</BODY>
</HTML>
|
|
   |
 |
