Loopar och slingor: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
Ingen redigeringssammanfattning
Rad 7: Rad 7:
I grunden ser en <code>while</code>-loop ut så här:
I grunden ser en <code>while</code>-loop ut så här:


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
while ( liv > 0 )
while ( liv > 0 )
Rad 15: Rad 14:
<Här fortsätter programmet när liv blir noll eller mindre>
<Här fortsätter programmet när liv blir noll eller mindre>
</syntaxhighlight>
</syntaxhighlight>
</div>


På vanlig svenska skulle man säga; gör det här ''medan'' antal liv är större än noll. Så länge testvillkoret (kallas även för sanningsvillkoret) som man skickar till <code>while</code> är sant, kommer koden att upprepas. Men om villkoret är falskt, avslutas loopen och programmet fortsätter att köras från och med den kod som finns direkt efter loopen.
På vanlig svenska skulle man säga; gör det här ''medan'' antal liv är större än noll. Så länge testvillkoret (kallas även för sanningsvillkoret) som man skickar till <code>while</code> är sant, kommer koden att upprepas. Men om villkoret är falskt, avslutas loopen och programmet fortsätter att köras från och med den kod som finns direkt efter loopen.
Rad 24: Rad 22:
Det finns en till variant av <code>while</code>-loopen. Skillnaden är att man sätter villkoret sist och påbörjar loopen med kommandot <code>do</code>.
Det finns en till variant av <code>while</code>-loopen. Skillnaden är att man sätter villkoret sist och påbörjar loopen med kommandot <code>do</code>.


<div class="well well-cyanide-light"><syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
do
do
{  
{  
Rad 30: Rad 28:
} while ( liv > 0 );
} while ( liv > 0 );
</syntaxhighlight>
</syntaxhighlight>
</div>


Den stora skillnaden mellan <code>while</code>-varianterna är var man testar om villkoret är sant. Eftersom <code>while</code>-kommandot kommer sist i denna variant, så kommer koden inom <code>do..while</code> att köras igenom ''minst'' en gång.
Den stora skillnaden mellan <code>while</code>-varianterna är var man testar om villkoret är sant. Eftersom <code>while</code>-kommandot kommer sist i denna variant, så kommer koden inom <code>do..while</code> att köras igenom ''minst'' en gång.
Rad 37: Rad 34:
Egentligen är <code>for</code>-loopar mer lämpade  om man vill räkna, men vi kan göra det med hjälp av <code>while</code> också. Så här skulle man kunna göra;
Egentligen är <code>for</code>-loopar mer lämpade  om man vill räkna, men vi kan göra det med hjälp av <code>while</code> också. Så här skulle man kunna göra;


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
let a = 1;
let a = 1;
Rad 47: Rad 43:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


Exempelkoden skulle alltså räkna upp ifrån ett till fyra (eftersom vi kollar att <code>a</code> är ''mindre'' än fem).
Exempelkoden skulle alltså räkna upp ifrån ett till fyra (eftersom vi kollar att <code>a</code> är ''mindre'' än fem).
Rad 54: Rad 49:
Ofta sätter man ett startvärde eller ett grundvillkor strax innan man börjar sin loop, till exempel;
Ofta sätter man ett startvärde eller ett grundvillkor strax innan man börjar sin loop, till exempel;


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
let running = true;
let running = true;
Rad 62: Rad 56:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


Inuti loop-koden har man sedan någonting som gör att <code>running</code> blir satt till <code>false</code> och då avslutas loopen nästa runda.
Inuti loop-koden har man sedan någonting som gör att <code>running</code> blir satt till <code>false</code> och då avslutas loopen nästa runda.
Rad 71: Rad 64:
En <code>for</code>-loop ser i grunden ut så här
En <code>for</code>-loop ser i grunden ut så här


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
for( let i=0; i < 10; i++ )
for( let i=0; i < 10; i++ )
Rad 79: Rad 71:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


