JavaScriptтеги календарды которуудагы ката

Календарды которуу үчүн жебелерди жасагыбыз келет дейли. Бул учурда бир катар мүнөздүү каталарды жасоого мүмкүн болот. Келгиле, аларды карап чыгалы.

Бизде которуу баскычтары бар жана жөнөкөйлүк үчүн календарды эмес, жөн гана жылды жана айдын атын чыгара турган элемент бар дейли:

<button id="prev">мурунку</button>
<div id="elem"></div>
<button id="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);
});