Web-Dev-For-Beginners/translations/hu/3-terrarium/3-intro-to-DOM-and-closures

Terrárium projekt 3. rész: DOM manipuláció és JavaScript closure-ök

journey
    title A JavaScript DOM utazásod
    section Alapok
      Értsd meg a DOM-ot: 3: Student
      Tanuld meg a zárványokat: 4: Student
      Kapcsold össze az elemeket: 4: Student
    section Interakció
      Állítsd be a húzási eseményeket: 4: Student
      Kövesd a koordinátákat: 5: Student
      Kezeld a mozgást: 5: Student
    section Befejezés
      Adj hozzá takarítást: 4: Student
      Teszteld a funkciókat: 5: Student
      Fejezd be a terráriumot: 5: Student

Vázlatrajz készítette Tomomi Imura

Üdvözlünk a webfejlesztés egyik legizgalmasabb részénél – a dolgok interaktívvá tételénél! A Document Object Model (DOM) olyan, mint egy híd az HTML-ed és a JavaScript-ed között, és ma ezt fogjuk használni, hogy életre keltsük a terráriumodat. Amikor Tim Berners-Lee megalkotta az első webböngészőt, egy olyan webet képzelt el, ahol a dokumentumok dinamikusak és interaktívak lehetnek – a DOM teszi lehetővé ezt a látomást.

A JavaScript closure-ökbe is belekóstolunk, ami először talán ijesztőnek hangzik. Gondolj a closure-ökre úgy, hogy "memóriazsebeket" hoznak létre, ahol a függvényeid fontos információkat tudnak megjegyezni. Olyan, mintha minden növénynek a terráriumodban saját adatrekordja lenne, amely nyomon követi a pozícióját. A lecke végére megérted, milyen természetesek és hasznosak ezek.

Itt van, amit építünk: egy terráriumot, ahol a felhasználók bárhová áthúzhatják a növényeket, ahová csak akarják. Megtanulod a DOM manipuláció technikáit, amelyek működtetik mind a drag-and-drop fájlfeltöltést, mind az interaktív játékokat. Éledjessük meg a terráriumodat!

mindmap
  root((DOM & JavaScript))
    DOM Fa
      Elem Kiválasztás
      Tulajdonság Hozzáférés
      Esemény Kezelés
      Dinamikus Frissítések
    Események
      Mutató Események
      Egér Események
      Érintés Események
      Esemény Figyelők
    Zárójelek
      Privát Változók
      Függvény Hatókör
      Memória Megőrzés
      Állapot Kezelés
    Húzás & Dobás
      Pozíció Követés
      Koordináta Matematika
      Esemény Élettartam
      Felhasználói Interakció
    Modern Minták
      Esemény Delegálás
      Teljesítmény
      Eszközök Közötti
      Hozzáférhetőség

Előadás előtti kvíz

Előadás előtti kvíz

A DOM megértése: az interaktív weboldalak kapuja

A Document Object Model (DOM) az, ahogyan a JavaScript kommunikál a HTML elemeiddel. Amikor a böngésződ betölt egy HTML oldalt, egy strukturált reprezentációt hoz létre az oldalról a memóriában – ez a DOM. Gondolj rá úgy, mint egy családfára, ahol minden HTML elem egy családtag, amelyhez a JavaScript hozzáférhet, módosíthatja vagy átrendezheti.

A DOM manipuláció átalakítja a statikus oldalakat interaktív webhelyekké. Minden alkalommal, amikor egy gomb színe változik egér fölé vitt állapotban, tartalom frissül oldalfrissítés nélkül, vagy olyan elemeket látsz, amelyeket húzni lehet, ez a DOM manipuláció eredménye.

flowchart TD
    A["Dokumentum"] --> B["HTML"]
    B --> C["Fej"]
    B --> D["Test"]
    C --> E["Cím"]
    C --> F["Meta címkék"]
    D --> G["H1: Az én terráriumom"]
    D --> H["Div: Oldal konténer"]
    H --> I["Div: Bal konténer"]
    H --> J["Div: Jobb konténer"]
    H --> K["Div: Terrárium"]
    I --> L["Növény elemek 1-7"]
    J --> M["Növény elemek 8-14"]
    
    L --> N["img#plant1"]
    L --> O["img#plant2"]
    M --> P["img#plant8"]
    M --> Q["img#plant9"]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style D fill:#e8f5e8
    style H fill:#fff3e0
    style N fill:#ffebee
    style O fill:#ffebee
    style P fill:#ffebee
    style Q fill:#ffebee

A DOM és az azt hivatkozó HTML jelölés ábrázolása. Forrás: Olfa Nasraoui

Ez teszi a DOM-ot erőssé:

