კოდის წერის რჩევები DOM-ის მაგალითზე JavaScript-ში

დავუშვათ, თქვენ წინაშე დგას საკმარისად რთული ამოცანა, რომლის განსახორციელებლად საჭიროა გარკვეული რაოდენობის კოდის სტრიქონების დაწერა.

არასწორი მიდგომა იქნება ცდილობდეთ დაწეროთ მთელი ამოხსნის კოდი ერთდროულად, და მხოლოდ ამის შემდეგ დაიწყოთ მისი შემოწმება. ამ შემთხვევაში, მაღალია ალბათობა იმისა, რომ არაფერი იმუშავებს, ხოლო შეცდომის პოვნა მოგიწევთ კოდის დიდ მოცულობაში.

სწორი მიდგომაა ამოცანის დაყოფა პატარა ელემენტარულ ნაბიჯებად, რომლებსაც თქვენ განახორციელებთ და დაუყოვნებლივ შეამოწმებთ მათ სისწორეს. ამ შემთხვევაში, მაშინაც კი, თუ სადმე შეგიშლით ხელს, ამას დაუყოვნებლივ შეამჩნევთ და გამასწორებთ.

შევეცადოთ პრაქტიკაში. დავუშვათ, გაქვთ აბზაცები:

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

დავუშვათ, თქვენ წინაშე დგას ამოცანა: იპოვოთ ის აბზაცები, რომელთა რიცხვები 3-ის ჯერადია, და იპოვოთ ამ რიცხვების ჯამი.

პირველ პატარა ნაბიჯად მე შემოგთავაზებდი მიგვეღო ჩვენი აბზაცები მასივის სახით და ეს მასივი გამოგვეტანა კონსოლში, რათა ვნახოთ, რომ ყველაფერი სწორად მივიღეთ. გავაკეთოთ ეს:

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

შემდეგი პატარა ნაბიჯი არის ჩვენი აბზაცების ჩირქით გავლა და თითოეული მათგანის ცალკე გამოტანა კონსოლში:

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

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

ახლა კი ჩირქში გამოვიტანოთ ჩვენი აბზაცების ტექსტები:

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

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

ახლა კი გამოვიტანოთ იმ აბზაცების ტექსტები, რომელთა რიცხვი იყოფა 3-ზე:

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

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

როცა დავრწმუნდებით, რომ სწორ აბზაცებს ვიღებთ, შეგვიძლია გადავიდეთ მათი რიცხვების დაჯამებაზე:

let 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);

მოცემულია სია წლებით:

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

მიიღეთ ის წლები, რომელთა ციფრთა ჯამი უდრის 6. იპოვეთ მიღებული წლების ჯამი.