JavaScript-skolan Mer om satser

1. Inledning

På de föregående sidorna har du fått stifta bekantskap med framförallt alert-, confirm- och prompt-satser. Du har också fått lära dig om deklarationssatser, alltså sådana där man deklarerar en variabel med kommandot var. Vi har också tittat lite på if och else-satser.

Här skall vi nu fördjupa våra kunskaper om satser ytterligare. Vi kommer att lära oss om while, do-while och for. Resultatet kommer att bli mer komplexa satser, bl.a. loopar.

2. While-satser och loopar

Loopar kallas ibland för upprepningar, iterationer, repeat-loopar, osv. De olika namnen vittnar om att det inte finns någon entydig benämning. Anledningen är att man använder sådana här satser på olika sätt och med olika kommandon.

Ett sätt att bilda loopar är att använda while-satser. En while-sats använder sig av villkoret while. Villkoret aktiveras inte alltid, utan bara om förutsättningarna är de rätta. While-satser är därmed inte alltid enkla att förstå sig på, men jag börjar med dem eftersom de är lätta att skapa.

Syntaxen ser ut så här:

while (villkor) {
sats
}

Om villkoret uppfylls (= är sant) så aktiveras satsen eller satserna. Om villkoret är falskt fortsätter webbläsaren att tolka det som kommer efter krullparenteserna.

När den första satsen har uppfyllts kommer den att upprepas tills dess att den blir falsk. Detta kan ibland skapa en oändlig loop, då webbläsaren inte kommer vidare. Vi skall så småningom titta närmare på detta fenomen och hur man hantera det med kommandon som break och continue.

Exempel 1

<script language="JavaScript">
<!--
var a = 1;
while (a < 5) {
++a;
alert(a);
}
-->
</script>

Titta på exemplet i praktiken >

Vad som händer är att variabeln a får värdet 1 i första satsen. Därefter säger scriptet att så länge a är mindre än 5 så skall villkoret gälla. Villkoret säger sedan att webbläsaren skall lägga till 1 till a och visa a i en alert-ruta.

Exempel 2

<script language="JavaScript">
<!--
var Din_alder = prompt("Hur gammal är du?");
while (Din_alder == "") {
alert("Du måste fylla i din ålder");
}
alert(Din_alder);
-->
</script>

Vad gör scriptet? Jo, första raden anger att variabeln Din_alder skall vara en prompt-ruta. Sedan anges att så länge (=while) denna variabel är detsamma som (==) en tom textsträng, så skall villkoret gälla.

Villkoret säger i sin tur att när inmatningen i prompt-rutan är tom så skall en alert-box öppnas, med meddelandet "Du måste fylla i din ålder". Scriptet avslutas med kommandot att aktivera variabeln. Detta avslut är dock det första som du ser på skärmen.

Jag visar inte detta exempel i praktiken, eftersom vissa webbläsare fastnar och kommer inte vidare. Till slut får man tvångsavsluta programmet.

Kan du se var webbläsaren fastnar? Jo, om villkoret är uppfyllt, att besökaren inte fyllt i någon siffra, så blir det aldrig falskt. Det betyder att meddelandet "Du måste fylla i din ålder" aktiveras hela tiden.

Vi måste därför titta på lite andra sätt att skapa sådana här satser.

3. Do-while-satser

En variant av while-satserna är de som dessutom innehåller kommandot "do". En do-while sats prövar villkoret efter upprepningen, medan en while-sats prövar villkoret före.

Första exemplet ovan kan skrivas med en do-while sats, enligt följande:

Exempel 3

<script language="JavaScript">
<!--
var a = 1;
do {
++a;
alert(a);
}
while (a < 5);
-->
</script>

Titta på scriptet i praktiken >

Vad gör scriptet? Först sätts variabeln a till värdet 1. Sedan får webbläsaren instruktionen att göra följande: Lägg till ett till a och visa a. Därefter kommer instruktionen: Så länge (=while) a är mindre än 5 så skall det som står i do göras.

Obs!
Det är inte säkert att alla script fungerar i din webbläsare. Jag prövar inte alltid scripten i flera olika webbläsare. Fungerar det på min dator så går jag vidare. Just detta scriptet kan krångla.

Exempel 4

