Week 4 assignments

Well, here we are with another week’s worth of work. Lucky for me, it wasn’t so hard this time.

Question 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?

The first innovation is related to the processing of images. Basically, under the original fetch-parse-flow-paint workflow, if the parser came across an image tag, it had no way of determining its size. It would therefore stop and download the image, wait until the whole image was downloaded, then resume parsing the rest of the document. If there were multiple images, this could take some time–especially if the user had a dial-up modem–and nothing would show up on the screen in the meantime. (I actually remember this; yes, I am that old!).

Netscape came along and changed that by adding a setup so that it could put a placeholder where the image was expected to be, and while it did have to go back to the fetch engine to get the data, it could at least put something on the page so that the user could get the feeling that the page was downloading. This allowed the browser to simultaneously fetch and display data, and then when the data were all downloaded, the paint engine could then put everything together. The irony is that it actually took longer to render pages this way, but at the same time it made the experience more enjoyable.

The second innovation was to make a change to the flow to add events, which would in turn call on scripts. While there was still the fetch-parse-flow-paint chain of events going on, these events could range from ones sent by the fetch engine to a timer event that would fire off after a designated interval to events triggered by input from the user. These events could then run scripts that could go back to the fetch engine and get more data for the page.

This turned out to be a major paradigm shift in developing web pages. Before, a page was a static document, like words on a page–unchangeable once in print. With this innovation, a page could change on the fly, reacting to user input, timed events, or data being sent to the server. This is what allows services like Twitter and Facebook to do what they do.

Question 2: What are the roles of ‘name’ and ‘id’ attributes in HTML tags? What is an appropriate use of both?

Name and id attributes were originally interchangeable in the browser, but this is no longer the case. Now, id attributes are meant to be completely unique in the literal sense: there can be only one id of a particular kind on the web page. This often gets used in css for certain design elements that are meant to be unique to a particular page. It is also useful for a script to find a single element on a page reliably.

Name attributes are used in several other cases. First, they’re used in forms–the name data ends up getting sent to the server when a form is submitted. For forms, names have to be unique or else they will clash with one another, and you will end up with the computer trying to decide which form to submit.

But another way they can be used is to group certain elements together such as radio buttons.

For those who don’t know, a radio button acts like the buttons on a car radio that pick the station. Since you can’t listen to more than one station at once, pushing one radio button stops the radio from receiving one frequency so that it can receive another. Radio buttons in HTML forms are useful in similar situations where only one choice is possible: yes/no, male/female, student/parent/teacher/administrator. In order to group these buttons together, they all have to have the same name.

However, they also must have some way to distinguish one from another so that the form knows which one the user selected. This is where the id attribute comes in; it shows which button was selected.

Question 3: Which pointers does each node in the DOM tree typically have?

They can be put into three broad categories: parent, child, and sibling.  A parent is a node that holds other nodes. For example, a paragraph can have several blocks of text that are block-quoted, bolded, emphasized. These blocks are children of the parent paragraph. The parent in turn is also a parent of another node, be it a span, a division (<div>), or the body of the document itself.  From there, within that paragraph, the blocks that are bolded, emphasized or spanned are siblings of one another; they all belong to the same parent.

There are more detailed divisions of these particular pointers, too. While something can only have one parent (with the exception of the document itself, which is the “master parent”, so to speak). While not all nodes have children, for those that do, the children are held in a special array-like object that allows the programmer to access them at will. Often, the programmer will only want to access either the first, or more rarely the last child, so there are special pointers called firstChild and lastChild. Furthermore, one can also access siblings more easily using the nextSibling or (less frequently) the previousSibling pointers, which move along the line of children belonging to a parent.

Question 4: Given a node object from a DOM tree, how do we determine if it is a text node or a regular node?

Once you find a node, the property nodeName will tell you what the node’s name is. If the node name is an element, then it will have the same name as the element’s tag name. For example, P for paragraph, EM for emphasized, and so on. However, if it’s a text node, accessing the nodeName property will return #text.

Homework:

  1. Download the source for the web page ‘http://www.useit.com/about/nographics.html&#8217;. 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).
  2. 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.
  3. 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.

I decided to kill all three birds with one stone, so to speak. First, I added the following to the bottom of the HTML page:

<p>
<input name="alert_text_nodes" type="button" value="Alert text nodes" onClick="alertTextNodes()">
<input name="show_text_nodes" type="button" value="Show text nodes in span" onClick="showTextNodes()">
<input name="bold_output" type="button" value="Make it bold!" onClick="boldText()"><br />
<span id="text_node_count"> </span>

From there, I created the following scripts:

function walkTheDOM(node, func) {
 func(node);
 node = node.firstChild;
 while(node) {
 walkTheDOM(node, func);
 node = node.nextSibling;
 }
}
function countTextNodes() {
 var textNodes = 0;
 walkTheDOM(document.body, function(node) {
 if (node.nodeName === "#text") {
 textNodes++;
 }
 });
 return textNodes;
}

function alertTextNodes() {
 var textNodes = countTextNodes();
 alert ("This document has " + textNodes + " text nodes.");
}

function showTextNodes() {
 var textNodes = countTextNodes(),
 output = document.createTextNode("This document contains " + textNodes + " text nodes"),
 target = document.getElementById('text_node_count');
 //to prevent the user from clicking over and over again to add more stuff to the page
 if (!target.firstChild) {
 target.appendChild(output);
 }
}
function boldText() {
 var output = document.getElementById('text_node_count');
 output.style.fontWeight = 'bold';
}

This stuff is going to be really useful, because I’ve always wanted to figure out how to add stuff to a document on the fly, as well as change the style properties of things like the backgrounds of cell rows. As Butthead would often say to Beavis: “This is gonna be cool!”;

Advertisements
  1. #1 by i82much on February 23, 2011 - 3:31 am

    Very very good blog post. I was missing that second point, about the pages being able to have scripts which could in turn trigger a refresh of the page.

    I also really like your tree walking code. I did it extremely similarly, but I couldn’t find a way to avoid using a global variable for the count until I saw your example (I was using code like the following: http://jsfiddle.net/zxDCV/2/). Very neat.

  1. JS 101 Week 4 – Intro to the DOM « Developmentality

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: