JavaScript: Dostępne symbole
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 i w kilku kolejnych lekcjach będziemy pracować w regexr.
Pod tym adresem do tej lekcji nie ma plików źródłowych więc nie martw się jeżeli nie mogłeś ich znaleźć
w tej lekcji będę chciał się pokazać jakie są dozwolone i jakie są specjalne znaki w przypadku wyrażeń
regularnych.
Przejdźmy tutaj właśnie do charakter classes.
Tutaj są znaki z których będziemy mogli korzystać ja teraz będę chciał ci je wytłumaczyć.
Na razie w ogóle nie martw się jak to będzie działać w javascript.
Tutaj cały czas mamy reprezentację tego jak to będziemy musieli zapisać w javascript.
Ale po co dokładnie są te wyrażenia regularne to zobaczysz jeszcze w tym kursie.
Na razie chciałbym abyśmy się nauczyli dopasowywać tymi wzorcami czyli wrażeniami regularnymi się do
różnego tekstu.
Dlatego tutaj wkleiłem taki Lorem Ipsum i polecam Ci abyś zrobił sobie to samo a tutaj będziemy mogli
wpisywać wyrażenia regularne.
Teraz ci coś pokażę.
Otóż tutaj wewnątrz możemy napisać lorem z dużej litery i mamy jedno trafienie i tutaj lorem zostało podświetlane.
Czyli wszystko co trafimy będzie tutaj podświetlone i możemy to w ten sposób zobaczyć.
Dlaczego jest podświetlane i co z tym będziemy mogli zrobić to właśnie zobaczyć w dalszej części tego
kursu będziemy mogli to np. zamienić na coś innego czy w inny sposób wybrać.
Natomiast o co chodzi z tym co tutaj pisałem wpisałem dosłownie Loren każda literka którą tutaj widzisz
jest jedynym znakiem.
I tutaj pisząc coś takiego mówimy temu wyrażeniu regularnemu znajdź nam w tym stringu czyli w tym
tekście który jest pod spodem znajdzie nam wszystkie wystąpienia l po których będzie o.
Czyli każdy znak ma znaczenie jeżeli napiszemy L.
Zauważ że drugie L zostało podświetlone.
Natomiast tutaj mówimy Lo i tylko jeden wzór został tutaj znaleziony przy okazji dlaczego jeżeli napiszę
duże L to zostały znalezione dwa.
Otóż na końcu widzisz g.
Jest to flaga global oznacza wyszukuj w całym tekście te flagi i możemy w tym narzędziu wyłączać przechodząc
sobie tutaj do flags i odznaczając.
Jeżeli oznaczę global to możesz zobaczyć że teraz tylko jedno L jest zaznaczone.
Zazwyczaj będzie nam zależało na tym abyśmy tutaj mieli global.
I teraz wróćmy do tego ciągu.
Jeżeli napiszę Lorem to oznacza że chcemy znaleźć w tym tekście taki wzorzec ma być L.
Potem o.
Potem r potem e potem m.
Tak to jest bardzo ważne że każda litera po sobie wielkość liter również ma tutaj znaczenie.
Chyba że postawimy sobie flagę ignore case.
To jest flaga i jeżeli ją tutaj wcinę to możesz zobaczyć że tutaj są dodane już dwie flagi i oraz g.
I teraz jeżeli pisałem Loren z dużej to również Loren z małej gdzieś w środku zostało znalezione.
Z tego powodu że już ignorujemy wielkość liter i teraz co jest bardzo ważne to widzi że pisałem tutaj
lorem a to gdzieś w środku zostało znalezione.
Więc nie ma znaczenia czy to będzie wewnątrz jakiegoś wyrazu czy nie.
O tym jeszcze będziemy mówić.
Na razie może ignore case zostawmy sobie zaznaczoną.
Tą wielkość liter aby nie miała takiego znaczenia.
Zanim przejdziemy do omawiania tych character kclasses które tutaj widać to chciałbym Ci pokazać jeszcze
jedną ciekawą rzecz otóż tutaj napisaliśmy Lorem czyli chcemy znaleźć wszystkie takie wystąpienia ale
możemy tutaj w nawiasach kwadratowych.
To ma specjalne znaczenie.
Jeśli tu najadę jak widzisz podkreśla mi taki dymek character set match charakter in the set czyli
którykolwiek znak może być znaleziony.
I teraz co jest ciekawe jeżeli napiszę l albo r albo m np. w ten sposób to zauważ że mamy 48 trafień i teraz
to wszystko jest nadal traktowane jakby jako jeden znak tak jak Ci pokazałem dalej czyli w zasadzie
możemy tu napisać lro i tutaj np. m.
Czyli to jest jeden znak to jest jeden znak ale to traktujemy jako jeden.
Ale że jest to taka grupa character set to oznacza że dowolny znak który jest w środku może być znaleziony.
Dzięki temu widzisz że na przykład rem zostało tutaj i tutaj podświetlone bo powiedzieliśmy znajdź nam dowolny znak
z tych może być l r albo o ale to jest traktowane jako 1.
Czyli został dla nas znaleziony.
r a tutaj już poza tym napisaliśmy em.
Czyli to już musi być e.
Później musi być m czyli wiedzieliśmy że na pewno będzie em ale wcześniej może być jeden z tych znaków.
Teraz póki tu jesteśmy chciałbym omówić tę character classes klasy z której widać obok może narazie ci się to wydaje
skomplikowane ale uwierz mi zacznie to nabierać sensu kiedy będziemy mieli troszkę inne przykłady.
Teraz jeżeli bym tutaj wpisał kropkę to jak widzisz znaleźliśmy wszystko.
Natomiast widzimy że są to osobno podświetlane literki.
Czyli mamy 154 matches.
Mówiłem ci że możemy tu sobie wpisać loren np. i zostaje to znalezione dlaczego kropka kiedy ją wpiszę
nie zostaje znaleziona tak normalnie tutaj.
Otóż jest to specjalny znak co możesz zobaczyć w tym miejscu jeżeli klikniesz będziesz miał opis tutaj kropka oznacza
dowolny znak oprócz znaku nowego wiersza.
Czyli jeżeli tutaj np. mamy Enter i coś napiszemy to tak naprawdę mamy tutaj niewidoczny znak nowego
wiersza który wygląda w ten sposób czyli jakby n ukośnik n tutaj ukośnik e.
To też może być znak nowego wiersza a więc kropka oznacza dowolny znak oprócz tych znaków oznacza to
tylko tyle że jeżeli teraz napiszemy lorem albo lore możemy postawić kropkę i to nie oznacza że szukamy
lore kropka ale że szukamy takiego ciągu gdzie będzie lore to musi być obok siebie a później dowolny
znak ale nie znak nowego wiersza.
Czyli jak widzisz n tutaj zostało znalezione gdybym postawił kolejną kropkę to spacja została znaleziona.
Jak widzisz tutaj na samym początku jest podświetlana i i tak dalej czyli kropka odpowiada jednemu dowolnemu
znakowi.
Więc jeżeli tutaj napiszemy l.
I kropka kropka kropka kropka to jak widzisz poszczególne znaki zostają zaznaczone.
Pokażę ci w kolejnej lekcji jak możemy to powielać abyśmy nie wpisali tego nie wpisywali tego w ten
sposób natomiast kropka odpowiada jednemu znakowi.
Kolejnym ze specjalnych znaków bo jeżeli wpisze sobie po prostu w to gdybym miał gdzieś literkę w to zostałaby
znaleziona ale jeżeli wpisze sobie tutaj taki slash możesz to zobaczyć tutaj to jest to specjalny znak
znowu jak w przypadku kropki oznacza to jeden znak ale word jest to dowolny alfanumerycznych znak lub
podkreślnik.
Możemy to zobaczyć tutaj jeszcze o takich setach za sekundę powiem czyli teraz to wszystko zostało zaznaczone.
Ale jak widzisz oprócz kropki liczby gdyby tutaj się znalazły to również są znaki alfanumeryczne.
Czyli jeżeli chcemy się w ten sposób dopasować do czegoś i nie chcemy żeby była to kropka chcemy żeby
to były literki lub np. cyferki i podkreślnik jak jest tutaj napisane to możemy użyć w.
Jak widzisz znowu każdy osobno jest zaznaczony.
Gdybym znowu napisał to w ten sposób to jak widzisz już po dwa bo napisałem ma być 1.
Potem ma być kolejny możemy napisać kropkę a więc to oznacza każdy inny znak duże w z kolei jest przeciwieństwem
takiego znaku alfanumerycznego.
Więc napiszmy duże w.
Jak widzisz tylko spacje zostały znalezione i kropka czyli odwrotność zupełnie tego co mieliśmy przed
momentem.
Podobnie będzie z małym D.
To oznacza jedna cyfra miałem tutaj cyfry zostały znalezione gdybym tutaj napisał kilka razy d to oznacza
że chcemy znaleźć.
Jak widzisz jeden match.
Takie zestawy gdzie mamy same cyfry czyli w oznaczało że może być jakaś literka znak alfanumeryczny
a w przypadku cyfr już nie.
Jeżeli tu dopisze w to nie działa bo mówimy że chcemy mieć po sobie 4 cyfry a następnie jakiś znak alfa
numeryczny.
Nie mamy tego nigdzie.
Ale gdybym to zrobił w ten sposób to już by nam pasowało.
Mamy cztery cyfry i dowolny jeden znak alfanumeryczny duże D oznacza przeciwieństwo czyli nie cyfra.
Jak widzisz teraz wszystko oprócz cyfr zostało podświetlone teraz małe s oznacza spację możemy sobie
tutaj kliknąć i jak widzisz to nie jest tylko spacja ale ogólnie whitespace czyli białe znaki to może być
spacja może być tabulator.
Gdybyśmy gdzieś dodali tabulator został zaznaczony.
Może to być również linebreak czyli Enter.
Jeżeli taki Enter w takim miejscu dodamy natomiast duże S to jest odwrotność to jest przeciwieństwo
tych znaków czyli będą bo wszystkie znaki oprócz właśnie znaków spacji czy nowego wiersza z tego powodu
na samym początku pokazałem ci że możemy tworzyć takie oto jakby zestawy.
I tutaj możemy powiedzieć że może być L O a potem może być REM czyli zaznacz wszystko gdzie będzie albo
L albo O traktowane jako jeden znak a potem musi być REM czyli jeżeli mamy taki zestaw taki set to to
co podajemy w środku to poszczególne znaki oznacza dowolny z nich.
Dlatego tutaj jest pokazany match image.
Jeżeli wpiszemy tutaj że możemy znaleźć spację jak widzisz znaki nowego wiersza lub zaprzeczenie czyli
duże S nie spację to wtedy zaznaczymy wszystko bo sprawdzana jest ta literka.
Czy to jest spacja.
Nie ale tu mówimy może to być też nie spacji a nie znak nowego wiersza.
Więc zaznaczam kiedy np. dojdziemy tutaj to sprawdzamy czy ten zestaw pasuje pasuje bo mówimy że może
być biały znak to jest taka ciekawostka teraz chcę ci pokazać jeszcze przeciwieństwa.
Jeżeli mamy taki oto zestaw na początku wewnątrz tego zestawu napiszemy sobie daszek to oznacza że chcemy
znaleźć wszystkie pociągi które nie zawierają podanych tutaj dalej znaków czyli chcemy znaleźć takie
gdzie nie ma O R.
Na przykład e i jak widzisz wszystko zostało podświetlone.
Mamy oczywiście bardzo dużo trafień bo cały czas to odpowiada za jeden znak czyli każdy jest sprawdzany.
Czyli tutaj powiedzieliśmy nie L.
Nie powiedzieliśmy że nie może to być O R albo N więc ale jest podświetlany.
Podchodzimy do O.
I zostaje sprawdzone.
Ten zestaw znowu to jest jakby pojedyncza literka czyli o jest sprawdzana wobec tego sprawdzamy że tutaj powiedzieliśmy
to nie może być O lub R lub E jeżeli to wykluczę to mamy odwrotność czyli w takim zestawie jeżeli zrobimy
taki daszek to oznacza żaden znak z tego zestawu nie może być dopasowany.
Kolejna ważna sprawa jest taka że możemy tutaj podawać przedziały czyli możemy napisać od A do Z.
I to nie oznacza że każdy znak to ma być albo a albo pauza albo zet.
To oznacza wszystkie literki od A do Z.
I gdybyśmy sobie wyłączyli tutaj flagę ignore case to wtedy dużo już by nie pasowało dlatego możemy tu napisać
od A do Z.
Bo wygląda dziwnie ale to są właśnie takie przedziały czyli mówimy tutaj ciągle to jest jakby jeden
znak i go porównuj.
Czy on się znajduje w tym zestawie od małego a do z nie od dużego A do Z już tak po najechaniu jak widzisz
jest to fajnie podświetlane i mam napisane range czyli taki przedział.
Gdybym napisał od A do G to wtedy gdybyśmy mieli liternkę H to ona tam się nie znajdzie.
Czyli w momencie jak dojdziemy np. do M czy do I sprawdzamy czy ona jest w tym przedziale może być przedziale
od małego A do G lub przedziale dużego a do z nie działa jeżeli wyłączymy tutaj w zasadzie włączymy
ignore case to wtedy jest już OK bo od A do G została nie została znaleziona I od A do Z już tak a wielkość
liter nie ma znaczenia ważna jeszcze uwaga jest taka że tutaj nie działa ą ę.
Czyli jeżeli napiszemy od A do Z.
W ten sposób tutaj musi być oczywiście taki nawias a tutaj napiszemy sobie powiedzmy jakąś to ą nie jest
podświetlane czy np. ś.
Więc tutaj od A do Z.
I gdybyśmy chcieli jeszcze wpisać polskie znaki to musimy napisać ą ś itd.
I wtedy oznaczę od A do Z.
Jak widzisz podświetliło to nam jako grupa lub ą lub ś.
Lub w ten oto sposób i teraz na sam koniec chce ci pokazać że jeszcze musimy robić coś takiego jak Escape
bo mówiłem ci że kropka będzie oznaczać pojedynczy znak i mamy 163 trafienia gdybym włączył flagę global
oczywiście to mamy tylko jedno trafienie.
Kropka oznacza pojedynczy znak.
A co jeżeli ja chcę trafić kropkę otóż muszę zrobić escape czyli taki właśnie backslash lecz wtedy to oznacza
że ten znak kropki nie jest już specjalnym znakiem po przejechaniu tutaj widzisz genialne narzędzie
regexr pokazuje nam że to jest escape character matches i tutaj w cudzysłowie kropka więc pokazuje co zostanie
jakby złapane i dzięki temu możesz się dowiedzieć o co dokładnie w tym chodzi więc widzisz że to jest
świetne do tego narzędzie i podobnie będzie z innymi znakami pokazałem ci że taki np. znak jest specjalny
i tworzy nam grupę.
Więc jeżeli tutaj bym sobie napisał powiedzmy coś takiego powiedzmy że chcemy znaleźć taki nawias następnie
kropkę raz dwa trzy cztery pięć dlatego że tu będzie teraz 2 3 4 5 i znowu coś takiego to znaczy to
zupełnie coś innego dlatego tu przed tym specjalnym znakiem robimy Escape i przed tym znakiem zrobimy Escape
i teraz tylko ten tekst został znaleziony bo mówimy że chcemy znaleźć właśnie taki znak.
Następnie 5 dowolnych znaków i taki znak.
I ostatnia również bardzo ważna sprawa jest taka że mówiłem Ci iż jeśli chcemy znaleźć kropkę to musimy
to zrobić w ten sposób.
Natomiast kiedy definiujemy taki charakter set to tutaj jeżeli chcemy powiedzieć że może to być np.
a lub kropka chociaż kropka też do tego pasuje to tutaj kropka już nie oznacza specjalnego znaku tak
jak w przypadku takiej kropki.
Tylko w takiej grupie w takim character set kropka już tutaj oznacza zwykłą kropkę i została zaznaczona.
Czyli mówimy znajdź jeden znak który pasuje do tego zestawu i każdy jest porównywany ale tylko kropka
pasuje.
Więc tutaj nie musimy robić tego escape w ten sposób czyli w takim zestawie kropka oznacza prawdziwą kropkę
ale poza tym kropka oznacza dowolny znak oprócz spacji tabulatora czy znaku nowego wiersza.