Vi hade ett script som skapade en loop. Men med do-while kan vi komma runt loopen:

<script language="JavaScript">
<!--
do {
Din_alder = prompt("Hur gammal är du?");
}
while (Din_alder == "");
alert(Din_alder);
-->
</script>

Titta på scriptet i praktiken >

Scriptet säger alltså att variabeln Din_alder är en prompt-ruta (=do). Om inget skrivs i denna (=while) så skall Din_alder, dvs prompt-rutan aktiveras på nytt. Först när villkoret är falskt, dvs då man har skrivit in sin ålder, kommer man vidare.

Exempel 5

En variant på förra exemplet är att ge en instruktion i prompt-rutan:

<script language="JavaScript">
<!--
do {
Din_alder = prompt("Hur gammal är du?", "Skriv i denna ruta");
}
while (Din_alder == "Skriv i denna ruta" || Din_alder == "" || Din_alder == null);
alert(Din_alder);
-->
</script>

Titta på scriptet i praktiken >

Tillägget måste infogas för att inte vårt meddelande till besökaren, "Skriv i denna ruta", skall tolkas som en inmatning. Vi säger att om Din_alder har denna textsträng eller är tom så skall prompt-rutan laddas igen.

Här har jag också lagt till null som ett värde, så att besökaren inte kan klicka på Avbryt. Bilden nedan visar hur rutan ser ut för besökaren:

Självklart kan man också skriva scriptet så här:

<script language="JavaScript">
<!--
do {
Din_alder = prompt("Hur gammal är du?" + " Skriv i denna ruta");
}
while (Din_alder == " Skriv i denna ruta" || Din_alder == "" || Din_alder == null);
alert(Din_alder);
-->
</script>

Titta på scriptet i praktiken >

Här skrivs det andra textmeddelandet i stället bredvid det första. För att skapa ett mellanrum mellan texterna måste man då lägga in ett mellanslag innan den andra texten. Prompt-rutan ser då ut så här i stället:

4. For-satser

For-satser kallas ibland också för repeat-loopar. Kommandot for innebär nämligen att man talar om hur många gånger en upprepning skall ske.

Syntaxen ser ut så här:

for (startvärde; villkor; uppdateringsvärde) {
sats
}

Startvärdet är det värde variabeln har från början. Det aktiveras endast en gång, när for-kommandot körs första gången. Villkoret kan vara sant eller falskt och upprepas tills dess att det inte längre är sant. Uppdateringsvärdet (ibland även "stegvärdet") anger hur variabeln skall förändras medan upprepningen sker.

Exempel 6

<script language="JavaScript">
<!--
for (a = 1; a < 5; ++a) {
alert(a);
}
-->
</script>

Titta på scriptet i praktiken >

Denna sats säger alltså samma sak som vi sett i tidigare exempel på den här sidan, men med något andra ord. Som du ser är de tre villkoren ihopskrivna, men utgörs ändå av tre olika satser eller uttryck, separerade av ett semikolon.

For-satser används bl.a. för att stega sig igenom en lista av värden för att hitta ett visst värde. Det kan handla om att man vill kunna leta sig igenom ett formulär för att se att alla rutor fyllts i eller att ta reda på vilka alternativ som kryssats för.

5. Övningar

Fråga 1
Skapa med en while-sats ett script som åstadkommer följande: En alert-ruta öppnas så länge a < 5. Startvärdet för a är 1.

Facit >

Fråga 2
Gör ett nytt script med förutsättningarna i Fråga 1, men använd denna gång kommandot do-while!

Facit >

Fråga 3
Utgår från Fråga 1 och skapa ett script som gör samma sak m.h.a en for-sats!

Facit >

Fråga 4
Skapa en prompt-ruta som försvinner först då man skriver in något i den!

Facit >

Fråga 5
Vilka av följande satser resulterar i en oändlig loop?

a) for (x = 3; x > 2; x++;) {
alert(x);
}

b) for (x = 3; x > 2; x++;) {
alert(a);
}

c) var x = 3;
while (x < 5) {
x--;
alert(x);
}

d) var x = 1;
do {
++x;
alert(x);
}
while (x < 5);

e) var x = 4;
do {
x++;
alert(x);
}
while (x >= 5);

Facit >