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 tej lekcji chcę Ci pokazać dwie bardzo ważne w kontekście optymalizacji techniki minifikacji oraz
konkatenacji skryptów.
Do tej pory kiedy tworzyliśmy nasz kod możemy powiedzieć pracujemy nad stroną internetową czy aplikacją
nie ma problemu że nasz kod zapisujemy w taki oto sposób.
Jak mieliśmy tutaj czyli jesteśmy w przykładzie gdzie wysłaliśmy maila za pomocą Ajaxa i PHP.
Pamiętasz że podłączaliśmy własną bibliotekę Ajax oraz plik Scripts.
No i tutaj mamy Ajax oraz Scripts.
Tak to wyglądało i teraz kiedy pracujemy.
Oczywiście taki kod gdzie jest on czytelny jest dla nas bardzo ważny.
Natomiast kiedy nasza aplikacja idzie do produkcji oznacza to że oddajemy ją klientowi lub jest przenoszona
na serwer produkcyjny czyli taki gdzie będą już ją odwiedzać różni użytkownicy internetu.
To powinniśmy zadbać o to aby skrypty lepiej zoptymalizować bo nie ma powodu aby serwować je w taki
oto sposób.
I teraz pokażę ci jak możemy skrypty zminifikować i jak to wygląda skopiuje całą zawartość tego skryptu
którą tutaj mam i przejdziemy na stronę która nazywa się minify JavaScript online js compress com.
I tutaj wkleję sobie cały ten kod kliknę compress JavaScript i zauważ co zostało nam zwrócone.
Taki oto kod i co ciekawe jest to jak najbardziej poprawny kod JavaScript.
Ten który my napisaliśmy.
Natomiast nazwy zmiennych zostały skrócone wszystko zostało zapisane w taki zminifikowany sposób czyli
białe znaki zostały usunięte bo jak wiesz JavaScript a konkretniej jego interpreter.
Nie ma problemu z tym czy zrobimy gdzieś 10 spacji czy dwa tabulatory.
Ten kod pisaliśmy w ten sposób bo jest to dla nas bardzo czytelne.
Natomiast jeżeli to zostanie w taki sposób zamienione również będzie działać.
Jest to dla nas już nieczytelne ale dla przeglądarki jak najbardziej więc teraz utworze tutaj zamiast
ajax js.
Plik który nazwę Ajax min js i wkleję tam to wszystko.
I teraz na naszej stronie zamiast Ajax będziemy podpisać Ajax min js.
Możemy to w ten sposób nazwać myślę że często się już z takimi bibliotekami spotkałeś się teraz jeżeli przejdę
na nasz przykład odświeżę to nadal wszystko działa.
Jeżeli przejdziemy do panelu Network tutaj to jak widzisz Ajax min js jest jest serwowane dla nas właśnie z
serwera jest taki skompresowany kod w jednej linijce co jest tutaj bardzo ważne.
To oczywiście taki kod zajmuje dużo mniej czyli taki skompresowany script zajmuje dużo mniej miejsca
czyli jest dużo szybciej pobierany przez przeglądarkę niż taki skrypt.
Oczywiście tutaj mamy tylko 150 linijek kodu ale mogłoby to być 5000 10000 i więcej.
Jeżeli ta aplikacja będzie bardziej zaawansowana podobnie możemy zrobić z naszym plikiem scripts js jeżeli
nie będziemy często tutaj dokonywać zmian więc to co tutaj jest.
Również mogę wstawić do takiego narzędzia i będziemy chcieli to sobie zminifikować.
Może wróćmy tutaj w ten sposób ok compress i to samo możemy skopiować i wstawić do pliku scripts.
Min js.
Wklejam to tutaj zapisuje i ponownie możemy go na stronie podpiąć w ten sposób i będzie to działać.
Natomiast to jest minifikcja. Teraz pokażę ci konkatenację czyli tak jak konkatenacja stringów konkatenacja
skryptów oznacza ich łączenie.
Jeżeli wiemy że na tej stronie będzie ładowane Ajax oraz scripts i na innych stronach nie będziemy samej
biblioteki
Ajax ładować to możemy obydwa te skrypty połączyć.
Czyli jak miałem tutaj scripts min js to mogę cały nasz ajax skopiować.
Wstawimy to sobie tutaj na początku pamiętaj że ten kod musi być wykonywany przed i tak będzie wyglądał
nasz plik.
I teraz mogę się pozbyć tego zapisu a ładujemy tylko scripts w którym to wszystko się znajduje i ponownie
na naszej stronie wszystko działa.
A teraz przesyłamy przez http tylko jeden plik scripts min js w tym kursie mówiłem już z tobą o żądaniach
http i wiesz że z każdym z nich są przesyłane np. nagłówki itd.
Więc teraz przeglądarka nie musi tego robić wystarczy że wyśle zapytanie jeden plik i otrzyma odpowiedź
a w tym pliku wszystko się znajduje.
Warto zatem kiedy przenosimy stronę na serwer produkcyjny zadbać o to aby skrypty zminifikować i kiedy
można to również ze sobą połączyć czyli skonkatenować.
Jak to zrobić automatycznie abyśmy nie musieli tego robić przez takie narzędzie pokazuje w jednym z
warsztatów na eduweb pl na temat grunt js.