New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 14 Case 2 JSWorks

$ 25

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

JSWorks Jorge Soto is the owner and administrator of JSWorks, a Web site containing JavaScript tutorials, tips, and specialized apps. Jorge is working on a multipage tutorial concerning the creation and use of document nodes. You are helping Jorge maintain his Web site. You’ve volunteered to work on his Web page that describes the appearance of the document node tree. Jorge would like you to include a node tree that is based on the article he’s writing so that visitors to his site can see the complete appearance of the node tree for a sample HTML fragment. Figure 14-67 shows a preview of the Web page you’ll complete for Jorge.

The JavaScript program you’ll design will need to use recursion to navigate through the entire structure of Jorge’s article. As it proceeds through the article, it will record each element, attribute, and text node and display those nodes in a nested list alongside the article text. The CSS styles for the nested list already have been created for you; your only job will be to generate the HTML code of the nested list. Jorge also wants your code to keep a running count of the total number of nodes, element nodes, attributes, and text nodes, including text nodes containing only white space.
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.
2. Go to the nodes.htm file in your text editor and add a link element to connect the document to the tree.css style sheet. Also add a script element to connect the file to the tree.js JavaScript file.
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 <elem where elem is the node name of the element specified in the elemNode parameter.
d. Next you’ll examine all of the attribute nodes for the element specified by the elemNode parameter. Create a for loop to go through the nodes in the attributes collection for the elemNode parameter. Each time through the loop increase the value of the nodeCount and attCount variables by 1. Also add the following text string to the value of the elemText variable att=’value’
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 </h1>.
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.
10. Use comments to document your JavaScript code throughout the program.
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.

95 in stock

SKU: DHTML5TUT14CASE2JSWORKS Category:

Description

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

JSWorks Jorge Soto is the owner and administrator of JSWorks, a Web site containing JavaScript tutorials, tips, and specialized apps. Jorge is working on a multipage tutorial concerning the creation and use of document nodes. You are helping Jorge maintain his Web site. You’ve volunteered to work on his Web page that describes the appearance of the document node tree. Jorge would like you to include a node tree that is based on the article he’s writing so that visitors to his site can see the complete appearance of the node tree for a sample HTML fragment. Figure 14-67 shows a preview of the Web page you’ll complete for Jorge.

The JavaScript program you’ll design will need to use recursion to navigate through the entire structure of Jorge’s article. As it proceeds through the article, it will record each element, attribute, and text node and display those nodes in a nested list alongside the article text. The CSS styles for the nested list already have been created for you; your only job will be to generate the HTML code of the nested list. Jorge also wants your code to keep a running count of the total number of nodes, element nodes, attributes, and text nodes, including text nodes containing only white space.
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.
2. Go to the nodes.htm file in your text editor and add a link element to connect the document to the tree.css style sheet. Also add a script element to connect the file to the tree.js JavaScript file.
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 d. Next you’ll examine all of the attribute nodes for the element specified by the elemNode parameter. Create a for loop to go through the nodes in the attributes collection for the elemNode parameter. Each time through the loop increase the value of the nodeCount and attCount variables by 1. Also add the following text string to the value of the elemText variable att=’value’
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.
10. Use comments to document your JavaScript code throughout the program.
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.

Reviews

There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.