softchris
04881ec984
|
10 months ago | |
|---|---|---|
| .. | ||
| README.md | 10 months ago | |
| assignment.md | 12 months ago | |
README.md
टेरारियम प्रकल्प भाग ३: DOM मॅनिप्युलेशन आणि क्लोजर
स्केच नोट Tomomi Imura यांनी तयार केले आहे
प्री-लेक्चर क्विझ
परिचय
DOM, म्हणजेच "डॉक्युमेंट ऑब्जेक्ट मॉडेल" चे मॅनिप्युलेशन करणे वेब विकासाचा एक महत्त्वाचा भाग आहे. MDN च्या मते, "डॉक्युमेंट ऑब्जेक्ट मॉडेल (DOM) ही वेबवरील डॉक्युमेंटची रचना आणि सामग्री बनवणाऱ्या ऑब्जेक्ट्सची डेटा प्रतिनिधित्व आहे." वेबवरील DOM मॅनिप्युलेशनशी संबंधित आव्हाने अनेकदा जावास्क्रिप्ट फ्रेमवर्क्स वापरण्याचे कारण बनले आहेत, परंतु आम्ही स्वतःच व्यवस्थापन करू!
याशिवाय, या धड्यात जावास्क्रिप्ट क्लोजर ची कल्पना सादर केली जाईल, ज्याला तुम्ही एका फंक्शनने दुसऱ्या फंक्शनला बंदिस्त केले आहे असे समजू शकता, ज्यामुळे आतील फंक्शनला बाहेरील फंक्शनच्या स्कोपमध्ये प्रवेश मिळतो.
जावास्क्रिप्ट क्लोजर हा एक विस्तृत आणि गुंतागुंतीचा विषय आहे. या धड्यात टेरारियमच्या कोडमध्ये तुम्हाला एक क्लोजर सापडेल: एक आतील फंक्शन आणि एक बाहेरील फंक्शन अशा प्रकारे तयार केले गेले आहे की आतील फंक्शनला बाहेरील फंक्शनच्या स्कोपमध्ये प्रवेश मिळतो. हे कसे कार्य करते याबद्दल अधिक माहितीसाठी कृपया सविस्तर दस्तऐवज भेट द्या.
आम्ही DOM मॅनिप्युलेट करण्यासाठी क्लोजर वापरू.
DOM ला एक झाड म्हणून विचार करा, जे वेब पृष्ठ डॉक्युमेंटला मॅनिप्युलेट करण्याच्या सर्व प्रकारांचे प्रतिनिधित्व करते. विविध API (अॅप्लिकेशन प्रोग्राम इंटरफेस) लिहिले गेले आहेत जेणेकरून प्रोग्रामर त्यांच्या पसंतीच्या प्रोग्रामिंग भाषेचा वापर करून DOM मध्ये प्रवेश करू शकतील आणि संपादित करू शकतील, बदल करू शकतील, पुनर्रचना करू शकतील आणि अन्यथा व्यवस्थापित करू शकतील.
DOM आणि त्याचा संदर्भ देणाऱ्या HTML मार्कअपचे प्रतिनिधित्व. Olfa Nasraoui कडून
या धड्यात, आम्ही आमचा परस्पर टेरारियम प्रकल्प पूर्ण करू, ज्यामध्ये वापरकर्त्याला पृष्ठावरील झाडे मॅनिप्युलेट करण्यासाठी जावास्क्रिप्ट तयार करायची आहे.
पूर्वतयारी
तुमच्याकडे तुमच्या टेरारियमसाठी HTML आणि CSS तयार असले पाहिजे. या धड्याच्या शेवटी तुम्ही झाडांना टेरारियममध्ये हलवू आणि बाहेर काढू शकाल.
कार्य
तुमच्या टेरारियम फोल्डरमध्ये, script.js नावाची नवीन फाइल तयार करा. ती फाइल <head> विभागात इम्पोर्ट करा:
<script src="./script.js" defer></script>
टीप: HTML फाइल पूर्णपणे लोड झाल्यानंतरच जावास्क्रिप्ट कार्यान्वित होऊ देण्यासाठी HTML फाइलमध्ये बाह्य जावास्क्रिप्ट फाइल इम्पोर्ट करताना
deferवापरा. तुम्हीasyncअॅट्रिब्यूट देखील वापरू शकता, ज्यामुळे HTML फाइल पार्स करत असताना स्क्रिप्ट कार्यान्वित होऊ शकते, परंतु आमच्या बाबतीत, HTML घटक पूर्णपणे उपलब्ध असणे महत्त्वाचे आहे जेणेकरून ड्रॅग स्क्रिप्ट कार्यान्वित होण्यापूर्वी ड्रॅगिंगसाठी तयार असावे.
DOM घटक
तुम्हाला प्रथम जे करायचे आहे ते म्हणजे तुम्हाला DOM मध्ये मॅनिप्युलेट करायचे असलेल्या घटकांचे संदर्भ तयार करणे. आमच्या बाबतीत, ते साइड बारमध्ये सध्या प्रतीक्षेत असलेली १४ झाडे आहेत.
कार्य
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'));
इथे काय चालले आहे? तुम्ही डॉक्युमेंटचा संदर्भ घेत आहात आणि त्याच्या DOM मध्ये विशिष्ट Id असलेला घटक शोधत आहात. HTML च्या पहिल्या धड्यात तुम्ही प्रत्येक झाडाच्या प्रतिमेला वैयक्तिक Id दिले होते (id="plant1")? आता तुम्ही त्या प्रयत्नाचा उपयोग कराल. प्रत्येक घटक ओळखल्यानंतर, तुम्ही त्या आयटमला dragElement नावाच्या फंक्शनमध्ये पास करता, जे तुम्ही थोड्याच वेळात तयार कराल. त्यामुळे HTML मधील घटक आता ड्रॅग-एनेबल्ड होतो, किंवा लवकरच होईल.
✅ आपण Id ने घटकांचा संदर्भ का घेतो? CSS क्लासने का नाही? या प्रश्नाचे उत्तर देण्यासाठी तुम्ही CSS वरील मागील धडाचा संदर्भ घेऊ शकता.
क्लोजर
आता तुम्ही dragElement क्लोजर तयार करण्यासाठी तयार आहात, जे एक बाह्य फंक्शन आहे जे आतील फंक्शन किंवा फंक्शनला बंदिस्त करते (आमच्या बाबतीत, तीन फंक्शन असतील).
क्लोजर उपयुक्त असतात जेव्हा एक किंवा अधिक फंक्शनला बाह्य फंक्शनच्या स्कोपमध्ये प्रवेश करणे आवश्यक असते. येथे एक उदाहरण आहे:
function displayCandy(){
let candy = ['jellybeans'];
function addCandy(candyType) {
candy.push(candyType)
}
addCandy('gumdrops');
}
displayCandy();
console.log(candy)
या उदाहरणात, displayCandy फंक्शन एका फंक्शनला बंदिस्त करते जे आधीपासून फंक्शनमध्ये असलेल्या ऍरेमध्ये नवीन कँडी प्रकार पुश करते. जर तुम्ही हा कोड चालवला तर candy ऍरे अनिर्दिष्ट असेल, कारण ते एक स्थानिक व्हेरिएबल आहे (क्लोजरच्या स्थानिक स्कोपसाठी स्थानिक).
✅ तुम्ही candy ऍरे कसे उपलब्ध करू शकता? ते क्लोजरच्या बाहेर हलवून पहा. अशा प्रकारे, ऍरे स्थानिक राहण्याऐवजी जागतिक बनते.
कार्य
script.js मध्ये घटक घोषणांखाली एक फंक्शन तयार करा:
function dragElement(terrariumElement) {
//set 4 positions for positioning on the screen
let pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
terrariumElement.onpointerdown = pointerDrag;
}
dragElement त्याचे terrariumElement ऑब्जेक्ट स्क्रिप्टच्या शीर्षस्थानी असलेल्या घोषणांमधून मिळवते. नंतर, तुम्ही फंक्शनमध्ये पास केलेल्या ऑब्जेक्टसाठी काही स्थानिक पोझिशन्स 0 वर सेट करता. हे स्थानिक व्हेरिएबल्स आहेत जे प्रत्येक घटकासाठी मॅनिप्युलेट केले जातील कारण तुम्ही प्रत्येक घटकात ड्रॅग आणि ड्रॉप फंक्शनॅलिटी क्लोजरमध्ये जोडता. टेरारियम या ड्रॅग केलेल्या घटकांनी भरले जाईल, त्यामुळे अॅप्लिकेशनला त्यांची जागा कुठे ठेवली आहे याचा मागोवा ठेवणे आवश्यक आहे.
याशिवाय, या फंक्शनला पास केलेल्या terrariumElement ला pointerdown इव्हेंट असाइन केले जाते, जे वेब API चा भाग आहे जो DOM व्यवस्थापनासाठी मदत करण्यासाठी डिझाइन केलेला आहे. onpointerdown बटण दाबले जाते तेव्हा फायर होते, किंवा आमच्या बाबतीत, ड्रॅग करण्यायोग्य घटकाला स्पर्श केला जातो. हा इव्हेंट हँडलर वेब आणि मोबाइल ब्राउझर वर कार्य करतो, काही अपवादांसह.
✅ इव्हेंट हँडलर onclick ला क्रॉस-ब्राउझर अधिक समर्थन आहे; तुम्ही ते इथे का वापरत नाही? तुम्ही इथे तयार करण्याचा प्रयत्न करत असलेल्या स्क्रीन इंटरॅक्शनच्या अचूक प्रकाराबद्दल विचार करा.
पॉइंटरड्रॅग फंक्शन
terrariumElement आता इथे-तिथे ड्रॅग करण्यासाठी तयार आहे; जेव्हा onpointerdown इव्हेंट फायर होतो, तेव्हा pointerDrag फंक्शनला कॉल केले जाते. हा फंक्शन या ओळीखाली जोडा: terrariumElement.onpointerdown = pointerDrag;:
कार्य
function pointerDrag(e) {
e.preventDefault();
console.log(e);
pos3 = e.clientX;
pos4 = e.clientY;
}
काही गोष्टी घडतात. प्रथम, तुम्ही e.preventDefault(); वापरून pointerdown वर सामान्यतः घडणाऱ्या डिफॉल्ट इव्हेंट्सला होण्यापासून रोखता. अशा प्रकारे तुम्हाला इंटरफेसच्या वर्तनावर अधिक नियंत्रण मिळते.
जेव्हा तुम्ही स्क्रिप्ट फाइल पूर्णपणे तयार केली असेल तेव्हा या ओळीवर परत या आणि
e.preventDefault()शिवाय प्रयत्न करा - काय होते?
दुसरे, index.html ब्राउझर विंडोमध्ये उघडा आणि इंटरफेस तपासा. जेव्हा तुम्ही झाडावर क्लिक करता, तेव्हा तुम्ही 'e' इव्हेंट कसा कॅप्चर केला जातो ते पाहू शकता. इव्हेंटमध्ये किती माहिती एकत्र केली जाते ते पाहण्यासाठी इव्हेंटमध्ये खोलवर जा!
त्यानंतर, स्थानिक व्हेरिएबल्स pos3 आणि pos4 e.clientX वर सेट केल्या जातात. तुम्ही निरीक्षण पॅनमध्ये e मूल्ये शोधू शकता. ही मूल्ये तुम्ही त्यावर क्लिक करता किंवा स्पर्श करता तेव्हा झाडाच्या x आणि y कोऑर्डिनेट्स कॅप्चर करतात. तुम्हाला झाडांच्या वर्तनावर सूक्ष्म नियंत्रण आवश्यक आहे कारण तुम्ही त्यांना क्लिक आणि ड्रॅग करता, त्यामुळे तुम्ही त्यांच्या कोऑर्डिनेट्सचा मागोवा ठेवता.
✅ हे अधिक स्पष्ट होत आहे का की संपूर्ण अॅप एका मोठ्या क्लोजरने का तयार केले आहे? जर तसे नसते, तर तुम्ही १४ ड्रॅग करण्यायोग्य झाडांपैकी प्रत्येकासाठी स्कोप कसा राखला असता?
प्रारंभिक फंक्शन पूर्ण करण्यासाठी pos4 = e.clientY च्या खाली आणखी दोन पॉइंटर इव्हेंट मॅनिप्युलेशन्स जोडा:
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;
आता तुम्ही झाडाला पॉइंटरसह हलवू इच्छिता आणि तुम्ही झाड निवडणे थांबवल्यावर ड्रॅगिंग जेस्चर थांबवू इच्छिता. onpointermove आणि onpointerup हे सर्व समान API चा भाग आहेत जसे की onpointerdown. इंटरफेस आता त्रुटी फेकतो कारण तुम्ही अद्याप elementDrag आणि stopElementDrag फंक्शन परिभाषित केले नाही, त्यामुळे पुढे ते तयार करा.
elementDrag आणि stopElementDrag फंक्शन
तुम्ही दोन अंतर्गत फंक्शन जोडून तुमचे क्लोजर पूर्ण कराल जे तुम्ही झाड ड्रॅग करता तेव्हा आणि ते ड्रॅग करणे थांबवता तेव्हा काय होते ते हाताळतील. तुम्हाला हवे असलेले वर्तन म्हणजे तुम्ही कोणतेही झाड कधीही ड्रॅग करू शकता आणि ते स्क्रीनवर कुठेही ठेवू शकता. हा इंटरफेस खूप अन-ओपिनियन आहे (उदाहरणार्थ, येथे ड्रॉप झोन नाही) जेणेकरून तुम्ही तुमच्या टेरारियमला तुमच्या आवडीनुसार डिझाइन करू शकता, झाडे जोडून, काढून टाकून आणि पुन्हा स्थानांतरित करून.
कार्य
pointerDrag च्या बंद करणाऱ्या कर्ली ब्रॅकेटच्या खाली elementDrag फंक्शन जोडा:
function elementDrag(e) {
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
console.log(pos1, pos2, pos3, pos4);
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
}
या फंक्शनमध्ये, तुम्ही बाह्य फंक्शनमध्ये स्थानिक व्हेरिएबल्स 1-4 च्या सुरुवातीच्या पोझिशन्सचे बरेच संपादन करता. इथे काय चालले आहे?
तुम्ही ड्रॅग करता तेव्हा, तुम्ही pos1 ला पुन्हा असाइन करता, ज्यामुळे ते pos3 (जे तुम्ही पूर्वी e.clientX म्हणून सेट केले होते) सध्याच्या e.clientX मूल्याच्या बरोबरीने होते. तुम्ही pos2 वर समान ऑपरेशन करता. नंतर, तुम्ही घटकाच्या नवीन X आणि Y कोऑर्डिनेट्ससाठी pos3 आणि pos4 रीसेट करता. तुम्ही ड्रॅग करत असताना कन्सोलमध्ये हे बदल पाहू शकता. नंतर, तुम्ही झाडाच्या css शैलीत फेरफार करता जेणेकरून त्याच्या ऑफसेटशी तुलना करून त्याच्या टॉप आणि लेफ्ट X आणि Y कोऑर्डिनेट्सच्या नवीन पोझिशन्सवर आधारित त्याचे नवीन स्थान सेट केले जाईल.
offsetTopआणिoffsetLeftहे CSS गुणधर्म आहेत जे त्याच्या पालकाच्या स्थानावर आधारित घटकाचे स्थान सेट करतात; त्याचा पालक कोणताही घटक असू शकतो जोstaticम्हणून स्थित नाही.
पोझिशनिंगची ही सर्व पुनर्गणना तुम्हाला टेरारियम आणि त्याच्या झाडांच्या वर्तनावर सूक्ष्म ट्यूनिंग करण्यास अनुमती देते.
कार्य
इंटरफेस पूर्ण करण्याचे अंतिम कार्य म्हणजे elementDrag च्या बंद करणाऱ्या कर्ली ब्रॅकेटनंतर stopElementDrag फंक्शन जोडणे:
function stopElementDrag() {
document.onpointerup = null;
document.onpointermove = null;
}
हे छोटे फंक्शन onpointerup आणि onpointermove इव्हेंट्स रीसेट करते जेणेकरून तुम्ही तुमच्या झाडाच्या प्रगतीला पुन्हा सुरू करू शकता किंवा नवीन झाड ड्रॅग करण्यास सुरुवात करू शकता.
✅ तुम्ही हे इव्हेंट्स null वर सेट केले नाहीत तर काय होते?
आता तुम्ही तुमचा प्रकल्प पूर्ण केला आहे!
🥇 अभिनंदन! तुम्ही तुमचा सुंदर टेरारियम पूर्ण केला आहे. 
GitHub Copilot Agent Challenge 🚀
Agent मोड वापरून खालील आव्हान पूर्ण करा:
वर्णन: टेरारियम प्रकल्पात एक रीसेट फंक्शनॅलिटी जोडा जी सर्व झाडांना त्यांच्या मूळ स्थानावर गुळगुळीत अॅनिमेशनसह परत आणते.
प्रॉम्प्ट: एक रीसेट बटण तयार करा जे क्लिक केल्यावर सर्व झाडांना त्यांच्या मूळ साइडबार स्थानावर CSS ट्रान्झिशन्स वापरून १ सेकंदात गुळगुळीतपणे परत आणते. फंक्शनने पृष्ठ लोड झाल्यावर मूळ स्थान साठवावे आणि रीसेट बटण दाबल्यावर त्या स्थानावर झाडांना गुळगुळीतपणे परत आणावे.
🚀Challenge
तुमच्या क्लोजरमध्ये नवीन इव्हेंट हँडलर जोडा जे झाडांवर काहीतरी अधिक करेल; उदाहरणार्थ, झाडावर डबल-क्लिक करा आणि ते पुढे आणा. सर्जनशील व्हा!
पोस्ट-लेक्चर क्विझ
पुनरावलोकन आणि स्व-अभ्यास
स्क्रीनवर घटक ड्रॅग करणे सामान्य वाटत असले तरी, हे करण्याचे अनेक मार्ग आहेत आणि तुम्ही शोधत असलेल्या परिणामावर अवलंबून अनेक अडचणी आहेत. खरं तर, एक संपूर्ण ड्रॅग आणि ड्रॉप API आहे ज्याचा तुम्ही प्रयत्न करू शकता. आम्ही या मॉड्यूलमध्ये ते वापरले नाही कारण आम्हाला हवा असलेला परिणाम थोडा वेगळा होता, परंतु स्वतःच्या प्रकल्पावर या API चा प्रयत्न करा आणि तुम्ही काय साध्य करू शकता ते पहा.
पॉइंटर इव्हेंट्सबद्दल अधिक माहिती W3C दस्तऐवज आणि MDN वेब दस्तऐवज वर शोधा.
नेहमी ब्राउझर क्षमता CanIUse.com वापरून तपासा.
असाइनमेंट
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.