Att skriva läsbar kod - Versionshistorik

PGJ den 10 augusti 2026 kl. 13.27

2026-08-10T13:27:03Z

← Äldre version		Versionen från 10 augusti 2026 kl. 13.27
Rad 1:		Rad 1:
	Det är viktigt att skriva läsbar kod som är lätt att underhålla, debugga och förändra. Inte minst är det viktigt för dig själv, men det är även av stor vikt om du jobbar i ett projekt där många ska bidra med kod. I såna fall måste alla skriva mer eller mindre likadan ~~kod~~, så att alla ~~förstår~~ hur saker fungerar. I dessa fall använder man sig ofta av en så kallad stilguide, som talar om hur kod ska formateras, hur variabler och metoder ska namnges, osv.		Det är viktigt att skriva läsbar kod som är lätt att underhålla, debugga och förändra. Inte minst är det viktigt för dig själv, men det är även av stor vikt om du jobbar i ett projekt där många ska bidra med kod. I såna fall måste alla skriva kod som ser mer eller mindre likadan ut, så att alla lätt kan läsa koden och förstå hur saker fungerar. I dessa fall använder man sig ofta av en så kallad stilguide, som talar om hur kod ska formateras, hur variabler och metoder ska namnges, osv.

	== Kommentarer ==		== Kommentarer ==
Rad 7:		Rad 7:

	Det är alltså god vana att alltid kommentera sin kod. När man går igenom exempel under lektioner och skriver kod ”tillsammans” på projektorn kanske det inte finns tid till att kommentera. Men låt inte det hindra dig ifrån att redan från början lägga dig till med den goda vanan att kommentera!		Det är alltså god vana att alltid kommentera sin kod. När man går igenom exempel under lektioner och skriver kod ”tillsammans” på projektorn kanske det inte finns tid till att kommentera. Men låt inte det hindra dig ifrån att redan från början lägga dig till med den goda vanan att kommentera!

			Kommentera dock inte _allt_. Om det är helt självklart vad som händer utifrån själva koden, behöver du inte skriva nån kommentar. Utgå ifrån att den som läser koden kan koda och förstår grunderna i språket.

	I JavaScript kan man kommentera på två olika vis. Dels har man en kommentartyp som gäller för resten av den rad kommentaren står på och dels en typ där man kan kommentera ett helt block som sträcker sig över flera rader.		I JavaScript kan man kommentera på två olika vis. Dels har man en kommentartyp som gäller för resten av den rad kommentaren står på och dels en typ där man kan kommentera ett helt block som sträcker sig över flera rader.
Rad 12:		Rad 14:
	* Radkommentarer inleds med ”<code>//</code>”, resterande text på den raden är en kommentar. Så fort en ny rad inleds tolkas allt som kod igen.		* Radkommentarer inleds med ”<code>//</code>”, resterande text på den raden är en kommentar. Så fort en ny rad inleds tolkas allt som kod igen.

	* Flerraderskommentarer inleds med ”<code>/</code>” och avslutas med ”<code>/</code>”. All text inom dessa tecken, kommer att ignoreras av interpretatorn (den som tolkar ~~din~~ kod).		* Flerraderskommentarer inleds med ”<code>/</code>” och avslutas med ”<code>/</code>”. All text inom dessa tecken, kommer att ignoreras av interpretatorn (den som tolkar och kördin kod).

	Här följer ett par exempel på olika sätt på vilka man kan kommentera sin kod.		Här följer ett par exempel på olika sätt på vilka man kan kommentera sin kod.
