JavaScript: Czym są domknięcia?
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 lekcji Powiem ci czym są domknięcia z języka angielskiego to jest nazywane closures w języku JavaScript.
Bardzo fajna cecha tego języka z której już kilkukrotnie skorzystaliśmy ale wtedy nie mówiłem ci z czym
mamy do czynienia.
Przejdźmy do naszego skryptu i będę chciał utworzyć zmienną first name
Mamy taką zmienną ona jest globalna wiesz bo nie opletliśmy tego żadną funkcją Teraz tworzę samo wywołującą się
funkcję anonimową w pierwszym kursie to też omawiałem.
To jest zwykła funkcja która nie ma nazwy a dzięki temu że ją tak opakowałem to ona się po prostu wykona.
Czyli wszystko co tutaj się wykona ale funkcja ogranicza zakres czyli scope
Tak więc jeżeli w tej funkcji będziemy mieli jakieś zmienne to one na zewnątrz nie będą widoczne a tutaj
ta zmienna będzie i teraz napiszę sobie znowu first name mogę sobie stworzyć taką zmienną bo jestem w zupełnie
innym zakresie i napiszemy tutaj Anna i stworzę szybko funkcję Say Hello.
I ta funkcja robi console log first name.
Teraz wywołam tą funkcję Say Hello nie będziemy jej mogli jej wywołać w konsoli przeglądarki bo jest obplecione
tą funkcją czyli nie mamy dostępu do takiej nazwy jest to wewnątrz zdefiniowane i teraz zastanówmy się
czy ta funkcja wyświetli Anna czy Jan zerknijmy
Wyświetla Anna OK.
W ten sposób nam to działa.
Natomiast co stanie się jeżeli napiszemy Window np. Hello równa się Say Hello bez wywoływania czyli
na zewnątrz stąd wyrzucimy
Say Hello.
Mógłbym to również nazwać say hello ja już pokazałem że jeżeli coś jest pod Window to jest również globalne.
Czyli jeśli przejdę tutaj to mamy hello
Teraz i po wywołaniu.
Czy ta funkcja weźmie first name która jest w globalnym zakresie.
Czy to jest w środku czy będzie Jan czy Anna zerknijmy Anna jak widzisz i zerknijmy Anna było w środku.
No właśnie i teraz stworzyliśmy tzw. domknięcie i to jest niezwykle istotne otóż funkcje mają dostęp
do zmiennych tam gdzie zostały zdefiniowane a nie tam gdzie są wywoływane.
Czyli jeżeli funkcja została zdefiniowana tutaj my ją na zewnątrz pokazaliśmy pod hello i możemy ją wywołać.
To tak czy siak wywołując ją jakbyśmy wchodzili tutaj do środka i ją wywoływali.
Więc ona ma dostęp do tej zmiennej.
Oczywiście ma również dostęp do tej zmiennej ale nie dlatego że wyciągnęliśmy ją gdzieś na zewnątrz
tylko dlatego że normalnie tutaj też miałaby do tego dostęp.
Gdybym taką zmienną usunął to ona nie znalazłby w tym zakresie tej zmiennej znalazłaby gdzieś indziej
i teraz wywołując hello będziemy mieli Jan więc to nie jest nic dziwnego.
Natomiast ważne jest to że funkcja ma dostęp do zmiennych tam gdzie była zdefiniowana do tego zakresu
zmiennych.
I teraz co z tego wynika.
Otóż pokażę ci jak zrobić funkcję która będzie mogła być wykonywana tyle razy ile my powiemy.
Czyli chce stworzyć najpierw funkcję ona będzie nam zwracać nowe funkcje nazywa ją fire x time czyli
wywołaj x razy i chcemy podać tutaj funkcję oraz ilość.
Generalnie chodzi mi o to że ta funkcja będzie zwracać nową funkcję czyli jeżeli napisze powiedzmy tutaj
fire 3 times powiedzmy w ten sposób i wywołam sobie naszą fire x times przekazując jej funkcję.
W ten oto sposób czyli jakąś funkcję przekazuje i mówię trzy to chciałbym żeby do tej zmiennej została
zwrócona funkcja jak było w przypadku np. metody bind może pamiętasz.
I chciałbym aby po uruchomieniu mojej zmiennej do której została zwrócona funkcja raz drugi oraz trzeci
kiedy za czwartym razem wywałm tę funkcję aby wywołał się błąd bo chcę żeby tylko trzy razy można było
ją wywoływać.
No i jak możemy to zrobić.
Otóż w tym miejscu oczywiście gdzie tę funkcję definiuje w tym miejscu zrobimy zmienną counter która
będzie mieć wartość 0.
I teraz jak wspomniałem ja tutaj przekazuję funkcje.
Chciałbym żeby fire x times zwracała też funkcję czyli zrobimy return.
chcemy zwrócić zupełnie nową funkcję która jednak będzie coś sprawdzać.
if plus plus czyli zwiększamy counter counter czyli jeżeli zwiększamy o jeden counter jest większy od x
które tutaj przekażemy ja przekazałem 3.
Zauważ może na razie tę funkcję sobie zmniejszymy żeby to wyglądało w ten sposób.
Czyli przekazałem jakąś pustą funkcję dostępną tutaj pod fn i trójkę dostępną pod x czyli zwracamy funkcje
która ma dostęp do tej zmiennej i sobie ją zwiększa i sprawdza czy nadal nie jest większa od x czyli od trójki
którą założyłem.
Jeżeli jest to chcę zwrócić błąd o błędach mówiłem w pierwszej części tego kursu czyli np. przekroczono
maksymalny limit i dodamy tutaj x natomiast przeciwnym wypadku możemy tutaj zrobić else nie musimy bo
kiedy throw się wykona to tak jak return czyli nic pod spodem się już nie wykona ale w przeciwnym wypadku
przekazaną tutaj funkcję chce wywołać.
Zauważ że żadnego tutaj call i apply nie robię bo nie chcemy przekazywać this więc po prostu chce to
zrobić w ten sposób no i tutaj zakończymy średnikiem.
Mam nadzieję że to rozumiesz czyli tutaj mogę przekazać teraz dowolną funkcję albo wpisując ją jako funkcję
anonimową albo przekazując ją gdzieś wcześniej zdefiniowaną więc mogę sobie teraz zrobić taką funkcję i ona
będzie robić powiedzmy Hej ale powiedziałem że chcę aby można ją było wywołać tylko trzy razy.
I teraz przejdźmy do przeglądarki.
Mamy tutaj jakiś błąd w linijce 31 brakuje s.
Ok.
Zwróciłem to do zmiennej fire 3 times czyli tam mam funkcję wywołuje ją i ona powinna zauważ wykonać
moją funkcję którą tutaj przekazałem.
Ale tak naprawdę wywołuje tę funkcję bo ona została zwrócona.
Ta funkcja ma dostęp do tej zmiennej.
counter i sobie sprawdza może ją zwiększać przy każdym wywołaniu czyli plus plus zwiększa ją i sprawdza czy
nie jest większa od x którą przekazałem.
To jest świetna sprawa.
Wolałem Hej hej hej.
I teraz wywołam czwarty raz na tym etapie kiedy wywołałem ją trzy razy plus plus counter zwiększało cały czas
tą zmienną która jest tutaj wewnątrz.
Więc ona powinna już teraz mieć wartość 3 czyli teoretycznie jeszcze raz się to wykona zobaczmy, nie
Już mamy błąd OK.
Czyli miała wartość 4 już za trzecim wykonaniem rzeczywiście i został zwrócony błąd przekroczono maksymalny
limit wywołań który tutaj zrobiłem.
Jeżeli tutaj napiszę raz to moja funkcja będzie mogła być wykonana raz a za drugim jej wykonaniem będzie
błąd.
Zauważ że tutaj wcale nie musimy ogłaszać błędu tu możemy zrobić coś zupełnie innego.
Czyli możemy zrobić tak że funkcja za pierwszym razem wykona się inaczej a za drugim już zupełnie inaczej.
Jest to ciekawe najlepsze w tym wszystkim jest to że mając dostęp do counter mógłbym sobie tę zmienną
przekazać tutaj ale musiałbym wtedy podając moją funkcję zdefiniować również tutaj coś takiego czyli
np. wywołuję po raz plus c.
Zobaczmy wywołuje po raz pierwszy a po raz drugi już się nie uda.
Mam nadzieję że już na tym etapie to łapiesz, przekazaliśmy funkcję która tutaj jest dostępna pod fn i zwróciliśmy
funkcję która później ją wykona.
Bardzo fajna rzecz i to właśnie jest nazywane dotknięciem w języku JavaScript a więc funkcja która wyszła
na zewnątrz do zmiennej fire 3 times w naszym przypadku może zmieńmy to na trójkę ma dostęp do zmiennych
które są wewnątrz bo nigdzie na zewnątrz nie możemy otrzymać counter zdefiniowane wewnątrz tej funkcji.
Podobnie będzie z parametrem x który został tam przekazany.