Gabimi i kalimit të kalendarit në JavaScript

Le të supozojmë se duam të bëjmë shigjeta për kalimin e kalendarit. Në këtë rast, mund të bëhen disa gabime karakteristike. Le t'i shqyrtojmë ato.

Le të supozojmë se kemi butona për kalim dhe një element, në të cilin për thjeshtësi nuk do të shfaqim një kalendar, por vetëm vitin dhe emrin e muajit:

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

Le të marrim referencat për elementët tanë:

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

Le të supozojmë gjithashtu se kemi një funksion, i cili si parametër pranon numrin e muajit dhe kthen emrin e tij:

function getMonthName(month) {
	let names = [
		'Jan', 'Shk', 'Mar', 'Pri', 'Maj', 'Qer',
		'Kor', 'Gus', 'Sht', 'Tet', 'Nën', 'Dhj'
	];
	
	return names[month];
}

Le të marrim vitin dhe muajin aktual pas ngarkimit të faqes:

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

Le të shfaqim në elementin tonë vitin dhe emrin e muajit (imitim i një kalendari):

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

Tani le t'u vendosim butonave të kalimit prerësit e klikimeve:

prev.addEventListener('click', function() {
	// trego muajin e mëparshëm
});

next.addEventListener('click', function() {
	// trego muajin vijues
});

Le të shqyrtojmë tani, çfarë gabimesh mund të bëhen gjatë zbatimit të butonave të kalimit.

Gabimi i parë

Le të supozojmë se një programues implementoi butonat për ndërrimin e muajve:

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

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

Ky programues, megjithatë, bëri një gabim, për shkak të të cilit muaji ndërrohet vetëm në klikimin e parë, por jo në ato pasuese.

Çështja është se ndryshorja month nuk ndryshohet brenda funksioneve - thjesht i shtohet përmbajtjes së saj njësi dhe rezultati dërgohet në funksionin getMonthName.

Meqenëse ndryshorja jonë nuk ka ndryshuar, atëherë në klikimin tjetër në të përsëri do të jetë muaji aktual - dhe asgjë nuk do të ndryshojë.

Le të rregullojmë problemin:

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

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

Mund të thjeshtohet:

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

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

Gabimi i dytë

Shpesh harrohet se muaji duhet të ndryshojë në një diapazon të caktuar - nga 0 në 11. Kur arrihet kufiri i diapazonit ne duhet të ndryshojmë vitin (përpara ose prapa), dhe muajin ta rivendosim në vlerën fillestare.

Le ta bëjmë këtë:

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