CSCI 101: Intro to Computer Science

Lab 5.1: JavaScript and HTML

There are several ways to insert JavaScript instructions into HTML code, here you will learn one of them. Basically, the HTML document itself has to satisfy the general conventions.

Very often JavaScript instructions are splitted into small units called functions. The functions just tell the computer what to do in case if they will be called. Usually the functions are stored in the header of the HTML document, although they can be also put in other places.

The JavaScript instructions have to be put between the opening <script type="text/javascript"> and closing </script> tags.

All the JavaScript instructions between the opening and closing tags have to be hidden from the browsers that do not support JavaScript. You can achieve this by putting then as HTML comments, i.e. between . JavaScript comments start with //. Therefore, the general rules for JavaScript that we will follow in this course are the following:

 
<html>
<head>
<title> .... </title>

   <script type="text/javascript">
   <!-- JavaScript goes here
   .........................
   .........................
   // JavaScript comments
   .........................
   .........................
   // another JavaScript comment
   .........................
   .........................
   // JavaScript ends here -->

</head>

<body>
   .........................
   .........................
   .........................
   .........................
   .........................
</body>
</html>

We proceed with designing a password protected access to a webpage.

Open an HTML document and type in the following lines into its body:

<form name="login">
   Username: <input name="username"><br>
   Password: <input name="password" type="password"><br>
   <input type="button"  value="Login" onclick="checkLogin()">
   <input type="reset">
</form>

This way, you have created a form with two input fields for entering a username and a password. The form named login goes between the opening and closing form tags and its name will be used later. The input windows are created in the second and the third lines of this code. Note that the input windows also got names username and password respectively.

The fourth line of this code is responsible for the left button. As you can see, the text Login will appear on this button. Another important feature provided by this code line is that the function checkLogin() will be called if one clicks this button. This function (to be designed below) verifies if the entered login and the password are correct and displays a "secret" page. The fifth line of the code creates another button that cleans up the input.

Try how this script works by entering some text into the input windows and erasing it by clicking the corresponding button. You will get a JavaScript error reported at the bottom line of your browser if you click the Login button. This is natural, because the function checkLogin() is not implemented yet. This will be done at the next step.

Now, type in the following text into the header part of your HTML document as explained above:

<script type="text/javascript">
   <!-- JavaScript goes here
   function checkLogin()
   {
      var myForm = document.login;
      if (myForm.username.value == "hidden" && 
          myForm.password.value == "page")
          window.location.href = "hiddenpage.html";
      else
          alert("Unknown username or wrong password");
   }
   // JavaScript ends up here  -->
</script>

As you can see this is the declaration of a function that actually checks if the user entered a valid username and password. The function uses a variable myForm (remind that JavaScript is case-sensitive!) that is in this case just a substitute for a longer text document.login and is done for our convenience only. The entire checking is provided by the conditional if statement. In the first line of this if statement we check if the username value is hidden AND (provided by &&) the password string is page. If both strings match their prescribed values then the document hiddenpage.html will be displayed in the current window. Of course, you have to create this document in advance, otherwise the browser will report an error that this document is not found. Create some simple HTML file with the name hiddenpage.html for testing purposes.

If the username or password is wrong then an alert will be displayed instead of the protected page. The function checkLogin() uses some standard JavaScript terms such as document, value, window.location.href, and alert. However, the form name login and the form input fields names username and password are under out control.

The above method does not really protect your webpage from a non-authorized access, because everybody can view the source for this script and figure out what webpage is actually protected. To obtain a better protection modify the function checkLogin() as follows:

<script type="text/javascript">
   <!-- JavaScript goes here
   function checkLogin()
   {
      var myForm = document.login;
      window.location.href = myForm.username.value + 
                             myForm.password.value + 
                             ".html";
   }
   // JavaScript ends up here  -->
</script>

In this case the name of the protected webpage is constructed directly from the entered username and password. For that the username hidden, password page, and .html strings are concatenated together (by using the + operation) to form the protected document name hiddenpage.html. Only those who know the right parts of the document name (i.e. the right username and password) can access the protected page. All users who end up with a wrong document name will get an error "Page is not found" provided by the browser.