JavaScript-skolan Villkorssatser

1. Inledning

På förra sidan tittade vi lite på villkorsoperatorn. På den här sidan skall vi titta lite mer på sådana villkor som utgör fullständiga satser.

Villkor är oerhört viktiga då man programmerar. Vi kommer att återvända till villkorssatser många gånger. Här skall du få lära dig hur man skapar villkorssatser.

2. Villkorssatser på svenska

I svenska språket använder vi oss ständigt av villkorssatser. Vi kan t.ex säga:

Om det är kallt måste du ta på dig varma kläder
Om det regnar har jag mitt paraply

Sådana satser har formen om-så: "Om det är kallt så måste du ta på dig varma kläder. Ibland uttrycker våra villkorssatser inte helt tydliga villkor:

När det är jul är det gott med glögg
På sommaren kan man bada

Sådana satser går ibland att skriva om, i det här fallet till: "Om det är jul så är det gott med glögg" och "Om det är sommar så kan man bada". Men sådana omskrivningar är inte alltid helt lyckade, mycket på grund av att vårt språk är mångtydigt. Så är det med alla talade språk.

I svenskan använder vi oss av skiljetecken för att villkoret skall framträda klart och tydligt. Titta på följande sats. vad menar talaren med den?

"Om jag kan så kommer jag inte men om jag inte kan så kommer jag"

Här blir skiljetecken avgörande för innebörden. Med rätt kommatering framträder villkoret som fullt begripligt:

"Om jag kan så, kommer jag inte, men om jag inte kan så, kommer jag"

Likadant är det med programmeringskod: man måste vara noggrann med vad det är för villkor man ställer upp.

3. If-satser

If-satser är programmeringens motsvarighet till vårt vardagsspråks villkorssatser. I JavaScript ser syntaxen (skrivreglerna) för if-satser ut så här:

if (villkor)
{
sats;
}

Krullparenteserna (som ibland kallas "klammerparenteser", som jag tycker är ett sämre uttryck) kan antingen skrivas på en egen rad, vilket tar upp plats, eller så här:

if (villkor) {
sats; }

Som vanligt ger jag nu några exempel, som förhoppningsvis är enkla att förstå:

Exempel 1

<script language="JavaScript">
<!--
var Din_alder;
Din_alder = prompt("Hur gammal är du?");
if (Din_alder < 18) {
alert("Tyvärr, du är inte myndig!"); }
-->
</script>

Titta på exemplet i praktiken >

Scriptet har en variabel, Din_alder, som bestäms i prompt-fönstret. Scriptet säger vidare att om besökaren skriver in ett tal mindre än 18 så skall en alert-ruta skall aktiveras, med texten "Tyvärr, du är inte myndig!".

Nu hamnar man på samma sida ändå, men det beror på att vi ännu inte lärt oss tillräckligt mycket för att styra besökaren till olika sidor.

Exempel 2

<script language="JavaScript">
<!--
var ok = confirm("Vill du lära dig mer? Klicka då på ok för att fortsätta!");
if (ok == true) {
alert("Kunskap ger färdighet!"); }
-->
</script>

Titta på exemplet i praktiken >

Scriptet har variabeln ok, som är en confirm-ruta. Villkoret säger att om besökaren klickar på "ok", dvs om det är sant att ok, då skall alert-rutan aktiveras.

Den stora svårigheten när man skapar sådana här scripts är att sätta rätt skiljetecken. Om du tittar noggrant på scriptet ser du att satsen med variabeln avslutas med ett semikolon som vanligt. Däremot avslutas inte villkorssatsen med något annat än en krullparentes. Dock avslutas satsen inuti villkoret med ett semikolon!

Det finns ingen särskild logik i detta utan det är bara något man får finna sig i - och försöka lära sig. Senare skall vi titta på hur man felsöker ett script, men just skiljetecknen är en vanlig orsak till buggar.

4. If-else-satser

Hittills har vi sett att man kan styra ett villkor i en riktning, nämligen att om villkoret är uppfyllt så skall något hända. Villkor kan alltså vara antingen sanna eller falska.

Med en else-del kan man komplettera denna information och ange vad som skall ske om villkoret är falskt. I exemplet från förra avsnittet säger vi ju inget om vad som skall hända om besökaren klickar på Avbryt:

<script language="JavaScript">
<!--
var ok = confirm("Vill du lära dig mer? Klicka då på ok för att fortsätta!");
if (ok == true) {
alert("Kunskap ger färdighet!"); }
-->
</script>

För att åstadkomma det måste vi därför lägga in ett villkor som heter else. Else-delen av villkorssatsen anger alltså vad som skall ske då villkoret inte är sant.

På svenska skulle det se ut så här:

Om det är kallt så måste du ta på dig varma kläder, men annars kan du få gå utan mössa

På svenska har vi alltså motsvarigheten till "else" i "annars". I JavaScript kan vi komplettera vårt villkor med följande:

Exempel 3

<script language="JavaScript">
<!--
var ok = confirm("Vill du lära dig mer? Klicka då på ok för att fortsätta!");
if (ok == true) {
alert("Kunskap ger färdighet!"); }
else { alert("Du borde inse värdet av kunskap!"); }
-->
</script>

Titta på exemplet i praktiken >

Else-delen innehåller inget villkor, eftersom detta redan angetts i if-satsen. Däremot måste satsen i else avslutas på ett korrekt sätt.

På motsvarande sätt kan vi skriva om första exemplet:

Exempel 4

<script language="JavaScript">
<!--
var Din_alder;
Din_alder = prompt("Hur gammal är du?");
if (Din_alder < 18) {
alert("Tyvärr, du är inte myndig!"); }
else { alert("Du är över 18 och kan fortsätta!"); }
-->
</script>

Titta på exemplet i praktiken >

5. Övningar

Övning 1
Vad använder man if-satser till? Vilka av följande satser uttrycker en villkorssats?

a) Det är skönt om våren!
b) Tomten är far till alla barnen
c) Nationalsången bör spelas vid varje landskamp
d) Om vi vinner VM är vi nöjda

Facit >

Övning 2
I en villkorssats kan "else" användas. Vad uttrycker man med "else"? Motivera vilka av följande satser som skulle kunna vara if-else-satser:

a) Om jag simmar 200 meter får jag simborgarmärket, men annars tar jag nog bara grodan
b) Om jag simmar 200 meter får jag simborgarmärket, men jag tror inte att jag klarar det
c) När solen går upp gal tuppen, om det finns någon
d) Är du hemma på torsdag? Annars får vi träffas på lördag i stället

Facit >

Övning 3
Skapa ett script som uttrycker följande: Om besökaren klickar på Ok i confirm-rutan så skall en ny confirm-ruta med meddelandet "Du har klickat på Ok. Vill du fortsätta?" dyka upp.

Facit >

Övning 4
Skapa ett script med en confirm-ruta. Klickar man på "Ok" skall en alert-ruta öppnas med texten "Ja". Klickar man på "Avbryt" skall en annan alert-ruta öppnas med texten "Nej".

Facit >

Övning 5
Skapa en "inloggning" med en prompt-ruta, där man skall skriva in vilket år man är född. Om man skriver in ett årtal som är äldre än 1970 skall ett meddelande dyka upp som säger "Oj, så gammal?!", men om man skriver in ett senare årtal skall texten "Oj, så ung?!" komma upp.

Facit >