• Biztosít egy strukturált módot, hogy hozzáférj az oldal bármely eleméhez
• Lehetővé teszi a dinamikus tartalomfrissítést oldalfrissítés nélkül
• Valós idejű választ tesz lehetővé a felhasználói interakciókra, mint a kattintás és a húzás
• Alapot teremt a modern interaktív webalkalmazásokhoz

JavaScript closure-ök: rendezett, erőteljes kód létrehozása

A JavaScript closure olyan, mintha egy függvény saját privát munkaterületet kapna állandó memóriával. Gondolj arra, ahogy Darwin galápagosi pintyei mind specializált csőröket fejlesztettek ki a saját környezetük szerint – a closure-ök hasonlóak, speciális függvényeket hoznak létre, amelyek „emlékeznek” a saját kontextusukra még azután is, hogy a szülő függvény lefutott.

A mi terráriumunkban a closure-ök segítenek minden növénynek megjegyezni a saját pozícióját függetlenül. Ez a minta széles körben jelen van a profi JavaScript fejlesztésben, ezért fontos megérteni.

flowchart LR
    A["dragElement(plant1)"] --> B["Closure létrehozása"]
    A2["dragElement(plant2)"] --> B2["Closure létrehozása"]
    
    B --> C["Privát változók"]
    B2 --> C2["Privát változók"]
    
    C --> D["pos1, pos2, pos3, pos4"]
    C --> E["pointerDrag függvény"]
    C --> F["elementDrag függvény"]
    C --> G["stopElementDrag függvény"]
    
    C2 --> D2["pos1, pos2, pos3, pos4"]
    C2 --> E2["pointerDrag függvény"]
    C2 --> F2["elementDrag függvény"]
    C2 --> G2["stopElementDrag függvény"]
    
    H["1. növény megjegyzi a helyzetét"] --> B
    H2["2. növény megjegyzi a helyzetét"] --> B2
    
    style B fill:#e8f5e8
    style B2 fill:#e8f5e8
    style C fill:#fff3e0
    style C2 fill:#fff3e0

💡 Closure-ök megértése: A closure-ök jelentős téma a JavaScript-ben, és sok fejlesztő évekig használja őket anélkül, hogy minden elméleti részletet teljesen átlátna. Ma a gyakorlati alkalmazásra fókuszálunk – meglátod, hogy a closure-ök természetes módon jelennek meg, miközben interaktív funkciókat építünk. A megértés fejlődni fog, miközben látod, hogyan oldanak meg valódi problémákat.

A DOM és az azt hivatkozó HTML jelölés ábrázolása. Forrás: Olfa Nasraoui

Ebben a leckében befejezzük az interaktív terrárium projekthez szükséges JavaScript megírását, amely lehetővé teszi a felhasználó számára, hogy mozgatni tudja a növényeket az oldalon.

Mielőtt elkezdenénk: Sikerre való előkészület

Szükséged lesz a korábbi terrárium leckékből származó HTML és CSS fájlokra – most tesszük interaktívvá azt a statikus designt. Ha most csatlakozol először, az előző leckék elvégzése fontos háttérinformációkat ad.

Amit építeni fogunk:

• Simított drag-and-drop az összes terrárium növényhez
• Koordináta-követés, hogy a növények megjegyezzék a helyüket
• Teljes interaktív felület natív JavaScript használatával
• Tiszta, rendezett kód closure mintákkal

JavaScript fájl beállítása

Hozzuk létre azt a JavaScript fájlt, amely interaktívvá teszi a terráriumodat.

1. lépés: Hozd létre a script fájlodat

A terrárium mappádban készíts egy új fájlt script.js néven.

2. lépés: Kapcsold össze a JavaScript-et a HTML-lel

Add hozzá ezt a script taget az index.html fájl <head> részéhez:

<script src="./script.js" defer></script>

Miért fontos a defer attribútum:

• Biztosítja, hogy a JavaScript megvárja, amíg az összes HTML betöltődik
• Megakadályozza az olyan hibákat, amikor a JavaScript olyan elemeket keres, amelyek még nem készültek el
• Garantálja, hogy az összes növény elem működésre kész legyen
• Jobb teljesítményt nyújt, mint a szkriptek oldal aljára helyezése

⚠️ Fontos megjegyzés: A defer attribútum megakadályozza a gyakori időzítési problémákat. Enélkül a JavaScript megpróbálhat olyan HTML elemekhez hozzáférni, amelyek még nem töltődtek be, ami hibákat okozhat.

---

JavaScript kapcsolódása a HTML elemekhez

Mielőtt az elemeket húzhatóvá tennénk, a JavaScriptnek meg kell találnia őket a DOM-ban. Gondolj erre úgy, mint egy könyvtári katalógusrendszerre – ha megvan a katalógusszám, pontosan megtalálhatod a szükséges könyvet, és hozzáférhetsz minden tartalmához.

A document.getElementById() metódust fogjuk használni erre a kapcsolódásra. Ez olyan, mintha pontos iktatórendszered lenne – megadsz egy azonosítót, és pontosan megtalálja a HTML-ben a szükséges elemet.

