Read everything before doing anything.
Add JavaScript to the HTML code as follows:
Display the date on which the document was last modified.
Display the browser name and version.
Activate the links to:
You must use a single function to set the background color and change the status bar.
Display a message that tells how many images are on the
page, followed by an unordered list that gives the src
attribute for each image. If there are no images, your message
should say so, and there should be no list. If there is only
one image, your message must be grammatically
correct; i.e., you must not say “There are 1 images on
this page.” You must call a function that creates
this output; do not put all the code in-line.
Display a message that tells how many links are on the
page, followed by an unordered list that gives the href
attribute for each link. If there are no links, your message
should say so, and there should be no list. If there is only
one link, your message must be grammatically
correct; i.e., you must not say “There are 1 links on
this page.” You must call a function that creates
this output; do not put all the code in-line.
Here is a sample screenshot
which displays part of the output (it doesn’t
show all the links). IThe screenshot was taken after clicking the
Turquoise link. Note the contents of the window’s
status bar. Your last-modified date and browser
name and version will be different from those in the screenshot.
Modern browsers do not allow JavaScript to update the status bar by default; this prevents bad guys from faking web link addresses in phishing scams. You will have to set your browser’s preferences to allow JavaScript to update the status bar if you want to see your code work.
Use the following XHTML as the basis for your solution. Copy and paste it into a file of your own. Do not retype the whole page; this is not an XHTML typing contest! (If I see spelling or grammar errors in your solution’s XHTML, I will know that you did not follow this instruction, and I will take off points!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CIT041J Program 2</title> <!-- functions go here --> </head> <body> <div style="float: left; width: 100px;"> <img src="evclogo.jpg" alt="Evergreen Valley College Logo" width="92" height="89" /> </div> <div style="float: right; width: 100px;"> <a href="http://validator.w3.org/check?uri=referer"><img src="vxhtml10.png" alt="Valid XHTML 1.0" width="88" height="31" style="border: 0;" /></a> </div> <h1 align="center">CIT 041J Program 2</h1> <p style="clear: both">This document was last modified on: <!-- Insert script for part 1 here --> </p> <p>Your current browser is: <!-- Insert script for part 2 here --> </p> <p>Please click one of the links below to change the background color of this page:</p> <!-- Insert script for part 3 here --> <p align="center"><small> <a href="" onclick="">White</a> | <a href="" onclick="">Yellow</a> | <a href="" onclick="">Light Yellow</a> | <!-- color code #ffffcc --> <a href="" onclick="">Light Green</a> | <!-- color code #ccffcc --> <a href="" onclick="">Turquoise</a> | <!-- color code #99ffff --> <a href="" onclick="">Pink</a> <!-- color code #ffcccc --> </small></p> <p style="clear: left; text-align: center;"> <img src="separator.png" alt="---" width="300" height="2" /> </p> <!-- Insert script for parts 4 and 5 here --> </body> </html>
Here are links to the graphic files that this XHTML file references:
Here is a link to the XHTML page before any JavaScript has been added.
Name your HTML file in the form lastname_firstname_2.html
and send it to me. Don’t send the image files; I
already have a copy of those.
