JavaScript: Praktyczny projekt - “Antybluzgacz” cz. 2
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.
Kontynuujemy prace nad naszym projektem antybluzgacz i już wiesz że kiedy tutaj cokolwiek wciśniemy wpiszemy
to mamy tutaj zdarzenia czyli nasza metoda filter którą mamy tutaj filter message się odpala i teraz będę chciał
odwołać się do tego co tutaj zostało wpisane możemy to zrobić poprzez e target odwołując się wtedy do
właśnie elementu na którym to zdarzenie się wykonało albo do naszego pola this field to jest dokładnie
to samo pole czyli napiszemy this field.
Mamy tę wartość i chciałbym ją nadpisać.
I gdybym tutaj sobie wpisał np. hehe to za każdym razem kiedy coś tutaj wpiszemy zostanie zamienione
na hehe.
Jak widzisz więc teraz za każdym razem kiedy coś wpiszemy będę chciał tam wyszukać tych słów o których
mówiliśmy że tutaj są zakazane i zamienić je na coś innego.
No i teraz jak to będziemy mogli zrobić na pewno będziemy taką wartość odpisywać .
Będziemy chcieli pobrać to co już tam jest czyli znowu this field value i skorzystamy z funkcji replace.
Pokazywałem Ci w jednej z poprzednich lekcji jak w replace możemy korzystać z funkcji.
Czyli tutaj mamy string na stringu możemy odwołać się do replace.
Pamiętaj że kiedy coś wpisujemy w takich polach i to sobie pobieramy poprzez value to zawsze jest dla nas string
w skrypcie w obiektowym modelu dokumentu więc na stringach mamy metodę replace
I teraz co będziemy chcieli zamienić.
Otóż nasze wyrażenie regularne które tutaj mamy czyli this regex.
Tego chcemy wyszukać a więc wszystkich tych słów tak wygląda to nasze wyrażenia i zamienić je na.
Gdybym tutaj wpisał tylko w ten sposób powiedzmy hehe to już to będzie działać zobaczmy.
Czyli możemy napisać Witam Cię wuj jak widzisz zamieniło tona hehe czyli zaczyna nam to działać.
Co u ciebie kochany.
Znowu zamieniło bo kochany również jest na naszej liście.
Gdyby ktoś chciał być zbyt czuły dla drugiej osoby komentując np. na forum.
Natomiast tutaj chciałabym skorzystać z funkcji i również muszę pamiętać że ta funkcja przyjmowała wiele
parametrów ale pierwszym z nich było match.
Czyli to co zostało znalezione jeżeli sobie zrobimy console log match w ten sposób odświeżmy raz jeszcze
witam cię kochany jak widzisz tutaj zostało nam to wyświetlone czyli to jest match.
Tutaj zostało zamienione na undefined bo nic nie zwróciłem z funkcji a tutaj musimy zwrócić.
Czyli teraz w zasadzie moglibyśmy za każdym razem zwracać jakiś String który zawsze byłby taki sam ale
wtedy nie musiałby mieć funkcji tylko tak jak przed momentem było hehe.
Więc tutaj będziemy chcieli coś zrobić mamy match on nam się przyda i teraz szybko wytłumaczę Ci co będę
chciał zrobić np. kochany mamy tutaj pod match czyli ma to raz 2 3 4 5 6 7 różnych literek i chciałbym
teraz sobie właśnie wygenerować 7 losowych znaków możemy do tego się odwołać do match kropka length długość stringu
zostanie zwrócona.
I chciałbym teraz przypisać sobie że losowe znaki to są np. takie przypiszemy je i będziemy chcieli
dla każdej literki tutaj czyli siedem razy wygenerować takie losowe znaki.
I to zwrócić będziemy mogli to za sekundę zrobić że chciałbym taki string kochany przekazać do kolejnej
metody żebyśmy tego nie robili tutaj lepiej sobie to podzielić.
Czyli tutaj będę chciał zwrócić bo pamiętaj że musimy zwrócić.
Ale chciałbym zwrócić to co mi w to miejsce zwróci metoda this nazwijmy ją censor word.
W ten sposób i jej przekażemy match czyli np. to kochany.
Ona coś nam zwróci.
Takie losowe znaki i je stąd będziemy chcieli dopiero zwrócić.
Natomiast chcę Ci pokazać jedną ciekawą rzecz w tym miejscu console log this
to sobie usunę.
Kiedy piszemy np. kochany ta funkcja się odpali this to jest window czyli to jest taka pułapka.
Mówiłem o tym w tym kursie w lekcji w której omawiamy problemy z this może sobie do niej wrócić czyli
tutaj jak napisałem this censor word to my nie odwołujemy się do naszego obiektu.
Troll killer więc musimy sobie to zbindować i tutaj będzie to dziwnie wyglądać bo bindowaliśmy np. w ten
sposób.
Ale jeżeli tutaj do funkcji się odwołam i napisze bind this to będzie nam to teraz działać.
Czyli musisz sobie to wyobrazić.
Tutaj odwoływaliśmy się do metody która istnieje kropka bind.
A tutaj mamy wpisaną funkcję anonimową na funkcji mamy taką metodę jak bind więc do bind możemy się tu odwołać
i to wszystko zwróci nam nową funkcję która w to miejsce zostanie podstawiona w której this właśnie
kieruje na to co podałem tutaj a tutaj jakby na zewnątrz this kieruje na nasz obiekt troll killer czyli teraz this będzie
poprawnie kierować na metodę censor word.
Czyli to mamy zakończone i wystarczy stworzyć metodę censor word.
Możemy to zrobić tutaj na prototypie.
Taka oto funkcja ona tutaj musi przyjmować to co przekazaliśmy match nazwiemy to word i teraz wewnątrz
niej będę chciał utworzyć sobie Sstring który nazwiemy censored.
Będzie to pusty string w tym momencie i teraz będziemy chcieli przeiterować sobie przez wszystkie elementy które
mamy tutaj w tym słowie jeżeli kochany było nam tutaj przerzucone na przykład to będziemy chcieli sobie
przez to przeiterować i po stringach możemy iterować tak jak po tablicach co myślę już teraz też wiesz.
Mówiłem o tym w pierwszej części kursu czyli możemy napisać i równa się zero i mniejsza od string length
czyli nasze word length i następnie i plus plus.
A tutaj wewnątrz możemy się odwołać.
Jeśli byśmy zrobili console log word i to będą poszczególne literki w ten oto sposób gdyby one nam były
oczywiście potrzebne wpiszmy sobie kochany i powinno nam to zadziałać
coś się nie odpaliło.
Ok.
Chyba nie odświeżyłem po prostu strony.
Kochany również coś nie działa.
Ok prześledźmy sobie co może nie działać.
Oczywiście ty to na pewno zauważyłeś ja sobie skopiowałem metodę i nie zmieniłem jej nazwy tutaj musi
być censor word.
Ja sobie to kopiowałem w ten sposób teraz powinno być w porządku.
Ok każda literka jest tutaj dla nas dostępna ale te literki nam nie będą potrzebne.
Chcemy tylko tyle razy ile jest literek sobie przeiterować i będziemy chcieli do tego stringu censor word
dodawać różne znaki czyli chciałbym napisać censor.
Plus równa się np. hasz za kolejną iteracją na przykład wykrzyknik itd no i teraz jak możemy to zrobić.
Otóż przejdziemy sobie troszkę wyżej i na prototypie przypiszemy sobie coś takiego jak censor signs czyli jakby znaki
takie do cenzurowania możemy to zrobić np. w tym miejscu i wpisze sobie tutaj kilka takich znaków np.
wykrzyknik hash powiedzmy że będzie to dolar albo taki procent może być dolar może być małpa wpiszmy sobie.
Może jeszcze taką gwiazdkę i jeszcze ewentualnie taki daszek i to wszystko chciałbym żeby było tablicą
bo będziemy po tym iterować więc zamiast tworzyć z tego tablicę tutaj i wpisywać każdy element oddzielając
przecinkiem stworzyłem to stworzyłem string i napiszę sobie split w ten sposób podając pusty ciąg znaków wtedy taki
string zostanie rozdzielony na tablicę i każdy element będzie w osobnym indeksie dlatego że tutaj dałem
pusty ciąg znaków czyli teraz pod censor signs mamy tablicę z takimi oto znakami no i teraz będzie tutaj
ciekawie.
Otóż będę chciał za każdym razem tutaj dodawać do censored jeden z takich elementów tablicy czyli this
censored signs w ten sposób.
Tylko że tutaj chciałbym raz napisać np. jeden aby zwrócić ten element.
Raz chciałbym napisać zero i tak dalej czyli potrzebujemy jakiejś losowości i zrobimy to za pomocą
funkcji math random.
W pierwszej części tego kursu robiliśmy taki przykład w którym pokazałem jak losować liczby totolotka
od np. 1 do 49.
I tutaj skorzystamy z podobnego zapisu czyli chce wygenerować liczbę od zera bo pamiętaj że tu będzie
0 do długości tej tablicy czyli tutaj musielibyśmy policzyć te znaki.
Dzięki temu będziemy mogli wygenerować taką liczbę i odwołać się do cenzor signs.
Ta liczba i zostanie nam zwrócony któryś z tych znaków bo chciałbym żeby za każdym razem był to inny znak.
Dlatego tutaj tworzę sobie zmienną którą nazwę random na początku może mieć ona wartość 0.
I tutaj będziemy ją chcieli podstawiać ale w tym miejscu za każdym razem to random będę chciał przypisać
taki oto zapis.
W ogóle się nie martw co tutaj jest otóż zaokrąglamy sobie to co zwróci nam math random czyli zwróci nam liczbę
losową od 0 0 do 0 kropka 1 razy i tutaj będzie długość naszej tablicy z tymi wszystkimi właśnie wyrazami
które są z tymi wszystkimi znakami minus jeden minus zero.
Ja to omawiałem w pierwszej części tego kursu jeżeli ją oglądałeś to zrozumiesz o co chodzi.
Generalnie jeżeli chcemy wylosować coś od powiedzmy 1 do 49 to możemy użyć zapisu math round math random
razy 49 minus 1 i tutaj plus 1.
W ten sposób jeżeli chce teraz od zera do długości tablicy tylko pamiętaj że jeżeli długość tablicy
to jest 6 to ostatni element jest pod indeksem 5 stąd tutaj minus 1.
Mam nadzieję że to ma dla ciebie sens OK.
Czyli tutaj za każdym razem będziemy mieli np. od zera do 7 zależy ile tych znaków jest.
Nie chce mi się ich teraz liczyć i będziemy to przedstawiać w tym miejscu i na końcu będziemy chcieli zwrócić
ten string.
Dzięki temu jeżeli ktoś pisze kochany to wygeneruje losowe znaki w takiej dokładnej ilości jak było
w tym słowie kochany teraz już to powinno działać.
Witam cie kochany i jak widzisz działa i piszemy dalej.
Teraz za każdym razem jak wciskam klawisz znowu cały ten string jest przeszukiwany.
Czy nie ma tam słów zakazanych.
Nie ma bo już sobie to zmieniliśmy jeżeli takie się pojawi to musisz sobie prześledzić drogę jak do
tego dojdziemy znowu będziemy mieli match przekażemy do censor word a tutaj wygenerujemy sobie właśnie
z tej tablicy bo to nam zwróci tablice jakieś losowe znaki czyli jakie mamy jeszcze słowa zakazane zobaczmy
np. motyla noga
i zostanie to również zamienione może efektywnie nie wygląda bo jest to tak losowo generowane moglibyśmy
jeszcze lepiej zadbać o to żeby te znaki jakoś inaczej obok siebie się układały itd.
No ale jak widzisz cenzurujemy i nasza aplikacja jest już gotowa.
I teraz dzięki temu że jest obiektowa to ktoś kiedy podepnie na naszą stronę naszą bibliotekę to wystarczy
że stworzy sobie nowy obiekt.
Tak jak tutaj nawet nie musiałby zapisywać zmiennej wystarczy wywołać new troll killer.
W ten sposób oczywiście moglibyśmy zadbać o to co już pokazywałem aby można było troll killer wywoływać
również bez new tutaj byśmy musieli sprawdzić czy this instance of troll killer.
Ale może to zrobić w ten sposób przekaże element do filtrowania oraz listę słów zakazanych.
I teraz żebyś zobaczył jak obiektowość świetnie działa to to co mamy tutaj na stronie.
Nasz przykład może cały ten formularz skopiuje sobie raz jeszcze tylko to pole nazwiemy np. your message
2.
W ten sposób przejdźmy sobie tutaj powinniśmy mieć teraz dwa formularze i wysyłamy naszego troll killera
tutaj na innym polu napiszemy tk2 your message 2 i tutaj mogą być całkiem inne słowa na przykład motyla
noga i np. takie którego nie było wyżej napiszemy o jacie np. w ten sposób i teraz na tym polu wszystko
to się będzie wykonywać ale tylko dla tych słów.
Czyli co jest fajne to kiedy tworzymy taki nowy obiekt to on ma unikalny field words czyli to co przekazaliśmy
na tej podstawie również unikanie utworzony regex.
A inne metody dziedziczy się z prototypu.
W ten oto sposób w tym góry będzie to działać tak jak działało czyli na przykład Wwitam cię kochany jak
widzisz a tutaj na przykład kochany możemy wpisać ale nie możemy wpisać.
O ja cie.
Jak widzisz wszystko działa poprawnie.
To jest ogromna zaleta właśnie tego że stworzyliśmy to w sposób obiektywny i możemy nawet w obrębie
jednej strony mieć dowolnie wiele takich obiektów które będą z tego korzystać.
Mam nadzieję że ten przykład był dla ciebie ciekawy że również sporo technik tutaj się nauczyłeś.
Jedyne co myślę że mogłeś nie do końca zrozumieć to jest ten zapis ale jeżeli na spokojnie sobie prześledzisz
co jest tutaj to zrozumiesz a jeżeli przerabiał już to od pierwszego kursu to już do tej pory doskonale
wiesz jak to działa.