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>