HTML and CSS Reference
In-Depth Information
5. Create a function named makeKeywordbox() . The purpose of this function is to cre-
ate a list of keywords drawn from the dfn elements in the historic document. There
are no parameters for this function. Add the following commands:
a. Declare a variable named historydoc that references the element with the id doc .
b. Create an element node named keywordbox for an aside element. Set the id of
the element to keywords .
c. Create an element node named keywordboxtitle containing an h1 element. Set
the content of the h1 element to the text string Keywords .
d. Append the keywordBoxTitle node to the keywordBox node.
e. Create an element node named ullist containing a ul element. Append ulList as
a second child of the keywordBox node. This unordered list will store the list of
keywords in the document.
f. Call the makeElemList() function using the text string dfn as the parameter value.
Store the array returned by the function in a variable named keywords .
g. Write a for loop that loops through all of the items in the keywords array that
you just created. The purpose of this for loop is to create an unordered list of
keywords, each one linked to a specific keyword in the document. For each item
in the array, do the following: (i) create an element node named newlistitem that
contains an li element; (ii) create an element node named newlink that contains
a hypertext ( a ) element; (iii) set the innerHTML content of newLink to the value
of the current item in the keywords array (Hint: Use the reference keywords[ i ] ,
where i is the value of the counter variable in the for loop.); (iv) create a vari-
able named linkid whose value is equal to the value returned by the setElemId()
function, using dfn and keywords[i] as the parameter values; (v) change the href
attribute of newLink to # id , where id is the value of the linkId variable; and
(vi) append newLink to newListItem , and append newListItem to ulList .
h. After the for loop has completed, insert the keywordBox node before the third
child node of the historyDoc node.
6. At the top of the file, below the initial comments, add a command to run the
makeKeyWordBox() function when the page is loaded by the browser.
7. Save your changes to the file, and then load fed10.htm in your Web browser. Verify
that a box containing a list of keywords is displayed on the Web page with each
entry in the list linked to a specific keyword within the historic document.
8. Return to the fed10.htm file in your text editor. Add the title attribute value web
to the link element for the fedpaper.css style sheet, turning the style sheet into a
preferred sheet. Add the disabled attribute to the link element for the print.css
style sheet.
9. Scroll down to the two buttons within the styleOptions div element. Add an
onclick event attribute to the first button, running the changeStyle() function when
the button is clicked. Use the text string web as the parameter value. Do the same
for the second button, using the text string print as the parameter value. (Hint: Be
sure to enclose your text strings in quotation marks.)
10. Save your changes and then go to the styles.js file in your text editor. Create the
changestyle() function to switch from one style sheet to another. Use the
changeStyle() function from the tutorial case as a model for your function.
11. Document your work with descriptive comments throughout your code.
12. Save your changes to the file, and then reload fed10.htm in your Web browser.
Verify that you can switch styles between the Web view and Print view by clicking
the form buttons on the page.
13. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
Search WWH ::




Custom Search