Min anke vedr. document.write på hver linje gik nu egentlig på noget andet. I de fleste sprog er det, så vidt jeg ved (måske Erik kender undtagelser), fra hurtigere til dramatisk hurtigere at samle én streng og udskrive ét sted - i forhold til at udskrive linje for linje.
I JS går det således op til flere hundrede gange hurtigere at stoppe strenge i et array, som tilsidst join'es i en document.write:
var a = [];
a[0] = "<a href=\"side_1.html\">Side 1</a>";
a[1] = "<a href=\"side_2.html\">Side 2</a>";
a[2] = "<a href=\"side_3.html\">Side 3</a>";
a[3] = "<a href=\"side_4.html\">Side 4</a>";
document.write(a.join(""));
Jeg er ikke sikker, men jeg mindes et eller andet om, at ARRAY.push("string") kom en lille anelse langsommere ud af en test, jeg engang lavede. Derfor den valgte metode ... men det er absolut småting - hvis jeg overhovedet husker korrekt =)
På den anden side - hvis det stadig skal være en JS-løsning, hvilket jeg stadig ikke selv ville vælge - er det ganske rigtigt endnu bedre at bruge DOM.
Da vi alligevel om nogle år skal til at skrive XHTML, kan vi ligeså godt begynde at tilstræbe, vores scripts stadig er brugbare til den tid.
Det giver i hvertfald langt mere mening, end at gå ud af sit gode skind for at få sine dokumenter til at validere mod XHTML idag ... blot for at finde ud af, at alle ens scripts får bruseren til at gå ned med et hult drøn og en XML-fejl, når standarden hedder 2.0 og den er understøttet af browserne ;o)
jonat >> Lav en fil, du kalder menu.js
I den skriver du (uden script-tags eller noget):
var d=document;
var aMenuLinks = [
["page_1.html", "Side Et"],
["page_2.html", "Side To"],
["page_3.html", "Side Tre"],
["page_4.html", "Side Fire"]
];
function buildMenu() {
var oPar, oLnk, oTxt;
oPar = d.getElementById("menu");
for (var i=0; i<aMenuLinks.length; i++) {
oLnk = d.createElement("a");
oLnk.setAttribute("className", "menuLink");
oLnk.setAttribute("href", aMenuLinks[i][0]);
oTxt = d.createTextNode(aMenuLinks[i][1]);
oLnk.appendChild(oTxt);
oPar.appendChild(oLnk);
}
}
Så kan du importere denne menu i dine HTML-filer med:
<div id="menu">
<script type="text/JavaScript" src="menu.js"></script>
</div>
Du kan evt. teste med dette style-sheet:
<style type="text/css">
#menu {
width: 200px;
font: bold 14px verdana, sans-serif;
border: 2px solid #999999;
}
#menu a, #menu a:visited {
width: 188px;
height: 20px;
padding: 2px 0 0 10px;
display: block;
text-decoration: none;
color: #ffffff;
background: #999999;
border: 1px solid #cccccc;
}
#menu a:hover {
padding: 1px 1px 1px 9px;
text-decoration: none;
color: #666666;
background: #ededed;
border-color: #ffffff #333333 #333333 #ffffff;
}
</style>