Minden növény húzhatóságának engedélyezése

Add ezt a kódot a script.js fájlodba:

// Engedélyezze a húzási funkciót mind a 14 növényhez
dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));

Ez a kód mit tesz:

• Megkeresi a DOM-ban minden növényt az egyedi azonosítójuk alapján
• JavaScript referencia szerzése a HTML elemekhez
• Átadja ezeket az elemeket a dragElement függvénynek (amit hamarosan megírunk)
• Előkészíti minden növényt az drag-and-drop interakcióra
• Összekapcsolja a HTML szerkezetedet a JavaScript funkciókkal

🎯 Miért azonosítókat (ID-ket) használunk az osztályok helyett? Az ID-k egyedi azonosítók a konkrét elemekhez, míg a CSS osztályok csoportos stílusok megadására valók. Ha a JavaScriptnek egyedi elemeket kell kezelnie, az ID-k adják meg a pontosságot és teljesítményt.

💡 Professzionális tipp: Vedd észre, hogy a dragElement() minden növényre külön hívjuk meg. Ez biztosítja, hogy minden növény saját, önálló húzási viselkedést kapjon, ami elengedhetetlen a zavartalan felhasználói élményhez.

🔄 Pedagógiai ellenőrzés

DOM kapcsolódás megértése: Mielőtt továbblépnénk a húzás funkcióra, ellenőrizd, hogy:

• ✅ El tudod magyarázni, hogyan találja meg a document.getElementById() a HTML elemeket
• ✅ Megérted, miért használunk egyedi ID-ket minden növényhez
• ✅ El tudod mondani, mi a célja a defer attribútumnak a script tagekben
• ✅ Felismered, hogyan kapcsolódik a JavaScript a HTML-hez a DOM-on keresztül

Gyors önellenőrzés: Mi történne, ha két elemnek ugyanaz az ID-je lenne? Miért ad vissza a getElementById() csak egy elemet? Válasz: Az ID-knek egyedinek kell lenniük; ha ismétlődnek, csak az első elemet adja vissza

---

A dragElement closure megalkotása

Most megalkotjuk a húzási funkcionalitás szívét: egy closure-t, amely kezeli a húzás logikáját minden növény esetében. Ez a closure több belső függvényt tartalmaz majd, amelyek együtt dolgoznak az egérmozgás követésén és az elemek pozíciójának frissítésén.

A closure-ök tökéletesek erre a feladatra, mert lehetővé teszik, hogy „privát” változókat hozzunk létre, amelyek megmaradnak a függvényhívások között, így minden növénynek saját, önálló koordináta-követő rendszere lesz.

Closure-ök megértése egy egyszerű példán keresztül

Hadd mutassam be a closure-öket egy egyszerű példán, amely illusztrálja a koncepciót:

function createCounter() {
    let count = 0; // Ez olyan, mint egy privát változó
    
    function increment() {
        count++; // A belső függvény emlékszik a külső változóra
        return count;
    }
    
    return increment; // Visszaadjuk a belső függvényt
}

const myCounter = createCounter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2

Ez történik ebben a closure mintában:

• Létrehoz egy privát count változót, amely csak ebben a closure-ben létezik
• A belső függvény hozzáférhet és módosíthatja ezt a külső változót (closure mechanizmus)
• Amikor visszaadjuk a belső függvényt, megőrzi a kapcsolatot azzal a privát adattal
• Még akkor is, amikor a createCounter() befejezi a végrehajtást, a count változó megmarad és emlékszik az értékére

Miért tökéletesek a closure-ök a húzás funkcióhoz

A terráriumunkban minden növénynek meg kell jegyeznie az aktuális pozíciójának koordinátáit. A closure-ök tökéletes megoldást nyújtanak:

Fő előnyök a projektünkben:

• Megőrzik a privát pozícióváltozókat minden növény számára külön-külön
• Fenntartják a koordináta-adatokat a húzás események között
• Megakadályozzák a változóütközéseket a különböző húzható elemek között
• Tiszta, rendezett kódszerkezetet hoznak létre

🎯 Tanulási cél: Nem kell most azonnal minden closure aspektust elsajátítanod. Koncentrálj arra, hogy lássad, hogyan segítenek a kód szervezésében és állapot megőrzésében a húzási funkcionalitásunkhoz.

stateDiagram-v2
    [*] --> Ready: Oldal betöltése
    Ready --> DragStart: Felhasználó lenyomja (pointerdown)
    DragStart --> Dragging: Egér/ujj mozgatása (pointermove)
    Dragging --> Dragging: Mozgatás folytatása
    Dragging --> DragEnd: Felhasználó elengedi (pointerup)
    DragEnd --> Ready: Visszaállítás a következő húzáshoz
    
    state DragStart {
        [*] --> CapturePosition
        CapturePosition --> SetupListeners
        SetupListeners --> [*]
    }
    
    state Dragging {
        [*] --> CalculateMovement
        CalculateMovement --> UpdatePosition
        UpdatePosition --> [*]
    }
    
    state DragEnd {
        [*] --> RemoveListeners
        RemoveListeners --> CleanupState
        CleanupState --> [*]
    }

