426 Appendix C
Methods
Example:
window.document.the_form.reset();
Handlers
Example:
<FORM onSubmit = "if (formNotDone(this)) {return false;})">
This calls the function formNotDone() on the form. If the function returns
true, the if-then statement returns false and the form is not submitted.
Note that
formNotDone() is not a built-in JavaScript function. See Chapter 11
for more information on form validation.
Hidden
An invisible form element that can store values on a web page without the
visitor seeing them; useful for sending secret information to a CGI script.
Properties
For example:
window.document.the_form.my_hidden.value = "a nice person";
will set the value of the hidden element named my_hidden to a nice person.
If the form is subsequently sent to a CGI script, the value will be passed
along.
History
The history of URLs visited by the visitor’s browser.
reset()
FF, IE 4 Resets the elements of a form, as if a visitor clicked a reset button
submit()
FF, IE 3 Submits the form, as if a visitor clicked a submit button, except that the
onSubmit handler is not called when the submit() method is invoked
onReset
FF, IE 3 Triggered when a form is reset
onSubmit
FF, IE 4 Read-only: Array holding all the elements the element contains
attributes[] FF, IE 5 Read-only: Array holding all the attributes of an element
childNodes[]
FF, IE 4 Read-only: Array of child nodes
className
FF, IE 4 CSS identifier for the element
dir FF, IE 5 Contents of an HTML element’s dir attribute
disabled
FF, IE 4 If set to true, dims the element so that it looks inactive
document
FF, IE 4 Read-only: Reference to the element’s document
firstChild,
lastChild
FF, IE 5 Read-only: First or last child node of an element
height, width FF, IE 5 Height and width of an element
id
FF, IE 4 id attribute of an element
innerHTML
FF, IE 4 HTML text inside the element, not including the start and end tags
lang FF, IE 4 Element’s lang attribute, used by Internet Explorer to determine
how to display language-specific characters
428 Appendix C
Methods
nextSibling,
previousSibling
FF, IE 5 Read-only: Next or previous sibling of an element or node. See
Chapter 14 for details.
nodeName FF, IE 5 Read only: Name of a node or element
nodeType
FF, IE 5 Read only: Type of node or element. 1 = element, 2 = attribute,
FF, IE 5 Append a node to the end of another node’s array of
child elements
attachEvent(),
detatchEvent()
IE 5 Advanced event handling for Internet Explorer. See
“Advanced Event Handling” on page 406.
blur()
FF, IE 3 Moves focus off an element
click()
FF, IE 3 Simulates a click on an element
cloneNode()
FF, IE 5 Makes a copy of a node. If true is passed as a parameter,
the node and all its children (and their children . . . ) are
also copied.
dispatchEvent()
FF Advanced event handling for Firefox. See “Advanced
Event Handling” on page 406.
fireEvent()
IE 5.5 Advanced event handling for Internet Explorer. See
“Advanced Event Handling” on page 406.
getAttribute()
FF, IE 4 Given a string with an attribute name, returns the value of
the attribute of this element
focus()
FF, IE 3 Moves focus onto an element
getAttributeNode()
FF, IE 6 Given a string with an attribute name, gets a node
representing the attribute of this element
getElementsByTagName()
FF, IE 5 Given a string with the name of an HTML or XML element,
removeAttributeNode()
FF, IE 6 Given an attribute node, removes it from this element
removeChild()
FF, IE 5 Given a node, removes it from the children list of this element
replaceChild()
FF, IE 5 Given a new child node and an old child node, replaces
the old child node with the new one
setAttribute()
FF, IE 6 Adds an attribute node to this element
onBlur onDblclick onHelp onKeyPress onMouseDown onMouseOut onMouseUp
onClick onFocus onKeyDown onKeyUp onMouseOver onMouseOver onResize
align
FF, IE 4 Orientation of an image relative to the surrounding text. Values can be:
absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top
alt
FF, IE 4 alt text of an image
border
FF, IE 4 Size of the border around the image
complete
FF, IE 4 Read-only: true if the image has completely downloaded and false
otherwise
430 Appendix C
Example:
if (window.document.pretty_bird.complete)
{
alert("you should now see a pretty bird");
}
Example:
window.document.the_image.lowsrc = "small_image.gif";
Example:
Reference to JavaScript Objects and Functions 431
Link
The hypertext link object: <a href = ""></A>. See “Anchor” on page 413 for
more information.
Location
The location object controls the URL shown in the browser window.
Properties
Example:
window.location.hash = "where_to_go";
This will cause the browser to jump to the position of the current page
that has the anchor
<a name = "where_to_go"></a>.
For example, if the URL is :80/index.html,
the host is www.feedmag.com:80.
Example:
if (window.location.hostname == "www.nostarch.com")
{
alert("welcome to No Starch Press");
}
For example:
window.location.href = " />loads the page index.html from the No Starch Press website.
Example:
var the_path = window.location.pathname;
The variable the_path will hold "index.html" if the window is currently
showing />hash
FF, IE 3 Part of the URL following a hash mark
host
FF, IE 3 Hostname and port of a URL
hostname
FF, IE 3 Domain of the URL shown in the browser
search
FF, IE 3 Part of a URL following a question mark
reload()
FF, IE 4 Reloads the page
replace()
FF, IE 4 Loads the page specified by the URL passed as a parameter into the
browser window. The page shown when
replace() is called is removed
from the browser’s history and replaced with the new page. This means
that clicking the back button after the new page has replaced the currently
shown page won’t result in revisiting the current page. It’s as if you’re
telling the browser to forget the currently shown page.
Reference to JavaScript Objects and Functions 433
Properties
Methods
Navigator
The navigator object lets JavaScript know what type of web browser your
visitor is using.
Properties
E e, Euler’s constant, the base of natural logarithms (2.718282)
LN2 Natural log of 2 (0.693147)
LN10 Natural log of 10 (2.302585)
LOG2E Base 2 log of e (1.442695)
LOG10E Base 10 log of e (0.434294)
PI Pi (3.141593)
SQRT2 Square root of 2 (1.414214)
abs()
Absolute value of the argument, for example, var ab_value = Math.abs(-10); sets
ab_value to 10
acos()
Sine of the number of radians passed as the argument
sqrt()
Square root of the argument
tan()
Tangent of the number of radians passed as the argument
appName
FF, IE 3 Manufacturer of the browser (Netscape, Internet Explorer, Opera, and so on)
434 Appendix C
Example:
if (navigator.appName == "Netscape")
{
window.location = "netscape_index.html";
}
This code sends a visitor to a page called netscape_index.html if the visitor
is using Netscape.
Example:
if (parseFloat(navigator.appVersion) < 2)
{
alert("Isn't it time to upgrade?");
}
Less Common Properties
Methods
Number
The Number object has some helpful read-only properties.
Properties
appVersion
FF, IE 3 String representing the version of the browser. It’s not useful unless
interpreted with the
parseFloat() function.
appCodeName
Reference to JavaScript Objects and Functions 435
Example:
if (isNaN(Math.sqrt(-1)))
{
alert("Get real! You can't take the square root of -1!");
}
Methods
Example:
var the_answer = 4321;
alert(the_answer.exponential(2));
The alert contains the string 4.32e+3.
Option
The option object refers to an option in a select element of a form—either
a pull-down menu or scrollable list. All the options of a
select element are
stored in the
options[] array of that element.
Properties
Example:
if (window.document.the_form.the_pulldown.options[0].selected == true)
{
var the_option_text =
window.document.the_form.the_pulldown.option[0].text;
alert("thanks for picking " + the_option_text);
}
NEGATIVE_INFINITY
FF, IE 4 Read-only: Value smaller than Number.MIN_VALUE. You know no
number will ever be less than this value.
POSITIVE_INFINITY
FF, IE 4 Read-only: Value bigger than Number.MAX_VALUE. No number
The variable the_numbers contains 123.
parseFloat() [FF, IE 3]
Converts a string to a floating-point number as long as the first character is a
number. If the first character is not a number,
parseFloat() returns NaN (not
a number). If the string is a number followed by letters,
parseFloat() grabs
the first set of numbers in the string.
Example:
var the_string = "3.14etc";
var the_numbers = parseFloat(the_string);
The variable the_numbers contains 3.14.
Password
The password form element, like the text form element, allows a visitor to type
a line of text into a form. In a
password element, however, asterisks or bullets
replace the letters to hide the contents from view. The element is represented
like this in HTML:
<input type = "password">.
Properties
text
FF, IE 3 Text associated with an option (see the preceding example)
value
FF, IE 3 Value of the option
defaultValue
FF, IE 3 Read-only: Browser-set default value for the element
Form
FF, IE 3 Read-only: Form containing the element
maxLength
FF, IE 4 Maximum number of characters allowed in the field
<input type = "password" onChange = "Thanks for the password!">
blur()
FF, IE 3 Removes the cursor from the password element
focus()
FF, IE 3 Moves the cursor to the password element
select()
FF, IE 3 Selects the text inside the password element
onBlur
FF, IE 3 Called when a visitor removes the cursor from the password element
onChange
FF, IE 3 Triggered when a visitor changes the contents of the field and then clicks
out of the field or presses
ENTER
438 Appendix C
Example:
<input type = "password" onFocus = "window.open('instruct.html','inst')";>
This method opens a window when a visitor clicks inside the password
field.
prompt()
A dialog box that has OK and Cancel buttons, a place for a message to the
visitor, and a box into which the visitor may type a reply. The
prompt() function
returns the visitor’s reply and takes two parameters: a message that appears
above the input area and a default value to put in the input area. If the
visitor clicks Cancel,
prompt() returns the value null.
Example:
var the_name = prompt("What's your name?", "your name here");
if (the_name == null)
{
Methods
Handlers
Reset
See “Button (Including Submit and Reset Buttons)” on page 416.
Screen
The screen object contains a number of read-only properties that provide
information about the computer screen used to view a web page.
Properties
Example:
var screen_height = screen.availHeight;
Select
The select form element can either be a pull-down menu or a scrollable
list. The items in it are called the options of the select and are stored in the
select element’s options[] array.
defaultValue
FF, IE 3 Read-only: Browser-set default value for the element
length
FF, IE 3 Read-only: Number of elements in a group of radio buttons with the
same name
name
FF, IE 3 Radio button’s name
type
FF, IE 3 Read-only: Identifies element as a radio button
value
FF, IE 3 Value of a radio button
click()
FF, IE 3 Simulates a click on the element
onClick
FF, IE 3 Triggered when a visitor clicks the radio button
availHeight, availWidth FF, IE 4 Read-only: Available height and width of the screen, in
Executes JavaScript statements at repeated time intervals, given two param-
eters: the JavaScript statements to execute and the number of milliseconds
between each execution. The function returns a reference to the interval so
that
clearInterval() may cancel it.
For example:
var the_interval = setInterval("alert('Stop procrastinating!');", 10000);
creates an interval that calls up an alert box every 10 seconds.
length
FF, IE 3 Number of options in the select
multiple
FF, IE 4 If true, accept multiple selections in select box
name
FF, IE 3 select object’s name
options[]
FF, IE 3 Read-only: Array containing the select’s options. See “Option”
on page 435 for more information.
selectedIndex
FF, IE 3 Contains the selected option’s array position in a select element. If
no item has been selected,
selectedIndex is 1. If more than one
option has been selected,
selectedIndex contains the position of
the first option. To determine all the options selected, use a loop to
look at the
selected property of each option object. See “Option”
on page 435 for more information.
onChange
FF, IE 3 Triggered when a visitor selects or deselects an option
Reference to JavaScript Objects and Functions 441
FF, IE 3 Takes a name as a parameter and returns an anchor tag with the string
as the text of the link
big()
FF, IE 3 Puts the string between <big> and </big> tags
442 Appendix C
For example:
var the_string = "something really important";
window.document.writeln(the_string.bold());
writes <b>something really important</b> to a web page.
For example:
var the_string = "rabbit";
var the_first_char = the_string.charAt(0);
sets the_first_char to r because r is in position 0 of the string.
For example:
var the_string = "Hi";
window.document.writeln(the_string.concat(" there"));
writes "Hi there" to a web page.
For example:
var the_string = "pretty";
window.document.writeln(the_string.fontcolor("pink"));
writes <FONT COLOR = "pink">pretty</FONT> to a web page.
For example:
var the_string = "cheese";
window.document.writeln(the_string.fontsize(48));
writes <FONT SIZE = "48">cheese</FONT> to a web page.
bold()
FF, IE 3 Puts the string between <b> and </b> tags
charAt()
FF, IE 3 Takes a number as a parameter and returns the character in that position
of the string. Returns
For example:
var the_string = "The last word.";
var last_space = the_string.lastIndexOf(" ");
sets last_space to 8.
For example:
var the_string = "News For Geeks";
window.document.writeln(the_string.link(""));
writes <a href = "">News for Geeks</A> to a web page.
String.fromCharCode()
FF, IE 4 Constructs a string from ASCII codes
indexOf()
FF, IE 3 Searches within the string for the substring specified by the first parameter.
The optional second parameter is an integer that dictates where in the
string to start searching. If the string contains the substring,
indexOf()
returns the position of the substring within the string. If the string does
not contain the substring,
indexOf() returns 1.
italics()
FF, IE 3 Puts the string between <i> and </i> tags
lastIndexOf()
FF, IE 3 Returns the position of the last occurrence of a substring in a string.
Like
indexOf(), it can take one or two parameters. The first is the
substring to search for, and the second is where in the string to start
searching.
link()
FF, IE 3 Takes a URL as a parameter and creates a hyperlink with the string as the
text of the link and the URL as the contents of the
HREF attribute
FF, IE 4 Takes a regular expression as a parameter and returns the position in the
string that matches the expression, or
1 if the regular expression does
not match
slice()
FF, IE 4 Returns a substring of a string. Takes a start position and an end position
of the substring. If end position is not included, returns from start position
to the end of the string.
small()
FF, IE 3 Puts the string between <small> and </small> tags
sub()
FF, IE 3 Puts the string between <sub> and </sub> tags
substr()
FF, IE 4 Extracts a substring from a string. Takes two parameters: the position of
the first character of the substring and the length of the substring. Similar
to the
substring() method.
Reference to JavaScript Objects and Functions 445
Example:
var the_string = "core";
var the_extract = the_string.substr(1, 2);
This code sets the_extract to "or" because "o" is in position 1 in the string
and is 2 letters long.
Example:
var the_string = "core";
var the_extract = the_string.substr(1, 3);
This code example sets the_extract to "or" because "o" is in position 1 of
the string and
"e", the letter after the last character in "or", is in position 3.
Example:
know Unicode.
446 Appendix C
The style object is available for all HTML elements. The following line
accesses the
style object for the div in the preceding example:
var the_style = document.getElementById("mystyle").style;
All the properties of a style object are read-write. There are many, many
properties for the
style object. The ones compatible with both Firefox and
Internet Explorer 5 and above are listed in the following table. For more
information about those properties, pick up a good book on CSS or
Dynamic HTML.
Properties [FF, IE 5]
Submit
The submit button sends an onSubmit event to the form that contains it. See
“Button (Including Submit and Reset Buttons)” on page 416 for more
information.
Text
The text form element allows a visitor to type a line of text into a form. See
“Password” on page 436 for more information.
background borderRightWidth fontVarient paddingTop
backgroundAttachment borderStyle fontWeight pageBreakAfter
backgroundColor borderTop height pageBreakBefore
backgroundImage borderTopColor left position
backgroundPosition borderTopStyle letterSpacing right
backgroundRepeat borderTopWidth lineHeight tableLayout
border borderWidth listStyleImage textAlign
borderBottom bottom listStylePosition textDecoration
borderBottomColor clear listStyleType textIndent
borderBottomStyle clip margin textIndex
FF, IE 3 Read-only: Browser-set default value for the element
form
FF, IE 3 Read-only: Form containing the element
maxLength
FF, IE 4 Maximum number of characters allowed in the field
name
FF, IE 3 Name of the textarea field
readOnly
FF, IE 4 true if users can’t enter data into the field
rows
FF, IE 4 Number of rows of this textarea
type
FF, IE 4 Read-only: Set to "TEXTAREA"
value
FF, IE 3 Text that appears in the textarea
blur()
FF, IE 3 Removes the cursor from the textarea
focus()
FF, IE 3 Moves the cursor to the textarea
select()
FF, IE 3 Selects the text inside the textarea
onBlur
FF, IE 3 Called when a visitor removes the cursor from the textarea
onChange
FF, IE 3 Triggered when a visitor changes the contents of the field and then clicks
outside the field or presses
ENTER
onFocus
FF, IE 3 Called when the cursor is put into the password field
448 Appendix C
closed
FF, IE 4 Read-only: true if a window has been closed and false if it is still open. The
window referenced is generally created using the
window.open() method.
Reference to JavaScript Objects and Functions 449
Example:
window.frames[0].document.writeln("Hello!");
This line writes the word Hello! into the document of the first frame in
the window’s frame set.
Example:
var first_frame_name = window.frames[0].name;
Example:
function alertError(the_message, the_url, the_line)
{
var the_string = "Warning, Will Robinson! " + the_message;
the_string += " occurred on line " + the_line " of " + the_url;
}
window.onerror = window.alertError;
Now, whenever there is a JavaScript error, an alert will pop up with the
contents of that error.
defaultStatus
FF, IE 3 Read-only: Browser’s default message in the status area of the
window
document
FF, IE 3 Read-only: document object of the window. See “Document” on
page 421 for more information.
frames[]
FF, IE 3 Read-only: Array of frames stored in a window. Each frame is
considered another
window object.
Example:
window.status = "Don't forget to smile!";
offscreenBuffering
IE 4 Setting this to true may reduce flicker in DHTML animations
opener
FF, IE 3 Reference back to the window or frame that opened the
current window
outerHeight
FF Height of the window (only signed scripts can make this smaller than
100 pixels)
outerWidth
FF Width of the window (only signed scripts can make this smaller than
100 pixels)
pageXOffset
FF Read-only: How far to the right the screen has scrolled in pixels
pageYOffset
FF Read-only: How far down the screen has scrolled in pixels
parent
FF, IE 3 Read-only: Parent of this window (used in the context of frames)
screen
FF, IE 4 Read-only: Window’s screen object
screenLeft
IE 5 Read-only: Horizontal coordinate (in pixels) of the left border of the
browser window’s content area relative to the upper left corner of the
screen. The content area is where the web page resides.
screenTop
IE 5 Read-only: Vertical coordinate (in pixels) of the top border of the
browser window’s content area relative to the upper left corner of
the screen. The content area is where the web page resides.
screenX