JavaScript cheat-sheet

• Javascript is based on an action oriented model of the WWW.
• Still evolving. Browser dependent.
• Six categories of elements:
  • Variables
  • Expressions
  • Control Structures
  • Functions
  • Objects and arrays: methods and properties.
  • Events
• Variables: Loosely typed, implicit, unbound.
• Implicit data types: numbers, strings, logical, non-atomic, null.
• Strings: as in C, escape sequences.
• Script tags:
• Commenting
• Statements: on a line.

(top)

Operations

(top)

Operators

(top)

Objects: Math, String, Date

String Content Methods

The following methods can be used on string objects to access, control, or modify their content:

• charAt( idx )
• indexOf( chr )
• lastIndexOf( chr )
• substring( fromidx, toidx )
• toLowerCase()
• toUpperCase()

The string appearance methods are as follows:

• big()
• blink()
• bold()
• fixed()
• fontcolor( colr )
• fontsize( sz )
• italics()
• small()
• strike()
• sub()
• sup()

The various methods that you can call with the string object to alter its HTML formatting.

HTML String Methods

• anchor( namestr )
• link( hrefstr )

The Math object has the following properties:

• E
• LN10
• LN2
• PI
• SQRT1_2
• SQRT2

The Math object has the following methods:

• abs( num )
• acos( num )
• asin( num )
• atan( num )
• ceil( num )
• cos( ang )
• exp( num )
• floor( num )
• log( num )
• max( num1, num2 )
• max( num1, num2 )
• pow( num1, num2 )
• random()
• round( num )
• sin( ang )
• sqrt( num )
• tan( ang)

Summary of Math Object Properties

Math Properties

The Math object provides you with a few constants that you can use for various scientific and algebraic functions. Note that these properties are constants and cannot be changed by JavaScript. The following is a summary with each property's approximate values:

• E
• Euler's constant, the base of natural algorithms. Approximately 2.718.
• LN2
• The natural log of 2. Approximately 0.693.
• LN10
• The natural log of 10. Approximately 2.302.
• PI
• The ratio of the circumference of a circle to its diameter. Approximately 3.1415.
• SQRT1_2
• The square root of .5 (one half) or one over the square root of 2. Approximately 0.707.
• SQRT2
• The square root of 2. Approximately 1.414.

Date object methods

• getDate()
• getDay()
• getHours()
• getMinutes()
• getMonth()
• getSeconds()
• getTime()
• getTimeZoneOffset()
• getYear()
• setDate()
• setHours()
• setMinutes()
• setMonth()
• setSeconds()
• setTime()
• setYear()

• toGMTString()
• toLocaleString()
• toString()
• parse( datestr )
• UTC( datestr )

(top)

Built-in functions

• escape( str )
• eval( str )
• parseFloat( str )
• parseInt( str, radix )
• unEscape( str )

The primary browser objects, in rough order of significance, are as follows:

• window
• document
• location
• history

JavaScript maintains an idea of the current window, so that almost all references to sub-objects of the current window do not need to refer to it explicitly. This is why all of our output has been done using document.write() rather than window.document.write(). window objects have the following interesting methods (among others):

• alert( msgstr )
• close()
• confirm( msgstr )
• open( urlstr, wname )
• prompt( msgstr )

The document object has the following methods:

• clear()
• close()
• open()
• write( str )
• writeln( str )

HISTORY
The history object is used to refer to the history list of previously visited URLs. The history object has a property known as length, which indicates how many URLs are stored on the history list at present. It also has the following three methods:

• back()
• forward()
• go( where )

Events

The button Object

The button object is a new type of INPUT tag that allows you to create general purpose buttons in a form. You can use these buttons to activate any function, or to open a new URL, or perform any other action that JavaScript can initiate. To define a button object use the following syntax:

<INPUT
     TYPE = "button"
     NAME =" nameInside"
     VALUE = "nameOnButton"
     [onClick = "handlerText"]>

This is an extremely useful object, and you will probably find yourself using this often to create buttons to run scripts, open new windows, or even cause the browser to leave your Web site altogether! You must use this inside a set of <FORM>...</FORM> tags. You access a button's properties and methods in the following way:

• buttonName.propertyName
• buttonName.methodName(parameters)
• formName.elements[index].propertyName
• formName.elements[index].methodName(parameters)

You can act on this object in a number of ways, either indirectly by another function, or directly by using the event handlers contained in the object.

Properties and Methods of the Window Object

Properties	Description
defaultStatus	The default message in the status bar.
document	The current document contained in the window.
frames	An array that describes all of the frames (if any) in the window.
frame	A frame object.
length	Reflects the number of frames (if any) in the window.
name	The name of the window.
parent	Synonymous with the name of the window. Contains the frameset tags.
self	Synonymous with the name of the window and refers to the current window.
status	Value appears in the window's status bar. Usually only lasts a moment before overwritten by some other event.
top	Synonymous with the name of the window and represents the topmost window.
window	Synonymous with the name of the window and refers to the current window.
location	A string specifying the URL of the current document.
Methods
alert	Brings up an alert dialog box.
close	Closes the window.
confirm	Brings up a dialog box with Yes or No buttons and a user-specified message.
open	Opens a new window.
prompt	Brings up a window with user-specified text and an input box that allows the user to type in information.
setTimeout	Sets a time in milliseconds for an event to occur.
clearTimeout	Resets value set by setTimeout.

