Skinny JavaScript -- Fast!

JavaScript programs launched from your Web browser's favorite bookmarks can achieve amazing special effects. You can enlarge fonts, change colors, and even reveal hidden form field values. These "bookmarklets" can be as long as 2000 characters in some browsers (IE5), yet barely 500 in others (IE6). The most impressive bookmarklets dynamically build their own HTML, CSS and JavaScript right in your browser. I used to lament that HTML is so bulky... Until I finally did something about it!

I wrote a JavaScript library that enables you to render large HTML and CSS constructs using extremely tight JavaScript code. Although there are literally hundreds of supporting functions jammed into this compact library (which weighs in at under 5K when www.brainjar.com's "crunchinator" removes the comments and white space), all are named after the HTML tags, attributes and cascading style sheet (CSS) properties you already know. Truly, there are only six categories to learn:

1. Conveniences (write, status, alert...)
   
2. Containers (DIV, SPAN...) that enclose content
   
3. Tags (IMG, INPUT...) that are "empty"
   
4. Attributes (NAME, TYPE...)
   
5. Properties (color, font...) inline or embedded styles
   
6. Entities (nbsp, quot...)

The HTML generators (#2-4) return xml-ready code for you with lowercase tag/attribute names and quoted literals. The examples cited above use their corresponding JavaScript names.

Containers (#2) are called on strings just like JavaScript's built-in bold function. Tags (#3) and attributes (#4) are implicitly called on the window object, and thus need no dot notation at all.

HREF('http://www.yahoo.com')
yields:
href="http://www.yahoo.com"

TITLE('Yahoo!')
yields:
title="Yahoo!"

The leading space is not a typo. It just anticipates concatenation with other attributes for easy inclusion into tags and containers (#3-4).

'Yahoo!'.A(HREF('http://www.yahoo.com')+TITLE('Yahoo!'))  
yields:
<a href="http://www.yahoo.com" title="Yahoo!">Yahoo!</a>

At this point, you might be thinking, "The JavaScript code is exactly the same size as the intended HTML!" I'll get to that, but first...

IMG(SRC('images/yahoo.gif')+ALT('Yahoo!'))    
yields:
<img src="images/yahoo.gif" alt="Yahoo!" />

HR()
yields:
<hr />

"Big deal!" you say. "Saving only one or two characters?" Yes, but container (and tag*) functions can also be called on arrays. This encloses each array element. And chained functions can wrap earlier constructs.

[1,2,3].TD().TR().TABLE()
yields:
<table><tr><td>1</td><td>2</td><td>3</td></tr></table>

Combine this with a few variables, and you can see why it works so well.

b=INPUT(TYPE('button')+NAME('day'));
w=[b,b,b,b,b,b,b].TD();
c=[w,w,w,w,w,w].TR().TABLE();

This construct is actually the basis of a JavaScript calendar component I built. In just three statements, c gets assigned 1875 characters of HTML!

"Is TITLE a link attribute (#4) or is it a document title (#2)?" Well, it's both!

TITLE('hint')
yields:
title="hint"

'home'.TITLE()
yields:
<title>home</title>

Similarly, STYLE can define an inline style attribute (#4) or contain embedded CSS code (#2). And, speaking of CSS code...