JavaScript while ciklus bemutatása (JS while és do while iteráció szintaktika, példa)

Ebben a leckében először megismerkedünk a while ciklussal, mely elöltesztelős, majd pedig a do while ciklussal, amely hátultesztelős. Hogy mit jelent az elöl- és hátultesztelős kifejezés azt alább tisztázzuk.

JavaScript while ciklus bemutatása (JS while és do while iteráció szintaktika, példa) című cikk borítóképe

JavaScript while ciklus bemutatása (JS while és do while iteráció szintaktika, példa)

Ebben a leckében először megismerkedünk a while ciklussal, mely elöltesztelős, majd pedig a do while ciklussal, amely hátultesztelős. Hogy mit jelent az elöl- és hátultesztelős kifejezés azt alább tisztázzuk.

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

>> A for ciklusokról itt olvashatsz bővebben. <<

Elöltesztelős vagy hátultesztelős

Ez egy összetett szó, mely kettő szóból áll, vizsgáljuk meg először a második szót, mely a „tesztelős”. Ez arra utal, hogy hol végzünk el egy tesztelést, ha úgy tetszik vizsgálatot arra vonatkozólag, hogy kell-e még ismételgetni a ciklusmagban lévő kódok futását.

Az első szó pedig arra utal, hogy a ciklusmag (amelyben az ismételendő kódok vannak) lefutása előtt vagy után végezzük el a vizsgálatot. Értelemszerűen az elöltesztelés esetében még a ciklusmag lefutása előtt megtesszük ezt a vizsgálatot, míg hátultesztelés esetében csak a ciklusmag lefutása után.

A while ciklus

A while ciklus addig ismétli a ciklusmagban található kódokat, amíg a feltétel igaz értékkel tér vissza. A ciklusfej nem tartalmazza a kezdőértéket és a ciklusváltozó léptetését, így a kezdőérték felvételét és a ciklusváltozó értékének a növelését másképp kell megoldalunk.

A while ciklus egy elöltesztelős ciklus, 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. Ezért történhet olyan is, hogy a ciklusmag egyszer sem fut le, ha a feltétel hamis.

A while ciklus szintaktikája

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

Először meg kell adnunk egy feltételt a „FELTÉTEL” helyére. Amíg ez igaz, addig ismétlődik a ciklusmag, 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. Nem kell megijedni, ez egy sima változó deklarálás (létrehozás) lesz, melynek kezdőértéket adunk.

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. Általában a ciklusmag utolsó sora gondoskodik a ciklusváltozó léptetéséről, amely során szimplán felülírjuk a változónk aktuális értékét egy eggyel nagyobb értékkel.

while példa

JavaScript + HTML kód

<!DOCTYPE html>
 <html>
  <body>
   <p id="szoveg"> </p>

   <script>
     var kiir = "";
     var i=0; // ciklusváltozó létrehozása

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

    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 két módosítást kellett elvégeznünk, az egyik a ciklusváltozó (i) kezdőértékének nullára állítása, a másik pedig a ciklusváltozó értékének a növelése.

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 legalább egyszer minden esetben lefog futni, mivel nem történik semmiféle vizsgálat, ami ezt megtudná akadályozni.

do while ciklus szintaxisa

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

Az elöltesztelős while ciklushoz képest csak annyi változik, hogy itt előbb cselekszünk, majd csak utána gondolkodunk, azaz először elvégezzük a ciklusmagban található utasításokat, majd pedig megvizsgáljuk, hogy teljesült-e a feltétel. Ha a feltétel teljesül, akkor jöhet a következő ismétlés, ha nem, akkor pedig kilépünk a ciklusból.

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 nem 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!