w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperW 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.
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 pokażę ci jak wrażeniach regularnych działają tzw. kotwice i możemy sobie tutaj przejść
właśnie do anchors.
Jest ich tylko kilka ale muszę wytłumaczyć Ci najważniejsze konsekwencje jakie wynikają z ich używania.
Wyobraźmy sobie że chcemy znaleźć wszystkie linki które są tutaj linkiem zewnętrznym czyli mamy tutaj
link taki zewnętrzny zewnętrzny a ten jest relatywny.
Czyli te są absolutne.
Ten jest relatywny no i możemy zacząć wpisywać http.
Powiedzmy że s również może być więc wpiszemy s i znak zapytania.
Aby ten znak był opcjonalny pokazywałem to już wcześniej i powiedzmy że dalej nie wpisalibyśmy dwóch
kropek.
I takie dwa slashe.
Ale napisali byśmy że chcemy.
Dowolny znak alfanumeryczny raz lub więcej razy.
No i teraz problem pojawił się taki że to tutaj również zostało zaznaczone bo nazwa pliku tutorial pauza
HTTP była właśnie taka.
I teraz pokażę ci kotwicę która pozwala nam powiedzieć że chcemy to co tutaj zaczynamy dopasowywać dopasowywać
od początku linii.
Jest to taki daszek na samym początku jak widzisz teraz zaczęło nam to już działać natomiast tylko jedna
linia jest podświetlona a za moment ci powiem dlaczego teraz nam to zaczęło rzeczywiście działać.
Czyli tutaj nie zostało to znalezione bo nie zaczyna się to od początku linii coś wcześniej już jest
teraz aby drugi dokument również mógł zostać znaleziony.
Musimy we flagach wyznaczyć sobie ostatnią z flag jaka jest możliwa czyli multiline.
Jak widzisz teraz możemy przeszukiwać wiele linii dlatego że tutaj HTTPS jeżeli włączymy multiline.
Owszem zostało znalezione i powinno być podświetlane ale jak wyrażenia regularne to sprawdzają powiedzieliśmy
tutaj tym daszkiem że chcemy zacząć od początku.
Tutaj zostało to znalezione ale chwila to nie jest na początku tego całego stringu.
Bo ja trochę źle powiedziałem że na początku linii ten cały string wygląda tak i znaleźliśmy HTTP tutaj
ale nie na początku stringu.
I właśnie jeżeli włączymy flagę multiline czyli m.
Ona tutaj na końcu jest dopisywana.
To wtedy oznacza że ten daszek nie oznacza na początku stringu.
Ale może to być na początku każdej nowej linii a nowa linia tworzona jest za pomocą Entera.
Czyli mamy tam wpisany taki znak jak en lub np. r.
Tak to może wyglądać.
To jest kotwica właśnie ten daszek która pozwala nam na początku coś dopasować natomiast dolar jest
to kotwica która pozwala to samo dopasować ale na końcu to znaczy jeżeli użyjemy dolara to znaczy że
jakaś linia musi się na coś kończyć.
Jeżeli tutaj będzie np. PDF i coś dalej to ja mogę sobie tutaj napisać znajdź mi wszystkie jakby rozszerzenia
PDF czyli kropka pamiętaj że kropkę musimy zescapować w tym miejscu.
Następnie PDF ale jeżeli napiszę że mają być na końcu linii czyli dolar to już nam to nie załapie.
Jeżeli to usunę.
To teraz jak najbardziej będzie to pasować czyli dolar oznacza że na końcu musi coś się znaleźć.
Innymi słowy możemy tutaj napisać tutorial http pdf kropka zip no i jeżeli teraz napiszemy znajdź mi
wszystkie pdf jeżeli to pod spodem będzie np. następny pdf ale bez zipa to i tutaj i tutaj byśmy znaleźli
a ten plik nie ma rozszerzenia PDF więc mogę dopisać dolar.
I to oznacza że to co tutaj mamy musi się znaleźć na końcu linii.
Tutaj oczywiście również bardzo ważna jest flaga multiline która tutaj się znajduje jeżeli ją wyłączę
i zamienimy to miejscami zróbmy to tutaj.
To to nie zostaje podświetlane bo mówimy na końcu całego stringu on się tutaj zaczyna i kończy i na
końcu stringu.
Nie ma czegoś takiego jeżeli włącza flagę multiline to wtedy tak jak gdyby linie traktujemy jako osobne
stringi.
Podobnie byłoby w przypadku tych doc i docx które tutaj mamy.
Gdybym chciał powiedzieć znajdź mi rozszerzenie które ma doc lub x pamiętaj że jeżeli zrobię tak to x jest
opcjonalne to nam to bez problemu działa.
Jeżeli mamy flagę multiline.
Jeżeli nie to jak widzisz żaden z nich nie został tutaj dopasowany.
Oczywiście gdybyśmy global wyłączyli to tylko wtedy pierwszy z nich.
Teraz mamy włączone wszystkie trzy flagi i teraz chcę Ci pokazać jeszcze dwie takie jakby kotwice które tutaj
są.
Jest to b czyli word boundary a więc granica słowa.
Tutaj jest napisane że znajdzie nam wszystkie znaki takie jak granice słowa.
Czyli może to być biały znak jak spacja np. może być przecinek kropka czyli punctuation.
Może to być początek albo koniec linii.
Będę chciał ci teraz pokazać jak to wygląda na przykładzie Lorem Ipsum wrzucimy sobie coś takiego i
powiedzmy że chcemy znaleźć wszystkie słowa amet wpiszemy je sobie tutaj które są właśnie na granicy czyli word
boundry więc możemy napisać tutaj b.
I jak widzisz ten znak jest to właśnie word boundry czyli on nam będzie łapał.
Początek koniec stringu na przykład gdyby tutaj też było amet.
W ten sposób albo kropka albo przecinek.
Czyli jeżeli tutaj również tak napiszę to zauważ co się stało tutaj było Ahmed ale teraz już nie jest
podświetlone.
Z tego powodu że powiedziałem musi być tutaj word boundry czyli np. początek to się zgadza.
Może to być początek albo koniec linijki następnie słowo amet ale później znowu musi być word boundery
czyli albo koniec linijki albo np. kropka gdybym tutaj zrobił kropkę to jak widzisz to już by załapało.
Podobnie jest z przecinkiem czyli word boundary tak nam to fajnie ogranicza.
W przypadku emaila który mieliśmy wcześniej w tekście gdybym go wpisał gdybym napisał to w ten sposób
to znowu możemy wyszukać naszego emaila bardzo łatwo.
Otóż możemy powiedzieć word boundary czyli albo może być na początku ten email albo gdzieś w innym miejscu
albo może to być właśnie spacji czyli word boundary na przykład później w czyli dowolny znak alfa numeryczny
powiedzmy raz lub więcej czyli plus.
Następnie małpka znowu znak alfanumeryczny już to przerabialiśmy w jednej z poprzednich lekcji.
Następnie powiedzmy kropka zrobimy escape kropki i następnie powiedzmy znowu musi być w dwa do czterech
razy OK.
I następnie znowu może być word boundery.
Jak widzisz teraz adres e-mail został nam zaznaczony już bez tej spacji.
Nieważne gdzie jest w tekście i nieważne czy pod tym jest przecinek czy nie.
Więc teraz możemy nawet to usunąć i ten adres będzie złapany.
Chciałbym jeszcze na sekundę tylko wrócić do amet bo pokazałem Ci że jeśli napiszemy amet w ten sposób
i dodamy word boundery albo tutaj też na początku to może to być początek linii czy np. kropka ta kropka
jest znaleziona zauważ że ona nie jest zaznaczona więc to jest bardzo ważne ale mówimy zaznacz amet.
Jeżeli później jest word boundary czyli taka kropka sama w sobie to jest word boundary gdybym tutaj napisał
coś innego to amet nie będzie zaznaczony więc jeśli napisze amet testowy i z jakiegoś powodu chcielibyśmy samo
słowo amet znaleźć to możemy użyć zaprzeczenia word boundary czyli z dużej litery.
I wtedy amet został znaleziony.
Czyli znajdź nam wszystkie wystąpienia amet jeżeli później nie mamy word boundary.
Tutaj było takie word boundary więc jak widzisz teraz wszystkie są znalezione teraz tylko te które mają
word boundary a więc koniec linii początek kropka lub coś w tym stylu a tutaj zaprzeczeniem word boundary
czyli słowo amet chce znaleźć.
Jeżeli po te występuje znak który nie jest właśnie przecinkiem spacją czy końcem linii.