JavaScript-də Təqvimdə Ay Dəyişmək Üçün Oxlar

Gəlin indi təqvimin altında ayı dəyişmək üçün oxlar edək. HTML kodunda dəyişikliklər edək:

<div id="parent">
	<div id="calendar">
		<div class="info">Yan 2020</div>
		<table>
			<thead>
				<tr>
					<th>b.e</th>
					<th>ç.a</th>
					<th>ç</th>
					<th>c.a</th>
					<th>c</th>
					<th>ş</th>
					<th>b</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

CSS kodunda dəyişikliklər edək:

#parent {
	text-align: center;
}
#calendar {
	display: inline-block;
}
#calendar td, #calendar th {
	padding: 10px;
	border: 1px solid black;
	text-align: center;
}

#calendar .nav, #calendar .info {
	text-align: center;
}
#calendar a {
	color: blue;
	font-size: 25px;
	text-decoration: none;
}
#calendar a:hover {
	color: red;
}

#calendar .active {
	color: red;
}

Oklara keçidlər dəyişənlərdə əldə edək:

let prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');

Müzakirə

Gəlin indi problemi necə həll edəcəyimizi müzakirə edək. Əslində bizim təqvim kodumuz yaxşı genişlənə bilən şəkildə yazılıb: bizdə draw funksiyası var, bu da verilmiş ay üçün təqvimi çəkir. Beləliklə, ox üzərində kliklədikdə biz fərqli ay nömrəsi ilə təqvimi yenidən çəkə bilərik (və bəlkə də il).

Növbəti ay oxuna kliklədikdə nə edə biləcəyimizə dair bir nümunə:

next.addEventListener('click', function() {
	draw(body, getNextYear(year, month), getNextMonth(month));
});

Gördüyünüz kimi, burada funksiyalardan istifadə olunur getNextYear və getNextMonth. Gəlin onların nə etməli olduğunu müzakirə edək.

Adından göründüyü kimi getNextYear funksiyası növbəti ili alır. Burada nəzərdə tutulan budur ki, əgər indi dekabrdırsa, növbəti aya keçid edərkən il 1 vahid artmalıdır. Əgər indi dekabr deyilsə, onda funksiya sadəcə cari ili qaytarmalıdır.

getNextMonth funksiyası növbəti ayı almalıdır. O, bütün aylar üçün, istisna olmaqla dekabr, ay nömrəsinə vahid əlavə edəcək. Dekabr üçün isə növbəti ay 0 nömrəsi ilə yanvar olacaq.

Oxşar əməliyyatlar əvvəlki ay düyməsinə basdıqda yerinə yetirilməlidir:

prev.addEventListener('click', function() {
	draw(body, getPrevYear(year, month), getPrevMonth(month));
});

Ay dəyişmək düymələrinin işini həyata keçirin.

Təqvimin üstündəki məlumatın göstərilən aya və ilə uyğun olmasını təmin edin.