Klickbara bilder Lägg in skriptkoden på sidan

JavaScript - inledning

JavaScript, använt med måtta och omdöme, är ett härligt sätt att skapa liv och interaktivitet i webbsidan. Eftersom JavaScript är ett stort och mångsidigt område, delar jag det här avsnittet i flera delar. Här och längst ned på sidan kan du växla fram och tillbaka mellan de olika delarna.

Det här är en HTML-skola. Att inom ramen för denna grundligt lära ut hur man skriver JavaScript går inte - det kräver en hel skola till. Vi kommer att titta på hur en del enklare skript är uppbyggda, för att du skall få ett begrepp om vad JavaScript är. Du kommer också att lära dig hur du skall lägga in koden på din hemsida.

Du kan fördjupa dina kunskaper om JavaScript genom Handbok i JavaScript och genom att med den som handledning läsa de olika skripten, så att du förstår vad de gör. Att läsa och förändra JavaScript-koden är, som när det gäller HTML-koden, det bästa sättet att lära sig.

Vad är JavaScript

JavaScript är ett så kallat interpreterat skriptspråk, alltså ett tolkat språk där skriptraderna körs i tur och ordning. En viktig fördel med detta, jämfört med kompilerande programspråk, är att javaskriptets kod är lätt att ändra - faktiskt lika lätt som när du ändrar koden i en vanlig HTML-sida.

Skriptkoden läggs in direkt i HTML-koden. Naturligtvis finns det regler för hur detta skall göras, men du behöver inget speciellt program för det. Precis som din vanliga HTML-kod, skriver du javaskriptkoden direkt i din textredigerare.

Ett enkelt exempel

Vi börjar direkt med ett enkelt exempel på ett mycket kort JavaScript, inbakad i HTML-koden. 

<HTML>
<HEAD>
<TITLE>Mitt första JavaScript</TITLE>
</HEAD>
<BODY>
<P>Den här sidan uppdaterades senast
<SCRIPT LANGUAGE="JavaScript">
document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>

Om du öppnar den här sidan i webbläsaren kommer följande att visas på skärmen:

Den här sidan uppdaterades senast 09/23/2000 10:51:26

I koden ovan ser du de båda viktigaste taggarna i JavaScript:

  • <SCRIPT ...>
    Den här taggen talar om för webbläsaren att det som nu följer skall behandlas som ett skript. Genom att lägga till attributet LANGUAGE="JavaScript" talar vi dessutom om vilken typ av skript det gäller.
  • </SCRIPT>
    Den här taggen säger att webbläsaren nu skall återgå till att behandla sidans innehåll som vanlig HTML.

Nästan all skriptkod skall läggas mellan taggarna <SCRIPT> ... </SCRIPT>.

JavaScript är skiftlägeskänsligt

Till skillnad från den vanliga HTML-koden är JavaScript skiftlägeskänsligt. Om vi ändrar koden ovan till Document.write(document.lastModified); fungerar skriptet inte. Javaskripttolken förstår inte detta Document som är skrivet med stort D. När koden inte fungerar som du har tänkt dig, bör du först av allt kontrollera att stora och små bokstäver sitter på rätt plats.

Olika versioner av JavaScript

JavaScript förekommer i en rad versioner som stöds av olika webbläsare. Hittills finns fyra versioner:

  • JavaScript 1.0 stöds av Netscape 2.0 och Internet Explorer 3.0
  • JavaScript 1.1 stöds av Netscape 3.0 och till större delen av Internet Explorer 4.0
  • JavaScript 1.2 stöds av Netscape 4.0 och till större delenav Internet Explorer 4.0
  • JavaScript 1.3 stöds av Netscape 4.06 och Internet Explorer 5.0

I de fall då det behövs anger man versionen i den inledande SCRIPT-taggen, till exempel så här:
<SCRIPT LANGUAGE="JavaScript1.2">

Att gömma JavaScript

Om besökarens webbläsare saknar stöd för JavaScript (eller om skripttolken är avstängd) och dessutom inte förstår SCRIPT-taggen, kan du råka ut för att din kod visas i klartext på sidan. Detta kan du förebygga på följande sätt - de nya raderna i rött:

<HTML>
<HEAD>
<TITLE>Mitt första JavaScript</TITLE>
</HEAD>
<BODY>
<P>Den här sidan uppdaterades senast
<SCRIPT LANGUAGE="JavaScript">
<!-- Göm skriptet för gamla webbläsare
 document.write(document.lastModified);
// Sluta gömma skriptet -->
 </SCRIPT>
</BODY>
</HTML>

Alla webbläsare som kan tolka JavaScript inser att de röda raderna är kommentarer och hoppar helt enkelt över dem.

Men Hallå!!!

Om besökarens webbläsare inte kan tolka JavaScript, kommer ju raden "Den här sidan uppdaterades senast" ändå att visas!

Javisst, men det fixar vi genom att ändra litet i koden, så här:

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Göm skriptet för gamla webbläsare
document.write("Den här sidan uppdaterades senast " + document.lastModified);
// Sluta gömma skriptet -->
</SCRIPT>
</BODY>

Observera mellanslaget mellan senast och " - det gör att senast och datum inte skrivs ihop.

Nu möts besökaren i stället av en helt tom sida, och det är inte heller bra. Något bör ju finnas där, och det ordnar du på det här sättet:

<NOSCRIPT>
<P>Din webbläsare klarar inte JavaScript-spelet på den här sidan.<BR>
Gå till <A HREF="din_sida_utan_skript.html">den här sidan</A> i stället.</P>
</NOSCRIPT>

Taggen <NOSCRIPT> ... </NOSCRIPT> hoppas över helt av alla webbläsare som kan tolka JavaScript.

Besökaren möts nu av den här texten:

Din webbläsare klarar inte JavaScript-spelet på den här sidan.
Gå till den här sidan i stället.

Använd kodmappen

Den kodmapp jag föreslog i övningsuppgiften till Klickbara bilder har du nytta av nu. Spara dina JavaScript där, med filnamn som tydligt anger vad skripten gör. Tillsammans blir de snart ett mycket användbart skriptbibliotek.

Klickbara bilder Lägg in skriptkoden på sidan

© SupportData.Net