Man kan bryta ner for-satsen i tre delar:
Man kan bryta ner for-satsen i tre delar:
Rad 102: Rad 93:
Om man behöver kan man nästla loopar, dvs lägga loopar inuti andra loopar. T.ex;
Om man behöver kan man nästla loopar, dvs lägga loopar inuti andra loopar. T.ex;


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
for( let i=0; i < 10; i++ )
for( let i=0; i < 10; i++ )
Rad 112: Rad 102:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


== Kontrollkommandon för loopar ==
== Kontrollkommandon för loopar ==
Rad 120: Rad 109:
Ett litet exempel:
Ett litet exempel:


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
for( let i=0; i < 10; i++ )
for( let i=0; i < 10; i++ )
Rad 130: Rad 118:
}
}
</syntaxhighlight>
</syntaxhighlight>
</div>


Varje gång <code>i</code> är ett jämt tal hoppar programmet över koden efter <code>if</code>:en. Det var alltså ett krångligt sätt att skriva något som vi lika gärna kunnat lösa genom att byta ut vår <code>i++</code> till <code>i += 2</code> (vilket är ett snabbare sätt att skriva <code>i = i + 2</code>).
Varje gång <code>i</code> är ett jämt tal hoppar programmet över koden efter <code>if</code>:en. Det var alltså ett krångligt sätt att skriva något som vi lika gärna kunnat lösa genom att byta ut vår <code>i++</code> till <code>i += 2</code> (vilket är ett snabbare sätt att skriva <code>i = i + 2</code>).
Rad 137: Rad 124:
Ett annat sätt att styra loopflödet är att använda sig av <code>break</code>. När programmet når en sådan instruktion avslutas nuvarande loop direkt och programmet fortsätter att köra den kod som följer efter loopen. Ett exempel på detta:
Ett annat sätt att styra loopflödet är att använda sig av <code>break</code>. När programmet når en sådan instruktion avslutas nuvarande loop direkt och programmet fortsätter att köra den kod som följer efter loopen. Ett exempel på detta:


<div class="well well-cyanide-light">
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
while( true )
while( true )
Rad 147: Rad 133:
}
}
<När man når break, hoppar koden direkt hit>
<När man når break, hoppar koden direkt hit>
</syntaxhighlight>


</syntaxhighlight>
</div>
== Nästa aktivitet ==
== Nästa aktivitet ==
[[Komplexa variabler]]
[[Komplexa variabler]]

Versionen från 31 oktober 2020 kl. 14.58

Som man förstår av namnet går loopar runt på något vis. I den här betydelsen har man ett antal kodrader som repeteras, eller går i en loop, ett visst antal gånger. I programmering brukar man kalla detta för iteration, vilket enbart är ett finare ord för upprepning.

Det finns flera olika typer av loopar att tillgå i JavaScript. Vi börjar med att gå igenom den vanligaste och mest användbara loop-typen; while-loopen.

while-loop

while-loopen är den enklaste loop-typen. Den är både enkel att förstå samt att den är så generell att man egentligen skulle kunna klara sig med enbart denna typ av loop. Så om du enbart orkar lägga en enda loop-typ på minnet, då är detta rätt val…

I grunden ser en while-loop ut så här:

while ( liv > 0 )
{
  <Denna kod upprepas tills antal liv blir noll eller mindre >
}
<Här fortsätter programmet när liv blir noll eller mindre>

På vanlig svenska skulle man säga; gör det här medan antal liv är större än noll. Så länge testvillkoret (kallas även för sanningsvillkoret) som man skickar till while är sant, kommer koden att upprepas. Men om villkoret är falskt, avslutas loopen och programmet fortsätter att köras från och med den kod som finns direkt efter loopen.

Om villkoret efter while är falskt redan när programmet når koden för första gången, kommer koden inuti loopen aldrig att köras. Om vi fortsätter med exemplet ovan och om antalet liv redan är noll, skulle programmet fortsätta att köra koden som kommer direkt efter while-satsen.

do...while

Det finns en till variant av while-loopen. Skillnaden är att man sätter villkoret sist och påbörjar loopen med kommandot do.

do
{ 
  <Denna kod upprepas till antal liv når 0 >
} while ( liv > 0 );

Den stora skillnaden mellan while-varianterna är var man testar om villkoret är sant. Eftersom while-kommandot kommer sist i denna variant, så kommer koden inom do..while att köras igenom minst en gång.

