JavaScript: Obiekt JSON
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 obiekt json który dla nas jest dostępny w javascript nie tylko w obiektowym modelu
dokumentu czyli w przeglądarce ale także w innych środowiskach np. w node js i pokażę ci co możemy za
pomocą tego obiektu robić.
Przejdźmy sobie od razu do kodu scripts i utworzyłem tutaj nowy obiekt Person w poprzedniej lekcji pokazywałem
ci jak wygląda poprawny json więc to nie ma z json nic wspólnego.
To jest JavaScriptowy obiekt akurat dla nas JavaScripterów.
Fajna sprawa jest taka że json jest dla nas bardzo naturalnym formatem bo wygląda podobnie jak obiekty
w javascript.
W przypadku ludzi pracujących z innymi językami programowania muszą się oni do takiego formatu przyzwyczaić.
Więc ty już widziałeś że json będzie bardzo podobny do tego formatu aczkolwiek póki co to nie jest
json to jest normalny obiekt i np. gdybym chciał w konsoli się odwołać do Person kropka birthdate kropka
np. Get date to mogę to zrobić.
Z tego powodu że tutaj mamy new date
Czyli zostanie podbili date zapisany nowy obiekt.
Daty i możemy się do tego np. odwołać.
Jak widzisz 15 została zwrócona.
Czyli jest to normalny obiekt.
I teraz pokażę ci że mamy taki obiekt w przeglądarce jak json
W ten sposób globalna taka jakby zmienna i pod tym mamy dwie w zasadzie metody które będą nam potrzebne
parse oraz stringify
I nimi się właśnie w tej lekcji zajmiemy więc możemy się do json odwołać.
I co jest ważne to nie jest konstruktor więc gdybyśmy zrobili type of json to mamy object czyli nie
tworzymy tutaj żadnego new json w żadnym wypadku jest to tylko taki obiekt który ma dwie metody podobnie
jak obiekt math w języku JavaScript.
Mamy zatem obiekt json i wyobraź sobie że te dane które mamy tutaj w obiekcie chcielibyśmy wysłać
na przykład Ajaksem na serwer no i aby móc to wysłać Musimy to zamienić na reprezentację tekstową aby to
zrobić.
Skorzystamy z json stringify.
Jest taka funkcja dostępna i ona nam będzie zwracać tekst więc skoro zwraca to musimy to gdzieś zapisać
nazwijmy sobie zmienną person json.
W ten sposób i następnie json
Kropka.
stringify
W ten sposób i tutaj przekazujemy obiekt albo np. tablicę bo w lekcji poprzedniej pokazałem ci że jsonem
może też być tablica tam akurat była tablica a w niej były obiekty ale gdyby była to tablica w której
byłyby same liczby również możemy to zapisać jako poprawny json.
Nie ma najmniejszego problemu więc json stringify nie tylko na obiektach ale także na tablicach może
być wywoływany albo możemy napisać json stringify 1.
Wtedy też taka jedynka zostanie zamieniona w odpowiedni sposób do zapisu json a więc json stringify
person zamieni nam ten obiekt na reprezentację tekstową no i zobaczymy jak to będzie wyglądać
po odświeżeniu.
Czasem jak widzisz wygląda to w ten sposób czyli zwrócony został nam string tych cudzysłów normalnie
by nie było bo one są tutaj dla nas tylko dlatego że jesteśmy w konsoli gdybyśmy to zapisali do pliku
to byłoby wszystko to pomiędzy nimi i tak jak ci wspominałem w poprzedniej lekcji tutaj miałem bez cudzysłowów
first name chociaż w javascript to mogą cudzysłowy albo apostrofy czyli generalnie może to być string.
Natomiast tutaj zawsze będą podwójne cudzysłowy i mamy nazwę czyli klucz.
Następnie Jan last name itd.
Jak widzisz tablica Hobbies również poprawnie została tutaj zapisana pokazywałem ci w lekcji poprzedniej że
jest to możliwe.
Natomiast co stało się pod birthday gdzie mieliśmy obiekt z datą zobaczmy jak widzisz.
Data została w taki oto sposób zapisana.
Dlaczego tak się stało to jeszcze powiem ci w kolejnej lekcji.
Dlaczego ona jest w ten sposób reprezentowana.
Następnie married mieliśmy tutaj false zostało zapisane salary 2000 również zostało zapisane jako Number.
Ale co się stało z funkcją say hello
Nie została ona nigdzie zapisana.
Czyli json nie przenosi funkcji z tego powodu że takie dane jak tutaj możemy teraz wysłać na serwer
odebrać na przykład z użyciem języka PHP i tam za pomocą odpowiedniej funkcji json encode możemy je odkodować
i zamienić na tablicę w języku PHP i na niej później operować właśnie w tym języku.
Z pomocą zapisów tego języka czyli to wygląda już inaczej niż w języku JavaScript dlatego jest to format
wymiany danych że między różnymi językami możemy je przenosić tutaj zrobiliśmy stringify.
Wyślemy to na serwer na serwerze za pomocą specjalnej funkcji to z powrotem zmienimy na jakiś obiekt
czy tablicę i możemy na tym operować.
Gdybyśmy po stronie serwera mieli node js czyli uruchomioną platformę z JavaScript to moglibyśmy po stronie
serwera to odczytać z powrotem do naszego jsona.
Co pokaże ci teraz jak możemy zrobić.
Czyli gdybym znowu chciał ten tekst zamienić na prawdziwy obiekt taki jak tutaj to mogę sobie stworzyć
zmienną nazwijmy ją Person Again czyli Person znów.
I teraz json Parse.
Jest to odwrotność metody stringify.
I tutaj podajemy String czyli skoro tutaj mamy string to to podajemy person json OK.
No i teraz zobaczmy co mamy pod zmienną person again
Zobaczmy jak widzisz jest to obiekt javascript gdzie będziemy mogli po kropce się odwołać do first name last name
itd
hobbies jest to tablica wszystko działa.
Natomiast data jak widzisz już nie została z powrotem zamieniona na obiekt daty czyli nie mogę się teraz
odwołać do Person again.
Kropka birthday
Kropka get date
Dlatego że to jest String co z tym możemy zrobić pokażę ci w lekcji kolejnej.
Niemniej jednak widzisz jak to działa i tak jak wspomniałem gdybyśmy po stronie serwera mieli np. node js
to tutaj robimy sobie stringify.
Wysyłamy to na serwer a po stronie serwera w JavaScript działa dokładnie w ten sam sposób czyli to
co mamy tutaj zamieniamy z powrotem na obiekt.
Teraz chcę Ci pokazać że funkcja stringify przyjmuje jeszcze dwa parametry.
Tutaj jako drugi parametr oprócz obiektu ona może przyjąć funkcję o czym powiem w lekcji kolejnej a
następnie mamy trzeci parametr a więc aby podać trzeci parametr musimy też podać drugi.
Skoro nie chce korzystać z tej funkcji to podamy sobie tutaj null i nic się nie stanie.
Otóż ostatni parametr jest to indent czyli wcięcie.
Dlatego może to najpierw pokaże że jeżeli mamy Person json tutaj w przeglądarce jest to taki oto
ciąg znaków możemy sobie to skopiować tutaj w konsoli mamy taką metodę jak copy i to co tutaj przekażemy
zostanie do schowka skopiowane więc napiszemy person json OK i teraz otworze tutaj nowy plik i wkleję
czyli tak wygląda ten json natomiast możemy tutaj jak wspomniałem jako trzeci parametr czyli drugi
to jest funkcja pokaże ją w lekcji kolejnej damy null.
Trzeci parametr możemy ustawić wcięcie czyli ilość spacji jaka ma być aby zrobić wcięcie.
Ja teraz w edytorze możesz to tutaj u dołu zobaczyć mam ustawione spaces 4 po to aby przy wcięciach kiedy robię
sobie tabulator tak jak tutaj np. robiło mi 4 spacje.
No i chciałbym aby ten json również był w ten sposób zapisany czyli tutaj ilość znaków dla wcięć można
podać podajemy sobie i teraz odświeżam.
Jeżeli raz jeszcze zrobimy copy person json przejdę do tego pliku i wklej go poniżej to jak możesz
zobaczyć wszędzie tutaj mamy cztery wycięcia tutaj jest osiem i tak dalej czyli mamy to ładnie sformatowane
i mógłbyś zapytać dlaczego jest to przydatne.
Otóż tutaj po stronie klienta w javascript nie możemy zapisywać plików na dysku użytkownika ale w JavaScript
który jest dostępny np. w node js pozwala nam tworzyć i zapisywać pliki.
Więc gdybyśmy chcieli pobrać z bazy danych na przykład jakieś dane zamienimy je na json i chcemy zapisać
w pliku takim aby było to łatwe do przeczytania bo możemy właśnie z takiej metody skorzystać czyli json
stringify
I następnie podać tutaj trzeci parametr to jest ilość wcięć