Webb­utveckling

Villkorssatser

Styrkan i programmering och scripting ligger i automation. Väldigt ofta i en process vill man göra något om ett särskilt villkor är uppfyllt. Till exempel:

1. När du kommer hem:
   • Om dörren är låst: lås upp
   • Om dörren är olåst: öppna
2. Din telefon plingar:
   • Om du är ledig: kolla på telefonen
   • Annars: låt bli telefonen
3. Det är riksdagsval:
   • Om du är över 18: rösta
   • Annars: uppmana folk över 18 att rösta

Generellt kan vi säga att en if-sats är uppbyggd så här:

if (villkor){
	Kod som ska köras om villkoret är sant;
}					
else if (villkor){
	Kod som ska köras om villkoret ovanför inte 
	var uppfyllt men det nya villkoret är uppfyllt.;
}
else{
	Kod som ska köras om inget av villkoren ovanför 
	är uppfyllda.;
}

Villkoret

Det viktigaste i en if-sats är själva villkoret. Villkoret består av minst tre delar:

1. Vänsterled
2. Operator
3. Högerled

if (VL op HL){

}

Vi kan jämföra villkoret med en ekvation eller en olikhet där vi jämför vänstersidan med högersidan. Om olikheten är korrekt så svarar JavaScript med "true", men om olikheten inte stämmer så svarar JavaScript med false.

x+5 >= 10
om x är 5 eller större så svarar JavaScript true.
om x är mindre än 5 så svarar det med false.

Vi kan också göra komplicerade villkor där flera olika saker måste stämma:

if (x+5 >= 10 && x < 21){
	Nu måste både x vara större eller lika med 5 och 
	x måste vara mindre än 21.
}

När man har ett "och" mellan två villkor så måste båda villkoren vara uppfyllda för att man ska komma in i blocket.

Om man istället vill att samma sak ska hända för två olika villkor kan man lägga till ett "eller" så att om antingen A är sant eller B är sant så kommer det att hända.

if (timme >= 20 || timme <= 6){
	Om timme är större än 20 ELLER mindre än 6
}

Genom att ha flera OCH och ELLER så kan man få ett stort och komplicerat villkor som kan klara av flera olika fall. För att lösa ut sådana villkor kan man använda sig utav vad man inom matematiken kallar för boolesk algebra.

Boolesk algebra

I boolesk algebra jobbar man bara med ettor och nollor, addition och multiplikation. Där den stora skillnaden är att 1 + 1 = 1. Och skrivs ∧ och eller skrivs ∨. Sen översätts ∧ till gånger medan ∨ översätts till addition.

(A && B) && (C || D) =
(A ∧ B) ∧ (C ∨ D) =
(A·B)·(C+D)=
A·B·(C+D)=
A·B·C + A·B·D

Det här kan vara användbart för att gå från ett komplext villkor till ett simplare.

Jämförelseoperatorer

Ett praktiskt exempel

Tänk att vi vill sätta in en ålderspärr på vår hemsida, så att användaren måste vara över 18 år för att få komma in på sidan. Då kan vi lägga till ett fält där vi kan fylla i vår ålder.

<label for="age">Ålder</label>
<input id="age" type="number" value="15"/>

Nu kan vi lägga till ett skript som läser av värdet i fältet:

<script>
	let ålder;
	ålder = document.getElementById("age").value;
	console.log(ålder);
</script>

Om vi kollar i konsolen på den här sidan nu så ser vi att den skriver ut det värde som står som startvärde i fältet. För att få den att bara kolla på åldern när vi är klara så kan vi lägga till en knapp:

<button id="checkage">Kontrollera ålder</button>

Just nu gör knappen inget och det finns två sätt att få knappen att göra saker. Antingen använder vi HTML attributet "onclick" vilket bör undvikas. Eller så skriver vi JavaScript-kod som lägger till en "lyssnare" till knappen:

<script>
	let knappen;
	knappen = document.getElementById("checkage");
	knappen.addEventListener('click', check_age, false);
</script>

Funktionen check_age

Funktioner är block med kod som du kan använda på flera ställen i sitt script. De används ofta för att göra det lättare för att läsa och förstå ett script. Genom att ge funktioner tydliga namn så förstår man vad de gör utan att behöva se själva koden. Till exempel funktionen check_age som du kan anta kollar åldern.

Kruxet är bara att det finns ingen funktion som heter check_age och som kollar vad man har skrivit för ålder. Så du måste skapa den själv. Innan du skapar den funktionen så behöver du fundera på vad den faktiskt ska göra:

1. Den ska kolla vad du har skrivit in för ålder
2. Den ska jämföra det med åldersgränsen på sidan.
   1. Om åldern är hög nog så ska du få ett positivt meddelande.
   2. Om åldern är för låg så ska du få ett negativt meddelande.

<script>
function check_age(){
	let ålder;
	ålder = document.getElementById("age").value;
	if (ålder >= 18){
		console.log("Välkommen vidare");
	}
	else{
		console.log("Du är för ung.");
	}
}
</script>

Utskrifter

Det finns tre sätt att skriva ut resultat i JavaScript:

1. I konsolen
2. I en meddelanderuta
3. På hemsidan

Konsolen

När vi vill skriva ut i konsolen så anger vi det så här:

console.log("Hejsan");

Då kan vi hitta det i konsolen som finns i webbläsaren (F12 alternativt Fn+F12)

Meddelanderuta

Vi kan få upp en ruta med text så här:

alert("Texten som ska skrivas ut");

Det här är användbart när man vill att användaren ska pausa och faktiskt se att något har hänt. Exempelvis om något går fel så att man inte kan gå vidare.

På hemsidan

För att skriva ut på sidan kan man anropa dokumentet. Vi kommer att prata mer om detta när vi kommer till DOM.

document.write("Tja");

Den skriver över hela sidan.

document.getElementById("id").innerHTML = "Texten";

Den ändrar texten på ett specifikt element. Till exempel det här som har id="test".

Testa att skriva följande JavaScript-kod i konsolen och se vad som händer:

document.getElementById("test").innerHTML = "Skriv något kul.";