JavaScript: Obsługa zdarzeń
w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe i Domkniecia
- Format danych JSON oraz praca z AJAX
- Cookies
- Wyrazenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilosc sztuczek i dobrych praktyk
- I wiele, wiele wiecej!
Witaj w kursie JavaScript w Praktyce!
W pierwszym rozdziale tego kursu poznasz bardzo dokładnie koncepcje programowania zorientowanego obiektowo. W jednej z lekcji, omówimy wszystkie z nich na przykładzie pseudo-kodu, niezwiązanego bezpośrednio z językiem JavaScript. Dzięki temu zrozumiesz, jak realizowane jest programowanie obiektowe w wielu popularnych językach programowania. Dowiesz się czym jest klasa, obiekt, instancja, właściwości, metody, a także zrozumiesz takie pojęcia jak dziedziczenie, polimorfizm, abstrakcja czy enkapsulacja. Następnie przejdziemy już do języka JavaScript i do zrozumienia tego, w jaki sposób powyższe koncepcje są w nim zaimplementowane. Język ten nie jest bowiem w 100% klasycznie obiektowy, jak np. język PHP. Co jednak bardzo istotne, JavaScript implementuje tzw. dziedziczenie prototypowe, którego bardzo dogłębne zrozumienie, gwarantuje zrozumienie całego języka JavaScript. Dowiesz się zatem czym są konstruktory i jak je tworzyć, a także jak korzystać z prototypu funkcji. Dzięki temu będziemy mogli wykorzystać obiektowość do własnych celów, co później w praktycznych przykładach uczynimy.Na przestrzeni kilku lekcji zobaczysz krok po kroku, jak w języku JavaScript zaimplementować dziedziczenie wielokrotne. Taka wiedza absolutnie otwiera oczy na zależności rządzące obiektami w tym języku. Dowiesz się również jak rozszerzać wbudowane konstrukcje języka JavaScript czy Obiektowego Modelu Dokumentu, a także kiedy powinniśmy to robić. Omówimy problemy, jakie mogą się pojawiać przy korzystaniu ze słowa kluczowego this, a także sposoby ich rozwiązania. Poznasz 3 bardzo ważne metody funkcji: call, apply i bind.JavaScript ma wiele specyficznych cech, a jedną z nich są tzw. domknięcia. W jednym z rozdziałów zobaczysz, do czego one służą i kiedy powinniśmy z nich korzystać. Dopełnimy tym również wiedzę związaną z programowaniem obiektowym i tzw. prywatnością.Rozdział o obiektowości został celowo umieszczony na samym początku kursu, gdyż zrozumienie tych koncepcji pozwala patrzeć zupełnie inaczej na wszystkie pozostałe. Po tym rozdziale przejdziemy do omówienia bardzo popularnego, lekkiego formatu wymiany danych JSON. Dowiesz się jak wygląda składnia tego formatu, a także jak współpracuje on z językiem JavaScript.Następnie przejdziemy do bardzo ekscytującego tematu, jakim jest technologia AJAX. Dzięki niej możemy wysyłać zapytania do serwera i pobierać dane, bez przeładowywania witryny. Do zrozumienia AJAXa niezbędne jest jednak rozumienie działania protokołu HTTP, na którym opiera się sieć www. Z tego powodu, jedna z lekcji została w 100% poświęcona HTTP i dowiesz się z niej jak wysyłane są żądania i odpowiedzi, a także tzw. nagłówki, które będą dla nas niezwykle istotne. Chwilę później omówimy również bardzo ważne mechanizmy: Same- origin policy i CORS, które blokują możliwość wysyłania żądań AJAX do pewnych serwerów. Kiedy już będziesz rozumiał te niezwykle istotne koncepcje, przejdziemy do napisania pierwszego kodu, wysyłającego asynchroniczne żądanie do serwera. Następnie dowiesz się jak wysyłać, a także odbierać dane z serwera, umieszczać je na stronie oraz śledzić postęp zarówno wysyłania, jak i pobierania danych.W tym rozdziale na przestrzeni kilku lekcji napiszemy swoją własną bibliotekę AJAX, która pozwoli w niezwykle łatwy sposób wysyłać i odbierać dane. Skorzystamy w niej już w kolejnej lekcji, gdzie zobaczysz, jak wysłać wiadomość e-mail z użyciem AJAX i PHP po stronie serwera. Gotowy skrypt, będziesz mógł umieścić na własnej stronie internetowej. Na zakończenie tego rozdziału omówimy również dokładnie niezwykle sprytną technikę o nazwie JSONP, które pozwala wysyłać tzw. żądania “cross-origin”. Przekonasz się dlaczego taka technika powstała i jak współpraca klienta i serwera potrafi obejść zabezpieczenia przeglądarek.Kolejnym tematem omówionym w kursie będą Cookies, czyli tzw. ciasteczka. Dowiesz się czym są, w jakim celu istnieją, a także jak są ustawianie przez serwer. Co ciekawe, również z poziomu języka JavaScript będziemy mieli do nich dostęp, a zatem zobaczysz jak je ustawiać i odczytywać. Na tym etapie przyda nam się wiedza zdobyta w lekcji o protokole HTTP.W kursie znajdziesz również rozdział poświęcony w 100% wyrażeniom regularnym. To mechanizm języka, który pozwala dopasowywać tekst do definiowanych przez nas wzorców. Wyrażenia regularne potrafią być bardzo zaawansowane i odstraszać, dlatego rozłożymy je na czynniki pierwsze, byś dokładnie je zrozumiał. Na przestrzeni wielu lekcji dowiesz się jakie są specjalne symbole wykorzystywane przy wyrażeniach regularnych, czym są kwantyfikatory, kotwice czy np. grupowanie. Następnie przejdziemy do wykorzystania wyrażeń regularnych w języku JavaScript. Poznasz zarówno metody obiektu RegExp jak i te dostępne na obiekcie String. Dzięki nim będziemy mogli wyszukiwać np. adresów e- mail w podanym tekście, usuwać je lub zamieniać na coś innego. Jako praktyczny projekt, stworzymy “Antybluzgacz”. Wykorzystamy do tego celu programowanie obiektowe, a sama aplikacja będzie pozwalała filtrować wpisywany przez użytkownika tekst wiadomości i wyłapywać w nim niecenzuralne słowa. Wszystkie z nich zamienimy na przypadkową reprezentację znaków, np. $#!@%^. Ten projekt pokaże Ci nie tylko jak korzystać z wyrażeń regularnych, ale także jak profesjonalnie pracować z kodem JavaScript.W przedostatnim rozdziale tego kursu znajdziesz lekcje związane z dobrymi praktykami pracy. Omówimy tzw. “strict mode” języka JavaScript, zagadnienia związane z minifikacją i konkatenacją skryptów, sprawdzaniem poprawności pisanego kodu oraz delegacją zdarzeń DOM.Na końcu kursu znajdziesz 10 krótkich lekcji z serii Tips & Tricks, które przybliżą Ci wiele ciekawych konstrukcji języka JavaScript, a także technik na rozwiązanie różnych problemów. Zobaczysz np. jak wczytać obrazy w tle czy jak wyświetlić na pasku tytułowym witryny migające powiadomienie.Podsumowując, kurs ten jest dopełnieniem wiedzy z zakresu języka JavaScript i Obiektowego Modelu Dokumentu z kursu “JavaScript od Podstaw”. Poprzedni kurs nie jest wymagany, lecz jego przerobienie z pewnością pozwoli dużo lepiej przyswoić wiedzę z tego kursu, gdyż były one przygotowywane równocześnie. Oba te materiały, pozwolą od zera, wskoczyć na naprawdę wysoki poziom rozumienia języka, a także dobrych praktyk pisania kodu.
Kurs JavaScript w Praktyce to między innymi:
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe
- Domknięcia
- Format danych JSON
- Praca z AJAX
- Cookies
- Wyrażenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilość sztuczek i dobrych praktyk
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Do tego kursu mogą jednak przystąpić wszystkie osoby, które znają już podstawy języka HTML, CSS i JavaScript i chcą poszerzyć swoją wiedzę, a także spojrzeć zupełnie inaczej na ten język.
Kontynuujemy pracę na przykładzie z lekcji poprzedniej i pokażę ci teraz jak możemy zarejestrować na
tym naszym obiekcie xhr
zdarzenia których jest dosyć sporo.
I one są dla nas bardzo bardzo przydatne więc wróćmy do naszego kodu i teraz mówiłem ci że pomiędzy
open a pomiędzy send możemy robić pewne rzeczy i to właśnie w tym miejscu będziemy chcieli zarejestrować
sobie zdarzenia.
Robimy to dokładnie tak samo jak robimy to w przypadku obiektowego modelu dokumentu na przykład zdarzenie
kliknięcia dla jakiegoś elementu div czy linku więc możemy to zrobić na kilka sposobów np. poprzez add
event listener albo możemy to zrobić jeżeli tylko jedno takie zdarzenie będzie obsługiwane poprzez metodę
on czyli możemy napisać xhr następnie on i tutaj mamy kilka różnych zdarzeń.
Najważniejsze dla nas będzie takie które nazywa się ready state change a więc on ready state change
ready state już ci pokazywałem
Więc tutaj mamy zdarzenie na zmianę tego ready state i tutaj przypiszemy sobie funkcję.
Ona oczywiście tak samo jak w przypadku obsługi zdarzeń kliknięcia czy czegokolwiek przyjmuje sobie
tutaj event w którym różne informacje się znajdą i ta funkcja się będzie wykonywać kiedy zmieni się
ready state.
Czyli możesz się domyślać że będzie się wykonywać wielokrotnie.
W zasadzie ten ready state zwrócimy z powrotem tutaj będziemy wiedzieli co się dzieje czyli zarejestrowaliśmy takie jedno
zdarzenie i teraz będziemy chcieli znowu wysłać zapytanie get do serwera i będziemy chcieli tutaj zrobić
console log.
W zasadzie możemy te ready state usunąć które były wcześniej z tego przykładu a wpiszmy sobie tutaj ready state.
I co jest ważne to możemy się tutaj odwołać do xhr ready state
albo do this czyli wewnątrz tutaj tej funkcji this będzie kierował na ten obiekt.
Mam nadzieję że jest to dla ciebie jasne bo w przypadku kliknięcia również jest podobnie na którym obiekcie
to zarejestrujemy takie zdarzenie.
Ponadto kieruje this tutaj wewnątrz więc możemy w zasadzie sobie napisać this console log this ready .
No i zobaczymy ile razy nam się taki console log wykona więc ile razy to się wykona ile razy się taki ready
state zmieni.
Zobaczmy.
Mamy 2 3 i 4 czyli tak jak wspominałem 2 to jest headers received a następnie 3 jest loading i 4 to jest done czyli 3 razy taka
funkcja się wykonała i tak jak ci wspomniałem kiedy mamy już tutaj 4 czyli wszystko jest przesłane to
wtedy możemy odczytać dane które dla nas zostały przesłane bo jeżeli byśmy to zrobili wcześniej to nie
będą one dla nas dostępne.
Z tego powodu możesz się domyślić iż taka funkcja wykonująca się kilka razy może mieć tutaj if i zróbmy
sobie taki if napiszemy tutaj if readystate równa się cztery.
To jest zwykły number więc możemy w ten sposób porównać.
Czyli jeżeli readystate równa się cztery to znaczy że doszliśmy do samego końca i wszystko się wczytało.
Natomiast jest tam jeszcze jedna bardzo ważna właściwość którą chce ci pokazać napiszmy sobie this statusi
zrobimy to w console.
W ten oto sposób zerknijmy co teraz będzie w konsoli.
Jak widzisz tutaj dwa razy mamy 200 i znowu 200 pokazywałem ci w lekcji o protokole HTTP że status code
200 oznacza iż wszystko jest w porządku dlatego w takim if oprócz ready state 4 gdzie mamy done czyli zakończyliśmy
wczytywanie.
Może tam być jakiś błąd status może być zupełnie inny a kiedy done otrzymamy poprawnie to status będzie
200.
Czyli tutaj lepiej sprawdzać te dwie rzeczy czyli jeżeli readystate równa się 4 i this status równa się 200.
Tutaj będzie można obsługiwać jeszcze inne status kody jeżeli będziesz już bardziej zaznajomiony z protokołem
HTTP.
Jeżeli również będziesz pisał jakieś zaplecze serwisowe możesz sobie to dostosować.
Natomiast na razie zostawmy to w ten sposób czyli to co mamy tutaj wykona się tylko raz zobaczmy sobie
console log hej jak widzisz tylko raz się wykonało.
Czyli w tym momencie możemy się odwołać do this czyli do tego xhr następnie response i wyświetlić
to w konsoli.
Jak widzisz dokładnie to zostało nam przesłane kiedy wysłaliśmy żądanie GET pod taki oto adres Ajax
ukośnik o nas to mamy właśnie pod taką zmienną czyli możemy sobie coś z tym zrobić.
I teraz od razu powiem ci że zazwyczaj nie będziemy pobierać całych takich dokumentów tylko będziemy
wysyłać żądania do serwera a on np. będzie odpowiednio skonfigurowany i będzie zwracał nam dane json
itd.
Natomiast chciałem pokazać że kiedy na pasku przeglądarki wciskam enter pod takim adresem to przeglądarka
wysyła żądanie GET otrzymuje taki kod i go renderuje na naszej stronie więc jeżeli wyślemy Ajax pod taki
sam adres no to też ten sam kod otrzymamy.
Natomiast nic z tym przeglądarka nie robi mamy tu po prostu tutaj pod response.
Gdybym jednak całą naszą stronę chciał zamienić na to co zostało przesłane to mamy taką metodę.
Nie jest zbyt polecane z niej korzystanie ale ona nazywa się dokument write.
Zastąpi ona wszystko co jest w naszym dokumencie.
Możemy tak napisać i zerkniemy jak to się wszystko wczyta to powinno się nam zmienić.
Jak widzisz cała ta strona tutaj się przeładowała i została tutaj wczytana ale jak wspomniałem nie jest
to najlepsze rozwiązanie.
Teraz chce Ci pokazać jeszcze inne zdarzenia bo on ready state change jak widzisz wykonuje się wtedy
kiedy zmienia się ready state.
Natomiast możemy przypisać również inne zdarzenia i teraz będę chciał ci je pokazać.
Natomiast aby każde z nich zobaczyć w konsoli to będę chciał stworzyć funkcję która będzie się nazywała
log type.
Zauważ że ta funkcja przyjmuje tutaj event tak samo jak ta funkcja.
I możemy się odwołać do eventu event kropka type
żeby zobaczyć jaki był to typ np. tutaj ready state change
i teraz mogę taką funkcję przypisać do bardzo wielu różnych zdarzeń dla tego obiektu xhr i teraz to wkleję
To są wszystkie zdarzenia które możemy obsłużyć jak widzisz on load start on progress tutaj kiedy zaczynamy
wczytywanie.
Kiedy jest to wczytywane on progress może się wielokrotnie odpalać on abort jest wtedy kiedy porzucimy
takie wczytywanie.
O tym powiem jeszcze za moment.
Następnie on error kiedy jakiś błąd się pojawi on load kiedy wszystko nam się wczyta on timeout kiedy przekroczymy
maksymalny czas o którym powiem za moment i onloadend czyli również na samym końcu do każdego z nich
przypisałem log type aby tego nie powtarzać.
No i zerknijmy sobie teraz w konsoli co się kiedy wykonuje i będziemy mieli nazwę tych zdarzeń a więc odświeżam.
No i mamy tutaj load start jak widzisz następnie progress i na końcu load oraz load end.
Te zdarzenia się wykonały.
Pomiędzy tym jeszcze mieliśmy jeden console log czyli nie wykonało nam się on abort on error ani on timeout bo
to są błędy.
I teraz kiedy się wykona on abort.
Otóż wtedy kiedy na takim obiekcie skorzystamy po wysłaniu z metody abort mamy taką metodę.
Jeżeli z niej skorzystam to znaczy że chcę przerwać wysyłanie bo takie wysyłanie może troszkę więcej
trwać na naszym lokalnym serwerze momentalnie to zostaje wczytane.
Natomiast jeżeli to będzie gdzieś w internecie może to trwać jakiś czas więc on abort wtedy się może
wykonać.
Zróbmy abort i zobaczymy czy on abort się wykona odświeżam.
Jak widzisz abort teraz się wykonało.
Właśnie to jest to zdarzenie i log type wyświetliło event type jako abort to jest taka metoda która jest przydatna
natomiast o co chodzi z timeout. Przed wysłaniem
możemy zdefiniować na takim obiekcie timeout xhr timeout to jest właściwość i tutaj w minisekundach napisać
ile jesteśmy skłonni czekać zanim serwer odeśle odpowiedź napiszmy 1 czyli jedną milisekundę sekundę po tym czasie
chcemy przerwać. Odświeżam.
No i jak widzisz zdarzenie timeout teraz znowu się wykonało.
Nie mamy zdarzenia jak widzisz load bo dane się nam nie wczytały ale za to mamy loadend czyli loadend
zawsze na końcu wczytywanie się nam pojawi.
Natomiast load wyłącznie wtedy kiedy otrzymamy jakieś dane. Poprzez timeout
jak widzisz możesz zdefiniować jaki czas jesteśmy skłonni poczekać na odpowiedź serwera zanim wykona
się zdarzenie on timeout onerror będzie wtedy jeżeli będziemy chcieli wysłać zapytanie pod jakiś nieistniejący
serwer i wtedy ono również się nam tutaj pojawi.
To tyle jeśli chodzi o dodawanie zdarzeń jak widzisz najważniejsze dla nas będzie on ready state change
w której możemy sobie sprawdzić jeżeli readystate to jest 4 jeżeli status jest to 200 to wtedy możemy
coś z tymi danymi zrobić np. przekazać do jakiejś funkcji i dalej gdzieś wyświetlić w kolejnej lekcji
pokażę ci jak możemy dane wysłać do serwera bo tutaj jak widzisz nic nie wysłaliśmy było to tylko żądanie
typu get.