JavaScript: Czym są zdarzenia

0:00Nieodzownym elementem tworzenia aplikacji

0:02internetowych z użyciem języka JavaScript jest korzystanie ze zdarzeń.

0:06I w tej lekcji odpowiemy sobie krótko, na czym te zdarzenia polegają.

0:11Wyobraźmy sobie taką sytuację, mamy stronę

0:13internetową i jakieś dwa obrazki w formie galerii i teraz chcielibyśmy po kliknięciu

0:17w jeden z tych obrazków wczytać jego powiększoną wersję.

0:21Jest to coś, czego nie da się zrobić z użyciem HTML i CSS.

0:25Do tego potrzebujemy właśnie języka JavaScript, ale nie tylko, bo musimy

0:28skorzystać z tak zwanych zdarzeń w przeglądarce internetowej.

0:32Zdarzenia polegają na tym, że możemy jakby powiedzieć z poziomu naszego kodu

0:35przeglądarce, że jeżeli na przykład ktoś kliknie w dany element, to chcemy wywołać

0:40naszą funkcję JavaScript, no i w tej funkcji moglibyśmy coś zrobić, np.

0:44utworzyć nowy element z tym powiększonym obrazkiem i wstawić go na stronę.

0:48Więc wyobraźmy sobie kliknięcie w jeden z

0:50tych obrazków i następnie pokazanie większego elementu.

0:54A zatem tutaj nie tylko musimy skorzystać

0:56z języka JavaScript, ale także ze zdarzeń w przeglądarce internetowej.

1:00Zdarzenia te mogą być podzielone na kilka grup.

1:02To znaczy np. takie, które wywołuje użytkownik gdzieś

1:05klikając, albo takie, które są wykonywane przez przeglądarkę, np.

1:09kiedy strona się wczyta.

1:10A zatem zerknijmy sobie na te najważniejsze grupy.

1:13Będziemy mieli tutaj

1:14UI events i to są właśnie te eventy, których nazwy tutaj podaję, takie jak load,

1:18unload, resize czy scroll, które będą się wywoływać np.

1:22kiedy cała strona się wczyta, albo kiedy

1:24ktoś chwyci za przeglądarkę i ją zeskanuje, czyli po prostu zmniejszy okno

1:28wtedy wywoła się takie zdarzenie resize,

1:30kiedy będzie przewijał kursorem

1:32myszy będzie wielokrotnie wywoływane zdarzenie scroll.

1:35Oznacza to tylko tyle, że my w naszym kodzie możemy zarejestrować funkcje, które

1:38będą się wykonywać właśnie kiedy te zdarzenia się wydarzą.

1:42Następnie mamy np.

1:43Mouse events i to są wszelkie zdarzenia

1:45związane z myszą, czyli kliknięcie na jakiś element, podwójne kliknięcie,

1:49najechanie myszą na ten element czy opuszczenie myszy z tego elementu.

1:54To oczywiście nie wszystkie zdarzenia.

1:55Ja tutaj podałem tylko te najważniejsze, aby Ci uzmysłowić jak to wygląda.

1:59Następną grupą będą Keyboard events i będzie to np.

2:02wciśnięcie przycisku albo podniesienie przycisku np.

2:06widzisz, tutaj mamy zdarzenie keydown, więc

2:07ono się wywoła wtedy kiedy przycisk będzie wciśnięty i jeszcze zanim zdążymy go puścić.

2:12A np. keypress wywoła się wtedy, kiedy wciśniemy i puścimy przycisk.

2:15I w różnych sytuacjach różne te zdarzenia mogą okazać się dla nas bardzo pomocne.

2:20No i jeszcze jedną grupą mogą być np. Form events.

2:22To będą zdarzenia związane z formularzami, czyli w momencie, kiedy ktoś będzie chciał

2:26wysłać formularz, wywoła się zdarzenie submit, które możemy przechwycić i np.

2:30zwalidować formularz.

2:32Będą to też takie zdarzenia jak focus czy

2:34input, które się uruchamiają na polach typu input.

2:37Inną grupą zdarzeń mogą być tzw.

2:40Media events, które się będą wywoływać na

2:41elemencie video lub audio i będzie tam na przykład playing, ended

2:45jeżeli zakończymy oglądanie video czy np.

2:47timeupdate, które będzie wywoływane za

2:49każdym razem, gdy będzie zmieniał się czas obejrzenia danego video.

2:54To, co ważne.

2:54Za każdym razem, kiedy wywoła się podana przez nas funkcja na dane zdarzenie,

2:59otrzymamy tam taki specjalny obiekt event, który będzie przechowywał ciekawe i

3:04przydatne informacje na temat zdarzenia, które właśnie się wykonało.

3:07Będzie tam m.in. target, a więc odwołanie

3:10do elementu, na którym wywołało się takie zdarzenie.

3:13Będziemy mogli odczytać np.

3:14współrzędne myszy, czyli gdzie był kursor

3:16myszy w momencie wywołania się takiego zdarzenia.

3:19Możemy również odczytać np.

3:20wciśnięty klawisz, jeżeli byłoby to

3:22zdarzenie o typie keyboard czy powiedzmy ilość wysłanych danych.

3:26Jeżeli będziemy wysyłali Ajaxem dane do serwera, również w zdarzeniach będziemy

3:30mogli odczytywać ile tych danych już się wysłało aby np.

3:34wyświetlić jakiś progress bar.

3:36To zatem tyle jeżeli chodzi o teorię na temat zdarzeń.

3:39W kolejnych lekcjach zobaczysz jak pracować z nimi w praktyce.