History

softchris bde9da6dad 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

Projekt Terrarij, 3. del: Manipulacija DOM-a in zaprtja v JavaScriptu

Sketchnote avtorja Tomomi Imura

Dobrodošli v enem najbolj zanimivih vidikov spletnega razvoja - interaktivnost! Dokumentni objektni model (DOM) je kot most med vašim HTML-jem in JavaScriptom, danes pa ga bomo uporabili, da vaš terrarij oživi. Ko je Tim Berners-Lee ustvaril prvi spletni brskalnik, si je zamislil splet, kjer bi dokumenti lahko bili dinamični in interaktivni - DOM omogoča uresničitev te vizije.

Raziskali bomo tudi zaprtja v JavaScriptu, ki se morda na začetku zdijo zastrašujoča. Zaprtja si predstavljajte kot "žepke spomina", kjer si vaše funkcije lahko zapomnijo pomembne informacije. To je kot da bi vsaka rastlina v vašem terrariju imela svoj zapis podatkov za sledenje svoji poziciji. Do konca te lekcije boste razumeli, kako naravna in uporabna so.

Tukaj je, kaj bomo ustvarili: terrarij, kjer lahko uporabniki povlečejo in spustijo rastline kamorkoli želijo. Naučili se boste tehnik manipulacije DOM-a, ki omogočajo vse od nalaganja datotek z vlečenjem in spuščanjem do interaktivnih iger. Naj vaš terrarij oživi.

Predhodni kviz

Razumevanje DOM-a: Vaša vstopnica v interaktivne spletne strani

Dokumentni objektni model (DOM) je način, kako JavaScript komunicira z vašimi HTML elementi. Ko vaš brskalnik naloži HTML stran, ustvari strukturirano predstavitev te strani v pomnilniku - to je DOM. Predstavljajte si ga kot družinsko drevo, kjer je vsak HTML element družinski član, do katerega lahko JavaScript dostopa, ga spreminja ali preureja.

Manipulacija DOM-a pretvori statične strani v interaktivne spletne strani. Vsakič, ko vidite, da se gumb ob premiku miške spremeni barvo, se vsebina posodobi brez osvežitve strani ali elementi, ki jih lahko premikate, je to delo manipulacije DOM-a.

Predstavitev DOM-a in HTML oznak, ki se nanj nanašajo. Avtor Olfa Nasraoui

Kaj naredi DOM tako močan:

Omogoča strukturiran dostop do katerega koli elementa na vaši strani
Omogoča dinamične posodobitve vsebine brez osvežitve strani
Omogoča odziv v realnem času na interakcije uporabnikov, kot so kliki in premiki
Ustvarja temelje za sodobne interaktivne spletne aplikacije

Zaprtja v JavaScriptu: Organizacija in moč kode

Zaprtje v JavaScriptu je kot da bi funkciji dali njen lasten zasebni delovni prostor s trajnim spominom. Pomislite na Darwinove ščinkavce na Galapaških otokih, ki so razvili specializirane kljune glede na svoje specifično okolje - zaprtja delujejo podobno, saj ustvarjajo specializirane funkcije, ki si "zapomnijo" svoj specifičen kontekst, tudi po tem, ko se njihova starševska funkcija zaključi.

V našem terrariju zaprtja pomagajo vsaki rastlini, da si neodvisno zapomni svojo pozicijo. Ta vzorec se pojavlja povsod v profesionalnem razvoju JavaScripta, zato je pomembno, da ga razumemo.

💡 Razumevanje zaprtij: Zaprtja so pomembna tema v JavaScriptu, mnogi razvijalci pa jih uporabljajo leta, preden popolnoma razumejo vse teoretične vidike. Danes se osredotočamo na praktično uporabo - videli boste, kako se zaprtja naravno pojavijo med gradnjo naših interaktivnih funkcij. Razumevanje se bo razvijalo, ko boste videli, kako rešujejo resnične težave.

Predstavitev DOM-a in HTML oznak, ki se nanj nanašajo. Avtor Olfa Nasraoui

V tej lekciji bomo dokončali naš interaktivni projekt terrarija z ustvarjanjem JavaScripta, ki bo uporabniku omogočil manipulacijo rastlin na strani.

Preden začnemo: Priprava na uspeh

