J. Blustein

Web-centric Computing

Assignment 2: Javascript Multiplication Table

Contents

Purposes

  1. To gain experience with the basics of the following WWW technologies:
  2. To prepare for a later accessibility assignment.

Dates

Officially Assigned
Sat. 03 Oct.
Due
Wed. 14 Oct.

Description

Create a webpage that uses Javascript (aka JScript or ECMAScript) and XHTML tables and forms to produce a multiplication table for arbitrary integer values.  The values will be entered by the user.

Choose one browser (Firefox ≥ 3.5, Opera version ≥ 10; Internet Explorer version ≥ 8, for example) to implement your multiplication table program.  You must specify which browser it is designed for in the webpage.  Your webpage will be tested with that browser if it is available in the laboratories in the Goldberg Computer Science building.

Your Javascript program must get input from a form and using popup prompt()s.

You need to get three values from the user: (a) the first number to go across the top (and down the side) of the table (b) the maximum number to go across the top (and down the side) of the table (c) the step value.

Example

The skeleton code for the table your program will produce should look like the following.

    <table>
     <thead>
      <tr>
        <th><!-- empty --></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
     </thead>
     <!-- no tfoot in this table -->
     <tbody>
      <tr>
        <th>1</th> <!-- TH is for header -->
        <td>1</td> <!-- TD is for data -->
        <td>2</td> <!-- (data) -->
        <td>3</td> <!-- (data) -->
      </tr>
 
      <tr>
        <th>2</th> <!-- (header) -->
        <td>2</td> <!-- (data) -->
        <td>4</td> <!-- (data) -->
        <td>6</td> <!-- (data) -->
      </tr>
 
      <tr>
        <th>3</th> <!-- (header) -->
        <td>3</td> <!-- (data) -->
        <td>6</td> <!-- (data) -->
        <td>9</td> <!-- (data) -->
      </tr>
     </tbody>
    </table>
   

The skeleton code (above) encodes a table that looks like:

1 2 3
1 1 2 3
2 2 4 6
3 3 6 9

With a few CSS rules, that can look like:
screenshot of table from above

The basic algorithm to create the contents of the tbody part of the table above is

   start ← 1; // as input from user
   stop  ← 3; // as input from user
   step  ← 1; // as input from user

   print_header_row(start, stop, step, indent);
   for (row ← start; row ≤ stop; row ← row + step) {
     start_row();
     print_as_heading(row);
     for (col ← start; col ≤ stop; col ← col + step) {
        print_as_data(row × col); // row multiplied by col
     }
     end_row();
   }

Note that the basic algorithm above will only work for cases where the step value is positive. The solution you write will need to be general enough to work with all integers from −1024 to +1024. Such values are well within the range that JavaScript can accomodate[*].

Help

Tips & Suggestions

Grading

The criteria given above (in the Description) are the baseline (B flat) for the assignment.  Anything you do on top of those will increase your overall points for this assignment such as sensible use of CSS, error handling.

Your webpage must include a clear explanation of all of the features you have incorporated into the assignment.  If something is not clearly listed then the grader will not be responsible for finding it.  All of these criteria are reflected in a draft of the grading form (in PDF).

Some Possible Bonuses

Submission Instructions

  1. The grader or I will be checking the files from your home directory on your server, but you will need to turn-in a copy for the record too.  You will use the submit program for that official copy.
  2. You will be submitting an entire directory of files electronically.
  3. The files you submit must all be in a directory named 2-tab.
  4. Your webpage must be named 2-tab.html.
  5. You may name the other files whatever you like.
  6. Be sure that your name and student number are in all program source code files and XHTML pages.
  7. Be sure that your webpage clearly says which browser and version it is intended for.  If the marker doesn't know which browser to use and your program doesn't work on the browser he/she chooses then your program does not work and you will lose many marks.
  8. turn in all the files in your 2-tab directory using the /opt/bin/submit program on torch.
    1. Before you run the program, make sure that your current directory is the parent of the directory you will be submitting. For example, if your assignment is in your ~/cs3172/2-tab/ directory then use cd to make ~/cs3172 your current directory before you run submit.
    2. When submit prompts you for a file or directory name, input 2-tab.

Endnotes

JavaScript's Number.MAX_VALUE
Mozilla Foundation [Corporate author].
MAX_VALUE - MDC.
<URL: http://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number/MAX_VALUE>.
Page last modified 18:04, 10 Apr 2007 by Mgjbo.
Downloaded on 03 Oct. 2009.
(Note that the example is a classic, for many programming languages, of how not to test for potential overflow.)

http://www.cs.dal.ca/~jamie/course/CS/3172/assig/2-Table/MultTable/2-multiJS.html