25 KiB

Raw Blame History Unescape Escape

Mradi wa Terrarium Sehemu ya 3: Udhibiti wa DOM na JavaScript Closures

Sketchnote na Tomomi Imura

Karibu kwenye mojawapo ya vipengele vya kuvutia zaidi vya ukuzaji wa wavuti - kufanya mambo yawe ya kuingiliana! Document Object Model (DOM) ni kama daraja kati ya HTML yako na JavaScript, na leo tutaitumia kuleta terrarium yako hai. Wakati Tim Berners-Lee alipoanzisha kivinjari cha kwanza cha wavuti, aliona wavuti ambapo hati zinaweza kuwa za nguvu na za kuingiliana - DOM inafanya maono hayo yawezekane.

Pia tutachunguza closures za JavaScript, ambazo zinaweza kuonekana kuwa ngumu mwanzoni. Fikiria closures kama kuunda "kifuko cha kumbukumbu" ambapo kazi zako zinaweza kukumbuka taarifa muhimu. Ni kama kila mmea katika terrarium yako kuwa na rekodi yake ya data kufuatilia nafasi yake. Mwishoni mwa somo hili, utaelewa jinsi zilivyo za asili na muhimu.

Hiki ndicho tunachojenga: terrarium ambapo watumiaji wanaweza kuburuta na kuacha mimea popote wanapotaka. Utajifunza mbinu za udhibiti wa DOM zinazowezesha kila kitu kutoka kwa kupakia faili kwa kuburuta na kuacha hadi michezo ya kuingiliana. Hebu tufanye terrarium yako iwe hai.

Maswali ya Awali ya Somo

Maswali ya awali ya somo

Kuelewa DOM: Njia Yako ya Kurasa za Wavuti Zinazoshirikiana

Document Object Model (DOM) ni jinsi JavaScript inavyowasiliana na vipengele vya HTML yako. Wakati kivinjari chako kinapakia ukurasa wa HTML, kinaunda uwakilishi uliopangwa wa ukurasa huo kwenye kumbukumbu - hiyo ndiyo DOM. Fikiria kama mti wa familia ambapo kila kipengele cha HTML ni mwanachama wa familia ambaye JavaScript inaweza kufikia, kurekebisha, au kupanga upya.

Udhibiti wa DOM hubadilisha kurasa tuli kuwa tovuti za kuingiliana. Kila wakati unapokiona kitufe kinabadilika rangi unapokielekeza, maudhui yanavyosasishwa bila upakiaji wa ukurasa, au vipengele unavyoweza kuviburuta, hiyo ni kazi ya udhibiti wa DOM.

Uwakilishi wa DOM na markup ya HTML inayorejelea. Kutoka kwa Olfa Nasraoui

Hiki ndicho kinachofanya DOM kuwa na nguvu:

Hutoa njia iliyopangwa ya kufikia kipengele chochote kwenye ukurasa wako
Inawezesha masasisho ya maudhui ya nguvu bila upakiaji wa ukurasa
Inaruhusu majibu ya papo hapo kwa mwingiliano wa mtumiaji kama kubofya na kuburuta
Inaunda msingi wa programu za wavuti za kisasa zinazoshirikiana

JavaScript Closures: Kuunda Nambari Iliyoandaliwa na Yenye Nguvu

Closure za JavaScript ni kama kutoa kazi nafasi yake ya kibinafsi na kumbukumbu ya kudumu. Fikiria jinsi vichochoro vya Darwin kwenye Visiwa vya Galápagos vilivyotengeneza midomo maalum kulingana na mazingira yao maalum - closures hufanya kazi kwa njia sawa, kuunda kazi maalum zinazokumbuka muktadha wao maalum hata baada ya kazi ya mzazi kumaliza.

Katika terrarium yetu, closures husaidia kila mmea kukumbuka nafasi yake kwa uhuru. Muundo huu unajitokeza katika ukuzaji wa JavaScript wa kitaalamu, na kuufanya kuwa dhana muhimu ya kuelewa.

💡 Kuelewa Closures: Closures ni mada muhimu katika JavaScript, na watengenezaji wengi huzitumia kwa miaka kabla ya kuelewa kikamilifu vipengele vyote vya kinadharia. Leo, tunazingatia matumizi ya vitendo - utaona closures zikijitokeza kwa kawaida tunapojenga vipengele vyetu vya kuingiliana. Uelewa utaendelea kukuwa unapoona jinsi zinavyotatua matatizo halisi.