Potrebovali boste svoje HTML in CSS datoteke iz prejšnjih lekcij o terrariju - zdaj bomo to statično zasnovo naredili interaktivno. Če se pridružujete prvič, bo dokončanje teh lekcij najprej zagotovilo pomemben kontekst.

Tukaj je, kaj bomo ustvarili:

Gladko vlečenje in spuščanje za vse rastline v terrariju
Sledenje koordinatam, da si rastline zapomnijo svoje pozicije
Popolnoma interaktiven vmesnik z uporabo osnovnega JavaScripta
Čista, organizirana koda z uporabo vzorcev zaprtja

Priprava vaše JavaScript datoteke

Ustvarimo JavaScript datoteko, ki bo vaš terrarij naredila interaktiven.

Korak 1: Ustvarite svojo skriptno datoteko

V mapi terrarija ustvarite novo datoteko z imenom script.js.

Korak 2: Povežite JavaScript z vašim HTML-jem

Dodajte to oznako skripta v razdelek <head> vaše datoteke index.html:

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

Zakaj je atribut defer pomemben:

Zagotavlja, da JavaScript počaka, dokler se ne naloži celoten HTML
Preprečuje napake, kjer JavaScript išče elemente, ki še niso pripravljeni
Zagotavlja, da so vsi vaši elementi rastlin na voljo za interakcijo
Omogoča boljšo zmogljivost kot postavitev skriptov na dno strani

⚠️ Pomembna opomba: Atribut defer preprečuje pogoste časovne težave. Brez njega lahko JavaScript poskuša dostopati do HTML elementov, preden so naloženi, kar povzroča napake.

Povezovanje JavaScripta z vašimi HTML elementi

Preden lahko naredimo elemente premikajoče, mora JavaScript najti te elemente v DOM-u. To si predstavljajte kot knjižni sistem katalogizacije - ko imate številko kataloga, lahko najdete točno tisto knjigo, ki jo potrebujete, in dostopate do vseh njenih vsebin.

Uporabili bomo metodo document.getElementById(), da vzpostavimo te povezave. To je kot da imate natančen sistem za arhiviranje - podate ID in najde točno tisti element, ki ga potrebujete v vašem HTML-ju.

Omogočanje funkcionalnosti vlečenja za vse rastline

Dodajte to kodo v vašo datoteko script.js:

// Enable drag functionality for all 14 plants
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'));

Kaj ta koda doseže:

Najde vsak element rastline v DOM-u z uporabo njegovega edinstvenega ID-ja
Pridobi JavaScript referenco na vsak HTML element
Posreduje vsak element funkciji dragElement (ki jo bomo ustvarili naslednje)
Pripravi vsako rastlino za interakcijo z vlečenjem in spuščanjem
Poveže vašo HTML strukturo z JavaScript funkcionalnostjo

🎯 Zakaj uporabljati ID-je namesto razredov? ID-ji zagotavljajo edinstvene identifikatorje za specifične elemente, medtem ko so CSS razredi namenjeni oblikovanju skupin elementov. Ko JavaScript potrebuje manipulacijo posameznih elementov, ID-ji ponujajo natančnost in zmogljivost, ki ju potrebujemo.

💡 Nasvet: Opazite, kako kličemo dragElement() za vsako rastlino posebej. Ta pristop zagotavlja, da vsaka rastlina dobi svoje neodvisno vedenje pri vlečenju, kar je bistveno za gladko interakcijo uporabnika.

Ustvarjanje zaprtja funkcije dragElement

Zdaj bomo ustvarili srce naše funkcionalnosti vlečenja: zaprtje, ki upravlja vedenje vlečenja za vsako rastlino. To zaprtje bo vsebovalo več notranjih funkcij, ki bodo skupaj sledile premikom miške in posodabljale pozicije elementov.

Zaprtja so popolna za to nalogo, saj nam omogočajo ustvarjanje "zasebnih" spremenljivk, ki ostanejo med klici funkcij, kar vsaki rastlini omogoča, da neodvisno sledi svojim koordinatam.

Razumevanje zaprtij s preprostim primerom

Naj vam pokažem zaprtja s preprostim primerom, ki ilustrira koncept:

