You will create the page linked to here using a JavaScript. You should not only duplicate the text, but the color scheme found in the body statement of the page.
1. Copy the source code from the example file.
2. Create a JavaScript body in the head of a new HTML document, and paste the code copied in 1 into the script.
At this point you have most of what you need for the page. You need to convert each of the lines of code from the example page into a string that is written by calling "document.writeln". So for example the first line of the example:
<H1>In Class 6 Page</H1>is changed to
document.writeln("<H1>In Class 6 Page</H1>");
The second line poses a problem since it contains a double quote. To handle this problem you will break the second line into three strings. The first is everything up to the first ", the second will be a variable that contains the name of the link and the third is every thing after the second '.
<P>The first paragraph is a bunch of nonsense meant to fill space. It contains a <A HREF = "week4.htm">link to week 4</A> .</P>
3. Add the variable link to the beginning of the script and set it to the string "week4.htm" as shown here.
var link = "week4.htm";
4. Convert the second line of the document to the following three lines.
document.writeln("<P>The first paragraph is a bunch of nonsense meant to fill space. It contains a <A HREF = ");
document.writeln(link);
document.writeln(">link to week 4</A> .");
5. Apply document.writeln to the rest of the document lines.
Changing the colors used in the document is not as simple as creating the document since you cannot use the line
document.writeln("<BODY VLINK=#FF0080 LINK=#FF0000 TEXT=#FFFF80 BGCOLOR=#000080 >");
All writelns are to the body itself. The document has member variables that can be set. For example to set the text color you set document.fgColor to the color value you want. This is the list of the member variables and their connection to the document color.
| fgColor | Text color of the document |
| bgColor | The background color of the document |
| linkColor | Color of an unvisited link |
| vLinkColor | Color of a visited link |
| aLinkColor | Color of an active link (mainly applies when you are using frames). |
Remember that JavaScript is case sensitive, so you must use exactly the capitalization shown here.
6. Add the following statements just before the first writeln.
document.bgColor ="000080"; document.fgColor= "FFFF80"; document.linkColor="FF0000"; document.vLinkColor="FF00F1";
View the page in Internet Explorer. This seems to be what you want. Next look at the page in Netscape. What happened to the text?
The background color is set when the body is loading in Netscape. This means you have to create a function that sets the background color onload.
7. Write the following function just after the writelns in you JavaScript.
function start()
{
document.bgColor="000080";
}
//-->
</SCRIPT>
Make sure that it is contained in the script as shown here.
DHTML can react to user input in much the same way that a Windows program reacts to user activity. In this case you simply want to do something everytime the user loads the page. On other occations you may want the page to react to other forms of input such as text entry or mouse action. To get the page to execute code on load simply add the line onload = "YourFunction(Your parameter list)" to the Body tag. In this case you should do the following:
<BODY onLoad="start()">