CMSC 104, Spring 2011

Homework 3 Part Two

Your First JavaScript Program

Out: Monday, April 4
Due: Wednesday, April 6, before 11:59 p.m.

Note: No late projects will be accepted.

The Objective

To learn to create and run JavaScript programs
To become familiar with syntax error messages generated by the JavaScript error console.

The Task

Before you begin working on the assignment, you must set up your account so that no one else can see your Web page while you are working on it. You will only be able to access your page by typing in a username and password. The only people who will be able to access your page are you, me and the graders for the class. You *must* do this step before you begin working on your page. Note that when you type in your password for the script nothing will show up on the screen, just type it and hit enter. Type the following command at the linux prompt:

linux2[12]% /afs/umbc.edu/users/d/b/dblock/pub/setup104

You should see something similar to the following:

linux2[12]% /afs/umbc.edu/users/d/b/dblock/pub/setup104
Creating new directory: /afs/umbc.edu/users/c/m/cmsc/pub/access
Using exising directory: /afs/umbc.edu/users/c/m/cmsc/pub/www
Using exising directory: /afs/umbc.edu/users/c/m/cmsc/pub/www/cs104
Using exising directory: /afs/umbc.edu/users/c/m/cmsc/pub/www/cs104/hw3
Using exising directory: /afs/umbc.edu/users/c/m/cmsc/pub/www/cs104/hw4
Using exising directory: /afs/umbc.edu/users/c/m/cmsc/pub/www/cs104/proj1
Using exising directory: /afs/umbc.edu/users/c/m/cmsc/pub/www/cs104/proj2
Using exising directory: /afs/umbc.edu/users/c/m/cmsc/pub/www/cs104/proj3

*********************************************************************
* Please enter a password other than your myUMBC/GL password below. *
*  This will be the password you need to access your pages online.  *
*********************************************************************

Creating new password file
New password:
Re-type new password:
Adding password for user cmsc
linux2[13]%

After you run the setup script, you will be asked for a password when you eventually look at your Web page for the assignment in the Web browser.
For the first part of the assignment, you must complete the program attached to this sheet (to be distributed in class) by filling in the blanks where pieces of code are missing.
After filling in the blanks, you are ready to move on to the second part of the assignment.
- Change into your hw3 directory. (cd ../pub/www/cs104/hw3).
- Use xemacs (xemacs hw3.html) to type in the JavaScript program. You should type the program in INCREMENTALLY!! Type it in EXACTLY AS SHOWN, including all spacing and indentation. Some exceptions:
  1. Insert YOUR name as the author.
  2. Insert YOUR username.
  3. Insert a heading of your choice on the page where it says "Heading for Your Page."
  4. You may add a <style>...</style> section to the head section of the page if you'd like to change the colors, fonts, etc.
- The program must be called hw3.html. It should be located in your pub/www/cs104/hw3/ directory. The grader will access your page directly from the given directory.

Using the JavaScript Error Console

The JavaScript error console will help you find errors in your program. To run the error console in Firefox, go to Tools->Error Console. It will bring up a separate window containing the error console. You should use the Clear button to clear the error console and then refresh your web page. If there are any problems with your JavaScript code, they should show up in the error console.

Sample Run

The URL for your page will be http://userpages.umbc.edu/~username/cs104/hw3/hw3.html, where username is your GL/myUMBC username. You should refresh the page several times and run the program with different sets of values. You can assume that the user will only enter numbers as input. See the project description online for some sample screenshots of the program.

<!DOCTYPE html>

<html>
  <head>
    <!-- File: hw3.html
         Name: Your Name
         Username: astudent1
         Date: 10/26/10
         Description:  This file contains a program that gets two numbers from the
                       user and displays some statistics about the numbers.
    -->
    <title>CMSC104 Homework 3</title>
  </head>

  <body>
    <h1>Heading for Your Page</h1>
    <script type="text/javascript">
      <!--
        var ___________;        /* The first number read in from the user */
        var ___________;        /* The second number read in from the user */
        var average;            /* The average of the two numbers */

        /* Read in and convert the first number from the user */
        ____________ = prompt("Enter a number: ");
        num1 = parseFloat(num1);

        /* Read in and convert the second number from the user */
        num2 = prompt("Enter another number: ");
        ____________ = parseFloat(___________);

        /* Display the results to the user */
        document.write("<p>You entered " + ___________ + " as your first number and ");
        document.write(____________ + " as your second number.</p>");
        ______________("<p>Here are some statistics about your numbers: </p>");

        /* Determine and display which number is larger */
        if(num1 > num2)
        {
           document.write(num1 +  " is larger than " + num2 + ".<br />");
        }
        else if(____________ > ____________)
        {
           document.write(____________ +  " is larger than " + ____________ + ".<br />");
        }
        else
        {
           document.write(num1 + " and " + num2 + " are equal.<br />");
        }

        /* Find and display the average of the two numbers */
        average = _____________________ / _____;
        document.write("The average of the two numbers is " + _____________ + ".");
    //-->
    </script>
  </body>
</html>

CMSC104