JavaScript'te Takvim Değiştirme Hatası

Diyelim ki takvim değiştirmek için oklar yapmak istiyoruz. Bu durumda bir dizi karakteristik hata yapılabilir. Hadi bunları inceleyelim.

Diyelim ki değiştirme düğmelerimiz var ve basitlik için içine takvim yerine, sadece yılı ve ay adını yazdıracağımız bir öğe:

<button id="prev">prev</button>
<div id="elem"></div>
<button id="next">next</button>

Öğelerimize referanslar alalım:

let elem = document.querySelector('#elem');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');

Ayrıca parametre olarak ay numarasını alan ve adını döndüren bir fonksiyonumuz olsun:

function getMonthName(month) {
	let names = [
		'Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz',
		'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'
	];
	
	return names[month];
}

Sayfa yüklendiğinde mevcut yılı ve ayı alalım:

let date  = new Date;
let year  = date.getFullYear();
let month = date.getMonth();

Öğemize yılı ve ay adını yazdıralım (takvim simülasyonu):

elem.textContent = year + ' ' + getMonthName(month);

Şimdi değiştiricilere tıklama işleyicileri ekleyelim:

prev.addEventListener('click', function() {
	// önceki ayı göster
});

next.addEventListener('click', function() {
	// sonraki ayı göster
});

Şimdi değiştiricileri uygularken yapılabilecek hataları inceleyelim.

Birinci Hata

Diyelim ki bir programcı ay değiştirme düğmelerini şu şekilde uyguladı:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month + 1);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month - 1);
});

Ancak bu programcı, ayın sadece ilk tıklamada değiştiği, sonrakilerde değişmediği bir hata yaptı.

Sebebi şu ki, month değişkeni fonksiyonların içinde değişmiyor - sadece içeriğine bir ekleniyor ve sonuç getMonthName fonksiyonuna gönderiliyor.

Değişkenimiz değişmediği için, bir sonraki tıklamada içinde hala mevcut ay olacak - ve hiçbir şey değişmeyecek.

Sorunu düzeltelim:

next.addEventListener('click', function() {
	month = month + 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	month = month - 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

Basitleştirilebilir:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(++month);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(--month);
});

İkinci Hata

Sık sık ayın belirli bir aralıkta değişmesi gerektiği unutulur - 0'dan 11'e kadar. Aralığın sınırına ulaşıldığında yılı değiştirmeli (ileri veya geri), ve ayı başlangıç değerine sıfırlamalıyız.

Bunu yapalım:

next.addEventListener('click', function() {
	if (month === 11) {
		month = 0;
		year++;
	} else {
		month++;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	if (month === 0) {
		month = 11;
		year--;
	} else {
		month--;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});