Uwakilishi wa DOM na markup ya HTML inayorejelea. Kutoka kwa Olfa Nasraoui

Katika somo hili, tutakamilisha mradi wetu wa terrarium wa kuingiliana kwa kuunda JavaScript itakayomruhusu mtumiaji kudhibiti mimea kwenye ukurasa.

Kabla ya Kuanza: Kujiandaa kwa Mafanikio

Utahitaji faili zako za HTML na CSS kutoka masomo ya awali ya terrarium - tunakaribia kufanya muundo huo tuli uwe wa kuingiliana. Ikiwa unajiunga kwa mara ya kwanza, kukamilisha masomo hayo kwanza kutatoa muktadha muhimu.

Hiki ndicho tutakachojenga:

Kuburuta na kuacha kwa urahisi kwa mimea yote ya terrarium
Ufuatiliaji wa kuratibu ili mimea ikumbuke nafasi zake
Kiolesura kamili cha kuingiliana kwa kutumia JavaScript ya kawaida
Nambari safi na iliyopangwa kwa kutumia mifumo ya closures

Kuunda Faili Yako ya JavaScript

Hebu tuunde faili ya JavaScript itakayofanya terrarium yako iwe ya kuingiliana.

Hatua ya 1: Unda faili yako ya script

Katika folda yako ya terrarium, unda faili mpya inayoitwa script.js.

Hatua ya 2: Unganisha JavaScript na HTML yako

Ongeza tagi hii ya script kwenye sehemu ya <head> ya faili yako ya index.html:

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

Kwa nini sifa ya defer ni muhimu:

Inahakikisha JavaScript yako inasubiri hadi HTML yote ipakie
Inazuia makosa ambapo JavaScript inatafuta vipengele ambavyo havijawa tayari
Inahakikisha vipengele vyote vya mmea wako vinapatikana kwa mwingiliano
Inatoa utendaji bora kuliko kuweka script mwishoni mwa ukurasa

⚠️ Kumbuka Muhimu: Sifa ya defer inazuia masuala ya muda ya kawaida. Bila hiyo, JavaScript inaweza kujaribu kufikia vipengele vya HTML kabla havijapakiwa, na kusababisha makosa.

Kuunganisha JavaScript na Vipengele Vyako vya HTML

Kabla ya kufanya vipengele viweze kuburuta, JavaScript inahitaji kuvipata kwenye DOM. Fikiria hii kama mfumo wa katalogi ya maktaba - mara tu unapokuwa na namba ya katalogi, unaweza kupata kitabu unachohitaji na kufikia maudhui yake yote.

Tutatumia njia ya document.getElementById() kufanya miunganisho hii. Ni kama kuwa na mfumo wa kufaili sahihi - unatoa ID, na inapata kipengele halisi unachohitaji katika HTML yako.

Kuwezesha Utendaji wa Kuburuta kwa Mimea Yote

Ongeza nambari hii kwenye faili yako ya 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'));

Hiki ndicho nambari hii inakamilisha:

Inapata kila kipengele cha mmea kwenye DOM kwa kutumia ID yake ya kipekee
Inachukua rejeleo la JavaScript kwa kila kipengele cha HTML
Inapitia kila kipengele kwa kazi ya dragElement (ambayo tutaunda baadaye)
Inatayarisha kila mmea kwa mwingiliano wa kuburuta na kuacha
Inaunganisha muundo wako wa HTML na utendaji wa JavaScript

🎯 Kwa nini Utumie IDs Badala ya Classes? IDs hutoa vitambulisho vya kipekee kwa vipengele maalum, wakati darasa za CSS zimetengenezwa kwa ajili ya kuunda mitindo ya vikundi vya vipengele. Wakati JavaScript inahitaji kudhibiti vipengele vya mtu binafsi, IDs hutoa usahihi na utendaji tunaohitaji.

💡 Ushauri wa Kitaalamu: Angalia jinsi tunavyopiga dragElement() kwa kila mmea mmoja mmoja. Njia hii inahakikisha kwamba kila mmea unapata tabia yake ya kuburuta kwa uhuru, ambayo ni muhimu kwa mwingiliano laini wa mtumiaji.

Kuunda Closure ya Drag Element

