Villkorade satser i JavaScript påminner om när du ställde upp villkor i CSS för att mobilanpassa din sida. Det handlar om att få saker att hända om vissa definierade villkor är uppfyllda. Villkorade satser kallas ibland if-satser", eftersom de börjar med ordet "if". Strukturen på en enkel villkorad sats (conditional statement) ser ut som följer:

if (villkor) {
sats;
}

Alltså: om villkoren är uppfyllda, gör det som står i satsen eller satserna, till exempel:

if (1 < 2) {
alert("Allt är som det ska vara");
}

Testa

…som alltså betyder att en alertruta med texten "Allt är som det ska vara" ska öppnas om villkoret att 1 är mindre än 2 är uppfyllt, men inte annars. Om villkoret inte är uppfyllt kommer ingenting hända.

Operatorerna du kan använda för att ställa upp dina villkor är:

Naturligtvis behöver man inte begränsa sig till numeriska värden för att villkora satser. Det går bra med alla typer av värden: numeriska, booleska eller textsträngar. Vilka operatorer som fungerar till vilka typer av värden kan du nog lista ut själv, annars är det bara att testa!

if… else

I exemplet ovan kommer någonting att hända om villkoret är uppfyllt. Om villkoret inte är uppfyllt kommer ingenting att hända. I de flesta fall vill man nog dock att någonting annat ska hända också om villkoret inte är uppfyllt.

I sådana fall kombinerar man if med ett alternativ, else.

if (1 > 2) {
alert("Allt är kaos!");
} else {
alert("Allt är som det ska vara!");
}

I detta fall kommer alertrutan visa textsträngen "Allt är kaos!" om 1 är större än 2. Som ni alla vet är det inte så. Eftersom 1 ju faktiskt är mindre än 2 kommer alertutan "Allt är som det ska vara!" visas i stället.

Det är oftast en bra idé att ha med en alternativhändelse på detta sätt.

Kombinera villkor med logiska operatorer

Det går också bra att kombinera två eller flera olika villkor för en villkorad sats. symbolerna man använder för att kombinera villkoren kallas logiska operatorer eftersom de representerar just de logiska operatorerna och (and), eller (or) och icke (not).

Operatorerna ser ut så här:

I exemplet nedan behöver båda villkoren vara uppfyllda för att meddelandet "Siffran ligger inom rätt intervall." ska visas, värdet till variabeln num måste alltså vara både större än 5 och mindre än 10 :

if ( num>=5 && num<=10 ) {
alert("Siffran ligger inom rätt intervall.");
}

Om vi vidarutvecklar samma exempel, men vänder på det, kan vi använda operatorn "eller" för att ge ett meddelande i det fall värdet till variabeln num är mindre än 5 eller större än tio:

if ( num > 10 || num < 5 ) {
alert("Siffran ligger utanför det godkända intervallet!");
}

Operatorn "icke" används annorlunda än de två tidigare logiska operatorerna på så sätt att den består av ett ensamt utropstecken som placeras före parentesen med villkoren, detta innebär också att du kan behöva lägga till nya parenteser runt de tidigare. I exemplet nedan kommer scriptet meddela at allt är som det ska vara om siffran 1 inte är större än 2:

if ( !(1 > 2) ) {
alert("Allt är som det ska vara");
}

Det går bra att kombinera också logiska operatorer. Nedan kan du se ett exempel där du får meddelandet i det fall värdet till variabeln num inte är större än 10 eller mindre än 5:

if ( !( num > 10 || num < 5 ) ) {
alert("Siffran ligger inom rätt intervall.");
}