JavaScript: Wprowadzenie
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.
Witam serdecznie. Z tej strony Piotr Palarz z serwisu eduweb.pl z kursem JavaScript w
praktyce. Jest to kontynuacja kursu, który ukazał się w tym samym czasie, kursu pod tytułem JavaScript
od podstaw i w tym kursie poruszamy tematy, które nie znalazły się w kursie poprzednim.
Jest on również nieco bardziej zaawansowany, dlatego wymagana jest już wiedza podstawowa z zakresu języka
JavaScript, którą we wspomnianym kursie będziesz mógł bez problemu zdobyć. W tym kursie poruszymy tematy,
których nie poruszyliśmy w kursie poprzednim, m.in. programowanie obiektowe czy dziedziczenie prototypowe.
No właśnie, zerknijmy co w kursie.
Na sam początek poruszymy tematy związane z programowaniem obiektowym w języku JavaScript, natomiast całą
jedną lekcję poświęciłem na to, aby omówić koncepcje programowania obiektowego nie związane z żadnym
konkretnym językiem.
Omówimy zatem, czym jest klasa,
czym jest obiekt, instancja, polimorfizm, abstrakcja czy enkapsulacja.
Są to najważniejsze pojęcia związane z programowaniem zorientowanym obiektowo,
a później przejdziemy do tego, jak JavaScript implementuje sobie programowanie zorientowane obiektowo na swój
własny, nieco inny sposób niż klasyczne języki programowania.
Pokażę ci dziedziczenie prototypowe i będzie to absolutnie najważniejszy rozdział w całym tym kursie.
Jeżeli zrozumiesz tak naprawdę, jak działa dziedziczenie prototypowe w języku JavaScript, to zrozumiesz
cały język JavaScript.
Po tym rozdziale, zobaczysz sam, będziesz zupełnie inaczej patrzył na każdą konstrukcję języka JavaScript,
jaką będziemy pisać. W tym rozdziale pokażę ci, jak możemy tworzyć własne konstruktory, jak do nich
przypisywać dane i jak korzystać właśnie z prototypu
funkcji. Nie zabraknie również informacji na temat rozszerzania wbudowanych typów, a także pokażę ci kilka
niezwykle ciekawych metod dostępnych na funkcjach, takich jak call, apply czy bind.
Wszystko będzie oczywiście bardzo dokładnie wytłumaczone, więc nie musisz do tej pory znać żadnych koncepcji
związanych z oprogramowaniem obiektowym, a wyłącznie podstawy języka JavaScript.
Następnie będziemy mieli krótki, ale niezwykle ciekawy temat o tzw. domknięciach, które są specyficzne dla
języka JavaScript, a także kilku innych języków programowania
i jest to cecha języka JavaScript, która jest niezwykle przydatna, kiedy wiemy, jak z domknięć korzystać.
Dlatego będę chciał ci dokładnie to również wytłumaczyć. W kolejnym rozdziale
przyjrzymy się JSON-owi, czyli lekkiemu formatowi wymiany danych po to, abyśmy później mogli z niego korzystać
w rozdziale o AJAX. Pokażę ci, czym jest JSON,
jakie są zasady tworzenia poprawnego pliku JSON, a także jak współpracować z takim typem danych w
języku JavaScript.
Później przejdziemy do wspomnianego AJAX-a i będziemy mieli cały, naprawdę bardzo ciekawy temat związany
z wysyłaniem żądań do serwera i z odbieraniem danych bez przeładowywania witryny.
Abyś jednak mógł zrozumieć, jak działa AJAX, musisz rozumieć, jak działa protokół HTTP, jak są przesyłane
dane, a także tzw. nagłówki.
Dlatego bardzo dokładnie tłumaczę, jak działa protokół HTTP, jak te wspomniane nagłówki są przesyłane,
ale dodatkowo tłumaczę także takie koncepcje jak same-origin policy i CORS, które będą niezwykle ważne
w kontekście rozumienia technologii AJAX.
Później przejdziemy już do napisania swojego pierwszego kodu, który pozwoli nam wysłać żądanie do serwera.
Pokażę ci, jak odebrać odpowiedź, jak przypisywać do obiektu AJAX odpowiednie zdarzenia, jak do serwera
wysyłać dane, a także jak śledzić postęp zarówno wysyłania, jak i pobierania danych.
Kiedy będziesz miał już wiedzę z AJAX, przejdziemy do bardzo ciekawego przykładu, który będzie na przestrzeni
kilku lekcji. Mianowicie do stworzenia swojej własnej biblioteki AJAX. Nie tylko pokaże ci, jak podejść
do takiej biblioteki pod kątem właśnie AJAX, czyli jak te żądania wysyłać, bo taką wiedzę do tej pory
już będziemy mieli, ale pokażę ci mnóstwo ciekawych konstrukcji języka JavaScript i ciekawych technik
pracy -
w jaki sposób stworzyć taką bibliotekę, z której, jak się później przekonasz, jeszcze w tym kursie będziemy
korzystać.
W tym rozdziale również pokażę ci, w jaki sposób wysłać maila z użyciem AJAX, czyli bez przeładowywania witryny,
i z użyciem PHP po stronie serwera.
Gotowy skrypt będziesz mógł umieścić na swojej stronie internetowej i odwiedzający będą mogli do ciebie
wysyłać wiadomości w ciekawy sposób.
Na koniec tego rozdziału porozmawiamy również o technologii JSONP,
która jest niezwykle ciekawa, dlatego pokażę ci, jak ona jest realizowana zarówno po stronie klienta, czyli
w języku JavaScript, a także po stronie serwera, jak to wszystko działa. I pokażę ci, jak można przykładowy
skrypt napisać w języku PHP.
Następnym tematem, który poruszamy w tym kursie będą cookies, czyli tzw. ciasteczka.
Pokażę ci, czym są ciasteczka, jak są ustawiane przez serwer, również jak mogą być ustawiane i odczytywane
przez język JavaScript.
Wytłumaczę ci, na czym sprawa polega i do czego mogą one okazać się przydatne. W tym kursie pojawia się
również bardzo ważny rozdział o wyrażeniach regularnych.
Jest to rzecz, która na pierwszy rzut oka wydaje się skomplikowana, dlatego wyrażenia regularne rozłożymy sobie na czynniki
pierwsze i wytłumaczę ci dokładnie, w jaki sposób one działają.
Potem pokażę ci, w jaki sposób z tych wyrażeń regularnych korzystać
w języku JavaScript i przedstawię ci kilka metod dostępnych na obiekcie wyrażeń regularnych, a także
na obiektach string, czyli tekstowych, które pozwolą nam pracować z tekstem.
Będziemy mogli m.in. sprawdzić, czy jakiś ciąg, jakiś wzorzec, znajduje się w innym tekście lub np. będziemy
mogli z tekstu wyłapać wszystkie adresy e-mail i albo je usunąć, albo z nich skorzystać, albo zamienić
je na coś innego.
Na koniec tego rozdziału wykonamy projekt pod tytułem Antybluzgacz, który będzie nam pozwalał filtrować
wiadomość wpisywaną przez użytkownika. Założymy sobie, że nasz skrypt umieścimy na jakimś forum i kiedy jakaś
osoba będzie próbowała obrazić inną osobę, to będziemy chcieli we wpisywanym w tekście wyłapać zakazane słowa
i zamienić je na przypadkową reprezentację znaków, np. wykrzyknik hash, dolar itd.
Zobaczysz, że będzie to bardzo ciekawy przykład, ale również bardzo życiowy i przydatny.
I na tym przykładzie wykorzystamy wyrażenia regularne i kilka ciekawych możliwości tych wyrażeń regularnych
w kontekście języka JavaScript.
W przedostatnim rozdziale kursu znajdziesz sekcję tips and tricks, gdzie zamieściłem 10 lekcji z krótkimi trickami,
z których będziesz mógł się dowiedzieć m.in., jak wczytywać obrazy w tle
na naszej stronie internetowej, czy na przykład jak wyświetlić powiadomienia, które będą migały na pasku
tytułowym naszej strony.
Rozdziały w tym kursie są ułożone nieprzypadkowo, w ten sposób, abyśmy zaczęli od programowania obiektowego
i dziedziczenia prototypowego, a dopiero później przejdziemy do z pozoru trochę prostszych tematów.
Niemniej jednak sądzę, że ten pierwszy rozdział będzie dla ciebie swego rodzaju oświeceniem, bo jeżeli
zrozumiesz dogłębnie to, co będę chciał ci pokazać,
a więc dziedziczenie prototypowe i koncepcję programowania obiektowego, to naprawdę z każdym kolejnym
rozdziałem będziesz dużo lepiej rozumiał język JavaScript.
Jak wspomniałem, chociaż w kolejnych rozdziałach będziemy poruszać kwestię wydawałoby się troszkę prostsze,
to mimo wszystko na każdym etapie będę mógł ci pokazywać, że w danym miejscu coś działa tak, a nie inaczej.
Nie tylko dlatego, że ktoś tak to wymyślił, ale będziemy mogli sobie odpowiedzieć na pytanie, dlaczego
coś działa w ten, a nie inny sposób.
Dlaczego w taki, a nie inny sposób dziedziczy z prototypu.
To naprawdę bardzo dobry rozdział, który pozwoli ci, tak jak wspomniałem, spojrzeć na JavaScript z zupełnie
innej perspektywy.
Teraz mógłbyś zadać pytanie: dla kogo jest ten kurs?
Jest to bardzo ważne pytanie.
Otóż kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS, a także języka JavaScript.
Natomiast bardzo serdecznie zachęcam do przerobienia wspomnianego kursu JavaScript od podstaw, bo nad tym
kursem i nad wcześniejszym kursem pracowałem równolegle i te kursy tak naprawdę się dopełniają.
W tamtym kursie nie tylko poruszam od podstaw język JavaScript, ale także przy każdej konstrukcji staram
się przekazywać całą moją wiedzę na temat różnych smaczków w języku JavaScript, które przy okazji pętli,
funkcji i tak dalej się pojawiają.
Natomiast około połowa kursu od podstaw jest poświęcona obiektowemu modelowi dokumentu, czyli DOM API
i myślę, że jest to również bardzo ciekawa lekcja dla każdej osoby, która nawet zna już dzisiaj język
JavaScript, ale nie porusza się jakoś bardzo dobrze w tym obiektowym modelu dokumentu i chciałaby to lepiej
zrozumieć.
Niemniej jednak jak wspomniałem kurs podstawowy nie jest obowiązkowy, aczkolwiek w nim wspominam o kursie
drugim, mając na myśli kurs JavaScript w praktyce, a w tym kursie często nawiązuję do kursu pierwszego.
Dlatego uważam, że jeżeli przerobisz obydwa te kursy, nieważne na jakim poziomie jesteś w języku JavaScript,
to naprawdę wskoczysz na bardzo wysoki poziom i będziesz inaczej patrzył na skrypty, które do tej pory
pisałeś, a także mam nadzieję, zaczniesz pisać dużo lepsze programy, aplikacje webowe czy po prostu proste
skrypty, z których inni będą mogli się cieszyć na swoich stronach internetowych.
Na koniec pozostaje mi tylko zachęcić cię do przerobienia tego kursu i myślę, że usłyszymy się niebawem w
pierwszych jego lekcjach.
Do usłyszenia.