function createCounter() {
    let count = 0; // This is like a private variable
    
    function increment() {
        count++; // The inner function remembers the outer variable
        return count;
    }
    
    return increment; // We're giving back the inner function
}

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

Kaj se dogaja v tem vzorcu zaprtja:

Ustvari zasebno spremenljivko count, ki obstaja samo znotraj tega zaprtja
Notranja funkcija lahko dostopa do te zunanje spremenljivke in jo spreminja (mehanizem zaprtja)
Ko vrnemo notranjo funkcijo, ohrani povezavo s temi zasebnimi podatki
Tudi po tem, ko se createCounter() zaključi, count ostane in si zapomni svojo vrednost

Zakaj so zaprtja popolna za funkcionalnost vlečenja

Za naš terrarij mora vsaka rastlina neodvisno slediti svojim trenutnim koordinatam. Zaprtja ponujajo popolno rešitev:

Ključne prednosti za naš projekt:

Ohranja zasebne pozicijske spremenljivke za vsako rastlino neodvisno
Shranjuje podatke o koordinatah med dogodki vlečenja
Preprečuje konflikte spremenljivk med različnimi premikajočimi se elementi
Ustvarja čisto, organizirano strukturo kode

🎯 Cilj učenja: Ni vam treba takoj obvladati vseh vidikov zaprtij. Osredotočite se na to, kako nam pomagajo organizirati kodo in ohraniti stanje za našo funkcionalnost vlečenja.

Ustvarjanje funkcije dragElement

Zdaj bomo zgradili glavno funkcijo, ki bo obravnavala vso logiko vlečenja. Dodajte to funkcijo pod deklaracije elementov rastlin:

function dragElement(terrariumElement) {
    // Initialize position tracking variables
    let pos1 = 0,  // Previous mouse X position
        pos2 = 0,  // Previous mouse Y position  
        pos3 = 0,  // Current mouse X position
        pos4 = 0;  // Current mouse Y position
    
    // Set up the initial drag event listener
    terrariumElement.onpointerdown = pointerDrag;
}

Razumevanje sistema sledenja pozicij:

pos1 in pos2: Shranjujeta razliko med starimi in novimi pozicijami miške
pos3 in pos4: Sledita trenutnim koordinatam miške
terrariumElement: Specifičen element rastline, ki ga naredimo premikajočega
onpointerdown: Dogodek, ki se sproži, ko uporabnik začne vleči

Kako deluje vzorec zaprtja:

Ustvari zasebne pozicijske spremenljivke za vsak element rastline
Ohranja te spremenljivke skozi celoten življenjski cikel vlečenja
Zagotavlja, da vsaka rastlina neodvisno sledi svojim koordinatam
Omogoča čisti vmesnik prek funkcije dragElement

Zakaj uporabljati dogodke kazalca?

Morda se sprašujete, zakaj uporabljamo onpointerdown namesto bolj znanega onclick. Tukaj je razlog:

Vrsta dogodka	Najboljše za	Pomanjkljivost
`onclick`	Preprosti kliki na gumb	Ne more obravnavati vlečenja (samo klike in sprostitve)
`onpointerdown`	Miška in dotik	Novejši, vendar dobro podprt
`onmousedown`	Samo namizna miška	Izpušča mobilne uporabnike

Zakaj so dogodki kazalca popolni za to, kar gradimo:

Odlično delujejo, ne glede na to, ali nekdo uporablja miško, prst ali celo pisalo
Občutek je enak na prenosniku, tablici ali telefonu
Obravnava dejansko gibanje vlečenja (ne samo klik in sprostitev)
Ustvarja gladko izkušnjo, ki jo uporabniki pričakujejo od sodobnih spletnih aplikacij

💡 Priprava na prihodnost: Dogodki kazalca so sodoben način obravnave interakcij uporabnikov. Namesto da pišete ločeno kodo za miško in dotik, dobite oboje brez dodatnega dela. Zelo priročno, kajne?

Funkcija pointerDrag: Zajem začetka vlečenja

Ko uporabnik pritisne na rastlino (bodisi s klikom miške ali dotikom prsta), funkcija pointerDrag začne delovati. Ta funkcija zajame začetne koordinate in vzpostavi sistem vlečenja.

Dodajte to funkcijo znotraj vašega zaprtja dragElement, takoj za vrstico terrariumElement.onpointerdown = pointerDrag;:

