Client-Side JavaScript Templates

Let's start with examples. If you're not familiar with JavaScript yet, please check my "References" page for tutorials.

Here's the first primitive example with no particular use:

<html> <head> <title>Example 1</title> </head> <body> <h1>Example 1: Generated HTML</h1> <script language="JavaScript">  </script> <p>This is regular HTML</p> </body> </html> show

String variable myWorld stores a piece of text. Function makeHeader() takes some text as parameter and returns that nested in h2 element. The document.write() method puts whatever is its parameter (virtually any valid JavaScript expression) into its actual place within the HTML code. Easy, right?

Note that in JavaScript both single (') and double (") quotes, whatever comes first, may be used as delimiter for string literals.

The idea is quite simple: we keep all reusable JavaScript code in a separate file, linked to all pages that use this code. Altering code within a single file results in changing of appearance of every page. Moreover, since that external file normally is cached, there's no need for browser to download it for every new page. It just picks up a copy from its cache. The same is true for external CSS files.

Say there are two files to be linked to a web page: a JavaScript one myjs.js and a style sheet mystyle.css. External JavaScript must be linked before any references to its functions and variables. Wise men often do that within the head element. Also this is the only place to link to external style sheet.

<html> <head> <title>My Title</title> <link rel=stylesheet type="text/css" href="mystyle.css" title="mytitle"> <script language="JavaScript" src="myjs.js"></script> </head> ...

If linking more than one external JavaScript file, make it in the right order. All those files make up a continuous stream of code. You've got an error if a function or a variable is defined in the second file and used in the first one. As for CSS, it looks like in most cases the title attribute may be dropped off with no visible damage.

Here's a simple HTML table with a single cell inside:

It is assumed that CSS class myclass has already been defined either using the style tag or in an external style sheet.

Now, let's make a JST for that table. It's gonna be a function that returns the table's HTML code. In order to make the code any useful, let's pass cellpadding and class attributes and the table's contents to the function as parameters:

function oneCellTable(contents, cellPadding, cssClass) { var s = '<table border="0" cellpadding="'; s += cellPadding; s += '" cellspacing="0"><tr><td class="'; s += cssClass; s += '" align="center">'; s += contents; s += '</td></tr></table>'; return s; }

The next file is style sheet:

body {background-color: silver;} td {font-family: Arial, sans-serif; font-size: 20pt; color: blue;} td.td1 {background-color: black;} td.td2 {background-color: yellow;} td.td3 {background-color: fuchsia;} td.td4 {background-color: aqua;}

And the third one is HTML page:

<html><head><title>Example 2</title> <link rel=stylesheet type="text/css" href="ex02.css"> <script language="JavaScript" src="ex02.js"></script> </head> <body> <h1>Example 2: Using the table template</h1> <script language="JavaScript">  </script> </body></html> show

Wouldn't you like to translate this into regular HTML?

You may say that all this stuff could be successfully stored in a single HTML file. That's right. But this is done this way in order to make the template available for all pages of the web site. Naturally, JavaScript and CSS files must be linked to HTML files that use the template. Actually, for the time being, we can do without CSS, just setting the background color through td's bgcolor attribute instead of class.