A dragElement függvény létrehozása

Most építsük meg a fő függvényt, amely kezeli a húzás logikáját. Add hozzá ezt a függvényt a növény elemek deklarációja alá:

function dragElement(terrariumElement) {
    // Pozíciókövető változók inicializálása
    let pos1 = 0,  // Előző egér X pozíciója
        pos2 = 0,  // Előző egér Y pozíciója
        pos3 = 0,  // Jelenlegi egér X pozíciója
        pos4 = 0;  // Jelenlegi egér Y pozíciója
    
    // Kezdeti húzás eseményfigyelő beállítása
    terrariumElement.onpointerdown = pointerDrag;
}

A pozíciókövető rendszer megértése:

• pos1 és pos2: Elmentik az egér új és régi pozíciója közti különbséget
• pos3 és pos4: Követik az aktuális egérkoordinátákat
• terrariumElement: A konkrét növény elem, amelyet húzhatóvá teszünk
• onpointerdown: Az esemény, amely akkor indul, amikor a felhasználó elkezdi a húzást

Így működik a closure minta:

• Privát pozícióváltozókat hoz létre minden növény elemhez
• Fenntartja ezeket a változókat a húzás teljes időtartama alatt
• Biztosítja, hogy minden növény önállóan kövesse a koordinátáit
• Tiszta felületet nyújt a dragElement függvényen keresztül

Miért használjuk a pointer eseményeket?

Talán azon tűnődsz, miért az onpointerdown-t használjuk az ismertebb onclick helyett. A gondolatmenet:

Esemény típusa	Mire a legjobb	Hátrány
onclick	Egyszerű gombkattintások	Nem kezeli a húzást (csak kattintás és felengedés)
onpointerdown	Egér és érintés egyaránt	Újabb, de manapság jól támogatott
onmousedown	Csak asztali egér	Kihagyja a mobil felhasználókat

Miért tökéletesek a pointer események a mi funkciónkhoz:

• Jól működnek legyen az egér, ujj vagy akár stylus
• Ugyanolyan érzetet adnak laptopon, táblagépen vagy telefonon
• Kezelik az tényleges húzást (nem csak kattintást és felengedést)
• Zavartalan élményt biztosítanak, amit a modern webes appoktól várunk

💡 Jövőbiztosítás: A pointer események a modern módja a felhasználói interakciók kezelésének. Egyszerre kapsz egér és érintés kezelést külön kód írása nélkül. Elég praktikus, nem igaz?

🔄 Pedagógiai ellenőrzés

Eseménykezelés megértése: Állj meg egy pillanatra, és ellenőrizd a tudásod:

• ✅ Miért pointer eseményeket használunk az egér események helyett?
• ✅ Hogyan maradnak meg a closure változók a függvényhívások között?
• ✅ Mi a preventDefault() szerepe a sima húzásban?
• ✅ Miért a dokumentszinten kötjük az eseményfigyelőket, nem az egyes elemekhez?

Reális példa: Gondolj az általad napi szinten használt drag-and-drop felületekre:

• Fájl feltöltések: fájlok húzása böngészőablakra
• Kanban táblák: feladatok mozgatása oszlopok között
• Képgalériák: fényképek sorrendjének átrendezése
• Mobil felületek: érintéses húzás és görgetés

---

A pointerDrag függvény: A húzás indításának rögzítése

Amikor a felhasználó rányom egy növényre (akár egér kattintással vagy ujj érintésével), a pointerDrag függvény lép működésbe. Ez a függvény rögzíti a kezdő koordinátákat és beállítja a húzási rendszert.

Add ezt a függvényt a dragElement closure belsejébe, közvetlenül az után a sor után, hogy terrariumElement.onpointerdown = pointerDrag;:

function pointerDrag(e) {
    // Megelőzi az alapértelmezett böngésző viselkedést (például szöveg kijelölés)
    e.preventDefault();
    
    // Rögzíti a kezdeti egér/érintés pozíciót
    pos3 = e.clientX;  // Az X koordináta, ahol az áthúzás kezdődött
    pos4 = e.clientY;  // Az Y koordináta, ahol az áthúzás kezdődött
    
    // Eseményfigyelők beállítása az áthúzási folyamatra
    document.onpointermove = elementDrag;
    document.onpointerup = stopElementDrag;
}

Lépésről lépésre, mi történik:

