Przejdź do treści

JavaScript na stronach WWW

JavaScript tam, gdzie żyje najczęściej: na stronie. Znajdowanie i zmiana elementów (DOM), zdarzenia, formularze i ich sprawdzanie, wygląd, tworzenie elementów, timery i daty, a na końcu lekcje praktyczne i projekt w stylu arkusza egzaminu INF.03. Każde zadanie sprawdza się samo: program klika i wpisuje jak użytkownik, a potem patrzy, co pokazała strona. Kontynuacja kursu "JavaScript od podstaw: konsola".

Dla kogo: Liceum i technikum: JavaScript na stronach (DOM, zdarzenia, formularze), zadania sprawdzane jak przez użytkownika, pod INF.03. Więcej o kursie

DOM: znajdowanie i zmiana elementów

Przeglądarka zamienia HTML w drzewo obiektów: DOM (Document Object Model). Każdy znacznik to obiekt, który skrypt może znaleźć (`getElementById`, `querySelector`, `querySelectorAll`) i zmienić: tekst, kod HTML, atrybuty. Zobaczysz kilka sposobów wybierania tych samych elementów, różnicę między `textContent` a `innerHTML`, atrybuty `data-`, pętle po wielu elementach i poruszanie się po drzewie: rodzic, dzieci, rodzeństwo.

Zdarzenia: kliknięcia, klawisze i mysz

Strona reaguje na użytkownika przez zdarzenia: kliknięcie, wpisanie znaku, naciśnięcie klawisza, najechanie myszą. Zobaczysz trzy sposoby podpięcia obsługi kliknięcia (atrybut, właściwość, `addEventListener`) i dlaczego ten ostatni jest najlepszy, obiekt zdarzenia (`e.target`, `e.key`), zdarzenia klawiatury i myszy, pole reagujące na każdy znak oraz delegowanie: jeden nasłuchiwacz dla wielu elementów dzięki bąbelkowaniu zdarzeń.

Formularze: odczyt pól i obliczenia

Formularz to wejście danych do programu na stronie. Zobaczysz, jak odczytać pole tekstowe, liczbowe, listę wyboru, pole wyboru i przyciski opcji, dlaczego wartość pola to zawsze tekst (`'2' + '3'` daje `'23'`), jak obsłużyć wysłanie formularza (`submit` i `preventDefault`) i jak zbudować kalkulatory w stylu zadań egzaminu INF.03: przycisk czyta pola, liczy i wypisuje wynik na stronie.

Walidacja formularzy: HTML i JavaScript

Dane z formularza trzeba sprawdzić, zanim program ich użyje. Zobaczysz walidację wbudowaną w HTML (`required`, `minlength`, `type="email"`, `min`, `max`, `pattern`), odczyt jej wyników w skrypcie (`checkValidity`, obiekt `validity`), własne komunikaty zamiast dymków przeglądarki, regułę zależną od dwóch pól (`setCustomValidity`) i refaktoryzację: od ciągu `if` do reguł w tablicy. Komunikaty przeglądarki różnią się między przeglądarkami i językami, dlatego zadania pokazują własne.

Wygląd strony: style i klasy

Skrypt może zmieniać wygląd strony na dwa sposoby: ustawiając pojedyncze style (`element.style.color`) albo przełączając klasy CSS (`classList`). Zobaczysz oba i refaktoryzację z pierwszego w drugi (wygląd zostaje w CSS, skrypt mówi tylko, w jakim stanie jest element), odczyt stylu z arkusza (`getComputedStyle`), zmienne CSS ustawiane suwakiem, pasek postępu i zakładki.

Tworzenie, wstawianie i usuwanie elementów

Strona nie musi mieć wszystkich elementów w HTML: skrypt może je tworzyć (`createElement`), wstawiać w wybrane miejsce (`append`, `prepend`, `before`, `after`), przenosić i usuwać (`remove`). Zobaczysz refaktoryzację od `innerHTML +=` (proste, ale niszczy wpisane dane i nasłuchiwacze) do `createElement` i własnej funkcji pomocniczej, szablon `<template>` z `cloneNode` oraz tabelę budowaną z tablicy obiektów i sortowaną kliknięciem w nagłówek.

Timery i daty

Strona może działać sama, bez klikania: `setTimeout` wykonuje kod raz po czasie, `setInterval` co określony czas, a `clearTimeout` i `clearInterval` je zatrzymują. Zobaczysz zegar na żywo, stoper poprawiany krok po kroku (licznik tyknięć gubi czas, `Date.now()` nie), obiekt `Date` (miesiące od zera, dzień tygodnia, dodawanie dni, różnica dat) i pułapkę stref czasowych przy polu `type="date"`. W zadaniach timery są krótkie, żeby sprawdzanie trwało chwilę.

Praktyka: tabliczka mnożenia i kalendarz na stronie

Lekcja praktyczna: dwa znane z konsoli programy przeniesione na stronę. Tabliczka mnożenia powstaje najpierw jako HTML w napisie, potem z elementów DOM z rozmiarem z pola, a na końcu podświetla wiersz i kolumnę pod kursorem. Kalendarz rozdziela model (tygodnie miesiąca jako tablica) od widoku (tabela), ma przełączanie miesięcy i notatki przy dniach. W zadaniach: tabliczka z nagłówkami, quiz, kalendarz z wyboru miesiąca, weekendy, dzisiejszy dzień i nawigacja.

Projekt w stylu arkusza INF.03

Zadania jak w części praktycznej egzaminu INF.03: formularz, obliczenie i wynik na stronie. Przykłady pokazują jedną aplikację w trzech krokach: najpierw wszystko w jednym nasłuchiwaczu, potem osobne funkcje do czytania, liczenia i wyświetlania, na końcu walidacja z komunikatem. Do tego galeria z miniaturami i ankieta z paskami. W zadaniach: kalkulator paliwa, rezerwacja, galeria, konwerter, licznik kalorii, ankieta i zamówienie pizzy.

Kółko i krzyżyk krok po kroku

Gra w kółko i krzyżyk budowana małymi krokami; w każdym przykładzie zaznaczone są linie, które się zmieniły. Plansza z przycisków, potem z pętli, ruchy na zmianę, zajęte pola, stan gry w tablicy zamiast w przyciskach, wygrana (osiem linii), remis, podświetlenie zwycięskiej linii, nowa gra i wynik meczu. Na koniec model w klasie Game oddzielony od widoku i przeciwnik komputerowy: najpierw prostymi regułami, potem algorytmem minimax, z którym nie da się wygrać.