Rad 37:		Rad 39:
	</syntaxhighlight>		</syntaxhighlight>
	</div>		</div>

			Lägg även märke till att eventuell kod som står på samma rad direkt efter ”<code>*/</code>” kommer att köras. I följande exempel kommer alltså <code>let a=1</code> att köras.

			<syntaxhighlight lang="JavaScript">
			/* En
			kommentar */ let a=1;
			</syntaxhighlight>

	== Blankrader, tabbar och mellanslag ==		== Blankrader, tabbar och mellanslag ==
	Hur man formaterar koden ~~man skriver~~ har egentligen ingen större betydelse för JavaScript. Däremot är det ett viktigt verktyg för att skapa läsbar kod. Precis som i fallet med kommentarer kan vettig formatering hjälpa dig själv och andra att lättare läsa och förstå din kod. De flesta moderna utvecklingsverktyg hjälper dig med att formatera din kod på ett vettigt vis.		Hur man formaterar koden har egentligen ingen större betydelse för JavaScript. Däremot är det ett viktigt verktyg för att skapa läsbar kod. Precis som i fallet med kommentarer kan vettig formatering hjälpa dig själv och andra att lättare läsa och förstå din kod. De flesta moderna utvecklingsverktyg hjälper dig med att formatera din kod på ett vettigt vis.

	Det viktigaste man ska göra är att indentera sin kod. Indentera är svengelska för att göra indrag i marginalen, d.v.s. att börja skriva en bit in på raden. Man formaterar sin kod med hjälp av mellanslag eller tabbar. Detta hjälper till så att det går att se strukturen på programmet. Främst gäller detta när man skapar kodblock med hjälp av "<code>{</code>" och"<code>}</code>". Ett exempel på det kan vi se i följande kodsnutt:		Det viktigaste man ska göra är att indentera sin kod. Indentera är svengelska för att göra indrag i marginalen, d.v.s. att börja skriva en bit in på raden. Man formaterar sin kod med hjälp av mellanslag eller tabbar. Detta hjälper till så att det går att se strukturen på programmet. Främst gäller detta när man skapar kodblock med hjälp av "<code>{</code>" och"<code>}</code>". Ett exempel på det kan vi se i följande kodsnutt:
Rad 60:		Rad 69:
	Även om vi kanske inte förstår vad koden gör, kan vi lätt se hur olika satser hör samman i kodblocken tack vare att de är indragna/indenterade. Detta gör att koden blir mer lättöverskådlig och att man snabbt kan se strukturen och förstå hur de olika delarna hänger samman.		Även om vi kanske inte förstår vad koden gör, kan vi lätt se hur olika satser hör samman i kodblocken tack vare att de är indragna/indenterade. Detta gör att koden blir mer lättöverskådlig och att man snabbt kan se strukturen och förstå hur de olika delarna hänger samman.

	Lägg även märke till att kodexemplet använder sig av blankrader för att ytterligare visa kodstrukturen. De kodbitar som har med varandra att göra ligger bredvid varandra, medan de satser som gör olika saker åtskiljs med en tomrad. Man kan jämföra hur man i vanlig text använder sig av styckesindelning. Varje stycke handlar om en specifik sak och när man ska tala om något annat gör man ett nytt stycke. Precis så fungerar blankraderna när man formaterar sin kod. Återigen så har detta ingen betydelse för programmets funktionalitet, det är bara ett sätt att göra din kod mer lättläslig.		Lägg även märke till att kodexemplet använder sig av blankrader för att ytterligare visa kodstrukturen. De kodbitar som har med varandra att göra ligger bredvid varandra, medan de satser som gör olika saker åtskiljs med en tomrad. Man kan jämföra med hur man i vanlig text använder sig av styckesindelning. Varje stycke handlar om en specifik sak och när man ska tala om något annat gör man ett nytt stycke. Precis så fungerar blankraderna när man formaterar sin kod. Återigen så har detta ingen betydelse för programmets funktionalitet, det är bara ett sätt att göra din kod mer lättläslig.

	Man skulle lika gärna kunna skrivit ovanstående som en enda lång rad, så som du ser här under. Vilket tycker du är mest lättläst och lättförståeligt?		Man skulle lika gärna kunna skrivit ovanstående som en enda lång rad, så som du ser här under. Vilket tycker du är mest lättläst och lättförståeligt?
