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:

html<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:

javascriptlet 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ě:

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

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

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

javascriptlet 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:

javascriptlet 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:

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

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