• Megakadályozza az alapértelmezett böngésző viselkedéseket, amelyek zavarhatnák a húzást
• Elmenti a pontos koordinátákat, ahol a felhasználó elkezdte a húzást
• Létrehoz eseményfigyelőket a húzás közbeni egérmozgás követéséhez
• Előkészíti a rendszert, hogy az egér/ujj mozgását az egész dokumentum területén kövesse

Az esemény megelőzése (event prevention) megértése

Az e.preventDefault() sor kritikus a zavartalan húzáshoz:

Megelőzés nélkül a böngészők:

• Kiválaszthatnak szöveget, miközben áthúzol az oldalon
• Kontekstusmenüket indíthatnak jobb klikkes húzással
• Zavarhatják a saját egyedi húzási műveletünket
• Vizuális hibákat okozhatnak a húzás során

🔍 Gyakorlat: A lecke elvégzése után próbáld meg eltávolítani az e.preventDefault()-öt, és nézd meg, hogyan változik a húzás élménye. Gyorsan meg fogod érteni, miért elengedhetetlen ez a sor!

Koordináta követő rendszer

Az e.clientX és e.clientY tulajdonságok pontos egér/érintés koordinátákat adnak nekünk:

Tulajdonság	Mit mér	Használati eset
clientX	Vízszintes pozíció a nézetablakhoz képest	Bal-jobb mozgás követése
clientY	Függőleges pozíció a nézetablakhoz képest	Fel-le mozgás követése
E koordináták megértése:

• Pontos pixelhelyzet-információt nyújt
• Valós időben frissül, ahogy a felhasználó mozgatja a mutatót
• Konzisztens marad különböző képernyőméretek és nagyítási szintek esetén
• Lehetővé teszi a sima, reszponzív húzó műveleteket

Dokumentumszintű eseményfigyelők beállítása

Figyeld meg, hogyan csatoljuk a mozgatás és a leállítás eseményeket az egész document-hez, nem csak a növény elemhez:

document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;

Miért a dokumentumhoz csatoljuk:

• Folytatja a nyomon követést még akkor is, ha az egér elhagyja a növény elemet
• Megakadályozza a húzás megszakítását, ha a felhasználó gyorsan mozog
• Biztosítja a sima húzást az egész képernyőn
• Kezeli az élő eseteket, amikor a kurzor kilép a böngészőablakból

⚡ Teljesítmény megjegyzés: A húzás leállásakor eltávolítjuk ezeket a dokumentumszintű eseményfigyelőket, hogy elkerüljük a memória szivárgást és teljesítményproblémákat.

A húzó rendszer befejezése: Mozgás és takarítás

Most hozzáadjuk a két hiányzó függvényt, amelyek a tényleges húzási mozgást kezelik, és a takarítást végzik a húzás leállásakor. Ezek a függvények együttműködnek, hogy sima, reszponzív növénymozgást valósítsanak meg a terráriumban.

Az elementDrag függvény: Mozgás követése

Add hozzá az elementDrag függvényt közvetlenül a pointerDrag záró kapcsos zárójelét követően:

function elementDrag(e) {
    // Számolja ki a megtett távolságot az utolsó esemény óta
    pos1 = pos3 - e.clientX;  // Vízszintes megtett távolság
    pos2 = pos4 - e.clientY;  // Függőleges megtett távolság
    
    // Frissítse az aktuális pozíció követését
    pos3 = e.clientX;  // Új aktuális X pozíció
    pos4 = e.clientY;  // Új aktuális Y pozíció
    
    // Alkalmazza a mozgást az elem pozíciójára
    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
}

A koordináta-matematika megértése:

• pos1 és pos2: Kiszámolják, mennyit mozdult az egér az utolsó frissítés óta
• pos3 és pos4: Tárolják az aktuális egérpozíciót a következő számításhoz
• offsetTop és offsetLeft: Lekérik az elem aktuális helyzetét az oldalon
• Kivonás logika: Ugyanannyira mozgatja az elemet, amennyit az egér mozdult

sequenceDiagram
    participant User
    participant Mouse
    participant JavaScript
    participant Plant
    
    User->>Mouse: Húzás indítása (100, 50) pontnál
    Mouse->>JavaScript: pointerdown esemény
    JavaScript->>JavaScript: Kezdeti pozíció tárolása (pos3=100, pos4=50)
    JavaScript->>JavaScript: Mozgatás/felengedés figyelők beállítása
    
    User->>Mouse: Mozgatás ide (110, 60)
    Mouse->>JavaScript: pointermove esemény
    JavaScript->>JavaScript: Számítás: pos1=10, pos2=10
    JavaScript->>Plant: Frissítés: bal += 10px, felső += 10px
    Plant->>Plant: Új helyen kirajzolás
    
    User->>Mouse: Felengedés (120, 65) pontnál
    Mouse->>JavaScript: pointerup esemény
    JavaScript->>JavaScript: Figyelők eltávolítása
    JavaScript->>JavaScript: Visszaállítás a következő húzáshoz

