COP 1830 Project 5 - JavaScript Functions

Purpose:

This project is intended to give students experience in composing a small web page involving JavaScript functions. The project will use a web-based form to gather input data and display results. Although many different techniques exist for coding and executing scripts, this project will require that the script be coded as a JavaScript function in the head section of the source code and executed via a form button. This technique differs from the one used Project 4 that relied primarily on the use of "prompt dialog" boxes for input and HTML output using JavaScript write methods. The necessary information about how to pass data between a form and a JavaScript function will be provided below. As with prior projects, this project will be written using a plain text editor to help students develop a fundamental understanding of XHTML and JavaScript syntax. Keep the project as simple as possible with respect to format, but attempt to produce a page as close as possible to the one in the illustration below.

Sample Output:

Look at Chapter 17 in your HTML textbook and chapters A, B and E in your JavaScript Virtual Textbook and review the information about how to produce web-based forms with XHTML. Name the four input textboxes (in order of appearance): stickerPrice, downPayment, interestRate, and termMonths. Notice the "camel style" capitalization used in the names and remember that JavaScript is case-sensitive. Name the two output textboxes (in order of appearance): totalCost and monthlyPayment. Name the JavaScipt function that you write in the head section of your source code calculateCost, and provide a "parameter" name of formData following the function name in parentheses. The function will be executed via a method recognized by form buttons that is named onClick. Inside the form in the body section of your page, write the source code for your [Calculate] button (see illustration above) as follows:

	<input type="button" name="calculateButton" value="Calculate"
	onclick="calculateCost (this.form)" />

The onClick attribute in the statement above will "call" (activate) the calculateCost function in the head section and pass information about all form elements to the function using the standard identifier this.form. The function will then have access to all properties of the form. To refer to the value of a form element, use the following syntax:

    formData.elementName.value

where the labels are interpreted as follows:

• formData is a user-defined name given to the entire structure of form data passed into the function by the onClick method in the Calculate button.
• elementName should be replaced by the name of the form element (in this project each textbox) that you want to access.
• value literally refers to the "value" property of the element.

For example, to refer to the sticker price of the car in this project, you would type:

    formData.stickerPrice.value

Using the syntax above, you can either (1) use the value of any element that was input on a form or (2) change the value of any form element (for output display).

Variable List:

Your JavaScript function will declare its own variable labels to use to accomplish its task. The following "variable list" defines the labels you should use within your function.

Algorithm:

You are not required to analyze the steps necessary to accomplish the objective of the script. That work has already been done for you, resulting in an "algorithm" (logical recipe) as follows.

A. Start - receiving the entire form structure in an identifier labeled "formData".
B. Store data extracted from the first four textbox elements on the form.
   B1. Parse PRICE from the textbox named stickerPrice.
   B2. Parse DOWN from the textbox named downPayment.
   B3. Parse RATE from the textbox named interestRate.
   B4. Parse TERM from the textbox named termMonths.
C. Calculate and store interim and final answers.
   C1. PRIN is PRICE minus DOWN.
   C2. INT is PRIN times (RATE divided by 100) times TERM divided by 12.
   C3. TCOST is PRICE plus INT.
   C4. MPAY is (PRIN plus INT) divided by TERM.
D. Return results to the appropriate form elements (textboxes).
   D1. Assign the value in the textbox named totalCost to be the value in TCOST.
   D2. Assign the value in the textbox named monthlyPayment to be the value in MPAY.
E. End.

Example:

An example of a web page that is similar in approach to the one that you will be writing is available on my web site at:

     http://www.gibsonr.com/classes/cop1830/jsexample.html

You can use it as a guide when preparing your page.

Project Constraints and Objectives:

• Use a plain text editor such as Windows Notepad program to create your XHTML/JavaScript file. Name it "project5.htm". You must not use Word, Wordpad, FrontPage, Dreamweaver, or any other web authoring software. Remember, when saving a file with Notepad, you may have to place quotes around the entire filename to prevent the addition of the extension txt to the end of the filename.
• Do not use any images, color, etc., or other multimedia content on this project.
• Place a comment in the head section of the html container identifying the filename, yourself as the author, and noting the date. Remember that XHTML comment tags look like this:
  <!-- Comment here -->
• Use the [W3C Markup Validation Service] to validate your XHTML code under transitional standards as identified by the DOCTYPE tag placed at the beginning of your HTML file as shown below. Also remember to write the appropriate meta tag in the head section to declare the charset.
  

  <?xml version='1.0' encoding='utf-8'?>
  <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
   'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  

Tips:

• Start working on your project as soon as possible. Do not wait until you believe that you have mastered all of the skills, but do practice examples in the textbook and supplemental reading sites to develop skill if possible. If you encounter an obstacle that you cannot solve after checking your book and other reference materials, send me a copy of the source code for comment. But remember that I will need time to respond. So give yourself that time by starting early.
• Build the project one step at a time. Try to create the form in the body section first, then write the script in the head section. Attempt validation periodically.
• The sample data and results show in the illustration at the top of this page are valid. So you can use them as text data to verify that your project is performing properly.
• While debugging your code, employ alert boxes as shown on pages 181 and 182 of your textbook to report when your script has successfully reached benchmarks in your code. Then use the // style of JavaScript comment notation at the front of those statements to "comment out" the alert statements prior to submitting your code. For example:
  

       //alert ("Input section of script reached.");

• Much of the source code will be "case sensitive", so pay attention to upper and lowercase.
• Save your work after each change before trying to view it in your browser. Also, you must instruct your browser to reload your page after saving any changes to it. Simply pressing the RELOAD (a.k.a. REFRESH) button on the browser’s button bar many not be enough to make all browsers completely reload the revised script. To ensure that the page is completely reloaded, postion your typing cursor at the end of the address of your web page file on the browser's address bar and press the Enter key on your keyboard. Be sure that you have deselected the address on the address bar before pressing Enter to avoid clearing the address with that keystroke. One way to do this is to press the End key on your keyboard after clicking in the address bar area.
• Finally, relax! Don't get stressed about this. Take it in small steps. Get as much of it working as you can. If you get stuck on one element, then use comment tags (<!-- and --> in XHTML and /* and */ in JavaScript) to mask any code that is causing trouble, move on to a different element, and come back to solve the problem later. Some frustration can be a valuable motivator to reinforce lessons. But too much can inhibit learning. Schedule your time to allow some breaks between working sessions.

Submission:

Login to the and use the Project 5 drop box under the Lessons tab to attach your "project5.htm" file.