podręcznik frontendowca. the big nerd ranch guide cała książka.mobi

(35973 KB) Pobierz
Spis treści
Wprowadzenie ................................................................................... 13
Nauka tworzenia stron WWW ...........................................................................................................13
Wymagania ...........................................................................................................................................14
Układ książki .........................................................................................................................................14
Jak korzystać z tej książki ....................................................................................................................15
Wyzwania ..............................................................................................................................................15
Dla ambitnych .......................................................................................................................................16
Część I
1
Podstawy tworzenia stron WWW
Przygotowanie środowiska programistycznego .................................... 19
Instalacja przeglądarki Google Chrome ............................................................................................19
Instalacja i konfiguracja edytora Atom .............................................................................................19
Wtyczki edytora Atom .................................................................................................................21
Dokumentacja i źródła informacji .....................................................................................................24
Błyskawiczny kurs obsługi wiersza polecenia ..................................................................................26
Sprawdzanie bieżącego katalogu .................................................................................................27
Tworzenie katalogu .......................................................................................................................28
Zmiana katalogu ............................................................................................................................29
Wyświetlanie listy plików w katalogu ........................................................................................31
Uzyskiwanie uprawnień administratora ....................................................................................32
Wyjście z programu ......................................................................................................................33
Instalacja Node.js i browser-sync .......................................................................................................33
Dla ambitnych: zamienniki edytora Atom .......................................................................................35
Utworzenie pierwszego projektu ......................................................... 37
Utworzenie projektu Wydrowisko ....................................................................................................38
Pierwszy kod HTML .....................................................................................................................39
Dołączanie arkusza stylów ...........................................................................................................42
Wpisywanie treści strony .............................................................................................................43
Umieszczanie obrazów .................................................................................................................44
Wyświetlanie strony w przeglądarce .................................................................................................46
Narzędzia dla programistów w przeglądarce Chrome ....................................................................48
Dla ambitnych: wersje języka CSS .....................................................................................................50
Dla ambitnych: ikona favicon.ico ......................................................................................................51
Wyzwanie srebrne: utworzenie pliku favicon.ico ............................................................................52
2
Kup książkę
Poleć książkę
Podręcznik frontendowca. The Big Nerd Ranch Guide
3
Style .................................................................................................. 53
Zastosowanie stylów bazowych ..........................................................................................................54
Przygotowanie kodu HTML do zastosowania stylów ..................................................................56
Budowa stylu .........................................................................................................................................57
Twoja pierwsza reguła .........................................................................................................................58
Model pudełkowy ..........................................................................................................................60
Dziedziczenie stylów ............................................................................................................................62
Dopasowanie obrazów do wielkości okna ........................................................................................69
Kolory .....................................................................................................................................................71
Dopasowanie odstępów między elementami listy ...........................................................................74
Selektory relacyjne .........................................................................................................................75
Definiowanie czcionek .........................................................................................................................79
Wyzwanie brązowe: zmiana kolorów ................................................................................................81
Dla ambitnych: precyzja kolidujących selektorów ..........................................................................82
Responsywne strony WWW i model flexbox ......................................... 85
Rozbudowa interfejsu użytkownika ..................................................................................................86
Umieszczenie dużego obrazu ......................................................................................................87
Poziomy układ miniatur ...............................................................................................................89
Model flexbox .......................................................................................................................................91
Tworzenie elastycznego kontenera .............................................................................................92
Zmiana kierunku rozmieszczenia elementów ...........................................................................93
Grupowanie elementów w elastyczne jednostki .......................................................................95
Właściwość flex ..............................................................................................................................96
Kolejność, wyrównanie i rozmieszczenie elastycznych jednostek .........................................98
Wyśrodkowanie dużego obrazu ................................................................................................102
Położenie względne i bezwzględne elementu .................................................................................105
Układy adaptacyjne i zapytania medialne ...........................................111
Resetowanie obszaru roboczego .......................................................................................................113
Stosowanie zapytań medialnych ......................................................................................................115
Wyzwanie brązowe: pionowa orientacja ekranu ...........................................................................118
Dla ambitnych: model flexbox — popularne układy i błędy .......................................................118
Wyzwanie złote: układ Holy Grail ...................................................................................................119
Obsługa zdarzeń za pomocą JavaScriptu ............................................121
Przygotowanie znaczników <a> .......................................................................................................122
Twój pierwszy skrypt .........................................................................................................................126
Opis kodu JavaScript w projekcie Wydrowisko ............................................................................127
Deklarowanie zmiennych tekstowych .............................................................................................128
Praca z konsolą ...................................................................................................................................129
Odwołania do elementów modelu DOM .......................................................................................131
Utworzenie funkcji zmieńObraz ......................................................................................................135
Deklarowanie parametrów funkcji ...........................................................................................137
Funkcje zwracające wartości .............................................................................................................140
Tworzenie obserwatora zdarzeń ......................................................................................................142
Obsługa wszystkich miniatur ...........................................................................................................147
4
5
6
6
Kup książkę
Poleć książkę
Spis treści
Przetwarzanie tablicy miniatur ........................................................................................................149
Wyzwanie srebrne: przechwytywanie odnośników ..........................................................................151
Wyzwanie złote: losowe zdjęcia wydr .............................................................................................151
Dla ambitnych: tryb ścisły .................................................................................................................151
Dla ambitnych: domknięcia ..............................................................................................................152
Dla ambitnych: listy obiektów i kolekcje elementów HTML ......................................................152
Dla ambitnych: typy danych w JavaScripcie ...................................................................................153
7
Efekty wizualne i style CSS ................................................................155
Ukrywanie i pokazywanie dużego obrazu ......................................................................................156
Utworzenie stylów ukrywających duży obraz .........................................................................157
Utworzenie kodu JavaScript ukrywającego duży obraz .........................................................159
Obserwowanie zdarzeń związanych z naciśnięciami klawiszy .............................................161
Ponowne wyświetlenie dużego obrazu .....................................................................................163
Zmiany stanów elementów i efekty przejścia .................................................................................165
Właściwość transform ................................................................................................................166
Zdefiniowanie efektu przejścia ..................................................................................................168
Funkcje czasu ...............................................................................................................................171
Wywołanie efektu przejścia poprzez zmianę klasy ................................................................172
Wywołanie efektu przejścia za pomocą kodu JavaScript ......................................................173
Własne funkcje czasu .........................................................................................................................175
Dla ambitnych: zasady koercji typów ..............................................................................................177
Część II Moduły, obiekty i formularze
8
Moduły, obiekty i metody ..................................................................181
Moduły .................................................................................................................................................182
Szablon modułu ...........................................................................................................................183
Modyfikacja obiektu za pomocą wyrażenia IIFE ....................................................................185
Utworzenie projektu Kafejka ............................................................................................................186
Utworzenie modułu BazaDanych ....................................................................................................187
Dodawanie modułów do przestrzeni nazw ....................................................................................188
Konstruktory .......................................................................................................................................190
Właściwość prototype konstruktora .........................................................................................191
Tworzenie metod konstruktora ................................................................................................193
Utworzenie modułu Furgonetka ......................................................................................................195
Składanie zamówień ....................................................................................................................196
Usuwanie zamówień ...................................................................................................................198
Diagnostyka kodu ...............................................................................................................................200
Wyszukiwanie błędów za pomocą debugera ...........................................................................201
Przypisanie właściwości this wartości za pomocą metody bind ...........................................206
Inicjowanie aplikacji Kafejka po załadowaniu strony ...................................................................206
Utworzenie instancji obiektu typu Furgonetka ......................................................................208
Dla ambitnych: prywatne dane modułu .........................................................................................210
Wyzwanie srebrne: dane prywatne ..................................................................................................211
Dla ambitnych: przypisywanie wartości właściwości this
w funkcji zwrotnej w metodzie forEach ......................................................................................211
7
Kup książkę
Poleć książkę
Podręcznik frontendowca. The Big Nerd Ranch Guide
9
Wprowadzenie do platformy Bootstrap ..............................................213
Dołączenie platformy Bootstrap ......................................................................................................214
Jak działa platforma Bootstrap? ................................................................................................215
Utworzenie formularza zamówień ..................................................................................................216
Dodanie pól tekstowych .............................................................................................................217
Podejmowanie decyzji za pomocą pól wyboru .......................................................................221
Dodanie rozwijanej listy .............................................................................................................222
Dodanie suwaka ...........................................................................................................................224
Dodanie przycisków Wyślij i Resetuj .......................................................................................225
Przetwarzanie danych w formularzu za pomocą JavaScriptu ................227
Utworzenie modułu ObsługaFormularza .......................................................................................228
Wprowadzenie do biblioteki jQuery ........................................................................................229
Zaimportowanie biblioteki jQuery ...........................................................................................230
Konfigurowanie obiektu typu ObsługaFormularza za pomocą selektora ..........................230
Dodanie obsługi zdarzenia submit ..................................................................................................232
Wyodrębnienie danych ..............................................................................................................233
Przekazanie i wywołanie funkcji zwrotnej ...............................................................................235
Użycie obiektu typu ObsługaFormularza .......................................................................................237
Rejestracja metody złóżZamówienie do obsługi zdarzenia submit .....................................238
Udoskonalenia interfejsu użytkownika ...........................................................................................239
Wyzwanie brązowe: zestaw powiększony .......................................................................................241
Wyzwanie srebrne: wyświetlanie wartości ustawianej za pomocą suwaka ................................241
Wyzwanie złote: gratulacje ...............................................................................................................241
Od danych do modelu DOM ................................................................243
Utworzenie listy zamówień ...............................................................................................................244
Utworzenie modułu ListaZamówień ...............................................................................................245
Utworzenie konstruktora Wiersz .....................................................................................................246
Tworzenie elementów modelu DOM za pomocą biblioteki jQuery ....................................247
Tworzenie wierszy listy zamówień po wystąpieniu zdarzenia submit .......................................252
Modyfikowanie obiektu this za pomocą metody call .............................................................253
Realizacja zamówienia po kliknięciu pozycji na liście ..................................................................255
Utworzenie metody ListaZamówień.prototype.usuńWiersz ................................................255
Usuwanie nadpisanych wierszy .................................................................................................256
Utworzenie metody dodajObsługęKliknięcia .........................................................................257
Wywołanie metody dodajObsługęKliknięcia ..........................................................................259
Wyzwanie brązowe: umieszczenie mocy kawy w opisie zamówienia ........................................260
Wyzwanie srebrne: kolorowanie smaków kawy ............................................................................260
Wyzwanie złote: edycja zamówień ..................................................................................................260
Weryfikacja formularzy .....................................................................261
Atrybut required .................................................................................................................................261
Weryfikacja formularza za pomocą wyrażeń regularnych ...........................................................263
Interfejs Constraint Validation API ................................................................................................263
Obserwacja zdarzenia input .......................................................................................................265
Powiązanie metody weryfikującej dane ze zdarzeniem input ..............................................266
Uruchamianie mechanizmu weryfikacyjnego ........................................................................267
10
11
12
8
Kup książkę
Poleć książkę
Zgłoś jeśli naruszono regulamin