DOM के उदाहरण के साथ JavaScript में कोड लिखने के टिप्स

मान लीजिए कि आपके सामने पर्याप्त जटिलता का एक कार्य है, जिसके कार्यान्वयन के लिए आपको कोड की कुछ पंक्तियाँ लिखने की आवश्यकता है।

पूरे समाधान का कोड एक साथ लिखने का प्रयास करना और फिर उसे जांचना शुरू करना एक गलत दृष्टिकोण होगा। इस मामले में, इस बात की अधिक संभावना है कि आपका कुछ भी काम नहीं करेगा, और आपको त्रुटि कोड की बड़ी मात्रा में ढूंढना होगा।

सही दृष्टिकोण कार्य को छोटे प्राथमिक चरणों में विभाजित करना है, जिन्हें आप लागू करेंगे और तुरंत उनकी शुद्धता की जांच करेंगे। इस मामले में, भले ही आप कहीं गलती करें, आप तुरंत समस्या को नोटिस कर लेंगे और उसे ठीक कर लेंगे।

आइए व्यवहार में आज़माएं। मान लीजिए आपके पास पैराग्राफ हैं:

html<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

मान लीजिए कि आपके सामने 3 से विभाज्य संख्याओं वाले पैराग्राफ खोजने और उनकी संख्याओं का योग खोजने का कार्य है।

पहले छोटे कदम के रूप में, मैं हमारे पैराग्राफ को एक सरणी के रूप में प्राप्त करने और इस सरणी को कंसोल में आउटपुट करने का सुझाव दूंगा, ताकि यह देख सकें कि हमने सब कुछ सही ढंग से प्राप्त कर लिया है। आइए इसे करें:

javascriptlet elems = document.querySelectorAll('p');
console.log(elems);

अगले छोटे कदम के रूप में, हमें अपने पैराग्राफ को एक लूप के साथ पुनरावृत्त करने और उनमें से प्रत्येक को अलग से कंसोल में आउटपुट करने की आवश्यकता है:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  console.log(elem);
}

और अब लूप में, हम अपने पैराग्राफ के टेक्स्ट आउटपुट करेंगे:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  console.log(elem.textContent);
}

अब आइए उन पैराग्राफ के टेक्स्ट आउटपुट करें जिनकी संख्या 3 से विभाज्य है:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  let text = +elem.textContent;
  
  if (text % 3 === 0) {
    console.log(text);
  }
}

यह सुनिश्चित करने के बाद कि हमें सही पैराग्राफ मिल रहे हैं, हम उनकी संख्याओं का योग करना शुरू कर सकते हैं:

javascriptlet elems = document.querySelectorAll('p');
let sum = 0;

for (let elem of elems) {
  let text = +elem.textContent;
  
  if (text % 3 === 0) {
    sum += text;
  }
}

console.log(sum);

html<ul>
  <li>2000</li>
  <li>2004</li>
  <li>2021</li>
  <li>2022</li>
  <li>2025</li>
  <li>2031</li>
</ul>