w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperW 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.
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 tym rozdziale przechodzimy do bardzo ekscytującej technologii mianowicie do omówienia Ajax'a. Natomiast
abyś zrozumiał jak działa Ajax.
Musisz rozumieć podstawy działania protokołu HTTP które będę chciał Ci przybliżyć właśnie w tej lekcji
HTTP jest to skrót od Hyper Text Transfer Protocol i jest to protokół przesyłania dokumentów hipertekstowych.
Dokumenty hipertekstowe to są po prostu dokumenty HTML.
Nie zmienia to jednak faktu, że za pomocą HTTP możemy przesyłać również inne zasoby takie jak np. obrazki
które przecież nie są kodem HTML. Protokół HTTP umożliwia komunikację pomiędzy wieloma klientami i serwerami
gdzie klientem może być np. przeglądarka internetowa która rozumie protokół HTTP i potrafi według jego
reguł wysłać zapytanie do serwera.
Serwer również musi taki protokół obsługiwać i następnie odeśle do przeglądarki stosowne żądanie o czym
jeszcze będzie za chwilkę. Pod spodem pod tym protokołem
wszystko to jest realizowane na połączeniu TCP IP.
To są już tematy związane typowo z sieciami komputerowymi na domyślnym porcie 80.
Czyli jeżeli w przeglądarce wpisujemy eduweb.pl
Nigdzie nie dopisujemy
po dwukropku tego portu 80.
To oznacza że chcemy aby przeglądarka wysłała żądanie do serwera pod adres eduweb.pl na właśnie domyślnym
porcie 80 na który większość serwerów działa. Co jest bardzo ważne bo komunikacja w protokole HTTP odbywa
się za pomocą par żądań inaczej mówiąc zapytań i odpowiedzi.
Mamy tutaj klienta i będzie to nasza przeglądarka internetowa ale również inne programy mogą wysyłać
takie zapytania na przykład jakaś aplikacja mobilna na iOS czy Android może również wysyłać zapytania HTTP
więc klient to nie musi być przeglądarka internetowa ale tak będzie w przypadku naszego Ajax czyli
mamy klienta i mamy serwer i teraz klient wysyła żądanie inaczej mówiąc zapytanie albo w języku angielskim
Request pod adres jak widzisz HTTP czyli właśnie na protokole HTTP pod adres eduweb.pl serwer przetwarza takie
żądanie i odsyła odpowiedź czyli response to jest właśnie taka para.
żądanie odpowiedź i zawsze tak to będzie wyglądać.
Wysyłamy żądanie i otrzymujemy odpowiedź jeżeli wszystko będzie OK kolejną bardzo ważną informacją na
temat protokołu HTTP jest fakt że ten protokół jest bez stanowy z angielskiego staples i to oznacza
że po każdej takiej parze żądań i odpowiedzi jak przed momentem widziałeś serwer i klient jakby zapominają
o sobie i dla kolejnych tych zasobów proces żądania i odpowiedzi jest powtarzany.
To oznacza że jeżeli wyślemy zapytanie pod eduweb.pl serwer odeśle w odpowiedzi kod HTML i zapomina o sprawie.
Przeglądarka zaczyna odczytywać kod HTML i znajdzie w nim jak wiesz odwołania do obrazków czy odwołania
do CSSów lub np. plików JavaScript.
I dla każdego z nich znowu wyśle żądanie a serwer odeśle odpowiedź.
I tak w kółko.
Teraz przyjrzyjmy się typowim żądań HTTP.
Na początek najbardziej podstawowe i najbardziej wykorzystywane żądanie typu Get które możemy wysłać
np. pod adres Ieduweb.pl lub eduweb.pl
tutaj znak zapytania search itd czyli to jest to co widzimy na pasku w przeglądarce.
Natomiast to jest tylko adres typ żądania to jest zupełnie co innego.
Natomiast jeżeli wpiszemy na pasku adresu w przeglądarce eduweb.pl i wciśniemy Enter to zawsze zostanie
wysłane żądanie typu Get pod taki adres.
Innym bardzo popularnym typem żądania jest post i również pod dowolny adres możemy je wysłać.
Tak więc adres tutaj nie gra roli natomiast co jest bardzo ważne to post jest wysyłany najczęściej kiedy
przesyłane jakieś dane w formularzu logowania lub np. rejestracji.
I teraz żądanie typu Get nie pozwala wysłać danych a żądanie typu POST tak
więc jeżeli w żądaniu typu Get chcemy wysłać dane to musimy je umieścić w adresie URL tak jak tutaj
u góry widzisz znak zapytania search równa się kurs plus javascript po stronie serwera takie żądanie
sobie odbierzemy i możemy sparsować sobie cały ten adres i odczytać z niego że search to było np. kurs JavaScript
natomiast żądania typu POST wystarczy że wyślemy pod adres eduweb.pl takie żądanie a wewnątrz tego żądania
możemy przesłać dane.
Następnie możemy mieć żądanie typu put wysłane pod dowolny adres i np. żądanie typu delete.
Jest ich jeszcze troszkę więcej.
Natomiast to są te najpopularniejsze dwa najpopularniejsze to get i post i get jest właśnie wtedy kiedy
wciśniemy na pasku przeglądarki Enter po wpisaniu adresu albo kiedy przeglądarka chce wysłać żądanie
po np. skrypt CSS który jest opublikowany na stronie to zawsze jest get, put i delete są inne.
I o co w nich chodzi.
Często tworząc aplikacje internetowe takie nowoczesne możemy korzystać z takich żądań jak put czy delete
i put oznacza że chcemy jakieś dane zaktualizować a delete że chcemy coś na serwerze usunąć.
Natomiast tak jak tutaj widzisz możemy wysłać pod adres eduweb.pl ukośnik user 293 żądanie typu delete
i ono samo w sobie nic nie usuwa natomiast oznacza to tylko tyle że po stronie serwera możemy sprawdzić
jaki był typ żądania.
Sprawdzamy że jest to delete i wtedy możemy z adresu sobie odczytać 293 i takiego użytkownika usunąć. Troszeczkę
wyżej widzisz żądanie typu put wysłane pod identyczny adres.
Natomiast może się wtedy stać coś zupełnie innego otóż na serwerze możemy sprawdzić że tym razem było
to żądanie typu put i możemy odczytać tego użytkownika o ID 293 powiedzmy i zaktualizować jakieś jego
dane.
Tak więc samo żądanie nic nie robi ale po stronie serwera możemy rozróżnić że put to powinniśmy dane
zaktualizować a przywileje chcielibyśmy je usunąć.
Mamy jeszcze jeden ciekawy typ żądania jest to head i on działa dokładnie tak samo jak Get ale jeżeli
wyślemy go pod taki adres jak tutaj widzisz to nie pobieramy tego obrazka jpg a jedynie zwrócimy o nim
dane w postaci nagłówków o których będę za chwilę mówił. Gdybyśmy pod ten sam adres wysłali żądanie get
to otrzymamy zarówno nagłówki z odpowiedzią jak i obrazek JPG.
No właśnie o co chodzi z tymi nagłówkami HTTP czyli sieci HTTP headers.
Otóż takie nagłówki są dołączane do każdego żądania i do odpowiedzi.
I dzięki nim klient może poinformować serwer o pewnych rzeczach a serwer może poinformować klienta.
Czyli kiedy na pasku przeglądarki wciska enter
i wpisałem
eduweb.pl to przeglądarka wyśle żądanie typu get do serwera i razem z tym żądaniem będzie wysyłać różne
nagłówki i np. przeglądarka może poinformować wtedy serwer o tym jaką treść akceptuje np. może to być
main type ukośnik html po stronie serwera można to odczytać i coś z tym zrobić.
Możemy również serwer poinformować o tym jakie znamy algorytmy kompresji np. gZIP i po stronie serwera
sprawdzamy ok przeglądarka wysyłając żądanie powiedziała że na kompresję gZIP to wezmę całą treść, skompresuję
ją gZIP i odeślę do przeglądarki.
Bo skoro zna taką kompresję to będzie potrafiła to zdekompresować.
Wraz z takim żądaniem przeglądarka również może przesłać do serwera informację w nagłówku
jakie języki wspiera i serwer również może ale nie musi coś z tym zrobić.
Z kolei serwer też może do przeglądarki odesłać różne informacje w nagłówkach ja ci te nagłówki za chwilę
pokaże może odesłać informację o tym w jakim typie przesłał treść czyli jeżeli prześle nam kod HTML i napisze
że jest to tekst ukośnik HTML to przeglądarka wyrenderuje nam stronę.
Ale gdyby przesłał taki sam kod i napisał że jest to tekst ukośnik plain czyli tekst czysty to w naszej
przeglądarce zobaczymy cały kod bo przeglądarka nie interpretuje tego jako dokument HTML więc jest to
również istotne.
Serwer również może powiedzieć przeglądarce jakim algorytmem skompresował treść bo jeżeli wcześniej
wysłaliśmy do serwera że znamy gzip i jeszcze inne algorytmy serwer może wybrać najlepszy z nich odesłać
skompresowaną treść i poinformować przeglądarkę o tym jakim algorytmem tą treść skompresował
Czy na przykład serwer może powiedzieć nam kiedy ostatni raz zasób został zmodyfikowany czyli kiedy wyślemy
żądanie po jakiś obrazek to serwer może odesłać ten obrazek i powiedzieć że ostatni raz wtedy i wtedy został
zmodyfikowany.
No i oczywiście na sam koniec coś co jest niesłychanie ważne.
Serwer oprócz tego że odeśle nam nagłówki to prześle nam treść dokumentu HTML czy np. plik JavaScript
a więc my wysyłamy z żądaniem nagłówki.
Możemy też wysyłać dane jeżeli będzie to np. żądanie typu post a z powrotem otrzymujemy w odpowiedzi
i nagłówki o samej treści która została przesłana
I oczywiście samą treść teraz zatrzymajmy się na sekundę na czymś co nazywa się statusem odpowiedzi HTTP
z angielskiego HTTP status codes.
Mamy kilka grup takich statusów.
Ja ich wszystkich nie przytaczam to znaczy przytaczam wszystkie grupy ale nie wszystkie statusy.
Czyli kiedy przeglądarka wyśle zapytanie do serwera i serwer odeśle odpowiedź to oprócz wspomnianych
nagłówków i treści odsyła nam również odpowiedni status code.
Jak wspomniałem jest kilka grup i są to grupy 100 200 300 400 oraz 500, 3 cyfrowe status statusy i mamy
taką grupę jak 100.
To może być status 100 czyli continue, kontynuuj, 101 czyli zmieniamy protokół itd.
Czyli jest to grupa informująca o tym co się będzie działo przeglądarkę następnie mamy grupę 200 czyli
np. 200 jest to status ok 201 created itd.
I to oznacza że wszystko poszło OK.
Normalnie kiedy wyślemy żądanie typu Get i przeglądarka odetnie nam odpowiedź to jeżeli wszystko było
w porządku to będzie tam status 200 OK.
Czyli to oznacza że wszystko było w porządku.
Następna grupa 300 to jest grupa informująca o przekierowania np. 301 moved albo 304 not modified.
Czyli jeżeli wyślemy zapytanie pod jakiś adres do serwera serwer może odesłać przeglądarce że zmienił
się adres tego właśnie pliku i przeglądarka może przejść pod nowy adres my tego nawet nie zauważymy następna
grupa jest to grupa 400 i w tej grupie mamy błąd po stronie klienta czyli np. bardzo znany dla nas 404
Not Found oznacza że wpisaliśmy nie poprawny adres.
Czyli to nie serwer ale my popełniliśmy błąd czyli po prostu klient albo 401 unauthorized.
To oznacza że nie podaliśmy np. loginu czy hasła.
Następna grupa ostatnia jest to 500 i to oznacza z kolei błąd po stronie serwera np. 500 internal server
error czy np. 503 servis unavailable, 400,
są to błędy po stronie klienta a 500 po stronie serwera.
Tych oczywiście komunikatów może być więcej ja ich tutaj przytoczyłem tylko najpopularniejsze z nich.
Z tych które my najczęściej będziemy widzieć podglądając statusy.
Co jeszcze ci pokaże to będzie 200 ok 301 moved 500
Internal Server Error czy 404 Not Found.
Na koniec chce ci jeszcze pokazać jak wyglądają te nagłówki o których wspominałem już w przeglądarce
bo możemy to zobaczyć i wtedy najlepiej zrozumiesz to o czym tutaj mówiłem. Jesteśmy na stronie eduweb.pl.
Mam tutaj otwarte narzędzie Chrome Developer Tools i do tej pory korzystaliśmy na przykład z konsoli
czy z panelu Elements a teraz jesteśmy w panelu Network który pozwoli nam tutaj wyświetlić wszystkie
żądania wysyłane i odbierane z serwera.
Dlatego teraz będę chciał odświeżyć stronę i stanie się wtedy rzecz taka że przeglądarka pod adres eduweb.pl
wyśle żądanie typu Get i wszystko będziemy mogli zarejestrować więc odświeżam i możesz zobaczyć że tutaj
bardzo wiele rzeczy się wczytuję.
A w lewym dolnym rogu widzisz ile żądań do serwera zostało wysłanych czyli aby czytać stronę główną
eduweb.pl 182 różne żądania zostały wysłane do serwera i są to pary żądanie i odpowiedź.
I teraz będę chciał wśród wszystkich tych plików które tutaj widzisz gdzie możemy je posortować po metodzie
get post itd.
Czy zobaczyć status będę chciał znaleźć nasz dokument w eduweb.pl od którego wszystko się zaczęło.
Więc może tutaj zeskrolujemy na samą górę.
Jak widzisz jest.
Czyli na samym początku przeglądarka wysłała żądanie typu get do eduweb.pl kliknijmy na to i zobaczmy co zostało
nam zwrócone.
Jak widzisz status o którym mówiłem 200 OK.
Czyli wszystko było w porządku request metod czyli metoda zapytania.
To było Get wszystko również jest OK.
Tak jak ci tłumaczyłem przed chwilą w prezentacji.
Natomiast zauważ ciekawą rzecz mianowicie nagłówki o których wspominałem request headers to są nagłówki
wysyłane z żądaniem get przez przeglądarkę gdzie ona powiedziała serwerowi np. w nagłówku accept że wspiera
tekst ukośnik HTML itd.
Tutaj mamy accept encoding gZIP deflate i sdh.
To o czym ci mówiłem czyli wysyłając takie żądanie powiedziałem serwerowi że serwer może je spakować np.
z gZIP bo ona coś takiego wspiera.
Albo deflate albo jeszcze inne kodowanie to jest bardzo ciekawe że te nagłówki jak widzisz to jest
właśnie taki klucz i wartość jest ich tutaj jeszcze więcej.
Ciasteczko zostało przesłane o ciasteczkach jeszcze będziemy mówić.
No i tak to wygląda.
Czy np. ciąg User Agent przez przeglądarkę przesyłany serwer przetworzył to żądanie poskładał dla nas
z systemu CMS cały kod i odesłał nam z powrotem razem z Response Headers czyli z nagłówkami.
Jak widzisz napisał np. content encoding gzip czyli wśród tych które przeglądarka powiedziała że wspiera wybrał
sobie gzip i tym spakował treść.
Jak widzisz content length to jest długość w bajtach również tej treści czy content type text ukośnik HTML oraz kodowanie
znaków.
To są dla przeglądarki bardzo ważne informacje i dla nas to serwer właśnie teraz zwrócił oprócz tych
nagłówków bo mówimy cały czas o nagłówkach.
Serwer zwrócił nam także kod i jeśli zobaczymy preview to to jest kod HTML przesłany do przeglądarki
i przeglądarka jak wiesz potrafi parsować taki kod zaczęła go pasować i zauważyła że na przykład tutaj
ładowany jest jakiś obrazek favicon więc po taki obrazek wysyła kolejne zapytanie get troszeczkę niżej
widzi że chcemy pobrać style CSS więc wysyła kolejne zapytanie po style CSS i gdybyśmy sobie w panelu Network
znaleźli te style to moglibyśmy zobaczyć jak wyglądały nagłówki właśnie Request dla tych styli oraz
response a także ich treść a więc będzie przeglądarka wysyłać do każdego takiego zasobu zapytanie.
I stąd właśnie uzbierało się ich aż 182.
W przypadku strony głównej mam nadzieję że teraz już to widzisz zapytanie get zostało wysłane do serwera
razem właśnie z takimi nagłówkami.
Odpowiedź została odesłana którą możemy zobaczyć w preview razem z takimi nagłówki czyli i przeglądarka poinformowała
serwer o pewnych rzeczach jak i serwer poinformował przeglądarkę o rzeczach ważnych.
Tak działa właśnie protokół HTTP i bardzo jest ważne abyś to rozumiał dlatego że będziemy teraz mogli
przejść do poznawania Ajax który na tym protokole przecież się opiera.