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.
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:
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[*].
Your optional textbook (Programming the World Wide Web (fifth edition) by Robert W. Sebesta) is a good source of background and examples.
See the forms and Javascript examples, the staff of
the Learning Centre or your prof.
The following examples are likely to be most helpful:
form input example, andprompt input example.You do not need to become a Javascript expert for any assignment in this course.
If you've never used Javascript before then the Javascript websites section of the resources list could be good place for you to find enough information to make your program work.
If you are looking for a book to learn Javascript from then JavaScript: The Definitive Guide from the Safari e-book collection or the book (or books) in the DOM part of the book list might help you too.
For examples of good table markup you should see the HTML 4.01 standard (especially section 11.4: Table rendering by non-visual user agents).
th elementThe 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).
text-align and
border-collapse properties in particularem,
ex) and sizes (small,
large, etc.) for
alphanumeric content.
Pixels (px) are acceptable for images.
See
§4.3.2 Lengths,
§4.3.3 Percentages,
and
§15.7 Font size: the
font-sizestatic positioning could earn you a
substantially higher grade than the baseline.head of the XHTML
document instead.
2-tab.
2-tab.html.
2-tab.
Number.MAX_VALUEPage last modified 18:04, 10 Apr 2007 by Mgjbo.
