Password Protecting Your Web Pages  pwp home  >   Reference Library  >   Advanced  >  Protecting Your Pages

Using JavaScript to provide password protection can be accomplished in two steps. The first step is to create a JavaScript function that asks the visitor for the password, and the second step is providing a means of invoking or calling that function.

The following JavaScript code creates the function that will be used to prompt the visitor for a password, then checks to see if the password entered was correct. If the visitor enters the correct password, they'll be taken to the password protected page. If the visitor enters the wrong password, they'll get an "Error 404, Not Found" error, and they'll not be able to see your protected page. This function should be placed in the HEAD section of your page.

<SCRIPT LANGUAGE="JavaScript"> <!--HIDE FROM NON-JAVASCRIPT BROWSERS function checkPass() { var passWord //define the password variable passWord = prompt("Please Enter Your Password",""); //display a prompt window to allow visitor to enter password passWord = (passWord + ".htm"); //add .htm to the password to create a page name window.location.href = passWord; //go to the password protected page guest.htm } //--> //end of script hiding </SCRIPT>

Now... let's take this script apart line by line to see what each line does:

The first line identifies the script as a JavaScript, while the second line is the beginning of a comment line that is used to hide the JavaScript code from browsers that don't support JavaScript. If you don't use a comment to hide the JavaScript code, the code will be displayed in those browsers that don't support JavaScript, ruining the appearance of your page.

The next line that begins with "function" is used to begin the definition of this script and give it a name. In this case the function is called "checkPass" (please note that function names are case sensitive, you must use proper capitalization when invoking or calling a function).

The line that begins with "var" defines a variable called "passWord" (please note that variable names are also case sensitive in JavaScript). The two slashes ("//") and text at the end of this line is the method by which JavaScript allows you to add comments to your script, which can be very useful when trying to figure out what a line is supposed to do.

The first line that begins with "passWord" is used to display a prompt window that allows the visitor to enter a password. The code for the prompt box accepts two pieces of information. The first piece of information, in this case "Please Enter Your Password", defines what will be displayed as the text of the prompt window, while the second piece of information (a null value "" in this case) defines what will be displayed in the actual box of the prompt window where the visitor types in the password. Although you can omit the second part, it's wise to include it because if you don't, the message "" will be displayed in the box, which can confuse some visitors.

The second line that begins with "passWord" takes the visitor's input from the prompt window and adds ".htm" to it to create the name of the page that the next line will link to. In the case of this example, the page that the visitor will be taken to should be named the same as the password. If the password is "guest", then the visitor will be taken to a page called "guest.htm". Again, since page names on the WWW are case sensitive, the visitor must enter the correct mix of upper and lower case letters in order to be taken to the password protected page.

The next line that starts with "window" tells the browser to load the page name that's held in the variable "passWord". If the visitor entered the correct password, they'll be taken to the protected page. If the visitor enters the password incorrectly, they'll get an "Error 404, Not Found" error and will not see the protected page.

The line that has "}" all by itself tells the browser that there are no more instructions to process for this function.

The next line is the end of the comment that is used to hide the JavaScript code from browsers that don't support JavaScript, and the last line is the ending tag for the SCRIPT tag.

Now that the JavaScript function for processing the password has been defined, it's necessary to provide a way of calling or invoking this function. This is done by using the HREF link tag, but instead of linking to a page, you would use the HREF tag to call the function. Here's how you'd do that:

Go to my <A HREF="JavaScript:checkPass()">private page</A>

This JavaScript function is a simple, yet effective way of providing password protection for a web page. While not very elegant and not the only solution, it is one of the easiest ways to allow only certain people access to a web page. For more information on JavaScript, be sure to check out some of the sites that can be reached from the www.nuthinbutlinks.com page.