|
|
| Rad 1: |
Rad 1: |
| 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.
| | Komplexa, eller sammansatta, variabler kan innehålla flera olika värden. Den vanligaste sammansatta variabeltypen är arrayer. Vilket är en typ av variabel där vi kan ange ett index för att tala om vilket värde vi vill komma åt. |
|
| |
|
| 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; <code>while</code>-loopen.
| | Har du programmerat i något annat språk kan det vara bra att veta att i JavaScript så är arrayer och listor ungefär samma sak. |
| == <code>while</code>-loop ==
| |
| <code>while</code>-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 <code>while</code>-loop ut så här:
| |
| | |
| <div class="well well-cyanide-light">
| |
| <syntaxhighlight lang="JavaScript">
| |
| 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>
| |
| </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.
| |
| | |
| Om villkoret efter <code>while</code> ä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 <code>while</code>-satsen.
| |
| | |
| == <code>do...while</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">
| |
| do
| |
| {
| |
| <Denna kod upprepas till antal liv når 0 >
| |
| } while ( liv > 0 );
| |
| </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.
| |
| | |
| == Att räkna med <code>while</code>-loopar ==
| |
| 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">
| |
| var a = 1;
| |
| while ( a < 5 )
| |
| {
| |
| <Denna kod upprepas till antal a når 5 >
| |
| | |
| a = a + 1
| |
| }
| |
| </syntaxhighlight>
| |
| </div>
| |
| | |
| Exempelkoden skulle alltså räkna upp ifrån ett till fyra (eftersom vi kollar att <code>a</code> är ''mindre'' än fem).
| |
| | |
| == <code>while</code> med grundvilkor ==
| |
| 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">
| |
| var running = true;
| |
| | |
| while ( running ) {
| |
| <Denna kod upprepas till running blir false >
| |
| }
| |
| </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.
| |
| | |
| == <code>for</code>-loopar ==
| |
| <code>for</code>-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 <code>for</code>-loop ser i grunden ut så här
| |
|
| |
|
| | En array skapas så här: |
| <div class="well well-cyanide-light"> | | <div class="well well-cyanide-light"> |
| <syntaxhighlight lang="JavaScript"> | | <syntaxhighlight lang="JavaScript"> |
| for( var i=0; i < 10; i++ )
| | let värden = [ 1, 2, 3, 4 ]; |
| {
| |
| <Denna kod upprepas tio gånger>
| |
| <och i börjar som 0, räknas upp ett steg i taget och slutar som 9>
| |
| }
| |
| </syntaxhighlight> | | </syntaxhighlight> |
| </div> | | </div> |
|
| |
|
| Man kan bryta ner for-satsen i tre delar:
| | I exemplet ovan skapas en array som innehåller värdena <code>1</code>, <code>2</code>, osv. För att komma åt ett specifikt element i arrayen kan vi göra som följer: |
| | |
| <ol>
| |
| <li><code>var i=0</code>
| |
| | |
| 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 <code>for</code>-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.
| |
| </li>
| |
| <li>
| |
| <code>i < 10</code>
| |
| | |
| 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.
| |
| </li>
| |
| <li><code>i++</code>
| |
| | |
| Slut-satsen, denna körs varje gång man kört klart ett loopvarv. I det här fallet ökar vi variabeln med ett (<code>++</code> är ett snabbare, kortare sätt att skriva <code>i = i + 1</code>). Efter att denna sats körts, går <code>for</code>-loopen tillbaka till början och genomför testvillkoret igen, programmet går alltså tillbaka till steg 2.
| |
| </li>
| |
| </ol>
| |
| 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;
| |
|
| |
|
| <div class="well well-cyanide-light"> | | <div class="well well-cyanide-light"> |
| <syntaxhighlight lang="JavaScript"> | | <syntaxhighlight lang="JavaScript"> |
| for( var i=0; i < 10; i++ )
| | let ettVärde = värden[0]; |
| {
| |
| for( var j=0; j < 10; j++ )
| |
| {
| |
| <Denna kod upprepas tio * tio gånger (dvs, hundra gånger)>
| |
| }
| |
| }
| |
| </syntaxhighlight> | | </syntaxhighlight> |
| </div> | | </div> |
|
| |
|
| == Kontrollkommandon för loopar ==
| | Ovanstående kod kommer att plocka ut det _första_ värdet i arrayen. I programmering brukar vi oftast börja att räkna ifrån noll. Det gör att arrayen <code>värden</code>, kommer att innehålla fyra element. Elementen är numrerade noll till tre. Dvs, ett mindre än antalet element. Vilket är på grund av att vi räknar ifrån noll. |
| === <code>continue</code> ===
| |
| 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 <code>continue</code>. Om programmet befinner sig inuti en loop och kommer till en <code>continue</code>-instruktion, hoppar programmet över all efterföljande kod och går direkt till loop-satsens villkorssats.
| |
| | |
| Ett litet exempel:
| |
| | |
| <div class="well well-cyanide-light">
| |
| <syntaxhighlight lang="JavaScript">
| |
| for( var i=0; i < 10; i++ )
| |
| {
| |
| if( isEven( i ) ) {
| |
| continue;
| |
| }
| |
| <Denna kod körs bara när i är udda>
| |
| }
| |
| </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>).
| |
| | |
| === <code>break</code> ===
| |
| 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">
| |
| while( true )
| |
| {
| |
| if( pressedKey == ”q” ) {
| |
| break;
| |
| }
| |
| <massvis med annan kod…>
| |
| }
| |
| <När man når break, hoppar koden direkt hit>
| |
| | |
| </syntaxhighlight>
| |
| </div>
| |