JavaScript in the Browser

An introduction to the language as used within a browser. This talk follows:

Examples are taken [2] from that book.

1 Browser Environment

1.1 Level 0 DOM

window; //The global object

//various other windows
window.self; 
window.window;
window.parent;
window.top;

//navigator object
window.navigator; 

//array of window objects
window.frames[];

//location object
window.location;

window.history;

window.screen;

//The document object (DOM)
window.document;

//Ways to access the various elements in a document
window.document.applets[];
window.document.images[];
window.document.links[];
window.document.anchors[];
window.document.forms[];
window.document.forms[].elements[];
window.document.forms[].elements[].options[];

1.2 Including JavaScript in HTML

<html>
  <head>
    <title>The date</title>
    <script language="JavaScript">
      function printDate() {
      var d = new Date();
      document.write(d.toLocaleString());
      }
    </script>
  </head>

  <body>
    <p>The date and time are:<br/>
      <script language="JavaScript">
        printDate();
      </script>
    </p>
  </body>
</html>
Load it

1.3 JavaScript URLs

1.4 Executing Scripts

1.5 Threading

1.6 Security

1.6.1 Cross-Site Scripting

<html>
  <head><title>Hello</title></head>
  <body>
<script>
var name = decodeURIComponent(window.location.search.substring(6)) || "";
document.write("Hello " + name);
</script>
</body>

2 Scripting Browser Windows

2.1 Timers

2.2 Parsing URLs

/*
 * This function parses ampersand-separated name=value argument pairs from
 * the query string of the URL. It stores the name=value pairs in 
 * properties of an object and returns that object. Use it like this:
 * 
 * var args = getArgs();  // Parse args from URL
 * var q = args.q || "";  // Use argument, if defined, or a default value
 * var n = args.n ? parseInt(args.n) : 10; 
 */
function getArgs() {
    var args = new Object();
    var query = location.search.substring(1);     // Get query string
    var pairs = query.split("&");                 // Break at ampersand
    for(var i = 0; i < pairs.length; i++) {
        var pos = pairs[i].indexOf('=');          // Look for "name=value"
        if (pos == -1) continue;                  // If not found, skip
        var argname = pairs[i].substring(0,pos);  // Extract the name
        var value = pairs[i].substring(pos+1);    // Extract the value
        value = decodeURIComponent(value);        // Decode it, if needed
        args[argname] = value;                    // Store as a property
    }
    return args;                                  // Return the object
}

2.3 Window Geometry

/**
 * Geometry.js: portable functions for querying window and document geometry
 *
 * This module defines functions for querying window and document geometry.
 * 
 * getWindowX/Y(): return the position of the window on the screen
 * getViewportWidth/Height(): return the size of the browser viewport area
 * getDocumentWidth/Height(): return the size of the document.
 * getHorizontalScroll(): return the position of the horizontal scrollbar
 * getVerticalScroll(): return the position of the vertical scrollbar
 *
 * Note that there is no portable way to query the overall size of the 
 * browser window, so there are no getWindowWidth/Height() functions.
 * 
 * IMPORTANT: This module must be included in the <body> of a document
 *            instead of the <head> of the document.
 */
var Geometry = {};

if (window.screenLeft) { // IE and others
    Geometry.getWindowX = function() { return window.screenLeft; };
    Geometry.getWindowY = function() { return window.screenTop; };
}
else if (window.screenX) { // Firefox and others
    Geometry.getWindowX = function() { return window.screenX; };
    Geometry.getWindowY = function() { return window.screenY; };
}