Sasa tutaunda moyo wa utendaji wa kuburuta: closure inayosimamia tabia ya kuburuta kwa kila mmea. Closure hii itakuwa na kazi nyingi za ndani zinazofanya kazi pamoja kufuatilia harakati za panya na kusasisha nafasi za vipengele.

Closures ni kamili kwa kazi hii kwa sababu zinaturuhusu kuunda vigezo "binafsi" vinavyodumu kati ya miito ya kazi, na kutoa kila mmea mfumo wake wa kufuatilia kuratibu kwa uhuru.

Kuelewa Closures kwa Mfano Rahisi

Hebu nikuonyeshe closures kwa mfano rahisi unaoonyesha dhana:

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

Hiki ndicho kinachotokea katika muundo wa closure:

Inaunda kigezo cha kibinafsi count ambacho kinapatikana tu ndani ya closure hii
Kazi ya ndani inaweza kufikia na kurekebisha kigezo hicho cha nje (mfumo wa closure)
Tunaporejesha kazi ya ndani, inahifadhi muunganisho wake na data hiyo ya kibinafsi
Hata baada ya createCounter() kumaliza utekelezaji, count inadumu na kukumbuka thamani yake

Kwa Nini Closures Zinafaa kwa Utendaji wa Kuburuta

Kwa terrarium yetu, kila mmea unahitaji kukumbuka kuratibu zake za sasa. Closures hutoa suluhisho kamili:

Faida kuu kwa mradi wetu:

Inadumisha vigezo vya nafasi binafsi kwa kila mmea kwa uhuru
Inahifadhi data ya kuratibu kati ya matukio ya kuburuta
Inazuia migogoro ya vigezo kati ya vipengele tofauti vinavyoweza kuburuta
Inaunda muundo safi na uliopangwa wa nambari

🎯 Lengo la Kujifunza: Huna haja ya kufahamu kila kipengele cha closures sasa hivi. Lenga kuona jinsi zinavyosaidia kuandaa nambari na kudumisha hali kwa utendaji wetu wa kuburuta.

Kuunda Kazi ya dragElement

Sasa hebu tujenge kazi kuu itakayoshughulikia mantiki yote ya kuburuta. Ongeza kazi hii chini ya maelezo ya vipengele vya mmea:

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;
}

Kuelewa mfumo wa kufuatilia nafasi:

pos1 na pos2: Huhifadhi tofauti kati ya nafasi za zamani na mpya za panya
pos3 na pos4: Hufuatilia kuratibu za sasa za panya
terrariumElement: Kipengele maalum cha mmea tunachokifanya kiweze kuburuta
onpointerdown: Tukio linalochochewa mtumiaji anapoanza kuburuta

Hivi ndivyo muundo wa closure unavyofanya kazi:

Inaunda vigezo vya nafasi binafsi kwa kila kipengele cha mmea
Inadumisha vigezo hivi katika mzunguko wa maisha ya kuburuta
Inahakikisha kila mmea unafuatilia kuratibu zake kwa uhuru
Inatoa kiolesura safi kupitia kazi ya dragElement

Kwa Nini Utumie Pointer Events?

Unaweza kujiuliza kwa nini tunatumia onpointerdown badala ya onclick inayojulikana zaidi. Hii ndiyo sababu:

Aina ya Tukio	Bora Kwa	Changamoto
`onclick`	Kubofya rahisi kwa kitufe	Haiwezi kushughulikia kuburuta (bofya na kuachilia tu)
`onpointerdown`	Panya na kugusa	Mpya, lakini inasaidiwa vizuri siku hizi
`onmousedown`	Panya ya desktop pekee	Inawaacha watumiaji wa simu

Kwa nini pointer events ni kamili kwa tunachojenga:

Inafanya kazi vizuri ikiwa mtu anatumia panya, kidole, au hata kalamu
Inahisi sawa kwenye kompyuta ndogo, kompyuta kibao, au simu
Inashughulikia harakati halisi ya kuburuta (sio tu kubofya na kumaliza)
Inaunda uzoefu laini ambao watumiaji wanatarajia kutoka kwa programu za wavuti za kisasa

💡 Kujiandaa kwa Baadaye: Pointer events ni njia ya kisasa ya kushughulikia mwingiliano wa mtumiaji. Badala ya kuandika nambari tofauti kwa panya na kugusa, unapata zote bila malipo. Nzuri, sivyo?

Kazi ya pointerDrag: Kukamata Mwanzo wa Kuburuta

