Externa JavaScript

De flesta JavaScript är klientbaserade, vilket innebär att de körs direkt på besökarens dator utan att belasta servern. Det här är praktiskt bland annat när skriptet skall kontrollera att ett formulär är rätt ifyllt. Innehållet i formulären skickas inte till servern förrän allt är färdigt.

Men en del skript kan man med fördel placera på servern i stället. Som exempel kan vi ta följande situation:

Vi har en text som vi vill placera som ett slags fotnot längst ned på varje sida. Men vi vill inte lägga den texten i en ram, eftersom det i så fall skulle bli ramens placering som bestämde var texten hamnade. Nej, texten skall visas längst ned på varje sida, oavsett hur lång sidan är.

Men webbplatsen består av många sidor och vi vill ändra vår fotnot då och då – utan att behöva göra ändringarna på kanske 100 sidor. I det här läget erbjuder det externa skriptet en utmärkt lösning.

Minst två delar

Ett externt JavaScript består av minst två delar. Den ena är skriptfilen som ligger på servern, och den andra är anropet som finns på webbsidan.

Sedan kan vi använda ännu fler delar, till exempel ett onLoad i BODY-taggen eller ett anrop i BODY-elementet.

Men vi börjar med skriptfilen. Den skall skrivas som en ren textfil, till exempel i Anteckningar, och sparas med filtillägget *.js. Vi tar ett exempel:

function fotnot() 
{ 
document.write('<CENTER><P><FONT color="#FF0000">Nästa möte blir i föreningslokalen den 15 mars klockan 19.00 och kommer att handla om guppyförädling.<BR>Passa på att visa upp dina bästa avelsfiskar!</FONT></P></CENTER>'); 
}

Det här sparar vi som fotnot.js – observera att det inte skall finnas några SCRIPT-taggar i det här!

Nästa steg blir att anropa filen fotnot.js från sidan där texten skall visas.Det gör vi med genom att lägga in följande kod i HEAD-elementet på sidan:

<SCRIPT language="JavaScript" src="fotnot.js"></SCRIPT>

Om sidan som skall visa texten ligger i en annan mapp än fotnot.js, måste vi förstås justera sökvägen till filen. En praktisk variant är att redan från början skapa en mapp för externa skript, till exempel "exscript". Sökvägen kan då bli bland annat exscript/fotnot.js eller ../exscript/fotnot.js beroende på var sidan med anropet finns.

Sedan behöver vi något som ser till att skriptet verkligen körs. I det här fallet lägger vi detta "något", som i sig är ett skript, i BODY-elementet alldeles före den avslutande BODY-taggen:

<SCRIPT language="javascript1.1">
fotnot()
</SCRIPT>

Det här skriptet anropar SCRIPT-taggen i HEAD, som i sin tur anropar det externa skriptet och gör det som står där.

Resultatet blir det här (jag har inte placerat skriptet längst ned på sidan utan direkt i den här texten):

Samma text kommer att visas på alla sidor som innehåller SCRIPT-taggen i HEAD- och BODY-elementen.

När vi senare behöver byta texten i fotnoten, är det bara i fotnot.js som vi behöver ändra.

Visa nyheter – anropa från BODY-taggen

Anropet av det externa skriptet kan även placeras i den inledande BODY-taggen på en sida som öppnas med en länk:

<HTML>
<HEAD>
<TITLE>Nyhetssidan</TITLE>
<SCRIPT language="JavaScript" src="nyheter.js"></SCRIPT>
</HEAD>
<BODY onLoad="nyheter()">
</BODY>
</HTML>

När den här sidan öppnas, kommer den att hämta hela sitt innehåll från funktionen nyheter() i skriptet nyheter.js:

function nyheter() 
{ 
document.write('<CENTER><P><FONT color="#FF0000">Nästa möte blir i föreningslokalen den 15 mars klockan 19.00 och kommer att handla om guppyförädling.<BR>Passa på att visa upp dina bästa avelsfiskar!</FONT></P><P><A href="#" onClick="history.go(-2)">Stäng mötessidan</A></P></CENTER>'); 
}

Sidan som öppnas kommer att visa "nästa mötestid" och dessutom en länk som leder tillbaka till den här sidan. Observera att vi sätter värdet på onClick till history.go(-2) - med -1 öppnas nyhetssidan igen.

Pröva nyhetssidan här

Visa nyheter – anropa från BODY-elementet

Ett tredje sätt att anropa externa skript är att göra det från BODY-elementet. Koden nedan ger en sida som hämtar sitt innehåll från nyhet.js och skriptet anropas från ett extraskript i BODY-elementet. Det är meningslöst att lägga in annat innehåll, eftersom window.onload kommer att ersätta detta med innehållet i nyhet.js.

<HTML>
<HEAD>
<TITLE>Nyhetssidan</TITLE>
<SCRIPT language="JavaScript" src="nyhet.js"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="javascript1.1">
window.onload = nyhet;
</SCRIPT>
</BODY>
</HTML>

Använd externa skript med förnuft. Det finns ingen anledning att köra alla skript från servern. Men om du använder ett stort skript på många sidor, kan det här vara en bra lösning.

En extrabonus är att när besökaren högerklickar på sidan som använder det externa skriptet, och väljer "Visa källa", kommer han inte att se skriptet utan bara anropet av det. Därmed blir det betydligt svårare för honom att knycka dina bästa skript.

Slutligen

Det här var sista avsnittet i JavaScript-skolan. Jag hoppas att du har haft nytta av den, och att du nu kan betydligt mer om JavaScript än när du började med det första avsnittet.

Tycker du att den här skolan är bra? Då kan du tipsa dina bekanta om den genom att lägga en länk på din hemsida. Kopiera koden nedan och lägg den på länksidan där du vill visa bilden.

Bilden är liten – bara 130x37 pixlar (1,56 kB) – och hämtas automatiskt från SupportData.Net. Den visas alltså inte förrän du kopplar upp dig.

<A href="http://www.supportdata.net/skolor/jshand/" target="_top"><IMG border="0" src="http://www.supportdata.net/links/linkbild/jslink.gif" hspace="1" vspace="1" width="130" height="37"></A>

Föredrar du en vanlig textlänk? Adressen är http://www.supportdata.net/skolor/jshand/.

© SupportData.Net