Skip to main content

Ivan Teoh

Something personal yet public

Javascript: 101 Week 4

Since track 2 is the subset for track 1 in week 4, so we combine them both to this post. On this week, beside watching 'An Incovenient API - The Theory of the DOM' as below by Douglas Crockford, we also need to reading these articles below on understanding on DOM.

Reflection

  1. There were two key innovations to the original (fetch-parse-flow-paint) linear workflow that the Mosaic browser used to render web pages. One allowed for a perception of faster rendering, and the other allowed for us to use AJAX. Explain both? This article, The Inconvenient Truth on website performance, do explain clearly.
  2. What are the roles of 'name' and 'id' attributes in HTML tags? What is an appropriate use of both? From bytes's forum, Douglas Crockford said "name is used to annotate POST data in forms. id is used to identify elements for scripting and styling. Some browsers used them interchangeably, which is confusing."
  3. Which pointers does each node in the DOM tree typically have? From Aticle: Traversing the DOM, each node in the DOM tree typically point to 'parent', 'child' and 'sibling'.
  4. Given a node object from a DOM tree, how do we determine if it is a text node or a regular node? From Aticle: Traversing the DOM, a text node’s nodeName property is "#text".

Homework

  • Download the source for the web page 'http://www.useit.com/about/nographics.html'. In the source page itself, write a Javascript function which counts the number of text nodes in the document and shows the count in an alert dialogue. You can choose how you want to trigger the function (through a button click, link click, or any other event).

    172-homework1.js (Source)

    // from Douglas Crockford's video 'An Incovenient API - The Theory of the DOM'
    // http://video.yahoo.com/watch/111582/992708
    function walkTheDOM(node, func) {
        func(node);
        node = node.firstChild;
        while (node) {
            walkTheDOM(node, func);
            node = node.nextSibling;
        }
    }
    
    function getTextNode() {
        var result = [];
        // http://forums.htmlhelp.com/index.php?showtopic=5173
        var someElementRef = document.getElementsByTagName('body')[0];
        // remove all the spaces and new lines
        someElementRef.innerHTML = someElementRef.innerHTML.replace(
          /\B\s\B|[\n\r\t]/g, '');
        walkTheDOM(someElementRef, function(node) {
            var nodeName = node.nodeName;
            if (nodeName === '#text') {
                result.push(node);
            }
        });
        return result;
    }
    
    alert(getTextNode().length);
    
  • Change the example above so that instead of displaying the count in an alert dialogue, it is displayed in a span tag in the HTML page itself.

    172-homework2.js (Source)

    // from Douglas Crockford's video 'An Incovenient API - The Theory of the DOM'
    // http://video.yahoo.com/watch/111582/992708
    function walkTheDOM(node, func) {
        func(node);
        node = node.firstChild;
        while (node) {
            walkTheDOM(node, func);
            node = node.nextSibling;
        }
    }
    
    function getTextNode() {
        var result = [];
        // http://forums.htmlhelp.com/index.php?showtopic=5173
        var someElementRef = document.getElementsByTagName('body')[0];
        // remove all the spaces and new lines
        someElementRef.innerHTML = someElementRef.innerHTML.replace(
          /\B\s\B|[\n\r\t]/g, '');
        walkTheDOM(someElementRef, function(node) {
            var nodeName = node.nodeName;
            if (nodeName === '#text') {
                result.push(node);
            }
        });
        return result;
    }
    
    var total = getTextNode().length;
    var child = document.createTextNode(total);
    var parent = document.createElement('span');
    parent.appendChild(child);
    document.getElementsByTagName('body')[0].lastChild.appendChild(parent);
    
  • Add a link besides the button, such that when the link is click, it changes the style on the span tag to make it's contents bold.

    172-homework3.js (Source)

    // from Douglas Crockford's video 'An Incovenient API - The Theory of the DOM'
    // http://video.yahoo.com/watch/111582/992708
    function walkTheDOM(node, func) {
        func(node);
        node = node.firstChild;
        while (node) {
            walkTheDOM(node, func);
            node = node.nextSibling;
        }
    }
    
    function getTextNode() {
        var result = [];
        // http://forums.htmlhelp.com/index.php?showtopic=5173
        var someElementRef = document.getElementsByTagName('body')[0];
        // remove all the spaces and new lines
        someElementRef.innerHTML = someElementRef.innerHTML.replace(
          /\B\s\B|[\n\r\t]/g, '');
        walkTheDOM(someElementRef, function(node) {
            var nodeName = node.nodeName;
            if (nodeName === '#text') {
                result.push(node);
            }
        });
        return result;
    }
    
    // total is not include the newly elements
    var total = getTextNode().length;
    var child = document.createTextNode(total);
    var parent = document.createElement('span');
    parent.setAttribute('id','special_span');
    parent.appendChild(child);
    document.getElementsByTagName('body')[0].lastChild.appendChild(parent);
    
    var bold = document.createTextNode('bold');
    var link = document.createElement('a');
    link.setAttribute('href','#');
    link.setAttribute('onclick',
    'document.getElementById("special_span").innerHTML="<strong>"' +
    '+document.getElementById("special_span").innerHTML+"</strong>"');
    link.appendChild(bold);
    document.getElementsByTagName('body')[0].appendChild(link);
    

Comments

Comments powered by Disqus