JavaScript: Zdarzenie DomContentLoaded i load
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji pokażę ci dwa niezwykle ważne zdarzenia.
Jest to DomContentLoaded oraz load.
I teraz jak się do nich możemy odwołać i po co są one potrzebne.
Pokażę ci, że na stronie mam tutaj h1 i będę chciał się odwołać do textContent, który tam się
znajduje.
Pobrałem sobie h1 w tym miejscu i zróbmy sobie console.log h1.textContent.
Nic nadzwyczajnego.
Powinniśmy zobaczyć to, co tam się znalazło i mamy błąd, nie możemy odczytać property, czyli właściwości
textContent of null
Dlaczego null, skoro tutaj odwołałem się do document.querySelector h1,
h1 jest na stronie to dlaczego nie została tutaj zwrócona, dlaczego nie możemy się do niej odwołać.
Ale wróćmy na stronę.
I zauważ, co tutaj się dzieje.
Do tej pory na samym dole podłączyliśmy skrypty, czyli script był zawsze na samym dole, a teraz podłączyłem
go w head, bo możemy tak robić i często również zobaczysz, że różne osoby tak robią.
Albo jeżeli będziesz korzystał z systemów CMS, jak Wordpress czy Joomla, bardzo wiele różnych dodatków, tak
sobie to include'uje, czyli będzie się pojawiać w head.
To nie jest najlepsza praktyka, bo to blokuje renderowanie strony, ale są to bardziej zaawansowane tematy.
Natomiast również możemy w head podłączyć taki skrypt i co jest szalenie istotne tutaj.
W momencie, kiedy przeglądarka dojdzie do tego skryptu, ona pobiera z serwera, w tym momencie jakby czeka
i otwiera ten skrypt. W skrypcie sprawdza.
Aha, utwórz zmienną h1 i znajdź mi na stronie element h1. Na stronie takiego elementu nie ma,
bo jesteśmy w tym miejscu.
Możesz to dokładnie z góry na dół wyobrażać.
Czyli jeżeli jesteśmy w tym miejscu, to nawet element body na stronie nie istnieje.
Czyli kiedy chciałem pobrać h1, nie została znaleziona, została zwrócony null i mamy problem.
No i teraz najprościej ten problem rozwiązać przerzucając ten skrypt na dół.
Bo kiedy strona się wczytuje, h1 zostanie utworzona, dojdziemy do tego skryptu i on sobie ją znajdzi,
nie będzie problemu.
Ale jest jeszcze inny sposób, aby to rozwiązać, w sposób bardzo dobry i taki, z którego powinniśmy korzystać.
Mianowicie przypisanie zdarzenia do dokumentu, które nazywa się DomContentLaouded. Dokument,
kiedy się wczyta nie muszą być wczytane wszystkie obrazki czy skrypty, ale kiedy w ogóle ta struktura zostanie
utworzona, to zostaje odpalone zdarzenie DomContentLoaded i wtedy już możemy wyszukiwać wszystkich w
nim elementów.
Więc chciałbym teraz przypisać sobie do document takie zdarzenie i możemy to zrobić albo przez
onDomContentLoaded albo poprzez i addEventListener.
Najlepiej tak zrobić.
Nazwa zdarzenia to jest Dom, z dużych liter ContentLoaded, następnie funkcja, która zostanie wywołana,
ona również przyjmie jakiś event, możemy do niego za moment zajrzeć.
Tutaj podamy false.
Przejdźmy tutaj.
No i wyświetlmy co w takim evencie się znajduje.
Zobacz teraz, znowu mamy błąd, oczywiście muszę to wykomentować, bo jak już Ci pokazałem w bloku try catch, jeżeli
taki błąd wystąpi, to jak widzisz nasz kod się pod spodem nie wykona.
Więc teraz on się wykonał.
No i mamy taki oto i event. Ma tutaj dużo mniej właściwości jak możesz zobaczyć, niż były dostępne np.
w MouseEvent.
Natomiast np. event type, możemy się odwołać.
Jest to rzeczywiście DomContentLoaded.
No i teraz możemy spróbować zrobić rzecz taką samą, czyli to, co było wcześniej
wstawimy do tej funkcji, odkomentuje i zobaczmy teraz czy textContent się wywoła.
Dokładnie tak jest.
A skrypt cały czas jest u góry, czyli w momencie wczytywania tego skryptu,
nie istnieje jeszcze ta h1, ale zarejestrowaliśmy zdarzenie na dokumencie, który już istnieje i
DomContentLoaded
wykona się wtedy, kiedy ta struktura zostanie załadowana.
Więc dzięki temu, możemy bezpiecznie uruchamiać taki kod.
Teraz chce ci pokazać drugie zdarzenie.
Zanim to zrobię, to jeszcze pokażę ci kilka rzeczy.
Mianowicie mam na tej stronie obrazki, odkomentuję je teraz. Dwa duże obrazki, one się będą wczytywały.
Jak widzisz dosyć pomału, bo dużo zajmują.
I chciałbym powiedzmy pobrać sobie wielkość tych obrazków, więc spróbujmy to zrobić.
Zrobimy to console.log'iem, wrócę to tutaj i to może
wykomentujemy, a tutaj jak widzisz pobrałem ze strony obrazek czyli img.
Wiesz, że możemy to bez problemu zrobić, z tego powodu, że właśnie DomContentLauder wykona się kiedy
cała ta struktura zostanie już zbudowana, czyli śmiało możemy img pobrać.
Natomiast chciałbym teraz na stronie wyświetlić wielkość tego obrazka, czyli img.offsetWidth
i tutaj offsetHeight.
Zobaczmy, co nam się pokaże. Odświeżam i mamy wymiary obrazka, to 0 na 0 pikseli, ups, coś nam nie zadziałało.
No i właśnie, to jest z tego powodu, że DomContentLouded odpala się wtedy, kiedy struktura dokumentu zostanie załadowana,
ale nie czekamy na pobranie się wszystkich skryptów czy innych arkuszy, a także obrazków i teraz pokażę
ci kolejne zdarzenie, które się odpala kiedy absolutnie wszystko zostanie pobrane.
Wszystkie obrazki i wszystkie inne zasoby.
Jest to zdarzenie load dostępne na obiekcie window.
Jest ono również bardzo ważne.
Dlatego teraz odwołamy się do window i addEventListener.
Zdarzenie nazywa się load.
Tutaj będzie funkcja event i tutaj możemy dodać false i to zdarzenie się wykona,
wtedy kiedy wszystko zostanie załadowane.
Jeżeli w nim będziemy chcieli sobie pobrać znowu obrazek i wyświetlić jego rozmiary, zobaczmy, to najpierw
zostanie wykonane DomContentLouder, a dopiero kiedy obrazki zostaną załadowane, jak widzisz, zostało
wykonane to zdarzenie i możemy już odczytać, wielkość tego obrazka, bo po pobraniu wszystkiego ten obrazek
ma już dostępną szerokość oraz wysokość.
Warto zapamiętać, że jeżeli będziemy chcieli manipulować jakąś wysokością, jakiejś treści w zależności
od tego, wysokością czy szerokością, w zależności od tego, co się w niej wczytuje, to musimy zarejestrować
zdarzenie
window.addEventListener load, czyli zdarzenie window loud.
To może być window kropka unload albo jak już wspominałem, nie polecam, abyś to robił, ale gdybyś chciał
przypisać zdarzenie load dla window,
w ten sposób, to przypisujemy je dla body, czyli tutaj unload, również moglibyśmy przypisać to jest dokładnie
taki sam sposób, jak przypisanie tego w ten sposób, do window, wtedy mamy pobrane już wszystko i wszystkie
wielkości obrazków, czy jakiegoś div'a, w którym były obrazki. On, przez te obrazki został rozszerzony.
Są dla nas dostępne.
Kod
Zdarzenie DomContentLoaded i load · 1 min
window.addEventListener("load", function(e) {
var img = document.querySelector("img");
console.log("Wymiary obrazka to: ", img.offsetWidth + "x" + img.offsetHeight + "px");
}, false);
document.addEventListener("DOMContentLoaded", function(e) {
// var h1 = document.querySelector("h1");
// console.log( h1.textContent );
var img = document.querySelector("img");
console.log("Wymiary obrazka to: ", img.offsetWidth + "x" + img.offsetHeight + "px");
}, false);