History

softchris 04881ec984 🌐 Update translations via Co-op Translator		2 months ago
..
README.md	🌐 Update translations via Co-op Translator	2 months ago
assignment.md	🌐 Update translations via Co-op Translator	4 months ago

README.md

टेरारियम परियोजना भाग ३: DOM म्यानिपुलेसन र क्लोजर

स्केच नोट टोमोमी इमुरा द्वारा

प्रि-लेक्चर क्विज

परिचय

DOM, अर्थात् "डकुमेन्ट अब्जेक्ट मोडेल" लाई म्यानिपुलेट गर्नु वेब विकासको मुख्य पक्ष हो। MDN अनुसार, "डकुमेन्ट अब्जेक्ट मोडेल (DOM) वेबमा डकुमेन्टको संरचना र सामग्री बनाउने वस्तुहरूको डाटा प्रतिनिधित्व हो।" वेबमा DOM म्यानिपुलेसनको चुनौतीहरूले प्रायः जाभास्क्रिप्ट फ्रेमवर्कहरू प्रयोग गर्न प्रेरित गरेको छ, तर हामी यसलाई आफैं व्यवस्थापन गर्नेछौं!

यसका साथै, यो पाठले जाभास्क्रिप्ट क्लोजर को विचार प्रस्तुत गर्नेछ, जसलाई तपाईं अर्को फङ्सनले घेरिएको फङ्सनको रूपमा सोच्न सक्नुहुन्छ ताकि भित्री फङ्सनले बाहिरी फङ्सनको स्कोपमा पहुँच पाउन सक्छ।

जाभास्क्रिप्ट क्लोजरहरू एक विशाल र जटिल विषय हो। यो पाठले सबैभन्दा आधारभूत विचारलाई छुनुहुन्छ कि यस टेरारियमको कोडमा, तपाईंले क्लोजर पाउनुहुनेछ: एक भित्री फङ्सन र बाहिरी फङ्सन यसरी निर्माण गरिएको छ कि भित्री फङ्सनले बाहिरी फङ्सनको स्कोपमा पहुँच पाउन सक्छ। यसले कसरी काम गर्छ भन्ने बारे थप जानकारीको लागि कृपया विस्तृत डकुमेन्टेसन हेर्नुहोस्।

हामी DOM म्यानिपुलेट गर्न क्लोजर प्रयोग गर्नेछौं।

DOM लाई एउटा रूखको रूपमा सोच्नुहोस्, जसले वेब पृष्ठ डकुमेन्टलाई म्यानिपुलेट गर्न सक्ने सबै तरिकाहरूलाई प्रतिनिधित्व गर्दछ। विभिन्न API (एप्लिकेसन प्रोग्राम इन्टरफेसहरू) लेखिएका छन् ताकि प्रोग्रामरहरूले आफ्नो रोजाइको प्रोग्रामिङ भाषाको प्रयोग गरेर DOM मा पहुँच गर्न सकून् र यसलाई सम्पादन, परिवर्तन, पुनःव्यवस्थित, र अन्य तरिकाले व्यवस्थापन गर्न सकून्।

DOM र HTML मार्कअपको प्रतिनिधित्व गर्ने चित्र। ओल्फा नासराओई बाट।

यस पाठमा, हामी हाम्रो इन्टरएक्टिभ टेरारियम परियोजना पूरा गर्नेछौं जसले प्रयोगकर्तालाई पृष्ठमा रहेका बिरुवाहरू म्यानिपुलेट गर्न अनुमति दिनेछ।

पूर्व-आवश्यकता

तपाईंले आफ्नो टेरारियमको लागि HTML र CSS तयार गरिसक्नुभएको हुनुपर्छ। यस पाठको अन्त्यसम्ममा तपाईं बिरुवाहरूलाई टेरारियममा तान्न र बाहिर निकाल्न सक्षम हुनुहुनेछ।

कार्य

तपाईंको टेरारियम फोल्डरमा script.js नामको नयाँ फाइल बनाउनुहोस्। उक्त फाइललाई <head> सेक्सनमा इम्पोर्ट गर्नुहोस्:

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