Rad 68:		Rad 77:
	</syntaxhighlight>		</syntaxhighlight>

			Helst ska man undvika att ha flera satser på samma rad. Om man gör det ändå så måste man använda sig av <code>;</code> för att tala om var varje sats slutar!
	== Nästa aktivtet ==		== Nästa aktivtet ==
	[[Olika typer av fel som kan uppstå]]		[[Olika typer av fel som kan uppstå]]

PGJ den 29 juni 2021 kl. 11.17

2021-06-29T11:17:26Z

← Äldre version		Versionen från 29 juni 2021 kl. 11.17
Rad 65:		Rad 65:

	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	function Spawner(){for(let i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0~~.1f~~;}}		function Spawner(){for(let i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0;}}
	</syntaxhighlight>		</syntaxhighlight>

PGJ den 29 juni 2021 kl. 11.16

2021-06-29T11:16:36Z

← Äldre version		Versionen från 29 juni 2021 kl. 11.16
Rad 53:		Rad 53:
	time = 10;		time = 10;
	} else {		} else {
	time = 0~~.1f~~;		time = 0;
	}		}
	}		}

PGJ den 31 oktober 2020 kl. 12.32

2020-10-31T12:32:48Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.32
Rad 16:		Rad 16:
	Här följer ett par exempel på olika sätt på vilka man kan kommentera sin kod.		Här följer ett par exempel på olika sätt på vilka man kan kommentera sin kod.

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	// Allt efter dubbelstrecket är en kommentar, fram till raden är slut.		// Allt efter dubbelstrecket är en kommentar, fram till raden är slut.
Rad 29:		Rad 28:
	och slutar inte tills */		och slutar inte tills */
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:		Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:
Rad 45:		Rad 43:
	Det viktigaste man ska göra är att indentera sin kod. Indentera är svengelska för att göra indrag i marginalen, d.v.s. att börja skriva en bit in på raden. Man formaterar sin kod med hjälp av mellanslag eller tabbar. Detta hjälper till så att det går att se strukturen på programmet. Främst gäller detta när man skapar kodblock med hjälp av "<code>{</code>" och"<code>}</code>". Ett exempel på det kan vi se i följande kodsnutt:		Det viktigaste man ska göra är att indentera sin kod. Indentera är svengelska för att göra indrag i marginalen, d.v.s. att börja skriva en bit in på raden. Man formaterar sin kod med hjälp av mellanslag eller tabbar. Detta hjälper till så att det går att se strukturen på programmet. Främst gäller detta när man skapar kodblock med hjälp av "<code>{</code>" och"<code>}</code>". Ett exempel på det kan vi se i följande kodsnutt:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	function Spawner ()		function Spawner ()
Rad 60:		Rad 57:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Även om vi kanske inte förstår vad koden gör, kan vi lätt se hur olika satser hör samman i kodblocken tack vare att de är indragna/indenterade. Detta gör att koden blir mer lättöverskådlig och att man snabbt kan se strukturen och förstå hur de olika delarna hänger samman.		Även om vi kanske inte förstår vad koden gör, kan vi lätt se hur olika satser hör samman i kodblocken tack vare att de är indragna/indenterade. Detta gör att koden blir mer lättöverskådlig och att man snabbt kan se strukturen och förstå hur de olika delarna hänger samman.
Rad 68:		Rad 64:
	Man skulle lika gärna kunna skrivit ovanstående som en enda lång rad, så som du ser här under. Vilket tycker du är mest lättläst och lättförståeligt?		Man skulle lika gärna kunna skrivit ovanstående som en enda lång rad, så som du ser här under. Vilket tycker du är mest lättläst och lättförståeligt?

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	function Spawner(){for(let i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0.1f;}}		function Spawner(){for(let i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0.1f;}}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	== Nästa aktivtet ==		== Nästa aktivtet ==

PGJ den 30 januari 2019 kl. 14.33

2019-01-30T14:33:53Z