function pointerDrag(e) {
    // Prevent default browser behavior (like text selection)
    e.preventDefault();
    
    // Capture the initial mouse/touch position
    pos3 = e.clientX;  // X coordinate where drag started
    pos4 = e.clientY;  // Y coordinate where drag started
    
    // Set up event listeners for the dragging process
    document.onpointermove = elementDrag;
    document.onpointerup = stopElementDrag;
}

Korak za korakom, kaj se dogaja:

Preprečuje privzeto vedenje brskalnika, ki bi lahko motilo vlečenje
Zabeleži natančne koordinate, kjer je uporabnik začel gesto vlečenja
Vzpostavi poslušalce dogodkov za nadaljnje gibanje vlečenja
Pripravi sistem za sledenje gibanju miške/prsta po celotnem dokumentu

Razumevanje preprečevanja dogodkov

Vrstica e.preventDefault() je ključna za gladko vlečenje:

Brez preprečevanja bi brskalniki lahko:

Izbrali besedilo med vlečenjem po strani
Sprožili kontekstne menije ob desnem kliku med vlečenjem
Motili naše prilagojeno vedenje vlečenja
Ustvarili vizualne artefakte med operacijo vlečenja

🔍 Eksperiment: Po zaključku te lekcije poskusite odstraniti e.preventDefault() in opazujte, kako to vpliva na izkušnjo vlečenja. Hitro boste razumeli, zakaj je ta vrstica ključna!

Sistem sledenja koordinatam

Lastnosti e.clientX in e.clientY nam dajejo natančne koordinate miške/dotika:

Lastnost	Kaj meri	Uporaba
`clientX`	Horizontalni položaj glede na pogled	Sledenje premiku levo-desno
`clientY`	Vertikalni položaj glede na pogled	Sledenje premiku gor-dol

Razumevanje teh koordinat:

Omogoča natančne informacije o položaju v slikovnih pikah
Posodablja v realnem času, ko se uporabnik premika s kazalcem
Ostaja dosledno na različnih velikostih zaslona in ravneh povečave
Omogoča gladke, odzivne interakcije z vlečenjem

Nastavitev poslušalcev dogodkov na ravni dokumenta

Opazite, kako pripnemo dogodke za premikanje in ustavljanje na celoten document, ne le na element rastline:

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

Zakaj pripeti na dokument:

Nadaljuje sledenje, tudi ko miška zapusti element rastline
Preprečuje prekinitev vlečenja, če se uporabnik hitro premika
Omogoča gladko vlečenje po celotnem zaslonu
Obravnava robne primere, kjer kazalec zapusti okno brskalnika

⚡ Opomba o zmogljivosti: Te poslušalce dogodkov na ravni dokumenta bomo odstranili, ko se vlečenje ustavi, da se izognemo težavam z uporabo pomnilnika in zmogljivostjo.

Zaključek sistema vlečenja: Gibanje in čiščenje

Zdaj bomo dodali preostali dve funkciji, ki obravnavata dejansko gibanje vlečenja in čiščenje, ko se vlečenje ustavi. Te funkcije delujejo skupaj, da ustvarijo gladko, odzivno premikanje rastlin po vašem terrariju.

Funkcija elementDrag: Sledenje gibanju

Dodajte funkcijo elementDrag takoj za zaključnim zavitim oklepajem funkcije pointerDrag:

function elementDrag(e) {
    // Calculate the distance moved since the last event
    pos1 = pos3 - e.clientX;  // Horizontal distance moved
    pos2 = pos4 - e.clientY;  // Vertical distance moved
    
    // Update the current position tracking
    pos3 = e.clientX;  // New current X position
    pos4 = e.clientY;  // New current Y position
    
    // Apply the movement to the element's position
    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
}

Razumevanje matematičnih izračunov koordinat:

**pos1 in
pos3 in pos4: Shrani trenutno pozicijo miške za naslednji izračun
offsetTop in offsetLeft: Pridobi trenutno pozicijo elementa na strani
Logika odštevanja: Premakne element za enako razdaljo, kot se je premaknila miška

Tukaj je razčlenitev izračuna premikanja:

