Nasveti za pisanje kode na primeru DOM v JavaScript

Predpostavimo, da stojite pred nalogo zadostne zahtevnosti, za katere izvedbo je potrebno napisati določeno količino vrstic kode.

Napačen pristop bi bil poskusiti napisati celotno kodo rešitve naenkrat in šele nato začeti preverjati. V tem primeru je velika verjetnost, da vam ne bo nič delovalo, napako pa boste morali iskati v veliki količini kode.

Pravilen pristop je razdelitev naloge na majhne elementarne korake, ki jih boste izvajali in takoj preverjali njihovo pravilnost. V tem primeru, tudi če se nekje zmotite, boste takoj opazili težavo in jo popravili.

Poskusimo v praksi. Recimo, da imate odstavke:

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

Recimo, da je vaša naloga najti odstavke s števili, deljivimi s 3, in poiskati vsoto njihovih števil.

Prvi majhen korak, ki bi ga predlagal, je, da dobimo naše odstavke v obliki polja in to polje izpišemo v konzolo, da preverimo, ali smo vse pravilno dobili. Naredimo to:

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

Naslednji majhen korak je prebrati naše odstavke z zanko in vsakega posebej izpisati v konzolo:

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

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

In zdaj v zanki izpišimo besedila naših odstavkov:

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

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

Zdaj pa izpišimo besedila tistih odstavkov, katerih število je deljivo s 3:

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

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

Ko se prepričamo, da dobimo pravilne odstavke, lahko nadaljujemo s seštevanjem njihovih števil:

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

Podan je seznam z leti:

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

Pridobite leta, katerih vsota števk je enaka 6. Poiščite vsoto dobljenih let.