This set of exercises concentrates on the HTML structures, image maps and forms, that are commonly used to support JavaScript code. JavaScript statements and functions depend critically on the HTML document they are embedded within. Names that are used in JavaScript commands are determined by the names given to HTML components on the page. JavaScript functions can be invoked from event handlers that are described in HTML descriptions of forms, input areas, and the like. The common theme in the exercises below is: How do I write and invoke JavaScript statements and functions from within an HTML document?

Most of the exercises that follow (below and in subsequent Module 5 labs) involve expanding your versions of the CVP pages to display and process new information in new ways. For each such exercise, make the changes you think necessary to your HTML files, and observe the behavior of your revised pages in your browser. Make sure that your edits are working as they should before moving on to the next exercise.

1. Start by reviewing the HTML code of your Map page to see how it implements its image map. Read through section 5.2 of the text for a review of the necessary HTML.

2. Now it’s time to start experimenting on your own with some simple HTML and JavaScript, and we’ve provided you with an easy-to-use medium for doing so. To facilitate the process of creating small segments of HTML and JavaScript code and testing it out, we give you a HTML/JavaScript interpreter of your very own. This interpreter provides you with two windows. You can enter any HTML/JavaScript code into the top window just by typing into it. When you click on the “Interpret” button near the bottom of that window, the results of your HTML/Javascript - that is, how your code will be displayed in a browser - appears in the bottom window.

   Use the HTML/JavaScript interpreter now to experiment with an image map in the following ways.

   1. Make an image map for the image “mapex.gif” using the map HTML tag. Open the source code of the “map.html” page and use it as a guide. You might find it helpful to know that the image has width 400 and height 120 pixels.
   2. Once you have the map tag completed, add scripts so that the map behaves as follows:
      1. When “Part 1” is clicked, go to a URL of your choice.
      2. When “Part 2” is clicked, display a prompt box that asks the user to enter their name.
      3. When “Part 3” is clicked, display a confirm box.
      4. When “Part 4” is clicked, display an alert box.
      5. When “Part 5” is clicked, display an alert box.
   
   
   
3. Review your version of the CVP Summary page and see how it uses forms to describe and access information on the page.



4. Now, return to your HTML/JavaScript interpreter to experiment with forms and form elements. In particular, write and test scripts that create the following:
   1. A button that says “I’m a button” on it.
   2. A text field that says “hello”.
   3. A text area with 50 columns and 10 rows.
   4. Two checkboxes, one of which is checked upon creation.
   5. A radio button.
   6. A select box with a few options, one of which can be chosen at a time.
   
   
   
5. Now, let’s return to your CVP pages and make some changes to them. Remember, make the following changes one at a time, making sure that your pages work as expected before moving on to the next exercise.
   1. Extend the Map page so that clicking on any of the islands named on the map brings you to the corresponding island information page.
   2. Add a few islands of your own (you can make up island pages for them later) to the table on the Summary page.
   3. Add new categories (columns) and values to the table on the Summary page that rank each island’s “Beaches” and “Nature”.
   4. Add to page Finder some text and text elements so that the user can specify ranges of values for Beaches and Nature, just as they currently can for Price. (Don't worry that this information is not yet being used by your program.)
   5. Add a selection list to the Map page (just below the map) which contains an entry for every island. In a later lab we'll have you add code to the page to get it to respond to selections made.
   6. Add to the bottom of your Summary page a button (labelled "Best Beaches") and a text field, similar to those that are already there for finding the best price. Again, don't worry that the button doesn't do anything when clicked. You'll fix that in subsequent exercises.