JavaScript: Serializowanie obiektów
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.
To już ostatnia lekcja o json natomiast chciałbym pokazać jeszcze serializowanie i deserializowanie obiektów
a w zasadzie jakie jeszcze mamy opcje oprócz tego co już pokazałem.
Mam tutaj znowu taki obiekt jak widzisz i tutaj mam drugi obiekt w którym dodałem jeszcze zip code pattern
i tutaj mamy wyrażenie regularne.
Nie martw się że jeszcze nie wiesz co znaczy ten zapis bo już wkrótce w konkursie będziemy o tym bardzo
dokładnie rozmawiać i teraz znowu będę chciał stworzyć sobie Person json i zrobimy json String
Person raz jeszcze to wyświetlmy w przeglądarce abyśmy wiedzieli z czym mamy do czynienia czyli Person.
json wygląda następująco tak jak ci mówiłem w lekcji poprzedniej data na przykład została zapisana w ten
sposób a jeżeli chodzi o nasze zip code pattern to mamy tutaj pusty obiekt a było to wyrażenie regularne.
Teraz będę chciał pokazać co możemy z tym zrobić.
Otóż mówiłem ci w lekcji poprzedniej że oprócz pierwszego parametru który zazwyczaj podajemy tzn.
Zawsze go podajemy i nie podajemy innych.
Możemy podać drugi oraz trzeci trzeci to była wielkość wcięcia w spacjach a drugi jest to funkcja która
pozwoli nam operować na każdej z tych właściwości kiedy są one zamieniane więc napiszemy tutaj function.
I ta funkcja przyjmuje dwa parametry pierwszy jest to nazwa czyli np. salary a drugi to value czyli np.
dwa tysiące więc możemy napisać n jak name i v jak value albo możemy napisać jak k key value.
Wtedy będziemy mieć to lepiej podpisane tutaj czyli klucz wartość.
I teraz co jest niesłychanie ważne to wyświetlmy sobie może najpierw w konsoli te dwie zmienne o co tam chodzi
ale na początku napiszę return value.
Zaraz ci powiem dlaczego zróbmy sobie console log klucz console log wartość ok.
I wyświetlmy
Dużo się tego wyświetliło
Więc może jeszcze po każdym z nich console log wyświetlimy sobie takie kreski żeby to jakoś oddzielić ok
I teraz to lepiej widać czyli na początku mieliśmy temp id
pod n i value tutaj.
Czyli rzeczywiście się to zgadza.
Tutaj mieliśmy value jest to string.
Zobaczmy sobie niżej jak to będzie wyglądać.
Tu gdzie hobbies jako value mieliśmy tablice i to jest ważne.
Natomiast kolejna ciekawa rzecz jest taka że mamy tutaj tę tablicę i ona również w całości będzie serializowana
Zauważ co się dzieje później nie mamy birthdate po hobbies ale mamy zero sport 1 technologia i tak dalej.
Czyli kiedy przejdziemy do tablicy.
W zasadzie mogę ci to pokazać na tej tablicy props
Po to ją stworzyłem.
Jak widzisz ona tutaj nie ma klucz wartość ale same wartości.
Tak to będzie wyglądać.
Czyli zero to będzie jakby klucz.
Bo to jest po prostu index a wartość to będzie na przykład first name
Tak to wygląda jeżeli tutaj wrócimy do Person No to widzisz że tak to jest.
Przechodzimy sobie tutaj czyli jakby doszliśmy do hobbies tutaj i pod v mieliśmy tablicę w następnej iteracji
jakby weszliśmy całkowicie do tej tablicy i mieliśmy zero sport 1 technologie i tak dalej czyli tak
to wygląda i teraz ważne jest co z tej funkcji zwracamy ja zwróciłem za każdym razem v czyli value no
i zobaczmy czy gdybyśmy tutaj się odwołali do person json to czy będzie wszystko tak samo jak wcześniej.
Okazuje się że tak.
Natomiast mamy tutaj dostęp do każdej wartości i możemy coś z nią zrobić i następnie ją zwrócić.
Czyli powiedzmy że każdą z tych wartości chcemy przepuścić przez to upper case
Jeżeli jest to String więc moglibyśmy tutaj sobie sprawdzić if type of v czyli naszej wartości równa
się string to moglibyśmy zrobić return v to upper case.
W ten sposób ok.
A w przeciwnym wypadku po prostu ją zwracamy.
Musimy coś zwrócić zaraz powiem dlaczego teraz person json
Zobaczmy jak widzisz wszędzie gdzie mieliśmy string.
Zostało to zamienione na upper case jeszcze inne duże litery teraz ci powiem dlaczego tutaj coś zwracamy
bo jeżeli zwrócimy undefined albo nic funkcja nie zwróci czyli zwróci undefined poza naszymi plecami to
wtedy taka właściwość nie zostanie ujęta czyli gdybyśmy chcieli ten obiekt zserializować wysłać na serwer
ale tego tempa id np. nie chcemy to możemy sobie sprawdzić czy pierwszy znak takiej właściwości jest
podkreślnik
Albo możemy wpisać całą właściwość n a w zasadzie k czyli klucz to będzie nasza właściwość więc możemy
napisać jeżeli k równa się temp.
id
Tak chcemy zwrócić undefined to zostanie pominięte albo moglibyśmy się odwołać do k
Czyli jeżeli pierwszy znak jest to podkreśnik np. czy wszystkie właściwości które mają podkreślnik
Nie chcemy ich zwracać.
Czyli zwracamy.
undefined
Możemy również napisać po prostu return bez niczego.
Będzie to działać tak samo w przeciwnym wypadku czyli jeśli będziemy tutaj zwracamy wartość zerknijmy
sobie person json i teraz możesz zobaczyć że tego temp id tutaj nie mamy a pozostałe rzeczy już
tutaj są.
Więc to jest taka funkcja w przypadku serializowania.
Teraz chcę ci pokazać jak możemy zserializować na przykład takie wyrażenie regularne bo mieliśmy z tym problem.
I na końcu wyrażenie regularne zostało zapisane jako pusty obiekt również sobie z tym możemy poradzić.
Albo tutaj odwołując się do k jeżeli będzie równe zip code pattern to możemy coś zrobić albo jeszcze inaczej.
Przecież to jest obiekt wyrażenia regularnego o tym w tym kursie jeszcze będę mówił.
Więc możemy sprawdzić czy k czyli właśnie ten obiekt jest instancją odpowiedniej klasy czy konstruktora
o czym w tym kursie mówiliśmy.
A więc jeżeli k instance of reg exp to tak samo jak byśmy tutaj napisali k instance of array czyli jeżeli mamy do czynienia
z tablicą to ci w tym kursie już pokazywałem
Czyli jeżeli tutaj gdzieś natkniemy się na jakiś obiekt który jest reg exp czyli wyrażeniem regularnym to
możemy się do niego odwołać i zwrócić pod v będzie cały ten obiekt v Source dlatego że wyrażenia regularne
ja ci to może pokaże w konsoli jeżeli otworzymy sobie takie wyrażenie regularne to możemy się odwołać do jego
source
I taki tekst zostanie do nas zwrócony.
I taki tekst już możemy zapisać to jest coś lepszego niż coś co mamy tutaj bo to będzie można później
z powrotem zmaterializować na obiekt.
Czyli jeżeli k instance of reg exp to zwracamy.
v source to będzie tekst.
No i teraz jeżeli sobie to zapiszemy person json zobacz na końcu zip code pattern powinniśmy tutaj mieć
poprawny ok
źle nie klucz bo przecież klucz to zawsze jest String String instance of w reg exp nie zadziała.
Czyli tutaj musi być v.
A więc sprawdzamy czy to jest instancją reg exp.
Raz jeszcze zobaczmy został tutaj zapisany i będziemy mogli po stronie serwera np. się do niego odwołać
i również go użyć.
Teraz chce Ci pokazać jeszcze jeden trik żebyśmy nie musieli tego robić tutaj w ten sposób to możemy
dodać do naszego obiektu metodę
to jason, być może pamiętasz jak w tym kursie mówiłem ci o metodzie to String która jest używana przez
interpreter JavaScript w różnych sytuacjach i jest podobnie z metodą to jason jest w JavaScript tylko jeden
obiekt który posiada metodę to json i to jest data z tego właśnie powodu data została w taki sposób
zapisana.
Jeżeli przejdziemy do date prototype to okaże się ta że jest tam coś takiego jak to jason w tym miejscu
żaden inny obiekt nie ma czegoś takiego jak to json ale możemy to dodać.
Więc jeżeli teraz wyżej rozszerzymy sobie prototyp reg exp czyli wyrażeń regularnych jeszcze o tym będę mówił
w konkursie prototype i napiszemy to json.
Chciałbym żeby ta funkcja zwracała this source czyli to co tutaj zrobiłem przed momentem bo teraz nie
musimy korzystać z takich funkcji jak tutaj mieliśmy bo za każdym razem kiedy to będzie serializowane to jakby
funkcja json stringify sprawdzi czy dany obiekt który realizuje ma metodę to json
i zobaczmy czy zadziała sprawdzimy jeszcze raz person json i okazuje się że tym razem
nam to znowu zadziałało i tak samo będzie z twoimi obiektami które będziesz tworzył.
Pamiętaj że możesz do nich dodać metodę to json kiedy ktoś będzie chciał je zamienić na stringi np.
przesłać na serwer to one w odpowiedni sposób zostaną zamienione a od ciebie zależy co z nich z nich zwrócisz
teraz chcę Ci pokazać jeszcze drugą metodę czyli json parse już ci ją pokazywałem w lekcji poprzedniej
ale ona też przyjmuje funkcję w której możemy takie rzeczy obsłużyć czyli z powrotem np. date zamienić
na prawdziwy obiekt date wpisze ją teraz tutaj szybko.
Czyli znowu zmienna będzie się nazywała person again.
json parse tutaj musiałem podać String czyli Person json
I druga funkcja.
Ona wygląda tak samo jak w tym przypadku czyli będziemy tutaj mieli klucz i wartość ok.
I to co ona zwróci zostanie zapisane w naszym obiekcie który jest tutaj tworzony.
Tutaj w zasadzie wszystko będzie stringiem więc nie możemy sobie sprawdzić tak jak wcześniej sprawdzałem czy
mamy na przykład datę itd.
Ale jeżeli wiemy że Birthdate tak nazwaliśmy datę to możemy tutaj napisać If k czyli klucz równa się
birthdate to będziemy chcieli wtedy stworzyć nowy obiekt daty więc napiszemy return new date i tutaj
skorzystamy z date
Mamy taką taką funkcję parse pozwala nam to sparsować datę jeżeli jest zapisana w odpowiednim formacie
taki format jak najbardziej przyjmuje jeszcze kilka innych.
Jeżeli to przekażemy więc napisać date parse i przekazać value
Czyli to co tam mieliśmy i taki obiekt zostanie zwrócony.
Sprawdźmy teraz person again
Mamy undefined
Czyli coś poszło nie tak.
Oczywiście w przeciwnym wypadku musimy zwrócić wartość ok. zobaczmy person again.
I mamy teraz obiekt i tutaj gdzie mieliśmy datę mamy tak naprawdę obiekt daty.
Może tutaj tego nie widać ale jeżeli tutaj przejdziemy birthdate jak widzisz proto kieruję na datę czyli
mogę się odwołać do person again kropka birthdate kropka np. get date.
Czyli to poprawnie zostało zamienione na datę.
Podobnie zrobimy z naszym reg exp który tam został zapisany.
Teraz to skopiuje.
Wygląda to następująco jeżeli key równa się zip code pattern
Czyli to co tutaj mieliśmy będziemy tam mieli tekst który sobie wcześniej dzięki temu zserializowaliśmy
Możemy zwrócić nowy obiekt z wyrażeniem regularnym przekazując tutaj v i sprawdźmy raz jeszcze.
Person again.
Jeśli sobie tutaj przejdziemy to powinniśmy zobaczyć coś takiego jak zip code pattern.
W tym miejscu i faktycznie jest to wyrażenie regularne.
Mam nadzieję że to co ci pokazałem w tych kilku lekcjach da Ci bardzo dobre zrozumienie tego czym jest
json i przede wszystkim jak możemy pracować z tymi funkcjami bo często wykorzystywane są one tylko
jako json stringify i podajemy pierwszy parametr a także json parse i również tylko jeden parametr.
A widzisz że możemy tutaj więcej parametrów podać i możemy mieć nad tym wszystkim większą kontrolę.
Do json jeszcze w tym kursie wrócimy kiedy będziemy zajmować się Ajaxem.