94
The factorial of a positive integer n (n >= 1) is given by the product n * ( n - 1 ) * ( n - 2 ) * ... * 1, where the multiplication by 1 can be omitted because it won't make a difference in our implementation. Also, the factorial of 0 is defined to be 1. The whole code will be shown first, and then we'll walk through it:
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Factorials Table</title>
- <meta charset="utf-8">
- <!-- CSS styling: -->
- <style type="text/css">
- table
- {
- border-spacing: 0;
- font-family: Consolas;
- font-size: 1.2em;
- text-align: right;
- }
- </style>
- <!-- JavaScript code: -->
- <script>
- var n;
- /* Starts table: */
- document.writeln( "<table>" );
- /* Table's head section: */
- document.writeln( "<thead style='background-color: red; color: yellow'>" );
- document.writeln( "<tr>" );
- document.writeln( "<th>n</th>" );
- document.writeln( "<th>n!</th>" );
- document.writeln( "</tr>" );
- document.writeln( "</thead>" );
- /* Table's body section: */
- document.writeln( "<tbody>" );
- for ( n = 0 ; n <= 20 ; ++n )
- {
- if ( n % 2 == 0 ) /* Starts new row with black background and white font: */
- {
- document.writeln( "<tr style='background-color: black; color: white;'>" );
- }
- else /* Starts new row with blue background and yellow font: */
- {
- document.writeln( "<tr style='background-color: blue; color: yellow;'>" );
- }
- /* First column of the current row: */
- document.writeln( "<td>" + n + "</td>" );
- /* Second column of the current row: */
- document.writeln( "<td>" + factorial( n ) + "</td>" );
- /* Finishes current row: */
- document.writeln( "</tr>" );
- }
- document.writeln( "</tbody>" );
- /* Finishes table: */
- document.writeln( "</table>" );
- /* Calculates n!: */
- function factorial( n )
- {
- var counter;
- var fact = 1;
- if ( n < 0 ) /* Invalid argument to function factorial. */
- {
- return -1;
- }
- else
- {
- if ( n >= 1 )
- {
- for ( counter = 2 ; counter <= n ; ++counter )
- {
- fact *= counter;
- }
- }
- return fact;
- }
- }
- </script>
- </head>
- <body></body>
- </html>
<!DOCTYPE html>
Line 3 starts the html tag,
<html lang="en">
Line 86 closes the HTML tag
</html>
Lines 4 through 83 specify the head element of the page.
<head>
. . . . .
</head>
Line 5 specifies the title of the page.
<title>Factorials Table</title>
Line 6 specifies the character encoding used.
<meta charset="utf-8">Lines 8-16 specify the styling of the page. In this page, we only style the table element as follows: the spacing in the border is chosen to be 0; the font-family is Consolas, but we could have specified more fonts in case the user doesn't have such font; the font-size is chosen to be 1.2em; and, finally, the text is chosen to be aligned to the right inside each cell of the table. More characteristics of the style are specified with inline styles through the JavaScript code, as we'll see soon.
Expand|Select|Wrap|Line Numbers
- <style type="text/css">
- table
- {
- border-spacing: 0;
- font-family: Consolas;
- font-size: 1.2em;
- text-align: right;
- }
- </style>
As for the rest of the code, we have as follows. Line 19 contains the declaration of n - the variable whose factorial will be calculated. It will vary from 0 to 20. Line 21 output the markup for the beginning of the table, finished in line 57. Lines 25-30 output the table's head section, 33-53 output the table's body, calling function factorial for each value of n.
