Hi
In a small project, it doesn't matter much if you put javascript in the HTML like you do, or if you call some function. But for a bigger project, you should try to seperate logic/data and it's presentation. It's about how easy it is maintaining things later.
For example, I see you set some text in the status bar. Most modern browsers hide it, so later, you might want to change it to tooltip text instead.
Another example is if you want to get rid of frames. Pages with framesets has a problem. You can't link to a page and expect all the frames to get the right content. Another problem is that clicking back and forward doesn't always work well.
A template system is a solution to these problems. It's usually used by server side scripts, but you can do it with Javascript as well.
Template systems can be complicated - maybe overkill? But it's possible to write it so it's a lot easier to maintain, without using a template system.
Here's an example:
Code:
var cities = [
{
name : "Paris",
description : "Capital of France",
picture : "images/paris.png",
homepage : "http://paris.fr",
infopage : "paris.html"
},
{
name : "London",
description : "Capital of Great Britain",
picture : "images/london.png",
homepage : "http://london.co.uk",
infopage : "london.html"
}
};
for ( var i=0 ; i<cities.length ; i++ ) {
var city = cities[i];
document.write("<span class='cityName' title='" + city.description + "'>" + city.name + "</span>");
document.write("<img src='" + city.picture + "' onmouseover='showCityInfo(" + i + ")' onmouseout='showCityInfo(0)'>");
document.write("<a href='" + city.homepage + "'>Go to homepage</a>");
}
function showCityInfo(cityNumber)
{
if (!cityNumber) {
//what to do on mouseOut?
}
var city = cities[cityNumber];
// frameset way:
document.frames.cityInfoFrame.src = city.infopage;
// or load the info in a div instead:
$("#cityInfoDiv").load(city.infopage);
}
This is just "pseudocode". But this way, it's a lot easier to change things. You want to try with or without the information in a frame? You can change it in one place and it works for all cities. You don't want the description as tooltip over the name? Again, there's only one place to change that. More cities? More information about each city? Again, it's all easy to change. If this was all HTML with inline javascript to do things, a simple change can be very difficult.
