Toistolauseilla toteutetaan ohjelmarakenteita joissa on selvästi erotettavissa asioita joita toistetaan.
Toistolauseilla toteutetaan ohjelmarakenteita joissa on selvästi erotettavissa asioita
joita toistetaan.
for(laskurin alustus; lopetus ehto; laskurin päivtys)
{
toistettavat tehtävät
}
<p id="toistoB"></p>
<script>
var teksti = "";
var laskuri;
for (laskuri = 0; laskuri < 5; laskuri++) {
teksti += "Numero = " + laskuri + "<br>";
}
document.getElementById("toistoB").innerHTML = teksti;
</script>
Tulos www-sivulla:
Esimerkissä etunimiä sisältävä taulukko siirretään muuttujaan for-lauseella tulostusta varten:
<p id="nimihomma"></p>
<script>
var enimet = ["Antti", "Jussi", "Kalle", "Kari", "Juha", "Asko"];
var teksti = "";
var laskuri;
for (laskuri = 0; laskuri < enimet.length; laskuri++) {
teksti += enimet[laskuri] + "<br>";
}
document.getElementById("nimihomma").innerHTML = teksti;
</script>
Tulos www-sivulla:
Tämäkin on mahdollista, määrittelyjen tekeminen for-lauseen laskurin alustamisen yhteydessä:
<p id="nimetC"></p>
<script>
var enimet = ["Kaisa", "Maija", "Sabrina", "Mira"];
var apu, luku, text;
for (apu = 0, luku = enimet.length, teksti = ""; apu < luku; apu++) {
teksti += enimet[apu] + "<br>";
}
document.getElementById("nimetC").innerHTML = teksti;
</script>
Tulos www-sivulla:
Tällä for-toistorakenteella voidaan käsitellä kätevästi objekteja:
<p id="tiedot"></p>
<script>
var teksti = "";
var henkilo = {enimi:"Peetu", simi:"Piiroinen", ika:26};
var apu;
for (apu in henkilo) {
teksti += henkilo[apu] + " ";
}
document.getElementById("tiedot").innerHTML = teksti;
</script>
Tulos www-sivulla:
Toistorakenne while on ns alkuehtoinen toistolause, aluksi tutkitaan toistetaanko lausetta ja sen jälkeen
toistetaan ehdon mukaisesti lauseen sisällä olevia asioita.
while (toisto-ehto){
toistettavat asiat
}
<p id="toistoja"></p>
<script>
var teksti = "";
var i = 0;
while (i < 5) {
teksti += "<br>Numero = " + i;
i++;
}
document.getElementById("toistoja").innerHTML = teksti;
</script>
Tulos www-sivulla:
Toistorakenne do - while lopetusehtoinen toistorakenne, rakenteeseen kirjatut tehtävät tehdään
vähintään kerran koska toistoehto on rakenteen lopussa ("lopetusehto").
do{
toistettavat asiat
}
while(lopetusehto)
<p id="toistoja5"></p>
<script>
var teksti = ""
var i = 0;
do {
teksti += "<br>Laskuri i = " + i;
i++;
}
while (i < 5);
document.getElementById("toistoja5").innerHTML = teksti;
</script>
Tulos www-sivulla:
Toistorakenteiden sekä muidenkin rakenteiden keskeyttämiseen käytetään break-komentoa.
Ohjelman toistoille voidaan asettaa raja break-rakenteen avulla vaikka ohjelmankäyttäjä olisikin halunnut toistokertoja enemmän.
Esimerkki:
<p id="koeY"></p>
<script>
var teksti = "";
var i, kayttaja = 9;
for (i = 0; i < kayttaja; i++) {
if (i === 3) { break; }
teksti += "Laskuri i = " + i + "<br>";
}
document.getElementById("koeY").innerHTML = teksti;
</script>
Tulos www-sivulla:
<p id="koeZ"></p>
<script>
var enimet =
["Antti", "Anne", "Mauri", "Martta","Matti",];
var nimilista = "";
list: {
nimilista += enimet[0] + "<br>";
nimilista += enimet[1] + "<br>";
nimilista += enimet[2] + "<br>";
break list;
nimilista += enimet[3] + "<br>";
nimilista += enimet[4] + "<br>";
nimilista += enimet[5] + "<br>";
}
document.getElementById("koeZ").innerHTML = nimilista;
</script>
Tulos www-sivulla:
Haluttaessa ohittaa esimerkiksi toistorakenteessa jokin kohta, voidaan toteuttamiseen käyttää continue-komentoa.
Esimerkki:
<p id="ohitus"></p>
<script>
var teksti = "";
var i;
for (i = 0; i < 5; i++) {
if (i === 3) { continue; }
teksti += "Muuttuja i = " + i + "<br>";
}
document.getElementById("ohitus").innerHTML = teksti;
</script>
Tulos www-sivulla:
Haku muuttujaan tallennetusta merkkijonosta voidaan toteuttaa search()-metodilla, jonka perusmuodot on seuraava:
hakutulos = merkkijonotiedosto.search(/etsittävä merkkijono/i);
hakutulos = merkkijonotiedosto.search("/etsittävä merkkijono");
<button onclick="haeSana()"> Etsi sana </button>
<p id="haku"></p>
<script>
function haeSana() {
var merkkijono = "Hojo hojo, mittee sulle kuuluu?";
var tulos = merkkijono.search(/sulle/i);
document.getElementById("haku").innerHTML = tulos;
}
</script>
Tulos www-sivulla:
Sanan eli merkkijonon korvaaminen onnistuu replace()-metodilla, jonka perusmuodot on seuraava:
uusiteksti = teksti.replace(/korvattava merkkijono/i,"uusimerkkijono");
uusiteksti = teksti.replace("vaihdettava merkkijono","uusimerkkijono");
<button onclick="etsiKorvaa()"> Korvaa </button>
<p id="vaihda">Maija on etunimi, Maija on myös kukkarossa.</p>
<script>
function etsiKorvaa() {
var merkkijono = document.getElementById("vaihda").innerHTML;
var teksti = merkkijono.replace(/maija/i,"Matti");
document.getElementById("vaihda").innerHTML = teksti;
}
</script>
Tulos www-sivulla:
Maija on etunimi, Maija on myös kukkarossa.
Haku ja korvaa metodien asetukset:
| Asetus | Merkitys merkkijonosta |
|---|---|
i | tapauskohtainen vastaavuus, löytää ensimmäisen |
g | globaali vastaavuus, löytää kaikki |
m | usealta riviltä |
Yksittäisen kirjaimen eli merkin etsimiseen merkkijonosta soveltuu exec()-metodi, perusmuoto:
/merkki/.exec(tutkittava merkkijono);
<p id="tutkittava"> Merkkijono jossa on etsittävä merkki! </p>
<button onclick="etsiMerkki()"> Etsi Merkki </button>
<p id="merkki"></p>
<script>
function etsiMerkki() {
teksti = document.getElementById("tutkittava").innerHTML;
document.getElementById("merkki").innerHTML = /v/.exec(teksti);
}
</script>
Tulos www-sivulla kun etsitään v-kirjainta:
Merkkijono jossa on etsittävä merkki!
Seuraavassa esimerkissä "etsitään" elementti ja sijoitetaan id-tietona muuttujaan. Kyseisen id-tiedon kohtaan www-sivulle näytetään muuttujiin sijoitettuista merkkijonoista yhdistelty tieto:
<p id="teksti"></p>
<script>
var x = 7; // Muuttujiin x ja y sijoittaminen
var y = "veljestä on Aleksis Kiven teos";
elementti = document.getElementById("teksti"); //elementti johon näytetään
elementti.innerHTML = x + " " + y; //mitä näytetään
</script>
Tulos www-sivulla: