Article

Skinny JavaScript -- Fast!

Page: 1 2

Both the capitalized attribute functions (#4) and lowercase property functions (#5) are called implicitly on window. To avoid confusion with subtraction, the hyphenated property names employ underscores in their JavaScript function names (caveat: since top is a pre-existing browser object, I use _top as a kludge for this critical css property).

color('red')
yields:
color: red;

width(25)
yields:
width: 25;

In the earlier calendar example, the buttons may not be square. Using attribute-like css support, it's easy to inline the exact button dimensions.

x=25;  
s=WIDTH(x)+HEIGHT(x)+STYLE(width(x)+height(x));  
b=INPUT(TYPE('button')+NAME('day')+s);  
w=[b,b,b,b,b,b,b].TD();  
c=[w,w,w,w,w,w].TR().TABLE();


This bit of JavaScript now generates 4185 characters of flawless HTML! Some browsers will accept the WIDTH and HEIGHT attributes right inside of the button's INPUT tag (NS4.x), yet others require the width and height in an inline STYLE. Having both makes this code cross-browser. Also, variable x makes it trivial to resize the buttons. You might prefer x=30.
Alternatively, these styles could be embedded. A style function called on a css selector string (or array) accepts a properties parameter.

x=25;  
s='table tr td input'.style(width(x)+height(x)).STYLE();    yields  
<style>table tr td input{ width: 25; height: 25; }</style>

If important, this will reduce the size of the generated output. But be sure to embed stylesheet s before rendering calendar c! Or would you prefer an external stylesheet?

LINK(REL('stylesheet')+TYPE('text/css')+HREF('cal.css'))    yields  
<link rel="stylesheet" type="text/css" href="cal.css" />


Inline, embedded, or external. However you develop it, I support it.

The HTML entities (#6) are not actually functions. Regard them as string constants. You’ll find that quot and acute can help you build those syntactically "challenging" content strings.

muse='Francis Edward Smedley: '.B();
muse+=(quot+'All'+acute+'s fair in love and war.'+quot).I();


XML enthusiasts will be glad to know that additional functions can be added simply by invoking the HTML() constructor as seen in the library's final statement. Its three parameters are specified quite simply: In the first parameter, CONTAINER/Tag/attribute items (delimited by spaces) are cased upper, proper or lower to produce the appropriate functions. In the second parameter, css property families (delimited by semicolons) are appended with colons and their dependents (delimited by commas). Finally, the third parameter lists named entities (delimited by spaces).

HTML('LANGUAGE COPYRIGHT DESCRIPTION LINK');
HTML('URL IMAGE ITEM CHANNEL RSS version');
rss='My Blog'.TITLE();
rss+='en-us'.LANGUAGE();
rss+='Copyright 2003 by Richard Renfrow.'.COPYRIGHT();
rss+='Favorite RSS feeds'.DESCRIPTION();
rss+='list.rss'.LINK();
img='Me!'.TITLE()+'myPic.jpg'.URL()+'home.html'.LINK();
rss+=img.IMAGE();
itm='Blog'.TITLE()+'RSS'.DESCRIPTION()+'blog.rss'.LINK();
rss+=itm.ITEM();
rss=rss.CHANNEL().RSS(VERSION(0.92));


Last but not least, the convenience functions (#1) make it very easy to write a string, display it in the status line or popped up as an alert. During development, you might insert several .alert() calls into your JavaScript code to see exactly how your constructs are built. For greater interactivity, you can prompt for content or simply confirm intermediary constructs. The last three lines above could be augmented thus...

do {  
itm='Blog'.prompt('Blog title?').status().TITLE();  
itm+='RSS'.prompt('Blog description?').DESCRIPTION();  
itm+='blog.rss'.prompt('Blog feed url?').LINK();  
rss+=itm.ITEM().confirm();  
} while (confirm('Add another?'));  
rss=rss.CHANNEL().RSS(VERSION(0.92)).prompt('paste as list.rss');


* When a tag function is called on an array, the desired tag precedes each array element. I elected to do this for simplicity in labeling a horizontal radio button group.

['daily','weekly','monthly'].INPUT(TYPE('radio')+NAME('frequency'))

Enjoy!!

If you liked this article, share the love:
Print-Friendly Version Suggest an Article

Sponsored Links

Rate This Article

  • 1
    Poor
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    Great

Post A Comment

You need to be a member of the SitePoint Forums to comment on this post. Sign Up

Already a member? Post using your SitePoint Forums account: