BIT 116: Scripting Programming Assignment 1

BIT 116: Scripting Programming Assignment 1

Overview: Create a user login for a Web ATM that validates user data and verifies the customers name and PIN number.

Task Description: Scenario

Suppose that you have been hired by a development company designing the interface for a new Web based ATM. The interface gives customers access to their traditional checking and savings accounts, but also to their E-card account, used for online purchases.

Of course, in order to access the ATM, a customer must login with a valid user name and a four-digit PIN number. An email address is also required if the customer wants email confirmation of any transactions. Develop the login script that first validates and then verifies the user input.

Validation makes sure that the user has entered all the required data: user name, PIN number and email address. The PIN field should contains a four-digit number and the email address must contain an @ and a period. If the input is not valid, alert the user to correct the particular error in the appropriate box.

Verification checks that the user has an account, i.e., that the user name and PIN number match the name and PIN for one of the Web ATM’s customers. If the input is not verified, alert the user that an account for them cannot be found. When the input is both validated and verified, alert the user with a simple welcome message.

Program Design and Implementation

Design the HTML interface using a 3-row by 5-column table for layout. Use two text fields, a password field (for the PIN number), a checkbox, a drop-down list, and a button as input elements as shown at left. Be sure to give each input element a unique name attribute.

Modularize your JavaScript using two functions: validate and verify described in the following IPO charts. Your event-driven program should call the validate function when the “Continue” button is pressed. If all the data has been entered correctly, the validate function then calls the verify function.

validate
Input / Process / Output
An HTML form to validate / Validates that all required information exists: username, PIN and email address. The PIN must also be a 4-digit numeric value and the email address must contain an @ and a period. Alerts the user about invalid data and its location. If all input is valid, alerts the user as to whether or not the user is an ATM customer.
* GLOBAL VARIABLES: none. / none
verify
Input / Process / Output
An HTML form with user name and PIN / Compares the form's user name and PIN number with the properties of a customer object stored in the global ATMuser variable. Returns true if it finds the customer object matches both.
* GLOBAL VARIABLES: ATMuser. / true or false

To implement the verify function, create a global variable that stores a single customer objects in a JavaScript source file included in the ATM script’s head. The source file should define the customer object and define a single existing customer (we’ll expand this to an array of customers later on). Each customer object has a name property and a PIN property. The global variable, ATMuser, should be a customer with the name Ian and the PIN number 0000.

Program Testing

Test you program with a variety of correct and incorrect input. Insure that your program is properly validating the data, properly verifying the user and that all alerts are working as described.

Submissions

Preliminary :

· Pseudocode representation of the validate process

· Flowchart representation of the verify process

· The HTML layout of the ATM login page. (website submission)

Final :

· The JavaScript source file describing the global array of customer objects (website submission)

· Program implementation of the ATM login written in JavaScript (website submission)

· BONUS: In the screen shots on the first page, notice how the REQUIRED marker appears when the check box is selected and disappears when it is deselected. Implement this behavior in your ATM login script.

Date:

Preliminary Submission Name: Section:

Please print your name and section. Write any comments in the box below. TOTAL SCORE: /18

Evaluation Scale: 0 – Absent 1 – Developing 2 – Adequate 3 – Well Developed

Program Design Criteria suggestions

· Validate pseudocode represents the validation process (IPO).
· Verify flow chart represents the verification process (IPO).
· Processes include enough detail to implement them.

HTML Design Criteria suggestions

· HTML form is structured as described using a table with column spanning.
· INPUT elements are located correctly and named appropriately.
· HTML is properly documented.
Student Comments

BIT 116: Scripting Programming Assignment 1

Date:

Final Submission Name: Section:

Please print your name and section. Write any comments in the box below. TOTAL SCORE: /30

Evaluation Scale: 0 – Absent 1 – Developing 2 – Adequate 3 – Well Developed

Program Documentation Criteria suggestions

· ATM script comments adequately document the program (see guidelines)
· All functions are documented with their process description and input-output information.
· In-line comments provide clarification that aids program readability.

Program Implementation Criteria suggestions

· JavaScript source file describes global array and customer object correctly.
· Program implementation follows the modular design described (IPO).
· Local variables and global variables are used appropriately.
· Data validation process is invoked as described and passed the HTML form.

Program Testing Criteria suggestions

· ATM login executes without syntax errors.
· Data validation alerts users correctly.
· User verification alerts users correctly.
BONUS: check box marks email “required.”
Other Comments

BIT 116: Scripting Programming Assignment 1

General Program Guidelines for ALL Assignments

Submissions

· All assignments are submitted electronically with written design documentation. When your assignment is complete, put all necessary files into a folder labeled with your name and place the folder in the drop box on the shared drive under the course and section directory.

· Assignments will be considered submitted when you turn in the appropriate assignment grade sheet. On the grade sheet include your name, section, the date and any comments regarding the performance of your script as compared to the assignment specifications.

· Deductions for late programming assignment submissions will be 5% per day late (not including weekends.) Late submissions of the assignment grade sheet may be left in the instructor’s mailbox or under the instructor’s office door. No E-mail submissions are accepted.

Documentation

· In every script file, provide comment lines for your name, the assignment number, the date, and a brief description of the script’s purpose within the HTML <head> </head> tags. For files without HTML content, place your comments at the beginning of the file.

· Use clearly written comments to document the purpose of each function. Include all of the information contained in an IPO chart.

· Use meaningful names for variable and method names and clearly written in-line comments to document code blocks so that your code is readable for someone trying to understand the particular process that you are implementing.

Layout

· Write all functions definitions within the HTML <head> </head> tags.

· Use clear, consistent indentation. Follow the conventions used in the text.

· Use Cascading Style Sheets and JavaScript source files where appropriate

MOST IMPORTANTLY:

· The programs you submit should represent your own original, independent thinking. These programs are not intended to be group projects. Students are encouraged to work with classmates to clarify conceptual understanding necessary to complete assignments. However, copying another person’s work in whole or in part, either manually or electronically, is not acceptable. Identical programming assignments will not receive any credit.