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

JavaScript-kielen ehtolauseet (alkeet - osa 2)

Ehtolauseet, joilla ohjataan JavaScript (tästä edes JS) -koodin kulkua, ovat valintarakenteita, joilla tunnistetaan ohjelman ajonaikaisia muuttuvia tekijöitä ja valitaan olosuhteisiin nähden oikea etenemistapa. Valintarakenteet mahdollistavat seuraavan suoritettavan lauseen valinnan jonkun ehdon arvon perusteella.

Lukijan oletetaan tutustuneen ensin oppaan ensimmäiseen osaan, sekä Johdantoon JavaScriptin käytöstä Web-sivuilla.

Sisällysluettelo

  1. if-lause
    1. if-lauseen syntaksi
    2. if-lauseen koodiesimerkki
    3. Peräkkäiset if-lauseet
    4. Sisäkkäiset if-lauseet
  2. else-lause
    1. else-lauseen syntaksi
    2. else-lauseen koodiesimerkki
  3. Ehdollinen lauseke
    1. Ehdollisen lausekkeen syntaksi
    2. Ehdollisen lausekkeen koodiesimerkki
  4. else-if-ketjutus
    1. else-if-syntaksi
    2. else-if-koodiesimerkki
  5. switch-lause
    1. switch-lauseen syntaksi
    2. switch-koodiesimerkkejä

if-lause

if-, eli jos-lause, on yksinkertaisin ehtolause, jossa:

  1. tarkastetaan tietty ehto, eli ehtolausekkeen totuusarvo (true tai false)
  2. suoritetaan ehtolausetta seuraavan lauselohkon lause tai lauseet, mikäli ja ainoastaan siinä tapauksessa että ehto evaluoituu todeksi (true)
  3. jatketaan ohjelman suoritusta lauselohkon jälkeen

if-lauseen syntaksi

if-lauseen syntaksi on seuraavanlainen:

/* Seuraavassa ehto on mikä tahansa arvioitava
   lauseke kaarisulkujen välissä: */
   
if (ehto) {// lauselohko alkaa

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

}// lauselohko päättyy

if-lauseen koodiesimerkki

Esimerkiksi seuraavassa käytetään hyväksi document-oliota ja tarkastetaan onko dokumentin ulkoinen otsikko määritetty ja mikäli ehto evaluoituu todeksi niin kirjoitetaan se dokumenttiin:

/* ehto: Onko TITLE-elementin pituus suurempi kuin nolla? */
if (window.document.title.length > 0) {
  window.document.write('<p>Sivun otsikko on: <b>' +
                 window.document.title + '</b>.</p>');
}

Edellinen koodi tulostuu tässä tapauksessa seuraavasti:

Koodimme ei taas olisi tehnyt mitään, mikäli ehto ei olisi evaluoitunut todeksi, eli tapauksissa jossa dokumentin TITLE-elementti olisi tyhjä tai elementti puuttuisi kokonaan.

Peräkkäiset if-lauseet

Tarvittaessa if-lauseita voidaan asettaa peräkkäin, niin monta kuin on tarpeen. Esimerkiksi seuraavasti (hieman lyhennetyillä viittauksilla):

var tuloste;
if (document.title) { //edellinen ehto lyhennettynä
  tuloste = '<p>Sivun otsikko on: <b>' +
            document.title + '</b>.</p>';
}
if (!document.title) { //käänteinen totuusarvo
  tuloste = '<p>Sivun ulkoinen <b>otsikko puuttuu!</b></p>';
}
document.write(tuloste);

Useimmiten kuitenkin peräkkäisille if-lauseille löytyy selkeämpiä ja tehokkaampia vaihtoehtoja muista ehtolauseista.

Sisäkkäiset if-lauseet

Edelleen, if-lauseita voidaan asettaa sisäkkäin, jolloin mahdollistuu useamman eri ehdon tarkistaminen. Syntaksiesimerkki:

if (ehto1) {//siirrytään seuraavaan mikäli ehto täyttyy
  if (ehto2) {//siirrytään seuraavaan mikäli ehto täyttyy
    if (ehto3) {
      /* suoritettava(t) lause(et) vain kaikkien edellisten ehtojen täyttyessä */
    } 
  } 
}

Johdonmukaiset sisennykset parantavat syvälle tasolle menevien sisäkkäisyyksien luettavuutta ja tulkintaa.

else-lause

else-, eli muuten-lause, on ehtolause, joka voidaan asettaa (aina tarvittaessa) if-lauseelle kuuluvan lauselohkon jälkeen. else-lausetta seuraavan lauselohkon lause(et) suoritetaan, mikäli välittömästi edellinen if-lause evaluoituu epätodeksi (false).

