This set of exercises is intended
merely to familiarize you with the “program” ( a collection of HTML pages, each
of which contains JavaScript code) that is the basis for the Module 5 lab
exercises. The program is a “Caribbean Vacation Planner” (we’ll refer to it as
“CVP”), which provides you with three different ways to get information about
travel in the Caribbean. Because of the embedded JavaScript code, these
pages are interactive in ways that can’t be achieved with simple HTML.
|
Our Map page, as the name implies, displays a “clickable” map of the region to bring
up information about some of the Caribbean islands. The Summary page displays data about the islands in
tabular form. The Finder page allows you to specify
information about an island you would like to visit (the price range, the language
spoken, etc.), and tells you which islands in the area match your request.
| |
- Start the program now by going to the introduction ("Splash")
page. Click on the map to see information about particular islands. Then, use
the navigation tools provided to surf through and experiment with the other
pages.
- Run through the CVP pages again, this time with an eye toward answering
the following questions. Write your answers on a separate sheet of paper.
-
What happens when you click on the picture ofAnquilla on the Map
page?
- What happens when you click on the picture of Jamaica on the Map
page?
- What happens when you click on the picture of the Atlantic Ocean on the
Map page?
- What happens when you click in one of the text boxes under the Price
category on the Summary page?
- What happens when you click in one of the text boxes under the Language
category on Summary page?
- What happens when you click the "Best Price" button on the Summary
page?
-
What happens when you click the “Find Island” button on the Finder page?
- Now we’ll examine the JavaScript code that gives our CVP pages the
functionality you observed above. You can do so in at least two ways. First, you
can select View: Document Source (or something similar) while viewing
any if the CVP pages in your browser. Do so now looking for the embedded
JavaScript code in each of the CVP pages.
- Since all of the remaining lab activities for this module will involve editing
the HTML and JavaScript code for our CVP, we want you to have your own
copies of these pages. We have prepared single zip file that contains all of the
code and images that you need to develop your version of the CVP. Download this file now, unzip it, and save all files
into a single folder on a disk or a machine that you have access to. Note: If you have access to a server containing the new Module 5 pages, you can simply copy all of these files directly to your machine.
The HTML files (there are a bunch of them, including pages for many of the
islands) can be opened by any word processor or HTML editor. You can then
edit the files, as per our instructions in subsequent labs, and run and test your
version of the CVP by opening the new file in your browser (use the
File:Open File browser command).
-
Review the JavaScript code in our CVP pages more carefully now. In particular,
add comments (comments are lines within a script tag that begin with "//")
to your versions of the pages to indicate which lines of JavaScript explain each
of your answers in question 2, above. That is, add a comment that says "// this
explains my answer to 2a" at the point in the script that explains what happens
when you click on St. Johns on the Map page. Do the same for questions 2b-
2g.
|
|
Labs