if (window.innerWidth) { // All browsers but IE
    Geometry.getViewportWidth = function() { return window.innerWidth; };
    Geometry.getViewportHeight = function() { return window.innerHeight; };
    Geometry.getHorizontalScroll = function() { return window.pageXOffset; };
    Geometry.getVerticalScroll = function() { return window.pageYOffset; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
    // These functions are for IE6 when there is a DOCTYPE
    Geometry.getViewportWidth =
        function() { return document.documentElement.clientWidth; };
    Geometry.getViewportHeight = 
        function() { return document.documentElement.clientHeight; };
    Geometry.getHorizontalScroll = 
        function() { return document.documentElement.scrollLeft; };
    Geometry.getVerticalScroll = 
        function() { return document.documentElement.scrollTop; };
}
else if (document.body.clientWidth) {
    // These are for IE4, IE5, and IE6 without a DOCTYPE
    Geometry.getViewportWidth =
        function() { return document.body.clientWidth; };
    Geometry.getViewportHeight =
        function() { return document.body.clientHeight; };
    Geometry.getHorizontalScroll =
        function() { return document.body.scrollLeft; };
    Geometry.getVerticalScroll = 
        function() { return document.body.scrollTop; };
}
'w=' + Geometry.getViewportWidth() + ' h='+ Geometry.getViewportHeight() [11] 
var browser = "Browser Information";

for (var propname in navigator) {
    browser += propname + ": " + navigator[propname] + "\n";
}
alert(browser); [12]

2.5 Manipulating Windows

2.6 Window Moving Example

var bounce = {
    x:0, y:0, w:200, h:100,   // Window position and size
    dx:5, dy:5,               // Window velocity
    interval: 100,            // Milliseconds between updates
    win: null,                // The window we will create
    timer: null,              // Return value of setInterval()

    // Start the animation
    start: function() {
         // Start with the window in the center of the screen
         bounce.x = (screen.width - bounce.w)/2;
         bounce.y = (screen.height - bounce.h)/2;

         // Create the window that we're going to move around
         // The javascript: URL is simply a way to display a short document
         // The final argument specifies the window size
         bounce.win = window.open('javascript:"<h1>BOUNCE!</h1>"', "", 
                                  "left=" + bounce.x + ",top=" + bounce.y +
                                  ",width=" + bounce.w + ",height=" +bounce.h+
                                  ",status=yes");
         
         // Use setInterval() to call the nextFrame() method every interval 
         // milliseconds. Store the return value so that we can stop the
         // animation by passing it to clearInterval().
         bounce.timer  = setInterval(bounce.nextFrame, bounce.interval);
    },

    // Stop the animation
    stop: function() {
         clearInterval(bounce.timer);                // Cancel timer
         if (!bounce.win.closed) bounce.win.close(); // Close window
    },

    // Display the next frame of the animation.  Invoked by setInterval()
    nextFrame: function() {
         // If the user closed the window, stop the animation
         if (bounce.win.closed) {
             clearInterval(bounce.timer);
             return;
         }
         
         // Bounce if we have reached the right or left edge
         if ((bounce.x+bounce.dx > (screen.availWidth - bounce.w)) ||
             (bounce.x+bounce.dx < 0)) bounce.dx = -bounce.dx;
         
         // Bounce if we have reached the bottom or top edge
         if ((bounce.y+bounce.dy > (screen.availHeight - bounce.h)) ||
             (bounce.y+bounce.dy < 0)) bounce.dy = -bounce.dy;
         
         // Update the current position of the window
         bounce.x += bounce.dx;
         bounce.y += bounce.dy;
         
         // Finally, move the window to the new position
         bounce.win.moveTo(bounce.x,bounce.y);

         // Display current position in window status line
         bounce.win.defaultStatus = "(" + bounce.x + "," + bounce.y + ")";
    }
}

2.7 Dialog Boxes

2.8 Frames

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="REFRESH" content="0;url=http://jmvidal.cse.sc.edu/webapps/spring08/">
  </head>
  <body>
    <h1>Web Applications</h1>
    <p>
      Redirecting to <a href="spring08/">Spring 2008 class</a>.
    </p/>
    <hr>
    <address><a href="mailto:jmvidal@sc.edu">Jose M Vidal</a></address>
<!-- Created: Sat Nov 24 07:51:32 EST 2007 -->
<!-- hhmts start -->
Last modified: Sat Nov 24 07:52:57 EST 2007
<!-- hhmts end -->
  </body>
</html>
Class page [17]

3 Scripting Documents

3.1 Legacy DOM Collections

3.1.1 Naming Document Objects

<form name="purchase"> ....</form>
document.forms["purchase"]



document.purchase (but only for form, img or applet)

3.1.2 Listing Links Example

listinglinksexample.html 
function listlinks(d) {
     // Open a new window
    var newwin = window.open("", "navwin", 
                             "menubar=yes,scrollbars=yes,resizable=yes," +
                             "width=500,height=300");

    // Give it a title
    newwin.document.write("<h1>Navigation Window: " + d.title + "</h1>");

    // List all links
    for(var i = 0; i < d.links.length; i++) {
        // For each link object, determine the text to display. 
        // First, try to get the text between <a> and </a> using a 
        // browser-dependent property. If none, use the name instead.
        var a = d.links[i];
        var text = null;
        if (a.text) text = a.text;                          // Netscape 4
        else if (a.innerText) text = a.innerText;           // IE 4+
        if ((text == null) || (text == '')) text = a.name;  // Default

        // Now output that text as a link. The href property of this link
        // is never used: the onclick handler does the work, setting the 
        // location.hash property of the original window to make that
        // window jump to display the named link.  See Window.opener,
        // Window.location and Location.hash, and Link.onclick.
        newwin.document.write('<a href="#' + a.name + '"' +
                              ' onclick="opener.location.hash=\'' + a.name + 
                              '\'; return false;">'); 
        newwin.document.write(text);
        newwin.document.write('</a><br>');
    }
    newwin.document.close();  // Never forget to close the document!
}
listlinks(document) [18]

3.2 W3C DOM

3.2.1 Types of Nodes

Interface nodeTypeConstant nodeType value
Element Node.ELEMENT_NODE 1
Text Node.TEXT_NODE 3
Document Node.DOCUMENT_NODE 9
Comment Node.COMMENT_NODE 8
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11
Attr Node.ATTRIBUTE_NODE 2

3.3 HTMLElement

3.4 DOM Levels

3.5 Traversing a Document

function countTags(n) {                         // n is a Node 
    var numtags = 0;                            // Initialize the tag counter
    if (n.nodeType == 1 /*Node.ELEMENT_NODE*/)  // Check if n is an Element
        numtags++;                              // Increment the counter if so
    var children = n.childNodes;                // Now get all children of n
    for(var i=0; i < children.length; i++) {    // Loop through the children
        numtags += countTags(children[i]);      // Recurse on each one
    }
    return numtags;                             // Return the total
}
alert('This document has ' + countTags(document) + ' tags.' [22]

3.5.1 Getting Text

/** 
 * getText(n): Find all Text nodes at or beneath the node n.
 * Concatenate their content and return it as a string.
 */
function getText(n) {
    // Repeated string concatenation can be inefficient, so we collect
    // the value of all text nodes into an array, and then concatenate
    // the elements of that array all at once.
    var strings = [];
    getStrings(n, strings);
    return strings.join("");

    // This recursive function finds all text nodes and appends
    // their text to an array.
    function getStrings(n, strings) {
        if (n.nodeType == 3 /* Node.TEXT_NODE */) 
            strings.push(n.data);
        else if ((n.nodeType == 1) || (n.nodeType == 9)) /* Node.ELEMENT_NODE or DOCUMENT*/ {
            // Note iteration with firstChild/nextSibling
            for(var m = n.firstChild; m != null; m = m.nextSibling) {
                getStrings(m, strings);
            }
        }
    }
}
getText(document) [23]

3.6 Finding a Specific Element

3.7 Modifying a Document

function sortkids(e) {
     // This is the element whose children we are going to sort
     if (typeof e == "string") e = document.getElementById(e);

     // Transfer the element (but not text node) children of e to a real array
     var kids = [];
     for(var x = e.firstChild; x != null; x = x.nextSibling)
         if (x.nodeType == 1 /* Node.ELEMENT_NODE */) kids.push(x);

     // Now sort the array based on the text content of each kid.
     // Assume that each kid has only a single child and it is a Text node
     kids.sort(function(n, m) { // This is the comparator function for sorting
                   var s = n.firstChild.data; // text of node n
                   var t = m.firstChild.data; // text of node m
                   if (s < t) return -1;      // n comes before m
                   else if (s > t) return 1;  // n comes after m
                   else return 0;             // n and m are equal
               });

     // Now append the kids back into the parent in their sorted order.
     // When we insert a node that is already part of the document, it is
     // automatically removed from its current position, so reinserting
     // these nodes automatically moves them from their old position
     // Note that any text nodes we skipped get left behind, however.
     for(var i = 0; i < kids.length; i++) e.appendChild(kids[i]);
}
sortkids('list') [27]

3.7.1 Modifying Text

// This function recursively looks at Node n and its descendants, 
// converting all Text node data to uppercase
function upcase(n) {
    if (n.nodeType == 3 /*Node.TEXT_NODE*/) {
        // If the node is a Text node, create a new Text node that
        // holds the uppercase version of the node's text, and use the
        // replaceChild() method of the parent node to replace the
        // original node with the new uppercase node.
        n.data = n.data.toUpperCase();
    }
    else {
        // If the node is not a Text node, loop through its children
        // and recursively call this function on each child.
        var kids = n.childNodes;
        for(var i = 0; i < kids.length; i++) upcase(kids[i]);
    }
}

3.7.2 Modifying Attributes

3.7.3 Document Fragments

// Reverse the order of the children of Node n
function reverse(n) { 
    // Create an empty DocumentFragment as a temporary container
    var f = document.createDocumentFragment(); 

    // Now loop backward through the children, moving each one to the fragment.
    // The last child of n becomes the first child of f, and vice-versa.
    // Note that appending a child to f automatically removes it from n.
    while(n.lastChild) f.appendChild(n.lastChild); 

    // Finally, move the children of f all at once back to n, all at once.
    n.appendChild(f);
}
reverse(document.getElementById('list')) [30]

3.8 Easier Document Creation

/**
 * make(tagname, attributes, children):
 *   create an HTML element with specified tagname, attributes and children.
 * 
 * The attributes argument is a JavaScript object: the names and values of its
 * properties are taken as the names and values of the attributes to set.
 * If attributes is null, and children is an array or a string, the attributes 
 * can be omitted altogether and the children passed as the second argument. 
 *
 * The children argument is normally an array of children to be added to 
 * the created element.  If there are no children, this argument can be 
 * omitted.  If there is only a single child, it can be passed directly 
 * instead of being enclosed in an array. (But if the child is not a string
 * and no attributes are specified, an array must be used.)
 * 
 * Example: make("p", ["This is a ", make("b", "bold"), " word."]);
 *
 * Inspired by the MochiKit library (http://mochikit.com) by Bob Ippolito
 */
function make(tagname, attributes, children) {
    
    // If we were invoked with two arguments the attributes argument is
    // an array or string, it should really be the children arguments.
    if (arguments.length == 2 && 
        (attributes instanceof Array || typeof attributes == "string")) {
        children = attributes;
        attributes = null;
    }

    // Create the element
    var e = document.createElement(tagname);

    // Set attributes
    if (attributes) {
        for(var name in attributes) e.setAttribute(name, attributes[name]);
    }

    // Add children, if any were specified.
    if (children != null) {
        if (children instanceof Array) {  // If it really is an array
            for(var i = 0; i < children.length; i++) { // Loop through kids
                var child = children[i];
                if (typeof child == "string")          // Handle text nodes
                    child = document.createTextNode(child);
                e.appendChild(child);  // Assume anything else is a Node
            }
        }
        else if (typeof children == "string") // Handle single text child
            e.appendChild(document.createTextNode(children));
        else e.appendChild(children);         // Handle any other single child
    }

    // Finally, return the element.
    return e;
}

/**
 * maker(tagname): return a function that calls make() for the specified tag.
 * Example: var table = maker("table"), tr = maker("tr"), td = maker("td");
 */
function maker(tag) {
    return function(attrs, kids) {
        if (arguments.length == 1) return make(tag, attrs);
        else return make(tag, attrs, kids);
    }
}

var table = maker("table"), tr = maker("tr"), th = maker("th");

var mytable = table({border:1}, tr([th("Name"), th("Type"), th("Value")]));
document.getElementById('item').appendChild(mytable) [31]

3.9 Querying Selected Text

function getSelectedText() {
    if (window.getSelection) {
        // This technique is the most likely to be standardized.
        // getSelection() returns a Selection object, which we do not document.
        return window.getSelection().toString();
    }
    else if (document.getSelection) {
        // This is an older, simpler technique that returns a string
        return document.getSelection();
    }
    else if (document.selection) {
        // This is the IE-specific technique.
        // We do not document the IE selection property or TextRange objects.
        return document.selection.createRange().text;
    }
}
getSelectedText() [32]

4 CSS and Dynamic HTML

4.1 Useful CSS Attributes

4.1.1 Shadows

/**
 * Shadows.js: shadowed text with CSS.
 * 
 * This module defines a single global object named Shadows.
 * The properties of this object are two utility functions.
 * 
 * Shadows.add(element, shadows):
 *   Add the specified shadows to the specified element.  The first argument
 *   is a document element or element id.  This element must have a single
 *   text node as its child.  This child is the one that will be shadowed.
 *   Shadows are specified with a string argument whose syntax is explained
 *   below.
 *
 * Shadows.addAll(root, tagname):
 *   Find all descendants of the specified root element that have the
 *   specified tagname. If any of these elements have an attribute named
 *   shadow, then call Shadows.add(), for the element and the value of its
 *   shadow attribute.  If tagname is not specified, all elements are checked.
 *   If root is not specified, the document object is used.  This function is
 *   intended to be called once, when a document is first loaded.
 *
 * Shadow Syntax
 * 
 * Shadows are specified by a string of the form [x y color]+.  That is, one
 * or more triplets specifying an x offset a y offset and a color.  Each of
 * these values must be in legal CSS format. If more than one shadow is
 * specified, then the first shadow specified is on the bottom, overlapped
 * by subsequent shadows.  For example: "4px 4px #ccc 2px 2px #aaa"
 */
var Shadows = {};

// Add shadows to a single specified element
Shadows.add = function(element, shadows) {
    if (typeof element == "string")
        element = document.getElementById(element);

    // Break the shadows string up at whitespace, first stripping off
    // any leading and trailing spaces.
    shadows = shadows.replace(/^\s+/, "").replace(/\s+$/, "");
    var args = shadows.split(/\s+/);

    // Find the text node that we are going to shadow.
    // This module would be more robust if we shadowed all children.
    // For simplicity, though, we're only going to do one.
    var textnode = element.firstChild;
    
    // Give the container element relative positioning, so that
    // shadows can be positioned relative to it.
    // We'll learn about scripting the style property in this way later.
    element.style.position = "relative";

    // Create the shadows
    var numshadows = args.length/3;           // how many shadows?
    for(var i = 0; i < numshadows; i++) {     // for each one
        var shadowX = args[i*3];              // get the X offset
        var shadowY = args[i*3 + 1];          // the Y offset
        var shadowColor = args[i*3 + 2];      // and the color arguments

        // Create a new <span> to hold the shadow
        var shadow = document.createElement("span");
        // Use its style attribute to specify offset and color
        shadow.setAttribute("style", "position:absolute; " +
                            "left:" + shadowX + "; " +
                            "top:" + shadowY + "; " +
                            "color:" + shadowColor + ";");

        // Add a copy of the text node to this shadow span
        shadow.appendChild(textnode.cloneNode(false));
        // And add the span to the container
        element.appendChild(shadow);
    }

    // Now we put the text on top of the shadow.  First, create a <span>
    var text = document.createElement("span");
    text.setAttribute("style", "position: relative"); // position it
    text.appendChild(textnode); // Move the original text node to this span
    element.appendChild(text);  // And add this span to the container
};

// Scan the document tree at and beneath the specified root element for
// elements with the specified tagname.  If any have a shadow attribute
// pass it to the Shadows.add() method above to create the shadow.
// If root is omitted, use the document object.  If tagname is omitted,
// search all tags.
Shadows.addAll = function(root, tagname) {
    if (!root) root = document;   // Use whole document if no root
    if (!tagname) tagname = '*';  // Use any tag if no tagname specified
    
    var elements = root.getElementsByTagName(tagname); // Find all tags
    for(var i = 0; i < elements.length; i++) {           // For each tag
        var shadow = elements[i].getAttribute("shadow"); // If it has a shadow
        if (shadow) Shadows.add(elements[i], shadow);    // create the shadow
    }
};

4.1.2 Animations

/**
 * AnimateCSS.js:
 * This file defines a function named animateCSS(), which serves as a framework
 * for creating CSS-based animations. The arguments to this function are:
 *
 *     element: The HTML element to be animated.
 *     numFrames: The total number of frames in the animation.
 *     timePerFrame: The number of milliseconds to display each frame.
 *     animation: An object that defines the animation; described below.
 *     whendone: An optional function to call when the animation finishes.
 *               If specified, this function is passed element as its argument.
 *
 * The animateCSS() function simply defines an animation framework. It is
 * the properties of the animation object that specify the animation to be
 * done. Each property should have the same name as a CSS style property. The
 * value of each property must be a function that returns values for that
 * style property.  Each function is passed the frame number and the total
 * amount of elapsed time, and it can use these to compute the style value it
 * should return for that frame.  For example, to animate an image so that it
 * slides in from the upper left, you might invoke animateCSS as follows:
 *
 *  animateCSS(image, 25, 50,  // Animate image for 25 frames of 50ms each
 *             {  // Set top and left attributes for each frame as follows:
 *               top: function(frame,time) { return frame*8 + "px"; },
 *               left: function(frame,time) { return frame*8 + "px"; }
 *             });
 *             
 **/
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
    var frame = 0;  // Store current frame number
    var time = 0;   // Store total elapsed time

    // Arrange to call displayNextFrame() every timePerFrame milliseconds.
    // This will display each of the frames of the animation.
    var intervalId = setInterval(displayNextFrame, timePerFrame);

    // The call to animateCSS() returns now, but the previous line ensures that
   // the following nested function will be invoked once for each frame
    // of the animation.
    function displayNextFrame() {
        if (frame >= numFrames) {             // First, see if we're done
            clearInterval(intervalId);        // If so, stop calling ourselves
            if (whendone) whendone(element);  // Invoke whendone function
            return;                           // And we're finished
        }

        // Now loop through all properties defined in the animation object
        for(var cssprop in animation) {
            // For each property, call its animation function, passing the
            // frame number and the elapsed time. Use the return value of the
            // function as the new value of the corresponding style property
            // of the specified element. Use try/catch to ignore any
            // exceptions caused by bad return values.
            try {
                element.style[cssprop] = animation[cssprop](frame, time);
            } catch(e) {}
        }

        frame++;               // Increment the frame number
        time += timePerFrame;  // Increment the elapsed time
    }
}
animateCSS(document.getElementById('animate'),300,50,{top: function(f,t) {return 30+f*5 + 'px';}}) [35]

4.2 Scripting Inline Styles

var imgs = document.getElementsByTagName("img");
var img = imgs[0];
img.style.visibility = "hidden";

4.3 Scripting Classes

5 Event Handling

5.1 Events

Category Type Attribute Description Bubbles Cancelable
Mouse click onclick Fires when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:
  • mousedown
  • mouseup
  • click
 Yes Yes
dblclick ondblclick Fires when the pointing device button is double clicked over an element. Yes Yes
mousedown onmousedown Fires when the pointing device button is pressed over an element. Yes Yes
mouseup onmouseup Fires when the pointing device button is released over an element. Yes Yes
mouseover onmouseover Fires when the pointing device button is moved onto an element. Yes Yes
mousemove onmousemove Fires when the pointing device button is moved while it is over an element. Yes No
mouseout onmouseout Fires when the pointing device button is moved away from an element. Yes Yes
Keyboard keypress onkeypress Fires when a key on the keyboard is "clicked". A keypress is defined as a keydown and keyup on the same key. The sequence of these events is:
  • keydown
  • keyup
  • keypress
 Yes Yes
keydown onkeydown Fires when a key on the keyboard is pressed. Yes Yes
keyup onkeyup Fires when a key on the keyboard is released. Yes Yes
HTML frame/object load onload Fires when finishes loading all content within a document, including window, frame, object and image. No No
unload onunload Fires when removes all content from a window or frame. No No
abort onabort Fires when an object/image loading is stopped before completely loaded. Yes No
error onerror Fires when an object/image/frame cannot be loaded properly. Yes No
resize onresize Fires when a document view is resized. Yes No
scroll onscroll Fires when a document view is scrolled. Yes No
HTML form select onselect Fires when a user selects some text in a text field, including input and textarea. Yes No
change onchange Fires when a control loses the input focus and its value has been modified since gaining focus, including input, select and textarea. Yes No
submit onsubmit Fires when a form is submitted. Yes Yes
reset onreset Fires when a form is reset. Yes No
focus onfocus Fires when an element receives focus either via the pointing device or by tabbing navigation, including label, input, select, textarea, and button. No No
blur onblur Fires when an element loses focus either via the pointing device or by tabbing navigation, including label, input, select, textarea, and button. No No
User interface DOMFocusIn ondomfocusin Similar to HTML focus event, but can be applied to any focusable element. Yes No
DOMFocusOut ondomfocusout Similar to HTML blur event, but can be applied to any focusable element. Yes No
DOMActivate ondomactivate Similar to XUL command event. Fires when an element is activated, for instance, through a mouse click or a keypress. Yes Yes
Mutation DOMSubtreeModified onsubtreemodified Fire when the subtree is modified. Yes No
DOMNodeInserted onnodeinserted Fires when a node has been added as a child of another node. Yes No
NodeInsertedIntoDocument onnodeinsertedintodocument Fires when a node is being inserted into a document. No No
DOMAttrModified onattrmodified Fires when an attribute has been modified. Yes No
DOMCharacterDataModified oncharacterdatamodified Fires when the character data has been modified. Yes No

5.2 Setting Events in DOM Level 0

<input type="button" value="Click Me"
       onclick="if (window.numclicks) numclicks++; else numclicks=1;this.value='Click # ' + numclicks;"/>

<form>
<input id="b1" type="button" value="Press Me"/>
<script>
function plead() {
      document.getElementById("b1").value += ", please!";
}
function unplead() {
      document.getElementById("b1").value = "Press Me";
}
document.getElementById("b1").onmouseover = plead; //set to function
document.getElementById("b1").onmouseout = unplead; //set to function
</script>
</form>

5.2.1 Return Values

5.2.2 Event Handler Scope

<form>
<input id="b1" type="button" value="Click Me 1"
   onclick="alert(this.form.b2.value)"/>

<input id="b2" type="button" value="Click Me 2"
   onclick="alert(form.b1.value)"/>

<input id="b3" type="button" value="Click Me 3"
   onclick="alert(b4.value)"/>

<input id="b4" type="button" value="Click Me 4"
   onclick="alert(getElementById('b3').value)"/>
</form>

6 DOM Level 2 Event Handling

  1. Event starts at root of tree and proceed to its target during the capturing phase.
  2. All event handlers registered on the target are run.
  3. The event propagates back up the hierarchy during the bubbling phase.

6.1 Event Handler Registration

6.1.1 Event Types

load
The load event occurs when the DOM implementation finishes loading all content within a document, all frames within a FRAMESET, or an OBJECT element.
  • Bubbles: No
  • Cancelable: No
  • Context Info: None
unload
The unload event occurs when the DOM implementation removes a document from a window or frame. This event is valid for BODY and FRAMESET elements.
  • Bubbles: No
  • Cancelable: No
  • Context Info: None
abort
The abort event occurs when page loading is stopped before an image has been allowed to completely load. This event applies to OBJECT elements.
  • Bubbles: Yes
  • Cancelable: No
  • Context Info: None
error
The error event occurs when an image does not load properly or when an error occurs during script execution. This event is valid for OBJECT elements, BODY elements, and FRAMESET element.
  • Bubbles: Yes
  • Cancelable: No
  • Context Info: None
select
The select event occurs when a user selects some text in a text field. This event is valid for INPUT and TEXTAREA elements.
  • Bubbles: Yes
  • Cancelable: No
  • Context Info: None
change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.
  • Bubbles: Yes
  • Cancelable: No
  • Context Info: None
submit
The submit event occurs when a form is submitted. This event only applies to the FORM element.
  • Bubbles: Yes
  • Cancelable: Yes
  • Context Info: None
reset
The reset event occurs when a form is reset. This event only applies to the FORM element.
  • Bubbles: Yes
  • Cancelable: No
  • Context Info: None
focus
The focus event occurs when an element receives focus either via a pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
  • Bubbles: No
  • Cancelable: No
  • Context Info: None
blur
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
  • Bubbles: No
  • Cancelable: No
  • Context Info: None
resize
The resize event occurs when a document view is resized.
  • Bubbles: Yes
  • Cancelable: No
  • Context Info: None
scroll
The scroll event occurs when a document view is scrolled.
  • Bubbles: Yes
  • Cancelable: No
  • Context Info: None

6.1.2 Event Object

6.2 IE Events

6.3 Example: Dragging Document Elements

/**
 * Drag.js: drag absolutely positioned HTML elements.
 *
 * This module defines a single drag() function that is designed to be called
 * from an onmousedown event handler.  Subsequent mousemove events will
 * move the specified element. A mouseup event will terminate the drag.
 * If the element is dragged off the screen, the window does not scroll.
 * This implementation works with both the DOM Level 2 event model and the
 * IE event model.
 * 
 * Arguments:
 *
 *   elementToDrag:  the element that received the mousedown event or
 *     some containing element. It must be absolutely positioned.  Its 
 *     style.left and style.top values will be changed based on the user's
 *     drag.
 *
 *   event: the Event object for the mousedown event.
 **/
function drag(elementToDrag, event) {
    // The mouse position (in window coordinates)
    // at which the drag begins 
    var startX = event.clientX, startY = event.clientY;    

    // The original position (in document coordinates) of the
    // element that is going to be dragged.  Since elementToDrag is 
    // absolutely positioned, we assume that its offsetParent is the
    // document body.
    var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

    // Even though the coordinates are computed in different 
    // coordinate systems, we can still compute the difference between them
    // and use it in the moveHandler() function.  This works because
    // the scrollbar position never changes during the drag.
    var deltaX = startX - origX, deltaY = startY - origY;

    // Register the event handlers that will respond to the mousemove events
    // and the mouseup event that follow this mousedown event.  
    if (document.addEventListener) {  // DOM Level 2 event model
        // Register capturing event handlers
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
        // In the IE event model, we capture events by calling
        // setCapture() on the element to capture them.
        elementToDrag.setCapture();
        elementToDrag.attachEvent("onmousemove", moveHandler);
        elementToDrag.attachEvent("onmouseup", upHandler);
        // Treat loss of mouse capture as a mouseup event
        elementToDrag.attachEvent("onlosecapture", upHandler);
    }
    else {  // IE 4 Event Model
        // In IE 4 we can't use attachEvent() or setCapture(), so we set
        // event handlers directly on the document object and hope that the
        // mouse events we need will bubble up.  
        var oldmovehandler = document.onmousemove; // used by upHandler() 
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }

    // We've handled this event. Don't let anybody else see it.  
    if (event.stopPropagation) event.stopPropagation();  // DOM Level 2
    else event.cancelBubble = true;                      // IE

    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault();   // DOM Level 2
    else event.returnValue = false;                     // IE

    /**
     * This is the handler that captures mousemove events when an element
     * is being dragged. It is responsible for moving the element.
     **/
    function moveHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Move the element to the current mouse position, adjusted as
        // necessary by the offset of the initial mouse-click.
        elementToDrag.style.left = (e.clientX - deltaX) + "px";
        elementToDrag.style.top = (e.clientY - deltaY) + "px";

        // And don't let anyone else see this event.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }

    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a drag.
     **/
    function upHandler(e) {
        if (!e) e = window.event;  // IE Event Model

        // Unregister the capturing event handlers.
        if (document.removeEventListener) {  // DOM event model
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent) {  // IE 5+ Event Model
            elementToDrag.detachEvent("onlosecapture", upHandler);
            elementToDrag.detachEvent("onmouseup", upHandler);
            elementToDrag.detachEvent("onmousemove", moveHandler);
            elementToDrag.releaseCapture();
        }
        else {  // IE 4 Event Model
            // Restore the original handlers, if any
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }

        // And don't let the event propagate any further.
        if (e.stopPropagation) e.stopPropagation();  // DOM Level 2
        else e.cancelBubble = true;                  // IE
    }
}
Drag me

This is the content of the box which can be dragged by grabbing its title.

7 Forms

Username:
[1]		 Password:
[2]		 Input Events[3]
 [9]
[10]
[11]
Filename: [4]
My Computer Peripherals:
[5]DVD Writer
[5]Printer
[5]Card Reader		 My Web Browser:
[6]Firefox
[6]Internet Explorer
[6]Other
My Hobbies:[7]
 My Favorite Color:
[8]
Form Elements [1] Text [2] Password [3] Textarea [4] FileU [5] Checkbox
[6] Radio [7] Select (list) [8] Select (menu) [9] Button [10] Submit [11] Reset

7.1 Form Source Code

<div>
<form id="everything">      <!-- A one-of-everything HTML form... -->
 <table border="border" cellpadding="5">   <!-- in a big HTML table -->
   <tr>
     <td>Username:<br/>[1]<input type="text" name="username" size="15"/></td>
     <td>Password:<br/>[2]<input type="password" name="password" size="15"/></td>
     <td rowspan="4">Input Events[3]<br/>
       <textarea name="textarea" rows="20" cols="28"></textarea></td>
     <td rowspan="4" align="center" valign="center">
       [9]<input type="button" value="Clear" name="clearbutton"/><br/>
       [10]<input type="submit" name="submitbutton" value="Submit"/><br/>
       [11]<input type="reset" name="resetbutton" value="Reset"/></td></tr>
   <tr>
     <td colspan="2">
       Filename: [4]<input type="file" name="file" size="15"/></td></tr>
   <tr>
     <td>My Computer Peripherals:<br/>
       [5]<input type="checkbox" name="extras" value="burner"/>DVD Writer<br/>
       [5]<input type="checkbox" name="extras" value="printer"/>Printer<br/>
       [5]<input type="checkbox" name="extras" value="card"/>Card Reader</td>
     <td>My Web Browser:<br/>
       [6]<input type="radio" name="browser" value="ff"/>Firefox<br/>
       [6]<input type="radio" name="browser" value="ie"/>Internet Explorer<br/>
       [6]<input type="radio" name="browser" value="other"/>Other</td></tr>
   <tr>
     <td>My Hobbies:[7]<br/>
       <select multiple="multiple" name="hobbies" size="4">
         <option value="programming">Hacking JavaScript</option>
         <option value="surfing">Surfing the Web</option>
         <option value="caffeine">Drinking Coffee</option>
         <option value="annoying">Annoying my Friends</option>
       </select></td>
     <td align="center" valign="center">My Favorite Color:<br/>[8]
       <select name="color">
         <option value="red">Red</option> <option value="green">Green</option>
         <option value="blue">Blue</option>  <option value="white">White</option>
         <option value="violet">Violet</option>  <option value="peach">Peach</option>
       </select></td></tr>
 </table>
</form>

<div align="center">        <!-- Another table--the key to the one above -->
  <table border="4" bgcolor="pink" cellspacing="1" cellpadding="4">
    <tr>
      <td align="center"><b>Form Elements</b></td>
      <td>[1] Text</td>  <td>[2] Password</td>  <td>[3] Textarea</td>
      <td>[4] FileU</td> <td>[5] Checkbox</td></tr>
    <tr>
      <td>[6] Radio</td>  <td>[7] Select (list)</td>
      <td>[8] Select (menu)</td>  <td>[9] Button</td>
      <td>[10] Submit</td>  <td>[11] Reset</td></tr>
  </table>
</div>

<script src="18-1.js"></script>
</div>

// This generic function appends details of an event to the big Textarea
// element in the form above. It is called from various event handlers.
function report(element, event) {
    if ((element.type == "select-one") || (element.type == "select-multiple")){
        value = " ";
        for(var i = 0; i < element.options.length; i++)
            if (element.options[i].selected) 
                value += element.options[i].value + " ";
    }
    else if (element.type == "textarea") value = "...";
    else value = element.value;
    var msg = event + ": " + element.name + ' (' + value + ')\n';
    var t = element.form.textarea;
    t.value = t.value + msg;
}

// This function adds a bunch of event handlers to every element in a form.
// It doesn't bother checking to see if the element supports the event handler,
// it just adds them all. Note that the event handlers call report().
// We're defining event handlers by assigning functions to the
// properties of JavaScript objects rather than by assigning strings to
// the attributes of HTML elements.
function addhandlers(f) {
    // Loop through all the elements in the form
    for(var i = 0; i < f.elements.length; i++) {
        var e = f.elements[i];
        e.onclick = function() { report(this, 'Click'); }
        e.onchange = function() { report(this, 'Change'); }
        e.onfocus = function() { report(this, 'Focus'); }
        e.onblur = function() { report(this, 'Blur'); }
        e.onselect = function() { report(this, 'Select'); }
    }

    // Define some special-case event handlers for the three buttons:
    f.clearbutton.onclick = function() {
        this.form.textarea.value=''; report(this,'Click');
    }
    f.submitbutton.onclick = function () {
        report(this, 'Click'); return false;
    }
    f.resetbutton.onclick = function() {
        this.form.reset(); report(this, 'Click'); return false;
    }
}
// Finally, activate our form by adding all possible event handlers!
addhandlers(document.getElementById("everything"));

8 Cookies

9 Getting Data From Server

9.1 XMLHttpRequest

9.1.1 Creating an XMHHttpRequest Object

// This is a list of XMLHttpRequest creation factory functions to try
HTTP._factories = [
    function() { return new XMLHttpRequest(); },
    function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
    function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
];

// When we find a factory that works, store it here
HTTP._factory = null;

// Create and return a new XMLHttpRequest object.
// 
// The first time we're called, try the list of factory functions until
// we find one that returns a nonnull value and does not throw an
// exception.  Once we find a working factory, remember it for later use.
//
HTTP.newRequest = function() {
    if (HTTP._factory != null) return HTTP._factory();

    for(var i = 0; i < HTTP._factories.length; i++) {
        try {
            var factory = HTTP._factories[i];
            var request = factory();
            if (request != null) {
                HTTP._factory = factory;
                return request;
            }
        }
        catch(e) {
            continue;
        }
    }

    // If we get here, none of the factory candidates succeeded,
    // so throw an exception now and for all future calls.
    HTTP._factory = function() {
        throw new Error("XMLHttpRequest not supported");
    }
    HTTP._factory(); // Throw an error
}

9.1.2 Submitting a Request

9.1.3 Synchronous Response

if (request.status == 200) {
  //we got it!
    alert(request.responseText);
}
else {
    alert ("ERROR " + request.status);
}

9.1.4 Asynchronous Response

var request = HTTP.newRequest();

//Register event handler
request.onreadystatechange = function() {
   if (request.readyState == 4) { //if request is finished
      if (request.status == 200) // if it was successful
       alert(request.responseText);
   }
}

request.open("GET", url);

request.send(null);

9.1.5 Security

9.2 Examples

/**
 * Use XMLHttpRequest to fetch the contents of the specified URL using
 * an HTTP GET request.  When the response arrives, pass it (as plain
 * text) to the specified callback function.
 * 
 * This function does not block and has no return value.
 */
HTTP.getText = function(url, callback) {
    var request = HTTP.newRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200)
            callback(request.responseText);
    }
    request.open("GET", url);
    request.send(null);
};