else-lauseen syntaksi

else-lauseen syntaksi on seuraavanlainen:

if (ehto) {//jos ehto on tosi
  /* Suoritettava(t) lause(et)
     mikäli ehto evaluoituu todeksi. */

} else {//muussa tapauksessa
  /* Suoritettava(t) lause(et)
     mikäli ehto evaluoituu epätodeksi. */
}

else-lauseen koodiesimerkki

Seuraavassa esimerkissä suoritetaan sama koodi kuin peräkkäisissä if-lauseissa:

var tuloste;
if (document.title) { //löytyykö otsikko?
  tuloste = '<p>Sivun otsikko on: <b>' +
            document.title + '</b>.</p>';
} else { //muussa tapauksessa:
  tuloste = '<p>Sivun ulkoinen <b>otsikko puuttuu!</b></p>';
}
document.write(tuloste);

Vaikka lopputulos on sama, niin esimerkkimme osoittaa että else-lauseen käyttö, verrattuna peräkkäisiin if-lauseisiin, useimmiten on:

Ehdollinen lauseke

Edellinen suoraviivainen jos-muuten rakenne voidaan myös pikakirjoittaa käyttämällä ehdollista lauseketta, jossa on kolme argumenttia:

  1. ehto - tarkastettava totuusarvo
  2. lauseke1 - palauttaa 1. lausekkeen arvon mikäli ehto on tosi
  3. lauseke2 - palauttaa 2. lausekkeen arvon mikäli ehto on epätosi

Ehdollisen lausekkeen syntaksi

Ehdollisen lausekkeen syntaksi on seuraavanlainen:

( /* Arvioitava totuusarvo. */ )? //kysymysmerkki erottaa 1. ja 2. argumentin
/* Arvo jos ehto on tosi. */   : //kaksoispiste erottaa 2. ja 3. argumentin
/* Arvo jos ehto on epätosi. */;

Ehdollisen lausekkeen koodiesimerkki

Seuraavassa esimerkissä lopputulos on sama kuin peräkkäisissä if-lauseissa ja else-lauseen koodiesimerkissä:

var tuloste = (document.title)?
'<p>Sivun otsikko on: <b>'+ document.title +'</b>.</p>':
'<p>Sivun ulkoinen <b>otsikko puuttuu!</b></p>';
document.write(tuloste);

Tyypillisesti ehdollista lauseketta käytetään kuten yllä, eli ehdollisessa muuttujan määrittelyssä.

else-if-ketjutus

Muuten-jos-rakenteella voidaan tarkastella useampaa toisensa poissulkevaa vaihtoehtoa seuraavasti:

  1. Evaluoidaan if-lauseen ehto.
  2. Suoritetaan if-lauselohkon lause(et) mikäli ehto on tosi. Siirrytään evaluoimaan seuraavaa muuten-jos-ehtoa mikäli ehto on epätosi.
  3. Suoritetaan seuraavan muuten-jos-lauseen lauselohkon lause(et) mikäli sen ehto on tosi. Siirrytään evaluoimaan seuraavaa muuten-jos-ehtoa mikäli ehto on epätosi.
  4. Toistetaan kunnes löytyy todeksi evaluoitava ehto, tai siihen asti että muuten-jos-lauseet loppuvat.
  5. Jos mikään ehto ei täyty, suoritetaan else-lauselohko, mikäli sellainen on asetettu. Muuten ei tehdä mitään.

Myöskin ketjutuksen etuna on, että yhden ehdon toteutuessa muita ehtoja ei turhaan evaluoida.

else-if-syntaksi

else-if-lauseen syntaksi on seuraavanlainen:

if (ehto1) {//jos ehto on tosi
/* Suoritettava(t) lause(et)
   mikäli ehto evaluoituu todeksi. */
} else if (ehto2) {//muuten jos ehto on tosi
  /* Suoritettava(t) lause(et)
     mikäli ehto evaluoituu todeksi. */
  } else if (ehto3) {//muuten jos ehto on tosi
    /* Suoritettava(t) lause(et)
       mikäli ehto evaluoituu todeksi. */
    } else {//valinnainnen lause
         /* Suoritettava(t) lause(et)
            mikäli mikään ehto ei toteudu. */
      }

Muuten-jos-lauseiden määrällä ei ole rajoitusta.

else-if-koodiesimerkki

Esimerkin vuoksi seuraavassa käytetään hyväksi Date-oliota ja tulostetaan viikonpäivän mukainen teksti dokumenttiin:

