If you're seeing this message, it means we're having trouble loading external resources on our website.

Jeżeli jesteś za filtrem sieci web, prosimy, upewnij się, że domeny *.kastatic.org i *.kasandbox.org są odblokowane.

Główna zawartość

Temat: HTML/JS: Tworzenie interaktywnych stron internetowych

Przygotuj się do tworzenia interaktywnych stron internetowych

Czy jesteś gotowy do nauki? W tym dziale sprawdzimy czy pamiętasz HTML i JavaScript! Gotowy? Ruszamy!
Ucz się sam(a)!
Zapraszamy do tworzenia interaktywnych stron internetowych
(Otwiera system)
Przypomnienie HTML/CSS
(Otwiera system)
Przypomnienie JavaScript
(Otwiera system)
ĆWICZENIE
HTML/CSS - Przypomnienie
5 pytań
JavaScript - Przypomnienie
12 pytań

JavaScript i DOM

Naucz się jak używać języka JavaScript do kontroli drzewa "DOM" (Document Object Model) strony internetowej.
Ucz się sam(a)!
Wstawianie JS na stronę WWW
(Otwiera system)
Wyzwanie: tag zawierający skrypt
(Otwiera system)
Drzewo DOM (Document Object Model)
(Otwiera system)
Debugowanie stron internetowych z pomocą konsoli przeglądarki.
(Otwiera system)
ĆWICZENIE
Zrozumieć DOM
4 pytania

Metody dostępu do DOM

Naucz się korzystać z DOM API dla JavaScript, aby uzyskać dostęp do elementów stron internetowych.
Ucz się sam(a)!
Wyszukiwanie elementów po ID
(Otwiera system)
Wyzwanie: Zmieniacz ID
(Otwiera system)
Znajdowanie wielu elementów DOM po nazwie znacznika lub klasy.
(Otwiera system)
Wyzwanie: Niestandardowe znaczniki
(Otwiera system)
Znajdowanie elementów po selektorze CSS
(Otwiera system)
Wyzwanie: Modernizator cytatów
(Otwiera system)
Podsumowanie: Dostęp do elementów DOM
(Otwiera system)

Modyfikacja DOM

Naucz się modyfikować DOM API, aby zmieniać różne aspekty twojej strony internetowej takie jak style i atrybuty, a także tworzyć nowe elementy od postaw.
Ucz się sam(a)!
Zmiana atrybutów
(Otwiera system)
Wyzwanie: Atrybuty avatarów
(Otwiera system)
Zmiana stylów CSS
(Otwiera system)
Wyzwanie: Przewodnik stylu
(Otwiera system)
Zmiana klas CSS
(Otwiera system)
Wyzwanie: Klasyfikacja
(Otwiera system)
Ustawianie innerHTML i textContent
(Otwiera system)
Wyzwanie: Wzruszająca historia
(Otwiera system)
Tworzenie elementów od postaw
(Otwiera system)
Wyzwanie: Tworzenie układu słonecznego
(Otwiera system)
Podsumowanie: Techniki modyfikacji DOM
(Otwiera system)

Zdarzenia DOM

Naucz się korzystać z DOM API, aby stworzyć stronę internetową reagującą na zdarzenia użytkownika, takie jak klikanie, przewijanie czy wprowadzanie danych do formularza.
Ucz się sam(a)!
Tworzenie stron interaktywnych ze zdarzeniami
(Otwiera system)
Dodawanie detektora zdarzeń
(Otwiera system)
Wyzwanie: Klikacz Kota
(Otwiera system)
Typy zdarzeń DOM
(Otwiera system)
Korzystanie z właściwości zdarzenia
(Otwiera system)
Wyzwanie: Koto-wąsy
(Otwiera system)
Przetwarzanie formularzy za pomocą zdarzeń
(Otwiera system)
Wyzwanie: Szalona Historia
(Otwiera system)
Zapobieganie wykonania domyślnej akcji zdarzenia
(Otwiera system)
Podsumowanie: Zdarzenia DOM
(Otwiera system)

Animacje DOM

Naucz się animować swoje strony internetowe korzystając z trzech różnych technik - window.setInterval, window.requestAnimationFrame i animacji/przejść CSS
Ucz się sam(a)!
Obiekt: okno
(Otwiera system)
Animacja DOM za pomocą setInterval
(Otwiera system)
Wyzwanie: Stoper
(Otwiera system)
Animowanie stylów za pomocą requestAnimationFrame
(Otwiera system)
Wyzwanie: Wybieg
(Otwiera system)
Animowanie stylów za pomocą animacji CSS
(Otwiera system)
Której techniki animacji DOM powinieneś użyć?
(Otwiera system)

Korzystanie z bibliotek JS na twojej stronie internetowej

Naucz się dołączać biblioteki JS do twojej strony internetowej, aby móc korzystać z funkcjonalności stworzonych przez innych programistów.
Ucz się sam(a)!
Co to biblioteka JS?
(Otwiera system)
Wykorzystanie biblioteki JS: Biblioteka do pokazu slajdów
(Otwiera system)
Gdzie znajdę biblioteki JS?
(Otwiera system)
Świat bibliotek JS
(Otwiera system)
Której biblioteki JS powinieneś użyć?
(Otwiera system)
ĆWICZENIE
Korzystanie z bibliotek JS
5 pytań

Dalsza nauka

Teraz, kiedy nauczyłeś się manipulować stronami internetowymi za pomocą JavaScript, czego jeszcze możesz się nauczyć?
Ucz się sam(a)!
Czego uczyć się dalej
(Otwiera system)

O tym dziale

Gdy już skończyłeś Wstęp do JS i Wstęp do HTML/CSS, rozpocznij ten kurs, aby nauczyć się jak połączyć HTML/CSS z JavaScript DOM API i tworzyć interaktywne strony internetowe.