Mtumiaji anapobonyeza mmea (iwe kwa kubofya panya au kugusa kidole), kazi ya pointerDrag inachukua hatua. Kazi hii inakamata kuratibu za awali na kuanzisha mfumo wa kuburuta.

Ongeza kazi hii ndani ya closure ya dragElement, mara tu baada ya mstari 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;
}

Hatua kwa hatua, hiki ndicho kinachotokea:

Inazuia tabia za kivinjari za kawaida ambazo zinaweza kuingilia kuburuta
Inarekodi kuratibu halisi ambapo mtumiaji alianza ishara ya kuburuta
Inaanzisha wasikilizaji wa matukio kwa harakati inayoendelea ya kuburuta
Inatayarisha mfumo kufuatilia harakati za panya/kidole kwenye hati nzima

Kuelewa Kuzuia Tukio

Mstari wa e.preventDefault() ni muhimu kwa kuburuta laini:

Bila kuzuia, vivinjari vinaweza:

Kuchagua maandishi wakati wa kuburuta kwenye ukurasa
Kuchochea menyu za muktadha kwa kuburuta kwa kubofya kulia
Kuathiri tabia yetu ya kuburuta maalum
Kuunda athari za kuona wakati wa operesheni ya kuburuta

🔍 Jaribu: Baada ya kukamilisha somo hili, jaribu kuondoa e.preventDefault() na uone jinsi inavyoathiri uzoefu wa kuburuta. Utaelewa haraka kwa nini mstari huu ni muhimu!

Mfumo wa Kufuatilia Kuratibu

Sifa za e.clientX na e.clientY zinatupa kuratibu sahihi za panya/kugusa:

Sifa	Inapima Nini	Matumizi
`clientX`	Nafasi ya usawa kulingana na viewport	Kufuatilia harakati za kushoto-kulia
`clientY`	Nafasi ya wima kulingana na viewport	Kufuatilia harakati za juu-chini

Kuelewa kuratibu hizi:

Inatoa taarifa ya nafasi sahihi ya pikseli
Inasasisha kwa wakati halisi mtumiaji anapohamisha pointer
Inadumu thabiti kwenye saizi tofauti za skrini na viwango vya kukuza
Inawezesha mwingiliano laini wa kuburuta

Kuanzisha Wasikilizaji wa Matukio ya Kiwango cha Hati

Angalia jinsi tunavyounganisha matukio ya harakati na kusimamisha kwenye hati nzima, sio tu kipengele cha mmea:

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

Kwa nini kuunganisha kwenye hati:

Inaendelea kufuatilia hata panya inapohama kutoka kipengele cha mmea
Inazuia usumbufu wa kuburuta ikiwa mtumiaji anahama haraka
Inatoa kuburuta laini kwenye skrini nzima
Inashughulikia hali za ukingo ambapo pointer inahama nje ya dirisha la kivinjari

⚡ Kumbuka Utendaji: Tutasafisha wasikilizaji hawa wa kiwango cha hati wakati kuburuta kunasimama ili kuepuka uvujaji wa kumbukumbu na masuala ya utendaji.

Kukamilisha Mfumo wa Kuburuta: Harakati na Usafishaji

Sasa tutaongeza kazi mbili zilizobaki zinazoshughulikia harakati halisi ya kuburuta na usafishaji wakati kuburuta kunasimama. Kazi hizi hufanya kazi pamoja kuunda harakati laini na msikivu wa mmea kwenye terrarium yako.

Kazi ya elementDrag: Kufuatilia Harakati

Ongeza kazi ya elementDrag mara tu baada ya mabano ya kufunga ya 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';
}

Kuelewa hesabu za kuratibu:

pos3 na pos4: Hifadhi nafasi ya sasa ya panya kwa hesabu inayofuata
offsetTop na offsetLeft: Pata nafasi ya sasa ya kipengele kwenye ukurasa
Mantiki ya kutoa: Husogeza kipengele kwa kiasi sawa na panya ilivyohama

Hii ndiyo muhtasari wa hesabu ya kusogeza:

Inapima tofauti kati ya nafasi ya zamani na mpya ya panya
Inahesabu kiasi cha kusogeza kipengele kulingana na harakati za panya
Inasasisha mali za nafasi za CSS za kipengele kwa wakati halisi
Inahifadhi nafasi mpya kama msingi wa hesabu ya harakati inayofuata

Uwakilishi wa Kielelezo wa Hesabu

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

Kazi ya stopElementDrag: Kusafisha

