JavaScript: Metoda .exec
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.
Na tym etapie mam nadzieję że rozumiesz już jak działają wyrażenia regularne.
Widziałeś że mogą być one dosyć skomplikowane ale kiedy wiesz jak pisać to na pewno po dużej liczbie
prób i błędów sobie poradzisz z każdym wyrażeniem regularnym a jeżeli nie to oczywiście w internecie
znajdziesz mnóstwo gotowych wzorców jak np. w takim tekście wyszukać adresy e-mail poprawne.
I one będą zakładać wszystkie możliwości np. podwójną domenę com pl itd.
A więc w internecie znajdziesz mnóstwo sprawdzonych przykładów.
Niemniej jednak chciałbym ci teraz pokazać jak możemy w JavaScript wykorzystać wyrażenia regularne do
tej pory w narzędziu regexr pokazałam ci praktycznie wszystko co z nimi związane w języku JavaScript
bo ono również jest napisane a teraz pokażę ci jak z poszczególnych metod korzystać już w naszych skryptach.
Mam taki oto tekst który zawiera tutaj np. adres e-mail i tutaj również i teraz wkleiłem go również do regexr
i napisałem wyrażenie które znajduje wszystkie te adresy e-mail bez żadnego problemu.
Natomiast jak widzisz znajduje adres ale w grupie tutaj czyli capturing group wyłapuje tylko domenę.
Jeżeli przejdziemy do substitution tuszem to pod dolar 1 będziemy mieli właśnie domenę.
Aby to było lepiej widać zróbmy to w ten sposób.
Czyli jak widzisz wszystkie nasze adresy zostały zamienione na tylko domenę bo to zostało wystawione
w grupie.
Teraz sobie skopiuje takie wyrażenia i pokażę ci jak je utworzyć w języku JavaScript.
Tutaj jest nam to już pokazane czyli ten slash nie możemy go skopiować ani tutaj zmienić i ten oraz
flaga g plus to co jest w środku czyli taka całość to jest poprawne wyrażenie regularne w JavaScript.
Przejdźmy zatem do skryptu.
Mam tutaj paragraf przy okazji pokażę ci że na stronie mamy ten sam tekst więc pobieramy go z paragrafu
i teraz utworzę nowe wyrażenie zmienną nazwę regex.
I tutaj napiszę dokładnie to samo co mieliśmy tam wkleję to wyrażenie na końcu dodając flagę czyli taki
zapis w JavaScript jest poprawny taki slash taki i pomiędzy tym wyrażeniem a na końcu flagi np. G i M nie
ma tutaj znaczenia kolejność czy mi.
W ten sposób możemy dodawać te flagi natomiast teraz pokażę ci drugi sposób jak stworzyć takie wyrażenie
poprzez konstruktor regexp.
W ten sposób wygląda to następująco czyli kiedy użyjemy new reg exp zostanie nam zwrócony również obiekt wyrażenia
regularnego ale tutaj musimy podać string czyli jak widzisz jest to string w którym już nie mamy tego
slasha i tego slasha.
Ale co jest bardzo ważne tutaj każdy taki znak specjalny musi być jeszcze escapowany.
Czyli jeżeli mieliśmy tutaj slash w to musimy tutaj dodać jeszcze jeden slash czyli tak to wygląda.
A flagi dodajemy również jako string jako drugi parametr tu może być G i M M i G nie ma znaczenia czy
taki zapis będzie to to samo co ten zapis dlatego ja to wykomentuję.
No i teraz regexp jest to obiekt który dziedziczy z regexp prototype czyli ma różne metody w tej lekcji pokażę
ci metodę exec z której skorzystamy.
Ona nam coś będzie zwracać od razu ci powiem więc tworzymy zmienną do której zostanie coś zwrócone napisze
search
I teraz skoro jest to metoda tego obiektu to odwołujemy się do tego obiektu następnie metoda exec.
I co jest ważne ona przyjmuje string czyli to wyrażenie regularne chcemy wykonać na stringu które mamy
tutaj w paragrafie paragraf zapisałem w zmiennej więc string to będzie p text content.
W ten sposób i zerknijmy sobie w konsoli co zostało zwrócone do search odświeżę.
Tutaj wpiszemy search i jak widzisz mamy tablicę w której coś zostało znalezione.
Teraz taka uwaga jeżeli wyrażenie regularne nie znalazłoby nic czyli tak jak tutaj nie podświetliłoby
nic na niebiesko to wtedy nam zostanie zwrócone null z metody exec.
Natomiast przeciwnym wypadku jak widzisz została zwrócona taka oto tablica w której mamy pod pierwszym
indeksem czyli pod tym zerowym co jest bardzo ważne tekst który został znaleziony.
Czyli tak jak tutaj podświetlony.
Dlaczego nie ma drugiego powiemy za moment a pod drugim mamy grupę jeżeli coś zgrupowaliśmy tu zgrupowaliśmy
sobie właśnie domenę więc znajduje się to tutaj czyli pod search nawiasy kwadratowe 1 odwołali
byśmy się do tego co jest jeszcze bardzo ważne.
Tutaj search zawiera jeszcze dwie ciekawe właściwości jak index i input więc możemy napisać search
index.
I tutaj zostanie zwrócone 28 a więc w naszym całym tekście Anna Kowalska zostało znalezione tutaj pod
28 indeksem czyli 28 jakby znak.
I jeszcze jedna rzecz którą tutaj mamy.
Jest to input a więc cały tekst na którym pracowaliśmy czyli tutaj indeks 28 się w tym tekście znajduje.
Możesz to sprawdzić wpisując konsoli dir search czyli to co zostało zwrócone.
I wtedy lepiej to widać że 0 to jest Anna Kowalska to co tutaj 1 to Kowalska potem jeszcze indeks oraz
input tyle mamy tutaj o ile oczywiście na tablicach również jest dostępne co jest jednak ciekawe wykonaliśmy
tutaj wyszukiwanie globalne bo napisaliśmy g ja jeżeli nie napiszę g zacznijmy i odwołał się do search
działa to dokładnie w ten sam sposób ale wyszukaliśmy tylko jednego elementu tak jak byśmy tutaj wyłączyli
flagę g gdzie tylko to zostanie podświetlane.
Natomiast jeżeli tutaj mamy flagę g to ponowne wywołania takiej komendy będą nam zwracać kolejne rezultaty
czyli jeśli napiszę search 2 i znowu wywołam to samo.
Pamiętaj przy fladze g czyli global to zerknijmy pod search mamy Anna czyli to co na początku zostało znalezione
a pod search 2 Tomasz Nowak czyli kolejny e-mail który tutaj został znaleziony.
Jeżeli raz jeszcze bym to wykonał zrobił search 3 czy to zostanie już zwrócone null.
Z tego powodu możemy sobie stworzyć pętlę która będzie nam to wszystko sprawdzać i napisze teraz pętle
while
i chciałabym jeszcze wcześniej utworzyć zmienną search pustą oraz zmienną domains.
Będzie to pusta tablica.
Czyli to sobie na razie wykomentuje i zobacz co robimy tutaj mamy zmienną search i tutaj do niej przypisujemy
dokładnie to samo co wyżej czyli tutaj zostanie zwrócona tablica i będzie to wartość prawdziwa czyli
pętla się wykona jeśli się wykona to do tej tablicy chce dodać search 1 czyli w naszym przypadku właśnie
taką domenę bo tylko tych domen wyszukujemy bo stworzyłem sobie do tego grupę potem w pętli while znowu
wykonamy coś takiego i to zostanie zwrócone tak jak wyżej było.
Search 2.
Znowu wartość prawdziwa bo tu będzie tablica pętla się wykona i znowu dodamy tutaj domenę za trzecim
razem to zwróci nam już null czyli tutaj będzie null i zostanie to podstawione do while i wtedy pętla
już się nie wykona.
Czyli na tym etapie w domains powinniśmy mieć wszystkie znalezione domeny zerknijmy po odświeżeniu.
Jak widzisz Kowalska i Nowak w ten sposób w naszym tekście znaleźliśmy wszystkie domeny i będziemy coś
mogli z nimi zrobić.
Natomiast co jest ważne gdybym tutaj usunął flagę G to ta pętla się zawiesi dlatego że zawsze będzie
zwracane to samo czyli to search zostanie zwrócone.
Anna Nowak to co zostało znalezione i w kolejnej itercji znowu Anna Nowak i znowu Anna Nowak czyli
kolejne wykonania jeżeli nie ma flagi G.
Zwracają ciągle tylko ten pierwszy rezultat to jest ważne i teraz na koniec chcecie pokazać jeszcze
co znajduje się tutaj pod regex po każdym wykonaniu czyli może wróćmy do tego co mieliśmy wcześniej.
To z kolei wykomentuję to odkomentuje.
Czyli raz wykonaliśmy sobie taki regexp i może zanim to zrobimy wpiszemy sobie console log.
Chcę ci to pokazać odświeżam.
Tutaj zostało to zamienione na to string dlatego zróbmy sobie console dir
i będzie to wyglądać następująco.
Otóż mamy tutaj coś takiego jak global czyli możemy sprawdzić czy była flaga g ustawiona true ignore case
to jest flaga if false multiline również false.
Gdybym tutaj dodał i oraz m to mielibyśmy tam true czyli na tym wyrażeniu można to sprawdzić.
I jedna ciekawa rzecz mianowicie last index 45 czyli kiedy mamy flagę g i raz już tutaj czegoś wyszukałem
to pod indeksem tutaj Last indeks zostaje zapisane odkąd będzie dalej wyszukiwane.
Później czyli 45 znak musielibyśmy sprawdzić w którym to jest miejscu być może jest to tutaj skopiujmy sobie
to wkleję tutaj taki string i sprawdzimy jego length jest to 45.
Czyli kolejne wyszukanie kiedy użyjemy raz jeszcze dokładnie tego samego zacznie się odtąd będziemy
szukać aż znajdziemy tutaj Tomasza Nowaka więc mamy tam coś takiego jak coś takiego jak last index.
Jeżeli natomiast usunę tutaj taką flagę to zobaczmy regex last index będzie to zero.
I co ciekawe kiedy w takiej pętli jak tutaj wyszukiwaliśmy to właśnie za pierwszym razem zostało coś zwrócone
tutaj w regexp last index zostało ustawione na 45.
I gdybym to zresetował przypisując regex last index 0 to od nowa zaczęło by się tutaj wyszukiwanie.
Jak widzisz ta metoda jest przydatna kiedy chcemy w tekście coś znaleźć i zostanie nam zwrócona tablica
jak widzisz w pętli możemy sobie to wyłuskać zapisać w jakiejś innej tablicy teoretycznie również moglibyśmy
sprawdzić czy w takim stringu w ogóle występuje email bo jeżeli zostanie nam zwrócona tablica to znaczy
że coś zostało znalezione a jeżeli null to nic.
Natomiast pokażę ci jeszcze inne metody które pozwalają nam w takiej sytuacji sprawdzić tylko czy coś
się w takim tekście znajduje.