GRA 3758 Project 5 - JavaScript Object Manipulation

Project Purpose:

This project is intended to give students experience in composing a small web page involving the manipulation of objects using JavaScript. Although many different techniques exist for coding and executing scripts, this project will require that the script be coded as a [function] 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. See the [W3Schools tutorial page about JavaScript Popup Boxes]. 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 customer's first name, last name, and social security number (SSN). Both names may be entered in any case letters. The SSN must be entered using only digits (without hyphens). Generate an account name by concatenating the last four digits of the SSN to the end of the first four characters of the customer's last name in lowercase. Generate a password by concatenating the first four characters (in lowercase) of the customer's first name to the end of the first five digits of the SSN. For example, a customer named "Janet Wilson" with a SSN of "123456789" would be assigned an account name of "wils6789" and a password of "12345jane". For customers with names shorter than four characters, use just the letters provided (understanding that the resulting account name or password may be shorter than standard). 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:

Initially, your browser window should display:

To produce the button above, include the source code:

<form action="">
 <input type="button" value="Create account credentials" onclick="createUserid()"/>
</form>

The onclick event handler will run a script that you write in the head section named createUserid() that will generate the account credentials. After your script has acquired the following data with prompt dialog boxes

• First Name: Janet
• Last Name: Wilson
• SSN: 123456789 (without dashes)

your browser window's contents should be altered to display:

Note that the header and horizontal rule do not change; but all content below that does.

Project Constraints and Objectives:

• Note that the introduction message and button should be coded in the body section of the web page, but the rest of it (including the output of the results) should be handled by a JavaScript function in the head section of the web page. Read the source code for the JavaScript example file entitled "Function in the Head Section - Called by an event in the body" posted on my web site at:
  

  http://www.gibsonr.com/classes/internet/examples/javascript/jsex_func_by_event.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.
• 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:

• Study the [String object pages at the W3Schools site] before starting the project.
• 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.
• 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 5 drop box under the Lessons tab to attach your "project5.htm" file.