Συμβουλές για τη συγγραφή κώδικα με το DOM στην JavaScript ως παράδειγμα

Ας υποθέσουμε ότι αντιμετωπίζετε ένα αρκετά σύνθετο πρόβλημα, για την υλοποίηση του οποίου χρειάζεται να γράψετε έναν ορισμένο αριθμό γραμμών κώδικα.

Η λανθασμένη προσέγγιση θα ήταν να προσπαθήσετε να γράψετε ολόκληρο τον κώδικα λύσης αμέσως, και μετά να αρχίσετε να τον ελέγχετε. Σε αυτήν την περίπτωση, υπάρχει μεγάλη πιθανότητα να μη λειτουργεί τίποτα, και να πρέπει να αναζητήσετε το σφάλμα σε έναν μεγάλο όγκο κώδικα.

Η σωστή προσέγγιση είναι να χωρίσετε το πρόβλημα σε μικρά στοιχειώδη βήματα, τα οποία θα υλοποιείτε και θα ελέγχετε αμέσως τη σωστή λειτουργία τους. Σε αυτήν την περίπτωση, ακόμα κι αν κάνετε ένα λάθος κάπου, θα το παρατηρήσετε αμέσως και θα το διορθώσετε.

Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχετε τις ακόλουθες παραγράφους:

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

Ας υποθέσουμε ότι η αποστολή σας είναι να βρείτε τις παραγράφους με αριθμούς που είναι πολλαπλάσια του 3, και να βρείτε το άθροισμα των αριθμών τους.

Ως πρώτο μικρό βήμα, θα πρότεινα να πάρετε τις παραγράφους μας ως έναν πίνακα και να εμφανίσετε αυτόν τον πίνακα στην κονσόλα, για να δούμε ότι τα πήραμε όλα σωστά. Ας το κάνουμε:

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

Στο επόμενο μικρό βήμα, πρέπει να διατρέξετε τις παραγράφους μας με έναν βρόχο και να εμφανίσετε κάθε μία από αυτές ξεχωριστά στην κονσόλα:

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

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

Και τώρα στον βρόχο, ας εμφανίσουμε τα κείμενα των παραγράφων μας:

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

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

Τώρα ας εμφανίσουμε τα κείμενα εκείνων των παραγράφων των οποίων ο αριθμός διαιρείται με το 3:

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

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

Αφού βεβαιωθήκαμε ότι λαμβάνουμε τις σωστές παραγράφους, μπορούμε να προχωρήσουμε στο άθροισμα των αριθμών τους:

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

Δίνεται μια λίστα με έτη:

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

Πάρτε τα έτη των οποίων το άθροισμα των ψηφίων ισούται με 6. Βρείτε το άθροισμα των ετών που προέκυψαν.