项目介绍

Creating a Log-in Webpage The George Washington University Computer Science 1023 Professor Brenner (nbrenner@gwu.edu)

系统说明

Creating a Log-in Webpage

The George Washington University

Computer Science 1023

Professor Brenner (nbrenner@gwu.edu)

For this laboratory assignment, you will create a web site for logging in.   The page must display two text boxen for the user to fill in; the first is to be labeled “Enter your user ID:” and the second “Enter your password:”.   (Arrange them neatly in an HTML table.)  Below both will be a button (not submit) button to transfer control to your Javascript function.   (Recall that a <form name=”someformname”> and </form> must surround these input controls and that text boxen must have name=”” options.)

The Javascript function will check for and report one of three possible conditions:

1. The user ID specified is not in a table of authorized users.
2. The user ID is authorized, but the password is incorrect.
3. Both the user ID and password are correct: a successful log-in.

An array of user ID’s and passwords should be created in the Javascript code; three to five entries are sufficient for testing purposes.  These arrays need not be in a function, since they can be created as soon as the page is invoked.  When the correct condition of the three possible ones is determined, display an appropriate message.

Optional enhanced version for advanced programmers

Create a web site with two web pages.   The first is as described, but it has submit buttons to jump to the second webpage.  Also, the <form> has an additional clause: action=”URL”  The second webpage will have no HTML on it (except for a title or banner), and will consist entirely of Javascript.   This Javascript (not in a function, since it must run as soon as the page is invoked) will check for the conditions described above.

The first thing that the second web page must do is retrieve the URL string pointing to itself.   This is done by:

URLstring = window.location.href

and it will look something like this (recall the lab on Yahoo and Bookfinder.com):

“webpage2.html?nameofbox1=valueinbox1&nameofbox2=valueinbox2”

This is a string, and the values that the user typed into the two text boxen must be extracted using the string handling methods described in the 2nd Javascript handout (posted in Blackboard under the title “Elements of Javascript II — Loops + Arrays”).  (Note the defining separators: the question mark at the beginning of the parameters, the ampersand which separates them, and the equals sign between the name and the value.) Those string values (for the user ID and the password) must be compared to the ones in the mini-array created in the 2^nd web page.  (In a real application, the array of authorized user ID’s and their passwords will be kept externally, typically in an SQL database.)

Steps for Creating the Log-in Lab

1. (Basic lab) Fetch the user-entered information from the text boxes by the usual:

userentry = formname.textboxname.value

2 (Advanced lab).  Fetch the URL information into a string variable, as shown above for variable URLstring. Remember that the file name in the action= option of the <form> does not include the question mark or what comes after, as they are built by HTML when the Submit button is clicked.   And of course, the second webpage cannot reference the first webpage’s textboxes by the above type of statement.

Use either .split or a combination of .indexOf and .substring to cut out the user-typed information (user ID and password) from the lengthy URLstring.  (Review the Blackboard-posted file about strings for details.)

3. Insert frequent alert(variablename) statements so that you can track the progress of the Javascript program. Also, turn on the error console for your browser to see error messages.

4. Create either:

1. One array in which dictionary lookup of the user ID returns with the password string. E.g.

dictusers=[]; dictusers[“username1”] = “password1”

Or B. Two arrays, one holding authorized user ID’s and the other, in parallel with it, the corresponding passwords.  E.g.

users = [“username1”, “username2”]; pws = [“pw1”, “pw2”];

5. Check that the user-typed ID is in the authorized list. If using method 4A, do a dictionary lookup. E.g.  p = dictusers[whatwastypedinbox1]; the value of p will be equal to the variable (not the string!) undefined if what was typed is not in the dictionary, but will be the string of the corresponding password if it is in the dictionary.  If using method 4B, write a for loop to iterate thru the ID array, using an if statement to compare the typed-in value to each item in the array.

6. If the user ID is found in the authorized list, then immediately check the typed-in password against the password corresponding to the ID in the array. If using method 4B, use the index value at which the match of ID’s was made as a subscript in the password array.

7. Display a suitable message for whichever of the three conditions is true.

适用场景：

毕业论文、课程设计、公司项目参考

运行截图

关注【程序代做 源码分享】公众号获取更多免费源码！！！