/* Luodaan päivämääräolio tämän päivän tiedoilla: */
var päivämääräolio = new Date();
/* Haetaan viikonpäivän järjestysnumero
   alkaen nollasta (sunnuntai): */
var järjestysnumero = päivämääräolio.getDay();
/* Luodaan merkkijono, johon lisätään
   tekstiä ehdon mukaisesti:  */
var tuloste = 'Latasit tämän sivun ';
/* Selvitetään viikonpäivä: */
if (järjestysnumero == 1) {
tuloste += 'maanantaina.';
}  else if (järjestysnumero == 2) {
   tuloste += 'tiistaina.';
   } else if (järjestysnumero == 3) {
     tuloste += 'keskiviikkona.';
     } else if (järjestysnumero == 4) {
       tuloste += 'torstaina.';
       }
         else if (järjestysnumero == 5) {
         tuloste += 'perjantaina.';  
         }
           else {
           tuloste += 'viikonloppuna.';
           } 
document.write('<p>' + tuloste + '</p>');

Edellinen koodi tulostuu tässä tapauksessa seuraavasti:

switch-lause

switch-, eli valintalause sopii tilanteisiin joissa pitää tarkastaa monta toisensa poissulkevaa vaihtoehtoa:

  1. Evaluoidaan switch-lauseen argumenttina annettu lauseke.
  2. Verrataan lausekkeen arvoa jokaiseen (case-avainsanalla esiteltyyn) valintavakioon järjestyksessä kunnes lausekkeen arvoa vastaava valintavakio löytyy.
  3. Suoritetaan kaikki natsannutta valintavakiota seuraavat switch-lohkon lauseet kunnes kohdataan katkaisulause (break) tai lauselohko päättyy.
  4. Lohkoa voidaan täydentää valinnaisella default-lauseella, jonka lause(et) suoritetaan mikäli mikään valintavakio ei tärppää.

switch-lauseen syntaksi

switch-lauseen syntaksi on seuraavanlainen:

switch (lauseke) {//usein argumenttina muuttuja
  case valintavakio1: lause(et); break;
  case valintavakio2: lause(et); break;
  case valintavakio3: lause(et); break;
  case valintavakio4: //sama(t) lause(et) vakioarvoilla 4 ja 5
  case valintavakio5: lause(et); break;
             default: lause(et);
}

Huomioitavaa:

switch-koodiesimerkkejä

Esimerkin vuoksi toteutamme saman toiminnallisuuden kuin peräkkäisissä if-lauseissa, else-lauseen ja ehdollisen lausekkeen koodiesimerkeissä:

switch (document.title.length > 0) {
case true:
          document.write('<p>Sivun otsikko on: <b>' +
          window.document.title + '</b>.</p>');
          break;//mitä seuraa jos tämä lause uupuu?
default  ://myös 'case false' olisi käynyt
          document.write('<p>Sivun ulkoinen <b>otsikko puuttuu!</b></p>');
}

Tässä switch ei liene selkein toteutustapa, mutta useimmiten se on mielekkäämpi vaihtoehto muuten-jos-ketjutukselle:

/* Luodaan päivämääräolio tämän päivän tiedoilla: */
var päivämääräolio = new Date();
/* Haetaan viikonpäivän järjestysnumero
   alkaen nollasta (sunnuntai): */
var järjestysnumero = päivämääräolio.getDay();
/* Luodaan merkkijono, johon lisätään
   tekstiä ehdon mukaisesti:  */
var tuloste = 'Latasit tämän sivun ';
/* Selvitetään viikonpäivä: */
switch (järjestysnumero) {
case 1 : tuloste += 'maanantaina.';   break;
case 2 : tuloste += 'tiistaina.';     break;
case 3 : tuloste += 'keskiviikkona.'; break;
case 4 : tuloste += 'torstaina.';     break;
case 5 : tuloste += 'perjantaina.';   break;
default: tuloste += 'viikonloppuna.';
} 
document.write('<p>' + tuloste + '</p>');

Vielä yksi koodiesimerkki jossa sama toimenpide halutaan suorittaa kahdella eri vakioarvolla:

var päivämääräolio = new Date();
var järjestysnumero = päivämääräolio.getDay();
var tuloste = 'Latasit tämän sivun ';
switch (järjestysnumero) {
case 0 : //yhdistetään sunnuntai ja lauantai
case 6 : tuloste += '<b>viikonloppuna</b>.'; break;
default: tuloste += '<b>arkipäivänä</b>.';
}
document.write('<p>' + tuloste + '</p>');

Edellinen koodi tulostuu tässä tapauksessa seuraavasti:

Osmo Saarikumpu

yksi taso ylös