Saveti za pisanje koda na primeru DOM-a u JavaScript-u

Pretpostavimo da ste suočeni sa zadatkom dovoljne kompleksnosti, za čiju realizaciju je potrebno napisati određenu količinu koda.

Pogrešan pristup bi bio pokušaj da se napiše čitav kod rešenja odjednom, a tek onda da se počne sa proverom. U tom slučaju postoji velika verovatnoća da ništa neće raditi, a grešku ćete morati da tražite u velikoj količini koda.

Ispravan pristup je podela zadatka na male elementarne korake, koje ćete implementirati i odmah proveravati njihovu ispravnost. U ovom slučaju, čak i ako negde pogrešite, odmah ćete primetiti problem i ispraviti ga.

Hajde da probamo u praksi. Pretpostavimo da imate paragrafe:

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

Pretpostavimo da je zadatak pronaći paragrafe sa brojevima koji su deljivi sa 3, i pronaći zbir tih brojeva.

Kao prvi mali korak predložio bih da dobijemo naše paragrafe u vidu niza i da ispišemo taj niz u konzolu, da bismo proverili da li smo sve dobro dobili. Uradimo to:

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

Sledeći mali korak je da se prođe kroz naše paragrafe petljom i da se svaki od njih ispiše u konzolu posebno:

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

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

A sada u petlji ispišimo tekstove naših paragrafa:

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

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

Sada hajde da ispišemo tekstove onih paragrafa čiji je broj deljiv sa 3:

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

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

Uverivši se da dobijamo prave paragrafe, možemo pristupiti sabiranju njihovih brojeva:

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

Dat je spisak sa godinama:

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

Dobijte godine čiji je zbir cifara jednak 6. Pronađite zbir dobijenih godina.