JavaScript: Przechwycone fragmenty tekstu
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 chcę Ci pokazać że kiedy grupujemy sobie pewne znaki to tak naprawdę możemy potem przechwytywać
fragmenty tekstu które w tych grupach są zapisane.
Przejdziemy tutaj do substitution i będziemy za moment z tego korzystać.
Natomiast mam tutaj znowu jak widzisz kilka nazw plików i spróbujmy sobie je stargetować więc chcemy aby
się to zaczynało od powiedzmy kropka czy dowolny znak teraz lub więcej i żeby się skończyło na kropka
zrobimy jej Escape.
JPE będzie opcjonalne G może to wyglądać w następujący sposób.
I teraz aby tutaj duże litery też były ztargetowane zaznaczmy flagę ignore case.
Teraz wszystko jest złapane.
Natomiast zróbmy sobie tutaj na początku grupę która oplecie nam kropka plus.
Jak widzisz nic się tutaj nie zmienia ale jeżeli tutaj najadę to mamy napisane capturing group numer 1 i okazuje
się że to co tutaj zostało zgrupowane czyli to będzie obrazek bo później mamy kropka JPG to będzie zdjęcie
to będzie picture to możemy się do tego odwołać poprzez właśnie dolar jeden to co możesz zobaczyć tutaj
jest to niezwykle ciekawe bo możemy teraz otworzyć panel substitution.
Tutaj różne rzeczy się dzieją ale usunę to wszystko i teraz jeżeli odwołam się do dolar jeden zauważ
mamy obrazek zdjęcie i picture czyli pod dolar 1 mamy to co znalazło się w pierwszej grupie to co zostało znalezione
jak widzisz tutaj wszystko zostało zaznaczone ale w grupie pierwszej czyli generalnie w tych nawiasach
mamy tylko dowolny znak.
Raz lub więcej wiemy że będzie to np. obrazek i teraz w języku JavaScript z tego będziemy mogli skorzystać
np. funkcji replace.
Ja ci jeszcze pokażę.
Ale skoro pod taką zmienną dolar jeden przy zamienianiu właśnie z replace będziemy mieli to co zostało znalezione
to wyobraź sobie że możemy teraz napisać np. dla wszystkich plików JPG i zmienimy jakby nazwy wszystkich
tych plików czyli chcieliśmy znaleźć wszystkie pliki które się kończą na JPG albo JPG z dużej czy z małej
litery a następnie w ten sposób to zamienić.
Teraz pokażę ci ciekawszy przykład wklej tutaj troszkę inny tekst.
Wygląda to w ten sposób i wyobraź sobie że z takiego pliku tekstowego będziemy chcieli wyłowić tylko
emaile i zamienić je tutaj na odpowiedni link.
To często robimy po stronie serwera pokażę ci teraz jak to zrobić.
Otóż nie piszemy już tego nie chcemy zaczynać od początku linii prawda.
W ten sposób tylko ogólnie gdziekolwiek chcemy znaleźć takie dzióbki pomiędzy tymi dziubkami chcemy żeby
było word czyli takie słowo raz lub więcej przynajmniej.
Następnie małpa następnie znowu chcemy aby to był znak alfanumeryczny raz lub więcej potem chcemy
kropkę i później znak alfanumeryczny od dwóch do powiedzmy czterech razy.
Teraz zaczęło to dopiero działać kiedy to wpisałem mam nadzieję że rozumiesz o co chodzi.
Czyli tutaj mieliśmy właśnie taki znak.
Raz lub więcej czyli np. Piotr następnie małpka i następnie taki znak.
Raz lub więcej potem kropka czyli tutaj i tutaj domena to co już się robiliśmy w poprzednich lekcjach
od 2 do 4 czyli to wszystko zostało stargetowane.
Natomiast chciałbym sobie opleść tutaj w grupę to wszystko oprócz tych dziubków niech to wygląda w ten
sposób dalej to samo jest znajdowane ale teraz pod dolar 1 mamy właśnie coś takiego.
Czyli kiedy zamieniamy przy okazji zauważ jak to będzie działać na javascript kiedy tutaj coś zmieniamy to skasuje
to zmieniamy tylko to co zostało znalezione więc jeżeli napiszę dolar 1 dolar 1 odwołuje się do tej
grupy tak jak ci wspomniałem i będę chciał to zamienić to to co zostało na niebiesko podświetlone jest
zamieniane tym co tutaj wpiszę oczywiście tutaj mogę sobie wpisać co chce i jak widzisz to zostało tutaj
tak zamienione jeżeli nic nie wpisze to to po prostu usuniemy ale dolar 1 przechowuje mi to co sobie zgrupowałem.
Dzięki temu mogę tutaj napisać a href taki link napiszemy mailto dolar 1 możemy zamknąć takie a i tutaj
napisać że dolar 1.
I widzisz co teraz się stało wyłapaliśmy z tekstu taki zapis maila i zmieniliśmy to na link poprawny
w kodzie HTML moglibyśmy teraz to gdzieś wstawić.
Bez tych dzióbków oczywiście jak widzisz bo nie umieściłem ich w tej oto grupie.
Teraz chce ci pokazać jeszcze jedną ciekawą rzecz mianowicie znaleźliśmy tutaj e-mail.
A co gdybym chciał znaleźć jeszcze ten numer telefonu to tutaj mogę sobie po tym napisać powiedzmy spację.
I teraz napiszemy sobie digit np. razy trzy pauza i powtórzymy to jeszcze
w ten sposób teraz to zostało załapane ale chciałbym aby było to w osobnej grupie czyli zrobię sobie
tutaj coś takiego.
Co prawda cały ten tekst został zapisany ale w drugiej grupie będę miał tylko to co tutaj się znalazło
czyli teraz jeżeli odwołam się nie do dolar jeden ale do dolar na przykład dwa to tutaj mam pierwszą grupę
to jest dolar jeden tutaj pokazuje nam że jest to capturing group 2 czyli dolar group 2 to jeżeli teraz tutaj napiszę
dolar 2 to widzisz że jest to ten znaleziony numer telefonu jest to o tyle ciekawe że mogę teraz tutaj
dopisać np. taki link jak działa na Skypie czyli znowu a href może sobie to wszystko skopiujmy i zamiast
mailto możemy napisać tel.
W ten sposób i dolar 2 dolar 2 i to też zostało zamienione.
Czyli za każdym razem jak robimy grupę z takich nawiasów to ona potem będzie dostępna pod dolar 1 kolejna
pod dolar 2 itd itd.
Teraz chcę ci pokazać jeszcze jeden przykład wkleję tutaj inny tekst.
Będzie to wyglądać następująco i powiedzmy że teraz chce znaleźć wszystkie adresy e-mail które kończą
się na moja firma niekoniecznie konto może być com albo net zapiszemy tutaj nowe wyrażenie regularne
i napiszę tutaj w grupie dowolny znak.
Raz lub więcej.
Następnie małpka.
Następnie moja firma i chce żeby to było albo net albo com i tutaj zrobimy kropkę kropka została złapana
i teraz zrobimy grupę w której też możemy napisać com albo net.
To dla nas zostanie bez problemu złapane.
Teraz dalej chciałbym wyłapać sobie numer telefonu który jak widzisz jest w pośredniku czyli napiszemy sobie tutaj
np. średnik możemy to zrobić w ten sposób i stworzymy kolejną grupę i numer telefonu tak jak przed
momentem.
Jak widzisz działa wszystko jest teraz dla nas podświetlone czyli jeżeli będziemy tutaj u dołu coś zamieniać
to zamienimy wszystko co jest na niebiesko jak widzisz.
Natomiast co jest ciekawe to pod dolar 1 mamy Piotr czy Katarzyna w ten sposób moglibyśmy tutaj oczywiście napisać
to dalej i wtedy mielibyśmy to wszystko co jest w tej grupie.
Ale ja chciałem tylko imiona które tutaj były.
Z jednego prostego powodu otóż chcę tutaj napisać dalej małpa moja firma com czyli chciałem wyłapać wszystkie
emaile które mają moja firma com albo net i zamienić je na moja firma com.
Teraz jest OK.
Teraz sobie postawię średnik i chcę tutaj numer telefonu wpisać który tutaj przechwyciliśmy więc dolar
2 mogę się odwołać i zobacz jaka niespodzianka otóż dolar 2 kieruje teraz na tę grupę którą tutaj stworzyliśmy
więc aby się odwołać do numeru telefonu muszę napisać dolar 3 i teraz tej grupy nie utworzyłem po to
aby przechwycić cokolwiek.
Pod dolar 1 dolar 2 ale tylko po to aby mógł użyć tego operatora or.
Wiesz że musimy to mieć w grupie więc teraz możemy oznaczyć taką grupę jako non capturing group.
To jest ciekawe.
Jeżeli to zrobimy to wtedy ta grupa nie będzie tutaj brana pod uwagę w tych dolarach możemy to w zasadzie
sprawdzić tutaj w groups mamy coś takiego jak widzisz tutaj non capturing group wystarczy napisać znak zapytania
dwukropek przy otwarciu takiej grupy w ten sposób i teraz ona działa normalnie jak zwykła grupa ale pod
dolar 2 nie będzie to umieszczone.
Czyli teraz dolar 3 jak widzisz na nic nie kieruje a dolar 2 kieruje na numer telefonu czyli tutaj pod dolar
2 już tego dłużej tego nie ma a więc zamieniliśmy w naszym pliku po prostu adres e-mail na inną firmową domenę.
Wróćmy jeszcze na sekundę tutaj do substitution bo jest to
ciekawe że możemy tutaj odwołać się do dolar end do takiej specjalnej też zmiennej która jest dostępna tutaj
i może tutaj byśmy wrócili z powrotem do tych plików.
Ok.
Tak to wyglądało i teraz dolar tak jest tutaj napisane.
Ampersand to jest cały match czyli wszystko co dla nas zostało znalezione.
Pamiętasz może w poprzedniej lekcji jak mieliśmy lookahead gdzie mogliśmy wyłapać np. wszystkie nazwy obrazków
były na niebiesko zaznaczone które się kończą na JPG JPG
wtedy nie było zaznaczone i to było o tyle ciekawe że match czyli to co jest na niebiesko byłoby pod
taką zmienną czyli tylko to co zostało dla nas znalezione.
Tak jak wspomniałem pod zmienną s1 będzie to co jest w grupie a pod match wszystko co jest tutaj zaznaczone
na niebiesko w tym narzędziu.
Mamy tutaj jeszcze coś takiego jak before match i after match to nie często jest przydatne natomiast o co
chodzi gdybyśmy chcieli starterować tylko rozszerzenia.
Zobaczmy.
Czyli zrobimy sobie taką grupę.
Może chociaż ta grupa tutaj nie jest konieczna.
To jeżeli teraz odwołamy się tutaj do dolar apostrof czyli before match to będziemy mieli wszystko co było
przed tym trafieniem.
Natomiast pokazałem ci że tutaj jeśli zmieniamy to to co wpisujemy zostaje wpisane tutaj gdzie było to niebieskie
więc jeżeli w tym przypadku odwołam się do dolar i do tego właśnie apostrofa w zasadzie jest taki backtick.
Czyli to nie jest apostrof to jak widzisz odwołamy się do obrazek obrazek dlatego że tak jak wspomniałem to
będzie kierować na to co jest przed trafieniem ale że tutaj zamieniamy tylko to niebieskie to zostaje czyli to zostało
za niebieskie postawiłem sobie teraz to co było przed tym czyli w tym przypadku nie jest to szczególnie
użyteczne natomiast after match to jest odwrotność.
I tutaj rzeczywiście jest dolar i to jest ampersand.
Możemy to tak napisać.
Jak widzisz w tym przypadku nic nie ma ale jeżeli znowu byśmy sobie to zamienili i tutaj byśmy napisali to
w ten sposób i JPG.
Nie chcemy żeby tutaj było więc może napiszemy to tak czyli chcemy znaleźć wszystko.
Może do kropki i usuniemy to stąd i tutaj dodamy że ma to być rozpoczynające się w ten oto sposób.
Tutaj mnie złapało akurat tego bo w nie łapie nam pauzy ale okej może to tak wyglądać.
I teraz jeśli się odwołamy do after match to jak widzisz w tym przypadku to np. będzie JPG i to zostaje
tutaj wpisane.
Tutaj dziwnie to wygląda ale myślę że na tyle ci to tłumaczyłem że rozumiesz.
I co ciekawe wszystkich tych zmiennych będziemy w skrócie mogli korzystać kiedy się już będziemy do
tekstu dopasowywać.