Tipps zum Schreiben von Code am Beispiel von DOM in JavaScript

Nehmen wir an, Sie stehen vor einer Aufgabe, die komplex genug ist, sodass für ihre Umsetzung eine gewisse Anzahl von Codezeilen geschrieben werden muss.

Ein falscher Ansatz wäre, zu versuchen, den gesamten Lösungscode auf einmal zu schreiben und erst dann mit der Überprüfung zu beginnen. In diesem Fall ist die Wahrscheinlichkeit hoch, dass nichts funktionieren wird und der Fehler in einer großen Menge an Code gesucht werden muss.

Der richtige Ansatz ist, die Aufgabe in kleine, elementare Schritte zu unterteilen, die Sie umsetzen und deren Richtigkeit Sie sofort überprüfen. In diesem Fall werden Sie, selbst wenn Sie einen Fehler machen, das Problem sofort bemerken und korrigieren können.

Probieren wir es praktisch aus. Nehmen wir an, Sie haben Absätze:

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

Nehmen wir an, Ihre Aufgabe ist es, Absätze mit Zahlen, die durch 3 teilbar sind, zu finden und die Summe ihrer Zahlen zu berechnen.

Als ersten kleinen Schritt würde ich vorschlagen, unsere Absätze als Array zu erhalten und dieses Array in der Konsole auszugeben, um zu überprüfen, ob wir alles richtig erhalten haben. Machen wir das:

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

Der nächste kleine Schritt besteht darin, unsere Absätze mit einer Schleife zu durchlaufen und jeden von ihnen einzeln in der Konsole auszugeben:

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

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

Und jetzt geben wir in der Schleife die Texte unserer Absätze aus:

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

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

Lassen Sie uns jetzt die Texte der Absätze ausgeben, deren Zahl durch 3 teilbar ist:

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

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

Nachdem wir sichergestellt haben, dass wir die richtigen Absätze erhalten, können wir mit der Summierung ihrer Zahlen beginnen:

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

Gegeben ist eine Liste mit Jahren:

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

Ermitteln Sie die Jahre, deren Ziffernsumme 6 ergibt. Finden Sie die Summe der ermittelten Jahre.