Godt ord igen!

Denne artikel handler om, hvordan du kan strø om dig med smarte bemærkninger på dine websider.

Du kan også kalde eksemplerne for testannonce-rotatorer.

Jeg elsker citater, aforismer, taglines og den slags korte fyndord, der sætter ting på plads på en underfundig måde, og alligevel får én til at tænke sig om.

Jeg har derfor yndet at bruge dem på websider i forskellige sammenhænge, for lissom at live lidt op på noget ellers tørt og kedeligt stof. Du ser et eksempel her til højre. Citatet i boksen fornys hver gang siden indlæses. Kassen indeholder nemlig følgende script:

<script type="text/javascript">
index = Math.floor(Math.random() * citat.length);
document.write("<dl class='citatbox'>\n");
document.write("<dt class='citat'>" + "\"" + 
-->  citat[index] + "\"\n" +"\n");
document.write("</dt>");
document.write("<dd class='forfatter'>" + "-- " +
-->  forfatter[index] + "\n");
document.write("</dd></dl>\n");
</script>

Den første linie her gemmer vi lige et øjeblik, og kigger på resten:

De 5 document.write-sætninger udføres, når siden indlæses. Som altid, når det drejer sig om at læse andres JavaScript-kode kan det være praktisk at instantiere scriptet.

Instantiere betyder at se på eller udføre en instans – det vil sige en tilstand – af en proces, hvor mange tilstande er mulige.

Skræller vi document.write af scriptet, får vi noget forholdsvis normal HTML:

  <dl>
  <dt>citat[index]
  </dt>
  <dd>-- forfatter[index]
  </dd></dl>

For at nå frem til det resultat skal man vide, at man ikke kan bruge anførselstegn inde i en JavaScript sætning, medmindre escape-tegnet \ står foran. Det er også nødvendigt at vide, at \n betyder ny linie.

Så står vi tilbage med to markører – en dt og en dd, der indeholder noget rødt JavaScript-kode, som jeg ikke har "oversat". Men ved at betragte resultatet, kan du sikkert gætte, at citater[index] er identisk med et citat, mens forfatter[index] er identisk med et navn.

De to samhørende oplysninger hentes nemlig i to JavaScript Arrays, hvis udseende er følgende:

  citat = new Array(113);
  forfatter = new Array(113);
  citat[0] = "Første citat";
  forfatter[0] = "Første forfatter";
  citat[1] = "Andet citat";
  forfatter[1] = "Anden forfatter";
  citat[2] = "Tredie citat";
  forfatter[2] = "Tredie forfatter";
  ...
  ...

I modsætning til den sædvanlige måde at skrive sådanne Arrays på er de to Arrays her blandet sammen. Det har ingen betydning for funktionaliteten, men øger i dette tilfælde overblikket meget. Du skal huske, at et Array simpelthen er en beholder for et antal variabelværdier, en tabel om du vil med 1 række og et antal kolonner for værdier. Hver værdi har et nummer, svarende til placeringen i rækken, og startende med 0. Denne nummerrække kaldes sædvanligvis Arrayets index.

Et Array aftastes ved efter følgende model:

document.write(citat[15])

- der vil skrive det 16. citat (i og med at Arrayet starter med 0):

Nu er det ideen med citatsamlingen, at der skal præsenteres et nyt citat, hver gang siden indlæses. Det kan ske ved at vælge et tilfældigt citat, og det er det, der sker med den første linie i den første JavaScript boks herover:

  index = Math.floor(Math.random() * citat.length);

Math.random returnerer et tilfældigt tal mellem nul og 1. Det ganges med antallet af variabelværdier, der er indeholdt i citat.length. Dette tal rundes ned til nærmeste heltal med JavaScript-funktionen Math.floor(). index vil derfor have en tilfældig værdi mellem 0 og 113 (mit citat-array indeholder 114 citater).

Dagens fyndord

Herover ser du en citatboks, der minder meget om den første. Her er det viste citat imidlertid valgt på basis af datoen, og det samme citat bliver derfor vist hele dagen. Det er klart, at jeg her kun udnytter omkring en trediedel af mine 114 citater, fordi index-værdien aldrig kan komme over 31.

Denne ide er imidlertid brugbar til at præsentere dagsaktuelle oplysninger: Kendte personers fødselsdage, almanakdata (hvornår står solen op og går ned, hvilken fase er månen i osv.), skriftsteder og meget andet. Blot skal du huske, at du i så fald skal have et Array for hver af årets måneder med et antal variabelværdier, der svarer til antallet af dage i måneden. For at runde den sag af, giver jeg dig her et tip til, hvorledes du sikrer, at det korrekte Array automatisk bliver indlæst:

  temp=new Date()
  var maaned = temp.getMonth()
  switch(maaned){
  case 0:
  document.write("<script src=\"jancitater.js\"
  -->  type=\"text/javascript\"><\/script>")
  break;
  case 1:
  document.write("<script src=\"febcitater.js\"
  -->  type=\"text/javascript\"><\/script>")
  break;
  case 2:
  document.write("<script src=\"marcitater.js\"
  -->  type=\"text/javascript\"><\/script>")
  break;
  case 3:
  ...
  ...

Denne side er senest opdateret: 16. April, 2010