Create Templates using JavaScript

Introduction

If you know something about JavaScript then you may remember that you can use document.write to write text into a HTML file - including any HTML tag:

     document.write("Hello World This is a text")

So we can use JavaScript to write a html file:

     document.write("<html><head><title>Create Templets by Using JavaScript</title></head>")
     document.write("<body>")
     document.write("<h3 align='center'>This is a html file created by using JavaScript</h3>")
     document.write("</body></html>")

Imagine you have to write a number of web pags and want to keep them same colors, same font face and size, same navigator menu, same banners and same contact information. You may wonder if you should create a template to keep your pages in the same style and reduce your typing. In case that one day you need to change the look of your pages, you just need to change the templete page.

There are many ways to create a templete. Using JavaScript is one of easiest ways. Let me show you how to do that. To keep things simple, let's use the sample code above.

First, we divide the code into three parts:

Header:

     document.write("<html><head></head>")
     document.write("<body bgcolor='#ffffff'>")

Content:

     document.write("<h3 align='center'>This is a html file created by using JavaScript</h3>")

Footer:

     document.write("</body></html>")

Let's copy the first part and save it as a .js file "header.js". Then we copy the third part and save it as "footer.js". finally, we create a html file "test.htm" and do coding as below:

     <script language="JavaScript" src="header.js"></script>
     <h3 align="center">This is a html file created by using JavaScript</h3>
     <script language="JavaScript" src="footer.js"></script>

Now that's it. Open a browser and test it. You can see the output is the same as a pure html file is. This is just a very simple sample.

You can write more things into "header.js" and "footer.js", including navigator menu, your company banners, contact information, attributes, and CSS classes. The below is an example:

header.js:

     document.write("<head>")
     document.write("<title>3A Web Design</title>")
     document.write("<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>")
     document.write("<meta name='author' content='Nongjian Zhou'>")
     document.write("<style type='text/css'>")
     document.write("<!--")
     document.write("h1		{color:#ee9933; font-size:24px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("h2		{color:#ee9933; font-size:18px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("h3		{font-size:16px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("h4		{font-size:14px; font-family: 'New Times Roman'}")
     document.write("p		{font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("pre 	{color:#994400; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif}")
     document.write("a:link 	{text-decoration: none}")
     document.write("a:hover {text-decoration: underline; color: #FF0000}")
     document.write("-->")
     document.write("</style>")
     document.write("</head>")
     document.write("")
     document.write("<table width='100%' height='100%' border='0' cellspacing='0' cellpadding='0'>")
     document.write("<tr><td colspan='2' height='120' align='center' bgcolor='#eeeeee'>")
     document.write("<h1>3A Web Design</h1>")
     document.write("<pre><div align='right'>Updated:" +document.lastModified+"&nbsp;&nbsp;&nbsp;&nbsp;</div></pre>")
     document.write("</td></tr>")
     document.write("<tr><td rowspan='2' align='center' valign='top' width='180' bgcolor='#eeeeee'><br>")
     document.write("<table width='140' align='center' valign='top' cellspacing='2' cellpadding='5'>")
     document.write("<tr><td bgcolor='#dddddd'>") 
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='aboutUs.htm'><b>About Us</b></a></p>")
     document.write("</td></tr>")
     document.write("<tr><td bgcolor='#dddddd'>")
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='services.htm'><b>Our Services</b></a></p>")
     document.write("</td></tr>")
     document.write("<tr><td bgcolor='#dddddd'>")
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='works.htm'><b>Our Works</b></a></p>")
     document.write("</td></tr>")
     document.write("<tr> <td bgcolor='#dddddd'>")
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='clients.htm'><b>Our Clients</b></a></p>")
     document.write("</td></tr>")
     document.write("<tr><td bgcolor='#dddddd'>")
     document.write("<p>&nbsp;&nbsp;&nbsp;&nbsp;<a href='contactUs.htm'><b>Contact Us</b></a></p>")
     document.write("</td></tr>")
     document.write("</table>")
     document.write("</td>")
     document.write("<td align='center'><table width='95%' height='100%'><tr><td>")

footer.js:

     document.write("</pre></table></td></tr><tr><td valign='bottom' height='50'>")
     document.write("<hr><pre>3A Web Design @ 2000, All Rights Reserved</pre>")
     document.write("</td></tr></table>")
     document.write("")
     document.write("")

test.htm:

     <script language="JavaScript" src="header.js"></script>
     <h3 align="center">This is a html file created by using JavaScript</h3>
     <script language="JavaScript" src="footer.js"></script>

You can divide a template into as many parts as you want. Let's say you can cut it into: "header", "footer", "content" and "main" and create four .js files: header.js, footer.js, content.js and main.js.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here