Kod: WEB-007
Czas trwania: 40 godzin
Czas trwania: 40 godzin
Opis szkolenia
W tym szkoleniu przyjrzymy się JavaScript (EcmaScript 2015+), wykorzystaniu JavaScript do pracy w przeglądarkach (zdarzenia UI, manipulacja HTML z DOM CSS), modułom JavaScript (NPM, Webpack), pracy z serwerem (protokół HTTP, REST, AJAX, Axios, WebSocket). Jest to również pierwszy krok w kierunku nauki frameworków internetowych Angular i React.Szkolenie obejmuje również takie tematy jak korzystanie z OOP, praca z JSON i programowanie funkcjonalne. Dowiesz się szczegółowo, jak pracować z klasami, obiektami, tablicami, datami, niezmiennością i asynchronicznością.
Plan szkolenia
Język JavaScript- Wersje i implementacje JavaScript
- Zakres aplikacji JavaScript (przeglądarka, serwer, programowanie mobilne)
- Typy danych: String, Number, Boolean (pojęcia prawdziwości i fałszu)
- Operatorzy, priorytety operatorów
- Deklarowanie zmiennych: var, const, let
- Pętle: while, for, for... in, for... of
- Praca z liczbami i łańcuchami
- Wartości null i undefined: różnice i przypadki użycia
- Praca z konsolą
- Wyjątki w JavaScript
JSON, obiekty i tablice
- Format JSON, przykłady
- JSON.parse i stringify
- Obiekty, praca z klasą Object
- Tworzenie obiektów (przy użyciu literału {}, operatora new, metody create)
- Dziedziczenie prototypów, odwołanie do __proto__
- Getters i Setters
- Operator in i hasOwnProperty, pojęcie wyliczalnych właściwości
- Metoda toString (), wywołując i przesłaniając metodę
- Metoda valueOf (), wywołanie i przesłanianie metody
- Tworzenie tablic: literały i nowa Array ()
- Automatyczna zmiana rozmiaru tablicy
- Pobieranie i ustawianie długości tablicy, obcięcie tablicy
- Korzystanie z metod join () i concat ()
- Korzystanie z metody sortowania, ustawianie kolejności sortowania tablicy
- Korzystanie z metod plasterek i łączenie
- Używanie metod push, pop, shift, unshift: tworzenie stosu lub kolejki
Praca z datą i godziną
- Korzystanie z konstruktora new Date ()
- Pojęcie komputerowej reprezentacji daty jako czasu, który upłynął od epoki
- Korzystanie z getTime () i setTime ()
- Analizowanie ciągu daty
- Opcje tworzenia łańcuchów w JS: używanie pojedynczych i podwójnych cudzysłowów
- Interpolacja ciągów (ciąg w apostrofach)
- Cytowanie znaków specjalnych w ciągu
- Konkatenacja ciągów, wielkie i małe litery
- Wyszukiwanie podciągu za pomocą indexOf () i lastIndexOf ()
- Wybieranie podciągu za pomocą funkcji substring () i substr ()
- Korzystanie z metod obejmuje, kończyWith, zaczynaWith
Korzystanie z JavaScript w przeglądarce: DOM Model
- Zarządzanie oknem przeglądarki, dokumentem, zdarzeniami i układem (CSS)
- Obiekt Window i jego zastosowanie
- Łączenie kodu JavaScript ze stroną HTML
- Sekwencja wykonywania skryptów na stronie
- Buforowanie skryptów, serwery CDN, wymuszenie przeładowania JavaScript
- Korzystanie z referencji, łączenie JavaScript z referencjami
- Zdarzenie onload i jego użycie
- Ataki XSS na strony internetowe
- Praca z DOM: używanie window, document, childNodes
- Manipulowanie dokumentem za pomocą DOM: tworzenie, usuwanie, przenoszenie elementów
- Używanie metody getElementById (), getElementsByTagName (), getElementsByClassName () do wyszukiwania elementów na stronie
- Korzystanie z metod i właściwości HTMLDocument i HTMLElement
Events in Browser
- Pojęcie programowania sterowanego zdarzeniami
- Programy obsługi zdarzeń i słuchacze
- Dołączanie programów obsługi zdarzeń za pomocą addEventListener ()
- Właściwości i metody klasy Event
- Wydarzenia kipią i przechwytują
- Zatrzymywanie propagacji
- Wydarzenia okienne
- Zdarzenia myszy i klawiatury, specjalne właściwości zdarzeń
- Formy wydarzeń
Praca z CSS i zarządzanie stylami
- Standard CSS, główne właściwości CSS
- Wspólne style i style poszczególnych elementów
- Kaskadowe style
- Selektory CSS
- Zmiana CSS za pomocą JavaScript
- Model CSS box: margines, dopełnienie, obramowanie
- Zarządzanie widocznością elementów: widoczność i wyświetlanie
- Pozycjonowanie elementów: bezwzględne, stałe, względne, górne i lewe
- Jednostki miary - px, pt itp.
- Przepełnienie elementu i zarządzanie przez właściwość przepełnienia
- Zarządzanie warstwami dokumentów: właściwość zIndex
- Animacja, ruchome elementy
- Praca z klasami, ustawianie className
- Praca z widocznością i przejściami
- Metoda querySelectorAll ()
Praca z modułami w JavaScript, NPM, Webpack
- Powody używania modułów
- Eksport z modułu
- Importuj z modułu
- Ponowny eksport
- Praca z NPM, pakiet.json
- Folder node_modules, ładowanie pakietów za pomocą NPM
- Globalna i lokalna instalacja pakietów
- Korzystanie z pakietu Webpack do składania pakietów
- Programy ładujące CSS i TypeScript
- Konfiguracja pliku webpack.config.js
- Tworzenie paczki, kompresja
- Wtyczki Webpack
- Korzystanie ze starszych systemów modułowych - CommonJS i AMD
- Korzystanie z CommonsChunkPlugin, wiele punktów wejścia
- Wymiana gorącego modułu (HMR)
Klasy i dziedziczenie w JavaScript
- Dziedziczenie prototypów, odniesienie __proto__
- Prototyp obiektu
- Korzystanie z instancji instanceof
- Klasa słów kluczowych, tworzenie klas
- Słowo kluczowe super
- Korzystanie z metody Object. assign ()
- Korzystanie z metody Object.defineProperty ()
- Getters i setters
- Operator rozrzutu do pracy z obiektami i tablicami
- Destrukturyzacja tablicy i obiektu
Programowanie funkcjonalne w JavaScript
- Działa jako zmienne
- Tablice argumentów
- Klasa Funkcja, metody call () i apply ()
- Metoda bind (), instalowanie tego i niektórych parametrów za pomocą bind
- Zamknięcia w JavaScript
- Hermetyzacja wartości za pomocą domknięć
- Tworzenie funkcji za pomocą konstruktora Function: konstruowanie ciągu
- Funkcje strzałkowe, przykłady ich wykorzystania
- Operacje funkcjonalne z tablicą: find, findIndex, filter
- Przykłady użycia mapy / filtru / redukcji do przetwarzania danych w tablicy
Niezmienność, testowanie, wzorzec MVC
- Pojęcie niezmienności, jego zalety
- Mutowalne i niezmienne metody zmiany obiektów i tablic
- Pojęcie i zalety Virtual DOM
- Testowanie niezmiennych funkcji przy użyciu Jest
- Memoizacja, jej zalety
- Typowe błędy i zalecenia dotyczące używania programowania funkcjonalnego
- Wzorzec MVC, tworzenie interfejsu użytkownika
- Przegląd głównych bibliotek do tworzenia interfejsów: Angular, React, Vue
Asynchroniczność w JavaScript. Obietnice
- Pojęcie i konieczność asynchroniczności
- Praca z setTimeout, setInterval, clearTimeout
- Funkcje oddzwaniania
- Utrata tego przy korzystaniu z funkcji zwrotnej. Rozwiązania (wykorzystujące bind, funkcje strzałek itp.)
- Pojęcie obietnicy, powrót obietnicy z funkcji asynchronicznej
- Method Promise.all (), jej zastosowanie
- Składnia async / await, opcje użycia, ograniczenia
- Obsługa wyjątków: odrzucenie obietnicy, obsługa wyjątków w przypadku wywołań asynchronicznych
Praca z serwerem. Protokół HTTP. Usługi REST
- Protokół HTTP
- Nagłówki i metody HTTP (GET, POST, PUT, DELETE itp.), Transfer danych
- Serwery HTTP (przegląd)
- Kody odpowiedzi serwera HTTP
- Korzystanie z formularzy do przesyłania danych
- Przesyłanie danych na serwer z AJAX
- Architektura REST: zalety i osobliwości
- Implementacja CRUD (tworzenie / odczytywanie / aktualizowanie / usuwanie) z REST
- Używanie funkcji fetch () do pobierania i wysyłania danych
- Dokumentowanie usług REST za pomocą Swagger
- Pojęcie HATEOAS, używanie go
Biblioteka AXIOS. Protokół WebSocket
- Porównanie wysokopoziomowej biblioteki Axios z wykorzystaniem niskopoziomowej metody fetch ()
- GET i POST żądania w Axios
- Używanie async / await z Axios
- Obsługa błędów w używaniu Axios
- Anulowanie żądania w Axios
- Protokół WebSocket
- Przykłady użycia WebSocket, porównanie z HTTP
Cele
- Rozwiń dobre zrozumienie możliwości JavaScript
- Zdobądź solidną podstawę do dalszego wykorzystania frameworków internetowych, takich jak React lub Angular
- Poznaj strukturę i składnię języka oraz jego model obiektowy
- Szczegółowy przegląd modelu DOM dla dokumentu HTML oraz CSS
- Zapoznaj się z technikami zarządzania DOM i CSS przy użyciu JavaScript
- Naucz się modeli obsługi zdarzeń i tworzenia formularzy oraz uzyskaj przegląd technologii JSON i Ajax, asynchroniczności i pracy z serwerem
Grupa docelowa
- Web developers
Wymagania
- Znajomość HTML i CSS. Pożądane jest doświadczenie w programowaniu w dowolnym języku podobnym do języka C (C, C ++, Java, C #).
