Kalendarz w JavaScript krok po kroku

Jeden program, wiele podejść: kalendarz miesiąca budowany małymi krokami, a każdy krok pokazuje zaznaczone linie, które się zmieniły. Najpierw w konsoli (liczby, wiersze po siedem dni, pierwszy dzień tygodnia, kolorowe weekendy, obiekt Date), potem na stronie z HTML składanym w napisie, z elementów DOM, aż po logikę oddzieloną od widoku. Przy każdej lekcji zadania sprawdzane automatycznie.

Dla kogo: Szkoła podstawowa 7-8, liceum i technikum: jeden program (kalendarz) budowany krok po kroku, od konsoli do strony WWW, ze zmianami zaznaczonymi w kodzie. Więcej o kursie

Kalendarz w konsoli krok po kroku

Kalendarz miesiąca w konsoli, budowany od zera małymi krokami. Każdy przykład rozbudowuje poprzedni, a zmienione linie są zaznaczone: liczby od 1 do 31, jeden wiersz, wyrównanie, nowy wiersz po siódmej liczbie, nagłówek dni, pierwszy dzień tygodnia i liczba dni wpisane z palca, kolorowa sobota i niedziela, a potem wyliczanie tych wartości z obiektu Date, tytuł, dzisiejszy dzień i funkcja dla dowolnego miesiąca.

Kalendarz na stronie: HTML składany w napisie

Ten sam kalendarz na stronie: pętla składa kod HTML w napisie, a `innerHTML` wstawia go do strony. Kroki jak w konsoli, ale z kwadratami i stylami: liczby w kwadratach, nowy wiersz klasą `clear`, operator warunkowy i napis szablonowy, nagłówek, kolorowe weekendy, puste pola, wartości z obiektu Date, tytuł, dzisiejszy dzień, a na koniec siatka CSS, dzięki której kod przestaje liczyć wiersze.

Kalendarz z elementów DOM

Trzecie podejście: zamiast składać napis z HTML, skrypt tworzy elementy (`createElement`) i wstawia je do strony. Kroki: kwadraty z elementów, funkcja pomocnicza, klasy przez `classList`, wartości z obiektu Date, tytuł i dzisiejszy dzień, wstawianie jednym ruchem przez `DocumentFragment`, funkcja rysująca dowolny miesiąc, przyciski poprzedni i następny, poprawka błędu z dzisiejszym dniem, kliknięty dzień, przycisk Dziś z klawiaturą i na koniec ta sama logika w tabeli.

Kalendarz: logika oddzielona od widoku

Czwarte podejście: najpierw dane, potem wygląd. Model to funkcja zwracająca miesiąc jako tablicę tygodni, sprawdzana w konsoli zwykłymi testami, bez strony. Widok tylko rysuje model: raz tekstem w konsoli, raz siatką na stronie. Dalej stan kalendarza w jednym obiekcie, zdarzenia, które zmieniają tylko stan, klasa modelu Calendar, klasa widoku CalendarView i dwa niezależne kalendarze na jednej stronie.

Kalendarz ze świętami, notatkami i językami

Piąte podejście: kalendarz sam wylicza święta. Stałe to tablica dat, ale Wielkanoc zależy od Księżyca: pierwsza niedziela po pierwszej wiosennej pełni. Kroki pokazują mechanizm od środka (19-letni cykl Księżyca, data pełni, szukanie niedzieli pętlą, potem wzorem), dwa wyjątki algorytmu Gaussa i algorytm Meeusa z porównaniem na 200 latach. Od Wielkanocy liczą się pozostałe święta ruchome. Na stronie: święta w kalendarzu, notatki przy dniach, dni robocze miesiąca i przełącznik języka PL/EN ze słownika.