Nõuanded koodi kirjutamiseks DOM-i näitel JavaScriptis

Oletame, et seisate silmitsi piisavalt keerulise ülesandega, mille lahendamiseks on vaja kirjutada teatud kogus koodiridu.

Vale lähenemine oleks püüda kirjutada kogu lahenduse kood korraga ja alles seejärel hakata seda kontrollima. Sellisel juhul on suur tõenäosus, et miski ei hakka tööle ning viga tuleb otsida suurest koodihulgast.

Õige lähenemine on jagada ülesanne väikesteks elementaarseteks sammudeks, mida te rakendate ja kohe kontrollite nende õigsust. Sel juhul, isegi kui te kusagil eksite, märkate te probleemi kohe ja parandate selle.

Proovime seda praktikas. Oletame, et teil on lõigud:

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

Oletame, et teie ülesandeks on leida lõigud, mille numbrid on 3-ga jaguvad, ja leida nende arvude summa.

Esimest väikest sammu soovitaksin saada meie lõigud massiivi kujul ja väljastada see massiiv konsooli, et näha, kas saime kõik õigesti. Teeme selle:

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

Järgmise väikese sammuna tuleb meie lõigud tsükliga läbida ja väljastada igaüks neist konsooli eraldi:

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

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

Ja nüüd väljastame tsüklis meie lõigude tekstid:

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

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

Nüüd väljastame tekstid neist lõigutest, mille number jagub 3-ga:

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

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

Olles veendunud, et saame õiged lõigud, võime asuda nende arvude summeerimisele:

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

Antud on loetelu aastatega:

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

Leidke aastad, mille numbrite summa on 6. Leidke saadud aastate summa.