<%response.buffer=True%> <% function rw(str) response.write str end function function html(str) response.write(server.HTMLEncode(str)) end function function url(link,str) response.write "" & str & "" end function %> [CTN162:lessons | topics]
[CTN162: Lessons & Topics]

Day 3: Include Files/JS Header File

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. We will add to this, as the quarter goes on. Note: This is a more practical example of the techniques introduced in Project 3-2 from our book. This is a very 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:

JavaScript Header Instruction Sheet

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>";
© 2003 newmanic,   All rights reserved