HTTP.getXML = function(url, callback) {
    var request = HTTP.newRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200)
            callback(request.responseXML);
    }
    request.open("GET", url);
    request.send(null);
};
HTTP.getText('http://jmvidal.cse.sc.edu/webapps/index.html',alert) [39]

9.2.1 HTTP Post

/**
 * Send an HTTP POST request to the specified URL, using the names and values
 * of the properties of the values object as the body of the request.
 * Parse the server's response according to its content type and pass
 * the resulting value to the callback function.  If an HTTP error occurs,
 * call the specified errorHandler function, or pass null to the callback
 * if no error handler is specified.
 **/
HTTP.post = function(url, values, callback, errorHandler) {
    var request = HTTP.newRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                callback(HTTP._getResponse(request));
            }
            else {
                if (errorHandler) errorHandler(request.status,
                                               request.statusText);
                else callback(null);
            }
        }
    }

    request.open("POST", url);
    // This header tells the server how to interpret the body of the request
    request.setRequestHeader("Content-Type",
                             "application/x-www-form-urlencoded");
    // Encode the properties of the values object and send them as
    // the body of the request.
    request.send(HTTP.encodeFormData(values));
};

/**
 * Encode the property name/value pairs of an object as if they were from
 * an HTML form, using application/x-www-form-urlencoded format
 */
