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.
Zanim przejdziemy już do pisania naszych pierwszych przykładów w Ajax chciałbym jeszcze abyś poznał
dwa bardzo ważne mechanizmy w przeglądarce.
Pierwszy to same origin policy a drugi to CORS.
Zaczniemy od tego pierwszego a więc same-origin policy.
Jest to inaczej reguła tego samego pochodzenia. W przeglądarce internetowej
jest to taki mechanizm który blokuje dostęp do zasobów które są przeznaczone dla innych witryn tzn.
Dla witryn które są serwowane z innego pochodzenia.
Za moment to się rozjaśni.
Wyobraź sobie że na naszej stronie internetowej którą mamy tutaj wczytaną dołączamy sobie jeszcze element iframe być
może do tej pory korzystałeś z takiego iframe bo wystarczy że na swojej stronie umieszczałeś przycisk
Like.
Z Facebooka.
Tak naprawdę kiedy taki przycisk umieszczamy to na naszej stronie ładujemy całkiem oddzielną stronę z serwerów
Facebooka i tam ten przycisk Like ma swoje style ma swoje skrypty po ich kliknięciu coś się dzieje czyli
w głównym oknie naszej strony ładujemy sobie w iframe zupełnie inną stronę.
Podobnie jest z osadzaniem filmików z YouTube'a.
I teraz co jest bardzo ważne.
To taki iframe jest to element HTML on może mieć np. identyfikator.
Gdyby nie miał to również wiesz że w obiektoywym modelu dokumentu do takiego elementu możemy się odwołać.
I teraz nasza strona czyli główny widok naszej strony ma takie obiekty jak np. window czy document.
I teraz iframe.
Jest to również załadowana strona np. z innego serwera a więc ta strona również ma swoje Window i swoje
document.
No i teraz pytanie czy z naszej strony na której mamy skrypty i na której zostało osadzone iframe.
Możemy się odwołać do window czy do document które są widoczne w iframe.
Okazuje się że możemy to zrobić.
Wyobraźmy sobie że ten element iframe który ma identyfikator fb zapisaliśmy w zmiennej fb i będziemy mogli
z naszej strony odwołać się do fb kropka content window oraz do fb.
Kropka content document.
I jak widzisz takie referencje będą wskazywać na ten konkretny obiekt window i document.
Mam nadzieję że rozumiesz o co chodzi.
Jeżeli na tej stronie którą zanotowaliśmy w iframe mamy jakieś funkcje globalne to są one dostępne pod
windows kropka
nazwa tej funkcji czyli jeżeli z naszej strony odwołamy się do fb content window mamy już window to
możemy taką funkcję sobie wywołać.
No właśnie ale pytanie czy rzeczywiście możemy.
Nie do końca i nie zawsze. Przed tym chroni nas właśnie reguła tego samego pochodzenia czyli same origin
policy a więc jeżeli na naszej stronie taki lajk z Facebooka sobie wystawimy to z naszych skryptów
nie będziemy mogli przejść do tego okna czyli do window Facebooka i wykonywać tam jakichś skryptów
czy odczytywać np. ciasteczka o których jeszcze będę mówił.
A więc teraz jaki jest schemat same origin policy i kiedy będziemy mogli z naszego skryptu odwołać
się do window w iframe a kiedy nie.
Wyobraźmy sobie że mamy taki oto adres czyli HTTP eduweb tutaj podałem port 80 to jest domyślny port więc
jego się nie podaje chyba że jest inny i ukośnik kategorie.
I teraz to jest bardzo ważne.
Tutaj na fioletowo jest to uri skin czyli inaczej mówiąc protokół na czerwono host i na niebiesko port
ukośnik kategorie czyli ścieżka.
Nie ma w tym przypadku znaczenia.
I teraz pokażę ci kilka przykładów i zobaczymy czy będą one pasować do reguły tego samego pochodzenia
czy też nie.
Jeżeli będziemy mieli taki oto adres który wygląda identycznie jak u góry ale ma inny protokół zauważ
HTTPS to nie będziemy spełniać reguły tego samego pochodzenia.
Czyli jeżeli na naszej stronie eduweb.pl załadujemy sobie iframe również z eduweb.pl ale z HTTPS czyli bezpiecznym protokołem
to nie spełnia to reguły tego samego pochodzenia i w takim iframe nie będziemy mogli odczytać window
czy document.
Zobaczmy kolejny adres.
Jeżeli będziemy mieli http eduweb port 80 ukośnik support tutaj wszystko gra bo tak naprawdę sprawdzany jest tylko
host protokół i port nie ma znaczenia tutaj już ta ścieżka czyli ukośnik
support.
Tutaj reguła tego samego pochodzenia zdaje egzamin.
Następnie jeżeli będziemy mieli http eduweb.pl i inny port a taka sama ścieżka to tutaj już nie będzie warunek
spełniony z prostego powodu otóż pod takim adresem może być serwowana zupełnie inna strona na naszym
serwerze domyślnie serwer działa na porcie 80 ale możemy skonfigurować inny serwer na porcie 8 tysięcy
i nie będzie to zupełnie ta sama strona to może być zupełnie inny serwer całkiem inny serwis zobaczmy
kolejny adres tutaj mamy files eduweb pl i port 80.
I gdyby tutaj nie files czyli inna subdomena to wszystko byłoby OK.
To że po ukośniku nie mamy już kategorii czy support nie ma już znaczenia.
Tak jak wspominałem ścieżka nie ma znaczenia ale znowu być może na tym etapie nauki to już wiesz.
Możemy files eduweb.pl przekierować na zupełnie inny serwer więc to może być zupełnie inna strona.
Zobaczmy jeszcze jeden zapis czyli HTTP eduweb.pl tutaj nie podałem portu.
Wspominałem ci że domyślny port to jest 80 więc nie powinno być błędu ale tutaj zależy to zależy od
przeglądarki.
Teoretycznie ten adres eduweb pl i eduweb pl dwukropek 80 dokładnie na ten sam host kieruje.
Ale czy tutaj reguła tego samego pochodzenia pozwoli nam przejść dalej czy nie to zależy już od implementacji
i na końcu mamy jeszcze taki adres czyli dokładnie taki sam jak na samej górze ale z dodanym WWW i tutaj
na czerwono a więc www i bez www to są również zupełnie inne hosty teraz co jest jeszcze bardzo istotne
to absolutnie nie ma znaczenia pochodzenie skryptu ale pochodzenie dokumentu w którym ten skrypt został
uruchomiony.
Czyli jeżeli tutaj mamy przeglądarkę i uruchomiliśmy tam http eduweb pl to właśnie będzie nasze origin
i jeżeli na tej stronie gdziekolwiek zalinkowaliśmy sobie w tagu script jakiś skrypt jak widzisz tutaj mamy
taki skrypt i załóżmy że ten skrypt jest właśnie z dev kropka example itd.
Jeżeli na naszej stronie sobie go wystawimy w script src to to zupełnie nie ma znaczenia czyli pochodzenie
skryptu nie ma znaczenia ma znaczenie że on się wywołał na naszej stronie i wtedy będziemy sprawdzać
czy skrypt wywołany na stronie eduweb pl ma dostęp np. do iframe z https z eduweb pl czyli ma znaczenie strona a
nie skrypt skąd pochodzi.
Jeśli chodzi o inne blokady które są wspierane przez same origin policy bo ja ci wspomniałem że przez
to nie będziemy mogli się odwołać np. do tego window w iframe.
Ale to nie tylko w takich sytuacjach będzie w ten sposób działać.
Na przykład jeżeli chodzi o ciasteczka czy local storage local storage mówię w jednym z kursów na eduweb.pl
HTML 5 JavaScript techniki zaawansowane to również tutaj reguła same origin policy będzie aplikowana.
Jeżeli chodzi o ciasteczka ona wygląda troszeczkę inaczej i w tym kursie jeszcze o tym będziemy mówić.
To oznacza tylko tyle że jeżeli mamy jakieś ciasteczka przypisane np. do eduweb.pl to nie może być takiej
sytuacji że kiedy wejdziemy na witrynę Google pl i oni tam mają swoje skrypty to ich skrypt będzie mógł
odczytać np. ciasteczka czy dany local storage zapisany dla eduweb.pl następnie nie pozwala nam wysłać zapytań
Ajax do innych domen to jest niesłychanie ważne.
Dlatego cała ta lekcja w której przy okazji nauczyłeś się trochę rzeczy o iframe tak naprawdę przygotowuje nas
do przejścia do tematu Ajaksu i dlaczego jest to ważne.
Otóż właśnie dlatego że jeżeli będziemy na stronie eduweb.pl będziemy mieli skrypty i taki skrypt spróbuje wysłać
sobie zapytanie Ajax do serwera eduweb.pl.
Ok będziemy mogli ściągnąć dane ale jeżeli taki skrypt uruchomiony na naszej stronie będzie próbował
wysłać zapytanie np. get do innego serwera to tutaj wchodzi już w rachubę
same origin policy i te schematy które ci przed momentem pokazywałem jeżeli będą na czerwono tak jak
mieliśmy łapkę w dół to nie będziemy mogli pod taki adres wysłać Ajax.
Natomiast to można obejść i do tego służy specyfikacja Cors czyli Cross Origin Resource Sharing o której
teraz słów kilka.
Otóż Cors jest to taka technika która pozwala nam obejść ten mechanizm Same Origin Policy w pewnych
przypadkach dzięki czemu możemy wysłać zapytanie Ajax do innych domen albo np. osadzić fonty za pomocą
font face CSS bo niektóre przeglądarki nie pozwalają osądzać nam fontów które są serwowane z innego serwera
niż nasza strona.
Zobaczmy zatem na czym rzecz polega na początku kiedy będziemy chcieli wysłać żądanie Ajax to przeglądarka
wyśle takie żądanie do serwera i dołączy tam specjalny nagłówek o nazwie Origin.
O nagłówkach mówiłem ci w lekcji o HTTP i ten nagłówek Origin może wyglądać w ten sposób Origin http
eduweb PL.
Jeżeli będziemy wysyłać zapytanie Ajaxowe ze skryptu który był uruchomiony na stronie eduweb.pl serwer
może nam odesłać specjalny nagłówek który nazywa się Access Control Allow Origin i może w nim napisać na przykład
http eduweb pl
I wtedy przeglądarka wie że możemy tam wysyłać zapytania Ajaxowe lub może napisać Access Control Allow
Origin gwiazdka.
A to wtedy oznacza, że z każdej strony można tam wysyłać takie zapytania.
Czyli zauważ jak to działa kiedy wysyłamy żądanie Ajax dołącza tam nagłówek Origin eduweb pl serwer może
sobie sprawdzić czy akceptuje zapytania ajax z takiego serwera eduweb pl.
Jeżeli tak to odeśle do naszej przeglądarki Access Control Allow Origin na przykład z wartością eduweb pl lub z
wartością gwiazdka i wtedy nasza przeglądarka nie pokaże nam błędu kiedy będziemy próbowali wysłać takie
zapytanie a byłoby tak w przypadku właśnie Same Origin Policy który by nas nie puszczało.
Czyli jeżeli serwer odsyła nam żądanie i umieści tam nagłówek Access Control Allow Origin np. gwiazdka to
przeglądarka bez trudu do tego serwera pozwoli nam wysyłać zapytania Ajax.
Chciałbym jeszcze żebyś na tym etapie wiedział iż to nie są wszystkie nagłówki dostępne w CORS jest ich
jeszcze trochę więcej jeżeli kiedyś w przyszłości będziesz potrzebował serwer odpowiednio skonfigurować
to przypomnij sobie że w tej lekcji nie pokazałem ci wszystkiego ale ten najważniejszy nagłówek jest
jeszcze kilka innych o których możesz sobie doczytać.
Teraz chciałbym ci szybko pokazać jak to wszystko co przedstawiłem działa na żywym organizmie czyli
w przeglądarce internetowej.