JavaScript: Kwantyfikatory
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 omówimy kwantyfikatory w wrażeniach regularnych.
Zauważ że przygotowałem zupełnie inny tekst i już nie mamy lorem ipsum ale kilka życiowych przykładów
z którymi już się zmierzyliśmy np. jeżeli chodzi o ciasteczka.
Pokażę ci teraz do czego nam się mogą przydać w takich sytuacjach wyrażenia regularne.
Przejdźmy tutaj do quantifiers alternation i będę chciał je omówić.
W zasadzie to wszystko jest tutaj napisane w tak dobry sposób że sam możesz się z tego uczyć ale będę
chciał ci fajne przykłady też pokazać jeżeli przejdzie jakiegoś przykładu to możesz zawsze wcisnąć te
strzały.
Wtedy on załamuje się tutaj jeżeli wciśnięty.
To ten przykład załadować się w tym polu.
Niemniej jednak zacznijmy od czegoś pożytecznego pokazywałem ci do tej pory że możemy tutaj wpisać na przykład
kropkę i to będzie dowolny znak alfa numeryczny.
I tutaj widzimy że teraz mamy 105 takich trafień.
Jeżeli wpisze drugą kropkę to już mamy ich mniej dlatego że mówimy znajdź wszystkie jakby takie grupy
gdzie mamy obok siebie dwa dowolne znaki natomiast nie chcemy tego wpisywać w ten sposób że będziemy
tutaj po kolei te kropki wpisywać.
Pokażę ci jak możemy je jak gdyby pomnożyć.
Wyobraź sobie że chcielibyśmy takie ciasteczko które mieliśmy zapisane.
Mam nadzieję że oglądałeś ten kurs po kolei to wiesz jak działają ciasteczka.
Niemniej jednak są tutaj pewne wartości oddzielone średniakiem i zazwyczaj to powinno być średnik spacja
średnik spacji i nie byłoby problemu.
Wyobraź sobie że chcemy te wartości rozdzielić używając wyrażenia regularnego w JavaScript jest to możliwe
za pomocą metody Split.
I już to robiliśmy właśnie w tym kursie.
Natomiast wyobraźmy sobie że ktoś mógł wpisać średnik spacji albo dwie spacje powiedzmy tutaj mógł
nie wpisać żadnej spacji.
I co wtedy wrócę do takiego dobrego przykładu gdzie będziemy mieć po prostu spację i powiem że chcę
znaleźć wszystkie takie fragmenty gdzie mamy średnik spację.
Zostały one znalezione więc jak się później w tym kursie przekonasz będziemy mogli je zamienić albo
taki string na nich podzielić i zamienić na tablicę.
Natomiast jeżeli tutaj wpiszemy teraz kolejną spację a tutaj spację usuniemy to mamy problem.
Tutaj to zostanie rozdzielone ale ten fragment który tutaj zostanie będzie zawierał na początku spację
a tutaj to nie zostanie rozdzielone ja tutaj zauważ pisałem spację pokazywanie że mamy taki specjalny
znak jak x on oznacza spację czy też znak nowego wiersza ale możemy również wpisać tutaj spacji chociaż
jej nie widać to jest to normalny znak jeżeli wpisze dwie stacje to jak widzisz jest to tutaj zaznaczone.
A więc wpisałem sobie że ma być średnik i spacja.
I teraz chciałbym zrobić tak że ta spacja może być jedna albo może ich być więcej ale może ich nie być
wcale.
I możemy to zrobić za pomocą gwiazdki.
Jak widzisz mamy tutaj napisane że to trafia w 0 lub więcej poprzedzających znaków.
Czyli mamy tutaj znak spacji którego nie widać ale tutaj jest po najechaniu.
Jak widzisz spacja i mogę napisać gwiazdka i to się nie odwołuje absolutnie do tego znaku to się odwołuje
tylko do poprzedzającego znaku czyli spacji.
I teraz powiedziałem że ma być średnik następnie spacji może być ale nie musi być.
Czyli może być 0 razy.
A może być i 100 razy i teraz nam to pasuje bo tutaj powiedziałem średnik i spacja może być 0 razy
około 100 albo więcej razy.
I tutaj jeżeli będzie tyle spacji to również będzie to pasować.
Mam nadzieję że to rozumiesz.
Gwiazdka tyczy się tylko poprzedzającego znaku jednego znaku.
Wcześniej gdybyśmy to mieli np. A B C to oznacza że znacie takie stringi gdzie będzie A potem B a potem
może być C nie musi albo może być 10 razy nawet C więc tak to wygląda.
Teraz będę chciał Ci pokazać kolejny przykład i w zasadzie to może przejdźmy do tego maila do tego co
mamy tutaj jeszcze wrócimy za sekundkę.
I wyobraź sobie że z takiego tekstu jaki mamy tutaj chcemy wyszukać mail i w tym przypadku jak byśmy to
mogli zrobić.
Otóż możemy napisać spacja bo wiemy że tutaj była taka spacja jeszcze ci pokaże
w tym kursie możemy napisać znajdź spację teraz nam znalazło wiele tych spacji ale później chcemy aby to
było w.
Dowolny znak alfanumeryczny.
Zgadza się i chciałbym aby on występował tak jak w adresie e-mail raz lub więcej razy bo może mieć adres
e-mail Jan małpa kowalski pl czyli raz lub więcej razy.
I do tego mamy plus.
Zobacz raz lub więcej razy.
Więc jeżeli napiszę w plus to teraz powiedziałem znajdź spację potem dowolny znak alfanumeryczny
raz.
Lub więcej razy.
Małpa się do tych znaków alfanumerycznych nie łapie ale jak widzisz Jan zostało tutaj zaznaczone spacja i
następnie jan zostało zaznaczone.
Więc teraz mogę napisać.
Następnie chciałbym żeby była małpa i znowu znak alfanumerycznych czyli teraz zostało to złapane w
ten sposób.
Jeżeli chcemy szukać dalej to możemy napisać znowu plus czyli minimum jeden znak powinien się dalej
znajdować teraz Jan Kowalski został zaznaczony.
Możemy teraz powiedzieć że dalej chcemy kropkę ale pamiętaj że nie możemy napisać tego w ten sposób
chociaż kropkę złapało dowolny znak napiszmy tutaj backslash.
Kropka.
Czyli taka dosłowna kropka ma się tam znaleźć i potem mamy domenę i domena to może być dwa znaki albo
do czterech znaków.
Oczywiście to mogłoby być com pl więc takie wyrażenie regularne dla emaila jest dużo bardziej skomplikowane
aby działało poprawnie.
Natomiast powiedzmy że tutaj chcemy trzy znaki takie jak właśnie alfanumerycznych albo 4.
I teraz jak to zrobić.
Możemy tutaj napisać w i napisać plus czyli jeden lub więcej ale jeżeli będzie więcej zostanie to złapane.
Jak możemy sobie z tym poradzić.
Otóż mamy tutaj kolejny kwantyfikator są to nawiasy klamrowe.
I tutaj możemy określić ile ma być takich znaków czyli mogę tutaj napisać zamiast tego plusa który oznacza
jeden lub więcej takich znaków napiszmy.
Dwa przecinek cztery czyli od dwóch do czterech.
I teraz jak widzisz e-mail został tutaj wyłuskany.
I to co jest dalej już się tutaj nie znajduje więc mamy adres e-mail.
Jeżeli napiszemy tutaj co też będzie OK czyli od dwóch do czterech i to znowu odwołuje się do poprzedzającego
znaku czyli tutaj szliśmy od początku doszliśmy do tej kropki i mówimy po kropce musi być jakiś znak
alfanumeryczny od dwóch do czterech razy może wystąpić.
Więc tak to wygląda.
Mam nadzieję że to rozumiesz.
Jeśli idziemy od początku przerób to razem ze mną.
Teraz będę chciał znaleźć kod kreskowy w której się znajduje zapiszmy go w ten sposób możemy powiedzieć
już wiesz digit digit pauza.
Następnie trzy razy taka cyfra ale po co się powtarzać.
Możemy powiedzieć że chcemy znaleźć wszystkie cyfry i tutaj podać że mają być one dwie.
Czyli znajdź takie ciągi znaków gdzie będzie cyfra dwa razy.
Następnie taka pauza.
I tutaj 3 cyfra trzy razy w ten sposób.
Natomiast gdybym chciał aby taki kod też był łapany to znowu możemy napisać 3, 4.
Jeżeli coś tutaj będzie dalej albo inne cyfry to one nie są już tutaj wyłapywane.
Pokazałem Ci już operator plus czyli raz lub więcej gwiazdka zero lub więcej.
A teraz pokażę ci jeszcze taki operator który nazywa się operatorem optional.
Dzięki niemu poprzedzający znak może wystąpić 0 albo jeden raz.
Teraz będziemy chcieli sobie startować te linki.
Być może wiesz że np. na eduweb pl ale jeśli napiszesz komentarz i wkleisz taki link to później zamienia się
on na prawdziwy link właśnie po stronie serwera wyrażeniem regularnym jest to parsowane cały taki tekst i linki
są wyłapywane.
Spróbujmy sobie taki link teraz wyłapać i napiszemy do tego wyrażenia regularne a więc chcemy dowolny
znak.
W zasadzie nie chcemy protokół a więc chcemy http.
Później dwukropek takie slashe te slashe w javascript tutaj tego nie musimy robić ale w skrócie musielibyśmy
zescapować bo zauważ że one wyglądają tak samo jak ten slash tutaj i tutaj tu nie możemy ich zmieniać
ale kiedy będziemy pisać wyrażenia regularne w javascript to interpretacje tutaj by sobie je zaczął a tutaj
zakończył.
Dlatego musimy tutaj zrobić Escape to narzędzie robi to dla nas automatycznie.
Czyli to dziwnie wygląda ale to oznacza HTTP dwukropek dwa slashe.
I powiedzmy że następnie dowolny znak alfanumeryczny i chcielibyśmy w przypadku plusa aby to było
jeden lub więcej czyli możemy tutaj napisać plusa i powiedzmy że potem chcemy kropkę pamiętać że robimy
Escape kropki i znowu domenę więc możemy powiedzieć w na przykład 2 do 4 to zostało złapane.
Natomiast teraz jak złapać HTTPS.
Otóż możemy tutaj napisać S.
Teraz łapie nam tylko to i dodać do tego optional 0 lub więcej.
Jeżeli za tym znakiem postawię znak zapytania to obydwa linki zostały złapane dlatego że sprawdzamy
od początku musi być http musi być S.
Może być ale nie musi.
Czyli jeżeli dojdziemy tutaj następny znak to nie jest s ale s nie musi być a tutaj jest.
Czyli wszystko gra następnie musi być dwukropek.
Te dwa slashe w tym kierunku.
No i tak jak to zaznaczyłem.
Oczywiście wyrażenie regularne będzie bardziej skomplikowane dla takich linków aby były one całkowicie
dobrze rozpoznawane.
Ale tak może to wyglądać.
Pokażę ci jeszcze alternations które pozwala nam tworzyć jakby warunek OR czyli zamiast S.
Mógłbym napisać HTTP lub HTTPS i teoretycznie działało by nam to dobrze ale jak widzisz dalej nic nie
jest zaznaczone.
Z tego powodu że tutaj mówimy znajdź takie ciągi gdzie będzie HTTP albo HTTPS i wszystko dalej takiego
nam tutaj nie znalazło więc musielibyśmy to zgrupować ale ugrupowaniu powiem jeszcze w jednej z kolejnych
lekcji.
Wtedy byłoby OK bo mówimy HTTP lub HTTPS a później to wszystko.
Jak widzisz teraz to zadziałało.
O tym powiem ci jeszcze w jednej z kolejnych lekcji.