COP 1830 Project 4 - JavaScript

Project Purpose:

This project is intended to give students experience in composing a small web page involving JavaScript. Although many different techniques exist for coding and executing scripts, this project will require that the script be coded in the head section of an XHTML file. This program will rely primarily on the use of "[pop-up prompt (dialog) boxes]" for input and will produce HTML output using JavaScript document.write methods. 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.

Program (Script) Objective:

Request and store two numbers entered by the user via dialog boxes similar to those shown in the INPUT area of the Sample Output below. Then calculate their sum, difference, product, and quotient. Then display those results in the browser window in a manner similar to that shown in the OUTPUT area of the Sample Output below.

Sample Output:

The INPUT area of the illustration below shows two prompt dialog boxes that your JavaScript will have to produce in sequence to allow the user to enter two input values. These boxes can be executed via a method named prompt. See the W3Schools tutorial page about JavaScript Popup Boxes. The OUTPUT area of the illustration shows how your browser window should appear when the program is complete.

Variable List:

Your JavaScript code will declare its own variable labels to use to accomplish its task. The following "variable list" defines the labels you should use within your code. Notice the "camel (hump)" naming convention used on the first two variable identifiers, that uses capitalization in place of blank spaces.

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 an an "algorithm" (logical recipe) as follows.

A. Start.
B. Store data acquired from the two prompt dialog boxes.
   B1. firstString from a prompt dialog box.
   B2. secondString from a prompt dialog box.
   B3. Parse firstString as a floating point number and assign it to variable first.
   B4. Parse secondString as a floating point number and assign it to variable second.
C. Calculate and store results.
   C1. sum as first plus second.
   C2. diff as first minus second.
   C3. product as first times second.
   C4. quotient as first divided by second.
D. Display results in the browser's document window as seen in the Sample OUTPUT.
   D1. Page Heading (H3).
   D2. A paragraph element showing the two string values entered.
       D2a. firstString
       D2b. secondString
   D3. A paragraph element showing the results.
       D3a. sum.
       D3b. diff.
       D3c. product.
       D3d. quotient.
E. Display blank line and wrap-up message as seen in the Sample OUTPUT.
F. End.

Note that steps B-D should be handled by JavaScript code in the head section of the web page, but step E should be performed as part of the body section of the web page. Read the source code for the JavaScript example file entitled "Entirely in the head section" posted on my web site at:

http://www.gibsonr.com/classes/internet/examples/javascript/jsex_all_in_head.htm

In order to execute the JavaScript content of that document, you might have to reconfigure your browser's security settings as described on the page about Browser Security Configuration for Scripts.

Web document content generated by script instructions in the head section (as shown in the example referenced above) will precede document content contained in the body section of the XHTML file.

Project Constraints and Objectives:

• Use a plain text editor such as Windows Notepad program to create your XHTML/JavaScript file. Name it "project4.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 prompt dialog boxes first and test to see if that part works. Then write and test the script with just the sum calculations, and so on. 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 to report when your script has successfully reached benchmarks in your code. (See the W3Schools tutorial page about JavaScript Popup Boxes.) 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 4 drop box under the Lessons tab to attach your "project4.htm" file.