Këshilla për shkrimin e kodit me shembull të DOM në JavaScript

Supozoni se keni përpara një detyrë mjaft komplekse, për zbatimin e së cilës duhet të shkruani një sasi të caktuar rreshtash kodi.

Qasja e gabuar do të ishte të përpiqeshit të shkruani të gjithë kodin e zgjidhjes njëherësh, dhe pastaj të filloni ta kontrolloni atë. Në këtë rast, probabiliteti është i lartë që asgjë nuk do të funksionojë, dhe do të duhet të kërkoni gabimin në një sasi të madhe kodi.

Qasja e saktë është ndarja e detyrës në hapa të vegjël elementarë, të cilët do t'i zbatoni dhe menjëherë të kontrolloni saktësinë e tyre. Në këtë rast, edhe nëse gaboni diku, do ta vini re menjëherë problemin dhe do ta korrigjoni.

Le të provojmë në praktikë. Supozoni se keni paragrafët:

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

Supozoni se detyra juaj është të gjeni paragrafët me numra të shumëfishtë të 3, dhe të gjeni shumën e numrave të tyre.

Hapi i parë i vogël që do të sugjeroja është të merrni paragrafët tanë si një varg dhe ta shfaqni këtë varg në konsol, për të parë që kemi marrë gjithçka saktë. Le ta bëjmë këtë:

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

Hapi tjetër i vogël është të kaloni nëpër paragrafët tanë me një cikël dhe të shfaqni secilin prej tyre në konsol veç e veç:

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

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

Dhe tani, në cikël, le të shfaqim tekstet e paragrafëve tanë:

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

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

Tani le të shfaqim tekstet e atyre paragrafëve, numri i të cilëve pjesëtohet me 3:

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

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

Pasi u siguruam që po marrim paragrafët e duhur, mund të fillojmë të mbledhim numrat e tyre:

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

Jepet një listë me vite:

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

Gjeni vitet, shuma e shifrave të të cilëve është e barabartë me 6. Gjeni shumën e viteve të marra.