A ciklusok (más néven iterációs szerkezetek) olyan programozási eszközök, amelyek lehetővé teszik egy adott kódrészlet többszöri végrehajtását, amíg egy feltétel igaz marad. A ciklusok különböző típusai eltérő módon viselkednek attól függően, hogy a feltételt a ciklus elején vagy végén tesztelik.
1. For ciklus
A for ciklus általában
akkor használatos, ha egy adott számú ismétlést kell végrehajtani. A ciklus
elején definiáljuk a kezdőértéket, a futási feltételt, és az iterációk közötti
lépést.
javascript
Kód másolása
for (let i = 0; i < 5; i++) { console.log("A for ciklus fut, i értéke: " + i);}- Előtesztelős
ciklus: A
forciklus feltétele a ciklus futása előtt kerül ellenőrzésre. Ha a feltétel hamis, a ciklus nem fut le egyszer sem.
2. While ciklus
A while ciklus addig fut,
amíg a feltétel igaz. Ez a ciklus akkor hasznos, ha nem tudjuk előre, hogy hány
ismétlés szükséges.
javascript
Kód másolása
let count = 0;while (count < 5) { console.log("A while ciklus fut, count értéke: " + count); count++;}- Előtesztelős
ciklus: A
whileciklus is előtesztelős ciklus, mivel a feltételt a ciklus futása előtt ellenőrzi.
3. Do-While ciklus
A do-while ciklus hasonló
a while ciklushoz, de ebben
az esetben a ciklus törzse legalább egyszer mindenképp lefut, mivel a feltételt
a ciklus végén ellenőrzi.
javascript
Kód másolása
let count = 0;do { console.log("A do-while ciklus fut, count értéke: " + count); count++;} while (count < 5);- Hátultesztelős
ciklus: A
do-whileciklus a feltételt a ciklus végén teszteli, így a ciklus törzse legalább egyszer lefut.
4. For-of ciklus
A for-of ciklus arra
szolgál, hogy iteráljunk egy iterálható objektum (pl. tömb vagy string)
elemein. Minden iterációban a ciklus a következő elem értékét rendeli hozzá egy
változóhoz.
javascript
Kód másolása
let array = [10, 20, 30];for (let value of array) { console.log("For-of ciklusban: " + value);}- Előtesztelős
ciklus: A
for-ofciklus is előtesztelős, hiszen a ciklus előtt ellenőrzi, hogy vannak-e még elemek, amelyeken iterálni kell.
5. ForEach ciklus
A forEach egy
tömbmetódus, amely egy függvényt hajt végre a tömb minden egyes elemén. A forEach ciklus egyes elemekre
végrehajtandó függvénynek átadja az aktuális elemet és annak indexét.
javascript
Kód másolása
let numbers = [1, 2, 3];numbers.forEach(function(number) { console.log("ForEach ciklusban: " + number);});- Előtesztelős
ciklus: A
forEachmetódus is előtesztelős, mivel minden elemre végrehajtódik a callback függvény, ha van még elem.
Feladat:
Készíts egy HTML oldalt, amely a fenti ciklusok mindegyikét bemutatja
egy-egy példával. Az oldalnak külön szekciókat kell tartalmaznia mindegyik
ciklushoz, ahol a ciklusok által generált kimenet jelenik meg. A feladat
megírásához másold be az alábbi kódot, amelyet ki kell egészítened:
<!DOCTYPE html><html lang="hu"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ciklusok Példák</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .output { margin-top: 20px; } .section { margin-bottom: 40px; } .section h2 { color: #007BFF; } </style></head><body> <h1>Ciklusok Példák - JavaScript</h1> <div id="forExample" class="section"> <h2>For ciklus</h2> <div id="forOutput" class="output"></div> </div> <div id="whileExample" class="section"> <h2>While ciklus</h2> <div id="whileOutput" class="output"></div> </div> <div id="doWhileExample" class="section"> <h2>Do-While ciklus</h2> <div id="doWhileOutput" class="output"></div> </div> <div id="forOfExample" class="section"> <h2>For-of ciklus</h2> <div id="forOfOutput" class="output"></div> </div> <div id="forEachExample" class="section"> <h2>ForEach ciklus</h2> <div id="forEachOutput" class="output"></div> </div> <script> // For ciklus példa // While ciklus példa // Do-While ciklus példa // For-of ciklus példa // ForEach ciklus példa </script></body></html>
Feladatleírás:
- For
ciklus: Hozz létre egy
forciklust, amely 5 alkalommal fut le, és minden iterációban írja ki a konzolra vagy a HTML oldalra a ciklus számlálójának értékét. - While
ciklus: Hozz létre egy
whileciklust, amely addig fut, amíg egy változó értéke el nem éri az 5-öt. Minden iterációban növeld a változó értékét és írasd ki azt. - Do-While
ciklus: Készíts egy
do-whileciklust, amely legalább egyszer lefut, és minden iterációban írja ki a változó értékét. - For-of
ciklus: Használj egy
for-ofciklust egy tömb elemeinek végigjárásához, és írasd ki az összes elem nevét. - ForEach
ciklus: Készíts egy tömböt, amely gyümölcsök neveit
tartalmazza, majd használj egy
forEachciklust, hogy végigmenj a tömb összes elemén, és jelenítsd meg azokat a HTML oldalon.
Nincsenek megjegyzések:
Megjegyzés küldése