Izmeri razliko med staro in novo pozicijo miške
Izračuna, koliko premakniti element glede na premik miške
Posodobi CSS lastnosti pozicije elementa v realnem času
Shrani novo pozicijo kot osnovo za naslednji izračun premika

Vizualna predstavitev matematike

sequenceDiagram
    participant Mouse
    participant JavaScript
    participant Plant
    
    Mouse->>JavaScript: Move from (100,50) to (110,60)
    JavaScript->>JavaScript: Calculate: moved 10px right, 10px down
    JavaScript->>Plant: Update position by +10px right, +10px down
    Plant->>Plant: Render at new position

Funkcija stopElementDrag: Čiščenje

Dodajte funkcijo za čiščenje po zaključni zaviti oklepaj funkcije elementDrag:

function stopElementDrag() {
    // Remove the document-level event listeners
    document.onpointerup = null;
    document.onpointermove = null;
}

Zakaj je čiščenje pomembno:

Preprečuje uhajanje pomnilnika zaradi ostalih poslušalcev dogodkov
Ustavi vedenje vlečenja, ko uporabnik spusti rastlino
Omogoča, da se drugi elementi vlečejo neodvisno
Ponastavi sistem za naslednjo operacijo vlečenja

Kaj se zgodi brez čiščenja:

Poslušalci dogodkov še naprej delujejo, tudi ko se vlečenje ustavi
Zmogljivost se poslabša, saj se kopičijo neuporabljeni poslušalci
Pri interakciji z drugimi elementi se pojavi nepričakovano vedenje
Brskalnik porablja vire za nepotrebno obdelavo dogodkov

Razumevanje CSS lastnosti pozicije

Naš sistem vlečenja manipulira z dvema ključnima CSS lastnostma:

Lastnost	Kaj nadzoruje	Kako jo uporabljamo
`top`	Razdaljo od zgornjega roba	Navpično pozicioniranje med vlečenjem
`left`	Razdaljo od levega roba	Vodoravno pozicioniranje med vlečenjem

Ključni vpogledi o lastnostih offset:

offsetTop: Trenutna razdalja od zgornjega roba pozicioniranega nadrejenega elementa
offsetLeft: Trenutna razdalja od levega roba pozicioniranega nadrejenega elementa
Kontekst pozicioniranja: Te vrednosti so relativne glede na najbližjega pozicioniranega prednika
Posodobitve v realnem času: Spremembe se zgodijo takoj, ko spremenimo CSS lastnosti

🎯 Filozofija oblikovanja: Ta sistem vlečenja je namerno prilagodljiv – ni "območij za spuščanje" ali omejitev. Uporabniki lahko rastline postavijo kamorkoli, kar jim omogoča popoln ustvarjalni nadzor nad oblikovanjem terarija.

Združevanje vsega: Vaš popolni sistem vlečenja

Čestitke! Pravkar ste zgradili sofisticiran sistem za vlečenje in spuščanje z uporabo osnovnega JavaScripta. Vaša popolna funkcija dragElement zdaj vsebuje močno zaprtje, ki upravlja:

Kaj vaše zaprtje doseže:

Vzdržuje zasebne spremenljivke pozicije za vsako rastlino neodvisno
Upravlja celoten življenjski cikel vlečenja od začetka do konca
Omogoča gladko, odzivno premikanje po celotnem zaslonu
Pravilno čisti vire, da prepreči uhajanje pomnilnika
Ustvari intuitiven, ustvarjalen vmesnik za oblikovanje terarija

Testiranje vašega interaktivnega terarija

Sedaj preizkusite svoj interaktivni terarij! Odprite datoteko index.html v spletnem brskalniku in preizkusite funkcionalnost:

Kliknite in držite katerokoli rastlino, da začnete vleči
Premaknite miško ali prst in opazujte, kako rastlina gladko sledi
Spustite, da rastlino postavite na novo pozicijo
Eksperimentirajte z različnimi postavitvami, da raziščete vmesnik

🥇 Dosežek: Ustvarili ste popolnoma interaktivno spletno aplikacijo z uporabo osnovnih konceptov, ki jih profesionalni razvijalci uporabljajo vsak dan. Ta funkcionalnost vlečenja in spuščanja uporablja enaka načela kot nalaganje datotek, kanban deske in številni drugi interaktivni vmesniki.

