DOM Örnekleriyle JavaScript Kod Yazma İpuçları

Önünüzde, uygulanması için bir miktar kod satırı yazmanız gereken yeterince karmaşık bir görev olduğunu varsayalım.

Yanlış yaklaşım, çözümün tüm kodunu bir bütün olarak yazmaya çalışıp ardından kontrol etmeye başlamaktır. Bu durumda, hiçbir şeyin çalışmama ihtimali yüksektir ve hatayı çok sayıda kod satırı içinde aramak zorunda kalırsınız.

Doğru yaklaşım, görevi uygulayacağınız ve doğruluğunu hemen kontrol edeceğiniz küçük, temel adımlara bölmektir. Bu durumda, bir yerde hata yapsanız bile, sorunu hemen fark eder ve düzeltirsiniz.

Pratikte deneyelim. Şu paragraflarınız olduğunu varsayalım:

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

Önünüzdeki görevin, sayıları 3'ün katı olan paragrafları bulmak ve bu sayıların toplamını bulmak olduğunu varsayalım.

İlk küçük adım olarak, paragraflarımızı bir dizi olarak almayı ve her şeyi doğru aldığımızdan emin olmak için bu diziyi konsola yazdırmayı öneriyorum. Bunu yapalım:

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

Bir sonraki küçük adım, paragraflarımızı bir döngü ile dolaşmak ve her birini ayrı ayrı konsola yazdırmak olmalı:

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

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

Şimdi döngü içinde paragraflarımızın metinlerini yazdıralım:

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

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

Şimdi sadece sayısı 3'e bölünebilen paragrafların metinlerini yazdıralım:

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

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

Doğru paragrafları aldığımızdan emin olduktan sonra, bu sayıların toplamını almaya başlayabiliriz:

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

Yılları içeren bir liste verilsin:

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

Rakamlarının toplamı 6'ya eşit olan yılları alın. Elde edilen yılların toplamını bulun.