	Introduktion Nyhedsgrupper Netikette
OSS for d.e.i.webdesign

ECMAScript (tidligere JavaScript)

Hvordan laver jeg en scroller?

Alle brugere, der anvender en browser med java-script slået til, er på et eller andet tidspunkt stødt på en side, hvor der kørte en tekst i statuslinien på deres browser.
Normalt bevirker dette at statuslinien ikke kan bruges, men det er rent faktisk muligt at lave en scroller, der ikke er helt så generende.

Eftersom redaktørerne af denne OSS finder scrollere generelt irriterende, er der lavet en separat side hvor den demonstreres og hvor der findes instruktioner i brugen.

Hvordan får jeg automatisk indsat datoen for sidste opdatering?

Problemet med at anvende ECMAScript til dette er umiddelbart: Hvis læseren ikke har slået det til, vil læseren ikke se noget.
Derudover eksisterer der servere, der ikke vil oplyse datoen for sidste opdatering.

Den hurtige

En simpel udgave er blot at indsætte følgende i bunden af siden:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--
document.write("Sidst ændret: " + document.lastModified)
//--></SCRIPT>

Hvis serveren er villig til at give disse informationer, vil det resultere i en linie som nedenstående:

Så du intet ovenfor, har du sandsynligvis ikke ECMAScript slået til.

Ovenstående metode giver et dårligt resultat, såfremt læseren anvender Internet Explorer 4.0 eller Netscape Navigator 4.0. Begge disse browsere producerer datoer af formen 05/4/98 19:05:48), der ikke særlig optimal, da det kan tolkes forskelligt. Er det den 5. april eller den 4. maj, det drejer sig om?

Browsere som Opera eller IE3.0 giver resultatet i form af: Mon, 4 May 1998 20:05:48 GMT eller Fri Jun 05 07:42:45 1998 .

Et bedre alternativ

Det er naturligvis ønskværdigt at præsentere datoer på en utvetydig måde. Dette ordnes med følgende script:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function makeArray()
{
  arg = makeArray.arguments;
  for (var i = 0; i < arg.length; i++)
    this[i] = arg[i];
}

daMod = document.lastModified;
if (daMod.indexOf("70") != -1)
  {
    // Hvis fildatoen er før 1-1-1970 kl. 01.00.00
    // (som hos get2net) så crasher Netscape 3.x
    // og MSIE 3.x ved brug af Date-objektet.
    // Da årstallet må være 70 - er fildatoen
    // alligevel forkert. Derfor skrives:
    document.write("Last update: Ikke understøttet af serveren");
  }

daMod = Date.parse(daMod);
if (daMod <= 1000 * 60 * 60)
  {
    // Nogle browsere f.eks. Opera før v. 3.5
    // understøtter ikke Date.parse().
    // Las os blot skrive fildatoen:
    document.write("Last update: " + document.lastModified);
  }
else
  {
    m = new makeArray("januar", "februar", "marts", "april", "maj",
                      "juni", "juli", "august", "september", "oktober",
                      "november", "december");
    daMod = new Date(daMod);
    document.write("Sidst opdateret: " + daMod.getDate() + ". ")
    document.write(m[daMod.getMonth()] + " ");
    year = daMod.getYear();
    year = (year < 1000) ? 1900 + year : year;
    document.writeln(year);
  }
//-->
</SCRIPT>

Såfremt læseren anvender Opera eller en anden browser, med dårlig understøttelse for parse i Date, vil læseren blot få udskrevet datoen i browserens defaultformat.
Har browseren derimod ordentlig understøttelse for parse, vil resultatet være af formen 10. juli 1998.

Din browser giver følgende:

Peter H.S. Madsen

Hvordan får jeg et billede til at ændre udseende, når jeg peger på det?

Den viste metode burde være kompatibel med alle browsere: Hvis browseren ikke understøtter dynamisk udskiftning af billeder vha. ECMAScript, vil billedet blot bevare sit oprindelige udseende.
Vær opmærksom på at IE 3.0 ikke understøtter denne udskiftning.

