If - lause

If -lause eli ehdon määrittäminen

Ehto-lause eli if-lause on nimensä mukaan tarkoitettu ehdon testaamiseen. Ehto on aina yksikäsitteisessä muodossa ja se saa arvon tosi tai epätosi (true tai false). Ehto-lauseella voimme vaikuttaa ohjelman suoritukseen riippuen ehdon antamasta vastauksesta.

if (ehto){
	...jos ehto on totta...
	...suoritetaan nämä lauseet...
	
};

Esimerkki if-lauseesta


<script language="JavaScript">

function tarkista(){

	var arvaus = 1*document.getElementById("luku").value;

	if (arvaus == 6){
		window.alert("Arvasit oikein!");
	};
}

</script>

<h4>Arvaa luku 1-10</h4>

<input type="text" id="luku" value="0" />
<input type="button" value="Arvaa" onClick="tarkista();" />

Arvaa luku 1-10

Esimerkissä funktio tarkista() hakee ensin dokumentin luku-kentästä merkkijonon ja muuttaa sen numeroksi kertomalla 1:llä.

Seuraavassa if-lauseessa on määritelty ehto sulkeisiin: (arvaus == 6) . Kaksi yhtäsuuruutta tarkoittaa sitä, että arvaus-muuttujaa verrataan numeroon 6. Jos vertailu on epätosi, niin mitään ei tehdä. Jos vertailu on totta, niin aaltosulkeiden sisältö suoritetaan.

(Jos olisimme laittaneet sulkeisiin arvaus = 6, olisi se tarkoittanut, että muuttujaan arvaus sijoitetaan arvo 6... yksi yhtäsuuruus tarkoittaa siis sijoitusta, kaksi yhtäsuuruutta vertaamista)

If...Else -lause

Jos ohjelman täytyy tehdä kaksi eri käskysarjaa riippuen jonkin ehtolauseen tuloksesta, käytämme if-else -rakennetta.

if (ehto){
	...jos ehto on totta...
	...suoritetaan nämä lauseet...
	
}else{
	...jos ehto ei ole totta
	...suoritetaan nämä lauseet
};

Muutetaan edellistä esimerkkiä hieman ja varaudutaan myös siihen, että käyttäjä arvaa väärin:


<script language="JavaScript">

function tarkista2(){

	var arvaus = 1*document.getElementById("luku1").value;

	if (arvaus == 6){
		window.alert("Arvasit oikein!");
	}else{
		window.alert("Arvasit väärin! Yritä uudelleen.");
	};
}

</script>

<h4>Arvaa luku 1-10</h4>

<input type="text" id="luku1" value="0" />
<input type="button" value="Arvaa" onClick="tarkista2();" />

Arvaa luku 1-10

If...Else if -lause

Joskus tarvitsemme myös hieman monimutkaisempia rakenteita. Tällöin voimme joutua käyttämään useita ehtoja.

if (ehto){
	...jos ehto on totta...
	...suoritetaan nämä lauseet...
	
}else if (ehto2){
	...jos ehto2 on totta
	...suoritetaan nämä lauseet
}else{
	...jos kumpikaan ehto ei ollut totta
	... nämä lauseet
}

Huomaa! else if lauseita voi olla myös enemmän, kuin yksi. Lisäksi else lausetta lopussa ei tarvita välttämättä.

Muutetaan edellistä esimerkkiä vielä hieman ja varaudutaan useampaan käyttäjän syötteeseen:


<script language="JavaScript">

function tarkista3(){

	var arvaus = 1*document.getElementById("luku2").value;

	if (arvaus == 6){
		window.alert("Arvasit oikein!");
	}else if (arvaus < 6){
		window.alert("Arvasit liian pienen luvun!");
	}else if (arvaus > 6){
		window.alert("Arvasit liian suuren luvun!");
	}else{
		window.alert("Yritä edes.");
	};
}

</script>

<h4>Arvaa luku 1-10</h4>

<input type="text" id="luku2" value="0" />
<input type="button" value="Arvaa" onClick="tarkista3();" />