JavaScript Basics

TAG

<SCRIPT language="JavaScript">
<!-- to avoid problems with old browsers
// C++ comments style
/* C comments style */
javascript_code_is_here

//-->
</SCRIPT>

Types

number (Integer, floating-point)
boolean
string
null
undefined

Variables

global: var_name=var_value
local: function f(){ var var_name=var_value;}

Operators:

same as C , including ( cond ) ? exptrue: expfalse
+ for numbers and strings
typeof

if ( typeof myTotal != "number" )

regexp

Expressions

same as C
objects manipulation:

for (variable in object) { statements; } :cycly through each member

var record = "Wine 1<br><br>"
         for (var prop in wine1)
          {record += prop + " = " + wine1[prop] + "<BR>"}
         record += "<br>"
         document.write(record)

with (object) { statements; } ;shorthand to avoid redundant references

functions

same as C
use HEAD section to define all functios, to load all of them as page initialization

Objects ( DOM)

property: myObj.myProperty or myObj["myProperty"]
method: myObject.myMethod()
direct instance

function function1(){ statements; }

myObject = new Object();
    myObject.property1="xxxxx";
    myObject.property2="yyyy";
    myObject.property3="n";

myObject.method1=function1;

prototype ( sort of 'class' )

function myClass(arg1, arg2, arg3) {
    this.property1 = arg1;
    this.property2 = arg2;
    this.property3 = artg3;
}

myObj1 = new myClass("hola","carlos",2000);
myObj2 = new myClass("hello","narda",1999);

Events

<tag attribute1 attribute2 onEventName="javascript code;">

Common Events
Event	Occurs when...	Event Handler
click	User clicks on form element or link	onClick
change	User changes value of text, textarea, or select element	onChange
focus	User gives form element input focus	onFocus
blur	User removes input focus from form element	onBlur
mouseover	User moves mouse pointer over a link or anchor	onMouseOver
mouseout	User moves mouse pointer off of link or anchor	onMouseOut
select	User selects form element's input field	onSelect
submit	User submits a form	onSubmit
resize	User resizes the browser window	onResize
load	User loads the page in the Navigator	onLoad
unload	User exits the page	onUnload

**Table 1. Comprehensive Summary of Supported Events and Target Elements (Navigator 4.0 and Internet Explorer 4.0)**
Event	Target Element	Cause
Abort NS, IE	image	User aborts the loading of an image by clicking a link or the Stop button.
AfterUpdate IE	bdo, htmlarea, text, rb, rt, ruby, textarea	When an element which is bound to data (i.e. data binding) has been updated; that is, received new data from the dataset.
BeforeUnload IE	frameset, window	User takes action to exit page; this event triggers just prior to actual exit of page and just prior to the Unload event.
BeforeUpdate IE	bdo, htmlarea, text, rb, rt, ruby, textarea	When an element which is bound to data (i.e. data binding) is about to updated; that is, receive new data from the dataset, but has not yet done so.
Blur NS, IE	window, frame, all form elements ... more for IE4.	User removes input focus from window, frame, or form.
Bounce IE	marquee	When the behavior property of the marquee object is set to "alternate" and the scrolling content of the marquee reaches one side.
Click NS, IE	button, radio button, checkbox, submit button, reset button, link ... more for IE4.	User clicks (left) mouse button.
Change NS, IE	text field, textarea, select list ... more for IE4.	User changes value of field.
DataAvailable IE	applet, object, xml	As data is transmitted from a source object this event periodically triggers. Each trigger signals that new data has arrived from the source.
DataSetChanged IE	applet, object, xml	The dataset reflected via its source object has changed such as when the dataset initially becomes available or the object is altered to reflect a new dataset.
DataSetComplete IE	applet, object, xml	The dataset bound to a source object has completed transfer, either successfully or unsuccessfully.
DblClick NS, IE	document, area, link ... more for IE4.	User double-clicks (left) mouse button; in Navigator, not supported on Mac.
DragDrop NS	window	User drags and drops a file from the operating system onto the browser window.
Error NS, IE	image, window link, object, script, style	Attempt to load a document or image causes an error.
ErrorUpdate IE	bdo, htmlarea, text, rb, rt, ruby, textarea	When an element which is bound to data is updating but cancels in mid-stream due to an error this event triggers, rather than AfterUpdate.
FilterChange IE	... many...	When a visual filter applied to the target element has completed.
Focus NS, IE	window, frame, all form elements ... more for IE4.	User brings input focus to window, frame, or form.
Help IE	... many....	User hits the F1 key from within the browser window.
KeyDown NS, IE	document, image, link, textarea ... more for IE4.	User initially depresses a key on the keyboard.
KeyPress NS, IE	document, image, link, textarea ... more for IE4.	User continues to keep key depressed; event fires repeatedly while key remains depressed.
KeyUp NS, IE	document, image, link, textarea ... more for IE4.	User releases depressed key.
Load NS, IE	document applet, embed, frameset, img, link, object, script, style, window	Page completes loading into the browser.
MouseDown NS, IE	button, document, link ... more for IE4.	User initially depresses (either) mouse button; event occurs prior to a MouseClick which requires button to be released.
MouseMove NS, IE	window or document, only during event capturing. ... more for IE4.	In Explorer, fires when user moves mouse while over a target element; In Navigator, only fires when event is captured (see Event Capturing section).
MouseOut NS, IE	area, layer, link ... more for IE4.	User moves mouse pointer off a target element.
MouseOver NS, IE	area, layer, link ... more for IE4.	User moves mouse pointer over a target element.
MouseUp NS, IE	button, document, link ... more for IE4.	User releases depressed (either) mouse button; event occurs prior to a MouseClick.
Move NS	window, frame	User moves the window or frame to a new place on the screen.
ReadyStateChange IE	applet, bdo, document, embed, fieldset, img, link, object, script, xml	Each of the target elements contains a readystate variable which reflects information about the current state of that object. This event triggers when this state changes.
Reset NS, IE	form	User resets a form.
Resize NS, IE	window, frame ... more for IE4.	User resizes the window or frame; in Explorer, event also fires when a target element's size is about to change, such as due to page re-layout.
RowEnter IE	applet, object, xml	When an element which is bound to data and is also a data provider experiences a change in a row of data values, indicating that new data is available on this row.
RowExit IE	applet, object, xml	When an element which is bound to data and is also a data provider changes the current row of data being accessed; triggers prior to the row change itself.
Scroll IE	applet, bdo, body, div, embed, htmlarea, map, marquee, object, select, table, textarea	User moves the scrollbar within the target element.
Select NS, IE	text, textarea htmlarea	User selects, or highlights, data in a form input field.
SelectStart IE	...many....	User begins to make a highlighted selection in the target element. Triggers before the Select event.
Start IE	marquee	When the scrolling marquee element begins its next loop after its initial scroll.
Submit NS, IE	form	User submits a form.
Unload NS, IE	document frameset, image, window	User exits the page either by clicking a hyperlink or navigating elsewhere.

