ITSE 1411 Beginning Web
Assignment 5

Design Text, Chapter 13 pgs 239 - 264 (Forms)
JavaScript Text, Chapter 5 pgs 223 - 236 (Forms, Text Boxes), 239 - 240 (Push buttons)
JavaScript Text, Chapter 3 (Functions and Events), pgs 115 - 129

Reading:

• Forms and Functions
  • The text uses form elements when explaining functions and functions when explaining form elements. This makes both topics a little confusing. Start by reading the forms pages 223 - 236.
  • After you input the Subscription.html page (through page 236), switch to chapter 3 to start reading about functions.
  • Start reading Chapter 3 pages 115 - 120 and complete the TwoFunctions.html example.
  • Switch back to reading pages 239 - 240
  • Return to reading pages 120 - 129
  • The form example on page 231 has action="FormProcessor.html. This means that when the form is submitted the data gathered in the form is sent to a page called FormProcessor.html. Follow the steps given using FormProcessor for this assignment. The way the page works will be explained in another assignment.
  • The Subscription.html page on pages 235 - 237 used a table. This was used for alignment. The form elements could have been inside paragraph tags.
  • The button example on page 240 uses an alert box. The alert box is a great debugging tool (helps you find errors) but not very useful on a web page. Most users block pop-ups. However, we will use it as a method to interact on a page.

Practice:

• Forms
  • Create an assignment5 folder (no spaces in the name, no uppercase) in your public_html folder.
  • Subscription page
    • Open your template.htm page in your editor.
    • In the DOCTYPE, change the two occurences of strict and Strict to transitional and Transitional.
    • Save as subscription.htm in your assignment5 folder.
    • Add the coding from pages 230 and 231 of the text.
    • Add the coding from pages 235 - 236 of the text.
    • Save the document.
    • Compare your page to Figure 5-5 page 236.
    • As shown the form gathers data, but goes no where and does nothing.

• Calling Functions
  • TwoFunctions page
    • Open your template.htm page in your editor.
    • Save as twoFuntions.htm in your assignment5 folder.
    • Add the coding from pages 119 and 120 of the text.
    • Save the document.
    • Compare your page to Figure 3-2 on page 120 of the text.

• Reference Web Page Elements
  • Calculator page
    • Open your template.htm page in your editor.
    • In the DOCTYPE, change the two occurences of strict and Strict to transitional and Transitional.
    • Save as calculator.htm in your assignment5 folder.
    • Add the coding from pages 127 - 129 of the text.
    • Save the document.
    • Compare your page to Figure 3-5 on page 129 of the text.

Case Project:

• Complete Case Project 3-1 found on page 169 of your text.
  • Open your template.htm page.
  • In the DOCTYPE, change the two occurences of strict and Strict to transitional and Transitional.
  • Save as calcShipping.htm in your assignment5 folder.
  • Follow the steps described in the text but start with the template so that you will have the validation icons on your page.
    • Hint: When you call your function, use the onclick event handler. The argument will be the value entered in the text area, for example
      onclick="updateString(document.calcShipping.amount.value)"
      This assumes that your function is named updateString, your form is named calcShipping, and your text area is named amount.
    • Your function header should have an argument that receives the value that is sent from the function call. Then, you must convert that value to a numerical value. There are many ways to do this. One example is

                          function updateString(value) {
                          var inputString = parseFloat(value); 
                          

      This example shows that the variable value receives the value that was entered in the textbox, and then that value is converted to a float value and assigned to the variable inputString.

Update your index page:

• Add links on your index page to the pages in your assignment5 folder that are to be graded:
  • twoFunctions.htm
  • calculator.htm
  • calcShipping.htm

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your assignment5 folder with the files:
  • twoFunctions.htm
  • calculator.htm
  • calcShipping.htm

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.