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+" </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> <a href='aboutUs.htm'><b>About Us</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td bgcolor='#dddddd'>")
document.write("<p> <a href='services.htm'><b>Our Services</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td bgcolor='#dddddd'>")
document.write("<p> <a href='works.htm'><b>Our Works</b></a></p>")
document.write("</td></tr>")
document.write("<tr> <td bgcolor='#dddddd'>")
document.write("<p> <a href='clients.htm'><b>Our Clients</b></a></p>")
document.write("</td></tr>")
document.write("<tr><td bgcolor='#dddddd'>")
document.write("<p> <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.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
