JavaScript ciklusok, azaz JS iterációk (for, while, do while)

Tanuld meg a ciklusok használatát JavaSript nyelven! Megtanítjuk az elméletet, illetve példákat is hozunk a for, a while és a do-while iterációkra.

0
JavaScript ciklusok, azaz JS iterációk (for, while, do-while) című cikk borítóképe

JavaScript ciklusok, azaz JS iterációk (for, while, do while)

Ma a ciklusokkal, vagy szakmai körökben iterációnak is hívott fogalommal fogunk megismerkedni. Természetesen a ciklusok minden programnyelvben megtalálhatóak, mert ezek nagyban megkönnyítik az ismétlődő műveletek végrehajtását, de mi itt most a JavaScript-re kihegyezve fogjuk tárgyalni az iterációkat.

Tartalomjegyzék

Mi az a ciklus, iteráció?

A ciklus, vagy iteráció a programozás és algoritmusok egyik alapvető eszköze, amely segítségével az ismétlődő tevékenységek végrehajtását tudjuk leegyszerűsíteni. Egy ciklus mindaddig fut, amíg el nem éri az előre meghatározott végcélt.

Két alapvető ciklustípust különböztetünk meg a JavaScript-ben:

  • for ciklus
  • while

for ciklus

Először ismerkedjünk meg a tanulók legkedveltebb ciklusfajtájával a for ciklussal, általában azért ezt preferálják, mert nagyon könnyű használni. Azonban vannak olyan esetek, amikor nem célszerű használni. Olyan esetekben érdemes a for ciklust használnunk, amikor az összes elemet szeretnénk végigvizsgálni. Azért erre az esetre a legmegfelelőbb, mert nagyon könnyű úgy felparaméterezni, hogy a tömb első elemétől a legutolsóig menjen.

A for ciklus szintaktikája

for (KEZDŐÉRTÉK; FELTÉTEL; VÉGSŐ_KIFEJEZÉS)
{
   CIKLUSMAG
}

A zárójelben említett három dolgot ciklusfejnek nevezzük. Alább olvasható ezek magyarázata.

A „KEZDŐÉRTÉK„-hez írt művelet a ciklus első lefutása előtt végrehajtódik. Általában arra használjuk, hogy egy számlálót hozzunk létre vele, amellyel követni tudjuk, hogy a ciklusunk hanyadszorra fut le. Már említettem, hogy az informatikában, főleg a programozásban a számozás nullával indul, így a legtöbb esetben a kezdőértékünk is nullától indul, természetesen meglehet adni más értéket is, de akkor figyelnünk kell, hogy nehogy véletlenül kevesebbszer fusson le a ciklusunk mint szeretnénk.

A „FELTÉTEL„-hez értelemszerűen egy feltételt kell írnunk, amíg ez a feltétel teljesül, azaz igaz, addig a ciklusmag újra és újra végrehajtódik.

A „VÉGSŐ_KIFEJEZÉS” minden egyes ciklus lefutás után végrehajtódik, így ehhez általában a kezdőérték növelését vagy csökkentését szoktuk írni. Ha ezt nem tennénk meg, akkor könnyen egy végtelen ciklusba futnánk. Gondoljunk csak bele, ha a kezdőértékünk 1, a feltételünk az, hogy a kezdőérték kisebb legyen, mint 2, és soha nem változtatjuk meg a kezdőértékünket, akkor mikor tudna véget érni a ciklus? A ciklus csak, akkor érhet véget, ha teljesült a feltétel, de mivel a kezdőértéket nem növeljük sosem, így ez nem teljesülhet.

A „CIKLUSMAG” részbe jönnek azok az utasítások, amelyek esetében azt szeretnénk, hogy minden egyes ciklus futásnál megismétlődjenek.

for ciklus példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>


<p id="szoveg"></p>


<script>

var kiir = "";
var i;

for (i = 0; i < 10; i++)
{
  kiir += "A ciklusváltozó értéke: " + i + "<br>";
}

document.getElementById("szoveg").innerHTML = kiir;

</script>

