Client-Side JavaScript (Webmaster in a Nutshell, 3rd Edition)

// Open a new window w = open("new.html", "newwin", // URL and name "width=400,height=300," + // size "location,menubar," + // chrome "resizable,scrollbars,status,toolbar"); // And close that new window w.close();

// Scripts in framesets refer to frames like this: frames[0].location = "frame1.html"; frames[1].location = "frame2.html"; // With deeply nested frames, you can use: frames[1].frames[2].location = "frame2.3.html"; // Code in a frame refers to the top-level window: top.status = "Hello from the frame";

11.3.4. The Legacy DOM

The original client-side JavaScript DOM defines provides access to document content through properties of the Document object. Several read-only properties, such as title, URL, and lastModified provide information about the document as a whole. See the reference section Document for further details on these and all Document properties and methods. Other properties are arrays that refer to specific types of document content:

forms[ ]: An array of Form objects representing the forms in a document.
images[ ]: An array of Image objects representing the images that appear in a document.
applets[ ]: An array of objects that represent the Java applets embedded in a document. JavaScript can actually be used to script Java and control these applets, but doing so is beyond the scope of this pocket reference.
links[ ]: An array of Link objects representing the hyperlinks in the document.
anchors[ ]: An array of Anchor objects representing the anchors (named positions created with the name attribute of the HTML <a> tag) in the document.

The arrays contain objects in the order they appear in the document. The first form in a document is document.forms[0]; the third image is document.images[2]. Another way to refer to document forms, images, and applets is to give them names with the HTML name attribute:

<form name="address">...</form>

When an form, image, or applet is given a name like this, you can use the name to look it up in the array, or to look it up directly as a property of the document itself:

document.forms["address"]  // A named form
document.address           // The same thing

The Form object is particularly interesting. It has an elements[ ] array that contains objects representing the elements of the form, in the order they appear in the form. See Input, Select, and Textarea in the reference section for details on these form elements.

The elements[ ] array of a Form works much like the forms[ ] array of a Document: it holds form elements in the order they appear in the form, but it also allows them to be referred to by name. Consider this HTML excerpt:

<form name='address'><input name='street'></form>

You can refer to the input element of the form in several ways:

document.forms[0].elements[0]
document.address.elements['street']
document.address.street

The legacy DOM does not provide any way to refer to document content other than forms, form elements, images, applets, links, and anchors. There is no array that provides a list of all <h1> tags, for example, nor is there any way for a script to obtain the actual text of a document. This is a shortcoming that is addressed by the W3C and IE 4 DOMs, as we'll see later. Although it is limited, the legacy DOM does allow scripts to dynamically alter some document content, as we'll see in the following subsections.

11.3.4.1. Dynamically generated documents

In addition to the properties already described, the Document object defines several important methods for dynamically generating document content. Use the write( ) method to output text into the document at the location of the <script> that contains the method calls. For example:

document.write("<p>Today is: " + new Date());
document.write("<p>Document updated: " +
  document.lastModified);

Note that text output in this way may contain arbitrary HTML tags; the browser parses and displays any such text after executing the script that output it.

The write( ) method can be used from a <script> tag only while a document is still loading. If you try to use it within an event handler that is triggered after the document has loaded, it erases the document and the event handler it contains. It is legal, however, to use an event handler in one window or frame to trigger a document.write( ) call into another window. When you do this, however, you must write the complete contents of the new document, and remember to call the document.close( ) method when you are done:

var clock = open("", "", "width=400,height=30");
var d = clock.document; // Save typing below
setInterval("d.write(new Date());d.close();", 1000);

11.3.4.2. Dynamic forms

As we've seen, the elements[ ] array of a Form object contains objects that represent the input elements of the form. Many of these objects have properties that you can use to query or set the value displayed in the form element. This provides another way to dynamically change document content. For example, the following code sets the value property of a Text object to display the current local time:

<form><input size=10></form>  // An HTML form
<script>  /* Display a clock in the form */
// The Text element we're working with.
var e = document.forms[0].elements[0];
// Code to display the time in that element
var s="e.value=(new Date()).toLocaleTimeString();"
setInterval(s, 1000); // Run it every second
</script>

