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.
Znasz już podstawy Ajaxa w zasadzie dobrze wiesz jak działa Ajax więc chciałbym w tej lekcji abyśmy
zaczęli pisanie naszej własnej biblioteki Ajaxowej która będzie nam pozwalała w prosty sposób wysyłać
żądania Ajax i obsługiwać odpowiedzi będziemy z niej jeszcze później w tym kursie korzystać a więc
zobaczysz że ona będzie bardzo przydatna.
Chciałbym uprzedzić że ten projekt przynajmniej na pierwszy rzut oka może być dosyć skomplikowany bo
tutaj będę chciał pokazać Ci bardzo wiele technik które jak już mówiliśmy w tym kursie będę chciał je
połączyć w całość i dlatego bardzo zależy mi na tym aby pisał razem ze mną.
Jeżeli zaczniesz teraz razem ze mną to jestem przekonany że na pewno wszystko zrozumiesz a więc do dzieła
przejdziemy do kodu.
I ja w pliku odbierz PHP zrobiłem coś takiego.
Czyli jeżeli będziemy mieli żądanie GET to będziemy chcieli tak jak wcześniej to wyświetlić jeżeli POST to
też wyświetlić później się jeszcze tym zajmiemy i teraz w scripts wstawiłem komentarz niech cie to nie
wystraszy otóż będziemy się tym posługiwać.
Chciałbym aby tak działała nasza biblioteka którą komuś udostępniamy.
Ktoś będzie chciał sobie wysłać żądanie Ajax to będzie mógł wywołać funkcję Ajax i przekazać obiekt
konfiguracyjny.
Jak widzisz bez tego jest to tylko zwykła funkcja więc sklejam to z powrotem i w tym obiekcie będzie
mógł powiedzieć że chce wysłać żądanie o typie post pod adres URL np. odbierz PHP chce wysłać dane jak widzisz
będzie to obiekt i będzie sobie mógł podawać
first name Piotr last name Kowalski i co tutaj chce będzie mógł sobie podać.
Następnie headers oczywiście nie będzie musiał go tu podawać ale jeżeli będzie chciał wysłać własne nagłówki
do serwera jakieś to będzie mógł je ustawiać w ten sposób i następnie będzie mógł podać dwie funkcje.
Sukces czyli ta funkcja się wykona kiedy uda się wysłać zapytanie do takiego adresu URL a ta wykona
się kiedy nie uda się albo będzie jakiś błąd i ta funkcja succes to jest bardzo ważne będzie przyjmować
response czyli tutaj będzie tekst odpowiedzi oraz jako drugi parametr obiekt xhr gdyby ktoś chciał we własnej
funkcji coś z tym zrobić.
A w przypadku failu tutaj nie będzie tekstu tutaj będzie tylko xhr.
No i jak widzisz ktoś wywołał naszą funkcję i zdefiniował sobie że pod success chce wyświetlić sobie
w konsoli. Udało się status i wyświetlić sobie status.
A jeżeli się nie uda to sobie wyświetla wystąpił błąd czyli jakby tak chcemy aby wywoływać naszą bibliotekę
więc teraz musimy ją napisać.
Jak widzisz nazwałem ją Ajax a więc będziemy pracować obiektowo co nazwiemy również naszą funkcją nasz
konstruktor Ajax bo tak musi to działać aby aby nam to działało jeżeli tutaj napisałem Ajax wpiszemy function
Ajax z dużych liter i będę chciał aby taki obiekt konfiguracyjny móc przekazywać czyli musimy przyjmować
parametr nazwę go config OK.
W ten sposób i teraz będziemy chcieli tworzyć taką funkcję z new.
Natomiast jak widzisz nic tutaj nie przypisujemy od razu wywołujemy funkcję ona wysyła zapytanie i obsługuje nam
wszystko tymi funkcjami więc nie będziemy tworzyć czegoś takiego jak np. a równa się new Ajax podając
ten config.
Oczywiście będzie można to zrobić ale nie będzie można potem do tego a się odwołać i coś zmienić dlatego
że w momencie kiedy wywołamy sobie new Ajax podamy obiekt konfiguracyjny to od razu to wszystko zostanie wysłane.
Czyli tak naprawdę będziemy mogli również z tego korzystać jako Ajax.
Z tego powodu już w kursie ci to pokazałem przy programowaniu obiektywym w lekcji gdzie mówiłem o problemach
z this.
Jeżeli ktoś wywoła naszą funkcję best new to chcę żeby zachowywało się tak samo jak z new.
Czyli możemy tutaj napisać i w this.
I w zasadzie zrobimy tutaj not.
Czyli jeżeli this to nie jest instance of ajax to będziemy chcieli zwrócić New Ajax i znowu ten config
tam przekazać.
Tu oczywiście moglibyśmy również sprawdzać czy ten konflikt był podany jeżeli nie to wyświetlić jakiś
błąd itd.
Ale nie będziemy już tego robić.
Mam nadzieję że to rozumiesz to było w lekcji o problemach z this więc nic tutaj nowego nie ma.
Teraz wiesz że abyśmy mogli wysyłać Ajax no to nie będziemy potrzebowali obiektu XML http request i
wpiszemy go tutaj od razu wewnątrz nowo tworzonego obiektu czyli napiszemy this i znowu skorzystamy z konwencji
z podkreśleniem aby ktoś się nie odwoływał do tych naszych wartości.
Mówimy mu wtedy że nie chcemy aby pod to przechodził xhr w zasadzie wszystkie nasze metody będą zapisywane
w ten sposób nie musimy używać podkreślnika.
No ale powiedzmy że to zrobimy.
Czyli xhr.
I w tym miejscu tworzymy sobie nowy obiekt XML http request.
No i mamy już taki pusty obiekt zapisany w naszym nowym obiekcie czyli może teraz to co mieliśmy tutaj
spróbujemy sobie wywołać bo w zasadzie dlaczego nie.
Przejdźmy tutaj i bez komentarza to zróbmy.
Czyli kiedy wysyłamy bez new pamiętasz że this wtedy nie będzie instance of ajax więc zwróci nam to co tutaj
było.
Cały ten obiekt będziemy mieli tutaj dostępny pod config i do tego nowo utworzonego obiektu który jest
zapiszemy sobie xhr coś takiego.
Oczywiście on tutaj jest wykonywany i znika a gdybyśmy go przechwycili do zmiennej tak jak wspominałem
to właśnie to xhr jest zapisywane jakby pod tym.
Mam nadzieję że to już wiesz.
OK ale ja chcę aby to wywoływać ten sposób podobnie jak w bibliotece czy jquery.
Dlatego trochę się na tym wzoruje aczkolwiek nie do kodu biblioteki jquery.
To wszystko tutaj wpiszę według własnego uznania.
Zobaczymy jak to będzie działać.
Teraz musimy zająć się configiem czyli właśnie tymi naszymi opcjami konfiguracyjnymi bo chciałbym aby były
jakieś domyślne opcje.
Jeżeli ktoś nie poda np. type to chciałbym żeby domyślnie to było get.
Jeżeli ktoś nie podaje url to chciałbym żeby domyślnie to był adres pod jakim aktualnie się znajdujemy
i możemy to zrobić ale musimy najpierw przygotować sobie taki obiekt który będzie zawierał te wszystkie
domyślne dane i moglibyśmy ten obiekt wpisać tutaj bezpośrednio w naszej funkcji on wtedy byłby dla
każdego nowo tworzonego obiektu jakby kopiowany natomiast ja zapisze go na prototypie i będziemy mieli z tego
powodu pewne problemy ale robię to celowo aby ci pokazać jakie problemy się pojawią.
A więc Ajax prototype i napiszemy sobie default config
równa się obiekt. Z obiektami jest taki problem że będzie ten obiekt dziedziczony przez wszystkie instancje.
Potem zobaczysz jaki to będzie problem ale ja teraz będę chciał te wszystkie opcje które będą domyślne.
W ten oto sposób czyli domyślnie chcę mieć type get bo jeżeli ktoś go nie poda.
Jeżeli ktoś nie poda adresu URL to wspominałem ci że chcę mieć taki adres jak jest tutaj.
Możemy to odczytać przez window location href.
Ja o tym mówiłem w pierwszej części tego kursu JavaScript od podstaw czyli to chcę sobie zapisać w tym miejscu
dlatego to podałem to zostanie tutaj zwrócone data czyli dane które ktoś będzie wysyłał.
Jeśli ich nie poda to chcę żeby to był pusty obiekt.
Tutaj jak widzisz nie podaliśmy options ale chciałbym aby taki obiekt był i w nim domyślnie będziemy mieli
async true.
To o czym ci mówiłem czyli asynchroniczne.
Timeout będzie na zero czyli jakby nie ustawiamy żadnego timeoutu user name i password na null.
Natomiast jeżeli ktoś będzie chciał to zmienić to tutaj wywołując naszą funkcję będzie mógł napisać
options w ten sposób tutaj przecinek.
I na przykład poda sobie timeout i ustawi go sobie na 10.
Wtedy będziemy chcieli to zmienić.
Natomiast jeżeli nie poda bo takie będą domyślne opcje i ostatnia z nich to headers czyli te nagłówki
o których mówiłem.
Jeżeli ktoś sobie nie dopisze jakichś swoich nagłówków to będzie to pusty obiekt.
Success i failure nie będzie ich domyślnie czyli jak ktoś ich nie poda,
żadne funkcje się nie wywołają kiedy otrzymamy odpowiedź z serwera.
Czyli tak będzie wyglądał nasz obiekt.
Default config i teraz musimy napisać funkcję która pozwoli nam do tego naszego obiektu nowo tworzonego.
Przypominam może ja jednak utworzę tutaj zmienną abyś czuł że ten obiekt faktycznie tutaj jest zwracany
ale nie będziemy do tego a się odwoływać.
Czyli aby do tego obiektu przypisać sobie config z którego będziemy w różnych metodach korzystać musimy
zmiksować te dwa configi.
Chciałbym sobie sprawdzić jeżeli ktoś tutaj podał type post to to przypisze.
Jeżeli nie przypiszę to dlatego teraz pokażę ci metodę którą stworzymy.
Będzie się nazywała extend options i ona nam będzie miksowała te dwa obiekty stworzymy ją na prototypie więc możemy
to zrobić np. tutaj w zasadzie w ogóle w tym miejscu napisałem to przepraszam tutaj ten obiekt jest zwracany a
nie tutaj napiszmy sobie tutaj.
Jak wspominałem naszą metodę będzie się nazywać extend options czyli ajax prototype extend options.
Funkcja i ta funkcja będzie przyjmować config zaraz się do niego odwołamy.
Czyli ten config który jest przekazany w tym miejscu ten chcemy tam przekazać a że ona jest na prototypie
to dostęp do tego default config będzie miała poprzez this w tym oto miejscu i tutaj stworzymy sobie pętlę
for napiszemy var key i in czyli będziemy chcieli iterować
po domyślnym obiekcie który tutaj jest więc napiszemy this default config i zróbmy sobie console log
abyśmy byli pewni o co chodzi czyli piszemy tutaj key.
Natomiast to trzeba wywołać i chcę to zrobić w tym miejscu po utworzeniu nowego obiektu więc będziemy
chcieli sobie zapisać w this podkreślnik config.
To co zwróci nam metoda extend config czyli wywołuje ją poprzez this następnie extend options.
I jak widzisz przekazujemy do niej config który ktoś nam tutaj przekazał czyli tutaj został dla nas przekazany
taki config.
To powinno wyglądać tak cały ten obiekt mamy go tutaj i teraz przekazujemy go dalej.
Tylko referencje tak naprawdę do niego on nie jest nigdzie kopiowany przekazujemy go do metody extend
config którą mamy tutaj i teraz będziemy chcieli na razie nie po tym ale po tym domyślnym i darować sobie
tutaj i zobaczymy co tam się znajduje.
No i jak widzisz type url data options header to są wszystkie te klucze czyli wszystko się zgadza type url data option i headers.
Teraz moglibyśmy zrobić taką rzecz mianowicie jeżeli w configu który tutaj przekazaliśmy.
Jest coś takiego jak type np. więc możemy to sprawdzić i config zawiera klucz który tutaj mamy.
Z kolei z tego configa czyli type mam nadzieję że rozumiesz key przed momentem wyświetliliśmy np. type
Więc teraz sprawdzamy czy ten config który jest tutaj ma coś takiego jak type jeżeli ma a w zasadzie
możemy tutaj to sprawdzić operatorem in o którym mówiłem w tym kursie to będzie dużo lepsze czyli jeżeli
key in config.
Czyli jeżeli w tym configu jest type to w tym obiekcie który tutaj mamy chcemy to nadpisać.
Czyli to chcielibyśmy nadpisać to odwołamy się do this default config.
Przekażemy tutaj ten klucz czyli np. type i chcemy go przypisać do tego co zwróci nam config.
To może wyglądać na zagmatwane ale uwierz mi nie jest w tej narracji pod key
mamy na przykład type sprawdzamy czy w przekazanym obiekcie który ktoś przekazał jest type jeżeli jest
to chcemy w tym obiekcie.
Przepraszam cię to nie jest tutaj to jest tutaj.
Jeżeli jest taki type to chcemy w tym obiekcie default config go nadpisać na taką wartość.
Ale już się pojawia pewien problem o którym chcę ci powiedzieć.
Mianowicie my teraz zmieniamy ten obiekt fizycznie zmieniamy ten obiekt.
Jeżeli ktoś tutaj przekaże post to my w tym obiekcie na prototypy to zmienimy.
I teraz co jeżeli wykonamy nową instancję czyli gdzieś indziej niżej wykonamy znowu ajax otóż ten obiekt
będzie zmieniony.
Pamiętaj że wszystkie instancje będą po prototypie dziedziczyć ten obiekt więc on nie jest kopiowany.
Dlatego teraz pokażę ci fajną sztuczkę jak możemy go w prosty sposób skopiować.
Mieliśmy lekcje o json i pokazywałem ci że możemy taki obiekt zamienić na string za pomocą json
stringify.
Więc napiszę sobie tutaj default config równa się json stringify i będziemy chcieli zestringować to co mamy
tutaj czyli this default config.
W ten oto sposób wyświetlmy sobie go w konsoli.
Jak widzisz tak to wygląda.
Pamiętasz że obiekty np. możemy tak zestringować.
Czy opcje w ten sposób też.
Gdyby były tu jakieś funkcje no to mówiłem w lekcji o serializowaniu jsona że to by nie zadziałało.
Ale to działa.
Więc teraz jeżeli mamy string to możemy z powrotem go zamienić json parse na obiekt więc napiszmy tutaj json parse.
On przyjmuje jak pamiętasz String i to przekażemy.
Czyli zrobiliśmy tutaj z obiektu String a ze String z powrotem obiekt i wtedy jest to już całkowicie
nowy obiekt.
Jeżeli zrobimy tak jak tutaj console log default config to będziemy mieli tutaj obiekt w którym jak
widzisz wszystko się znajduje i w tym obiekcie możemy już to zmieniać bo mamy go tutaj pod zmienną a
nie będziemy tego zmieniać tutaj czyli teraz będziemy chcieli iterować nie
po tym default config specjalnie go zapisałem na prototypie aby ci pokazać jaki będzie problem że wszystkie
instancje go dziedziczą.
Tylko tutaj będziemy chcieli na tej zmiennej którą mamy w tym miejscu sobie operować i zróbmy sobie
tutaj dokładnie to samo.
Ok.
No i na samym końcu tutaj będę chciał zrobić return i będziemy chcieli zwrócić ten nasz default config
który jak widzisz opisujemy to zostanie przypisane w tym miejscu do podkreślik
config więc wyświetlmy sobie to w konsoli i zobaczmy co tam jest czy nie popełniliśmy jakiegoś błędu logicznego.
Zobaczmy co tam się znajduje obiekt mamy.
Jak widzisz post URL to jest odbierz data itd.
Wygląda na to że na razie wszystko jest OK.
Zobaczmy.
Jeżeli teraz byśmy sobie nie podali tutaj type post to chciałbym żeby domyślnie to było get.
Zobaczmy czy ma to sens.
Jak widzisz teraz ma to rzeczywiście sens jeżeli URL nie podamy z kolei to sobie wróćmy a nie podajemy
URL zobaczmy to jak widzisz URL będzie kierował window location href czyli dokładnie na ten sam
adres.
Czyli wygląda na to że wszystko działa dobrze możemy podawać jakieś dane ale nie musimy takie jak np.
data tutaj zostały podane więc takie będą wysłane jeżeli nie zostaną podane to chcemy żeby to był pusty
obiekt.
Pokazałem ci ciekawą technikę jak możemy za pomocą json parse właśnie obiekt zamienić na string i z powrotem na obiekt
dzięki temu skopiowaliśmy sobie taki właśnie obiekt.
Aczkolwiek pamiętaj że gdyby to były jakieś funkcje czy inne zaawansowane obiekty to nie zostałyby one
poprawny sposób skopiowane.
I na tym bym zakończył tą lekcję żebys sobie mógł nadrobić i w kolejnej lekcji postaramy się dokończyć już
naszą bibliotekę i zaczniemy się bawić tym co jest potrzebne w naszym przypadku jeżeli chodzi o Ajax.