**Table 2. Available Properties of the Event Object: Navigator 4.0**
Property	Description
type	String value reflecting the name of the event; e.g. "Click" or "MouseOver".
target	String value reflecting the target element of this event, as its source HTML tag.
layerX or x	Horizontal position of the pointer relative to the layer it was within when the event occurred; alternatively, when passed with the Resize event, the horizontal width of the window following the resize.
layerY or y	Vertical position of the pointer relative to the layer it was within when the event occurred; alternatively, when passed with the Resize event, the vertical height of the window following the resize.
pageX	Horizontal position of the pointer relative to the page it was within when the event occurred.
pageY	Vertical position of the pointer relative to the page it was within when the event occurred.
screenX	Horizontal position of the pointer relative to the desktop screen when the event occurred.
screenY	Vertical position of the pointer relative to the desktop screen when the event occurred.
which	Integer value reflecting either which mouse button was pressed (1=left, 3=right) or the ASCII value of the pressed key.
modifiers	String value reflecting which modifier keys were depressed during a mouse or keyboard event. Possible values: "ALT_MASK", "CONTROL_MASK", "SHIFT_MASK", "META_MASK"
data	Array of strings containing the URLs of the dropped objects, passed only with the DragDrop event and only in a signed script which has UniversalBrowserRead privilege.

Table 3. Available Properties of the Event Object: Internet Explorer 4.0

Property

Description

type

String value reflecting the name of the event; e.g. "Click" or "MouseOver".

toElement

Reflects the object which has been moved onto as the result of a MouseOver or MouseOut event.

srcElement

Reflects the which was the target element; i.e. triggered the event.

srcFilter

Reflects the filter object which triggered a FilterChange event.

altKey, ctrlKey, shiftKey

For each of these properties its value is true if the specified key was depressed during the event and false if it was not.

keyCode

Integer value reflecting the Unicode key code for the key which caused the event.

button

Integer value reflecting which mouse button(s) was/were depressed during the event. Possible values:
0=none, 1=left, 2=right, 3=left & right, 4=middle,
5=left & middle, 6=right & middle, 7=left & middle & right

x, y

Integer values reflecting the horizontal and vertical positions, respectively, of the pointer relative to the parent object positioned with CSS positioning.

screenX, screenY

Integer values reflecting the horizontal and vertical positions, respectively, of the pointer relative to the desktop screen at the time of the event.

offsetX, offsetY

Integer values reflecting the horizontal and vertical positions, respectively, of the pointer relative to the target element which triggered the event.

clientX, clientY

Integer values reflecting the horizontal and vertical positions, respectively, of the pointer relative to the client area of the browser window; that is, excluding space occupied by scrollbars or other window gadgets.

reason

For a bound data source object, an integer reflecting its transfer state at the time of the event. Possible values:
0=Successful, 1=Transfer aborted, 2=Error.

recordset

For a bound data provider, reflects the record set.

repeat

Boolean value which is true if the event is being repeated, such as a keypress.

returnValue

Boolean value which determines the next sequence after handling the event. If true, the target element behaves as usual following this event; if false the target element does not proceed. This property takes precedence over a boolean value return by the event handler.

