Toistolauseet - for - do - while

Kaikissa ohjemointikielissä tarvitsemme toistolauseita. Useimmiten toistolauseet rakentuvat hyvin samankaltaisesti: Ensin määrittelemme muuttujan, jossa pidetään yllä toistojen määrää tai lopetusehtoa. Sen jälkeen määrittelemme tosi-epätosi -lauseella, pitäisikö toistoa jatkaa. Viimeiseksi rakennamme lohkon, jossa on toistettavat lauseet.

For -lause

For -lausetta käytetään useimmiten silloin, kun tiedetään haluttavien toistojen määrä.
Lauseen yleinen muoto on:

for (muuttuja = alkuarvo ; ehto ; muutujan muutos kierroksella){  

	toistettavat käskyt;
};

Esimerkiksi:

for (var i=0; i<3; i=i+1){  

	window.alert("kierros: " + i);
};

Esimerkin sulkeissa määritellään ensin muuttuja i ja annetaan sille alkuarvo 0.
Seuraava i<3 tarkoittaa, että toistoa jatketaan niin kauan kun i pysyy alle 3:n.
Viimeiseksi sulkeissa sanotaan, että jokaisen toiston jälkeen muuttujan i arvoon lisätään 1.

Aaltosulkeissa on toistettava lause: avaa ikkuna, joka kertoo kierroksen i-arvon.

Seuraavassa for-lause on kirjoittu funktion sisään:

<script Language="JavaScript">

function toistafor(){

	for (var i=0; i<3; i=i+1){  
		window.alert("kierros: " + i);
	};
}

</script>

<input type="button" value="Toista for-lause" onClick="toistafor();" />

While -lause

While lauseessa laitamme ensin normaaleihin sulkeisiin ehdon, jonka jälkeen aaltosulkeilla määrittelemme toistettavat lauseet.

<div id="xxx">Jokin teksti - kenttä</div>
<input type="text" id="yyy" value="Tekstiä" />

<script Language="JavaScript">

function Toista(){

	var vastaus = "";

	while (vastaus != "oikea"){
		vastaus = window.prompt("Anna");
	};

}

</script>

<input type="button" value="Toista kysely" onClick="Toista();" />

Esimerkin funktiossa Toista() esitellään ensiksi muuttuja vastaus. Vastaukselle laitetaan aloitusarvo "", joka on tyhjä arvo. Seuraava while -lause tarkoittaa:

Niin kauan kun ("vastaus ei ole oikea" on totta){vastaus = kysy vastaus käyttäjältä;}

== vertailu saa siis tosi-arvon, kun vertailtavat ovat samat ja
!= vertailu saa tosi-arvon, kun vertailtavat eivät ole samoja

Do while -lause

Do while -lauseessa suoritetaan ensin mahdollisesti toistettavat käskyt, jonka jälkeen vasta testataan, pitääkö käskyt suorittaa uudestaan.

<div id="xxx">Jokin teksti - kenttä</div>
<input type="text" id="yyy" value="Tekstiä" />

<script Language="JavaScript">

function doToisto(){

	var vastaus = "";

	do {
		vastaus = window.prompt("Anna jotain:");
	}while (vastaus == "");

	window.alert("Annoit: " + vastaus);
}

</script>

<input type="button" value="Toista kysely" onClick="doToisto();" />

Esimerkissä funktion sisällä do -sanan jälkeen on aaltosulkeissa käsky, jolla kysytään käyttäjältä vastaus-muuttujalle sisältö.
Tämän jälkeen while -ehto suluissa tarkoittaa: Niin kauan kun vastaus == "", ts. käyttäjä ei ole kirjoittanut mitään kysymysikkunaan.

window.setInterval

Joskus tarvitsemme myös jonkin tapahtuman tai funktion, joka toistuu tasaisin väliajoin.
Silloin tarvitsemme setInterval -objektia.

Objekti esitellään kuten mikä tahansa muuttuja. Parametriksi voimme kuitenkin asettaa kokonaisen toistettavat asiat ja toistovälin millisekunteina. Muoto on siis:

var nimi = window.setInterval(function(){toistettavat lauseet tai funktiot;}, millisekunnit);

window.clearInterval(nimi);

Esimerkki

Tehdään yksinkertainen sekuntinäyttö, ts. suurennetaaan kokonaislukua sekunnin välein.

<script language="JavaScript">

var luku = 0;	//esitellään numero

var toistin;	//esitellään toistin tässä
		//jotta se on käytössä kaikissa 
		//funktioissa

function muutaluku(){

	luku = luku + 1;	//funktio lisää lukuun 1:n
	if (luku > 60){		//jos mennään yli 60:n
		luku = 0;	//aloitetaan alusta
	}

	//kirjoitetaan luku div-kenttään
	document.getElementById("numero").innerHTML = luku;
}

function aloita(){

	//toistin kutsuu funtiota muutaluku() joka sekunti (1000 ms)
	
	toistin = window.setInterval(function(){muutaluku();}, 1000);
	
}

function lopeta(){

	window.clearInterval(toistin);
	//peruutetaan toisto
}

</script>

<ul>
<div id="numero" style="height:30px;" ></div>

<input type="button" value="Aloita" onClick="aloita();" />
<input type="button" value="Lopeta" onClick="lopeta();" />
</ul>