Tipy na písanie kódu na príklade DOM v JavaScripte

Predpokladajme, že stojíte pred úlohou dostatočne zložitou, na ktorej implementáciu potrebujete napísať určitý počet riadkov kódu.

Nesprávnym prístupom je pokúšať sa napísať celé riešenie naraz, a až potom ho začať kontrolovať. V tomto prípade je vysoká pravdepodobnosť, že vám nič nebude fungovať, a chybu budete musieť hľadať vo veľkom množstve kódu.

Správnym prístupom je rozdelenie úlohy na malé elementárne kroky, ktoré budete implementovať a okamžite overovať ich správnosť. V tomto prípade, aj keď niekde urobíte chybu, okamžite si toho všimnete a opravíte ju.

Skúsme to v praxi. Predpokladajme, že máte odseky:

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

Predpokladajme, že vašou úlohou je nájsť odseky s číslami, ktoré sú násobkami 3, a nájsť súčet týchto čísel.

Prvým malým krokom by som navrhol získať naše odseky vo forme poľa a toto pole vypísať do konzoly, aby sme videli, že sme ich všetky získali správne. Urobme to:

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

Ďalším malým krokom je potrebné prejsť naše odseky cyklom a každý z nich vypísať do konzoly samostatne:

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

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

A teraz v cykle vypíšme texty našich odsekov:

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

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

Teraz vypíšme texty tých odsekov, ktorých číslo je deliteľné 3:

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

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

Keď sme si overili, že dostávame správne odseky, môžeme pristúpiť k sčítaniu ich čí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>