Tipy pro psaní kódu na příkladu DOM v JavaScriptu

Představme si, že stojíte před úkolem dostatečné složitosti, pro jehož implementaci je potřeba napsat určité množství řádků kódu.

Nesprávným přístupem by bylo pokusit se napsat celé řešení najednou a teprve potom jej začít kontrolovat. V tomto případě je vysoká pravděpodobnost, že vám nic nebude fungovat, a chybu budete muset hledat ve velkém množství kódu.

Správným přístupem je rozdělení úlohy na malé elementární kroky, které budete implementovat a okamžitě ověřovat jejich správnost. V tomto případě, i když někde uděláte chybu, si toho hned všimnete a opravíte ji.

Zkusme to v praxi. Předpokládejme, že máte odstavce:

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

Představme si, že je vaším úkolem najít odstavce s čísly, které jsou násobky 3, a najít součet těchto čísel.

Jako první malý krok bych navrhl získat naše odstavce ve formě pole a toto pole vypsat do konzole, abychom se podívali, zda jsme vše správně získali. Udělejme to:

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

Následujícím malým krokem je potřeba projít naše odstavce cyklem a vypsat každý z nich do konzole samostatně:

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

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

A nyní v cyklu vypišme texty našich odstavců:

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

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

Nyní vypišme texty těch odstavců, jejichž číslo je dělitelné 3:

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

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

Po ověření, že získáváme správné odstavce, můžeme přistoupit k sečtení jejich čísel:

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

Dán seznam s roky:

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

Získejte roky, jejichž součet číslic je roven 6. Najděte součet získaných roků.