New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 14 Case 2 JSWorks
Data Files needed for this Case Problem: js.css, jslogo.png, modernizr-1.5.js, nodestxt.htm, tree.css, treetxt.js
Complete the following:
1. Using your text editor, open nodestxt.htm and treetxt.js from the tutorial.14\case2 folder. Enter your name and the date in the comment section, and then save the files as nodes.htm and tree.js, respectively.
3. Take some time to study the contents and structure of the document and then close the file, saving your changes.
4. Go to the tree.js file in your text editor. Declare the following global variables: nodeCount to keep a running count of all of the nodes in the source document; elemCount to count the element nodes; attCount to count the attribute nodes; textCount to count the text nodes; and wsCount to count the text nodes containing white space only. Set the initial value of all of these variables to 0.
5. Insert a command to run the setup() function when the page is initially loaded by the browser.
6. Create the writeElemLI() function. The purpose of this function is to create a single list item for the node tree diagram based on the contents of an element node. The structure of the list item is shown in Figure 14-68.
The function has two parameters: elemNode, which represents the element node from the source document on which the list item is based, and nestedList, which represents the nested list that the list item will be appended to. Add the following commands to the function:
a. Create a list item element named liElem containing the text string +–.
b. Create a span element named spanElem. Set the class attribute of the span element to elemLI. (Hint: Use the className property to set the value of the class attribute.)
c. Declare a variable named elemText setting its initial value to the text string
where att is the node name of the attribute node and value is the node value of the attribute node.
e. After the for loop completes, append the text string > to the value of the elemText variable.
f. Create a new text node named elemTextNode containing the text of the elemText variable.
g. Append elemTextNode to spanElem; append spanElem to liElem; and finally, append liElem to nestedList.
7. Create the writeTextLI() function. The purpose of this function is to create a single list item for the node tree diagram based on the contents of a text node. The structure of the list item will be one of the two structures shown in Figure 14-69.
The function has two parameters: textNode, which represents the text node from the source document on which the list item is based, and nestedList, which represents the nested list that the list item will be appended to. Add the following commands to the function:
a. Create the liElem variable for a list item element node containing the text string +–.
b. Create the spanElem variable for a span element node.
c. Store the node value of the textNode parameter in the variable textString.
d. Jorge has provided a function named isWhiteSpaceNode() to determine whether
a text node represents white space or not. Call the isWhiteSpaceNode() function using textString as the parameter value.
e. If the isWhiteSpaceNode() function returns the value true, then: i) increase the value of the wsCount variable by 1; ii) set the class name of spanElem to wsLI; and iii) set the inner HTML of spanElem to the text string #text.
f. If the isWhiteSpaceNode() function returns the value false, then: i) set the class name of spanElem to textLI; and ii) set the inner HTML of spanElem to the value of the nodeValue property for the textNode parameter.
g. Append the spanElem node to the liElem node, and then append the liElem node to the nestedList parameter.
8. Create the makeTree() function. The purpose of this function is to recursively generate all of the nested lists contained in the node tree diagram. The function has two parameters: sourceNode, which represents the current node in the source document being added to the node tree diagram, and nestedList, which represents the nested list in the tree diagram that is being written. Add the following commands to the function:
a. Increase the value of the nodeCount variable by 1.
b. Using the nodeType property, determine whether sourceNode represents an element node or a text node. If it represents an element node, increase the value of the elemCount variable by 1 and call the writeElemLI() function using sourceNode and nestedList as parameter values. If it represents a text node, increase the value of the textCount variable by 1 and call the writeTextLI() function using sourceNode and nestedList as parameter values.
c. Use the childNodes.length property value to determine whether sourceNode contains any child nodes. If it does, then do the following: i) declare the newList variable containing an element node for the ol element; ii) store the text string | in newList; iii) loop through all of the child nodes for sourceNode, and for each child node call the makeTree() function using the child node and newList as the values for the sourceNode and nestedList parameters; and iv) after the loop has finished, append newList to nestedList.
9. Create the setup() function. The purpose of this function is to set up the node tree diagram and report the results. The function has no parameters. Add the following commands to the function:
a. Declare the sourceNode variable referencing the article element with the id main in the current document.
b. Declare the treeBox variable containing an aside element node. Set the id of treeBox to treeBox and set the innerHTML property to h1 Node Tree
c. Declare the newList variable containing an ol element node, and then call the makeTree() function using sourceNode and newList as parameter values.
d. Append newList as a child of treeBox.
e. Append treeBox as a child of the section element with the id main.
f. Using the innerHTML property, display the values of the nodeCount, elemCount, attCount, textCount, and wsCount variables within the span elements whose ids are totalNodes, elemNodes, attNodes, textNodes, and wsNodes, respectively.
11. Save your changes to the file, and then load nodes.htm in your Web browser. Verify that a node tree similar to that shown in Figure 14-67 is displayed alongside Jorge’s article, and that the article contains 247 total nodes, 99 element nodes, 8 attribute nodes, and 140 text nodes, of which 56 are white space nodes. (Note: Safari running under iOS may report 57 white space nodes.)
12. Submit your completed files to your instructor, in either printed or electronic form, as requested.