You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
7.7 KiB
147 lines
7.7 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "3f7f87871312cf6cc12662da7d973182",
|
|
"translation_date": "2025-08-28T04:10:06+00:00",
|
|
"source_file": "2-js-basics/4-arrays-loops/README.md",
|
|
"language_code": "hu"
|
|
}
|
|
-->
|
|
# JavaScript Alapok: Tömbök és Ciklusok
|
|
|
|
|
|
> Sketchnote készítette: [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
## Előadás előtti kvíz
|
|
[Előadás előtti kvíz](https://ff-quizzes.netlify.app/web/quiz/13)
|
|
|
|
Ez a lecke a JavaScript alapjait tárgyalja, amely a weben az interaktivitást biztosítja. Ebben a leckében megtanulod a tömbök és ciklusok használatát, amelyek az adatok kezelésére szolgálnak.
|
|
|
|
[](https://youtube.com/watch?v=1U4qTyq02Xw "Tömbök")
|
|
|
|
[](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Ciklusok")
|
|
|
|
> 🎥 Kattints a fenti képekre a tömbökről és ciklusokról szóló videókért.
|
|
|
|
> Ezt a leckét elvégezheted a [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) oldalán!
|
|
|
|
## Tömbök
|
|
|
|
Az adatokkal való munka minden programozási nyelvben gyakori feladat, és sokkal egyszerűbb, ha az adatok strukturált formátumban, például tömbökben vannak tárolva. A tömbök segítségével az adatok egy listához hasonló struktúrában tárolhatók. A tömbök egyik nagy előnye, hogy különböző típusú adatokat is tárolhatunk egy tömbben.
|
|
|
|
✅ A tömbök mindenhol körülvesznek minket! Tudsz mondani egy valós példát egy tömbre, például egy napelem tömbre?
|
|
|
|
A tömb szintaxisa egy pár szögletes zárójel.
|
|
|
|
```javascript
|
|
let myArray = [];
|
|
```
|
|
|
|
Ez egy üres tömb, de a tömbök már eleve adatokkal feltöltve is deklarálhatók. A tömbben lévő értékeket vesszővel választjuk el egymástól.
|
|
|
|
```javascript
|
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
|
```
|
|
|
|
A tömb értékeihez egyedi érték, az úgynevezett **index** van hozzárendelve, amely egy egész szám, és a tömb elejétől való távolság alapján van meghatározva. A fenti példában a "Chocolate" sztring érték indexe 0, míg a "Rocky Road" indexe 4. Az indexet szögletes zárójelekkel használhatjuk az értékek lekérésére, módosítására vagy beszúrására.
|
|
|
|
✅ Meglep, hogy a tömbök indexe nullával kezdődik? Néhány programozási nyelvben az indexek 1-től kezdődnek. Ennek érdekes története van, amelyről [itt olvashatsz a Wikipédián](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
|
|
|
```javascript
|
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
|
iceCreamFlavors[2]; //"Vanilla"
|
|
```
|
|
|
|
Az indexet felhasználhatjuk egy érték módosítására, például így:
|
|
|
|
```javascript
|
|
iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
|
|
```
|
|
|
|
És új értéket is beszúrhatunk egy adott indexre, például így:
|
|
|
|
```javascript
|
|
iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
|
|
```
|
|
|
|
✅ Gyakoribb módja az értékek hozzáadásának egy tömbhöz az olyan tömb operátorok használata, mint az array.push()
|
|
|
|
Ha meg szeretnéd tudni, hány elem van egy tömbben, használd a `length` tulajdonságot.
|
|
|
|
```javascript
|
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
|
iceCreamFlavors.length; //5
|
|
```
|
|
|
|
✅ Próbáld ki magad! Használd a böngésződ konzolját, hogy létrehozz és manipulálj egy saját tömböt.
|
|
|
|
## Ciklusok
|
|
|
|
A ciklusok lehetővé teszik, hogy ismétlődő vagy **iteratív** feladatokat hajtsunk végre, és rengeteg időt és kódot takaríthatunk meg velük. Minden iteráció változhat a változókban, értékekben és feltételekben. A JavaScriptben különböző típusú ciklusok léteznek, amelyek mindegyike apró eltérésekkel ugyanazt a célt szolgálja: adatokat iterálni.
|
|
|
|
### For ciklus
|
|
|
|
A `for` ciklusnak 3 részre van szüksége az iterációhoz:
|
|
- `counter` Egy változó, amelyet általában egy számmal inicializálnak, és az iterációk számát számolja
|
|
- `condition` Egy kifejezés, amely összehasonlító operátorokat használ, hogy a ciklus akkor álljon le, amikor `false` lesz
|
|
- `iteration-expression` Minden iteráció végén fut, általában a számláló értékének megváltoztatására használják
|
|
|
|
```javascript
|
|
// Counting up to 10
|
|
for (let i = 0; i < 10; i++) {
|
|
console.log(i);
|
|
}
|
|
```
|
|
|
|
✅ Futtasd ezt a kódot a böngésződ konzoljában. Mi történik, ha apró változtatásokat eszközölsz a számlálón, a feltételen vagy az iterációs kifejezésen? Tudsz visszafelé futtatni egy visszaszámlálást?
|
|
|
|
### While ciklus
|
|
|
|
A `for` ciklus szintaxisától eltérően a `while` ciklusoknak csak egy feltételre van szükségük, amely leállítja a ciklust, amikor a feltétel `false` lesz. A ciklusok feltételei általában más értékekre, például számlálókra támaszkodnak, és ezeket a ciklus során kezelni kell. A számlálók kezdőértékeit a cikluson kívül kell létrehozni, és minden kifejezést, amely megfelel egy feltételnek, beleértve a számláló módosítását, a cikluson belül kell fenntartani.
|
|
|
|
```javascript
|
|
//Counting up to 10
|
|
let i = 0;
|
|
while (i < 10) {
|
|
console.log(i);
|
|
i++;
|
|
}
|
|
```
|
|
|
|
✅ Miért választanál for ciklust a while ciklus helyett? 17 ezer nézőnek volt ugyanez a kérdése a StackOverflow-n, és néhány vélemény [érdekes lehet számodra](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
|
|
|
## Ciklusok és Tömbök
|
|
|
|
A tömböket gyakran használják ciklusokkal, mert a legtöbb feltétel a tömb hosszát használja a ciklus leállításához, és az index lehet a számláló értéke is.
|
|
|
|
```javascript
|
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
|
|
|
for (let i = 0; i < iceCreamFlavors.length; i++) {
|
|
console.log(iceCreamFlavors[i]);
|
|
} //Ends when all flavors are printed
|
|
```
|
|
|
|
✅ Kísérletezz egy saját tömbbel, és iterálj rajta a böngésződ konzoljában.
|
|
|
|
---
|
|
|
|
## 🚀 Kihívás
|
|
|
|
A tömbök iterálására más módszerek is léteznek a for és while ciklusokon kívül. Ilyenek például a [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), és [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Írd át a tömb iterációdat ezek egyikének használatával.
|
|
|
|
## Előadás utáni kvíz
|
|
[Előadás utáni kvíz](https://ff-quizzes.netlify.app/web/quiz/14)
|
|
|
|
## Áttekintés és Önálló Tanulás
|
|
|
|
A JavaScript tömbök számos hasznos metódust tartalmaznak az adatok manipulálására. [Olvass ezekről a metódusokról](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array), és próbálj ki néhányat (például push, pop, slice és splice) egy saját tömbön.
|
|
|
|
## Feladat
|
|
|
|
[Tömb iterálása](assignment.md)
|
|
|
|
---
|
|
|
|
**Felelősség kizárása**:
|
|
Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet. |