Ongeza kazi ya kusafisha baada ya mabano ya kufunga ya elementDrag:

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

Kwa nini kusafisha ni muhimu:

Huzuia uvujaji wa kumbukumbu kutoka kwa wasikilizaji wa matukio yanayobaki
Husimamisha tabia ya kuvuta wakati mtumiaji anaachilia mmea
Inaruhusu vipengele vingine kuvutwa kwa uhuru
Inarudisha mfumo kwa operesheni inayofuata ya kuvuta

Kinachotokea bila kusafisha:

Wasikilizaji wa matukio huendelea kufanya kazi hata baada ya kuvuta kusimamishwa
Utendaji unashuka kadri wasikilizaji wasiotumika wanavyokusanyika
Tabia isiyotarajiwa wakati wa kuingiliana na vipengele vingine
Rasilimali za kivinjari zinapotea kwa kushughulikia matukio yasiyo ya lazima

Kuelewa Mali za Nafasi za CSS

Mfumo wetu wa kuvuta unashughulikia mali mbili muhimu za CSS:

Mali	Inachodhibiti	Jinsi Tunavyotumia
`top`	Umbali kutoka ukingo wa juu	Nafasi ya wima wakati wa kuvuta
`left`	Umbali kutoka ukingo wa kushoto	Nafasi ya mlalo wakati wa kuvuta

Maarifa muhimu kuhusu mali za offset:

offsetTop: Umbali wa sasa kutoka juu ya mzazi aliyewekwa nafasi
offsetLeft: Umbali wa sasa kutoka kushoto kwa mzazi aliyewekwa nafasi
Muktadha wa nafasi: Thamani hizi ni za jamaa na babu aliyewekwa nafasi
Sasisho za wakati halisi: Hubadilika mara moja tunapobadilisha mali za CSS

🎯 Falsafa ya Ubunifu: Mfumo huu wa kuvuta umeundwa kuwa rahisi – hakuna "eneo la kuachia" au vizuizi. Watumiaji wanaweza kuweka mimea popote, wakipewa udhibiti kamili wa ubunifu wa muundo wa terrarium yao.

Kuleta Yote Pamoja: Mfumo Wako Kamili wa Kuvuta

Hongera! Umejenga mfumo wa kuvuta na kuachia wa hali ya juu ukitumia JavaScript ya kawaida. Kazi yako kamili ya dragElement sasa ina kufungwa kwa nguvu kunakodhibiti:

Kile kufungwa kwako kunakotimiza:

Inahifadhi vigezo vya nafasi binafsi kwa kila mmea kwa uhuru
Inashughulikia mzunguko kamili wa kuvuta kutoka mwanzo hadi mwisho
Inatoa harakati laini, za kujibu kote kwenye skrini
Inasafisha rasilimali ipasavyo ili kuzuia uvujaji wa kumbukumbu
Inaunda kiolesura cha angavu, cha ubunifu kwa muundo wa terrarium

Kupima Terrarium Yako ya Kuingiliana

Sasa jaribu terrarium yako ya kuingiliana! Fungua faili yako ya index.html kwenye kivinjari cha wavuti na jaribu utendakazi:

Bonyeza na ushikilie mmea wowote kuanza kuvuta
Sogeza panya au kidole chako na tazama mmea ukifuata kwa laini
Achilia ili kuacha mmea katika nafasi yake mpya
Jaribu mipangilio tofauti ili kuchunguza kiolesura

🥇 Mafanikio: Umeunda programu ya wavuti ya kuingiliana kikamilifu ukitumia dhana za msingi ambazo watengenezaji wa kitaalamu hutumia kila siku. Utendakazi huo wa kuvuta na kuachia hutumia kanuni zile zile nyuma ya upakiaji wa faili, bodi za kanban, na kiolesura kingine chochote cha kuingiliana.

Changamoto ya Wakala wa GitHub Copilot 🚀

Tumia hali ya Wakala kukamilisha changamoto ifuatayo:

Maelezo: Boresha mradi wa terrarium kwa kuongeza utendakazi wa kuweka upya unaorudisha mimea yote kwenye nafasi zao za awali kwa uhuishaji laini.

Kichocheo: Unda kitufe cha kuweka upya ambacho, kinapobonyezwa, kinaonyesha mimea yote kurudi kwenye nafasi zao za awali za upande kwa kutumia mabadiliko ya CSS. Kazi inapaswa kuhifadhi nafasi za awali wakati ukurasa unapakiwa na kuhamisha mimea kwa laini kurudi kwenye nafasi hizo kwa sekunde 1 wakati kitufe cha kuweka upya kinapobonyezwa.