11.3.4.3. Form validation

The <form> tag supports an onsubmit event handler, which is triggered when the user tries to submit a form. You can use this event handler to perform validation: checking that all required fields have been filled in, for example. If the onsubmit handler returns false, the form is not submitted. For example:

<form name="address" onsubmit="checkAddress()">
<!-- form elements go here -->
</form>
<script>
// A simple form validation function
function checkAddress() {
  var f = document.address; // The form to check
  // Loop through all elements
  for(var i = 0; i < f.elements.length; i++) {
    // Ignore all but text input elements
    if (f.elements[i].type != "text") continue;
    // Get the user's entry
    var text = f.elements[i].value;
    // If it is not filled in, alert the user
    if (text == null || text.length == 0) {
      alert("Please fill in all form fields.");
      return false;
    }
  }
}
</script>

11.3.4.4. Image rollovers

The legacy DOM allows you to accomplish one common special effect: dynamically replacing one image on the page with another. This is often done for image rollovers, in which an image changes when the mouse moves over it. The images[ ] array of the Document object contains Image objects that represent the document's images. Each Image object has a src property that specifies the URL of the image to be displayed. To change the image that is displayed, simply set this property to a new URL:

document.images[0].src = "newbanner.gif";

To use this technique for an image rollover, you must use it in conjunction with the onmouseover and onmouseout event handlers that are triggered when the mouse moves on to and off of the image. Here is some basic HTML code with JavaScript event handlers to accomplish a rollover:

<img name="button" src="b1.gif"
     onmouseover="document.button.src='b2.gif';"
     onmouseout="document.button.src='b1.gif';">

When an image is going to be dynamically displayed, it is helpful to preload it into the browser cache so that there is no network delay before it appears. You can do this with a dynamically created off-screen Image object:

var i = new Image(); // Create Image object
i.src="b2.gif";      // Load, but don't display image

11.3.4.5. Working with cookies

The cookie property of the Document object is a peculiar one that allows you to set and query the cookies associated with your document. To associate a transient cookie with the document, simply set the cookie property to a string of the form:

name=value

This creates a cookie with the specified name and value for this document. If you want to create a cookie that is stored even when the user quits the browser, add an expiration date using a string of the form:

name=value; expires=date

The expiration date should be in the form returned by Date.toGMTString( ). If you want the cookie to be accessible to other documents from your web site, you can specify a path prefix:

name=value; expires=date; path=prefix

A single document may have more than one cookie associated with it. To query a document's cookies, simply read the value of the cookie property. This string contains name=value strings separated from each other by a semicolon and a space. When reading cookies, you'll never see a "path=" or "expires=" clause; you'll just get the cookie name and value. Here's a function that retrieves the value of a single named cookie from the cookie property. It assumes that cookie values never contain semicolons.

function getCookie(name) {
  // Split cookies into an array
  var cookies = document.cookie.split('; ');
  for(var i = 0; i < cookies.length; i++) {
    var c = cookies[i];         // One cookie
    var pos = c.indexOf('=');   // Find = sign
    var n = c.substring(0,pos); // Get name
    if (n == name)              // If it matches
      return c.substring(pos+1);  // Return value
  }
  return null;  // Can't find the named cookie
}

// Look up a node in the document var n = document.getElementById("mynode"); var p = n.parentNode; // The containing tag var c0 = n.firstChild; // First child of n var c1 = c0.nextSibling; // 2nd child of n var c2 = n.childNodes[2]; // 3rd child of n var last = n.lastChild; // last child of n

nodeType

Represents

Element: an HTML tag

Text: text in a document

Comment: an HTML comment

Document: the HTML document

// Find a <ol> element by name: var list = document.getElementById("mylist"); // Create a new <li> element var item = document.createElement("li"); // Append it to the list list.appendChild(item); // Create a Text node var text = document.createTextNode("new item"); // Append it to the new <li> node item.appendChild(text); // Remove the new item from the list list.removeChild(item); // Place the new item at the start of the list list.insertBefore(item,list.firstChild);

