Appendix

JavaScript: The Complete Overview

For those of you who want everything in one place, here's a complete reference to what makes up JavaScript. All JavaScript objects, object properties and methods are accessed via:


object.xxxxx;

where object is the particular object and xxxxx is the property or method.

The <SCRIPT> Tag

Indicates that the enclosed text is JavaScript. Additionally, it is good practice to hide the JavaScript statements within a <COMMENT> tag.

Syntax


<SCRIPT LANGUAGE="JavaScript">
<!- hide from non-Java browsers ->

<!- JavaScript statements and functions go here ->

//->
</SCRIPT>

Attributes

LANGUAGE Defines the scripting language-in this case, "JavaScript." This attribute must be included, unless the SRC attribute is used and the extension of the URL defined by SRC is .js.
SRC Defines a URL (alternate file) where the JavaScript statements are located. JavaScript files should end with .js.

The window Object

The top-level object for each HTML document.

Properties

frames[ ] Array of child frames. Frames are stored in the order defined in the source document.
frames.length Number of defined child frames.
self The current window.
parent The parent window (if the current window is a subwindow in a <FRAMESET>).
top The top-most window, which owns all visible frames. Top-most windows are their own parents.
status The message appearing in the browser status window.
defaultStatus The default message appearing in the browser status window, when the status property is not in effect.
name The internal name, if any, defined for the window when opened with a window.open() method.

Methods

alert("message") Displays a "JavaScript Alert" dialog box with the specified message.
confirm("message") Displays a "Confirm" dialog box (one with OK and Cancel buttons) with the specified message. Returns TRUE if the user clicks the OK button, FALSE if the Cancel button is clicked.
prompt("message") Displays a "prompt" dialog box, which queries the user to input data in response to a displayed message.
open("URL," "name") Opens a new client window, give it the specified name (equivalent to the NAME attribute of a <FRAME> tag), and load the specified URL.
close( ) Closes the window.

The frame Object

Recall that a frame is a subwindow of the entire browser window. As such, the frame object contains almost all the same properties and methods as the window object.
The frame object lacks only the status, defaultStatus, and name properties of the window object.

The location Object

Contains information on the current URL.

Properties

href The entire URL as a JavaScript string.
protocol A string consisting of the first part of the URL (including the first colon), for example http:.
host A string consisting of the hostname:port part of the URL, for example \\www.winternet.com\~sjwalter\.
hostname A string consisting of the hostname part of the URL, for example www.winternet.com.
port A string consisting of the port (if any) from the URL. The port is a numerical value that (if it exists) is located after the hostname and is preceded by a colon. If there is no specified port, this string is empty.
pathname A string consisting of everything in the URL after the third slash, for example ~sjwalter\javascript\index.html.
hash A string consisting of any text after the # (CGI parameters).
search A string consisting of any text after the ? (CGI parameters).

The document Object

Contains information on the current document.

Properties

title Current document title. If no title defined, title contains "Untitled".
location Full URL of the document.
lastModified A Date object-compatible string containing the date the document was last modified.
referrer Contains the URL of the calling document; that is, the page from which the user linked to the current page.
bgColor Background color, expressed as a hexadecimal RGB value compatible with HTML syntax (for example, "#FFFFFF" for white). Equivalent to the BGCOLOR attribute of the <BODY> tag.
fgColor Foreground (text) color, expressed as a hexadecimal RGB value compatible with HTML syntax. Equivalent to the TEXT attribute of the <BODY> tag.
linkColor Hyperlink color, expressed as a hexadecimal RGB value compatible with HTML syntax. Equivalent to the LINK attribute of the <BODY> tag.
vlinkColor Visited hyperlink color, expressed as a hexadecimal RGB value compatible with HTML syntax. Equivalent to the VLINK attribute of the <BODY> tag.
alinkColor Activated (after button press, before button release) hyperlink color, expressed as a hexadecimal RGB value compatible with HTML syntax. Equivalent to the ALINK attribute of the <BODY> tag.
forms[ ] Array of form objects in the document, in the order specified in the source. Each form has its own form object.
forms.length The number of form objects within the document.
links[ ] Array objects corresponding to all HREF links in the document, in the order specified in the source.
links.length The number of HREF links in the document.
anchors[ ] Array of all "named" anchors (<A NAME="">...</A> tags) within the document, in the order specified in the source.
anchors.length The number of named anchors in the document.