A mozgás számítás részletes bontása:

1. Méri a régi és új egérpozíció közti különbséget
2. Kiszámolja mennyit kell az elemen mozgatni az egérmozgás alapján
3. Valós időben frissíti az elem CSS pozíció tulajdonságait
4. Elmenti az új pozíciót kiindulópontként a következő mozgás számításhoz

A matematika vizuális ábrázolása

sequenceDiagram
    participant Mouse
    participant JavaScript
    participant Plant
    
    Mouse->>JavaScript: Mozgás innen (100,50) ide (110,60)
    JavaScript->>JavaScript: Számítás: 10px jobbra, 10px le mozdult
    JavaScript->>Plant: Pozíció frissítése +10px jobbra, +10px le
    Plant->>Plant: Új pozíción megjelenítés

A stopElementDrag függvény: Takarítás

Add hozzá a takarító függvényt az elementDrag záró kapcsos zárójelét követően:

function stopElementDrag() {
    // Távolítsa el a dokumentumszintű eseményfigyelőket
    document.onpointerup = null;
    document.onpointermove = null;
}

Miért elengedhetetlen a takarítás:

• Megakadályozza a memóriaszivárgást a megmaradt eseményfigyelők miatt
• Leállítja a húzó viselkedést, amikor a felhasználó elengedi a növényt
• Lehetővé teszi más elemek független húzását
• Újraindítja a rendszert a következő húzási művelethez

Mi történik takarítás nélkül:

• Az eseményfigyelők tovább futnak a húzás után is
• A teljesítmény romlik, ahogy a használaton kívüli figyelők gyűlnek
• Váratlan viselkedés más elemekkel való interakció esetén
• A böngésző erőforrásai feleslegesen fogynak eseménykezelésre

A CSS pozíció tulajdonságok megértése

A húzó rendszerünk két kulcsfontosságú CSS tulajdonságot manipulál:

Tulajdonság	Mit szabályoz	Hogyan használjuk
top	Távolság a felső élhez	Függőleges pozicionálás húzás közben
left	Távolság a bal élhez	Vízszintes pozicionálás húzás közben

Fontos tudnivalók az offset tulajdonságokról:

• offsetTop: Aktuális távolság a pozicionált szülő elem tetejétől
• offsetLeft: Aktuális távolság a pozicionált szülő elem bal oldalától
• Pozicionálási kontextus: Ezek az értékek a legközelebbi pozicionált őshöz viszonyítva értendők
• Valós idejű frissítés: Az értékek azonnal változnak, ha módosítjuk a CSS tulajdonságokat

🎯 Tervezési filozófia: Ez a húzó rendszer szándékosan rugalmas – nincsenek "lerakó zónák" vagy korlátozások. A felhasználók bárhová elhelyezhetik a növényeket, teljes kreatív szabadságot adva a terrárium kialakításához.

Összegezve: Az egész húzó rendszer

Gratulálunk! Éppen most építettél egy kifinomult húzás-és-ejtműködés rendszert tiszta JavaScript-tel. A teljes dragElement függvényed most egy erőteljes zárványt tartalmaz, amely kezeli:

Mit valósít meg a zárványod:

• Fenntartja az egyedi pozícióváltozókat minden növényhez függetlenül
• Kezeli a teljes húzási életciklust az indulástól a befejezésig
• Biztosítja a sima, reszponzív mozgást az egész képernyőn
• Megfelelően takarít az erőforrások lefoglalása után, hogy megelőzze a memória szivárgást
• Egyszerű, kreatív felületet teremt a terrárium tervezéséhez

Interaktív terrárium tesztelése

Most teszteld az interaktív terráriumodat! Nyisd meg az index.html fájlodat egy webböngészőben, és próbáld ki a funkciókat:

1. Kattints és tarts le bármely növényen a húzás elkezdéséhez
2. Mozgasd az egeret vagy az ujjad, nézd, hogy a növény simán követi
3. Engedd el, hogy az új helyén lerakd a növényt
4. Kísérletezz különböző elrendezésekkel, hogy felfedezd az interfészt

🥇 Teljesítmény: Teljes értékű, webes alkalmazást készítettél, a professzionális fejlesztők által naponta használt alapelvek segítségével. Ez a húzás-és-ejtés funkció ugyanazokon az elveken alapul, mint például a fájlfeltöltések, kanban táblák és számos más interaktív felület.

🔄 Pedagógiai ellenőrzőpont

Teljes rendszermegértés: Ellenőrizd tudásod a komplett húzó rendszerről:

• ✅ Hogyan tartják fenn a zárványok az egyedi állapotot minden növényhez?
• ✅ Miért szükséges a koordináta számítás a sima mozgáshoz?
• ✅ Mi történne, ha elfelejtenénk eltávolítani az eseményfigyelőket?
• ✅ Hogyan skálázódik ez a minta bonyolultabb interakciókra?

