Budgeting those Bytes

This page is not written as a javascript tutorial, but rather a lesson on how to use javascript to reduce the amount of code needed to write pages with lots of repeated snippets of code. I developed this idea to help table artists on WebTV cut file sizes in the range of 70 KB or 100 KB to more manageable file sizes. Html files of such large size often cause classic units to power off.

Here is the project page that I used to test this method. It is called Jack's Castle. The table that contains the table art has 225 columns and approximately 80 rows. To write that many empty cells in a table would take in excess of 40 KB. Each cell has colspan and background color attributes. I believe conventional table codes would require approximately 75 KB. The actual table codes are only 6.87 KB and the completed page including the necessary WebTV bug warning is 10.1 KB.

The script could actually have been one document.write argument. That would have trimmed even more bytes from the total, but editing would have become all but impossible.

Getting Started

The first step to writing such a script is to detemine how to break the normal html code into snippets that can be repeated. When scripting table art, it is easy to get lost, especially if you are using numerous cells with colspan. To "set up" a row with empty cells of the proper size use this snippet:
<td width=2 height=1></td>
We will define each snippet as a variable in our JavaScript. In the script, it is written like this:
var a="<td width=2 height=1></td>";
Height is not important. The width attribute establishes the columns in the table. More on what to do with it when we begin the script.

Now consider what snippets it will take to make your code. With tables you will need to have this:
<table cellpadding=0 cellspacing=0
Notice, I did not close the tag with the usual ">". More about that later. In the script, it is written like this:
var tab="<table cellpadding=0 cellspacing=0";
Now let's list a few more snippets that will be needed to write tables using my whacky codes. These should be enough to get us started:
var ro = "<tr>"; ro is my abbreviation for 'open row'.
var rch = "</tr><tr>"; rch stands for 'change row' (close one, open next).
var rcl = "</tr>"; rcl stands for 'close row'.
var tcl= "</table>"; tcl stands for 'close table'.
var dop = "<td colspan="; dop stands for 'open cell' -- note I included 'colspan='.
var dh = "height="; dh stands for 'height=' (cell height), which only needs to be defined once for each row.
var dbg = "bgcolor="; dbg stands for 'bgcolor='
var dcl = "></td>"; dcl stands for 'close cell' -- complete tag and close cell).

Writing the script

Every script must be identified as such -- begin your code:
<script language="JavaScript">
Add your variables:
A short working script with variables will be shown later in this tutorial.
If you want to keep the script in a form for easy editing, you should break it down into arguments to write small sections at a time. That requires many
document.write("your table codes");.
To cut down on the number of characters needed, do this:
Immediately after listing your variables start a loop with this
with(document){
and do not forget to close the loop with the curly bracket, }.
In between the brackets is where you put the arguments to "write" your codes. Since you told the browsers that everything begins with document , all you need to include is
write("your codes");
for each step.

 

For heaven's sake, tom !! Get on with it ..

OK, here we go with a working script. I will add comments to explain what the different parts mean:
<script language="JavaScript">
var a="<td width=2 height=1></td>";
// var a repeated 9 times will make 9 cells
var aa = a+a+a+a+a+a+a+a+a;
//var aa repeated 9 times will make 81 cells (9 X 9)
var aaa = aa+aa+aa+aa+aa+aa+aa+aa+aa;
var ro = "<tr>";
var rch = "</tr><tr>";
var rcl = "</tr>";
var tcl= "</table>";
var dop = "<td colspan=";
var dh = " height=";
var dbg = " bgcolor=";
var dcl = "></td>";
var dch="</td><td>";
var tab="<table cellpadding=0 cellspacing=0";
var wd=" width=";
//let's add some colors
var c1="333333";
var c2="cccccc";
var c3="887300";
var c4="ffd700";
//a spacer colspan=4
var sp=dop+"4"+dcl;
//let's start making some tables
//open with this
with(document){
//open table, open row, make 81 empty cells, change row
write("<center>"+tab+">"+ro+aaa+rch);
//now we have 81 cells centered on screen
/*let's make a roof for a building -- NOTE each line has a total rowspan of 81*/
write(dop+"40"+dh+"10"+dcl+dop+"1"+dbg+c1+dcl+dop+"40"+dcl+rch);
/* Row above == open cell #1 colspan=40 height=10, cell #2 rowspan=1 color 333333, cell #3 colspan=40, change rows. Each successive row writes a little larger cell with bgcolor and smaller empty cells on the sides. NOTE -- height can be defined in any cell of a row and only needs to be included in one cell. If included in more than one, the larger number will override all others.*/
write(dop+"39"+dh+"8"+dcl+dop+"3"+dbg+c1+dcl+dop+"39"+dcl+rch);
write(dop+"37"+dh+"6"+dcl+dop+"7"+dbg+c1+dcl+dop+"37"+dcl+rch);
write(dop+"34"+dh+"4"+dcl+dop+"13"+dbg+c1+dcl+dop+"34"+dcl+rch);
write(dop+"30"+dh+"2"+dcl+dop+"21"+dbg+c1+dcl+dop+"30"+dcl+rch);
write(dop+"25"+dh+"2"+dcl+dop+"31"+dbg+c1+dcl+dop+"25"+dcl+rch);
write(dop+"19"+dh+"2"+dcl+dop+"43"+dbg+c1+dcl+dop+"19"+dcl+rch);
write(dop+"12"+dh+"2"+dcl+dop+"57"+dbg+c1+dcl+dop+"12"+dcl+rch);
write(dop+"4"+dh+"2"+dcl+dop+"73"+dbg+c1+dcl+dop+"4"+dcl+rch);
write(dop+"81"+dbg+c1+dcl+rch);

/*Let's see what we have so far. To view the output of this code, click HERE.

Now let's build a wall. If you want brick or stone wall, make a basic unit with the same type of shorthand codes and name it as a variable (demo below). I have put a spacer on each side of the table.*/
write(sp+dop+"73"+dh+"5"+dbg+c4+dcl+sp+rch);
/*add a door and windows*/
write(sp+dop+"8"+dh+"40"+dbg+c4+dcl+dop+"10"+dbg+c1+dcl +dop+"11"+dbg+c4+dcl +dop+"15"+dbg+c1+dcl+dop+"11"+dbg+c4+dcl +dop+"10"+dbg+c1+dcl+dop+"8"+dbg+c4+dcl+sp+rch);
/*drop the windows out and complete the door*/
write(sp+dop+"21"+dh+"15"+dbg+c4+dcl+dop+"8"+dbg+c4+dcl +dop+"15"+dbg+c1+dcl+dop+"8"+dbg+c4+dcl+dop+"21"+dbg+c4+dcl+sp+rch);
}

/*Let's see what we have so far. To view the output of this code, click HERE.

Making patterns in a wall

By defining small "bricks" or other building blocks and repeating the codes, it is possible to make all sorts of patterns. Remember the outer walls in Jack's Castle?
Go HERE to see some ways to build a brick wall.

Byte Reduction of Friend's Page

My friend, Flo, made an interesting image line using an animated gif. It repeats the image 5 times in each of 13 lines (tables). That required 65 image source tags. Her code was well over 7 KB. I duplicated the page and put a button on it to access the code. You will find only one url for the image in my byte reduced version of 1.6 KB HERE.

My Scripts for PC and WebTV browsers:

Masking your email address.
Making an image line.
Byte reduction scripts.
Random page transitions.
Random image positioning.
Random page backgrounds.
Random midis, images, and other goodies.

Copyright © 2002 T R Landrum

HOME

Site Meter