Methods

write("string") Writes string to the current window. string may include HTML tags.
writeln("string") Performs the same as write(), but adds a carriage return. This affects only preformatted text (inside a <PRE> or <XMP> tag).
clear( ) Clears the window.
close( ) Closes the window.

The form Object

Corresponds to a <FORM> tag set defined in a document. Each <FORM> tag has its own forms object.

Properties

name String value of the NAME attribute of <FORM>.
method Numeric value of the METHOD attribute of <FORM>: "0" = GET; "1" = POST.
action String value of the ACTION attribute of <FORM>.
target Window targeted for form response after the form has been submitted, as specified in the <FORM> tag.
elements[index] The elements property is an object that contains as its properties, the object of each element in the form. Thus, if your form has three elements-a text input box, a submit button, and a checkbox-then form.elements is an object that contains three properties, each one a respective object (a text object, a submit button object, and a checkbox object).
length Contains the number of elements in the form.

Methods

submit( ) Submits the form.

Event Handlers

onSubmit( ) Identifies code to run (either JavaScript statements or functions) when the form is submitted (when the user clicks a defined Submit button).

The text and textarea Objects

The text (specified by the <TEXT> tag) and textarea (specified by the <TEXTAREA> tag) elements share the same object components.

Properties

name String value of the NAME attribute.
value String value of the contents of the field.
defaultValue String value of the initial contents of the field.

Methods

focus( ) Sets input focus to the object.
blur( ) Removes input focus from the object.
select( ) Selects the object's input field.

Event Handlers

onFocus Executes when input focus enters field (by tabbing in or by clicking but not selecting in the field).
onBlur Executes when input focus leaves the field.
onSelect Executes when the field is input-focused by selecting some of its text.
onChange Executes when input focus exits the field, and the value of the field has changed from when onFocus occurred.

The checkbox object

Corresponds to the <INPUT TYPE="checkbox"...> tag.

Properties

name String value of the NAME attribute.
value String value of the contents of the checkbox. If checked, value="on"; if unchecked, value="off".
checked Boolean value of the contents of the checkbox. If checked, status=TRUE; if unchecked, status=FALSE.
defaultChecked Boolean value that reflects the CHECKED attribute (the default state).

Methods

click( ) Selects the checkbox, causing it to be "on" (or TRUE).

Event Handlers

onClick Executes when the user checks or unchecks the box.

The radio Object

Corresponds to the <INPUT TYPE="radio"...> tag. The form radio[index] is used to refer to a single radio button of the radio object (that is, one of its multiple choices).

Properties

name String value of the NAME attribute.
length The number of radio buttons in the radio object.
value String value of the VALUE attribute.
checked Boolean value. True if pressed; false if not pressed.
defaultChecked Boolean property that reflects the value of the CHECKED attribute.

Methods

click( ) Selects the radio button.

Event Handlers

onClick Executes when the radio button is selected.

The select Object

Corresponds to the <SELECT> tag. The JavaScript object consists of an array of option objects, each of which has the following components:

Properties

length Contains the number of objects in the select object.
name The internal name of the select object as defined by the NAME= attribute.
selectedIndex The index number of the currently selected option of the select object.
options This property is an object reflecting the contents of the <OPTION> tag used when defining a select object in HTML. It contains the following properties:

text String containing the text after the <OPTION> tag.
value Reflection of the VALUE attribute. This is sent to the server when the Submit button is pressed.
defaultSelected Boolean that reflects the SELECTED attribute of the <OPTION> tag.
selected Boolean that indicates the current selected state of the option.

Event Handlers

onFocus Executes when input focus enters the field.
onBlur Executes when input focus leaves the field.
onChange Executes when input focus exits the field, and the field value has changed since the onFocus event.

The button Object

