(Overall view presented to viewer on first visit)
(Page presented to viewer on character selection)
(Page presented to viewer on character selection)
The purpose of this lab is to practice writing Javascript to produce an interactive web page. You probably won't have enough time to complete everything specified in this document; finish as much as you can within the allotted time.
Your task in this lab is to write a web page with a user interface that lists several characters from one of your favorite TV shows or movies. The user should be able to select any character and see more information about that character. You can use the provided file named characters.html (right-click and select Save Link As...
) as a starting point if you like.
Use a search engine such as Google Image Search to find pictures of your characters to link. NOTE: Be careful when you copy and paste text from a web page into your Javascript code, because it may contain " characters or line breaks, both of which aren't allowed in a Javascript String. You may have to slightly edit the text to make it a valid Javascript String.
First focus on writing the HTML code to display the user interface, even if it does not have any behavior. Try to choose appropriate UI controls for the various characters on your show.
Once you have created the basic user interface, write Javascript event handlers stored in a separate .js file. Use the document object model (DOM) to modify the content on the page when the user selects a character to display. You may wish to set properties such as the src of an image, the innerHTML of a paragraph or other block element, and/or the style of an element.
If you complete the event behavior as specified, you are encouraged to beautify your page using CSS. Consider using absolute or fixed positioning on some elements, since this will be used on the homework assignment.
Write your page using valid XHTML 1.0 Strict. Include a link from your page to the W3C XHTML and CSS validators, using the following image and linking to the following site:
For example, TA Jeff Prouty designed the following web page about characters from the show Entourage (between, but not including, the thick black lines):
(Overall view presented to viewer on first visit)
(Page presented to viewer on character selection)
(Page presented to viewer on character selection)
If you have extra time, consider adding extra content or event behavior to your page, such as colors and fonts that change when different characters are chosen.
When you're satisfied with your page, you may optionally wish to turn it in so that we can see it, or upload it to your UW web space. You may need to ZIP your files for them to submit successfully.
