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.
Zaczynamy swoją przygodę z Ajaksem z wysyłaniem żądania.
Na początek kilka bardzo ważnych uwag.
Otóż aby Ajax mógł działać to nie możemy naszego przykładu czyli naszej strony serwować tak jak do tej
pory czyli z pliku.
Tutaj mieliśmy file i miałem otwarty plik z pulpitu.
To musi być serwowane już z serwera.
Natomiast ja mam tutaj serwer lokalny localhost czyli to wszystko to jest taki host tak samo jak np.
eduweb.pl dla przeglądarki.
To działa tak jakbyśmy mieli te pliki wrzucane gdzieś w internet i teraz jeżeli jeszcze nie masz zainstalowanego
takiego localu hosta to na końcu tego kursu na końcu spisu treści znajdziesz taki rozdział bonusowy.
Gdzie są dwie lekcje jedna jest jak zainstalować serwer lokalny na Macu a druga jak zainstalować taki
serwer na Windowsie i tam dokładnie to tłumaczę.
Więc zainstaluje sobie teraz taki serwer bo będzie to niezbędne aby te lekcje kontynuować we wspomnianych
lekcjach.
Tłumaczę co oznacza główny katalog serwera a więc teraz powiem tylko tyle abyś w głównym katalogu tego
serwera stworzył sobie katalog o nazwie Ajax i do niego wklej pliki które są w tym przykładzie 16.
Znajdziesz je w plikach źródłowych do tego kursu.
Wtedy w przeglądarce po uruchomieniu serwera po przejściu pod local host ukośnik Ajax będziesz miał
dokładnie to samo co ja mam tutaj.
A te pliki otworzyłem sobie
oczywiście tutaj one są lokalne one nie są nigdzie w internecie.
Są u nas na dysku i serwer właśnie z naszego komputera jest tutaj uruchomiony.
Zauważ że mam tutaj głośnik Ajax i domyślnie wczytuje się plik index HTML który jest tutaj.
Ale mam jeszcze plik o nas HTML i tutaj możemy go w zasadzie w nowej karcie otworzyć.
Wygląda to w ten sposób dlaczego za sekundę jeszcze będę chciał powiedzieć.
Przejdźmy tutaj i przejdźmy już do scripts js które są tutaj umieszczone właśnie z tego pliku będziemy
chcieli wysłać swoje pierwsze zapytanie do serwera za pomocą Ajaxa.
Wspominałem w prezentacji o Ajaksie że przeglądarka internetowa udostępnia nam specjalny konstruktor
który nazywa się XML HTTP Request i z niego możemy tworzyć nowe obiekty za pomocą których będziemy wysyłać
żądania więc utwórzmy sobie nową zmienną możemy ją nazwać w skrócie xhr jak XML HTTP Request.
I tutaj musimy wywołać nowy właśnie obiekt czyli konstruktor nazywa się XML HTTP Request.
W ten sposób pisane wielkość liter ma tutaj znaczenie oczywiście i wywołujemy to w ten sposób.
Nic tutaj nie przekazujemy tutaj zostanie zwrócona instancja
właśnie takiej jakby klasy takiego konstruktora XML Http Request i zanim zrobimy cokolwiek więcej to chcę
Ci pokazać już na początek jedną bardzo ciekawą właściwość takiego obiektu która nazywa się ready state.
Więc zróbmy sobie w konsoli po utworzeniu takiego obiektu xhr ready state w ten sposób i zobaczmy co
zostanie zwrócone.
Przejdźmy tutaj.
Zobaczmy.
Jest to zero.
Dlaczego jest to zero.
Za moment ci pokaże w tutaj pewien komentarz.
Wygląda to w ten sposób otóż ready state będzie przyjmowało wartości 0 1 2 3 lub 4 i 0 oznacza unsend.
Czyli mamy utworzony nowy obiekt ale nie został on jeszcze otwarty.
I nic więcej z nim nie zrobiliśmy za moment pokaże ci jak to się będzie zmieniać więc możemy sobie tutaj
zostawić.
I teraz co jest niesłychanie ważne to po utworzeniu takiego obiektu musimy podać adres URL pod który
będziemy chcieli wysłać zapytanie.
Ja będę chciał wysłać zapytanie GET pod ten adres czyli całą taką stronę będziemy chcieli sobie pobrać
do naszego obiektu.
Dlatego napiszemy xhr i mamy tutaj metodę open czyli otwieramy połączenie.
Pierwszy parametr to string i tutaj podajemy typ takiego żądania czyli get albo np. post co jeszcze
w tym kursie będziemy robić chcę aby to był Get.
Drugi parametr jest to adres URL.
I tutaj możemy podać adres cały np. http localhost i tak dalej natomiast możemy go podać również relatywnie.
Pamiętaj że tutaj czy uda nam się wysłać jakieś żądanie czy nie.
To o tym będzie decydowało Same Origin Policy i ewentualnie CORS o których już mówiłem.
Ja będę chciał pod nasz adres wysłać właśnie zapytanie pod o nas czyli piszemy o nas HTML gdyby wpisał to
w ten sposób.
To jest również bardzo istotne bo wtedy wysłaliśmy żądanie pod localhost ukośnik o nas.
A ja chcę żeby to był localhost ukośnik Ajax.
I tutaj ukośnie o nas HTML.
Z tego powodu nie stawiamy tutaj tego slasha teraz trzeci parametr to jest true lub false czy chcemy
aby żądanie było asynchroniczne.
Wpisujemy tutaj prawie zawsze true mówiłem ci że Ajax to jest właśnie asynchroniczne wysyłanie żądań.
Czasami może być taka sytuacja że z jakiegoś powodu chcielibyśmy zablokować wykonywanie dalsze kodu
i poczekać aż żądanie się wykona.
Natomiast zazwyczaj nie o to chodzi.
Jeżeli tutaj damy true.
To oznacza że jeżeli za moment wyślemy takie żądanie to kod JavaScript który jest pod spodem spokojnie może
być wykonywany a dopiero jak to żądanie tutaj zostanie z powrotem odesłane z serwera czyli odpowiedź
serwera zostanie przesłana to wtedy wykonamy pewną funkcję.
Czyli zależy nam na tym aby to było asynchroniczne i tutaj ewentualnie można podać jeszcze kolejne parametry są to
stringi.
Może tutaj być użytkownik i hasło do serwera jeżeli chcemy wykonać logowanie HTTP i zazwyczaj nie będzie
to potrzebne więc te trzy parametry sobie tutaj podajemy.
Teraz jeżeli sobie sprawdzimy znowu ready state to jest bardzo ważne więc my mamy jeden czyli teraz mamy
open,
jak widzisz w tym miejscu.
No i teraz możemy takie żądanie sobie wysłać.
Mamy metodę xhr i następnie send.
Jeżeli wysyłamy żądanie typu get to nie przesuwamy jak już w prezentacji ci pokazałem żadnych danych.
Te dane musiałyby się znajdować tutaj w tzw. query string który serwer mógłby odczytać.
Więc tutaj danych nie przekazujemy.
Możemy tutaj napisać co czasami zobaczysz np. null aby jakby zasygnalizować że nic nie przesyłamy.
Możemy tutaj to wpisać.
Ważne jest jeszcze to że właśnie to że kiedy już użyjemy send to już nic więcej nie możemy zrobić więc tutaj
najpierw tworzymy nowy obiekt potem go otwieramy i pomiędzy open a send możemy różne rzeczy jeszcze
na tym obiekcie robić o czym jeszcze będę mówił.
A tutaj go wysyłamy więc wyślemy takie żądanie.
Zobaczmy przy okazji w przeglądarce Chrome to widać musisz tutaj mieć w konsoli pod prawym przyciskiem
zaznaczone log XML http request jeśli będziesz wtedy widział wszystkie zapytania Ajaxa.
No i jak widzisz udało się wysłać zapytanie GET pod taki adres o nas.
Zgadza się ten adres jak widzisz możemy tutaj kliknąć.
Przejdziemy do panelu Network klikniemy tutaj o nas i zobaczymy co przeglądarka wysłała do serwera w Request
header.
Jak widzisz wszystkie te nagłówki o których już mówiliśmy zostały tam przesłane.
Nie ma problemu User Agent itd.
A serwer odesłał nam.
Jak widzisz Response Headers.
Takie oto nagłówki w twoim przypadku może to troszeczkę inaczej wyglądać w zależności od tego jaki masz
serwer ale generalnie będzie to coś tego typu.
Jak widzisz tak to wygląda.
Jeśli przejdziemy do preview do tego co nam przysłał serwer to tutaj widzimy już wyrenderowany kod HTML
ale w Response zobaczymy jakby czysty tekst który został przysłany.
No i tak to właśnie wygląda to zostało do nas przesłane.
Czy faktycznie w o nas coś takiego się znajdowało.
Jak widzisz.
Dokładnie tak.
A więc Ajax nie jest w jakiś dziwny sposób magiczny że serwer przysłał nam zupełnie coś innego.
Po prostu nie jest żaden sposób ten serwer skonfigurowany pod Ajax. Serwer działa tak że jeżeli wpiszemy
localhost Ajax o nas wciskam enter to przeglądarka wysyła Get właśnie pod taki adres no a serwer odsyła
nam
jak widzisz taki kod więc jeżeli
z Ajax tutaj wysłałem dokładnie taki sam adres.
żądanie typu get to dla serwera nie ma to absolutnie żadnego znaczenia.
Tak samo odeśle nam kod który widzimy tutaj i to zostało dla nas odesłane i mamy to teraz w tym miejscu
jak widzisz w response.
Jeśli teraz byśmy sobie zerknęli na nasze ready state zobaczmy jaką ma wartość to mamy tutaj 4. 4 pokazałem
ci tutaj w komentarzu że jest done czyli wszystko się już zakończyło.
W międzyczasie mogło być jeszcze 3 oraz 2 czyli loading a tutaj mamy headers received.
To wtedy kiedy serwer odeśle nam już same nagłówki ale jeszcze nie mamy całej treści treść jest przesłana
to wtedy mamy loading
3 tutaj ready state.
I następnie done.
Mam nadzieję że to załapałeś no i teraz jedna bardzo ważna uwaga otóż chcielibyśmy coś zrobić z tym
co serwer nam odesłał i moglibyśmy się odwołać teraz xhr i tam to znaleźć.
Zróbmy sobie tutaj xhr może dir w ten sposób zerkniemy coś w środku i mamy tutaj coś takiego jak response
czyli możemy odwołać się do xhr do naszej zmiennej następnie do response i mamy tutaj wszystko co odesłał
nam serwer cały ten tekst i możemy tego użyć.
Natomiast jest pewien problem otóż mamy tutaj true.
A więc żądanie było asynchroniczne a to oznacza że gdybyśmy od razu chcieli z tego skorzystać może spróbujmy
zrobić xhr console log to co Ci pokazałem czyli xhr response.
W tym miejscu i zobaczymy co nam się pokaże po wysłaniu przejdźmy do konsoli.
No i tutaj zrobił się console log jest pusty dlatego właśnie że wysyłamy żądanie asynchronicznie i
mówimy tutaj kiedy otrzymasz odpowiedź z serwera to wtedy wykonaj pewne zdarzenia ale my tych zdarzeń
jeszcze tutaj jak widzisz nie zarejestrowaliśmy.
Dlatego response nie jest tutaj dostępne.
Gdybym to zmienił na false to zablokujemy wszystko co jest pod spodem czyli będziemy w tym miejscu czekać
aż serwer nam to wszystko odeśle i wtedy powinno nam to zadziałać.
Jak widzisz mamy tutaj ten kod ale chcemy żeby to było asynchroniczne więc musimy jeszcze zarejestrować
zdarzenie które pozwoli nam obsłużyć funkcję wtedy kiedy otrzymamy odpowiedź i to pokaże Ci w lekcji
kolejnej.