← Äldre version		Versionen från 30 januari 2019 kl. 14.33
Rad 20:		Rad 20:
	// Allt efter dubbelstrecket är en kommentar, fram till raden är slut.		// Allt efter dubbelstrecket är en kommentar, fram till raden är slut.

	tal = 2; // Koden före dubbelstrecket körs, men resten av raden ignoreras		let tal = 2; // Koden före dubbelstrecket körs, men resten av raden ignoreras

	/* Kommentarer av denna typ inleds med streck och stjärna och avslutas med; */		/* Kommentarer av denna typ inleds med streck och stjärna och avslutas med; */

PGJ: /* Kommentarer */

2019-01-30T14:33:38Z

Kommentarer

← Äldre version		Versionen från 30 januari 2019 kl. 14.33
Rad 33:		Rad 33:
	Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:		Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:

	<div class="well well-~~alert~~"><syntaxhighlight lang="JavaScript">		<div class="well well-warning"><syntaxhighlight lang="JavaScript">
	/* Man kan inte nästla flerraderskommentarer		/* Man kan inte nästla flerraderskommentarer
	/* Efter slutet på dessa tecken förväntar C# att det kommer kod igen →*/		/* Efter slutet på dessa tecken förväntar C# att det kommer kod igen →*/

PGJ: /* Kommentarer */

2019-01-30T14:33:24Z

Kommentarer

← Äldre version		Versionen från 30 januari 2019 kl. 14.33
Rad 33:		Rad 33:
	Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:		Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:

	<div class="well well-~~warning~~"><syntaxhighlight lang="JavaScript">		<div class="well well-alert"><syntaxhighlight lang="JavaScript">
	/* Man kan inte nästla flerraderskommentarer		/* Man kan inte nästla flerraderskommentarer
	/* Efter slutet på dessa tecken förväntar C# att det kommer kod igen →*/		/* Efter slutet på dessa tecken förväntar C# att det kommer kod igen →*/

PGJ: /* Kommentarer */

2019-01-30T14:33:06Z

Kommentarer

← Äldre version		Versionen från 30 januari 2019 kl. 14.33
Rad 33:		Rad 33:
	Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:		Observera att man inte kan nästla flera flerraderskommentarer inuti varandra. Den första ”<code>*/</code>” som JavaScript påträffar kommer att få interpretatorn att gå ur kommentarsläget och börja tolka texten som kod igen. Följande kommer alltså inte att fungera:

	<div class="well well-~~cyanide-light~~"><syntaxhighlight lang="JavaScript">		<div class="well well-warning"><syntaxhighlight lang="JavaScript">
	/* Man kan inte nästla flerraderskommentarer		/* Man kan inte nästla flerraderskommentarer
	/* Efter slutet på dessa tecken förväntar C# att det kommer kod igen →*/		/* Efter slutet på dessa tecken förväntar C# att det kommer kod igen →*/

PGJ: /* Blankrader, tabbar och mellanslag */

2018-09-22T16:54:04Z

Blankrader, tabbar och mellanslag

← Äldre version		Versionen från 22 september 2018 kl. 16.54
Rad 49:		Rad 49:
	function Spawner ()		function Spawner ()
	{		{
	for (~~var~~ i=0; i <= Score.score / 10; i++) {		for (let i=0; i <= Score.score / 10; i++) {
	Instantiate( monster );		Instantiate( monster );
	}		}
Rad 70:		Rad 70:
	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	function Spawner(){for(~~var~~ i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0.1f;}}		function Spawner(){for(let i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0.1f;}}
	</syntaxhighlight>		</syntaxhighlight>
	</div>		</div>

PGJ: /* Blankrader, tabbar och mellanslag */

2016-08-07T08:56:42Z

Blankrader, tabbar och mellanslag

← Äldre version		Versionen från 7 augusti 2016 kl. 08.56
Rad 72:		Rad 72:
	function Spawner(){for(var i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0.1f;}}		function Spawner(){for(var i=0;i<=Score.score/10;i++){Instantiate(monster);}if(Life.life>0){time=10;}else{time=0.1f;}}
	</syntaxhighlight>		</syntaxhighlight>
			</div>

	== Nästa aktivtet ==		== Nästa aktivtet ==