Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

JavaScript-kielen toistolauseet (alkeet - osa 3)

Toistolauseet, tai silmukat, ovat ohjelmarakenteita, joilla toistetaan toimenpiteitä niin kauan kuin tietty toistoehto on voimassa.

Sisällysluettelo

  1. while-lause
    1. while-lauseen syntaksi
    2. while-lauseen koodiesimerkki
  2. do-while-lause
    1. do-while-lauseen syntaksi
    2. do-while-lauseen koodiesimerkki
  3. for-lause
    1. for-lauseen syntaksi
    2. for-lauseen koodiesimerkki
  4. break-lause
  5. continue-lause
  6. Sisäkkäiset toistolauseet

while-lause

while-lause on toistolauseista suoraviivaisin, niin sanottu alkuehtoinen silmukka, jossa: Alkuehtoinen toistolause

  1. tarkastetaan lauseen toistoehto, eli ehtolausekkeen totuusarvo (true tai false)
    • suoritetaan ehtoa seuraavan lauselohkon (silmukan rungon) lause(et), mikäli ja ainoastaan siinä tapauksessa että ehto evaluoituu todeksi (true)
    • toistetaan edelliset toimenpiteet aina siihen asti että annettu ehto evaluoituu epätodeksi (false)
  2. jatketaan ohjelman suoritusta silmukan rungon jälkeen

Huomioi että:

while-lauseen syntaksi

while-lauseen syntaksi on seuraavanlainen:

/* Seuraavassa toistoehto on mikä tahansa arvioitava
   lauseke kaarisulkujen välissä: */
   
while (toistoehto) {// silmukan runko alkaa

  /* Suoritettava(t) lause(et)
     mikäli toistoehto evaluoituu todeksi.
     Muuten ohjelman suoritus jatkuu lauselohkon jälkeen. */

}// silmukan runko päättyy

while-lauseen koodiesimerkki

Toistolauseiden hyödyllisyys havainnollistuu parhaiten esimerkkien kautta. Seuraavassa tahdotaan tulostaa taulukkoon celsiusasteita vastaavat Fahrenheit-asteikon arvot väliltä 20-29. Kymmenen peräkkäisrakennelauseen sijaan käytämme yhtä toistolausetta:

/* Alustetaan celsius-muuttuja: */
var celsius = 20;
/* Kirjoitetaan taulukon alkutägi
   ja otsikkorivi: */
document.write('<table border="3">');
document.write('<tr><th>°C</th>');
document.write('<th>°F</th></tr>');

/* Silmukka alkaa,
   siirrytään silmukan runkoon,
   mikäli toistoehto pätee: */
while (celsius < 30) {//toistoehto  
/* Kirjoitetaan taulukkoon rivi.
   Ensimmäiseen sarakkeeseen muuttujan
   arvo per toistokerta: */
document.write('<tr><td>'+celsius+'</td>');
/* Toiseen sarakkeeseen muuttujan
   arvo kerrottuna muuntokaavalla: */
document.write('<td>'+(celsius*9/5+32)+'</td></tr>');
/* Vaikutetaan toistoehtoon:*/
celsius++;//kasvatetaan muuttujan arvoa yhdellä
/* Siirrytään takaisin ylös tarkastamaan toistoehtoa.*/
}//silmukan runko päättyy
/* Kirjoitetaan taulukon lopputägi
   kun toistoehto ei enää päde: */
document.write('</table>');

Koodimme tulostuu dokumenttiin seuraavasti:

do-while-lause

do-while-lause, on muunnelma edellisestä, niin sanottu loppuehtoinen silmukka, jossa: Loppuehtoinen toistolause

  1. suoritetaan lauselohkon (silmukan rungon) lause(et)
  2. tarkastetaan lauseen toistoehto, eli ehtolausekkeen totuusarvo (true tai false)
    • suoritetaan silmukan rungon lause(et) uudelleen, mikäli ja ainoastaan siinä tapauksessa että ehto evaluoituu todeksi (true)
    • toistetaan aina siihen asti että annettu toistoehto evaluoituu epätodeksi (false)
  3. jatketaan ohjelman suoritusta toistoehdon jälkeen

do-while-lauseen syntaksi

