Webb­utveckling

JavaScript

JavaScript är ett scriptingspråk som används på hemsidor för att göra dem responsiva, dynamiska och bättre. Trots sitt namn har det ingenting att göra med språket Java. När man lägger till ett script på sin sida så gör man det i ett <script>-element:

<script>	// Detta är en kommentar
	/* 
	Detta är en lång kommentar 
	*/
</script>

Om man programmerat tidigare

JavaScript är i mångt och mycket likt andra programmeringsspråk med if-satser och for-loopar. Här kommer en snabb sammanfattning av vanliga kommandon.

Datatyper

JavaScript skiljer sig från C-språken med att man inte behöver deklarera datatyper. Där är JavaScript mer likt Python. Det finns däremot tre olika sätt att deklarera variabler:

var a = 10; // Notera semikolon
let b = 20;
const c = 30;

var

Tidigare var det här det enda sättet att deklarera variabler. En var-variabel är kopplad till den funktion den skapades i. Detta kan leda till problem.

En kursare som jobbar med att utveckla mjukvara berättade för mig att de undvikar var helt och hållet för att istället uteslutande använda let och const istället.

let

The reason why (the) let keyword was introduced to the language was function scope is confusing and was one of the main sources of bugs in JavaScript.

En let variabel är bara definierad inom det block där den är skapad. Detta gör att man inte får lika många problem med att variabler behåller sitt värde mellan funktions-anrop.

I alla exempel i den här kursen kommer du nästan uteslutande att stöta på och uppmanas att använda let. De andra två sätten att deklarera variabler, var och const, omnämns för att du ska känna till dem, och i vars fall veta att i gammal kod så hade man inget annat alternativ. Men man kan nästan alltid ersätta var med let.

const

En const är som namnet antyder en konstant variabel, som när du har gett den ett värde kan du inte ändra på det.

if-satser

Det som är annorlunda med JavaScript jämfört med andra språk är att JavaScript har två olika sätt att kolla "lika med".

==

Kollar om värdet är lika, även om de är olika datatyper.

===

Kollar om värdet OCH datatypen är lika

if (a == 5 && b === 5.5 || c >= 3){
	// Notera paranteser runt villkoren och måsvingar (klammerparanteser) runt blocket
}
else if (a == 6){
	// Kod
}
else {
	// Kod
}

Villkoret

och

&& betyder och

eller

|| betyder eller

lika med

== alternativt === enligt ovan

inte lika med

!= eller !== (som lika med)

större än

>, >=

mindre än

<, <=

Loopar

while-loopen

while (villkor){
	// Villkoret skrivs som i if-satser
}

for-loopen

for (i=0; i<10; i++){
	// Börjar på 0 slutar på 9
	// tar ett steg 
}

Formatet är (start; slut; steg;).

Funktioner

function foo(x,y,z){
	// DO STUFF
	return x*y*z; // Produkten av x, y och z
}

Ett enkelt script

let idag = new Date(); // Nuvarande datum & tid
let timme = idag.getHours(); // Nuvarande timme
let hälsning; // En tom variabel

if (timme >= 21){
	hälsning = "God natt";
}
else if (timme >= 18){
	hälsning = "God kväll";
}
else if (timme >= 12){
	hälsning = "God eftermiddag";
}
else if (timme >= 9){
	hälsning = "God eftermiddag";
}
else if ( timme >= 6){
	hälsning = "God morgon";
}
else {
	hälsning = "God natt";
}

console.log(hälsning) // Skriver till konsolen

Först skapar vi tre variabler: idag, timme och hälsning. idag är ett objekt av typen Date som innehåller dagens datum med mera. Sen sparar vi nuvarande timmen med idag.getHours() som hämtar den från idag i variabeln timme. Den sista variabeln, hälsning är just nu tom, men kommer att innehålla en bit text.

Sen gör vi en väldans massa jämförelser. Om värdet i timme är större eller lika med 21 så ska vi spara ner texten "God natt" i variabeln hälsning. Annars så kollar vi om värdet sparat i vartiabeln timme är större eller lika med 18 o.s.v.

Till sist så skriver vi ut i konsolen på vår webbläsare den text som vi sparat i variabeln hälsning.

Konsolen hittar man om man klickar på F12.

Datatyper

JavaScript har huvudsakligen fyra olika datatyper:

1. tal
2. text
3. booleans
4. objekt

Sen såg vi att det fanns en typ som kallades Date i exemplet ovan.

Operatorer på tal