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 poznamy metodę search.
Jest to kolejna metoda dla wyrażeń regularnych dostępna na stringach czyli na string
kropka prototype gdybyśmy tam zajrzęli i zobaczmy jak ona działa.
Przygotowałem sobie taką tablicę z plikami podobną już widzieliśmy w jednej z poprzednich lekcji i takie
wyrażenie regularne czyli chce znaleźć wszystko co ma pauza thumb i następnie może mieć od jeden do czterech digit.
Czyli jak widzisz cyfrę potem x i potem znowu od 1 do 4 digit.
Czyli jeżeli tutaj mamy trzy i trzy to będzie to pasować czyli od 1 do czterech skopiowałem coś takiego i
to wyrażenie regularne do narzędzia regexr abyśmy wiedzieli o czym mówię czyli mamy np. coś takiego chcemy
znaleźć thumb.
I jak widzisz później pauza.
I właśnie te cyfry czyli tutaj widzisz że rzeczywiście to zostało znalezione i gdyby były inne cyfry
np. 200 również zostałoby znalezione nawet w tym przypadku.
Teraz już nie bo napisałem od 1 do 4 czyli tak może nam to zadziałać OK.
I teraz pokażę ci metodę search która jest ciekawa jest dostępna na stringach i napiszmy sobie.
Tutaj może search to jest tylko nazwa zmiennej i napiszemy tutaj string czyli musimy jeden z tych stringów sobie
pobrać.
Więc może odwołujemy się do files zero najpierw będziemy mieli string i na nim metoda search.
Ona przyjmuje wyrażenie regularne czyli regex i co ciekawe ona nam zwraca minus 1 albo indeks znalezionego
elementu czyli jeżeli tutaj w tym stringu znajdzie thumb to zwróci nam gdzie to zostało znalezione czyli
0 oraz 2 3 4 5 6 powinno nam tutaj zwrócić 6 albo 7 zerknijmy sobie search 7 czyli właśnie odtąd zostało
to znalezione.
Jeżeli nie zostanie znalezione to zwróci nam minus 1 czyli ona jest bardzo podobna do index off.
Gdybym tutaj napisał index of ale index of nie może przyjmować wyrażeń regularnych tylko przyjmuje text.
Więc wtedy mógłbym wyszukać tylko konkretnie np. 150 na 150.
Czyli widzisz jak to działa.
Teraz będę chciał przeiterować po całej tej tablicy więc napiszemy files for each rzucę funkcję ona będzie przyjmować
file.
I tutaj jeszcze index bo do for each możemy przekazać funkcję która przyjmuje element tablicy i jeszcze
jego index czyli 0 1 2 3 to się za moment przyda i teraz będę chciał w tej tablicy napisać sobie index
czyli stworzyć taką zmienną i wywołać to co ci przed momentem pokazałem czyli file.
Będzie to jeden konkretny string następnie search i wyrażenie regularne czyli regex.
W ten sposób jeżeli zostanie tam znalezione w każdym przypadku zostanie to zwróci nam index.
Po co ten index jest mi potrzebny.
Otóż po to że teraz będę chciał taką nazwę nadpisać.
Czyli naszym celem jest aby w tej tablicy pousuwać to wszystko i zostawić same nazwy plików bez tego pauza thumb.
To może trochę abstrakcyjny przykład.
Czyli mamy indeks znalezionego tutaj elementu np. pauza i teraz na tym stringu będę chciał wyciąć odtąd
do końca.
I możemy to zrobić nadpisując od razu ten element czyli do tablicy files się odwołam.
Indeks mam tutaj.
Czyli będę chciał to nadpisać równa się file czyli odwołuje się do tego stringu.
Następnie mamy taką metodę jak substring w pierwszej części tego kursu ją pokazywałem i chcemy wyciąć od zera
do tego właśnie indeksu czyli jeżeli zostanie coś znalezione to zwróci nam 7 to od zera do siedmiu wyjdzie nam
tylko picture czyli tutaj napiszemy indeks ale chciałbym to zrobić tylko wtedy jeżeli coś zostało znalezione
tutaj w każdym przypadku tak będzie ale możemy napisać if indeks jest większa od minus 1 bo w przypadku
minus 1 oznacza że to wyrażenie regularne nie pasowało do takiego tekstu.
A dokładniej mówiąc tekst nie pasował do wyrażenia.
No i teraz zobaczmy co będziemy mieli w tablicy files.
Zobacz mamy tylko same nazwy czyli z każdego sobie to powycinaliśmy w taki oto sposób teraz pokażę ci
jeszcze jeden ciekawy przykład stworzymy sobie funkcję którą nazwiemy string contains.
I ona nam będzie zwracać czy w danym z kręgu który przekażemy znajduje się jakiś inny podstring albo
właśnie wyrażenie regularne napiszę function string contains i chciałbym tutaj przekazywać string a
także wzór nazwijmy to pattern.
I teraz wewnątrz będę chciał stworzyć dynamicznie nowe wyrażenie regularne za pomocą konstruktora regex
więc zobaczysz do czego on się może przydać napiszemy regex równa się new regex.
No bo ktoś nam tutaj przekaże pattern więc nie możemy utworzyć wrażenia regularnego w taki sposób musimy
skorzystać z konstruktora i tutaj możemy przekazać albo string albo wyrażenie regularne.
Co jest ciekawe jeżeli tutaj przekażemy już gotowe wyrażenie regularne to również zostanie ono zwrócone nie
ma problemu ale również możemy przekazać string który zostanie na takie wyrażenie zamienione czyli pattern tutaj
przekaże i teraz będziemy chcieli na tym stringu który ktoś przekazał wywołać sobie to wyrażenie regularne
dokładnie w taki sam sposób czyli napiszemy sobie tutaj index równa się string search regex.
W ten sposób i na końcu będziemy chcieli zwrócić czy indeks jest większy od minus 1 jeżeli jest większy
to znaczy że w tym stringu zostało coś znalezione czyli on pasuje do tego wzorca czyli napiszemy tutaj
indeks większy od minus 1.
No i mam nadzieję że to jest jasne i teraz możemy wywołać taką funkcję.
Może zróbmy to w konsoli odświeżę i napiszemy tutaj string contains.
Mamy taką funkcję poddajemy string napiszemy eduweb pl i chcę sprawdzić czy zawiera on błędy.
Mamy błąd zobaczmy w dwudziestej drugiej linijce tutaj zabrakło n.
Ok odświeżmy się raz jeszcze zobaczmy czy eduweb pl zawiera web mamy true.
Czyli wszystko się zgadza.
Podałem tutaj string i on został zamieniony na wyrażenie regularne czyli gdybyśmy tylko stringi chcieli
podawać to pamiętaj że możemy skorzystać z metody index of czyli string index of jakiś inny string też
zwraca minus jeden albo jakiś index.
Natomiast co ciekawe teraz możemy tu przekazać wyrażenia regularne a nie string więc wpiszę wyrażenie regularne
i napiszę we b w ten sposób czyli chcę sprawdzić czy ten string zawiera web.
Ale web może być opcjonalne czyli może zawierać np. w ten sposób wb albo może zawierać web czyli przekazałem
wyrażenie regularne.
Zobaczmy jak widzisz true.
Jeżeli teraz tak jak wspomniałem usuniemy e również będzie true wszystko działa jeżeli np. usuniemy b to
zwróci nam false.
Fajna przydatna funkcja która może przyjmować zarówno string i jak wyrażenia regularne i mówi nam czy
w tym stringu zostało to znalezione.