Парады па напісанню кода на прыкладзе 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. Знайдзіце суму атрыманых гадоў.