HTTP.encodeFormData = function(data) {
    var pairs = [];
    var regexp = /%20/g; // A regular expression to match an encoded space

    for(var name in data) {
        var value = data[name].toString();
        // Create a name/value pair, but encode name and value first
        // The global function encodeURIComponent does almost what we want,
        // but it encodes spaces as %20 instead of as "+". We have to
        // fix that with String.replace()
        var pair = encodeURIComponent(name).replace(regexp,"+") + '=' +
            encodeURIComponent(value).replace(regexp,"+");
        pairs.push(pair);
    }

    // Concatenate all the name/value pairs, separating them with &
    return pairs.join('&');
};

9.2.2 Handling a JSON Response

HTTP._getResponse = function(request) {
    // Check the content type returned by the server
    switch(request.getResponseHeader("Content-Type")) {
    case "text/xml":
        // If it is an XML document, use the parsed Document object
        return request.responseXML;

    case "text/json":
    case "application/json":
    case "text/javascript":
    case "application/javascript":
    case "application/x-javascript":
        // If the response is JavaScript code, or a JSON-encoded value,
        // call eval() on the text to "parse" it to a JavaScript value.
        // Note: only do this if the JavaScript code is from a trusted server!
        return eval(request.responseText);

    default:
        // Otherwise, treat the response as plain text and return as a string
        return request.responseText;
    }
};