</body>
</html>
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Fentebb már említettem, hogy ilyen esetekben célszerű a for ciklust használni, amikor konkrétan tudjuk, hogy mettől meddig akarjuk a ciklust futtatni. Most tisztában voltam vele, hogy nullától, kilencig szeretném, így a legjobb választás a for ciklus volt.

Ezenfelül a for-nak még van két változata a JavaScript-ben:

  • for…in
  • for…of

Ezekről itt most nem ejtünk szót, de a for ciklusoknak dedikált cikkünkben alaposan kivesézzük ezt is, melyet ide kattintva olvashattok.

while ciklus

A while ciklus addig ismétli a ciklusmag tartalmát, amíg a feltétel igaz értékkel tér vissza. Azaz a kezdőérték és a ciklusváltozó értékének a növelését másképp kell megoldalunk.

A while ciklust elöltesztelős ciklusnak is szoktuk nevezni, hiszen ebben az esetben a ciklusmag lefutása előtt vizsgáljuk meg a feltételt és ekkor döntünk arról, hogy a ciklusmag lefusson-e.

A while ciklus szintaktikája

while (FELTÉTEL)
{
   CIKLUSMAG
}
Code language: JavaScript (javascript)

Csakúgy, mint a for ciklusnál, itt is meg kell adnunk egy feltételt a „FELTÉTEL” helyére. Amíg ez igaz, addig ismétlődik a ciklus, amikor hamis, akkor már nem lép be a ciklusmagba. Itt is szükségünk lesz egy ciklusváltozóra, amit a for ciklusnál első paraméterként tudtunk megadni. Mivel itt erre nincs lehetőség, így jelen esetben már a while ciklus létrehozása előtt gondoskodnunk kell erről.

A „CIKLUSMAG” jelölésű helyre kell írnunk az ismétlésre szánt utasításokat és mivel a while ciklusból a ciklusváltozó léptetése is kimaradt, így erről a ciklusmagban kell sajátkezűleg gondoskodnunk.

while példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>

<p id="szoveg"></p>

<script>

var kiir = "";
var i=0;

while (i < 10)
{
  kiir += "A ciklusváltozó értéke: " + i + "<br>";
  i++;
}

document.getElementById("szoveg").innerHTML = kiir;

</script>

</body>
</html>

Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A for ciklushoz képest a fent említett két módosítást végeztük el, az egyik a ciklusváltozó (i) kezdőértékét nullára állítottuk, a másik pedig az, hogy a ciklusmagban mindig növeltük eggyel a ciklusváltozó értékét. Láthatjuk, hogy az eredmény ugyanaz lett, mint az előbb.

do while ciklus

A while ciklusnak van egy hátultesztelős változata is, amely esetében először lefut a ciklusmag, majd csak azután vizsgáljuk meg, hogy a feltétel teljesült-e. Ha teljesült, akkor megyünk még egy kört, ha nem, akkor befejezzük a ciklusmag ismételgetését.

Akkor érdemes a do-while ciklust használnunk, ha azt szeretnénk, hogy egyszer mindenképp lefusson a ciklusunk tartalma, hiszen a do-while egyetlen egyszer mindig lefog futni, mivel nem történik semmiféle vizsgálat, ami ezt megtudná gátolni.

do while ciklus szintaxisa

do {
  CIKLUSMAG
}
while (FELTÉTEL);
Code language: JavaScript (javascript)

Az elöltesztelős while ciklushoz képest körülbelül semmi sem változik, szimplán annyi, hogy itt előbb cselekszünk, majd csak utána gondolkodunk. A „CIKLUSMAG”-ra és a „FELTÉTEL”-re ugyanazok a szabályok vonatkoznak, mint fentebb.

do while példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>

<p id="szoveg"></p>

<script>

var kiir = "";
var i=0;

do
{
  kiir += "A ciklusváltozó értéke: " + i + "<br>";
  i++;
}
while (i < 10);

document.getElementById("szoveg").innerHTML = kiir;

</script>

</body>
</html>
Code language: HTML, XML (xml)

Eredmény

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Az eredmény itt sem változott, azonban jelenesetben is szükség volt rá, hogy előre deklaráljuk a ciklusváltozót és arra, hogy a ciklusmagban növeljük azt.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!

További leckék