0% found this document useful (0 votes)

42 views

Javascript Templa

Uploaded by

Zi Xi

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

42 views

Javascript Templa

Uploaded by

Zi Xi

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 1

13.

8M
Sign up for our free weekly Sign in ×
Web Dev Newsletter.

Search for articles, questions, tips

articles Q&A forums stuff

lounge ?

Create
Templates using
JavaScript
Cookie Policy

Nongjian Zhou, 27 Nov 2000

4.13 (45 votes)
Rate this:

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:

Hide Copy Code

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

So we can use JavaScript to write a

html file:

Hide Copy Code

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:

Hide Copy Code

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

Content:

Hide Copy Code

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

Footer:

Hide Copy Code

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:

Hide Copy Code

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:

Hide Shrink Copy Code

footer.js:

Hide Copy Code

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:

Hide Copy Code

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
TWITTER FACEBO
OK

About the Author

Nongjian Zhou
www.itechcollege.com
East Timor

Senior Web Specialist.

Read my other articles for

beginners on iTechCollege.com:

PHP For Beginners

JSP For Beginners
ASP For Beginners
ASP.NET For Beginners
SQL For Beginners
AJAX For Beginners
HTML For Beginners
Javascript For Beginners
CSS For Beginners
FTP For Beginners
XML For Beginners
C++ For Beginners