9.2.3 Timing Out a Request

/**
 * Send an HTTP GET request for the specified URL.  If a successful
 * response is received, it is converted to an object based on the
 * Content-Type header and passed to the specified callback function.
 * Additional arguments may be specified as properties of the options object.
 *
 * If an error response is received (e.g., a 404 Not Found error),
 * the status code and message are passed to the options.errorHandler
 * function.  If no error handler is specified, the callback
 * function is called instead with a null argument.
 * 
 * If the options.parameters object is specified, its properties are
 * taken as the names and values of request parameters.  They are
 * converted to a URL-encoded string with HTTP.encodeFormData() and
 * are appended to the URL following a '?'.
 * 
 * If an options.progressHandler function is specified, it is
 * called each time the readyState property is set to some value less
 * than 4.  Each call to the progress handler function is passed an
 * integer that specifies how many times it has been called.
 *
 * If an options.timeout value is specified, the XMLHttpRequest
 * is aborted if it has not completed before the specified number
 * of milliseconds have elapsed.  If the timeout elapses and an
 * options.timeoutHandler is specified, that function is called with
 * the requested URL as its argument.
 **/
HTTP.get = function(url, callback, options) {
    var request = HTTP.newRequest();
    var n = 0;
    var timer;
    if (options.timeout)
        timer = setTimeout(function() {
                               request.abort();
                               if (options.timeoutHandler)
                                   options.timeoutHandler(url);
                           },
                           options.timeout);

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            if (timer) clearTimeout(timer);
            if (request.status == 200) {
                callback(HTTP._getResponse(request));
            }
            else {
                if (options.errorHandler)
                    options.errorHandler(request.status,
                                         request.statusText);
                else callback(null);
            }
        }
        else if (options.progressHandler) {
            options.progressHandler(++n);
        }
    }

    var target = url;
    if (options.parameters)
        target += "?" + HTTP.encodeFormData(options.parameters)
    request.open("GET", target);
    request.send(null);
};

URLs

  1. JavaScript, http://jmvidal.cse.sc.edu/lib/flanagan06a.html
  2. taken, http://www.davidflanagan.com/javascript5/
  3. wikipedia:Document_Object_Model, http://www.wikipedia.org/wiki/Document_Object_Model
  4. wikipedia:Cross-site_scripting, http://www.wikipedia.org/wiki/Cross-site_scripting
  5. location.href, javascript:alert(location.href)
  6. location.protocol, javascript:alert(location.protocol)
  7. location.host, javascript:alert(location.host)
  8. location.pathname, javascript:alert(location.pathname)
  9. location.search, javascript:alert(location.search)
  10. location='index.xml', javascript:location='index.xml'
  11. 'w=' + Geometry.getViewportWidth() + ' h='+ Geometry.getViewportHeight(), javascript:alert('w=' + Geometry.getViewportWidth() + ' h='+ Geometry.getViewportHeight())
  12. alert(browser);, javascript:alert(browser)
  13. window.open(), javascript:window.open()
  14. alert('msg'), javascript:alert('msg')
  15. confirm('msg'), javascript:confirm('msg')
  16. prompt('msg'), javascript:prompt('msg')
  17. Class page, http://jmvidal.cse.sc.edu/webapps/
  18. listlinks(document), javascript:listlinks(document)
  19. DOM Level 1, http://www.w3.org/TR/REC-DOM-Level-1
  20. DOM Level 2, http://www.w3.org/TR/DOM-Level-2-Core/
  21. DOM Level 3, http://www.w3.org/TR/DOM-Level-3-Core/
  22. alert('This document has ' + countTags(document) + ' tags.', javascript:alert('This document has ' + countTags(document) + ' tags.')
  23. getText(document), javascript:alert(getText(document))
  24. document.getElementsByTagName('li'), javascript:alert(document.getElementsByTagName('li'))
  25. document.getElementById('firstline'), javascript:alert(document.getEle