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