JavaScript - interaktywność stron (INF.03)
Ożyw stronę - DOM, zdarzenia i walidacja formularzy
Kurs JavaScript w zakresie INF.03: podstawy języka, manipulacja DOM, obsługa zdarzeń i walidacja formularzy po stronie klienta. Ćwiczenia ożywiają strony z kursów HTML i CSS.
Moduły kursu
M1 Wprowadzenie do JavaScript 4 lekcji
-
Czym jest JavaScript
Historia, rola w internecie, JavaScript vs HTML vs CSS. Jak działa w przeglądarce.
-
Dołączanie JS do HTML
Tag <script>, atrybut src, defer vs async, dobre praktyki umieszczania skryptów.
-
Składnia JS: instrukcje, komentarze
Średniki, wielkość liter, komentarze jednoliniowe i blokowe, white-space.
-
console.log i debugowanie
Konsola przeglądarki, console.log / warn / error, debugger, praca z DevTools.
M2 Zmienne, typy, operatory 4 lekcji
-
Zmienne: let, const, var
Deklarowanie zmiennych, różnice między let, const i var, hoisting, dobre praktyki.
-
Typy danych w JavaScript
string, number, boolean, null, undefined, bigint, symbol. Operator typeof.
-
Operatory i porównania (== vs ===)
Operatory arytmetyczne, logiczne, przypisania. Różnica == a ===. Falsy values.
-
Konwersje typów i template strings
parseInt, parseFloat, Number(), String(), Boolean(). Template literals - backtick i interpolacja.
M3 Instrukcje sterujące 4 lekcji
-
if, else, else if, operator trójargumentowy
Instrukcje warunkowe, zagnieżdżanie, operator ternary. Czytelny kod decyzyjny.
-
switch-case
Instrukcja switch, case, default, break. Kiedy używać switch zamiast if-else.
-
Pętle: for, while, do-while
Klasyczna pętla for, while z warunkiem, do-while. Liczniki, iteracja, ryzyko nieskończonej pętli.
-
for...of, for...in, break, continue
Iteracja po tablicach (for...of) i obiektach (for...in). Przerywanie pętli: break, continue.
M4 Funkcje 4 lekcji
-
Deklaracja funkcji, parametry, return
Tworzenie funkcji słowem kluczowym function, parametry z wartościami domyślnymi, instrukcja return.
-
Wyrażenia funkcyjne i arrow functions
Funkcje jako wartości, function expression, arrow function (=>), skrócona składnia.
-
Zasięg zmiennych i domknięcia
Zakres globalny i lokalny, blokowy (let/const), domknięcia (closure). Typowe pułapki.
-
Callbacki - wprowadzenie
Funkcja jako argument, setTimeout, setInterval. Callbacki w zdarzeniach i metodach tablic.
M5 Tablice i obiekty 4 lekcji
-
Tablice: tworzenie, indeksy, metody push/pop
Tworzenie tablic, dostęp po indeksie, length, push, pop, shift, unshift, splice.
-
forEach, map, filter, find, sort
Iteracja i transformacja tablic. forEach, map, filter, find, findIndex, sort, includes.
-
Obiekty: właściwości, metody, iteracja
Literał obiektu, dostęp przez . i [], dodawanie/usuwanie właściwości, metody, for...in.
-
JSON: stringify, parse
Format JSON, JSON.stringify(), JSON.parse(), praca z danymi z API i localStorage.
M6 DOM — pobieranie i zmiana elementów 6 lekcji
-
Czym jest DOM - drzewo dokumentu
Document Object Model: drzewo węzłów, przeglądarka buduje DOM z HTML, inspektowanie w DevTools.
-
querySelector, getElementById, querySelectorAll
Metody pobierania elementów: getElementById, querySelector, querySelectorAll, HTMLCollection vs NodeList.
-
textContent, innerHTML (i XSS)
Zmiana tekstu przez textContent. innerHTML i ryzyko XSS - kiedy używać ostrożnie.
-
setAttribute, getAttribute, value, src
Odczyt i zapis atrybutów. value dla pól formularzy, src dla obrazków, href dla linków.
-
classList (add/remove/toggle), style
classList.add, remove, toggle, contains. Styl inline przez element.style. Klasy vs inline CSS.
-
createElement, appendChild, remove
Dynamiczne tworzenie węzłów: createElement, textContent, appendChild, insertBefore, remove.
M7 Zdarzenia 4 lekcji
-
Model zdarzeń, addEventListener
Czym jest zdarzenie. addEventListener(typ, handler), removeEventListener. Bąbelkowanie zdarzeń.
-
click, dblclick, mouseover, mouseout
Zdarzenia myszy: click, dblclick, mouseenter, mouseleave, mouseover, mouseout. Praktyczne przykłady.
-
keydown, keyup; submit, change, input, focus, blur
Zdarzenia klawiatury i formularzy. keydown, keyup, change, input, focus, blur, submit.
-
event.target, preventDefault, stopPropagation
Obiekt event: target, currentTarget, type. Blokowanie domyślnej akcji, zatrzymanie bąbelkowania.
M8 Walidacja formularzy 5 lekcji
-
Po co walidacja po stronie klienta vs serwer
UX formularzy, różnica walidacji klienta i serwera, dlaczego obydwie są konieczne.
-
Odczyt wartości pól: value, checked, puste pola
Pobieranie wartości inputów, textarea, select. checkbox.checked. Sprawdzanie pól pustych.
-
Walidacja: liczby, email, długość, RegExp
isNaN, Number(), test() z wyrażeniami regularnymi. Walidacja e-mail, telefonu, długości hasła.
-
Wyświetlanie błędów przy polach, blokowanie submit
Wstawianie komunikatów błędów w DOM, style błędów, event.preventDefault() przy błędach.
-
Kompletna walidacja formularza
Złożony formularz z wieloma polami - pełny przepływ: walidacja, błędy, blokowanie i potwierdzenie.
M9 Powtórki egzaminacyjne 2 lekcji
-
Najczęstsze pułapki JS z arkuszy CKE
Typowe błędy egzaminacyjne: == vs ===, hoisting, undefined vs null, błędy składni, event order.
-
Mini-arkusze: ożyw stronę wg zadania
Symulacja zadania egzaminacyjnego INF.03: ożywienie gotowej strony HTML/CSS kodem JS.