SupportData.Net JavaScript från början

Ett meddelande

Nu vet du vad jag menar med meddelanderuta.

Meddelanderutan kan vara användbar i många sammanhang. Man bör dock vara återhållsam med att använda dem, eftersom många meddelanderutor som poppar upp i alla möjliga sammanhang kan uppfattas som irriterande.

Inte heller den här lilla rutan kräver något skript annat än i BODY-elementet. Jag har använt en vanlig länk, men lagt till ett javaskript i den:

<A HREF="#" onClick="alert('Det här är en meddelanderuta')">Börja med att klicka här</A>

onClick="alert('Det här ...')"
Som du ser har jag använt händelsehanteraren onClick igen. Jag har lagt till förklaringen av vad som skall hända vid klicket: Öppna meddelanderutan (den heter "alert" på engelska) och visa texten "Det här är en meddelanderuta".

Brädgårdstecknet # medför att länken inte försöker öppna någon annan sida.

Det går bra att öppna meddelanderutor från knappar också. Nedan har jag använt samma kod som i förra avsnittet, men ändrat i onClick-koden:

<FORM> <INPUT type="button" value="Pröva!" onClick="alert('Du klickade på knappen')"> </FORM>

HEAD-elementet
Så här långt är det väldigt enkelt att använda meddelanderutor. Men nu kan det vara dags att lägga till ett javaskript i HEAD-elementet, så att vi kan leka litet med meddelanderutan.

Redan när du öppnade den här sidan, visades en meddelanderuta. Den är gjord med ett javaskript som jag har placerat i HEAD-elementet, för att rutan skall visas innan själva sidan laddas. Koden ser ut så här – sedan jag har städat bort allt som inte har med saken att göra:

<HTML> <HEAD> <TITLE>SupportData.Net JavaScript från början - meddelanderutan</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD>

<SCRIPT LANGUAGE="JavaScript"> ... </SCRIPT>
Vi inleder och avslutar alla "HEAD-skript" med de här taggarna. Det talar om för webbläsaren att det är ett skript som komnmer och vilket språk skriptet använder.


De här båda raderna gör att äldre webbläsare, som inte hanterar javaskript, hoppar över hela skriptet i stället för att visa raderna på skärmen.

alert('Här kommer mer om JavaScript!');
Och det här är själva javaskriptet. Som du ser har det exakt samma utformning som den allra första skriptkoden på den här sidan. Den enda skillnaden – bortsett från texten som visas – är att jag har lagt till ett semikolon (;) på slutet.

Detta semikolon är inte absolut nödvändigt just här, men jag använder det ändå. Det anger att "här slutar en kodrad". Det jag skriver i koden efter detta semikolon, kommer att behandlas som en ny kodrad. Jag skulle till exempel kunna ändra raden till:

alert('Här kommer mer om JavaScript!'); alert('Är du beredd?');

eller

alert('Här kommer mer om JavaScript!'); alert('Är du beredd?');

Båda metoderna fungerar lika bra, men koden blir mer lättläst om du skriver den på två rader.

Finessen med att sätta ut detta semikolon även där det inte behövs är, att när du lägger till fler kodrader (bygger ut skriptet) glömmer du inte bort att använda semikolon. Avsaknad av semikolon där de faktiskt behövs är nog det nästa vanligaste felet – efter felaktiga citationstecken – när javaskript inte fungerar, och rejält svårt att hitta!

Vad händer?
När besökaren klickar på OK-knappen i den första meddelanderutan, öppnas en ny, och först efter ett klick på den andra OK-knappen visas sidans innehåll. Det kanske är bäst att hålla meddelanderutan borta från HEAD-elementet, trots allt ...

Kommentera skriptet

Men vi backar en aning och tittar på koden en gång till, nämligen den rad som gömmer skriptet för äldre webbläsare - <!-- Göm skriptet.

Det spelar ingen roll vad du skriver i den här raden, eftersom alla webbläsare helt enkelt hoppar över den. Därför kan du använda raden till att kommentera skriptet och du kan lägga flera sådana rader efter varandra.

Kommentarerna kan tala om vem som har gjort skriptet, eller helt enkelt förklara vad skriptet gör. Det kan se ut så här:

<SCRIPT LANGUAGE="JavaScript">    </SCRIPT>

Som du ser har jag satt en "avslutning" på de båda första raderna. Avslutningen på den tredje raden kommer först i slutet av skriptet.

Om du vill lägga in kommentarer i själva skriptet, kanske för att du själv skall komma ihåg vad du har gjort, kan du göra det var som helst. Det finns flera metoder för detta – här visar jag ett par exempel:

1. En enda rad med kommentarer
Jag lägger ett dubbelt snedstreck i slutet av raden och skriver kommentaren efter dessa. Med det här sättet att kommentera måste hela kommentaren skrivas på samma rad.

alert('Här kommer mer om JavaScript!'); // här måste det vara semikolon alert('Är du beredd?') //eftersom det här är sista koderaden behövs inget semikolon

2. Flera rader kommentarer
Jag inleder kommentaren med /* och avslutar den med */ Det gör att jag kan använda flera rader kommentarer och radbrytningar.

/* Den första meddelanderutans rad avslutas med semikolon. Den andra rutans rad behöver inte ha något semikolon eftersom det är sista kodraden. Jag använder semikolon ändå, för den händelse att jag senare skulle lägga till flera rader i skriptet. */ alert('Här kommer mer om JavaScript!'); alert('Är du beredd?');

Det enkla lilla skriptet som öppnar en meddelanderuta behöver knappast några kommentarrader. Men skript kan bli långa och komplicerade, och det är bara alltför lätt att glömma bort hur man tänkte när man skrev skriptet. Då är man tacksam för kommentarerna!