Saveti za pisanje koda na primeru DOM-a u JavaScript-u

Pretpostavimo da ste suočeni sa zadatkom dovoljne kompleksnosti, za čiju realizaciju je potrebno napisati određenu količinu koda.

Pogrešan pristup bi bio pokušaj da se napiše čitav kod rešenja odjednom, a tek onda da se počne sa proverom. U tom slučaju postoji velika verovatnoća da ništa neće raditi, a grešku ćete morati da tražite u velikoj količini koda.

Ispravan pristup je podela zadatka na male elementarne korake, koje ćete implementirati i odmah proveravati njihovu ispravnost. U ovom slučaju, čak i ako negde pogrešite, odmah ćete primetiti problem i ispraviti ga.

Hajde da probamo u praksi. Pretpostavimo da imate paragrafe:

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

Pretpostavimo da je zadatak pronaći paragrafe sa brojevima koji su deljivi sa 3, i pronaći zbir tih brojeva.

Kao prvi mali korak predložio bih da dobijemo naše paragrafe u vidu niza i da ispišemo taj niz u konzolu, da bismo proverili da li smo sve dobro dobili. Uradimo to:

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

Sledeći mali korak je da se prođe kroz naše paragrafe petljom i da se svaki od njih ispiše u konzolu posebno:

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

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

A sada u petlji ispišimo tekstove naših paragrafa:

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

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

Sada hajde da ispišemo tekstove onih paragrafa čiji je broj deljiv sa 3:

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

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

Uverivši se da dobijamo prave paragrafe, možemo pristupiti sabiranju njihovih brojeva:

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>