Izziv GitHub Copilot Agent 🚀

Uporabite način Agent za dokončanje naslednjega izziva:

Opis: Izboljšajte projekt terarija z dodajanjem funkcionalnosti za ponastavitev, ki vrne vse rastline na njihove izvirne pozicije z gladkimi animacijami.

Navodilo: Ustvarite gumb za ponastavitev, ki ob kliku animira vse rastline nazaj na njihove izvirne pozicije v stranskem meniju z uporabo CSS prehodov. Funkcija naj shrani izvirne pozicije ob nalaganju strani in gladko premakne rastline nazaj na te pozicije v 1 sekundi, ko je gumb za ponastavitev pritisnjen.

Več o načinu agent si preberite tukaj.

🚀 Dodatni izziv: Razširite svoje veščine

Pripravljeni, da svoj terarij dvignete na višjo raven? Poskusite implementirati te izboljšave:

Ustvarjalne razširitve:

Dvojni klik na rastlino, da jo premaknete v ospredje (manipulacija z z-index)
Dodajte vizualne povratne informacije, kot je subtilen sijaj ob premikanju miške nad rastlinami
Uvedite meje, da preprečite, da bi rastline bile vlečene izven terarija
Ustvarite funkcijo shranjevanja, ki si zapomni pozicije rastlin z uporabo localStorage
Dodajte zvočne učinke za dviganje in postavljanje rastlin

💡 Priložnost za učenje: Vsak od teh izzivov vas bo naučil novih vidikov manipulacije DOM-a, obdelave dogodkov in oblikovanja uporabniške izkušnje.

Kviz po predavanju

Pregled in samostojno učenje: Poglabljanje razumevanja

Obvladali ste osnove manipulacije DOM-a in zaprtij, vendar je vedno več za raziskati! Tukaj je nekaj poti za širjenje vašega znanja in veščin.

Alternativni pristopi k vlečenju in spuščanju

Uporabili smo dogodke kazalca za največjo prilagodljivost, vendar spletni razvoj ponuja več pristopov:

Pristop	Najboljše za	Vrednost učenja
HTML Drag and Drop API	Nalaganje datotek, formalna območja za vlečenje	Razumevanje zmogljivosti brskalnika
Touch Events	Interakcije specifične za mobilne naprave	Vzorce razvoja, osredotočene na mobilne naprave
CSS lastnosti `transform`	Gladke animacije	Tehnike optimizacije zmogljivosti

Napredne teme manipulacije DOM-a

Naslednji koraki na vaši učni poti:

Delegacija dogodkov: Učinkovito obravnavanje dogodkov za več elementov
Intersection Observer: Zaznavanje, kdaj elementi vstopijo/izstopijo iz vidnega polja
Mutation Observer: Opazovanje sprememb v strukturi DOM-a
Web Components: Ustvarjanje večkrat uporabnih, zaprtih UI elementov
Koncepti virtualnega DOM-a: Razumevanje, kako ogrodja optimizirajo posodobitve DOM-a

Ključni viri za nadaljnje učenje

Tehnična dokumentacija:

MDN Pointer Events Guide - Celovit referenčni vodnik za dogodke kazalca
W3C Pointer Events Specification - Uradna dokumentacija standardov
JavaScript Closures Deep Dive - Napredni vzorci zaprtij

Združljivost brskalnikov:

CanIUse.com - Preverite podporo funkcij med brskalniki
MDN Browser Compatibility Data - Podrobne informacije o združljivosti

Priložnosti za prakso:

Ustvarite igro sestavljanke z uporabo podobne mehanike vlečenja
Ustvarite kanban desko z upravljanjem nalog z vlečenjem in spuščanjem
Oblikujte galerijo slik z razporejanjem fotografij z vlečenjem
Eksperimentirajte z gestami na dotik za mobilne vmesnike

🎯 Strategija učenja: Najboljši način za utrditev teh konceptov je praksa. Poskusite zgraditi različice vmesnikov za vlečenje – vsak projekt vas bo naučil nekaj novega o interakciji uporabnika in manipulaciji DOM-a.

Naloga

Delajte še malo z DOM-om

Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitne nesporazume ali napačne razlage, ki izhajajo iz uporabe tega prevoda.

README.md Unescape Escape