JavaScript: Praktyczny projekt - “Antybluzgacz” cz. 1
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.
Kończąc rozdział o wyrażeniach regularnych napiszemy sobie w sposób obiektowy bardzo ciekawy projekt
właśnie regex wykorzystujący i będzie to antybluzgacz.
Od razu przejdźmy do rzeczy mam tutaj takie pole i powiedzmy wyślij i teraz chciałbym aby jeżeli ktoś
tutaj będzie coś wpisywał aby było to filtrowane to oznacza że chcemy wyłapać wszystkie słowa uważane
za niepoprawne politycznie możemy tak powiedzieć a więc chciałbym aby jeżeli ktoś tutaj będzie pisał
np. Witam Cię kurka wodna to aby kurka wodna zostało zamienione na przykład na coś takiego.
Czasami na różnych portalach to widzimy hash dolar coś w tym stylu zaraz sobie będziemy chcieli to zaimplementować.
Czyli to co będzie nam potrzebne to na pewno zdarzenie na wpisywanie i możemy użyć zdarzenia on input
na tym polu albo on key zaraz ci to pokaże.
Natomiast chcę to zrobić w sposób obiektowy.
Przejdźmy do naszego skryptu jeżeli chodzi o HTML to nie jest to tylko pole text area tutaj przycisk
do wysyłania tak to wygląda więc tego pola będziemy chcieli się odwołać.
Na początek stworzymy sobie funkcję samą wywołującą się aby to co tutaj zawrzemy wewnątrz nie było widoczne
na zewnątrz i będę chciał stworzyć w sposób obiektowy nasz skrypt nasz programik więc nazwiemy go
troll killer czyli zabijacz troli i tworzymy funkcję czyli nasz konstruktor.
Mam nadzieję że ten kurs oglądasz od początku do końca jeżeli tak doskonale wiesz co teraz robimy.
Troll killer będzie się nazywał taki konstruktor i chciałbym aby ktoś wykorzystujący nasz skrypt mógł
do niego przekazać pole na którym będziemy operować które będziemy sprawdzać i listę zakazanych słów.
Więc tutaj parametr nazwiemy sobie field a lista zakazanych słów to będzie restricted words.
W ten oto sposób i będziemy chcieli je tutaj przypisać do naszego nowo stworzonego obiektu więc napiszmy
this i skorzystamy z tej konwencji z podkreślnikiem aby to było teoretycznie ukryte aby z tego nie korzystać.
Czyli this field.
Będzie to pole przekazane więc będzie to referencja np. do takiego obiektu np. w drzewie dom i następnie
restricted word.
Chociaż może w skrócie nazwijmy to words będzie nam prościej na tym pracować words i teraz nie przypiszemy tutaj
bezpośrednio tego co ktoś przekaże ale troszkę to zmienimy.
Powiem ci teraz dlaczego otóż chciałbym aby naszego troll killera można było wywoływać następująco.
Otóż napiszemy sobie var tk new troll killer przekazujemy pole czyli jeżeli będziemy chcieli sobie znaleźć
to pole.
Możemy go znaleźć poprzez name your message więc wpiszę sobie tutaj document query selector i podamy
sobie taki atrybut właśnie name równa się message.
Nie ma znaczenia jak to przekażemy ma to być po prostu przekazane to pole.
A druga sprawa to zakazane słowa i chciałbym aby ktoś mógł te słowa przekazać jako string.
One tutaj będą wpisane więc ja je teraz wkleję.
I tak to będzie wyglądać może aby było tutaj trochę bardziej to widoczne to podzielimy to w ten sposób.
Czyli pierwszy parametr jest to pole a drugie to słowa zakazane i chce je przekazywać w ten sposób czyli
kurka orzesz ty wuj psiakość motyla noga i kochany to będą słowa zakazane w naszej aplikacji.
Czyli tutaj pod restricted words mamy właśnie taki string.
Ale ja chciałbym to zamienić na tablicę dlatego tutaj pod words napiszemy to w taki oto sposób restricted
words.
Skorzystamy z metody split i to co ktoś tutaj przekazał jak widzisz będziemy chcieli sobie rozdzielić
na przecinku i spacji.
Ale że tutaj może być spacja może być różnie to ktoś mógł wpisać to wiesz już z lekcji poprzedniej że
możemy tutaj stworzyć wyrażenie regularne i napiszemy w nim że chcemy rozdzielić na przecinku i spacji
może być ale być nie musi.
Ok.
Tak to powinno wyglądać i teraz po utworzeniu tego obiektu zróbmy sobie console log this words.
Przejdźmy tutaj no i jak widzisz mamy właśnie tablicę w dokładnie taki sposób rozdzieloną.
Teraz przejdziemy do narzędzia regexr wpisze tutaj od razu jakiś tekst który byłby np. w naszej aplikacji
w tym naszym polu.
Mógłby ktoś ktoś tutaj coś takiego napisać na przykład ty wuju kochany o kurka wodna na przykład i będę
chciał stworzyć odpowiednie wyrażenie regularne aby pokazać ci o co chodzi.
Czyli mamy tutaj nasze przekazane słowa i teraz jak z tego stworzyć wyrażenie regularne.
Otóż na przykład wuj czy kurka wodna moglibyśmy zapisać jako taką grupę czyli wuj albo np. kurka wodna.
Jak widzisz jest to dla nas odpowiednio podświetlone.
Czyli jak teraz z tych słów które mamy które mamy tutaj w tej tablicy stworzyć coś takiego otóż możemy
całą taką tablicę połączyć na właśnie takim path że będziemy mieli string pokaże ci teraz o co chodzi.
Gdybyśmy tutaj napisali join w ten sposób zrobimy tutaj console log to zobaczmy co się wyświetli.
Jak widzisz dokładnie coś takiego.
Jeżeli to sobie teraz tutaj wpisze to jak najbardziej to będzie działać.
Czyli kiedy będziemy mieli już taki string to możemy przekazać go do new regex i to będę chciał
zrobić tutaj napiszemy this regex równa się new reg exp.
I pamiętasz że tutaj właśnie string podajemy.
Więc jeżeli to zrobi nam taki string to będzie okay czyli widzisz komuś pozwoliliśmy nie podawać tego
w ten sposób bo nie jest to zbyt wygodne ale po przecinku to zamieniliśmy na tablicę a teraz tablicę na
nowe wyrażenie regularne i chciałbym tutaj dodać jeszcze flagi co jest dosyć ważne.
Te flagi to będzie i.
I czyli nie patrzymy na wielkość liter global oraz multiline również będzie to działać multiline to w zasadzie
tutaj nie byłoby konieczne.
Natomiast co jest ważne to chciałbym utworzyć to wyrażenie regularne razem z tymi nawiasami tutaj otwierającymi
i zamykającym.
One tutaj muszą być jakby dopisane w zasadzie ja tutaj zrobiłem błąd bo to nie może być przecież w stringu.
Pewnie to zauważyłeś teraz zostałoby to poprawnie zwrócone taki string jak Ci pokazałem zostałby zwrócony
i chcę do niego jeszcze dodać jeden nawias i drugi nawias więc musimy je tutaj dodać w ten sposób nawias
połącz to ze stringiem który tu zostanie zwrócony który mamy w konsoli i kolejny nawias jak widzisz
dynamicznie możemy utworzyć takie wyrażenie regularne nie powinno być problemu pod this regex ono
zostanie zapisane możemy zrobić console log
this reg ex powinna nam się jego tekstowa reprezentacja wyświetlić.
No i jak widzisz mamy właśnie takie wyrażenie.
Przy okazji skąd to się bierze że tak to jest zapisane.
Otóż w tym kursie mówiłem ci w lekcji o metodzie to string że ona jest pewnych sytuacjach wykonywana.
I tutaj właśnie została wykonana na obiekcie regex jego metoda to string i zwróciła nam jego tekstową
reprezentację.
OK i teraz będziemy chcieli zrobić kolejną rzecz mianowicie będę chciał przypisać zdarzenie do naszego
pola które tutaj zostało przekazane czyli do tego text area.
Nie będę tego robił w tym miejscu.
Tutaj mam tylko metodę assign events więc którą zaraz tworzymy
i teraz ją na prototypie pod spodem utworze.
Ok skoro chcę się odwołać do pola które tutaj ktoś przekazał.
Ono jest tutaj pod this field tu możemy napisać this field add event listener.
I teraz jakie zdarzenie chcę dodać.
Mówiłem ci że tu możemy zrobić zdarzenie input czyli na wprowadzenie ale mamy również takie zdarzenie
jak key up czyli za każdym razem kiedy w tym polu ktoś coś wciśnie i podniesie klawisz to takie zdarzenie
się odpali i będę chciał wywołać funkcję którą za moment stworzymy.
Będzie się nazywała filter message więc this filter message.
W ten sposób natomiast żeby w tej metodzie słowo kluczowe this nie kierowało na tą text area właśnie klikniętą
ale na nasz obiekt to użyjemy tutaj bind również już o tym wielokrotnie w konkursie mówiłem bind this i
na końcu false przy use capture.
Tyle wystarczy w tej metodzie.
Czyli teraz jeżeli sobie stworzymy metodę filter message to powinniśmy po każdym przyciśnięciu klawisza
ją wywoływać.
Zróbmy to na prototypie.
Ok.
I tutaj słowo kluczowe this dzięki bind przypominam będzie kierować no właśnie troll killer na ten nowo utworzony
obiekt zróbmy sobie tutaj console log i przechwycimy sobie jeszcze może event abyśmy mogli się odwoływać
do tego pola oczywiście pod this field.
Mamy do tego dostęp albo pod event target również przypominam możemy tutaj zrobić console log event.
Nie ma to znaczenia.
Mamy jakiś błąd zobaczmy błąd mówi nam że nie możemy odczytać add event listener null czyli wychodzi na to że tutaj this
field jest równe null.
Dlaczego.
Przekazaliśmy tutaj pole do troll killer zapisaliśmy je w this field powinno wszystko działać w takim
razie zróbmy sobie tutaj console log this field zobaczmy o co może chodzić.
Jak widzisz rzeczywiście null.
Dziwna sprawa dlatego że przypisaliśmy je tutaj i następnie odwołaliśmy się do assign events.
Więc sprawdźmy może tutaj jaka jest wartość field usunę ten console log.
Debugujemy sobie szybko co tutaj mogło pójść nie tak.
Tutaj również jest to null a to oznacza że popełniłem błąd tutaj czyli document query selector.
Coś tutaj źle przekazałem chciałem znaleźć takie text area która ma your message a ja napisałem tylko
message.
Jak widzisz taki prosty błąd i query selector zwróciło null które poprawnie było przekazane dalej.
Teraz będzie to działać.
Zobaczymy i po wpuszczeniu każdego z klawiszy jak widzisz odpala się nam event i wtedy będziemy chcieli
taką wartość pobrać i ją odpowiednio przefiltrować.
Nie chcę żeby ta lekcja była zbyt długa więc robimy to w kolejnej lekcji a ty w razie czego nadrób sobie
zaległości.