Ehtorakenteissa testataan erilaisten ehtojen "paikkansa pitävyyttä" ja tuloksen mukaan (TRUE/FALSE) suoritetaan jonkin määritellyistä tehtävistä.
Jos olet 18 vuotias tai vanhempi
Voit äänestää eduskuntavaaleissa
Muuten
Joudut odottamaan vielä jonkin aikaa
Esimerkkiin liityvässä ehdon testaamisessa, tulos-muuttujaan sijoittuu ehdon tuloksen mukaan (true/false)
teksti:tulos = (ikatieto < 18) ? "Liian nuori":"Riittävän ikäinen";
<input id="ika" value="18" />
<button onclick="testaaIka()"> Testaa ikäsi </button>
<p id="ikakoe"></p>
<script>
function testaaIka() {
var ikatieto, tulos;
ikatieto = document.getElementById("ika").value;
tulos = (ikatieto < 18) ? "Liian nuori":"Riittävän ikäinen";
document.getElementById("ikakoe").innerHTML =
tulos + " äänestämään eduskuntavaaleissa.";
}
</script>
Tulos www-sivulla:
Taulukossa alla, erilaisten ehtojen vertailuja:
| Ehto | Tulos |
|---|---|
2 < 12 | true |
2 < "12" | true |
2 < "Esa" | false |
2 > "Esa" | false |
2 == "Esa" | false |
"2" < "12" | false |
"2" > "12" | true |
"2" == "12" | false |
Taulukkoon liittyvä esimerkki:
<p id="testausA"></p>
<script>
document.getElementById("testausA").innerHTML =
"Totuusarvojen testausta<br>" +
"2 < 12 : " + (2 < 12) + "<br>" +
'2 < "12" : ' + (2 < "12") + "<br>" +
'2 < "Esa" : ' + (2 < "Esa") + "<br>" +
'2 > "Esa" : ' + (2 > "Esa") + "<br>" +
'2 == "Esa" : ' + (2 == "Esa") + "<br>" +
'"2" < "12" : ' + (2 < "12") + "<br>" +
'"2" > "12" : ' + (2 > "12") + "<br>" +
'"2" == "12" : ' + (2 == "12");
</script>
Tulos www-sivulla:
Varsinaiset ehto-rakenteet ovat seuraavat:
if , asetetun ehdon ollessa TOSI, suoritetaan ehtoon kirjatut tehtävät else , suoritetaan mikäli if-lauseet on EPÄTOSIA else-if , suoritetaan mikäli edelliset lauseet ovat EPÄTOSIA switch , ehto-rakenne jossa useita ohjelmalohkoja
if-lauseen sisällä oleva koodaus suoritetaan vain jos asetettu ehto pitää paikkansa.
eli on tosi:
if (ehto tai ehdot){
suoritettava ohjelma koodaus jos ehto tai ehdot olivat tosia
}
On mahdollista toteuttaa if-lauseiden joukko joilla tutkitaan esimerkiksi muuttujassa olevan tiedon mukaan suoritettava tehtävä:
var luku = 2;
if (luku==1){
suoritettava ohjelma koodaus jos ehto on tosi
}
if (luku==2){
suoritettava ohjelma koodaus jos ehto on tosi
}
if (luku==3){
suoritettava ohjelma koodaus jos ehto on tosi
}
Esimerkissä poimitaan päivämäärä-funktiolla saadusta tiedosta kelloaika tunteina ja
tuntilukua verrataan if-lauseessa asetetuun kellonaikaan.
Jos kellon aika on pienempi
kuin 10, näytetään Huomenta-tervehdys.
<p id="tervehdys"> Morjens </p>
<script>
if (new Date().getHours() < 10) {
document.getElementById("tervehdys").innerHTML = "Huomenta!";
}
</script>
Tulos www-sivulla:
Morjens
Seuraavassa esimerkissä on eräs ongelma, mikä?
<p id="vertaa1"> </p>
<script>
var tutkittava = 8;
var vertaa1 = 9, vertaa2 = 11;
if (tutkittava < vertaa1) {
document.getElementById("vertaa1").innerHTML =
"Tutkittava on pienempi kuin 9";
}
if (tutkittava < vertaa2) {
document.getElementById("vertaa1").innerHTML =
"Tutkittava on pienempi kuin 11";
}
</script>
Tulos www-sivulla:
Tarkista vastauksesi painikkeesta.
jos on klo 5:01 – 10
näytä ”Hyvää huomenta”
jos klo 10:01 – 14
näytä ”Hyvää päivää”
jos klo 14:01 – 17
näytä ”Hyvää iltapäivää”
jos klo 17:01 - 23
näytä ”Hyvää iltaa”
jos klo 23:01 – 5
näytä ”Hyvää yötä”
var kello = 10.01;
if (kello >= 5.01 && kello < 10){
tähän www-sivulle näyttäminen
}
if (kello..... jne){
... jne ...
Ehtorakenne koostuu if-osasta ja sen toteutumisesta johtumista tehtävistä, sekä else-osasta ja tämän toteutuessa suoritettavista tehtävistä.
if (ehto A){
suoritettavat tehtävät jos A-ehto on tosi
}
else {
tehtävät jotka suoritetaan jos A-ehto oli epätosi
}
<button onclick="omaTervehdys()"> Tervehdi </button>
<p id="vertaa2"></p>
<script>
function omaTervehdys() {
var tunti = new Date().getHours();
var tervehdys;
if (tunti < 10) {
tervehdys = "Huomenta !";
} else {
tervehdys = "Hyvää päivää.";
}
document.getElementById("vertaa2").innerHTML = tervehdys;
}
</script>
Tulos www-sivulla:
Tässä ehtorakenteessa else if-osassa on oma ehtonsa:
if (ehto A){
tehtävät suoritetaan jos ehto A oli tosi
}
else if (ehto B){
tehtävät suoritetaan jos ehto A epätosi ja ehto B tosi
}
else{
tehtävät suoritetaan jos ehto A ja ehto b epätosia
}
<button onclick="omaTerv()"> Tervehdi </button>
<p id="Terv"></p>
<script>
function omaTerv() {
var tervehdys;
var aika = new Date().getHours();
if (aika < 10) {
tervehdys = "Huomenta";
} else if (aika < 19) {
tervehdys = "Päivää";
} else {
tervehdys = "Iltaa";
}
document.getElementById("Terv").innerHTML = tervehdys;
}
</script>
Tulos www-sivulla:
Myös "arpomalla" voi ehto toimia:
<p id="arpa"></p>
<script>
if (Math.random() < 0.5) {
text = "<a href='https://www.ilves.com/'> Ilves </a>";
} else {
text = "<a href='http://www.tappara.fi/'> Tappara </a>";
}
document.getElementById("arpa").innerHTML = text;
</script>
Arvonnan tulos:
Ehtorakenteessa on "tapauksia" eli casejä. Jos case-ehto on tosi, tehdään sen alla
olevat asiat. Rakenteessa on break jonka avulla toteutuneen case:n jälkeen ohitetaan muutettuna
case:t. Mikäli mikään case ei toteudu, tehdään default-osa.
switch (tutkittava muuttuja){
case arvo A:
A tehtävien koodaus
break;
case arvo N:
N tehtävien koodaus
break;
default:
tehdään kuitenkin jotain
}
<p id="viikkopv"></p>
<script>
var paiva;
switch (new Date().getDay()) {
case 0:
paiva = "Sunnuntai";
break;
case 1:
paiva = "Maanantai";
break;
case 2:
paiva = "Tiistai";
break;
case 3:
paiva = "Keskiviikko";
break;
case 4:
paiva = "Torstai";
break;
case 5:
paiva = "Perjantai";
break;
case 6:
paiva = "Lauantai";
default:
paiva = "Sattui jonkin virhe";
}
document.getElementById("viikkopv").innerHTML = "Tänään on " + paiva;
</script>
Tulos www-sivulla:
Näinkin on mahdollista tehdä:
<p id="vkpv"></p>
<script>
var tekstiA;
switch (new Date().getDay()) {
case 2:
case 3:
tekstiA = "Viikonloppu lähenee..";
break;
case 0:
case 6:
tekstiA = "Lauantai ja sunnuntai on viikonlopussa.";
break;
default:
tekstiA = "Joku muu päivä..";
}
document.getElementById("vkpv").innerHTML = tekstiA;
</script>
Tulos www-sivulla: