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.