There are three types of buttons in a FORM, defined by the TYPE attribute of the <INPUT> tag:

Submit (TYPE="SUBMIT")
Reset (TYPE="RESET")
Custom (TYPE="BUTTON")

All button objects (regardless of type) have the following components:

Properties

value String containing the VALUE attribute.
name String containing the NAME attribute.

Methods

click( ) Selects the button.

Event Handlers

onClick Executes when a button is clicked.

The submit and reset Objects

The submit object relates to the button defined by the <INPUT TYPE="submit"> tag, whereas the reset object refers to the <INPUT TYPE="reset"> tag. Both contain the same properties, methods, and event handlers. Note that the submit button does not contain the onSubmit event handler; that event handler belongs to the form object.

Properties

name The contents of the NAME= attribute.
value The contents of the VALUE= attribute, which in the case of a submit button is the text displayed on the button face.

Methods

click( ) Selects the button.

Event Handlers

onClick Triggers when the button is clicked.

The password Object

A password form element is a text-entry box that hides the user input by masking typing with asterisks. It is defined with the <INPUT TYPE="password"> tag. The password object relates to the characteristics of this element.

Properties

defaultValue Contains the contents of the VALUE= attribute.
name The contents of the NAME= attribute.
value The current data entered into the password field.

Methods

focus( ) Brings focus onto the password element.
blur( ) Removes focus from the password element.
select( ) Selects the current data in the password element, ready to be modified.

The navigator Object

This object is used to determine which version of Netscape Navigator a visitor to your page is using.

Properties

appCodeName Reflects the "codename" of the user's browser. For example, the codename for Navigator is "mozilla" (I don't know why, either).
appName Reflects the real name of the user's browser.
appVersion Reflects the version number of the user's browser.
userAgent This property reflects the full information on the user's browser, including its codename, version number, and platform (such as Win95).

The string Object

The string object provides a wealth of methods for manipulating the contents of a string.

Properties

length The length of the string-that is, how many characters long it is.

Methods

big( ), blink( ), bold( ), fixed( ), italics( ), small( ), sub( ), strike( ), sup( ) All of the above methods add their respective HTML tags to the string. For example, if the variable message currently contains the string "Hello", then
message.big() would yield the string "<BIG>Hello</BIG>"
message.italics() would yield the string "<I>Hello</I>"
And so forth, for the HTML tags appropriate for the method names above.
fontColor(color), fontSize(size) Adds respective HTML tags to a string, assigning font color or font size as specified in the parameter passed to the method.
charAt(index) Returns the character located at position index within the string.
indexOf (searchValue, [fromIndex]) Searches the string for the first instance of the string searchValue. If fromIndex is specified, it begins the search from that position within the string. Returns value of index of first letter where the string is first found.
lastIndexOf (searchValue, [fromIndex]) Searches for searchValue beginning at the end (rightmost) of the string and working backward. Reports first instance found searching backward from end, or fromIndex if specified.
substring (indexA, indexB) Extracts the substring starting from position indexA to position indexB.
toLowerCase( ), toUpperCase( ) Convert string to all lowercase, or all uppercase, letters.

The Date Object

To use the Date object, you must first create a new instance of a Date object. Do this by assigning a variable of your choosing to new Date(), as follows:
<C1>variablename = new Date();
The object contains no properties, and a plethora of methods, which can be used to extract or set various characteristics of the date.

Methods

getDay( ), getDate( ), getHours( ), getMinutes( ), getMonth( ), getSeconds( ), getTime( ), getTimeZoneOffset( ), getYear( ) Each of these methods returns a value respective to the method name; for example, getMinutes() returns the current number of minutes into the current hour.
setDate( ), setHours( ), setMinutes( ), setMonth( ), setSeconds( ), setTime( ), setYear( ) These methods can be used to set the respective values.
toGMTString( ) Returns current date in GMT format, which is exemplified by:


Sun, 11 Feb 1996 13:18:21 GMT

toLocaleString( ) Returns the current date in "locale" format, which looks like:


02/11/96 13:18:21

