JavaScript: Co dalej?
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.
Jeżeli dobrnąłeś do tej lekcji w tym kursie to mam nadzieję że już bardzo dobrze rozumiesz język Javascript i
że wszystkie przykłady przerobiłeś skrupulatnie razem ze mną.
Kurs został ułożony w taki sposób abyś naprawdę dobrze zrozumiał ten język m.in. poprzez programowanie
obiektowe i dziedziczenie prototypowe.
Niemniej jednak jeszcze bardzo wiele innych ciekawych tematów w tym kursie poruszyliśmy.
Na każdym jednak etapie nauki pojawia się pytanie co dalej.
Czego jeszcze powinienem się nauczyć bo mam nadzieję że język Javascript zafascynował cię na tyle że
chciałbyś kontynuować swoją przygodę z tym właśnie językiem.
Dlatego teraz odpowiedź na pytanie gdzie szukać dalszych informacji i czego jeszcze powinieneś się nauczyć.
Równolegle z tym kursem JavaScript w praktyce przygotowywałem również kurs JavaScript od podstaw i oba
te kursy ukazały się jednego dnia na eduweb pl.
I to nie jest tak że kurs JavaScript od podstaw był podstawowy a kurs w praktyce był zaawansowany.
Owszem ten kurs który masz teraz przed sobą porusza nieco bardziej zaawansowane kwestie ale jak najbardziej
dopełnia pierwszy kurs czyli JavaScript od podstaw.
Dlatego jeżeli nie zrobiłeś kursu JavaScript od podstaw bo znałeś już podstawy języka JavaScript to
tak czy siak zachęcam cię do jego przerobienia tam nie tylko opisuję podstawy języka Java skrypt gdzie przy
każdej konstrukcji staram się powiedzieć wszystko co na jej temat wiem ale także omawiamy dom API a
więc jak język Javascript współpracuje z przeglądarką internetową.
I właśnie to jest niesłychanie ważne.
Dlatego w tym kursie nawiązywał wielokrotnie do pierwszego kursu czyli do kursu JavaScript od podstaw
a także w kursie JavaScript od podstaw nawiązywałem do drugiego kursu.
Te dwa kursy są swego rodzaju całością która naprawdę dobrze się dopełnia.
Mam nadzieję że jeżeli ten kurs obejrzałeś po kursie JavaScript od podstaw to możesz się ze mną zgodzić
że naprawdę teraz dobrze rozumiesz język Javascript i nawet osoby które nie miały jakiejkolwiek wiedzy
z języka JavaScript po obejrzeniu tych dwóch kursów wyskakują naprawdę na wysoki poziom wiedzy z zakresu
języka Java Script i obiektowego modelu dokumentu.
Z takiego poziomu dużo łatwiej już iść dalej w kursie JavaScript od podstaw stworzyliśmy kilka naprawdę
ciekawych przykładów również w tym kursie starałem się takie przykłady stworzyć.
Natomiast aby te kursy nie trwały po 20 godzin nie mogłem przygotować jeszcze więcej przykładów.
Natomiast bardzo wiele naprawdę ciekawych przykładów przerabiamy w kursie HTML 5 i JavaScript techniki
zaawansowane.
Tam mówimy o API dostępne w przeglądarkach za pomocą HTML5 takich jak geolokalizacja Canvas czy np.
sockets niech tutaj nie zmyli cię nazwa techniki zaawansowane otóż spokojnie może do tego kursu przejść
po przerobieniu tego kursu.
Gwarantuję Ci że bardzo wiele rzeczy się jeszcze z niego nauczysz niekoniecznie w kontekście samego
języka JavaScript bo już naprawdę prawie wszystko ci przekazałem co jest związane z tym językiem ale
w kontekście właśnie nowych API i tego jak z nich korzystać.
Jakie aplikacje wewnątrz przeglądarek możemy dzięki temu tworzyć.
Kolejna ważna sprawa jest taka że wiele osób sięga po bardzo znaną bibliotekę jquery nie rozumiejąc języka
JavaScript mi natomiast bardzo zależy na tym aby osoby sięgające po jquery najpierw zrozumiały język
JavaScript wiedziały jak wszystko zrobić w języku JavaScript a potem dopiero sięgały po takie biblioteki
jak jquery które po prostu nam to ułatwiają.
Natomiast kiedy rozumiemy jak coś działa pod spodem ale korzystamy z uproszczonej wersji to jak najbardziej
jest to w porządku.
Dlatego jeżeli do tej pory nie korzystałeś z biblioteki jquery to polecam ci dopiero właśnie przerobieniu
kursu JavaScript od podstaw i tego kursu.
Sięgnięcie po bibliotekę jquery na eduweb pl znajdziesz kurs jej jquery w praktyce w momencie kiedy wypowiadam
te słowa taki kurs jest dostępny.
Natomiast ja pracuję już nad nową jego wersją więc być może kiedy oglądasz kurs na eduweb pl jest już
nowa wersja kursu jquery w praktyce który będzie naprawdę świetnym dopełnieniem kursu JavaScript od podstaw
JavaScript w praktyce.
I właśnie ten kurs jquery czyli te trzy kursy dadzą mega solidną wiedzę jak tworzyć naprawdę dobre strony
i aplikacje internetowe.
W eduweb pl oprócz kursów przygotowujemy i prowadzimy również warsztaty na żywo.
Dlatego ja również już do tej pory wiele warsztatów z JavaScript przeprowadziłem i planuje kolejne.
A więc jeżeli chcesz poszerzyć swoją wiedzę zajrzyj pod eduweb pl ukośnie warsztaty.
A gdybyś np. chciał wyszukać wszystkiego co związane z JavaScript to polecam Ci adres eduweb pl ukośnik
wyszukiwarka.
Tam jest bardzo ciekawe narzędzie które przygotowaliśmy i za pomocą którego będziesz mógł znaleźć tylko
te tematy które naprawdę Cię interesują.
Na koniec oczywiście rzecz niesłychanie ważna i być może nawet najważniejsza a więc praktyka.
Musisz eksperymentować dlatego wierzę że ten kurs zrobiłeś robiłeś naprawdę skrupulatnie i że z każdym
z przykładów trochę eksperymentowałeś lub to zrobisz.
Spróbuj również dodać jakiejś funkcjonalności do aplikacji które pisaliśmy rozszerzyć np. bibliotekę
ajaksową i stworzyć nowe własne przykłady.
Tylko dzięki praktyce naprawdę przyswoisz sobie tę wiedzę i wszystko dobrze zrozumieć a także zdobędziesz
bardzo cenne doświadczenia.
Być może na tym etapie pomyślałeś sobie czego jeszcze nie powiedziałem czy kurs JavaScript od podstaw
oraz kurs JavaScript w praktyce omówił wszystko co jest związane z językiem JavaScript.
Otóż nie.
Natomiast naprawdę znakomitą większość czego nie powiedziałem w tym kursie to odnośnie programowania
obiektywnego.
Nie wspomniałem o kilku jeszcze dodatkowych rzeczach.
Dostępnych w EcmaScript 5 takich jak getters i setters.
Możesz sobie to wyszukać w Internecie.
Natomiast nie powiedziałem o tym dlatego bo nie chciałem aby kurs był zbyt długi i planuję to poruszyć
właśnie w jednym z warsztatów na eduweb pl.
Więc być może w momencie kiedy słuchasz mnie teraz taki warsztat jest już dostępny.
Dlatego polecam Ci abyś spróbował go wyszukać tam dopełnił wszystkiego co jest związane z programowaniem obiektywym w
języku JavaScript.
Wspominałem że pierwszy kurs od podstaw niekoniecznie był kursem bardzo podstawowym a ten kurs był zaawansowanym
bo w kursie pierwszym bardzo dokładnie poruszyłem tematy związane z dom API które warto abyś znał.
Nawet jeżeli wcześniej już znałeś podstawy języka JavaScript dlatego tak do tego kursu zachęcam.
Ale czego jeszcze nie powiedziałem to nie powiedziałem o wielu nowych API które cały czas są dodawane
do przeglądarek i z których możemy skorzystać.
Kiedy jednak rozumiesz jak działa język JavaScript i dom API to bez trudu nauczysz się każdego nowego API
które się pojawia.
Natomiast kilkanaście z nich omawiał we wspomnianym kursie HTML 5 i JavaSkript techniki zaawansowane.
Dlatego również do niego cię zachęcam.
Na koniec jedna bardzo ważna kwestia w tym kursie omawialiśmy standard EcmaScript 5 który został standardem
w 2009 roku i później miał jeszcze kilka poprawek.
Nie oznacza to jednak że pokazałem ci nieaktualny standard bo być może usłyszałem do tej pory już o
EcmaScript 6 w skrócie ES6.
Jest to nowy standard który pojawił się w połowie 2015 roku a dokładnie w połowie 2015 roku został opublikowany
już jako standard.
Od wielu lat był rozwijany i wprowadza on wiele rewolucyjnych zmian do języka JavaScript nie tylko są
to nowości w jakichś możliwościach języka ale także w zapisie więc to co widziałeś do tej pory czyli
nawiasy okrągłe kwadratowe nawiasem klamrowe to jest zapis języka JavaScript jeżeli zerkniesz sobie
na kod JavaScript 6 to mamy tam kilka nowych symboli i kilka nowych zapisów.
Ten kod może trochę dziwnie wyglądać.
Natomiast co mam tutaj na myśli.
Otóż nigdy nie jest tak że kiedy pojawia się nowy standard to stary odchodzi w zapomnienie.
I teraz korzystamy z nowego.
Otóż EcmaScript 6.
Jest to dodatek do EcmaScript 5.
Jest to nowy standard który całkowicie zawiera w sobie poprzedni standard a więc to wszystko co pokazałem
ci w tym kursie i również kursie JavaScript od podstaw jest jak najbardziej potrzebne aby rozumieć później
na przykład EcmaScript czyli nie martw się że nauczyłeś się tutaj jakiegoś starego standardu.
Poza tym w EcmaScript 5 cały czas tworzymy wszystkie strony i aplikacje internetowe a EcmaScript 5 dopiero niedawno
został standardem.
I choć można z niego korzystać to wiele osób traktuje go jeszcze eksperymentalnie bo nie wszystkie jego
funkcje zostały zaimplementowane w przeglądarkach internetowych.
Niemniej jednak polecam Ci zapoznanie się z tym standardem bo tam mamy naprawdę dobrą obiektowość
o której mówiłem ci w tym kursie języka JavaScript tamta obiektowość bardzo się zmienia i idzie w
stronę klasycznej obiektowości z innych języków programowania i jest tam jeszcze bardzo wiele dodatków
które ja planuję omówić w osobnym warsztacie na eduweb pl.
I znowu być może w momencie kiedy ten kurs oglądasz taki warsztat jest już dostępny.
Dlatego koniecznie sprawdź stronę eduweb pl ukośnik warsztaty i spróbuj wyszukać EcmaScript
6.
Na koniec jeszcze jedna ważna informacja jeżeli podczas nauki z tym kursem lub podczas tworzenia jakichś
własnych przykładów będziesz miał jakieś problemy lub pytania zajrzyj na naszą stronę Support czyli
wsparcie pod adresem eduweb pl ukośnik support.
I tam zarówno nasza społeczność jak i eksperci eduweb pl odpowiadają na wiele zadawanych tam pytań więc nie
wahaj się jeżeli masz jakiś problem zadaj koniecznie tam pytania.