नोट: 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 ले धेरै ब्राउजरहरूमा समर्थन गर्दछ; तपाईंले यहाँ किन यो प्रयोग नगर्ने? तपाईंले यहाँ सिर्जना गर्न खोजेको सटीक स्क्रिन अन्तरक्रियाको बारेमा सोच्नुहोस्।

Pointerdrag फङ्सन

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' इभेन्ट कसरी क्याप्चर गरिएको छ देख्न सक्नुहुन्छ। इभेन्टमा खोतल्नुहोस् ताकि तपाईं pointerdown इभेन्टले कति जानकारी संकलन गर्छ हेर्न सक्नुहोस्!

अर्को, ध्यान दिनुहोस् कि स्थानीय भेरिएबलहरू pos3 र pos4 लाई e.clientX मा सेट गरिएको छ। तपाईंले निरीक्षण प्यानलमा e मानहरू पाउन सक्नुहुन्छ। यी मानहरूले बिरुवाको x र y समन्वयलाई क्याप्चर गर्छन् जब तपाईं यसलाई क्लिक गर्नुहुन्छ वा छोइन्छ। तपाईंले बिरुवाहरूको व्यवहारमा राम्रो नियन्त्रणको आवश्यकता छ जब तपाईं तान्नुहुन्छ, त्यसैले तपाईंले तिनीहरूको समन्वयलाई ट्र्याक गर्नुहुन्छ।

✅ के यो स्पष्ट हुँदैछ कि किन यो सम्पूर्ण एप्लिकेसन एक ठूलो क्लोजरमा बनाइएको छ? यदि यो नभएको भए, तपाईंले १४ वटा तान्न योग्य बिरुवाहरूको स्कोप कसरी कायम राख्नुहुन्थ्यो?

प्रारम्भिक फङ्सनलाई पूरा गर्न pos4 = e.clientY पछि दुईवटा थप pointer इभेन्ट म्यानिपुलेसनहरू थप्नुहोस्:

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

अब तपाईंले बिरुवालाई तान्न चाहनुहुन्छ जब तपाईंले pointer सँग यसलाई तान्नुहुन्छ, र बिरुवा छोड्दा तान्ने इशारा रोक्न चाहनुहुन्छ। onpointermove र onpointerup onpointerdown जस्तै API का भागहरू हुन्। इन्टरफेसले अहिले त्रुटिहरू फाल्नेछ किनकि तपाईंले अझै elementDrag र stopElementDrag फङ्सनहरू परिभाषित गर्नुभएको छैन, त्यसैले अब तिनीहरू निर्माण गर्नुहोस्।

elementDrag र stopElementDrag फङ्सनहरू

तपाईंले दुई थप आन्तरिक फङ्सनहरू थपेर आफ्नो क्लोजर पूरा गर्नुहुनेछ जसले बिरुवा तान्दा र तान्न रोक्दा के हुन्छ भन्ने व्यवस्थापन गर्नेछ। तपाईंले चाहनुभएको व्यवहार यो हो कि तपाईंले कुनै पनि समयमा कुनै पनि बिरुवा तान्न सक्नुहुन्छ र यसलाई स्क्रिनमा जहाँ पनि राख्न सक्नुहुन्छ। यो इन्टरफेस धेरै अन-अपिनियनated छ (उदाहरणका लागि ड्रप जोन छैन) ताकि तपाईं आफ्नो टेरारियमलाई आफ्नो इच्छाअनुसार डिजाइन गर्न सक्नुहुन्छ।

कार्य

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

यस फङ्सनमा, तपाईंले बाहिरी फङ्सनमा सेट गरिएको प्रारम्भिक स्थिति १-४ लाई धेरै सम्पादन गर्नुहुन्छ। यहाँ के भइरहेको छ?

जब तपाईं तान्नुहुन्छ, तपाईंले pos1 लाई pos3 (जसलाई तपाईंले पहिले e.clientX को रूपमा सेट गर्नुभएको थियो) बराबर बनाउनुहुन्छ र हालको e.clientX मान घटाउनुहुन्छ। तपाईंले pos2 मा पनि यस्तै अपरेशन गर्नुहुन्छ। त्यसपछि, तपाईंले pos3 र pos4 लाई तत्वको नयाँ X र Y समन्वयमा रिसेट गर्नुहुन्छ। तपाईंले यी परिवर्तनहरूलाई कन्सोलमा तान्दा हेर्न सक्नुहुन्छ। त्यसपछि, तपाईंले बिरुवाको css शैलीलाई यसको नयाँ स्थिति सेट गर्न म्यानिपुलेट गर्नुहुन्छ, pos1 र pos2 को नयाँ स्थितिहरूको आधारमा बिरुवाको शीर्ष र बायाँ X र Y समन्वय गणना गर्दै।

