Szkolenie czysty JavaScript zamiast jQuery
Poziom
ŚredniozaawansowanyCzas
16h / 2 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie czysty JavaScript zamiast jQuery
Szkolenie dla osób, które pracują z jQuery lub utrzymują starsze interfejsy i chcą świadomie przejść na współczesny, czysty JavaScript. Program pokazuje, jak zastępować typowe zastosowania jQuery natywnymi API przeglądarki: selektorami DOM, obsługą klas i stylów, zdarzeniami, formularzami, komunikacją HTTP, asynchronicznością, kolekcjami, Web Components oraz narzędziami wspierającymi zgodność z przeglądarkami. Uczestnicy porządkują praktyki pracy z kodem, uczą się oceniać potrzebę polyfilli i transpilacji oraz budują projekt końcowy bez zależności od jQuery.
Dla kogo jest to szkolenie?
Osoby, które wciąż używają jQuery i chcą zastępować je natywnymi API przeglądarki-
Front-endowcy, którzy znają podstawy JavaScriptu i chcą uporządkować współczesne mechanizmy DOM, zdarzeń i asynchroniczności
-
Osoby utrzymujące starsze aplikacje, które chcą ograniczać zależność od jQuery bez przepisywania całego projektu od zera
Czego się nauczysz na szkoleniu?
- Zastąpisz typowe użycia jQuery natywnymi mechanizmami JavaScriptu i API przeglądarki
- Wykorzystasz classList, querySelector, forEach, dataset, URLSearchParams, fetch, Promise i operator spread w praktycznych scenariuszach
- Zastosujesz async/await, obsługę błędów oraz podstawowe animacje CSS bez zależności od jQuery
- Przygotujesz proste Web Components z użyciem customElements, szablonów HTML i Shadow DOM
- Zdebugujesz kod w narzędziach deweloperskich przeglądarki i zidentyfikujesz typowe problemy z DOM, zdarzeniami i asynchronicznością
- Uporządkujesz kod, ocenisz zgodność z przeglądarkami oraz dobierzesz polyfille, Babel lub TypeScript tam, gdzie są potrzebne
Program szkolenia
Dzień 1
Moduł 1: Dawniej-dzisiaj
- Przeglądarki i frameworki we współczesnym ekosystemie front-endowym
- Przykłady migracji z jQuery w firmach i typowe scenariusze modernizacji kodu
- Obecne możliwości natywnych API przeglądarki i ograniczenia zależności od jQuery
- CanIUse.com, tabele zgodności i ocena wsparcia funkcji w przeglądarkach
Moduł 2: Manipulowanie DOM
- Kopie elementów DOM i bezpieczna praca na strukturze dokumentu
- Struktury opakowujące elementy DOM i różnice względem kolekcji jQuery
- Zmiana położenia elementów w strukturze dokumentu
- Usuwanie elementów DOM i porządkowanie drzewa dokumentu
- Atrybuty HTML, pola obiektów DOM i różnice w modelu danych
Moduł 3: CSS – selektory i animacje
- Klasy, style inline i manipulacja wyglądem elementów bez jQuery
- Pozycje, wymiary i geometria elementów w natywnym API przeglądarki
- Selektory DOM – document.querySelector, querySelectorAll i praca na wynikach
- Animacje CSS – Animate.css, klasy animacji i kontrola efektów wizualnych
Moduł 4: Praca na kolekcji elementów
- Natywne kolekcje elementów DOM – NodeList, HTMLCollection i tablice
- Iteracja po elementach i odpowiedniki typowych operacji jQuery
- Konwersja kolekcji do tablicy i bezpieczna praca na wielu elementach
Moduł 5: Formularze, zdarzenia
- Wartości formularzy, FormData, URLSearchParams i przygotowanie danych do wysyłki
- Zdarzenia programowe, model propagacji zdarzeń i delegacja obsługi zdarzeń
- Jednorazowy callback, konfiguracja nasłuchiwaczy zdarzeń i opcje listenerów
- Kontekst funkcji, arrow function, this i typowe różnice względem jQuery
Moduł 6: AJAX, Deferred
- Callbacks, Deferred i starsze wzorce asynchroniczności w kodzie opartym o jQuery
- Nowe API przeglądarek – fetch, Promise i obsługa odpowiedzi serwera
- async/await, Thenable, obsługa błędów i czytelny przepływ asynchroniczny
Dzień 2
Moduł 7: Pozostałe
- Atrybuty data-* i dataset jako natywny mechanizm przechowywania metadanych elementów
Moduł 8: Cross-browser i stare przeglądarki bez jQuery
- Popularność przeglądarek, wymagania wsparcia i tabele zgodności funkcji
- Chromium, współczesne silniki przeglądarek i konsekwencje dla zgodności kodu
- Shim, polyfill, zakres wsparcia i ograniczenia kompatybilności bez jQuery
Moduł 9: Transpilacja
- Babel i transpilacja składni JavaScript do zgodnego kodu wynikowego
- Babel i polyfille dla API przeglądarki oraz różnice między składnią a funkcjami środowiska
- Alternatywa – TypeScript, kompilacja i uporządkowanie typów w projekcie
- TypeScript w Babelu, integracja narzędzi i ograniczenia procesu budowania
Moduł 10: Web components
- customElements i rejestr własnych elementów HTML w natywnym API przeglądarki
- Szablony HTML, struktura komponentu i separacja warstwy widoku
- Shadow DOM, izolacja struktury komponentu i enkapsulacja stylów
- Web componenty a frameworki, interoperacyjność i praktyczne ograniczenia podejścia
Moduł 11: Projekt końcowy
- Praktyczna modernizacja przykładowego fragmentu interfejsu
- Zamiana kodu jQuery na czysty JavaScript i natywne API przeglądarki
- Weryfikacja działania projektu w narzędziach deweloperskich przeglądarki
