Consigli per scrivere codice con l'esempio del DOM in JavaScript

Supponiamo che tu abbia un compito di complessità sufficiente, per la cui implementazione è necessario scrivere una certa quantità di righe di codice.

Un approccio errato sarebbe cercare di scrivere l'intero codice della soluzione in una volta, e poi iniziare a testarlo. In questo caso, c'è un'alta probabilità che non funzionerà nulla, e dovrai cercare l'errore in una grande quantità di codice.

L'approccio corretto è suddividere il compito in piccoli passi elementari, che implementerai e controllerai immediatamente per verificarne la correttezza. In questo modo, anche se commetti un errore da qualche parte, noterai immediatamente il problema e lo correggerai.

Proviamo nella pratica. Supponiamo che tu abbia dei paragrafi:

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

Supponiamo che il tuo compito sia trovare i paragrafi con numeri multipli di 3, e calcolare la somma dei loro numeri.

Come primo piccolo passo, suggerirei di ottenere i nostri paragrafi come un array e visualizzare questo array nella console, per verificare di aver ottenuto tutto correttamente. Facciamolo:

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

Il prossimo piccolo passo è scorrere i nostri paragrafi con un ciclo e visualizzare ciascuno di essi nella console singolarmente:

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

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

E ora nel ciclo visualizziamo i testi dei nostri paragrafi:

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

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

Ora visualizziamo i testi dei paragrafi il cui numero è divisibile per 3:

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

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

Dopo aver verificato che stiamo ottenendo i paragrafi corretti, possiamo procedere a sommare i loro numeri:

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>