GRA 3758 Project 4 - Simple Embedded 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:

The script shall request and store a person's height in meters (which could be entered as a floating point number). Then, convert that value height into whole feet and inches rounded to the nearest inch. Finally, 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 illustration below shows a prompt dialog box that your JavaScript will have to produce to allow the user to enter an input value. This box can be executed via a method named prompt. The default value of 0.0 must be specified in the JavaScript command. It will not happen automatically.

See the W3Schools tutorial page about JavaScript Popup Boxes. The illustration shows how your browser window should appear when the program is complete if the user had entered the input "1.8"" into the prompt dialog box.

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

A. Start.
B. Request and store data acquired from a prompt dialog box.
   B1. hmString from a prompt dialog box.
   B2. Parse hmString as a floating point number and assign it to variable hm.
C. Calculate and store results.
   C1. Assign totinches as the rounded result of: hm times 100 (cm/m) divided by 2.54 (cm/inch).
   C2. Assign feet as the integer portion of: totinches divided by 12.
   C3. Assign inches as the remainder of: totinches divided by 12.
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 input string hmString.
   D3. A paragraph element showing the results.
       D3a. feet.
       D3b. inches.
E. Display paragraph element containing a 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 XHTML 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 using the [W3C Markup (HTML) Validation Service] and the [JavaScript Lint Validation Service].
• Before composing the arithmetic expressions for your script's calculations, study the W3Schools tutorial page about JavaScript Math Objects.
• 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.