39 KiB

Raw Permalink Blame History Unescape Escape

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

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:

Méri a régi és új egérpozíció közti különbséget
Kiszámolja mennyit kell az elemen mozgatni az egérmozgás alapján
Valós időben frissíti az elem CSS pozíció tulajdonságait
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:

Kattints és tarts le bármely növényen a húzás elkezdéséhez
Mozgasd az egeret vagy az ujjad, nézd, hogy a növény simán követi
Engedd el, hogy az új helyén lerakd a növényt
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

Á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.

39 KiB Raw Permalink Blame History Unescape Escape

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

Előadás előtti kvíz

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

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

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

JavaScript fájl beállítása

JavaScript kapcsolódása a HTML elemekhez

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

🔄 Pedagógiai ellenőrzés

A dragElement closure megalkotása

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

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

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

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

🔄 Pedagógiai ellenőrzés

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

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

Koordináta követő rendszer

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

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

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

A matematika vizuális ábrázolása

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

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

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

Interaktív terrárium tesztelése

🔄 Pedagógiai ellenőrzőpont

GitHub Copilot Agent kihívás 🚀

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

Előadás utáni kvíz

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

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

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

Fontos források a folyamatos tanuláshoz

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

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

📅 Heti JavaScript útmutatód

🌟 Havi JavaScript mesterséged

🎯 JavaScript DOM Mesteri Idővonalad

🛠️ JavaScript eszköztár összefoglaló

Feladat

39 KiB

Raw Permalink Blame History Unescape Escape