The Document Object

The Document object is extremely useful because it contains so much information about the current document, and it can create HTML on-the-fly with its write and writeln methods. The following table lists the properties and methods of the document object, as well as short descriptions of their purpose.

Properties and Methods of the Document Object

Properties	Description
alinkColor	Reflects the ALINK attribute (in the <body> tag).
anchors	An array listing all of the HTML anchors in the document (<a name>).
anchor	An anchor object.
bgColor	Reflects the value of the BGCOLOR attribute.
cookie	Reflects the value of a Netscape cookie.
fgColor	The value of the TEXT attribute (in the <body> tag).
forms	An array listing all the forms in the document.
form	A form object.
history	An object containing the current browser history (links visited, number of links visited, and link URLs).
lastModified	The date the document was last modified.
linkColor	Reflects the LINK attribute of the <body> tag.
links	An array of all HTML links in the document (<a href>).
link	A link object.
location	The URL of the document.
referrer	The URL of the document that called the current document.
title	Reflects the title of the document.
vlinkColor	Reflects the color listed in the VLINK attribute.
Methods
clear	Clears the window of all content.
close	After an open-causes the string buffer to be written to the screen.
open	Begins a string to be written to the screen. Needs a close to actually force the writing.
write	Writes some expression to the current window.
writeln	Same as write but adds a newline character at the end.

The Form Object

This object is created every time JavaScript encounters a <form>...</form> in your HTML documents. It contains all of the information stored in your form and can be used to submit information to a function or back to the server. This Table describes the properties and methods of the Form object.

Table: Properties and Methods of the Form Object

Property	Description
action	Reflects the HTML ACTION attribute of the <form> tag.
button	A button object (<input type=button>).
checkbox	A checkbox object (<input type= checkbox>).
elements	An array listing all elements in a form.
encoding	The value of the ENCTYPE attribute (for HTML uploads in Netscape).
hidden	A hidden object (<input type=hidden>).
length	The number of elements in the form.
method	The METHOD attribute of <form>.
password	A password object (<input type=password>).
radio	A radio object (<input type=radio>).
reset	A reset button object.
select	A select object (<select>...<select>).
submit	A submit button object.
target	The TARGET attribute of <form>.
text	A text object (<input type=text>).
textarea	A textarea object (<textarea>...</textarea>).
Method
submit	Submits the form to the location in the ACTION attribute.

The Navigator Object

The Navigator object is distinct from the window object in that it contains information about the browser that persists across any given window. In Netscape 3.0, JavaScript adds two new properties-an object called mimeTypes, which lists all of the mimeTypes the browser can handle; and plug-ins, which lists all of the registered plug-ins the browser can use. This table summarizes the properties of the Navigator object (it has no associated methods).

Tabl: e Navigator Object Properties

Property	Description
appCodeName	The code name of the browser, such as "Mozilla".
appName	The name of the browser, such as "Netscape"."
appVersion	Contains the version information of the browser, such as "2.0 (Win95, I)."
userAgent	Contains the user-agent header that the browser sends to the server to identify itself, such as "Mozilla/2.0 (Win95, I)."
mimeTypes	An array reflecting all possible MIME types the browser can either handle itself or pass on to a plug-in or helper application (Netscape 3.0).
plug-ins	An array of registered plug-ins that the browser currently has loaded.

The String Object

Other objects are built into JavaScript that are not specific to either the browser or the window. The first of these is the String object. This object is very useful because you can use its methods to modify and add HTML modifications without changing the string itself. One item to notice about this object is that you can string together any number of its methods to create multilayers of HTML encoding. For example,

"Hello!".bold().blink()

would return

<blink><b>Hello!</b></blink>

Table: Properties and Methods of the String Object

Property	Description
length	The number of characters in the string.
Methods
anchor	Converts string to an HTML anchor.
big	Encloses string in <big>...</big>.
blink	Encloses string in <blink>...</blink>.
bold	Encloses string in <b>...</b>.
charAt	Returns the character at some index value. Index reads from left to right. If char not found, it returns a -1.
fixed	Encloses string in <tt>...</tt>.
fontcolor	Encloses string in <font color=somecolor>...</font>.
indexOf	Looks for the first instance of some string and returns the index of the first character in the target string, or gives a -1 if not found.
italics	Encloses string in <i>...</i>.
lastIndexOf	Same as indexOf, only begins searching from the right to find the last instance of the search string, or -1 if not found.
link	Converts string into a hyperlink.
small	Encloses string in <small>...</small>.
strike	Encloses string in <strike>...</strike>.
sub	Encloses string in <sub>...</sub>.
substring	Given a start and end index, returns the string contained by those indices.
sup	Encloses string in <sup>...</sup>.
toLowerCase	All uppercase characters are converted to lowercase(UpPeRcAsE becomes uppercase).
toUpperCase	All lowercase characters are converted to uppercase.

(top)

Events and Event Handlers in JavaScript