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.
w tej i w kolejnej lekcji powiemy sobie o tym co nowego w specyfikacji od ecmascript
2017 która w momencie kiedy ja te słowa wypowiadam jeszcze nie jest oficjalnie
wydana i ukończona ale to co ci pokażę najprawdopodobniej będzie
w tej specyfikacji i przeglądarki już to zaimplementowany znowu to są dwie
niewielkie rzeczy chociaż jeżeli byś sobie więcej poczytał to kilka jeszcze drobiazgów
tak naprawdę zostało zmienionych lub dodanych natomiast ja tylko dwie rzeczy będę chciał ci
pokazać jak zatem widzisz te kolejne iteracje typu 2016 czy 2017
nie wprowadzają już tak wielu kluczowych zmian i jeżeli dobrze zrozumiesz es6
to później każdą kolejną nowość też będziesz mógł zrozumieć jeżeli
chodzi o nowości dla string to mamy kolejną ciekawą metodę w specyfikacji ecmascript
2017 i jest pad start i pad end i teraz
na czym ona polega jeżeli mamy dowolny string na przykład Piotr
to możemy napisać pad start i możemy
tutaj podać wartość tylko że ona powinna być większa niż to
co mamy tutaj czyli tutaj mamy pięć znaków więc jeżeli podam 5 to nic
się nie wydarzy ale jeżeli ponad 10 to zobacz na początku tego stringu właśnie
pad start zostało dodanych 5 pustych takich jakby
spacji można powiedzieć po to żeby cały ten mój string łącznie
miał 10 znaków czyli powiedziałem że on ma mieć łącznie 10 znaków i dodaj na początku
puste znaki aby go do takich znaków rozszerzyć zamiast tych
pustych znaków można byłoby tutaj podać string który ma zostać dodany na
przykład taki oto taka pauza zobaczmy lub
na przykład a b coś w tym stylu no i będzie to dodawane natomiast jeżeli
będzie musiało to będzie przycięte dlatego że tutaj 5 ich zostało dodanych
i raz dwa raz dwa i tylko raz już to by się nie zmieściło
natomiast domyślnie są to puste znaki i mamy podobną metodę ona
się nazywa pad end czyli znowu chodzi o to
że mamy jakieś string i mówimy że chciałbym żeby on łącznie miał 10 znaków natomiast
jeżeli jest krótszy to uzupełnij go tym co dodam tutaj jeżeli nic nie podam to chciałbym
żeby to były takie puste spację i teraz mógłbyś zapytać po co jest to potrzebne otóż
to może się przydać do formatowania jakiś danych tabelarycznych
po to żeby fajnie one wyglądały na przykład jakieś kolumny i tak dalej
często się można z czymś takim spotkać i dlatego ja na szybko przygotowałem
taki bardzo prosty przykład którego w stu procentach nie będę tłumaczył możesz sobie go w razie czego
przejrzeć stworzyłem metoda get max length której jeżeli
przekażemy tablice to ona mi zwróci największą wartość
jeżeli chodzi o długość stringu więc mam tutaj taką tablice jakby columns imię
nazwisko wiek i nazwisko ma 8 znaków więc przekazując ją do get max length
chciałbym dostać z powrotem 8 czyli tutaj chciałbym mieć ósemkę w zasadzie nie
w tym miejscu tylko tutaj gdzie wywołuję tę metodę zauważ jak to zrobiłem przeliteruję
sobie przez całą tablicę i metodą map i funkcją arrow zwracam z
dla każdego elementu length czyli będę tutaj pod lengths miał
nową tablicę gdzie będę miał w tym przypadku 4 8 i 4
takie są długości tych stringów i następnie do metody math max
której należy przekazać właśnie coś takiego jak 4 8 4 rostrzeliwuje
tablice co już ci pokazywałem operatorem spread i zwracam ona zwróci
największą wartość czyli wiem że jest to 8 tutaj robię sobie output
i teraz po tych kolumnach sobie literuje no i zapisuje sobie długość poszczególnych tekstów
czyli 4 8 4 tutaj w zmiennej do output dodaje taki
pipe i następnie za pomocą pad start tutaj z odpowiednio dodaną
jeszcze wartością i pad end również z odpowiednio wyliczoną wartością możesz
sobie z tym poeksperymentować dodaje sobie takie puste spacje i
na końcu dodaje jeszcze jeden taki pipe i znak nowego wiersza i na końcu chciałbym
cały ten output wstawić na stronę do elementów pre 62
który mamy tutaj zobaczymy po odświeżeniu wygląda to w ten sposób czyli jeżeli
sobie z tym poeksperymentujesz to zobaczysz o co chodzi i mówiąc o danych tabelarycznych miałem
właśnie na myśli coś takiego że można je fajnie ładnie sformatować w tym przypadku
każdemu z nich na początku dodaliśmy 4 takie spacje bo tutaj
napisałem jak widzisz pad start długość tego tekstu
plus 4 ale na końcu już to odpowiednio wyliczyłem bo na przykład temu tutaj imię
musieliśmy ich dodać więcej jeżeli bym to skopiował i sobie sprawdził length
jest to 8 a tutaj w przypadku nazwisko należało
dodać tylko 4 więc odpowiednio sobie wyliczyłem ale jakby same metody pad start
i pad end widzisz już jak działają