offsetTop र offsetLeft CSS गुणहरू हुन् जसले कुनै तत्वको स्थिति यसको अभिभावकको आधारमा सेट गर्दछ; यसको अभिभावक कुनै पनि तत्व हुन सक्छ जुन static रूपमा स्थित छैन।

टेरारियम र यसको बिरुवाहरूको व्यवहारलाई राम्रोसँग ट्युन गर्न यी स्थिति पुनः गणना गरिन्छ।

कार्य

इन्टरफेसलाई पूरा गर्न अन्तिम कार्य भनेको elementDrag को बन्द कर्ली ब्र्याकेट पछि stopElementDrag फङ्सन थप्नु हो:

function stopElementDrag() {
	document.onpointerup = null;
	document.onpointermove = null;
}

यो सानो फङ्सनले onpointerup र onpointermove इभेन्टहरूलाई रिसेट गर्छ ताकि तपाईं आफ्नो बिरुवाको प्रगति पुनः सुरु गर्न सक्नुहुन्छ वा नयाँ बिरुवा तान्न सुरु गर्न सक्नुहुन्छ।

✅ यदि तपाईंले यी इभेन्टहरूलाई null मा सेट गर्नुभएन भने के हुन्छ?

अब तपाईंले आफ्नो परियोजना पूरा गर्नुभएको छ!

🥇बधाई छ! तपाईंले आफ्नो सुन्दर टेरारियम पूरा गर्नुभएको छ।

GitHub Copilot एजेन्ट चुनौती 🚀

एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:

विवरण: टेरारियम परियोजनामा एक रिसेट फङ्सनालिटी थप्नुहोस् जसले सबै बिरुवाहरूलाई उनीहरूको मूल स्थानमा स्मूथ एनिमेसनको साथ फर्काउँछ।

प्रेरणा: एउटा रिसेट बटन बनाउनुहोस्, जसलाई क्लिक गर्दा सबै बिरुवाहरूलाई उनीहरूको मूल साइडबार स्थानमा CSS ट्रान्जिसनको प्रयोग गरेर १ सेकेन्डमा स्मूथली फर्काउँछ।

🚀चुनौती

तपाईंको क्लोजरमा नयाँ इभेन्ट ह्यान्डलर थप्नुहोस् ताकि बिरुवाहरूमा थप केही गर्न सकियोस्; उदाहरणका लागि, कुनै बिरुवालाई डबल-क्लिक गर्दा यसलाई अगाडि ल्याउनुहोस्। सिर्जनात्मक बनौं!

पोस्ट-लेक्चर क्विज

समीक्षा र आत्म अध्ययन

स्क्रिनमा तत्वहरू तान्नु सामान्य लाग्न सक्छ, तर यसलाई गर्न धेरै तरिकाहरू छन् र तपाईंले खोज्न चाहेको प्रभावको आधारमा धेरै समस्याहरू हुन सक्छन्। वास्तवमा, एउटा सम्पूर्ण ड्र्याग र ड्रप API छ जुन तपाईंले प्रयास गर्न सक्नुहुन्छ। हामीले यस मोड्युलमा यो API प्रयोग गरेका छैनौं किनकि हामीले चाहेको प्रभाव केही फरक थियो, तर यो API तपाईंको आफ्नै परियोजनामा प्रयास गर्नुहोस् र तपाईं के हासिल गर्न सक्नुहुन्छ हेर्नुहोस्।

प्वाइन्टर इभेन्टहरूको बारेमा थप जानकारी W3C डकुमेन्टेसन र MDN वेब डकुमेन्टेसन मा पाउन सकिन्छ।

सधैं ब्राउजरको क्षमता CanIUse.com प्रयोग गरेर जाँच गर्नुहोस्।

असाइनमेन्ट

DOM सँग अझै केही काम गर्नुहोस्

अस्वीकरण:
यो दस्तावेज AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।