hu en sv en hu it hu en hu de hu ja hu hu hu hu hu hu hu hu en hu hu en hu en hu hu hu hu hu hu hu hu hu hu hu en hu hu hu hu hu hu hu en hu hu en hu en hu en hu hu hu hu hu hu en hu hu hu en hu hu cs hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu hu hi hu cs hu hu tr hu hu hu hu hu hu hu cs hu hu hu hu hu hu hu en hu hu cs hu hu hu hu hu hu hu hu hu hu es es es tr en hu hu hu hu hu hu hu hu hu fr hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu it hu en hu de hu ja hu hu hu hu hu es es es tr en hu
Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása) - WEBiskola
Weboldalszerkesztő (HTML, CSS, JS kódszerkesztő) HTML-színkód generátor (Hexadecimális, RGB, HSL színkód kereső)
Ebben a leckében a tömbökkel fogunk megismerkedni JavaScript környezetben. Elmagyarázzuk, hogy mik azok a tömbök, mire szokták használni őket. Majd az elmélet után áttérünk a gyakorlatra, azaz létrehozunk egy tömböt, feltöltjük elemekkel, lekérdezzük a létrehozott tömb egyes elemeit és módosítjuk néhány elemet. Illetve megvizsgálunk egy függvényt, amellyel lekérhetjük a tömb hosszát, azaz az elemeinek a számát.
A tömb tulajdonképpen egy speciális változó, amely egyidejűleg több elemet képes tárolni. A WikiPédia így fogalmazza meg a tömbök fogalmát: ,,A számítástudományban a tömb (angolul array) olyan adatszerkezet, amelyet nevesített elemek csoportja alkot, melyekre sorszámukkal (indexükkel) lehet hivatkozni.”
Olyan esetekben használjuk, amikor több elem szerepel egy listán, általában ezek az elemek összefüggnek. Például van egy listánk, amely különböző webes programnyelveket tartalmaz. Itt a kapcsolódási pont az, hogy minden elemünk egy webes programnyelv.
A fent említett elemeket (programnyelveket) tárolhatnánk az alábbi módon is:
var nyelv1 = "HTML"; var nyelv2 = "CSS"; var nyelv2 = "JS"; Code language: JavaScript (javascript)
A fenti példával sincs semmilyen gond, működik, rendesen lefut, de be kell látnunk, hogy egy kicsit sok időbe telik mire egyesével létrehozunk annyi változót, ahány elemünk van. És akkor még nem is beszéltünk arról, hogy mi van akkor, ha az összes elemet megszeretnénk vizsgálni. Nehéz lenne rá olyan módszert találni, ami gyors is és egyszerű.
Ilyenkor jönnek képbe a tömbök, ha egy tömböt hozunk létre, akkor nincs szükség arra, hogy minden egyes programnyelvet külön változóban tároljunk, szimplán létrehozunk egy tömböt és abba pakoljuk bele az összes értéket, amit alapesetben külön-külön változókban tárolnánk.
A fenti példa így néz ki tömbbel megoldva:
var nyelvek = ["HTML", "CSS", "JS"]; Code language: JavaScript (javascript)
A tömb elemeire a sorszámukkal lehet hivatkozni. Először tekintsük meg az alábbi ábrát, amihez a kép alatt hozzáfűzöm a magyarázatot.
Szóval van egy tömbünk, amelynek vannak elemei, ezeket az elemeket sorszámokkal jelöljük, ezeket a sorszámokat nevezzük indexnek. Láthatjuk, hogy a tömbünk első eleme a “HTML”. Az informatikában a számozás nem egytől, hanem nullától kezdődik! Így az első sorszámunk nem 1, hanem 0 lesz. Azaz a “HTML” elemünket úgy tudjuk elérni, ha lekérjük a “nyelvek[]” tömbünk nulladik indexű elemét.
Ha a “JS” után szeretnénk berakni egy újabb elemet, mondjuk a “PHP”-t, akkor az utolsó elem után következő elemre kell hivatkoznunk, jelenesetben a 3. indexre.
Arról már beszéltünk egy korábbi cikkünkben, hogy létezik const, let és var, szóval azt most nem fogjuk tárgyalni, hogy miért éppen var-t írok minden tömb deklarációhoz. (Annyit megsúgok, hogy azért, mert én ezt használom a leggyakrabban, de azért olvassátok el a cikket, nagyon sok hasznos információ találhattok benne.)
Szóval ennyi mellébeszélés után kezdjük a tömb létrehozásának a szintaktikájával:
var TÖMBNÉV = [ELEM1, ELEM2, ELEM3]; Code language: JavaScript (javascript)
Példaként a fent említett példát egy az egyben megismételhetjük itt is:
A var (vagy const, let) kulcsszó után megadjuk a tömb nevét, majd az egyenlőségjel után két szögletes zárójel között felsoroljuk a tömbünk elemeit. Ezt hívjuk az úgynevezett ömlesztett tömb deklarációnak. Egy tömb létrehozása során az elemek felsorolásánál nem számítanak a szóközök, így akár így is létrehozhatjuk a tömbünket:
var nyelvek = ["HTML", "CSS", "JS"]; Code language: JavaScript (javascript)
Most nem mutatom meg a kimenetet, mert a tömb létrehozásának nincs szemmel látható eredménye.
var TÖMBNÉV = [ ELEM1, ELEM2, ELEM3 ]; Code language: JavaScript (javascript)
Ilyenkor a tömbünk sokkal átláthatóbb lesz, viszont az eredmény ugyanaz, mint fentebb. A fenti példát ugyanúgy elkészíthetjük az átláthatóbb megoldással is.
var nyelvek = [ "HTML", "CSS", "JS" ]; Code language: JavaScript (javascript)
Természetesen egy tömb nem csak 3 elemet tartalmazhat, nyugodtan írhatunk negyedik, ötödik vagy százhuszonhatodik elemet is.
Úgy is létrehozhatunk egy tömböt, hogy nem adunk neki kezdő elemeket, csak utólag adjuk hozzá azokat. Ez így néz ki:
var TÖMBNÉV = []; //TETSZŐLEGES KÓDOK TÖMBNÉV[0] = ELEM1; TÖMBNÉV[1] = ELEM2; TÖMBNÉV[2] = ELEM2; Code language: JavaScript (javascript)
Az erre vonatkozó példa:
var nyelvek = []; nyelvek [0] = "HTML"; nyelvek [1] = "CSS"; nyelvek [2] = "JS"; Code language: JavaScript (javascript)
Legutolsó megoldásként létrehozhatunk a “new Array()” kulcsszóval is tömböt, de ez is ugyanazt csinálja, mint a fenti megoldások. De az egyszerűség, olvashatóság és a futási sebesség érdekében nem szokták ezt a megoldás használni.
var TÖMBNÉV = new Array(ELEM1, ELEM2, ELEM3); Code language: JavaScript (javascript)
Fentebb volt már szó az indexelésről, ami elengedhetetlen egy elem eléréséhez, hiszen ha nem tudjuk az index számát, akkor nem is tudunk hozzáférni.
Egy elemet egyszerűen úgy érhetünk el, ha megadjuk, hogy a tömb hányadik indexére vagyunk kíváncsiak, ezt így tehetjük meg:
TÖMBNÉV[INDEX]; Code language: CSS (css)
Így meg is szereztük a tömb adott elemének az értékét, de mivel azt nem tároltuk el egy változóban, vagy nem írattuk ki sehova, így nem is tudunk vele mit kezdeni.
Nézzünk rá egy példát, hogy hogyan érdemes ezt felhasználni:
JavaScript + HTML kód
Első elem (0. index)   Második elem (1. index)   Harmadik elem (2. index)    var nyelvek = ["HTML", "CSS", "JS"]; function elso() { document.getElementById("szoveg").innerHTML = nyelvek[0]; } function masodik() { document.getElementById("szoveg").innerHTML = nyelvek[1]; } function harmadik() { document.getElementById("szoveg").innerHTML = nyelvek[2]; }       Code language: HTML, XML (xml)
Első elem (0. index) Második elem (1. index) Harmadik elem (2. index)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Tömb összes elemének elérése
Lehetőségünk van arra is, hogy a tömbnek ne csak egyetlen egy elemét kérjük le, hanem egyszerre az összeset is. Ezt úgy érhetjük el, hogy szimplán leírjuk a tömb nevét az alábbi módon:
Nincs szükség se indexre, se szögletes zárójelre, se semmire. Nézzünk erre is egy példát, hogy könnyebben érthető legyen.
JavaScript + HTML kód
Összes elem    var nyelvek = ["HTML", "CSS", "JS"]; function osszes() { document.getElementById("szoveg").innerHTML = nyelvek; }       Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ahhoz hogy módosítsunk egy tömbelemet, tisztában kell lennünk az indexével, vagy ha nem vagyunk tisztában vele, akkor ki kell derítenünk.
Ha megvan az index, akkor az alábbi utasítással módosíthatjuk a tömb elemét:
Természetesen erre is mutatunk egy példát.
JavaScript + HTML kód
Előtte:     Utána:      Tömbelem módosítása    var nyelvek = ["HTML", "CSS", "JS"]; document.getElementById("szoveg").innerHTML = nyelvek; nyelvek[1] = "PHP"; function modosit() { document.getElementById("szoveg2").innerHTML = nyelvek; }       Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Példánkban a nyelvek tömb első indexű elemét cseréljük le a “PHP” szóra.
Új elem hozzáadása a tömbhöz
Előfordulhat velünk olyan eset is – valójában szinte ez a leggyakoribb -, hogy egy létező tömbhöz újabb elemeket szeretnénk hozzáadni. Ennek megvalósítására több módszer is a rendelkezésünkre áll.
A legegyszerűbb módszer a push() metódus használatával történik. Ilyenkor nem szükséges megadnunk, hogy hova szeretnénk a tömbben elhelyezni az új elemet, mert az automatikusan elhelyezi a legutolsó elem után. Egyszerűen megadjuk, hogy mit szeretnénk elhelyezni a tömbben a többit pedig a JavaScript-re és a böngészőnkre bízhatjuk. Így fest a szintaktika:
TÖMBNÉV.push(ÚJ.ÉRTÉK); Code language: CSS (css)
Most pedig jöhet a példa:
JavaScript + HTML kód
Előtte:     Utána:      Új érték hozzáadása    var nyelvek = ["HTML", "CSS", "JS"]; document.getElementById("szoveg").innerHTML = nyelvek; function hozzaad() { nyelvek.push("PHP"); //itt adunk hozzá egy újabb elemet a tömbhöz document.getElementById("szoveg2").innerHTML = nyelvek; }       Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ebben az esetben láthatjuk, hogy ha többször nyomjuk meg a gombot, akkor többször adja hozzá ugyanazt az értéket. Ez azért történik, mert a push() esetében nem mondjuk meg, hogy hova tegye az értéket, csak azt, hogy van egy új érték, amit hozzá kell adni a tömbhöz.
A következő módszernél megmondjuk, hogy pontosan hova tegye a tömbhöz hozzáadni kívánt értéket. Mivel új elemet szeretnénk hozzáadni a tömbhöz, így értelemszerűen azt kellene megadni, hogy az utolsó elem indexénél eggyel nagyobb indexű helyre tegye be. Matekozgathatnánk, hogy melyik volt az utolsó elemünk, de egy idő után macerás lenne folyton észben tartani, hogy hol is járunk az indexekkel. Ezért a length tulajdonsággal nagyon könnyen megmondhatjuk, egy bekezdéssel lentebb részletezzük, hogy mi is ez pontosan. Ennek a módszernek így fest a szintaktikája:
A “TÖMBNÉV.LENGTH” gondoskodik arról, hogy az új elemünk a tömb utolsó eleme után legyen elhelyezve. Természetesen erre is láthattok egy példát alább.
JavaScript + HTML kód
Előtte:     Utána:      Új érték hozzáadása    var nyelvek = ["HTML", "CSS", "JS"]; document.getElementById("szoveg").innerHTML = nyelvek; function hozzaad() { nyelvek[nyelvek.length] = "PHP"; //itt adunk hozzá egy újabb elemet a tömbhöz document.getElementById("szoveg2").innerHTML = nyelvek; }       Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Fentebb szó volt a length tulajdonságról, amely itt lesz kifejtve. A fentebb lévő fejezetcímből valószínűleg már kitalálhattad, hogy a length tulajdonság adja vissza egy tömb hosszát, vagyis az elem számait. Vessünk egy pillantást a szintaxisára:
TÖMBNÉV.length; Code language: CSS (css)
Most pedig következzen a példa.
JavaScript + HTML kód
Elemek:     Tömb hossza:      Tömb hossza    var nyelvek = ["HTML", "CSS", "JS"]; document.getElementById("szoveg").innerHTML = nyelvek; function hossz() { document.getElementById("szoveg2").innerHTML = nyelvek.length; }       Code language: HTML, XML (xml)
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ha az utolsó elemet szeretnénk törölni, akkor érdemes a pop() metódust használnunk, ami körülbelül ugyanúgy működik mint a push(), csak ez nem az utolsó helyre tesz be, hanem töröl onnan. A pop() szintaxisa:
TÖMBNÉV.pop(); Code language: CSS (css)
JavaScript + HTML kód
Előtte:     Utána:      Tömb utolsó elemének törlése    var nyelvek = ["HTML", "CSS", "JS"]; document.getElementById("szoveg").innerHTML = nyelvek; function torol() { nyelvek.pop(); document.getElementById("szoveg2").innerHTML = nyelvek; }       Code language: HTML, XML (xml)
Tömb utolsó elemének törlése
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Most pedig jöjjön a kevésbé elegáns törlési módszer, sokan nem is ajánlják használni, mert “lyukassá” válik a tömbünk, azaz több helyen “undefined” érték lesz, de sajnos vannak olyan helyezetek, amikor kénytelenek vagyunk ezt használni. Ezért lássuk a szintaktikáját:
delete TÖMBNÉV[INDEX]; Code language: JavaScript (javascript)
Megadjuk a “delete” kulcsszót, majd a tömbnevet, melyből törölni szeretnénk és azt, hogy melyik indexére vonatkozik a törlés.
Most pedig következzen a cikkünk utolsó példája:
JavaScript + HTML kód
Előtte:     Utána:      Tömb 0. indexű elemének törlése   Tömb 1. indexű elemének törlése   Tömb 2. indexű elemének törlése    var nyelvek = ["HTML", "CSS", "JS"]; document.getElementById("szoveg").innerHTML = nyelvek; function torol0() { delete nyelvek[0]; document.getElementById("szoveg").innerHTML = nyelvek; } function torol1() { delete nyelvek[1]; document.getElementById("szoveg").innerHTML = nyelvek; } function torol2() { delete nyelvek[2]; document.getElementById("szoveg").innerHTML = nyelvek; }       Code language: HTML, XML (xml)
Tömb 0. indexű elemének törlése Tömb 1. indexű elemének törlése Tömb 2. indexű elemének törlése
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Az undefined érték nem jelenik meg alapból, ha a teljes tömböt kiíratom, de ha konkrétan egy törölt elemet szeretnék kiíratni, akkor megjelenne.
Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!
Műveletek tömbökkel PHP-ban (Tömb létrehozása, elemek hozzáadása, felülírása, törlése, tömb hosszának megállapítása, elemeinek kiíratása)
PHP alapok (PHP webprogramozás alapjai kezdőknek)
Ciklusok a PHP-ban (for, while, do-while, foreach iterációk + break és continue használata)
JavaScript alapok (A JS programozás alapjai)
#indexelés #JavaScript #JavaScript alapok #JavaScript alapok kezdőknek #javascript ismeretek #JavaScript programozás #JavaScript tananyag #javascript tömbök #JavaScript webfejlesztés #JavaScript webprogramozás #JS #JS alapok #JS programozás #tömbök #webfejlesztés #webprogramozás alapjai #webprogramozás alapok
Mi az a JavaScript? A JavaScript (JS) bemutatása
JavaScript használata (Hova rakjuk a JS kódot, hogyan kössük össze a HTML dokumentummal) – head, body, külső fájl
Milyen JavaScript szerkesztő programot használjak? + Letöltés
JavaScript alapok (A JS programozás alapjai)
JavaScript változók és konstansok (var, let és const magyarul)
Tömbök a JavaScript-ben (Tömbök magyarázata, létrehozása, elemek hozzáadása, módosítása, törlése, indexelés, tömb hosszának megállapítása)
Műveletek string-ekkel a JavaScript-ben (JS string metódusok, függvények, tulajdonságok)
JavaScript ciklusok, azaz JS iterációk (for, while, do while)
A for ciklus használata a JavaScript-ben (JS for iteráció elmélet, szintaktika, példa)
JavaScript while ciklus bemutatása (JS while és do while iteráció szintaktika, példa)
JavaScript operátorok ismertetése (JS aritmetikai, értékadó, összehasonlító, logikai, bitenkénti és típus operátor bemutatása)
JavaScript logikai változó (JS boolean magyarul)
JavaScript elágazások (if, switch)
if használata a JavaScript-ben (JS if, else és else if magyarul)
A switch használata a JavaScript-ben (JS switch…case)
JavaScript alert használati útmutató (JS felugró ablak)
JavaScript getElementBy és innerHTML használata (Szöveg írása HTML dokumentumba JS segítségével)
JavaScript függvények, eljárások, metódusok (JS függvény fogalma, létrehozása, meghívása)
JavaScript események (JS event magyarul)
JavaScript onclick esemény (JavaScript függvény meghívása kattintáskor, gomb megnyomásakor)
JavaScript objektumok fogalma, létrehozása, használata (Objektum tulajdonságok és metódusok szintaxisa + példa)
JavaScript JSON használata, készítése, feldolgozása, beolvasása
Random, véletlenszám generálása JavaScript-ben (JS Math.random() és Math.floor() magyarul)
Kliensoldali űrlapellenőrzés: űrlapmezők ellenőrzése HTML és JavaScript segítségével
A legjobb JavaScript keretrendszerek (17 JS framework)