An HTML library with JavaScript

This is very basic and almost completely unrelated to this manual, but it’s here for your enjoyment. If it ever gets fleshed out properly to work with self-nesting tags like <li> we’ll publish a full a treatment of it in The Elektrum Review.

It also has a limitation as it stands. It writes the output directly. This means you can’t nest functions or the output will come out in inverse order. This means <table>s can’t be done, for example. The path to absolution would be to create a write() that wrapped document.write() or something like that. Having it written directly though is quite nice so that’s not how we’ve done it, so far, below.

/*
  Code from "Developing Featherweight Web Services with JavaScript"
      http://feather.elektrum.org/
  (c)An Elektrum Press, retain this notice
      License: http://feather.elektrum.org/appendix/licenses.html
*/

// ONLY covers nesting tags so far, does no validation of attributes

var Code = '';
var tags = supportedTags();
for ( var i = 0; i < tags.length; i++ ) {
 Code += 'var ' + tags[i] +
   "= function () {\n" + funcSkeleton( tags[i] ) + "}\n\n";
}

function supportedTags () {
 return [ 'div' ,'p' ,'span'
          ,'h1' ,'h2' ,'h3' ,'h4' ,'h5' ,'h6'
          ,'b' ,'i' ,'u' ,'sup' ,'sub'
      ];
}

eval(Code);

function funcSkeleton ( tag ) {
  var Code = "var args = new Array();\n" +
"  for ( var i = 0; i < arguments.length; i++ ) {\n" +
"    args.push( arguments[i] );\n" +
"  }\n" +
"  var attr = new Array ();\n" +
"  if ( ( args.length > 0 ) && ( args[0] != undefined ) " +
" && args[0].constructor == Array ) {\n" +
"    var argList = args.shift();\n" +
"    for ( var i = 0; i < argList.length; i += 2 ) {\n" +
"      attr.push( argList[i] + '=\"' +\n" +
"                 ( argList[i+1] || '' ) + '\"'\n" +
"                );\n" +
"    }\n" +
"  }\n" +
"  var showAttr = attr.length > 0 ? ' ' + attr.join(' ') : '';\n" +
"\n" +
"  document.write('<" + tag + "' + showAttr + '>');\n" +
"\n" +
"  document.write( args.join(' ') );\n" +
"  document.write('</" + tag + ">' + \"\\n\");\n";

  return Code;
}

Live tests

h1("Big title");
p("A plain para.");
h3("Subtitle me");
p([ 'style', 'border:1px dashed green'],
  "A styled paragraph.");

div( b('some'), i('nested'), u('markup') );

// This demonstrates the problem of writing w/i functions
p( b('some', i('really', u('nested') ) ) );

« Code for the Query() class · Major changes and errata »