/tr>
SPS Home    >   Dgreath    >   JavaScript    >   Implementation

JAVASCRIPT IMPLEMENTATION
WITH XHTML DOCUMENTS

The following information describes how JavaScript is incorporated with XHTML documents. JavaScript is completely event driven so some trigger event must occur to initiate any processing.

JAVASCRIPT IN THE <head> CONTAINER
Scripts can be implemented in the html head section two ways: internally and externally. Any script located in this section will load and execute before the window begins opening as that process does not begin until the <body> tag is encountered. Internal scripts may be embedded in place and is the preferred location for scripts that are unique to this page (note, however, that most xhtml validators will not validate markup with embedded scripts). Scripts featuring multipage usage must be stored on a server (typically as "myscript.js") and linked with appropriate <script> markup. Functions contained in these scripts will not execute until called by an event handler. Inline immediate code will execute one time only.

JAVASCRIPT IN THE <body> CONTAINER
Scripts can be implemented in the html body section two ways: internally and externally. Internal scripts may be embedded in place and is the preferred location for scripts that are unique to this page (note, however, that most xhtml validators will not validate markup with embedded scripts). Scripts featuring multipage usage must be stored on a server (typically as "myscript.js") and linked with appropriate <script> markup. Functions contained in these scripts will not execute until called by an event handler. Inline immediate code will execute one time only at the point where the script elements are positioned in page flow. The scripts can reference properties and functions loaded in the head container and properties and functions loaded earlier in the body container, however, references to elements yet to be loaded will break the script.