Denne metode er testet med IE3.0 NT, IE4.0 NT, NN4.0 NT og Opera 3.21 NT.

Indsæt følgende i din HEADer:

<SCRIPT LANGUAGE="JavaScript"><!--
if (!(document.images)) version = 'nodo';
else {
  version = 'ok';

// ** Aktive billeder **
// Ret Image(64, 64) til den rigtige billedstørrelse og
// ret "pic/dyn1on.jpg" til det billede, der skal anvendes
// når linket er aktivt
  i1on = new Image(64, 64);  i1on.src = "pic/dyn1on.jpg";
  i2on = new Image(64, 64);  i2on.src = "pic/dyn2on.jpg";

// ** Inaktive billeder **
// Som ovenfor skal størrelserne og referencerne rettes
  i1off = new Image(64, 64);  i1off.src = "pic/dyn1off.jpg";
  i2off = new Image(64, 64);  i2off.src = "pic/dyn2off.jpg";
}

function on(imgName) {
  if (version == "ok") {
    imgOn = eval("i" + imgName + "on.src");
    document ["i" + imgName].src = imgOn;
  }
}

function off(imgName) {
  if (version == "ok") {
    imgOff = eval("i" + imgName + "off.src");
    document ["i" + imgName].src = imgOff;
  }
}

//--></SCRIPT>

I selve dokumentet angives de forskellige links med tilhørende billeder på følgende måde:

<A HREF="link1.html" onMouseover = "on('1'); return true"
 onMouseout = "off('1'); return true"><IMG SRC="pic/dyn1off.jpg"
 WIDTH=64 HEIGHT=64 BORDER=0 ALT="Test 1" NAME="i1"></A>
<A HREF="link2.html" onMouseover = "on('2'); return true"
 onMouseout = "off('2'); return true"><IMG SRC="pic/dyn1off.jpg"
 WIDTH=64 HEIGHT=64 BORDER=0 ALT="Test 2" NAME="i2"></A>

Såfremt din browser understøtter ovenstående, skulle billederne nedenfor gerne skifte udseende, når de aktiveres:

Note ang. validering

Ovenstående metode anvender attributten NAME i <IMG ...>, hvilket ikke er tilladt ifølge HTML 4.0 standarden. Eftersom en browser skal ignorere ukendte attributter, burde dette være uskadeligt, men nogle mennesker bryder sig ikke om at få valideringsfejl alligevel. Det kan kompenseres for dette på to måder:

Den lette, men fuskede
Skriv <IMG ...> vha. Ecmascript-funktionen document.write. Den resulterende HTML vil stadig være ukorrekt, men da der endnu ikke eksisterer validatorer, der tolker ECMAScriptene på HTML-sider, vil du få en "ren" validering.
Den besværlige, men korrekte
I stedet for at referere billederne vha. deres navne (i eksemplet ovenfor i1 og i2, kan man angive dem i array'et af images, altså document.images[x].src = nytbillede, hvor x er indexværdien for det billede, der skal skiftes.
Denne metode er mildest talt besværlig, da scriptet skal rettes hvis man indsætter nye billeder på siden.

Hvordan laver jeg et link til forrige side?

Inden du benytter dette trick, så overvej om det overhovedet er nødvendigt. Praktisk talt alle browsere har allerede en en back-knap.

Den simple måde at lave dette på er <A HREF="javascript:history.back()">Tilbage</A>, men denne metode er temmelig uheldig, hvis læseren ikke kører med JavaScript slået til. En bedre løsning, foreslået af Peter H. S. Madsen, er kun at vise linket, såfremt JavaScript er slået til:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!--
document.write('<P><A HREF="javascript:history.back()">Tilbage<\/A><\/P>');
// --></SCRIPT>

Såfremt du anvender en browser med JavaScript slået til, skulle der gerne præsenteres et link til forrige side her: her

OSS for d.e.i.webdesign