When it comes to a more or less sophisticated web site, a major headache is how to manage a numbre of similar pages with slightly different contents. Usually all those pages are generated on the server side by PHP, ASP, JSP or whatever else server-side engine. Server-side applications always use page layout templates, which are filled with a particular content on every client's request. If your web space comes from your local ISP along with the Internet access or you have a free hosting account somewhere else, normally you don't have the opportunity to run your own server-side applications on those premises. And if your web activity is not a vital part of your business, there's no point to apply for a paid hosting.

Here's a cost-free solution for that issue. All major web clients (browsers) act as program interpreters for JavaScript. Therefore you can keep JavaScript HTML templates on your web site rather than static HTML pages, and let web browsers do all that page building job. That works fine.

I call this kinda stuff "Client-Side JavaScript Templates" or JST, considering this approach is much similar to that on the server side (PHP, ASP, JSP etc.).

Actually JST is a bunch of JavaScript string constants and string-returning functions used as building blocks for web pages. The document.write() method called from within HTML files brings the templates up to the web pages.

How does it look like? Like this tutorial pages.

Generally, the JST technique uses the only write() method of the document object. Since all state-of-the-art browsers do this method fine, the actual problem is writing a good HTML to be generated, that works in the same way in different browsers. However, if generated HTML is a lot sophisticated, some browsers (like Netscape versions prior 6) may get screwed up due to their buggy nature. Also the time of processing JST may go up drastically. So I find it reasonable to get rid of older browsers and provide a simplified code for Netscape 4.xx. A regular client sniffer (like those used for DHTML pages) is good for this purpose. I use this one, by the way.

It's a good idea to test pieces of HTML code in their static version first before translating them into JST. And remember: a single pyto in JavaScript code always brings the whole thing down.

There are three sorts of code examples on these pages: HTML, JavaScript and CSS. Though cascading style sheets are not a mandatory part of JST, it is considered to be a good habit to use them wherever possible.

The code samples here are highlighted as following: JavaScript code, HTML code and CSS code.

All the examples are shown in pop-up windows. If your browser or some other program blocks pop-ups you may need to fix that problem first.

Either you did understand the above or not, please welcome to the next page anyway.