DOM yordamida JavaScript da kod yozish bo'yicha maslahatlar

Faraz qilaylik, sizning oldingizda yetarlicha murakkablikdagi vazifa turibdi, uni amalga oshirish uchun ma'lum miqdordagi kod qatorlarini yozish kerak.

Noto'g'ri yondashuv butun yechim kodini bir martada yozishga urinish, so'ngra uni tekshirishni boshlash bo'ladi. Bunda hech narsa ishlamasligi ehtimoli yuqori, xatolikni ko'p miqdordagi kod ichidan izlashga to'g'ri keladi.

To'g'ri yondashuv vazifani kichik elementar qadamlarga bo'lishdir, siz ularni amalga oshirasiz va darhol ularning to'g'riligini tekshirasiz. Bunday holda, hatto qayerdadir xato qilsangiz ham, darhol muammoni payqaysiz va uni tuzatasiz.

Keling, amalda sinab ko'raylik. Faraz qilaylik, sizda abzatslar bor:

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

Faraz qilaylik, sizning oldingizda 3 ga karrali sonli abzatslarni topish va ularning sonlari yig'indisini topish vazifasi turibdi.

Birinchi kichik qadam sifatida men bizning abzatslarimizni massiv ko'rinishida olishni va ushbu massivni konsolga chiqarishni taklif qilardim, hammasini to'g'ri olganimizni ko'rish uchun. Buni amalga oshiramiz:

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

Keyingi kichik qadamda bizning abzatslarimizni tsikl bilan aylantirish va har birini alohida-alohida konsolga chiqarish kerak:

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

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

Endi tsikl ichida abzatslarimizning matnlarini chiqaramiz:

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

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

Endi keling, soni 3 ga bo'linadigan abzatslarning matnlarini chiqaramiz:

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

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

To'g'ri abzatslarni olayotganimizga ishonch hosil qilib, ularning sonlarini yig'indisini hisoblashni boshlashimiz mumkin:

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

Yillarni o'z ichiga olgan ro'yxat berilgan:

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

Raqamlari yig'indisi 6 ga teng bo'lgan yillarni oling. Olingan yillarning yig'indisini toping.