JavaScript: Lookahead
w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe i Domkniecia
- Format danych JSON oraz praca z AJAX
- Cookies
- Wyrazenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilosc sztuczek i dobrych praktyk
- I wiele, wiele wiecej!
Witaj w kursie JavaScript w Praktyce!
W 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.
Kurs JavaScript w Praktyce to między innymi:
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe
- Domknięcia
- Format danych JSON
- Praca z AJAX
- Cookies
- Wyrażenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilość sztuczek i dobrych praktyk
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
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 pokażę ci jak działa kolejny ciekawy mechanizm który nazywa się positive oraz negative
Lookahead czyli patrzymy do przodu.
Możemy przejść tutaj do Groups and Lookarounds i mamy tutaj coś takiego jak positive lookahead teraz ci
to pokaże oraz negative.
Więc przejdźmy do positive lookahead i powiem ci o co chodzi.
Chciałabym najpierw zaznaczyć wszystkie pliki które mają rozszerzenie obrazkowe czyli JPG JPEG GIF PNG
czyli napiszemy sobie powiedzmy że dowolny znak alfanumeryczny raz lub więcej razy.
Później chcemy kropkę a później wstawia sobie taką grupę czyli później będzie taka grupa gdzie będzie
JPG.
Zauważ że e jest opcjonalne czyli jeżeli go tutaj nie ma to jest OK.
Jeżeli tutaj jest też jest ok albo GIF albo PNG dodamy tutaj jeszcze taki znaczek to oznacza że to musi
być na końcu linijki czyli nie może być na przykład w ten sposób.
Czyli mamy jakąś listę plików i zaznaczyliśmy wszystkie obrazkowe.
Teraz wyobraź sobie że chcemy zaznaczyć tylko nazwy plików ale tylko tych które są obrazkowe czyli chcę
dokładnie tak jak teraz znaleźć tylko te które mają JPG GIF albo PNG ale nie chcę zaznaczać tego kropka
JPG dlatego że chcę zaznaczyć tylko plik bo powiedzmy bo to jest mi potrzebne tylko nazwa ale nie chcę
nazwy dokumentu PDF.
I teraz możemy to zrobić za pomocą positive lookahead czyli musimy stworzyć grupę jak gdyby dlatego
że mamy tutaj takie nawiasy i w niej napisać znak zapytania równa się.
Czyli znowu widzisz ten znak zapytania w różnych sytuacjach.
Różne ma znaczenie jeżeli napiszemy znak zapytania równa się to to co jest później w grupie będzie brane
pod uwagę ale nie będzie podświetlane.
Czyli na początku tutaj mogę napisać znak zapytania równa się.
Ale żeby to zadziałało to chciałbym jeszcze tę kropkę która jest w środku wrzucić w to miejsce.
A tutaj zgrupujemy że potem chcemy aby była jeszcze dodatkowa grupa ok i prawie nam to działa.
Ale jeszcze ten dolar to jest też ważne musimy wstawić do środka czyli to ma się odwoływać do właśnie
tej grupy bo jeżeli dodałem jeszcze jedną parę nawiasów i postawiłem dolar to nie odpowiadało to już temu
zapisowi czyli PNG GIF itd.
Zauważ teraz co się stało.
Stworzyliśmy taką grupę w nawiasie to podaliśmy jest to positive lookahead czyli jeżeli to co będzie
tutaj bo o tym możemy zapomnieć to nie ma już innego znaczenia.
Jeżeli to co będzie tutaj czyli kropka a później jpg gif albo png na końcu jeżeli to tam się znajdzie
to tylko wtedy zaznacz to co zrobiliśmy w tym miejscu.
Czyli jest to świetne bo teraz znaleźliśmy wszystkie nazwy plików które są obrazkami.
Podobnie moglibyśmy zrobić tak jak wcześniej pokazywały ci z divem gdybyśmy mieli jakiś tekst koniec
diva to moglibyśmy powiedzieć że chcemy zaznaczyć tylko ten tekst.
Czyli gwiazdka kropka plus.
W ten sposób tylko jeżeli pamiętaj positive lookahead w ten sposób wygląda.
Później będzie koniec div czyli tego koniec div nam w tym przypadku nie zaznaczył.
Tutaj musielibyśmy jeszcze na początku dodać div aby tego też nie zaznaczyło zaraz ci powiem dlaczego.
Ok.
Przejdźmy teraz do tego przykładu które miałem przed momentem raz jeszcze.
Cofnę tutaj za pomocą Command Z czy Control Z możesz w tym narzędziu sobie cofać i teraz chcę ci pokazać negative lookahead,
czyli lookahead oznacza patrzymy do przodu spojrzęliśmy do przodu czy to się nam zgadza
czy takie rozszerzenie jest OK.
Więc zaznacz tę nazwę natomiast negatyw lookahead działa odwrotnie.
To oznacza że jeżeli to co jest tutaj nie będzie spełnione to tylko wtedy to zaznacz.
Teraz chciałbym zrobić rzecz odwrotną mianowicie zaznaczyć wszystkie nazwy plików tak jak tutaj ale
tylko tych które nie są JPG GIF i PNG czyli np. document czy regulamin docx i mamy tutaj właśnie negatyw
lookahead.
Więc wydawałoby się że skoro przy positive pisaliśmy znak zapytania równa się czy negative znak zapytania
wykrzyknik to wystarczy to w ten sposób zamienić i zacznie nam działać.
Okazuje się że nie jest to dosyć skomplikowany przykład.
Przyznam że sam spędziłem przy nim sporo czasu zanim udało mi się wymyślić jak powinno to być zrobione
bo teraz wydaje się że mówimy zaznacz dowolny znak kropka to jest dowolny znak oprócz białych znaków.
Raz lub więcej tylko wtedy jeżeli to co mamy tutaj nie jest spełnione czyli mówimy zaznacz np. p.
Tylko wtedy jeżeli po nim nie występuje kropka JPG GIF czy PNG.
Wydawałoby się że jest OK.
Natomiast tak to nie działa.
Okazuje się że ten operator Plus jest łakomy czyli greedy w przypadku negative lookahead nam to tak nie zadziała.
Aby pokazać Ci jak to zadziała bo nie wystarczy tutaj zastosować jakiegoś prostego tricku chciałbym to
rozłożyć na czynniki pierwsze i wtedy nam to będzie bez problemu działać.
A więc chcemy zaznaczyć najlepiej nawet nie kropkę bo kropka tutaj też podchodzi czyli dowolny znak
chcemy zaznaczyć dowolny znak alfanumeryczny jak widzisz wiele ich tutaj jest raz lub więcej razy
ale żeby nie łapało tego JPG na przykład to zaznaczam tutaj że ma to być na początku.
I dochodzimy do kropki kropka już nie pasuje do w.
Czyli nie jest zaznaczona teraz wydawałoby się że jest OK.
Czyli w zasadzie to sobie możemy zgrupować bo zaraz nam się to przyda.
Czyli mówimy zaznacz taką literkę ale tylko wtedy tutaj mamy negative lookahead czyjś znak zapytania wykrzyknik.
Jeżeli to co jest po niej to nie będzie kropka JPG na przykład zaraz sobie tutaj napiszemy resztę zaczniemy
od tego jak widzisz teraz nam to niestety nie działa.
Bo mówimy p zaznacz pod warunkiem że później nie mamy kropka JPG.
Więc to się zgadza ale jeżeli dojdziemy do k.
Zauważ tutaj to już nie możemy zaznaczyć tej literki bo mówimy zaznacz pod warunkiem że później nie
będzie kropka JPG.
W ten sposób czyli już nam to tutaj nie działa musimy tutaj jeszcze bardziej elementarnie do tego podejść
mianowicie zaznacz jeżeli podanej literce powiedzmy że zaczynamy od p tu mamy akurat JPG więc przejdźmy
do przykładu z divem aby to było bardziej realne bo jpg chcemy aby nie złapało w tym przypadku.
Czyli przechodzimy do literki O i mówimy zaznacz literkę o.
Ale tylko wtedy jeżeli po niej nie będzie czegokolwiek.
Kropka GIF albo czegokolwiek GIF.
Zobacz jak to może wyglądać.
Możemy tutaj powiedzieć powiedziałem kropka.
GIF chodziło mi o JPG.
Możemy powiedzieć zaznacz o.
Tylko wtedy jeżeli później nie będzie dowolnego znaku plus JPG.
I teraz nam to działa.
Czyli musimy się zatrzymywać na takich małych literkach dlatego że to pogrupowałem.
I tu dałem plus czyli tutaj szukamy jednej literki i potem mówimy zaznacz jedną lub więcej takich ile
możesz.
Czyli znowu jeżeli będziemy tutaj o to mówiłem może zaznaczyć o.
Ale tylko jeżeli po niej nie będzie dowolnej ilości dowolnych znaków i na końcu JPG czyli tutaj ta kropka
plus oznacza dowolne znaki.
Tutaj musimy myśleć odwrotnie bo mówimy zaznacz jeżeli to nie pasuje do wzorca i dlatego to nie zostało
zaznaczone.
Gdybym tutaj zrobił tak jak przed momentem widziałeś.
Czyli znowu postawił kropkę to jak widzisz p jest zaznaczone itd dopiero k.
Nie może zostać zaznaczone bo później jest kropka jpg a chcemy od początku powiedzieć zaczynając od
pierwszej literki możesz zaznaczyć p ale tylko pod warunkiem że to co jest tutaj nie pasuje do tego
wzorca dlatego tutaj napisałem wzorzec kropka.
I teraz nie jest to zaznaczone czyli p jakby zostało zaznaczone ale potem zostało sprawdzone że dalej mamy
dowolną ilość dowolnych znaków i kończy się to na jpg.
Najlepiej tutaj jeszcze dopisać znak dolara zaraz to pokaże.
Czyli teraz jeżeli tutaj zrobimy sobie taką grupę i napisze tutaj to co wcześniej już mieliśmy czyli
JPG.
W ten sposób div i png to zaznaczymy tylko document i regulamin w ten sposób nam to działa.
Wydaje się to skomplikowane ale działa.
Natomiast teraz jeżeli bym sobie tutaj napisał np. PNG to już nie zadziała bo mówimy możesz zaznaczyć
literkę R ale tylko pod warunkiem że to co jest dalej.
To nie jest dowolna ilość czyli jeden lub więcej znaków jakichkolwiek a następnie JPG GIF lub PNG tutaj
jest PNG więc to nie jest zaznaczone.
Dlatego chciałbym na końcu aby to było.
Czyli wpisujemy tutaj dolar i teraz to się zgadza mam nadzieję że to rozumiesz spróbuj sobie to rozłożyć
na czynniki pierwsze.
Na pewno można to zrobić jeszcze inaczej.
Ja sporo czasu poświęciłem aby do takiego rozwiązania dojść.
Natomiast trzeba o tym myśleć i tutaj mamy plus czyli raz lub więcej Zauważ co się stanie gdy usunąę
plusa zaznaczymy tylko d.
To wszystko działa bo zaznaczyliśmy literki d tylko wtedy jeżeli to co jest później to nie jest właśnie
dowolna ilość różnych znaków kończących się na jpg gif albo PNG.
Ale żeby właśnie takich literek zaznaczyć więcej to dodajemy plusa do całej tej grupy.
Czyli jeden lub więcej i to tutaj zostaje podświetlone.
Jak zatem widzisz wyrażenia regularne mogą być czasami dosyć skomplikowane i nie tak oczywiste jak mogłoby
się wydawać bo wydawało by się że kiedy mieliśmy już positive lookahead to negatyw wystarczyłoby w ten
sposób odwrócić.
Okazuje się że nie jest to aż tak proste.