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