Working with Document Nodes and Styles - HTML, CSS, and Dynamic HTML - page 1017

Norene already has provided the source document and external style sheets that
format the appearance of the document and the keyword list for both the Web and Print
views. You'll write the application that creates the content of the keyword list.
Complete the following:
1. Use your text editor to open the fed10txt.htm , keytxt.js , and stylestxt.js files from
the tutorial.14\review folder. Enter your name and the date in the comment sec-
tion of each file, and then save the files as fed10.htm , keywords.js , and styles.js ,
respectively.
2. Go to the fed10.htm file in your text editor and study the contents of the file, pay-
ing attention to the style sheets assigned to this document and the structure of the
page contents. Add script elements to attach this document to the keywords.js and
styles.js files. Add a link element to link the file to the keywords.css style sheet file
as a persistent style sheet, and then save your changes to the file.
3. Go to the keywords.js file in your text editor. Create a function named makeelemlist() .
The purpose of this function is to return an array containing a sorted list of the contents
of elements with a common tag name. You'll use this function later to create a list of
the keywords in the document. The function has a single parameter named elem that
contains the text of the tag name. Add the following commands to the function:
a. Declare the elemlist variable containing the collection of elements whose tag
name equals the value of the elem parameter.
b. Declare a new array variable named elemtextarr . Do not specify any contents for
the array yet.
c. Create a for loop that goes through each of the objects in the elemList object col-
lection. For each object, store the innerHTML content of the element in the cor-
responding elemTextArr array item.
d. Sort the entries in the elemTextArr array in ascending alphabetical order.
e. Return the contents of the elemTextArr array.
4. Create a function named setelemid() . The purpose of this function is to create and
return id values for elements in the document that match a specific tag name and
element content. You'll use this function later to insert matching id values between
the items in the keyword list and the keywords found in the document. The function
has two parameters: elem , which contains the text of the tag name, and elemtext ,
which contains the text of the element content. Add the following commands to the
function:
a. Declare the elemlist variable containing the collection of elements whose tag
name equals the value of the elem parameter.
b. Create a for loop that goes through each of the objects in the elemList object
collection.
c. Within the for loop, test whether the innerHTML property of each item in the
elemList object collection equals the value of the elemText parameter. If it does,
test whether the id of the object is equal to an empty text string. If the id attribute
is missing, create a variable named elemid equal to the text string keyword i ,
where i is the value of the counter variable in the for loop, and set the id of the
object to the value of the elemId variable. If the id is not missing, set the value of
the elemId variable to the value of the id attribute of the object.
d. After the for loop has finished, return the value of the elemId variable. This is the
id that has been assigned to the element in the document.