Lect 09.13 CISC103
Suppose we want to build a web site with a table that shows
the conversion of a few numbers from decimal to binary.
We might want the table to have two columns, like this:
Decimal Binary
0 0
1 1
2 01
3 11
4 100
5 101
etc.
We can build that table with the following HTML:
Note the use of the following elements:
table
tr (nests inside table) table row
td (nests inside tr) regular table cell
th (also nests inside tr) table header
Decimal to Binary
| Decimal | Binary |
| 0 | 0 |
| 1 | 1 |
| 2 | 10 |
[ Fill in three more rows of HTML here... ]
(see binaryTable.html)
We can improve the appearance of the table by adding
three attributes:
border="10"
cellspacing="3"
cellpadding="2"
As you already know, attributes are added into the
opening tag... in this case, the opening tag for the
table element.
[Invite a student to change the opening tag properly for 1 extra
class participation point].
[Experiment with changing each of the values, 10, 3, and 2
to a very large value (e.g. 100) to see what each one refers to.]
Now... that is kind of tedious.
Shouldn't the computer be able to generate this page for us?
That is where JavaScript can help.
Consider the following script. The document.write() method
writes something into the resulting HTML. We can use this
to generate the six lines of HTML that before, we had to code by
hand.
The beauty is that we can change one number, and make the table as
large as we wish.
[Demonstrate that].
Furthermore, we can make it responsive to user input...
[We will demonstrate that on Thursday.]
Next topic: CSS "Cascading Style Sheets"
For now, just a quick demo/motivation.