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:

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

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

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

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

E ora nel ciclo visualizziamo i testi dei nostri paragrafi:

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

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

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

Data una lista con anni:

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

Ottieni gli anni la cui somma delle cifre è uguale a 6. Calcola la somma degli anni ottenuti.