do-while-lauseen syntaksi on seuraavanlainen:

do {
/* Vähintään kerran suoritettava(t) lause(et).
   Toistetaan niin kauan kuin toistoehto evaluoituu todeksi.
   Muista vaikuttaa toistoehtoon tämän lohkon sisältä! */
} while (toistoehto);

do-while-lauseen koodiesimerkki

Seuraavassa esimerkissä suoritetaan sama koodi kuin while-lauseen esimerkkikoodissa:

var celsius = 20;
document.write('<table border="3">');
document.write('<tr><th>°C</th>');
document.write('<th>°F</th></tr>');
/* Silmukka alkaa: */
do {
  document.write('<tr><td>'+celsius+'</td>');
  document.write('<td>'+(celsius*9/5+32)+'</td></tr>');
  celsius++;
} while (celsius < 30);
/* Silmukka loppuu. */
document.write('</table>');

Kun while-lohkoon ei välttämättä mennä ollenkaan, niin do-while-silmukan runko suoritetaan vähintään kerran. Tapauskohtaisesti on päätettävä kumpaa rakennetta on mielekkäämpi käyttää.

for-lause

for-lause, joka poikkeaa rakenteeltaan edellisistä, on niin sanottu lukumääräinen silmukka, jossa: Lukumääräinen toistolause

  1. Suoritetaan kerran valinnaiset alkuasetukset. Tyypillisesti alkuasetuksessa alustetaan muuttuja, joka toimii silmukan laskurina.
  2. Suoritetaan valinnaisen toistoehtolausekkeen evaluointi.
    • Mikäli ehto on tosi, suoritetaan silmukan rungon lause(et).
    • Poistutaan silmukasta, mikäli ehto on epätosi.
  3. Suoritetaan päivityslausek(k)e(et) (myös valinnainen osuus). Tyypillisesti joku toiston lopetukseen vaikuttava toimenpide, kuten laskurin kasvattaminen.
  4. Siirrytään evaluoimaan toistoehtoa.

Huomioi ettei for-silmukan rungon lauseita välttämättä suoriteta kertaakaan (mikäli toistoehto evaluoituu epätodeksi).

for-lauseen syntaksi

for-lauseen syntaksi on seuraavanlainen:

for (/*alkuasetus*/;
     /*toistoehto*/;
       /*päivitys*/) {//silmukan runko alkaa

  /* Suoritettava(t) lause(et)
     mikäli toistoehto evaluoituu todeksi.
     Muuten ohjelman suoritus jatkuu lauselohkon jälkeen. */

}//silmukan runko päättyy

for-lauseen erikoisuuksiin kuuluu se, että kaikki sen kontrollilausekkeet ovat valinnaisia, jolloin edellinen syntaksiesimerkki näyttäisi JS-käsittelijän kannalta seuraavalta:

for (;;) { }

Jolloin tuloksena olisi päättymätön silmukka, koska puuttuva toistoehto vastaa true-arvoa. Taas, mikäli for-lauseessa on pelkkä ehto, niin se vastaa täysin while-lausetta:

for (;/*toistoehto*/;) {/*suoritettava(t) lause(et)*/}
while (/*toistoehto*/) {/*suoritettava(t) lause(et)*/}

for-lauseen koodiesimerkki

Seuraavassa toteutetaan sama esimerkkikoodi kuin edellisissäkin toistolauseissa:

document.write('<table border="3">');
document.write('<tr><th>°C</th>');
document.write('<th>°F</th></tr>');
/* Silmukka alkaa: */
for (var celsius = 20;//alustus
         celsius < 30;//toistoehto
            celsius++)//päivitys
{
document.write('<tr><td>'+celsius+'</td>');
document.write('<td>'+(celsius*9/5+32)+'</td></tr>');
}
/* Silmukka päättyy.*/
document.write('</table>');

break-lause

Valintalauseen yhteydessä tutuksi tulleella break-lauseella voidaan katkaista myös kaikki toistolauseet, silmukoiden rungon sisältä, vaikka toistoehto olisikin vielä voimassa. Esimerkkinä edellisen silmukan lopettaminen katkaisulauseella:

