S.B.C.C. -> Computer Science -> Courses -> COMSC 111 -> Class Notes

JavaScript Example: Age Checker

The following JavaScript is a simple example used to illustrate several concepts. Among the concepts illustrated are: The actual JavaScript is given by purple fixed width type. The explanation that follows is given in normal type. The program is included in the body of the HTML document so I will not explain the HTML tags needed to create the skeleton of the document. All of this JavaScript is included in the body of the document.

The Algorithm

 
This program is used to get an age value and then check to see if a person is older than 21 or not. If they are then the program prints out that they can drink, if not, then it prints out that they cannot drink.

One difference between this algorithm and the code is that the code gets the age and validates it. This shows that you can do algorithm design on many levels. Try to shoot for enough detail to get the point across but not to do every single step. However, it's better to err on the side of too much detail than not enough.
 

The Code

The first line of the example is the script tag.

<script language="JavaScript">

This tag indicates that what follows is JavaScript. I didn't use "JavaScript1.1" because we are not using any 1.1 specific features. The next line is

var age;

This is a declaration of the variable age to be used later. This is actually optional but I've got it on there for completness.

if((age = prompt("What is your age?", "")) != null)
  {
  ... block 1, done if the condition is true ...
  }
else
  {
  ... block 2, done if the condition is false ...
  }

The if statement combines assignment with comparison. The inner parens (the ones containing the "age =" portion) put up the prompt dialog. The dialog is shown below.

The first string in the prompt function is what shows up above the dialog entry box. Notice that the top of the dialog says "JavaScript Application". This is always there and you cannot get rid of it. It is placed there so that people cannot use JavaScript in an unscrupulous manner. The second argument of the prompt function is the default value that is placed in the box. Since we have put a blank string in it, nothing is put in the entry dialog.

Once something is placed in the prompt dialog and the "OK" button is pressed, then that value is placed into the age variable. If a person presses the cancel value then nothing is placed into the age variable and the value of age is null. Null means nothing (NOT ZERO) and is a special value in JavaScript. After age is filled in, with either a value or null, it is compared to null. If it isn't null, then something has been entered and the block 1 JavaScript is executed. If the cancel button has been pressed than the JavaScript in block 2 is executed.

Block 1 Code

If something has been entered in the dialog box then the Block 1 code is executed. This takes the age and compares it against 21. If the age is greater than or equal to 21 then the "Drink" message is printed. If it is less than 21 then the "No Drink" message is printed. The code is shown below:

  if(age >= 21)
    {
    document.write("<b>Drink</b>");
    }
  else
    {
    document.write("<b>No</b> Drink");
    }

Block 2 Code

If the cancel button is pressed then the "You must answer!" message is printed. This is shown below.

  document.write("You <b>must</b> answer!");

The final line is a tag which closes off the script block.

</script>

Try It

Try the JavaScript.

Last Updated: March, 1998
Author: Dean Nevins <dn@picard.sbcc.cc.ca.us>