Kódolási tanácsok a DOM példáján keresztül JavaScriptben

Tegyük fel, hogy eléggé összetett feladat áll előttünk, melynek megvalósításához egy bizonyos mennyiségű kódsort kell megírni.

Helytelen megközelítés az, ha megpróbáljuk az egész megoldást egyszerre megírni, és csak aztán kezdjük el ellenőrizni. Ebben az esetben nagy a valószínűsége, hogy semmi sem fog működni, és a hibát nagyon sok kódban kell majd megkeresnünk.

A helyes megközelítés az, ha a feladatot apró, elemi lépésekre bontjuk, amelyeket megvalósítunk és azonnal ellenőrzünk a helyességüket. Ebben az esetben, még ha valahol hibázunk is, azonnal észrevesszük a problémát és kijavítjuk.

Próbáljuk ki ezt a gyakorlatban. Tegyük fel, hogy a következő bekezdéseink vannak:

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

Tegyük fel, hogy az a feladat, hogy találjuk meg azokat a bekezdéseket, amelyek száma 3-mal osztható, és adjuk össze ezeket a számokat.

Az első kis lépésként azt javaslom, hogy szerezzük meg a bekezdéseinket egy tömbben, és írjuk ki ezt a tömböt a konzolra, hogy lássuk, mindent helyesen kaptunk-e meg. Tegyük meg ezt:

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

A következő kis lépésben egy ciklussal be kell járnunk a bekezdéseinket, és mindegyiket külön-külön ki kell írnunk a konzolra:

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

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

Most pedig a ciklusban írjuk ki a bekezdéseink szövegét:

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

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

Most pedig írjuk ki azon bekezdések szövegét, amelyek száma 3-mal osztható:

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

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

Miután megbizonyosodtunk arról, hogy a megfelelő bekezdéseket kapjuk, elkezdhetjük a számuk összegzését:

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

Adott egy lista évekkel:

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

Szerezd meg azon éveket, amelyek számjegyeinek összege 6. Határozd meg a kapott évek összegét.