document.write('<table border="3">');
document.write('<tr><th>°C</th>');
document.write('<th>°F</th></tr>');
/* Silmukan toistoehto aina voimassa: */
for (var celsius = 20;true;celsius++) {
  document.write('<tr><td>'+celsius+'</td>');
  document.write('<td>'+(celsius*9/5+32)+'</td></tr>');
  if (celsius == 29) {
    /*Silmukka päättyy heti kun
      JS-käsittelijä kohtaa katkaisulauseen:*/
    break;
  } 
}
document.write('</table>');

continue-lause

continue-lause on toinen komentorakenne, jota voidaan katkaisulauseen tapaan käyttää toistorakenteiden rungossa. continue ei katkaise koko silmukkaa, vaan kyseisen toistokerran, siten että:

Esimerkin vuoksi muunnamme taulukkokoodiamme sellaiseksi että vain parilliset celsiusasteet tulostuvat:

document.write('<table border="3">');
document.write('<tr><th>°C</th>');
document.write('<th>°F</th></tr>');
for (var celsius = 20;
           celsius<30;
            celsius++) {
  if (celsius%2 == 1) {//jos celsius on pariton
  continue;//siirrytään päivityslausekkeeseen
  }//muuten kirjoitetaan taulukon rivi:
  document.write('<tr><td>'+celsius+'</td>');
  document.write('<td>'+(celsius*9/5+32)+'</td></tr>');
}
document.write('</table>');

Nyt koodimme tulostuu seuraavasti:

Yleisesti ottaen kannattaa välttää break- ja continue -lauseita, koska ne vaikeuttavat koodin luettavuutta. Nämä ovatkin useimmiten helposti korvattavissa muuttamalla ohjelmarakennetta. Esimerkiksi edellinen koodimme olisi paljon yksinkertaisemmin voitu toteuttaa muuntamalla päivityslauseketta:

document.write('<table border="3">');
document.write('<tr><th>°C</th>');
document.write('<th>°F</th></tr>');
for (var celsius = 20;celsius<30;celsius+=2) {
  document.write('<tr><td>'+celsius+'</td>');
  document.write('<td>'+(celsius*9/5+32)+'</td></tr>');
}
document.write('</table>');

Sisäkkäiset toistolauseet

Kaikkia toistolauseita voidaan asettaa myös sisäkkäin. Tällöin sisempi toistolause tulee uloimman toistolauseen runkoon ja jokaisella uloimman silmukan kierroksella suoritetaan kaikki sisemmän silmukan kierrokset.

Esimerkkinä käytämme kertotaulua, jossa emme kuormita document.write-metodia kuten aikaisemmissa esimerkeissä, vaan ketjutamme merkkijonoja yhteen muuttujaan, jonka vasta lopuksi kirjoitamme dokumenttiin:

Koodin tulos Koodi
/* Alustetaan muuttuja taulukon alkutägillä: */
var kertotaulu = "<table border='1'>";
/* Ulompi silmukka pyörähtää 10 kertaa: */
for (var rivit=1;rivit<=10;rivit++) {
  /* Lisätään joka kerralla muuttujaan rivin alkutägi: */  
  kertotaulu += "<tr align='center'>";
  /* Sisempi silmukka pyörähtää 10 kertaa
     jokaisen uloimman silmukan kierroksella:  */  
  for (var solut=1;solut<=10;solut++) {
  /* Lisätään joka kerralla muuttujaan solu,
     jonka sisältönä kulloisenkin kohdan tulo: */  
    kertotaulu += "<td>"+ rivit * solut +"</td>";
    /* Esim. jos menossa olisi uloimman 3. ja sisemmän
       silmukan 7. kierros niin yo. kohta olisi:
       kertotaulu += "<td>"+ 3 * 7 +"</td>"; */
  }//sisempi silmukka päättyy
  /* Lisätään joka kerralla muuttujaan rivin lopputägi: */  
  kertotaulu += "</tr>";
}//ulompi silmukka päättyy
/* Viimeistellään muuttuja taulukon lopputägillä: */  
kertotaulu += "</table>";
/* Kirjoitetaan lopuksi muuttujan sisältö dokumenttiin: */
document.write(kertotaulu);
Osmo Saarikumpu

yksi taso ylös