cancelBubble

Boolean value which determines whether this event should bubble up the event hierarchy. A false value allows bubbling to proceed; true aborts bubbling at this target element. See "event bubbling" discussion in later section.

bookmarks

Array of ADO bookmarks, each of which identifies a particular record in a recordset object, associated with the rows effected by the current event.

Table 4. Grand Unified Table: Events and Supported Properties of the Event Object
(Navigator 4.0 and Internet Explorer 4.0)
Event	Netscape Available Event Properties	Microsoft Available Event Properties
Abort	target, type	returnValue, srcElement, type
AfterUpdate		cancelBubble, srcElement, type
BeforeUnload		altKey, clientX, clientY, ctrlKey, returnValue, shiftKey, type
BeforeUpdate		cancelBubble, clientX, clientY, offsetX, offsetY, returnValue, screenX, screenY, srcElement, type, x, y
Blur	target, type	clientX, clientY, offsetX, offsetY, screenX, screenY, srcElement, type, x, y
Bounce		clientX, clientY, offsetX, offsetY, returnValue, screenX, screenY, srcElement, type, x, y
Click	modifiers, target, type, which for a link only: layerX, layerY, pageX, pageY, screenX, screenY	altKey, cancelBubble, clientX, clientY, ctrlKey, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
Change	target, type	clientX, clientY, offsetX, offsetY, returnValue, screenX, screenY, srcElement, type, x, y
DataAvailable		bookmarks, cancelBubble, dataFld, recordset, srcElement, type
DataSetChanged		bookmarks, cancelBubble, dataFld, reason, recordset, srcElement, type
DataSetComplete		bookmarks, cancelBubble, dataFld, reason, recordset, srcElement, type
DblClick	layerX, layerY, modifiers, pageX, pageY, screenX, screenY, target, type, which	altKey, cancelBubble, clientX, clientY, ctrlKey, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
DragDrop	target, type
Error	target, type	returnValue, srcElement, type
ErrorUpdate		cancelBubble, srcElement, type
FilterChange		cancelBubble, srcElement, srcFilter, type
Focus	target, type	clientX, clientY, offsetX, offsetY, returnValue, screenX, screenY, srcElement, type, x, y
Help		cancelBubble, clientX, clientY, ctrlKey, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
KeyDown	layerX, layerY, modifiers, pageX, pageY, screenX, screenY, target, type, which	altKey, cancelBubble, clientX, clientY, ctrlKey, offsetX, offsetY, repeat, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
KeyPress	layerX, layerY, modifiers, pageX, pageY, screenX, screenY, target, type, which	altKey, cancelBubble, clientX, clientY, ctrlKey, keyCode, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
KeyUp	layerX, layerY, modifiers, pageX, pageY, screenX, screenY, target, type, which	altKey, cancelBubble, clientX, clientY, ctrlKey, keyCode, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
Load	target, type	clientX, clientY, offsetX, offsetY, screenX, screenY, type, x, y
MouseDown	layerX, layerY, modifiers, pageX, pageY, screenX, screenY, target, type, which	altKey, button, cancelBubble, clientX, clientY, ctrlKey, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
MouseMove	layerX, layerY, pageX, pageY, screenX, screenY, target, type	altKey, cancelBubble, clientX, clientY, ctrlKey, offsetX, offsetY, screenX, screenY, srcElement, shiftKey, type, x, y
MouseOut	layerX, layerY, pageX, pageY, screenX, screenY, target, type	altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, offsetX, offsetY, screenX, screenY, srcElement, shiftKey, toElement, type, x, y
MouseOver	layerX, layerY, pageX, pageY, screenX, screenY, target, type	altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, toElement, type, x, y
MouseUp	layerX, layerY, modifiers, pageX, pageY, screenX, screenY, target, type, which	altKey, button, cancelBubble, clientX, clientY, ctrlKey, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
Move	screenX, screenY, target, type
ReadyStateChange		srcElement, type
Reset	target, type	returnValue, srcElement, type
Resize	layerX, layerY, target, type notes: width or x is a synonym for layerX height or y is a synonym for layerY	altKey, clientX, clientY, ctrlKey, offsetX, offsetY, returnValue, screenX, screenY, srcElement, shiftKey, type, x, y
RowEnter		bookmarks, dataFld, reason, recordset, srcElement, type
RowExit		bookmarks, dataFld, reason, recordset, srcElement, type
Scroll		clientX, clientY, offsetX, offsetY, screenX, screenY, srcElement, type, x, y
Select	target, type	clientX, clientY, offsetX, offsetY, screenX, screenY, returnValue, srcElement, type, x, y
SelectStart		cancelBubble, clientX, clientY, offsetX, offsetY, screenX, screenY, returnValue, srcElement, type, x, y
Start		clientX, clientY, offsetX, offsetY, screenX, screenY, srcElement, type, x, y
Submit	target, type	altKey, ctrlKey, returnValue, shiftKey, srcElement, type
Unload	target, type	type