Jifunze zaidi kuhusu hali ya wakala hapa.

🚀 Changamoto ya Ziada: Panua Ujuzi Wako

Uko tayari kupeleka terrarium yako kwenye kiwango kingine? Jaribu kutekeleza maboresho haya:

Upanuzi wa Ubunifu:

Bonyeza mara mbili mmea kuleta mbele (manipulasi ya z-index)
Ongeza maoni ya kuona kama mwangaza mdogo wakati wa kupekuza mimea
Tekeleza mipaka ili kuzuia mimea kuvutwa nje ya terrarium
Unda kazi ya kuhifadhi inayokumbuka nafasi za mimea ukitumia localStorage
Ongeza athari za sauti kwa kuchukua na kuweka mimea

💡 Fursa ya Kujifunza: Kila moja ya changamoto hizi itakufundisha vipengele vipya vya manipulasia ya DOM, kushughulikia matukio, na muundo wa uzoefu wa mtumiaji.

Jaribio la Baada ya Somo

Jaribio la baada ya somo

Mapitio na Kujisomea: Kuimarisha Uelewa Wako

Umebobea katika misingi ya manipulasia ya DOM na kufungwa, lakini daima kuna mengi ya kuchunguza! Hapa kuna njia za kupanua maarifa na ujuzi wako.

Njia Mbadala za Kuvuta na Kuachia

Tulitumia matukio ya pointer kwa kubadilika zaidi, lakini maendeleo ya wavuti yanatoa njia nyingi:

Njia	Bora Kwa	Thamani ya Kujifunza
API ya HTML Drag and Drop	Upakiaji wa faili, maeneo rasmi ya kuvuta	Kuelewa uwezo wa kivinjari asilia
Matukio ya Kugusa	Mwingiliano maalum wa simu	Mifumo ya maendeleo ya simu kwanza
Mali za CSS `transform`	Uhuishaji laini	Mbinu za kuboresha utendaji

Mada za Juu za Manipulasia ya DOM

Hatua zinazofuata katika safari yako ya kujifunza:

Uwakilishi wa matukio: Kushughulikia matukio kwa ufanisi kwa vipengele vingi
Mwangalizi wa Mwingiliano: Kugundua wakati vipengele vinaingia/kutoka kwenye mtazamo
Mwangalizi wa Mabadiliko: Kutazama mabadiliko katika muundo wa DOM
Vipengele vya Wavuti: Kuunda vipengele vya UI vinavyoweza kutumika tena, vilivyofungwa
Mafunzo ya DOM ya Kawaida: Kuelewa jinsi fremu zinavyoboresha sasisho za DOM

Rasilimali Muhimu za Kuendelea Kujifunza

Nyaraka za Kiufundi:

Mwongozo wa Matukio ya Pointer wa MDN - Marejeleo ya matukio ya pointer
Maelezo ya Viwango vya Matukio ya Pointer ya W3C - Nyaraka rasmi za viwango
Uchambuzi wa Kina wa JavaScript Closures - Mifumo ya kufungwa ya hali ya juu

Ulinganifu wa Kivinjari:

CanIUse.com - Angalia msaada wa kipengele kwenye vivinjari
Data ya Ulinganifu wa Kivinjari ya MDN - Taarifa ya kina ya ulinganifu

Fursa za Mazoezi:

Jenga mchezo wa fumbo ukitumia mitambo ya kuvuta kama hiyo
Unda bodi ya kanban na usimamizi wa kazi za kuvuta na kuachia
Buni maktaba ya picha na mipangilio ya picha inayovutwa
Jaribu ishara za kugusa kwa kiolesura cha simu

🎯 Mkakati wa Kujifunza: Njia bora ya kuimarisha dhana hizi ni kupitia mazoezi. Jaribu kujenga tofauti za kiolesura cha kuvutwa – kila mradi utakufundisha kitu kipya kuhusu mwingiliano wa mtumiaji na manipulasia ya DOM.

Kazi

Fanya kazi zaidi na DOM

Kanusho:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI Co-op Translator. Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya binadamu inapendekezwa. Hatutawajibika kwa kutoelewana au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.

25 KiB Raw Blame History Unescape Escape