parse(date) This method is commonly used in combination with the setTime() method. The setTime() method requires its parameter in the number of milliseconds since January 1, 1970 at 00:00:00 hours. The parse method can convert a traditional date string (such as "May 23, 1972") into millisecond format for use with the setTime() method.

The Math Object

This object contains properties and methods that allow access to common mathematical constants and calculations.

Properties

The following properties represent the following constant values:

LN10	(natural log of 10)	2.302
LN2	(natural log of 2)	0.693
PI		3.1415
SQRT1_2	(the square root of 1/2)	0.707
SQRT2	(the square root of 2)	1.414

Methods

abs (x)	Returns absolute value of x
acos (x)	Returns arc cosine of x
asin (x)	Returns arc sine of x
atan (x)	Returns arc tangent of x
ceil (x)	Returns the least integer greater than or equal to x
cos (x)	Returns the cosine of x
exp (x)	Returns e (Euler's constant) to the power x
floor (x)	Returns the greatest integer less than or equal to x
log (x)	Returns the natural log of x
max (x, y)	Returns the greater of x and y
min (x, y)	Returns the smaller of x and y
pow (x, y)	Returns x to the yth power
round (x)	Returns x rounded to the nearest integer (.5 cutoff)
sin (x)	Returns sine of x
sqrt (x)	Returns square root of x
tan (x)	Returns tangent of x

Reserved Words

The following words are reserved words, which means that you cannot give your variables, functions, methods, or objects any of these names. Some of these words are already used for different purposes in JavaScript, and others are reserved for future use, such as further expansion of the JavaScript language.

abstract	else	instance of	static
boolean	extends	int	super
break	false	interface	switch
byte	final	long	synchronized
case	finally	native	this
catch	float	new	throw
char	for	null	throws
class	function	package	transient
const	goto	private	true
continue	if	protected	try
default	implements	public	var
do	import	return	void
double	in	short	while
			with

Predefined JavaScript Colors

Here is a list of JavaScript's built-in color names. Instead of using a hexadecimal triplet to specify the colors on your page, you can assign a string literal to specify one of the following built-in color names (see Chapter 13 for details on how to do this):

Color	Red	Green	Blue	Hexadecimal Triplet
aliceblue	240	248	255	f0f8ff
antiquewhite	250	235	215	faebd7
aqua	0	255	255	00ffff
aquamarine	127	255	212	7fffd4
azure	240	255	255	f0ffff
beige	245	245	220	f5f5dc
bisque	255	228	196	ffe4c4
black	0	0	0	000000
blanchedalmond	255	235	205	ffebcd
blue	0	0	255	0000ff
blueviolet	138	43	226	8a2be2
brown	165	42	42	a52a2a
burlywood	222	184	135	deb887
cadetblue	95	158	160	5f9ea0
chartreuse	127	255	0	7fff00
chocolate	210	105	30	d2691e
coral	255	127	80	ff7f50
cornflowerblue	100	149	237	6495ed
cornsilk	255	248	220	fff8dc
crimson	220	20	60	dc143c
cyan	0	255	255	00ffff
darkblue	0	0	139	00008b
darkcyan	0	139	139	008b8b
darkgoldenrod	184	134	11	b8860b
darkgray	169	169	169	a9a9a9
darkgreen	0	100	0	006400
darkkhaki	189	183	107	bdb76b
darkmagenta	139	0	139	8b008b
darkolivegreen	85	107	47	55662f
darkorange	255	140	0	ff8c00
darkorchid	153	50	204	9932cc
darkred	139	0	0	8b0000
darksalmon	233	150	122	e9967a
darkseagreen	143	188	143	8fbc8f
darkslateblue	72	61	139	483d8b
darkslategray	47	79	79	2f4f4f
darkturquoise	0	206	209	00ced1
darkviolet	148	0	211	9400d3
deeppink	255	20	147	ff1493
deepskyblue	0	191	255	00bfff
dimgray	105	105	105	696969
dodgerblue	30	144	255	1e90ff
firebrick	178	34	34	b22222
floralwhite	255	250	240	fffaf0
forestgreen	34	139	34	228b22
fuchsia	255	0	255	ff00ff
gainsboro	220	220	220	dcdcdc
ghostwhite	248	248	255	f8f8ff
gold	255	215	0	ffd700
goldenrod	218	165	32	daa520
gray	128	128	128	808080
green	0	128	0	008000
greenyellow	173	255	47	adff2f
honeydew	240	255	240	f0fff0
hotpink	255	105	180	ff69b4
indianred	205	92	92	cd5c5c
indigo	75	0	130	4b0082
ivory	255	255	240	fffff0
khaki	240	230	140	f0e68c
lavender	230	230	250	e6e6fa
lavenderblush	255	240	245	fff0f5
lawngreen	124	252	0	7cfc00
lemonchiffon	255	250	205	fffacd
lightblue	173	216	230	add8e6
lightcoral	240	128	128	f08080
lightcyan	224	255	255	e0ffff
lightgoldenrod-yellow	250	250	210	fafad2
lightgreen	144	238	144	90ee90
lightgrey	211	211	211	d3d3d3
lightpink	255	182	193	ffb6c1
lightsalmon	255	160	122	ffa07a
lightseagreen	32	178	170	20b2aa
lightskyblue	135	206	250	87cefa
lightslategray	119	136	153	778899
lightsteelblue	176	196	222	b0c4de
lightyellow	255	255	224	ffffe0
lime	0	255	0	00ff00
limegreen	50	205	50	32cd32
linen	250	240	230	faf0e6
magenta	255	0	255	ff00ff
maroon	128	0	0	800000
mediumaquamarine	102	205	170	66cdaa
mediumblue	0	0	205	0000cd
mediumorchid	186	85	211	ba55d3
mediumpurple	147	112	219	9370db
mediumseagreen	60	179	113	3cb371
mediumslateblue	123	104	238	7b68ee
mediumspringgreen	0	250	154	00fa9a
mediumturquoise	72	209	204	48d1cc
mediumvioletred	199	21	133	c71585
midnightblue	25	25	112	191970
mintcream	245	255	250	f5fffa
mistyrose	255	228	225	ffe4e1
moccasin	255	228	181	ffe4b5
navajowhite	255	222	173	ffdead
navy	0	0	128	000080
oldlace	253	245	230	fdf5e6
olive	128	128	0	808000
olivedrab	107	142	35	6b8e23
orange	255	165	0	ffa500
orangered	255	69	0	ff4500
orchid	218	112	214	da70d6
palegoldenrod	238	232	170	eee8aa
palegreen	152	251	152	98fb98
paleturquoise	175	238	238	afeeee
palevioletred	219	112	147	db7093
papayawhip	255	239	213	ffefd5
peachpuff	255	218	185	ffda69
peru	205	133	63	cd853f
pink	255	192	203	ffc0cb
plum	221	160	221	dda0dd
powderblue	176	224	230	b0e0e6
purple	128	0	128	800080
red	255	0	0	ff0000
rosybrown	188	143	143	bc8f8f
royalblue	65	105	225	4169e1
saddlebrown	139	69	19	8b4513
salmon	250	128	114	fa8072
sandybrown	244	164	96	f4a460
seagreen	46	139	87	2e8b57
seashell	255	245	238	fff5ee
sienna	160	82	45	a0522d
silver	192	192	192	c0c0c0
skyblue	135	206	235	87ceeb
slateblue	106	90	205	6a5acd
slategray	112	128	144	708090
snow	255	250	250	fffafa
springgreen	0	255	127	00ff7f
steelblue	70	130	180	4682b4
tan	210	180	140	d2b48c
teal	0	128	128	008080
thistle	216	191	216	d8bfd8
tomato	255	99	71	006347
turquoise	64	224	208	40e0d0
violet	238	130	238	ee82ee
wheat	245	222	179	f5deb3
white	255	255	255	ffffff
whitesmoke	245	245	245	f5f5f5
yellow	255	255	0	ffff00
yellowgreen	154	205	50	9acd32

For comments or technical support for our books and software, select Talk to Us.
To order books, call us at 800-716-0044 or 317-228-4366.
© 1996, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon & Schuster Company.