<%response.buffer=true%> <% yere = year(date()) Response.Expires = 0 %> JavaScript Intro

Creating a JavaScript Header

Writing a JS Header File: Frequently while developing, we build nearly identical navigational elements, for example, a horizontal nav with links, at the top and/or bottom of many pages. Wouldn't it be nice to be able to just “call” a header or footer at the appropriate place in the HTML page? Also, if I need to change a link across all pages, wouldn't it be nice to change it in one place? Kind of like a cascading style sheet? This exercise will allow us to create such a nav, or the start of one. This is a difficult exercise, but gets to the heart of what developers do every day with JavaScript and other scripting languages! I predict this will greatly improve your skills, in a short (but painful) period of time!

The link below is for the word document file we used in class as an instruction sheet for the exercise: JS Header Instructions

The template for the header (the model after which my example was created) looks like this:

My First Link

It is a simple table with a link. The link would be copied, and put back in the code repeatedly in JavaScript, as many times as I need links in the table. I ended up putting in 4 links in my "header" table, and the JS version of the code looks like this:

var link1URL = "default.asp";
var link1Name = "My CTN 162 Home Page";
var link2URL = "homework.asp";
var link2Name = "Homework Page";
var link3URL = "syllabus.asp";
var link3Name = "Syllabus Page";
var link4URL = "links.asp"; var link4Name = "Links Page";
var trColor = "#A9B1AA";
var fontColor = "#083194";
var header = "<table bgcolor=\"#000000\" align=\"center\" width=\"100%\">";
header = header + "<tr bgcolor=\"" + trColor + "\">";
header = header + "<td align=\"center\">";
header = header + "<a href=\"" + link1URL + "\"><font color=\"" + fontColor + "\" face=\"verdana\"><b>" + link1Name + "</b></font></a>";
header = header + "</td>"; header = header + "<td align=\"center\">";
header = header + "<a href=\"" + link2URL + "\"><font color=\"" + fontColor + "\" face=\"verdana\"><b>" + link2Name + "</b></font></a>"; header = header + "</td>";
header = header +"<td align = \"center\">";
header = header + "<a href=\"" + link3URL + "\"><font color=\"" + fontColor + "\" face= \"verdana\"><b>" + link3Name + "</b></font></a>";
header= header + "</td>"; header= header + "<td align= \"center\">";
header= header + "<a href=\"" + link4URL + "\"><font color= \"" + fontColor + "\" face= \"verdana\"><b>" + link4Name+ "</b></font></a>";
header = header + "</td>"; header = header + "</tr>"; header = header + "</table>";

Use the model above to create your own JS Header.  Remember that to include it in a page, you would use the variable name, header, and call it in the appropriate place in the page:

<script language="JavaScript"> document.write(header);</script>

The header should be stored in an include file, that allows the header to be called from multiple pages simultaneously.  The code to include an "include" file called "myheader.js" would look like:

<script language="JavaScript" src="myheader.js"></script>

This call to the include file would be in the "head" tag of the calling page.  Remember that NO SCRIPT TAGS can be ON/INSIDE the include file itself, as the script tag is considered to be on the calling page!!

Print this Page Back To Top

© 2000- <%=yere%> newMANIC INC, All rights reserved