JavaScript-skolan Håll ordning!

1. Inledning

På den här sidan skall jag ta upp några detaljer som kan ses som tips på hur man håller ordning i sin kod, både för sig själv och för andra.

2. Håll ordning i koden

När man använder JavaScript och sysslar med kod över huvud taget, är det viktigt att man håller ordning. Det innebär först och främst att man använder radbrytningar för att särskilja olika delar av koden.

Som du vet tolkar webbläsaren inte radbrytningar i koden som faktiska radbrytningar. Det betyder att det som visas inte syns med radbrytningarna i koden. Oftast gäller detta faktiskt också mellanslag.

Detta är också anledningen till varför koden ser olika ut när man öppnar den i olika program. Olika program försöker nämligen visa koden efter eget "huvud", vilket gör att dina radbrytningar i ett program kanske inte blir likadana i ett annat.

Från sidan med funktioner, exempel 6 visar jag hur radbrytningar gör tolkningen mycket enklare:

Exempel 1

Detta kan tyckas självklart, men många gånger slarvar man med detta eftersom att bringa ordning i koden tar längre tid än att skriva den lite slarvigare. Men det finns flera skäl till varför man skall försöka hålla ordning:

• Koden blir lättare att läsa
• Man ser vad man gjort när man återvänder till koden efter ett halvår
• Andra kan förstå vad man gjort om man lämnar över koden till någon annan

Därför skall man även försöka lägga in kommentarer i sin kod, som förklarar var loopar och referenser görs och varför.

Om man har möjlighet kan man också använda tabulatorindrag och andra indrag av koden, för att skilja mellan olika stycken. Man bör dock komma ihåg att tabbar inte tolkas lika av olika program, vilket i stället kan ge en rörig kod.

Om man har möjlighet kan man också färglägga koden.

På så vis får man hjälp med att hitta bland olika delar.

Bilden visar hur det kan se ut. Man bör dock vara observant på att olika program har olika färgläggningsprinciper och -scheman, vilket kan vara förvillande.

3. NOSCRIPT-elementet

En annan slags ordning handlar om att hjälpa dem som har webbläsare som saknar JavaScript eller dem som har stängt av JavaScript-tolken i sin webbläsare.

Genom att lägga in ett <NOSCRIPT>-element kan man då berätta för läsare varför sidan inte kan visas som det är tänkt. Det skall sägas att denna finess kanske mer lämpar sig för sidor som är väldigt beroende av att JavaScript fungerar på besökarens dator.

Exempel 2

<script language="JavaScript">
<!--

...scriptets kod här...

-->
</script>
<noscript>
<p>Den här sidan kräver att JavaScript fungerar på din dator. Om du har stängt av JavaScript av misstag i din webbläsare måste du aktivera den igen. Du hittar detta under någon av menyerna och inställningar för scripts. Har du frågor kan du mejla till...</p>
</noscript>

Observera att <NOSCRIPT> skrivs efter </SCRIPT>-elementet.

Om man vill kan man ju alltid lägga in en längre instruktion om hur man aktiverar JavaScript-tolken.

Många som surfar vet inte hur detta görs.

Här ser du hur det kan se ut i en version av Internet Explorer.

Genom att klicka i rutan "Aktivera script" aktiveras JavaScript-tolken.

Jag har dock klickat bort att felmeddelanden (skriptfelsvarningar) skall visas, eftersom det ofta dyker upp sådana på skärmen...

Tips!
Om man surfar på sajter som använder JavaScripts för att lägga upp reklam på sidan (t.ex genom popupfönster) kan man stänga av JavaScript för att på så vis slippa mycket av reklamen!

4. Externa js-filer

Externa filer med JavaScript är ytterligare ett sätt att hålla ordning. Man kan då få ner koden på sidan, vilket gör den lättare att läsa. Dessutom kan man återanvända scriptet på andra sidor, utan att behöva skriva om scriptet. Självklart blir uppdateringen av scriptet också enklare.

Exemplet nedan visar hur man går till väga gör att skapa en referens till en extern JavaScript-fil.

Exempel 3

<script src="exempel3.js"></script>

+ (filen exempel3.js innehåller bara följande:)

var Meddelande = alert("Detta meddelande genereras av en extern JavaScript-fil!");
alert(Meddelande);

Tita på exemplet >

Viktigt att tänka på här är att man använder src och att man inte har med något language-attribut. I den externa filen kan man lägga in kommentarer som vanligt. Däremot fungerar inte alltid svenska och andra konstiga tecken, som i stället syns som konstiga krumelurer.

Jag har berättat om problemet på sidan "Konstiga tecken". Läs mer >

5. Övningar

Övning 1
Nämn tre saker som kan underlätta för en annan person som skall läsa dina scripts.

Facit >

Övning 2
Försök hitta inställningarna för JavaScript i din webbläsare! Leta under menyerna eller sök i hjälpen.

(Eftersom alla webbläsare har olika inställningar har jag inget facit här.)

Övning 3
Skapa ett dokument med ett enkelt script. Lägg in ett <NOSCRIPT>-element på sidan med en text som förklarar att JavaScript inte fungerar. Stäng sedan av JavaScript i din webbläsare och testa om <NOSCRIPT>-elementet aktiveras.

Facit >

Övning 4
Skapa ett enkelt script och lägg in det som en extern js-fil. Anropa scriptet med ett <SCRIPT>-element i Html-dokumentet.

Facit >

Övning 5
Använd scriptet från övning 4. Hur skulle man skriva om man vill att scriptet aktiveras med ett onLoad-kommando i <BODY>?

Facit >