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.
sporo nowości doczekał się też obiekt math czyli dla tych osób które będą chciały
wykonywać jakieś operacje matematyczne lub pisać jakieś bardziej zaawansowane aplikacje
które potrzebują różnych funkcji matematycznych teraz będzie
ich znacznie więcej jeśli byśmy sobie poszli na stronę dokumentacji to
tutaj możesz zobaczyć po lewej stronie wszystkie stałe które na obiekcie
math są dostępne a także wszystkie metody i część z tych metod jest zupełnie nowa
takie jak na przykład log2 jeżeli byśmy tutaj przeszli i zobaczyli
sobie niżej przy specifications to widzimy że to zostało dodane specyfikacji
właśnie ecmascript 2015 czyli es6 niektóre z nich były już
wcześniej dlatego jeżeli jesteś jedną z osób które potrzebują jakiś funkcji matematycznych
to po prostu polecam ci się zapoznać z tym co jest dla ciebie teraz dostępne
ja natomiast będę chciał na szybko pokazać ci tylko na kilka z
nich czyli co może nam się tak naprawdę przydać jedną z ciekawych
funkcji które zostały dodane jest funkcja dostępna na math,która się nazywa
sign i pozwala nam ona określić czy mamy do czynienia z liczbą ujemną czy
z liczbą dodatnią w ten sposób że jeżeli tutaj wpiszemy na przykład minus 10
to zostanie dla nas zwrócone minus 1 czyli jeżeli minus 1 jest
zwrócone to mamy do czynienia ze znakiem minusa a jeżeli byśmy tutaj
mieli liczbę dodatnią to będziemy mieli wartość 1 w ten
sposób będziemy mogli określić jaki znak jest przy takiej liczbie oczywiście wcześniej
też można to było zrobić operatorem na przykład porównania mniejsza od natomiast
teraz taka metoda statyczna została dodana jeszcze inną metodą jest
metoda trunc czyli jak truncate a więc przytnij
w ten sposób jeżeli tutaj podamy sobie
liczbę zmiennoprzecinkową na przykład 10 234
to wszystko to co jest po kropce zostanie przyjęte i zostanie zwrócona
wartość w postaci takiej liczby właśnie całkowitej czyli mamy tutaj
liczbę 10 nie będę pokazywał ci wszystkich
tych funkcji dlatego że ja sam z nich zbyt często nie korzystam natomiast wiedz że są
nowe funkcje że ta biblioteka matematyczna została rozszerzona natomiast jeżeli jesteśmy
przy matematyce to chciałbym powiedzieć jeszcze o jednej ważnej rzeczy mianowicie
do języka JavaScript zawitały tak zwane binary literals
i octal literals i teraz chcę ci pokazać na czym sprawa polega zróbmy sobie
console log taki oto jeżeli napisze 0b to znaczy
że będę teraz stworzył liczbę binarną w taki sposób właśnie dosłowny
że mogę ją wpisać i w zakresie liczb binarnych czy w zapisie liczb binarnych
trzy jedynki to jest 7 czy jeżeli napiszesz 0b i
później wartość binarną czyli na przykład trzy jedynki to mogę
taki literał utworzyć czyli widzisz że tą wartość bezpośrednio mogę wpisać i porównajmy
czy to jest równe 7 zobaczymy wartość true i druga
rzecz która została dodana i jest to zapis octal być może
rzadziej używany i jego zapisujemy tak że będzie 0 i o i teraz
i będzie wartość ósemkowa czyli właśnie octal jeżeli bym sobie tutaj
wpisał 12 to to powinno być równe naszej normalnej
dziesiątce w zapisie dziesiętnym zobaczmy również mamy wartość true do
tej pory w javascripcie jeżeli chodzi o tego typu zapisy to mieliśmy zapis heksadecymalny
który wyglądał tak że pisaliśmy 0x i tutaj jakąś
wartość na przykład fff przy okazji sprawdźmy jaka jest wartość
wyświetliła się tutaj i byłaby to wartość
4095 jak możesz zobaczyć natomiast
teraz jeszcze na koniec tylko ci pokażę gdybyś był ciekaw jak można w języku JavaScript zmienić
sobie liczbę dziesiętną na właśnie taką wartość i to nie jest związane
już es6 ale było do tej pory też dostępne otóż jeżeli mamy na przykład siódemkę
to możemy na niej wykonać taką metodę która się
nazywa to string ale że ta kropka jest traktowana jak tutaj kropka
na przykład do tworzenia liczb zmiennoprzecinkowych to musimy sobie taką liczb
opleść nawiasami okrągłymi i teraz metoda to string gdybym
nic tutaj dużo nie zrobił to zamieni mi siódemkę na string 7 natomiast mogę
tutaj podać tak naprawdę podstawę więc jeżeli bym sobie podał w systemie
binarnym czyli 2 to zamieni mi to na wartości 111 jak
możesz zobaczyć w tym że to jest string ale w ten sposób można skonwertować sobie
dowolną liczbę na liczbę binarną natomiast gdybym chciał na tą ósemkową
czyli oktalną to tutaj bym wpisał base 8
i powinniśmy zobaczyć 12 zobaczmy zobaczyliśmy
tutaj 7 więc powinienem wpisać tu dziesiątkę okej żebyśmy
mieli dokładnie dokładne to porównanie i teraz widzimy 12 czyli
to co napisałem wcześniej się zgadza spróbujmy jeszcze z tą wartością 4000 która
tutaj skopiowałem czy też nam się to będzie zgadzać to string
i 16 czyli wartość szesnastkowa zobaczmy
będzie to fff czyli możesz z tego jakby tutaj zobaczyć
że w javascripcie do tej pory istniał taki zapis w ecmascript 5
jak zapis hexadecymalny dosłownych liczb natomiast teraz mamy również zapis
binarny 0b i później wartość oraz oktalny czyli 0o
i później wartość więc tutaj może sobie to porównajmy do tej
oto wartości i zostawimy sobie do tej lekcji już
na tym czyli jak widzisz również i obiekt math doczekał się wielu ciekawych zmian i
jeżeli będziesz ciekaw wiesz gdzie możesz je znaleźć