3. 1 Mitä ovat ehtolauseet?
Esimerkki
Ehtolauseilla voidaan määritellä ohjelmalle vaihtelevia lopputuloksia.
Jos Almalla on enemmän kuin 5 pähkinää, niin hän voi jakaa ne ystävänsä Brunon kanssa. Jakaako Alma pähkinät Brunon kanssa, jos hänellä on 10 pähkinää? Entäs jos hänellä on 2 pähkinää?
Ehdon "Jos Almalla on enemmän kuin 5 pähkinää, niin hän jakaa pähkinät" perusteella ensimmäisessa tapauksessa Alma jakaa pähkinät Brunon kanssa. Kahden pähkinän tapauksessa näin kuitenkaan ei ole.
Almalla oli ehto, jonka perusteella hän toimi tietyllä tavalla. Seuraavaksi tutustumme, miten voimme antaa tietokoneella samanlaisia ehtoja.
3.2 Jos-niin ehto
Jos Almalla on ennemmän kuin 5 pähkinää niin Alma jakaa pähkinät Brunon kanssa.
Ehtolause on muotoa if (ehto). Kun ehto toteutuu, suoritetaan koodi { } lohkon sisältä. Edellisen kohdan esimerkki voitaisiin siis kirjoittaa muodossa
if(almanPähkinät > 5){
brunonPähkinät = almanPähkinät/2
almanPähkinät = almanPähkinät/2
}
Esimerkki
Tässä esimerkissä Almalla on aluksi 10 pähkinää.
Tehtävä
Almalle ei ole annettu lainkaan pähkinöitä! Korjaa koodia niin, että Almalla on 2 pähkinää. Saako Bruno yhtään pähkinää?
Ehtolauseesta on erityisesti hyötyä silloin kun muuttujien arvo voi vaihtua.
Esimerkki
Miksi syötteellä 3 Bruno ei saa pähkinöitä, mutta syötteellä 7 hän saa.
Vertailu
Matematiikasta tuttuja vertailuoperaattoreita ovat pienempi kuin <, suurempi kuin > ja yhtäsuuri kuin =. Ohjelmoinnissa käytettään lähes samoja operaattoreita! Vertailua käytetään erityisesti silloin, kun ehtolausetta käytetään. Vertailun tulos määrittää sen, tapahtuuko ehto.
Lukujen kokoa voidaan vertailla pienempi kuin ja suurempi kuin -merkeillä tavallisesti.
Esimerkki
Numeroita vertaillaan kuten matematiikassa.
Yhtäsuuruuden vertailu onnistuu JavaScriptissä käyttämällä kolmoisyhtäsuuruutta ===. Kolmoisyhtäsuuruus käy merkkijonojen ja numeroiden vertailuun.
Esimerkki
Yhtäsuuruutta vertaillaan kolmoisyhtäsuuruudella.
"ankka" === "Ankka"
Huomasithan, että edellisessä esimerkissä isolla kirjoitettu Ankka ei ollut sama asia kuin pienellä kirjoitettu ankka. Tässä tuleekin olla erityisen tarkkana. JavaScript on case sensitive eli sen mielestä isolla ja pienellä kirjoitetut sanat ovat erilaisia.Tehtävä
Täydennä jos-ehtoja niin, että nimi tulostuu oikein.
Tehtävä
Täydennä jos-ehtoa niin, että jos muuttuja brunonPähkinät on pienempää kuin 2, niin Bruno saa lisää pähkinöitä.
3.2 Jos muuten
Esimerkki
Bruno saa lohdutuspalkintona pähkinöitä, jos Almalla on liian vähän pähkinöitä.
Jos Almalla on ennemmän kuin 5 pähkinää niin Alma jakaa pähkinät Brunon kanssa. Muuten Bruno saa 2 pähkinää.
Edellisessä esimerkissä jos Almalla on 5 pähkinää, niin hän jakaa pähkinät Brunon kanssa. Mitä jos Almalla on alle 5 pähkinää? Tällöin Bruno ei saa yhtään pähkinää. Tälläinen tilanne on Brunon mielestä epäreilu ja hän joutuu katselemaan vierestä, kun Alma syö pähkinöitä. Voimme kuitenkin määritellä, että Bruno saa lohdutuspalkinnoksi 2 pähkinää.
if(almanPähkinät > 5){
brunonPähkinät = almanPähkinät/2
almanPähkinät = almanPähkinät/2
} else {
brunonPähkinät = 2
}
Jos jos-ehto ei toteudu niin suoritetaan else-lohko.
Esimerkki
Tässä esimerkissä Almalla on aluksi 2 pähkinää. Kuinka monta pähkinää Brunolla on?
Esimerkki
Esimerkissä on kuuntelija, joka odottaa, milloin tekstiä klikataan. Kun tekstiä on klikattu, tarkastamme ehtolauseella, mitä tekstissä lukee. Jos tekstissä lukee "Klikkaa minua.", niin teksti vaihtuu tekstiksi "Moikka moi!". Muutoin teksti vaihtuu tekstiksi "Klikkaa minua.".
Tehtävä
Tee ohjelma, joka kysyy käyttäjältä luvun. Jos luku on 42, niin tulosta alert()-komennolla "Löysit onnenlukuni!". Jos käyttäjä syöttää minkä tahansa muun luvun, ohjelma tulostaa "Et osunut tällä kertaa oikeaan."
3.3 Useamman ehdon käyttäminen
Esimerkki
Useamman ehtolauseen käyttäminen lisää ohjelman mahdollisten lopputulosten määrää.
Jos Almalla on tasan 5 pähkinää niin Alma jakaa pähkinät Brunon kanssa. Muuten jos Almalla on yli 10 pähkinää hän antaa Brunolle 5 pähkinää ja pitää loput ise. Muuten Bruno saa 2 pähkinää.
Jos-ehtoja voidaan ketjuttaa. Tässä ideana on se, että kun ensimmäinen if-ehto täyttyy, niin silloin se lohko koodia toteutetaan. Jos mikään if-ehdoista ei täyty, niin silloin siirrytään else-lohkon koodiin. Huomaa, että vain yksi if-ehdoista toteutetaa
if(almanPähkinät == 5){
brunonPähkinät = almanPähkinät/2
almanPähkinät = almanPähkinät/2
} else if (almanPähkinät > 10){
almanPähkinät = almanPähkinät - 5;
brunonPähkinät = brunonPähkinät + 5;
} else {
brunonPähkinät = brunonPähkinät + 2;
}
Esimerkki
Tässä esimerkissä Almalla on aluksi 10 pähkinää.
Mitä eroa seuraavilla if-lauseilla on?
Esimerkki
Esimerkki
Näppäimistön kuuntelija tietylle näppäimelle
Edellisessa osassa tutustuimme, miten voidaan tarkkailla, milloin mitä tahansa näppäintä painetaan. Ehtolauseiden avulla, voimme määrittää tapahtuman tietylle näppäimelle. Aloitetaan sillä, mitä toisessa osassa opittiin eli luodaan näppäimistön kuuntelija ja tekstilementti, jota näppäimen painallus muuttaa
<p id=teksti>
Mysteerinäppäin vaihtaa tekstini.
</p>
<script>
document.onkeydown = event => {
teksti.textContent = "Voitin pelin!"
}
</script>
Halutaan, että kun painetaan näppäintä a, niin ohjelma muuttaa tekstielementin tekstiä. Käytetään tähän ehtolausetta. Painetun näppäimen saa tietoon tapahtumalta (englanniksi event) käskyllä event.key
<p id=teksti>
Mysteerinäppäin vaihtaa tekstini.
</p>
<script>
if (event.key === "a") {
document.onkeydown = event => {
teksti.textContent = "Voitin pelin!"
}
}
</script>
Esimerkki
Mysteerinäppäintä painamalla teksti vaihtuu.
Nuolinäppäimet nimet ovat selaimessa ArrowUp, ArrowDown, ArrowLeft ja ArrowRight. Kun vertaillaan painettua näppäintä näihin nimiin, niin tiedetään, mitä nuolipainiketta painettiin.
Esimerkki
Näppäimistön kuuntelijat reagoivat näppäinten painalluksiin.