Kódminőség önértékelés: Tekintsd át a teljes megoldásodat:

• Moduláris tervezés: Minden növény saját zárványpéldányt kap
• Jó eseménykezelés: Megfelelő beállítás és takarítás
• Eszközök közötti támogatás: Asztali és mobil támogatás
• Teljesítménytudatosság: Nincs memóriaszivárgás vagy fölösleges számítás

---

GitHub Copilot Agent kihívás 🚀

Használd az Agent módot az alábbi kihívás befejezéséhez:

Leírás: Fejleszd tovább a terrárium projektet egy alaphelyzetbe állító funkció hozzáadásával, amely visszaállítja az összes növényt eredeti pozíciójába sima animációk segítségével.

Feladat: Hozz létre egy reset gombot, amely megnyomásakor az összes növényt CSS átmenetekkel visszaviszi az eredeti oldalsáv helyzetükre. A függvénynek el kell tárolnia az eredeti pozíciókat az oldal betöltődésekor, és simán vissza kell mozgatnia a növényeket 1 másodperc alatt a reset gomb megnyomásakor.

További részletek az agent mód használatáról.

🚀 További kihívás: Fejleszd képességeid

Készen állsz, hogy szintet lépj a terráriumoddal? Próbáld ki ezeket a fejlesztéseket:

Kreatív bővítések:

• Dupla kattintás egy növényre, hogy előtérbe hozza (z-index manipuláció)
• Adj vizuális visszajelzést, például finom ragyogást a növényeken, amikor föléjük viszed az egeret
• Alkalmazz határokat, hogy megakadályozd a növények terráriumon kívüli húzását
• Készíts mentés funkciót, amely eltárolja a növény helyzetét localStorage-ban
• Adj hanghatásokat növény felvételéhez és lerakásához

💡 Tanulási lehetőség: Ezek a kihívások mind új aspektusokat tanítanak a DOM manipulációból, esemény kezelésből és felhasználói élmény tervezésből.

Előadás utáni kvíz

Előadás utáni kvíz

Áttekintés & Önálló tanulás: Mélyítsd el a tudásod

Már elsajátítottad a DOM manipuláció és a zárványok alapjait, de mindig van mit felfedezni! Íme néhány irány, ahol tovább fejlesztheted tudásod és képességeid.

Alternatív húzás-eldobás megközelítések

Pointer eseményeket használtunk a maximális rugalmasságért, de a webfejlesztés többféle módszert kínál:

Megközelítés	Milyen célra legjobb	Tanulási érték
HTML Drag and Drop API	Fájlfeltöltések, formális húzó zónák	A böngésző natív képességeinek megértése
Touch Events	Mobil specifikus interakciók	Mobil első fejlesztési minták
CSS transform tulajdonságok	Simább animációk	Teljesítmény optimalizálási technikák

Haladó DOM manipuláció témák

Következő tanulási lépések:

• Esemény delegálás: Több elem eseményeinek hatékony kezelése
• Intersection Observer: Észlelés, amikor elemek belépnek vagy elhagyják a nézetet
• Mutation Observer: A DOM struktúra változásainak figyelése
• Web komponensek: Újrahasznosítható, kapszulázott UI elemek létrehozása
• Virtual DOM koncepciók: Keretrendszerek DOM frissítésének optimalizálása

Fontos források a folyamatos tanuláshoz

Technikai dokumentáció:

• MDN Pointer Events útmutató – Átfogó pointer esemény referenciák
• W3C Pointer Events specifikáció – Hivatalos szabvány dokumentáció
• JavaScript zárványok részletesen – Fejlett zárvány minták

Böngésző kompatibilitás:

• CanIUse.com – Funkció támogatás böngészők között
• MDN kompatibilitási adatok – Részletes kompatibilitási információ

Gyakorlati lehetőségek:

• Készíts puzzle játékot hasonló húzó mechanikával
• Alkoss kanban táblát húzásos feladathoz
• Tervezd meg egy kép galériát húzható fotó elrendezéssel
• Kísérletezz érintés gesztusokkal mobil interfészen

🎯 Tanulási stratégia: Ezeknek az elveknek a legjobb elsajátítása gyakorlással történik. Építs változatokat húzható felületekből – minden projekt új tanulságot ad a felhasználói interakcióról és DOM kezelőről.

⚡ Mit csinálhatsz az elkövetkező 5 percben

• Nyisd meg a böngésző fejlesztői eszközeit és gépeld be a konzolba: document.querySelector('body')
• Próbálj meg változtatni egy weboldal szövegén innerHTML vagy textContent segítségével
• Adj hozzá kattintás eseményfigyelőt egy gombhoz vagy linkhez a weboldalon
• Nézd meg a DOM fa szerkezetét az Elements panelen