function embolden(node) { // Embolden node n var b = document.createElement("b"); var p = n.parentNode; // Get parent of n p.replaceChild(b, n); // Replace n with <b> b.appendChild(n); // Insert n into <b> tag }

Property

Description/values

position

How the element is positioned: absolute, relative, fixed, or static (the default).

left, top

The X and Y coordinates of the left and top edges of the element.

width

The width of the element.

height

The height of the element.

zIndex

The stacking order. Values are integers; higher values are drawn on top of lower values.

display

How to display the element. Common values are block, inline, and none for elements that don't get laid out at all.

visibility

Whether the element is visible or hidden. Space is still allocated for non-positioned hidden elements.

overflow

What to do when element content exceeds element size. Values: visible (content overflows); hidden (excess content hidden); scroll (display permanent scrollbar); auto (scrollbars only when needed).

clip

What portion of element content to display. Syntax: rect(top right bottom left).

<h1 id='title'>DHTML Animation<h1> <script> // Look up the element to animate var e = document.getElementById("title"); // Make it position-able. e.style.position = "absolute"; var frame = 0; // Initialize frame counter. // This function moves the element one frame // at a time, then hides it when done. function nextFrame() { if (frame++ < 20) { // Only do 20 frames e.style.left = (10 * frame) + "px"; // Call ourselves again in 50ms. setTimeout("nextFrame()", 50); } else e.style.visibility="hidden"; // Hide it. } nextFrame(); // Start animating now! </script>

Handler

Supported by/triggered when

onabort

<img>; image load aborted

onblur

<body> and form elements; window or element loses keyboard focus

onchange

Form elements; displayed value changes

onclick

All elements; mouse press and release; return false to cancel

ondblclick

All elements; mouse double-click

onerror

<img>; image loading fails

onfocus

<body> and form elements; window or element gets keyboard focus

onkeydown

<body> and form elements; key pressed; return false to cancel

onkeypress

<body> and form elements; key pressed and released; return false to cancel

onkeyup

<body> and form elements; key released

onload

<body>, <frameset>, <img>, <iframe>, <object>; document, image, or object completely loaded

onmousedown

All elements; mouse button pressed

onmousemove

All elements; mouse pointer moved

onmouseout

All elements; mouse moves off element

onmouseover

All elements; mouse moves over element; return true to prevent link URL display in status bar

onmouseup

All elements; mouse button released

onreset

<form>; form reset requested; return false to prevent reset

onresize

<body>, <frameset>; window size changes

onsubmit

<form>; form submission requested; return false to prevent submission

onunload

<body>, <frameset>; document unloaded

function validate() { // Form validation function // check validity here return valid; // return true or false } // Now check user input before submitting it document.forms[0].onsubmit = validate;

11.3. Client-Side JavaScript

11.3.1. JavaScript in HTML

11.3.1.1. The <script> tag

11.3.1.2. Event handlers

11.3.1.3. JavaScript URLs

11.3.2. The Window Object

11.3.2.1. Simple dialog boxes

11.3.2.2. The status line

11.3.2.3. Timers

11.3.2.4. System information

11.3.2.5. Browser navigation

11.3.2.6. Window control

11.3.2.7. Multiple windows and frames

11.3.3. The Document Object

11.3.4. The Legacy DOM

11.3.4.1. Dynamically generated documents

11.3.4.2. Dynamic forms

11.3.4.3. Form validation

11.3.4.4. Image rollovers

11.3.4.5. Working with cookies

11.3.5. The W3C DOM

11.3.5.1. Finding elements by ID

11.3.5.2. Finding elements by tag name

11.3.5.3. Traversing a document tree

11.3.5.4. Node types

11.3.5.5. HTML attributes

11.3.5.6. Manipulating document elements

11.3.5.7. Changing document text

11.3.5.8. Changing document structure

11.3.6. IE 4 DOM

11.3.6.1. Accessing document elements

11.3.6.2. Traversing the document tree

11.3.6.3. Modifying document content and structure

11.3.6.4. DOM compatibility

11.3.7. DHTML: Scripting CSS Styles

11.3.8. Events and Event Handling

11.3.8.1. Event handlers as JavaScript functions

11.3.8.2. Advanced event handling

11.3.9. JavaScript Security Restrictions