Podrecznik_frontendowca_The_Big_Nerd_Ranch_Guide_natero.pdf
(
2856 KB
)
Pobierz
Tytuł oryginału: Front-End Web Development: The Big Nerd Ranch Guide
Tłumaczenie: Andrzej Watrak
ISBN: 978-83-283-3203-4
Authorized translation from the English language edition, entitled: FRONT-END WEB DEVELOPMENT:
THE BIG NERD RANCH GUIDE, First Edition, ISBN 0134433947; by Chris Aquino; and by Todd
Gandee; published by Pearson Education, Inc, publishing as The Big Nerd Ranch Guides.
Copyright © 2016 Big Nerd Ranch, LLC
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from Pearson Education Inc.
Polish language edition published by HELION S.A. Copyright © 2017.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były
kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane
z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie
ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail:
helion@helion.pl
WWW:
http://helion.pl
(księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/natero
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
•
Kup książkę
•
Poleć książkę
•
Oceń książkę
•
Księgarnia internetowa
•
Lubię to! » Nasza społeczność
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ę
Plik z chomika:
P.Kuba-47
Inne pliki z tego folderu:
ASP_NET_Core_Angular_i_Bootstrap_Kompletny_przybornik_front_end_developera_aspnca.pdf
(3682 KB)
Bootstrap_Tworzenie_interfejsow_stron_WWW_Technologia_na_start_bootst.pdf
(3448 KB)
Bootstrap_4_dla_zaawansowanych_Jak_pisac_znakomite_aplikacje_internetowe_Wydanie_II_boo4z2.pdf
(2071 KB)
Bootstrap_Praktyczne_projekty_bootpp.pdf
(977 KB)
Podrecznik_frontendowca_The_Big_Nerd_Ranch_Guide_natero.pdf
(2856 KB)
Inne foldery tego chomika:
Administracja
Afryka
After Effects
Agile - Programowanie
AJAX
Zgłoś jeśli
naruszono regulamin