JavaScript i DOM — ożywiają stronę
Zdarzenia, manipulacja stroną i pobieranie danych asynchronicznie
Wstęp
HTML i CSS opisują, jak strona wygląda, gdy jest ładowana. JavaScript to, co powoduje, że reaguje później: otwiera menu klikiem, sprawdza poprawność formularza, pobiera nowe dane i aktualizuje zawartość, bez konieczności pobierania całej strony od nowa. Klucz do tego wszystkiego to DOM.
Co to jest DOM
Gdy przeglądarka ładuje HTML, buduje model strony w pamięci zwany DOM (Document Object Model). To jest drzewo elementów, które JavaScript może czytać i zmieniać. Jeśli zmienisz coś w DOM, przeglądarka aktualizuje to, co użytkownik widzi — w ten sposób strona staje się żywa po załadowaniu. Znajdujesz elementy w drzewie, czytasz lub zmieniasz ich zawartość i właściwości, i dodajesz lub usuwasz elementy.
Zdarzenia — reagowanie na użytkownika
Większość interakcji opiera się na zdarzeniach: klik, naciśnięcie klawisza, przesłanie formularza, załadowanie się strony. Słuchasz zdarzenia na elemencie i wiążesz funkcję z nim, która działa, gdy zdarzenie następuje. W ten sposób łączysz działania użytkownika z kodem, który robi coś. Trzymaj te funkcje małe i pozwól im wywoływać inne funkcje, dzięki czemu kod będzie łatwy do odczytania.
Praca asynchroniczna i pobieranie danych
Niektóre rzeczy potrzebują czasu — zwłaszcza pobieranie danych przez sieć. To nie może zamrozić całą stronę podczas czekania. Dlatego JavaScript jest asynchroniczny: prosisz o dane i dostaniesz powiadomienie, gdy odpowiedź będzie dostępna, podczas gdy reszta strony będzie działać. Gdy odpowiedź przychodzi — zwykle jako JSON z API — aktualizujesz DOM o nową zawartość. To technika, która umożliwia stronie pobieranie więcej bez przeładowania.
- 01DOM: model strony przeglądarki, którą JavaScript może zmienić
- 02Zdarzenie: coś, co się dzieje — kliknięcie, naciśnięcie, przesłanie — na które kod może reagować
- 03Słuchacz: funkcja powiązana ze zdarzeniem na elemencie
- 04Asynchroniczny: oczekiwanie na odpowiedź bez blokowania reszty strony
- 05JSON: format tekstowy, na który API zwykle odpowiada
Oddziel logikę od struktury
Nie umieszczaj kodu JavaScript bezpośrednio w elementach HTML. Zbieraj kod w odseparowanych plikach i powiąż zachowanie ze strony stąd. To zapewnia oddzielenie trzech obszarów odpowiedzialności — struktury, wyglądu i zachowania — tak jak w CSS, i czyni stronę znacznie łatwiejszą do odczytania i edycji.
“JavaScript bez DOM to tylko kalkulacja. To interakcja ze stroną, która sprawia, że język staje się siecią.”
— Powszechna reguła nauczycielska w tworzeniu frontendów