Att räkna med while-loopar

Egentligen är for-loopar mer lämpade om man vill räkna, men vi kan göra det med hjälp av while också. Så här skulle man kunna göra;

let a = 1;
while ( a < 5 )
{
  <Denna kod upprepas till antal a når 5 >

  a = a + 1
}

Exempelkoden skulle alltså räkna upp ifrån ett till fyra (eftersom vi kollar att a är mindre än fem).

while med grundvilkor

Ofta sätter man ett startvärde eller ett grundvillkor strax innan man börjar sin loop, till exempel;

let running = true;

while ( running ) {
  <Denna kod upprepas till running blir false >
}

Inuti loop-koden har man sedan någonting som gör att running blir satt till false och då avslutas loopen nästa runda.

for-loopar

for-loopar passar bäst när man redan från början vet att man ska göra något ett visst antal gånger eller räkna igenom en viss talföljd.

En for-loop ser i grunden ut så här

for( let i=0; i < 10; i++ )
{
  <Denna kod upprepas tio gånger>
  <och i börjar som 0, räknas upp ett steg i taget och slutar som 9>
}

Man kan bryta ner for-satsen i tre delar:

  1. let i=0 Den så kallade initialiseringen. I det här fallet så skapar vi en variabel som vi ska använda för att räkna med och sätter den till noll. Loop-variabeln kallas oftast för loopindex. Vid for-loopens start sätts loopindex till startvärdet noll (det är det som kallas för initialisering), men man kunde förstås sätta den till vad som helst. Initialiseringen sker enbart vid uppstarten av loopen och den körs inte under de efterföljande varven. Man kan göra vad som helst vid initialiseringen, inte bara skapa variabler. Om man så vill kan man lämna initialiseringen helt tom.
  2. i < 10 Detta är testvillkoret som avgör om man är klar med loopen eller ej. Denna koll körs varje loopvarv och det görs innan koden i loopen körs. Vi kan med andra ord köra koden noll eller flera gånger (till och med ett ”oändligt” antal gånger om vi så vill). Här kan man använda alla de booleska sanningsvillkoren om man så vill.
  3. i++ Slut-satsen, denna körs varje gång man kört klart ett loopvarv. I det här fallet ökar vi variabeln med ett (++ är ett snabbare, kortare sätt att skriva i = i + 1). Efter att denna sats körts, går for-loopen tillbaka till början och genomför testvillkoret igen, programmet går alltså tillbaka till steg 2.

Observera att loopen i exemplet kommer att köras tio gånger och kommer att räkna ifrån noll upp till nio.

Om man behöver kan man nästla loopar, dvs lägga loopar inuti andra loopar. T.ex;

for( let i=0; i < 10; i++ )
{
  for( let j=0; j < 10; j++ )
  {
    <Denna kod upprepas tio * tio gånger (dvs, hundra gånger)>
  }
}

Kontrollkommandon för loopar

continue

Det finns även några kommandon som kan användas inuti loopar för att styra hur loopen beter sig. Det första av dessa är continue. Om programmet befinner sig inuti en loop och kommer till en continue-instruktion, hoppar programmet över all efterföljande kod och går direkt till loop-satsens villkorssats.

Ett litet exempel:

for( let i=0; i < 10; i++ )
{
  if( isEven( i ) ) {
    continue;
  }
  <Denna kod körs bara när i är udda>
}

Varje gång i är ett jämt tal hoppar programmet över koden efter if:en. Det var alltså ett krångligt sätt att skriva något som vi lika gärna kunnat lösa genom att byta ut vår i++ till i += 2 (vilket är ett snabbare sätt att skriva i = i + 2).

break

Ett annat sätt att styra loopflödet är att använda sig av break. När programmet når en sådan instruktion avslutas nuvarande loop direkt och programmet fortsätter att köra den kod som följer efter loopen. Ett exempel på detta:

while( true )
{
  if( pressedKey == q ) {
    break;
  }
  <massvis med annan kod>
}
<När man når break, hoppar koden direkt hit>

Nästa aktivitet

Komplexa variabler