JavaScript-ում օրացույցի փոխարկման սխալ

Ենթադրենք՝ ուզում ենք ստեղծել օրացույցը փոխարկելու սլաքներ: Այս դեպքում կարելի է թույլ տալ մի շարք բնորոշ սխալներ: Եկեք դիտարկենք դրանք:

Ենթադրենք՝ ունենք փոխարկման կոճակներ և մի տարր, որի մեջ պարզության համար մենք կտեղադրենք ոչ թե ամբողջ օրացույց, այլ պարզապես տարին և ամսվա անվանումը.

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

Ստացենք մեր տարրերի հղումները.

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

Ենթադրենք՝ ունենք նաև ֆունկցիա, որը պարամետրով ընդունում է ամսվա համարը և վերադարձնում է դրա անվանումը.

function getMonthName(month) {
	let names = [
		'հնվ', 'փտվ', 'մրտ', 'ապր', 'մյս', 'հնս',
		'հլս', 'օգս', 'սեպ', 'հոկ', 'նոյ', 'դեկ'
	];
	
	return names[month];
}

Եկեք էջի բեռնվելուց հետո ստանանք ընթացիկ տարին և ամիսը.

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

Տեղադրենք մեր տարրի մեջ տարին և ամսվա անվանումը (օրացույցի իմիտացիա).

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

Եկեք այժմ փոխարկիչների վրա տեղադրենք կլիկների մշակիչներ.

prev.addEventListener('click', function() {
	// ցույց տալ նախորդ ամիսը
});

next.addEventListener('click', function() {
	// ցույց տալ հաջորդ ամիսը
});

Այժմ դիտարկենք, թե ինչ սխալներ կարելի է թույլ տալ փոխարկիչների իրականացման ժամանակ:

Առաջին սխալը

Ենթադրենք՝ ինչ-որ ծրագրավորող իրականացրել է ամիսների փոխարկման կոճակները.

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

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

Այս ծրագրավորողը, սակայն, թույլ տվեց սխալ, որի պատճառով ամիսը փոխարկվում է միայն առաջին կլիկի ժամանակ, բայց ոչ հաջորդների:

Բանն այն է, որ month փոփոխականը չի փոխվում ֆունկցիաների ներսում՝ դրա պարունակությանը պարզապես ավելացնում են մեկ և արդյունքը ուղարկում են getMonthName ֆունկցիային:

Քանի որ մեր փոփոխականը չի փոխվել, ապա հաջորդ կլիկի ժամանակ դրա մեջ դեռ կլինի ընթացիկ ամիսը՝ և ոչինչ չի փոխվի:

Ուղղենք խնդիրը.

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

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

Կարելի է պարզեցնել.

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

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

Երկրորդ սխալը

Հաճախ մոռանում են, որ ամիսը պետք է փոխվի որոշակի տիրույթում՝ 0-ից 11: Տիրույթի սահմանին հասնելու դեպքում մենք պետք է փոխենք տարին (առաջ կամ հետ), իսկ ամիսը վերականգնենք սկզբնական արժեքին:

Եկեք անենք դա.

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