JavaScript: Delegacja zdarzeń DOM
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.
W tej lekcji pokażę ci jeszcze jedną bardzo ciekawą technikę optymalizacji która jest związana z obiektowym
modelem dokumentu a nie z javascript bezpośrednio i nazywa się ona delegacją zdarzeń.
Mam sobie taką stronę gdzie mamy paragraf listę i znowu paragraf w kodzie HTML.
Wygląda to następująco tutaj jest to oplecione divem z article i teraz będę chciał do wszystkich paragrafów
tutaj przypisać sobie kliknięcie aby po kliknięciu na taki paragraf zmienić jego kolor.
Przejdźmy sobie tutaj mam pobrany w zmiennej artykuł oraz wszystkie paragrafy poprzez query selector all.
I teraz stworzymy sobie funkcję change color ona będzie wyglądać następująco przypiszemy ją zaraz na kliknięcie
czyli przyjmuje event po kliknięciu w taki paragraf pod event target będziemy mieli ten paragraf.
Czyli możemy mu przypisać style kolor czerwony i teraz będę chciał do każdego paragrafu który tutaj mam.
W tym przypadku są to tylko dwa przypisać takie zdarzenie więc musimy przeiterować po tym obiekcie tablicopodobnym
który tutaj jest zwrócony pożyczymy sobie znanym nam już sposobem od tablicy.
Metodę for each i przeiterujemy ok czyli iterujemy po wszystkich paragrafach tutaj tutaj to przyjmuje p
czyli to będzie jeden poszczególne paragrafy i na kliknięcie przypisuje funkcję
change color.
Czyli po kliknięciu ona się wykona i powinniśmy zmienić jego kolor odświeżmy.
To jest paragraf działa.
Jeśli kliknę na ul na li.
To nie działa i na paragrafie znowu działa.
Teraz jaki jest z tym problem.
Otóż mamy tutaj na stronie tylko dwa paragrafy mamy więcej za to elementów li i teraz my zrobiliśmy w pętli
przypisanie do każdego z tych obiektów który tutaj jest bo wiesz że w przeglądarce w obiektowym modelu dokumentu
to będzie taki obiekt paragrafu do każdego z nich przypisaliśmy na kliknięcie funkcję change color.
Gdyby ich tutaj było 5 10 20 może 10 tysięcy np. komórek tabeli to do każdej z nich czy do każdego takiego
obiektu przypisujemy kliknięcie a wcale tak być nie musi.
Otóż możemy zrobić to inaczej możemy przypisać kliknięcie do elementu div i po kliknięciu gdziekolwiek
w tym elemencie czy na paragraf czy na ul. Tak naprawdę klikamy też w ten element zdarzenie się odpali
i wtedy możemy sprawdzić czy np. kliknęliśmy w p.
Pokażę ci zaraz jeszcze dlaczego może to być przydatne w przypadku takich dwóch elementów.
To nie ma tutaj znaczenia że przypisaliśmy to dwa razy że jest to jakaś zła praktyka przy większej ilości
elementów lepiej delegować.
Takie zdarzenia natomiast chce ci pokazać jak to zrobić i może to sobie wykomentuje a funkcję change color skopiujemy sobie
tutaj poniżej bo będziemy chcieli ją zmodyfikować za sekundę.
Tutaj mam pobrany artykuł czyli ten div i po kliknięciu na niego czyli znowu on click chce wykonać change color.
OK zobaczmy jak to działa.
Jeżeli teraz kliknę gdzieś na paragraf zauważ że to działa ale jeżeli klikamy na li również bo teraz
gdziekolwiek bym nie kliknął tutaj to klikam na diva czyli zdarzenie odpala pod change color przekazujemy
event.
Konkretnie to jest w tym miejscu i event target.
To nie będzie div do którego przypisaliśmy zdarzenie.
Owszem this.
Gdybyśmy sprawdzili tutaj this zobacz w konsoli this to zawsze będzie ten div nieważne gdzie kliknę bo
this reprezentuje obiekt do którego przypisaliśmy tutaj zdarzenie poprzez onclick ale this może być równe e target
ale nie musi.
Jeżeli w tym divie coś się znajduje i klikam np. na paragraf odpala się zdarzenie bo również kliknąłem na diva
w którym ten paragraf jest.
To może wykomentuje ale e target jest to kliknięty element.
I teraz mówię e target style zamień na kolor czerwony.
A ja chciałem zrobić to tylko w paragrafach.
Dlatego teraz skoro pod e target mam np. paragraf to możemy zrobić ifa i w e target następnie node name czyli
sprawdzić jak on się nazywa.
I tutaj to możemy porównać do stringu w przypadku paragrafów to będzie duże p.
W przypadku li byłoby to np. li tylko jeżeli kliknęliśmy na paragraf zobacz to chcę odpalić tą linijkę
kodu.
Czyli teraz będziemy chcieli zmienić ten kolor tylko na paragrafach jeżeli kliknę li czyli e target node name to będzie
li.
Ten warunek się nie wykona.
I teraz jest jeszcze jeden bardzo ważny powód dla którego powinniśmy korzystać często z delegowania
zdarzeń.
Otóż wyobraź sobie co by się stało gdybym dodał tutaj do strony jakiś nowy paragraf.
Napisałem funkcję która to zrobi więc teraz ją będę chciał do naszego kodu wkleić nazwałem funkcję
addPara czyli dodaj paragraf ona tworzy jak widzisz nowy element p w tym miejscu przypisuje mu jakiś tekst
i dodaje go do tego diva article ok więc zróbmy sobie to.
Jak widzisz tutaj mogę klikać to działa teraz wywołajmy add para.
Zobacz na stronie jak wcisnę enter że nowy paragraf się dodał.
I teraz czy po kliknięciu na ten paragraf będziemy mogli zmienić jego kolor.
Okazuje się że tak.
Natomiast gdybyśmy przypisali kliknięcie tak jak pokazałem ci to tutaj to by nam to nie działało dlatego
że taki kod wykonujemy na paragrafach które zostały pobrane na stronie.
Wyobraź sobie że na naszej stronie na początku w zasadzie nie musisz sobie wyobrażać ale widzisz mamy
dwa paragrafy jeżeli do paragrafu tego i tego w tym miejscu przypisywaliśmy change color to jeżeli potem dynamicznie
do strony dodamy paragraf to do niego nie jest to przypisane.
Musielibyśmy tutaj napisać p on click i przypisać tam znowu taką samą akcję.
Więc jeżeli teraz np. Ajaxem pobierzemy z serwera dowolny kod i będziemy chcieli go wstawić na naszą
stronę czy to przez innerHTML czy to będziemy chcieli zrobić poprzez create element albo w jakikolwiek
inny sposób to to że wcześniej przypisaliśmy kliknięcie do jakichś linków czy do paragrafów.
Nie będzie nam działać a w delegowaniu zdarzeń działa.
Zauważ że nie ma tutaj znaczenia czy element istnieje na stronie w momencie przypisywania zdarzenia
bo my zdarzenie przypisujemy do diva.
Wystarczy że ten div istnieje tutaj na stronie i skoro do niego pisaliśmy zdarzenie to wszystko jest
w porządku teraz poprzez add para mogę dodać sobie dowolną liczbę paragrafów i po kliknięciu na którykolwiek
z nich klikamy w diva.
I właśnie to wszystko jest sprawdzane tak jak Ci pokazałem czyli kliknęliśmy paragraf tak i wtedy to zadziała.
Czyli jak widzisz jeżeli przypiszesz do pewnych elementów zdarzenia a potem wczytasz inne elementy tego samego
typu np. Ajaksem albo w inny sposób podasz je na stronę.
Możesz się zdziwić że ty przypisałeś zdarzenia a one nie są do tych elementów opublikowane.
Otóż one muszą być bezpośrednio przypisane do konkretnego elementu i on musi tak jak istnieć w momencie
przypisywania zdarzenia.
Mam nadzieję że teraz rozumiesz a więc z jednej strony optymalizacja tak jak mamy tutaj li i zamiast
do siedmiu elementów przypisywać zdarzenie lepiej przypisać do ul i sprawdzać czy kliknęliśmy na li czyli
optymalizacja to jest jeden powód a drugi jest taki abyśmy mogli wykonywać zdarzenia na elementach które
nie istniały w momencie przypisywania zdarzenia.