EVENT HANDLERS
The following event handlers are attributes of various xhtml elements indicated and are used to execute simple script functions inline using the void operator or to call a loaded JavaScript function. The following code is implemented in the XHTML markup. There are no default actions that occur if these handlers are not present. The following events are handled:
  • Page (onload, onunload, onresize)
  • Images (onload, onabort, onerror)
  • Mouse (onclick, ondblclick, onmouseover, onmouseout, onmousemove, onmouseup, onmousedown
  • Keyboard (onkeydown, onkeypress, onkeyup)
  • Form (onreset, onsubmit, onchange, onselect)
  • Accessability (onfocus, onblur)
  • Anchors (href)
  • Error (onerror)
anchor elements
An edge trigger event that fires when when loading of an image is aborted.
Inline Example:
<a href="javascript:void(document.form.submit())">
Click here to submit</a>
Function Call Example:
<a href="javascript:someFunction(arguments)">Click here to submit</a>

[ELEMENT] a
onblur
A level event that executes while the element that has focus has lost it.
Inline Example:
onblur="javascript:void(window.alert("Lost Focus"))
Function Call Example:
onblur="javascript:someFunction(arguments)"

See also: onfocus
[ELEMENT] area input select textarea button label
onchange
An edge trigger event that fires when the content of a form field changes. 
Inline Example:
onchange="javascript:void(window.alert("Content Changed"))
Function Call Example:
onchange="javascript:someFunction(arguments)"

See also: onrest, onselect, and onsubmit
[ELEMENT] input select textarea
onclick
An edge trigger event that fires when the user single clicks the mouse.
Inline Example:
onclick="javascript:void(window.alert("Mouse Clicked"))
Function Call Example:
onclick="javascript:someFunction(arguments)"

See also: ondblclick, onmousedown, onmousemove onmouseout, onmouseover, and onmouseup
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
ondblclick
An edge trigger event that firess when the user double clicks the mouse.
Inline Example:
ondblclick="javascript:void(window.alert("Mouse Double Clicked"))
Function Call Example:
ondblclick="javascript:someFunction(arguments)"

See also: onclick, onmousedown, onmousemove onmouseout, onmouseover, and onmouseup
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td  ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript  object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onfocus
A level trigger event that executes while an element has focus. An element acquires focus either by a mouse click within its area, but a key click of a designated key, or by tabbing through the tab index.
Inline Example:
onfocus="javascript:void(window.alert("Got Focus"))
Function Call Example:
onfocus="javascript:someFunction(arguments)"

See also: onblur
[ELEMENT] area input select textarea button label
onkeydown
An edge trigger event that fires when the user presses an undepressed key.
Inline Example:
onkeydown="javascript:void(window.alert("Key Pressed"))
Function Call Example:
onkeydown="javascript:someFunction(arguments)"

See also: onkeypress and onkeyup
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onkeypress
A level event that executes while the user presses a key and holds it down. The event provides the ability to capture multi-key events such as shift-c.
Inline Example:
onkeypress="javascript:void(window.alert("Key Pressed"))
Function Call Example:
onkeypress="javascript:someFunction(arguments)"

See also: onkeydown and onkeypress
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onkeyup
An edge trigger event that fires when the user releases a depressed key.
Inline Example:
onkeyup="javascript:void(window.alert("Key Released"))
Function Call Example:
onkeyup="javascript:someFunction(arguments)"

See also: onkeydown and onkeypress
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onload
An edge trigger event that fires when a page or image finishes loading.
Inline Example:
onload="javascript:void(window.alert("Key Released"))
Function Call Example:
onload="javascript:someFunction(arguments)"

See also: onerror and onunload
[ELEMENT] body img
onmousedown
An edge trigger event that fires when a user presses a mouse button.
Inline Example:
onmousedown="javascript:void(window.alert("Mouse Down"))
Function Call Example:
onmousedown="javascript:someFunction(arguments)"

See also: onclick, ondblclick, onmousemove onmouseout, onmouseover, and onmouseup
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onmousemove
An level event that executes while the user moves the mouse.
Inline Example:
onmousemove="javascript:void(window.alert("Mouse in Motion"))
Function Call Example:
onmousemove="javascript:someFunction(arguments)"

See also: onclick, ondblclick, onmousedown onmouseout, onmouseover, and onmouseup
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onmouseout
An level event that executes while the mouse is not over the object.
Inline Example:
onmouseout="javascript:void(window.alert("Mouse is not Over"))
Function Call Example:
onmouseout="javascript:someFunction(arguments)"

See also: onclick, ondblclick, onmousedown onmousemove, onmouseover, and onmouseup
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onmouseover
An level event that executes while the mouse is over the object.
Inline Example:
onmouseover="javascript:void(window.alert("Mouse is Over"))
Function Call Example:
onmouseover="javascript:someFunction(arguments)"

See also: onclick, ondblclick, onmousedown onmousemove, onmouseout, and onmouseup
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onmouseup
An edge trigger event that fires when the depressed mouse button is released.
Inline Example:
onmouseup="javascript:void(window.alert("Mouse Up"))
Function Call Example:
onmouseup="javascript:someFunction(arguments)"

See also: onclick, ondblclick, onmousedown onmousemove, onmouseout, and onmouseover
[ELEMENT] table caption colgroup col thead tfoot tbody tr th td ul ol li dl dt dd menu dir form input select optgroup option textarea button fieldset legend label noframes img map area noscript object a body div hr center span p h1 h2 h3 h4 h5 h6 address pre blockquote ins del bdo em strong dfn code kbd var cite abbr acronym q  sub sup tt i b big small  u s strike
onreset
An edge trigger event that fires when a reset button is clicked.
Inline Example:
onreset="javascript:void(window.alert("Reset Form"))
Function Call Example:
onreset="javascript:someFunction(arguments)"

See also: onchange, onselect,and onsubmit
[ELEMENT] form
onselect
An edge trigger event that fires when text has been selected.
Inline Example:
onselect="javascript:void(window.alert("Text Selected"))
Function Call Example:
onselect="javascript:someFunction(arguments)"

See also: onchange, onreset,and onsubmit
[ELEMENT] input textarea
onsubmit
An edge trigger event that fires when a submit button has been clicked.
Inline Example:
onsubmit="javascript:void(window.alert("Submit Form"))
Function Call Example:
onsubmit="javascript:someFunction(arguments)"

See also: onchange, onreset,and onselect
[ELEMENT] form
onunload
An edge trigger event that fires when a  user leaves a page.
Inline Example:
onunload="javascript:void(window.alert("Page Unloaded"))
Function Call Example:
onunload="javascript:someFunction(arguments)"

See also: onerror and onload
[ELEMENT] body

NON W3C EVENT HANDLERS
onabort
An edge trigger event that fires when user aborts loading of an image [see MSDN].
Inline Example:
onabort="javascript:void(window.alert("Image Loading Aborted"))
Function Call Example:
onabort="javascript:someFunction(arguments)"

See also onerror
[ELEMENT] img
onerror
An edge trigger event that fires when a network error occurred during image  loading.
Inline Example:
onerror="javascript:void(window.alert("A network Error Occurred"))
Function Call Example:
onerror="javascript:someFunction(arguments)"

See also: onabort
{ELEMENT] img

BROWSER EVENT HANDLERS
onresize
An edge trigger event that fires when a window or frame is resized.
Inline Example:
onresize="javascript:void(window.alert("Window has been Resized"))
Function Call Example:
onresize="javascript:someFunction(arguments)"

See also: onload, and onunload
window.onerror
An edge trigger event that fires when an XHTML error occurs.
Inline Example:
window.onerror="javascript:void(window.alert("An XHTML Error Occurred"))
Function Call Example:
window.onerror="javascript:someFunction(arguments)"

Note: for this handler to function, it has to be positioned above the underlying code, hence, it is attached to the window object rather than the XHTML elements.

THE ARRAYS
The most convenient means to read and write attribute values is through the five built-in arrays.
LINKS ARRAY

ANCHORS

FORMS

FRAMES

IMAGES

APPLETS

OBJECTS

mimetypes

plugins


OUTPUT TECHNIQUES
Writing to the current document window
Example:
document.write("<p align='center'>Some text"</p>")
Writing to a different document window
Example:
myWin = window.open("mainwindow.htm","main");
myWin.document.write("<p align='center'>Some text"</p>")
Modifying CSS style
Example:
function setStyleById(elementId, property, value)
{
  var myVar = document.getElementById(elementId);
  myVar.style[property] = value;
}