Click here to Skip to main content
11,713,482 members (83,220 online)
Click here to Skip to main content

Create Templates using JavaScript

, 27 Nov 2000 114.7K 30
Rate this:
Please Sign up or sign in to vote.
There are many ways to create a web page templete. Using JavaScript is one of easiest ways

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

Share

About the Author


You may also be interested in...

Comments and Discussions

 
QuestionNew to javascript Pin
Member 116738207-May-15 18:29
memberMember 116738207-May-15 18:29 
GeneralA better way Pin
Arch4ngel27-Nov-05 23:52
memberArch4ngel27-Nov-05 23:52 
Generalpages on the fly Pin
allia7-Sep-03 13:15
memberallia7-Sep-03 13:15 
GeneralRe: pages on the fly Pin
Anonymous28-Apr-04 2:00
sussAnonymous28-Apr-04 2:00 
GeneralOther methods Pin
Philippe Lhoste24-Oct-00 1:38
sussPhilippe Lhoste24-Oct-00 1:38 
GeneralRe: Other methods Pin
Hockey12-Jul-02 15:34
memberHockey12-Jul-02 15:34 
GeneralSearch Engines use meta data... Pin
Craig Henderson19-Oct-00 5:22
sussCraig Henderson19-Oct-00 5:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150819.1 | Last Updated 28 Nov 2000
Article Copyright 2000 by Nongjian Zhou
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid