HTML5 : komponenty / Sebastian Rosik. – Warszawa, 2016 Spis

HTML5 : komponenty / Sebastian Rosik. – Warszawa, 2016
Spis treści
Wstęp
9
Informacje techniczne
Serwer lokalny
Komentarze
Praca z kodem
Odniesienia do elementów
Wersje oprogramowania
Oficjalna witryna World Wide Web
13
13
13
14
14
14
15
Rozdział 1. Przydatne narzędzia
1.1. Google Chrome DevTools
Elementy (elements)
Ruch sieciowy (network)
Źródła (sources)
Zasoby (resources)
Konsola (console)
1.2. Platforma programistyczna Node.js
Instalacja
Node Package Manager (NPM)
1.3. Gulp.js - automatyzacja zadań
Instalacja i pierwsze zadanie
Operacje na plikach
Strumienie oraz pliki wirtualne
Maski
Pojedynczy symbol gwiazdki
Podwójny symbol gwiazdki
Znak zapytania
Zakres
Zadania asynchroniczne
Drzewo zadań
Wtyczki
1.4. Transkompilacja LESS do CSS
Instalacja
Możliwości
Zmienne
Zagnieżdżenia
Import
Operacje
17
19
20
21
22
24
25
26
26
27
29
30
32
33
34
35
36
36
37
38
40
43
44
44
45
45
47
48
50
Znak modyfikacji
Domieszki
Domieszki jako funkcje
Rozszerzenia
51
52
53
54
Rozdział 2. CSS3 i tworzenie komponentów
2.1. Animacje
Wiele animacji
Prefiksy
2.2. Przejścia
2.3. CSS3 Flexbox model
Flex container, flex item
2.4. Przykładowy layout
55
57
62
63
65
66
68
79
Rozdział 3. Wprowadzenie do ECMAScript 6
3.1. Rozkład struktury obiektów
3.2. Zasięg zmiennych
3.3. Funkcje strzałki
3.4. Operator spread
3.5. Babel.js - transkompilacja ES6 do ES5
93
96
97
99
101
102
Rozdział 4. Web Components
4.1. Wypełnienie
Webcomponents.js
Załączanie wypełnienia
Działanie wypełnienia
ShadowCSS
Czy używać Shadow DOM?
4.2. Custom Elements
Cykl życia elementu
Rozszerzanie możliwości istniejących elementów
4.3. Szablony
4.4. HTML Imports
Importowanie dokumentów HTML
Arkusze stylów i skrypty
Zdarzenie importowanego dokumentu
Kolejność wykonywania skryptów
4.5. Shadow DOM
Tworzenie Shadow DOM
Relacja rodzic-potomek
Selektory i CSS
Pseudoklasy :host oraz :host-context
Kombinator /deep/
Pseudoelement "shadow
Element content
105
108
109
111
112
113
114
115
117
118
120
124
124
126
131
132
135
138
140
141
142
146
149
151
Działanie atrybutu select
Wiele elementów content w pojedynczym Shadow Root
Element shadow
Ograniczenia content oraz shadow
4.6. Przykładowy komponent
Struktura i kod komponentu
Komponent x-submit
Komponent x-spinner
Nadawanie stylu elementom span krok po kroku
154
157
159
160
162
163
166
176
178
Rozdział 5. MediaPlayer - przykładowa aplikacja
5.1. Przygotowanie i automatyzacja środowiska pracy
5.2. Struktura aplikacji
5.3. Komponent X-Player
Struktura komponentu X-Player
Inicjowanie komponentu
Szablon komponentu
Styl komponentu
Reagowanie na utworzenie elementu
Obsługa zdarzeń
Volume
Fullscreen
Obsługa klawiatury
5.4. Komponent X-Slider
5.5. Komponent X-Icon
5.6. Podsumowanie
183
186
196
199
199
201
203
205
209
211
218
221
223
226
236
240
oprac. BPK