🎯 Mit érhetsz el ezen az órán belül

• Töltsd ki az előadás utáni kvízt és ismételd át a DOM manipulációs fogalmakat
• Készíts interaktív weboldalt, amely reagál a felhasználó kattintásaira
• Gyakorold az eseménykezelést különféle eseménytípusokkal (kattintás, egér föléviteli, billentyűleütés)
• Építs egy egyszerű teendőlistát vagy számlálót DOM manipulációval
• Fedezd fel a HTML elemek és JavaScript objektumok kapcsolatát

📅 Heti JavaScript útmutatód

• Készítsd el az interaktív terrárium projektet húzás-és-ejtés funkcióval
• Sajátítsd el az esemény delegálást a hatékony eseménykezelésért
• Tanulj az eseményhurokról és az aszinkron JavaScriptről
• Gyakorold a zárványokat modulok építésével privát állapottal
• Ismerkedj meg a modern DOM API-kkal, például az Intersection Observer-rel
• Építs interaktív komponenseket keretrendszerek nélkül

🌟 Havi JavaScript mesterséged

• Alkoss komplex egyoldalas alkalmazást tiszta JavaScript-tel
• Tanulj meg egy modern keretrendszert (React, Vue, Angular), és hasonlítsd össze a tiszta DOM-mal
• Vegyél részt nyílt forráskódú JavaScript projektekben
• Sajátíts el fejlett koncepciókat, mint a webkomponensek és egyedi elemek
• Készíts teljesítményorientált webes alkalmazásokat optimális DOM mintákkal
• Taníts másokat DOM manipulációról és JavaScript alapokról

🎯 JavaScript DOM Mesteri Idővonalad

timeline
    title DOM & JavaScript tanulási folyamat
    
    section Alapok (15 perc)
        DOM megértése: Elem kiválasztási módszerek
                      : Fa szerkezet navigáció
                      : Tulajdonság elérési minták
        
    section Eseménykezelés (20 perc)
        Felhasználói interakció: Mutató esemény alapok
                              : Eseményfigyelő beállítás
                              : Eszközök közötti kompatibilitás
                              : Esemény megelőző technikák
        
    section Zárványok (25 perc)
        Hatókör kezelés: Privát változó létrehozás
                       : Függvény tartósság
                       : Állapotkezelési minták
                       : Memóriahatékonyság
        
    section Drag rendszer (30 perc)
        Interaktív funkciók: Koordináta követés
                           : Pozíció számítás
                           : Mozgás matematika
                           : Takarítási eljárások
        
    section Fejlett minták (45 perc)
        Profi készségek: Esemény delegálás
                        : Teljesítmény optimalizálás
                        : Hibakezelés
                        : Akadálymentességi megfontolások
        
    section Keretrendszer megértése (1 hét)
        Modern fejlesztés: Virtuális DOM fogalmak
                         : Állapotkezelő könyvtárak
                         : Komponens architektúrák
                         : Build eszköz integráció
        
    section Szakértői szint (1 hónap)
        Fejlett DOM API-k: Intersection Observer
                        : Mutation Observer
                        : Egyedi elemek
                        : Web komponensek

🛠️ JavaScript eszköztár összefoglaló

A tanfolyam elvégzése után most már rendelkezel:

• DOM jártasság: Elem kiválasztás, tulajdonság manipuláció, fa navigáció
• Esemény szakértelem: Eszközök közti interakció kezelése pointer eseményekkel
• Zárvány megértés: Privát állapotkezelés és függvények megőrzése
• Interaktív rendszerek: Komplett húzás- és ejtés megvalósítás a nulláról
• Teljesítménytudatosság: Események helyes takarítása és memória menedzsment
• Modern minták: Az ipari fejlesztésben használt kód szervezési technikák
• Felhasználói élmény: Intuitív, reszponzív interfészek létrehozása

Szakmai készségek, amiket megszereztél: Olyan technikákat használtál, mint a:

• Trello/Kanban táblák: kártyahúzás oszlopok között
• Fájlfeltöltő rendszerek: húzás-és-ejtés alapú fájl kezelés
• Képgalériák: fotó elrendező felületek
• Mobil appok: érintés alapú interakciós minták

Következő szint: Készen állsz, hogy modern keretrendszereket tanulj, mint a React, Vue vagy Angular, amelyek ezekre a DOM manipuláció alapokra építenek!

Feladat

Dolgozz tovább a DOM-mal

---

Jogi nyilatkozat: Ezt a dokumentumot az AI fordítószolgáltatás, a Co-op Translator segítségével fordítottuk le. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum anyanyelven készült változatát kell tekinteni hivatalos forrásnak. Kritikus információk esetén szakmai, emberi fordítást javaslunk. Nem vállalunk felelősséget ezen fordítás használatából eredő félreértésekért vagy félreértelmezésekért.