Nowy Standard JavaScript
10 godz. 43 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperNa początku dowiesz się jakie nowości pojawiły się w języku, jeśli chodzi o tworzenie zmiennych i stałych. Poznasz dwa nowe słowa let i const, a także dokładnie omówimy ich różnice, względem znanego nam do tej pory słowa var. Następnie poruszymy temat obiektów. Zobaczysz jak nowy zapis pozwoli znaczenie ułatwić nam pracę i sprawić, by kod był bardziej czytelny. W kolejnym rozdziale porozmawiamy o zmianach w funkcjach. Poznasz tzw. arrow functions wraz z poradami, kiedy z nich korzystać, a także z konsekwencjami ich użycia. Zobaczysz również, jak korzystać z domyślnych parametrów. Następną nowością będą operatory rest i spread, które znacząco uproszczą pisanie kodu dla funkcji i tablic. Chwilę później rzucimy okiem na bardzo ciekawy temat, mianowicie na tzw. destructuring. To nowa funkcja języka, która pozwala w łatwy sposób wyciągnąć odpowiednie dane z tablic i obiektów, nawet jeżeli te posiadają kilkupoziomową, zagnieżdżoną strukturę. Zmian doczekały się również ciągi znaków. Poznasz nowy zapis, tzw. template string, a także możliwość wykorzystania funkcji tagujących.
ES6 wprowadza do języka JavaScript zapis klas. I choć na początku wydaje się, że to duży krok w stronę klasycznych obiektowych języków programowania, to jak się przekonasz, jest to w dużej mierze tzw. syntactic sugar, a więc zupełnie nowy, prostszy zapis, a prawie identyczne jak wcześniej działanie, oparte na dziedziczeniu prototypowym. W kursie poruszymy również temat Symboli oraz tego jak z nimi pracować, a chwilę później poznasz iteratory. To konstrukcje ułatwiające iterację, które znacząco upraszczają pracę z kolekcjami danych. Wraz z iteratorami poznasz również generatory, które ułatwiają z kolei tworzenie tych iteratorów. Istotną nowością w ES6 są również natywne Promise. To sposób na rozwiązanie problemu asynchroniczności, który znamy od bardzo dawna w postaci różnych bibliotek. Od teraz jednak Promisy znajdują się bezpośrednio w języku. Nowymi konstrukcjami, które pozwalają pracować z kolekcjami danych, są Map i Set. Dowiesz się jak z nich korzystać, a także do czego są przydatne. W jednym z rozdziałów rzucimy też okiem na tzw. Proxy API. To mechanizm języka, który pozwala na dość niskopoziomowy dostęp do różnych operacji. I choć być może nie jest to coś, z czego będziesz korzystał nad wyraz często, to warto wiedzieć, jakie są nowe możliwości tego API.
Jedną z najlepszych nowości, która zawitała do języka JavaScript wraz z ES6 są moduły. To możliwość dzielenia kodu na wiele plików, z których można pewne wartości wyeksportować, a następnie zaimportować je w innych modułach. Tutaj dowiesz się wszystkiego, co z modułami związane. Zobaczysz wiele sposobów na eksport i import, a także jak pracować z modułami w przeglądarkach internetowych. Kurs skupia się na omówieniu wszystkich najważniejszych nowości w ES6, dzieląc je na rozdziały. Jeden z nich natomiast, poświęcony został omówieniu mniejszych zmian, które znalazły się w specyfikacji. Poznasz w nim np. nowe metody tablic czy ulepszoną współpracę z Unicode.
Specyfikacja EcmaScript 2015 wprowadziła naprawdę bardzo wiele zmian, ale jej twórcy założyli, że od tego czasu każda kolejna wersja specyfikacji będzie pojawiać się co roku. Oznacza to przede wszystkim, że nie będziemy na raz bombardowani aż tak wieloma zmianami, jak w 2015 roku. W tym kursie nie zabrakło zatem omówienia nowości ze specyfikacji ES2016 oraz 2017, gdzie poznasz np. nowe metody dla stringów czy funkcje asynchroniczne.
Kiedy będziesz już uzbrojony w solidną wiedzę z zakresu nowości w ES6, dowiesz się jak w praktyce pracuje się dzisiaj z tym standardem. W jednym z rozdziałów omówimy nowoczesny workflow z użyciem npm i wykorzystamy popularne narzędzie webpack, do pracy z modułami, a także do transpilowania kodu ES6 do wersji ES5. Dzięki temu nowoczesny kod, który napiszemy, będzie mógł być uruchamiany również w starszych przeglądarkach, które nie wspierają najnowszego standardu. Dowiesz się na co zwrócić uwagę, by wszystko działało bez zarzutu.
Zwieńczeniem tego kursu będzie praktyczny projekt, w którym od podstaw wykonamy swoją własną bibliotekę do pracy z Obiektowym Modelem Dokumentu. Będzie ona w działaniu nieco podobna do znanej chyba wszystkim biblioteki jQuery. Na tym przykładzie postaramy się wykorzystać jak najwięcej wiedzy z zakresu ES6 zdobytej wcześniej. Stworzymy metody do pracy z drzewem dokumentu, a więc do wyszukiwania elementów, do tworzenia nowych, do przypisywania im klas, atrybutów czy styli CSS. Nie zabraknie również modułu odpowiedzialnego za współpracę z Ajax. Cały kod utworzymy oczywiście w sposób modułowy, aby bibliotekę można było łatwo rozwijać w przyszłości. Na koniec projekt ten przetranspilujemy do kodu ES5 z użyciem Babel i przetestujemy w starszej przeglądarce Internet Explorer 11, aby upewnić się, że nasza biblioteka działa poprawnie.
Kurs ten jest dla wszystkich osób, które znają już język JavaScript i czują się w pracy z nim swobodnie. Jeśli zatem chciałbyś pracować z nowoczesnym kodem JavaScript, to ten kurs jest zdecydowanie dla Ciebie. A może masz zamiar poznać framework Angular lub bibliotekę React? Tam również wykorzystywany jest najnowszy zapis ES6, więc wiedza ta będzie naprawdę pomocna. Z solidną wiedzą z zakresu EcmaScript 6, bez trudu pozostaniesz na bieżąco z każdą kolejną edycją tej specyfikacji.
również wyrażenia regularne doczekały się pewnych zmian ale zanim przejdziemy do reg exp
to sobie porozmawiamy chwilkę w stringach dlatego że w es5 czyli
we wcześniejszych wersjach javascriptu mieliśmy pewien problem jeżeli mieliśmy string
do którego wstawilibyśmy taki znak jak tutaj widzisz emoji jak najbardziej poprawny
albo jakiś na przykład znak z chińskiego alfabetu to pytanie co by się stało
gdybym zrobił sobie console log s length czyli długość
takiego string chciałbym sprawdzić i okaże się że jest to 2 dlatego
że takie znaki miały więcej
niż 16 bitów czyli to co jest ważne to w unicodzie
te podstawowe znaki mieściły się na 16 bitach natomiast później kiedy
rozszerzono unicode to pozostałe znaki musiały
mieć jakby większe wartości żeby można było tak wiele znaków reprezentować i na przykład
pewne chińskie znaczki mają 32 bity
czy taka emotikonka której pokazałem jest zapisywana na 32 bitach
natomiast interpreter języka JavaScript w tej starszej specyfikacji
czyli właśnie to co widzimy tutaj za pomocą kropka length tak naprawdę one nie
widzą, że tutaj jest tylko jeden znak wpisany taka emotikonka czy na przykład jakiś
chiński znaczek tylko one sobie porównują ile tam jest bitów i widzą
że jest to więcej niż 16 bitów dlatego zwracają nam jak widzisz length
2 mimo tego że mamy tutaj tylko jeden znak natomiast pytanie co by zostało
zwrócone gdybym się odwołał s0 bo na stringach możemy tak jak na
tablicach się odwoływać i do s1 zobaczmy jak
widzisz taki dziwny znaczek został zwrócony bo tak naprawdę nie możemy tego podzielić
tutaj powinna być tylko jedna wartość czyli pod s zero powinniśmy
mieć od razu całą tę emotikonkę i to co jest ciekawe to w ecmascript
6 zostało to po części rozwiązane o ile length tutaj się nie zmieniło
bo musi to być wstecznie kompatybilne to na przykład pętla for of którą
już poznałeś gdybyśmy zrobili let character of string ona
potrafi operować już na tych wartościach 32 bitowych czyli gdybym
tutaj zrobił console log character w ten sposób to wyświetli mi poprawnie
emotikonkę czyli ona potrafi operować na takich wartościach 32
bitowych i to co jest ciekawe gdybyś chciał mieć pewność jeżeli korzystasz z es6
ile znaków znajduje się w takim oto stringu to length jak widziałeś zwróciło
nam 2 czyli było to niepoprawne ale skoro pętla for of działa
poprawnie to znaczy że iteratory też zwrócą poprawną wartość czyli
gdybyśmy to chcieli sprawdzić to moglibyśmy utworzyć sobie nową tablicę w locie
i do niej rozstrzelić taki string będziemy
jedną emotikonkę w tej tablicy i wykonać length już nie na stringu
ale na tablicy więc zróbmy sobie console log i sprawdzimy
to w ten sposób zobacz teraz mamy jeden czyli
jak masz dowolny string to możesz go rozstrzelić operatorem spread wstawiając pod tablicę
i sprawdzić length na tablicy wtedy będziesz miał poprawną długość więc
warto tutaj ten unicode został rozszerzony w tym sensie że poprawnie
działa na przykład pętla for of czy w ogóle iterator na stringu z tego
również powodu do reg exp czyli do wyrażeń regularnych zostały
też dodane nowe flagi abyśmy mogli pracować z unicodem chcę ci tlo teraz
pokazać wkleję sobie taki nowy string który wyglądałby
następująco i powiedzmy że teraz chciałbym napisać takie wyrażenie regularne ja go
też od razu wkleję mam nadzieję że kojarzysz wyrażenia regularne czyli mówię tutaj
że chciałbym znaleźć taki ciąg w który ma równa się i potem zgrupować sobie
coś co będzie miało 1 znak czyli kropka to będzie dowolny znak
i później znowu znak równa się i teraz chciałbym w konsoli
wyświetlić sobie reg ex czyli
chciałbym na tego reg exa wrzucić nasz string s zoboczmy
czy nam to w jakikolwiek sposób zadziała czyli pamiętaj mówię że chciałbym znaleźć dowolny jeden
znak pomiędzy znakami równa się zobaczmy czy ten znak będzie potraktowany
jak jeden znak sprawdzamy mamy wartość null czyli
to nam się nie udało gdybym tutaj postawił plusa że może być więcej niż jeden znak
to już by nam się to w tym momencie udało natomiast jeżeli chcemy
pracować na wartościach właśnie takich gdzie w stringach będziemy mieli te szerokie
zakresy unicodu czyli na przykład takie emotikonki czy inne znaki takie
jak na przykład chińskie to mamy nową flagę którą możemy dodać do tej pory
mieliśmy flagę i g i też m a teraz mamy flagę u jak unicode
mój edytor tutaj jeszcze z tym interem który mam wskazuje że jest to błąd ale
zobaczysz że nie jest i teraz wszystko poprawnie działa czyli w wyrażeniach regularnych jeżeli
kropka oznacza jeden dowolny znak to ta buźka będzie traktowana jak
jeden dowolny znak do wyrażeń regularnych została dodana jeszcze
jedna nowa flaga i jest to y tak zwane sticky teraz ci będę chciał
pokazać o co chodzi natomiast musisz znać wyrażenia regularne
żeby to w ogóle zrozumieć jeżeli znasz to bardzo dobrze zobaczmy moglibyśmy
mieć taki oto string w tym tekście znajdują się adresy email mamy jeden adres
i drugi adres i teraz chciałbym sobie stworzyć wyrażenie regularne wkleję
go również tutaj i ono oczywiście nie jest zbyt dobre do szukania emaili ja
nie zrobiłem na szybko chodzi o to że chcemy tym wyrażeniem regularnym znaleźć coś
co będzie miało jakiś znak taki jak słowo raz lub więcej
później małpkę potem znowu taki raz lub więcej taki znak alfanumeryczny
i później chciałbym żeby była kropka a z 2 do 3 czyli
generalnie po małpce tutaj może być coś raz lub więcej to
jest to w później musi być kropka i domena to będzie od dwóch do
trzech liter właśnie takich od a do z w każdym
razie jest to takie proste wyrażenie regularne i moglibyśmy sobie teraz tworzyć
zmienną result która ma wartość null i teraz
pętlą while nadpisywać result za każdym razem robiąc
coś takiego email reg ex exec na stringu
email na stringu emails tutaj musimy mieć jeszcze flagę
g jak global która była już wcześniej dostępna po to żebyśmy wyszukiwali każde jego
kolejne wystąpienia i teraz to działa tak że jeżeli zrobimy exec to
zostanie nam zwrócone do result jakby pierwsze trafienie czyli powinien
zostać znaleziony ten email natomiast za drugą iteracją kolejne użycie exec
na tym samym stringu powinno nam znaleźć kolejny adres email i zwrócić
tablice i kolejne wykonanie już nic nie znajdzie i zwróci null a
więc pętla while się zakończy natomiast dopóki się nie zakończy to
będę chciał wyświetlać tutaj result i możemy sobie to podejrzeć pamiętaj
tylko że jeżeli tutaj nie będzie g to zawiesimy przeglądarkę bo ta pętla będzie
się wykonywać w nieskończoność bo będzie szukać tylko pierwszego emaila znajdzie pierwszy kolejne
wykonanie znowu znajdzie pierwszy i tak dalej i tak dalej natomiast jeżeli jest flaga
g to możemy też tutaj to podejrzeć na wyrażeniu regularnym jest
dodawane coś takiego jak last index jest to index ostatniego znalezienia czyli
jeżeli uda się nam znaleźć coś takiego to last index zostanie przypisany
właśnie na ten ostatni znak i jeżeli by tego nie było g to last
index zawsze ma 0 czyli przy kolejnym użyciu exec zaczyna szukanie od zera dlatego
tapeta by się zawiesiła a tak to po pierwszym użyciu zapiszę last index tutaj przy
drugim użyciu zacznie od tego miejsca znajdzie Anna Nowak i zapisze indeks
na koniec i przy kolejnym użyciu zacznie od tego indeksu i już nic nie znajdzie
zobaczmy jak widzimy last index to było 60 a później 78
i tablica została znaleziona czy w zasadzie zwrócona mamy email
Jan Nowak jan kowalski pl i Anna Nowak i pętla się zakończyła
teraz do es6 została dodana nowa flaga która
nazywa się y jeżeli dodamy y to znaczy że nasza wyrażenie
regularne będzie wyszukiwane w takim trybie sticky zobaczmy czy nam to coś
da jak widzisz nic pętla się w ogóle nie wykonuje i powiem ci teraz dlaczego sticky
oznacza że last index czy w zasadzie że
dopasowanie musi być od last index na początku last index ma wartość 0
więc to by nam zadziałało tylko jeżeli od zera czyli od początku stringu
będzie taki podciąg się tam znajdował zobaczmy teraz raz
nam się udało to znaleźć natomiast last index zostanie zapisane tak jak tutaj widzimy
na 15 czyli moglibyśmy to policzyć to byłoby gdzieś w tym miejscu i
kolejne użycie będzie wyszukiwać kolejnego maila od tego last
index gdzie on znowu musi być na początku i to oznacza tylko tyle
że Anna nie została znaleziona bo nie była na początku od tego ostatniego indeksu
i tutaj sticky oznacza właśnie to że te paterny których wyszukujemy one
muszą być do siebie jakby przyklejone i wtedy tylko będą mogły być znalezione
więc jeżeli tak byśmy sobie to zapisali to zobaczymy to
teraz mamy dwa trafienia tylko tutaj brakuje jeszcze a ale
to dlatego że powiedziałem znajdź mi od dwóch do trzech znaków w domenie więc
on tutaj w pierwszym zaraz pl i jeszcze wziął sobie a natomiast jeżeli tutaj dodamy
sobie znak zapytania mówiąc że ma nie być łakomy jeżeli chodzi o te znaki to
już wtedy będzie to działać poprawnie czyli że jeżeli miałbyś jakieś teksty jakieś
ciągi gdzie chciałbyś znaleźć różne wzorce które by do siebie przylegały to możesz
skorzystać z flagi y no i na koniec pokażę ci jeszcze że zostały
dodane pewne właściwości do reg exp czyli możemy sobie w zasadzie to
skopiuję wyświetlić coś takiego email
reg ex flag to nam wyświetli wszystkie flagi przypisane do takiego emaila czy
do takiego wyrażenia regularnego w tym przypadku jest tylko y i zwróci
nam true jeżeli właśnie korzystamy z flagi y a unicode zwróci
nam true jeżeli korzystamy właśnie z flagi u więc zobaczmy jak
to wygląda mamy tutaj flagi y true i false gdybyśmy
tutaj mieli jeszcze u to wtedy tutaj unicode zwróciłoby nam true więc
ten sposób na wyrażenie regularne można sprawdzić jakie flagi zostały ustawione