This set of exercises is intended primarily to
familiarize you with the Web pages that you will be working with throughout this
module. The pages are related in that the first, the simple order form that
opened in a separate window when this page was loaded, produces the second, an
order confirmation page, at the click of a button. To accomplish this
feat, we had to add to page 2 of the order form HTML elements that we have not
made use of up to now: a FORM that contains descriptions of the radio buttons,
text fields, selection lists, checkboxes, and buttons that appear on the page,
and a SCRIPT that contains the JavaScript code that does the dynamic page
generation. We will spend the rest of this lab module explaining how these
elements are defined and how they interact to accomplish the processing that
they do. For now, we'll concentrate on the basics. |
- Click in the window containing the "Nerd-chandise Order Form."
Click the radio buttons, selections lists, and checkboxes, and
enter information into the text fields. As you will see, clicking
the "Clear" button resets the form to its original state, and
clicking the "Submit button creates and loads the order
confirmation page that reflects the values and choices you entered
into the form. To return to the order form from the confirmation page,
click your browser's "Back" button.
- Since all of your Module 5 lab activity from this point on
will involve editing the HTML code that defined the order and
confirmation pages, and since you can't edit the document source
code on your server or on your CD, you should save a copy of
this file on your computer. Choose File:Save as... from your
browser menu to save this file, and name it "MyOrderForm.html".
You also need to download the image that appears at the top of the
order form and the image used to produce the page's background.
If you right-click (or click and hold the mouse button down on
a single-button mouse) on the "Analytical Engine..." image at the
top of the order form, you can choose "Save image as..." (or,
"Save picture as...") to save your copy of that image. Similarly,
clicking the background allows you to save the background image.
Be sure that these images are saved in the same folder as was your
copy of the order form's HTML code.
Now, open your copy of the order form in the browser and click the "Submit" button to make sure that both pages look and function as does the original.
In this and subsequent lab exercises, we will ask you to make changes to
the HTML code for the order form and to test your changes.
As you did in Module 4, you can make changes by editing the file
"MyOrderForm.html" in a word processor (remember to save it as a
text file!), and can see the result of your digital handiwork by
opening the edited file your browser. You can, of course, print
the code from your word processor if you find it more convenient
to work with hard copy.
-
Experiment with the page now with an eye toward answering the following questions. The features of our program that they point out will serve as the focus of subsequent lab exercises. Write your answers on a separate sheet of paper.
- What happens if you click the "Submit" button without having entered a name?
- What happens if you enter a zip code of "abcde"?
- What happens if your enter "abc" as the quantity ("Qty") for one of the items?
- What happens if you enter "-13" as a quantity for one of the items?
- What happens if you enter a blank (that is, remove the value completely) as the quantity for one of the items?
- Review the source code for our order form now. Notice, first, the rather lengthy SCRIPT element that appears in the document head. This script is comprised of four separate functions (named "submitForm", "getSelection", "getRadio", and "convertToMoney"). Function "submitForm" is the one that does most of the processing for this page, including the generation of the order confirmation page. You can see the :document.open() . . . document.writeln . . . document.close()" collection of instructions at the end of that function. Function submitForm is invoked whenever the "Submit" button is clicked (see if you can find that code that accomplishes this).
Edit your page now so that the first thing that happens when you click the "Submit" button is that an alert box appears indicating that "You are about to perform an INsecure operation."
|
- You have seen the "Clear" button in action. It resets all entries on the order form to their original values. In particular, it sets the "Qty" (quantity) fields for each type of nerd-chandise to zero. This, as you will see, is very useful, since if one of these fields is edited and left blank, the "submitForm" button does not properly calculate the cost of the order.
The JavaScript statement "document.Order.Clear.click" simulates a "click" on the "Clear" button, thereby resetting all of the form's values. Edit your program so that this statement is executed every time the page is loaded into the browser.
-
Look back at the order confirmation page. At present, it doesn't look like much. Very little HTML formatting has been applied to it, as you can see by looking at the portion of function "submitForm" that produces the confirmation page. Edit this part of the function "submitForm" so that the order confirmation page looks a bit more attractive. In particular, edit the code so that:
- the "AE" image appears centered at the top of the page.
- the "AE Online" image appears as the background of the page.
- the "Your order has been confirmed." message appears in green and is followed by a horizontal rule.
- another horizontal rule appears between the address information and the "Charges:" .
- the "It will be shipped to:" and "Charges:" messages appear in boldface.
- a paragraph break is inserted before the "TOTAL DUE:" message, and that message appears in boldface.
|