WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (8/8)

[previous]

Beyond HTML Goodies, chapter 6

Array Password Protection

This is the second in a string of JavaScript password scripts. In this script, we again use a format in which the password is the name of the page to be linked to--except in this one, the concept is further hidden because the user will not put in the name of the page. The user will put in a numeric password, which will be turned in to the name of the page by the script.

It's done through an array. It's, again, best if you see this one in action. I have a working version online at https://www.htmlgoodies.com/stips/scripttip75effect.html.

Use the password 145.

The password page looks like Figure 6.14.

Figure 6.14
Passwords and numbers, and numbers to text.

 

Here's the Code

This script creates a very difficult-to-crack password system:

<SCRIPT LANGUAGE="javascript">
function GoIn()
{
var Password = new Array("p","j","l","z","o","e","m","b","x","z")
function getNumbers()
{
return document.userInput.u1.value
return document.userInput.u2.value
return document.userInput.u3.value
}
var input1 = document.userInput.u1.value 
var input2 = document.userInput.u2.value 
var input3 = document.userInput.u3.value 
var pw1 = Password[input1]
var pw2 = Password[input2]
var pw3 = Password[input3]
var pw = pw1 + pw2 + pw3 
if (pw == pw1+pw2+pw3)
{location.href = pw+ ".html"}
}
</SCRIPT> 
Put in Your Three-Number Password to Enter: <center>
<FORM NAME="userInput">
<INPUT TYPE="text" Name ="u1" SIZE="2">
<INPUT TYPE="text" Name ="u2" SIZE="2">
<INPUT TYPE="text" Name ="u3" SIZE="2">
<INPUT TYPE="button" VALUE="Enter" onClick="GoIn()">
</FORM>
</CENTER>

Of course, when we have form elements in a script, we start with them so that we can understand the hierarchy statements in the functions:

<FORM NAME="userInput">
<INPUT TYPE="text" Name ="u1" SIZE="2">
<INPUT TYPE="text" Name ="u2" SIZE="2">
<INPUT TYPE="text" Name ="u3" SIZE="2">
<INPUT TYPE="button" VALUE="Enter" onClick="GoIn()">
</FORM> 

The form itself is given the name "userInput". Following the form flag are three input text boxes: Each set to accept only two characters.

The text boxes are named "u1", "u2", and "u3" down the line.

A final button triggers a function called GoIn(). Now we can put together hierarchy statement to grab whatever the user puts into the boxes. Now here's the GoIn() function:

function GoIn()
{
var Password = new Array("p","j","l","z","o","e","m","b","x","z")

The function starts with an array. We've used the format before. The array is named "Password". Each element in the array is a text string because it is contained within double quotes. A comma separates each item, with no spaces.

What isn't shown here is what helps us to use the script as a password function. Any time you set up an array in JavaScript, the array list members are given numbers starting at zero and counting up until JavaScript runs out of things to count.

In this case, "p" is zero, "j" is one, "l" is two, and so forth. That will become important in a moment.

function getNumbers() { 
return document.userInput.u1.value
return document.userInput.u2.value
return document.userInput.u3.value
}

Next, a second function, getNumbers(), is employed to simply return, to the script, the numbers the user put in to the text boxes. Note that the three hierarchy statements are each attached to one of the three text boxes:

var input1 = document.userInput.u1.value 
var input2 = document.userInput.u2.value 
var input3 = document.userInput.u3.value 

Next, the three input items that are returned from the three text boxes are given the variable names input1, input2, and input3. Please remember that when grabbing values from form elements, the use of the command value is very important at the end of the hierarchy statement.

Here the array is called on three times. (Password is the name assigned to the array, remember?) The array items pulled out will be equal to the three numbers entered by the user. Notice that each time, the variable names assigned to the user's choices are used within square brackets:

var pw1 = Password[input1]
var pw2 = Password[input2]
var pw3 = Password[input3]

This format works basically like a replacement. Whatever number the user put in will replace the variable name. So if the user put zero in the first box, input1 will be replaced by zero and the first letter of the array, p, will be returned. That happens three times, assigning the variables pw1, pw2, and pw3, for each of the text boxes:

var pw = pw1 + pw2 + pw3 
if (pw == pw1+pw2+pw3)
{location.href = pw+ ".html"}
}

Last but not least, the variable pw is created and given the value of the three variables put together.

An If statement asks if pw is equal to pw1+pw2+pw3. Of course it is. We just set it to that. Because it is, the commands location.href trigger, taking the user to the page name created by the user's three numbers plus .html.

Do that again . . .

The password for this script is 145. If you count in to the array to 1, you get j. Remember that the p is zero. Count to 4 and you get o. Count one more and you get e.

Put them all together, add .html, and you get the page name "joe.html". If you retry the password, you note that joe.html is the page you were sent to.

Pick the one you like. Each has its own merits, and each can be defeated. I actually like the first one I showed. It's simple, and it works.

[previous]

Created: August 9, 2002
Revised: August 9, 2002

URL: https://webreference.com/programming/javascript/goodies/chap6/8.html