HTML5. Przewodnik encyklopedyczny 9788324671816, 9788324650811, 8324650814, 8324671811

Table of contents :
Spis treści
O autorze
O korektorach merytorycznych
Podziękowania
Część I. Na dobry początek
Rozdział 1. Czym jest HTML5
Historia HTML
Wprowadzenie JavaScript
Koniec wojen przeglądarek
Dominacja wtyczek
Pojawienie się semantycznego HTML
Trend: standard HTML nie nadąża za sposobami użycia HTML
HTML5
Nowy standard, nowe standardy
Natywna obsługa multimediów
Zasoby programistyczne
Sieć semantyczna
Bieżący stan HTML5
Obsługa HTML5 w przeglądarkach
Wykorzystanie HTML5 na stronach
Struktura tej książki
Więcej informacji o HTML5
Podsumowanie
Rozdział 2. Przygotuj się
Wybór przeglądarki
Wybór edytora HTML
Wybór serwera internetowego
Pobranie Node.js
Pobranie modułu multipart
Pobranie przykładowych kodów
Podsumowanie
Rozdział 3. Wprowadzenie do HTML
Korzystanie z elementów
Dodatkowe elementy występujące w tym rozdziale
Puste elementy
Samozamykające znaczniki
Elementy void
Atrybuty elementów
Nadawanie elementom wielu atrybutów
Atrybuty boolowskie
Atrybuty autorskie
Tworzenie dokumentu HTML
Nadrzędna struktura
Metadane
Treść
Rodzice, dzieci, potomkowie i bracia
Typy elementów
Encje HTML
Globalne atrybuty HTML5
Atrybut accesskey
Atrybut class
Atrybut contenteditable
Atrybut contextmenu
Atrybut dir
Atrybut draggable
Atrybut dropzone
Atrybut hidden
Atrybut id
Atrybut lang
Atrybut spellcheck
Atrybut style
Atrybut tabindex
Atrybut title
Przydatne narzędzia HTML
Podsumowanie
Rozdział 4. Wprowadzenie do CSS
Definiowanie i nadawanie stylów
Właściwości CSS występujące w tym rozdziale
Zastosowanie stylu inline
Tworzenie osadzonego stylu
Zastosowanie zewnętrznego arkusza stylu
Kaskadowość i dziedziczenie stylów
Style przeglądarek
Style użytkowników
Kaskadowość stylów
Zmiana kolejności ważnymi stylami
Precyzja i ocena kolejności w przypadkach spornych
Dziedziczenie
Praca z kolorami w CSS
Szczegółowe wskazywanie kolorów
Długości w CSS
Długości bezwzględne
Długości względne
Inne jednostki w CSS
Miary kątów w CSS
Miary czasu w CSS
Sprawdzanie obsługi funkcji CSS
Przydatne narzędzia CSS
Przeglądarkowe raporty o stylach
Tworzenie selektorów przy użyciu SelectorGadget
Ulepszanie CSS z użyciem LESS
Framework CSS
Podsumowanie
Rozdział 5. Wprowadzenie do JavaScript
Przygotowanie do pracy z JavaScript
Deklaracje
Definiowanie i używanie funkcji
Definiowanie funkcji parametrami
Definiowanie funkcji, które zwracają wyniki
Zmienne i typy
Typy proste
Tworzenie obiektów
Praca z obiektami
Operatory JavaScript
Operatory równości i identyczności
Konwersja typów
Praca z tablicami
Literał tablicowy
Odczytywanie i modyfikowanie zawartości tablicy
Wyliczanie zawartości tablicy
Metody obsługi tablic
Obsługa błędów
Porównywanie wartości undefined i null
Sprawdzanie, czy zmienna lub właściwość ma wartość null lub undefined
Rozróżnianie między null i undefined
Przydatne narzędzia JavaScript
Debugery JavaScript
Biblioteki JavaScript
Podsumowanie
Część II. Elementy HTML
Rozdział 6. Elementy HTML — kontekst
Semantyka a prezentacja
Jak dobierać elementy
Im mniej, tym lepiej
Nie nadużywaj elementów
Wyrażaj się konkretnie i spójnie
Nie lekceważ odbiorcy
Struktura opisów elementów
Spis elementów
Elementy dokumentu i metadanych
Elementy tekstowe
Grupowanie treści
Dzielenie treści na sekcje
Tworzenie tabel
Tworzenie formularzy
Osadzanie zasobów
Niewdrożone elementy
Podsumowanie
Rozdział 7. Tworzenie dokumentów HTML
Ustanowienie podstawowej struktury dokumentu
Element doctype
Element html
Element head
Element body
Opatrzenie dokumentu elementami metadanych
Określenie tytułu dokumentu
Ustawienie podstawy dla względnych adresów URL
Opisanie dokumentu metadanymi
Definiowanie stylów CSS
Wskazywanie zewnętrznych zasobów
Pobieranie zasobów z wyprzedzeniem
Wykorzystanie elementów skryptowych
Element script
Element noscript
Podsumowanie
Rozdział 8. Elementy tekstowe
Tworzenie odnośników
Tworzenie odnośników zewnętrznych
Tworzenie względnych odnośników
Tworzenie odnośników wewnętrznych
Określanie kontekstu przeglądania
Oznaczanie treści podstawowymi elementami tekstowymi
Wskazywanie słów kluczowych i nazw produktów
Wyróżnianie
Wskazywanie wyrazów obcych i terminów technicznych
Wskazywanie nieścisłości i poprawek
Wskazywanie ważnego tekstu
Podkreślanie tekstu
Pomniejszony tekst
Indeksy górne i dolne
Łamanie wiersza
Wymuszanie łamania wiersza
Wskazanie odpowiedniego miejsca na łamanie wiersza
Przedstawianie danych wejściowych i wyjściowych
Odwołania, cytaty, definicje i skróty
Skróty
Definicje
Cytowanie treści z innego źródła
Odwołania do innych źródeł
Elementy obsługi językowej
Elementy ruby, rt i rp
Element bdo
Element bdi
Pozostałe elementy tekstowe
Wskazywanie zwyczajnego ciągu tekstu
Podświetlanie tekstu
Wskazywanie dodanych lub usuniętych treści
Wskazywanie godzin i dat
Podsumowanie
Rozdział 9. Grupowanie treści
Konieczność grupowania treści
Tworzenie akapitów
Element div
Preformatowana treść
Cytowanie innych źródeł
Przejścia tematyczne
Grupowanie treści w listach
Element ol
Element ul
Element li
Listy definicji
Listy o specyficznej numeracji
Ilustracje
Podsumowanie
Rozdział 10. Tworzenie sekcji
Podstawowe nagłówki
Ukrywanie podtytułów
Tworzenie sekcji
Nagłówki i stopki
Blok nawigacyjny
Artykuły
Paski boczne
Dane kontaktowe
Sekcja szczegółów
Podsumowanie
Rozdział 11. Elementy tabel
Podstawowa tabela
Komórki nagłówków
Nadanie tabeli struktury
Wskazywanie nagłówków i części głównej tabeli
Stopka
Nieregularne tabele
Łączenie nagłówków z komórkami
Podpis tabeli
Praca z kolumnami
Wskazywanie pojedynczych kolumn
Nadawanie obramowania elementowi table
Podsumowanie
Rozdział 12. Formularze
Podstawowy formularz
Definiowanie formularza
Oglądanie danych z formularza
Konfiguracja formularza
Konfiguracja atrybutu action formularza
Konfiguracja metody HTTP
Konfiguracja kodowania danych
Określanie uzupełniania formularza
Określenie docelowego miejsca wyświetlenia odpowiedzi formularza
Nazwa formularza
Nadawanie formularzom etykiet
Automatyczne uaktywnianie elementów input
Dezaktywacja poszczególnych elementów input
Grupowanie elementów formularza
Nadanie elementowi fieldset etykiety
Dezaktywowanie grup elementów input przy użyciu elementu fieldset
Element button
Zastosowanie elementu button do wysyłania formularzy
Zastosowanie elementu button do czyszczenia formularzy
Zastosowanie elementu button jako elementu generycznego
Praca z elementami spoza formularza
Podsumowanie
Rozdział 13. Konfiguracja elementu input
Zastosowanie elementu input do podawania danych tekstowych
Określanie rozmiaru elementu
Podawanie wartości i treści zastępczych
Lista danych
Tworzenie pól tekstowych nieaktywnych i tylko do odczytu
Określenie kierunku tekstu
Zastosowanie elementu input do pobierania haseł
Zastosowanie elementu input do tworzenia przycisków
Zastosowanie elementu input do ograniczenia rodzaju danych wejściowych
Zastosowanie elementu input do pobrania wartości numerycznej
Zastosowanie elementu input do uzyskania liczby z podanego zakresu
Zastosowanie elementu input do uzyskania wartości boolowskiej
Zastosowanie elementu input do tworzenia określonych list opcji
Zastosowanie elementu input do pobierania sformatowanych ciągów
Zastosowanie elementu input do pozyskiwania godzin i dat
Zastosowanie elementu input do pobierania danych o kolorze
Zastosowanie elementu input do pobierania haseł wyszukiwania
Zastosowanie elementu input do tworzenia ukrytych obiektów danych
Zastosowanie elementu input do tworzenia map i przycisków graficznych
Zastosowanie elementu input do wczytywania plików
Podsumowanie
Rozdział 14. Inne elementy formularzy i weryfikacja danych wejściowych
Inne elementy formularzy
Tworzenie list opcji
Pobieranie wielowierszowego tekstu
Wskazanie wyniku obliczenia
Generowanie par kluczy — publicznego i prywatnego
Weryfikacja danych wejściowych
Sprawdzenie, czy użytkownik podał wartość
Sprawdzenie, czy wartość mieści się w podanym zakresie
Sprawdzenie, czy wartość jest zgodna z wyrażeniem regularnym
Sprawdzenie, czy wartość jest adresem e-mailowym lub URL
Dezaktywacja weryfikacji danych
Podsumowanie
Rozdzial 15. Osadzanie zasobów
Osadzanie obrazów
Osadzanie odnośników graficznych
Tworzenie mapy obrazu działającej po stronie klienta
Osadzanie innych dokumentów HTML
Osadzanie zasobów przy użyciu wtyczek
Zastosowanie elementu embed
Zastosowanie elementów object i param
Inne zastosowania elementu object
Zastosowanie elementu object do osadzania obrazów
Zastosowanie elementu object do tworzenia map obrazu działających po stronie klienta
Zastosowanie elementu object jako kontekstu przeglądania
Osadzanie wyobrażeń wartości liczbowych
Paski postępu
Przedstawienie wartości z zakresu
Osadzanie innych elementów
Osadzanie zasobów audiowizualnych
Osadzanie grafiki
Podsumowanie
Część III. Kaskadowe arkusze stylów
Rozdział 16. Wprowadzenie do CSS
Standaryzacja CSS
Model polowy
Spis selektorów
Spis właściwości
Właściwości obramowania i tła
Właściwości modelu polowego
Właściwości layoutu
Właściwości tekstu
Właściwości przejść, animacji i przekształceń
Inne właściwości
Podsumowanie
Rozdział 17. Selektory CSS — część I
Podstawowe selektory CSS
Wybranie wszystkich elementów
Wybieranie elementów według typu
Wybieranie elementów według klasy
Wybieranie elementów według id
Wybieranie elementów według atrybutów
Łączenie selektorów
Tworzenie zestawień selektorów
Wybieranie potomków
Wybieranie dzieci
Wybieranie braci
Selektory pseudoelementów
Selektor ::first-line
Selektor ::first-letter
Selektory :before i :after
Licznik CSS
Podsumowanie
Rozdział 18. Selektory CSS — część II
Strukturalne selektory pseudoklas
Selektor :root
Selektor dzieci
Selektory n-tego dziecka
Selektory pseudoklas interfejsu użytkownika
Wybieranie aktywnych bądź nieaktywnych elementów
Wybieranie zaznaczonych elementów
Wybieranie elementów domyślnych
Wybieranie elementów input o poprawnych i niepoprawnych wartościach
Wybieranie elementów input na podstawie zakresów
Wybór elementów input według obecności atrybutu required
Dynamiczne selektory pseudoklas
Selektory :link i :visited
Selektor :hover
Selektor :active
Selektor :focus
Inne pseudoselektory
Selektor negacji
Selektor :empty
Selektor :lang
Selektor :target
Podsumowanie
Rozdział 19. Obramowania i tła
Nadanie obramowania
Szerokość obramowania
Styl obramowania
Nałożenie obramowania na jedną krawędź
Właściwości zbiorcze obramowania
Obramowania z zaokrąglonymi rogami
Obrazy w obramowaniu
Tła elementów
Kolor i obraz tła
Rozmiar obrazu tła
Położenie obrazu tła
Zaczepienie obrazu tła
Pozycja początkowa tła i styl przycinania
Właściwość zbiorcza background
Cienie
Obrysy
Podsumowanie
Rozdział 20. Model polowy
Dopełnienia
Marginesy
Rozmiar elementu
Pole wymiarów
Określanie minimalnych i maksymalnych wielkości
Przepełnienie
Widoczność elementu
Typy pola elementu
Elementy blokowe
Elementy liniowe
Elementy liniowo-blokowe
Elementy run-in
Ukrywanie elementów
Pływające pola
Zapobieganie stykaniu się elementów
Podsumowanie
Rozdział 21. Tworzenie layoutów
Pozycjonowanie
Rodzaje pozycjonowania
Kolejność elementów
Layouty wielokolumnowe
Layouty flexboksowe
Prosty flexbox
Użycie wielu elastycznych elementów
Przestrzeń pionowa
Maksymalne wielkości
Layouty tabelowe
Podsumowanie
Rozdział 21. Stylizacja tekstu
Podstawowe style tekstu
Wyrównywanie i justowanie tekstu
Białe znaki
Kierunek tekstu
Odstępy między wyrazami, literami i wierszami
Dzielenie wyrazów
Wcięcie pierwszego wiersza
Dekorowanie i przekształcanie tekstu
Nadawanie tekstowi cienia
Fonty
Wybór fonta
Rozmiar fonta
Styl i grubość fonta
Fonty internetowe
Podsumowanie
Rozdział 23. Przejścia, animacje i przekształcenia
Przejścia
Odwrócone przejścia
Wybór sposobu obliczania wartości pośrednich
Animacje
Klatki kluczowe
Określenie kierunku powtórzeń
Stan końcowy
Animowanie elementów layoutu
Wielokrotne wykorzystanie klatek kluczowych
Nadawanie wielu animacji wielu elementom
Wstrzymywanie i wznawianie animacji
Przekształcenia
Nadanie przekształcenia
Określenie punktu wyjścia
Utworzenie animacji lub przejścia z przekształceniem
Podsumowanie
Rozdział 24. Inne właściwości i funkcje CSS
Określenie koloru i krycia elementu
Określenie koloru pierwszego planu
Określenie krycia elementu
Obstylowanie tabel
Kondensowanie obramowania tabel
Konfiguracja oddzielonych krawędzi
Obsługa pustych komórek
Położenie podpisu
Określenie układu tabeli
Stylizacja list
Określenie typu znaczników listy
Użycie obrazu jako znacznika listy
Określenie położenia znacznika
Określenie stylu kursora
Podsumowanie
Część IV. Praca z DOM
Rozdział 25. Wprowadzenie do DOM
Obiektowy model dokumentu
Poziomy DOM i zgodność
Testowanie obsługi funkcji DOM
Spis funkcji DOM
Właściwości Document
Właściwości Window
Właściwości HTMLElement
Właściwości CSS w DOM
Zdarzenia DOM
Podsumowanie
Rozdział 26. Obiekt Document
Metadane dokumentu
Pobieranie informacji z dokumentu
Obiekt Location
Odczytywanie i zapisywanie ciasteczek
Stan żądania
Pozyskiwanie szczegółów o implementacji DOM
Znajdowanie obiektów elementów HTML
Zastosowanie właściwości do pozyskiwania obiektów elementów
Pozyskanie nazwanego elementu przy użyciu notacji tablicowej
Przeszukiwanie elementów
Przeszukiwanie łańcuchowe
Nawigacja w drzewie DOM
Podsumowanie
Rozdział 27. Obiekt Window
Pozyskanie obiektu Window
Pozyskiwanie informacji o oknie
Interakcja z oknem
Wyświetlanie zapytań
Pozyskiwanie ogólnych informacji
Praca z historią przeglądarki
Poruszanie się po historii przeglądania
Wprowadzenie nowej pozycji do historii
Dodanie nowej pozycji z adresem innego dokumentu
Zapisywanie kompleksowych stanów w historii
Zastąpienie pozycji w historii przeglądarki
Przekazywanie komunikatów między dokumentami
Liczniki
Podsumowanie
Rozdział 28. Praca z elementami DOM
Praca z obiektami elementów
Praca z klasami
Praca z atrybutami elementu
Praca z tekstem
Modyfikacja modelu
Tworzenie i usuwanie elementów
Powielanie elementów
Przenoszenie elementów
Porównywanie obiektów elementów
Praca z fragmentami HTML
Wstawienie elementu do bloku tekstu
Podsumowanie
Rozdział 29. Stylizacja elementów DOM
Praca z arkuszami stylów
Pobieranie podstawowych informacji o arkuszach stylów
Praca z ograniczeniami medium
Dezaktywowanie arkuszy stylów
Praca z wybranymi stylami
Praca ze stylami elementów
Praca z obiektami CSSStyleDeclaration
Praca z właściwościami pomocniczymi
Praca ze standardowymi właściwościami
Zastosowanie szczegółowych obiektów CSS w DOM
Praca z obliczonymi stylami
Podsumowanie
Rozdział 30. Zdarzenia
Wykorzystanie prostych procedur obsługi zdarzeń
Wprowadzenie prostej procedury obsługi zdarzeń inline
Wprowadzenie prostej procedury obsługi zdarzeń
Zastosowanie DOM i obiektu Event
Odróżnianie zdarzeń według typu
Przepływ zdarzeń
Praca ze zdarzeniami, które można anulować
Praca ze zdarzeniami HTML
Zdarzenia obiektów Document i Window
Praca ze zdarzeniami myszy
Praca ze zdarzeniami fokusowania
Praca ze zdarzeniami klawiatury
Praca ze zdarzeniami formularza
Podsumowanie
Rozdział 31. Obiekty poszczególnych elementów
Obiekty dokumentu i metadanych
Element base
Element body
Element link
Element meta
Element script
Element style
Element title
Inne elementy dokumentu i metadanych
Elementy tekstowe
Element a
Elementy del i ins
Element q
Element time
Inne elementy tekstowe
Elementy grupujące
Element blockquote
Element li
Element ol
Inne elementy grupujące
Elementy sekcji
Element details
Inne elementy sekcji
Elementy tabeli
Elementy col i colgroup
Element table
Elementy thead, tbody i tfoot
Element th
Element tr
Inne elementy tabeli
Elementy formularza
Element button
Element datalist
Element fieldset
Element form
Element input
Element label
Element legend
Element optgroup
Element option
Element output
Element select
Element textarea
Elementy content
Element area
Element embed
Element iframe
Elementy img
Element map
Element meter
Element object
Element param
Element progress
Podsumowanie
Część V. Zaawansowane funkcje
Rozdział 32. Wprowadzenie do Ajaksa. Część I
Początki z Ajaksem
Obsługa odpowiedzi
Problem z Operą
Zdarzenia Ajaksa
Obsługa błędów
Obsługa błędów wejściowych
Obsługa błędów żądań
Obsługa błędów aplikacji
Pobieranie i definiowanie nagłówków
Zmiana metody HTTP żądania
Wyłączenie buforowania treści
Odczytywanie nagłówków odpowiedzi
Wydawanie żądań Ajaksa między różnymi źródłami
Nagłówek żądania źródła
Zaawansowane funkcje CORS
Przerywanie żądań
Podsumowanie
Rozdział 33. Wprowadzenie do Ajaksa. Część II
Przygotowanie się do wysłania danych serwerowi
Utworzenie serwera
Problem
Wysyłanie danych formularza
Wysyłanie danych formularza obiektem FormData
Utworzenie obiektu FormData
Modyfikacja obiektu FormData
Wysyłanie danych JSON
Wysyłanie plików
Śledzenie postępów wczytywania
Żądanie i przetwarzanie różnych typów treści
Pobieranie fragmentów HTML
Pobieranie danych XML
Pobieranie danych JSON
Podsumowanie
Rozdział 34. Multimedia
Element video
Wczytywanie filmu z wyprzedzeniem
Wyświetlanie obrazu zastępczego
Rozmiar filmu
Źródło i format filmu
Element track
Element audio
Praca z osadzonymi mediami za pośrednictwem DOM
Pobieranie informacji o mediach
Określenie możliwości odtworzenia multimediów
Kontrolowanie sposobu odtwarzania
Podsumowanie
Rozdział 35. Element canvas. Część I
Początki z elementem canvas
Uzyskanie kontekstu płótna
Rysowanie prostokątów
Ustawienie stanu rysowania
Styl rysowania styku linii
Styl wypełnienia kształtu i rysowania linii
Gradienty
Gradient promieniowy
Wzory
Zapisywanie i przywracanie stanu rysowania
Rysowanie obrazów
Obrazy filmowe
Obrazy z elementu canvas
Podsumowanie
Rozdział 36. Element canvas. Część II
Rysowanie z użyciem ścieżek
Rysowanie ścieżek liniami
Rysowanie prostokątów
Rysowanie łuków
Wykorzystanie metody arcTo
Wykorzystanie metody arc
Rysowanie krzywych Béziera
Rysowanie sześciennych krzywych Béziera
Rysowanie kwadratowych krzywych Béziera
Utworzenie obszaru przycinania
Rysowanie tekstu
Wykorzystanie efektów i przekształceń
Cienie
Przezroczystość
Kompozycja
Przekształcenia
Podsumowanie
Rozdział 37. Funkcja przeciągania i upuszczania
Tworzenie elementów źródłowych
Obsługa zdarzeń przeciągania
Utworzenie obszaru docelowego
Przyjmowanie upuszczonych treści
Praca z obiektem DataTransfer
Filtrowanie przeciąganych elementów według treści
Przeciąganie i upuszczanie plików
Podsumowanie
Rozdział 38. Geolokalizacja
Wykorzystanie geolokalizacji
Pobranie informacji o bieżącej lokalizacji
Obsługa błędów funkcji geolokalizacji
Definiowanie opcji geolokalizacji
Śledzenie lokalizacji
Podsumowanie
Rozdział 39. Magazynowanie danych
Magazyn lokalny
Nasłuchiwanie zdarzeń magazynowania
Magazyn sesji
Podsumowanie
Rozdział 40. Aplikacje internetowe działające offline
Problem
Utworzenie manifestu
Określanie sekcji manifestu
Sekcja FALLBACK
Sekcja NETWORK
Sprawdzenie stanu przeglądarki
Praca z buforem offline
Aktualizowanie
Pobranie aktualizacji
Zastosowanie aktualizacji
Podsumowanie
Skorowidz

Citation preview

---

Tytuł oryginału: The Definitive Guide to HTML5 Tłumaczenie: Maksymilian Gutowski ISBN: 978-83-246-7181-6 Original edition copyright © 2011 by Adam Freeman. All rights reserved. Polish edition copyright © 2012 by Helion S.A. All rights reserved. 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 the Publisher. 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: [email protected] 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/htm5pe_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Poleć książkę na Facebook.com

• Księgarnia internetowa

• Kup w wersji papierowej

• Lubię to! » Nasza społeczność

• Oceń książkę

Mojej ukochanej żonie, Jacqui Griffyth — Adam Freeman

Spis treści

O autorze ................................................................................................................................. 23 O korektorach merytorycznych . .............................................................................................. 24 Podziękowania ........................................................................................................................ 25 Część I

Na dobry początek . ........................................................................................... 27

Rozdział 1

Czym jest HTML5 . ............................................................................................. 29 Historia HTML . .............................................................................................................................29 Wprowadzenie JavaScript . ...........................................................................................................30 Koniec wojen przeglądarek . .........................................................................................................30 Dominacja wtyczek . .......................................................................................................................30 Pojawienie się semantycznego HTML . .......................................................................................31 Trend: standard HTML nie nadąża za sposobami użycia HTML ...........................................31 HTML5 . ...........................................................................................................................................31 Nowy standard, nowe standardy . ................................................................................................32 Natywna obsługa multimediów . ..................................................................................................32 Zasoby programistyczne . ..............................................................................................................32 Sieć semantyczna . ..........................................................................................................................33 Bieżący stan HTML5 . ....................................................................................................................33 Obsługa HTML5 w przeglądarkach . ...........................................................................................33 Wykorzystanie HTML5 na stronach . .........................................................................................33 Struktura tej książki . ......................................................................................................................33 Więcej informacji o HTML5 . .......................................................................................................34 Podsumowanie . ..............................................................................................................................34

Rozdział 2

Przygotuj się . .................................................................................................... 35 Wybór przeglądarki . ......................................................................................................................35 Wybór edytora HTML . .................................................................................................................36 Wybór serwera internetowego . ....................................................................................................36

„ SPIS TREŚCI

Pobranie Node.js . ...........................................................................................................................36 Pobranie modułu multipart . .................................................................................................36 Pobranie przykładowych kodów . ................................................................................................37 Podsumowanie . ..............................................................................................................................37

Rozdział 3

Wprowadzenie do HTML . ................................................................................. 39 Korzystanie z elementów . .............................................................................................................40 Dodatkowe elementy występujące w tym rozdziale . ................................................................41 Puste elementy . ..............................................................................................................................42 Samozamykające znaczniki . .........................................................................................................42 Elementy void . ................................................................................................................................43 Atrybuty elementów . .....................................................................................................................44 Nadawanie elementom wielu atrybutów . ...................................................................................44 Atrybuty boolowskie . ....................................................................................................................44 Atrybuty autorskie . ........................................................................................................................45 Tworzenie dokumentu HTML . ...................................................................................................45 Nadrzędna struktura . ....................................................................................................................46 Metadane . ........................................................................................................................................46 Treść .................................................................................................................................................47 Rodzice, dzieci, potomkowie i bracia . .........................................................................................47 Typy elementów . ............................................................................................................................48 Encje HTML . ..................................................................................................................................48 Globalne atrybuty HTML5 . ..........................................................................................................49 Atrybut accesskey . .........................................................................................................................49 Atrybut class ...................................................................................................................................50 Atrybut contenteditable . ...............................................................................................................52 Atrybut contextmenu . ...................................................................................................................53 Atrybut dir ......................................................................................................................................53 Atrybut draggable . .........................................................................................................................53 Atrybut dropzone . .........................................................................................................................53 Atrybut hidden . ..............................................................................................................................53 Atrybut id . .......................................................................................................................................55 Atrybut lang ....................................................................................................................................55 Atrybut spellcheck . ........................................................................................................................56 Atrybut style . ..................................................................................................................................57 Atrybut tabindex . ...........................................................................................................................57 Atrybut title . ...................................................................................................................................58 Przydatne narzędzia HTML . ........................................................................................................59 Podsumowanie . ..............................................................................................................................59

Rozdział 4

Wprowadzenie do CSS . ..................................................................................... 61 Definiowanie i nadawanie stylów . ...............................................................................................61 Właściwości CSS występujące w tym rozdziale . .................................................................62 Zastosowanie stylu inline . ......................................................................................................62 Tworzenie osadzonego stylu . ................................................................................................63 Zastosowanie zewnętrznego arkusza stylu . .........................................................................65

6

„ SPIS TREŚCI

Kaskadowość i dziedziczenie stylów . ..........................................................................................67 Style przeglądarek . .........................................................................................................................67 Style użytkowników . ......................................................................................................................68 Kaskadowość stylów . .....................................................................................................................69 Zmiana kolejności ważnymi stylami . ..........................................................................................69 Precyzja i ocena kolejności w przypadkach spornych . .............................................................70 Dziedziczenie . .................................................................................................................................73 Praca z kolorami w CSS . ...............................................................................................................74 Szczegółowe wskazywanie kolorów . ....................................................................................75 Długości w CSS . .............................................................................................................................75 Długości bezwzględne . ..................................................................................................................76 Długości względne . ........................................................................................................................77 Inne jednostki w CSS . ....................................................................................................................82 Miary kątów w CSS . .......................................................................................................................82 Miary czasu w CSS . ........................................................................................................................82 Sprawdzanie obsługi funkcji CSS . ...............................................................................................83 Przydatne narzędzia CSS . .............................................................................................................83 Przeglądarkowe raporty o stylach . ..............................................................................................83 Tworzenie selektorów przy użyciu SelectorGadget . .................................................................83 Ulepszanie CSS z użyciem LESS . .................................................................................................84 Framework CSS . .............................................................................................................................84 Podsumowanie . ..............................................................................................................................85

Rozdział 5

Wprowadzenie do JavaScript . .......................................................................... 87 Przygotowanie do pracy z JavaScript . .........................................................................................88 Deklaracje . ......................................................................................................................................89 Definiowanie i używanie funkcji . ................................................................................................90 Definiowanie funkcji parametrami . ............................................................................................90 Definiowanie funkcji, które zwracają wyniki . ...........................................................................91 Zmienne i typy . ..............................................................................................................................92 Typy proste . ....................................................................................................................................92 Tworzenie obiektów . .....................................................................................................................93 Praca z obiektami . ..........................................................................................................................95 Operatory JavaScript . ....................................................................................................................99 Operatory równości i identyczności . ..........................................................................................99 Konwersja typów . ........................................................................................................................102 Praca z tablicami . .........................................................................................................................104 Literał tablicowy ...........................................................................................................................105 Odczytywanie i modyfikowanie zawartości tablicy . ...............................................................105 Wyliczanie zawartości tablicy . ...................................................................................................106 Metody obsługi tablic . .................................................................................................................106 Obsługa błędów . ...........................................................................................................................106 Porównywanie wartości undefined i null . ................................................................................108 Sprawdzanie, czy zmienna lub właściwość ma wartość null lub undefined .................110 Rozróżnianie między null i undefined . ..............................................................................111

7

„ SPIS TREŚCI

Przydatne narzędzia JavaScript . .................................................................................................111 Debugery JavaScript . ...................................................................................................................111 Biblioteki JavaScript . ...................................................................................................................112 Podsumowanie .............................................................................................................................112

Część II Rozdział 6

Elementy HTML . .............................................................................................. 113 Elementy HTML — kontekst . .......................................................................... 115 Semantyka a prezentacja . ............................................................................................................115 Jak dobierać elementy . ................................................................................................................116 Im mniej, tym lepiej . ...................................................................................................................116 Nie nadużywaj elementów . .........................................................................................................116 Wyrażaj się konkretnie i spójnie . ..............................................................................................116 Nie lekceważ odbiorcy . ...............................................................................................................117 Struktura opisów elementów . ....................................................................................................117 Spis elementów .............................................................................................................................118 Elementy dokumentu i metadanych . ........................................................................................118 Elementy tekstowe .......................................................................................................................118 Grupowanie treści ........................................................................................................................120 Dzielenie treści na sekcje . ...........................................................................................................120 Tworzenie tabel ............................................................................................................................121 Tworzenie formularzy . ................................................................................................................121 Osadzanie zasobów ......................................................................................................................122 Niewdrożone elementy . ..............................................................................................................123 Podsumowanie .............................................................................................................................123

Rozdział 7

Tworzenie dokumentów HTML . ...................................................................... 125 Ustanowienie podstawowej struktury dokumentu . ................................................................126 Element doctype . ..........................................................................................................................126 Element html ................................................................................................................................127 Element head ................................................................................................................................127 Element body ................................................................................................................................128 Opatrzenie dokumentu elementami metadanych . .................................................................129 Określenie tytułu dokumentu . ...................................................................................................129 Ustawienie podstawy dla względnych adresów URL . ............................................................130 Opisanie dokumentu metadanymi . ..........................................................................................131 Definiowanie stylów CSS . ...........................................................................................................134 Wskazywanie zewnętrznych zasobów . .....................................................................................139 Pobieranie zasobów z wyprzedzeniem . ....................................................................................142 Wykorzystanie elementów skryptowych . .................................................................................142 Element script ...............................................................................................................................142 Element noscript ..........................................................................................................................148 Podsumowanie .............................................................................................................................150

Rozdział 8

Elementy tekstowe . ........................................................................................ 151 Tworzenie odnośników . ..............................................................................................................152 Tworzenie odnośników zewnętrznych . .............................................................................153 Tworzenie względnych odnośników . .................................................................................154

8

„ SPIS TREŚCI

Tworzenie odnośników wewnętrznych . ...................................................................................155 Określanie kontekstu przeglądania . ..........................................................................................155 Oznaczanie treści podstawowymi elementami tekstowymi . .................................................156 Wskazywanie słów kluczowych i nazw produktów . ...............................................................156 Wyróżnianie .................................................................................................................................157 Wskazywanie wyrazów obcych i terminów technicznych . ....................................................158 Wskazywanie nieścisłości i poprawek . .....................................................................................159 Wskazywanie ważnego tekstu . ...................................................................................................160 Podkreślanie tekstu ......................................................................................................................161 Pomniejszony tekst . .....................................................................................................................162 Indeksy górne i dolne . .................................................................................................................163 Łamanie wiersza . ..........................................................................................................................164 Wymuszanie łamania wiersza . ...................................................................................................164 Wskazanie odpowiedniego miejsca na łamanie wiersza . .......................................................165 Przedstawianie danych wejściowych i wyjściowych . ..............................................................167 Odwołania, cytaty, definicje i skróty . ........................................................................................167 Skróty .............................................................................................................................................168 Definicje ........................................................................................................................................169 Cytowanie treści z innego źródła . ..............................................................................................169 Odwołania do innych źródeł . .....................................................................................................171 Elementy obsługi językowej . ......................................................................................................171 Elementy ruby, rt i rp . .................................................................................................................172 Element bdo ..................................................................................................................................173 Element bdi ...................................................................................................................................174 Pozostałe elementy tekstowe . .....................................................................................................176 Wskazywanie zwyczajnego ciągu tekstu . ..................................................................................176 Podświetlanie tekstu . ...................................................................................................................177 Wskazywanie dodanych lub usuniętych treści . .......................................................................178 Wskazywanie godzin i dat . .........................................................................................................180 Podsumowanie . ............................................................................................................................181

Rozdział 9

Grupowanie treści . ......................................................................................... 183 Konieczność grupowania treści . ................................................................................................184 Tworzenie akapitów . ...................................................................................................................185 Element div ...................................................................................................................................186 Preformatowana treść . ................................................................................................................188 Cytowanie innych źródeł . ...........................................................................................................189 Przejścia tematyczne . ...................................................................................................................191 Grupowanie treści w listach . ......................................................................................................193 Element ol .....................................................................................................................................193 Element ul .....................................................................................................................................195 Element li ......................................................................................................................................196 Listy definicji ................................................................................................................................197 Listy o specyficznej numeracji . ..................................................................................................199 Ilustracje ........................................................................................................................................200 Podsumowanie .............................................................................................................................202

9

„ SPIS TREŚCI

Rozdział 10 Tworzenie sekcji . ............................................................................................ 203 Podstawowe nagłówki . ................................................................................................................204 Ukrywanie podtytułów . ..............................................................................................................205 Tworzenie sekcji ...........................................................................................................................209 Nagłówki i stopki .........................................................................................................................211 Blok nawigacyjny .........................................................................................................................215 Artykuły ........................................................................................................................................218 Paski boczne .................................................................................................................................220 Dane kontaktowe . ........................................................................................................................223 Sekcja szczegółów ........................................................................................................................224 Podsumowanie .............................................................................................................................227

Rozdział 11 Elementy tabel . .............................................................................................. 229 Podstawowa tabela . ......................................................................................................................229 Komórki nagłówków . ..................................................................................................................232 Nadanie tabeli struktury . ............................................................................................................234 Wskazywanie nagłówków i części głównej tabeli . ...................................................................235 Stopka ............................................................................................................................................236 Nieregularne tabele . .....................................................................................................................238 Łączenie nagłówków z komórkami . ..........................................................................................242 Podpis tabeli .................................................................................................................................243 Praca z kolumnami . .....................................................................................................................245 Wskazywanie pojedynczych kolumn . ................................................................................247 Nadawanie obramowania elementowi table . ...........................................................................249 Podsumowanie .............................................................................................................................251

Rozdział 12

Formularze . ..................................................................................................... 253 Podstawowy formularz . ..............................................................................................................254 Definiowanie formularza ............................................................................................................255 Oglądanie danych z formularza . ................................................................................................256 Konfiguracja formularza . ............................................................................................................258 Konfiguracja atrybutu action formularza . ...............................................................................258 Konfiguracja metody HTTP . ......................................................................................................259 Konfiguracja kodowania danych . ..............................................................................................259 Określanie uzupełniania formularza . .......................................................................................261 Określenie docelowego miejsca wyświetlenia odpowiedzi formularza ................................262 Nazwa formularza . .......................................................................................................................263 Nadawanie formularzom etykiet . ..............................................................................................264 Automatyczne uaktywnianie elementów input . .....................................................................265 Dezaktywacja poszczególnych elementów input . ...................................................................266 Grupowanie elementów formularza . ........................................................................................267 Nadanie elementowi fieldset etykiety . ......................................................................................268 Dezaktywowanie grup elementów input przy użyciu elementu fieldset . ............................269 Element button .............................................................................................................................270 Zastosowanie elementu button do wysyłania formularzy . .............................................271 Zastosowanie elementu button do czyszczenia formularzy . ..........................................272 Zastosowanie elementu button jako elementu generycznego . .......................................273

10

„ SPIS TREŚCI

Praca z elementami spoza formularza . .....................................................................................274 Podsumowanie . ............................................................................................................................275

Rozdział 13 Konfiguracja elementu input . ......................................................................... 277 Zastosowanie elementu input do podawania danych tekstowych . ......................................278 Określanie rozmiaru elementu . .................................................................................................278 Podawanie wartości i treści zastępczych . .................................................................................280 Lista danych ..................................................................................................................................281 Tworzenie pól tekstowych nieaktywnych i tylko do odczytu . ...............................................284 Określenie kierunku tekstu . .......................................................................................................285 Zastosowanie elementu input do pobierania haseł . ................................................................285 Zastosowanie elementu input do tworzenia przycisków . ......................................................287 Zastosowanie elementu input do ograniczenia rodzaju danych wejściowych ....................289 Zastosowanie elementu input do pobrania wartości numerycznej . .....................................290 Zastosowanie elementu input do uzyskania liczby z podanego zakresu . ............................291 Zastosowanie elementu input do uzyskania wartości boolowskiej . .....................................292 Zastosowanie elementu input do tworzenia określonych list opcji . ....................................295 Zastosowanie elementu input do pobierania sformatowanych ciągów . ..............................296 Zastosowanie elementu input do pozyskiwania godzin i dat . ...............................................298 Zastosowanie elementu input do pobierania danych o kolorze . ..........................................300 Zastosowanie elementu input do pobierania haseł wyszukiwania . ......................................302 Zastosowanie elementu input do tworzenia ukrytych obiektów danych . ...........................303 Zastosowanie elementu input do tworzenia map i przycisków graficznych ........................305 Zastosowanie elementu input do wczytywania plików . .........................................................307 Podsumowanie .............................................................................................................................308

Rozdział 14 Inne elementy formularzy i weryfikacja danych wejściowych ........................ 309 Inne elementy formularzy . .........................................................................................................309 Tworzenie list opcji .....................................................................................................................309 Pobieranie wielowierszowego tekstu . .......................................................................................313 Wskazanie wyniku obliczenia . ...................................................................................................316 Generowanie par kluczy — publicznego i prywatnego . .........................................................316 Weryfikacja danych wejściowych . .............................................................................................317 Sprawdzenie, czy użytkownik podał wartość . .........................................................................318 Sprawdzenie, czy wartość mieści się w podanym zakresie . ...................................................319 Sprawdzenie, czy wartość jest zgodna z wyrażeniem regularnym . .......................................321 Sprawdzenie, czy wartość jest adresem e-mailowym lub URL . ............................................322 Dezaktywacja weryfikacji danych . .............................................................................................322 Podsumowanie .............................................................................................................................323

Rozdział 15

Osadzanie zasobów . ....................................................................................... 325 Osadzanie obrazów . .....................................................................................................................326 Osadzanie odnośników graficznych . ........................................................................................327 Tworzenie mapy obrazu działającej po stronie klienta . .........................................................329 Osadzanie innych dokumentów HTML . .................................................................................331

11

„ SPIS TREŚCI

Osadzanie zasobów przy użyciu wtyczek . ................................................................................333 Zastosowanie elementu embed . .................................................................................................334 Zastosowanie elementów object i param . ................................................................................334 Inne zastosowania elementu object . ..........................................................................................337 Zastosowanie elementu object do osadzania obrazów . ...................................................337 Zastosowanie elementu object do tworzenia map obrazu działających po stronie klienta . .......................................................................................338 Zastosowanie elementu object jako kontekstu przeglądania . ........................................338 Osadzanie wyobrażeń wartości liczbowych . ............................................................................339 Paski postępu ................................................................................................................................339 Przedstawienie wartości z zakresu . ...........................................................................................340 Osadzanie innych elementów . ...................................................................................................342 Osadzanie zasobów audiowizualnych . ......................................................................................342 Osadzanie grafiki . ........................................................................................................................342 Podsumowanie . ............................................................................................................................342

Część III Rozdział 16

Kaskadowe arkusze stylów . ............................................................................ 343 Wprowadzenie do CSS . ................................................................................... 345 Standaryzacja CSS ........................................................................................................................345 Model polowy ...............................................................................................................................346 Spis selektorów .............................................................................................................................346 Spis właściwości . ..........................................................................................................................349 Właściwości obramowania i tła . ................................................................................................349 Właściwości modelu polowego . .................................................................................................350 Właściwości layoutu . ...................................................................................................................351 Właściwości tekstu . ......................................................................................................................352 Właściwości przejść, animacji i przekształceń . ........................................................................353 Inne właściwości ..........................................................................................................................353 Podsumowanie . ............................................................................................................................354

Rozdział 17 Selektory CSS — część I . ................................................................................. 355 Podstawowe selektory CSS . ........................................................................................................356 Wybranie wszystkich elementów . .............................................................................................356 Wybieranie elementów według typu . .......................................................................................357 Wybieranie elementów według klasy . ......................................................................................358 Wybieranie elementów według id . ............................................................................................359 Wybieranie elementów według atrybutów . .............................................................................360 Łączenie selektorów . ....................................................................................................................363 Tworzenie zestawień selektorów . ..............................................................................................364 Wybieranie potomków . ..............................................................................................................365 Wybieranie dzieci ........................................................................................................................366 Wybieranie braci ..........................................................................................................................368 Selektory pseudoelementów . ......................................................................................................369 Selektor ::first-line . ................................................................................................................370 Selektor ::first-letter . .............................................................................................................370

12

„ SPIS TREŚCI

Selektory :before i :after . .............................................................................................................372 Licznik CSS ...................................................................................................................................373 Podsumowanie .............................................................................................................................374

Rozdział 18 Selektory CSS — część II . ................................................................................ 375 Strukturalne selektory pseudoklas . ...........................................................................................376 Selektor :root ................................................................................................................................376 Selektor dzieci ...............................................................................................................................377 Selektory n-tego dziecka . ............................................................................................................381 Selektory pseudoklas interfejsu użytkownika . .........................................................................382 Wybieranie aktywnych bądź nieaktywnych elementów . .......................................................382 Wybieranie zaznaczonych elementów . .....................................................................................383 Wybieranie elementów domyślnych . ........................................................................................384 Wybieranie elementów input o poprawnych i niepoprawnych wartościach ......................385 Wybieranie elementów input na podstawie zakresów . ..........................................................386 Wybór elementów input według obecności atrybutu required . ...........................................387 Dynamiczne selektory pseudoklas . ...........................................................................................388 Selektory :link i :visited . ..............................................................................................................388 Selektor :hover ..............................................................................................................................389 Selektor :active ..............................................................................................................................390 Selektor :focus ...............................................................................................................................391 Inne pseudoselektory . .................................................................................................................392 Selektor negacji ............................................................................................................................392 Selektor :empty .............................................................................................................................393 Selektor :lang ................................................................................................................................394 Selektor :target ..............................................................................................................................394 Podsumowanie .............................................................................................................................395

Rozdział 19

Obramowania i tła . ......................................................................................... 397 Nadanie obramowania . ...............................................................................................................398 Szerokość obramowania . ............................................................................................................399 Styl obramowania ........................................................................................................................399 Nałożenie obramowania na jedną krawędź . ............................................................................399 Właściwości zbiorcze obramowania . ........................................................................................401 Obramowania z zaokrąglonymi rogami . ..................................................................................402 Obrazy w obramowaniu . ............................................................................................................404 Tła elementów . .............................................................................................................................409 Kolor i obraz tła ...........................................................................................................................409 Rozmiar obrazu tła . .....................................................................................................................410 Położenie obrazu tła . ...................................................................................................................411 Zaczepienie obrazu tła ................................................................................................................412 Pozycja początkowa tła i styl przycinania . ...............................................................................413 Właściwość zbiorcza background . ............................................................................................415 Cienie .............................................................................................................................................416 Obrysy ...........................................................................................................................................418 Podsumowanie .............................................................................................................................421

13

„ SPIS TREŚCI

Rozdział 20 Model polowy . ............................................................................................... 423 Dopełnienia ..................................................................................................................................424 Marginesy ......................................................................................................................................426 Rozmiar elementu . .......................................................................................................................427 Pole wymiarów .............................................................................................................................429 Określanie minimalnych i maksymalnych wielkości . ............................................................430 Przepełnienie ................................................................................................................................431 Widoczność elementu . ................................................................................................................434 Typy pola elementu . ....................................................................................................................435 Elementy blokowe ........................................................................................................................435 Elementy liniowe .........................................................................................................................437 Elementy liniowo-blokowe . ........................................................................................................439 Elementy run-in ...........................................................................................................................439 Ukrywanie elementów . ...............................................................................................................442 Pływające pola . .............................................................................................................................442 Zapobieganie stykaniu się elementów . ..............................................................................445 Podsumowanie . ............................................................................................................................448

Rozdział 21 Tworzenie layoutów . ...................................................................................... 449 Pozycjonowanie ...........................................................................................................................450 Rodzaje pozycjonowania . ...........................................................................................................450 Kolejność elementów . .................................................................................................................452 Layouty wielokolumnowe . .........................................................................................................454 Layouty flexboksowe ...................................................................................................................456 Prosty flexbox ...............................................................................................................................459 Użycie wielu elastycznych elementów . .....................................................................................460 Przestrzeń pionowa .....................................................................................................................461 Maksymalne wielkości ................................................................................................................463 Layouty tabelowe . ........................................................................................................................465 Podsumowanie .............................................................................................................................467

Rozdział 22 Stylizacja tekstu . ............................................................................................. 469 Podstawowe style tekstu . ............................................................................................................470 Wyrównywanie i justowanie tekstu . .........................................................................................470 Białe znaki .....................................................................................................................................472 Kierunek tekstu ............................................................................................................................474 Odstępy między wyrazami, literami i wierszami . ...................................................................475 Dzielenie wyrazów . ......................................................................................................................476 Wcięcie pierwszego wiersza . ......................................................................................................478 Dekorowanie i przekształcanie tekstu . .....................................................................................479 Nadawanie tekstowi cienia . ........................................................................................................480 Fonty ..............................................................................................................................................482 Wybór fonta ..................................................................................................................................482 Rozmiar fonta ...............................................................................................................................484 Styl i grubość fonta ......................................................................................................................485 Fonty internetowe . .......................................................................................................................486 Podsumowanie .............................................................................................................................487

14

„ SPIS TREŚCI

Rozdział 23 Przejścia, animacje i przekształcenia . ............................................................. 489 Przejścia .........................................................................................................................................490 Odwrócone przejścia ...................................................................................................................493 Wybór sposobu obliczania wartości pośrednich . ....................................................................494 Animacje .......................................................................................................................................496 Klatki kluczowe ............................................................................................................................498 Określenie kierunku powtórzeń . ...............................................................................................501 Stan końcowy ...............................................................................................................................502 Animowanie elementów layoutu . ..............................................................................................503 Wielokrotne wykorzystanie klatek kluczowych . .....................................................................504 Nadawanie wielu animacji wielu elementom . .........................................................................505 Wstrzymywanie i wznawianie animacji . ..................................................................................507 Przekształcenia .............................................................................................................................508 Nadanie przekształcenia . ............................................................................................................509 Określenie punktu wyjścia . ........................................................................................................510 Utworzenie animacji lub przejścia z przekształceniem . .........................................................511 Podsumowanie .............................................................................................................................512

Rozdział 24 Inne właściwości i funkcje CSS . ...................................................................... 513 Określenie koloru i krycia elementu . ........................................................................................513 Określenie koloru pierwszego planu . ........................................................................................514 Określenie krycia elementu . .......................................................................................................514 Obstylowanie tabel ......................................................................................................................516 Kondensowanie obramowania tabel . ........................................................................................516 Konfiguracja oddzielonych krawędzi . ......................................................................................518 Obsługa pustych komórek . .........................................................................................................519 Położenie podpisu . .......................................................................................................................520 Określenie układu tabeli . ............................................................................................................521 Stylizacja list ..................................................................................................................................523 Określenie typu znaczników listy . .............................................................................................523 Użycie obrazu jako znacznika listy . ...........................................................................................524 Określenie położenia znacznika . ...............................................................................................525 Określenie stylu kursora . ............................................................................................................527 Podsumowanie . ............................................................................................................................528

Część IV Rozdział 25

Praca z DOM . .................................................................................................. 529 Wprowadzenie do DOM . ................................................................................ 531 Obiektowy model dokumentu . ..................................................................................................531 Poziomy DOM i zgodność . ........................................................................................................533 Testowanie obsługi funkcji DOM . .....................................................................................533 Spis funkcji DOM . .......................................................................................................................534 Właściwości Document . ......................................................................................................534 Właściwości Window . ..........................................................................................................537 Właściwości HTMLElement . ..............................................................................................539

15

„ SPIS TREŚCI

Właściwości CSS w DOM . ..........................................................................................................541 Zdarzenia DOM ...........................................................................................................................544 Podsumowanie . ............................................................................................................................545

Rozdział 26 Obiekt Document . ........................................................................................... 547 Metadane dokumentu . ................................................................................................................549 Pobieranie informacji z dokumentu . ........................................................................................549 Obiekt Location ............................................................................................................................552 Odczytywanie i zapisywanie ciasteczek . ...................................................................................555 Stan żądania ..................................................................................................................................556 Pozyskiwanie szczegółów o implementacji DOM . .................................................................557 Znajdowanie obiektów elementów HTML . .............................................................................558 Zastosowanie właściwości do pozyskiwania obiektów elementów . .....................................559 Pozyskanie nazwanego elementu przy użyciu notacji tablicowej . ........................................560 Przeszukiwanie elementów . .......................................................................................................561 Przeszukiwanie łańcuchowe . ......................................................................................................564 Nawigacja w drzewie DOM . .......................................................................................................565 Podsumowanie .............................................................................................................................567

Rozdział 27 Obiekt Window . .............................................................................................. 569 Pozyskanie obiektu Window . .....................................................................................................570 Pozyskiwanie informacji o oknie . ..............................................................................................570 Interakcja z oknem ......................................................................................................................572 Wyświetlanie zapytań . .................................................................................................................573 Pozyskiwanie ogólnych informacji . ..........................................................................................575 Praca z historią przeglądarki . .....................................................................................................575 Poruszanie się po historii przeglądania . ...................................................................................576 Wprowadzenie nowej pozycji do historii . ................................................................................577 Dodanie nowej pozycji z adresem innego dokumentu . .........................................................579 Zapisywanie kompleksowych stanów w historii . ....................................................................581 Zastąpienie pozycji w historii przeglądarki . ............................................................................583 Przekazywanie komunikatów między dokumentami . ...........................................................584 Liczniki ..........................................................................................................................................588 Podsumowanie .............................................................................................................................589

Rozdział 28

Praca z elementami DOM . .............................................................................. 591 Praca z obiektami elementów . ...................................................................................................592 Praca z klasami .............................................................................................................................593 Praca z atrybutami elementu . ....................................................................................................596 Praca z tekstem . ............................................................................................................................600 Modyfikacja modelu . ...................................................................................................................602 Tworzenie i usuwanie elementów . .....................................................................................603 Powielanie elementów . .........................................................................................................604 Przenoszenie elementów . .....................................................................................................605 Porównywanie obiektów elementów . ................................................................................606

16

„ SPIS TREŚCI

Praca z fragmentami HTML . .....................................................................................................608 Wstawienie elementu do bloku tekstu . .....................................................................................612 Podsumowanie . ............................................................................................................................613

Rozdział 29

Stylizacja elementów DOM . ............................................................................ 615 Praca z arkuszami stylów . ...........................................................................................................616 Pobieranie podstawowych informacji o arkuszach stylów . ...................................................616 Praca z ograniczeniami medium . ..............................................................................................617 Dezaktywowanie arkuszy stylów . ..............................................................................................620 Praca z wybranymi stylami . ........................................................................................................621 Praca ze stylami elementów . ......................................................................................................623 Praca z obiektami CSSStyleDeclaration . ..................................................................................624 Praca z właściwościami pomocniczymi . ...................................................................................625 Praca ze standardowymi właściwościami . ................................................................................628 Zastosowanie szczegółowych obiektów CSS w DOM . ...........................................................632 Praca z obliczonymi stylami . ......................................................................................................634 Podsumowanie .............................................................................................................................637

Rozdział 30 Zdarzenia . ....................................................................................................... 639 Wykorzystanie prostych procedur obsługi zdarzeń . ..............................................................640 Wprowadzenie prostej procedury obsługi zdarzeń inline . ....................................................640 Wprowadzenie prostej procedury obsługi zdarzeń . ...............................................................642 Zastosowanie DOM i obiektu Event . ........................................................................................643 Odróżnianie zdarzeń według typu . ...........................................................................................645 Przepływ zdarzeń .........................................................................................................................647 Praca ze zdarzeniami, które można anulować . ........................................................................653 Praca ze zdarzeniami HTML . ....................................................................................................654 Zdarzenia obiektów Document i Window . ..............................................................................654 Praca ze zdarzeniami myszy . ......................................................................................................654 Praca ze zdarzeniami fokusowania . ..........................................................................................657 Praca ze zdarzeniami klawiatury . ..............................................................................................658 Praca ze zdarzeniami formularza . .............................................................................................660 Podsumowanie .............................................................................................................................661

Rozdział 31

Obiekty poszczególnych elementów . .............................................................. 663 Obiekty dokumentu i metadanych . ...........................................................................................663 Element base .................................................................................................................................663 Element body ................................................................................................................................663 Element link ..................................................................................................................................664 Element meta ................................................................................................................................664 Element script ...............................................................................................................................664 Element style .................................................................................................................................665 Element title ..................................................................................................................................665 Inne elementy dokumentu i metadanych . ...............................................................................665 Elementy tekstowe . ......................................................................................................................665 Element a ................................................................................................................................665 Elementy del i ins . .................................................................................................................666 17

„ SPIS TREŚCI

Element q ......................................................................................................................................666 Element time ................................................................................................................................666 Inne elementy tekstowe . .............................................................................................................667 Elementy grupujące . ....................................................................................................................667 Element blockquote . ....................................................................................................................667 Element li ......................................................................................................................................667 Element ol .....................................................................................................................................667 Inne elementy grupujące . ...........................................................................................................668 Elementy sekcji . ............................................................................................................................668 Element details .............................................................................................................................668 Inne elementy sekcji ....................................................................................................................668 Elementy tabeli .............................................................................................................................668 Elementy col i colgroup . .............................................................................................................668 Element table ................................................................................................................................669 Elementy thead, tbody i tfoot . ....................................................................................................669 Element th .....................................................................................................................................669 Element tr ......................................................................................................................................670 Inne elementy tabeli ....................................................................................................................670 Elementy formularza . ..................................................................................................................671 Element button .............................................................................................................................671 Element datalist . ...........................................................................................................................671 Element fieldset ............................................................................................................................671 Element form ................................................................................................................................672 Element input ...............................................................................................................................672 Element label ................................................................................................................................674 Element legend .............................................................................................................................674 Element optgroup . .......................................................................................................................674 Element option .............................................................................................................................675 Element output .............................................................................................................................675 Element select ...............................................................................................................................676 Element textarea ..........................................................................................................................677 Elementy content .........................................................................................................................678 Element area .................................................................................................................................678 Element embed .............................................................................................................................678 Element iframe .............................................................................................................................679 Elementy img ................................................................................................................................679 Element map .................................................................................................................................680 Element meter ..............................................................................................................................680 Element object ..............................................................................................................................680 Element param .............................................................................................................................681 Element progress .........................................................................................................................681 Podsumowanie .............................................................................................................................682

18

„ SPIS TREŚCI

Część V

Zaawansowane funkcje . ................................................................................. 683

Rozdział 32 Wprowadzenie do Ajaksa. Część I . ................................................................. 685 Początki z Ajaksem . .....................................................................................................................686 Obsługa odpowiedzi . ...................................................................................................................689 Problem z Operą ..........................................................................................................................690 Zdarzenia Ajaksa . .........................................................................................................................691 Obsługa błędów . ...........................................................................................................................694 Obsługa błędów wejściowych . ...................................................................................................696 Obsługa błędów żądań ................................................................................................................696 Obsługa błędów aplikacji . ...........................................................................................................697 Pobieranie i definiowanie nagłówków . .....................................................................................697 Zmiana metody HTTP żądania . ................................................................................................697 Wyłączenie buforowania treści . .................................................................................................699 Odczytywanie nagłówków odpowiedzi . ...................................................................................699 Wydawanie żądań Ajaksa między różnymi źródłami . ...........................................................701 Nagłówek żądania źródła . ...........................................................................................................704 Zaawansowane funkcje CORS . ..................................................................................................704 Przerywanie żądań .......................................................................................................................704 Podsumowanie .............................................................................................................................707

Rozdział 33 Wprowadzenie do Ajaksa. Część II . ................................................................ 709 Przygotowanie się do wysłania danych serwerowi . ................................................................710 Utworzenie serwera . ....................................................................................................................710 Problem .........................................................................................................................................712 Wysyłanie danych formularza . ..................................................................................................713 Wysyłanie danych formularza obiektem FormData . .............................................................715 Utworzenie obiektu FormData . .................................................................................................716 Modyfikacja obiektu FormData . ...............................................................................................716 Wysyłanie danych JSON . ............................................................................................................718 Wysyłanie plików . ........................................................................................................................719 Śledzenie postępów wczytywania . .............................................................................................721 Żądanie i przetwarzanie różnych typów treści . .......................................................................723 Pobieranie fragmentów HTML . ................................................................................................723 Pobieranie danych XML . ............................................................................................................726 Pobieranie danych JSON . ...........................................................................................................728 Podsumowanie .............................................................................................................................729

Rozdział 34 Multimedia . .................................................................................................... 731 Element video ...............................................................................................................................732 Wczytywanie filmu z wyprzedzeniem . ..............................................................................732 Wyświetlanie obrazu zastępczego . .....................................................................................735 Rozmiar filmu . .......................................................................................................................735 Źródło i format filmu . ..........................................................................................................736 Element track . ........................................................................................................................738

19

„ SPIS TREŚCI

Element audio ..............................................................................................................................739 Praca z osadzonymi mediami za pośrednictwem DOM . .......................................................740 Pobieranie informacji o mediach . .............................................................................................741 Określenie możliwości odtworzenia multimediów . ...............................................................743 Kontrolowanie sposobu odtwarzania . ......................................................................................745 Podsumowanie . ............................................................................................................................747

Rozdział 35 Element canvas. Część I . ................................................................................. 749 Początki z elementem canvas . ....................................................................................................750 Uzyskanie kontekstu płótna . ......................................................................................................751 Rysowanie prostokątów . .............................................................................................................752 Ustawienie stanu rysowania . ......................................................................................................754 Styl rysowania styku linii . ...........................................................................................................755 Styl wypełnienia kształtu i rysowania linii . ..............................................................................757 Gradienty ......................................................................................................................................757 Gradient promieniowy ................................................................................................................762 Wzory ............................................................................................................................................765 Zapisywanie i przywracanie stanu rysowania . .........................................................................767 Rysowanie obrazów . ....................................................................................................................769 Obrazy filmowe ............................................................................................................................770 Obrazy z elementu canvas . .........................................................................................................772 Podsumowanie .............................................................................................................................773

Rozdział 36

Element canvas. Część II . ................................................................................ 775 Rysowanie z użyciem ścieżek . ....................................................................................................775 Rysowanie ścieżek liniami . .........................................................................................................776 Rysowanie prostokątów . .............................................................................................................779 Rysowanie łuków . ........................................................................................................................780 Wykorzystanie metody arcTo . ...................................................................................................781 Wykorzystanie metody arc . ........................................................................................................784 Rysowanie krzywych Béziera . ....................................................................................................785 Rysowanie sześciennych krzywych Béziera . ............................................................................786 Rysowanie kwadratowych krzywych Béziera . .........................................................................787 Utworzenie obszaru przycinania . ..............................................................................................789 Rysowanie tekstu . ........................................................................................................................790 Wykorzystanie efektów i przekształceń . ...................................................................................792 Cienie .............................................................................................................................................792 Przezroczystość ............................................................................................................................793 Kompozycja ..................................................................................................................................794 Przekształcenia .............................................................................................................................796 Podsumowanie .............................................................................................................................798

Rozdział 37 Funkcja przeciągania i upuszczania . ............................................................... 799 Tworzenie elementów źródłowych . ..........................................................................................799 Obsługa zdarzeń przeciągania . ...........................................................................................800 Utworzenie obszaru docelowego . ..............................................................................................802 Przyjmowanie upuszczonych treści . ..................................................................................804

20

„ SPIS TREŚCI

Praca z obiektem DataTransfer . ................................................................................................806 Filtrowanie przeciąganych elementów według treści . ............................................................808 Przeciąganie i upuszczanie plików . ...........................................................................................809 Podsumowanie .............................................................................................................................812

Rozdział 38

Geolokalizacja . ............................................................................................... 813 Wykorzystanie geolokalizacji . ....................................................................................................813 Pobranie informacji o bieżącej lokalizacji . ........................................................................813 Obsługa błędów funkcji geolokalizacji . ....................................................................................816 Definiowanie opcji geolokalizacji . .............................................................................................818 Śledzenie lokalizacji . ....................................................................................................................820 Podsumowanie .............................................................................................................................821

Rozdział 39 Magazynowanie danych . ................................................................................ 823 Magazyn lokalny . .........................................................................................................................823 Nasłuchiwanie zdarzeń magazynowania . ..........................................................................826 Magazyn sesji ................................................................................................................................827 Podsumowanie .............................................................................................................................830

Rozdział 40 Aplikacje internetowe działające offline . ........................................................ 831 Problem .........................................................................................................................................831 Utworzenie manifestu . ................................................................................................................833 Określanie sekcji manifestu . .......................................................................................................835 Sekcja FALLBACK .......................................................................................................................835 Sekcja NETWORK . .....................................................................................................................838 Sprawdzenie stanu przeglądarki . ...............................................................................................838 Praca z buforem offline . ..............................................................................................................839 Aktualizowanie .............................................................................................................................842 Pobranie aktualizacji ...................................................................................................................843 Zastosowanie aktualizacji . ..........................................................................................................843 Podsumowanie .............................................................................................................................844

Skorowidz. ....................................................................................................... 845

21

„ SPIS TREŚCI

22

O autorze

Adam Freeman jest doświadczonym specjalistą z dziedziny IT. Zajmował stanowiska kierownicze w różnych firmach — ostatnio był zatrudniony w ogólnoświatowym banku jako dyrektor techniczny i dyrektor ds. operacyjnych. Dziś, zakończywszy już karierę, spędza swój czas na bieganiu i pisaniu. To jego trzynasta książka o tematyce technicznej.

O korektorach merytorycznych

Kevin Grant jest pełnoetatowym deweloperem PHP, zamieszkałym i pracującym w okolicach brytyjskiego Sheffield. Obecnie zajmuje się obsługą stron internetowych opartych na Zend Framework. Swój typowy dzień pracy zazwyczaj spędza na kodowaniu, administrowaniu serwerem, profilowaniu wydajności oraz doradzaniu innym w zakresie wdrażania technologii związanych ze skalowalnością, takich jak memcached i techniki równoważenia obciążenia. Weekendy spędza z rodziną, wykonując czasami doraźne prace domowe. Często narzeka, że zbyt rzadko chodzi się wspinać, pomimo że w okolicy znajduje się kilka skałek i ścianek wspinaczkowych. ZX Spectrum 48K+ był jego pierwszym komputerem, lecz do dziś jego ulubioną grą komputerową pozostaje Parsec. Andy Olsen jest brytyjskim konsultantem-freelancerem. Jego praca dotyczy przede wszystkim technologii internetowych i mobilnych, .NET oraz Java. Andy pracuje w branży IT od 25 lat (ależ ten czas leci!), a kiedy dorośnie, zostanie profesjonalnym piłkarzem. Mieszka wraz z rodziną w walijskim Swansea nad morzem. Lubi biegać, jeździć na nartach i oglądać mecze Swans. Możesz się z nim skontaktować e-mailowo, pod adresem [email protected].

Podziękowania

Chciałbym podziękować wszystkim pracownikom wydawnictwa Apress za dołożenie tak wielu starań, by moja książka mogła ujrzeć światło dzienne. Na słowa podziękowania zasługują w szczególności Jennifer Blackwell za trzymanie nade mną pieczy (i znoszenie mojej niechęci do korzystania z SharePoint), a także Ewan Buckingham i Ben Renow-Clarke za zlecenie mi napisania tej książki i jej zredagowanie. Chciałbym również podziękować Kevinowi, Andy’emu, Rogerowi, Vanessie, Lori, Ralphowi, Kim i Marilyn za korektę i opinie.

CZĘŚĆ I

Na dobry początek

Do rozpoczęcia nauki HTML5 musisz się najpierw przysposobić. W następnych pięciu rozdziałach omówię strukturę tej książki, pokażę, jak przygotować się do pracy z HTML5, oraz odświeżę Twoją znajomość podstaw z zakresu HTML, CSS i JavaScript.

ROZDZIAŁ 1

Czym jest HTML5

HTML (ang. Hypertext Markup Language — hipertekstowy język znaczników) istniał od początku lat dziewięćdziesiątych. Najwcześniej zdarzyło mi się z nim zetknąć około roku 1993 lub 1994, gdy pracowałem w uniwersyteckim laboratorium badawczym w pobliżu Londynu. Przeglądarka — NCSA Mosaic — była jedna, a serwery internetowe można było policzyć na palcach jednej dłoni. Kiedy wspominam te czasy, zastanawia mnie, dlaczego HTML i World Wide Web tak bardzo nas ekscytowały. (Wówczas zresztą nazwę WWW musieliśmy mozolnie zapisywać tymi trzema wyrazami; brakowało masy krytycznej lub poczucia, że sieć ta ma szczególne znaczenie, żebyśmy mogli o niej mówić po prostu jako „sieci”). Wszystko odbywało się bardzo zwyczajnie. Pamiętam, jak oglądaliśmy wczytujące się — powoli — zdjęcia kamieni szlachetnych. Było to w czasach sprzed upowszechnienia się połączeń szerokopasmowych, kiedy cały uniwersytet dysponował przepustowością właściwą dzisiejszym telefonom komórkowym. Mimo wszystko byliśmy podekscytowani. Podania o granty w pośpiechu przeredagowywano, żeby uwzględniały nowe warunki. Rzeczywiście miało się poczucie, że historia techniki dzieliła się na okresy przed zaistnieniem sieci i po jej zaistnieniu, pomimo że mogliśmy co najwyżej oglądać zdjęcia dzbanka z kawą znajdującego się na innym uniwersytecie z okolic Londynu (jednak oddalonym na tyle, że nie moglibyśmy się do niego na ową kawę udać). Od tego czasu sieć Web stała się dla wielu użytkowników tożsama z Internetem, a zdjęcia kamieni szlachetnych od dawna już nas nie poruszają. HTML w międzyczasie poszerzano, ulepszano, zniekształcano, ćwiartowano, walczono o niego, zgłaszano pozwy w jego sprawie, ignorowano go, wykorzystywano, mieszano z błotem za nadmierną prostotę, chwalono jako język przyszłości i — wreszcie — pozwolono mu się ugruntować jako części nieodzownej infrastruktury codziennego życia miliardów ludzi. Niniejsza książka dotyczy HTML5 — najnowszej wersji standardu HTML i próby uporządkowania, ustrukturyzowania oraz ulepszenia istotnej technologii, która wreszcie dojrzała po długich latach burzy i naporu.

Historia HTML W każdej książce o HTML można znaleźć punkt o tytule „Historia HTML” i w większości z nich dokładnie omawia się rozwój standardu HTML od jego narodzin do teraźniejszości. Jeżeli te informacje są Ci potrzebne, to możesz ich poszukać na Wikipedii, choć nie są zbyt interesujące ani przydatne. Aby zrozumieć, w jaki sposób HTML rozwijał się i jak przyjął postać HTML5, musimy przyjrzeć się kilku kluczowym punktom zwrotnym i jednemu długotrwałemu trendowi.

ROZDZIAŁ 1.

•

ClYM JEST HTMLS

Wprowadzenie JavaScript JavaScript (który wbrew pozorom ma niewiele wspólnego z językiem programowania Java) został stworzony przez firmę Netscape. Jego narodziny dały możliwość wykorzystywania w przeglądarkach internetowych skryptów wykonywalnych po stronie klienta, przez co HTML zmienił się z nośnika statycznych informacji w coś nieco bardziej rozwiniętego. Nieco bardziej, ponieważ kompleksowe interakcje w przeglądarkach, z jakimi dziś się spotykamy, pojawiły się dopiero po pewnym czasie. JavaScript nie jest częścią właściwej specyfikacji HTML, lecz współpraca przeglądarek, HTML i JavaScript jest tak ścisła, że nie ma sensu na siłę ich rozdzielać. Specyfikacja HTMLS zakłada dostępność JavaScript, który z kolei jest nieodzowny, jeśli chce się wykorzystać niektóre z najciekawszych nowych możliwości włączonych do HTMLS.

Koniec wojen przeglądarek W pewnym okresie na rynku przeglądarek toczyła się zażarta walka. Głównymi konkurentami były Microsoft i Netscape, których współzawodnictwo polegało na wzbogacaniu przeglądarek o unikalne funkcje. Założenie było takie, że owe funkcje okażą się wystarczająco ciekawe, by webdeweloperzy�orzyli zasoby działające · wnicy będą wyraźnie jedynie na określonej przeglądarce, a te zasoby z kolei będą na tyle ciekawe, ż preferować daną przeglądarkę, zapewniając jej tym samym dominację yn Nie do końca tak wyszło. Webdeweloperzy ostatecznie wykorzyst a ł�c ie możliwości oferowane przez wszystkie przeglądarki lub obchodzili ograniczenia, używając ość porównywalnych funkcji. Było to nieco męczące, a webdeweloperzy wciąż liżą rany po ty ach. Koniec końców, Microsoft przegrał proces o łamanie pra ymonopolowego, który wynikł z darmowego udostępniania przeglądarki Internet Expl � z olei godziło w płatną przeglądarkę Netscape Navigator. Microsoft oskarża się o doprowadz cape do bankructwa. Może jest w tym trochę prawdy, lecz sam przez okres osiemnastu miesi yłem w tym czasie konsultantem Netscape -nigdy nie zetknąłem się z firmą, która z takim up re ążyła do samozagłady. Niektórym firmom już jest pisany taki los, że stają się przykładami, z ni wynoszą naukę-Netscape był jedną z nich. Śmierć Netscape i kary nałożone na Mi�s ? akończyły wojny przeglądarek i stworzyły warunki do ugruntowania standardów, których prze �ki miały przestrzegać. Specyfikację HTML usprawniono, a trzymanie się jej stało się normą. D r�glądarki konkurują ze sobą pod względem zgodności ze standardami-ten diametralny zw wił życie zarówno deweloperom, jak i użytkownikom.

as�

� ���

� ��Vs

'

·

.2.,_� �

'$.�

Dominacja wtyc

Wtyczki okazały się korzystne dla sieci. Pozwoliły firmom na dostarczanie rozbudowanych funkcji i bogatych zasobów, których uzyskanie nie byłoby możliwe przy użyciu samego kodu HTML. Niektóre z tych wtyczek są już tak zaawansowane i szeroko używane, że wiele stron internetowych to zaledwie nośniki zasobów owych wtyczek. Dotyczy to w szczególności Adobe Flash-często stykam się ze stronami zbudowanymi całkowicie we Flashu. Metoda ta nie jest zła z samego założenia, ale jej wykorzystanie oznacza, że przeglądarka i kod HTML używane są zaledwie jako nośnik treści wytworzonych we Flashu. Wtyczki stawiają twórców przeglądarek w niewygodnej pozycji, ponieważ dają one kontrolę właśnie producentom wtyczek, a próba przeniesienia bogatych treści właściwych Flashowi bezpośrednio do przeglądarki jest jedną z kluczowych dziedzin, którą rozwinięto w HTMLS. Na odejście od Flasha naciskają przede wszystkim dwie firmy: Apple i Microsoft. System operacyjny Apple iOS nie obsługuje Flasha, a Microsoft z kolei wyłączył obsługę Flasha w wersji Metro przeglądarki Internet Explorer w systemie Windows 8.

30

ROZDZIAŁ 1.

•

ClYM JEST HTMLS

Pojawienie się semantycznego HTML We wczesnych wersjach standardu HTML nie było szczególnego rozróżnienia między treścią a sposobem jej prezentacji. Jeśli chciałeś wskazać, że jakiś fragment tekstu jest istotny, to wprowadzałeś element HTML, który ów fragment pogrubiał. Do samego użytkownika należało z kolei skojarzenie, że pogrubiony tekst jest ważny. Ludzie nie mają z tym większych trudności, ale dla automatów jest to niezwykle problematyczne. Od kiedy wprowadzono HTML do użycia, zautomatyzowane przetwarzanie treści stało się istotne. Ponadto coraz bardziej starano się oddzielić znaczenie elementów HTML od wyglądu treści wyświetlanych w przeglądarce. Trend: standard HTML nie nadąża za sposobami użycia HTML Proces tworzenia standardu zawsze jest długotrwały, zwłaszcza w przypadku czegoś tak szeroko wykorzystywanego, jak HTML. Uczestniczy w nim wiele stron, którym zależy na ukształtowaniu nowych wersji standardu tak, by odpowiadała ich komercyjnym interesom lub punktom widzenia. Standardy nie mają mocy prawnej, a organizacje odpowiedzialne za ich tworzenie niczego się tak nie boją, jak fragmentacji, gdyż wymusza ona prowadzenie czasochłonnych rozważań nad tym, jak ewent�ne funkcje i ulepszenia miałyby działać. ""'� Organizacją odpowiedzialną za standardy HTML jest World Wide W e�sortium (znane jako W3C). Jej zadanie nie jest łatwe, a przekształcenie propozycji w stands ���czasu. Na zatwierdzenie aktualizacji specyfikacji HTML trzeba bardzo długo czekać. '-.� Przez to, że proces standaryzacji jest tak długotrwały, W3C z� s� ało z opóźnieniem, standaryzując to, co zdążyło już się stać powszechnie uznawaną praktyką. Spe J>.a�-HTML są odbiciem tych podejść do zasobów internetowych, które były odkrywcze kilka l�t . aczenie standardu HTML maleje o części w przeglądarkach, a po części przez to, ponieważ właściwe innowacje wdraża się poza W we wtyczkach.

o

HTMLS

�O

HTMLS to nie tylko najnowsza wer�ja ec�cji HTML Jest to równie?. ogólne określenie zbioru powiązanych technologii, służących orzenia nowoczesnych, bogatych zasobów internetowych. Technologie te przedstawię Ci�p 'z zych rozdziałach, ale najważniejsze z nich to bazowa specyfikacja HTMLS, kaskadowe arkusze st CSS, ang. Cascading Style Sheets) oraz JavaScript. Bazowa specyfikacja �T L reśla elementy, którymi oznacza się treść i określa jej znaczenie. CSS pozwala określać wygląd onych treści, gdy prezentuje się je użytkownikowi. JavaScript pozwala na modyfikowanie zawartości kumentu HTML, reagowanie na działania użytkownika oraz wykorzystanie niektórych programacentrycznych funkcji nowych elementów HTMLS. • Wskazówka Nie martw się, jeżeli nic z tego nie rozumiesz. Elementy HTML przedstawię Ci w rozdziale 3., z CSS zapoznam w rozdziale 4., a wiedzę o JavaScript odświeżę w rozdziale 5.

Niektórzy (zgryźliwi, chorobliwie obsesyjni i drobiazgowi) ludzie zwróciliby uwagę, że HTMLS odnosi się tylko do elementów HTML. Nie warto ich słuchać, gdyż nie zwracają uwagi na fundamentalną przemianę charakteru zasobów internetowych. Technologie wykorzystywane na stronach internetowych stały się tak silnie ze sobą związane, że trzeba je wszystkie znać, by móc tworzyć zasoby. Używając elementów HTML bez CSS, tworzyłbyś treści, z których przyswojeniem użytkownicy mieliby trudności. Używając kodu HTML i CSS bez JavaScript, straciłbyś możliwość dania użytkownikom natychmiastowych informacji zwrotnych na temat ich działań oraz wykorzystania niektórych z nowych, zaawansowanych funkcji, które zapewnia HTMLS. 31

ROZDZIAŁ 1.

•

ClYM JEST HTMLS

Nowy standard, nowe standardy W celu poradzenia sobie z długotrwałością procesu standaryzacji i tym, jak standard pozostaje w tyle za powszechnym użyciem, HTMLS i pokrewne technologie definiuje się dużą liczbą pomniejszych standardów. Niektóre to zaledwie kilka stron, skoncentrowanych na bardzo konkretnym aspekcie pojedynczej funkcji. Są też- rzecz jasna- inne, które składają się z setek stron drobnego druku, traktujących o całych zbiorach funkcji. Założenie jest takie, że mniejsze grupki mogą współpracować nad produkcją i standaryzacją ważnych dla nich funkcji, a standaryzacją mniej spornych kwestii mogą się zająć bez opóźnień wynikających z różnic zdań co do innych funkcji. Podejście to wiąże się zarówno z pozytywnymi, jak i negatywnymi konsekwencjami. Pozytywne jest to, że standardy rzeczywiście opracowuje się szybciej. Główną wadą jest natomiast trudność w śledzeniu wszystkich rozwijanych standardów i powiązań między nimi. Jakość specyfikacji bywa też gorsza- niektóre standardy są niejednoznaczne, co prowadzi do ich niespójnej implementacji w przeglądarkach. Być może największą wadą jest brak punktu odniesienia przy ocenianiu zgodności z HTMLS. To dopiero początek, ale nie możemy się spodziewać wdrożenia wszystkich funkcji we wszystkich przeglądarkach, z jakich użytkownicy będą korzystać. Wprowadzanie nowych funkcji staje się p ez to problematyczne i wymaga starannego oszacowania, jak szeroko dany standard się upowszechn W3C opublikowało oficjalne logo HTMLS (rysunek 1.1), lecz nie wskazuje ono obsługi jakiegok� l{ onkretnie aspektu standardu HTMLS lub związanych z nim technologii.

�

��

HTML

5 Rysunek 1.1. Oficjalne logo

��· � ';:Qo ..

HTML�

�

Natywna obsług a..W._

0 0

mediów

�MLS jest natywne odtwarzanie plików audio i wideo w przeglądarce, Kluczowym usprawnien� tj. bez konieczności użycia wtyczki. Jest to przykład reakcji W3C na dominację wtyczek, a integracja natywnej obsługi multimediów z pozostałymi funkcjami HTML wydaje się obiecująca. Funkcje te omówię w rozdziale 34. Zasoby programistyczne Jedną z największych zmian w HTMLS jest włączenie elementu canvas, który omówię w rozdziałach 35. i 36. Element ten jest kolejnym przykładem reakcji na dominację wtyczek- tworzy on obszar graficzny, który można wykorzystywać do wykonywania zadań, do których zwykło się stosować Adobe Flash. Doniosłość tej funkcji wynika częściowo z tego, że w obrębie elementu canvas konieczne jest stosowanie JavaScript, przez co programowanie staje się jedną z najważniejszych czynności, jakie podejmuje się przy pracy z dokumentem HTML. To bardzo ważna zmiana.

32

ROZDZIAŁ 1.

•

ClYM JEST HTMLS

Sieć semantyczna W HTMLS wprowadzono szereg funkcji i zasad służących do oddzielenia znaczenia elementów od tego, jak treść jest prezentowana. Jest to ważna kwestia, którą omówię bardziej szczegółowo w rozdziale 6. i która będzie się w tej książce pojawiać wielokrotnie. Wskazuje ona na dojrzałość języka HTML i odzwierciedla różnorodność sposobów, w jakie treści HTML można produkować i konsumować. Ta zmiana (którą wprowadzano stopniowo przez wcześniejsze wersje HTML) wiąże się z dodatkową pracą dla webdewelopera, ponieważ musi najpierw oznaczyć treść, a potem zdefiniować jej wygląd, ale istnieją pewne użyteczne ulepszenia, które zmniejszają uciążliwość tego procesu.

Bieżący stan

HTML5

Bazowy standard HTMLS jest wciąż opracowywany i jeszcze przyjdzie trochę poczekać na jego ukończenie. Oznacza to, że między opisanymi przeze mnie w tej książce funkcjami a ostateczną wersją standardu prawdopodobnie pojawią się jakieś różnice. Niemniej jednak gotowy standard ukaże się prawdopodobnie dopiero za kilka lat, a zmiany będą minimalne. Obsługa HTMLS

w

przeglądarkach

�

' � � s

Najpopularniejsze przeglądarki internetowe już dziś obsługują w ·el �)�:�� � i HTMLS i przykładowe dokumenty HTMLS w tej książce zaprezentuję Ci w przeglądar c t�l jak Google Chrome i Mozilla Firefox. Nie każda przeglądarka jednak obsługuje wszystkie fun · , t eż warto zbadać sprawę obsługi danej funkcji przed wykorzystaniem jej w projekcie. Nie��e ądarki, takie jak Chrome i Firefox, aktualizowane są niemal cały czas. Nie potrafiłbym zl - c� �stkich aktualizacji przeglądarek, które pobrałem przez czas pisania tej książki, a każda z nich !}Z a się z pojawieniem się jakiejś nowej funkcji lub naprawieniem jakiegoś błędu. Nie mogłem prz z odać pewnych informacji odnośnie do tego, które przeglądarki obsługują które funkcje. ·o ak pod uwagę pofragmentowany charakter standardów HTMLS, warto sprawdzać funk ·e i liotekach JavaScript w rodzaju Modernizr (http:/1 www.modernizr.com). Modernizr pozwala n omatyczne sprawdzenie, czy przeglądarka użytkownika obsługuje najważniejsze funkcje HTM 5, da• c Ci możliwość podjęcia decyzji co do tego, na których funkcjach zamierzasz polegać. Jeżeli chcesz planować z wyprz z m, to mogę Ci polecić stronę When Can I Use? iesz szczegółowe informacje o obsłudze funkcji w przeglądarkach (http://caniuse.com), na której i szybkości wdrażania; p m daje się ona stale doglądana.

�

�

�

Wykorzystanie HTMLS na stronach Stron wykorzystujących funkcje HTMLS pojawia się coraz więcej. Niektóre z nich są jedynie stronami demonstracyjnymi, służącymi do pokazywania danych funkcji w działaniu, lecz jednocześnie zwiększa się liczba bardziej konkretnych stron, które wykorzystują możliwości przeglądarek obsługujących HTMLS. Dobrym tego przykładem jest YouTube, który może się teraz pochwalić natywną obsługą filmów w HTMLS, choć- rzecz jasna- w starszych przeglądarkach filmy puszczane są we Flashu.

Struktura tej książki

Książka dzieli się na pięć części. W części I znajdziesz informacje, które będą Ci potrzebne do dalszej lektury, a także przypomnienie podstaw HTML, CSS i JavaScript. Jeżeli nie zajmowałeś się ostatnio tworzeniem stron, to rozdziały te pozwolą Ci odświeżyć swoją wiedzę.

33

ROZDZIAŁ 1.

•

ClYM JEST HTMLS

W części II znajduje się omówienie elementów HTML, włącznie z tymi, które pojawiły się dopiero w HTMLS lub uległy zmianie. Wszystkie elementy są opisane i przedstawione na przykładach; znajdziesz tam również informację o domyślnej prezentacji elementów. Część III zawiera omówienie kaskadowych arkuszy stylów- Cascading Style Sheets (CSS). W tych rozdziałach znajdziesz opis wszystkich selektorów i atrybutów używanych przy stylizacji treści, a także wiele przykładów, które pomogą Ci złożyć to wszystko w całość. Omawiam w nich najnowszą wersję CSS (CSS3), ale przedstawiam również funkcje, które były już obecne w CSSl i CSS2. W części IV znajdziesz omówienie obiektowego modelu dokumentu - Document Object Model (DOM) - który pozwala na poruszanie się po treści HTML i modyfikowanie jej przy użyciu JavaScript. DOM udostępnia szereg funkcji, które są nieodzowne przy tworzeniu bogatej treści internetowej. Część V zawiera informacje o zaawansowanych funkcjach HTMLS, takich jak Ajax, multimedia i element canvas. Korzystanie z tych funkcji wymaga większych umiejętności programistycznych, ale pozwala na znaczące ulepszenie treści internetowych. Nie są one wprawdzie potrzebne do wykorzystania możliwości HTMLS, ale warto rozważyć użycie ich przy bardziej rozbudowanych projektach. • Uwaga Spośród technologii związanych z HTMLS nie omówiłem w tej książce skalowanych grafik wektorowych - Scalable Vector Graphics (SVG). SVG pozwala na tworzenie dwuwymiarowych z wykorzystaniem języka znaczników lub JavaScript. SVG to poważny temat. Jeżeli i Ci polecić książkę SVG Programming, której autorem jest Kurt Cagle.

Więcej informacji o

HTML5

�

�p �zycji wektorowych ��e Cię SVG, to mogę

�-

'>s"'D-

chciałem, żeby ta książka była wyczerpująca, ale z pewno��niesz się z jakimś problemem, do którego się nie odniosłem, lub przyjdzie Ci do głowy pytanie n ��Te mam odpowiedzi. W takim przypadku ·esz tam przejrzeć standardy i zorientować wejdź w pierwszej kolejności na stronę W3C (w3c.or się, co powinno się dziać w przeglądarce. Standard b ają mało zrozumiałe (a często zapętlają się w wewnętrznych odniesieniach), lecz można �ciągnąć przydatne wnioski. Mozilla Developer Network (develop er. ��rg) jest przyjaźniejszym, lecz mniej autorytatywnym źródłem. Można tam znaleźć wiele przydatnWinformacji o różnych funkcjach HTML, w tym również HTMLS.

�o

������ �::�

m pod zrozumienie HTMLS, wskazując kluczowe pm�ty zwrotne w historii HTML i tłumacząc, jak HTMLS się do nich odnosi. W następnym rozdziale powiem Ci, jak przygotować się do pracy z wieloma z zawartych w tej książce przykładów. Następnie weźmiemy się za poznawanie HTMLS, zaczynając od samych elementów HTML.

34

ROZDZIAŁ 2

Przygotuj się � �

Przed rozpoczęciem pracy musisz się przygotować. Potrzebne Ci będą podst�w� narzędzia do pracy webdeweloperskiej, a także jeden program, który pozwoli Ci odtworzyć niektór 4�ziej zaawansowanych przykładów znajdujących się na końcu książki. Szczęśliwie, istnieje wiele darmowych i open source' owych narz �eb� elaperskich do wyboru. Wszystkie narzędzia, z których korzystałem przy opracowywaniu za ��n w tej książce przykładów, są dostępne za darmo. Zebrawszy narzędzia, możesz wyruszyć w p TMLS.

Wybór przeglądarki

� �

�

Q

Najważniejszym narzędziem, którym będziesz się � ać w pracy z tą książką, jest przeglądarka. W książce odnoszę się do popularnych przeglą�� komputerowych wersji następujących programów: Google Chrome, nY Mozilla Firefox, V A..._ \ • Opera, � Apple Safari, A..._ '\ Internet Explorer. A..._'\� Przeglądarki te są n �iej rozpowszechnione, a ich wersje na komputery są aktualizowane częściej i obsługują więcej funkcji niż ich odpowiedniki na urządzenia przenośne. Powyższa lista może nie uwzględniać Twojej ulubionej przeglądarki. Nie oznacza to, że Twoja przeglądarka nie obsługuje przedstawionych tutaj funkcji HTMLS, ale radziłbym Ci, abyś korzystał z tych przeglądarek, które wymieniłem. Moja ulubiona przeglądarka to Google Chrome. Podoba mi się jej prostota i to, że oferuje całkiem niezłe narzędzia deweloperskie. Z tego powodu większość rysunków w tej książce przedstawia dokumenty HTMLS wyświetlane w Google Chrome. Jeżeli nie jesteś miłośnikiem tej przeglądarki, to proponowałbym korzystanie z Firefoksa lub Opery, jako że ich obsługa HTMLS jest porównywalna. Safari i Internet Explorer wydają się pozostawać w tyle. Internet Explorer znajduje się teraz w ciekawym stanie. Kiedy piszę te słowa, Internet Explorer 9 jest w przygotowaniu i może się pochwalić całkiem rozsądną obsługą podstawowych funkcji HTMLS. Istnieje już wersja podglądowa Internet Explorer 10, który jest znacznie usprawniony, lecz wciąż pozbawiony obsługi niektórych najważniejszych funkcji. Staje się jednak jasne, że pomysł Microsoftu na Windows 8 uwzględnia tworzenie aplikacji opartych na HTMLS i JavaScript. Sugeruje to, że możemy oczekiwać od silnika Internet Explorer w Windows 8 dobrej obsługi HTMLS. •

•

•

•

•

ROZDZIAŁ 2. „ PRZYGOTUJ SIĘ

„ Uwaga Proszę, nie pisz mi elaboratów o tym, dlaczego Twoja ulubiona przeglądarka jest lepsza od mojej. Nie wątpię, że Twoja przeglądarka jest wspaniała, wierzę w Twoją rozwagę i życzę Ci wielu lat radości z jej używania. Jeśli jednak naprawdę nie możesz się powstrzymać, to jestem gotów sprzedać Ci zestaw terapeutyczny za jedyne 50 dolarów. Dostaniesz plik kartek, nożyczki i klej. Będziesz mógł wydrukować i wyciąć szablony Twojej przeglądarki, które nakleisz na rysunki z interfejsem Chrome. To niewielka cena za spokój ducha, prawda?

Wybór edytora HTML Do tworzenia dokumentów HTML potrzebny Ci będzie edytor. Wystarczy dowolny edytor tekstu, ale poleciłbym Ci edytor, który obsługuje konkretnie HTML (albo — jeszcze lepiej — HTML5). W tego typu edytorach zwykle można się spotkać z funkcją sprawdzania składni kodu, autouzupełniania, dzięki której nie musisz wpisywać tak wielkich ilości tekstu, oraz z panelem podglądowym, w którym widać rezultaty nanoszonych zmian. Na potrzeby tej książki korzystałem z Komodo Edit producenta ActiveState (który można pobrać z activestate.com) — darmowego, open source’owego edytora, którego obsługa HTML jest dość dobra i który przystaje do moich preferencji co do tego, jak edytor powinien działać. Nie jestem w żaden sposób powiązany z ActiveState i nie mam żadnego powodu, by promować Komodo Edit poza tym, że uznałem ten program za przydatny zarówno przy pisaniu tej książki, jak i przy innych projektach.

Wybór serwera internetowego Serwer internetowy nie jest Ci potrzebny do pracy z tą książką, lecz niektóre funkcje działają inaczej, kiedy dokumenty HTML odczytywane są z dysku. Do obsługi zawartych w tej książce przykładów nadaje się każdy serwer, przy czym masz wiele darmowych i open source’owych możliwości do wyboru. Sam korzystałem z IIS 7.5, który jest serwerem internetowym i aplikacji Microsoftu. Nie jest to darmowa usługa, ale posiadam serwer deweloperski działający na Windows Server 2008 R2, więc miałem już dostęp do wszystkich potrzebnych mi funkcji.

Pobranie Node.js W kilku rozdziałach książki musiałem zawrzeć kod przeznaczony dla serwera, z którym przeglądarka mogłaby się komunikować. Do tego zadania wybrałem Node.js. Node.js stało się ostatnio pewnego rodzaju fenomenem. Oferuje proste, zdarzeniowe I/O, które idealnie pasuje do obsługi wielu wywołań małych ilości danych. Nie musisz się na tym znać ani się tym przejmować. Wybrałem Node.js, ponieważ skrypty serwerowe piszę w JavaScript i dzięki temu nie musiałem przedstawiać w tej książce drugiego języka programowania. Nie będę tłumaczył, jak działa Node.js, ani omawiał szczegółów moich skryptów serwerowych, które dzięki znajomości JavaScript sam powinieneś móc rozpracować, jeżeli nie chcesz ich traktować jak „czarnej skrzynki”. Node.js możesz pobrać ze strony nodejs.org. Na potrzeby tej książki korzystałem z wersji 0.4.11. Node.js wydaje się bardzo szybko rozwijać, toteż niewykluczone, że zetkniesz się z nowymi wersjami. Korzystam z systemu Windows, a skompilowane pliki binarne pobrałem z http://node-js.prcn.co.cc.

Pobranie modułu multipart W bazowym pakiecie Node.js brakuje niektórych z potrzebnych Ci funkcji. Potrzebny jest Ci również moduł multipart, który pobierzesz ze strony https://github.com/isaacs/multipart-js. Zainstaluj go zgodnie z instrukcją; będzie Ci potrzebny przy rozdziałach 32. i 33., kiedy przyjrzymy się Ajaksowi.

36

ROZDZIAŁ 2. „ PRZYGOTUJ SIĘ

Pobranie przykładowych kodów Wszystkie przykładowe dokumenty HTML z tej książki są dostępne za darmo na stronie wydawnictwa Helion, pod adresem www.helion.pl/ksiazki/htm5pe.htm. Dokumenty te uporządkowane są według rozdziałów i zawierają zasoby, które mają obsługiwać (z wyjątkiem zasobów audiowizualnych z rozdziału 34., jako że uzyskanie pozwolenia na reprodukcję treści medialnych jest bardzo trudne).

Podsumowanie Opisałem w tym rozdziale kroki, które trzeba podjąć w celu przygotowania się do pracy z kolejnymi rozdziałami. Do webdewelopingu wystarczy kilka prostych narzędzi, spośród których najważniejsza jest przeglądarka, a które można zdobyć całkowicie za darmo. Następne trzy rozdziały posłużą Ci do odświeżenia znajomości HTML, CSS i JavaScript.

37

ROZDZIAŁ 2. „ PRZYGOTUJ SIĘ

38

ROZDZIAŁ 3

Wprowadzenie do HTML

Każdy deweloper musi cokolwiek wiedzieć o HTML. Przez ostatnie lata stał się on wszechobecny i można bezpiecznie założyć, że przynajmniej zdarzyło Ci się zobaczyć kod HTML, nawet jeśli nigdy nie musiałeś go pisać. W tym rozdziale omawiam HTML od podstaw, żebyś uzyskał pewny grunt pod nogami. Zaczynam od tego, do czego HTML służy i jak działa. Zdefiniuję podstawową terminologię HTML i przedstawię kilka bazowych elementów tego języka, które pojawiają się praktycznie na każdej stronie internetowej. Jak sama nazwa wskazuje, HTML jest językiem znaczników. Znaczniki te przyjmują formę elementów, które odnoszą się do treści — na ogół tekstu. W poniższych podrozdziałach omówię poszczególne aspekty elementów HTML, wytłumaczę, jak skonfigurować elementy przy użyciu atrybutów, oraz opiszę atrybuty globalne, które można stosować we wszystkich elementach HTML. W tabeli 3.1 znajduje się streszczenie całego rozdziału. Tabela 3.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Oznaczenie treści.

Zastosuj element HTML.

3.1 – 3.5

Szczegółowe określenie interpretacji elementów HTML przez przeglądarkę.

Przypisz elementowi jeden lub więcej atrybutów.

3.6 – 3.10

Zadeklarowanie, że dokument zawiera kod HTML.

Zastosuj elementy DOCTYPE i html.

3.11

Opisanie dokumentu HTML.

Zastosuj element head i zamieść w nim jeden lub więcej elementów metadanych (które opisuję w rozdziale 7.).

3.12

Dodanie treści do dokumentu HTML.

Zastosuj element body i zamieść w nim tekst lub inne elementy HTML.

3.13

Dodanie skrótu klawiszowego, służącego do wyboru elementu.

Użyj globalnego atrybutu accesskey.

3.14

Tworzenie klas elementów w celu nadania im jednolitego stylu bądź umożliwienia ich programowego wyszukiwania.

Użyj globalnego atrybutu class.

3.15 – 3.17

Pozwolenie użytkownikowi na edycję treści elementu.

Użyj globalnego atrybutu contenteditable.

3.18

Dodanie menu kontekstowego do elementu.

Użyj globalnego atrybutu contextmenu. (Atrybut ten obecnie nie jest obsługiwany przez przeglądarki).

-

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Tabela 3.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Określenie kierunku, w jakim rozmieszczona jest treść danego elementu.

Użyj globalnego atrybutu dir.

3.19

Określenie możliwości przeciągania danego elementu.

Użyj globalnego atrybutu draggable. (W rozdziale 37. przeczytasz szczegółowy opis przeciągania i upuszczania w HTML5).

-

Określenie danego elementu jako celu, w którym inne elementy można upuszczać.

Użyj globalnego atrybutu dropzone. (W rozdziale 37. przeczytasz szczegółowy opis przeciągania i upuszczania w HTML5).

-

Wskazanie, że dany element wraz z zawartością jest nieistotny.

Użyj globalnego atrybutu hidden.

3.20

Przypisanie elementowi unikalnego identyfikatora w celu nadania mu stylu lub umożliwienia programowego wyszukiwania go.

Użyj globalnego atrybutu id.

3.21

Określenie języka, w którym treść elementu jest wyrażona.

Użyj globalnego atrybutu lang.

3.22

Określenie, czy pisownia treści elementu powinna być sprawdzona.

Użyj globalnego atrybutu spellcheck.

3.23

Bezpośrednie przypisanie stylu elementowi.

Użyj globalnego atrybutu style.

3.24

Określenie kolejności, w jakiej kursor porusza się po elementach dokumentu HTML przy naciskaniu klawisza Tab.

Użyj globalnego atrybutu tabindex.

3.25

Udzielenie dodatkowych informacji o elemencie (które zwykle pojawiają się w chmurce podpowiedzi).

Użyj globalnego atrybutu title.

3.26

Korzystanie z elementów W listingu 3.1 widnieje prosty przykład tekstu oznaczonego elementem HTML. Listing 3.1. Przykład elementu HTML Lubię jabłka i pomarańcze.

Składający się z trzech części element zapisałem pogrubionym tekstem. Pierwsze dwie jego części to znaczniki, zwane również tagami. Znacznik otwierający to , a zamykający to . Pomiędzy znacznikami znajduje się treść elementu (w tym przypadku słowo jabłka). Znaczniki wraz z treścią składają się razem na element code (rysunek 3.1).

Rysunek 3.1. Anatomia elementu HTML

40

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Elementy służą do podawania przeglądarce informacji o właściwej treści. Charakterystyka elementu nadawana jest jego treści. Każdy element HTML ma inne i dość konkretne znaczenie; np. element code opisuje fragment kodu komputerowego. „ Wskazówka Wielkość liter nie jest istotna przy zapisie nazw elementów. Przeglądarka rozpozna i , a nawet , jako znaczniki otwierające elementu code. Na ogół przyjmuje się, że należy wybrać jeden zapis i trzymać się go. W ostatnich latach częściej wybieranym stylem stał się zapis wyłącznie małymi literami i to właśnie z niego korzystam w tej książce.

W HTML występują różne rodzaje elementów, które pełnią różne funkcje w dokumencie HTML — element code jest przykładem elementu semantycznego. Elementy semantyczne pozwalają nam na określenie znaczenia treści i relacji pomiędzy różnymi jej fragmentami. Więcej na ten temat piszę w rozdziale 8. Efekt zastosowania elementu code widać na rysunku 3.2.

Rysunek 3.2. Element code wyświetlony w przeglądarce Zauważ, że przeglądarka nie wyświetla tagów elementu. Jej zadaniem jest zinterpretowanie kodu HTML i przedstawienie użytkownikowi treści w sposób uwzględniający podane przez Ciebie elementy.

Rozdzielenie prezentacji od treści Niektóre elementy HTML wpływają na prezentację treści. Przeglądarka, trafiając na jeden z takich elementów, zmienia wygląd jego treści. Element code jest tego dobrym przykładem. Jak widać na rysunku 3.1, przeglądarka po natrafieniu na element code wyświetliła oznaczoną treść fontem o stałej szerokości znaków. Stosowanie elementów HTML do określania wyglądu treści jest obecnie zdecydowanie odradzane. Założenie jest takie, by używać elementów HTML do określania struktury i znaczenia treści, a arkuszy CSS do definiowania prezentacji. CSS omówię w rozdziale 4. Elementy wpływające na prezentację to zazwyczaj te, które pojawiły się we wczesnych wersjach HTML, kiedy jeszcze nie przestrzegano zasady rozdziału prezentacji od treści tak rygorystycznie. Przeglądarki nadają takim elementom domyślne style prezentacji, np. font o stałej szerokości znaków w przypadku elementu code. Jak jeszcze wspomnę w rozdziale 4., występowanie owych domyślnych stylów możesz zniwelować przy użyciu kodu CSS.

Dodatkowe elementy występujące w tym rozdziale Żeby pomóc Ci odświeżyć sobie znajomość HTML, muszę skorzystać z kilku elementów, które opiszę dopiero w późniejszych rozdziałach. W tabeli 3.2 znajduje się lista tych elementów wraz z ich krótkimi opisami oraz spisem rozdziałów, w których możesz się z nimi szczegółowo zapoznać.

41

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Tabela 3.2. Spis elementów Element

Opis

Rozdział

a

Tworzy odnośnik

8

body

Wskazuje treść dokumentu HTML

7

button

Tworzy przycisk do zatwierdzania formularzy

12

code

Wskazuje fragment kodu komputerowego

8

DOCTYPE

Wskazuje początek dokumentu HTML

7

head

Wskazuje nagłówek dokumentu HTML

7

hr

Wskazuje zmianę tematyczną

9

html

Wskazuje sekcję HTML dokumentu

7

input

Wskazuje dane wejściowe podawane przez użytkownika

8

label

Tworzy etykietę dla innego elementu

12

p

Wskazuje akapit

9

style

Określa styl CSS

7

table

Wskazuje dane tabelaryczne

11

td

Wskazuje komórkę tabeli

11

textarea

Tworzy wielowierszowe pole tekstowe, w którym użytkownik podaje dane

14

th

Tworzy komórkę nagłówkową tabeli

11

title

Określa tytuł dokumentu HTML

7

tr

Wskazuje rząd tabeli

11

Puste elementy Między znacznikiem otwierającym i zamykającym nie trzeba umieszczać treści. W takich sytuacjach powstaje pusty element, taki jak ukazany w listingu 3.2. Listing 3.2. Pusty element HTML Lubię jabłka i pomarańcze.

Nie wszystkie puste elementy mają sens, a code jest tego przykładem. Pomimo tego wciąż jest to poprawny kod HTML.

Samozamykające znaczniki Puste elementy możesz zapisywać zwięźlej przy użyciu pojedynczego znacznika (listing 3.3). Listing 3.3. Pusty element zapisany pojedynczym znacznikiem Lubię jabłka i pomarańcze.

Znacznik otwierający z zamykającym możesz połączyć w jeden — ukośnik (/), którym zwykle oznacza się początek znacznika zamykającego, zamieszcza się na końcu pojedynczego znacznika. Elementy z listingów 3.2 i 3.3 są tożsame, lecz pojedynczy znacznik jest zwięźlejszym zapisem pustego elementu.

42

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Elementy void Niektóre elementy trzeba wyrażać pojedynczymi znacznikami, gdyż specyfikacja HTML nie pozwala na umieszczanie w ich obrębie jakiejkolwiek treści. Określa się je mianem elementów void. Przykładem takiego elementu jest hr — element grupujący, który wskazuje przejście akapitowe. (Pozostałe elementy grupujące znajdziesz w rozdziale 9.). Z elementów void możesz korzystać na dwa sposoby — pierwszy z nich polega na podaniu samego znacznika otwierającego (listing 3.4). Listing 3.4. Element void zapisany samym znacznikiem otwierającym Lubię jabłka i pomarańcze.

Było dziś ciepło i słonecznie.

Przeglądarka wie, że hr jest elementem void, i nie oczekuje znacznika zamykającego. Możesz też zamieścić w elemencie ukośnik, aby zapewnić mu spójność z pustymi elementami (listing 3.5). Listing 3.5. Element void zapisany zgodnie ze strukturą pustego elementu Lubię jabłka i pomarańcze.

Było dziś ciepło i słonecznie.

Wolę używać tego drugiego formatu i to właśnie z niego korzystam w tej książce. Notabene, element hr jest kolejnym przykładem elementu o znaczeniu prezentacyjnym — w jego miejscu przeglądarka wyświetla poziomą linię. Na rysunku 3.3 widnieje domyślna interpretacja elementu hr.

Rysunek 3.3. Domyślna prezentacja elementu hr

Używanie opcjonalnych znaczników otwierających i zamykających (lub nie) Wiele elementów HTML5 objętych jest specjalnymi zasadami, zgodnie z którymi można pominąć któryś ze znaczników. Przykładowo, dla elementu html (który opiszę w rozdziale 7.) można pominąć znacznik zamykający, o ile „bezpośrednio po elemencie nie znajduje się komentarz, a on sam zawiera element body, który albo nie jest pusty, albo jego znacznik otwierający nie został pominięty”. Cieszy mnie, że znaczniki można potraktować tak elastycznie, ale jednocześnie może to być mylące i prowadzić do nieporządku. Elementy HTML nie są przetwarzane wyłącznie przez przeglądarki — będą je przeglądać Twoi współpracownicy, a także Ty sam w przyszłości, kiedy będziesz chciał zaktualizować swoją aplikację. Przeglądarka może określić, dlaczego dany znacznik pominięto, lecz nie będzie to oczywiste ani dla Twoich kolegów, ani dla Ciebie samego, kiedy będziesz modyfikować kod. Z tego powodu nie będę tutaj opisywał owych specjalnych zasad, a będę korzystał z otwierających i zamykających znaczników elementów, chyba że pojawi się istotny powód, żeby tego nie robić — a wtedy wytłumaczę dlaczego.

43

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Atrybuty elementów Elementy możesz konfigurować przy użyciu atrybutów. W listingu 3.6 widnieje odnoszący się do elementu atrybut. Element ten pozwala na tworzenie odnośników, których kliknięcie powoduje wczytanie innego dokumentu HTML. Listing 3.6. Atrybut elementu Lubię jabłka i pomarańcze.

Atrybuty można dodawać jedynie do znaczników otwierających i pojedynczych, a nigdy do znaczników zamykających. Atrybut ma swoją nazwę i wartość, jak widać na rysunku 3.4.

Rysunek 3.4. Nadawanie atrybutu elementowi HTML Istnieje szereg globalnych atrybutów, które można przypisać każdemu elementowi HTML. Opiszę je w dalszej części rozdziału. Poza owymi atrybutami globalnymi poszczególne elementy mają też własne atrybuty, które służą do podawania danych konfiguracyjnych właściwych dla funkcji, jakie dane elementy pełnią. Atrybut href jest atrybutem lokalnym elementu a i służy do wskazania adresu URL, do którego prowadzi odnośnik. Element a można skonfigurować przy użyciu kilku określonych atrybutów, które omówię w rozdziale 8. „ Wskazówka Wartość atrybutu w listingu ująłem w podwójnym cudzysłowie ("mojawartość"), ale można też skorzystać z cudzysłowu pojedynczego ('mojawartość'). Jeżeli chcesz określić taką wartość, która sama zawiera cudzysłów, to musisz skorzystać z obydwu rodzajów cudzysłowów ("moja 'cytowana' wartość" lub 'moja "cytowana" wartość').

Nadawanie elementom wielu atrybutów Elementowi możesz nadać więcej niż jeden atrybut, oddzielając je od siebie jedną lub większą liczbą spacji (listing 3.7). Listing 3.7. Nadawanie elementowi wielu atrybutów Lubię jabłka i pomarańcze.

Kolejność atrybutów nie jest istotna i możesz dowolnie zestawiać atrybuty globalne z właściwymi dla danego elementu, co zresztą zrobiłem w listingu. Atrybuty class i id (które omówię w dalszej części rozdziału) są globalne.

Atrybuty boolowskie Niektóre atrybuty są atrybutami boolowskimi. Nie musisz podawać dla nich wartości — wystarczy dodać samą nazwę atrybutu do elementu (listing 3.8). Listing 3.8. Atrybut boolowski Podaj swoje imię:

44

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Podany w tym przykładzie atrybut boolowski to disabled i wystarczyło, bym dopisał jego nazwę do elementu. Element input daje użytkownikowi możliwość podania danych w formularzach HTML (które omówię w rozdziale 12.). Dodanie atrybutu disabled uniemożliwia użytkownikowi podanie danych. Atrybuty boolowskie są nieco dziwne, ponieważ sama ich obecność, a nie wartość konfiguruje element. Nie podałem disabled="true", lecz samo słowo disabled. Ten sam efekt można uzyskać, podając pusty ciąg ("") lub nadając atrybutowi wartość będącą jego własną nazwą (listing 3.9). Listing 3.9. Atrybut boolowski z pustym ciągiem jako wartością Podaj swoje imię: Podaj swoje imię:

Atrybuty autorskie Masz możliwość definiowania własnych atrybutów, o ile ich nazwy poprzedzone będą przedrostkiem data-. W listingu 3.10 widnieją przykłady takich atrybutów. Listing 3.10. Używanie własnych atrybutów elementów Podaj swoje imię:

Atrybuty autorskie są sformalizowaną wersją techniki używanej w HTML 4, gdzie przeglądarki ignorowały wszelkie atrybuty, których nie rozpoznawały. Atrybuty te poprzedza się przedrostkiem data-, aby zapobiec interferencjom z nazwami atrybutów, które mogą się pojawić w przyszłych wersjach HTML. Atrybuty autorskie przydają się w pracy z CSS (który omówię w rozdziale 4.) i JavaScript (który omówię w rozdziale 5.).

Tworzenie dokumentu HTML Elementy i atrybuty nie występują samodzielnie, lecz używa się ich do oznaczania treści dokumentu HTML. Najprostszym sposobem na utworzenie dokumentu HTML jest stworzenie pliku tekstowego z rozszerzeniem .html. Plik możesz następnie otworzyć w przeglądarce, czy to bezpośrednio z dysku, czy za pośrednictwem serwera. (Na potrzeby tej książki korzystam głównie z serwera o nazwie titan, którą będziesz często widywał w oknie przeglądarki na zrzutach ekranu).

Przeglądarki i klienty użytkownika O przeglądarce, zarówno w tym rozdziale, jak i przez większą część książki, piszę jako programie, dla którego jest przeznaczony tworzony przez nas HTML. To wygodny sposób myślenia o HTML i to właśnie najczęściej za pośrednictwem przeglądarek korzysta się z kodu HTML, ale nie jest to do końca ścisłe podejście. Klient użytkownika to zbiorcza nazwa programów i komponentów służących do przetwarzania kodu HTML. Choć przeglądarka jest najpowszechniejszym rodzajem klienta użytkownika, istnieją też inne rodzaje oprogramowania. Klienty użytkownika inne niż przeglądarki nadal są dość rzadkie, ale oczekuje się, że będą zyskiwać na popularności. Zwiększony nacisk na oddzielanie treści od prezentacji w HTML5 jest ważny, ponieważ uznaje się, że nie cała treść kodu HTML jest przedstawiana użytkownikom. I tak będę się w tej książce odnosił do przeglądarek, skoro są one najważniejszą i dominującą kategorią klientów, ale warto mieć na uwadze, że Twój kod w HTML5 będzie używany także przez innego rodzaju programy.

Dokument HTML ma określoną strukturę — konieczne jest umieszczenie w nim kilku kluczowych elementów. Większość przykładów w tej książce przedstawiam jako pełne dokumenty HTML — oznacza to, że możesz szybko i łatwo sprawdzić, jak dany element się wprowadza i jaki wywiera on wpływ. Elementy

45

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

z listingów objaśnię w kolejnych rozdziałach, ale na dobry początek oprowadzę Cię przez podstawowy dokument HTML. Odeślę Cię również do dalszych rozdziałów, w których będziesz mógł się zapoznać ze szczegółami.

HTML kontra XHTML Choć tematem tej książki jest HTML, niewłaściwe byłoby nie wspomnieć o XHTML (tj. HTML poprzedzonym literą X). Składnia HTML pozwala na robienie rzeczy, które w XML skutkowałyby tworzeniem błędnych dokumentów. Oznacza to, że przetworzenie dokumentu HTML przez standardowy parser XML mogłoby być trudne. Temu problemowi możesz zaradzić, korzystając z XHTML, który jest XML-ową serializacją HTML. Innymi słowy, chodzi o wyrażenie treści oraz elementów i atrybutów HTML kodem poprawnym dla standardu XML, który może zostać właściwie przetworzony przez parser XML. Możesz również tworzyć dokumenty wielojęzyczne, składające się z poprawnego kodu HTML i poprawnego XML, choć wtedy można korzystać jedynie z części ogółu elementów HTML. XHTML nie omawiam w tej książce szerzej, ale więcej na jego temat możesz przeczytać pod następującym adresem: http://wiki.whatwg.org/wiki/HTML_vs._XHTML.

Nadrzędna struktura Za ogólną strukturę dokumentu HTML odpowiadają dwa elementy: DOCTYPE i html, które widać w listingu 3.11. Listing 3.11. Nadrzędna struktura dokumentu HTML



46

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Przykład

W listingu podałem minimum metadanych, czyli element title. Wszystkie dokumenty HTML teoretycznie powinny zawierać element title, choć przeglądarki na ogół nie zwracają uwagi na braki w tym zakresie. Większość przeglądarek wyświetla zawartość elementu title w pasku menu swojego okna lub u góry zakładki, w której strona jest wyświetlana. Elementy head i title opisuję wyczerpująco w rozdziale 7. wraz z wszystkimi pozostałymi elementami metadanych, które można umieścić w elemencie head. „ Wskazówka W listingu widać, jak wstawiać komentarze w dokumencie HTML. Zaczyna się je od znacznika . Przeglądarka zignoruje wszystko, co jest zamieszczone pomiędzy nimi.

Poza tym, że element head zawiera elementy opisujące dokument HTML, służy on również do określania powiązań z zewnętrznymi zasobami (w rodzaju arkuszy CSS), definiowania stylów CSS typu inline (tj. zawartych w pliku HTML) oraz definiowania i wczytywania skryptów. Wszystkie z tych funkcji prezentuję w rozdziale 7.

Treść Trzecia i ostatnia część dokumentu to treść, którą umieszcza się w elemencie body (listing 3.13). Listing 3.13. Element body w dokumencie HTML



Lubię jabłka i pomarańcze.

Element body wskazuje przeglądarce, która część dokumentu ma być pokazana użytkownikowi. Rzecz jasna, ta książka w znacznej części dotyczy tego, co możesz w tymże elemencie umieścić. Dodawszy element body, uzyskałem szkielet dokumentu HTML, który będę wykorzystywał w większości przykładów.

Rodzice, dzieci, potomkowie i bracia Elementy HTML w dokumencie HTML trwają w określonych relacjach z innymi elementami. Element zawierający inny element jest rodzicem tego drugiego elementu. W listingu 3.13 element body jest rodzicem elementu code, ponieważ code znajduje się między znacznikiem otwierającym a zamykającym body. Analogicznie, element code jest dzieckiem elementu body. Element może mieć wiele dzieci, ale tylko jednego rodzica. Elementy mogą zawierać elementy, które również zawierają elementy. To również widać w listingu 3.13: element html zawiera element body, który zawiera z kolei element code. Elementy body i code są potomkami elementu html, ale jedynie element body jest dzieckiem elementu html. Dzieci są bezpośrednimi potomkami. Elementy o wspólnym rodzicu nazywamy braćmi. W listingu 3.13 elementy head i body są braćmi, ponieważ obydwa są dziećmi elementu html.

47

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Relacje pomiędzy elementami są w HTML bardzo istotne. Jak zobaczysz w punkcie poniżej, istnieją ograniczenia określające, jakie elementy mogą być względem siebie rodzicami i dziećmi. Ograniczenia te wyraża się w kategoriach typów elementów. Relacje między elementami są również istotne w CSS (który opiszę w rozdziale 4.) i jednym ze sposobów wyboru elementów, co do których poszczególne style mają być zastosowane, jest właśnie wskazywanie ich relacji na linii rodzic-dziecko. Wreszcie, kiedy dojdziemy do tematu obiektowego modelu dokumentu (DOM) w części IV, poszczególne elementy dokumentu będziesz wyszukiwał, poruszając się po drzewie dokumentu, które jest wyobrażeniem relacji pomiędzy elementami. Umiejętność odróżnienia potomków od braci jest ważna w świecie HTML.

Typy elementów Specyfikacja HTML5 określa trzy kategorie elementów: metadanych (ang. metadata), strukturalnych (ang. flow) i treściowych (ang. phrasing). Elementy metadanych służą do tworzenia podstawowej struktury dokumentu HTML oraz dostarczania przeglądarce informacji i wskazówek co do tego, jak dokument należy przetworzyć. Elementy metadanych opisuję w rozdziale 7. Pozostałe dwie kategorie są nieco inne — służą do wskazywania właściwych zestawień rodziców i dzieci danego elementu. Elementy treściowe są podstawowymi cegiełkami HTML. W rozdziale 8. znajdziesz opisy najczęściej używanych elementów treściowych. Kategoria elementów strukturalnych jest nadzbiorem elementów treściowych. Wszystkie elementy treściowe są więc także elementami strukturalnymi, lecz nie wszystkie elementy strukturalne są elementami treściowymi. Nie wszystkie elementy należą do którejś z kategorii elementów — są to mianowicie te, które nie mają szczególnego znaczenia lub których stosowanie odbywa się w warunkach o poważnie sprecyzowanych ograniczeniach. Przykładem takiego elementu z ograniczeniami jest element li, który określa pozycję listy i może przynależeć do jednego z trzech rodziców: ol (uporządkowana lista), ul (nieuporządkowana lista) lub menu (jak sama nazwa wskazuje — menu). Więcej o elemencie li przeczytasz w rozdziale 9. Przynależność wszystkich elementów do kategorii przedstawię Ci w ramach opisów, począwszy od rozdziału 6.

Encje HTML Jak widać na przykładach przedstawionych w tym rozdziale, pewne znaki mają w dokumencie HTML szczególne znaczenie — oczywistym przykładem są < i >. Czasami możesz mieć potrzebę użycia tych znaków w treści tak, by nie zostały zinterpretowane jako część kodu HTML. W tym celu musisz skorzystać z encji HTML. Encja jest kodem zastępującym w przeglądarce dany znak. Często wykorzystywane encje znajdziesz w tabeli 3.3. Tabela 3.3. Często używane encje HTML Znak

Nazwa encji

Numer encji




&

&



€

€

€

£

£

£

§

§

§

©

©

©

®

®

®

™

™

™

48

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Każdy znak specjalny ma numer encji, którym możesz przedstawić ów znak w treści, np. znak & numerem . Najpowszechniej stosowane znaki specjalne mają także własne nazwy, np.  and & znaczą dla przeglądarki to samo.

Globalne atrybuty HTML5 Opowiedziałem Ci wcześniej, jak konfigurować elementy przy użyciu atrybutów. Każdy element ma właściwe sobie atrybuty, zwane atrybutami lokalnymi. Kiedy zacznę szczegółowo opisywać elementy w rozdziale 6., podam Ci listę wszystkich lokalnych atrybutów poszczególnych elementów i wskażę, jak z nich korzystać. Każdy atrybut lokalny daje możliwość kontrolowania jakiegoś wyjątkowego aspektu funkcjonowania elementu. Istnieje też druga kategoria atrybutów — atrybuty globalne. Określają one zachowanie wspólne dla wszystkich elementów. Do każdego elementu możesz dodać każdy atrybut globalny, choć nie zawsze prowadzi to do sensownej lub użytecznej zmiany zachowania. W kolejnych punktach opiszę wszystkie atrybuty globalne i zademonstruję ich działanie. Niektóre z tych atrybutów związane są z szerszymi funkcjami HTML, które opiszę bardziej szczegółowo w dalszej części książki — w takich przypadkach odeślę Cię do właściwych rozdziałów.

Atrybut accesskey Atrybut accesskey pozwala na określenie jednego lub więcej skrótów klawiszowych służących do wybierania elementu na stronie. W listingu 3.14 wykorzystałem ten atrybut w prostym formularzu. O formularzach traktują rozdziały od 12. do 14., po których przeczytaniu nie od rzeczy byłoby do tego przykładu wrócić. Listing 3.14. Atrybut accesskey

Przykład

Imię:

Hasło:

W tym przykładzie dodałem atrybut accesskey do trzech elementów input; element input scharakteryzuję w rozdziałach 12. i 13. Chodzi tu o to, żeby pozwolić stałym użytkownikom strony poruszać się po często używanych elementach przy użyciu skrótów klawiszowych. Kombinacja klawiszy, którą uaktywnia się ustawieniem accesskey, różni się w zależności od platformy. W przypadku Windows należy jednocześnie nacisnąć klawisz Alt i wartość accesskey. Efekt zastosowania atrybutu accesskey widać na rysunku 3.5. Nacisnąłem Alt+I, aby uaktywnić pierwszy element input i wpisać nazwę użytkownika. Następnie nacisnąłem Alt+H, żeby przejść do drugiego elementu input i wpisać hasło. Naciśnięcie Alt+Z skutkuje naciśnięciem przycisku Zaloguj, zatwierdzając tym samym formularz.

49

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Rysunek 3.5. Efekt działania atrybutu accesskey

Atrybut class Atrybut class służy do klasyfikowania, czy też katalogowania elementów. Robi się to zwykle w celu umożliwienia wyszukiwania zawartych w dokumencie elementów przynależących do danej klasy lub zastosowania stylu CSS. W listingu 3.15 widać przykład wykorzystania atrybutu class. Listing 3.15. Atrybut class

Przykład

Strona Helionu

Strona W3C

Każdemu elementowi możesz przypisać wiele klas, oddzielając ich nazwy spacją. Nazwy utworzonych klas mogą być dowolne, ale warto dobrać znaczące nazwy, zwłaszcza jeśli w Twoim dokumencie ma ich być wiele. Atrybut class sam w sobie niczego nie robi. Na rysunku 3.6 widać kod HTML wyświetlony w przeglądarce. Jak widać, w ten sposób uzyskujemy jedynie kilka odnośników.

Rysunek 3.6. Para elementów, którym przypisano atrybut class Pierwszym sposobem na wykorzystanie atrybutu class jest stworzenie stylu przypisanego do jednej lub więcej zdefiniowanych klas. W listingu 3.16 widnieje przykład. Listing 3.16. Definiowanie stylu opartego na klasach



50

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Przykład

Strona Helionu

Strona W3C

W tym przykładzie przy użyciu elementu style zdefiniowałem dwa style — pierwszy przypisałem elementom przydzielonym do klasy class2, a drugi do class1. Element style omówię w rozdziale 7., a wprowadzenie do stosowania stylów i przypisywania ich elementom w różny sposób przedstawię w rozdziale 4. Kiedy wczytujesz w przeglądarce kod HTML, style nakładają się na elementy. Efekt widać na rysunku 3.7. Atutem używania klas do przypisywania stylów jest to, że nie musisz wielokrotnie podawać ustawień stylu przy każdym elemencie.

Rysunek 3.7. Atrybut class użyty do nakładania stylów Atrybut class można też wykorzystać w skrypcie. W listingu 3.17 widać przykład. Listing 3.17. Atrybut class w skrypcie

Przykład

Strona Helionu

Strona W3C



Skrypt w tym przykładzie wyszukuje wszystkie elementy przydzielone do klasy otherclass i nakłada na nie styl. Element script omówię w rozdziale 7., wszystkie cechy w rozdziałach od 19. do 24., a kwestię wyszukiwania elementów w dokumencie w rozdziale 26. Efekt zastosowania tego skryptu widać na rysunku 3.8.

Rysunek 3.8. Zastosowanie atrybutu class w skrypcie

Atrybut contenteditable Atrybut contenteditable jest nowością w HTML5 i pozwala użytkownikowi na zmianę treści strony. W listingu 3.18 znajdziesz prosty przykład. Listing 3.18. Zastosowanie atrybutu contenteditable

Przykład

Dziś pada deszcz

Atrybut contenteditable przypisałem elementowi p (który opiszę w rozdziale 9.). Przypisanie atrybutowi wartości true umożliwia użytkownikowi edycję zawartości elementu, a przypisanie mu wartości false z kolei dezaktywuje tę funkcję. (Jeżeli wartość nie jest podana, to element dziedziczy ustawienie po rodzicu). Efekt działania atrybutu widnieje na rysunku 3.9. Użytkownik może pisać po kliknięciu tekstu.

Rysunek 3.9. Włączenie możliwości edycji atrybutem contenteditable

52

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Atrybut contextmenu Atrybut contextmenu pozwala na zdefiniowanie menu kontekstowych elementów. Owe menu wyskakują, kiedy użytkownik je uaktywnia (np. kiedy użytkownik Windows naciska prawym klawiszem myszy). W chwili, kiedy to piszę, żadna przeglądarka nie obsługuje atrybutu contextmenu.

Atrybut dir Atrybut dir określa kierunek tekstu elementu. Obsługuje on dwie wartości: ltr (tekst od lewej do prawej) i rtl (tekst od prawej do lewej). W listingu 3.19 wykorzystano obydwie wartości. Listing 3.19. Zastosowanie atrybutu dir

Przykład

Tekst od prawej do lewej

Tekst od lewej do prawej

Efekt zastosowania atrybutu dir widać na rysunku 3.10.

Rysunek 3.10. Tekst wyświetlany od lewej do prawej i od prawej do lewej

Atrybut draggable Atrybut draggable jest częścią funkcji przeciągania i upuszczania w HTML5; służy do wskazywania, czy dany element można przeciągnąć. Przeciąganie i upuszczanie omówię szerzej w rozdziale 37.

Atrybut dropzone Atrybut dropzone jest częścią funkcji przeciągania i upuszczania w HTML5; jest uzupełnieniem opisanego powyżej atrybutu draggable. Obydwa atrybuty omówię w rozdziale 37.

Atrybut hidden Atrybut hidden jest atrybutem boolowskim, który wskazuje, że dany element nie jest w danej chwili istotny. Przeglądarki interpretują ten atrybut w sposób taki, że ukrywają opatrzony nim element. W listingu 3.20 widać przykład zastosowania atrybutu hidden.

53

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Listing 3.20. Zastosowanie atrybutu hidden

Przykład

Przełącz

Imię	Miasto
David Cameron	Londyn
Nicolas Sarkozy	Paryż

Rozwinąłem ten przykład odrobinę ponad konieczność. Utworzyłem element table zawierający element tr (określający rząd tabeli), któremu przydzieliłem atrybut hidden. Utworzyłem również element button, którego naciśnięcie wywołuje funkcję JavaScript toggleHidden podaną w elemencie script. Skrypt ów usuwa atrybut hidden, kiedy jest obecny, a dodaje go, kiedy go nie ma. Na razie nie łam sobie głowy nad tym, jak to działa. Elementy table, tr, th i td omówię w rozdziale 11., element script w rozdziale 7., a zdarzenia w rozdziale 30. Zrobiłem to wszystko po to, żeby przedstawić efekt zastosowania atrybutu hidden. Rysunek 3.11 przedstawia, co się dzieje po naciśnięciu przycisku.

Rysunek 3.11. Efekt usuwania i dodawania atrybutu hidden Przeglądarka w ogóle nie wyświetla elementów opatrzonych atrybutem hidden, zupełnie jakby ich wcale nie było w kodzie HTML. Z tego powodu na ekranie pojawia się tabela o mniejszej liczbie rzędów.

54

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Atrybut id Atrybut id służy do przypisywania elementom unikalnych identyfikatorów. Identyfikatory te często wykorzystuje się do nadawania stylów elementom i wybierania elementów w JavaScript. W listingu 3.21 widać przykład nadania stylu na podstawie wartości id atrybutu. Listing 3.21. Zastosowanie atrybutu id

Przykład

Strona Helionu

Strona W3C

Aby nałożyć styl na podstawie wartości atrybutu id, nazwę id należy w stylu poprzedzić znakiem #. Więcej szczegółów o selektorach CSS przedstawię w rozdziałach 17. i 18., a poszczególne style, jakie można nadać, w rozdziałach od 19. do 24. Efekt zastosowania stylu widać na rysunku 3.12.

Rysunek 3.12. Nadanie stylu na podstawie wartości atrybutu id elementu „ Wskazówka Atrybut id można również wykorzystywać do przenoszenia się do określonego miejsca w dokumencie. Wyobraź sobie dokument przyklad.html, który zawierałby element z atrybutem id o wartości mojelement — do owego elementu można by wtedy przejść, podając adres przyklad.html#mojelement. Ostatni człon adresu URL (czyli # wraz z wartością id elementu) określa się mianem identyfikatora fragmentu.

Atrybut lang Atrybut lang służy do określania języka, w jakim zapisana jest treść elementu. W listingu 3.22 widać przykład zastosowania tego atrybutu.

55

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Listing 3.22. Zastosowanie atrybutu lang

Przykład

Cześć, jak się masz?

Hello - how are you?

Bonjour - comment êtes-vous?

Wartością atrybutu lang musi być prawidłowy kod języka ISO. Szczegóły co do wskazywania języków znajdziesz na stronie http://tools.ietf.org/html/bcp47. Uważaj jednak: określanie języków bywa złożonym i niełatwym zadaniem. Atrybut lang ma za zadanie pomagać przeglądarce w odpowiednim wyświetlaniu elementów, np. poprzez podmianę cudzysłowów, ale także umożliwiać czytnikom ekranowym (lub innym narzędziom asystującym) przyjęcie właściwej wymowy słów. Atrybut lang może również posłużyć do wyboru treści w danym języku, np. w celu nałożenia na nie stylu lub wyświetlania jedynie treści w języku wybranym przez użytkownika.

Atrybut spellcheck Atrybut spellcheck służy do określania, czy przeglądarka ma sprawdzać pisownię treści elementu. Korzystanie z tego atrybutu ma sens tylko w przypadku elementów, które użytkownik może edytować, tak jak widać to w listingu 3.23. Element textarea opiszę w rozdziale 14. Listing 3.23. Zastosowanie atrybutu spellcheck

Przykład

Oto błendny tekst

Dopuszczalne wartości atrybutu spellcheck to true (która uaktywnia korektor pisowni) i false (która go dezaktywuje). Działanie korektora tekstu różni się w zależności od przeglądarki. Na rysunku 3.13 widać, jak to wygląda w Google Chrome — program sprawdza pisownię na bieżąco. W innych przeglądarkach użytkownik musi sam zażądać sprawdzenia tekstu.

Rysunek 3.13. Korektor pisowni w Chrome

56

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

„ Ostrzeżenie Korektory pisowni w większości najpopularniejszych przeglądarek obecnie ignorują opisany powyżej element lang. Program przeprowadzi korektę na podstawie języka systemu operacyjnego użytkownika albo języka określonego w osobnym ustawieniu przeglądarki.

Atrybut style Atrybut style pozwala bezpośrednio nadać styl CSS określonemu elementowi (w odróżnieniu od zastosowania odrębnego elementu style lub zewnętrznego arkusza stylu). Przykład jego zastosowania widać w listingu 3.24. Listing 3.24. Zastosowanie atrybutu style

Przykład

Odwiedź stronę Helionu



Style CSS opiszę szerzej w rozdziale 5. Więcej o dostępnych stylach dowiesz się z rozdziałów od 19. do 24.

Atrybut tabindex Atrybut tabindex pozwala na określenie kolejności, w jakiej zmienia się zaznaczenie elementów przy naciskaniu klawisza Tab, sprawiając tym samym, że przeglądarka ignoruje domyślną kolejność. Zastosowanie tego atrybutu widać w listingu 3.25. Listing 3.25. Zastosowanie atrybutu tabindex

Przykład

Imię:

Miasto:

Kraj:

Pierwszym zaznaczanym elementem jest ten z tabindex o wartości 1. Kiedy użytkownik naciska klawisz Tab, zaznaczenie przenosi się na element z tabindex o wartości 2 i tak dalej. tabindex o wartości -1 sprawia,

57

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

że element nie jest zaznaczany przy naciśnięciu Tab. Rezultatem podania takich wartości tabindex jest to, że przy naciskaniu klawisza Tab zaznaczenie przechodzi od pierwszego elementu input do trzeciego, a następnie do przycisku Prześlij (rysunek 3.14).

Rysunek 3.14. Kolejność zaznaczania określona atrybutem tabindex

Atrybut title Atrybut title zawiera dodatkowe informacje o elemencie, które przeglądarka standardowo wykorzystuje w chmurkach podpowiedzi. Zastosowanie title widać w listingu 3.26. Listing 3.26. Zastosowanie atrybutu title

Przykład

Odwiedź stronę Helionu

Na rysunku 3.15 widać, jak Google Chrome wykorzystuje wartość tego atrybutu.

Rysunek 3.15. Wartość atrybutu title wyświetlona jako chmurka podpowiedzi

58

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

Przydatne narzędzia HTML Wydaje mi się, że w pracy z HTML pomocne są tylko dwa narzędzia. Pierwsze z nich to dobry edytor HTML, który podświetla niepoprawne elementy i atrybuty i ogólnie wskazuje dobrą drogę. Jak wspomniałem w rozdziale 2., dobrze mi się pracuje z Komodo Edit, ale poza tym istnieje wiele edytorów, spośród których dobierzesz sobie coś pasującego do Twojego trybu pracy — upewnij się tylko, że obsługuje HTML5. Drugie narzędzie to funkcja Źródło strony, która występuje w większości przeglądarek. Możliwość przejrzenia kodu HTML dokumentu jest świetnym sposobem na sprawdzanie własnej pracy, a także daje sposobność do zapoznania się z cudzymi metodami.

Podsumowanie W tym rozdziale przedstawiłem Ci pokrótce strukturę i charakterystykę dokumentu HTML. Pokazałem Ci, jak oznaczać treść elementami HTML i jak stworzyć dokument HTML. Objaśniłem, jak skonfigurować sposób, w jaki przeglądarka interpretuje elementy, a także opisałem różnicę między atrybutami globalnymi a lokalnymi. Omówiłem wszystkie atrybuty globalne. Przedstawiłem podstawowe elementy dokumentu HTML oraz jego strukturę.

59

ROZDZIAŁ 3. „ WPROWADZENIE DO HTML

60

ROZDZIAŁ 4

Wprowadzenie do CSS

Kaskadowe arkusze stylów (CSS) służą do określania prezentacji (czyli wyglądu i formatowania) dokumentu HTML. W tym rozdziale pokażę Ci, jak tworzyć i nadawać style CSS. Wytłumaczę, dlaczego są to kaskadowe arkusze stylów, oraz ułożę fundamenty pod kolejne rozdziały. W tabeli 4.1 znajduje się streszczenie całego rozdziału. Tabela 4.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Zdefiniowanie stylu.

Użyj deklaracji właściwości i wartości.

4.1

Nałożenie stylu bezpośrednio na element.

Użyj atrybutu style do stworzenia stylu inline.

4.2

Utworzenie stylu, który można nadać wielu elementom.

Użyj elementu style, określ selektor oraz szereg deklaracji stylu.

4.3, 4.4

Utworzenie stylów, które można nadać wielu dokumentom HTML.

Utwórz zewnętrzny arkusz stylu i odnieś do niego elementem link.

4.5 – 4.9

Określenie, które właściwości stylów mają być zastosowane przy danym elemencie.

Określ kolejność kaskady dla źródła stylów i oblicz precyzję na potrzeby przypadków spornych.

4.10 – 4.12, 4.14 – 4.16

Anulowanie standardowej kaskady stylów.

Utwórz „ważny” styl.

4.13

Zastosowanie właściwości stylu określonej przez rodzica.

Użyj dziedziczenia właściwości.

4.17, 4.18

Określenie wartości właściwości względem innej właściwości.

Użyj względnej jednostki miary.

4.19 – 4.23

Dynamiczne obliczenie wartości właściwości.

Użyj funkcji calc.

4.24

Definiowanie i nadawanie stylów Styl CSS składa się z jednej lub więcej oddzielonych średnikami deklaracji. Każda deklaracja składa się z właściwości CSS oraz wartości, po której stoi średnik. W listingu 4.1 widnieje prosty styl. Listing 4.1. Prosty styl CSS background-color:grey; color:white

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Na rysunku 4.1 widnieją deklaracje, właściwości i wartości tego stylu.

Rysunek 4.1. Budowa stylu CSS Podany w tym przykładzie styl ma dwie deklaracje. Pierwsza nadaje właściwości background-color wartość grey, a druga wartość white właściwości color. Wybór właściwości CSS jest wielki, a każda z nich określa jakiś aspekt wyglądu elementów, które są przez nią określane. W rozdziałach od 19. do 24. omówię właściwości CSS i przedstawię efekty ich zastosowania.

Właściwości CSS występujące w tym rozdziale Do zademonstrowania działania kodu CSS muszę skorzystać z pewnych właściwości CSS, które dogłębnie opiszę dopiero w późniejszych rozdziałach. W tabeli 4.2 znajdziesz ich listę, krótkie opisy i odwołania do rozdziałów, w których znajdziesz więcej szczegółów. Tabela 4.2. Spis właściwości CSS Właściwość

Opis

Rozdział

background-color

Określa kolor tła elementu

19

border

Określa obramowanie elementu

19

color

Określa główny kolor elementu

24

font-size

Określa rozmiar tekstu elementu

22

height

Określa wysokość elementu

20

padding

Określa ilość miejsca pomiędzy treścią elementu a jego obramowaniem

20

text-decoration

Określa dekorację tekstu elementu, m.in. podkreślenie, które pojawia się w tym rozdziale

22

width

Określa szerokość elementu

20

Zastosowanie stylu inline Nie wystarczy zdefiniować styl — trzeba go jeszcze nałożyć, aby wskazać przeglądarce, na które elementy ów styl oddziałuje. Najbardziej bezpośrednim sposobem nałożenia stylu na element jest przypisanie owemu elementowi globalnego atrybutu style (opisanego w rozdziale 3.), tak jak to widać w listingu 4.2. Listing 4.2. Nadanie stylu przy użyciu globalnego atrybutu style

Przykład

Odwiedź stronę Helionu

62

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W tym dokumencie HTML znajdują się cztery elementy z treścią: dwa odnośniki (utworzone elementem a) oraz element p zawierający element span. Globalnym atrybutem style nadałem styl pierwszemu elementowi a, czyli odnośnikowi do strony Helionu. Więcej na temat elementów a, p i span przeczytasz w rozdziałach 8. i 9. — teraz jednak powinieneś się głównie zająć problemem nadawania stylów. Atrybut style oddziałuje jedynie na element, któremu został przypisany, co widać na rysunku 4.2.

Rysunek 4.2. Nałożenie stylu bezpośrednio na element Na rysunku widać rezultat zastosowania dwóch właściwości CSS. Właściwość background-color określa kolor tła elementu, a właściwość color główny kolor elementu. Styl nie wpłynął jednak na wygląd treści pozostałych dwóch elementów.

Religia CSS a fanatycy Temat CSS zdaje się przyciągać oszołomów. Praktycznie każda dyskusja internetowa o tym, jak uzyskać pewien efekt przy użyciu CSS, przeobraża się w kłótnię co do tego, jak to zrobić prawidłowo. Nie mam czasu dla takich ludzi. Prawidłowe rozwiązywanie problemów polega na wykorzystaniu dostępnej wiedzy i narzędzi do obsłużenia jak największej liczby użytkowników. Perfekcjonizm w pracy z CSS jest jałowy. Radzę Ci unikać takich kłótni i po prostu zająć się stosowaniem i rozwijaniem sztuczek i technik, które są efektywne i Cię cieszą.

Tworzenie osadzonego stylu Nakładanie stylów na pojedyncze elementy bywa użyteczne, ale jest mało wydajne w przypadku skomplikowanych dokumentów, wymagających zastosowania dziesiątek różnych stylów. Nie dość, że trzeba przypisać elementom właściwe style, to jeszcze trzeba uważnie aktualizować kod — a łatwo przy tym o błąd. Zamiast tego możesz skorzystać z elementu style (w odróżnieniu od atrybutu style) do zdefiniowania osadzonego stylu i wskazać przeglądarce, którym elementom ma on być przypisany, używając do tego selektora CSS. W listingu 4.3 widać zastosowanie elementu style z prostym selektorem CSS. Listing 4.3. Zastosowanie elementu style

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Element style i jego atrybuty opiszę w rozdziale 7. W tym rozdziale skupimy się na definiowaniu stylu w elemencie style. Tutaj też używa się deklaracji, lecz umieszcza się je w nawiasach klamrowych ({ i }) poprzedzonych selektorem (rysunek 4.3).

Rysunek 4.3. Budowa stylu zdefiniowanego w elemencie style Selektorem w tym przykładzie jest a; wskazuje przeglądarce, by nadała styl każdemu elementowi a w dokumencie. Rezultat widać na rysunku 4.4.

Rysunek 4.4. Rezultat zastosowania selektora W pojedynczym elemencie style możesz zdefiniować wiele stylów — wystarczy zdefiniować kilka selektorów i przypisanych im deklaracji. W listingu 4.4 widać element style zawierający dwa style. Listing 4.4. Definiowanie wielu stylów w pojedynczym elemencie style

Przykład

64

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Selektorem nowego stylu jest span, co oznacza, że przeglądarka nałoży styl — zawierający właściwości border i padding — na wszystkie elementy span w dokumencie. Właściwość border tworzy obramowanie wokół wybranego elementu, a właściwość padding tworzy odstęp wokół owego elementu. Rezultat widać na rysunku 4.5. Występujące w tych przykładach selektory i własności są bardzo proste. Pełen zakres selektorów omówię w rozdziałach 17. i 18., a właściwości w rozdziałach 19. i 20.

Rysunek 4.5. Zastosowanie wielu stylów

Zastosowanie zewnętrznego arkusza stylu Zamiast definiować ten sam zestaw stylów na każdej stronie HTML, możesz utworzyć osobny arkusz stylu. Jest to osobny plik, przeważnie z rozszerzeniem .css, w którym umieszcza się style. W listingu 4.5 widnieje zawartość pliku styles.css, który znajdziesz w dołączonym do tego rozdziału kodzie źródłowym na stronie www.helion.pl/ksiazki/htm5pe.htm. Listing 4.5. Plik styles.css a { background-color:grey; color:white } span { border: thin black solid; padding: 10px; }

W arkuszu stylu nie musisz zamieszczać elementu style — wystarczy podać selektor i deklaracje każdego stylu, jakiego potrzeba. Styl wprowadzisz do dokumentu HTML elementem link, tak jak to pokazano w listingu 4.6. Listing 4.6. Importowanie zewnętrznego arkusza stylu

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

65

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Odwiedź stronę W3C

Możesz wprowadzić tyle arkuszy stylów, ile tylko chcesz; każdy element link może zawierać odnośnik do jednego arkusza. Element link opiszę szerzej w rozdziale 7. Podobnie jak z elementem style, kolejność importowania arkuszy stylów jest istotna, jeżeli definiujesz dwa style dla jednego selektora. Nałożony zostanie ten, który wczytuje się ostatni.

Importowanie z innych arkuszy stylów Styl możesz importować do arkusza z drugiego arkusza deklaracją @import. W celu przedstawienia tej funkcji utworzyłem drugi arkusz, o nazwie combined.css, którego zawartość widnieje w listingu 4.7. Listing 4.7. Plik combined.css @import "styles.css"; span { border: medium black dashed; padding: 10px; }

Możesz importować dowolną liczbę arkuszy; każdy trzeba podawać w osobnej deklaracji @import. Deklaracje @import muszą znajdować się u góry arkusza, przed jakimikolwiek deklaracjami stylów. Do arkusza combined.css importowałem styles.css, a następnie zdefiniowałem nowy styl dla elementów span. W listingu 4.8 widnieje arkusz dokumentu HTML z odnośnikiem do pliku combined.css. Listing 4.8. Odnośnik do arkusza stylu z importowanym arkuszem

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Deklaracja @import w combined.css importuje obydwa style zdefiniowane w arkuszu styles.css; z kolei zawarty w combined.css styl odnoszący się do elementów span anuluje styl określony dla elementów span w styles.css. Rezultat widać na rysunku 4.6.

Rysunek 4.6. Importowanie stylów z innego arkusza stylu

66

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Deklaracja @import nie jest powszechnie używana. Jest tak częściowo dlatego, że jest mało znana, ale również ze względu na to, że przeglądarki zwykły działać wolniej przy interpretowaniu deklaracji @import, niż kiedy przetwarzają szereg elementów link na podstawie kaskady stylów (którą omówię w następnym podrozdziale).

Określanie kodowania znaków arkusza stylu Jedyne, co może się znaleźć w arkuszu CSS przed deklaracją @import, to deklaracja @charset, określająca kodowanie znaków arkusza stylu. W listingu 4.9 widać przykład zdefiniowanego kodowania UTF-8, które występuje najpowszechniej. Listing 4.9. Określenie kodowania znaków arkusza stylu @charset "UTF-8"; @import "styles.css"; span { border: medium black dashed; padding: 10px; }

Jeżeli nie określisz kodowania znaków, przeglądarka użyje kodowania podanego w dokumencie HTML, który wczytał arkusz stylu. Jeżeli w dokumencie HTML nie określono kodowania, to przeglądarka domyślnie skorzysta z UTF-8.

Kaskadowość i dziedziczenie stylów Kluczem do zrozumienia arkuszy stylu jest zrozumienie ich kaskadowości i dziedziczenia. Kaskadowość i dziedziczenie wskazują przeglądarce, jakie wartości ma przypisywać właściwościom przy wyświetlaniu elementu. Każdy element ma szereg właściwości CSS, które przeglądarka wykorzystuje podczas wyświetlania strony. Przy każdej z tych właściwości przeglądarka musi przejrzeć wszystkie dostępne jej źródła stylów. Zapoznałeś się już z trzema różnymi sposobami definiowania stylów (inline, przez osadzenie oraz w zewnętrznym arkuszu), ale powinieneś też się zapoznać z dwoma innymi źródłami stylów.

Style przeglądarek Style przeglądarek (a właściwie style klientów użytkownika) są domyślnymi stylami, które przeglądarka nakłada na elementy, kiedy żaden inny styl nie jest podany. Style te różnią się nieco w poszczególnych przeglądarkach, ale w znacznej mierze są do siebie podobne. Przykładowo, zastanów się, jak przeglądarka wyświetla element a, czyli odnośnik, kiedy w dokumencie HTML nie ma sprecyzowanego innego stylu. W listingu 4.10 widnieje prosty, pozbawiony stylów dokument HTML. Listing 4.10. Pozbawiony stylów dokument HTML

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

67

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Listing ten jest innym wariantem poprzedniego przykładu, pozbawionego jakichkolwiek stylów. Wygląd elementów a w przeglądarce widać na rysunku 4.7.

Rysunek 4.7. Domyślny styl odnośników Do tego stopnia jesteśmy przyzwyczajeni do stylu, jaki przeglądarki przypisują odnośnikom, że nawet nie zwracamy na niego uwagi. Gdybyś się jednak przez chwilę przyjrzał, to zwróciłbyś uwagę na wygląd owego stylu. Treść odnośnika wyświetlana jest na niebiesko i z podkreśleniem. Można z tego wywnioskować, że przeglądarka używa stylu przypominającego ten z listingu 4.11. Listing 4.11. Domyślny styl przeglądarkowy elementów a a { color: blue; text-decoration: underline; }

Przeglądarki nie mają domyślnych stylów dla wszystkich elementów HTML, ale wyświetlają wiele elementów na podstawie takich własnych stylów. W każdym rozdziale, w którym opisuję elementy HTML, zamieszczam typowy domyślny styl, jakiego można oczekiwać od przeglądarek. Opis elementu a znajdziesz w rozdziale 8.

Style użytkowników Większość przeglądarek pozwala użytkownikom na definiowanie własnych arkuszy stylów. Określa się je mianem stylów użytkowników. Nie jest to często stosowana funkcja, ale dla tych, którzy decydują się tworzyć własne arkusze, sama możliwość często bywa bardzo ważna — po części dlatego, że pozwala to na zwiększenie dostępności stron. Każda przeglądarka używa własnego mechanizmu obsługi stylów użytkownika. Google Chrome tworzy plik Custom.css w katalogu C:\Users\nazwa_użytkownika\AppData\Local\Google\Chrome\User Data\ Default\User StyleSheets. Wszelkie style dodane do tego pliku nakładane są na wszystkie odwiedzane przez użytkownika strony i podlegają zasadom kaskadowania, które opiszę w następnym punkcie. Listing 4.12 w ramach prostej demonstracji przedstawia styl, który dodałem do mojego pliku Custom.css. Listing 4.12. Dodanie stylu do arkusza użytkownika a { color: white; background:grey; text-decoration: none; padding: 2px; }

Styl ten przypisany jest elementom a i niweluje oddziaływanie domyślnego stylu przeglądarki. Na rysunku 4.8 widać rezultat nałożenia mojego stylu użytkownika po odświeżeniu dokumentu HTML z listingu 4.9.

68

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Rysunek 4.8. Definiowanie stylów użytkownika

Kaskadowość stylów Skoro już widziałeś wszystkie źródła stylów, które przeglądarka musi rozważyć, możesz przyjrzeć się kolejności, w której będzie ona szukać wartości właściwości przy wyświetlaniu elementów. Kolejność jest bardzo jasno określona: 1. Style inline (zdefiniowane przy użyciu globalnego atrybutu style elementu). 2. Style osadzone (zdefiniowane w elemencie style). 3. Zewnętrzne style (importowane elementem link). 4. Style użytkownika (zdefiniowane przez użytkownika). 5. Style przeglądarki (style domyślnie stosowane przez przeglądarki). Wyobraź sobie, że użytkownik chce wyświetlić element a. Przeglądarka musi w takiej sytuacji dowiedzieć się, jakiego koloru ma być tekst. Aby znaleźć odpowiedź na to pytanie, musi pobrać wartość właściwości color. Przeglądarka sprawdzi w pierwszej kolejności, czy interpretowany element zawiera styl inline, który określałby wartość jego właściwości color, tak jak poniżej: Odwiedź stronę Helionu

Jeżeli nie ma żadnego stylu inline, to przeglądarka poszuka elementu style, który zawierałby styl odnoszący się do elementu, tak jak poniżej:

Jeżeli nie ma żadnego elementu style, to przeglądarka sprawdza arkusze stylów importowane elementem link i tak dalej, aż znajdzie wartość własności color. Jeżeli żadnej wartości nie znajdzie, to użyje wartości wskazanej w domyślnym stylu przeglądarki. Pierwsze trzy źródła właściwości (style inline, style osadzone i arkusze stylów) określa się zbiorczo mianem stylów autorskich. Style zdefiniowane w arkuszu stylu użytkownika nazywa się stylami użytkownika, a style zdefiniowane przez przeglądarkę stylami przeglądarki.

Zmiana kolejności ważnymi stylami Standardową kolejność kaskady możesz zmodyfikować, oznaczając wartości właściwości jako ważne, tak jak w listingu 4.13. Listing 4.13. Oznaczanie właściwości stylów jako ważne



69

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Poszczególne wartości możesz oznaczyć jako ważne, dodając do deklaracji człon !important. Przeglądarka traktuje ważne style preferencyjnie, niezależnie od miejsca, w którym są zdefiniowane. Rezultat wprowadzenia „ważności” właściwości widać na rysunku 4.9, gdzie osadzona wartość właściwości color niweluje działanie wartości podanej inline (co może trudno dostrzec na stronicy książki).

Rysunek 4.9. Ważne wartości właściwości niwelują wartości właściwości podanych inline „ Wskazówka Jedyne, co może zniwelować działanie podanej przez Ciebie ważnej wartości, to ważna wartość zdefiniowana w arkuszu użytkownika. Przy standardowych wartościach style autorskie mają pierwszeństwo przed stylami użytkownika, lecz w przypadku ważnych wartości zachowanie to jest odwrócone.

Precyzja i ocena kolejności w przypadkach spornych Przyjmijmy, że trafiasz na sporną sytuację: dwa style odnoszące się do jednego elementu zdefiniowane są na tym samym poziomie i obydwa zawierają wartości tej właściwości, którą przeglądarka usiłuje wyświetlić. Przeglądarka ocenia precyzję obydwu stylów i wybiera bardziej precyzyjny. Przeglądarka określa precyzję stylu na podstawie trzech cech: 1. Liczby wartości id w selektorze stylu. 2. Liczby innych atrybutów i pseudoklas w selektorze. 3. Liczby nazw elementów i pseudoelementów w selektorze. Tworzenie selektorów o wszystkich tych cechach omówię w rozdziałach 17. i 18. Przeglądarka łączy wartości z każdego przeliczenia i używa wartości właściwości z najbardziej precyzyjnego stylu. W listingu 4.14 znajduje się bardzo prosty przykład precyzji. Listing 4.14. Precyzja stylów



70

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Do obliczania precyzji używa się zestawienia liczbowego a-b-c, w którym każda zmienna jest sumą wyliczenia odpowiedniej cechy. Nie jest to liczba trzycyfrowa — styl jest bardziej precyzyjny, kiedy jego wartość a jest największa. Przeglądarka porównuje wartości b tylko wtedy, kiedy wartości a dwóch stylów są równe — wtedy bardziej precyzyjny jest styl o wyższej wartości b. Z kolei jeżeli zarówno wartości a, jak i b są równe, to przeglądarka przechodzi do porównania wartości c. Oznacza to, że wynik 1-0-0 wskazuje na większą precyzję niż wynik 0-5-5. W tym przykładzie selektor a.myclass zawiera atrybut klasy, co oznacza, że precyzja tego stylu wynosi 0-1-0 (0 wartości id + 1 inny atrybut + 0 nazw elementów). Precyzja drugiego stylu wynosi 0-0-0 (nie ma w nim żadnej wartości id, innych atrybutów ani nazw elementów). Przeglądarka znajduje wartość właściwości color przy interpretowaniu elementu a, któremu przypisano klasę myclass. Przy wszystkich pozostałych elementach a zastosowana jest wartość z drugiego stylu. Rezultat doboru i wykorzystania wartości przez przeglądarkę w tym przykładzie widać na rysunku 4.10.

Rysunek 4.10. Przydzielanie wartości ze stylów na podstawie precyzji Kiedy wartości definiowane są przez style o jednakowej precyzji, przeglądarka dobiera wartość na podstawie kolejności, w jakiej są zdefiniowane, tj. wykorzystuje wartość zdefiniowaną jako ostatnią. W listingu 4.15 widać dokument, który zawiera dwa równie precyzyjne style. Listing 4.15. Równie precyzyjne style

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Obydwa style zdefiniowane w elemencie style mają jednakową precyzję. Przeglądarka, parsując drugi element a na stronie, wybierze wartość white dla właściwości color, ponieważ została ona zdefiniowana w ostatnim stylu. Rezultat widać na rysunku 4.11.

Rysunek 4.11. Wybór wartości właściwości na podstawie kolejności zdefiniowanych stylów Możesz odwrócić kolejność stylów, żeby się przekonać, że to właśnie na jej podstawie przeglądarka dobrała wartość dla właściwości color, tak jak widać to w listingu 4.16. Listing 4.16. Odwrócenie kolejności zdefiniowanych stylów

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Jak można się było spodziewać, wartość dobrana przez przeglądarkę dla właściwości color zmieniła się na black, co widać na rysunku 4.12. Dobór wartości opiera się na precyzji i kolejności konkretnych właściwości. W podanych tutaj przykładach zdefiniowałem także wartość właściwości background. Jako że wartości tej nie podawałem

72

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Rysunek 4.12. Rezultat zmiany kolejności zdefiniowanych stylów w obydwu stylach, nie zachodził pod tym względem żaden konflikt między stylami i przeglądarka nie musiała wybierać spośród wartości.

Dziedziczenie Jeżeli przeglądarka nie może znaleźć wartości dla właściwości w którymś z dostępnych stylów, to posłuży się zasadą dziedziczenia, tj. użyje wartości, jaką owa właściwość ma w rodzicu danego elementu. Przykład tego widać w listingu 4.17. Listing 4.17. Dziedziczenie właściwości

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W tym przykładzie interesują nas właściwości, jakie przeglądarka nadaje elementowi span, którego rodzicem jest element p. Wygląd dokumentu w przeglądarce widać na rysunku 4.13.

Rysunek 4.13. Zastosowanie dziedziczonych wartości właściwości

73

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Nigdzie w tym dokumencie nie podałem wartości właściwości color w stylu odnoszącym się do elementu span, lecz przeglądarka wyświetliła tekst z użyciem wartości white. Wartość ta została odziedziczona po rodzicu — elemencie p. Dezorientować może to, że nie wszystkie własności CSS są dziedziczone. Na ogół dziedziczone są te, które odnoszą się do wyglądu elementu (np. koloru tekstu, szczegółów fonta). Nie są dziedziczone te, które odnoszą się do położenia elementu na stronie. Dziedziczenie możesz wymusić, umieszczając w stylu specjalną wartość inherit — jednoznacznie polecasz wtedy przeglądarce, by przypisała właściwości wartość, jaka występuje u rodzica. W listingu 4.18 widać przykład zastosowania wartości inherit. Listing 4.18. Zastosowanie specjalnej wartości inherit

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W tym przykładzie utworzyłem styl odnoszący się do elementów span. Elementy te dziedziczą wobec tego wartości właściwości border ich rodziców. Rezultat widać na rysunku 4.14. Wokół elementu span i elementu p, w którym jest zagnieżdżony, widać teraz obramowanie.

Rysunek 4.14. Zastosowanie wartości inherit

Praca z kolorami w CSS Kolory są bardzo istotnym elementem stron internetowych. W CSS możesz dobierać kolory na różne sposoby. Najłatwiej skorzystać z predefiniowanych nazw kolorów lub wskazać dziesiętną bądź szesnastkową wartość czerwonego, zielonego i niebieskiego. Wartości dziesiętne oddziela się przecinkami, a szesnastkowe zwykle podaje się po znaku # — np. #ffffff, co oznacza kolor biały. W tabeli 4.3 widnieją niektóre predefiniowane nazwy kolorów wraz z ich dziesiętnymi i szesnastkowymi odpowiednikami.

74

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Tabela 4.3. Wybrane kolory Nazwa koloru

Wartość szesnastkowa

Wartość dziesiętna

black

#000000

0,0,0

silver

#C0C0C0

192,192,192

gray

#808080

128,128,128

white

#FFFFFF

255,255,255

maroon

#800000

128,0,0

red

#FF0000

255,0,0

purple

#800080

128,0,128

fuchsia

#FF00FF

255,0,255

green

#008000

0,128,0

lime

#00FF00

0,255,0

olive

#808000

128,128,0

yellow

#FFFF00

255,255,0

navy

#000080

0,0,128

blue

#0000FF

0,0,255

teal

#008080

0,128,128

aqua

#00FFFF

0,255,255

Są to nazwy podstawowych kolorów, lecz CSS obsługuje także rozszerzoną paletę barw. Nazw wszystkich kolorów jest zbyt wiele, by je tutaj wszystkie wymienić, ale pełną listę znajdziesz na stronie www.w3.org/TR/css3-color. Wśród tych barw znajduje się wiele odcieni, w tym również drobnych wariacji kolorów z podstawowej listy. W tabeli 4.4 znajduje się przykładowa paleta odcieni szarości. Tabela 4.4. Wybrane kolory z rozszerzonej palety Nazwa koloru

Wartość szesnastkowa

darkgray

#a9a9a9

Wartość dziesiętna 169,169,169

darkslategray

#2f4f4f

47,79,79

dimgray

#696969

105,105,105

gray

#808080

128,128,128

lightgray

#d3d3d3

211,211,211

lightslategray

#778899

119,136,153

slategray

#708090

112,128,144

Szczegółowe wskazywanie kolorów Podawanie nazw kolorów i prostych wartości szesnastkowych nie jest jedynym sposobem wskazywania barw. Istnieją jeszcze inne możliwości dobierania kolorów. W tabeli 4.5 znajduje się opis każdej z nich.

Długości w CSS Wiele właściwości CSS wymaga sprecyzowania długości. Przykładem jest m.in. właściwość width, która określa szerokość elementu, oraz właściwość font-size, która określa wielkość tekstu, jakim zapisana jest treść elementu. W listingu 4.19 znajduje się styl, który wykorzystuje obydwie te właściwości.

75

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Tabela 4.5. Funkcje koloru w CSS Funkcja

Opis

Przykład

rgb(r, g, b)

Wskazuje kolor w modelu RGB.

color: rgb(112, 128, 144)

rgba(r, g, b, a)

Wskazuje kolor w modelu RGB wraz z dodatkową wartością alpha, która określa przezroczystość. Wartość 0 oznacza całkowitą przezroczystość; wartość 1 całkowite krycie.

color: rgba(112, 128, 144, 0.4)

hsl(h, s, l)

Wskazuje kolor w modelu HSL.

color: hsl(120, 100%, 22%)

hsla(h, s, l, a)

Tak samo jak z HSL, ale z dodatkową wartością alpha, która określa przezroczystość.

color: hsla(120, 100%, 22%, 0.4)

Listing 4.19. Określanie jednostek miary w wartościach właściwości

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Kiedy podajesz długość, zestawiasz liczbę jednostek z oznaczeniem jednostki bez oddzielania ich od siebie spacją bądź innymi znakami. W listingu nadałem właściwości width wartość 5cm, czyli 5 jednostek określonych identyfikatorem cm (oznaczającym centymetry). Jednocześnie właściwości font-size nadałem wartość 20pt, czyli 20 jednostek określonych identyfikatorem pt (oznaczającym punkty, które omówię poniżej). W CSS istnieją dwa rodzaje jednostek miary długości — bezwzględne i względne, odnoszące się do innych właściwości. Obydwa rodzaje omówię w kolejnych punktach.

Długości bezwzględne W powyższym listingu użyłem jednostek cm i pt, które są przykładami jednostek bezwzględnych. Tych jednostek miary używa się także poza ekranem komputera. CSS obsługuje pięć rodzajów jednostek absolutnych, które opisuję w tabeli 4.6. W obrębie stylu możesz używać różnych jednostek, a także różnych typów jednostek — zarówno względnych, jak i bezwzględnych. Jednostki bezwzględne przydają się, jeżeli orientujesz się, jak treść będzie prezentowana, czyli np. kiedy projektujesz na potrzeby druku. W swoich stylach CSS jednak nie korzystam z nich często. Jednostki względne wydają mi się bardziej elastyczne i łatwiejsze w dalszej obsłudze. Rzadko tworzę zasoby, których miary muszą odpowiadać miarom spoza świata wirtualnego.

76

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Tabela 4.6. Bezwzględne jednostki miary w CSS Identyfikator jednostki miary

Opis

in

Cale

cm

Centymetry

mm

Milimetry

pt

Punkty (jeden punkt to 1/72 cala)

pc

Pica (jeden pica to 12 punktów)

„ Wskazówka Być może zastanawiasz się, dlaczego w tabeli jednostek bezwzględnych nie ma pikseli. Otóż w CSS próbowano traktować piksele jako względną jednostkę miary, choć — o czym opowiem w dalszej części rozdziału — nie do końca tak wyszło. Więcej na ten temat przeczytasz w punkcie „Piksele”.

Długości względne Określanie i wprowadzanie długości względnych jest bardziej skomplikowane, a ich jednoznaczne zdefiniowanie wymaga stosowania ścisłego języka. Jednostka względna mierzona jest w odniesieniu do jakiejś innej jednostki. Niestety, język specyfikacji CSS nie jest odpowiednio ścisły (co jest zresztą problemem CSS od lat). Oznacza to, że w CSS istnieje wiele ciekawych i przydatnych względnych jednostek miar, lecz niektórych nie można używać, ponieważ nie można być pewnym spójnej i powszechnej ich obsługi w przeglądarkach. W tabeli 4.7 znajdują się względne jednostki miary w CSS, na których można polegać w pracy z popularnymi przeglądarkami. Tabela 4.7. Względne jednostki miary w CSS Identyfikator jednostki miary

Opis

em

Względna wobec wielkości fonta elementu

ex

Względna wobec wysokości x fonta elementu

rem

Względna wobec wielkości fonta głównego elementu

px

Liczba pikseli CSS (przy założeniu, że ekran ma rozdzielczość 96 dpi)

%

Procent wartości innej właściwości W poniższych punktach objaśnię Ci, jak wyrażać długości tymi jednostkami miary.

Jednostki względne wobec wielkości fonta Używając jednostek względnych, w rzeczywistości określasz wielokrotności innych miar. W pierwszej kolejności przyjrzymy się jednostkom względnym wobec wielkości fonta (listing 4.20). Listing 4.20. Zastosowanie jednostek względnych

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Lubię także mango i wiśnie.

Odwiedź stronę W3C

W tym przykładzie nadałem właściwości height wartość 2em — wskazuje to, że elementy p mają być wyświetlane tak, by ich wysokość była dwukrotnością wysokości tekstu. Owa wielokrotność obliczana jest kolejno dla wszystkich wyświetlanych elementów. W elemencie style podałem domyślną wartość 15pt dla właściwości font-size; ponadto drugiemu elementowi p nadałem inline wartość 12pt. Wygląd tych elementów w przeglądarce widać na rysunku 4.15.

Rysunek 4.15. Rezultat zastosowania miar względnych Względnych jednostek miary możesz też używać do wyrażania wielokrotności innych wartości względnych. W listingu 4.21 znajduje się właściwość height o wartości wyrażonej jednostkami em. Jednostki em odnoszą się do wartości font-size, którą podałem w jednostkach rem. Listing 4.21. Zastosowanie jednostek opartych na innych wartościach względnych

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

78

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Jednostka rem odnosi się do rozmiaru fonta określonego dla elementu html, zwanego również elementem głównym. W tym przykładzie wybrałem dla rozmiaru fonta wartość 0,4 centymetra. Zrobiłem to w elemencie style, choć równie dobrze mógłbym utworzyć ten styl inline, zamieszczając atrybut style bezpośrednio w elemencie html. Wartość font-size w drugim stylu wynosi 2rem — oznacza to, że rozmiar tekstu w każdym elemencie, którego ta wartość dotyczy, będzie dwukrotnie większy od tekstu elementu głównego, tj. będzie wynosił 0,8 centymetra. Zawarta w tym samym stylu właściwość height ma wartość 2em, czyli dwukrotność. Przeglądarka wobec tego wyświetla tekst elementów p w wielkości 0,8 centymetra, podczas gdy same elementy są wysokie na 1,6 centymetra. Wykorzystanie tych stylów w przeglądarce można podejrzeć na rysunku 4.16.

Rysunek 4.16. Określanie wartości względnych wobec innych wartości względnych Trzecią jednostką względną, która odnosi się do wielkości tekstu, jest ex, oznaczający wysokość x danego fonta. Wysokość x to odległość między linią podstawową a środkową kroju, ale na ogół jest równa wysokości litery x — stąd nazwa. 1ex z reguły wynosi ok. 0.5em.

Piksele Piksele działają w CSS inaczej, niż mógłbyś się spodziewać. Termin piksel zazwyczaj odnosi się do najmniejszej jednostki graficznej wyświetlacza — pojedynczego elementu. W CSS piksel definiuje się natomiast inaczej: Piksel referencyjny to postrzegana wielkość jednego piksela na urządzeniu o rozdzielczości 96 dpi, znajdującym się od użytkownika w odległości wyciągniętej ręki. CSS jest pełen takich niejasnych definicji. Nie chcę narzekać, ale specyfikacje odnoszące się do długości ramienia użytkownika są problematyczne. Szczęśliwie, popularne przeglądarki ignorują definicję pikseli według CSS i uznają jeden piksel za 1/96 cala. Jest to standardowa rozdzielczość w Windows. Przeglądarki działające na platformach z wyświetlaczami o innej rozdzielczości zwykle przekładają wartości tak, by piksel wciąż miał wielkość ok. 1/96 cala. „ Wskazówka Choć nie przyda Ci się to na wiele, z definicją piksela w CSS możesz się zapoznać pod adresem www.w3.org/TR/CSS21/syndata.html#length-units.

Ostatecznie, choć piksele w CSS mają być względną jednostką miary, to przeglądarki traktują je jako jednostki bezwzględne. Listing 4.22 ukazuje przykład podania pikseli w stylu. Listing 4.22. Wartości pikselowe w stylu

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W tym przykładzie wartości font-size i width podałem w pikselach. Rezultat wyświetlenia tego stylu w przeglądarce widać na rysunku 4.17.

Rysunek 4.17. Zastosowanie pikseli jako jednostki miary „ Wskazówka Choć często używam pikseli w CSS, jest to raczej kwestia przyzwyczajenia. Sądzę, że jednostki em pozwalają na większą elastyczność — kiedy chcę wprowadzić jakąś zmianę, to wystarczy zmienić rozmiar tekstu, a reszta stylu sama się do tego dopasowuje. Pamiętaj, że choć piksele CSS są teoretycznie jednostkami względnymi, to w praktyce funkcjonują jako jednostki bezwzględne, przez co ich stosowanie bywa mało elastyczne.

Procenty Wartość możesz podać również jako procent wartości innej właściwości. Służy do tego znak %, który widnieje w listingu 4.23. Listing 4.23. Podawanie wartości jako odsetka wartości innej właściwości

Przykład

80

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Używanie procentów jako jednostki miary wiąże się jednak z dwoma problemami. Po pierwsze, nie każdej właściwości można przypisać taką wartość. Po drugie, każda właściwość, której można przypisać wartość procentową, odnosi się do jakiejś innej określonej właściwości. Przykładowo, właściwość font-size odnosi się do dziedziczonej wielkości tekstu, a właściwość width do szerokości bloku zawierającego. Może się to wydawać bardziej skomplikowane, niż rzeczywiście jest. Istotne i często wspominane pojęcie bloku zawierającego omówię w rozdziale 16. W rozdziale 19., w którym zacznę opisywać właściwości CSS, objaśnię również, które z nich obsługują procenty i z jakich wartości owe procenty są wyliczane.

Nieobsługiwane powszechnie jednostki miary CSS, poza tymi miarami względnymi, które podałem, używa również jednostek, które jeszcze nie są powszechnie obsługiwane. W tabeli 4.8 widnieje spis tych nowych jednostek. Staną się one przydatne, kiedy zaczną być powszechnie i spójnie obsługiwane, ale do tego czasu należy unikać korzystania z nich. Tabela 4.8. Względne jednostki miary w CSS, których przeglądarki nie obsługują Identyfikator jednostki miary

Opis

gd

Względna wobec siatki. Nie jest powszechnie obsługiwana, ponieważ odnosi się do pewnych właściwości, które nie są dobrze zdefiniowane w specyfikacjach CSS.

vw

Względna wobec szerokości okna roboczego — każde vw to 1/100 szerokości okna roboczego dokumentu, zazwyczaj okna przeglądarki.

vh

Względna wobec wysokości okna roboczego — każde vh to 1/100 wysokości okna roboczego.

vm

Każde vm to 1/100 krótszej osi okna roboczego (szerokości lub wysokości).

ch

Względna wobec średniej szerokości znaków wyświetlanych bieżącym krojem. Jednostka ta nie jest dobrze zdefiniowana w specyfikacjach CSS i nie jest spójnie obsługiwana.

Jednostki vw, vh i vm mają szansę stać się przydatne w wielu różnych sytuacjach, ale obecnie działają jedynie w Internet Explorer, a i tak wiem z pobieżnych prób, że nie są obsługiwane zgodnie ze specyfikacją CSS.

Obliczanie jednostek w CSS CSS3 określa ciekawą funkcję, pozwalającą na obliczanie jednostek. Jest to elastyczna funkcja, która daje Ci zarówno kontrolę, jak i precyzję przy tworzeniu stylów. W listingu 4.24 widnieje przykład. Listing 4.24. Obliczanie jednostek

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Obliczenie należy ująć w nawias i poprzedzić słowem kluczowym calc. Możesz korzystać z różnych jednostek i wykonywać proste działania arytmetyczne. Nie ma jednak powodów do ekscytacji — w chwili, kiedy to piszę, jedynie Internet Explorer obsługuje funkcję calc(). Z zasady unikam opisywania w tej książce funkcji, które nie są powszechnie obsługiwane, ale mam nadzieję, że akurat ta zostanie wdrożona, i sądzę, że warto śledzić postępy w tym zakresie.

Inne jednostki w CSS Jednostki miary w CSS nie ograniczają się do określania długości. Istnieje wiele różnych jednostek, ale powszechnie używa się zaledwie kilku z nich. W poniższych punktach opiszę jednostki miary, z których będę korzystać w tej książce.

Miary kątów w CSS Kąty będą Ci potrzebne przy omówieniu transformacji w rozdziale 23. Kąty zapisuje się w postaci liczby poprzedzającej jednostkę, np. 360deg. W tabeli 4.9 znajduje się spis obsługiwanych jednostek miary kątów. Tabela 4.9. Jednostki miary kątów w CSS Identyfikator jednostki miary

Opis

deg

Określa kąt w stopniach; używa wartości od 0deg do 360deg

grad

Określa kąt w gradianach; używa wartości od 0grad do 360grad

rad

Określa kąt w radianach; używa wartości od 0rad do 6.28rad

turn

Określa kąt w pełnych obrotach; 1turn jest równy 360deg

Miary czasu w CSS Możesz określać odstępy czasowe przy użyciu miar CSS. Czas zapisuje się w postaci liczby poprzedzającej jednostkę czasu, np. 100ms. W tabeli 4.10 znajduje się spis obsługiwanych jednostek miary czasu. Tabela 4.10. Jednostki miary czasu w CSS Identyfikator jednostki miary

Opis

s

Określa czas w sekundach

ms

Określa czas w milisekundach (1s jest równe 1000ms)

82

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Sprawdzanie obsługi funkcji CSS Sfragmentaryzowany charakter specyfikacji CSS i jej niespójna obsługa w przeglądarkach sprawiają, że orientowanie się co do tego, czy pewne funkcje działają, bywa trudne. Do takich oszacowań przydaje się kilka narzędzi. Pierwsze to strona http://caniuse.com, która oferuje wyczerpujący spis tego, które funkcje HTML5 i CSS3 obsługiwane są przez poszczególne wersje określonych przeglądarek. Można tam znaleźć szczegółowe informacje dotyczące dużego zbioru przeglądarek na komputery i urządzenia przenośne, działających na różnych systemach operacyjnych. Ponadto znajdują się tam pewne proste narzędzia wspomagające podejmowanie decyzji, działające na podstawie popularności przeglądarek i ich rangi na rynku. Serwis ten bywa bardzo przydatny, kiedy zaczynam pracę nad nowym projektem i chcę się rozeznać, na których funkcjach mogę polegać. Znacząco ułatwia to rozeznawanie się w sfragmentaryzowanych standardach oraz implementacjach. Drugim takim narzędziem jest Modernizr (www.modernizr.com), który sprawdza działanie poszczególnych funkcji dynamicznie. Jest to mała biblioteka JavaScript, która sprawdza obecność kluczowych funkcji HTML5 i CSS, pozwalając Ci na dostosowanie się do funkcji obsługiwanych przez przeglądarkę użytkownika. Oferuje ona również kilka innych ciekawych funkcji, m.in. obstylowanie w starszych wersjach Internet Explorer elementów semantycznych (omówionych w rozdziale 10.), które pojawiły się w HTML5.

Przydatne narzędzia CSS Istnieją pewne narzędzia, których wprawdzie nie omawiam w tej książce, ale które mogą Ci się przydać w pracy z CSS. Opisuję je kolejno w poniższych punktach. Wszystkie są dostępne za darmo lub wchodzą w skład funkcji popularnych przeglądarek.

Przeglądarkowe raporty o stylach Wśród narzędzi deweloperskich wszystkich popularnych przeglądarek można znaleźć funkcję analizy stylów. Konkretne implementacje tej funkcji różnią się nieco, ale z założenia dają Ci możliwość wybrania elementu z wyświetlanego dokumentu lub jego kodu, by sprawdzić, które style przeglądarka zastosowała. Narzędzia te wskazują kolejność kaskadowania stylów oraz przetworzone style (czyli styl, który został ostatecznie nałożony na element po przetworzeniu wszystkich kaskadowych i odziedziczonych stylów). Dają nawet możliwość edycji i tworzenia nowych stylów w celu sprawdzenia ich wyglądu. Na rysunku 4.18 widnieje odpowiednie narzędzie przeglądarki stylów Google Chrome.

Tworzenie selektorów przy użyciu SelectorGadget W rozdziałach 17. i 18. omówię wszystkie obsługiwane przez CSS selektory. Jest ich wiele i można je łączyć w celu tworzenia mocnych, a jednocześnie elastycznie działających efektów. Opanowanie sztuki posługiwania się selektorami wymaga czasu, a jednym z najbardziej pomocnych w tym zakresie narzędzi jest SelectorGadget, który jest zakładką JavaScript dostępną na stronie www.selectorgadget.com. Narzędzie to nie jest już od jakiegoś czasu aktualizowane, ale mimo to działa we współczesnych przeglądarkach. Wystarczy postępować zgodnie z instrukcjami instalacyjnymi. Po wczytaniu skryptu będziesz miał możliwość klikania elementów w przeglądarce, by tworzyć selektory CSS. Na rysunku 4.19 widać SelectorGadget w działaniu.

83

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Rysunek 4.18. Analiza stylów CSS w Google Chrome

Rysunek 4.19. Wykorzystanie SelectorGadget do tworzenia selektorów CSS

Ulepszanie CSS z użyciem LESS Po rozpoczęciu pracy z CSS dość szybko zauważysz, że jest to rozwlekły i monotonny sposób zapisu stylów. Fragmenty trzeba często powielać, przez co zarządzanie stylami jest na dłuższą metę czasochłonne i podatne na błędy. CSS można rozszerzyć przy użyciu LESS — polega to na wykorzystaniu JavaScript do ulepszenia kodu CSS. Skrypt oferuje ciekawe możliwości, takie jak wykorzystanie zmiennych, dziedziczenie stylów oraz dodatkowe funkcje. Ostatnio często korzystam z LESS i jestem zadowolony z rezultatów. Szczegóły znajdziesz na stronie http://lesscss.org, skąd możesz też pobrać bibliotekę JavaScript.

Framework CSS Istnieje wiele wysokiej klasy frameworków CSS, na których możesz oprzeć swoje strony i aplikacje internetowe. Zawierają one zbiory stylów, dzięki czemu nie jesteś skazany na ciągłe odtwarzanie podstawowego kodu. Co lepsze frameworki pozwalają także na zmniejszenie rozbieżności implementacji w różnych przeglądarkach.

84

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

Z frameworków CSS mogę polecić Blueprint, który pobierzesz ze strony www.blueprintcss.org. Jest łatwy w użyciu i bardzo elastyczny, a także oferuje świetny system tworzenia siatek layoutów.

Podsumowanie W tym rozdziale omówiłem, jak tworzyć i nadawać style. Przedstawiłem zasady kaskadowania stylów oraz sposób, w jaki jednostki miary działają w CSS. Wspomniałem również o kilku narzędziach, które pozwalają określić, czy dane funkcje CSS obsługiwane są przez różne przeglądarki, a także o dodatkowych zasobach, które przydają się w pracy z CSS.

85

ROZDZIAŁ 4. „ WPROWADZENIE DO CSS

86

ROZDZIAŁ 5

Wprowadzenie do JavaScript

JavaScript miał trudne życie — bolesne narodziny i trudną młodość — i dopiero w ostatnich latach zdobył uznanie jako użyteczny i elastyczny język programowania. Z JavaScript możesz wiele zdziałać i choć nie jest to idealny język, należy traktować go poważnie. Ten rozdział pozwoli Ci odświeżyć znajomość JavaScript; znajdziesz w nim opis funkcji, które będą Ci potrzebne w dalszej pracy z książką. „ Wskazówka Jeśli chcesz skorzystać na lekturze tej książki, to powinieneś mieć pewne doświadczenie z programowaniem i być zaznajomiony ze zmiennymi, funkcjami i obiektami. Jeżeli dopiero zaczynasz programować, to dobrze byłoby sięgnąć po serię artykułów na popularnym serwisie lifehacker.com, które nie wymagają jakiejkolwiek znajomości programowania od czytelnika, a przykłady ujęte są w JavaScript. Samouczek (w języku angielskim) znajdziesz tutaj: http://lifehacker.com/5744113/learn-to-code-the-full-beginners-guide.

W tym rozdziale skupię się na najważniejszych funkcjach JavaScript potrzebnych do programowania zasobów internetowych. Jeżeli chcesz się dowiedzieć więcej o JavaScript, mogę Ci polecić kilka książek. Ogólne informacje o tym języku znajdziesz w JavaScript: The Definitive Guide Davida Flanagana. Więcej o zaawansowanych koncepcjach i funkcjach przeczytasz w Pro JavaScript Design Patterns Rossa Harmesa i Dustina Diaza. W tabeli 5.1 znajduje się streszczenie całego rozdziału. Tabela 5.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Zdefiniowanie skryptu inline w dokumencie.

Użyj elementu script.

5.1

Natychmiastowe wykonanie deklaracji.

Podaj deklarację bezpośrednio w skrypcie.

5.2

Zdefiniowanie funkcji JavaScript.

Użyj słowa kluczowego function.

5.3 – 5.5

Zdefiniowanie prostej zmiennej.

Użyj słowa kluczowego var i podaj wartość literalną.

5.6 – 5.9

Utworzenie obiektu.

Użyj new Object () lub literału obiektowego.

5.10 – 5.11

Dodanie metod do obiektu.

Stwórz nową właściwość i przypisz jej funkcję.

5.12

Pobranie lub nadanie obiektowi właściwości.

Użyj notacji kropkowej lub tablicowej.

5.13

Wyliczenie właściwości obiektu.

Użyj deklaracji for...in.

5.14

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Tabela 5.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Dodanie właściwości i metod do obiektów.

Przypisz wartość nazwie właściwości, której potrzebujesz.

5.15, 5.16

Usunięcie właściwości z obiektu.

Użyj słowa kluczowego delete.

5.17

Określenie, czy obiekt definiuje właściwość.

Użyj wyrażenia in.

5.18

Określenie, czy dwie zmienne mają jednakową wartość, niezależnie od ich typu.

Użyj operatora równości (==).

5.19, 5.21

Określenie, czy dwie zmienne mają jednakową wartość i są jednego typu.

Użyj operatora identyczności (===).

5.20, 5.22

Przekształcenie z jednego typu w inny.

Użyj funkcji Number lub String.

5.23 – 5.25

Utworzenie tablicy.

Użyj new Array() lub literału tablicowego.

5.26, 5.27

Odczytanie i modyfikacja zawartości tablicy.

Użyj notacji indeksowej do odczytania lub przypisania nowej wartości pozycji w tablicy.

5.28, 5.29

Wyliczenie zawartości tablicy.

Użyj pętli for.

5.30

Obsługa błędów.

Użyj deklaracji try...catch.

5.31, 5.32

Porównanie wartości null i undefined.

Przekształć wartość w typ boolean lub użyj operatora równości (==) tak, by określał null i undefined jako jednakowe, a operator identyczności (===) jako odmienne.

5.33 – 5.36

Przygotowanie do pracy z JavaScript Skrypty w dokumentach HTML można definiować na kilka różnych sposobów. Możesz utworzyć skrypt inline, czyli taki, który jest częścią dokumentu HTML, albo skrypt zewnętrzny, czyli znajdujący się w osobnym pliku, do którego dokument odnosi się poprzez adres URL. Obydwa te podejścia wymagają użycia elementu script, który opisuję szerzej w rozdziale 7. W tym rozdziale, z myślą o prostocie, używam skryptów inline. W listingu 5.1 widnieje przykład takiego skryptu. Listing 5.1. Prosty skrypt inline

Przykład



Oto możliwie najprostszy skrypt, który zamieszcza w dokumencie słowo Witaj. Element script zamieszczono za pozostałą treścią dokumentu, aby wszystkie inne elementy zostały zinterpretowane przez przeglądarkę jeszcze przed wykonaniem skryptu. W rozdziale 7. opowiem, dlaczego to jest istotne, oraz objaśnię, jak w pewnej mierze kontrolować wykonywanie skryptów.

88

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

„ Wskazówka W wielu przykładach przy wprowadzeniu do JavaScript pojawia się metoda document.writeln, która jest prostym sposobem na ukazanie rezultatu działania skryptów. Metoda ta zwyczajnie polega na dodaniu wiersza tekstu do dokumentu HTML. Więcej o obiekcie document i metodzie writeln przeczytasz w rozdziale 26.

Wygląd treści i działanie skryptu w przeglądarce widać na rysunku 5.1.

Rysunek 5.1. Wykorzystanie JavaScript w celu dodania treści do dokumentu HTML W tym rozdziale nie prezentuję zrzutów ekranowych, lecz jedynie rezultaty niektórych przykładów. Forma wyjściowa listingu 5.1 jest więc następująca: Witaj

Niektóre z wyników sformatowałem, aby ułatwić ich czytanie. W kolejnych podrozdziałach przedstawię Ci najważniejsze cechy języka JavaScript. Jeżeli masz jakiekolwiek doświadczenie z programowaniem w dowolnym współczesnym języku, składnia i styl JavaScript wydadzą Ci się znajome.

Deklaracje Deklaracja jest podstawową cegiełką JavaScript. Każda deklaracja określa jedno polecenie; zazwyczaj kończy się je średnikiem (;). W rzeczywistości używanie średników nie jest konieczne, ale zwiększa to czytelność kodu i pozwala na podawanie wielu deklaracji w jednym wierszu. W listingu 5.2 widnieje skrypt z kilkoma deklaracjami. Listing 5.2. Deklaracje JavaScript

Przykład



Przeglądarka wykonuje kolejne deklaracje. W tym przykładzie zawarłem dwie proste deklaracje. Wynik wygląda następująco (choć rezultat może też zostać wyświetlony w jednym wierszu): Oto deklaracja Oto druga deklaracja

89

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Definiowanie i używanie funkcji Jeżeli definiujesz deklaracje bezpośrednio w elemencie script, tak jak zrobiłem to w listingu 5.2, przeglądarka wykonuje owe deklaracje, kiedy tylko dociera do nich w kodzie. Zamiast tego możesz jednak zebrać wiele deklaracji w funkcji, które są wykonywane dopiero wtedy, kiedy przeglądarka natrafia na deklarację przywołującą taką funkcję (listing 5.3). Listing 5.3. Definiowanie funkcji JavaScript

Przykład



Deklaracje zawarte w funkcji objęte są nawiasami klamrowymi ({ i }); określa się je mianem bloków kodu. W powyższym listingu widnieje funkcja o nazwie myFunc, której blok kodu zawiera pojedynczą deklarację. W JavaScript występuje rozróżnienie między małymi a wielkimi literami, wobec czego słowo kluczowe function musi być pisane od małej litery. Deklaracja zawarta w funkcji nie zostanie wykonana, dopóki przeglądarka nie dotrze do innej deklaracji, która wywoływałaby ową funkcję, np.: myFunc();

Powyższy przykład nie jest szczególnie dobry, bo funkcję wywołano w nim bezpośrednio po jej zdefiniowaniu. Użyteczne przykłady znajdziesz w dalszej części rozdziału.

Definiowanie funkcji parametrami Tak jak większość języków programowania, JavaScript pozwala na definiowanie parametrów funkcji, jak widać w listingu 5.4. Listing 5.4. Definiowanie funkcji parametrami

Przykład



90

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Funkcja myFunc ma w powyższym listingu dwa parametry: name i weather. JavaScript jest językiem o słabym typowaniu. Oznacza to, że nie trzeba deklarować typu danych parametrów przy definiowaniu funkcji. Do słabego typowania nawiążę jeszcze w dalszej części rozdziału, kiedy przyjrzymy się zmiennym JavaScript. Przy wywoływaniu funkcji z parametrami podaje się wartości jako argumenty funkcji, tak jak poniżej: myFunc("Adam", "słoneczny");

Rezultat zastosowania kodu z listingu jest następujący: Witaj, Adam. Mamy słoneczny dzień

Liczba argumentów przy wywoływaniu funkcji nie musi być taka sama, jak liczba parametrów funkcji. Kiedy wywołujesz funkcję, podając mniej argumentów, niż ma ona parametrów, wszelkie parametry o nieokreślonych wartościach pozostają niezdefiniowane. Jeżeli z kolei podasz więcej argumentów, niż funkcja ma parametrów, to nadmiarowe argumenty zostaną zignorowane. Wobec tego nie możesz utworzyć dwóch funkcji o jednakowej nazwie i odmiennych parametrach i oczekiwać, że JavaScript rozróżni je od siebie na podstawie argumentów podanych przy wywoływaniu funkcji. Kiedy definiujesz dwie funkcje o takiej samej nazwie, druga definicja zastępuje pierwszą.

Definiowanie funkcji, które zwracają wyniki Wyniki funkcji wywołuje się słowem kluczowym return. W listingu 5.5 widnieje przykład funkcji, która zwraca wynik. Listing 5.5. Zwrócony wynik funkcji

Przykład



Powyższa funkcja definiuje jeden parametr i używa jego wartości do wygenerowania prostego wyniku. Wywołałem funkcję i podałem wynik jako argument funkcji document.writeln: document.writeln(myFunc("Adam"));

Zauważ, że nie musisz deklarować, by funkcja zwracała wynik, ani określać typu danych wyniku. Wynik listingu jest następujący: Witaj, Adam.

91

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Zmienne i typy Zmienne definiuje się słowem kluczowym var; można też w obrębie jednej deklaracji od razu przypisać wartość definiowanej zmiennej. Zmienne zdefiniowane w funkcji są zmiennymi lokalnymi i używane są wyłącznie w ramach danej funkcji. Zmienne zdefiniowane bezpośrednio w elemencie script są zmiennymi globalnymi, do których można się odnieść z dowolnego miejsca, w tym również z innych skryptów. W listingu 5.6 widnieje przykład zastosowania zmiennych lokalnych i globalnych. Listing 5.6. Zmienne lokalne i globalne

Przykład





JavaScript jest językiem o słabym typowaniu. Nie oznacza to, że w JavaScript nie występują typy, lecz że nie trzeba deklarować typów zmiennych, a można bez problemu przypisywać różne typy tym samym zmiennym. JavaScript określa typ na podstawie wartości przypisanej zmiennej i swobodnie zmienia typy w zależności od kontekstów, w jakich są używane. Wynik listingu 5.6 jest następujący: Witaj, Adam. Jest dziś słonecznie. Lubię jabłka.

Typy proste W JavaScript występuje mały zbiór typów prostych: string, number i boolean. Nie wygląda to na wiele, ale te trzy typy dają bardzo dużą elastyczność w pracy z JavaScript.

Typ string Wartości string definiuje się w pojedynczych lub podwójnych cudzysłowach, jak widać w listingu 5.7. Listing 5.7. Definiowanie zmiennych stringowych

Przykład



Cudzysłowy muszą się dopełniać. Nie wolno zaczynać ciągu cudzysłowem pojedynczym, a kończyć podwójnym.

Typ boolean Typ boolean może mieć dwie wartości: true i false. W listingu 5.8 wykorzystano obydwie wartości, ale ten typ zmiennych jest najbardziej przydatny w deklaracjach warunkowych, które opiszę w dalszej części rozdziału. Listing 5.8. Definiowanie wartości boolean

Przykład



Typ number Typ number obsługuje zarówno liczby całkowite, jak i zmiennoprzecinkowe (czyli liczby rzeczywiste). Przykład zastosowania obydwu rodzajów liczb widnieje w listingu 5.9. Listing 5.9. Definiowanie wartości liczbowych

Przykład



Nie musisz określać, jakiego rodzaju liczbę podajesz — wystarczy, że wprowadzisz odpowiednią wartość, a JavaScript dostosuje się do tego. W listingu podałem liczbę całkowitą i wartość zmiennoprzecinkową; poprzedziłem też jedną wartość przedrostkiem 0x, by wskazać wartość szesnastkową.

Tworzenie obiektów JavaScript obsługuje obiekty, które można tworzyć na różne sposoby. W listingu 5.10 widnieje przykład.

93

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Listing 5.10. Tworzenie obiektu

Przykład



Utworzyłem obiekt deklaracją new Object() i przypisałem wynik (czyli nowo utworzony obiekt) zmiennej myData. Po utworzeniu obiektu mogłem przypisać wartości jego właściwościom: myData.name = "Adam";

Przed podaniem tej deklaracji mój obiekt nie miał właściwości name. Po jej wykonaniu pojawia się także właściwość o wartości Adam. Wartość właściwości można wywołać, zestawiając nazwę zmiennej z nazwą jej właściwości i przedzielając je kropką: document.writeln("Witaj, " + myData.name + ". ");

Literały obiektowe Obiekt i jego właściwości możesz zdefiniować za jednym podejściem, wykorzystując w tym celu format literału obiektowego. W listingu 5.11 widnieje tego przykład. Listing 5.11. Zastosowanie formatu literału obiektowego

Przykład



Każda definiowana właściwość oddzielona jest od swojej wartości dwukropkiem (:), podczas gdy same właściwości oddzielone są przecinkami (,).

Funkcje jako metody Do obiektów można poza właściwościami dodawać również funkcje. Przypisana obiektowi funkcja nazywana jest metodą. Jest to jedna z moich ulubionych funkcjonalności JavaScript. Metody wydają mi

94

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

się eleganckie i przyjemne w użyciu, choć nie potrafię wytłumaczyć, dlaczego tak sądzę. W listingu 5.12 widać przykład dodania metody. Listing 5.12. Dodawanie metod do obiektu

Przykład



W tym przykładzie posłużyłem się funkcją do utworzenia metody printMessages. Zauważ, że do właściwości zdefiniowanych przez obiekt musiałem się odnieść słowem kluczowym this. Kiedy funkcji używa się jako metody, funkcja z założenia przechodzi na obiekt, którego metoda zostaje wywołana jako argument specjalną zmienną this. Wynik powyższego listingu jest następujący: Witaj, Adam. Jest dziś słonecznie.

„ Wskazówka JavaScript ma o wiele więcej do zaoferowania poza możliwością tworzenia obiektów i zarządzania nimi, ale nie musisz się na tym znać, jeśli chcesz pracować z HTML5. Jeżeli chcesz się dowiedzieć więcej o tym języku, to rzuć okiem na książki, które poleciłem na początku rozdziału.

Praca z obiektami Z utworzonymi obiektami można robić wiele różnych rzeczy. W poniższych podpunktach opiszę czynności, które przydadzą się w dalszej pracy z tą książką.

Odczytywanie i modyfikowanie wartości właściwości Najbardziej oczywistą czynnością, jakiej można się podjąć w stosunku do obiektu, jest odczytanie lub zmodyfikowanie wartości przypisanych do definiowanych przez ów obiekt właściwości. Możesz skorzystać z dwóch różnych składni, które występują w listingu 5.13. Listing 5.13. Odczytywanie i modyfikowanie właściwości obiektów

Przykład

95

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT



Pierwsza forma jest większości programistów znajoma; korzystałem z niej we wcześniejszych przykładach. Polega na zestawieniu nazwy obiektu i nazwy właściwości, przedzielonych kropką: myData.name = "Marcin";

Druga forma przyjmuje postać tablicy: myData["weather"] = "pochmurno";

Podałem tu nazwę właściwości w nawiasie kwadratowym ([ i ]). Jest to dość wygodny sposób uzyskiwania dostępu do właściwości, gdyż właściwość można ująć w zmiennej: var myData = { name: "Adam", weather: "słonecznie", }; var propName = "pogoda"; myData[propName] = "pochmurno";

Jest to podstawa do wyliczania właściwości obiektu, o czym piszę poniżej.

Wyliczanie właściwości obiektów Właściwości obiektu możesz wyliczyć, używając deklaracji for...in. W listingu 5.14 widnieje przykład jej zastosowania. Listing 5.14. Wyliczanie właściwości obiektów

Przykład



Pętla for...in wykonuje deklarację w blokach kodu każdej właściwości obiektu myData. Przy każdym powtórzeniu, zmiennej prop przypisywana jest nazwa przetwarzanej właściwości. Użyłem indeksu tablicowego (tj. zawartego między [ i ]) do wywołania wartości właściwości obiektu. Dane wyjściowe tego listingu (po przeformatowaniu w celu zwiększenia czytelności) wyglądają następująco: Zmienna: name Wartość: Adam Zmienna: weather Wartość: słonecznie Zmienna: printMessages Wartość: function () { document.writeln("Witaj, " + this.name + ". "); document.writeln("Jest dziś " + this.weather + "."); }

Z wyniku widać, że funkcja, którą zdefiniowałem jako metodę, również została wyliczona. Wynika to z elastyczności, z jaką JavaScript obsługuje funkcje, oraz z tego, że metody też są uznawane za właściwości obiektu.

Dodawanie i usuwanie właściwości i metod Nowe właściwości obiektu możesz zdefiniować nawet jeśli używasz literału obiektowego. W listingu 5.15 widnieje przykład. Listing 5.15. Dodanie nowej właściwości do obiektu

Przykład



W powyższym listingu dodałem do obiektu dayOfWeek nową właściwość. Użyłem do tego zapisu kropkowego (zestawiając oddzielone kropką nazwy obiektu i właściwości), choć mogłem równie dobrze skorzystać z zapisu indeksu tablicowego. Jak możesz się już domyślać, nowe metody do obiektu możesz dodać również poprzez przypisanie funkcji jako wartości właściwości (listing 5.16). Listing 5.16. Dodanie nowej metody do obiektu



97

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Przykład



Właściwość lub metodę możesz usunąć z obiektu przy użyciu słowa kluczowego delete, tak jak widać to w listingu 5.17. Listing 5.17. Usuwanie właściwości z obiektu

Przykład



Określanie, czy obiekt ma właściwość Przy użyciu wyrażenia in można sprawdzić, czy obiekt ma jakąś właściwość (listing 5.18). Listing 5.18. Określenie, czy obiekt ma właściwość

Przykład



W tym przykładzie sprawdziłem, czy obecne są dwie właściwości: jedna istniejąca, a druga nieistniejąca. Zmienna hasName będzie miała wartość true, a właściwość hasDate wartość false.

Operatory JavaScript Operatory JavaScript są dość standardowe. Większość przydatnych operatorów przedstawiam w tabeli 5.2. Tabela 5.2. Przydatne operatory JavaScript Operator

Opis

++, --

Pre- lub postinkrementacja oraz pre- lub postdekrementacja

+, -, *, /, %

Dodawanie, odejmowanie, mnożenie, dzielenie, reszta z dzielenia

=

Mniejsze, mniejsze bądź równe, większe, większe bądź równe

==, !=

Równość, nierówność

===, !==

Identyczność, nieidentyczność

&&, ||

Logiczne I oraz LUB

=

Przypisanie

+

Konkatenacja ciągu

?:

Ternarna deklaracja warunkowa

Operatory równości i identyczności Operatory równości i identyczności są godne szczególnej uwagi. Operatory równości docelowo przypisują argumentom jednakowy typ, aby orzec o ich równości. Są przydatne, o ile jesteś świadomy sposobu ich działania. W listingu 5.19 widać działanie operatora równości. Listing 5.19. Operator równości

Przykład



Wynik tego skryptu jest następujący: Są równe

JavaScript konwertuje obydwa argumenty na ten sam typ i porównuje je. Operator równości w zasadzie sprawdza, czy wartości są równe, nie zwracając uwagi na ich typ. Jeżeli chcesz sprawdzić, czy zarówno wartości, jak i typy są jednakowe, to musisz skorzystać z operatora identyczności (===, czyli trzy znaki równości, w odróżnieniu od dwóch znaków operatora równości), tak jak widać to w listingu 5.20. Listing 5.20. Zastosowanie operatora identyczności

Przykład



W tym przykładzie operator identyczności wskazuje, że dwie zmienne są różne. Operator ten nie konwertuje typów. Wynik powyższego skryptu jest następujący: Nie są identyczne

„ Wskazówka Zauważ, że w listingach 5.19 i 5.20 użyłem deklaracji warunkowej if. Deklaracja ta porównuje dane i jeśli zwraca wynik true, to deklaracje w bloku kodu zostają wykonane. Deklaracji if można używać z dodatkową deklaracją else, zawierającą blok kodu, którego deklaracje zostają wykonane, jeżeli if zwraca wartość false.

Prymitywy JavaScript (czyli podstawowe typy, m.in. ciągi i liczby) porównywane są według wartości, lecz obiekty JavaScript na podstawie relacji między nimi. W listingu 5.21 widać, jak JavaScript wykonuje testy równości i identyczności obiektów.

100

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Listing 5.21. Testy równości i identyczności obiektów

Przykład



Wyniki tego skryptu są następujące: Test 1: false Test 2: true Test 3: false Test 4: true

W listingu 5.22 te same testy przeprowadzone są na prymitywach. Listing 5.22. Testy równości i identyczności prymitywów

Przykład



Wyniki tego skryptu są następujące: Test 1: true Test 2: true Test 3: false Test 4: true

Konwersja typów Operator konkatenacji ciągu (+) ma pierwszeństwo przed operatorem dodawania (również +). Może to powodować zamieszanie, jako że JavaScript swobodnie konwertuje typy w celu uzyskania rezultatu, przy czym nie zawsze jest to rezultat oczekiwany. Przykład tego widnieje w listingu 5.23. Listing 5.23. Pierwszeństwo operatora konkatenacji ciągu

Przykład



Wynik tego skryptu jest następujący: Wynik 1: 10 Wynik 2: 55

To właśnie wyniki w rodzaju drugiego powodują zamieszanie. Coś, co miało być w zamyśle dodawaniem, zostaje zinterpretowane jako konkatenacja ciągu z powodu pierwszeństwa operatora i nadmiernej swobody konwersji typów. Aby zapobiec takim sytuacjom, możesz wymusić konwersję typów wartości — w ten sposób upewniasz się, że przeprowadzona zostanie właściwa operacja. W tabeli 5.3 przedstawiam najprzydatniejsze metody konwersji.

Konwersja liczb na ciągi Jeżeli pracujesz z wieloma zmiennymi liczbowymi, które chcesz zestawić do postaci ciągów, możesz przekonwertować liczby na ciągi metodą toString, tak jak ukazano to w listingu 5.24.

102

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Tabela 5.3. Przydatne metody konwersji liczb na ciągi Metoda

Opis

Zwraca

toString()

Odtwarza liczbę w zapisie dziesiątkowym

string

toString(2) toString(8) toString(16)

Odtwarza liczbę w zapisie binarnym, ósemkowym lub szesnastkowym

string

toFixed(n)

Odtwarza liczbę rzeczywistą z n cyframi po separatorze dziesiętnym

string

toExponential(n)

Odtwarza liczbę w zapisie wykładniczym z jedną cyfrą przed separatorem dziesiętnym i n cyframi po nim

string

toPrecision(n)

Odtwarza liczbę z n cyfr znaczących, w razie konieczności wykorzystując zapis wykładniczy

string

Listing 5.24. Zastosowanie metody number.toString

Przykład



Zauważ, że wartość liczbową zamieściłem w nawiasie, a następnie wywołałem metodę toString. Wynika to z tego, że JavaScript musi mieć możliwość przekonwertowania literalnej wartości na wartość typu number przed wywołaniem metod przezeń definiowanych. Przedstawiłem również inny sposób na uzyskanie tego efektu (poza wywołaniem toString) — polega na wywołaniu funkcji String i podaniu wartości numerycznej w charakterze argumentu. Obydwie te techniki dają taki sam rezultat, tj. konwersję typu number na typ string, przy którym operator + służy do konkatenacji ciągów, a nie dodawania. Wynik tego skryptu jest następujący: Wynik: 55

Oto kilka innych metod, które dają większą kontrolę nad tym, jak liczba jest przedstawiana w ciągu. Opisuję je pokrótce w tabeli 5.3. Wszystkie ukazane w tabeli metody definiuje się typem number.

Konwersja ciągów na liczby Drugim problemem jest konwersja ciągów na liczby, tak by móc dodawać, zamiast konkatenować. Można tego dokonać przy użyciu funkcji Number, co widać w listingu 5.25. Listing 5.25. Konwersja ciągów na liczby

Przykład



Wynik tego skryptu jest następujący: Wynik: 10

Funkcja Number parsuje wartości ciągów dość rygorystycznie. Możesz jednak skorzystać z dwóch innych funkcji, które są bardziej elastyczne pod tym względem i ignorują znaki nienumeryczne: parseInt i parseFloat. W tabeli 5.4 opisuję wszystkie trzy funkcje. Tabela 5.4. Przydatne funkcje konwersji ciągów na liczby Metoda

Opis

Number()

Parsuje podany ciąg, by uzyskać liczbę całkowitą lub rzeczywistą

parseInt()

Parsuje podany ciąg, by uzyskać liczbę całkowitą

parseFloat()

Parsuje podany ciąg, by uzyskać liczbę całkowitą lub rzeczywistą

Praca z tablicami Tablice JavaScript działają w zasadzie tak samo jak tablice w większości innych języków programowania. Listing 5.26 pokazuje, jak należy tworzyć i wypełniać tablice. Listing 5.26. Tworzenie i wypełnianie tablicy

Przykład



Nową tablicę utworzyłem przy użyciu funkcji new Array(). Powstała w ten sposób pusta tablica, którą przypisałem zmiennej mojaTablica. W kolejnych deklaracjach przydzielam wartości różnym elementom tablicy. W tym przykładzie należy zwrócić na kilka rzeczy uwagę. Po pierwsze, nie musiałem deklarować liczby elementów tablicy przy jej tworzeniu. Tablice JavaScript mogą pomieścić dowolną liczbę elementów.

104

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Po drugie, nie musiałem określić typu danych zawartych w tablicy. Tablice JavaScript mogą zawierać dowolne zestawienia typów danych. W powyższym przykładzie zawarłem w tablicy trzy różnego typu elementy: number, string i boolean.

Literał tablicowy Literał tablicowy pozwala na utworzenie i wypełnienie tablicy w jednej deklaracji, tak jak to widać w listingu 5.27. Listing 5.27. Zastosowanie literału tablicowego

Przykład



W tym przykładzie poleciłem, by zmiennej myArray przypisano nową tablicę, podając jednocześnie w nawiasie kwadratowym (między [ i ]) elementy tablicy.

Odczytywanie i modyfikowanie zawartości tablicy Wartość elementu indeksowego danej tablicy odczytuje się przy użyciu nawiasu kwadratowego, zamieszczając pożądaną pozycję indeksową pomiędzy znakami [ i ], co widać w listingu 5.28. JavaScript używa indeksów zaczynających się od zera. Listing 5.28. Odczytywanie danych indeksu tablicy

Przykład



Dane z dowolnego indeksu tablicy JavaScript możesz zmodyfikować, przypisując mu inną wartość. Podobnie jak przy zwykłych zmiennych, możesz bez problemu zmienić typ danych elementu. W listingu 5.29 widnieje przykład modyfikacji zawartości tablicy. Listing 5.29. Modyfikacja zawartości tablicy



105

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Przykład



W tym przykładzie przypisałem wartość string indeksowi 0, gdzie wcześniej była wartość number.

Wyliczanie zawartości tablicy Zawartość tablicy możesz wyliczyć przy użyciu pętli for. Listing 5.30 pokazuje, jak użyć pętli do wyświetlenia zawartości prostej tablicy. Listing 5.30. Wyliczenie zawartości tablicy

Przykład



Pętla JavaScript działa tak samo jak pętle w wielu innych językach. Liczbę elementów możesz określić właściwością length. Wynik powyższego listingu jest następujący: Indeks 0: 100 Indeks 1: Adam Indeks 2: true

Metody obsługi tablic Obiektowi Array w JavaScript przypisane są pewne metody, służące do pracy z tablicami. W tabeli 5.5 znajdziesz najprzydatniejsze.

Obsługa błędów Do obsługi błędów w JavaScript służy deklaracja try...catch. Przy pracy z tą książką rzadko będziesz się musiał zajmować błędami, jako że koncentruję się w niej na omawianiu funkcji HTML5, a nie na podstawowych umiejętnościach programistycznych. W listingu 5.31 widać przykład zastosowania takiej deklaracji.

106

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Tabela 5.5. Przydatne metody obsługi tablic Metoda

Opis

Zwraca

concat ()

Konkatenuje zawartość tablicy z tablicą podaną jako argument. Możliwe jest podanie wielu tablic.

Array

join()

Łączy wszystkie elementy tablicy w ciąg. Argument określa znak, którymi elementy mają być oddzielone.

string

pop()

Traktuje tablicę jak stos; usuwa i zwraca ostatni element tablicy.

object

push()

Traktuje tablicę jak stos; dodaje podany element do tablicy.

void

reverse()

Odwraca kolejność elementów tablicy.

Array

shift()

Działa jak pop, lecz oddziałuje na pierwszy element tablicy.

object

slice(,)

Zwraca podtablicę.

Array

sort()

Sortuje elementy tablicy.

Array

unshift()

Działa jak push, lecz zamieszcza nowy element na początku tablicy.

void

Listing 5.31. Obsługa wyjątku

Przykład



Problem, który pojawił się w tym skrypcie, jest dość częsty. Usiłuję w nim użyć niepoprawnie zainicjalizowanej zmiennej. Kod, po którym spodziewam się wystąpienia błędu, zamieściłem w bloku try deklaracji. Kiedy żaden błąd nie występuje, deklaracje zostają normalnie wykonane, a blok catch jest ignorowany. Kiedy jednak błąd się pojawia, wykonywanie deklaracji z bloku try natychmiast zostaje wstrzymane, a wykonywane są instrukcje z bloku catch. Błąd zostaje opisany w obiekcie Error, podanym w bloku catch. W tabeli 5.6 znajdują się właściwości obiektu Error. Tabela 5.6. Obiekt Error Właściwość

Opis

Zwraca

message

Opis błędu.

string

name

Nazwa błędu. Domyślnie jest to Error.

string

number

Numer błędu, jeżeli takowy istnieje.

number

107

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Blok catch pozwala Ci na naprawienie błędu lub usunięcie jego efektów. Jeżeli jakieś deklaracje muszą zostać wykonane niezależnie od wystąpienia błędu, możesz je zamieścić w opcjonalnym bloku finally (listing 5.32). Listing 5.32. Zastosowanie bloku finally

Przykład



Porównywanie wartości undefined i null W JavaScript występuje kilka specjalnych wartości, z których porównywaniem należy uważać: undefined i null. Wartość undefined zwracana jest, kiedy odczytujesz zmienną, której nie nadano wartości, lub kiedy usiłujesz odczytać nieistniejącą właściwość obiektu. W listingu 5.33 widać zastosowanie undefined w JavaScript. Listing 5.33. Specjalna wartość undefined

Przykład



Wynik tego listingu jest następujący: Właściwość: undefined

108

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

JavaScript jest dziwny o tyle, że występuje w nim również wartość specjalna null, która nieco się różni od undefined. Wartość undefined zwracana jest, kiedy żadna wartość nie została przypisana. Wartości null używasz natomiast wtedy, kiedy chcesz wskazać, że przypisałeś jakąś wartość, lecz nie jest to poprawny object, string, number bądź boolean (czyli przypisałeś wartość, która nie jest wartością). Listing 5.34 ukazuje przejście od undefined do null. Listing 5.34. Zastosowanie wartości undefined i null

Przykład



Utworzyłem obiekt, a następnie spróbowałem odczytać wartość właściwości weather, której nie zdefiniowałem we wcześniejszym fragmencie kodu: document.writeln("Zmienna: " + myData.weather); document.writeln("Właściwość: " + ("weather" in myData));

Nie było tam jeszcze właściwości weather, toteż wartość zwrócona po wywołaniu myData.weather to undefined, a użycie słowa kluczowego in do określenia, czy obiekt zawiera tę właściwość, daje wartość zwrotną false. Wynik tych dwóch deklaracji wygląda następująco: Zmienna: undefined Właściwość: false

Właściwości weather przypisuję następnie wartość, dodając tym samym ową właściwość do obiektu: myData.weather = "słonecznie"; document.writeln("Zmienna: " + myData.weather); document.writeln("Właściwość: " + ("weather" in myData));

Odczytuję wartość właściwości i sprawdzam ponownie, czy obiekt ma taką właściwość. Jak można się spodziewać, obiekt jednak definiuje ową właściwość, a jej wartość to słonecznie:

109

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Zmienna: słonecznie Właściwość: true

Następnie nadaję właściwości wartość null: myData.weather = null;

Przynosi to bardzo konkretny rezultat — obiekt wprawdzie nadal definiuje właściwość, ale jest ona pozbawiona wartości. Przy kolejnym sprawdzeniu uzyskuję następujące rezultaty: Zmienna: null Właściwość: true

Sprawdzanie, czy zmienna lub właściwość ma wartość null lub undefined Jeżeli chcesz sprawdzić, czy właściwość ma wartość null lub undefined (i nie interesuje Cię, którą konkretnie), możesz zwyczajnie użyć deklaracji if z operatorem negacji (!), tak jak to ukazano w listingu 5.35. Listing 5.35. Sprawdzanie, czy zmienna lub właściwość ma wartość null lub undefined

Przykład



Ta technika polega na przeprowadzanej przez JavaScript wymuszonej konwersji typów, która sprawia, że sprawdzane wartości są traktowane jako wartości boolean. Kiedy zmienna lub właściwość ma wartość null lub undefined, jej wymuszona wartość boolean to false.

110

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Rozróżnianie między null i undefined Kiedy chcesz porównać dwie wartości, masz pewien wybór. Jeżeli chcesz uznać wartość undefined za tożsamą z null, możesz użyć operatora równości (==) i zdać się na konwersję typów JavaScript. Zmienna o wartości undefined zostanie wtedy uznana za równą zmiennej o wartości null. Jeżeli chcesz jednak odróżnić wartość null od undefined, to musisz skorzystać z operatora identyczności ( ===). Obydwa porównania widać w listingu 5.36. Listing 5.36. Porównania równości i identyczności wartości null i undefined

Przykład



Wynik tego skryptu jest następujący: Równość: true Identyczność: false

Przydatne narzędzia JavaScript Istnieje wiele narzędzi, które mogą uprościć pracę z JavaScript. Sądzę, że szczególną uwagę warto zwrócić na dwa z nich.

Debugery JavaScript Współczesne przeglądarki albo mają wbudowane zaawansowane debugery JavaScript, albo obsługują je za pośrednictwem wtyczek (np. Firebug w Mozilla Firefox). Można w nich ustawiać punkty wstrzymania, wykrywać błędy oraz przechodzić kolejno przez wszystkie etapy skryptu podczas jego wykonywania. Jeżeli masz problem z jakimś skryptem, to w pierwszej kolejności powinieneś skorzystać z debugera. Sam korzystam z Google Chrome i dobrze mi się pracuje z wbudowanym debugerem. Jeżeli natomiast mierzę się ze szczególnie trudnym problemem, to używam Firebug na Firefoksie. Debuger Firebug wydaje się najskuteczniejszy w styczności ze skomplikowanymi problemami.

111

ROZDZIAŁ 5. „ WPROWADZENIE DO JAVASCRIPT

Biblioteki JavaScript Z JavaScript niezwykle łatwo korzystać, kiedy ma się do dyspozycji zestaw narzędzi lub bibliotekę tego języka. Zestawów takich nie brak, ale mogę w szczególności polecić dwa konkretne. Pierwszy — a zarazem ten, z którym mam najwięcej doświadczenia — to jQuery. jQuery i uzupełniający go jQuery UI są niezwykle popularne, aktywnie rozwijane oraz pełne użytecznych funkcji. Dzięki jQuery praca z JavaScript jest prostsza i o wiele przyjemniejsza. Drugi zestaw narzędzi to Dojo — główny konkurent jQuery. Dojo ma bardzo podobne funkcje do jQuery, jest szeroko stosowany i może się pochwalić równie dobrą obsługą. Z Dojo mam mniej doświadczenia niż z jQuery, ale wrażenia ze styczności mam pozytywne. jQuery pobierzesz z jquery.com, a Dojo z http://dojotoolkit.org. Może to wprawdzie wyglądać, jakbym usiłował Ci wciskać swoje książki, ale jeśli chcesz się dowiedzieć więcej o jQuery, sięgnij po Pro jQuery.

Podsumowanie Przedstawiłem Ci w tym rozdziale główne funkcje JavaScript, z których będziesz korzystał w pracy z tą książką. JavaScript jest integralnym elementem HTML5, a podstawowa znajomość tego języka i jego użytkowania jest konieczna.

112

CZĘŚĆ II

Elementy HTML

Skoro już jesteś przygotowany i odświeżyłeś swoją znajomość podstaw, możemy się przyjrzeć HTML5 bliżej. W tej części książki przedstawię Ci elementy HTML, włącznie z tymi, które dopiero pojawiły się w HTML5 lub uległy w tej wersji zmianie.

ROZDZIAŁ 6

Elementy HTML — kontekst

W najbliższych rozdziałach opiszę elementy HTML5. Wiele z nich istniało już w HTML 4, ale też w wielu przypadkach zmianie uległo znaczenie bądź sposób ich wykorzystywania. Zanim jednak przyjrzymy się elementom, chciałbym ująć ich temat w szerszym kontekście i ułożyć podstawy pod dalszy wywód. Znajomość charakteru elementów HTML jest nie mniej ważna niż znajomość właściwego ich stosowania.

Semantyka a prezentacja Jedna z głównych zmian HTML5 ma podłoże filozoficzne — rozdzielenie semantycznego znaczenia elementu od wpływu elementu na wygląd treści. W zasadzie jest to sensowny pomysł — używać elementów HTML do nadawania treści struktury i znaczenia, a kontrolować prezentację treści poprzez nakładanie na elementy stylów CSS. Nie każdy odbiorca dokumentów HTML musi je koniecznie wyświetlać, a oddzielając treść od jej prezentacji, sprawiasz, że kod HTML jest łatwiejszy do przetworzenia i łatwiej automatycznie przyswoić jego znaczenie. Większość elementów, które pojawiły się w HTML5, nadaje treści konkretne znaczenie. Elementu article (opisanego w rozdziale 10.) możesz użyć do oznaczenia samodzielnego fragmentu treści, który można rozpowszechniać, a elementu figure do oznaczenia obrazka. Wiele z elementów obecnych w HTML 4 zaistniało, kiedy nikt jeszcze nie myślał o oddzielaniu prezentacji od znaczenia. Stawia nas to w dziwnej sytuacji. Świetnym przykładem jest element b. W wersjach języka sprzed HTML5 element b nakazywał przeglądarce pogrubiać tekst zawarty pomiędzy znacznikiem otwierającym a zamykającym. W HTML5 znaczniki pełniące funkcję czysto prezentacyjną nie są pożądane, toteż trzeba było wymyślić nową definicję tego elementu. Element b oznacza ciąg tekstu oddzielony od otaczającej go treści, na który nie kładzie się dodatkowej emfazy ani któremu nie przypisuje się większego znaczenia, a którego standardową formą prezentacji typograficznej jest pogrubiony tekst. Przykładowo, mogą to być słowa kluczowe w streszczeniu dokumentu albo nazwy produktów w recenzji. — HTML: The Markup Language, w3c.org Jest to pokrętny sposób tłumaczenia tego, że element b poleca przeglądarce pogrubić tekst. Element ten nie ma żadnego znaczenia semantycznego — odnosi się w całości do prezentacji. Z kolei cała ta niejasna definicja mówi nam coś bardzo ważnego o HTML5: żyjemy w czasie przemian. Musimy zachować stare elementy, ponieważ są w powszechnym użytku, a pozbycie się elementów HTML 4 z HTML5 jest nie do pomyślenia, gdyż spowolniłoby to szybkość przyswajania języka przez odbiorców. Mamy zatem do czynienia ze standardem o dwóch prędkościach. Niektóre z elementów, zwłaszcza nowszych, mają wyłącznie znaczenie semantyczne. Inne, w znacznej mierze składające się z jednoliterowych znaczników, mają tak ugruntowaną

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

pozycję, że jesteśmy gotowi nagiąć zasadę oddzielenia prezentacji od semantyki, choć wolimy nie mówić o tym na głos. Przy lekturze opisów elementów, które pojawią się już w następnym rozdziale, bądź pomny tej rozbieżności pomiędzy nowym a starym sposobem myślenia. Z pewnością pomoże Ci to zrozumieć charakter pewnych drobnych dziwactw, na jakie się natkniesz. Sugerowałbym Ci, że lepiej narażać się na hiperpoprawność semantyczną i — kiedy tylko ma to sens — unikać elementów służących w przeważającej mierze (lub wyłącznie) do określania wyglądu treści. Nie ma nic trudnego w zdefiniowaniu klas i nałożeniu odpowiednich stylów. Jeżeli będziesz korzystać ze stylów odnoszących się właściwie do rodzajów treści (a nie tylko określających to, jak chcesz, żeby treść wyglądała), uda Ci się zachować przynajmniej ducha poprawności semantycznej.

Jak dobierać elementy Pomijając już nawet kwestie związane z prezentacją — specyfikacja HTML5 bywa niejednoznaczna. Niektóre z elementów mają bardzo ogólne znaczenie, co na pierwszy rzut oka może zniechęcać. Elementy rzeczywiście mają ogólne znaczenie, ale wynika to z tego, że służą do oznaczania wielu różnych rodzajów treści. Kiedy piszę, to na ogół robię to na potrzeby książek takich jak ta, którą teraz czytasz. Kiedy słyszę pojęcia takie jak sekcja, artykuł, nagłówek czy ilustracja, to od razu myślę o strukturze i stylach, jakich moje wydawnictwo wymaga od autorów. Te same pojęcia mogą mieć różne znaczenie w zależności od rodzajów treści, do których się odnoszą. Specyfikacja, umowa i wpis na blogu mogą mieć sekcje, ale znaczenie tego terminu może być przy każdym z tych dokumentów zupełnie inne. Zamiast jednak tworzyć osobne definicje dla sekcji książki, sekcji specyfikacji, sekcji umowy i sekcji bloga, posługujemy się ogólnym terminem, który następnie odpowiednio interpretujemy. Istnieją pewne podstawowe zasady, do których przestrzegania bym Cię zachęcał przy doborze elementów do oznaczania treści. Omówię je w poniższych punktach.

Im mniej, tym lepiej Bardzo łatwo puścić wodze fantazji i zamieścić w dokumencie gigantyczne ilości znaczników. Wystarczy jednak skorzystać ze znaczników, które nadadzą treści znaczenie semantyczne. Jeżeli nie musisz definiować złożonych tytułów, nie musisz korzystać z elementu hgroup (opisanego w rozdziale 10.), a szczegółowe cytaty opatrzone elementem cite (rozdział 8.) wymagane są tylko w dokumentach, w których są rzeczywiście istotne (np. w artykułach prasowych). Określenie liczby znaczników do zastosowania wymaga pewnego doświadczenia, ale jest na to ogólna zasada. Zadaj sobie pytanie: do czego posłuży warstwa semantyczna danego elementu? Jeżeli nie mogę od razu znaleźć odpowiedzi, to rezygnuję z użycia elementu.

Nie nadużywaj elementów Każdy element służy do oznaczania jakiegoś konkretnego rodzaju treści — jest tak nawet w przypadku elementów prezentacyjnych, takich jak b. Przy oznaczaniu treści używaj elementów wyłącznie do tego, do czego są przeznaczone, i unikaj tworzenia własnej semantyki. Jeżeli nie możesz znaleźć elementu o odpowiadającym Ci znaczeniu, rozważ skorzystanie z któregoś ogólnego elementu (takiego jak span lub div) i globalnego atrybutu class do określenia jego znaczenia w dokumencie. Użycie klas nie musi się ograniczać do stylów CSS.

Wyrażaj się konkretnie i spójnie Powinieneś wybierać elementy, które określają treść możliwie precyzyjnie. Musisz więc przezwyciężyć pokusę, by tworzyć stronę, opierając się na ogólnych elementach, skoro istnieją elementy określające

116

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

odpowiednie rodzaje treści. W HTML 4 panowała tendencja, by polegać na elementach div (opisanych w rozdziale 9.) przy tworzeniu struktury strony. Problemem było jednak to, że semantyka nie była od razu widoczna dla zapoznającego się z treścią odbiorcy. Możesz oczywiście utworzyć klasę article i używać jej do nakładania stylów, lecz klasa ta nie będzie tak jednoznaczna dla odbiorców, jak element article. Podobnie, kiedy już decydujesz się na użycie jakiegoś elementu, to korzystaj z niego w spójny sposób na przestrzeni całej strony, serwisu lub aplikacji internetowej. Ułatwi Ci to dalszą pracę ze znacznikami HTML, a innym przyswajanie sobie Twojego kodu.

Nie lekceważ odbiorcy Łatwo przyjąć założenie, że odbiorców Twojego kodu interesuje tylko to, jak strona jest wyświetlana w przeglądarce, i — co za tym idzie — nie musisz się przejmować dokładnością semantyczną kodu. U podstaw rozdziału semantyki od prezentacji leży założenie, że ułatwia to programom przetwarzanie kodu i — wobec tego — można spodziewać się dalszego rozpowszechnienia się takiego stylu użytkowania kodu HTML wraz z upowszechnieniem się HTML5. Zakładając, że nie musisz się przejmować dokładnością lub spójnością kodu, sprawiasz, że przetwarzanie go staje się trudniejsze, co z kolei ogranicza zakres zastosowań, jakie odbiorca mógłby znaleźć dla Twoich treści.

Struktura opisów elementów Opis każdego elementu składa się z tabeli zawierającej najważniejsze informacje, do których będziesz mógł się w każdej chwili odnieść, kiedy już będziesz opatrywał treść dokumentów znacznikami. W tabeli 6.1 znajduje się przykładowy opis elementu ol, którym oznacza się uporządkowane listy. (Szczegóły o listach w HTML znajdziesz w rozdziale 9.). Tabela 6.1. Element ol Element

ol

Typ elementu

Strukturalny

Dozwoleni rodzice

Każdy element, który może zawierać elementy strukturalne

Atrybuty lokalne

start, reversed, type

Zawartość

Brak lub dowolna liczba elementów li

Znaczniki

Otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 dodano atrybut reversed. Atrybuty start i type, z których zrezygnowano w HTML 4, przywrócono w HTML5, lecz mają teraz znaczenie semantyczne (a nie prezentacyjne). Zrezygnowano z atrybutu compact.

Domyślny styl prezentacji

ol { display: block; list-style-type: decimal; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }

Z tabel w tym rozdziale dowiesz się, jakie dany element może mieć elementy-rodziców, jakie treści może zawierać, jaki jest wymagany sposób formatowania znaczników i domyślny styl prezentacji oraz czy ów element jest nowy lub uległ zmianom w HTML5. Informacje o dopuszczalnych rodzicach i zawartości opierają się na kategoriach elementów, które opisałem w rozdziale 3. — głównie są to elementy strukturalne i treściowe.

117

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

Spis elementów W poniższych tabelach znajdziesz streszczone opisy wszystkich elementów HTML5, które opisuję w kolejnych rozdziałach.

Elementy dokumentu i metadanych W tabeli 6.2 znajdują się krótkie opisy elementów dokumentu i metadanych, które przedstawiam szerzej w rozdziale 7. Służą one do tworzenia nadrzędnej struktury dokumentu HTML, podawania przeglądarce danych o dokumencie oraz definiowania skryptów, stylów CSS, a także określania, jaka treść ma być wyświetlana, gdy przeglądarka ma wyłączoną obsługę skryptów. Tabela 6.2. Elementy dokumentu i metadanych Element

Opis

Typ

Nowości i zmiany

base

Określa podstawę względnych adresów URL.

Metadane

Niezmieniony

body

Wskazuje treść dokumentu HTML.

Brak

Zmieniony

DOCTYPE

Wskazuje początek dokumentu HTML.

Brak

Zmieniony

head

Zawiera metadane dokumentu.

Brak

Brak

html

Wskazuje na początek kodu HTML w dokumencie.

Brak

Zmieniony

link

Określa relację z zewnętrznymi zasobami, przeważnie w rodzaju arkusza treści lub favikony.

Metadane

Zmieniony

meta

Podaje informacje o dokumencie.

Metadane

Zmieniony

noscript

Zawiera treść wyświetlaną, kiedy przeglądarka nie obsługuje skryptów lub kiedy ich obsługa jest wyłączona.

Metadane/Treściowy

Niezmieniony

script

Wskazuje blok skryptu — inline bądź w zewnętrznym pliku.

Metadane/Treściowy

Zmieniony

style

Wskazuje styl CSS.

Metadane

Zmieniony

title

Określa tytuł dokumentu.

Metadane

Brak

Elementy tekstowe Elementów tekstowych używa się do nadawania zasobom struktury i znaczenia. W tabeli 6.3 znajdują się krótkie opisy tych elementów, które omówię szerzej w rozdziale 8. Tabela 6.3. Elementy tekstowe Element

Opis

Typ

Nowości i zmiany

a abbr

Tworzy odnośnik.

Treściowy/Strukturalny

Zmieniony

Wskazuje skrót.

Treściowy

Niezmieniony

b

Wydziela ciąg tekstu bez wyróżniania go lub przydawania mu większej wartości.

Treściowy

Zmieniony

br

Określa łamanie wiersza.

Treściowy

Niezmieniony

118

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

Tabela 6.3. Elementy tekstowe — ciąg dalszy Element

Opis

Typ

Nowości i zmiany

cite

Wskazuje tytuł innego tekstu.

Treściowy

Zmieniony

code

Wskazuje fragment kodu.

Treściowy

Niezmieniony

del

Wskazuje tekst, który usunięto z dokumentu.

Treściowy/Strukturalny

Nowy

dfn

Wskazuje definicję terminu.

Treściowy

Niezmieniony

em

Wskazuje ciąg tekstu, na który kładziona jest emfaza.

Treściowy

Niezmieniony

i

Wskazuje ciąg tekstu o innym charakterze niż otaczająca go treść, np. wyraz obcy.

Treściowy

Zmieniony

ins

Wskazuje tekst, który wstawiono do dokumentu.

Treściowy/Strukturalny

Nowy

kbd

Wskazuje tekst wprowadzany przez użytkownika.

Treściowy

Niezmieniony

mark

Wskazuje treści wyróżnione ze względu na ich istotność w innym kontekście.

Treściowy

Nowy

q

Wskazuje treści cytowane z innego źródła.

Treściowy

Niezmieniony

rp

Wskazuje tekst dodatkowy w elemencie ruby.

Treściowy

Nowy

rt

Wskazuje tekst oznaczenia w elemencie ruby.

Treściowy

Nowy

ruby

Wskazuje oznaczenia do zamieszczenia nad znakami pisma logograficznego lub po ich prawej stronie.

Treściowy

Nowy

s

Wskazuje tekst, który się zdezaktualizował.

Treściowy

Zmieniony

samp

Wskazuje kod podany przez program.

Treściowy

Niezmieniony

small

Wskazuje drobne pismo.

Treściowy

Zmieniony

span

Standardowy element, który nie ma własnego znaczenia semantycznego. Używaj go do nadawania treści atrybutów globalnych bez nadawania jej dodatkowego znaczenia semantycznego.

Treściowy

Niezmieniony

strong

Wskazuje, że tekst jest istotny.

Treściowy

Niezmieniony

sub

Wskazuje indeks dolny.

Treściowy

Niezmieniony

sup

Wskazuje indeks górny.

Treściowy

Niezmieniony

time

Wskazuje godzinę lub datę.

Treściowy

Nowy

u

Wydziela ciąg tekstu bez wyróżniania go lub przydawania mu większej wartości.

Treściowy

Zmieniony

var

Wskazuje zmienną programu lub systemu komputerowego.

Treściowy

Niezmieniony

wbr

Wskazuje miejsce, w którym można bezpiecznie złamać wiersz.

Treściowy

Nowy

119

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

Grupowanie treści Elementy przedstawione w tabeli 6.4 służą do zestawiania powiązanych treści. Więcej o tych elementach przeczytasz w rozdziale 9. Tabela 6.4. Grupowanie elementów Element

Opis

Typ

Nowości i zmiany

blockquote

Wskazuje blok treści cytowanej z innego źródła.

Strukturalny

Niezmieniony

dd

Wskazuje definicję w obrębie elementu dl.

Brak

Niezmieniony

div

Standardowy element, który nie ma własnego znaczenia semantycznego. Jest to odpowiednik elementu strukturalnego span.

Strukturalny

Niezmieniony

dl

Wskazuje listę zawierającą serię terminów i definicji.

Strukturalny

Niezmieniony

dt

Wskazuje termin w obrębie elementu dl.

Brak

Niezmieniony

figcaption

Wskazuje podpis elementu figure.

Brak

Nowy

figure

Wskazuje ilustrację.

Strukturalny

Nowy

hr

Wskazuje zmianę tematyczną na poziomie akapitu.

Strukturalny

Zmieniony

li

Wskazuje element w obrębie elementu ul, ol lub menu.

Brak

Zmieniony

ol

Wskazuje uporządkowaną listę.

Strukturalny

Zmieniony

p

Wskazuje paragraf.

Strukturalny

Zmieniony

pre

Wskazuje treść, której formatowanie powinno być zachowane.

Strukturalny

Niezmieniony

ul

Wskazuje nieuporządkowaną listę elementów.

Strukturalny

Zmieniony

Dzielenie treści na sekcje Elementy przedstawione w tabeli 6.5 służą do rozdzielania treści tak, by wyizolować poszczególne koncepcje, idee bądź tematy. Elementy te są w większości nowe i w znacznej mierze ułatwiają oddzielanie znaczenia elementów od ich wyglądu. Więcej na ich temat przeczytasz w rozdziale 10. Tabela 6.5. Elementy służące do dzielenia treści Element

Opis

Typ

Nowości i zmiany

address

Wskazuje dane kontaktowe w odniesieniu do dokumentu lub artykułu (article).

Strukturalny

Nowy

article

Wskazuje samodzielny blok treści.

Strukturalny

Nowy

aside

Wskazuje treści luźno powiązane z otaczającym je materiałem.

Strukturalny

Nowy

details

Tworzy sekcję, którą użytkownik może powiększyć, by zapoznać się ze szczegółami.

Strukturalny

Nowy

footer

Wskazuje obszar stopki.

Strukturalny

Nowy

h1-h6

Wskazuje nagłówek.

Strukturalny

Niezmieniony

header

Wskazuje obszar nagłówków.

Strukturalny

Nowy

120

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

Tabela 6.5. Elementy służące do dzielenia treści — ciąg dalszy Element

Opis

Typ

Nowości i zmiany

hgroup

Ukrywa w strukturze dokumentu wszystkie podane nagłówki, z wyjątkiem nagłówków najwyższego poziomu.

Strukturalny

Nowy

nav

Wskazuje duże nagromadzenie elementów nawigacyjnych.

Strukturalny

Nowy

section

Wskazuje istotne koncepcje lub tematy.

Strukturalny

Nowy

summary

Wskazuje tytuł lub opis treści w okalającym elemencie details.

Brak

Nowy

Tworzenie tabel Elementy z tabeli 6.6 służą do tworzenia tabel, czyli układania danych w siatce. Główną zmianą w HTML5 jest to, że nie możesz już korzystać z tabel do definiowania layoutu stron. Zamiast tego musisz używać właściwości tabelowych CSS, które opisuję w rozdziale 21. Tabela 6.6. Elementy tabel Element

Opis

Typ

Nowości i zmiany

caption

Umieszcza w tabeli podpis.

Brak

Zmieniony

col

Wskazuje kolumnę.

Brak

Zmieniony

colgroup

Wskazuje grupę kolumn.

Brak

Zmieniony

table

Wskazuje tabelę.

Strukturalny

Zmieniony

tbody

Wskazuje część główną tabeli.

Brak

Zmieniony

td

Wskazuje pojedynczą komórkę tabeli.

Brak

Zmieniony

tfoot

Wskazuje stopkę tabeli.

Brak

Zmieniony

th

Wskazuje pojedynczą komórkę nagłówka.

Brak

Zmieniony

thead

Wskazuje nagłówek tabeli.

Brak

Zmieniony

tr

Wskazuje rząd komórek.

Brak

Zmieniony

Tworzenie formularzy Elementy przedstawione w tabeli 6.7 służą do tworzenia formularzy HTML, które pobierają dane wejściowe od użytkownika. Ta dziedzina korzystania z HTML została w szczególnie uprzywilejowany sposób potraktowana w HTML5 — pojawiło się wiele nowych elementów i funkcji, w tym możliwość zatwierdzania danych wejściowych po stronie klienta, zanim jeszcze użytkownik je przekaże. Elementy HTML formularzy opisuję w rozdziałach 12., 13. i 14. Szczególnie interesujące są nowe rodzaje elementu input, które przedstawię w rozdziale 12., a szerzej omówię w rozdziale 13. Tabela 6.7. Elementy formularzy Element

Opis

Typ

Nowości i zmiany

button

Wskazuje przycisk służący do wysłania danych lub wyczyszczenia formularza (lub do innego celu).

Treściowy

Zmieniony

datalist

Określa zbiór sugerowanych wartości.

Strukturalny

Zmieniony

121

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

Tabela 6.7. Elementy formularzy — ciąg dalszy Element

Opis

Typ

Nowości i zmiany

fieldset

Wskazuje grupę elementów formularza.

Strukturalny

Zmieniony

form

Wskazuje formularz HTML.

Strukturalny

Zmieniony

input

Wskazuje kontrolkę służącą do pobierania danych od użytkownika.

Treściowy

Zmieniony

keygen

Generuje klucz prywatny i publiczny.

Treściowy

Nowy

label

Wskazuje oznaczenie elementu formularza.

Treściowy

Zmieniony

legend

Wskazuje oznaczenie elementu fieldset.

Brak

Niezmieniony

optgroup

Wskazuje grupę powiązanych elementów option.

Brak

Niezmieniony

option

Wskazuje opcję, która ma być przedstawiona użytkownikowi.

Brak

Niezmieniony

output

Wskazuje wynik obliczenia.

Treściowy

Nowy

select

Przedstawia użytkownikowi określony zbiór opcji.

Treściowy

Zmieniony

textarea

Umożliwia użytkownikowi wprowadzenie wielowierszowego tekstu.

Treściowy

Zmieniony

Osadzanie zasobów Elementy z tabeli 6.8 służą do osadzania zasobów w dokumencie HTML. Niektóre z nich opiszę w rozdziale 15., a inne w dalszej części książki. Tabela 6.8. Elementy służące do osadzania zasobów Element

Opis

Typ

Nowości i zmiany

area

Wskazuje obszar mapy obrazu po stronie klienta.

Treściowy

Zmieniony

audio

Wskazuje zasoby audio.

Brak

Nowy

canvas

Tworzy płótno dynamicznej grafiki.

Treściowy/Strukturalny

Nowy

embed

Osadza zasoby w dokumencie HTML przy użyciu wtyczki.

Treściowy

Nowy

iframe

Osadza dokument w innym poprzez wytworzenie kontekstu.

Treściowy

Zmieniony

img

Osadza obraz.

Treściowy

Zmieniony

map

Określa definicję mapy obrazu po stronie klienta.

Treściowy/Strukturalny

Zmieniony

meter

Wyświetla wartość numeryczną w kontekście wybranego zakresu.

Treściowy

Nowy

object

Osadza zasoby w dokumencie HTML; może również służyć do tworzenia kontekstów przeglądania i tworzenia map obrazów po stronie klienta.

Treściowy/Strukturalny

Zmieniony

param

Wskazuje parametr, który zostaje przekazany wtyczce za pośrednictwem elementu object.

Brak

Niezmieniony

122

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

Tabela 6.8. Elementy służące do osadzania zasobów — ciąg dalszy Element

Opis

Typ

Nowości i zmiany

progress

Wyświetla wyobrażenie postępu wykonywania jakiegoś procesu.

Treściowy

Nowy

source

Wskazuje zasoby medialne.

Brak

Nowy

svg

Wskazuje zasoby wektorowe.

Brak

Nowy

track

Wskazuje dodatkowe zasoby medialne, np. napisy do filmu.

Brak

Nowy

video

Wskazuje zasoby wideo.

Brak

Nowy

Niewdrożone elementy Istnieją dwa elementy, które nie są obecnie obsługiwane przez jakąkolwiek przeglądarkę, a które opisano pobieżnie w specyfikacjach HTML5. Są to elementy command i menu, których zadaniem jest ułatwienie pracy z menu i elementami interfejsu użytkownika. Nie mogę jednak odnieść się do nich w tej książce bardziej szczegółowo. Mam nadzieję, że nowocześniejsze wersje tych przeglądarek pozwolą na wypracowanie jakiegoś konsensusu w sprawie znaczenia tych elementów.

Podsumowanie W tym rozdziale ułożyłem podwaliny pod szczegółowe omówienia elementów HTML5 w dalszych rozdziałach. Podałem również skrócony spis, w którym znajdziesz opisy elementów, gdybyś kiedyś chciał sobie odświeżyć wiadomości. Kiedy już zaczniesz poznawać elementy i atrybuty HTML, pamiętaj o wskazówkach, które podałem na początku rozdziału: używaj możliwie wyspecjalizowanych elementów, nie nadużywaj ich oraz korzystaj z nich spójnie w obrębie dokumentu, witryny i aplikacji.

123

ROZDZIAŁ 6. „ ELEMENTY HTML — KONTEKST

124

ROZDZIAŁ 7

Tworzenie dokumentów HTML

W tym rozdziale przyjrzymy się najbardziej podstawowym elementom zdefiniowanym w HTML5: elementom dokumentu i metadanych. Są to elementy służące do utworzenia dokumentu HTML i opisania jego zawartości. Choć są to jedne z najmniej ciekawych elementów zdefiniowanych w HTML, to mają fundamentalne znaczenie. Możesz pominąć ten rozdział i wrócić do niego później — ale wróć koniecznie. W każdym dokumencie HTML wykorzystuje się przynajmniej kilka z tych elementów (a często wszystkie). Umiejętność prawidłowego korzystania z nich jest nieodzowna przy tworzeniu zgodnych ze standardami dokumentów HTML5. W tabeli 7.1 znajduje się streszczenie całego rozdziału. Tabela 7.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Wskazanie, że dokument zawiera kod HTML5.

Użyj elementu doctype.

7.1

Wskazanie początku kodu HTML w dokumencie.

Użyj elementu html.

7.2

Wskazanie początku sekcji metadanych dokumentu HTML.

Użyj elementu head.

7.3

Wskazanie początku sekcji z treścią dokumentu HTML.

Użyj elementu body.

7.4

Określenie tytułu dokumentu HTML.

Użyj elementu title.

7.5

Zdefiniowanie adresu URL, do którego mają się odnosić względne adresy URL dokumentu.

Użyj elementu base.

7.6

Dodanie opisów danych zawartych w dokumencie HTML.

Użyj elementu meta.

7.7

Określenie kodowania znaków w dokumencie HTML.

Użyj elementu meta z atrybutem charset.

7.8

Określenie domyślnego arkusza stylów dla dokumentu HTML lub polecenie, by okresowo odświeżać zawartość strony.

Użyj elementu meta z atrybutem http-equiv.

7.9

Definiowanie stylów inline.

Użyj elementu style.

7.10 – 7.12

Wczytanie zewnętrznego zasobu, m.in. arkusza stylów lub favikony.

Użyj elementu link.

7.13 – 7.15

Wczytanie z wyprzedzeniem zasobu, który stanie się potrzebny.

Użyj elementu link z atrybutem rel o wartości prefetch.

7.16

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Tabela 7.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Zdefiniowanie skryptu inline.

Użyj elementu script.

7.17

Wczytanie zewnętrznego pliku ze skryptem.

Użyj elementu script z atrybutem src.

7.18 – 7.19

Określenie, kiedy i w jaki sposób skrypt ma być wykonany.

Użyj elementu script z atrybutem async lub defer.

7.20 – 7.24

Zdefiniowanie treści wyświetlanych, kiedy brakuje obsługi JavaScript lub jest wyłączona.

Użyj elementu noscript.

7.25 – 7.26

Ustanowienie podstawowej struktury dokumentu Zacznijmy od elementów dokumentu, które określają postać dokumentu HTML i wskazują przeglądarce pierwotny kontekst. Istnieją tylko cztery elementy dokumentu, ale każdy dokument HTML musi je zawierać.

Element doctype Element doctype jest jedyny w swoim rodzaju. Każdy dokument HTML musi się zaczynać od elementu doctype — to on właśnie mówi przeglądarce, że będzie miała do czynienia z kodem HTML. Wprawdzie większość przeglądarek i tak prawidłowo wyświetla kod, nawet jeśli pominięto element doctype, ale oczekiwanie od przeglądarek takiego zachowania jest złym nawykiem. W tabeli 7.2 znajduje się opis tego elementu. Tabela 7.2. Element doctype Element

doctype

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Brak

Atrybuty lokalne

Brak

Zawartość

Brak

Znaczniki

Pojedynczy znacznik otwierający

Nowość w HTML5

Nie

Zmiany w HTML5

DTD wymagany w HTML 4 nie jest używany w HTML5

Domyślny styl prezentacji

Brak

Elementu doctype w HTML5 można używać tylko w jeden sposób — taki, jaki widać w listingu 7.1. W toku pracy z tym rozdziałem będziemy dodawać kolejne elementy w celu utworzenia prostego, lecz pełnoprawnego dokumentu HTML5. W listingu 7.1 widnieje pierwszy wiersz. Listing 7.1. Zastosowanie elementu doctype

Element ten wskazuje przeglądarce dwie rzeczy: fakt, że ma do czynienia z kodem HTML, oraz wersję specyfikacji HTML, którą posłużono się do oznaczania treści. Nie musisz podawać numeru wersji — przeglądarka automatycznie wykryje, że używasz HTML5, jako że element ten ma nieco inną formę niż jego odpowiedniki z poprzednich wersji. Element doctype nie ma znacznika zamykającego. Wystarczy zamieścić pojedynczy znacznik na początku dokumentu.

126

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Element html Element html, który dokładniej określa się mianem elementu głównego, wskazuje początek kodu HTML w dokumencie. Jego opis znajduje się w tabeli 7.3. Tabela 7.3. Element html Element

html

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Brak

Atrybuty lokalne

manifest — szczegóły znajdziesz w rozdziale 40.

Zawartość

Jeden element head i jeden element body

Znaczniki

Znacznik otwierający i zamykający, okalające inne elementy

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 dodano atrybut manifest; atrybut version występujący w HTML 4 wyszedł z użycia

Domyślny styl prezentacji

html { display: block; } html:focus { outline: none;}

Element html wskazuje początek kodu HTML w dokumencie. W listingu 7.2 widać przykład jego zastosowania. Listing 7.2. Zastosowanie elementu html

Pomijam treść i elementy.

Element head W elemencie head znajdują się metadane dokumentu. Metadane HTML dostarczają przeglądarce informacje o zawartości i znacznikach dokumentu, ale mogą również zawierać skrypty i odniesienia do zewnętrznych zasobów (takich jak arkusze stylów CSS). Z elementami metadanych zetkniesz się w dalszej części tego rozdziału. W tabeli 7.4 znajduje się opis elementu head. Tabela 7.4. Element head Element

head

Typ elementu

Nie dotyczy

Dozwoleni rodzice

html

Atrybuty lokalne

Brak

Zawartość

Wymagany jest jeden element title; inne elementy metadanych są opcjonalne

Znaczniki

Znacznik otwierający i zamykający, okalające inne elementy

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

127

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

W listingu 7.3 widać przykład zastosowania elementu head. Każdy dokument HTML powinien zawierać element head, w którym z kolei musi znajdować się element title — tak jak widać w listingu. Szczegóły o elemencie title znajdziesz w dalszej części rozdziału. Listing 7.3. Zastosowanie elementu head

Witaj

Element body Element body — w odróżnieniu od elementu head, zawierającego metadane i informacje o dokumencie — zawiera treść dokumentu HTML. Element body zawsze zamieszcza się po elemencie head, wobec czego jest drugim dzieckiem elementu html. W tabeli 7.5 znajduje się opis elementu body. Tabela 7.5. Element body Element

body

Typ elementu

Nie dotyczy

Dozwoleni rodzice

html

Atrybuty lokalne

Brak

Zawartość

Wszelkie elementy strukturalne i treściowe

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty alink, background, bgcolor, link, margintop, marginbottom, marginleft, marginright, marginwidth, text i vlink wyszły z użycia; efekty osiągane przez używanie tych atrybutów można uzyskać przy użyciu CSS

Domyślny styl prezentacji

body { display: block; margin: 8px; } body:focus { outline: none; }

W listingu 7.4 widać przykład zastosowania elementu body. Listing 7.4. Zastosowanie elementu body

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu

W elemencie body zamieściłem krótki fragment treści. Poszczególne elementy, które w nim wykorzystałem (p, code i a), omówię w rozdziałach 8. i 9. Uzyskaliśmy już prosty, lecz pełnoprawny dokument HTML. Na rysunku 7.1 widać, jak prezentuje się na ekranie.

128

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Rysunek 7.1. Wyświetlanie prostego dokumentu HTML w przeglądarce

Opatrzenie dokumentu elementami metadanych Elementy metadanych pozwalają na podanie informacji o dokumencie HTML. Nie stanowią wprawdzie właściwej treści, ale zawierają informacje na temat treści, które znajdują się po nich. Elementy metadanych zamieszcza się w elemencie head.

Określenie tytułu dokumentu Element title określa tytuł tudzież nazwę dokumentu. Przeglądarki zazwyczaj wyświetlają jego zawartość u góry zakładki lub okna przeglądarki. W tabeli 7.6 znajduje się opis elementu title. Tabela 7.6. Element title Element

title

Typ elementu

Metadane

Dozwoleni rodzice

head

Atrybuty lokalne

Brak

Zawartość

Tytuł dokumentu lub opis jego zawartości

Znaczniki

Znacznik otwierający i zamykający, okalające inne elementy

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

title { display: none; }

Każdy dokument HTML powinien mieć jeden element title, a tekst zawarty pomiędzy jego znacznikami powinien mieć jakieś znaczenie dla użytkownika. Musi przynajmniej pozwolić użytkownikowi na odróżnianie różnych zakładek lub okien oraz określenie, które z nich są częścią Twojej aplikacji internetowej. W listingu 7.5 widać przykład zastosowania elementu head. Listing 7.5. Element head

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu

129

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Wygląd elementu head w przeglądarce widać na rysunku 7.2. W tym przykładzie użyłem Google Chrome, ale efekt w innych przeglądarkach jest dość podobny.

Rysunek 7.2. Wygląd elementu title

Ustawienie podstawy dla względnych adresów URL Element base określa bazowy adres URL, względem którego określane są względne adresy zawarte w dokumencie HTML. Względny adres to taki, w którym pomija się elementy określające protokół, hosta i port, a odnosi się do innego adresu URL, określonego albo w elemencie base, albo względem adresu użytego do wczytania bieżącego dokumentu. Element base określa również sposób, w jaki otwierane są klikane linki, a także to, jak przeglądarka zachowuje się po wysłaniu formularza. (O formularzach HTML5 opowiem szerzej w rozdziale 12.). W tabeli 7.7 znajduje się opis elementu base. Tabela 7.7. Element base Element

base

Typ elementu

Metadane

Dozwoleni rodzice

head

Atrybuty lokalne

href, target

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

Dokument HTML powinien zawierać co najwyżej jeden element base. Jest to przeważnie jeden z pierwszych elementów zawartych w elemencie head — dzięki temu pewne jest, że podane w kolejnych elementach metadanych względne adresy URL odnoszą się do URL bazowego.

Atrybut href Atrybut href określa bazowy URL, do którego mają się odnosić względne adresy URL zamieszczone w dokumencie. W listingu 7.6 widać zastosowanie tego elementu w praktyce. Listing 7.6. Użycie atrybutu href w elemencie base

Przykład

130

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

W tym przykładzie podałem bazowy URL http://titan/pliki/. titan to nazwa folderu, w którym trzymam pliki, a w folderze pliki trzymam listingi, które są podanymi w tej książce przykładami. W dalszej części dokumentu utworzyłem odnośnik wykorzystujący względny URL page2.html. (Wykorzystanie elementu a omówię w rozdziale 8.). Kiedy użytkownik klika odnośnik, przeglądarka łączy bazowy URL z względnym URL w jeden adres http://titan/pliki/page2.html. „ Wskazówka Jeżeli nie skorzystasz z elementu base lub podasz bazowy URL przy użyciu atrybutu href, przeglądarka będzie odnosić wszelkie względne adresy URL do adresu bieżącego dokumentu. Przykładowo, gdybyś wczytał dokument znajdujący się pod adresem http://mojserwer.com/app/mojastrona.html, w którym znajdowałby się odnośnik z względnym adresem mojadrugastrona.html, przeglądarka spróbowałaby wczytać drugą stronę z całkowicie prawidłowego adresu http://mojserwer.com/app/mojadrugastrona.html.

Wykorzystanie atrybutu target Atrybut target mówi przeglądarce, jak otwierać adresy URL. Wartości podane dla tego atrybutu określają kontekst przeglądania. Z przykładami takich kontekstów i ich zastosowaniem zapoznasz się w rozdziałach 8. i 15., gdzie przyjrzymy się elementom a i iframe.

Opisanie dokumentu metadanymi Element meta pozwala na definiowanie różnych rodzajów metadanych dokumentu. Możesz go używać na wiele różnych sposobów, przy czym dokument HTML może zawierać wiele elementów meta. W tabeli 7.8 znajduje się opis elementów meta. Tabela 7.8. Element meta Element

meta

Typ elementu

Metadane

Dozwoleni rodzice

head

Atrybuty lokalne

name, content, charset, http-equiv

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybut charset pojawił się w HTML5. W HTML 4 atrybutowi http-equiv można było nadać dowolną liczbę różnych wartości. W HTML5 zmieniono to tak, że jedynie wartości opisane w tabeli są dozwolone. Atrybut HTML 4 scheme wyszedł z użycia. Języka strony nie określa się już przy użyciu elementu meta; w dalszej części rozdziału pokażę Ci, jak się to robi w HTML5.

Domyślny styl prezentacji

Brak

131

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

W kolejnych punktach pokażę Ci różne sposoby wykorzystania elementu meta. Zauważ, że jednego elementu meta można użyć tylko na jeden z tych sposobów. Jeżeli chcesz skorzystać z kilku jego funkcji, to musisz dodać kilka elementów meta do elementu head.

Określanie par metadanych nazw i wartości Pierwszym sposobem na wykorzystanie elementu meta jest definiowanie par nazw i wartości. Służą do tego atrybuty name i content. W listingu 7.7 widnieje przykład ich użycia. Listing 7.7. Wykorzystanie elementu meta do zdefiniowania par nazw i wartości

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Atrybutem name określa się, do jakiego rodzaju metadanych odnosi się dany element, a atrybut content służy do podawania wartości. W tabeli 7.9 znajduje się lista predefiniowanych rodzajów metadanych, których możesz używać z elementem meta. Tabela 7.9. Predefiniowane typy metadanych do wykorzystania z elementem meta Nazwa metadanych

Opis

application name

Nazwa aplikacji internetowej, w której skład wchodzi bieżąca strona.

author

Imię autora bieżącej strony.

description

Opis bieżącej strony.

generator

Nazwa oprogramowania, które wygenerowało kod HTML (zazwyczaj używa się tego atrybutu przy generowaniu strony z użyciem frameworka, np. Ruby on Rails, ASP.NET itp.).

keywords

Zbiór oddzielonych przecinkiem ciągów, które opisują treść strony.

Poza pięcioma predefiniowanymi rodzajami metadanych możesz skorzystać również z rozszerzeń. Ich aktualną listę znajdziesz na stronie http://wiki.whatwg.org/wiki/MetaExtensions. Niektóre z nich są powszechnie używane, podczas gdy inne są dość wyspecjalizowane i bardzo rzadko używane. Typ metadanych robots jest przykładem często stosowanego rozwinięcia. Pozwala ono twórcy dokumentu HTML określić, jak dokument ma być traktowany przez wyszukiwarki. Oto przykład:

Rozpoznawane przez przeglądarki wartości to noindex (polecenie, by nie indeksować strony), noarchive (polecenie, by nie archiwizować strony i nie tworzyć jej kopii) oraz nofollow (polecenie, by nie podążać za odnośnikami zawartymi na stronie). Istnieje o wiele więcej rozszerzeń metadanych i zachęcam Cię do zapoznania się ze wspomnianą wyżej listą, by znaleźć takie, które przystają do Twojego projektu.

132

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

„ Wskazówka Metadane keywords były niegdyś głównym sposobem wskazywania wyszukiwarkom, jak kategoryzować treść strony i zamieszczać ją w rankingu. Dziś wyszukiwarki zwracają o wiele mniejszą uwagę na metadane keywords, jako że bywają nadużywane w celu fałszywego określania znaczenia i zawartości strony. Najlepszym sposobem na zwiększenie wartości Twoich treści dla wyszukiwarek jest skorzystanie z rad, które same podają — większość z nich oferuje wskazówki co do optymalizacji stron i witryn. Przewodnik Google znajdziesz pod adresem http:// support.google.com/webmasters/bin/answer.py?hl=en&hlrm=pl&answer=35291.

Określanie kodowania znaków Element meta może też posłużyć do określenia kodowania znaków składających się na treść dokumentu HTML. Przykład widnieje w listingu 7.8. Listing 7.8. Użycie elementu meta do określenia kodowania znaków

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

W tym przykładzie zdefiniowałem dla strony kodowanie UTF-8. UTF-8 jest powszechnym systemem kodowania znaków, ponieważ pozwala na przedstawienie wszystkich znaków Unicode przy najmniejszym użyciu pamięci. (W chwili, gdy to piszę, około 50% wszystkich stron internetowych używa kodowania UTF-8).

Symulowanie nagłówków HTTP Ostatnim sposobem na wykorzystanie elementu meta jest nadpisanie wartości któregoś z nagłówków HTTP (Hypertext Transfer Protocol). HTTP jest tym, co przeważnie służy do przekazywania danych HTML pomiędzy serwerem a przeglądarką. Nie będę szerzej pisać o HTTP, ale wspomnę tylko, że każda odpowiedź ze strony serwera dotyczy serii nagłówków opisujących przeglądarce treść; ponadto przy użyciu elementu meta możesz symulować lub zastąpić trzy tego typu nagłówki. W listingu 7.9 widać formę, jaką wykorzystywane w tym celu elementy meta ogólnie przyjmują. Listing 7.9. Zastosowanie elementu meta do symulowania nagłówka HTTP

Przykład





133

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Atrybutu http-equiv używa się do określenia symulowanego nagłówka, a atrybutu content do podania jego wartości. W tym przykładzie wybrałem nagłówek refresh i wartość 5 — nakazuje to przeglądarce odświeżać stronę co pięć sekund. „ Wskazówka Jeśli po wartości odświeżania zamieścisz średnik i adres URL, przeglądarka wczyta podany adres URL po minięciu określonego czasu. Przykład znajdziesz w punkcie „Element noscript”.

Dla atrybutu http-equiv dopuszczalne są trzy wartości, które podaję w tabeli 7.10. Tabela 7.10. Dopuszczalne wartości atrybutu http-equiv elementu meta Wartość atrybutu

Opis

refresh

Wskazuje mierzony w sekundach okres, po którym bieżąca strona ma być odświeżona — pobrana na nowo z serwera. Możesz również wskazać adres URL do wczytania, np.:

default-style

Wskazuje arkusz stylów, który powinien być użyty na stronie. Wartość atrybutu content musi się pokrywać z atrybutem title elementu script lub link znajdującego się w tym samym dokumencie.

content-type

Jest to inny sposób wskazania kodowania znaków w dokumencie HTML. Przykładowo:

Definiowanie stylów CSS Element style pozwala na definiowanie stylów CSS w dokumencie HTML inline zamiast używania elementu link, który umożliwia importowanie stylów z zewnętrznego arkusza stylów. W tabeli 7.11 znajduje się opis elementu style. Tabela 7.11. Element style Element

style

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Dowolny element, który może zawierać metadane, head, div, noscript, section, article, aside

Atrybuty lokalne

type, media, scoped

Zawartość

Style CSS

Znaczniki

Znacznik otwierający i zamykający, okalające inne elementy

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 pojawił się atrybut scoped

Domyślny styl prezentacji

Brak

134

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

W listingu 7.10 widnieje przykład zastosowania elementu style. Listing 7.10. Zastosowanie elementu style

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

W tym przykładzie utworzyłem nowy styl elementu a. Sprawia on, że odnośnik wyświetlany jest z szarym tłem, białym tekstem i dopełnieniem. (Jeżeli dopiero zaczynasz pracę z CSS, podstawy znajdziesz w rozdziale 4., a szersze omówienie w rozdziale 16.). Rezultat zastosowania tego stylu widać na rysunku 7.3.

Rysunek 7.3. Zastosowanie elementu style do utworzenia stylu inline Element style możesz zamieszczać w różnych miejscach dokumentu HTML, a dokument może zawierać wiele elementów style. Nie musisz zatem definiować wszystkich stylów w sekcji head. Przydaje się to, kiedy tworzysz strony przy użyciu szablonów, gdyż możesz dzięki temu uzupełniać style podane w szablonie o style właściwe dla określonej strony.

Określanie rodzaju stylu Atrybut type pozwala wskazać przeglądarce rodzaj definiowanego stylu. Tymczasem przeglądarki obsługują jedynie style CSS, więc atrybut ten zawsze ma wartość text/css.

Określanie zakresu stylu Jeżeli w elemencie style znajduje się atrybut scoped, to styl nadawany jest jedynie rodzicowi i dzieciom elementu. Kiedy ten atrybut nie występuje, styl zdefiniowany w dowolnym miejscu dokumentu HTML odnosi się do wszystkich elementów tego dokumentu. 135

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

„ Ostrzeżenie W chwili, kiedy to piszę, żadna z najpopularniejszych przeglądarek nie obsługuje atrybutu scoped stylów.

Określanie właściwego medium stylu Atrybut media pozwala określić, kiedy styl ma być zastosowany do dokumentu. W listingu 7.11 widnieje przykład wykorzystania tego atrybutu. Listing 7.11. Zastosowanie atrybutu media elementu style

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

W listingu zdefiniowałem dwa elementy style o różnych wartościach atrybutu media. Przeglądarka ma zastosować pierwszy styl, kiedy dokument HTML wyświetlany jest na ekranie, a drugi przy drukowaniu strony. Warunki określające sytuacje, w których style mają być używane, możesz sprecyzować bardzo dokładnie. Przede wszystkim, możesz określić właściwe urządzenie. Dopuszczalne wartości opisuję w tabeli 7.12. Przeglądarka interpretuje, do jakiej kategorii dane urządzenie przynależy. Niektóre rodzaje urządzeń (np. te określane wartościami screen i print) interpretowane są spójnie, lecz przy innych (np. urządzeniach handheld) występuje większa dowolność. Warto sprawdzić, czy docelowe przeglądarki postrzegają określone urządzenia tak samo jak Ty. Jeszcze większą precyzję mogą Ci zapewnić dodatkowe właściwości atrybutu media. W listingu 7.12 widać przykład ich zastosowania. Listing 7.12. Dookreślenie elementu style

Przykład

136

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Tabela 7.12. Zdefiniowane wartości urządzeń atrybutu media elementu style Urządzenie

Opis

all

Używa stylu przy dowolnym urządzeniu; jest to wartość domyślna.

aural

Używa stylu przy syntezatorach mowy.

braille

Używa stylu przy monitorach brajlowskich.

handheld

Używa stylu przy urządzeniach mobilnych.

projection

Używa stylu przy rzutnikach.

print

Używa stylu przy tworzeniu podglądu wydruku i drukowaniu.

screen

Używa stylu przy wyświetlaniu treści na ekranie komputera.

tty

Używa stylu przy urządzeniach używających znaków o jednakowej szerokości (np. dalekopisach).

tv

Używa stylu przy wyświetlaczach telewizyjnych.

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

W powyższym listingu użyłem właściwości width do odróżnienia dwóch stylów. Pierwszy z nich ma być używany, kiedy szerokość okna przeglądarki wynosi mniej niż 500 pikseli, a drugi kiedy szerokość okna jest większa niż 500 pikseli. Gdybyś otworzył dokument HTML z listingu 7.12 w przeglądarce, a następnie zmienił rozmiar okna, to zobaczyłbyś, jaki to daje efekt (rysunek 7.4). Zauważ, że użyłem operatora AND do zestawienia urządzenia z właściwością. Poza operatorem AND możesz również używać NOT oraz przecinka (,) jako OR. Pozwala to na tworzenie złożonych i konkretnych warunków określających, kiedy styl ma być zastosowany. Właściwości w rodzaju width używa się zwykle z modyfikatorami min i max w celu zwiększenia ich elastyczności, choć można je pominąć przy bardzo szczegółowym określaniu parametrów okna. Dostępne właściwości wraz z modyfikatorami znajdziesz w tabeli 7.13. O ile nie jest napisane inaczej, owe właściwości możesz modyfikować członami min- i max-, jeżeli chcesz podawać zakresy zamiast konkretnych wartości. Podobnie jak w przypadku urządzeń, interpretacja tych właściwości leży w gestii przeglądarki, wobec czego mogą występować niespójności w rozpoznawaniu i wykrywaniu właściwości. Jeżeli Twoje style bazują na tych właściwościach, to musisz je dokładnie przetestować oraz zdefiniować zapasowy styl na wypadek, gdyby te właściwości okazały się nieobsługiwane.

137

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Rysunek 7.4. Zastosowanie różnych stylów w zależności od szerokości okna przeglądarki Tabela 7.13. Właściwości atrybutu media elementu style Właściwość

Opis

Przykład

width height

Określa szerokość lub wysokość okna przeglądarki. Piksele określa się jednostkami px.

width:200px

device-width device-height

Określa szerokość lub wysokość całego ekranu (a nie tylko okna przeglądarki). Piksele wyraża się jednostkami px.

min-device-height:200px

resolution

Określa rozdzielczość urządzenia w jednostkach dpi (dots per inch — punkty na cal) lub dpcm (dots per centimeter — punkty na centymetr).

max-resolution:600dpi

orientation

Określa orientację urządzenia. Obsługuje wartości portrait (pionową) i landscape (poziomą). Właściwość nie łączy się z modyfikatorami.

orientation:portrait

aspect-ratio device-aspect-ratio

Określa format obrazu okna przeglądarki lub całego urządzenia. Wartości wyraża się stosunkiem szerokości do wysokości.

min-aspect-ratio:16/9

color monochrome

Określa, ile bitów przypada na piksel na kolorowym bądź monochromatycznym wyświetlaczu.

min-monochrome:2

color-index

Określa liczbę kolorów wyświetlanych przez ekran.

max-color-index:256

scan

Określa tryb skanowania telewizora. Obsługuje wartości progressive i interlace. Właściwość nie łączy się z modyfikatorami.

scan:interlace

grid

Określa, czy wyświetlacz urządzenia opiera się na siatce, tak jak w przypadku terminali znakowych i jednowierszowych wyświetlaczy pagerów. Właściwość obsługuje wartości 0 i 1, gdzie 1 oznacza wyświetlacz oparty na siatce. Właściwość nie łączy się z modyfikatorami.

grid:0

138

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Wskazywanie zewnętrznych zasobów Element link tworzy związek między dokumentem HTML a zewnętrznym zasobem — zazwyczaj arkuszem stylów CSS. W tabeli 7.14 znajduje się opis elementu link. Tabela 7.14. Element link Element

link

Typ elementu

Metadane

Dozwoleni rodzice

head, noscript

Atrybuty lokalne

href, rel, href lang, media, type, sizes

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Nie

Zmiany w HTML5

Dodano atrybut sizes; w HTML5 zrezygnowano z atrybutów charset, rev i target

Domyślny styl prezentacji

Brak

W elemencie link można zdefiniować sześć atrybutów lokalnych, które opisuję w tabeli 7.15. Najważniejszy z nich to rel, które określa charakter relacji między dokumentem HTML a zasobami, do których odnosi się link. Najczęściej występujące relacje opiszę poniżej. Tabela 7.15. Atrybuty lokalne elementu link Atrybut

Opis

href

Określa adres URL zasobów, do których odnosi się element link.

hreflang

Określa język zasobów.

media

Określa urządzenie, dla którego podane zasoby są przeznaczone. Można w nim wykorzystać wartości urządzeń i właściwości, które podałem w tabelach 7.10 i 7.11.

rel

Określa rodzaj relacji pomiędzy dokumentem a zasobami.

sizes

Określa rozmiar ikonek. Przedstawię Ci przykład, w którym użyto elementu link do wczytania favikony.

type

Określa typ MIME zasobów, np. text/css lub image/x-icon.

Wartość przypisana atrybutowi rel określa, jak przeglądarka ma się odnieść do elementu link. W tabeli 7.16 widnieją często podawane wartości atrybutu rel oraz ich opisy. Istnieją wprawdzie inne wartości rel, ale mamy tu do czynienia z niepewną dziedziną funkcjonalności HTML5. Najbardziej wyczerpujące definicje wartości rel znajdziesz pod adresem http://iana.org/assignments/link-relations/link-relations.xml.

Wczytywanie arkusza stylów W celu zademonstrowania, jak można do tego wykorzystać element link, utworzyłem arkusz stylów styles.css, którego treść widać w listingu 7.13. Listing 7.13. Plik styles.css a { background-color: grey; color: white; padding: 0.5em; }

139

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Tabela 7.16. Wybrane wartości atrybutu rel elementu link Wartość

Opis

alternate

Linkuje do innej wersji dokumentu, np. w innym języku.

author

Linkuje do autora dokumentu.

help

Linkuje do zasobów pomocy związanych z bieżącym dokumentem.

icon

Wskazuje źródło ikonki. Przykład zastosowania znajdziesz w listingu 7.14.

license

Linkuje do licencji związanej z bieżącym dokumentem.

pingback

Wskazuje serwer pingback, co pozwala na uzyskiwanie powiadomień, kiedy inne strony publikują odnośniki do bloga.

prefetch

Pobiera zasoby z wyprzedzeniem. Przykład zastosowania znajdziesz w listingu 7.15.

stylesheet

Wczytuje zewnętrzny arkusz stylów CSS. Przykład zastosowania znajdziesz w listingu 7.13.

Powyższy styl CSS zastosowałem uprzednio przy użyciu elementu style, lecz tym razem zamieściłem go w zewnętrznym arkuszu stylów. Żeby z niego skorzystać, użyłem elementu link tak, jak to widać w listingu 7.14. Listing 7.14. Wykorzystanie elementu link do wczytania zewnętrznego arkusza stylów

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Możesz użyć wielu elementów link do wczytania wielu zewnętrznych zasobów. Zaletą zewnętrznych arkuszy stylów jest możliwość używania na przestrzeni wielu dokumentów jednego zbioru stylów bez konieczności powielania go. Przeglądarka wczytuje i nanosi style tak samo, jak gdyby właściwości CSS ujęte były w elemencie style (rysunek 7.5).

Rysunek 7.5. Nanoszenie stylów pobranych z zewnętrznego arkusza

140

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Definiowanie favikony strony Pomijając arkusze CSS, elementu link używa się najczęściej do definiowania związanych ze stronami ikonek. Różne przeglądarki obsługują ikonki w różny sposób, ale zazwyczaj wyświetlają je w zakładkach stron i w liście ulubionych stron użytkownika. Dla przykładu pobierzmy favikonę strony Helionu — www.helion.pl. Jest to obraz o wymiarach 16×16 pikseli w formacie .ico. Format ten jest powszechnie obsługiwany przez przeglądarki. Ikonkę widać na rysunku 7.6. Plik nosi nazwę favicon.ico.

Rysunek 7.6. Favikona Helionu Można skorzystać z tej favikony, dodając do strony element link, tak jak w listingu 7.15. Listing 7.15. Dodanie favikony przy użyciu elementu link

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Przy wczytywaniu strony przeglądarka wczytuje i wyświetla favikonę, tak jak widać na rysunku 7.7. Na tym rysunku widać Google Chrome, które wyświetla favikonę u góry zakładki strony.

Rysunek 7.7. Favikona wyświetlona u góry zakładki strony „ Wskazówka Nie musisz używać elementu link, jeżeli favikona znajduje się pod adresem /favicon.ico (tj. w katalogu głównym serwera). Większość przeglądarek automatycznie pobiera ten plik przy wczytywaniu strony, nawet kiedy element link jest nieobecny.

141

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Pobieranie zasobów z wyprzedzeniem Możesz polecić przeglądarce, by z wyprzedzeniem pobrała zasoby, które po niedługim czasie mogą być potrzebne. W listingu 7.16 widać, jak w tym celu zastosowano element link. Listing 7.16. Pobieranie zasobów z wyprzedzeniem

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Atrybutowi rel nadałem wartość prefetch oraz wskazałem, że strona page2.html ma być wczytana w oczekiwaniu na to, aż użytkownik kliknie odnośnik w celu wykonania jakiejś czynności, przy której ta strona jest wymagana. „ Uwaga Kiedy piszę te słowa, jedynie Firefox obsługuje pobieranie zasobów z wyprzedzeniem przy użyciu elementu link.

Wykorzystanie elementów skryptowych Istnieją dwa elementy skryptowe. Pierwszy, script, pozwala na definiowanie skryptów i kontrolowanie trybu ich wykonywania. Drugi, noscript, pozwala na określenie, co ma się dziać, jeśli przeglądarka nie obsługuje skryptów lub kiedy obsługa jest wyłączona. „ Wskazówka Element script przeważnie zamieszcza się w elemencie head, ale można go umieścić w dowolnym miejscu dokumentu HTML. Zalecałbym zamieszczanie wszystkich elementów script w sekcji head dokumentu, ponieważ ułatwia to zarządzanie nimi, a poza tym właśnie tam ludzie ich zwykle szukają.

Element script Element script pozwala na zamieszczanie na stronach skryptów zdefiniowanych inline lub pobieranych z zewnętrznych plików. JavaScript to najczęściej używany rodzaj skryptu i to właśnie na nim się skoncentruję, ale przeglądarki obsługują też inne języki skryptowe, w tym pozostałości po wojnach przeglądarek, o których wspomniałem w rozdziale 1. W tabeli 7.17 znajduje się opis elementu script. Na każdy definiowany bądź importowany skrypt przypada jeden element script.

142

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Tabela 7.17. Element script Element

script

Typ elementu

Metadane/Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać metadane lub treść

Atrybuty lokalne

type, src, defer, async, charset

Zawartość

Deklaracje w języku skryptowym lub brak, jeżeli podaje się zewnętrzną bibliotekę skryptów

Znaczniki

Znacznik otwierający i zamykający; samozamykające znaczniki są niedozwolone, nawet przy odwoływaniu się do zewnętrznej biblioteki JavaScript

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybut type jest w HTML5 opcjonalny; dodano atrybuty async i defer; atrybut language z HTML 4 jest w HTML5 nieważny

Domyślny styl prezentacji

Brak

Typ elementu script różni się w zależności od tego, gdzie jest użyty. Elementy script zamieszczone w elemencie head zaliczają się do metadanych, lecz kiedy są zamieszczone w innych elementach (np. body lub section), należą do treści. W kolejnych punktach pokażę Ci, jak używać elementów script do uzyskiwania różnorakich rezultatów. W tabeli 7.18 znajduje się opis atrybutów elementu script. Tabela 7.18. Atrybuty lokalne elementu script Atrybut

Opis

type

Wskazuje typ definiowanego lub przywoływanego skryptu. Przy skryptach JavaScript atrybut ten można pominąć.

src

Wskazuje adres URL zewnętrznego pliku skryptowego. Przykład zastosowania znajdziesz poniżej.

defer async

Wskazuje sposób wykonania skryptu. Przykład zastosowania znajdziesz poniżej. Atrybutów tych można używać jedynie w połączeniu z atrybutem src.

charset

Wskazuje kodowanie znaków zewnętrznego pliku skryptowego. Atrybutu tego można używać jedynie w połączeniu z atrybutem src.

Definiowanie skryptu inline Najprościej zdefiniować skrypt inline, co polega na zamieszczeniu deklaracji JavaScript na stronie HTML. W listingu 7.17 znajduje się przykład. Listing 7.17. Definiowanie skryptu inline

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Kiedy nie używasz atrybutu type, przeglądarka zakłada, że ma do czynienia z JavaScript. Ten prosty skrypt zapisuje tekst w dokumencie HTML. Skrypty domyślnie wykonywane są, kiedy tylko przeglądarka na nie natrafia. Efekt tego widać na rysunku 7.8, gdzie tekst skryptu zamieszczony jest w oknie przeglądarki przed zawartym w body elementem p.

Rysunek 7.8. Rezultat zastosowania prostego skryptu

Wczytanie zewnętrznej biblioteki skryptowej Skrypty możesz umieszczać w osobnych plikach i wczytywać je elementem script. Pliki te mogą być tak proste (tak jak w poniższym przykładzie) lub tak rozbudowane (jak w przypadku zaawansowanych bibliotek w rodzaju jQuery), jak tylko chcesz. W celu zademonstrowania działania zewnętrznego skryptu utworzyłem plik o nazwie simple.js, którego treść widać w listingu 7.18. Listing 7.18. Zawartość pliku skryptowego simple.js document.write("To jest tekst z zewnętrznego skryptu");

W pliku znajduje się pojedyncza deklaracja, podobna do tej, którą podałem w skrypcie inline. W listingu 7.19 widać, jak użyć atrybutu src w elemencie script do przywołania tego pliku. Listing 7.19. Wczytywanie zewnętrznego skryptu przy użyciu atrybutu src

Przykład

Lubię jabłka i pomarańcze.

144

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Odwiedź stronę Helionu Strona 2

„ Wskazówka Element skryptowy musi być pusty, jeżeli ma określony atrybut src. Nie możesz użyć jednego elementu script do zdefiniowania skryptu inline i skryptu zewnętrznego.

Wartością atrybutu src jest adres URL pliku skryptu, który ma być wczytany. Plik simple.js umieściłem w tym samym katalogu, co plik HTML, więc mogłem w tym przykładzie użyć względnego URL. Efekt zastosowania skryptu widać na rysunku 7.9.

Rysunek 7.9. Rezultat zastosowania zewnętrznego skryptu „ Wskazówka Zauważ, że podałem znacznik zamykający elementu script, pomimo że sam element nie zawiera żadnej treści. Gdybym użył samozamykającego znacznika przy wywoływaniu zewnętrznego skryptu, przeglądarka zignorowałaby element i nie wczytałaby pliku.

Opóźnianie wykonania skryptu Atrybuty async i defer dają Ci pewną kontrolę nad sposobem wykonywania skryptu. Atrybut defer wskazuje przeglądarce, by nie wykonywała skryptu, dopóki cała strona nie zostanie wczytana i zinterpretowana. Aby zrozumieć korzyści wynikające ze stosowania atrybutu defer, musisz zwrócić uwagę na problem, który można dzięki niemu rozwiązać. W listingu 7.20 widnieje treść pliku skryptowego simple2.js, który zawiera jedną deklarację. Listing 7.20. Deklaracja zawarta w pliku skryptowym simple2.js document.getElementById("applecode").innerText = "wiśnie";

Poszczególne fragmenty tej deklaracji omówię w części IV książki. Na razie wystarczy wiedzieć, że skrypt znajduje element z atrybutem id o wartości applecode i zmienia jego zawartość tekstową na wiśnie. W listingu 7.21 widnieje dokument HTML, którego element script wywołuje plik skryptowy. Listing 7.21. Wywołanie pliku skryptowego

Przykład

145

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Po wczytaniu tej strony nie uzyskasz pożądanego rezultatu (rysunek 7.10).

Rysunek 7.10. Problem z czasem wykonania skryptu Natrafiwszy na element script, przeglądarka domyślnie przerywa przetwarzanie dokumentu HTML, wczytuje plik skryptowy i wykonuje zawarte w nim instrukcje. Przeglądarka wznawia parsowanie kodu HTML dopiero po zakończeniu wykonywania skryptu. Oznacza to, że przeglądarka wczytuje i wykonuje deklarację z pliku simple2.js przed zinterpretowaniem reszty kodu dokumentu i wykryciem elementu code. Skrypt nie znajduje pożądanego elementu, toteż nie wprowadza żadnych zmian. Po wykonaniu skryptu przeglądarka interpretuje resztę kodu HTML i znajduje element code — za późno dla skryptu, który nie jest wykonywany po raz drugi. Problem ten ma oczywiste rozwiązanie w postaci zamieszczenia elementu script na końcu dokumentu, tak jak w listingu 7.22. Listing 7.22. Rozwiązanie problemu z czasem wykonywania skryptu poprzez przeniesienie elementu script

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2



146

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Podejście to polega na uwzględnieniu sposobu, w jaki przeglądarka reaguje na elementy script, i zapewnieniu, że skrypt nie zostanie wczytany i wykonany, zanim nie zostaną przetworzone elementy, do których skrypt się odnosi. Jak widać na rysunku 7.11, wykonanie skryptu przyniosło pożądany rezultat.

Rysunek 7.11. Rezultat zastosowania skryptu na elemencie Jest to całkowicie poprawne podejście, ale w HTML5 można uzyskać dokładnie taki sam rezultat przy użyciu atrybutu defer. Kiedy przeglądarka trafia na element script z atrybutem defer, wstrzymuje się przed wczytaniem i wykonaniem skryptu do czasu ukończenia parsowania dokumentu HTML. W listingu 7.23 widnieje element script z atrybutem defer. Listing 7.23. Zastosowanie elementu script z atrybutem defer

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Rezultat jest taki sam, jak w przypadku przeniesienia skryptu na koniec dokumentu. Skrypt znajduje element code i zmienia jego zawartość tekstową, dając taki sam efekt, jaki widać na rysunku 7.11. „ Wskazówka Atrybutu defer możesz używać jedynie w odniesieniu do zewnętrznych plików skryptowych — nie działa na skrypty inline.

Asynchroniczne wykonywanie skryptów Atrybut async pozwala rozwiązać inny problem. Jak wspomniałem, natrafiwszy na element script, przeglądarka domyślnie przerywa parsowanie strony, by wczytać i wykonać skrypt. Wszystkie skrypty wykonywane są synchronicznie (tj. nic innego się nie dzieje podczas wczytywania i wykonywania skryptu) i po kolei.

147

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Wykonywanie skryptów synchronicznie i po kolei ma sens jako domyślny sposób ich obsługi. Istnieją jednak pewne skrypty, którym nie jest to potrzebne i których działanie można usprawnić, wykorzystując atrybut async. Za dobry przykład może tu posłużyć skrypt śledzący. Tego typu skrypt może — przykładowo — raportować, jakie witryny odwiedzasz, aby reklamodawcy mogli Cię sprofilować na podstawie Twojego zachowania; może też zbierać statystyki o odwiedzinach na potrzeby narzędzi analitycznych. Tego typu skrypty są autonomiczne i zwykle nie wchodzą w interakcję z elementami dokumentu HTML. Opóźnienie parsowania strony w oczekiwaniu na wczytanie takiego skryptu, a następnie na to, by przesłał serwerowi raport, w ogóle nie ma sensu. Kiedy używasz atrybutu async, przeglądarka wczytuje i wykonuje skrypt asynchronicznie, jednocześnie parsując pozostałe elementy dokumentu HTML, w tym również inne elementy script. Zastosowanie tego atrybutu do właściwego skryptu może znacząco ulepszyć efektywność wczytywania strony. W listingu 7.24 widnieje atrybut async dodany do elementu script. Listing 7.24. Zastosowanie elementu async

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Ważnym efektem zastosowania atrybutu async jest to, że zamieszczone na stronie skrypty mogą być wykonane w innej kolejności, niż zostały zdefiniowane. Z tego powodu async nie nadaje się do skryptów, które odnoszą się do funkcji lub wartości definiowanych przez inne skrypty.

Element noscript Element noscript pozwala na zdefiniowanie treści pokazywanych użytkownikowi, który wyłączył JavaScript lub który korzysta z przeglądarki pozbawionej obsługi tego języka. W tabeli 7.19 znajduje się opis elementu. Podobnie jak w przypadku elementu script, typ elementu noscript zależy od jego umiejscowienia w dokumencie. Choć obsługa JavaScript jest dziś powszechna, to nadal istnieją pewne wyspecjalizowane przeglądarki, które są jej pozbawione. Tymczasem użytkownik sam może również zdezaktywować obsługę JavaScript w przeglądarce — wielkie korporacje często zabraniają pracownikom korzystania z treści JavaScript. Element noscript pozwala na obsłużenie takich użytkowników poprzez podanie im treści niewymagających JavaScript do działania albo chociaż wytłumaczenie, że bez JavaScript nie mają możliwości skorzystania ze strony. W listingu 7.25 widnieje element noscript z prostym komunikatem. Listing 7.25. Zastosowanie elementu noscript



148

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Tabela 7.19. Element noscript Element

noscript

Typ elementu

Metadane/treściowy/strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać metadane, treść lub elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Elementy treściowe i strukturalne

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

Przykład





Wymagany JavaScript!

Strona działa nieprawidłowo z powodu braku obsługi JavaScript

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Rezultat zastosowania elementu noscript widać na rysunku 7.12. Aby uzyskać ten efekt, wyłączyłem obsługę JavaScript w Google Chrome i wczytałem plik HTML z powyższego listingu.

Rysunek 7.12. Rezultat zastosowania elementu noscript

149

ROZDZIAŁ 7. „ TWORZENIE DOKUMENTÓW HTML

Zauważ, że reszta strony została przetworzona normalnie i elementy treści są widoczne. „ Wskazówka Na stronie możesz umieścić wiele elementów noscript, aby odpowiadały poszczególnym zakresom funkcji skryptów. Podejście to jest bardzo użyteczne przy zapisie zapasowego kodu, który nie opiera się na JavaScript.

Jeśli przeglądarka nie obsługuje JavaScript, to można ją też przekierować pod inny adres URL. W tym celu należy w elemencie noscript zamieścić element meta, tak jak w listingu 7.26. Listing 7.26. Zastosowanie elementu noscript do przekierowania przeglądarki użytkownika

Przykład

Lubię jabłka i pomarańcze.

Odwiedź stronę Helionu Strona 2

Jeżeli użytkownik, którego przeglądarka nie obsługuje JavaScript lub ma wyłączoną obsługę, spróbuje wczytać tę stronę, to zostanie przekierowany pod adres www.helion.pl.

Podsumowanie W tym rozdziale przedstawiłem Ci elementy dokumentu i metadanych. Nie są to szczególnie dynamiczne ani ciekawe elementy HTML5, lecz są niezwykle ważne. Umiejętność definiowania podstawowych elementów dokumentu HTML jest nieodzowna, jeżeli chcesz uzyskać możliwie najlepszy rezultat, szczególnie w zakresie kontroli nad wykonywaniem skryptów przy użyciu elementu script i zarządzania stylami przy użyciu elementów style i link.

150

ROZDZIAŁ 8

Elementy tekstowe

Przejdziemy teraz od elementów ogólnej struktury dokumentów do czegoś o wiele bardziej szczegółowego: elementów tekstowych. Treści oznaczone tymi elementami zyskują strukturę i znaczenie. Zrozumiesz to lepiej, kiedy zapoznasz się z przedstawionymi w tym rozdziale przykładami. Specyfikacja HTML5 jasno mówi, że z elementów należy korzystać wyłącznie z powodu ich wartości semantycznej. Dla ułatwienia życia specyfikacja jednocześnie stwierdza, że obstylowanie kojarzone z tymi elementami składa się częściowo na znaczenie semantyczne niektórych z nich. To wymijające podejście, ale jednocześnie ułatwia zachowanie kompatybilności ze starszymi wersjami HTML. Niektóre z tych elementów mają bardzo konkretne znaczenie. Przykładowo, element cite służy wyłącznie do cytowania tytułów innych źródeł, np. książek bądź filmów. Tymczasem inne elementy często służą mniej konkretnym celom i — wbrew założeniom standardu HTML5 — mają wyraźne znaczenie prezentacyjne. Zalecam przyjąć pragmatyczne podejście. Po pierwsze, używaj elementów służących do konkretnych zadań, o ile takowe są dostępne. Po drugie, unikaj używania elementów, które dawniej służyły wyłącznie celom prezentacyjnym i którym wstecznie przypisano znaczenie semantyczne (np. elementu b), a prezentacją zarządzaj przy użyciu CSS. Wreszcie, niezależnie od ostatecznego doboru elementów, używaj ich spójnie w całym kodzie. W tabeli 8.1 znajduje się streszczenie całego rozdziału. Tabela 8.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Utworzenie odnośnika do innego dokumentu.

Użyj elementu a z absolutnym lub względnym adresem URL jako wartością atrybutu href.

8.1, 8.2

Utworzenie odnośnika do elementu w dokumencie.

Użyj elementu a z selektorem ID docelowego elementu.

8.3

Wskazanie tekstu bez wyróżniania go lub przydawania mu większej wartości.

Użyj elementu b lub u.

8.4, 8.9

Nadanie emfazy.

Użyj elementu em.

8.5

Wskazanie terminu naukowego lub wyrazu obcego.

Użyj elementu i.

8.6

Wskazanie nieścisłości lub błędu.

Użyj elementu s.

8.7

Wskazanie ważnego tekstu.

Użyj elementu strong.

8.8

Wskazanie drobnego pisma.

Użyj elementu small.

8.10

Wskazanie indeksu górnego lub dolnego.

Użyj elementu sup lub sub.

8.11

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Wskazanie łamania wiersza lub możliwości łamania wiersza.

Użyj elementu br lub wbr.

8.12, 8.13

Wskazanie kodu, danych z programu, zmiennej bądź danych wpisanych przez użytkownika.

Użyj elementu code, var, samp lub kbd.

8.14

Wskazanie skrótu.

Użyj elementu abbr.

8.15

Wskazanie definicji terminu.

Użyj elementu dfn.

8.16

Wskazanie cytatu.

Użyj elementu q.

8.17

Zacytowanie tytułu innego źródła.

Użyj elementu cite.

8.18

Określenie oznaczeń ruby dla języków wschodnioazjatyckich.

Użyj elementów ruby, rt i rp.

8.19

Określenie kierunku ciągu tekstu.

Użyj elementu bdo.

8.20

Wyizolowanie ciągu tekstu na potrzeby określenia jego kierunku.

Użyj elementu bdi.

8.21, 8.22

Nadanie treści globalnego atrybutu.

Użyj elementu span.

8.23

Wskazanie treści istotnych w innym kontekście.

Użyj elementu mark.

8.24

Wskazanie tekstu, który dodano do dokumentu lub który z niego usunięto.

Użyj elementów ins i del.

8.25

Wskazanie godziny lub daty.

Użyj elementu time.

8.26

Tworzenie odnośników Odnośniki są kluczową funkcją języka HTML i pozwalają użytkownikom poruszać się po treści, zarówno w obrębie jednego dokumentu, jak i po różnych stronach. Odnośniki tworzy się elementem a, którego opis znajduje się w tabeli 8.2. Tabela 8.2. Element a Element

a

Typ elementu

Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

href, hreflang, media, rel, target, type

Zawartość

Treść właściwa i elementy strukturalne

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Element ten może teraz zawierać zarówno elementy treściowe, jak i strukturalne. Dodano atrybut media. Przywrócono atrybut target, który usunięto w HTML 4. Element a bez wartości href może być w HTML5 użyty do oznaczenia miejsca, w którym ma się pojawić odnośnik. Atrybuty id, coords, shape, urn, charset, methods i rev są nieaktualne.

152

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.2. Element a — ciąg dalszy a:link, a:visited { color: blue; text-decoration: underline; cursor: auto; }

Domyślny styl prezentacji

a:link:active, a:visited:active { color: blue; }

Element a obsługuje sześć atrybutów lokalnych, które opisuję w tabeli 8.3. Najważniejszy z nich to href, o czym przekonasz się dalej. Tabela 8.3. Atrybuty lokalne elementu a Atrybut

Opis

href

Określa URL zasobów, do których element a się odnosi.

hreflang

Określa język zasobów, do których element się odnosi.

media

Określa urządzenie, na które podane w odnośniku zasoby są przeznaczone. Atrybut ten wykorzystuje wartości atrybutów device i właściwości, które opisałem w rozdziale 7.

rel

Określa rodzaj relacji pomiędzy dokumentem a zasobami, do których odsyła odnośnik. Atrybut ten może mieć te same wartości, co atrybut rel elementu link, opisany w rozdziale 7.

target

Określa kontekst przeglądania, w jakim załączone zasoby należy otworzyć.

type

Określa typ MIME zasobów, do których odsyła odnośnik, np. text/html.

Tworzenie odnośników zewnętrznych Odnośniki do innych dokumentów HTML tworzy się, nadając atrybutowi href URL zaczynający się od http://. Kiedy użytkownik klika odnośnik, przeglądarka wczytuje podaną stronę. W listingu 8.1 widnieje element a użyty jako odnośnik do zewnętrznych zasobów. Listing 8.1. Zastosowanie elementu a jako odnośnika do zewnętrznych zasobów

Przykład



Lubię jabłka i pomarańcze.

W tym przykładzie utworzyłem dwa elementy a, które są odnośnikami do artykułów na Wikipedii. Po kliknięciu odnośnika przeglądarka pobiera artykuł i pokazuje go użytkownikowi. Domyślny styl prezentacji odnośników widać na rysunku 8.1.

153

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Rysunek 8.1. Domyślny wygląd odnośników Nie wszystkie adresy URL muszą prowadzić do stron internetowych. Choć protokół http jest najszerzej używaną formą URL, przeglądarki obsługują także inne protokoły, jak https i ftp. Jeżeli chcesz, by odnośnik odsyłał do adresu e-mailowego, to możesz użyć protokołu mailto, np. mailto:[email protected]. „ Wskazówka Elementem a możesz również tworzyć odnośniki oparte na obrazach, czyli takie, przy których użytkownik klika obraz zamiast tekstu. Wymaga to użycia elementu img. Szczegóły o elemencie img i przykład zastosowania odnośnika opartego na obrazie znajdziesz w rozdziale 15.

Tworzenie względnych odnośników Jeżeli wartość atrybutu href nie zaczyna się od uznanego protokołu (w rodzaju http://), to przeglądarka traktuje element a jako względny odnośnik. Przeglądarka domyślnie zakłada, że docelowe zasoby i bieżący dokument znajdują się w tej samej lokalizacji. W listingu 8.2 widnieje przykład względnego adresu URL. Listing 8.2. Zastosowanie względnego adresu URL w odnośniku

Przykład



Lubię jabłka i pomarańcze. Inne moje ulubione owoce znajdziesz tutaj.

W tym przykładzie atrybutowi href nadałem wartość fruitlist.html. Kiedy użytkownik klika odnośnik, przeglądarka używa adresu URL bieżącego dokumentu do określenia, w jaki sposób wczytać podaną stronę. Przykładowo, jeżeli bieżący dokument pobrano z adresu http://www.mojastrona.com/dokumenty/ przyklad.html, to przeglądarka powinna wczytać stronę docelową z adresu http://www.mojastrona.com/ dokumenty/fruitlist.html. „ Wskazówka Domyślne zachowanie przeglądarki możesz zmienić, zamieszczając w elemencie base (opisanym w rozdziale 7.) inny bazowy adres URL.

154

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tworzenie odnośników wewnętrznych Możesz tworzyć odnośniki, które przenoszą widok okna przeglądarki na inny element. Robi się to przy użyciu selektora ID rodem z CSS — # — tak jak widać w listingu 8.3. Listing 8.3. Tworzenie odnośników wewnętrznych

Przykład



Lubię jabłka i pomarańcze. Inne moje ulubione owoce znajdziesz tutaj.

Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.

Utworzyłem odnośnik z href o wartości #fruits. Kiedy użytkownik klika odnośnik, przeglądarka szuka w dokumencie elementu, którego atrybut id ma wartość fruits. Jeżeli element nie jest w danej chwili widoczny na ekranie, przeglądarka przewinie do niego dokument. „ Wskazówka Kiedy przeglądarka nie znajduje elementu z pożądaną wartością atrybutu id, zaczyna szukać od nowa, lecz atrybutu name o odpowiedniej wartości.

Określanie kontekstu przeglądania Atrybutem target możesz wskazać przeglądarce, gdzie linkowane zasoby mają być wyświetlone. Przeglądarka domyślnie używa okna, zakładki lub ramki, w której wyświetlany jest dany dokument; oznacza to, że wczytywany dokument pojawia się na miejscu poprzedniego. Masz jednak inne możliwości. W tabeli 8.4 znajduje się opis wartości obsługiwanych przez atrybut target. Tabela 8.4. Wartości atrybutu target elementu a Atrybut

Opis

_blank

Otwiera dokument w nowym oknie (lub zakładce).

_parent

Otwiera dokument w ramce-rodzicu.

_self

Otwiera dokument w bieżącym oknie; domyślna opcja.

_top

Otwiera dokument na powierzchni całego okna.

Otwiera dokument w podanej ramce.

Każda z tych wartości określa kontekst przeglądania. Wartości _blank i _self nie trzeba szczególnie objaśniać. Pozostałe z kolei odnoszą się do ramek, które omówię w rozdziale 15.

155

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Oznaczanie treści podstawowymi elementami tekstowymi Pierwszy zestaw elementów tekstowych, któremu się przyjrzymy, istnieje już w HTML od dłuższego czasu. Niektóre z tych elementów odpowiadały kiedyś za formatowanie tekstu, ale wraz z rozwojem HTML i oddzieleniem prezentacji od ogólnej semantyki uzyskały ogólniejsze znaczenie.

Wskazywanie słów kluczowych i nazw produktów Element b służy do wyszczególniania ciągów tekstu bez wyróżniania ich i przydawania im szczególnego znaczenia. Przykłady podane w specyfikacji HTML5 są słowami kluczowymi w streszczeniu dokumentu oraz nazwami produktów w recenzji. W tabeli 8.5 znajduje się opis elementu b. Tabela 8.5. Element b Element

b

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Element b miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej

Domyślny styl prezentacji

b { font-weight: bolder; }

Element b działa w bardzo prosty sposób: treści zawarte pomiędzy znacznikiem początkowym i końcowym są wydzielone z otaczających je treści. Treści te są zazwyczaj przedstawiane pogrubionym pismem, ale styl nadawany elementom b możesz zmienić przy użyciu CSS. W listingu 8.4 widać przykład zastosowania elementu b. Listing 8.4. Zastosowanie elementu b

Przykład





Lubię jabłka i pomarańcze.

Domyślny styl prezentacji elementu b widać na rysunku 8.2.

156

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Rysunek 8.2. Zastosowanie elementu b

Wyróżnianie Element em przedstawia ciąg wyróżnionego tekstu. Używa się go do wskazania odbiorcy kontekstu, w jakim ma postrzegać sens zdania lub akapitu. Przykład znajdziesz pod tabelą 8.6, w której znajduje się opis elementu em. Tabela 8.6. Element em Element

em

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

em { font-style: italic; }

W listingu 8.5 widać przykład zastosowania elementu em. Listing 8.5. Zastosowanie elementu em

Przykład





Lubię jabłka i pomarańcze.

Element ten jest domyślnie wyświetlany jako pochylony, jak widać na rysunku 8.3. W tym przykładzie wyróżniłem słowo „i”. Kiedy zastanawiasz się nad wykorzystaniem elementu em, powinieneś przeczytać zdanie na głos i rozważyć, na jakie pytanie to zdanie może odpowiadać. Przykładowo, wyobraź sobie pytanie: „Skoro lubisz jabłka, to czy nie lubisz pomarańczy?”. Można na nie odpowiedzieć:

157

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Rysunek 8.3. Zastosowanie elementu em „Lubię jabłka i pomarańcze”. Odczytując to zdanie na głos i z akcentem na i, dajesz jasno do zrozumienia, że jabłka nie są Twoim jedynym ulubionym owocem. Gdyby jednak spytać: „Jakie owoce lubisz poza jabłkami?”, to mógłbyś odpowiedzieć: „Lubię jabłka i pomarańcze”. W tym przypadku położyłbyś nacisk na ostatnie słowo, wskazując, że to właśnie pomarańcze są innym owocem, który lubisz. Ten wariant mógłbyś przedstawić w HTML następująco: Lubię jabłka i pomarańcze.

Wskazywanie wyrazów obcych i terminów technicznych Element i wskazuje ciąg tekstu o innym charakterze niż otaczająca go treść. To dość luźna definicja, ale typowym przykładem są słowa z języków obcych, terminy techniczne i naukowe, czy nawet czyjeś myśli (w odróżnieniu od mowy). W tabeli 8.7 znajduje się opis elementu i. Tabela 8.7. Element i Element

i

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Element i miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej

Domyślny styl prezentacji

i { font-style: italic; }

W listingu 8.6 widać przykład zastosowania elementu i. Listing 8.6. Zastosowanie elementu i

Przykład





158

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Lubię jabłka i pomarańcze. Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata.

Efekt zastosowania elementu i widać na rysunku 8.4. Zauważ, że domyślny styl prezentacji elementu i jest taki sam, jak dla elementu em. Jest to świetny przykład tego, że znaczenie elementu jest niezależne od jego wyglądu.

Rysunek 8.4. Zastosowanie elementu i

Wskazywanie nieścisłości i poprawek Element s służy do określania ciągów błędnego lub nieścisłego tekstu. Domyślnie wyświetlany jest jako przekreślony tekst. W tabeli 8.8 znajduje się opis tego elementu. Tabela 8.8. Element s Element

s

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Element s miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej

Domyślny styl prezentacji

s { text-decoration: line-through; }

W listingu 8.7 widać przykład zastosowania elementu s. Listing 8.7. Zastosowanie elementu s

Przykład



159

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE



Lubię jabłka i pomarańcze. Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.

Domyślny styl prezentacji elementu s widać na rysunku 8.5.

Rysunek 8.5. Zastosowanie elementu s

Wskazywanie ważnego tekstu Element strong wskazuje ciąg ważnego tekstu. W tabeli 8.9 znajduje się jego opis. Tabela 8.9. Element strong Element

strong

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

strong { font-weight: bolder; }

W listingu 8.8 widać przykład zastosowania elementu strong. Listing 8.8. Zastosowanie elementu strong

Przykład



160

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE



Lubię jabłka i pomarańcze. Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.

Usunąłem część tekstu z poprzednich przykładów, żeby listing był bardziej przejrzysty. Domyślny styl prezentacji elementu strong widać na rysunku 8.6. Element strong wyświetlany jest tak samo jak element b. Ważne jest jednak, aby wybrać właściwy element do oznaczania treści — zauważ, że element b nie służy do wskazywania ważnych treści.

Rysunek 8.6. Zastosowanie elementu strong

Podkreślanie tekstu Element u służy do wyszczególniania ciągów tekstu bez wyróżniania ich i przydawania im szczególnego znaczenia. To dość luźna definicja, ponieważ element u pełnił wcześniej wyłącznie rolę prezentacyjną (tj. podkreślał tekst) i nie miał znaczenia semantycznego. Nadal jest to element prezentacyjny, który służy do podkreślania tekstu. Choć można zmienić tę właściwość przy użyciu CSS, nie polecam takiego sposobu modyfikowania elementów — korzystaj raczej z elementu span. W tabeli 8.10 znajduje się opis elementu u. Tabela 8.10. Element u Element

u

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Element u miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej

Domyślny styl prezentacji

u { text-decoration:underline; }

Domyślny styl prezentacji elementu u przypomina styl elementu a, przez co podkreślone teksty mogą się mylić użytkownikom z odnośnikami. Żeby nie dopuszczać do takich sytuacji, w miarę możliwości unikaj stosowania elementu u. W listingu 8.9 widać przykład zastosowania tego elementu.

161

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Listing 8.9. Zastosowanie elementu u

Przykład





Lubię jabłka i pomarańcze. Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.

Domyślny styl prezentacji tego elementu widać na rysunku 8.7.

Rysunek 8.7. Zastosowanie elementu u

Pomniejszony tekst Element small wskazuje drobne pismo i często oznacza się nim objaśnienia i deklaracje o zrzeczeniu się odpowiedzialności. W tabeli 8.11 znajduje się opis tego elementu. Tabela 8.11. Element small Element

small

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Element small miał w HTML 4 znaczenie wyłącznie prezentacyjne; w HTML5 ma semantyczne znaczenie, które opisałem już wcześniej, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej

Domyślny styl prezentacji

small { font-size: smaller; }

162

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

W listingu 8.10 widnieje przykład zastosowania tego elementu. Listing 8.10. Element small

Przykład



Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę (netto)

Domyślny styl prezentacji tego elementu widać na rysunku 8.8.

Rysunek 8.8. Zastosowanie elementu small

Indeksy górne i dolne Elementy sup i sub służą do wskazywania indeksów górnych i dolnych. Korzystanie z indeksu górnego jest w niektórych językach konieczne, a obydwa indeksy wykorzystuje się w prostych wyrażeniach matematycznych. Obydwa te elementy opisane są w tabeli 8.12. Tabela 8.12. Elementy sup i sub Element

sup i sub

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

sub { vertical-align: sub;font-size: smaller; } sup { vertical-align: super;font-size: smaller;}

W listingu 8.11 widać przykład zastosowania elementów sub i sup.

163

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Listing 8.11. Zastosowanie elementów sup i sub

Przykład



Wartość x1 wynosi y3.

Domyślny styl prezentacji tego elementu widać na rysunku 8.9.

Rysunek 8.9. Zastosowanie elementów sup i sub

Łamanie wiersza Do łamania wierszy możesz się posłużyć dwoma elementami: br i wbr.

Wymuszanie łamania wiersza Element br wskazuje miejsce łamania wiersza. Domyślny styl prezentacji tego elementu polega na przeniesieniu następujących po nim treści do kolejnego wiersza. Opis elementu br znajduje się w tabeli 8.13. Tabela 8.13. Element br Element

br

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Nie dotyczy

Znaczniki

Samotny znacznik

Nowość w HTML5

Nie

Zmiany w HTML5

Nie

Domyślny styl prezentacji

Znajdująca się po nim treść zostaje przeniesiona do nowego wiersza; tego efektu nie można uzyskać przy użyciu CSS

164

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

W listingu 8.12 widnieje przykład zastosowania elementu br. Listing 8.12. Zastosowanie elementu br

Przykład



Natenczas Wojski chwycił na taśmie przypięty
Swój róg bawoli, długi, cętkowany, kręty
Jak wąż boa, oburącz do ust go przycisnął,
Wzdął policzki jak banię, w oczach krwią zabłysnął

„ Uwaga Elementu br należy używać tylko wtedy, kiedy treść wymaga zaczynania tekstu od nowego wiersza, tak jak w listingu 8.12. Nie wolno z niego korzystać do tworzenia akapitów lub innych zestawień treści — do tego służą inne elementy, które opiszę w rozdziałach 9. i 10.

Na rysunku 8.10 widnieje przykład treści oznaczonych elementem br.

Rysunek 8.10. Zastosowanie elementu br

Wskazanie odpowiedniego miejsca na łamanie wiersza Element wbr jest nowością w HTML5. Służy do wskazywania miejsc, w których przeglądarka może przełamywać ciągi tekstowe o długości przekraczającej rozmiar okna, przy czym to przeglądarka ostatecznie rozstrzyga, czy w tym miejscu rzeczywiście następuje złamanie wiersza. Element wbr jedynie wskazuje odpowiednie miejsca łamania wierszy. W tabeli 8.14 znajduje się jego opis. W listingu 8.13 widać przykład zastosowania elementu wbr do wskazania przeglądarce, jak prawidłowo wyświetlić długie słowo. Listing 8.13. Zastosowanie elementu wbr

Przykład

165

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.14. Element wbr Element

wbr

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Nie dotyczy

Znaczniki

Samotny znacznik

Nowość w HTML5

Tak

Zmiany w HTML5

Nie

Domyślny styl prezentacji

Znajdująca się po nim treść zostaje przeniesiona do nowego wiersza, jeżeli wymagają tego okoliczności



Oto bardzo długie słowo: dwustudziewięćdziesięciodziewięcioipółpiętrowiec. Prawidłowe wyświetlanie długich wyrazów można wspomóc elementem wbr.

Aby w pełni zrozumieć wartość elementu wbr, musiałbyś się przyjrzeć, jak przeglądarka działa, gdy go nie ma w kodzie. Na rysunku 8.11 widnieje przykład interpretowania treści, której nie oznaczono tym elementem.

Rysunek 8.11. Zawijanie wierszy bez elementu wbr Kiedy brakuje elementu wbr, przeglądarka traktuje długie słowa jako spójne ciągi. Wskutek tego na końcu pierwszego wiersza pojawia się dużo niepotrzebnie pustego miejsca. Dodając element wbr tak jak w listingu 8.13, dajesz przeglądarce więcej możliwości (rysunek 8.12).

Rysunek 8.12. Zawijanie wierszy z elementem wbr

166

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Kiedy używasz elementu wbr, przeglądarka traktuje długie słowa jako ciągi mniejszych fragmentów, co pozwala jej na zawijanie wierszy w sposób bardziej estetyczny. Element wbr wskazuje przeglądarce, gdzie łamanie wiersza byłoby najbardziej odpowiednie.

Przedstawianie danych wejściowych i wyjściowych Istnieją pewne cztery elementy, które przypominają o tym, że HTML zrodził się w głowach ześwirowanych komputerowców. Służą bowiem do przedstawiania danych wejściowych i wyjściowych. Ich opisy znajdziesz w tabeli 8.15. Żaden z nich nie posiada lokalnych atrybutów, a ponadto ani nie pojawił się dopiero w HTML5, ani nie uległ w tej wersji żadnym zmianom. Tabela 8.15. Elementy tekstowe danych wejściowych i wyjściowych Element

Opis

Domyślny styl prezentacji

code

Wskazuje fragment kodu komputerowego.

code { font-family: monospace; }

var

Wskazuje zmienną w kontekście programistycznym lub miejsce, w które należy wstawić konkretną wartość.

var { font-style: italic; }

samp

Wskazuje dane wyjściowe programu lub systemu komputerowego.

samp { font-family: monospace; }

kbd

Wskazuje podane przez użytkownika dane wejściowe.

kbd { font-family: monospace; }

W listingu 8.14 widać przykład zastosowania tych czterech elementów w dokumencie. Listing 8.14. Zastosowanie elementów code, var, samp i kbd

Przykład

var fruits = ["jabłka", "pomarańcze", "mango", "wiśnie"];
document.writeln("Lubię " + fruits.length + " owoce");

Zmienna w tym przykładzie nosi nazwę fruits

Ciąg wyjściowy to Lubię 4 owoce

Kiedy zostałem spytany o ulubiony owoc, podałem wiśnie

Domyślny styl prezentacji tych elementów widać na rysunku 8.13. Zauważ, że trzy z nich charakteryzują się jednakowym stylem. Elementu p (który opiszę w rozdziale 9.) użyłem, by nadać treści strukturę.

Odwołania, cytaty, definicje i skróty Kolejne cztery elementy służą do wskazywania odwołań, cytatów, definicji i skrótów. Stosuje się je powszechnie w pracach naukowych.

167

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Rysunek 8.13. Zastosowanie elementów code, var, samp i kbd

Skróty Element abbr służy do wskazywania skrótów; w atrybucie title podaje się natomiast rozwinięcie skrótu. Opis tego elementu znajdziesz w tabeli 8.16. Tabela 8.16. Element abbr Element

abbr

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak, ale globalny atrybut title użyty z tym elementem ma szczególne znaczenie

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

W listingu 8.15 widnieje przykład zastosowania elementu abbr. Listing 8.15. Zastosowanie elementu abbr

Przykład



Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.

Element abbr nie ma żadnego domyślnego stylu prezentacji, toteż zawarta w nim treść nie jest w żaden sposób wyszczególniona.

168

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Definicje Element dfn wskazuje definicje terminów, czyli sens lub znaczenie słowa bądź zwrotu. Jego opis znajduje się w tabeli 8.17. Tabela 8.17. Element dfn Element

dfn

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak, ale globalny atrybut title użyty z tym elementem ma szczególne znaczenie

Zawartość

Tekst lub jeden element abbr

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

Korzystając z elementu dfn, należy przestrzegać pewnych zasad. Jeżeli element dfn oznaczony jest atrybutem title, to wartość tego atrybutu musi odnosić się do definiowanego terminu. Przykład zastosowania elementu dfn w taki sposób widać w listingu 8.16. Listing 8.16. Zastosowanie elementu dfn

Przykład



Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.

Jabłko — jadalny, kulisty owoc jabłoni o soczystym i chrupkim miąższu, spożywany na surowo, a także po obróbce kulinarnej.

Jeżeli element dfn zawiera element abbr, to skrót jest definiowanym terminem. Jeżeli atrybut title nie występuje, a w elemencie zawarta jest treść tekstowa, to tekst jest definiowanym terminem. Element ten nie ma żadnego domyślnego stylu prezentacji, toteż zawarta w nim treść nie jest w żaden sposób wyszczególniona.

Cytowanie treści z innego źródła Element q wskazuje treść cytowaną z innego źródła. Jego opis znajduje się w tabeli 8.18. Podana w poprzednim punkcie definicja jabłka wzięta jest z Wikipedii, toteż należy zamieścić w tekście stosowne odniesienie. Atrybut cite służy do wskazania adresu URL dokumentu źródłowego, tak jak w listingu 8.17.

169

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.18. Element q Element

q

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

cite

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

q { display: inline; } q:before { content: open-quote; } q:after { content: close-quote; }

Listing 8.17. Zastosowanie elementu q

Przykład



Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.

Jabłko — jadalny, kulisty owoc jabłoni o soczystym i chrupkim miąższu, spożywany na surowo, a także po obróbce kulinarnej.

Domyślny styl prezentacji elementu q wykorzystuje selektory pseudoelementów CSS :before i :after, by otoczyć cudzysłowami cytowany tekst (rysunek 8.14). O selektorach pseudoelementów przeczytasz w rozdziałach 17. i 18.

Rysunek 8.14. Zastosowanie elementu q

170

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Odwołania do innych źródeł Element cite określa tytuł cytowanego źródła, np. książki, artykułu, filmu lub wiersza. Jego opis znajduje się w tabeli 8.19. Tabela 8.19. Element cite Element

cite

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Elementem cite nie wolno już przytaczać imion, lecz jedynie tytuł cytowanego źródła

Domyślny styl prezentacji

cite { font-style: italic; }

W listingu 8.18 widnieje przykład zastosowania elementu cite. Listing 8.18. Element cite

Przykład



Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.

Jabłko — jadalny, kulisty owoc jabłoni o soczystym i chrupkim miąższu, spożywany na surowo, a także po obróbce kulinarnej.

Moja ulubiona książka o owocach to Fruit: Edible, Inedible, Incredible Stuppy’ego i Kesselera.

Domyślny styl prezentacji widać na rysunku 8.15.

Elementy obsługi językowej Istnieje pięć elementów HTML (z czego cztery pojawiły się dopiero w HTML5) służących do pracy z pismem logograficznym. Opisuję je w poniższych punktach.

171

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Rysunek 8.15. Zastosowanie elementu cite

Elementy ruby, rt i rp Znaki ruby są oznaczeniami zamieszczanymi nad znakami pisma logograficznego (takiego jak chińskie lub japońskie) lub po ich prawej stronie, a służą ułatwieniu czytelnikowi właściwego wymawiania słów. Element ruby wskazuje ciąg tekstu zawierającego znaki ruby. Opis tego elementu znajduje się w tabeli 8.20. Tabela 8.20. Element ruby Element

ruby

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa oraz elementy rt i rp

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

ruby { text-indent: 0; }

Elementu ruby używa się w połączeniu z elementami rt i rp, które również pojawiły się w HTML5. Element rt określa znaki ruby, a element rp otaczające je nawiasy, które wyświetlane są w przeglądarkach pozbawionych obsługi oznaczeń ruby. Nie znam żadnego języka zapisywanego pismem logograficznym, więc nie mogę podać przykładu opartego na logogramach. Mogę za to pokazać na przykładzie języka polskiego, w jaki sposób takie oznaczenia wyświetlane są w przeglądarkach. W listingu 8.19 znajduje się właśnie taki przykład. Listing 8.19. Zastosowanie elementów ruby, rt i rp

Przykład



Lubię jabłka i pomarańcze.

172

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

IKC nadzoruje obrót cytrusami.

Jabłko — jadalny, kulisty owoc jabłoni o soczystym i chrupkim miąższu, spożywany na surowo, a także po obróbce kulinarnej.

Niektóre pomarańcze to GMO (genetycznie modyfikowane organizmy)

Kiedy dokument wyświetlany jest w przeglądarce obsługującej notację ruby, elementy rp wraz z zawartością są pomijane, a na ekranie wyświetlane są oznaczenia zawarte w elementach rt (rysunek 8.16).

Rysunek 8.16. Zastosowanie elementów ruby, rt i rp Kiedy dokument wyświetlany jest w przeglądarce pozbawionej obsługi notacji ruby, na ekranie wyświetlana jest zawartość elementów rp i rt. W chwili, kiedy to piszę, Firefox nie obsługuje notacji ruby. Wygląd tego rodzaju treści w Firefoksie widać na rysunku 8.17.

Rysunek 8.17. Znaki ruby w przeglądarce pozbawionej obsługi tej notacji

Element bdo Element bdo jednoznacznie określa kierunek zapisu treści, niezależnie od domyślnego kierunku, jakiego przeglądarka używa. W tabeli 8.21 znajduje się opis tego elementu. Element bdo musi być używany z atrybutem dir, który obsługuje wartości rtl (wskazującą kierunek od prawej do lewej) oraz ltr (wskazującą kierunek od lewej do prawej). W listingu 8.20 widać przykład zastosowania elementu bdo.

173

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.21. Element bdo Element

bdo

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak, ale konieczne jest podanie globalnego atrybutu dir

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

Listing 8.20. Zastosowanie elementu bdo

Przykład



Lubię jabłka i pomarańcze. IKC nadzoruje obrót cytrusami.

Oto tekst zapisany od lewej do prawej: Lubię pomarańcze

Oto tekst zapisany od prawej do lewej: Lubię pomarańcze

Sposób wyświetlania treści tych elementów widać na rysunku 8.18.

Rysunek 8.18. Zastosowanie elementu bdo

Element bdi Element bdi wskazuje ciąg tekstu wydzielonego z otaczających go treści w celu wskazania jego kierunku. Opis tego elementu znajduje się w tabeli 8.22.

174

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.22. Element bdi Element

bdi

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

Używa się go przy wyświetlaniu treści, które nie dostarczają informacji o kierunku. W takich sytuacjach przeglądarka określa kierunek automatycznie, co może prowadzić do błędnego formatowania treści na stronie. W listingu 8.21 widnieje prosty przykład takiego problemu. Listing 8.21. Tekst bez elementu bdi

Przykład



Lubię jabłka i pomarańcze. Oto imiona użytkowników i spis owoców, które kupili w tym tygodniu.

Adam: 3 jabłka i 2 pomarańcze

‫أبو كريم‬: 2 jabłka

Marcin: 6 jabłek

Pojawienie się imienia zapisanego alfabetem arabskim sprawia, że algorytm określający kierunek tekstu decyduje, iż liczba 2 powinna być wyświetlona przed imieniem, a nie po nim (rysunek 8.19).

Rysunek 8.19. Rezultat działania algorytmu kierunkowego przy różnych formatach zapisu

175

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Temu problemowi można zaradzić, korzystając z elementu bdi, tak jak to widać w listingu 8.22. Listing 8.22. Element bdi

Przykład



Lubię jabłka i pomarańcze. Oto imiona użytkowników i spis owoców, które kupili w tym tygodniu.

Adam: 3 jabłka i 2 pomarańcze

‫: 2 jabłka

Marcin: 6 jabłek

Poprawki naniesione dzięki zastosowaniu tego elementu widać na rysunku 8.20.

Rysunek 8.20. Zastosowanie elementu bdi

Pozostałe elementy tekstowe Są jeszcze cztery inne elementy, które nie przystają w pełni do pozostałych grup. Opisuję je w kolejnych punktach.

Wskazywanie zwyczajnego ciągu tekstu Element span sam w sobie pozbawiony jest znaczenia. Używa się go do określania fragmentów treści atrybutami globalnymi. Opis tego elementu znajduje się w tabeli 8.23. W listingu 8.23 widnieje element span z atrybutem class, który pozwala odnieść się do tego ciągu w stylu CSS.

176

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.23. Element span Element

span

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

Listing 8.23. Zastosowanie elementu span

Przykład



Lubię jabłka i pomarańcze.

Zastosowany styl widać na rysunku 8.21.

Rysunek 8.21. Element span użyty do nałożenia stylów

Podświetlanie tekstu Element mark jest nowością w HTML5 i wskazuje ciąg tekstu podświetlony ze względu na jego istotne znaczenie w innym kontekście. Opis tego elementu znajduje się w tabeli 8.24.

177

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.24. Element mark Element

mark

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

mark { background-color: yellow; color: black; }

W listingu 8.24 widnieje przykład zastosowania elementu mark. Listing 8.24. Zastosowanie elementu mark

Przykład



Wyrazy homofoniczne to takie, które wymawia się jednakowo, lecz różnią się znaczeniem i pisownią. Oto przykład:

Jerzy, ale tu dużo jeży!

Domyślny styl wyświetlania widać na rysunku 8.22.

Rysunek 8.22. Zastosowanie elementu mark

Wskazywanie dodanych lub usuniętych treści Dodany do dokumentu lub usunięty z niego tekst wskazuje się elementami ins i del. Element ins, wskazujący dodaną treść, opisany jest w tabeli 8.25.

178

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Tabela 8.25. Element ins Element

ins

Typ elementu

Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe lub struktury

Atrybuty lokalne

cite, datetime

Zawartość

Treść tekstowa lub strukturalna, w zależności od typu rodzica

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

ins { text-decoration: underline; }

Element del, wskazujący usuniętą treść, opisany jest w tabeli 8.26. Tabela 8.26. Element del Element

del

Typ elementu

Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe lub struktury

Atrybuty lokalne

cite, datetime

Zawartość

Treść właściwa lub strukturalna, w zależności od typu elementu-rodzica

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

del { text-decoration: line-through; }

Elementy ins i del obsługują te same atrybuty lokalne. Atrybut cite wskazuje adres URL dokumentu tłumaczącego, dlaczego tekst dodano lub usunięto, a datetime wskazuje, kiedy wprowadzono zmianę. Elementy ins i del w użyciu widać w listingu 8.25. Listing 8.25. Zastosowanie elementów del i ins

Przykład



Wyrazy homofoniczne to takie, które wymawia się jednakowo, lecz różnią się znaczeniem i pisownią. Oto przykład:

Jerzy, ale tu dużo jeży!

179

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

Morze pójdziemy nad może? Może pójdziemy nad morze?

Domyślny styl prezentacji widać na rysunku 8.23.

Rysunek 8.23. Zastosowanie elementów ins i del

Wskazywanie godzin i dat Element time służy do podawania godzin i dat. Opis tego elementu znajduje się w tabeli 8.27. Tabela 8.27. Element time Element

time

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą dokumentu bądź elementy treściowe

Atrybuty lokalne

datetime, pubdate

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

Jeżeli w elemencie występuje boolowski atrybut pubdate, to przyjmuje się, że element time wskazuje datę publikacji całego dokumentu HTML lub najbliższego elementu article (który opiszę w rozdziale 10.). Atrybut datetime wskazuje datę lub godzinę w formacie określonym standardem RFC3339, który znajdziesz pod adresem http://tools.ietf.org/html/rfc3339. Użycie atrybutu datetime pozwala na podanie w elemencie daty w czytelnej dla odbiorcy formie, jednocześnie zapewniając, że komputer będzie mógł jednoznacznie przetworzyć dane o dacie lub godzinie. W listingu 8.26 widać przykład zastosowania elementu time. Listing 8.26. Zastosowanie elementu time

Przykład

180

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE



Do dziś pamiętam najsmaczniejsze jabłko, jakie zjadłem. Kupiłem je siódmego grudnia o trzeciej.

Podsumowanie W tym rozdziale przedstawiłem Ci elementy tekstowe, które służą do nadawania treści struktury i znaczenia. Znajdują się wśród nich zarówno elementy najprostsze, jak i bardziej złożone; widoczny jest konflikt między dążeniem do oddzielenia znaczenia od prezentacji w HTML5 a pragnieniem zachowania kompatybilności z HTML 4. Koniecznie dobieraj elementy tekstowe na podstawie ich znaczenia, a nie domyślnych stylów prezentacji. Możesz przecież obudowywać treści stylami CSS, wykorzystując sposoby, jakich dotąd nie znałeś, a użytkownicy będą widzieć na swoich ekranach dziwne rzeczy, jeżeli nie oznaczysz treści spójnie i poprawnie.

181

ROZDZIAŁ 8. „ ELEMENTY TEKSTOWE

182

ROZDZIAŁ 9

Grupowanie treści

W tym rozdziale opiszę elementy HTML służące do grupowania powiązanych treści, co wpływa dodatnio na strukturę i znaczenie treści dokumentu. Są to przede wszystkim elementy strukturalne, z jednym wyjątkiem: elementem a, którego klasyfikacja zależna jest od rodzaju zawartej w nim treści. W tabeli 9.1 znajduje się streszczenie całego rozdziału. Tabela 9.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Wskazanie akapitu.

Użyj elementu p.

9.2

Nadanie globalnych atrybutów fragmentowi treści bez dodatkowego grupowania w jakikolwiek sposób.

Użyj elementu div.

9.3

Przedstawienie treści sformatowanej tak, jak widnieje w kodzie źródłowym dokumentu HTML.

Użyj elementu pre.

9.4

Wskazanie treści zacytowanej z innego źródła.

Użyj elementu blockquote.

9.5

Wskazanie zmiany tematycznej na poziomie akapitu.

Użyj elementu hr.

9.6

Utworzenie listy, w której kolejność elementów jest istotna.

Użyj elementów ol i li.

9.7

Utworzenie listy, w której kolejność elementów nie jest istotna.

Użyj elementów ul i li.

9.8

Utworzenie uporządkowanej listy, której elementy nie są ponumerowane po kolei.

Określ atrybut value dla elementu li zawartego w elemencie ol.

9.9

Utworzenie listy terminów i ich definicji.

Użyj elementów dl, dt i dd.

9.10

Utworzenie listy o specyficznej numeracji.

Użyj elementu ul w połączeniu z selektorem CSS :before i właściwością counter.

9.11

Wskazanie ilustracji (i opcjonalnego podpisu).

Użyj elementów figure i figcaption.

9.12

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Konieczność grupowania treści Przeglądarki interpretujące kod HTML kondensują większe ilości odstępów w pojedyncze odstępy. Ta właściwość jest ogólnie przydatna, ponieważ pozwala na oddzielenie rozkładu kodu w dokumencie HTML od rozkładu treści w oknie przeglądarki. Blok treści w listingu 9.1 jest dłuższy niż w którymkolwiek z wcześniejszych przykładów. Listing 9.1. Większa ilość treści w dokumencie HTML

Przykład



Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj. Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi. Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram. IKC nadzoruje obrót cytrusami. Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.

Tekst znajdujący się w elemencie body rozłożony jest na wiele wierszy. Niektóre z nich są wcięte, a pomiędzy niektórymi z nich znajdują się puste wiersze. Przeglądarka zupełnie ignoruje tę strukturę tekstu i wyświetla całą treść tak, jakby była jednym ciągiem (rysunek 9.1).

Rysunek 9.1. Przeglądarka kondensuje odstępy w dokumencie HTML

184

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Elementy opisane w kolejnych punktach pozwolą Ci ustrukturyzować dokument poprzez grupowanie powiązanych treści. Istnieje wiele różnych podejść do grupowania treści — od tworzenia prostych akapitów po sporządzanie rozbudowanych list.

Tworzenie akapitów Element p wskazuje akapit. Akapity to bloki tekstowe składające się z pojedynczych bądź wielu powiązanych zdań, odnoszących się do jakiegoś zagadnienia. Akapity mogą się też składać ze zdań traktujących o różnych zagadnieniach, lecz powiązanych przewodnim motywem. W tabeli 9.2 znajduje się opis tego elementu. Tabela 9.2. Element p Element

p

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybut align wyszedł z użycia w HTML5; jego użycie przestało być zalecane w HTML 4

Domyślny styl prezentacji

p { display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; }

W listingu 9.2 widnieje przykład zastosowania elementu p. Listing 9.2. Zastosowanie elementu p

Przykład

Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.

Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.

Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.

IKC nadzoruje obrót cytrusami.

185

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.

W elemencie body zamieściłem kilka elementów p w celu zgrupowania powiązanych zdań i nadania treści jakiejś struktury. Wielokrotne odstępy w obrębie poszczególnych elementów p są jednak kondensowane, wobec czego przekształcają się w pojedyncze odstępy, co widać na rysunku 9.2.

Rysunek 9.2. Rezultat zastosowania elementu p

Element div Element div nie ma konkretnego znaczenia. Służy do tworzenia struktury i nadawania znaczenia treści, kiedy inne elementy HTML okazują się niewystarczające. Znaczenie określasz, przypisując mu (opisane w rozdziale 3.) globalne atrybuty — przeważnie class lub id. Tabela 9.3. Element div Element

div

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Żadne, choć należy starać się zamiast niego używać wprowadzonych w HTML5 elementów w rodzaju article i section

Domyślny styl prezentacji

div { display: block; }

186

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

„ Ostrzeżenie Elementu div powinieneś używać tylko w ostateczności, kiedy inne elementy posiadające własne znaczenie semantyczne nie przystają do warunków sytuacji. Zanim postanowisz skorzystać z elementu div, rozważ użycie nowych elementów HTML5, takich jak article i section (które opiszę w rozdziale 10.). Element div nie jest sam w sobie zły, ale powinieneś dążyć do tego, by zamieszczać w swoich dokumentach HTML5 jak najwięcej informacji semantycznych.

Element div jest strukturalnym odpowiednikiem elementu span. Nie ma on żadnego konkretnego znaczenia, dzięki czemu może służyć do nadawania dokumentowi autorskiej, specyficznej struktury. Tworzenie takiej struktury jest jednak problematyczne o tyle, że jej znaczenie jest właściwe dla danej strony lub aplikacji internetowej, ale nie jest jasne dla innych. Może to prowadzić do trudności, kiedy kod HTML jest przetwarzany lub stylizowany przez niezależnych uczestników. W listingu 9.3 widnieje przykład zastosowania elementu div. Listing 9.3. Zastosowanie elementu div

Przykład

Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.

Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.

Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.

IKC nadzoruje obrót cytrusami.

Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.

187

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

W tym przykładzie ukazałem nieco odmienny sposób użycia elementu div, polegający na grupowaniu wielu elementów różnego typu w celu nadania im spójnego stylu. Wprawdzie obydwu elementom p zawartym w elemencie div mogłem nadać atrybut class, ale przyjęte przeze mnie podejście jest prostsze i opiera się na zasadach dziedziczenia stylów (które opisałem w rozdziale 4.).

Preformatowana treść Element pre pozwala zmienić sposób, w jaki przeglądarka obsługuje treść — wskazuje jej, by nie kondensować odstępów i zachować formatowanie. Przydaje się to, kiedy wejściowe formatowanie treści jakiejś sekcji jest istotne. Nie powinieneś jednak używać tego elementu do innych celów, gdyż wpływa on negatywnie na elastyczność kontrolowania prezentacji, jaką zapewniają elementy i style. W tabeli 9.4 znajduje się opis elementu pre. Tabela 9.4. Element pre Element

pre

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; }

Element pre bywa szczególnie przydatny, kiedy używa się go wraz z elementem code. Przykładowo, formatowanie bywa zwykle ważne w językach programowania i nie ma sensu odtwarzać go przy użyciu innych elementów. W listingu 9.4 widnieje przykład zastosowania elementu pre. Listing 9.4. Zastosowanie elementu pre

Przykład





var fruits = ["jabłka", "pomarańcze", "mango", "wiśnie"];

188

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

for (var i = 0; i < fruits.length; i++) { document.writeln("Lubię " + fruits[i]); }

Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.

Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.

W listingu 9.4 wprowadziłem element pre z kodem JavaScript. Kod ten nie jest wykonywany, gdyż jest zawarty w elemencie script, lecz jego formatowanie zostaje zachowane. Przeglądarka nie zmienia formatowania treści znajdującej się w elemencie pre — oznacza to, że spacje i tabulatory we wszystkich linijkach wyświetlane są w oknie przeglądarki. Z tego względu poszczególne deklaracje zawarte w elemencie pre nie są wcięte zgodnie ze strukturą całego dokumentu HTML. Sposób, w jaki przeglądarka wyświetla tak sformatowaną treść, zobaczysz na rysunku 9.3.

Rysunek 9.3. Wyświetlanie preformatowanej treści w elemencie pre

Cytowanie innych źródeł Element blockquote wskazuje blok treści zacytowanej z innego źródła. Element ten służy podobnemu celowi, co opisany w rozdziale 8. element q, ale zazwyczaj korzysta się z niego przy większych ilościach cytowanych treści. W tabeli 9.5 znajduje się opis tego elementu. Atrybutu cite można użyć do podania adresu URL źródła cytowanych treści, tak jak widać to w listingu 9.5.

189

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Tabela 9.5. Element blockquote Element

blockquote

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

cite

Zawartość

Treści strukturalne

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

blockquote { display: block; margin-before: 1em; margin-after: 1em; margin-start: 40px; margin-end: 40px; }

Listing 9.5. Zastosowanie elementu blockquote

Przykład

Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.

Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.

Smak dojrzałych jabłek jest słodko-kwaskowaty, rozmaite odmiany mogą być bardziej lub mniej słodkie lub kwaśne. Jabłka są kształtem zbliżone do kuli, z zagłębieniem na szczycie, z którego wystaje ogonek, na którym jabłko rośnie na drzewie, oraz z wylotem gniazda nasiennego u dołu. Przeciętne jabłko waży około 150 gramów. Świeże, nieuszkodzone jabłka zawierają pewną ilość witaminy C (8 mg w 100 g świeżego jabłka), większość innych witamin i minerałów, dużą ilość błonnika roślinnego, kwercetynę (44 mg w 1 kg jabłek), a także pektynę (1—1,5 g w 100 g świeżego jabłka). Przy obróbce cieplnej jabłek witaminy wodorozpuszczalne ulegają rozkładowi. Jabłka można spożywać tuż po zebraniu, z zachowaną skórką lub obrane. Środek jabłka ze sztywnymi błonkami oraz gniazdem nasiennym najczęściej nie jest spożywany i przy obróbce jest usuwany przy procesie zwanym "gniazdowaniem jabłek". Jabłka przy obróbce można kroić, siekać, ucierać, mielić, gotować, piec, wyciskać z soku lub suszyć.

Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.

IKC nadzoruje obrót cytrusami.

190

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.

Domyślny styl prezentacji tego elementu widać na rysunku 9.4.

Rysunek 9.4. Zastosowanie elementu blockquote „ Wskazówka Na rysunku 9.4 widać, że przeglądarka ignoruje formatowanie określone w obrębie elementu blockquote. Cytowaną treść możesz ustrukturyzować, dodając inne elementy grupujące, takie jak p czy hr (co przedstawiam w kolejnym przykładzie).

Przejścia tematyczne Element hr wskazuje przejście tematyczne na poziomie akapitu. Jest to kolejny element, którego osobliwa definicja wynika z potrzeby oddzielenia semantyki od prezentacji. W HTML 4 element hr wskazywał poziomą linię (dosłownie — linię ciągnącą się w poprzek strony). W HTML5 element hr wskazuje przejście do osobnego, lecz powiązanego tematu. Jego domyślny styl prezentacji w HTML5 to pozioma linia. W tabeli 9.6 znajduje się opis tego elementu. Trudno jednoznacznie stwierdzić na podstawie specyfikacji HTML5, jakie zastosowanie elementu hr jest poprawne, ale podane są w niej dwa przykłady: przejście do kolejnej sceny opowieści oraz przejście do kolejnego tematu w sekcji podręcznika. W listingu 9.6 widnieje przykład zastosowania tego elementu.

191

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Tabela 9.6. Element hr Element

hr

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Brak

Znaczniki

Void

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML 4 element hr miał wyłącznie znaczenie prezentacyjne. W HTML5 ma on opisane powyżej znaczenie semantyczne, a jego aspekt prezentacyjny sprowadzono do roli konwencji stylistycznej. Ponadto, w HTML5 z użycia wyszły następujące atrybuty lokalne: align, width, noshade, size i color.

Domyślny styl prezentacji

hr { display: block; margin-before: 0.5em; margin-after: 0.5em; margin-start: auto; margin-end: auto; border-style: inset; border-width: 1px; }

Listing 9.6. Zastosowanie elementu hr

Przykład

Lubię jabłka i pomarańcze. Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Inne moje ulubione owoce znajdziesz tutaj.

Szczególnie jednak lubię mandarynki, których właściwa nazwa naukowa to citrus reticulata. Pomarańcze kosztują w moim sklepie osiedlowym 1 złoty za sztukę 3 złote za kilogram.

Smak dojrzałych jabłek jest słodko-kwaskowaty, rozmaite odmiany mogą być bardziej lub mniej słodkie lub kwaśne. Jabłka są kształtem zbliżone do kuli, z zagłębieniem na szczycie, z którego wystaje ogonek, na którym jabłko rośnie na drzewie, oraz z wylotem gniazda nasiennego u dołu. Przeciętne jabłko waży około 150 gramów.

Świeże, nieuszkodzone jabłka zawierają pewną ilość witaminy C (8 mg w 100 g świeżego jabłka), większość innych witamin i minerałów, dużą ilość błonnika roślinnego, kwercetynę (44 mg w 1 kg jabłek), a także pektynę (1—1,5 g w 100 g świeżego jabłka).

Przy obróbce cieplnej jabłek witaminy wodorozpuszczalne ulegają rozkładowi. Jabłka można spożywać tuż po zebraniu, z zachowaną skórką lub obrane. Środek jabłka ze sztywnymi błonkami oraz gniazdem nasiennym najczęściej nie jest

192

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

spożywany i przy obróbce jest usuwany przy procesie zwanym "gniazdowaniem jabłek". Jabłka przy obróbce można kroić, siekać, ucierać, mielić, gotować, piec, wyciskać z soku lub suszyć.

Uwaga! Od zjedzenia zbyt wielu pomarańczy można dostać zgagi.

IKC nadzoruje obrót cytrusami.

Do dziś pamiętam najsmaczniejsze jabłko, jakie jadłem. Kupiłem je siódmego grudnia o trzeciej.

W powyższym przykładzie zamieściłem kilka elementów hr w elemencie blockquote, by nadać treści strukturę. Na rysunku 9.5 widać, jak to wpływa na wygląd treści.

Rysunek 9.5. Elementy hr dodane do treści w elemencie blockquote

Grupowanie treści w listach W HTML zdefiniowane są pewne elementy, którymi można się posłużyć do tworzenia list. W poniższych punktach omówię tworzenie list uporządkowanych i nieuporządkowanych, a także list definicji.

Element ol Element ol określa uporządkowaną listę. Pozycje listy wskazuje się elementem li, który opiszę w kolejnym punkcie. Opis elementu ol znajduje się w tabeli 9.7. W listingu 9.7 widnieje przykład zastosowania elementu ol do utworzenia prostej, uporządkowanej listy.

193

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Tabela 9.7. Element ol Element

ol

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

start, reversed, type

Zawartość

Dowolna liczba elementów li (choć żaden nie jest wymagany)

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 pojawił się atrybut reversed. Atrybuty start i type, których używania odradzano w HTML 4, przywrócono w HTML5, nadając im jednak znaczenie raczej semantyczne niż prezentacyjne. Atrybut compact wyszedł z użycia.

Domyślny styl prezentacji

ol { display: block; list-style-type: decimal; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }

Listing 9.7. Utworzenie prostej listy przy użyciu elementu ol

Przykład



Lubię jabłka i pomarańcze. Lubię też:

banany

mango

wiśnie

śliwki

brzoskwinie

winogrona

Inne moje ulubione owoce znajdziesz tutaj.

Wygląd tej listy w przeglądarce widać na rysunku 9.6. Możesz określić sposób zarządzania pozycjami listy przy użyciu atrybutów obsługiwanych przez element ol. Atrybut start służy do określania liczby porządkowej pierwszej pozycji na liście. Gdy atrybut ten nie jest zdefiniowany, pierwszej pozycji przypisana jest liczba porządkowa 1. Atrybut type służy do wskazywania oznaczeń właściwych dla danych pozycji na liście. W tabeli 9.8 widnieją wartości obsługiwane przez ten atrybut.

194

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Rysunek 9.6. Prosta, uporządkowana lista Tabela 9.8. Wartości obsługiwane przez atrybut type elementu ol Wartość

Opis

Przykład

1

Liczby dziesiętne (domyślna)

1., 2., 3., 4.

a

Małe litery

a., b., c., d.

A

Wielkie litery

A., B., C., D.

i

Małe liczby rzymskie

i., ii., iii., iv.

I

Wielkie liczby rzymskie

I., II., III., IV.

Kiedy podany jest atrybut reversed, kolejność listy jest malejąca. Kiedy jednak piszę te słowa, żadna z popularnych przeglądarek nie obsługuje tego atrybutu.

Element ul Element ul służy do tworzenia nieuporządkowanych list. Podobnie jak w przypadku elementu ol, pozycje w elemencie ul określa się elementem li, który opiszę poniżej. W tabeli 9.9 znajduje się opis elementu ul. Tabela 9.9. Element ul Element

ul

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Dowolna liczba elementów li (choć żaden nie jest wymagany)

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty type i compact wyszły z użycia

Domyślny styl prezentacji

ul { display: block; list-style-type: disc; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }

195

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Element ul może zawierać elementy li. Nie obsługuje on żadnych atrybutów, a wygląd listy określa się przy użyciu CSS. Przykład zastosowania elementu ul widać w listingu 9.8. Listing 9.8. Zastosowanie elementu ul

Przykład



Lubię jabłka i pomarańcze. Lubię też:

• banany
• mango
• wiśnie
• śliwki
• brzoskwinie
• winogrona

Inne moje ulubione owoce znajdziesz tutaj.

Każda pozycja z listy wyświetlana jest po punkcie. Wygląd punktu możesz określić właściwością CSS list-style-type, którą opiszę w rozdziale 24. Domyślny styl prezentacji (wykorzystujący styl disc) widać

na rysunku 9.7.

Rysunek 9.7. Domyślny styl prezentacji elementu ul

Element li Element li wskazuje pozycję w liście. Można go używać z elementami ul, ol i menu (przy czym menu nie jest jeszcze obsługiwany przez popularne przeglądarki). W tabeli 9.10 znajduje się opis elementu li.

196

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Tabela 9.10. Element li Element

li

Typ elementu

Nie dotyczy

Dozwoleni rodzice

ul, ol, menu

Atrybuty lokalne

value (obsługiwany jedynie, kiedy li jest dzieckiem ol)

Zawartość

Treści strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Użycie atrybutu value przestało być zalecane w HTML 4, ale przywrócono go w HTML5

Domyślny styl prezentacji

li { display: list-item; }

Element li jest bardzo prosty. Wskazuje pozycję na liście w obrębie elementu-rodzica. Można jednak skorzystać z atrybutu value do tworzenia uporządkowanych list o nieciągłej numeracji, tak jak w listingu 9.9. Listing 9.9. Uporządkowana lista o nieciągłej numeracji

Przykład



Lubię jabłka i pomarańcze. Lubię też:

banany

mango

wiśnie

śliwki

brzoskwinie

winogrona

Inne moje ulubione owoce znajdziesz tutaj.

Kiedy przeglądarka trafia na element li z atrybutem value, na podstawie jej wartości określa numerację dalszego ciągu listy, co widać na rysunku 9.8.

Listy definicji Lista definicji składa się z par terminów i opisów, tj. określonej liczby terminów, którym towarzyszą podane definicje. Do tworzenia list definicji używa się trzech elementów: dl, dt i dd. Elementy te nie obsługują żadnych atrybutów i nie uległy zmianie w HTML5. W tabeli 9.11 znajduje się ich opis.

197

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Rysunek 9.8. Uporządkowana lista o nieciągłej numeracji Tabela 9.11. Elementy listy definicji Element

Opis

Domyślny styl prezentacji

dl

Wskazuje listę definicji

dl { display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; }

dt

Wskazuje definiowany termin

dt { display: block; }

dd

Wskazuje definicję

dd { display: block; margin-start: 40px; }

Przykład zastosowania powyższych elementów widnieje w listingu 9.10. Zauważ, że na jeden element dt może przypadać kilka elementów dd, co pozwala na podawanie kilku definicji jednego terminu.

Listing 9.10. Lista definicji

Przykład



Lubię jabłka i pomarańcze. Lubię też:

Jabłko Owoc ziarnkowy jabłoni Malus domestica Banan Beznasienny owoc bananowca Musa acuminata Wiśnia Pestkowiec drzewa rodzaju Prunus

198

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Inne moje ulubione owoce znajdziesz tutaj.

Listy o specyficznej numeracji Obsługa list w HTML jest bardziej elastyczna, niż mogłoby się wydawać. Listy o rozbudowanej numeracji można tworzyć przy użyciu elementu ul w połączeniu z dwoma elementami CSS: właściwością counter i selektorem :before. Właściwość counter i selektor :before (oraz towarzyszący mu selektor :after) opiszę w rozdziale 17. Nie chcę się w tym rozdziale szczególnie zagłębiać w kwestię CSS, toteż poniżej znajdziesz przykład, do którego będziesz mógł wrócić już po przeczytaniu rozdziałów traktujących o CSS albo kiedy tylko odczujesz potrzebę tworzenia zaawansowanych list. W listingu 9.11 widnieje lista, w której osadzone są jeszcze dwie inne listy. Wszystkie trzy ponumerowane są w arbitralnie określony sposób. Listing 9.11. Zagnieżdżone listy o specyficznej numeracji

Przykład



Lubię jabłka i pomarańcze. Lubię też:

• banany
• mango, a w tym:
• odmianę Haden
• odmianę Keitt
• odmianę Kent
• wiśnie
• śliwki, a w tym:
  • odmianę Elephant Heart
  • odmianę Stanley
  • odmianę Seneca
  
  
  199
  
  ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI
  
  
• brzoskwinie
• winogrona

Inne moje ulubione owoce znajdziesz tutaj.

Wygląd tych list w przeglądarce widać na rysunku 9.9.

Rysunek 9.9. Listy ponumerowane specyficznie przy użyciu CSS W powyższym przykładzie trzeba zwrócić uwagę na kilka rzeczy. Wszystkie listy w tym dokumencie HTML są nieuporządkowane i utworzone przy użyciu elementu ul. Pozwala to na wyłączenie standardowego stylu punktu (przy użyciu właściwości list-style-type) i oparcie się na treści wybranej selektorem :before. Zauważ, że wartości pozycji listy zewnętrznej (tj. listy owoców) zaczynają się od 7 i wzrastają o 2. Czegoś takiego nie można zrobić, używając standardowego elementu ol. Właściwość CSS counter jest wprawdzie nieco niewygodna w użyciu, ale za to bardzo elastyczna. Wreszcie, zwróć też uwagę na to, że numeracja list wewnętrznych (podających odmiany mango i śliwek) jest ciągła. Podobny efekt można uzyskać, korzystając albo z atrybutu value elementu li, albo atrybutu start elementu ol. Tymczasem przy obydwu tych podejściach trzeba z wyprzedzeniem wiedzieć, ile pozycji znajdzie się na liście, co nie zawsze jest możliwe, kiedy pracuje się z aplikacjami internetowymi.

Ilustracje Ostatni z elementów grupujących odnosi się do ilustracji. HTML5 definiuje ilustrację jako „samodzielny fragment treści, opcjonalnie opatrzony podpisem, do którego główny wątek dokumentu odnosi się jak do jednolitego elementu, a który można oddzielić od głównego wątku dokumentu bez wpływu na sens jego ogólnej treści”. Jest to dość ogólna definicja, którą można odnieść do wielu innych rzeczy poza ilustracjami jako takimi. Ilustracje wskazuje się elementem figure, którego opis znajduje się w tabeli 9.12.

200

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Tabela 9.12. Element figure Element

figure

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Treści strukturalne i, opcjonalnie, jeden element figcaption

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

figure { display: block; margin-before: 1em; margin-after: 1em; margin-start: 40px; margin-end: 40px; }

Element figure może opcjonalnie zawierać element figcaption, który określa podpis ilustracji. W tabeli 9.13 znajduje się opis elementu figcaption. Tabela 9.13. Element figcaption Element

figcaption

Typ elementu

Nie dotyczy

Dozwoleni rodzice

figure

Atrybuty lokalne

Brak

Zawartość

Treści strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

figcaption { display: block; }

Przykład zestawienia elementów figure i figcaption widać w listingu 9.12. Listing 9.12. Zastosowanie elementów figure i figcaption

Przykład



Lubię jabłka i pomarańcze.

Listing 23. Zastosowanie elementu code var fruits = ["jabłka", "pomarańcze", "mango", "wiśnie"];
document.writeln("Lubię " + fruits.length);

201

ROZDZIAŁ 9. „ GRUPOWANIE TREŚCI

Inne moje ulubione owoce znajdziesz tutaj.

W powyższym przykładzie zastosowałem element figure do utworzenia ilustracji opartej na elemencie code. Elementu figcaption użyłem, żeby dodać podpis. Zauważ, że element figcaption musi być pierwszym lub ostatnim dzieckiem elementu figure. Wygląd tych elementów w przeglądarce widać na rysunku 9.10.

Rysunek 9.10. Zastosowanie elementów figure i figcaption

Podsumowanie W tym rozdziale przedstawiłem Ci elementy HTML służące do grupowania powiązanych treści — czy to w akapit, długi cytat z innego źródła, czy też w listę. Opisane w tym rozdziale elementy są niezmiernie przydatne i łatwe w użyciu, choć sprawne korzystanie z bardziej zaawansowanych opcji obsługi list może wymagać pewnej wprawy.

202

ROZDZIAŁ 10

Tworzenie sekcji

W tym rozdziale przedstawię Ci elementy służące do wskazywania sekcji treści, czyli — de facto — oddzielania od siebie tematów i myśli. Wiele z tych elementów pojawiło się dopiero w HTML5 i razem tworzą fundament, który może pozwolić na ostateczne oddzielenie znaczenia elementów od ich prezentacji. Niestety, oznacza to, że trudno przedstawić je w działaniu, ponieważ ich wpływ na wygląd treści jest żaden bądź zupełnie minimalny. Wobec tego w wielu przykładach zastosowałem style CSS, by lepiej oddać strukturę i zmiany bazujące na tych elementach. Nie będę w tym rozdziale tłumaczył znaczenia stylów CSS. W rozdziale 4. umieściłem spis najważniejszych funkcji CSS, a opisy poszczególnych właściwości CSS znajdziesz w rozdziale 16. i kolejnych. W tabeli 10.1 znajduje się streszczenie całego rozdziału. Tabela 10.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Wskazanie nagłówka.

Użyj elementów h1 – h3.

10.1

Wskazanie grupy nagłówków, spośród których tylko pierwszy uwzględniany jest w modelu struktury dokumentu.

Użyj elementu hgroup.

10.2, 10.3

Wskazanie istotnego tematu lub myśli.

Użyj elementu section.

10.4

Wskazanie nagłówka i stopki.

Użyj elementów header i footer.

10.5

Wskazanie zbioru elementów nawigacyjnych.

Użyj elementu nav.

10.6

Wskazanie głównego tematu lub myśli, które można przekazywać niezależnie od kontekstu całego dokumentu.

Użyj elementu article.

10.7

Wskazanie treści luźno powiązanej z otaczającymi ją treściami.

Użyj elementu aside.

10.8

Wskazanie informacji kontaktowych dla danego dokumentu lub artykułu.

Użyj elementu address.

10.9

Utworzenie sekcji, którą użytkownik może rozwinąć, by poznać więcej szczegółów.

Użyj elementu details lub summary.

10.10

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Podstawowe nagłówki Element h1 określa nagłówek. W HTML występuje hierarchia nagłówków, w której h1 jest najwyższy poziomem. Pozostałe elementy nagłówków to h2, h3 i kolejne, aż do h6. W tabeli 10.2 znajduje się opis elementów h1 – h6. Tabela 10.2. Elementy h1 – h6 Element

h1 – h6

Typ elementu

Strukturalny

Dozwoleni rodzice

Element hgroup bądź dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Style wymienione w tabeli 10.3

Nagłówki o jednakowym poziomie standardowo stosuje się w celu dzielenia treści na fragmenty tematyczne o własnych sekcjach. Nagłówki niższych poziomów standardowo służą do oznaczania różnych aspektów jednego tematu. Dodatkową zaletą tych elementów jest to, że tworzą one model struktury dokumentu — dzięki temu użytkownik może się rozeznać co do ogólnego charakteru dokumentu, zwyczajnie przeglądając nagłówki i przechodząc do interesujących go fragmentów na podstawie hierarchii nagłówków. W listingu 10.1 widnieje przykład zastosowania elementów h1 – h3. Listing 10.1. Zastosowanie elementów h1 – h3

Przykład



Moje ulubione owoce Lubię jabłka i pomarańcze. Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Więcej informacji Inne moje ulubione owoce znajdziesz tutaj. Moje ulubione sporty

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

204

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

W listingu zamieściłem jedynie nagłówki h1, h2 i h3, ponieważ rzadko trafiają się treści, które wymagałyby dalszej hierarchizacji. Wyjątki zdarzają się w przypadku treści bardzo szczegółowych i technicznych, w rodzaju umów i specyfikacji. Zazwyczaj jednak wystarczają maksymalnie dwa lub trzy poziomy nagłówków. Przykładowo, sam w swoich książkach korzystam z trzech poziomów hierarchii nagłówków. Choć szablony mojego wydawnictwa udostępniają tych poziomów pięć, to redaktorom niewygodnie się pracuje, kiedy decyduję się używać nagłówków czwartego i piątego poziomu. Wygląd elementów h1, h2 i h3 w przeglądarce widać na rysunku 10.1.

Rysunek 10.1. Elementy h1, h2 i h3 wyświetlone domyślnymi stylami Jak widać na rysunku, nagłówki kolejnych poziomów różnią się stylistycznie. W tabeli 10.3 widnieją domyślne style prezentacji wszystkich elementów nagłówka. Nie musisz ściśle przestrzegać hierarchii elementów h1 – h6, ale wszelkie odstępstwa mogą być dla użytkownika mylące. Hierarchie nagłówków są tak wszechobecne, że użytkownicy mają określone oczekiwania co do ich formy.

Ukrywanie podtytułów Element hgroup umożliwia traktowanie zbiorów elementów nagłówkowych jako jednolitych fragmentów, które nie wpływają na model struktury dokumentu HTML. Opis tego elementu znajduje się w tabeli 10.4. Element hgroup pozwala na poradzenie sobie z często występującym problemem podtytułów. Wyobraź sobie, że chcę utworzyć sekcję dokumentu „Owoce, które lubię” z podtytułem „Czyli jak polubiłem cytrusy”. Mógłbym użyć elementów h1 i h2, tak jak w listingu 10.2.

205

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Tabela 10.3. Style prezentacji elementów h1 – h6 Element

Domyślny styl prezentacji

h1

h1 { display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold; }

h2

h2 { display: block; font-size: 1.5em; margin-before: 0.83em; margin-after: 0.83em; margin-start: 0; margin-end: 0; font-weight: bold; }

h3

h3 { display: block; font-size: 1.17em; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; font-weight: bold; }

h4

h4 { display: block; margin-before: 1.33em; margin-after: 1.33em; margin-start: 0; margin-end: 0; font-weight: bold; }

h5

h5 { display: block; font-size: .83em; margin-before: 1.67em; margin-after: 1.67em; margin-start: 0; margin-end: 0; font-weight: bold; }

h6

h6 { display: block; font-size: .67em; margin-before: 2.33em; margin-after: 2.33em; margin-start: 0; margin-end: 0; font-weight: bold; }

Tabela 10.4. Element hgroup Element

hgroup

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Jeden lub więcej elementów nagłówków (h1 – h6)

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

hgroup { display: block; }

Listing 10.2. Zastosowanie elementów h1 i h2 do utworzenia tytułu z podtytułem

Przykład



Moje ulubione owoce Czyli jak pokochałem cytrusy Lubię jabłka i pomarańcze. Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Więcej informacji Inne moje ulubione owoce znajdziesz tutaj. Moje ulubione sporty

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Jaki triathlon mnie interesuje

206

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

Problem w tym, że nie ma tu możliwości odróżnienia elementu h2, który jest podtytułem, od elementu h2, który jest nagłówkiem niższego poziomu. Gdyby napisać skrypt, który by tworzył model dokumentu na podstawie jego elementów h1 – h6, to wynik byłby nieprecyzyjny: Owoce, które lubię Czyli jak polubiłem cytrusy Inne owoce Więcej informacji Moje ulubione sporty Rodzaje triathlonu Jaki triathlon mnie interesuje

Wynikałoby z tego, że Czyli jak polubiłem cytrusy jest nagłówkiem, a nie podtytułem. Element hgroup pozwala zaradzić temu problemowi, tak jak widać to w listingu 10.3. Listing 10.3. Zastosowanie elementu hgroup

Przykład





Moje ulubione owoce Czyli jak pokochałem cytrusy

Lubię jabłka i pomarańcze. Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona. Więcej informacji Inne moje ulubione owoce znajdziesz tutaj. Moje ulubione sporty

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Jaki triathlon mnie interesuje

207

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

Położenie elementu hgroup w hierarchii h1 – h6 określone jest przez pierwszy nagłówek będący dzieckiem tego elementu. Przykładowo, hgroup w powyższym listingu traktowany jest jako h1, ponieważ h1 jest jego pierwszym dzieckiem. Jedynie pierwszy element h1 – h6 uwzględniany jest w modelu struktury, przez co model ów wygląda następująco: Owoce, które lubię Inne owoce Więcej informacji Moje ulubione sporty Rodzaje triathlonu Jaki triathlon mnie interesuje

Element h2 nie jest już mylący — element hgroup wskazuje, że należy go zignorować. Drugim problemem, z jakim trzeba się zmierzyć, jest sprawienie, by podtytuł odróżniał się wizualnie od standardowych elementów h2. W listingu zdefiniowałem kilka prostych stylów, czego rezultat widać na rysunku 10.2. O tym, jak działają selektory CSS, przeczytasz w rozdziale 17.

Rysunek 10.2. Uwypuklenie charakteru relacji pomiędzy elementami-dziećmi hgroup Nie sugeruję wprawdzie, żebyś trzymał się takiego surowego stylu, ale sam pewnie widzisz, że charakter relacji pomiędzy elementami-dziećmi hgroup można uwypuklić, zmniejszając margines między elementami nagłówka i nadając im tła o jednakowej barwie.

208

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Tworzenie sekcji Element section jest nowością w HTML5 i służy określaniu sekcji dokumentu. Elementy nagłówkowe pozwalają wprawdzie na tworzenie sugerowanych sekcji, ale to właśnie ten element pozwala na ich wyszczególnienie i odłączenie od elementów h1 – h6. Korzystanie z elementu section nie wiąże się z żadnymi jasno określonymi zasadami, ale z reguły powinno się w nim zawierać treść, która powinna się znaleźć w modelu struktury dokumentu bądź jego spisie treści. Elementy section zazwyczaj zawierają jeden lub więcej akapitów oraz nagłówek, choć nie jest on konieczny. W tabeli 10.5 znajduje się opis tego elementu. Tabela 10.5. Element section Element

section

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne. Element section nie może być dzieckiem elementu address.

Atrybuty lokalne

Brak

Zawartość

Elementy style i treści strukturalne.

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

section { display: block; }

W listingu 10.4 widać przykład zastosowania elementu section. Listing 10.4. Zastosowanie elementu section

Przykład





Moje ulubione owoce Czyli jak pokochałem cytrusy

Lubię jabłka i pomarańcze.

Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.

Więcej informacji

209

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Inne moje ulubione owoce znajdziesz tutaj.

Moje ulubione sporty

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

W powyższym listingu podałem trzy kolejno zagnieżdżone elementy section. Zauważ, że nagłówek każdej z tych sekcji jest elementem h1. Kiedy używasz elementów section, przeglądarka odpowiada za rozpracowanie hierarchii elementów nagłówkowych, dzięki czemu (przynajmniej teoretycznie) Ty sam nie musisz określać i pilnować utrzymywania właściwej sekwencji elementów h1 – h6. Obsługa tej funkcji w różnych przeglądarkach bywa w praktyce nieco inna. Google Chrome, Internet Explorer 9 (IE9) i Firefox potrafią wyprowadzić sugerowaną hierarchię i opracować względny ranking wszystkich elementów h1, tak jak widać to na rysunku 10.3.

Rysunek 10.3. Zastosowanie elementów section z osadzonymi elementami h1 w Chrome

210

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Nie jest źle, ale wystarczy się przyjrzeć, by okazało się, że tekst elementu h1 — tj. zwrot Moje ulubione owoce — jest mniejszy od tekstu użytego w znajdującym się na tym samym poziomie hierarchii drugim nagłówku h1, zawierającym zwrot Moje ulubione sporty. Wynika to z tego, że niektóre przeglądarki (w tym Chrome i Firefox) nakładają na elementy h1 (oraz h2 – h6) inne style, kiedy te znajdują się w elementach section, article, aside i nav (które zresztą opiszę w dalszej części rozdziału). Ten nowy styl jest taki sam, jak domyślny styl wyświetlania elementu h2. IE9 nie nadaje innego stylu, co widać na rysunku 10.4. To jest właśnie poprawne zachowanie.

Rysunek 10.4. Zastosowanie elementu section z osadzonymi elementami h1 w Internet Explorer Co więcej, nie wszystkie przeglądarki prawidłowo obsługują tworzenie sugerowanej hierarchii osadzonych kolejno elementów nagłówkowych tego samego typu. Na rysunku 10.5 widać, jak Opera obsługuje te elementy. Safari robi tak samo — ignoruje hierarchię stworzoną przez elementy section. Style nadawane przez Chrome i Firefox możesz nadpisać, tworząc własne style, które mają pierwszeństwo nad stylami przeglądarek (co objaśniłem w rozdziale 4.). Internet Explorer zachowuje się wzorowo. Z kolei niewiele można zrobić z Operą i Safari. Dopóki obsługa tej całkiem przydatnej funkcji w najpopularniejszych przeglądarkach nie stanie się spójniejsza, należy używać jej ostrożnie.

Nagłówki i stopki Element header wskazuje nagłówek sekcji. Może on zawierać dowolną treść, w tym również logo. Zazwyczaj znajduje się w nim jeden element h1 – h6 bądź hgroup; mogą się w nim też znajdować elementy nawigacyjne sekcji. Poczytaj o elemencie nav (który omówię dalej w punkcie „Blok nawigacyjny”), jeżeli chcesz się bliżej zapoznać z elementami nawigacyjnymi. Opis elementu header znajduje się w tabeli 10.6. Element footer jest uzupełnieniem elementu header i określa stopkę sekcji. W elemencie footer zwykle umieszcza się skrótowe informacje o sekcji oraz ewentualnie szczegóły o autorze, prawach autorskich, linki do powiązanych treści, logo oraz deklaracje o zrzeczeniu się odpowiedzialności. W tabeli 10.7 znajduje się opis tego elementu.

211

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Rysunek 10.5. Zastosowanie elementu section z osadzonymi elementami h1 w Operze Tabela 10.6. Element header Element

header

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne. Element header nie może być potomkiem elementu address, footer bądź innego elementu header.

Atrybuty lokalne

Brak

Zawartość

Treści strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

header { display: block; }

Przykład zastosowania elementów header i footer widać w listingu 10.5. Listing 10.5. Zastosowanie elementów header i footer

Przykład



212

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Tabela 10.7. Element footer Element

footer

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne. Element header nie może być potomkiem elementu address, header bądź innego elementu footer.

Atrybuty lokalne

Brak

Zawartość

Treści strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

header { display: block; }



Rzeczy, które lubię Adam Freeman



Moje ulubione owoce Czyli jak pokochałem cytrusy

Lubię jabłka i pomarańcze.

Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.

Więcej informacji Inne moje ulubione owoce znajdziesz tutaj.



213

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Moje ulubione sporty

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd.

Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

©2011, Adam Freeman. Odwiedź stronę Helionu



W tym przykładzie zdefiniowałem trzy elementy header. Kiedy nagłówek jest dzieckiem elementu body, zakłada się, że jest nagłówkiem całego dokumentu (uważaj jednak — nie ma on nic wspólnego z elementem head, który opisałem w rozdziale 7.). Kiedy element header jest częścią sekcji (sugerowanej bądź jednoznacznie zdefiniowanej elementem section), to jest on jej nagłówkiem. Nadałem temu dokumentowi kilka stylów, aby uwypuklić hierarchiczne relacje pomiędzy poszczególnymi sekcjami i nagłówkami. Widać to na rysunku 10.6.

Rysunek 10.6. Zastosowanie elementu header Zwróć uwagę na zróżnicowanie wielkości tekstu. To prawdopodobnie z tego powodu Google Chrome i Firefox zmieniają formatowanie elementów h1 – h6, które znajdują się w elemencie section. Służy to odróżnieniu nagłówków h1 najwyższego poziomu od tych, które osadzone są w wydzielonych sekcjach. Nie usprawiedliwia to wprawdzie przesadnych zmian w formatowaniu, ale przynajmniej tłumaczy nam, dlaczego tak się dzieje. Efekt zastosowania elementu footer widać na rysunku 10.7.

214

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Rysunek 10.7. Dodanie elementu footer

Blok nawigacyjny Element nav określa sekcję dokumentu, w której znajdują się odnośniki do innych stron i innych części tej samej strony. Rzecz jasna, nie wszystkie linki muszą się znajdować w elemencie nav. Element ten służy do wskazania głównych sekcji nawigacyjnych dokumentu. W tabeli 10.8 znajduje się jego opis. Tabela 10.8. Element nav Element

nav

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne; nav nie może jednak być potomkiem elementu address

Atrybuty lokalne

Brak

Zawartość

Treści strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

nav { display: block; }

W listingu 10.6 widnieje przykład zastosowania elementu nav. Listing 10.6. Zastosowanie elementu nav

Przykład



215

ROZDZIAŁ 10. „ TWORZENIE SEKCJI



Rzeczy, które lubię Adam Freeman

Spis treści

• Moje ulubione owoce
• Inne owoce
• Moje ulubione sporty
• Rodzaje triathlonu
• Jaki triathlon mnie interesuje

Moje ulubione owoce Czyli jak pokochałem cytrusy

Lubię jabłka i pomarańcze.

Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.

Więcej informacji Inne moje ulubione owoce znajdziesz tutaj.



Moje ulubione sporty

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd.

Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

216

ROZDZIAŁ 10. „ TWORZENIE SEKCJI



Więcej informacji: Więcej o owocach Więcej o triathlonie

©2011, Adam Freeman. Odwiedź stronę Helionu



Zamieściłem w dokumencie kilka elementów nav, aby nadać mu pewną elastyczność. Pierwszy element nav zawiera elementy pozwalające użytkownikowi na poruszanie się po dokumencie. Użyłem elementów ul, li i a do utworzenia hierarchicznego zestawu odnośników wewnętrznych. Wygląd tak sformatowanej strony widać na rysunku 10.8.

Rysunek 10.8. Zastosowanie elementu nav do utworzenia bloku odnośników wewnętrznych Zamieściłem ten element nav w głównym elemencie header dokumentu. Nie jest to konieczne, ale lubię w ten sposób wskazywać, że użytkownik ma do czynienia z głównym elementem nav. Zauważ, że podałem również element h1. Element nav może zawierać dowolne elementy struktury, nie tylko odnośniki. Na końcu dokumentu umieściłem drugi element nav, w którym znajdują się linki odsyłające użytkownika do innych źródeł informacji. Wygląd tego elementu w przeglądarce widać na rysunku 10.9.

Rysunek 10.9. Zastosowanie elementu nav do utworzenia bloku odnośników zewnętrznych W elemencie style zamieściłem style, które pozwoliły mi wyróżnić obydwa bloki nav. Domyślny styl prezentacji elementu nav nie wskazuje wyraźnie jego treści.

217

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Artykuły Element article wskazuje w dokumencie HTML samodzielny fragment treści, który z założenia można by przekazywać i wykorzystywać niezależnie od pozostałej części strony (np. w ramach dystrybucji kanałami RSS). Nie oznacza to, że trzeba ją przekazywać niezależnie, lecz że samodzielność treści wskazuje, kiedy należy tego elementu używać. Dobrymi przykładami takich treści są — w rzeczy samej — artykuły i wpisy na blogach. W tabeli 10.9 znajduje się opis elementu article. Tabela 10.9. Element article Element

article

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne; article nie może jednak być potomkiem elementu address

Atrybuty lokalne

Brak

Zawartość

Elementy style i treści strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

article { display: block; }

W listingu 10.7 znajduje się przykład zastosowania elementu article. Listing 10.7. Zastosowanie elementu article

Przykład



218

ROZDZIAŁ 10. „ TWORZENIE SEKCJI



Rzeczy, które lubię Adam Freeman

Spis treści

• Moje ulubione owoce
• Moje ulubione sporty

Moje ulubione owoce Czyli jak pokochałem cytrusy

Lubię jabłka i pomarańcze.

Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.

Więcej informacji Inne moje ulubione owoce znajdziesz tutaj.



Więcej informacji: Więcej o owocach



Moje ulubione sporty Boli, ale nie poddaję się

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd.

Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

219

ROZDZIAŁ 10. „ TWORZENIE SEKCJI



Więcej informacji: Więcej o triathlonie



©2011, Adam Freeman. Odwiedź stronę Helionu



W tym przykładzie zmieniłem strukturę dokumentu tak, by bardziej przystawała do stylu właściwego blogom (choć z pewnością czytywałeś ciekawsze blogi od tego, który tu prezentuję). Główna treść dokumentu podzielona jest na trzy części. Pierwsza z nich to nagłówek header, który znajduje się poza poszczególnymi wpisami i pod który podłączona jest reszta dokumentu. Druga część to stopka footer, która jest przeciwwagą dla nagłówka i dostarcza użytkownikowi pewne podstawowe informacje dotyczące reszty treści. Nowością jest trzecia część: elementy article. W tym przykładzie każdy artykuł opisuje jakiś rodzaj rzeczy, które lubię. Spełniają one zatem warunki samodzielności, albowiem każde z tych omówień jest autonomiczne i może być rozpowszechniane z zachowaniem sensu niezależnie od reszty treści. Znowu, dodałem kilka stylów, aby wyszczególnić wygląd definiowanych tymi elementami sekcji, czego efekt widać na rysunku 10.10.

Rysunek 10.10. Zastosowanie elementu article Element article odznacza się równą elastycznością w użyciu, co pozostałe nowe elementy semantyczne. Możesz osadzać w sobie kolejne takie elementy, by wskazać pierwotny artykuł oraz kolejne aktualizacje bądź komentarze. Podobnie jak w przypadku innych elementów, wartość article zależna jest od kontekstu — to, co nadaje sensowną strukturę jednemu rodzajowi treści, może być zupełnie bezużyteczne przy innego rodzaju treściach. Konieczne jest zachowanie rozsądku i dbanie o spójność.

Paski boczne Element aside wskazuje treści luźno powiązane z treścią elementu, w którym jest osadzony — jest odpowiednikiem ramki w książce bądź czasopiśmie. Jego treść ma jakiś związek z resztą strony, artykułu

220

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

article lub sekcji section, ale nie wchodzi w skład głównego wątku. Może zawierać jakieś dodatkowe szczegóły, zbiór linków do pokrewnych artykułów itp. Opis elementu aside znajduje się w tabeli 10.10.

Tabela 10.10. Element aside Element

aside

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne; aside nie może jednak być potomkiem elementu address

Atrybuty lokalne

Brak

Zawartość

Elementy style i treści strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

aside { display: block; }

W listingu 10.8 widać przykład zastosowania elementu aside. Dodałem takowy do jednego z artykułów i obstylowałem tak, by wyglądał jak prosta ramka w czasopiśmie. Listing 10.8. Dodanie i obstylowanie elementu aside

Przykład



221

ROZDZIAŁ 10. „ TWORZENIE SEKCJI



Rzeczy, które lubię Adam Freeman

Spis treści

• Moje ulubione owoce
• Moje ulubione sporty

Moje ulubione owoce Czyli jak pokochałem cytrusy

Dlaczego owoce są zdrowe

Oto dlaczego każdy powinien jadać więcej owoców:

Owoce mają wiele witamin

Owoce są źródłem błonnika

Owoce są niskokaloryczne

Lubię jabłka i pomarańcze.

Inne owoce Lubię też banany, mango, wiśnie, morele, śliwki, gruszki i winogrona.

Więcej informacji Inne moje ulubione owoce znajdziesz tutaj.



Więcej informacji: Więcej o owocach



Moje ulubione sporty Boli, ale nie poddaję się



222

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd.

Jaki triathlon mnie interesuje Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

Więcej informacji: Więcej o triathlonie



©2011, Adam Freeman. Odwiedź stronę Helionu



Rezultat zastosowania opatrzonego stylami elementu aside widać na rysunku 10.11. Na potrzeby przykładu zamieściłem w dokumencie dodatkowy tekst, żeby struktura treści była bardziej widoczna.

Rysunek 10.11. Zastosowanie obstylowanego elementu aside

Dane kontaktowe Element address służy do podawania danych kontaktowych właściwych dla dokumentu lub elementu article. W tabeli 10.11 znajduje się opis tego elementu.

223

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Tabela 10.11. Element address Element

address

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

Brak

Zawartość

Treści strukturalne; potomkami tego elementu nie mogą być elementy h1 – h6, section, header, footer, nav, article i aside

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

address { display: block; font-style: italic; }

Uznaje się, że element address będący potomkiem elementu article podaje dane kontaktowe związane z tym artykułem. Kiedy natomiast address jest dzieckiem elementu body (i nie jest osadzony w pośrednim elemencie article), to uznaje się, że podaje on dane kontaktowe odnoszące się do całego dokumentu. Elementu address nie wolno używać do podawania adresów, które nie są danymi kontaktowymi związanymi z dokumentami lub artykułami. Przykładowo, nie można używać tego elementu w obrębie właściwej treści dokumentu do podawania adresów klientów i użytkowników. W listingu 10.9 widnieje przykład zastosowania tego elementu. Listing 10.9. Zastosowanie elementu address ...

Rzeczy, które lubię Adam Freeman

Masz pytania lub uwagi? Napisz

Spis treści

• Moje ulubione owoce
• Moje ulubione sporty

...

W nagłówku dokumentu zamieściłem element address, zawierający adres e-mailowy, pod którym użytkownicy czy też czytelnicy mogą się ze mną skontaktować. Rezultat widać na rysunku 10.12.

Sekcja szczegółów Element details tworzy w dokumencie sekcję, którą użytkownik może rozwinąć, by zapoznać się z dodatkowymi szczegółami jakiegoś tematu. Opis tego elementu znajduje się w tabeli 10.12.

224

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Rysunek 10.12. Zastosowanie elementu address Tabela 10.12. Element details Element

details

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

open

Zawartość

Treści strukturalne i (opcjonalnie) element summary

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

details { display: block; }

Element details zazwyczaj zawiera element summary, który określa oznaczenie lub tytuł sekcji szczegółów. W tabeli 10.13 znajduje się opis elementu summary. Tabela 10.13. Element summary Element

summary

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element details

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

summary { display: block; }

W listingu 10.10 wykorzystano obydwa te elementy. Listing 10.10. Zastosowanie elementów summary i details

Przykład

225

ROZDZIAŁ 10. „ TWORZENIE SEKCJI





Rzeczy, które lubię Adam Freeman



Moje ulubione sporty Boli, ale nie poddaję się

Lubię pływać, jeździć rowerem i biegać. Ćwiczę na swój pierwszy triathlon, a jest to ciężka praca.

Rodzaje triathlonu Istnieją różne rodzaje triathlonu — sprinterski, olimpijski itd. Chcę startować w olimpijskim, który składa się z następujących konkurencji:

pływania na dystansie 1,5 km

jazdy rowerem na dystansie 40 km

biegania na dystansie 10 km

Wygląd tych elementów w przeglądarce widać na rysunku 10.13. Nie wszystkie przeglądarki obsługują element details prawidłowo; m.in. IE9 ma z tym problemy. Jak widać na rysunku, w przeglądarce pojawia się kontrolka, która po aktywowaniu otwiera i wyświetla zawartość elementu details. Kiedy element details jest zamknięty, widoczna jest jedynie treść elementu summary. Jeżeli chcesz, aby element details był automatycznie otwierany przy pierwszym wczytaniu strony, zastosuj atrybut open.

226

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

Rysunek 10.13. Zastosowanie elementów details i summary

Podsumowanie W tym rozdziale przedstawiłem Ci elementy służące do tworzenia sekcji w dokumentach i wydzielania samodzielnych treści. Większość z nich pojawiła się dopiero w HTML5 i choć korzystanie z nich nie jest wymogiem tworzenia poprawnych dokumentów HTML5, to należą one do najważniejszych usprawnień w zakresie ulepszenia semantyki HTML.

227

ROZDZIAŁ 10. „ TWORZENIE SEKCJI

228

ROZDZIAŁ 11

Elementy tabel

W tym rozdziale przedstawię Ci elementy HTML służące do tworzenia tabel. Tabele służą przede wszystkim do wyświetlania danych w dwuwymiarowych siatkach, choć we wcześniejszych wersjach HTML powszechnie z nich korzystano przy definiowaniu layoutu stron. W HTML5 takie zastosowanie jest niedozwolone i należy wobec tego korzystać z nowej funkcji obsługi tabel przez CSS (którą omówię w rozdziale 21.). W tabeli 11.1 znajduje się streszczenie całego rozdziału. Tabela 11.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Utworzenie podstawowej tabeli.

Użyj elementów table, tr i td.

11.1, 11.2

Dodanie komórek nagłówków do tabeli.

Użyj elementu th.

11.3

Odróżnienie nagłówków kolumn i rzędów.

Użyj elementów thead i tbody.

11.4, 11.5

Dodanie stopki do tabeli.

Użyj elementu tfoot.

11.6

Utworzenie nieregularnej siatki tabeli.

Użyj atrybutu span, obsługiwanego przez elementy th i td.

11.7 – 11.9

Powiązanie komórek z nagłówkami na potrzeby technologii asystujących.

Użyj atrybutu headers, obsługiwanego przez elementy td i th.

11.10

Dodanie podpisu do tabeli.

Użyj elementu caption.

11.11

Definiowanie kolumn tabeli zamiast rzędów.

Użyj elementów colgroup i col.

11.12, 11.13

Wskazanie, że tabela nie służy jako podstawa layoutu strony.

Użyj atrybutu border obsługiwanego przez element table.

11.14

Podstawowa tabela table, tr i td to trzy elementy, które musi zawierać każda tabela. Są też inne, które omówię w dalszej części rozdziału, ale zacząć musisz od tych powyżej. Pierwszy, table, leży u podstaw obsługi treści tabelowych

w HTML i wskazuje tabelę w dokumencie HTML. W tabeli 11.2 znajduje się opis tego elementu. Kolejnym podstawowym elementem tabelowym jest tr, który wskazuje rząd tabeli. Tabele HTML bazują na rzędach, a nie na kolumnach, toteż każdy rząd trzeba wskazywać osobno. Opis tego elementu znajduje się w tabeli 11.3. Ostatnim z trzech podstawowych elementów jest td, który wskazuje komórkę tabeli. Jego opis znajduje się w tabeli 11.4.

ROZDZIAŁ 11. „ ELEMENTY TABEL

Tabela 11.2. Element table Element

table

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne

Atrybuty lokalne

border

Zawartość

Elementy caption, colgroup, thead, tbody, tfoot, tr, th i td

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty summary, align, width, bgcolor, cellpadding, cellspacing, frame i rules wyszły z użycia. Należy zamiast nich korzystać z CSS. Wartość atrybutu border musi wynosić 1. Grubość obramowania określa się następnie w CSS.

Domyślny styl prezentacji

table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }

Tabela 11.3. Element tr Element

tr

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Elementy table, thead, tfoot i tbody

Atrybuty lokalne

Brak

Zawartość

Jeden lub więcej elementów td i th

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty align, char, charoff, valign i bgcolor wyszły z użycia. Należy zamiast nich korzystać z CSS.

Domyślny styl prezentacji

tr { display: table-row; vertical-align: inherit; border-color: inherit;}

Tabela 11.4. Element td Element

td

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element tr

Atrybuty lokalne

colspan, rowspan, headers

Zawartość

Treść strukturalna

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybut scope wyszedł z użycia. Zamiast niego korzysta się z atrybutu scope elementu th. Atrybuty abbr, axis, align, width, char, charoff, valign, bgcolor, height i nowrap wyszły z użycia. Należy zamiast nich korzystać z CSS.

Domyślny styl prezentacji

td { display: table-cell; vertical-align: inherit; }

Tych trzech elementów używa się w połączeniu do tworzenia tabel, tak jak w listingu 11.1.

230

ROZDZIAŁ 11. „ ELEMENTY TABEL

Listing 11.1. Tworzenie tabeli elementami table, tr i td

Przykład

Jabłka	Zielony	Średni
Pomarańcze	Pomarańczowy	Duży

W powyższym przykładzie utworzyłem element table składający się z dwóch rzędów (określonych dwoma elementami tr). W każdym rzędzie znajdują się trzy kolumny, określone elementami td. Element td może zawierać dowolne treści strukturalne, ale zdecydowałem się użyć zwyczajnego tekstu. Domyślny styl prezentacji tabeli widać na rysunku 11.1.

Rysunek 11.1. Prosta tabela Utworzona tabela jest bardzo prosta, ale widać na jej przykładzie podstawową strukturę. Przeglądarka odpowiada za określanie rozmiaru rzędów i kolumn tak, by utrzymać kształt tabeli. Spójrz, co się dzieje, kiedy w tabeli pojawia się dłuższy tekst, tak jak w listingu 11.2. Listing 11.2. Zamieszczenie dłuższej treści w komórce

Przykład



231

ROZDZIAŁ 11. „ ELEMENTY TABEL

Jabłka	Zielony	Średni
Pomarańcze	Pomarańczowy	Duży
Owoc granatowca	Dość zielonkawo-czerwonawy	Od średniego po duży

Treść każdego z dodanych tutaj elementów td jest dłuższa od treści z poprzednich dwóch rzędów. Wyrównanie wielkości wszystkich komórek w przeglądarce widać na rysunku 11.2.

Rysunek 11.2. Komórki o rozmiarze dostosowanym do dłuższej treści Jedną z najprzyjemniejszych właściwości elementu table jest to, że nie musisz się zamartwiać kwestiami związanymi z rozmiarem komórek. Przeglądarka sama pilnuje, by szerokość kolumn była dopasowana choćby do najdłuższych treści, a wysokość rzędów dopasowana do wysokości najwyższej komórki.

Komórki nagłówków Element th wskazuje komórkę nagłówka, co pozwala odbiorcy na odróżnienie danych od opisów danych. W tabeli 11.5 znajduje się opis tego elementu. W listingu 11.3 widać, jak zamieściłem w tabeli elementy th, by opisać dane zawarte w elementach td. Listing 11.3. Umieszczenie w tabeli komórek nagłówkowych

Przykład



232

ROZDZIAŁ 11. „ ELEMENTY TABEL

Tabela 11.5. Element th Element

th

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element tr

Atrybuty lokalne

colspan, rowspan, scope, headers

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty abbr, axis, align, width, char, charoff, valign, bgcolor, height i nowrap wyszły z użycia. Należy zamiast nich korzystać z CSS.

Domyślny styl prezentacji

th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }

Pozycja	Nazwa	Kolor	Rozmiar
Ulubiony:	Jabłko	Zielony	Średni
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży
Trzeci ulubiony:	Owoc granatowca	Dość zielonkawo-czerwonawy	Od średniego po duży

Jak widać, mogłem w poszczególnych rzędach zestawić elementy th i td, a także stworzyć rząd składający się z samych elementów th. Wygląd tej tabeli w przeglądarce widać na rysunku 11.3.

Rysunek 11.3. Umieszczone w tabeli komórki nagłówkowe

233

ROZDZIAŁ 11. „ ELEMENTY TABEL

Nadanie tabeli struktury Mamy już podstawową tabelę, ale także pewien problem. Przy tworzeniu stylu tabeli odróżnienie elementów th znajdujących się w osobnym rzędzie od tych, które zestawione są w rzędach z danymi, może być trudne. Nie jest to wprawdzie niemożliwe, ale wymaga dużej uwagi. Listing 11.4 przedstawia, jak można do tego problemu podejść. Listing 11.4. Odróżnienie elementów th w tabeli

Przykład

Pozycja	Nazwa	Kolor	Rozmiar
Ulubiony:	Jabłko	Zielony	Średni
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży
Trzeci ulubiony:	Owoc granatowca	Dość zielonkawo-czerwonawy	Od średniego po duży

W tym przykładzie podałem jeden selektor, który odnosi się do wszystkich elementów th, oraz drugi styl, który odnosi się jedynie do tych elementów th, które są w obrębie elementu tr jedynym rodzajem dziecka. Efekt zastosowania tych stylów widać na rysunku 11.4.

Rysunek 11.4. Dodanie stylów odnoszących się do rzędów z elementami th 234

ROZDZIAŁ 11. „ ELEMENTY TABEL

Jest to całkowicie sprawne podejście, ale brakuje w nim elastyczności. Gdybym w rzędach tabeli zamieścił dodatkowe elementy th, drugi selektor stałby się nieaktywny, a sam bym naprawdę nie chciał majstrować przy selektorach przy każdej modyfikacji tabeli. Do rozwiązywania tego rodzaju problemów w elastyczny sposób służą elementy thead, tbody i tfoot. Umożliwiają one ustrukturyzowanie tabeli, czego główną korzyścią jest ułatwienie pracy z poszczególnymi fragmentami owej tabeli, zwłaszcza kiedy w grę wchodzą selektory CSS.

Wskazywanie nagłówków i części głównej tabeli Element tbody wskazuje zbiór rzędów składających się na część główną tabeli. Pozostałe części to rzędy nagłówków i stopek, które wkrótce omówię, a które wskazuje się elementami thead i tfoot. W tabeli 11.6 znajduje się opis elementu tbody. Tabela 11.6. Element tbody Element

tbody

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element table

Atrybuty lokalne

Brak

Zawartość

Dowolna liczba elementów tr (choć żaden nie jest wymagany)

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty align, char, charoff i valign wyszły z użycia

Domyślny styl prezentacji

thead { display: table-header-group; vertical-align: middle; border-color: inherit; }

Nawiasem mówiąc, większość przeglądarek automatycznie wstawia element tbody w kod, kiedy przetwarzają element table, nawet jeżeli w dokumencie żadnego tbody nie ma. Oznacza to, że selektory CSS zdefiniowane przy założeniu, że tabela zachowa wejściową formę przy parsowaniu, mogą nie zadziałać. Przykładowo, w takiej sytuacji selektor table > tr nie zadziała, ponieważ pomiędzy elementami table i tr znajdzie się wstawiony przez przeglądarkę tbody. Aby zaradzić temu problemowi, musisz podawać selektory w rodzaju table > tbody > tr, table tr (bez znaku >) albo po prostu tbody > tr. Element thead określa jeden lub więcej rzędów, które opisują kolumny elementu table. Opis elementu thead znajduje się w tabeli 11.7. Tabela 11.7. Element thead Element

thead

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element table

Atrybuty lokalne

Brak

Zawartość

Dowolna liczba elementów tr (choć żaden nie jest wymagany)

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty align, char, charoff i valign wyszły z użycia

Domyślny styl prezentacji

thead { display: table-header-group; vertical-align: middle; border-color: inherit; }

235

ROZDZIAŁ 11. „ ELEMENTY TABEL

Kiedy element thead nie występuje w kodzie, przeglądarka zakłada, że wszystkie elementy tr należą do części głównej tabeli. W listingu 11.5 zamieściłem w przykładowej tabeli elementy thead i tbody, a także dodałem bardziej elastyczne selektory CSS, których można dzięki nim używać. Listing 11.5. Zamieszczone w tabeli elementy thead i tbody

Przykład

Pozycja	Nazwa	Kolor	Rozmiar
Ulubiony:	Jabłko	Zielony	Średni
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży
Trzeci ulubiony:	Owoc granatowca	Dość zielonkawo-czerwonawy	Od średniego po duży

Nie wygląda to na szczególnie istotną zmianę, ale ustrukturyzowana w ten sposób tabela znacznie ułatwia pracę z różnymi rodzajami komórek. Co więcej, zmniejsza to ryzyko, że tabela będzie się nieprawidłowo wyświetlać w przypadku wprowadzenia jakiejś modyfikacji stylistycznej.

Stopka Element tfoot wskazuje blok rzędów składających się na stopkę tabeli. W tabeli 11.8 znajduje się opis tego elementu. W listingu 11.6 widać, jak można wykorzystać element tfoot do utworzenia stopki elementu table. W wersjach HTML sprzed HTML5 element tfoot musiał się znajdować przed elementem tbody (bądź pierwszym elementem tr, jeżeli element tbody był nieobecny). W HTML5 element tfooter możesz zamieścić po elemencie tbody lub ostatnim elemencie tr, co jest bardziej spójne z tym, jak przeglądarki

236

ROZDZIAŁ 11. „ ELEMENTY TABEL

Tabela 11.8. Element tfoot Element

tfoot

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element table

Atrybuty lokalne

Brak

Zawartość

Dowolna liczba elementów tr (choć żaden nie jest wymagany)

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Element tfoot można teraz umieszczać przed elementami tbody i tr lub po nich. W HTML 4 element tfoot mógł się znajdować wyłącznie przed nimi. Atrybuty align, char, charoff i valign wyszły z użycia.

Domyślny styl prezentacji

tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }

wyświetlają element table. W listingu 11.6 element tfoot zamieściłem przed tbody, choć nie jest to jedyne prawidłowe położenie. Wydaje mi się jednak, że zamieszczanie go przed tbody jest bardziej użyteczne przy automatycznym generowaniu kodu HTML z szablonów, a po tbody przy pisaniu kodu ręcznie. Listing 11.6. Zastosowanie elementu tfoot

Przykład











237

ROZDZIAŁ 11. „ ELEMENTY TABEL

Pozycja	Nazwa	Kolor	Rozmiar
Pozycja	Nazwa	Kolor	Rozmiar
Ulubiony:	Jabłko	Zielony	Średni
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży
Trzeci ulubiony:	Owoc granatowca	Dość zielonkawo-czerwonawy	Od średniego po duży

W stopce zamieściłem kopię rzędów z nagłówka. W dalszej części rozdziału powrócę jeszcze do stopki i ją rozbuduję. Dodałem też do jednego ze stylów drugi selektor, żeby obstylowanie elementów thead i tfoot było jednakowe. Stopkę widać na rysunku 11.5.

Rysunek 11.5. Zamieszczona w tabeli stopka

Nieregularne tabele Większość tabel to proste siatki, w których na jedną pozycję przypada jedna komórka. Bardziej skomplikowane dane niekiedy jednak wymagają tworzenia nieregularnych tabel, których komórki rozciągnięte są na kilka rzędów i kolumn. Takie tabele tworzy się przy użyciu atrybutów colspan i rowspan elementów td i th. W listingu 11.7 widnieje przykład wykorzystania tych atrybutów w tworzeniu nieregularnej tabeli. Listing 11.7. Nieregularna tabela

Przykład





238

ROZDZIAŁ 11. „ ELEMENTY TABEL

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży	450
Trzeci ulubiony:	Owoc granatowca	Granaty i wiśnie występują w różnych kolorach i kształtach.		203
Czwarte ulubione:	Wiśnia			75
	Ananas	Brązowy	Bardzo duży
© 2011 Adam Freeman — Instytut Analizy Owoców

Atrybutu rowspan używa się, żeby rozciągnąć komórkę na więcej rzędów. Przypisana temu atrybutowi wartość określa liczbę rzędów obejmowanych przez daną komórkę. Atrybutu colspan używa się z kolei, żeby rozciągnąć komórkę na więcej kolumn. „ Wskazówka Wartości nadawane atrybutom rowspan i colspan muszą być liczbami całkowitymi. Niektóre przeglądarki wprawdzie uznają, że wartość 100% oznacza wszystkie rzędy i kolumny tabeli, ale nie jest to część standardu HTML5 i ten rodzaj obsługi nie jest powszechny.

W dokumencie zamieściłem kilka dodatkowych stylów, aby wyróżnić komórki rozciągające się na wiele rzędów lub kolumn (rysunek 11.6). Komórki te oznaczone są grubymi obwódkami. Atrybuty rowspan i colspan definiuje się w komórce znajdującej się w lewym górnym rogu fragmentu siatki, który chce się scalić. Jednocześnie należy usunąć te elementy td lub tr, które w innym wypadku byłyby w siatce obecne. Rozważmy przykład prostej tabeli, który widnieje w listingu 11.8.

239

ROZDZIAŁ 11. „ ELEMENTY TABEL

Rysunek 11.6. Komórki rozciągnięte na wiele rzędów i kolumn Listing 11.8. Prosta tabela

Przykład

1	2	3
4	5	6
7	8	9

Przedstawiona w tym przykładzie tabela jest regularną siatką 3×3 (rysunek 11.7). Jeżeli chcesz, żeby jedna komórka z kolumny środkowej rozciągała się na wszystkie trzy rzędy, to musisz nadać atrybut rowspan komórce 2, która znajduje się na górnym krańcu pożądanego obszaru siatki. (Komórka ta znajduje się też na lewym jego krańcu, lecz nie ma to tutaj szczególnego znaczenia). Musisz również usunąć komórki, których obszar zostanie pokryty przez rozciągniętą komórkę — w tym przypadku są to komórki 5 i 8. Naniesione zmiany widnieją w listingu 11.9.

240

ROZDZIAŁ 11. „ ELEMENTY TABEL

Rysunek 11.7. Regularna siatka Listing 11.9. Rozciągnięcie komórki na więcej niż jeden rząd

Przykład

1	2	3
4		6
7		9

Rezultat wprowadzenia tych zmian widać na rysunku 11.8. Przeglądarka odpowiada za określenie, w jaki sposób należy zestawić pozostałe komórki z rozciągniętą komórką. „ Ostrzeżenie Uważaj, by przypadkiem nie stworzyć nachodzących na siebie komórek. Element table służy do przedstawiania danych w tabelach. Tworzenie nachodzących na siebie komórek ma sens tylko, kiedy używa się tabeli do tworzenia layoutu — a to z kolei należy robić przy użyciu funkcji table CSS (którą omówię w rozdziale 21.).

241

ROZDZIAŁ 11. „ ELEMENTY TABEL

Rysunek 11.8. Rozciągnięcie komórki na trzy rzędy

Łączenie nagłówków z komórkami Elementy td i th obsługują atrybut headers, który ułatwia czytnikom ekranowym i innym technologiom asystującym przetwarzanie tabel. Wartością atrybutu headers powinna być wartość atrybutu id jednej lub więcej komórek th. W listingu 11.10 widnieje przykład zastosowania tego atrybutu. Listing 11.10. Zastosowanie atrybutu headers

Przykład









242

ROZDZIAŁ 11. „ ELEMENTY TABEL



Globalne atrybuty id nadałem wszystkim elementom th znajdującym się w thead i tbody. Każdemu elementowi td i th w tbody nadałem atrybut headers, by powiązać komórki z nagłówkiem kolumny. W przypadku elementów td podałem również nagłówki rzędów (tj. nagłówki znajdujące się w pierwszej kolumnie po lewej).

Podpis tabeli Element caption pozwala na określenie podpisu dla elementu table. W tabeli 11.9 znajduje się opis elementu caption. Tabela 11.9. Element caption Element

caption

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element table

Atrybuty lokalne

Brak

Zawartość

Treści strukturalne (z wyjątkiem elementu table)

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybut align wyszedł z użycia

Domyślny styl prezentacji

caption { display: table-caption; text-align: center; }

W listingu 11.11 widnieje przykład zastosowania elementu caption. Listing 11.11. Zastosowanie elementu caption

Przykład

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
© 2011 Adam Freeman — Instytut Analizy Owoców

Wyniki analizy owoców w roku 2011

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży	450
Trzeci ulubiony:	Owoc granatowca	Granaty i wiśnie występują w różnych kolorach i kształtach.		203
Czwarte ulubione:	Wiśnia			75
	Ananas	Brązowy	Bardzo duży
© 2011 Adam Freeman — Instytut Analizy Owoców

Element table może zawierać tylko jeden element caption, lecz nie musi to być jego pierwsze dziecko. Niezależnie od miejsca w kodzie, w którym element ten występuje, podpis zawsze wyświetlany jest nad tabelą. Rezultat wprowadzenia podpisu (i obstylowania go) widać na rysunku 11.9.

244

ROZDZIAŁ 11. „ ELEMENTY TABEL

Rysunek 11.9. Podpis tabeli

Praca z kolumnami Praca z tabelami w HTML opiera się w pierwszej kolejności na tworzeniu rzędów. Poszczególne komórki tworzy się w obrębie elementów tr, a same tabele składają się z kolejnych rzędów. Utrudnia to stylizację kolumn tabel, zwłaszcza kiedy ma się do czynienia z nieregularnie rozmieszczonymi komórkami. Można zaradzić temu problemowi, wykorzystując elementy colgroup i col. Element colgroup określa zbiór kolumn. W tabeli 11.10 znajduje się opis tego elementu. Tabela 11.10. Element colgroup Element

colgroup

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element table

Atrybuty lokalne

span

Zawartość

Dowolna liczba elementów col, ale pod warunkiem że nie użyto atrybutu span

Znaczniki

Void, jeżeli zastosowano atrybut span; w innych przypadkach znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty width, char, charoff i valign wyszły z użycia

Domyślny styl prezentacji

colgroup { display: table-column-group; }

W listingu 11.12 widnieje przykład zastosowania elementu colgroup. Listing 11.12. Zastosowanie elementu colgroup

Przykład



Wyniki analizy owoców w roku 2011

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży	450
Trzeci ulubiony:	Owoc granatowca	Granaty i wiśnie występują w różnych kolorach i kształtach.		203
Czwarte ulubione:	Wiśnia			75
	Ananas	Brązowy	Bardzo duży
© 2011 Adam Freeman — Instytut Analizy Owoców

W powyższym przykładzie zdefiniowałem dwa elementy colgroup. Atrybut span określa, ile kolumn element colgroup obejmuje. Pierwszy colgroup w listingu obejmuje pierwsze trzy kolumny tabeli, a drugi kolejne dwie. Obydwu tym elementom nadałem globalny atrybut id. Ponadto zdefiniowałem style CSS wykorzystujące ich wartości id w charakterze selektorów. Rezultat widać na rysunku 11.10.

246

ROZDZIAŁ 11. „ ELEMENTY TABEL

Rysunek 11.10. Zastosowanie elementu colgroup Na rysunku widać kilka ważnych kwestii związanych z zastosowaniem elementu colgroup. Po pierwsze, style CSS nadawane elementom colgroup są mniej precyzyjne niż style nadawane bezpośrednio elementom tr, td i th. Można to poznać po tym, jak style przypisane elementom thead, tfoot i pierwszej kolumnie elementów th nie ulegają zmianie pod wpływem stylów nadanym elementom colgroup. Gdybym usunął wszystkie style poza tymi, które nadałem elementom colgroup, wygląd wszystkich komórek uległby stosownej modyfikacji (rysunek 11.11).

Rysunek 11.11. Usunięcie wszystkich stylów poza tymi, które nadano bezpośrednio elementom colgroup Po drugie, nieregularne komórki liczone są jako komórki kolumn, w których się zaczynają. Widać to na przykładzie trzeciego rzędu, w którym komórka obstylowana zgodnie z pierwszym elementem colgroup rozciąga się na obszar objęty drugim elementem colgroup. Wreszcie, element colgroup zawiera wszystkie komórki kolumny, włącznie z tymi, które znajdują się w elementach thead i tfoot, oraz odnosi się zarówno do elementów th, jak i td. Element colgroup jest nietypowy, ponieważ odnosi się do elementów znajdujących się poza nim. Z tego powodu nie można używać elementu colgroup jako podstawy precyzyjnych selektorów — selektor w rodzaju #colgroup1 > td nie odnosi się do żadnych elementów.

Wskazywanie pojedynczych kolumn Zamiast atrybutu span elementu colgroup możesz zastosować element col. Pozwala to na zdefiniowanie grupy kolumn oraz poszczególnych jej kolumn. W tabeli 11.11 znajduje się opis tego elementu.

247

ROZDZIAŁ 11. „ ELEMENTY TABEL

Tabela 11.11. Element col Element

col

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element colgroup

Atrybuty lokalne

span

Zawartość

Brak

Znaczniki

Void

Nowość w HTML5

Nie

Zmiany w HTML5

Atrybuty align, width, char, charoff i valign wyszły z użycia

Domyślny styl prezentacji

col { display: table-column; }

Stosowanie elementów col zapewnia większą kontrolę, gdyż umożliwia nadawanie stylów zarówno grupom kolumn, jak i pojedynczym ich kolumnom. Elementy col osadza się w elemencie colgroup, tak jak widać w listingu 11.13, przy czym każdy element col wskazuje jedną kolumnę. Listing 11.13. Zastosowanie elementu col

Przykład



Wyniki analizy owoców w roku 2011







248

ROZDZIAŁ 11. „ ELEMENTY TABEL

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży	450
Trzeci ulubiony:	Owoc granatowca	Granaty i wiśnie występują w różnych kolorach i kształtach.		203
Czwarte ulubione:	Wiśnia			75
	Ananas	Brązowy	Bardzo duży
© 2011 Adam Freeman — Instytut Analizy Owoców

Atrybutu span można użyć do utworzenia elementu col obejmującego dwie kolumny w colgroup. Kiedy atrybut ten nie jest obecny, element col wskazuje pojedynczą kolumnę. W tym przykładzie nadałem styl elementowi colgroup oraz jednemu zawartemu w nim elementowi col. Rezultat widać na rysunku 11.12.

Rysunek 11.12. Zastosowanie elementów colgroup i col do obstylowania tabeli

Nadawanie obramowania elementowi table Element table obsługuje atrybut border. Wskazuje on przeglądarce, że element table został zastosowany do przedstawienia danych tabelowych, a nie do utworzenia layoutu. Większość przeglądarek, trafiwszy na atrybut border, rozrysowuje obramowania wokół elementu table i pojedynczych komórek tabeli. W listingu 11.14 widnieje przykład zastosowania atrybutu border.

249

ROZDZIAŁ 11. „ ELEMENTY TABEL

Listing 11.14. Zastosowanie atrybutu border

Przykład



Wyniki analizy owoców w roku 2011

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży	450
Trzeci ulubiony:	Owoc granatowca	Granaty i wiśnie występują w różnych kolorach i kształtach.		203
Czwarte ulubione:	Wiśnia			75
	Ananas	Brązowy	Bardzo duży
© 2011 Adam Freeman — Instytut Analizy Owoców

250

ROZDZIAŁ 11. „ ELEMENTY TABEL

Atrybut border musi mieć przypisaną wartość 1 lub być pustym ciągiem (""). Nie określa on wyglądu obramowania — do tego służy CSS. Sposób, w jaki Google Chrome przetwarza atrybut border, widać na rysunku 11.13. Zauważ, że usunąłem w tym przykładzie element style, by ukazać rezultat zastosowania atrybutu.

Rysunek 11.13. Efekt podania atrybutu border w elemencie table Domyślne obramowanie nie jest zbyt estetyczne, wobec czego atrybutu border używa się zwykle w połączeniu z CSS. „ Wskazówka Nie musisz podawać w elemencie table atrybutu border, żeby móc zdefiniować obramowanie w CSS. Jeżeli jednak tego atrybutu nie podasz, przeglądarka będzie mogła założyć, że używasz tabeli do tworzenia layoutu i wyświetli ją w nieprzewidziany sposób. W chwili, kiedy to piszę, popularne przeglądarki nie przywiązują większej wagi do atrybutu border (poza tym, że traktują go jako polecenie, by wyświetlić domyślny styl obramowania), lecz z czasem może się to zmienić.

Pomimo że atrybut border sprawia, że przeglądarka nakłada obramowanie zarówno na tabelę, jak i na każdą jej komórkę, i tak musisz zdefiniować selektory CSS tak, by odnosiły się do konkretnych elementów, kiedy chcesz zmienić ich styl prezentacji. Możliwości tworzenia selektorów CSS są ogromne: możesz wystylizować zewnętrzne obramowanie tabeli, wskazując element table; wygląd nagłówka, części głównej i stopki elementami thead, tbody i tfoot; kolumny elementami colspan i col; pojedyncze komórki elementami th i td. W ostateczności możesz nawet zdefiniować elementy docelowe, używając do tego globalnych atrybutów id i class.

Podsumowanie W tym rozdziale przedstawiłem Ci obsługę tabel w HTML5. Najważniejszą zmianą, która pojawiła się w HTML5, jest to, że nie można już używać tabel do tworzenia layoutów — do tego służy obsługa tabel CSS, którą omówię w rozdziale 21. Pomijając jednak to ograniczenie, tabele są niezwykle elastyczne, łatwe w stylizacji i przyjemne w obsłudze.

251

ROZDZIAŁ 11. „ ELEMENTY TABEL

252

ROZDZIAŁ 12

Formularze

Formularze są mechanizmem HTML służącym do pobierania danych od użytkownika. Są one niesłychanie istotnym elementem aplikacji internetowych, lecz mimo to przez wiele lat funkcjonalność formularzy definiowana przez HTML nie nadążała za sposobami, w jakie rzeczywiście się ich używało. W HTML5 cały system formularzy został zreformowany i usprawniony, dzięki czemu standard jest już dostosowany do rzeczywistych praktyk. W tym rozdziale wstępnie scharakteryzuję formularze HTML. Zacznę od utworzenia bardzo prostego formularza, a następnie rozbuduję go tak, by zademonstrować, jak można konfigurować i kontrolować sposób, w jaki formularze działają. Przedstawię też skrypt Node.js, którego będziesz mógł używać do testowania swoich formularzy i sprawdzania danych przesyłanych z przeglądarki na serwer. W następnym rozdziale omówię zaawansowane funkcje formularzy, w tym m.in. zmiany, które pojawiły się w HTML5, a przyciągnęły najwięcej uwagi — nowe sposoby pobierania określonych typów danych od użytkownika oraz możliwość sprawdzania poprawności danych w przeglądarce. Są to istotne usprawnienia, aczkolwiek warto też zwrócić uwagę na wiele innych zmian. Rozdział ten i następny warto bardzo uważnie przeczytać. W chwili, kiedy piszę te słowa, obsługa formularzy HTML5 w popularnych przeglądarkach jest sprawna, lecz nie doskonała. Przed zdecydowaniem się na użycie poszczególnych funkcji warto wobec tego sprawdzać, jak powszechna jest ich obsługa. W tabeli 12.1 znajduje się streszczenie całego rozdziału. Tabela 12.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Utworzenie podstawowego formularza.

Użyj elementów form, input i button.

12.1

Określenie adresu URL, pod jaki dane z formularza mają być przesłane.

Użyj atrybutu action elementu form (lub atrybutu formaction elementu button).

12.3 (i 12.15)

Określenie sposobu, w jaki dane z formularza mają być zakodowane przy przesłaniu na serwer.

Użyj atrybutu enctype elementu form (lub atrybutu formenctype elementu button).

12.4 (i 12.15)

Określenie funkcji autouzupełniania.

Użyj atrybutu autocomplete w elemencie form lub input.

12.5, 12.6

Wskazanie, gdzie ma być wyświetlona odpowiedź serwera.

Użyj atrybutu target w elemencie form (lub atrybutu formtarget w elemencie button).

12.7

Określenie nazwy formularza.

Użyj atrybutu name w elemencie form.

12.8

Nadanie etykiety elementowi input.

Użyj elementu label.

12.9

ROZDZIAŁ 12. „ FORMULARZE

Tabela 12.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Automatyczne uaktywnienie elementu input przy wczytaniu formularza.

Użyj atrybutu autofocus w elemencie input.

12.10

Dezaktywacja określonego elementu input.

Użyj atrybutu disabled w elemencie input.

12.11

Zgrupowanie elementów input.

Użyj elementu fieldset.

12.12

Dodanie opisu do elementu fieldset.

Użyj elementu legend.

12.13

Dezaktywowanie grupy elementów input.

Użyj atrybutu disabled w elemencie fieldset.

12.14

Wysłanie danych formularza elementem button.

Nadaj atrybutowi type wartość submit.

12.15

Wyczyszczenie formularza elementem button.

Nadaj atrybutowi type wartość reset.

12.16

Wykorzystanie elementu button jako kontrolki.

Nadaj atrybutowi type wartość button.

12.17

Powiązanie elementu spoza formularza z elementem form.

Użyj atrybutu form.

12.18

Podstawowy formularz Do utworzenia podstawowego formularza potrzeba trzech elementów: form, input i button. W listingu 12.1 widnieje dokument HTML z prostym formularzem. Listing 12.1. Prosty formularz HTML

Przykład





Zagłosuj



Wygląd tego formularza w przeglądarce widać na rysunku 12.1.

Rysunek 12.1. Podstawowy formularz w przeglądarce

254

ROZDZIAŁ 12. „ FORMULARZE

Powyższy formularz jest tak prosty, że nie ma z niego większego pożytku. Zapoznawszy się jednak z trzema podstawowymi elementami, możesz zacząć rozbudowywać formularz, aby uczynić go bardziej znaczącym i użytecznym.

Definiowanie formularza Element form wskazuje formularz w obrębie dokumentu HTML. Opis tego elementu znajduje się w tabeli 12.2. Tabela 12.2. Element form Element

form

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne; nie może być jednak potomkiem innego elementu form

Atrybuty lokalne

action, method, enctype, name, accept-charset, novalidate, target, autocomplete

Zawartość

Treść strukturalna (szczególnie elementy label i input)

Znaczniki

Wymagany znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 pojawiły się atrybuty novalidate i autocomplete

Domyślny styl prezentacji

form { display: block; margin-top: 0em; }

W dalszej części rozdziału omówię wykorzystanie atrybutów elementu form do konfiguracji formularzy. Tymczasem wystarczy wiedzieć, że element form sygnalizuje przeglądarce, że ma do czynienia z formularzem HTML. Drugi istotny element to input, który umożliwia pobieranie danych od użytkownika. Na rysunku 12.1 widać, że element input wyświetlony jest w przeglądarce jako proste pole tekstowe, w którym użytkownik może coś napisać. Jest to najbardziej podstawowa forma elementu input i — jak się przekonasz — istnieje wiele możliwości pobierania danych od użytkownika (przy czym niektóre z co ciekawszych opcji pojawiły się w HTML5). Omówię je szerzej w rozdziale 13. Opis elementu input znajduje się w tabeli 12.3. Tabela 12.3. Element input Element

input

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

name, disabled, form, type oraz inne atrybuty odnoszące się do wartości atrybutu type

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Nie, ale pojawiły się nowe typy danych wejściowych, do których uzyskuje się dostęp przy użyciu atrybutu type. (Więcej na ten temat przeczytasz w rozdziale 13.).

Zmiany w HTML5

W HTML5 pojawiły się nowe wartości atrybutu type, a także kilka nowych atrybutów, których używa się w połączeniu z określonymi wartościami type

Domyślny styl prezentacji

Brak. Wygląd tego elementu określa się atrybutem type.

255

ROZDZIAŁ 12. „ FORMULARZE

Istnieje 29 atrybutów, które można nadać elementowi input, w zależności od wartości określonej dla atrybutu type. Atrybuty te przedstawię i opiszę ich funkcje w ramach omówienia różnych sposobów pobierania danych od użytkowników w rozdziale 13. „ Wskazówka Dane od użytkownika możesz też pobierać przy użyciu elementów innych niż input. Przedstawię je i omówię w rozdziale 14.

Ostatni podstawowy element to button. Konieczne jest zapewnienie użytkownikowi jakiegoś sposobu wskazania przeglądarce, że podał już wszystkie dane i że można je przesłać serwerowi. Najczęściej robi się to przy użyciu elementu button (choć — jak dowiesz się w rozdziale 13. — można skorzystać z jeszcze innego mechanizmu). Opis tego elementu znajduje się w tabeli 12.4. Tabela 12.4. Element button Element

button

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

name, disabled, form, type, value, autofocus oraz inne atrybuty odnoszące się do wartości atrybutu type

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Pojawiły się nowe atrybuty, których używa się w połączeniu z określonymi wartościami type. (Szczegóły znajdziesz w punkcie „Element button”).

Domyślny styl prezentacji

Brak

Element button jest wielofunkcyjny, a możliwe sposoby jego wykorzystania omówię w dalszej części rozdziału, w punkcie „Element button”. Element button, zamieszczony w elemencie form i pozbawiony atrybutów, poleca przeglądarce, by przekazała serwerowi dane pobrane od użytkownika.

Oglądanie danych z formularza Potrzebny Ci jest serwer, na który przeglądarka będzie wysyłać dane. W związku z tym napisałem prosty skrypt Node.js, który generuje stronę HTML zawierającą dane pobrane przez formularz od użytkownika. W rozdziale 2. znajdziesz omówienie konfiguracji Node.js. W listingu 12.2 widnieje skrypt, z którego będziemy korzystać. Jak wspomniałem w rozdziale 2., nie będę się zagłębiał w szczegóły dotyczące skryptów wykonywanych po stronie serwera, ale ponieważ Node.js oparty jest na JavaScript, to możesz się bez trudności zorientować w działaniu tego skryptu, wspomagając się opisami języka JavaScript z rozdziału 5. i dokumentacją dostępną pod adresem http://nodejs.org. Listing 12.2. Skrypt formecho.js var http = require('http'); var querystring = require('querystring'); http.createServer(function (req, res) { switch(req.url) { case '/form': if (req.method == 'POST') { console.log("[200] " + req.method + " to " + req.url);

256

ROZDZIAŁ 12. „ FORMULARZE

var fullBody = ''; req.on('data', function(chunk) { fullBody += chunk.toString(); }); req.on('end', function() { res.writeHead(200, "OK", {'Content-Type': 'text/html'}); res.write('Dane'); res.write(''); res.write('Dane z formularza'); res.write(''); var dBody = querystring.parse(fullBody); for (var prop in dBody) { res.write(""); } res.write('

Nazwa	Wartość
" + prop + "	" + dBody[prop] + "

'); res.end(); }); } else { console.log("[405] " + req.method + " to " + req.url); res.writeHead(405, "Metoda nie jest obsługiwana", {'Content-Type': 'text/html'}); res.end('405 - Metoda nie jest obsługiwana' + 'Metoda nie jest obsługiwana.'); } break; default: res.writeHead(404, "Nie znaleziono", {'Content-Type': 'text/html'}); res.end('404 — Nie znaleziono' + 'Nie znaleziono.'); console.log("[404] " + req.method + " to " + req.url); }; }).listen(8080);

Powyższy skrypt pobiera dane wysłane z przeglądarki i zwraca prosty dokument HTML, który wyświetla te dane w tabeli HTML. (Element table omówiłem w rozdziale 11.). Skrypt ten nasłuchuje port 8080 i obsługuje jedynie formularze wysłane z przeglądarki przy użyciu metody HTTP POST pod URL /form. Znaczenie portu 8080 i URL /form zrozumiesz, kiedy w dalszej części tego rozdziału przyjrzysz się atrybutom obsługiwanym przez element form. Omawiany skrypt zapisałem w pliku formecho.js. Skrypt uruchomiłem, wpisując w wierszu poleceń serwera titan następujące polecenie: bin\node.exe formecho.js

Titan używa Windows Server 2008 R2, więc konkretne polecenie uruchomienia Node.js może być inne, jeżeli korzystasz z innego systemu operacyjnego. Na rysunku 12.2 widać dane wyjściowe wyświetlane w przeglądarce po wpisaniu Jablka w polu tekstowym przykładowego formularza i naciśnięciu przycisku Zagłosuj. Dane przedstawiają tylko jedną pozycję, ponieważ w przykładowym formularzu znajduje się tylko jeden element input. Wartość podana w kolumnie Nazwa to fave, ponieważ taką właśnie wartość przypisałem atrybutowi name elementu input. Wartość w kolumnie Wartosc to Jablka, ponieważ to właśnie wpisałem w polu tekstowym przed naciśnięciem przycisku Zagłosuj. Przy tworzeniu coraz bardziej złożonych formularzy będę odtąd pokazywał dane wyjściowe w tabelach tworzonych skryptem Node.js.

257

ROZDZIAŁ 12. „ FORMULARZE

Rysunek 12.2. Oglądanie wysłanych przez przeglądarkę danych z formularza przy użyciu Node.js

Konfiguracja formularza Utworzyliśmy już dokument HTML z podstawowym formularzem i przy użyciu Node.js sprawdziliśmy dane wysłane na serwer. Przedstawię Ci teraz podstawowe opcje konfiguracji formularza i jego zawartości.

Konfiguracja atrybutu action formularza Atrybut action określa, gdzie przeglądarka wysyła pobrane od użytkownika dane po zatwierdzeniu formularza. Chciałem, żeby dane przesłano mojemu skryptowi Node.js, czyli żeby formularz wysłał dane pod adres URL /form i port 8080 mojego serwera titan. Wyraziłem to już w formularzu w listingu 12.1: ...

...

Jeżeli nie określisz atrybutu action w elemencie form, to przeglądarka wyśle dane formularza pod ten sam URL, z którego wczytano dokument HTML. Nie jest to tak bezużyteczne zachowanie, jak mogłoby się wydawać — polega na nim kilka popularnych frameworków służących do produkcji aplikacji internetowych. Jeżeli podasz względny adres URL, podana wartość zostanie dodana do adresu URL bieżącej strony. Jeżeli natomiast korzystasz z opisanego w rozdziale 7. elementu base, to zostanie dodana do wartości atrybutu href tego elementu. W listingu 12.3 widać przykład wykorzystania elementu base do określenia docelowego adresu przesyłu danych z formularza. Listing 12.3. Zastosowanie elementu base do określenia docelowego adresu dla danych z formularza

Przykład





Zagłosuj



258

ROZDZIAŁ 12. „ FORMULARZE

„ Ostrzeżenie Element base wpływa na wszystkie względne adresy URL w dokumencie HTML, a nie tylko na element form.

Konfiguracja metody HTTP Atrybut method określa, jaka metoda HTTP ma być wykorzystana w przesyłaniu danych formularza na serwer. Dopuszczalne wartości tego atrybutu to get i post, które są odpowiednikami metod HTTP GET i POST. Domyślną wartością niezdefiniowanego atrybutu method jest get, co jest dość niefortunne, ponieważ większość formularzy wykorzystuje metodę HTTP POST. W powyższym przykładzie widać, że dla elementu form podałem wartość post: ...

...

Żądania GET służą do prowadzenia zabezpieczonych interakcji. Innymi słowy, pozwalają na wielokrotne podawanie takich samych żądań bez żadnych niepożądanych efektów ubocznych. Żądania POST służą do prowadzenia niezabezpieczonych interakcji, czyli takich, w których przesłanie danych skutkuje zmianą jakiegoś stanu. Używa się ich najczęściej w aplikacjach internetowych. Powyższe konwencje określone są przez World Wide Web Consortium (W3C) i możesz się z nimi zapoznać pod adresem www.w3.org/Provider/Style/URI. Ogólnie przyjmuje się, że żądań GET powinno się używać do pobierania informacji wyłącznie do odczytu, a żądań POST we wszelkich czynnościach, które pociągają za sobą zmianę stanu aplikacji. Używanie właściwego rodzaju żądań jest istotne. Kiedy nie masz pewności, zachowaj ostrożność i używaj metody POST. „ Wskazówka Skrypt Node.js, którego używam w tym rozdziale, odpowiada tylko na żądania POST.

Konfiguracja kodowania danych Atrybut enctype określa, jak przeglądarka koduje dane i przedstawia je serwerowi. Atrybut ten obsługuje trzy wartości, które opisuję w tabeli 12.5. Tabela 12.5. Dozwolone wartości atrybutu enctype Wartość

Opis

application/x-www-form-urlencoded

Kodowanie to jest domyślnie używane, kiedy atrybut enctype nie jest zdefiniowany. Nie można używać tego kodowania do wczytywania plików na serwer.

multipart/form-data

Kodowanie to służy do wczytywania plików na serwer.

text/plain

Kodowanie to różni się w zależności od przeglądarki. Poniżej dowiesz się więcej na ten temat.

Aby zrozumieć, jak różne kodowania działają, musisz zamieścić w formularzu drugi element input, tak jak widać to w listingu 12.4. Listing 12.4. Dodanie elementu input do formularza

Przykład

259

ROZDZIAŁ 12. „ FORMULARZE





Zagłosuj



Drugi element input potrzebny jest do tego, żeby móc pobierać dwa elementy danych od użytkownika. Jak możesz się już domyślać, tworzę teraz formularz, który pozwoli użytkownikom głosować na ich ulubione owoce. Nowy element input służy do pobierania ich imion. Jak widać w powyższym listingu, wartość name tego elementu określiłem jako name. Aby zademonstrować efekt stosowania różnych sposobów kodowania formularza, zamieściłem w formularzu atrybut enctype i przypisałem mu kolejno wszystkie obsługiwane typy kodowania. W każdym przypadku podałem w polach tekstowych te same dane. W pierwszym polu tekstowym wpisywałem Jablka, a w drugim Adam Freeman (ze spacją pomiędzy imieniem i nazwiskiem).

Kodowanie application/x-www-form-urlencoded Jest to domyślne kodowanie i pasuje do każdego rodzaju formularza poza tymi, które służą do wczytywania plików na serwer. Nazwa i wartość każdego elementu danych kodowana jest tak samo jak adresy URL (i stąd bierze się człon urlencoded w nazwie). Oto jak wygląda kodowanie danych z przykładowego formularza: fave=Jablka&name=Adam+Freeman

Znaki specjalne zastępowane są odpowiednimi encjami HTML. Nazwy elementów danych i ich wartości oddzielone są znakami równości (=), a krotki danych i wartości oddzielone są od siebie etką (&).

Kodowanie multipart/form-data Kodowanie multipart/form-data wygląda inaczej. Jest bardziej rozwlekłe, a jego przetwarzanie jest bardziej skomplikowane, przez co zwykle używa się go w formularzach służących do wczytywania plików na serwer — czego nie można zrobić, wykorzystując domyślne kodowanie. Oto jak wygląda kodowanie danych z przykładowego formularza: ------WebKitFormBoundary2qgCsuH4ohZ5eObF Content-Disposition: form-data; name="fave" Apples ------WebKitFormBoundary2qgCsuH4ohZ5eObF Content-Disposition: form-data; name="name" Adam Freeman ------WebKitFormBoundary2qgCsuH4ohZ5eObF-fave=Jabłko name=Adam Freeman

Kodowanie text/plain Tego rodzaju kodowania należy używać ostrożnie. Nie ma żadnego formalnego wskazania co do tego, jaką postać mają przyjmować dane kodowane według tego schematu, a popularne przeglądarki kodują dane na

260

ROZDZIAŁ 12. „ FORMULARZE

różne sposoby. Google Chrome koduje je tak samo, jak przy schemacie application/x-www-form-urlencoded, podczas gdy Firefox koduje je następująco: fave=Apple name=Adam Freeman

Każdy element danych zamieszczany jest w jednym wierszu, a znaki specjalne nie są kodowane. Zalecam unikanie tego schematu kodowania, gdyż różnice obsługi w różnych przeglądarkach sprawiają, że jest nieprzewidywalne.

Określanie uzupełniania formularza Przeglądarki pomagają użytkownikowi, zapamiętując dane podane w formularzach i automatycznie proponując ponowne ich wykorzystanie w podobnych formularzach. W ten sposób użytkownik nie musi ciągle wprowadzać tych samych danych. Dobrym przykładem tej funkcji są dane osobowe i o adresie dostawy, które użytkownik podaje, robiąc zakupy w internecie. Każdy serwis ma własny koszyk zakupów i proces rejestracji, ale przeglądarka wykorzystuje dane podane w innych formularzach, żeby przyspieszyć całą procedurę. Przeglądarki wykorzystują różne techniki do określania, które dane należy ponownie wykorzystać, ale często polega to na sprawdzaniu atrybutu name elementów input. Automatyczne uzupełnianie formularzy jest z reguły korzystne dla użytkownika i nie ma większego znaczenia dla samej aplikacji internetowej. Niekiedy jednak możesz nie chcieć, żeby przeglądarka samodzielnie wypełniała formularz. W listingu 12.5 widać, jak zdezaktywować tę funkcję, używając atrybutu autocomplete w elemencie form. Listing 12.5. Zdezaktywowanie atrybutu autocomplete elementu form

Przykład





Zagłosuj



Atrybut autocomplete obsługuje dwie wartości: on i off. Wartość on zezwala przeglądarce na uzupełnienie formularza i jest wartością uznawaną za domyślną, kiedy nie definiujesz atrybutu. Możesz też określić to zachowanie konkretniej, nadając atrybut autocomplete poszczególnym elementom input, tak jak w listingu 12.6. Listing 12.6. Nadanie atrybutu autocomplete elementom input

Przykład

261

ROZDZIAŁ 12. „ FORMULARZE





Zagłosuj



Atrybut autocomplete elementu form określa domyślny sposób funkcjonowania elementów input w formularzu. W powyższym listingu autocomplete elementu form jest nieaktywny, lecz ten sam atrybut nadany pierwszemu elementowi input jest aktywny — jednak wyłącznie w tym jednym elemencie. Drugi element input, który nie ma zdefiniowanego atrybutu autocomplete, działa zgodnie z ogólnym ustawieniem formularza. autocomplete powinno być z reguły aktywne — użytkownicy przyzwyczajeni są do tego zachowania i w ramach transakcji internetowych zwykle muszą wypełnić kilka formularzy. Wyłączenie tej funkcji godzi w preferencje i przyzwyczajenia użytkowników. Wiem z doświadczenia, jak denerwujące jest robienie zakupów na serwisach, które nie używają tej funkcji, zwłaszcza w przypadku formularzy proszących o tak podstawowe dane, jak imię i adres. Na niektórych serwisach autouzupełnianie jest wyłączone dla pól z danymi o karcie kredytowej — to akurat ma jakiś sens, ale nawet w takich sytuacjach należy podchodzić do dezaktywacji ostrożnie i z namysłem.

Określenie docelowego miejsca wyświetlenia odpowiedzi formularza Po wysłaniu formularza przeglądarka domyślnie wyświetla odpowiedź serwera w miejscu strony, na której formularz się znajdował. Możesz zmienić to zachowanie przy użyciu atrybutu target elementu form. Działa on tak samo, jak atrybut target elementu a; wybierać możesz spośród miejsc docelowych podanych w tabeli 12.6. Tabela 12.6. Wartości atrybutu target elementu form Wartość

Opis

_blank

Przedstawia odpowiedź serwera w nowym oknie (lub zakładce).

_parent

Przedstawia odpowiedź serwera w ramce-rodzicu.

_self

Przedstawia odpowiedź serwera w bieżącym oknie (domyślna opcja).

_top

Przedstawia odpowiedź serwera na powierzchni całego okna.

Przedstawia odpowiedź serwera w podanej ramce.

Każda z tych wartości określa kontekst przeglądania. Wartości _blank i _self nie trzeba szczególnie objaśniać. Pozostałe z kolei odnoszą się do ramek, które omówię w rozdziale 15. W listingu 12.7 widać atrybut target zdefiniowany dla elementu form. Listing 12.7. Zastosowanie atrybutu target

Przykład



262

ROZDZIAŁ 12. „ FORMULARZE



Zagłosuj



W tym przykładzie wybrałem wartość _blank, która poleca przeglądarce, by odpowiedź serwera wyświetliła w nowym oknie lub zakładce. Zmianę widać na rysunku 12.3.

Rysunek 12.3. Wyświetlenie odpowiedzi serwera w nowej zakładce

Nazwa formularza Atrybut name pozwala na określenie unikalnej etykiety formularza, pozwalającej na rozróżnienie między nimi w pracy z Document Object Model (DOM). DOM przedstawię w rozdziale 25. Atrybut name różni się od atrybutu globalnego id. Atrybut id jest zazwyczaj wykorzystywany w dokumentach HTML jako selektor CSS. W listingu 12.8 widnieje element form ze zdefiniowanymi atrybutami name i id. Z myślą o prostocie obydwu atrybutom nadałem taką samą wartość. Listing 12.8. Nadanie atrybutów name i id elementowi form

Przykład





Zagłosuj



263

ROZDZIAŁ 12. „ FORMULARZE

Wartość atrybutu name nie jest przesyłana serwerowi po zatwierdzeniu formularza, wobec czego ma on znaczenie tylko w DOM i nie jest tak istotny jak atrybut name elementu input. Kiedy element input nie ma atrybutu name, dane podawane przez użytkownika nie są przesyłane serwerowi po zatwierdzeniu formularza.

Nadawanie formularzom etykiet Mamy już formularz służący do pobierania danych od użytkownika, lecz nie jest on zbyt łatwy w użyciu. Na rysunku 12.4 widać dodany w poprzednim punkcie element input.

Rysunek 12.4. Przykładowy formularz Od razu rzuca się w oczy brak wskazówek dla użytkownika, który musiałby przejrzeć kod źródłowy dokumentu, aby zorientować się co do funkcji każdego z pól tekstowych. Temu problemowi można zaradzić, korzystając z elementu label, który pozwala na ujęcie elementów formularza w jakimś kontekście. W tabeli 12.7 znajduje się opis elementu label. Tabela 12.7. Element label Element

label

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

for, form

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 wprowadzono atrybut form. W punkcie „Praca z elementami spoza formularza” przeczytasz więcej na jego temat.

Domyślny styl prezentacji

label { cursor: default; }

W listingu 12.9 widnieje przykład opatrzenia formularza stosownymi informacjami dla użytkownika. Listing 12.9. Zastosowanie elementu label

Przykład

Owoc:

264

ROZDZIAŁ 12. „ FORMULARZE

Imię:

Zagłosuj



Każdemu z elementów input przypisałem element label. Zauważ, że elementom input nadałem atrybuty id, których wartości podałem jako wartości atrybutów for elementów label. Na tym właśnie polega łączenie etykiet z polami wejściowymi, które ułatwia czytnikom i innym technologiom asystującym przetwarzanie formularzy. Wygląd etykiet widać na rysunku 12.5.

Rysunek 12.5. Przypisane formularzom etykiety W powyższym listingu elementy input osadzone są w elementach label. Nie jest to wymóg i obydwa te elementy można podać osobno. Elementy label i input zazwyczaj definiuje się osobno przy tworzeniu złożonych formularzy. „ Uwaga Utworzyłem bardzo prosty layout, zamieszczając w formularzu elementy p. Będę to robił w większości przykładów w tym rozdziale, ponieważ dzięki temu łatwiej będzie mi zaprezentować rezultaty dodawania kolejnych elementów do dokumentu HTML. Z funkcji obsługi tabel CSS, którą opiszę w rozdziale 21., możesz skorzystać do tworzenia ładniejszych formularzy. Element p omówiłem natomiast w rozdziale 9.

Automatyczne uaktywnianie elementów input Możliwe jest określenie, który element input ma być uaktywniony przy wyświetleniu formularza w przeglądarce. Pozwala to użytkownikowi na podanie wartości w aktywnym polu od razu, bez uprzedniego zaznaczania go. Służy do tego atrybut autofocus, którego zastosowanie widać w listingu 12.10. Listing 12.10. Zastosowanie atrybutu autofocus

Przykład

Owoc:

265

ROZDZIAŁ 12. „ FORMULARZE

Imię:

Zagłosuj



Kiedy tylko strona pojawia się na ekranie, pierwszy element input zostaje uaktywniony. Na rysunku 12.6 widać, jak Google Chrome wskazuje użytkownikowi aktywny element.

Rysunek 12.6. Automatyczne uaktywnianie elementu input Atrybut autofocus można nadać tylko jednemu elementowi. Gdybyś przypisał go kilku elementom input, przeglądarka skoncentrowałaby się na ostatnim oznaczonym w ten sposób elemencie.

Dezaktywacja poszczególnych elementów input Elementy input można dezaktywować tak, by użytkownik nie mógł wprowadzać do nich danych. Nie jest to takie dziwne, jak mogłoby się wydawać. W sytuacji, kiedy chcesz przedstawić jednakowy interfejs do obsługi kilku powiązanych zadań, niektóre z elementów input mogą nie być na poszczególnych etapach potrzebne. Do uaktywniania elementów w odpowiedzi na czynności podjęte przez użytkownika możesz również wykorzystać JavaScript. Typowym przykładem takiego postępowania jest uaktywnienie serii elementów input służących do pobrania adresu, kiedy użytkownik decyduje, że chce otrzymać przesyłkę na adres inny niż adres fakturowania. (Elementy te uaktywnia się w takich sytuacjach za pośrednictwem DOM, który omówię w rozdziałach 25. – 31. Kratki zaznaczania z kolei omówię w rozdziale 13.). Elementy input dezaktywuje się, przypisując im atrybut disabled, tak jak w listingu 12.11. Listing 12.11. Zastosowanie właściwości disabled elementu input

Przykład

Owoc:

Imię:

Zagłosuj

266

ROZDZIAŁ 12. „ FORMULARZE



W powyższym przykładzie atrybut disabled przypisałem elementowi input, służącemu do pobierania imienia użytkownika. Wygląd nieaktywnego elementu input w Google Chrome widać na rysunku 12.7. Inne przeglądarki przedstawiają takie elementy podobnie.

Rysunek 12.7. Zdezaktywowany element input

Grupowanie elementów formularza Przy tworzeniu bardziej rozbudowanych formularzy grupowanie niektórych ich elementów bywa dość wygodne. Dokonać tego można przy użyciu elementu fieldset, którego opis widnieje w tabeli 12.8. Tabela 12.8. Element fieldset Element

fieldset

Typ elementu

Strukturalny

Dozwoleni rodzice

Dowolny rodzic, który może zawierać elementy strukturalne — zwykle dziecko elementu form

Atrybuty lokalne

name, form, disabled

Zawartość

Opcjonalnie element legend wraz z treścią strukturalną

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 wprowadzono atrybut form. W punkcie „Praca z elementami spoza formularza” przeczytasz więcej na jego temat.

Domyślny styl prezentacji

fieldset { display: block; margin-start: 2px; margin-end: 2px; padding-before: 0.35em; padding-start: 0.75em; padding-end: 0.75em; padding-after: 0.625em; border: 2px groove; }

W listingu 12.12 widnieje przykład zastosowania elementu fieldset. W tym przykładzie zamieściłem w kodzie dodatkowe elementy input, aby pokazać, jak w elemencie fieldset można zamieścić część elementów formularza. Listing 12.12. Zastosowanie elementu fieldset



267

ROZDZIAŁ 12. „ FORMULARZE

Przykład

Imię:

Miasto:

#1:

#2:

#3:

Zagłosuj



Pierwszym elementem fieldset zgrupowałem dwa elementy input służące do pobierania danych od użytkownika, a drugim zgrupowałem trzy elementy input, za pośrednictwem których użytkownik może zagłosować na swoje trzy ulubione owoce. Domyślny styl prezentacji elementu fieldset widać na rysunku 12.8.

Rysunek 12.8. Zastosowanie elementu fieldset do zgrupowania elementów input

Nadanie elementowi fieldset etykiety Zgrupowanym elementom input mimo wszystko brakuje wartości informacyjnej. Można temu zaradzić, dodając element legend każdemu z elementów fieldset. W tabeli 12.9 znajduje się opis elementu legend. Element legend musi być pierwszym dzieckiem elementu fieldset, tak jak widać to w listingu 12.13.

268

ROZDZIAŁ 12. „ FORMULARZE

Tabela 12.9. Element legend Element

legend

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element fieldset

Atrybuty lokalne

Brak

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Nie

Domyślny styl prezentacji

legend { display: block; padding-start: 2px; padding-end: 2px; border: none; }

Listing 12.13. Zastosowanie elementu legend

Przykład





Wprowadź swoje dane osobowe

Imię:

Miasto:

Zagłosuj na swoje trzy ulubione owoce

#1:

#2:

#3:

Zagłosuj



Wygląd elementów legend widać na rysunku 12.9.

Dezaktywowanie grup elementów input przy użyciu elementu fieldset Omówiłem wcześniej, jak dezaktywuje się pojedyncze elementy input. Możliwe jest także zdezaktywowanie wielu elementów input za jednym zamachem, nadając atrybut disabled elementowi fieldset. Wtedy wszystkie elementy input zawarte w elemencie fieldset zostają zdezaktywowane, tak jak widać w listingu 12.14. Rezultat zdezaktywowania elementów input widać na rysunku 12.10.

269

ROZDZIAŁ 12. „ FORMULARZE

Rysunek 12.9. Zastosowanie elementu legend Listing 12.14. Dezaktywacja elementów input przy użyciu elementu fieldset

Przykład





Wprowadź swoje dane osobowe

Imię:

Miasto:

Zagłosuj na swoje trzy ulubione owoce

#1:

#2:

#3:

Zagłosuj



Element button Element button jest bardziej elastyczny, niż mogłoby się na pierwszy rzut oka wydawać. Elementu button można używać na trzy różne sposoby. O tych różnych sposobach funkcjonowania decydują trzy wartości atrybutu type, które opisuję w tabeli 12.10.

270

ROZDZIAŁ 12. „ FORMULARZE

Rysunek 12.10. Dezaktywacja elementów input przy użyciu elementu fieldset Tabela 12.10. Wartości atrybutu type elementu button Wartość

Opis

submit

Wskazuje, że przycisk służy do wysłania formularza.

reset

Wskazuje, że przycisk służy do wyczyszczenia formularza.

button

Wskazuje, że przycisk nie ma konkretnego znaczenia semantycznego.

Każdą z tych wartości wraz z ich funkcjami opiszę w kolejnych punktach.

Zastosowanie elementu button do wysyłania formularzy Kiedy nadajesz atrybutowi type wartość submit, naciśnięcie przycisku skutkuje wysłaniem danych z formularza, w którym przycisk się znajduje. Jest to domyślna wartość, kiedy atrybut type nie jest zdefiniowany. Kiedy używasz przycisku w tym celu, masz dostęp do dodatkowych atrybutów, które opisuję w tabeli 12.11. Powyższe atrybuty najczęściej pozwalają na nadpisanie lub uzupełnienie konfiguracji elementu form, określając tym samym wartości atrybutów action, method, enctype i target oraz kontrolując weryfikację danych po stronie klienta. Atrybuty te pojawiły się w HTML5. W listingu 12.15 widać przykład zdefiniowania ich w elemencie button. Listing 12.15. Zastosowanie atrybutów elementu button

Przykład



271

ROZDZIAŁ 12. „ FORMULARZE

Tabela 12.11. Dodatkowe atrybuty, które są dostępne, gdy atrybut type przycisku ma wartość submit Atrybut

Opis

form

Określa formularz (lub formularze), z którym przycisk jest powiązany. Więcej na ten temat przeczytasz w punkcie „Praca z elementami spoza formularza”.

formaction

Nadpisuje wartość atrybutu action elementu form oraz określa nowy adres URL, pod który dane z formularza mają być wysłane. Szczegółowy opis atrybutu action znajduje się w punkcie „Konfiguracja atrybutu action formularza” we wcześniejszej części rozdziału.

formenctype

Nadpisuje wartość atrybutu enctype elementu form oraz określa schemat kodowania danych z formularza. Szczegółowy opis atrybutu enctype znajduje się w punkcie „Konfiguracja kodowania danych” we wcześniejszej części rozdziału.

formmethod

Nadpisuje wartość atrybutu method elementu form. Szczegółowy opis atrybutu method znajduje się w punkcie „Konfiguracja metody HTTP” we wcześniejszej części rozdziału.

formtarget

Nadpisuje wartość atrybutu target elementu form. Szczegółowy opis atrybutu target znajduje się w punkcie „Określenie docelowego miejsca wyświetlenia odpowiedzi formularza” we wcześniejszej części rozdziału.

formnovalidate

Nadpisuje działanie atrybutu novalidate elementu form, aby określić, czy dokonać weryfikacji danych po stronie klienta. O weryfikacji danych wejściowych przeczytasz w rozdziale 14.

Owoc:

Imię:

Zagłosuj



Usunąłem w tym przykładzie atrybuty action i method z elementu form, a konfiguracji dokonałem przy użyciu atrybutów formaction i formmethod elementu button.

Zastosowanie elementu button do czyszczenia formularzy Kiedy nadajesz atrybutowi type wartość reset, naciśnięcie przycisku skutkuje wyzerowaniem wszystkich pól wejściowych formularza. Kiedy elementowi przypisana jest ta wartość, nie uzyskujesz dostępu do żadnych dodatkowych atrybutów. W listingu 12.16 widnieje przykład przycisku służącego do czyszczenia formularzy. Listing 12.16. Zastosowanie elementu button do czyszczenia formularzy

Przykład

272

ROZDZIAŁ 12. „ FORMULARZE

Owoc:

Imię:

Zagłosuj Reset



Rezultat wyzerowania formularza widnieje na rysunku 12.11.

Rysunek 12.11. Wyzerowanie formularza

Zastosowanie elementu button jako elementu generycznego Kiedy nadajesz atrybutowi type wartość button, tworzysz… zwyczajny przycisk. Taki przycisk nie ma żadnego znaczenia i nic się nie dzieje po jego naciśnięciu. W listingu 12.17 widnieje przykład wprowadzenia takiego elementu button do dokumentu HTML. Listing 12.17. Zastosowanie generycznego przycisku

Przykład

Owoc:

273

ROZDZIAŁ 12. „ FORMULARZE

Imię:

Zagłosuj Reset NIE NACISKAJ



Nie wygląda to na zbyt użyteczny sposób wykorzystania tego elementu, ale w rozdziale 30. pokażę Ci, że możesz użyć JavaScript, by naciśnięcie takiego przycisku prowadziło do wykonania jakiejś czynności. Dzięki temu masz możliwość definiowania wyspecjalizowanych funkcji na swoich stronach internetowych. Zauważ, że obstylowałem tekst zawarty w przycisku button. Taki tekst możesz oznaczyć dowolnymi elementami strukturalnymi. Rezultat zastosowania takiego rodzaju obstylowania widać na rysunku 12.12.

Rysunek 12.12. Dodanie generycznego przycisku

Praca z elementami spoza formularza W HTML 4 elementy input, button i inne elementy formularzowe musiały być zawarte w elemencie form, tak jak we wszystkich przedstawionych w tym rozdziale przykładach. W HTML5 nie ma już takiego ograniczenia, a z formularzami można powiązać elementy znajdujące się w dowolnych miejscach dokumentu. Używa się do tego atrybutu form, obsługiwanego przez elementy formularzowe w rodzaju input, button i inne, które opiszę w rozdziale 14. Aby powiązać element z formularzem, który nie jest jego przodkiem, nadajesz atrybutowi form tego elementu wartość tożsamą z wartością atrybutu id danego elementu form. W listingu 12.18 widnieje tego przykład. Listing 12.18. Zastosowanie atrybutu form

Przykład

Owoc:

274

ROZDZIAŁ 12. „ FORMULARZE

Imię:

Zagłosuj Reset

W powyższym przykładzie tylko jeden z elementów input jest potomkiem elementu form. Drugi element input i obydwa elementy button znajdują się poza elementem form, ale są z nim powiązane za pośrednictwem atrybutu form.

Podsumowanie W tym rozdziale omówiłem podstawy obsługi formularzy w HTML5. Pokazałem Ci, jak utworzyć formularz elementem form i skonfigurować jego działanie. Omówiłem podstawowy element input, który pozwala na pobieranie prostych danych tekstowych od użytkownika, oraz element button, który daje użytkownikowi możliwość wysłania lub wyczyszczenia formularza (którego można też użyć jako generycznego przycisku). W HTML5 pojawiły się pewne przydatne funkcje formularzy. Elementy nagłówków omówię w następnym rozdziale, aczkolwiek same najbardziej podstawowe zachowania formularzy zostały usprawnione. Możliwość połączenia elementu z formularzem, który nie jest przodkiem tego elementu, obsługa automatycznej aktywacji elementów oraz ulepszenia elementu button — to wszystko bardzo mile widziane nowości.

275

ROZDZIAŁ 12. „ FORMULARZE

276

ROZDZIAŁ 13

Konfiguracja elementu input

W poprzednim rozdziale omówiłem podstawy obsługi elementu input — prostego pola tekstowego, w którym użytkownik może podawać dane. Problem w tym, że użytkownik może podać w takim polu jakiekolwiek dane. W niektórych sytuacjach jest to całkowicie sensowne rozwiązanie, lecz niekiedy może Ci zależeć na otrzymaniu określonego rodzaju danych. W takich przypadkach możesz skonfigurować element input tak, by pobierał dane od użytkowników na różne sposoby. Element input można skonfigurować atrybutem type, który w HTML5 obsługuje 23 różne wartości. Po wybraniu odpowiedniej wartości type uzyskujesz dostęp do dodatkowych atrybutów. Element input obsługuje w sumie 30 atrybutów, a wielu z nich można używać jedynie w połączeniu z określonymi wartościami type. W tym rozdziale omówię wszystkie z dostępnych typów i towarzyszące im atrybuty. W tabeli 13.1 znajduje się streszczenie całego rozdziału. Tabela 13.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Określenie wielkości i pojemności elementu input.

Użyj atrybutów size i maxlength.

13.1

Określenie początkowej wartości elementu input lub wskazówki co do wymaganego rodzaju danych.

Użyj atrybutów value i placeholder.

13.2

Podanie użytkownikowi sugerowanych wartości.

Użyj elementu datalist i atrybutu list elementu input.

13.3

Utworzenie elementów input przeznaczonych tylko do odczytu lub zdezaktywowanych.

Użyj atrybutów disabled i readonly.

13.4

Ukrycie znaków wpisywanych przez użytkownika.

Użyj elementu input typu password.

13.5

Tworzenie przycisków przy użyciu elementu input.

Użyj elementu input typu submit, reset lub button.

13.6

Ograniczenie rodzaju danych do wartości numerycznych.

Użyj elementu input typu number.

13.7

Ograniczenie rodzaju danych do określonego zakresu wartości numerycznych.

Użyj elementu input typu range.

13.8

Ograniczenie rodzaju danych do odpowiedzi prawda/fałsz.

Użyj elementu input typu checkbox.

13.9

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Tabela 13.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Ograniczenie rodzaju danych do określonych opcji.

Użyj elementu input typu radio.

13.10

Ograniczenie rodzaju danych do określonego formatu ciągu.

Użyj elementu input typu email, tel lub url.

13.11

Ograniczenie rodzaju danych do godzin i dat.

Użyj elementu input typu datetime, datetime-local, date, month, time lub week.

13.12

Ograniczenie rodzaju danych do kolorów.

Użyj elementu input typu color.

13.13

Ograniczenie rodzaju danych do słów kluczowych wyszukiwania.

Użyj elementu input typu search.

13.14

Utworzenie niewidocznego dla użytkownika elementu input.

Użyj elementu input typu hidden.

13.15

Utworzenie przycisku zatwierdzającego w formie obrazu.

Użyj elementu input typu image.

13.16

Wczytanie pliku na serwer.

13.17 Użyj elementu input typu file i określ kodowanie formularza multipart/form-data.

Zastosowanie elementu input do podawania danych tekstowych Kiedy atrybutowi type przypisana jest wartość text, przeglądarka wyświetla jednowierszowe pole tekstowe. To ten sam styl elementu input, który widziałeś w poprzednim rozdziale — jest on wykorzystywany, kiedy atrybut type jest pominięty. W tabeli 13.2 znajduje się wypis atrybutów dostępnych dla tego typu elementu input (poza tymi, które już przedstawiłem w poprzednim rozdziale). W kolejnych punktach opiszę atrybuty obsługiwane przez elementy input typu text. „ Wskazówka Do tworzenia wielowierszowych pól tekstowych służy element textarea, który opiszę w rozdziale 14.

Określanie rozmiaru elementu Na wielkość pola tekstowego wpływają dwa atrybuty. Atrybut maxlength określa limit znaków, które użytkownik może podać, a size określa, ile znaków wyświetlanych jest w polu. Wartości obydwu tych atrybutów muszą być wyrażane dodatnimi liczbami całkowitymi. W listingu 13.1 widać przykład ich zastosowania. Listing 13.1. Zastosowanie atrybutów maxlength i size

Przykład



278

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Tabela 13.2. Dodatkowe atrybuty typu text Nowość w HTML5

Atrybut

Opis

dirname

Określa kierunek tekstu. Więcej przeczytasz w punkcie „Określenie kierunku tekstu”.

Nie

list

Wskazuje id elementu datalist, który określa wartości elementu input. Więcej przeczytasz w punkcie „Lista danych”.

Tak

maxlength

Wskazuje maksymalną liczbę znaków, które użytkownik może podać w polu tekstowym. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.

Nie

pattern

Wskazuje wyrażenie regularne na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.

Tak

placeholder

Tworzy wskazówkę odnoszącą się do tego, jakie dane wejściowe użytkownik powinien podać. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”.

Tak

readonly

Definiuje pole tylko do odczytu, które nie może być edytowane przez użytkownika. Więcej przeczytasz w punkcie „Tworzenie pól tekstowych nieaktywnych i tylko do odczytu”.

Nie

required

Wskazuje, że użytkownik musi podać wartość na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.

Tak

size

Określa szerokość elementu wyrażoną w liczbie znaków widocznych w polu tekstowym. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.

Nie

value

Określa początkową wartość pola tekstowego. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”.

Nie

Imię:

Miasto:

Owoc:

Zagłosuj



Pierwszemu elementowi input nadałem atrybut maxlength o wartości 10. Oznacza to, że przeglądarka może dowolnie określić ilość miejsca na ekranie, jaką zajmuje pole tekstowe, ale użytkownik może podać najwyżej dziesięć znaków. Przeglądarka ignoruje wszelkie znaki, które przekraczają ten limit. Drugiemu elementowi input nadałem atrybut size, również o wartości 10. Sprawia to, że przeglądarka wyświetla pole tekstowe, które może zmieścić dziesięć znaków. Atrybut size nie określa limitu znaków, które użytkownik może podać.

279

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Trzeciemu elementowi input nadałem obydwa atrybuty, tworząc pole o określonej szerokości i z limitem znaków, które można podać. Wpływ tych atrybutów na wygląd pól i sposób podawania danych widać na rysunku 13.1.

Rysunek 13.1. Zastosowanie atrybutów maxlength i size Na rysunku 13.1 widnieje layout strony oraz dane, które zostają przekazane serwerowi po zatwierdzeniu formularza. Na potrzeby tego przykładu skorzystałem z Firefoksa, ponieważ mój ulubiony Chrome nie obsługuje atrybutu size prawidłowo. Zwróć uwagę, że wartość podana dla city składa się z większej liczby znaków, niż widać na ekranie. Wynika to z tego, że atrybut size nie ogranicza liczby znaków, które użytkownik może podać, tylko liczbę znaków, które przeglądarka może wyświetlić.

Podawanie wartości i treści zastępczych Pola tekstowe z poprzednich przykładów były puste, choć wcale nie musi tak być. Możesz użyć atrybutu value do określenia domyślnej wartości pola, a atrybutu placeholder do podania wskazówki co do rodzaju danych, które użytkownik ma podać. W listingu 13.2 widnieje przykład zastosowania tych atrybutów. Listing 13.2. Zastosowanie atrybutów value i placeholder

Przykład

Imię:

Miasto:

280

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Owoc:

Zagłosuj



Atrybutu placeholder możesz użyć, kiedy użytkownik ma podać dane, a chcesz mu wskazać, jakiego rodzaju dane mają to być. Atrybutem value możesz z kolei podać wartość domyślną — taką, którą użytkownik już wcześniej podał, albo wartość często wybieraną, która może być właściwa. Na rysunku 13.2 widnieje przykład wartości określonych tymi atrybutami.

Rysunek 13.2. Zastosowanie treści zastępczych i wartości domyślnych „ Wskazówka Po wyzerowaniu formularza przyciskiem button (który opisałem w rozdziale 12.) przeglądarka przywraca treści zastępcze i wartości domyślne.

Lista danych Atrybutowi list można nadać wartość tożsamą z wartością id elementu datalist. Element datalist służy do podawania użytkownikowi sugerowanych wartości, kiedy ma on podać dane w polu tekstowym. W tabeli 13.3 znajduje się opis tego elementu. Tabela 13.3. Element datalist Element

datalist

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

Brak

Zawartość

Elementy option i treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

281

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Element datalist, który pojawił się w HTML5, służy do określenia zbioru wartości mających pomóc użytkownikowi w podaniu wymaganych danych. Różne rodzaje elementów input wykorzystują element datalist na różne sposoby. W przypadku elementów typu text zdefiniowane wartości wyświetlane są jako opcje autouzupełnienia. Sugerowane wartości podaje się przy użyciu elementu option, który opisuję w tabeli 13.4. Tabela 13.4. Element option Element

option

Typ elementu

Nie dotyczy

Dozwoleni rodzice

datalist, select, optgroup

Atrybuty lokalne

disabled, selected, label, value

Zawartość

Treść tekstowa

Znaczniki

Samotny znacznik albo otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

W listingu 13.3 widnieje przykład użycia elementów datalist i option do określenia sugerowanych wartości pola danych. Listing 13.3. Zastosowanie elementu datalist

Przykład

Imię:

Miasto:

Owoc:

Zagłosuj



282

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Orzeźwiające pomarańcze



„ Wskazówka Do elementu option nawiążę jeszcze w rozdziale 14. przy omówieniu elementów select i optgroup.

Każdy element option osadzony w elemencie datalist określa jedną sugerowaną wartość danych. Atrybut value określa wartość, która zostanie zamieszczona w elemencie input, gdy użytkownik wybierze daną opcję (określoną elementem option). Nazwę opcji możesz określić atrybutem label lub zapisać ją pomiędzy znacznikami elementu option. Jak widzisz, tak w listingu 13.3 zrobiłem z elementami Jablka i Pomarancze. Na rysunku 13.3 widać, jak przeglądarka wyświetla elementy option osadzone w elemencie datalist.

Rysunek 13.3. Użycie listy danych z elementem input typu text W pracy z elementami input typu text postępuj ostrożnie przy określaniu wartości atrybutu label innych niż właściwa wartość opcji. Dla użytkownika może nie być jasne, dlaczego kliknięcie opcji Wspaniałe jabłka skutkuje wprowadzeniem słowa Jablka w polu tekstowym. Niektóre przeglądarki, takie jak Opera, nieco inaczej przedstawiają listy opcji, kiedy wartości label i value elementu różnią się od siebie (rysunek 13.4).

Rysunek 13.4. Opera wyświetla odmienne wartości atrybutów value i label Takie rozwiązanie jest nieco lepsze, choć może być dezorientujące. Poza tym zauważ, że choć wartość atrybutu label jest wykrywana, to przeglądarka ignoruje właściwą treść elementu option.

283

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Tworzenie pól tekstowych nieaktywnych i tylko do odczytu Atrybuty readonly i disabled służą do tworzenia pól tekstowych, których użytkownik nie może edytować, przy czym pola te różnią się od siebie wyglądem. W listingu 13.4 widać przykład zastosowania obydwu tych atrybutów. Listing 13.4. Zastosowanie właściwości readonly i disabled

Przykład

Imię:

Miasto:

Owoc:

Zagłosuj



Na rysunku 13.5 widać, jak te atrybuty obsługiwane są w przeglądarce.

Rysunek 13.5. Zastosowanie atrybutów disabled i readonly Pierwszemu elementowi input w listingu 13.4 przypisałem atrybut disabled — jego pole tekstowe jest wobec tego przytłumione, a użytkownik nie może edytować jego zawartości. Drugiemu elementowi input

284

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

przypisałem atrybut readonly, co uniemożliwia użytkownikowi edycję tekstu, ale nie zmienia wyglądu pola tekstowego. Przy wysyłaniu formularza na serwer przesyłane są wartości określone dla atrybutu value (rysunek 13.6).

Rysunek 13.6. Dane pobrane z elementów input opatrzonych atrybutami disabled i readonly Zauważ, że dane podane dla elementów input opatrzonych atrybutem disabled nie są przesyłane na serwer. Jeżeli chcesz skorzystać z tego atrybutu i jednocześnie musisz zapewnić, by na serwer została przesłana wartość danego elementu input, rozważ dodanie elementu input typu hidden (o czym przeczytasz w punkcie „Zastosowanie elementu input do tworzenia ukrytych obiektów danych” w dalszej części tego rozdziału). Sugeruję, byś używał atrybutu readonly ostrożnie. Choć użytkownik może przejrzeć dane takiego elementu, to nic nie wskazuje, że pola nie można edytować; przeglądarka zwyczajnie ignoruje wpisywane dane, co może być dezorientujące.

Określenie kierunku tekstu Atrybut dirname pozwala na określenie nazwy danej przesyłanej na serwer oraz zawiera informację o kierunku zapisu podanego przez użytkownika tekstu. Kiedy piszę te słowa, żadna z popularnych przeglądarek nie obsługuje tego atrybutu.

Zastosowanie elementu input do pobierania haseł Nadanie wartości password atrybutowi type tworzy element input służący do pobierania haseł. Znaki wpisywane przez użytkownika zastępowane są na ekranie znakami maskującymi, np. asteriskami ( *). W tabeli 13.5 znajduje się lista dodatkowych atrybutów, których można używać, gdy atrybut type elementu ma wartość password. Wielu z nich można też używać z typem text — działają tak samo. W listingu 13.5 widnieje element typu password. Listing 13.5. Zastosowanie typu password

Przykład





285

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Tabela 13.5. Dodatkowe atrybuty dostępne przy elemencie input typu password Nowość w HTML5

Atrybut

Opis

maxlength

Wskazuje maksymalną liczbę znaków, które użytkownik może podać w polu hasła. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.

Nie

pattern

Wskazuje wyrażenie regularne na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.

Tak

placeholder

Tworzy wskazówkę odnoszącą się do tego, jakie dane wejściowe użytkownik powinien podać. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”.

Tak

readonly

Definiuje pole hasła tylko do odczytu, które nie może być edytowane przez użytkownika. Więcej przeczytasz w punkcie „Tworzenie pól tekstowych nieaktywnych i tylko do odczytu”.

Nie

required

Wskazuje, że użytkownik musi podać dla elementu wartość na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.

Tak

size

Określa szerokość elementu wyrażoną w liczbie znaków widocznych w polu hasła. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.

Nie

value

Określa pierwotną wartość pola hasła.

Nie

Imię:

Hasło:

Owoc:

Zagłosuj



W listingu 13.5 zdefiniowałem atrybut placeholder, który ma wskazać użytkownikowi, jakiego hasła się od niego oczekuje. Kiedy użytkownik zaczyna pisać, przeglądarka usuwa treść zastępczą, a każdy wpisany znak zastępuje kropką (choć znaki maskujące różnią się w zależności od przeglądarki). Rezultat widać na rysunku 13.7. Rzecz jasna, tylko podany przez użytkownika tekst jest maskowany na ekranie. Po wysłaniu formularza serwer otrzymuje hasło w formie tekstu jawnego, tak jak widać na rysunku 13.8, przedstawiającym odpowiedź skryptu Node.js. „ Ostrzeżenie Typ password elementu input nie zabezpiecza przekazywanego na serwer hasła. Podana przez użytkownika wartość przesyłana jest w postaci tekstu jawnego. Jeżeli bezpieczeństwo jest istotnym aspektem działania Twojej strony lub aplikacji (a powinno być), to powinieneś rozważyć wykorzystanie SSL/HTTPS do szyfrowania komunikacji pomiędzy przeglądarką a serwerem.

286

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Rysunek 13.7. Zastosowanie elementu input typu password

Rysunek 13.8. Dane z formularza zawierającego pole hasła

Zastosowanie elementu input do tworzenia przycisków Typy submit, reset i button elementu input tworzą przyciski bardzo podobne do tych, które powstają przy użyciu opisanego w rozdziale 12. elementu button. W tabeli 13.6 znajduje się omówienie tych typów. Tabela 13.6. Typy elementu input, które tworzą przyciski Typ

Opis

Dodatkowe atrybuty

submit

Tworzy przycisk, który wysyła formularz.

formaction, formenctype, formmethod, formtarget, formnovalidate

reset

Tworzy przycisk, który oczyszcza formularz.

Brak

button

Tworzy przycisk, który nie wykonuje żadnej czynności.

Brak

Dodatkowe atrybuty, których można używać z elementem input typu submit, są takie same, jak w przypadku elementu button. Opisy i przykłady zastosowania tych atrybutów znajdziesz w rozdziale 12. Typy reset i button nie obsługują żadnych dodatkowych atrybutów.

287

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Etykieta wyświetlana na przycisku utworzonym tego typu elementami input opiera się na wartości atrybutu value, tak jak widać w listingu 13.6. Listing 13.6. Zastosowanie elementu input do tworzenia przycisków

Przykład

Imię:

Hasło:

Owoc:

Na rysunku 13.9 widać, jak te przyciski wyglądają w przeglądarce. Jak widzisz, wyglądają tak samo, jak przyciski utworzone elementem button.

Rysunek 13.9. Zastosowanie elementów input do tworzenia przycisków

288

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Tworzenie przycisków przy użyciu elementu input a button różni się tym, że w elemencie button można zamieścić sformatowany tekst (czego przykład znajdziesz w rozdziale 12.). Niektóre starsze przeglądarki, a w szczególności IE6, potrafią dość dziwnie parsować elementy button, przez co zwykło się raczej używać elementów input, które z reguły interpretowane są spójniej.

Zastosowanie elementu input do ograniczenia rodzaju danych wejściowych W HTML5 pojawiły się nowe wartości atrybutu type elementu input, które pozwalają na bardziej precyzyjne określenie rodzaju danych wymaganych od użytkownika. W kolejnych punktach przedstawię kolejno wszystkie nowe wartości type oraz przykłady ich zastosowania. W tabeli 13.7 znajduje się krótkie omówienie tych wartości. Tabela 13.7. Wartości atrybutu type ograniczające rodzaj danych Nowość w HTML5

Typ

Opis

checkbox

Ogranicza dopuszczalne dane wejściowe do kratki zaznaczania „prawda/fałsz”.

Nie

color

Ogranicza dopuszczalne dane wejściowe do kolorów.

Tak

date

Ogranicza dopuszczalne dane wejściowe do dat.

Tak

datetime

Ogranicza dopuszczalne dane wejściowe do dat globalnych i godziny według strefy czasowej.

Tak

datetime-local

Ogranicza dopuszczalne dane wejściowe do dat globalnych i godziny niezależnie od strefy czasowej.

Tak

email

Ogranicza dopuszczalne dane wejściowe do prawidłowo sformatowanych adresów e-mailowych.

Tak

month

Ogranicza dopuszczalne dane wejściowe do roku i miesiąca.

Tak

number

Ogranicza dopuszczalne dane wejściowe do liczby całkowitej lub zmiennoprzecinkowej.

Tak

radiobutton

Ogranicza dopuszczalne dane wejściowe do określonego zestawu opcji.

Nie

range

Ogranicza dopuszczalne dane wejściowe do określonego zakresu.

Tak

tel

Ogranicza dopuszczalne dane wejściowe do prawidłowo sformatowanego numeru telefonicznego.

Tak

time

Ogranicza dopuszczalne dane wejściowe do godziny.

Tak

week

Ogranicza dopuszczalne dane wejściowe do roku i tygodnia.

Tak

url

Ogranicza dopuszczalne dane wejściowe do w pełni kwalifikowanego adresu URL.

Tak

Niektóre z tych typów elementu input dają użytkownikom wyraziste wskazówki co do rodzaju ograniczeń danych, które użytkownik może podać lub wybrać (jak w przypadku typów checkbox i radiobutton). Inne typy, takie jak email i url, opierają się w działaniu na weryfikacji poprawności, którą omówię w rozdziale 14.

289

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Zastosowanie elementu input do pobrania wartości numerycznej Wartość number atrybutu type generuje pole, które przyjmuje jedynie wartości numeryczne. Niektóre przeglądarki, w tym Chrome, wyświetlają również kontrolki strzałek, które pozwalają na zmniejszanie i zwiększanie wartości. W tabeli 13.8 znajduje się opis dodatkowych atrybutów, których można używać z tym typem elementu input. Tabela 13.8. Dodatkowe atrybuty używane z typem number Nowość w HTML5

Atrybut

Opis

list

Wskazuje wartość id elementu datalist, który zawiera wartości używane przez ten element. Więcej na temat elementu datalist przeczytasz w punkcie „Lista danych”.

Tak

min

Wskazuje minimalną wartość na potrzeby weryfikacji poprawności danych wejściowych (a także określa ograniczenia kontrolek liczbowych, jeżeli takowe są obecne). O weryfikacji danych wejściowych przeczytasz w rozdziale 14.

Tak

max

Wskazuje maksymalną wartość na potrzeby weryfikacji poprawności danych wejściowych (a także określa ograniczenia kontrolek liczbowych, jeżeli takowe są obecne). O weryfikacji danych wejściowych przeczytasz w rozdziale 14.

Tak

readonly

Sprawia, że pole danych jest tylko do odczytu i użytkownik nie może edytować jego zawartości. Więcej na ten temat przeczytasz w punkcie „Tworzenie pól tekstowych nieaktywnych i tylko do odczytu”.

Nie

required

Wskazuje, że użytkownik musi podać wartość, by dane wejściowe zostały zatwierdzone. Więcej na ten temat przeczytasz w rozdziale 14.

Tak

step

Określa wartość zwiększenia bądź zmniejszenia modyfikowanych wartości.

Tak

value

Wskazuje pierwotną wartość elementu.

Nie

Wartości atrybutów min, max, step i value można wyrazić liczbami całkowitymi lub ułamkami dziesiętnymi. Wartości 3 i 3.14 są zatem poprawne. W listingu 13.7 widać przykład zastosowania elementu input typu number. Listing 13.7. Zastosowanie elementu input typu number

Przykład

Imię:

Hasło:

290

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Owoc:

Cena za sztukę w Twoim sklepie:

W listingu 13.7 proszę użytkownika o podanie ceny jego ulubionego owocu w pobliskim sklepie. Podałem minimalną wartość 1, maksymalną wartość 100, odstęp 1 oraz wartość początkową 1. Wygląd tego rodzaju elementów input widać na rysunku 13.10, gdzie przedstawiam zrzuty z Firefoksa i Chrome. Zwróć uwagę, że w Chrome widnieją małe kontrolki ze strzałkami, którymi można zmieniać wartość numeryczną — w Firefoksie ich nie ma.

Rysunek 13.10. Element input typu number w Chrome i Firefoksie

Zastosowanie elementu input do uzyskania liczby z podanego zakresu Wartości numeryczne można też pobierać przy użyciu elementu input typu range, który ogranicza dopuszczalne wartości do określonego zakresu. Typ range obsługuje ten sam zestaw atrybutów (omówionych w tabeli 13.8), co typ number, lecz przeglądarki wyświetlają te elementy inaczej. W listingu 13.8 widnieje przykład zastosowania typu range. Listing 13.8. Zastosowanie typu range elementu input

Przykład

291

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Imię:

Hasło:

Owoc:

Cena za sztukę w Twoim sklepie: 1 100

Wygląd elementu input typu range w przeglądarce widać na rysunku 13.11.

Rysunek 13.11. Zastosowanie elementu input typu range

Zastosowanie elementu input do uzyskania wartości boolowskiej Element input typu checkbox tworzy kratkę zaznaczania, która służy do podejmowania wyborów typu „prawda/fałsz”. Ten typ elementu input obsługuje dodatkowe atrybuty, których opis znajduje się w tabeli 13.9.

292

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Tabela 13.9. Dodatkowe atrybuty używane z typem checkbox Nowość w HTML5

Atrybut

Opis

checked

Sprawia, że kratka jest zaznaczona po wczytaniu strony lub wyzerowaniu formularza.

Nie

required

Wskazuje, że użytkownik musi zaznaczyć kratkę, by móc zatwierdzić dane. Więcej na ten temat przeczytasz w rozdziale 14.

Tak

value

Wskazuje wartość przesyłaną serwerowi, kiedy kratka jest zaznaczona; domyślna wartość to on.

Nie

W listingu 13.9 widnieje przykład zastosowania elementu input typu checkbox. Listing 13.9. Zastosowanie elementu input do utworzenia kratki zaznaczania

Przykład

Imię:

Hasło:

Owoc:

Czy jesteś wegetarianinem:

Wygląd tego rodzaju elementu input widać na rysunku 13.12. Z typem checkbox problem jest taki, że przy wysyłaniu danych z formularza serwer otrzymuje wartość tylko wtedy, kiedy kratka jest zaznaczona. Gdybym więc zatwierdził formularz w stanie takim, jaki widnieje na rysunku 13.12, to skrypt Node.js zwróciłby ramkę widoczną na rysunku 13.13.

293

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Rysunek 13.12. Kratka zaznaczania utworzona elementem input

Rysunek 13.13. Dane pobrane z formularza widocznego na poprzednim rysunku Zauważ, że element password ma podaną wartość, ale checkbox nie; obecność wartości wskazuje, że użytkownik zaznaczył kratkę, tak jak widać na rysunku 13.14.

Rysunek 13.14. Wysłanie formularza z zaznaczoną kratką

294

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Zastosowanie elementu input do tworzenia określonych list opcji Element input typu radio służy do tworzenia pól wyboru, które pozwalają użytkownikowi dokonać wyboru spomiędzy określonego zestawu opcji. Przydaje się to, kiedy pracujesz z niewielkimi zbiorami dopuszczalnych wartości. W tabeli 13.10 znajduje się opis dodatkowych atrybutów obsługiwanych przez ten rodzaj elementu input. Tabela 13.10. Dodatkowe atrybuty używane z typem radio Nowość w HTML5

Atrybut

Opis

checked

Sprawia, że kratka jest zaznaczona po wczytaniu strony lub wyzerowaniu formularza.

Nie

required

Wskazuje, że użytkownik musi zaznaczyć kratkę, by móc zatwierdzić dane. Więcej na ten temat przeczytasz w rozdziale 14.

Tak

value

Wskazuje wartość przesyłaną serwerowi, kiedy kratka jest zaznaczona.

Nie

Każdy element input typu radio określa jedną z opcji, które użytkownik może wybrać. Zbiór wzajemnie wykluczających się opcji tworzy się, nadając wszystkim elementom jednakową wartość atrybutu name. Przykład tego widnieje w listingu 13.10. Listing 13.10. Zastosowanie elementu input typu radio do utworzenia listy określonych opcji

Przykład

Imię:

Hasło:

Zagłosuj na swój ulubiony owoc

Jabłka



295

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Pomarańcze

Wiśnie

W tym przykładzie utworzyłem trzy elementy input typu radio. Atrybut name wszystkich trzech ma wartość fave, wobec czego przeglądarka będzie je traktować jako powiązane. Wybranie jednej opcji wyklucza zatem pozostałe dwie. Atrybutem value określiłem wartość danych przesyłanych serwerowi po zatwierdzeniu formularza. Atrybutów fieldset i legend użyłem do tego, żeby wizualnie wskazać powiązanie tych trzech przycisków opcji (rozwiązanie to jest opcjonalne; elementy fieldset i legend omówiłem w rozdziale 12.). Pierwszemu elementowi typu radio nadałem atrybut checked, żeby zawsze była w nim zaznaczona któraś opcja. Wygląd tych elementów input widać na rysunku 13.15.

Rysunek 13.15. Zastosowanie elementu input do utworzenia serii przycisków wyboru Zaznaczony może być najwyżej jeden przycisk wyboru. Jeżeli element nie jest opatrzony atrybutem checked, a sam użytkownik nie wybiera żadnej opcji, to w ogóle nie trzeba zaznaczać żadnego pola. Podobnie jak w przypadku elementu input typu checkbox, żadna wartość nie zostaje przesłana serwerowi,

kiedy element nie jest zaznaczony — innymi słowy, żadne dane nie zostają przekazane, kiedy użytkownik nie dokonuje wyboru.

Zastosowanie elementu input do pobierania sformatowanych ciągów Nadanie atrybutowi type wartości email, tel lub url sprawia, że element input przyjmuje tylko prawidłowe adresy e-mailowe, numery telefoniczne lub adresy URL. Wszystkie te typy obsługują dodatkowe atrybuty, które opisuję w tabeli 13.11. Typ email obsługuje także atrybut multiple, który pozwala elementowi input na przyjmowanie wielu adresów e-mailowych. Wszystkich trzech typów elementów input użyłem w listingu 13.11.

296

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Tabela 13.11. Dodatkowe atrybuty obsługiwane przez typy email, tel i url Nowość w HTML5

Atrybut

Opis

list

Wskazuje wartość id elementu datalist, który zawiera wartości używane przez ten element. Więcej na temat elementu datalist przeczytasz w punkcie „Lista danych”.

Tak

maxlength

Wskazuje maksymalną liczbę znaków, które użytkownik może podać w polu tekstowym. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.

Nie

pattern

Wskazuje wyrażenie regularne na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.

Tak

placeholder

Tworzy wskazówkę odnoszącą się do tego, jakie dane wejściowe użytkownik powinien podać. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”.

Tak

readonly

Definiuje pole tekstowe tylko do odczytu, które nie może być edytowane przez użytkownika.

Nie

required

Wskazuje, że użytkownik musi podać dla elementu wartość na potrzeby weryfikacji danych wejściowych. Więcej przeczytasz w rozdziale 14.

Tak

size

Określa szerokość elementu wyrażoną w liczbie znaków widocznych w polu tekstowym. Więcej przeczytasz w punkcie „Określanie rozmiaru elementu”.

Nie

value

Określa pierwotną wartość pola tekstowego. Więcej przeczytasz w punkcie „Podawanie wartości i treści zastępczych”. Przy typie email może to być pojedynczy adres lub wiele adresów oddzielonych przecinkami.

Nie

Listing 13.11. Zastosowanie typów email, tel i url

Przykład

Imię:

Hasło:

Email:

297

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Telefon:

Strona domowa:

Te typy elementu input przedstawiane są użytkownikowi jako zwyczajne pola tekstowe i służą jedynie zatwierdzaniu podanych przez użytkownika danych, kiedy dane z formularza są wysyłane. Jest to część nowego sposobu obsługi weryfikacji danych do zatwierdzenia w HTML5, który opiszę szerzej w rozdziale 14. Jakość weryfikacji bywa różna. Wszystkie popularne przeglądarki dobrze sobie radzą z typem email i odpowiednio wykrywają prawidłowe adresy e-mailowe. Z typem url natomiast bywa różnie. Niektóre przeglądarki dodają do podawanych przez użytkowników adresów człon http:// na początku, a inne wymagają od użytkowników adresów zaczynających się od członu http://, ale nie weryfikują reszty adresu. Inne z kolei pozwalają użytkownikom na podawanie dowolnych wartości i w ogóle nie weryfikują danych. Typ tel ma najgorszą obsługę. W chwili, kiedy to piszę, żadna z popularnych przeglądarek nie oferuje sensownej weryfikacji.

Zastosowanie elementu input do pozyskiwania godzin i dat W HTML5 pojawiły się także typy elementu input służące do pobierania godzin i dat. Ich opis znajduje się w tabeli 13.12. Tabela 13.12. Typy elementu input służące do pobierania godzin i dat Typ

Opis

Przykład

datetime

Pozyskuje globalną datę i godzinę z informacją o strefie czasowej.

2011-07-19T16:49:39.491Z

datetime-local

Pozyskuje globalną datę i godzinę (bez informacji o strefie czasowej).

2011-07-19T16:49:39.491

date

Pozyskuje lokalną datę (bez godziny ani strefy czasowej).

2011-07-20

month

Pozyskuje dane o roku i miesiącu (bez dnia, godziny ani informacji o strefie czasowej).

2011-08

time

Pozyskuje godzinę.

17:49:44.746

week

Pozyskuje dane o tygodniu.

2011-W30

Z pracą z datami i godzinami wiążą się problemy, a — niestety — specyfikacja nowych typów elementu input nie jest bynajmniej idealna. Formaty dat opierają się na standardzie RFC 3339 (dostępnym pod

adresem http://tools.ietf.org/html/rfc3339), który opisuje rygorystyczne formatowanie sygnatur czasowych. Opisany w nim sposób przedstawiania dat znacząco różni się od wielu lokalnych wariacji, z których rzeczywiście się korzysta i których użytkownicy mogliby oczekiwać. Przykładowo, niewielu użytkowników

298

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

ma świadomość tego, że T w formacie datetime określa początek fragmentu czasu, a Z niezmienną strefę czasową Zulu. Wszystkie typy elementu input, które opisałem w tabeli 13.12, obsługują dodatkowe atrybuty opisane w tabeli 13.13. Tabela 13.13. Dodatkowe atrybuty obsługiwane przez elementy input pobierające dane o godzinie i dacie Nowość w HTML5

Atrybut

Opis

list

Wskazuje id elementu datalist, który określa wartości elementu input. Więcej przeczytasz w punkcie „Lista danych”.

Tak

min

Wskazuje minimalną wartość na potrzeby weryfikacji poprawności danych wejściowych (a także określa ograniczenia kontrolek liczbowych, jeżeli takowe są obecne). O weryfikacji danych wejściowych przeczytasz w rozdziale 14.

Tak

max

Wskazuje maksymalną wartość na potrzeby weryfikacji poprawności danych wejściowych (a także określa ograniczenia kontrolek liczbowych, jeżeli takowe są obecne). O weryfikacji danych wejściowych przeczytasz w rozdziale 14.

Tak

readonly

Sprawia, że pole danych jest tylko do odczytu i użytkownik nie może edytować jego zawartości.

Nie

required

Wskazuje, że użytkownik musi podać wartość, by dane wejściowe zostały zatwierdzone. Więcej na ten temat przeczytasz w rozdziale 14.

Tak

step

Określa wartość zwiększenia bądź zmniejszenia modyfikowanych wartości.

Tak

value

Wskazuje pierwotną wartość elementu.

Nie

W listingu 13.12 widnieje przykład zastosowania typu date. Listing 13.12. Zastosowanie typu date elementu input

Przykład

Imię:

Hasło:

Owoc:

299

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Kiedy ostatnio kupiłeś owoc:

Obsługa tych nowych typów elementu input w przeglądarkach wciąż jest bardzo ograniczona. W chwili, kiedy to piszę, Opera może się pochwalić najlepszą obsługą, a ponadto oferuje selektor daty, co widać na rysunku 13.16.

Rysunek 13.16. Wybieranie daty w Operze Drugą najlepszą obsługę oferuje Chrome, który wyświetla taki sam rodzaj pola tekstowego, jak przy elemencie input typu number — z małymi kontrolkami zmiany wartości czasu. Pozostałe popularne przeglądarki wyświetlają jednowierszowe pole tekstowe i użytkownik już sam musi się domyślić, co ma wpisać. Jestem pewien, że możemy czekać na postępy w tej dziedzinie, ale na razie mogę Cię tylko zachęcić do przejrzenia selektorów dat dostępnych w popularnych bibliotekach JavaScript w rodzaju jQuery.

Zastosowanie elementu input do pobierania danych o kolorze Typ color elementu input ogranicza wybór danych wejściowych do kolorów. Ten typ obsługuje dodatkowy atrybut list, który omówiłem w punkcie „Lista danych” we wcześniejszej części rozdziału. Wartości kolorów wyraża się dokładnie siedmioma znakami: początkowym #, po którym występują trzy dwucyfrowe wartości szesnastkowe, określające wartości czerwonego, zielonego i niebieskiego (np. #FF1234). Nazwy kolorów CSS, takie jak red i black, nie są obsługiwane. Przykład użycia tego typu elementu input znajdziesz w listingu 13.13. Listing 13.13. Zastosowanie elementu input typu color

Przykład

300

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Imię:

Hasło:

Ulubiony owoc:

Kolor:

W większości przeglądarek nie ma specjalistycznych opcji obsługi tego typu elementu input. W Google Chrome użytkownik wpisuje wartość i może otrzymać komunikat o problemach z formatowaniem przy próbie weryfikacji danych wejściowych (o czym opowiem w rozdziale 14.). Najlepszą obsługę oferuje Opera — udostępnia prosty próbnik kolorów, który można powiększyć do postaci pełnoprawnego okna selektora barw (rysunek 13.17).

Rysunek 13.17. Próbnik kolorów w Operze

301

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Zastosowanie elementu input do pobierania haseł wyszukiwania Element input typu search przybiera postać jednowierszowego pola tekstowego, które przyjmuje hasła wyszukiwania. Dziwne jest to, że ten rodzaj elementu nic właściwie nie robi. Nie ma żadnych domyślnych ograniczeń rodzaju danych, które można mu podać, ani specjalnych funkcji, w rodzaju przeszukiwania bieżącej strony lub wykorzystania domyślnej wyszukiwarki użytkownika do przeprowadzenia kwerendy. Ten typ elementu input obsługuje te same dodatkowe atrybuty, co typ text. W listingu 13.14 widać przykład zastosowania tego elementu. Listing 13.14. Zastosowanie elementu input typu search

Przykład

Imię:

Hasło:

Ulubiony owoc:

Szukaj:

Przeglądarki mogą wyświetlać pola tekstowe w sposób, który jednoznacznie wskazuje na to, że należy w nich podawać słowa kluczowe. Google Chrome w tym celu wyświetla coś, co wygląda na standardowe pole tekstowe, dopóki użytkownik nie zaczyna w nim pisać — wtedy pojawia się w polu ikonka usuwania danych (rysunek 13.18). W chwili, kiedy to piszę, inne popularne przeglądarki obsługują ten rodzaj elementu input tak, jakby był zwyczajnym polem typu text.

302

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Rysunek 13.18. Element input typu search w Google Chrome

Zastosowanie elementu input do tworzenia ukrytych obiektów danych Czasami konieczne jest zapewnienie, by pewne niewidoczne i nieedytowalne przez użytkownika dane zostały przekazane serwerowi po wysłaniu formularza. Z taką sytuacją mamy do czynienia, kiedy aplikacja internetowa wyświetla rekord z bazy danych, który użytkownik może edytować. Często na stronie trzeba wtedy umieścić klucz główny, żeby móc się z łatwością rozeznać, który rekord jest edytowany przez użytkownika — jednocześnie nie chcemy, by użytkownik widział tę informację. Do uzyskania tego efektu służy element input typu hidden. W listingu 13.15 widnieje przykład zastosowania elementu input tego typu. Listing 13.15. Zastosowanie elementu input typu hidden

Przykład

Imię:

Hasło:

Ulubiony owoc:

303

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

W tym przykładzie utworzyłem element input typu hidden z atrybutem name o wartości recordID oraz atrybutem value o wartości 1234. Kiedy strona wyświetla się w przeglądarce, element input nie jest w żaden sposób widoczny (rysunek 13.19).

Rysunek 13.19. Strona z ukrytym elementem input Kiedy użytkownik wysyła formularz, przeglądarka dołącza dane określone jako wartości atrybutów name i value elementu input typu hidden. Widać to na rysunku 13.20, na którym znajduje się odpowiedź

skryptu Node.js na formularz z poprzedniego rysunku.

Rysunek 13.20. Odpowiedź serwera, w której widać ukryte dane „ Ostrzeżenie Ten rodzaj elementu input nadaje się tylko do danych ukrywanych dla wygody lub polepszenia używalności, a nie poufnych i istotnych pod względem bezpieczeństwa. Użytkownik może przejrzeć elementy input typu hidden w kodzie źródłowym strony, a wartości przesyłane na serwer zapisane są tekstem jawnym. Większość frameworków aplikacji internetowych obsługuje zabezpieczanie poufnych danych na serwerze i powiązywanie ich z żądaniami na podstawie identyfikatorów sesji — zazwyczaj w postaci ciasteczek.

304

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Zastosowanie elementu input do tworzenia map i przycisków graficznych Element input typu image pozwala na tworzenie przycisków graficznych, których kliknięciem zatwierdza się formularz. Ten typ elementu input obsługuje dodatkowe atrybuty widoczne w tabeli 13.14. Tabela 13.14. Dodatkowe atrybuty obsługiwane przez element input typu image Nowość w HTML5

Atrybut

Opis

alt

Określa opis tekstowy elementu. Przydaje się to użytkownikom korzystającym z technologii asystujących.

Nie

formaction

Podobnie jak w elemencie button, opisanym w rozdziale 12.

Tak

formenctype

Podobnie jak w elemencie button, opisanym w rozdziale 12.

Tak

formmethod

Podobnie jak w elemencie button, opisanym w rozdziale 12.

Tak

formtarget

Podobnie jak w elemencie button, opisanym w rozdziale 12.

Tak

formnovalidate

Podobnie jak w elemencie button, opisanym w rozdziale 12.

Tak

height

Określa wysokość obrazu w pikselach; kiedy atrybut jest nieobecny, obraz wyświetlany jest w swojej rzeczywistej wysokości.

Nie

src

Wskazuje adres URL obrazu, który ma być wyświetlony.

Nie

width

Określa szerokość obrazu w pikselach; kiedy atrybut jest nieobecny, obraz wyświetlany jest w swojej rzeczywistej szerokości.

Nie

W listingu 13.16 widnieje przykład zastosowania elementu input typu image. Listing 13.16. Zastosowanie elementu input typu image

Przykład

Imię:

Hasło:

Ulubiony owoc:

305

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Wygląd tego typu elementu input w przeglądarce widać na rysunku 13.21.

Rysunek 13.21. Zastosowanie elementu input typu image Po kliknięciu obrazu przeglądarka wysyła formularz z dwoma elementami odnoszącymi się do elementu input typu image. Są to współrzędne x i y miejsca, w którym użytkownik kliknął, względem lewego górnego

rogu obrazu. Przekazywane dane widać na rysunku 13.22, na którym znajduje się odpowiedź skryptu Node.js na formularz z poprzedniego rysunku.

Rysunek 13.22. Odpowiedź Node.js na formularz zawierający element input typu image Współrzędne można wykorzystywać w obsłudze obrazów składających się z różnych obszarów, których kliknięcie wywołuje różne czynności i odpowiedzi.

306

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT

Zastosowanie elementu input do wczytywania plików Ostatni typ elementu input to file, który umożliwia wczytywanie plików na serwer przy wysyłaniu formularza. Ten typ elementu input obsługuje dodatkowe atrybuty przedstawione w tabeli 13.15. Tabela 13.15. Dodatkowe atrybuty obsługiwane przez typ file elementu input Nowość w HTML5

Atrybut

Opis

accept

Określa zbiór akceptowanych typów MIME. Opis typów MIME znajduje się w specyfikacji RFC2046 (http://tools.ietf.org/html/rfc2046).

Nie

multiple

Wskazuje, że element input może posłużyć do wczytania więcej niż jednego pliku. Kiedy piszę te słowa, żadna z popularnych przeglądarek nie obsługuje tego atrybutu.

Tak

required

Wskazuje, że użytkownik musi podać wartość na potrzeby weryfikacji. Więcej na ten temat przeczytasz w rozdziale 14.

Tak

W listingu 13.17 widać przykład zastosowania elementu input typu file. Listing 13.17. Zastosowanie elementu input typu file do wczytywania plików

Przykład

Imię:

Hasło:

Ulubiony owoc:

307

ROZDZIAŁ 13. „ KONFIGURACJA ELEMENTU INPUT



Pliki można wczytywać tylko wtedy, kiedy formularz ma przypisany typ kodowania multipart/form-data. Jak widzisz, kodowanie elementu form określiłem atrybutem enctype. Wygląd elementu input widać na rysunku 13.23.

Rysunek 13.23. Element input typu file Kliknięciem przycisku Wybierz plik użytkownik otwiera okno wyboru pliku. Po wysłaniu formularza zawartość pliku zostaje przesłana na serwer.

Podsumowanie W tym rozdziale przedstawiłem Ci różne typy elementu input. Żaden inny element HTML nie ma tylu różnych funkcji, a każda strona i aplikacja internetowa, która opiera się na interakcji z użytkownikiem, szeroko używa elementu input. W następnym rozdziale przedstawię Ci kilka innych rodzajów elementów, które można wykorzystywać w formularzach. Pokażę Ci również nową funkcję weryfikacji danych w HTML5, która pozwala na sprawdzenie, czy użytkownik podał właściwy rodzaj danych, jeszcze przed wysłaniem formularza.

308

ROZDZIAŁ 14

Inne elementy formularzy i weryfikacja danych wejściowych W tym rozdziale dokończę omówienie formularzy HTML. W formularzach HTML można używać jeszcze pięciu innych elementów, które kolejno opiszę. Przedstawię również funkcje weryfikacji danych wejściowych, które pojawiły się w HTML5. Te nowe funkcje pozwalają na definiowanie ograniczeń dla podawanych przez użytkownika danych — przy ich użyciu można wstrzymać wysłanie formularza, aż użytkownik poda dane spełniające określone warunki. W tabeli 14.1 znajduje się streszczenie całego rozdziału. Tabela 14.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Utworzenie listy opcji do przedstawienia użytkownikowi.

Użyj elementu select.

14.1, 14.2

Ustrukturyzowanie listy opcji w elemencie select.

Użyj elementu optgroup.

14.3

Pozyskanie wielowierszowego tekstu od użytkownika.

Użyj elementu textarea.

14.4

Wskazanie wyniku obliczenia.

Użyj elementu output.

14.5

Wygenerowanie pary kluczy — publicznego i prywatnego.

Użyj elementu keygen.

—

Sprawdzenie, czy użytkownik określił wartość w formularzu.

Użyj atrybutu required.

14.6

Sprawdzenie, czy wartość mieści się w określonym zakresie.

Użyj atrybutów min i max.

14.7

Sprawdzenie, czy wartość jest zgodna z wyrażeniem regularnym.

Użyj atrybutu pattern.

14.8, 14.9

Dezaktywacja weryfikacji danych wejściowych.

Użyj atrybutu novalidate lub formnovalidate.

14.10

Inne elementy formularzy W kolejnych punktach opiszę pozostałe pięć elementów, których można użyć w formularzu. Są to elementy select, optgroup, textarea, output i keygen.

Tworzenie list opcji Element select służy do tworzenia list opcji wyboru. Jest to bardziej zwięzły odpowiednik elementu input typu radiobutton, który przedstawiłem w rozdziale 13., a idealnie nadaje się do przedstawiania większych zbiorów opcji. W tabeli 14.2 znajduje się opis elementu select.

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Tabela 14.2. Element select Element

select

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

name, disabled, form, size, multiple, autofocus, required

Zawartość

Elementy option i optgroup

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 pojawiły się atrybuty form, autofocus i required

Domyślny styl prezentacji

Wygląd tego elementu różni się w zależności od platformy i przeglądarki

Atrybuty name, disabled, form, autofocus i required działają tak samo, jak ich odpowiedniki obsługiwane przez elementy input. Atrybut size wskazuje, ile użytkownik ma mieć opcji do wyboru; atrybut multiple z kolei wskazuje, że użytkownik może wybrać więcej niż jedną wartość. Do określenia opcji służy element option — ten sam, którego używa się z opisanym w rozdziale 12. elementem datalist. W listingu 14.1 widnieje przykład zastosowania elementów select i option. Listing 14.1. Zastosowanie elementów select i option

Przykład

Imię:

Hasło:

Ulubiony owoc:

Jabłko Pomarańcza Wiśnia Gruszka

310

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH



W listingu 14.1 zamieściłem element select i zdefiniowałem cztery elementy option, oznaczające podane użytkownikowi do wyboru opcje. Pierwszemu elementowi option nadałem atrybut selected, żeby był automatycznie zaznaczany po wczytaniu strony. Wygląd elementu select po wczytaniu strony oraz listy elementów option widać na rysunku 14.1.

Rysunek 14.1. Zastosowanie elementu select do przedstawienia użytkownikowi listy opcji Elementowi select można nadać atrybut size, aby przedstawiał użytkownikowi więcej niż jedną opcję, a atrybut multiple, żeby pozwolić użytkownikowi na zaznaczenie więcej niż jednej opcji. Przykład widnieje w listingu 14.2. Listing 14.2. Nadanie elementowi select atrybutów size i multiple

Przykład

Imię:

Hasło:

Ulubiony owoc:

311

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Jabłko Pomarańcza Wiśnia Gruszka

W listingu 14.2 wprowadziłem atrybuty size i multiple, czego rezultatem jest efekt widoczny na rysunku 14.2. Więcej niż jedną opcję można wybrać, klikając kolejne pozycje z przytrzymanym przyciskiem ctrl. Zastosowałem również styl inline (tak jak opisałem w rozdziale 4.) do zmiany wyrównania elementu label tak, aby był wyrównany do górnej krawędzi elementu select (a nie dolnej, co jest ustawieniem domyślnym i wygląda dość dziwnie).

Rysunek 14.2. Zastosowanie elementu select do wyświetlenia i pozwolenia użytkownikowi na zaznaczenie więcej niż jednego elementu

Ustrukturyzowanie elementu select Element select możesz ustrukturyzować przy użyciu elementu optgroup. W tabeli 14.3 znajduje się opis elementu optgroup. Tabela 14.3. Element optgroup Element

optgroup

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element select

Atrybuty lokalne

label, disabled

Zawartość

Elementy option

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

Brak

312

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Element optgroup służy do grupowania elementów option. Atrybut label służy do tworzenia etykiet grup elementów option, a zastosowanie atrybutu disabled uniemożliwia użytkownikowi wybranie któregokolwiek z elementów option zawartych w grupie optgroup. W listingu 14.3 widnieje przykład zastosowania elementu optgroup. Listing 14.3. Zastosowanie elementu optgroup

Przykład

Imię:

Hasło:

Ulubiony owoc:

Jabłko Pomarańcza

Wiśnia Gruszka

Na rysunku 14.3 widać strukturę nadaną liście zawierającej elementy option przy użyciu elementu optgroup. Etykiety optgroup pełnią jedynie funkcję strukturalną — użytkownik nie może ich zaznaczać.

Pobieranie wielowierszowego tekstu Element textarea tworzy wielowierszowe pole tekstowe, w którym użytkownik może wpisać więcej niż jeden wiersz tekstu. Opis tego elementu znajduje się w tabeli 14.4.

313

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Rysunek 14.3. Zastosowanie elementu optgroup Tabela 14.4. Element textarea Element

textarea

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą — przeważnie jednak jest to element form

Atrybuty lokalne

name, disabled, form, readonly, maxlength, autofocus, required, placeholder, dirname, rows, wrap, cols

Zawartość

Tekst określający treść elementu

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 pojawiły się atrybuty form, autofocus, required, placeholder i wrap

Domyślny styl prezentacji

Brak

Atrybuty rows i cols określają wymiary pola textarea, a atrybutem wrap możesz określić, jak ma działać łamanie wiersza. Pozostałe atrybuty działają tak samo jak ich odpowiedniki obsługiwane przez element input, które opisałem w rozdziałach 12. i 13. W listingu 14.4 widać przykład zastosowania elementu textarea. Listing 14.4. Zastosowanie elementu textarea

Przykład

Imię:

314

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Hasło:

Ulubiony owoc:

Jabłko Pomarańcza

Wiśnia Gruszka

Napisz, dlaczego to Twój ulubiony owoc

W listingu 14.4 zamieściłem element textarea o szerokości dwudziestu kolumn i pięciu rzędów. Wygląd tego elementu widać na rysunku 14.4.

Rysunek 14.4. Zastosowanie elementu textarea Atrybut wrap określa sposób łamania wiersza przy wysłaniu formularza. Gdy nadaje się mu wartość hard, tekst łamany jest tak, by żaden z przesłanych wierszy nie był dłuższy niż wartość podana dla atrybutu cols.

315

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Wskazanie wyniku obliczenia Element output wskazuje wynik obliczenia. W tabeli 14.5 znajduje się jego opis. Tabela 14.5. Element output Element

output

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

name, form, for

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

output { display: inline; }

W listingu 14.5 widnieje przykład zastosowania elementu output. Listing 14.5. Zastosowanie elementu output

Przykład





Kalkulator cen x =



W listingu 14.5 wykorzystałem system zdarzeń JavaScript do utworzenia prostego kalkulatora. (O zdarzeniach przeczytasz więcej w rozdziale 30.). Widnieją tu dwa elementy input typu number. Podane przez użytkownika wartości elementu input zostają przemnożone, a rezultat pojawia się w elemencie output. Jego wygląd w przeglądarce widać na rysunku 14.5.

Generowanie par kluczy — publicznego i prywatnego Element keygen służy do generowania par kluczy prywatnego i publicznego. Jest to istotny aspekt kryptografii klucza publicznego, która — wraz z certyfikatami klientów i SSL — leży u podstaw bezpieczeństwa w sieci. Przy wysłaniu formularza generowana jest nowa para kluczy. Klucz publiczny przekazany zostaje serwerowi, a klucz prywatny zostaje zachowany przez przeglądarkę i dołączony do zbioru kluczy użytkownika. Opis elementu keygen znajduje się w tabeli 14.6.

316

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Rysunek 14.5. Zastosowanie elementu output Tabela 14.6. Element keygen Element

keygen

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

challenge, keytype, autofocus, name, disabled, form

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

Atrybuty name, disabled, form i autofocus działają tak samo jak ich odpowiedniki obsługiwane przez opisany w rozdziale 12. element input. Atrybut keytype określa algorytm służący do generowania pary kluczy, lecz obsługuje on jedynie wartość RSA. Atrybut challenge określa wyzwanie przesyłane serwerowi wraz z kluczem publicznym. Obsługa tego elementu nie jest powszechna, a poszczególne przeglądarki różnie go przedstawiają użytkownikom. Zalecam unikać używania tego elementu, dopóki jego obsługa nie stanie się lepsza.

Weryfikacja danych wejściowych Przy pobieraniu danych od użytkowników ryzykujesz tym, że otrzymasz takie dane, które do niczego się nie przydadzą. Użytkownik może zwyczajnie pomylić się albo może to wynikać z tego, że nie dość jasno określiłeś oczekiwany rodzaj informacji. W HTML5 pojawiła się obsługa weryfikacji danych wejściowych. Polega ona na podaniu przeglądarce podstawowych informacji co do rodzaju danych, jakich wymagasz. Przeglądarka na ich podstawie jeszcze przed zatwierdzeniem formularza sprawdza, czy użytkownik podał właściwe dane. Jeżeli z danymi jest jakiś problem, użytkownik zostaje poproszony o wprowadzenie poprawek i nie może wysłać formularza, dopóki tego nie zrobi. Idea weryfikacji w przeglądarce nie jest nowa, ale zanim pojawił się HTML5, trzeba było w tym celu korzystać z bibliotek JavaScript, np. świetnej wtyczki weryfikacyjnej jQuery. Wbudowana funkcja weryfikacji w HTML5 jest bez wątpienia wygodna, ale — jak się sam przekonasz — jest ona obsługiwana w podstawowym zakresie i niespójnie w poszczególnych przeglądarkach. Zaletą weryfikacji danych wejściowych w przeglądarce jest to, że użytkownik w razie wystąpienia problemów natychmiast otrzymuje dane zwrotne. Gdyby tej funkcji nie było, użytkownik po wysłaniu formularza musiałby poczekać na odpowiedź serwera, a następnie poprawić zgłoszone błędy. W pracy z powolnymi sieciami i przeładowanymi serwerami jest to powolny i frustrujący proces. Weryfikacją danych zarządza się przy użyciu atrybutów. W tabeli 14.7 widać, które atrybuty obsługiwane są przez które elementy i typy danych wejściowych.

317

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

„ Ostrzeżenie Weryfikacja danych wejściowych w przeglądarce jest raczej uzupełnieniem aniżeli substytutem weryfikacji po stronie serwera. Nie można zakładać, że użytkownicy korzystają z przeglądarek prawidłowo obsługujących weryfikację danych, a użytkownik o niegodziwych zamiarach może bez problemu napisać skrypt pozwalający mu wysyłać dane bezpośrednio na serwer z pominięciem weryfikacji w ogóle.

Tabela 14.7. Obsługa weryfikacji danych wejściowych Atrybut weryfikacji

Elementy

required

textarea, select, input (typy text, password, checkbox, radio, file, datetime, datetime-local, date, month, time, week, number, email, url, search i tel)

min, max

input (typy datetime, datetime-local, date, month, time, week, number i range)

pattern

input (typy text, password, email, url, search i tel)

Sprawdzenie, czy użytkownik podał wartość Najprostszy rodzaj weryfikacji danych wejściowych polega na sprawdzeniu, czy użytkownik podał wartość. Robi się to przy użyciu atrybutu required. Użytkownik nie może zatwierdzić formularza, dopóki nie poda takiej wartości — nie ma jednak żadnych ograniczeń co do tego, jaka ta wartość ma być. W listingu 14.6 widnieje przykład zastosowania atrybutu required. Listing 14.6. Zastosowanie atrybutu required

Przykład

Imię:

Hasło:

Akceptuję zasady i warunki

318

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

W listingu 14.6 nadałem atrybut required elementom input trzech typów. Użytkownik nie może wysłać formularza, dopóki nie poda wszystkich wartości. W przypadku typów text i password oznacza to, że użytkownik musi podać tekst w obydwu polach, a w przypadku elementu typu checkbox — zaznaczyć kratkę. „ Wskazówka Domyślna wartość określona atrybutem value spełnia warunek weryfikacji required. Jeżeli chcesz, żeby użytkownik sam musiał podać wartość, rozważ skorzystanie z atrybutu placeholder zamiast value. W rozdziale 12. przeczytasz więcej na ich temat.

Każda przeglądarka, która obsługuje weryfikację danych, robi to nieco inaczej, ale efekt zwykle jest jednakowy: kiedy użytkownik klika przycisk zatwierdzający formularz, pierwszy element, który jest oznaczony atrybutem required, a któremu nie podano wartości, zostaje oznaczony, by użytkownik zwrócił nań uwagę, wprowadził poprawkę i ponownie zatwierdził formularz. Jeżeli w formularzu występują jeszcze jakieś przeoczenia, to kolejny taki element zostaje zaznaczony. Proces ten powtarza się aż do momentu, kiedy wszystkim elementom oznaczonym atrybutem required zostają nadane wartości. Na rysunku 14.6 widać, jak Google Chrome zwraca uwagę użytkownika na przeoczenie.

Rysunek 14.6. Google Chrome zwraca uwagę użytkownika na wymagane pole System weryfikacji danych wejściowych w HTML5 jest stosunkowo mało rozwinięty, zwłaszcza jeśli jest się przyzwyczajonym do bardziej rozbudowanych funkcji oferowanych przez biblioteki w rodzaju jQuery. Przykładowo, w HTML5 problemy z danymi wejściowymi wskazywane są użytkownikowi po kolei. Jeżeli więc w formularzu jest wiele błędów, to użytkownik zmuszony jest je kolejno odkrywać i poprawiać przy każdej próbie ich zatwierdzenia. Nie ma żadnego ogólnego spisu błędów ani możliwości określenia wyglądu informacji o błędach.

Sprawdzenie, czy wartość mieści się w podanym zakresie Atrybutami min i max możesz się posłużyć, by dopilnować, aby wartości liczbowe i daty mieściły się w określonym przedziale. W listingu 14.7 przypisałem te atrybuty elementowi input typu number. Listing 14.7. Zastosowanie atrybutów min i max

Przykład



319

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Imię:

Hasło:

Cena za sztukę w Twoim sklepie:

Nie trzeba definiować obydwu tych atrybutów. Możesz wprowadzić sam górny limit wartości atrybutem max albo sam dolny limit atrybutem min. Kiedy używasz ich obydwu, ograniczasz wybór do określonego przedziału. Wartości min i max są inkluzywne — przy atrybucie max o wartości 100 można podać dowolną wartość do 100 włącznie.

Na rysunku 14.7 widnieje wskazanie błędu w związku z zakresem wartości.

Rysunek 14.7. Błąd zakresu wartości „ Wskazówka Atrybuty min i max wpływają na weryfikację danych tylko wtedy, kiedy użytkownik podaje jakąś wartość. Przeglądarka pozwala bowiem użytkownikowi na zatwierdzenie formularza, kiedy pole tekstowe jest puste. Z tego względu często używa się tych atrybutów w połączeniu z atrybutem required, który omówiłem w poprzednim punkcie.

320

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Sprawdzenie, czy wartość jest zgodna z wyrażeniem regularnym Atrybut pattern służy do sprawdzenia, czy wartość jest zgodna z wyrażeniem regularnym. W listingu 14.8 widnieje przykład jego zastosowania. Listing 14.8. Zastosowanie atrybutu pattern

Przykład

Imię:

Hasło:

W listingu 14.8 podałem prosty wzorzec, który ma zapewniać, by użytkownik podawał imię i nazwisko, oddzielone od siebie spacją. Nie jest to dobry sposób weryfikacji tego, czy podana wartość rzeczywiście jest imieniem, ponieważ wzorzec ten nie pasuje do zróżnicowania zapisu imion, ale dobrze ukazuje obsługę weryfikacji. Wygląd błędu weryfikacji widać na rysunku 14.8.

Rysunek 14.8. Błąd w weryfikacji wzorca „ Wskazówka Atrybut pattern wpływa na weryfikację danych tylko wtedy, kiedy użytkownik podaje jakąś wartość. Przeglądarka pozwala bowiem użytkownikowi na zatwierdzenie formularza, kiedy pole tekstowe jest puste. Z tego względu często używa się tego atrybutu w połączeniu z atrybutem required, który omówiłem wcześniej.

321

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Sprawdzenie, czy wartość jest adresem e-mailowym lub URL Typy email i url elementu input, które omówiłem w rozdziale 13., pozwalają zapewnić, by użytkownik podał poprawny adres e-mailowy lub w pełni kwalifikowany adres URL, choć nie do końca — o ile obsługa typu email jest w miarę dobra, to typu url mogłaby być zdecydowanie lepsza. Takim elementom input można nadawać atrybut pattern, by dodatkowo ograniczyć wartości, które użytkownik może podać, np. adresy e-mailowe do określonej domeny. W listingu 14.9 widnieje tego przykład. Listing 14.9. Zastosowanie atrybutu pattern z elementem input typu email

Przykład

Imię:

Hasło:

Adres e-mail:

W listingu 14.9 wykorzystałem trzy rodzaje funkcji weryfikacyjnych. Nadanie elementowi input typu email zapewnia, że użytkownik poda prawidłowy adres e-mailowy. Atrybut required sprawia, że użytkownik musi podać jakąś wartość. Atrybut pattern pozwala zapewnić, by użytkownik podał adres e-mailowy z określonej domeny (domena.com). Dołączenie atrybutu pattern do elementu input typu email może się wydawać zbędne, ale element input mimo to sprawdza, czy wartość podana przed znakiem @ jest poprawną treścią adresu e-mailowego.

Dezaktywacja weryfikacji danych Czasami zdarzają się sytuacje, w których wolałbyś pozwolić użytkownikowi na wysłanie formularza bez uprzedniej weryfikacji treści, np. kiedy użytkownik chce zapisać postępy nieukończonego procesu. Chcesz, by użytkownik mógł zapisać te dane, które już podał, żeby później wznowić pracę. Byłoby to dość frustrujące, gdyby trzeba było najpierw poprawić wszystkie błędy.

322

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

Zatwierdzenie formularza bez weryfikacji można umożliwić, nadając atrybut novalidate elementowi form albo atrybut formnovalidate tym typom elementów button i input, które pozwalają na wysyłanie formularzy. W listingu 14.10 widnieje przykład dezaktywacji weryfikacji. Listing 14.10. Dezaktywacja weryfikacji danych

Przykład

Imię:

Hasło:

Adres e-mail:

W tym przykładzie umieściłem w dokumencie element input, który służy do wysłania formularza bez weryfikacji, co pozwala użytkownikowi na zapisanie postępów — rzecz jasna, o ile serwer przyjmuje dane z przeglądarki bez weryfikacji.

Podsumowanie W tym rozdziale przedstawiłem Ci pozostałe elementy formularzy i pokazałem funkcje weryfikacji danych, które pojawiły się w HTML5.

323

ROZDZIAŁ 14. „ INNE ELEMENTY FORMULARZY I WERYFIKACJA DANYCH WEJŚCIOWYCH

324

ROZDZIAŁ 15

Osadzanie zasobów

W tym rozdziale przedstawię Ci elementy służące do osadzania zasobów w dokumentach HTML. Do tej pory skupiałem się przede wszystkim na wykorzystaniu elementów HTML do nadawania dokumentom struktury i znaczenia. Omówione w tym rozdziale elementy pozwolą Ci na dodatkowe wzbogacenie dokumentów. „ Uwaga Niektóre z elementów HTML5, które służą do osadzania zasobów, omawiam w innych częściach książki. Więcej szczegółów na ten temat poznasz w punkcie „Inne elementy osadzające”.

W tabeli 15.1 znajduje się streszczenie całego rozdziału. Tabela 15.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Osadzenie obrazu w dokumencie HTML.

Użyj elementu img lub object.

15.1, 15.9

Utworzenie odnośnika graficznego.

Osadź element img w elemencie a.

15.2

Utworzenie mapy obrazu działającej po stronie klienta.

Użyj elementu img lub object w połączeniu z elementami map i area.

15.3, 15.4, 15.10

Osadzenie innego dokumentu HTML.

Użyj elementu iframe.

15.5

Osadzenie zasobów przy użyciu wtyczki.

Użyj elementu embed lub object.

15.6 – 15.8

Utworzenie kontekstu przeglądania.

Użyj elementu object z atrybutem name, którego wartość określa nazwę kontekstu przeglądania.

15.11

Osadzenie zasobów audiowizualnych bez konieczności użycia wtyczki.

Użyj elementów audio, video, source i track. Więcej na ten temat przeczytasz w rozdziale 34.

—

Osadzenie grafiki w dokumencie HTML.

Użyj elementu canvas. Więcej na ten temat przeczytasz w rozdziałach 35. i 36.

—

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Osadzanie obrazów Element img umożliwia osadzenie obrazu w dokumencie HTML. Opis tego powszechnie używanego elementu HTML znajduje się w tabeli 15.2. Tabela 15.2. Element img Element

img

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

src, alt, height, width, usemap, ismap

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 atrybuty border, longdesc, name, align, hspace i vspace wyszły z użycia

Domyślny styl prezentacji

Brak

Przy osadzaniu obrazu należy skorzystać z atrybutów src i alt, tak jak w listingu 15.1. Listing 15.1. Osadzanie obrazu

Przykład



Oto typowy symbol trzech konkurencji triathlonu.

Pierwszy symbol przedstawia pływanie, drugi kolarstwo, a trzeci bieganie.

Atrybut src wskazuje adres URL obrazu do osadzenia. W tym przypadku podałem URL względny do pliku graficznego triathlon.png. Atrybut alt określa treść zastępczą elementu img. Owa treść wyświetlana jest, kiedy z jakiegoś powodu niemożliwe jest wyświetlenie obrazu, np. dlatego, że nie można go zlokalizować, przeglądarka nie obsługuje jego formatu albo że przeglądarka lub urządzenie w ogóle nie wyświetla obrazów. Osadzony obraz widać na rysunku 15.1. Atrybuty width i height służą do określenia (mierzonego w pikselach) rozmiaru obrazu wyświetlanego elementem img. Obrazy wczytywane są dopiero po zinterpretowaniu całego kodu HTML — oznacza to, że w przypadku pominięcia tych atrybutów przeglądarka nie wie, ile miejsca na ekranie przeznaczyć na wyświetlenie obrazu. Przeglądarka w takiej sytuacji określa rozmiar obrazu na podstawie samego pliku, a następnie odpowiednio przestawia resztę treści. Takie zachowanie może być irytujące dla użytkownika, który już zaczął czytać treść zawartą w samym dokumencie HTML. Określając atrybuty width i height, pozwalasz przeglądarce na odpowiednie rozmieszczenie treści na stronie, pomimo że same obrazy wczytywane są na końcu.

326

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Rysunek 15.1. Osadzenie obrazu przy użyciu elementu img „ Ostrzeżenie Atrybuty width i height służą do wskazywania rzeczywistego rozmiaru obrazu, a nie takiego, jaki byś chciał. Nie należy ich używać do zmiany wielkości obrazów.

Osadzanie odnośników graficznych Elementu img używa się powszechnie w połączeniu z elementem a (opisanym w rozdziale 8.) do tworzenia odnośników graficznych. Takie odnośniki są odpowiednikami przycisków graficznych w formularzach, które omówiłem w rozdziale 12. W listingu 15.2 widnieje przykład zastosowania elementu img z elementem a. Listing 15.2. Zastosowanie elementów img i a do utworzenia mapy obrazkowej działającej po stronie serwera

Przykład



Oto typowy symbol trzech konkurencji triathlonu.

Pierwszy symbol przedstawia pływanie, drugi kolarstwo, a trzeci bieganie.

Jak widać na rysunku 15.2, przeglądarka nie wyświetla obrazu inaczej. Ważne jest zatem wskazanie użytkownikowi, że dany obraz jest odnośnikiem. Można to zrobić, używając CSS lub — lepiej — samej zawartości obrazu. Po kliknięciu obrazu przeglądarka przechodzi do adresu URL podanego dla atrybutu href elementu-rodzica a. Przypisując elementowi img atrybut ismap, tworzysz mapę obrazu przetwarzaną po stronie serwera, co sprawia, że kliknięty punkt obrazu dodawany jest do adresu URL. Przykładowo, kliknięcie

327

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Rysunek 15.2. Osadzenie obrazu w odnośniku obrazu w punkcie znajdującym się cztery piksele od górnego i dziesięć pikseli od lewego krańca obrazu skutkuje tym, że przeglądarka przechodzi pod następujący adres: http://titan/pliki/otherpage.html?10,4

Jest to — rzecz jasna — adres właściwy dla dokumentu wczytanego z mojego serwera titan, ponieważ adres podany w atrybucie href elementu a jest względnym adresem URL. W listingu 15.3 widnieje treść strony otherpage.html, zawierającej prosty skrypt, który wyświetla współrzędne miejsca kliknięcia. Listing 15.3. Zawartość strony otherpage.html

Druga strona

Współrzędna X: ??

Współrzędna Y: ??

Wynik kliknięcia widać na rysunku 15.3.

Rysunek 15.3. Współrzędne miejsca kliknięcia obrazu osadzonego w odnośniku Założeniem przyświecającym korzystaniu z mapy obrazu działającej po stronie serwera jest to, że serwer powinien reagować inaczej w zależności od tego, który obszar obrazu użytkownik kliknie — np. zwracać różne odpowiedzi. Kiedy element img pozbawiony jest atrybutu ismap, współrzędne kliknięcia nie są dołączane do adresu URL.

328

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Tworzenie mapy obrazu działającej po stronie klienta Możliwe jest utworzenie mapy obrazu działającej po stronie klienta, której klikanie w różne miejsca sprawia, że przeglądarka przechodzi pod różne adresy URL. Dzieje się to bez jakiejkolwiek obsługi ze strony serwera, wobec czego obszary obrazu i wykonywane czynności trzeba definiować przy użyciu elementów HTML. Podstawowym elementem mapy obrazu po stronie klienta jest map, który opisuję w tabeli 15.3. Tabela 15.3. Element map Element

map

Typ elementu

Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą lub strukturalną

Atrybuty lokalne

name

Zawartość

Jeden lub więcej elementów area

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

Przypisany elementowi atrybut id musi mieć tę samą wartość, co atrybut name

Domyślny styl prezentacji

Brak

Element map zawiera jeden lub więcej elementów area, które wskazują klikalne obszary obrazu. Opis elementu area znajduje się w tabeli 15.4. Tabela 15.4. Element area Element

area

Typ elementu

Treściowy

Dozwoleni rodzice

Element map

Atrybuty lokalne

alt, href, target, rel, media, hreflang, type, shape, coords

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 wprowadzono atrybuty rel, media i hreflang. Atrybut nohref wyszedł z użycia.

Domyślny styl prezentacji

area { display: none; }

Atrybuty elementu area można podzielić na dwie kategorie. Do pierwszej należą te dotyczące adresu URL, do którego przechodzi przeglądarka, kiedy użytkownik klika obszar obrazu zdefiniowany elementem area. Te atrybuty, które opisuję w tabeli 15.5, przypominają w działaniu swoje odpowiedniki obsługiwane przez inne elementy. Ciekawsze są jednak atrybuty wchodzące w skład drugiej kategorii: shape i coords, które służą wskazywaniu klikalnych obszarów obrazu. Atrybuty shape i coords działają w zestawieniu. Znaczenie atrybutu coords zależne jest od wartości atrybutu shape, co opisuję w tabeli 15.6.

329

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Tabela 15.5. Odnoszące się do adresu docelowego atrybuty elementu area Atrybut

Opis

href

Adres URL, do którego przechodzi przeglądarka po kliknięciu obszaru.

alt

Treść zastępcza. Por. atrybut elementu img o tej samej nazwie.

target

Kontekst przeglądania, w jakim adres URL ma być wyświetlony. Por. atrybut elementu base o tej samej nazwie (rozdział 7.).

rel

Opisuje relację pomiędzy dokumentem bieżącym a docelowym. Por. atrybut elementu link o tej samej nazwie (rozdział 7.).

media

Medium, w którym dany obszar jest obsługiwany. Por. atrybut elementu style o tej samej nazwie (rozdział 7.).

hreflang

Język dokumentu docelowego.

type

Typ MIME dokumentu docelowego.

Tabela 15.6. Wartości atrybutów shape i coords Wartość shape

Charakter i znaczenie wartości coords

rect

Ta wartość określa prostokątny obszar. Atrybut coords musi się składać z czterech oddzielonych przecinkami liczb całkowitych, określających odległość pomiędzy: • lewą krawędzią obrazu a lewą krawędzią prostokąta, • górną krawędzią obrazu a górną krawędzią prostokąta, • lewą krawędzią obrazu a prawą krawędzią prostokąta, • górną krawędzią obrazu a dolną krawędzią prostokąta.

circle

Ta wartość określa kolisty obszar. Atrybut coords musi się składać z trzech oddzielonych przecinkami liczb całkowitych, określających: • odległość pomiędzy lewą krawędzią obrazu a punktem środkowym koła, • odległość pomiędzy górną krawędzią obrazu a punktem środkowym koła, • promień koła.

poly

Ta wartość określa wielokątny obszar. Atrybut coords musi się składać z przynajmniej sześciu oddzielonych przecinkami liczb całkowitych, gdzie każda para określa jeden z punktów wielokąta.

default

Ta wartość wskazuje domyślny obszar, który obejmuje cały obraz. Atrybutowi coords nie trzeba nadawać żadnej wartości, kiedy atrybutowi shape przypisana jest wartość default.

Skoro już opisałem elementy, to mogę podać przykład ich użycia. Przedstawienie mapy obrazu jest problematyczne o tyle, że elementy area nie są widoczne na ekranie. Na rysunku 15.4 widać zatem dwa obszary obrazu triathlon.png, które chcę określić. W celu uproszczenia tego procesu postanowiłem nadać tym obszarom kształt prostokątny.

Rysunek 15.4. Rozplanowanie obszarów mapy obrazu Na podstawie tego planu można utworzyć mapę i obszary, tak jak w listingu 15.4.

330

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Listing 15.4. Utworzenie mapy obrazu

Przykład



Oto typowy symbol trzech konkurencji triathlonu.

Pierwszy symbol przedstawia pływanie, drugi kolarstwo, a trzeci bieganie.





Zwróć uwagę na to, że przypisałem elementowi img atrybut usemap. Wartością tego atrybutu musi być skrót, czyli ciąg zaczynający się od kratki (#), po której następuje wartość atrybutu name mapy, którą chcesz wykorzystać — w tym przypadku jest to #mymap. W ten sposób łączy się element map z obrazem. Kiedy użytkownik klika symbol pływania, przeglądarka przechodzi do strony swimpage.html. Kiedy użytkownik klika symbol kolarstwa, przeglądarka przechodzi do strony cyclepage.html. Kliknięcie jakiegokolwiek innego obszaru obrazu skutkuje przejściem do strony otherpage.html. „ Wskazówka Zauważ, że do tworzenia odnośników z mapami obrazu działającymi po stronie klienta nie trzeba używać elementu a.

Osadzanie innych dokumentów HTML Element iframe pozwala na osadzenie jednego dokumentu HTML w drugim. W tabeli 15.7 widnieje opis tego elementu. Tabela 15.7. Element iframe Element

iframe

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

src, srcdoc, name, width, height, sandbox, seamless

Zawartość

Treść tekstowa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 wprowadzono atrybuty sandbox i seamless. Atrybuty longdesc, align, allowtransparency, frameborder, marginheight, marginwidth i scrolling wyszły z użycia.

Domyślny styl prezentacji

iframe { border: 2px inset; }

331

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

W listingu 15.5 widnieje przykład zastosowania elementu iframe. Listing 15.5. Zastosowanie elementu iframe

Przykład



Rzeczy, które lubię

• Moje ulubione owoce
• Moje ulubione sporty

W tym przykładzie utworzyłem element iframe z atrybutem name o wartości frame. Tworzy to kontekst przeglądania o nazwie myframe. Mogę teraz wykorzystać ten kontekst przeglądania jako wartość atrybutu target innych elementów, a konkretnie a, form, button, input i base. Elementu a używam do utworzenia pary odnośników, które wczytują w elemencie iframe adresy URL określone dla ich atrybutów href. Widać to na rysunku 15.5.

Rysunek 15.5. Zastosowanie elementu iframe do osadzania zewnętrznych dokumentów HTML Atrybuty width i height określają rozmiar ramki w pikselach. Atrybut src określa adres URL, który jest wyświetlany po wczytaniu strony, a atrybut srcdoc pozwala na określenie zawartości ramki w kodzie strony.

332

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

W HTML5 wprowadzono dwa nowe atrybuty elementu iframe. Pierwszy, seamless, nakazuje przeglądarce wyświetlać treści iframe tak, jakby były integralną częścią głównego dokumentu HTML. Na powyższym rysunku widać, że ramka domyślnie ma obramowanie i że w sytuacji, kiedy treść zajmuje więcej miejsca niż obszar określony atrybutami width i height, w ramce pojawia się pasek przewijania. Drugi atrybut, sandbox, nakłada na dokument HTML pewne ograniczenia. Kiedy element iframe opatrzony jest tym atrybutem bez żadnej określonej wartości, jak widać poniżej: ...

...

to w dokumencie wyłączone są następujące obiekty: • skrypty, • formularze, • wtyczki, • linki odnoszące się do innych kontekstów przeglądania. Ponadto, zawartość elementu iframe traktowana jest tak, jakby pochodziła z innego źródła niż reszta treści dokumentu HTML, przez co uwzględniane są dodatkowe zabezpieczenia. Poszczególne funkcje można odblokować, przypisując atrybutowi sandbox określone wartości: ...

...

W tabeli 15.8 znajdują się dopuszczalne wartości. Niestety, kiedy piszę te słowa, żadna z popularnych przeglądarek nie obsługuje atrybutów sandbox i seamless, przez co nie mogę podać przykładów ich zastosowania. Tabela 15.8. Wartości allow atrybutu sandbox elementu iframe Wartość

Opis

allow-forms

Uaktywnia formularze.

allow-scripts

Uaktywnia skrypty.

allow-top-navigation

Uaktywnia linki odnoszące się do kontekstów przeglądania najwyższego poziomu, co pozwala na przejście do innego dokumentu bądź otworzenie nowej zakładki lub okna.

allow-same-origin

Sprawia, że zawartość elementu iframe traktowana jest tak, jakby była pobrana z tego samego źródła, co reszta dokumentu.

Osadzanie zasobów przy użyciu wtyczek Elementy object i embed powstały w celu rozszerzenia możliwości oferowanych przez przeglądarki, poprzez dodanie obsługi wtyczek przetwarzających te treści, których przeglądarki nie przetwarzały samodzielnie. Elementy te wprowadzono w czasach wojen przeglądarek, o których wspomniałem w rozdziale 1., przy czym każdy z nich został stworzony przez inną stronę konfliktu. Do niedawna specyfikacja HTML 4 uwzględniała element object, ale nie embed, pomimo że był on szeroko używany. Aby wyrównać znaczenie tych elementów, w HTML5 wprowadzono obsługę embed. Możesz zatem korzystać z dwóch bardzo podobnych elementów, których obecność w specyfikacji służy zapewnieniu kompatybilności.

333

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Choć elementów object i embed używa się na ogół do obsługi wtyczek, można je też wykorzystywać do osadzania treści przetwarzanych bezpośrednio przez przeglądarkę, np. obrazów. W dalszej części tego podrozdziału pokażę Ci, dlaczego bywa to przydatne.

Zastosowanie elementu embed Zacznę od opisania elementu embed w tabeli 15.9. Tabela 15.9. Element embed Element

embed

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

src, type, height, width

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Tak, choć od lat był szeroko używanym elementem, mimo że nieuwzględnionym w specyfikacji

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

W listingu 15.6 widać przykład zastosowania elementu embed. Osadziłem tu film z www.youtube.com, w którym inżynierzy Google’a opowiadają o HTML5. Listing 15.6. Zastosowanie elementu embed

Przykład





Atrybut src określa lokalizację treści, a atrybut type jej typ MIME, dzięki czemu przeglądarka wie, co z nią zrobić. Atrybuty width i height określają obszar, jaki osadzone zasoby mają zajmować na ekranie. Wszelkie inne nadane atrybuty traktowane są jako parametry wtyczki obsługującej zasoby. W tym przypadku nadałem elementowi atrybut allowfullscreen, dzięki któremu można puścić film z wtyczki YouTube na całym ekranie. Wygląd tych treści widać na rysunku 15.6.

Zastosowanie elementów object i param Element object służy do tego samego, co element embed, ale działa nieco inaczej i ma pewne dodatkowe funkcje. W tabeli 15.10 znajduje się opis elementu object.

334

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Rysunek 15.6. Osadzenie filmu z YouTube Tabela 15.10. Element object Element

object

Typ elementu

Uznawany jest za element treściowy, kiedy zawiera treść właściwą lub elementy treściowe, a za element struktury, kiedy zawiera elementy struktury

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą lub strukturalną

Atrybuty lokalne

data, type, height, width, usemap, name, form

Zawartość

Dowolna liczba elementów param (choć żaden nie jest wymagany) i opcjonalne treści właściwe lub strukturalne jako treści zastępcze. W dalszej części rozdziału zapoznasz się z przykładem.

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Nie

Zmiany w HTML5

W HTML5 pojawił się atrybut form. Elementy archive, classid, code, codebase, codetype, declare, standby, align, hspace, vspace i border wyszły z użycia.

Domyślny styl prezentacji

Brak

W listingu 15.7 widnieje przykład wykorzystania elementu object do osadzenia tego samego filmu z YouTube, co w poprzednim przykładzie. Listing 15.7. Zastosowanie elementów object i param

Przykład



335

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW





Atrybut data określa lokalizację zasobów, a type, width i height działają tak samo, jak w elemencie embed. Parametry przekazywane wtyczce definiuje się przy użyciu elementu param. Każdy element param definiuje jeden parametr. Element ten opisany jest w tabeli 15.11. Atrybuty name i value określają nazwę i wartość parametru. Tabela 15.11. Element param Element

param

Typ elementu

Nie dotyczy

Dozwoleni rodzice

Element object

Atrybuty lokalne

name, value

Zawartość

Brak

Znaczniki

Samotny znacznik

Nowość w HTML5

Nie

Zmiany w HTML5

Brak

Domyślny styl prezentacji

param { display: none; }

Określenie treści zastępczej Jedną z zalet elementu object jest to, że można w nim podać treść wyświetlaną w sytuacji, kiedy określone zasoby nie są dostępne. W listingu 15.8 widnieje prosty przykład. Listing 15.8. Wykorzystanie treści zastępczej elementu object

Przykład





Ojej! Nie można wyświetlić tych zasobów



W powyższym przykładzie wskazałem w atrybucie data nieistniejący plik. Przeglądarka usiłuje wczytać nieistniejące zasoby i — kiedy jej się to nie udaje — wyświetla zamiast niej treść zawartą w elemencie object. Elementy param są w takiej sytuacji ignorowane, wobec czego na ekranie pojawia się jedynie treść właściwa i strukturalna, tak jak widać to na rysunku 15.7.

336

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Rysunek 15.7. Treść zastępcza elementu object Zauważ, że pominąłem w listingu atrybut type. Kiedy żaden taki atrybut nie jest obecny, przeglądarka próbuje określić typ zasobów na podstawie samych danych. Przy niektórych zestawieniach przeglądarek i wtyczek wtyczka i tak jest wczytywana, nawet jeśli nie można wyświetlić zawartej w niej treści. Wtedy na ekranie pojawia się pusty obszar, a treść zastępcza nie jest wykorzystana.

Inne zastosowania elementu object Choć elementu object używa się zazwyczaj do osadzania zasobów obsługiwanych przez wtyczki, utworzono go pierwotnie jako ogólny element mający zastępować inne elementy, m.in. img. W kolejnych punktach opiszę niektóre z innych sposobów na wykorzystanie tego elementu. Pomimo że funkcje te były obecne od jakiegoś czasu w specyfikacji HTML, nie każda przeglądarka obsługuje wszystkie z nich. Poniższe punkty uwzględniam tutaj dla porządku, ale mimo wszystko zalecam korzystać z bardziej wyspecjalizowanych elementów, takich jak s. „ Wskazówka Atrybut form umożliwia powiązanie elementu object z formularzami HTML (o których traktował rozdział 12.). Jest to nowość w HTML5. Obecnie żadna przeglądarka nie obsługuje tego atrybutu, a specyfikacja HTML5 nie mówi nic konkretnego o tym, jak ta funkcja miałaby działać.

Zastosowanie elementu object do osadzania obrazów Jak już wspomniałem, element object powstał m.in. po to, żeby zastępować elementy img. Możesz wobec tego używać elementu object do zamieszczania obrazów w dokumentach HTML. W listingu 15.9 widnieje przykład. Listing 15.9. Osadzenie obrazu przy użyciu elementu object

Przykład







W powyższym przykładzie odniosłem atrybut data do pliku graficznego, z którego korzystałem w poprzednich przykładach. Przeglądarka osadza obraz i wyświetla go tak samo, jak gdybym użył elementu img (rysunek 15.8).

337

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Rysunek 15.8. Osadzenie obrazu przy użyciu elementu object

Zastosowanie elementu object do tworzenia map obrazu działających po stronie klienta Elementu object możesz również używać do tworzenia map obrazu działających po stronie klienta. Atrybut usemap służy do powiązania elementu map z elementem object, tak jak widać to w listingu 15.10. Wykorzystałem do tego te same elementy map i area, których użyłem w tworzeniu mapy opartej na elemencie img. Listing 15.10. Utworzenie mapy obrazu działającej po stronie klienta przy użyciu elementu object

Przykład









„ Ostrzeżenie Nie wszystkie przeglądarki obsługują mapy obrazu oparte na elemencie object. Kiedy piszę te słowa, takiej obsługi pozbawiony jest Google Chrome i Apple Safari.

Zastosowanie elementu object jako kontekstu przeglądania Elementu object można użyć do osadzenia jednego dokumentu HTML w drugim, tak samo jak przy użyciu elementu iframe. Wykorzystanie atrybutu name tworzy kontekst przeglądania, który można wykorzystać z atrybutem target innych elementów, takich jak a i form. W listingu 15.11 widnieje tego przykład. Listing 15.11. Utworzenie kontekstu przeglądania przy użyciu elementu object



338

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Przykład



Rzeczy, które lubię

• Moje ulubione owoce
• Moje ulubione sporty

Funkcja ta działa tylko wtedy, kiedy wartość atrybutu type określona jest jako text/html, choć i tak nie wszystkie przeglądarki ją obsługują. W chwili, kiedy to piszę, Google Chrome i Apple Safari to jedyne popularne przeglądarki, które oferują taką obsługę.

Osadzanie wyobrażeń wartości liczbowych W HTML5 pojawiły się dwa nowe elementy, które pozwalają na zamieszczanie w dokumentach wyobrażeń wartości liczbowych.

Paski postępu Element progress służy do wskazywania postępów w ukończeniu zadania. W tabeli 15.12 znajduje się opis tego elementu. Tabela 15.12. Element progress Element

progress

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

value, max, form

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

339

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Atrybut value określa progresję w skali od zera do wartości atrybutu max. Kiedy atrybut max jest pominięty, skala rozciąga się od zera do 1. Postępy można wyrażać liczbami zmiennoprzecinkowymi w rodzaju 0.3 lub 30%. W listingu 15.12 widnieje element progress wraz z kilkoma przyciskami. Naciśnięcie przycisku zmienia wartość wyświetlaną przez element progress. Przyciski z elementem progress połączyłem za pomocą prostego kodu JavaScript. Wykorzystane tutaj techniki opiszę w części IV książki. Listing 15.12. Zastosowanie elementu progress

Przykład

30% 60% 90%

Wygląd paska postępu wyświetlającego kolejne wartości widać na rysunku 15.9.

Rysunek 15.9. Zastosowanie elementu progress

Przedstawienie wartości z zakresu Element meter służy do wyświetlania wartości w kontekście zakresu dopuszczalnych wartości. W tabeli 15.13 znajduje się jego opis.

340

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Tabela 15.13. Element meter Element

meter

Typ elementu

Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać treść właściwą

Atrybuty lokalne

value, min, max, low, high, optimum, form

Zawartość

Treść właściwa

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

Atrybuty min i max określają wartości krańcowe zakresu i można je definiować liczbami zmiennoprzecinkowymi. Element meter wyświetlany jest w trzech stanach: „za mało”, „za dużo” i „prawidłowo”. Atrybut low określa wartość, poniżej której podawane wartości uznawane są za zbyt niskie, a atrybut high wartość, powyżej której wartości uznawane są za zbyt wysokie. Atrybutem optimum określa się „prawidłową” wartość. W listingu 15.13 widać przykład zastosowania tych atrybutów z elementem meter. Listing 15.13. Zastosowanie elementu meter

Przykład

30 60 90

W tym przykładzie elementy button nadają atrybutowi value elementu meter wartości znajdujące się we wszystkich trzech zakresach. Wygląd tego elementu w przeglądarce widać na rysunku 15.10.

341

ROZDZIAŁ 15. „ OSADZANIE ZASOBÓW

Rysunek 15.10. Zastosowanie elementu meter Atrybut optimum obecnie nie decyduje w żaden sposób o wyglądzie elementu meter. Przeglądarki obsługujące element meter odróżniają pod tym względem jedynie wartości niższe od wartości low i wyższe od wartości high, jak zresztą widać na rysunku.

Osadzanie innych elementów Do osadzania zasobów w dokumentach HTML służą też inne elementy, które omówię w dalszych rozdziałach. Dla porządku jednak wspominam o nich tutaj.

Osadzanie zasobów audiowizualnych W HTML5 znajduje się kilka nowych atrybutów, które obsługują osadzanie zasobów audiowizualnych w dokumencie HTML bez użycia wtyczek: audio, video, source i track. Omówię je szerzej w rozdziale 34.

Osadzanie grafiki Element canvas jest kolejną ważną funkcją, którą wprowadzono w HTML5. Pozwala on na zamieszczanie w dokumentach HTML dynamicznej grafiki i omówię go w rozdziałach 35. i 36.

Podsumowanie W tym rozdziale przedstawiłem elementy służące do wzbogacania dokumentów HTML osadzonymi zasobami — od prostych obrazów po rozbudowane i rozszerzalne zasoby obsługiwane wtyczkami.

342

CZĘŚĆ III

Kaskadowe arkusze stylów

W tej części zademonstruję, jak wykorzystać kaskadowe arkusze stylów (CSS) do określania wyglądu treści wyświetlanych w przeglądarce. CSS bywa zdumiewająco subtelny i ekspresyjny oraz pozwala na zarządzanie wyglądem treści z zaskakująco niewielkim wysiłkiem.

ROZDZIAŁ 16

Wprowadzenie do CSS

W najbliższych rozdziałach omówię właściwości zdefiniowane w CSS, czyli kaskadowych arkuszach stylów. Podstawy CSS scharakteryzowałem pokrótce w rozdziale 4., a w tym rozdziale — zanim jeszcze przejdę do szczegółów — zajmę się pewnymi ogólnymi sprawami.

Standaryzacja CSS CSS ma skomplikowaną przeszłość. W czasach, kiedy przeglądarki traktowano jako produkty sprzyjające fragmentacji rynku, producenci wykorzystywali CSS jako główne narzędzie do tworzenia funkcji występujących wyłącznie w ich produktach. Był to niezły bałagan — właściwości o jednakowych nazwach obsługiwane były różnie, a właściwości właściwe dla danych przeglądarek służyły do obsługi funkcji poszczególnych przeglądarek. Chodziło o to, by zmusić deweloperów do tworzenia stron i aplikacji działających tylko w wybranej przeglądarce. Szczęśliwie, przeglądarki obecnie konkurują ze sobą głównie w dziedzinie szybkości, łatwości obsługi i — w coraz większym stopniu — zgodności ze standardami takimi jak CSS. Jednocześnie proces standaryzacji, niestety, nie jest idealny. Jak się przekonasz w kolejnych rozdziałach, funkcjonalność CSS jest rozbudowana. Zamiast tworzyć jednolity standard, W3C (instytucja odpowiedzialna za standaryzację zarówno CSS, jak i HTML) postanowiło podzielić CSS3 na moduły, które rozwijają się niezależnie od siebie. Założenie jest świetne i z pewnością lepsze od przestrzegania jednolitości, lecz w związku z tym nie ma żadnego ogólnego standardu CSS3. Trzeba wobec tego rozważać zastosowanie każdego z modułów po kolei i decydować, czy są wystarczająco powszechnie obsługiwane, by warto było z nich korzystać. Kolejnym utrudnieniem jest to, że mało który z modułów CSS3 przeszedł do końca proces standaryzacji. Niektóre moduły, a w szczególności te, które wprowadzają do CSS nowe funkcje, są dopiero na wczesnym etapie standaryzacji i mogą się jeszcze zmienić. Właściwości mogą się pojawiać, zmieniać i znikać; moduły mogą być łączone lub wycofywane; relacje pomiędzy poszczególnymi modułami też mogą się zmieniać, jako że właściwości i wartości stosowane w różnych modułach często bywają współzależne. Niektóre z nowszych funkcji mogły już ulec zmianie od czasu wydania tej książki. W kolejnych rozdziałach omówię właściwości modułów, które sprawiają wrażenie stabilnych i po których można się spodziewać szybkiej implementacji w popularnych przeglądarkach. Funkcje te są w większości stabilne i można spokojnie przyjąć, że są obsługiwane przez najnowsze wersje przeglądarek. Żeby pomóc Ci w rozeznaniu się, czy dana właściwość jest odpowiednia dla Twoich projektów, w punkcie „Spis właściwości” podałem wypis wersji CSS, w których właściwości zostały wprowadzone. W okresach większej niestabilności definicji modułów przeglądarki obsługują funkcje używające prefiksów właściwych dla poszczególnych przeglądarek. Mimo wszystko i tak jest lepiej niż dawniej — takie próbne implementacje pozwalają pionierom na sprawdzenie, jak przeglądarki obsługują poszczególne

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

zestawy właściwości. Sam zazwyczaj unikam korzystania z działających w ten sposób właściwości, lecz niektóre funkcje CSS3 są tak istotne, że w podanych tu przykładach zdecydowałem się skorzystać z owych prefiksów. We wszystkich przypadkach implementacje właściwe konkretnym przeglądarkom przystają dość dobrze do specyfikacji. Każda przeglądarka używa innego prefiksu. Prefiksy najpopularniejszych przeglądarek znajdziesz w tabeli 16.1. Tabela 16.1. Prefiksy przeglądarek Przeglądarka

Prefiks

Chrome Safari

-webkit-

Opera

-o-

Firefox

-moz-

Internet Explorer

-ms-

Model polowy Jedną z koncepcji leżących u podstaw CSS jest model polowy. Wyświetlany na stronie element zajmuje prostokątny obszar, określany mianem pola elementu. Składa się ono z czterech części, co widać na rysunku 16.1.

Rysunek 16.1. Model polowy CSS Widoczne są dwie części: zawartość elementu i jego obramowanie. Dopełnienie to przestrzeń pomiędzy treścią a obramowaniem, a margines to przestrzeń między obramowaniem a innymi znajdującymi się na stronie elementami. Relacje pomiędzy tymi czterema częściami trzeba poznać, aby móc używać CSS jak najsprawniej. W kolejnych rozdziałach przedstawię Ci właściwości CSS pozwalające na definiowanie marginesów, dopełnień, obramowań oraz określanie ogólnego wyglądu treści. Element może zawierać inne elementy. W takim przypadku pole elementu-rodzica jest kontenerem elementu-dziecka. Ta relacja ukazana jest na rysunku 16.2. Do określenia wyglądu elementu możesz wykorzystać właściwości kontenera — dotyczy to nie tylko kaskadowych i dziedziczonych właściwości, ale także właściwości definiowanych dosłownie, tak jak w przypadku tworzenia układu elementów (co omówię w rozdziale 21.).

Spis selektorów Selektory CSS opiszę szerzej w rozdziałach 17. i 18. W tabeli 16.2 znajduje się spis selektorów wraz z krótkimi opisami i wypisem wersji CSS, w których się pojawiły.

346

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

Rysunek 16.2. Relacja pól rodzica i jego dzieci Tabela 16.2. Selektory CSS Selektor

Opis

*

Wersja CSS

Wybiera wszystkie elementy.

2

Wybiera elementy określonego typu.

1

.

Wybiera elementy określonej klasy.

1

#

Wybiera elementy o określonej wartości atrybutu id.

1

[atrybut]

Wybiera elementy, którym przypisano dany atrybut, niezależnie od jego wartości.

2

[atrybut="wartość"]

Wybiera elementy, którym przypisano dany atrybut o określonej wartości.

2

[atrybut^="wartość"]

Wybiera elementy, którym przypisano dany atrybut o wartości zaczynającej się podanym ciągiem.

3

[atrybut$="wartość"]

Wybiera elementy, którym przypisano dany atrybut o wartości kończącej się podanym ciągiem.

3

[atrybut*="wartość"]

Wybiera elementy, którym przypisano dany atrybut o wartości zawierającej podany ciąg.

3

[atrybut~="wartość"]

Wybiera elementy, którym przypisano dany atrybut o różnych wartościach, w tym tej, którą podano w selektorze.

2

[atrybut|="wartość"]

Wybiera elementy, którym przypisano dany atrybut o serii oddzielonych dywizem wartości, spośród których pierwsza to ta, którą podano w selektorze.

2

,

Wybiera podane elementy.

1



Wybiera elementy określone drugim selektorem, a które są potomkami elementów określonych pierwszym selektorem.

1

>

Wybiera elementy określone drugim selektorem, które są dziećmi elementów określonych pierwszym selektorem.

2

347

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

Tabela 16.2. Selektory CSS — ciąg dalszy Selektor

Opis

Wersja CSS

+

Wybiera elementy określone drugim selektorem, a które znajdują się bezpośrednio po elemencie określonym pierwszym selektorem.

2

~

Wybiera elementy określone drugim selektorem, a które znajdują się po elemencie określonym pierwszym selektorem.

3

::first-line

Wybiera pierwszy wiersz bloku tekstowego.

1

::first-letter

Wybiera pierwszą literę bloku tekstowego.

1

:before :after

Wstawia treść przed wybranym elementem lub po nim.

2

:root

Wybiera element główny dokumentu.

3

:first-child

Wybiera elementy będące pierwszymi dziećmi swoich rodziców.

2

:last-child

Wybiera elementy będące ostatnimi dziećmi swoich rodziców.

3

:only-child

Wybiera elementy będące jedynymi dziećmi swoich rodziców.

3

:only-of-type

Wybiera elementy będące jedynymi określonego typu dziećmi swoich rodziców.

3

:nth-child(n)

Wybiera elementy będące n-tymi dziećmi swoich rodziców.

3

:nth-last-child(n)

Wybiera elementy będące od końca n-tymi dziećmi swoich rodziców.

3

:nth-of-type(n)

Wybiera elementy będące n-tymi określonego typu dziećmi swoich rodziców.

3

:nth-last-of-type(n)

Wybiera elementy będące n-tymi od końca określonego typu dziećmi swoich rodziców.

3

:enabled

Wybiera odblokowane elementy.

3

:disabled

Wybiera zablokowane elementy.

3

:checked

Wybiera zaznaczone elementy.

3

:default

Wybiera domyślne elementy.

3

:valid :invalid

Wybiera elementy input o poprawnych lub niepoprawnych danych, na podstawie weryfikacji.

3

:in-range :out-of-range

Wybiera elementy input o wartościach znajdujących się w określonym zakresie lub poza nim.

3

:required :optional

Wybiera elementy input na podstawie tego, czy mają nadany atrybut required.

3

:link

Wybiera odnośniki.

1

:visited

Wybiera odnośniki do adresów odwiedzonych przez użytkownika.

1

:hover

Wybiera elementy znajdujące się na ekranie pod kursorem.

2

:active

Wybiera elementy uaktywniane przez użytkownika. Zazwyczaj są to elementy znajdujące się pod kursorem, kiedy klawisz myszy jest przytrzymany.

2

348

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

Tabela 16.2. Selektory CSS — ciąg dalszy Selektor

Opis

Wersja CSS

:focus

Wybiera aktywny element.

2

:not()

Neguje wybór, np. wybiera wszystkie elementy, które nie pasują do .

3

:empty

Wybiera elementy, które nie mają żadnych dzieci.

3

:lang()

Wybiera elementy na podstawie wartości ich atrybutu lang.

2

:target

Wybiera element, do którego odnosi się identyfikator URL.

3

Spis właściwości W rozdziałach 19. – 24. omówię właściwości CSS. W poniższych punktach znajdziesz krótkie opisy tych właściwości wraz z wypisami wersji, w których je wprowadzono.

Właściwości obramowania i tła W tabeli 16.3 znajduje się opis właściwości służących do określania obramowań i teł elementów. Omówię je szerzej w rozdziale 19. Tabela 16.3. Właściwości obramowania i tła Selektor

Opis

Wersja CSS

background

Określa wszystkie wartości tła.

1

background-attachment

Określa zaczepienie tła elementu; przydaje się w pracy z elementami o przewijanych obszarach.

1

background-clip

Określa obszar, na którym kolor lub obraz tła są widoczne.

3

background-color

Określa kolor tła.

1

background-image

Określa obraz tła.

1

background-origin

Określa miejsce, od którego obraz tła jest rozrysowywany.

3

background-position

Określa położenie obrazu w polu elementu.

1

background-repeat

Określa rodzaj powtórzeń obrazu tła.

1

background-size

Określa wielkość obrazu tła.

3

border

Określa wartości obramowania wszystkich krawędzi.

1

border-bottom

Określa wartości obramowania dolnej krawędzi.

1

border-bottom-color

Określa kolor obramowania dolnej krawędzi.

1

border-bottom-left-radius

Określa promień narożnika. Służy do tworzenia zakrzywionych obramowań.

3

border-bottom-right-radius

Określa promień narożnika. Służy do tworzenia zakrzywionych obramowań.

3

border-bottom-style

Określa styl obramowania dolnej krawędzi.

1

border-bottom-width

Określa szerokość obramowania dolnej krawędzi.

1

border-color

Określa kolor obramowania wszystkich krawędzi.

1

349

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

Tabela 16.3. Właściwości obramowania i tła — ciąg dalszy Selektor

Opis

Wersja CSS

border-image

Określa obraz wykorzystany jako krawędź.

3

border-image-outset

Określa obszar poza polem, na którym obramowanie ma być wyświetlane.

3

border-image-repeat

Określa rodzaj powtórzeń obrazu krawędzi.

3

border-image-slice

Określa fragmenty obrazu.

3

border-image-source

Określa źródło obrazu krawędzi.

3

border-image-width

Określa szerokość obrazu krawędzi.

3

border-left

Określa wartości obramowania lewej krawędzi.

1

border-left-color

Określa kolor obramowania lewej krawędzi.

1

border-left-style

Określa styl obramowania lewej krawędzi.

1

border-left-width

Określa szerokość obramowania lewej krawędzi.

1

border-radius

Określa zakrzywione narożniki obramowania.

3

border-right

Określa wartości obramowania prawej krawędzi.

1

border-right-color

Określa kolor obramowania prawej krawędzi.

1

border-right-style

Określa styl obramowania prawej krawędzi.

1

border-right-width

Określa szerokość obramowania prawej krawędzi.

1

border-style

Określa styl wszystkich krawędzi obramowania.

1

border-top

Określa wartości obramowania górnej krawędzi.

1

border-top-color

Określa kolor obramowania górnej krawędzi.

1

border-top-left-radius

Określa promień narożnika. Służy do tworzenia zakrzywionych obramowań.

3

border-top-right-radius

Określa promień narożnika. Służy do tworzenia zakrzywionych obramowań.

3

border-top-style

Określa styl obramowania górnej krawędzi.

1

border-top-width

Określa szerokość obramowania górnej krawędzi.

1

border-width

Określa szerokość obramowania.

1

box-shadow

Nadaje jeden lub więcej cieni.

3

outline-color

Określa kolor obrysu.

2

outline-offset

Określa odstęp obrysu od treści.

2

outline-style

Określa styl obrysu.

2

outline-width

Określa szerokość obrysu.

2

outline

Określa obrys jedną deklaracją.

2

Właściwości modelu polowego W tabeli 16.4 znajduje się spis właściwości służących do konfiguracji pola elementu. Omówię je szerzej w rozdziale 20.

350

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

Tabela 16.4. Podstawowe właściwości pola Selektor

Opis

Wersja CSS

box-sizing

Określa pole, do którego odnoszą się właściwości rozmiaru.

3

clear

Oczyszcza jedną lub obydwie krawędzie pływającego elementu.

1

display

Określa rodzaj pola elementu.

1

float

Wyrównuje element do lewej lub prawej krawędzi kontenera albo do krawędzi innego pływającego elementu.

1

height

Określa wysokość pola elementu.

1

margin

Określa margines wszystkich czterech krawędzi.

1

margin-bottom

Określa margines dolnej krawędzi pola.

1

margin-left

Określa margines lewej krawędzi pola.

1

margin-right

Określa margines prawej krawędzi pola.

1

margin-top

Określa margines górnej krawędzi pola.

1

max-height

Określa maksymalną wysokość elementu.

2

max-width

Określa maksymalną szerokość elementu.

2

min-height

Określa minimalną wysokość elementu.

2

min-width

Określa minimalną szerokość elementu.

2

overflow

Określa styl przepełnienia dla obydwu osi.

2

overflow-x

Określa obsługę przepełnienia osi x.

3

overflow-y

Określa obsługę przepełnienia osi y.

3

padding

Określa dopełnienie wszystkich czterech krawędzi.

1

padding-bottom

Określa dopełnienie dolnej krawędzi.

1

padding-left

Określa dopełnienie lewej krawędzi.

1

padding-right

Określa dopełnienie prawej krawędzi.

1

padding-top

Określa dopełnienie górnej krawędzi.

1

visibility

Określa widzialność elementu.

2

width

Określa szerokość elementu.

1

Właściwości layoutu W tabeli 16.5 znajduje się spis właściwości służących do tworzenia układu elementów. Opiszę je szerzej w rozdziale 21. Tabela 16.5. Właściwości layoutu Selektor

Opis

Wersja CSS

bottom

Określa oddalenie elementu od dolnej krawędzi.

2

column-count

Określa liczbę kolumn w wielokolumnowym układzie.

3

column-fill

Określa rozmieszczenie treści w kolumnach wielokolumnowego układu.

3

column-gap

Określa oddalenie między kolumnami w wielokolumnowym układzie.

3

351

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

Tabela 16.5. Właściwości layoutu — ciąg dalszy Selektor

Opis

Wersja CSS

column-rule

Określa odstępy między kolumnami w wielokolumnowym układzie.

3

column-rule-color

Określa kolor odstępów między kolumnami w wielokolumnowym układzie.

3

column-rule-style

Określa styl odstępów między kolumnami w wielokolumnowym układzie.

3

column-rule-width

Określa szerokość odstępów między kolumnami w wielokolumnowym układzie.

3

columns

Określa właściwości column-span i column-width w wielokolumnowym układzie.

3

column-span

Określa liczbę kolumn obejmowanych przez element w wielokolumnowym układzie.

3

column-width

Określa szerokość kolumn w wielokolumnowym układzie.

3

display

Określa sposób, w jaki elementy wyświetlane są na stronie.

1

flex-align flex-direction flex-order flex-pack

Te właściwości definiowane są przez elastyczny układ pól, lecz nie są jeszcze zaimplementowane.

3

left

Określa oddalenie elementu od lewej krawędzi.

2

position

Określa metodę pozycjonowania elementu.

2

right

Określa oddalenie elementu od prawej krawędzi.

2

top

Określa oddalenie elementu od górnej krawędzi.

2

z-index

Określa kolejność warstw pozycjonowanych elementów.

2

Właściwości tekstu W tabeli 16.6 znajduje się spis właściwości służących do stylizowania tekstu. Opiszę je szerzej w rozdziale 22. Tabela 16.6. Właściwości tekstu Selektor

Opis

Wersja CSS

@font-face

Określa font internetowy i jego źródło.

3

direction

Określa kierunek tekstu.

2

font

Określa szczegóły zastosowania fonta w ramach deklaracji zbiorczej.

1

font-family

Określa listę fontów do wykorzystania, w preferowanej kolejności.

1

font-size

Określa wielkość tekstu.

1

font-style

Określa, czy tekst jest normalny, pochylony, czy pogrubiony.

1

font-variant

Określa, czy tekst ma być wyświetlany kapitalikami.

1

font-weight

Określa grubość tekstu.

1

letter-spacing

Określa odstępy międzyliterowe.

1

line-height

Określa odstępy międzywierszowe.

1

352

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

Tabela 16.6. Właściwości tekstu — ciąg dalszy Selektor

Opis

Wersja CSS

text-align

Określa wyrównanie tekstu.

1

text-decoration

Określa dekorację tekstu.

1

text-indent

Określa wcięcie tekstu.

1

text-justify

Określa wyjustowanie tekstu.

3

text-shadow

Nadaje blokowi tekstu cień.

3

text-transform

Przekształca blok tekstu.

1

word-spacing

Określa odstęp międzywyrazowy.

1

Właściwości przejść, animacji i przekształceń W tabeli 16.7 znajduje się spis właściwości służących do zmiany wyglądu elementów, niekiedy stopniowo z upływem czasu. Opiszę je szerzej w rozdziale 23. Tabela 16.7. Tabela właściwości przejść, animacji i przekształceń Właściwość

Opis

Wersja CSS

@keyframes

Określa jedną lub więcej klatek kluczowych animacji.

3

animation

Określa animację w jednej deklaracji.

3

animation-delay

Określa opóźnienie przed odtworzeniem animacji.

3

animation-direction

Określa sposób, w jaki powtórzenia animacji są odgrywane.

3

animation-duration

Określa czas trwania animacji.

3

animation-iteration-count

Określa liczbę powtórzeń animacji.

3

animation-name

Określa nazwę zbioru klatek kluczowych animacji.

3

animation-play-state

Określa, czy animacja jest odgrywana, czy wstrzymana.

3

animation-timing-function

Określa funkcję służącą do obliczania wartości właściwości pomiędzy klatkami kluczowymi aplikacji.

3

transform

Określa przekształcenie elementu.

3

transform-origin

Określa punkt wyjścia przekształcenia.

3

transition

Określa przejście w jednej deklaracji.

3

transition-delay

Określa opóźnienie przed rozpoczęciem przejścia.

3

transition-duration

Określa czas trwania przejścia.

3

transition-property

Określa jedną lub więcej właściwości, które ulegają zmianie w ramach przejścia.

3

transition-timing-function

Określa funkcję służącą do obliczenia pośrednich wartości właściwości w ramach przejścia.

3

Inne właściwości W tabeli 16.8 znajduje się spis właściwości, które nie przystają do tematyki któregokolwiek z pozostałych rozdziałów. Opiszę je szerzej w rozdziale 24.

353

ROZDZIAŁ 16. „ WPROWADZENIE DO CSS

Tabela 16.8. Inne właściwości Właściwość

Opis

Wersja CSS

border-collapse

Określa styl wyświetlania obramowania sąsiadujących komórek tabeli.

2

border-spacing

Określa odstępy pomiędzy obramowaniami komórek tabeli.

2

caption-side

Określa położenie podpisu tabeli.

2

color

Określa kolor pierwszego planu elementu.

1

cursor

Określa styl kursora.

2

empty-cells

Określa styl rozrysowania obramowania wokół pustych komórek tabeli.

2

list-style

Określa styl listy w jednej deklaracji.

1

list-style-image

Określa obraz do wykorzystania w charakterze punktów listy.

1

list-style-position

Określa położenie punktu listy względem pozycji na liście.

1

list-style-type

Określa typ punktów w liście.

1

opacity

Określa przezroczystość elementu.

3

table-layout

Określa sposób definiowania rozmiaru tabeli.

2

Podsumowanie W tym rozdziale ułożyłem podwaliny pod kolejne rozdziały, w których omówię właściwości CSS. Podałem też spisy, po które będziesz mógł sięgnąć podczas pracy nad rzeczywistymi projektami wykorzystującymi CSS. Koniecznie musisz brać pod uwagę, w której wersji CSS dane właściwości zostały wprowadzone, kiedy rozważasz wykorzystanie różnych funkcji CSS w projektach. Jak wspomniałem na początku rozdziału, niektóre moduły CSS3 nie są jeszcze jasno określone, a inne nie są na tyle powszechnie obsługiwane, jak byśmy chcieli.

354

ROZDZIAŁ 17

Selektory CSS — część I

W rozdziale 4. objaśniłem, że selektory CSS służą do wskazywania, na które elementy ma być nałożony styl zawarty w elemencie style lub zewnętrznym arkuszu stylów. W tym i następnym rozdziale opiszę i przedstawię wykorzystanie głównych selektorów CSS3. Zobaczysz, jak łatwo wybierać elementy i określać zarówno szerokie, jak i bardzo konkretne warunki. Te selektory wprowadzano sukcesywnie w kolejnych wersjach CSS. Popularne przeglądarki obsługują je dość dobrze, ale ich obsługa w mniej popularnych przeglądarkach bywa niepełna. Przy omówieniu każdego selektora podaję wersję CSS, w której został wprowadzony, żebyś mógł się zorientować, czy możesz na nich polegać. W tabeli 17.1 znajduje się streszczenie całego rozdziału. Tabela 17.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Wybranie wszystkich elementów.

Użyj selektora uniwersalnego.

17.1

Wybranie elementów według typu.

Użyj selektora typu.

17.2

Wybranie elementów według wartości globalnego atrybutu class.

Użyj selektora klasy.

17.3, 17.4

Wybranie elementów według wartości globalnego atrybutu id.

Użyj selektora id.

17.5

Wybranie elementów według atrybutów.

Użyj selektorów atrybutów.

17.6 – 17.8

Wybranie elementów zestawem selektorów.

Oddziel selektory przecinkiem.

17.9

Wybranie dziedziców elementu.

Oddziel selektory spacją.

17.10, 17.11

Wybranie dzieci elementu.

Użyj selektora >.

17.12

Wybranie braci elementu.

Użyj selektora + lub ~.

17.13, 17.14

Wybranie pierwszego wiersza bloku tekstu.

Użyj selektora ::first-line.

17.15

Wybranie pierwszej litery bloku tekstu.

Użyj selektora ::first-letter.

17.16

Zamieszczenie treści w elemencie.

Użyj selektora :before i :after.

17.17

Zamieszczenie treści numerycznej w elemencie.

Użyj funkcji counter.

17.18

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Podstawowe selektory CSS Pewne selektory są bardzo łatwe w użyciu. Myśl o nich jako selektorach podstawowych. Możesz ich używać do wybierania elementów dokumentu na wysokim poziomie bądź jako podstawy do tworzenia bardziej szczegółowych wyborów w zestawieniu z innymi selektorami (co omówię w dalszej części rozdziału). W poniższych punktach pokażę Ci, jak używać podstawowych selektorów.

Wybranie wszystkich elementów Selektor uniwersalny odnosi się do każdego elementu w dokumencie. Jest to najbardziej podstawowy selektor CSS, ale rzadko się go używa właśnie dlatego, że odnosi się do tylu elementów. W tabeli 17.2 znajduje się jego opis. Tabela 17.2. Selektor uniwersalny Selektor:

*

Odnosi się do:

Wszystkich elementów

Obecny od wersji CSS:

2

W listingu 17.1 widnieje przykład stylu wykorzystującego selektor uniwersalny. Listing 17.1. Zastosowanie selektora uniwersalnego

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Styl, który zdefiniowałem w listingu 17.1, tworzy cienkie czarne obramowanie wokół zaznaczonych elementów. Z tego selektora będę korzystał w tym rozdziale, żeby pokazywać, do czego poszczególne selektory się odnoszą. Rezultat widać na rysunku 17.1.

Rysunek 17.1. Zastosowanie uniwersalnego selektora CSS 356

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Jeżeli powyższy rysunek wydaje Ci się dziwny, to wynika to z tego, że selektor uniwersalny rzeczywiście odnosi się do każdego elementu dokumentu, w tym również elementów html i body. Jest on zatem efektywnym, lecz niewysublimowanym narzędziem, którego należy używać ostrożnie.

Wybieranie elementów według typu Wszystkie znajdujące się w dokumencie elementy określonego typu możesz wybrać, podając ów typ elementu jako selektor — jeżeli chcesz, na przykład, wybrać wszystkie elementy a, to podajesz selektor a. W tabeli 17.3 znajduje się opis tego selektora. Tabela 17.3. Selektor typu elementu Selektor:

Odnosi się do:

Wszystkich elementów określonego typu

Obecny od wersji CSS:

1

W listingu 17.2 widnieje przykład zastosowania tego selektora. Listing 17.2. Zastosowanie selektora typu elementów

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Efekt użycia selektora widać na rysunku 17.2.

Rysunek 17.2. Wybieranie elementów według typu „ Wskazówka Styl możesz nałożyć na więcej niż jeden element — w tym celu wystarczy podać nazwy elementów oddzielone przecinkami. Przykład tej techniki znajdziesz w punkcie „Łączenie selektorów”.

357

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Wybieranie elementów według klasy Selektor klasy umożliwia wybieranie elementów przypisanych do konkretnej klasy przy użyciu atrybutu globalnego class. W tabeli 17.4 znajduje się jego opis. Sam atrybut class opisałem w rozdziale 3. Tabela 17.4. Selektor klasy Selektor:

. lub *. .

Odnosi się do:

Elementów należących do podanej klasy. Gdy używa się go wraz z selektorem typu elementu, wybierane są wszystkie elementy określonego typu przypisane do podanej klasy.

Obecny od wersji CSS:

1

W listingu 17.3 widnieje przykład zastosowania tego selektora. Listing 17.3. Zastosowanie selektora klasy

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W listingu 17.3 użyłem selektora .class2, co poskutkowało wybraniem wszystkich elementów dowolnego typu przypisanych do klasy class2. Ten selektor można wyrazić na dwa sposoby: z uniwersalnym selektorem lub bez niego. Selektory *.class2 i .class2 są równoznaczne. Pierwsza forma jest dokładniejsza pod względem opisowym, ale to druga znajduje się w powszechnym użytku. Jest to typowa właściwość selektorów CSS. Przeglądając kolejne selektory, niechybnie dostrzeżesz, że każdy z nich działa jako filtr, zawężający zakres wyboru do coraz mniejszej liczby elementów. Te wszystkie selektory można ze sobą zestawiać, by uzyskiwać dokładne odniesienia. Różne techniki zestawiania selektorów przedstawię Ci w punkcie „Zestawianie selektorów”. W listingu 17.3 widnieją dwa elementy przypisane docelowej klasie: element a i element span. Rezultat zastosowania tego stylu widać na rysunku 17.3. Można też sprecyzować konkretniejsze warunki i ograniczyć wybór do pojedynczego, przypisanego do klasy elementu. Robi się to, zastępując selektor uniwersalny typem elementu, tak jak widać w listingu 17.4. Listing 17.4. Zastosowanie selektora klasy przy jednym typie elementu

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W tym przypadku zawęziłem zakres selektora tak, by odnosił się jedynie do elementów span o przypisanej klasie class2. Rezultat widać na rysunku 17.4.

Rysunek 17.4. Ograniczenie zakresu selektora class „ Wskazówka Jeżeli chcesz wybrać elementy należące do więcej niż jednej klasy, to możesz podać nazwy poszczególnych klas, oddzielając je kropką (np. span.class1.class2). W ten sposób wybierasz tylko te elementy, które są przypisane zarówno do class1, jak i class2.

Wybieranie elementów według id Selektor ID pozwala na wybieranie elementów według wartości ich globalnych atrybutów id, które opisałem w rozdziale 3. W tabeli 17.5 znajduje się opis tego selektora. Jak już wspomniałem w rozdziale 3., wartość atrybutu id danego elementu musi być wyjątkowa w skali całego dokumentu HTML. Selektor ID służy zatem do wybierania pojedynczych elementów. W listingu 17.5 widnieje przykład jego zastosowania.

359

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Tabela 17.5. Selektor elementów id Selektor:

# .#

Odnosi się do:

Elementu o określonej wartości atrybutu globalnego id.

Obecny od wersji CSS:

1

Listing 17.5. Zastosowanie selektora id

Przykład



Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W tym przykładzie wybrałem element z id o wartości w3canchor. Rezultat widać na rysunku 17.5.

Rysunek 17.5. Wybór elementu selektorem id Wydawałoby się, że ten sam efekt można by uzyskać przy użyciu atrybutów style poszczególnych elementów. Nie sposób temu zaprzeczyć, aczkolwiek prawdziwą wartość tego selektora poznasz, kiedy już zestawisz go z innymi selektorami (co omówię w dalszej części rozdziału).

Wybieranie elementów według atrybutów Selektor atrybutów pozwala na przypisywanie właściwości na podstawie różnych aspektów atrybutów. Jego opis znajdziesz w tabeli 17.6. Przy użyciu uniwersalnego selektora (*) możesz wybrać wszystkie elementy (lub wszystkie elementy danego typu), których atrybuty są zgodne z podanym warunkiem. Częściej jednak pomija się selektor uniwersalny, a warunek podaje w nawiasach kwadratowych ([ i ]). W listingu 17.6 widnieje przykład zastosowania selektora atrybutów.

360

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Tabela 17.6. Selektor atrybutów Selektor:

[warunek] [warunek]

Odnosi się do:

Elementów, którym przypisano atrybuty zgadzające się z podanym warunkiem; obsługiwane typy warunków znajdziesz w tabeli 17.7.

Obecny od wersji CSS:

Różnie (p. tabela 17.7).

Listing 17.6. Zastosowanie selektora atrybutów

Przykład



Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W listingu 17.6 użyłem najprostszego selektora atrybutów, który wybiera wszystkie elementy, którym przypisano atrybut href, niezależnie od jego wartości. W tym przykładzie przełożyło się to na wybranie wszystkich elementów a (rysunek 17.6).

Rysunek 17.6. Wybieranie elementów według atrybutów Możesz także tworzyć bardziej rozbudowane warunki wyboru atrybutów, czego przykłady widnieją w tabeli 17.7. Warunki te włączono do CSS w dwóch rzutach, toteż wskazuję, które z nich są obsługiwane od której wersji. Ostatnie dwa warunki należy dodatkowo omówić. Warunek ~= przydaje się w pracy z atrybutami, którym można przypisywać więcej niż jedną wartość, oddzielając je od siebie spacją, tak jak w przypadku atrybutu globalnego class. W listingu 17.7 widnieje przykład.

361

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Tabela 17.7. Warunki używane z selektorem atrybutów Warunek

Opis

Wersja CSS

[atrybut]

Wybiera elementy, którym przypisano dany atrybut, niezależnie od jego wartości; użyłem go w listingu 17.6.

2

[atrybut="wartość"]

Wybiera elementy, którym przypisano dany atrybut o określonej wartości.

2

[atrybut^="wartość"]

Wybiera elementy, którym przypisano dany atrybut o wartości zaczynającej się podanym ciągiem.

3

[atrybut$="wartość"]

Wybiera elementy, którym przypisano dany atrybut o wartości kończącej się podanym ciągiem.

3

[atrybut*="wartość"]

Wybiera elementy, którym przypisano dany atrybut o wartości zawierającej podany ciąg.

3

[atrybut~="wartość"]

Wybiera elementy, którym przypisano dany atrybut o różnych wartościach, w tym tej, którą podano w selektorze. W listingu 17.7 znajdziesz przykład.

2

[atrybut|="wartość"]

Wybiera elementy, którym przypisano dany atrybut o serii oddzielonych dywizem wartości, spośród których pierwsza to ta, którą podano w selektorze. W listingu 17.8 znajdziesz przykład.

2

Listing 17.7. Wybór oparty na jednej z wielu wartości

Przykład



Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W listingu 17.7 użyłem globalnego atrybutu class, ponieważ jak dotąd nie przedstawiłem jeszcze innych atrybutów, które obsługują wiele wartości. Do wyboru elementów przynależących do określonych klas nie trzeba używać selektora atrybutów — selektor klasy automatycznie obsługuje zbiory klas. Sprecyzowałem dla selektora warunki sprawiające, że wybiera elementy z przypisanym atrybutem class o wartości class2. W listingu widnieją wyróżnione atrybuty class, a na rysunku 17.7 widać efekt zastosowania tego selektora. Warunek |= przydaje się, kiedy wartość atrybutu wyrażona jest informacjami oddzielonymi od siebie łącznikami. Przykładem tego jest atrybut globalny lang, którego można używać z określającymi odmiany języków specyfikatorami językowymi, np. en-us na określenie amerykańskiej odmiany angielskiego, a en-gb brytyjskiej. W listingu 17.8 widać przykład wybrania wszystkich elementów oznaczonych jako angielskie bez konieczności wymieniania wszystkich — dość licznych — odmian języka.

362

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Rysunek 17.7. Wybór oparty na wielowartościowym atrybucie Listing 17.8. Zastosowanie warunku |=

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Rezultat zastosowania tego selektora widać na rysunku 17.8. Zauważ, że selektor odnosi się do drugiego elementu a, który nie ma żadnego regionalnego oznaczenia (tj. wartość atrybutu lang to en, a nie en-us czy en-gb), a także tych, które takie oznaczenia mają.

Rysunek 17.8. Wybieranie elementów na podstawie atrybutu lang

Łączenie selektorów Wybór elementów można uściślić, tworząc zestawienia selektorów, które albo poszerzają zakres elementów, na które styl jest nakładany, albo odwrotnie — pozwalają na skrajne ograniczenie wyboru. W kolejnych punktach przedstawię Ci różne sposoby łączenia selektorów.

363

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Tworzenie zestawień selektorów Utworzenie listy oddzielonych przecinkami selektorów sprawia, że styl nadawany jest wszystkim elementom, do których odnoszą się poszczególne selektory. W tabeli 17.8 widnieje opis zestawienia selektorów. Tabela 17.8. Zestawienie selektorów Selektor:

, ,

Odnosi się do:

Zestawienia elementów, do których odnoszą się poszczególne selektory

Obecny od wersji CSS:

1

W listingu 17.9 widnieje przykładowe zestawienie selektorów. Listing 17.9. Tworzenie zestawień selektorów

Przykład



Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W listingu 17.9 podałem selektor typu (a) oraz selektor atrybutu ([lang|="en"]), które oddzieliłem przecinkiem (a, [lang|="en"]). Przeglądarka przetwarza każdy selektor po kolei i nakłada styl na wybrane elementy. Możesz dowolnie łączyć i zestawiać różne rodzaje selektorów, które mogą odnosić się do zupełnie różnych elementów. Rezultat zastosowania selektora z listingu 17.9 widać na rysunku 17.9.

Rysunek 17.9. Zastosowanie zestawień selektorów Możesz zestawiać dowolną liczbę selektorów, oddzielając je od siebie przecinkami.

364

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Wybieranie potomków Selektor potomków służy do wybierania elementów zawartych w innym elemencie. Jego opis znajduje się w tabeli 17.9. Tabela 17.9. Selektor potomków Selektor:



Odnosi się do:

Elementów odpowiadających drugiemu selektorowi, które są potomkami elementów wybranych pierwszym selektorem.

Obecny od wersji CSS:

1

Przeglądarka najpierw używa pierwszego selektora, a następnie wybiera potomków wybranych elementów na podstawie drugiego selektora. Selektor potomków odnosi się do wszystkich elementów zawartych w elementach określonych pierwszym selektorem, nie tylko ich dzieci. W listingu 17.10 znajduje się przykład. Listing 17.10. Wybieranie potomków

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Selektor w listingu 17.10 wybiera elementy span, będące potomkami elementów p. W tym przypadku mógłbym wprawdzie uzyskać ten sam rezultat, używając zwyczajnie elementu span, ale to podejście jest bardziej elastyczne, jak widać w listingu 17.11. Listing 17.11. Przykład bardziej złożonego selektora potomków

Przykład



365

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Imię	Miasto
Adam Freeman	Londyn
Joe Smith	Nowy Jork
Anne Jones	Paryż

Lubię jabłka i pomarańcze.

Imię	Miasto
Peter Pererson	Boston
Chuck Fellows	Paryż
Jane Firth	Paryż

W listingu 17.11 utworzyłem dwie proste tabele o własnych atrybutach id. Przy użyciu selektora ID wybrałem tabelę z atrybutem id o wartości mytable, a następnie wybrałem zawarte w nim elementy td. Rezultat widać na rysunku 17.10.

Rysunek 17.10. Wybieranie potomków Zauważ, że w tym przykładzie nie wybrałem dzieci, lecz pominąłem poziom elementów tr, by wybrać elementy td.

Wybieranie dzieci Uzupełnieniem selektora potomków jest selektor dzieci, który wybiera jedynie te elementy, które są osadzone bezpośrednio w określonych elementach. W tabeli 17.10 znajduje się opis tego selektora. Tabela 17.10. Selektor dzieci Selektor:

>

Odnosi się do:

Elementów odpowiadających drugiemu selektorowi, które są bezpośrednimi potomkami elementów wybranych pierwszym selektorem.

Obecny od wersji CSS:

2

366

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

W listingu 17.12 widnieje przykład wyboru dzieci. Listing 17.12. Wybieranie elementów-dzieci

Przykład

Imię	Miasto
Adam Freeman	Londyn
Joe Smith	Nowy Jork
Anne Jones	Paryż

Lubię jabłka i pomarańcze.

Imię	Miasto
Peter Pererson	Boston
Chuck Fellows	Paryż
Jane Firth	Paryż

Zdefiniowałem tutaj zestawienie selektorów dzieci. Pierwszy szuka elementów span, które są dziećmi dowolnych elementów-dzieci elementu body. Drugi szuka elementów th, które są dziećmi elementów tr. Na rysunku 17.11 widać, które elementy zostały wybrane.

Rysunek 17.11. Wybieranie dzieci

367

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Wybieranie braci Elementy znajdujące się bezpośrednio po innych elementach można wybierać przy użyciu bezpośredniego selektora brata. W tabeli 17.11 znajduje się jego opis. Tabela 17.11. Bezpośredni selektor brata Selektor:

+

Odnosi się do:

Elementów odpowiadających drugiemu selektorowi, które znajdują się bezpośrednio po elemencie wybranym pierwszym selektorem.

Obecny od wersji CSS:

2

W listingu 17.13 widać przykład wybrania bezpośredniego selektora brata. Listing 17.13. Zastosowanie bezpośredniego selektora brata

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C Odwiedź stronę Google

W listingu 17.13 selektor wybiera elementy a, które znajdują się bezpośrednio po elemencie p. Jak widać na rysunku 17.12, w listingu jest tylko jeden taki element — element a, który jest odnośnikiem do strony W3C.

Rysunek 17.12. Wybór bezpośrednich braci Warunek wyboru możesz nieco uogólnić, używając ogólnego selektora braci, który wybiera elementy znajdujące się po innym elemencie, lecz niekoniecznie bezpośrednio. W tabeli 17.12 znajduje się jego opis. W listingu 17.14 znajduje się przykład zastosowania ogólnego selektora braci.

368

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Tabela 17.12. Ogólny selektor braci Selektor:

~

Odnosi się do:

Elementów odpowiadających drugiemu selektorowi, które znajdują się po elemencie wybranym pierwszym selektorem.

Obecny od wersji CSS:

3

Listing 17.14. Zastosowanie ogólnego selektora braci

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C Odwiedź stronę Google

Nie ograniczamy się tu do elementów, które znajdują się bezpośrednio po elemencie zdefiniowanym pierwszym selektorem — oznacza to, że drugi selektor wybiera w tym przykładzie dwa elementy a. Pominięty element a (prowadzący do strony http://www.helion.pl) nie jest wybrany, ponieważ znajduje się przed elementem p; wybierać możemy tylko tych braci, którzy znajdują się po nim. Rezultat zastosowania tego selektora widać na rysunku 17.13.

Rysunek 17.13. Zastosowanie ogólnego selektora braci

Selektory pseudoelementów Jak dotąd dokonywaliśmy wyborów na podstawie elementów podawanych w dokumentach HTML. Tymczasem CSS obsługuje również pseudoselektory, które są bardziej rozbudowane w działaniu, lecz nie odnoszą się bezpośrednio do zawartych w dokumencie elementów. Istnieją dwa rodzaje pseudoselektorów: pseudoelementów i pseudoklas. W tym podrozdziale opiszę i przedstawię selektory pseudoelementów. Jak można sądzić z samej nazwy, pseudoelementy nie istnieją, lecz są wygodnym narzędziem CSS, które ułatwia wybór.

369

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Selektor ::first-line Selektor ::first-line odnosi się do pierwszego wiersza bloku tekstowego. W tabeli 17.13 znajduje się jego opis. Tabela 17.13. Selektor pseudoelementu ::first-line Selektor:

::first-line

Odnosi się do:

Pierwszego wiersza bloku tekstowego.

Obecny od wersji CSS:

1

W listingu 17.15 widnieje przykład zastosowania selektora ::first-line. Listing 17.15. Zastosowanie selektora pseudoelementu ::first-line

Przykład

My w Polsce nie znamy pojęcia pokoju za wszelką cenę. Jest tylko jedna rzecz w życiu ludzi, narodów i państw, która jest bezcenną. Tą rzeczą jest honor.

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W tym przykładzie użyłem samego selektora, ale można go również używać jako modyfikatora innych selektorów. Przykładowo, gdybym chciał wybrać jedynie pierwsze wiersze elementów p, mógłbym zastosować selektor p::first-line. „ Wskazówka Selektor pseudoelementów poprzedzony jest dwoma dwukropkami (::), choć przeglądarki rozpoznają również selektory z jednym dwukropkiem (tj. :first-line zamiast ::first-line). Dzięki temu zachowana zostaje na potrzeby kompatybilności wstecznej spójność formy z selektorami pseudoklas, które opisałem we wcześniejszej części rozdziału.

Przy zmianach rozmiaru okna przeglądarka na bieżąco określa pierwszy wiersz. Oznacza to, że styl zawsze jest prawidłowo nanoszony na pierwszy wiersz tekstu, tak jak widać na rysunku 17.14.

Selektor ::first-letter Selektor ::first-letter wybiera pierwszą literę w bloku tekstowym. W tabeli 17.14 znajduje się jego opis.

370

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Rysunek 17.14. Przeglądarka zapewnia, by stylem opatrzony był zawsze pierwszy wiersz, nawet przy zmianie wielkości okna Tabela 17.14. Selektor pseudoelementu ::first-letter Selektor:

::first-letter

Odnosi się do:

Pierwszej litery bloku tekstowego.

Obecny od wersji CSS:

1

W listingu 17.16 widnieje przykład zastosowania tego selektora. Listing 17.16. Zastosowanie selektora pseudoelementu ::first-letter

Przykład

My w Polsce nie znamy pojęcia pokoju za wszelką cenę. Jest tylko jedna rzecz w życiu ludzi, narodów i państw, która jest bezcenną. Tą rzeczą jest honor.

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Rezultat zastosowania tego selektora widać na rysunku 17.15.

371

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Rysunek 17.15. Zastosowanie selektora ::first-letter

Selektory :before i :after Selektory :before i :after są nietypowe o tyle, że tworzą treść, którą następnie zamieszczają w dokumencie. Selektor :before przedstawiłem już w rozdziale 9., gdzie zastosowałem go do tworzenia niestandardowych list. Jego uzupełnieniem jest selektor :after, który dodaje treść po danym elemencie. W tabeli 17.15 znajduje się opis tych selektorów. Tabela 17.15. Selektory :before i :after Selektor

Opis

Wersja CSS

:before

Zamieszcza treść przed treścią wybranego elementu.

2

:after

Zamieszcza treść po treści wybranego elementu.

2

W listingu 17.17 widnieje przykład zastosowania tych atrybutów. Listing 17.17. Zastosowanie selektorów :before i :after

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W listingu 17.17 wybrałem elementy a oraz zastosowałem pseudoselektory :before i :after. Wraz z tymi selektorami należy podać treść do zamieszczenia w dokumencie — robi się to, określając wartość właściwości content. Jest to specjalna właściwość, której można używać jedynie z tymi selektorami. W tym

372

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

przykładzie fraza Kliknij tu i zostaje zamieszczona przed elementami a, a wykrzyknik (!) po nich. Rezultat wprowadzenia tych zmian widać na rysunku 17.16.

Rysunek 17.16. Zastosowanie selektorów :before i :after

Licznik CSS Selektorów :before i :after często używa się z funkcją licznika CSS, która służy do generowania treści numerycznych. Przykład zastosowania liczników podałem już w rozdziale 9., przy tworzeniu niestandardowych list. Kolejny znajdziesz w listingu 17.18. Listing 17.18. Zastosowanie licznika CSS

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Lubię też mango i wiśnie.

Odwiedź stronę W3C

Do utworzenia licznika należy użyć specjalnej właściwości counter-reset i określić wartość oznaczającą nazwę licznika: counter-reset: paracount;

Powyższa deklaracja uruchamia licznik o nazwie paracount i nadaje mu wartość 1. Możesz określić inną wartość początkową, podając liczbę po nazwie licznika: counter-reset: paracount 10;

373

ROZDZIAŁ 17. „ SELEKTORY CSS — CZĘŚĆ I

Do zdefiniowania większej liczby liczników wystarczy podać dodatkowe nazwy (i ewentualnie wartości początkowe) w tej samej deklaracji counter-reset: counter-reset: paracount 10 othercounter;

Ta deklaracja tworzy licznik o nazwie paracount (o początkowej wartości 10) i licznik othercounter (o początkowej wartości 1). Uruchomiony licznik można podać jako wartość właściwości stylów, które wykorzystują selektory :before i :after: content: counter(paracount) ". ";

Ponieważ powyższej deklaracji użyto z selektorem składającym się z członu :after, rezultatem jest zamieszczenie bieżącej wartości licznika w dokumencie HTML przed każdym wybranym przez selektor elementem. W tym wypadku po każdej wartości zamieszczana jest kropka i spacja. Wartość domyślnie wyrażana jest jako dziesiętna liczba całkowita (1, 2, 3 itd.), ale możesz też określić inne formaty: content: counter(paracount, lower-alpha) ". ";

Dodatkowym argumentem licznika jest styl liczby. Możesz użyć dowolnej wartości właściwości list-style-type, które opisuję w rozdziale 24.

Przyrost wartości licznika określa się właściwością counter-increment. Wartość tej właściwości to nazwa licznika, którego wartość chcesz zmienić: counter-increment: paracount;

Wartość liczników domyślnie przyrasta o jeden, ale możesz podać inną wartość w deklaracji: counter-increment: paracount 2;

Rezultat zastosowania licznika w listingu 17.18 widać na rysunku 17.17.

Rysunek 17.17. Wykorzystanie liczników do generowania treści

Podsumowanie W tym rozdziale opisałem selektory i pseudoelementy CSS służące do wskazywania elementów, którym ma być przypisany styl. Selektory pozwalają na wybieranie elementów według ogólnych kryteriów, ale także na zawężanie wyboru elementów (co robi się, łącząc selektory). Pseudoelementy umożliwiają wygodne wybieranie treści, które w rzeczywistości nie istnieją w dokumencie. Z podobną zasadą funkcjonowania spotkasz się w kolejnym rozdziale, gdzie omówię pseudoklasy. Zapoznanie się z selektorami jest podstawą, jeżeli chcesz czerpać maksymalne korzyści z wykorzystania CSS. W kolejnych rozdziałach zetkniesz się z wieloma przykładami wykorzystania selektorów. Zachęcam Cię, byś poświęcił trochę czasu na samodzielne eksperymentowanie z nimi.

374

ROZDZIAŁ 18

Selektory CSS — część II

W tym rozdziale omówię kolejne selektory CSS i pokażę Ci, jak używać pseudoklas. Tak jak w przypadku pseudoelementów, nie są to klasy, do których przypisano elementy, lecz narzędzia ułatwiające wybieranie elementów na podstawie pewnych typowych charakterystyk. W tabeli 18.1 znajduje się streszczenie całego rozdziału. Tabela 18.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Wybranie elementu głównego dokumentu.

Użyj selektora :root.

18.1

Wybranie dziecka.

Użyj selektora :first-child, :last-child, :only-child lub :only-of-type.

18.2 – 18.6

Wybranie określonego dziecka ze zbioru.

Użyj selektora :nth-child, :nth-last-child, :nth-of-type lub :nth-last-of-type.

18.7

Wybranie aktywnego bądź nieaktywnego elementu.

Użyj selektora :enabled lub :disabled.

18.8

Wybranie pola wyboru lub zaznaczonych kratek.

Użyj selektora :checked.

18.9

Wybranie domyślnego elementu.

Użyj selektora :default.

18.10

Wybranie elementów na podstawie weryfikacji danych.

Użyj selektora :valid lub :invalid.

18.11

Wybranie elementów wejściowych na podstawie zakresu.

Użyj selektorów :in-range i :out-of-range.

18.12

Wybranie elementów wejściowych na podstawie atrybutu required.

Użyj selektora :required lub :optional.

18.13

Wybranie odnośnika.

Użyj selektorów :link i :visited.

18.14

Wybranie elementu, nad którym znajduje się kursor.

Użyj selektora :hover.

18.15

Wybranie aktywowanego elementu.

Użyj selektora :active.

18.16

Wybranie sfokusowanego elementu.

Użyj selektora :focus.

18.17

Zanegowanie innego selektora.

Użyj selektora negacji.

18.18

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Tabela 18.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Wybranie elementów pozbawionych zawartości.

Użyj selektora :empty.

—

Wybranie elementów według języka.

Użyj selektora :lang.

18.19

Wybranie elementu, do którego odnosi się URL.

Użyj selektora :target.

18.20

Strukturalne selektory pseudoklas Strukturalne selektory pseudoklas pozwalają na wybieranie elementów na podstawie ich położenia w dokumencie. Selektory te poprzedzone są znakiem dwukropka (:), np. :empty. Możesz ich używać osobno lub w połączeniu z innymi selektorami, np. p:empty.

Selektor :root Selektor :root wybiera element główny dokumentu. Można go uznać za najmniej przydatny selektor pseudoklasy, ponieważ zawsze odnosi się do elementu html. W tabeli 18.2 znajduje się opis tego selektora. Tabela 18.2. Selektor :root Selektor:

:root

Odnosi się do:

Elementu głównego dokumentu, czyli html.

Obecny od wersji CSS:

2

W listingu 18.1 widnieje przykład zastosowania selektora :root. Listing 18.1. Zastosowanie selektora :root

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Rezultat zastosowania tego selektora widać na rysunku 18.1. Wokół elementu widnieje obramowanie, choć nie rzuca się to od razu w oczy.

376

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Rysunek 18.1. Zastosowanie selektora :root

Selektor dzieci Selektory dzieci służą do wybierania pojedynczych elementów bezpośrednio zawartych w innych elementach. W tabeli 18.3 znajduje się opis tych selektorów. Tabela 18.3. Selektory dzieci Selektor

Opis

Wersja CSS

:first-child

Wybiera elementy, które są pierwszymi dziećmi swoich rodziców.

2

:last-child

Wybiera elementy, które są ostatnimi dziećmi swoich rodziców.

3

:only-child

Wybiera elementy, które są jedynymi dziećmi swoich rodziców.

3

:only-of-type

Wybiera elementy, które są jedynymi określonego typu dziećmi swoich rodziców.

3

Selektor :first-child Selektor :first-child wybiera elementy będące pierwszymi dziećmi elementów, które je zawierają (czyli tzw. rodziców). W listingu 18.2 widnieje przykład zastosowania selektora :first-child. Listing 18.2. Zastosowanie selektora :first-child

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W listingu 18.2 użyłem selektora :first-child bez żadnych dodatkowych członów, wobec czego wybiera on wszystkie elementy, które są pierwszymi dziećmi swoich rodziców. Efekt widać na rysunku 18.2.

377

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Rysunek 18.2. Zastosowanie selektora :first-child Możesz dokonać bardziej szczegółowego wyboru, używając selektora :first-child jako modyfikatora i, ewentualnie, łącząc go z innymi selektorami. Przykład tego widać w listingu 18.3. Listing 18.3. Połączenie selektora :first-child z innymi

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Powyższy selektor odnosi się do wszystkich elementów span, które są pierwszymi dziećmi elementów p. W całym dokumencie znajduje się w tym przypadku tylko jeden taki element, a efekt widać na rysunku 18.3.

Rysunek 18.3. Połączenie selektora :first-child z innym

Selektor :last-child Selektor :last-child wybiera elementy będące ostatnimi dziećmi elementów, które je zawierają. W listingu 18.4 widnieje przykład zastosowania selektora :last-child. Na rysunku 18.4 widać, do których elementów ten selektor się odnosi. Zauważ, że wokół obszaru treści znajduje się obramowanie. Jest tak, ponieważ element body jest ostatnim dzieckiem elementu html — selektor wobec tego odnosi się też do niego.

378

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Listing 18.4. Zastosowanie selektora :last-child

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Rysunek 18.4. Zastosowanie selektora :last-child

Selektor :only-child Selektor :only-child wybiera elementy będące jedynymi dziećmi elementów, które je zawierają. W listingu 18.5 widnieje przykład zastosowania tego selektora. Listing 18.5. Zastosowanie selektora :only-child

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

379

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Jedyny element z jednym dzieckiem to w tym przypadku p, który zawiera jeden element span. Na rysunku 18.5 widać, że jest to jedyny element, do którego ten selektor się odnosi.

Rysunek 18.5. Zastosowanie selektora :only-child

Selektor :only-of-type Selektor :only-of-type wybiera elementy będące jedynymi określonego typu dziećmi elementów, które je zawierają. W listingu 18.6 widnieje przykład zastosowania go. Listing 18.6. Zastosowanie selektora :only-of-type

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Na rysunku 18.6 widać elementy, do których ten selektor się odnosi. Jak widać, samodzielnie występujący selektor wybiera niemało elementów. W każdym dokumencie można się zwykle spotkać z wieloma elementami, które są jedynymi dziećmi swojego typu. Rzecz jasna, zakres wyboru możesz zawęzić, łącząc ten selektor z innymi.

Rysunek 18.6. Zastosowanie selektora :only-of-type

380

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Selektory n-tego dziecka Selektory n-tego dziecka działają podobnie do selektorów dzieci, które opisałem w poprzednim punkcie, lecz pozwalają na określenie elementu o wybranej wartości indeksowej. W tabeli 18.4 znajduje się ich omówienie. Tabela 18.4. Selektory n-tego dziecka Selektor

Opis

Wersja CSS

:nth-child(n)

Wybiera elementy, które są n-tymi dziećmi swoich rodziców.

3

:nth-last-child(n)

Wybiera elementy, które są n-tymi od końca dziećmi swoich rodziców.

3

:nth-of-type(n)

Wybiera elementy, które są n-tymi swojego typu dziećmi swoich rodziców.

3

:nth-last-of-type(n)

Wybiera elementy, które są n-tymi swojego typu od końca dziećmi swoich rodziców.

3

Każdy z tych selektorów wykorzystuje argument, który jest indeksem elementu; indeks zaczyna się od 1. W listingu 18.7 widać przykład zastosowania selektora :nth-child. Listing 18.7. Zastosowanie selektora :nth-child

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W listingu 18.7 wybrałem wszystkie elementy będące drugimi dziećmi elementu body. Jest tylko jeden taki element, jak widać na rysunku 18.7.

Rysunek 18.7. Zastosowanie elementu :nth-child

381

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Nie będę podawał przykładów użycia pozostałych selektorów n-tego dziecka, ponieważ działają tak samo jak ich zwyczajne odpowiedniki z taką różnicą, że podaje się przy nich wartość indeksową.

Selektory pseudoklas interfejsu użytkownika Selektory pseudoklas interfejsu umożliwiają wybieranie elementów na podstawie ich stanu. W tabeli 18.5 znajduje się opis selektorów interfejsu. Tabela 18.5. Selektory interfejsu użytkownika Selektor

Opis

Wersja CSS

:enabled

Wybiera aktywne elementy.

3

:disabled

Wybiera nieaktywne elementy.

3

:checked

Wybiera zaznaczone elementy.

3

:default

Wybiera domyślne elementy.

3

:valid :invalid

Wybiera poprawne lub niepoprawne elementy input na podstawie systemu weryfikacji danych.

3

:in-range :out-of-range

Wybiera elementy input o wartościach znajdujących się w określonym zasięgu lub poza nim.

3

:required :optional

Wybiera elementy input na podstawie tego, czy oznaczone są atrybutem required.

3

Wybieranie aktywnych bądź nieaktywnych elementów Niektóre elementy mogą znajdować się w stanie aktywnym lub nieaktywnym — to te, które służą do pobierania danych od użytkownika. Selektory :enabled i :disabled odnoszą się wyłącznie do elementów, które można zdezaktywować. W listingu 18.8 widnieje przykład zastosowania selektora :enabled. Listing 18.8. Zastosowanie selektora :enabled

Przykład

To jest aktywny element textarea To jest zdezaktywowany element textarea

W listingu 18.8 znajdują się dwa elementy textarea, z których jednemu przypisany jest atrybut disabled. Selektor :enabled wybiera pierwszy element textarea, ale drugiego nie, co widać na rysunku 18.8.

382

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Rysunek 18.8. Zastosowanie selektora :enabled

Wybieranie zaznaczonych elementów Pola wyboru i zaznaczone (przez użytkownika lub przy użyciu atrybutu checked) kratki można wybierać selektorem :checked. Trudno zademonstrować jego zastosowanie, ponieważ możliwości obstylowania kratek zaznaczania i pól wyboru są żadne. W listingu 18.9 widać przykład użycia tego selektora. Listing 18.9. Zastosowanie selektora :checked

Przykład

Czy lubisz jabłka:

Po zaznaczeniu kratki to pole robi się czerwone

Z ograniczonymi możliwościami stylizacji poradziłem sobie, używając selektora brata (omówionego w rozdziale 17.), by zmienić wygląd elementu span, znajdującego się obok kratki zaznaczania. Zmianę stanu od niezaznaczonego do zaznaczonego widać na rysunku 18.9. Nie ma żadnego określonego selektora niezaznaczonych elementów, ale można połączyć :checked z selektorem negacji, który opiszę w punkcie „Selektor negacji”.

383

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Rysunek 18.9. Wybranie zaznaczonych elementów

Wybieranie elementów domyślnych Element :default wybiera domyślne elementy z grupy podobnych elementów. Przykładowo, przycisk zatwierdzenia formularza zawsze jest domyślnym przyciskiem w formularzu. Przykład zastosowania selektora :default widać w listingu 18.10. Listing 18.10. Zastosowanie elementu :default

Przykład

Imię:

Zagłosuj Wyczyść



Tego selektora używa się najczęściej z właściwością outline, którą opiszę w rozdziale 19. Rezultat zastosowania go widać na rysunku 18.10.

384

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Rysunek 18.10. Zastosowanie selektora :default

Wybieranie elementów input o poprawnych i niepoprawnych wartościach Selektory :valid i :invalid odnoszą się do elementów input, które pomyślnie lub niepomyślnie przeszły weryfikację danych wejściowych. Więcej na temat weryfikacji danych wejściowych przeczytasz w rozdziale 14. W listingu 18.11 widnieje przykład ich zastosowania. Listing 18.11. Zastosowanie selektorów :valid i :invalid

Przykład

Imię:

Miasto:

Zagłosuj



W listingu 18.11 nadałem niepoprawnym elementom czerwony obrys, a poprawnym zielony. W dokumencie znajdują się dwa elementy input opatrzone elementem required. Oznacza to, że przechodzą weryfikację pomyślnie tylko wtedy, kiedy podana jest dla nich wartość. Rezultat zastosowania tych selektorów widać na rysunku 18.11.

385

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Rysunek 18.11. Wybieranie poprawnych i niepoprawnych elementów input „ Wskazówka Zauważ, że selektory odnoszą się również do przycisku zatwierdzenia formularza, przynajmniej w Chrome. Dzieje się tak, ponieważ selektor :valid działa na podstawie dość prostej logiki i wybiera wszelkie elementy input, które nie są niepoprawne. Do wykluczenia określonych elementów input możesz użyć selektorów atrybutów opisanych w rozdziale 17. albo bardziej konkretnych selektorów, np. takich, jakie opiszę poniżej.

Wybieranie elementów input na podstawie zakresów Dokładniejszy sposób wyboru elementów input opiera się na odniesieniach do dopuszczalnych zakresów ich wartości. Selektor :in-range odnosi się do elementów input o wartościach znajdujących się w określonym zakresie, a selektor :out-of-range do tych, których wartości są poza nim. W listingu 18.12 widnieje przykład zastosowania tych atrybutów. Listing 18.12. Zastosowanie selektorów :in-range i :out-of-range

Przykład

Cena za sztukę w Twoim sklepie:

386

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

W chwili, kiedy to piszę, żadna z popularnych przeglądarek nie obsługuje selektora :out-of-range, a tylko Chrome i Opera obsługują selektor :in-range. Podejrzewam, że ta sytuacja niedługo ulegnie zmianie, jako że funkcje te związane są z obsługą HTML5, która prawdopodobnie się upowszechni. Rezultat zastosowania selektora :in-range widać na rysunku 18.12.

Rysunek 18.12. Zastosowanie selektora :in-range

Wybór elementów input według obecności atrybutu required Selektor :required odnosi się do elementów input o przypisanym atrybucie required, który wymusza na użytkowniku podanie wartości, by możliwe było zatwierdzenie formularza, do którego dany element input jest przypisany. Więcej na temat tego atrybutu przeczytasz w rozdziale 14. Selektor :optional wybiera elementy input, którym nie przypisano atrybutu required. W listingu 18.13 użyłem ich obydwu. Listing 18.13. Wybranie elementów input z atrybutem required i bez niego

Przykład

Cena za sztukę w Twoim sklepie:

Cena za sztukę w Twoim sklepie:

387

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

W listingu 18.13 utworzyłem dwa elementy input typu number. Są niemalże identyczne poza tym, że pierwszemu przypisałem atrybut required. Rezultat zastosowania tych selektorów i powiązanych stylów widać na rysunku 18.13. Zauważ, że wybrany został również element input typu submit. Selektor :optional nie rozróżnia między różnymi typami elementu input.

Rysunek 18.13. Wybór wymaganych i opcjonalnych elementów input

Dynamiczne selektory pseudoklas Dynamiczne selektory pseudoklas odnoszą się do elementów na podstawie zmiennych stanów, w odróżnieniu od statycznego stanu dokumentu. Rozróżnienie pomiędzy statycznymi a dynamicznymi selektorami rozmyło się wraz z upowszechnieniem wykorzystania JavaScript do modyfikowania treści dokumentów i stanu elementów. Niemniej jednak wciąż uznaje się je za osobne kategorie selektorów.

Selektory :link i :visited Selektor :link odnosi się do linków, a :visited do linków do adresów, które użytkownik już odwiedził. W tabeli 18.6 znajduje się krótki opis tych selektorów. Tabela 18.6. Selektory :link i :visited Selektor

Opis

Wersja CSS

:link

Wybiera linki.

1

:visited

Wybiera odwiedzone linki.

1

Przeglądarki samodzielnie decydują o tym, przez jaki czas kliknięty link należy traktować jako odwiedzony. Linki powracają do „nieodwiedzonego” stanu, kiedy użytkownik czyści historię przeglądania lub kiedy historia sama się wyzerowuje. W listingu 18.14 widnieje przykład zastosowania tych selektorów. Listing 18.14. Zastosowanie selektorów :link i :visited

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W powyższym przykładzie należy jedynie zwrócić uwagę na to, że przy użyciu selektora :visited można nadać linkom tylko wybrane właściwości. Możesz zmienić kolor i font — i na tym właściwie koniec. Na rysunku 18.14 widać zmianę wyglądu odnośnika po jego odwiedzeniu. Zacząłem z parą nieodwiedzonych linków, po czym kliknąłem pierwszy z nich, by wejść na stronę http://www.helion.pl. Kiedy wróciłem na stronę z przykładu, odwiedzony link wyglądał inaczej.

Rysunek 18.14. Zastosowanie selektorów :link i :visited „ Wskazówka Selektor :visited odnosi się do każdego linka, którego atrybutowi href przypisany jest adres URL, który użytkownik już odwiedził z dowolnej strony, nie tylko Twojej. Selektora :visited najczęściej używa się do nanoszenia takich stylów, by odwiedzone linki wyglądały tak samo, jak nieodwiedzone.

Selektor :hover Selektor :hover odnosi się do każdego elementu, nad którym znajduje się kursor. Wybrane elementy zmieniają się, kiedy użytkownik porusza kursorem po dokumencie. W tabeli 18.7 znajduje się opis tego selektora. Przeglądarka sama interpretuje selektor :hover w sposób odpowiedni dla danego wyświetlacza, lecz zazwyczaj selektor ten odnosi się do ruchu kursora myszy w oknie. W listingu 18.15 znajduje się przykład jego zastosowania.

389

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Tabela 18.7. Selektor :hover :hover

Selektor: Odnosi się do:

Elementów znajdujących się pod kursorem.

Obecny od wersji CSS:

2

Listing 18.15. Zastosowanie selektora :hover

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Powyższy selektor odnosi się do wielu zagnieżdżonych elementów, co widać na rysunku 18.15.

Rysunek 18.15. Zastosowanie selektora :hover

Selektor :active Selektor :active odnosi się do elementów aktywowanych w danej chwili przez użytkownika. Również w tym przypadku przeglądarki mają dowolność w interpretowaniu tego, na czym owa aktywacja polega, ale zazwyczaj jest to sytuacja, kiedy naciśnięty jest klawisz myszy (lub kiedy użytkownik przyciska ekran dotykowy). W tabeli 18.8 znajduje się opis tego selektora. Tabela 18.8. Selektor :active Selektor:

:active

Odnosi się do:

Elementów aktywowanych przez użytkownika; zwykle są to elementy znajdujące się pod kursorem, kiedy naciśnięty jest klawisz myszy.

Obecny od wersji CSS:

2

390

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

W listingu 18.16 znajduje się przykład zastosowania tego selektora. Listing 18.16. Zastosowanie selektora :active

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Cześć!

W listingu zamieściłem przycisk, aczkolwiek selektor :active nie odnosi się jedynie do interaktywnych elementów. Wybiera on wszystkie elementy, w obrębie których można nacisnąć przycisk myszy (rysunek 18.16).

Rysunek 18.16. Zastosowanie selektora :active

Selektor :focus Ostatnim dynamicznym selektorem pseudoklas jest :focus, który wybiera sfokusowane elementy. W tabeli 18.9 znajduje się jego opis. Tabela 18.9. Selektor :focus Selektor:

:focus

Odnosi się do:

Sfokusowanych elementów.

Obecny od wersji CSS:

2

W listingu 18.17 widnieje przykład zastosowania tego selektora.

391

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Listing 18.17. Zastosowanie selektora :focus

Przykład



Imię:

Miasto:

Styl jest kolejno przypisywany elementom input, które uaktywniam. Rezultat widać na rysunku 18.17.

Rysunek 18.17. Rezultat zastosowania selektora :focus

Inne pseudoselektory Istnieją selektory, których nie można przyporządkować przedstawionym w tym rozdziale kategoriom. Omówię je kolejno w poniższych punktach.

Selektor negacji Selektor negacji pozwala na dokonanie inwersji wyboru. Jest to zaskakująco użyteczny, choć niedoceniany selektor. W tabeli 18.10 znajduje się opis selektora negacji. Listing 18.18 przedstawia selektor negacji w użyciu.

392

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Tabela 18.10. Selektor negacji Selektor:

:not()

Odnosi się do:

Dokonuje inwersji selektora.

Obecny od wersji CSS:

3

Listing 18.18. Zastosowanie selektora negacji

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Selektor ten odnosi się do wszystkich elementów a, których wartość atrybutu href nie zawiera ciągu helion. Rezultat widać na rysunku 18.18.

Rysunek 18.18. Zastosowanie selektora negacji

Selektor :empty Selektor :empty odnosi się do elementów pozbawionych dzieci. Jego opis znajduje się w tabeli 18.11. Trudno ukazać przykład jego zastosowania, ponieważ nie odnosi się on do treści. Tabela 18.11. Selektor :empty Selektor:

:empty

Odnosi się do:

Elementów pozbawionych dzieci.

Obecny od wersji CSS:

3

393

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Selektor :lang Selektor :lang wybiera elementy na podstawie atrybutu globalnego :lang (opisanego w rozdziale 3.). W tabeli 18.12 znajduje się opis tego selektora. Tabela 18.12. Selektor :lang Selektor:

:lang()

Odnosi się do:

Elementów na podstawie wartości globalnego atrybutu lang.

Obecny od wersji CSS:

2

W listingu 18.19 widnieje przykład zastosowania selektora :lang. Listing 18.19. Zastosowanie selektora :lang

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

W powyższym przykładzie selektor ten wybiera elementy, których atrybut lang wskazuje na to, że napisane są po angielsku. Rezultat zastosowania selektora :lang jest taki sam, jak w przypadku selektora |=, którego przykład użycia widnieje w listingu 17.8 w rozdziale 17.

Selektor :target W rozdziale 3. wspomniałem, że do adresu URL można dodać identyfikator fragmentu, by przejść bezpośrednio do elementu określonego wartością globalnego atrybutu id. Gdyby w dokumencie HTML przyklad.html znajdował się element z atrybutem id o wartości myelement, to mógłbyś bezpośrednio przejść do niego, podając adres przyklad.html#myelement. Selektor :target wybiera element, do którego odnosi się identyfikator fragmentu URL. W tabeli 18.13 znajduje się opis tego selektora. Tabela 18.13. Selektor :target Selektor:

:target

Odnosi się do:

Elementu oznaczonego identyfikatorem fragmentu.

Obecny od wersji CSS:

3

W listingu 18.20 widać przykład zastosowanie selektora :target.

394

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

Listing 18.20. Zastosowanie selektora :target

Przykład

Odwiedź stronę Helionu

Lubię jabłka i pomarańcze.

Odwiedź stronę W3C

Zmiany wyglądu elementów wywoływanych selektorem :target widać na rysunku 18.19.

Rysunek 18.19. Zastosowanie selektora :target

Podsumowanie W tym rozdziale przedstawiłem selektory CSS służące do wskazywania elementów, którym ma być przypisany styl. Selektory pozwalają na wybieranie ogólnych kategorii elementów, a łącząc selektory, możesz zawęzić wybór do konkretnych elementów. Zapoznanie się z selektorami jest podstawą efektywnego korzystania z CSS.

395

ROZDZIAŁ 18. „ SELEKTORY CSS — CZĘŚĆ II

396

ROZDZIAŁ 19

Obramowania i tła

W tym rozdziale przedstawię właściwości służące do określania wyglądu tła i obramowania elementu. Te powszechnie wykorzystywane funkcje zostały w CSS3 ulepszone. Przykładowo, można teraz tworzyć obramowania o zaokrąglonych narożnikach, używać obrazów jako obramowań i nadawać elementom cienie. Wydawałoby się, że to nic szczególnego, ale nieobecność tych funkcji w CSS wymusiła konieczność wynajdowania innych sposobów na uzyskiwanie odpowiednich efektów graficznych — z mieszanymi skutkami. W tabeli 19.1 znajduje się streszczenie całego rozdziału. Tabela 19.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Nadanie elementowi obramowania.

Użyj właściwości border-width, border-style i border-color.

19.1

Nadanie obramowania pojedynczej krawędzi pola elementu.

Użyj właściwości odnoszących się do krawędzi, np. border-top-width, border-top-style i border-top-color.

19.2

Określenie stylu, koloru i szerokości obramowania jedną deklaracją.

Użyj właściwości border do określenia obramowania wszystkich krawędzi bądź właściwości border-top, border-bottom, border-left i border-right do określenia obramowania pojedynczej krawędzi.

19.3

Utworzenie obramowania o zaokrąglonych rogach.

Użyj właściwości border-radius lub jednej z powiązanych właściwości odnoszących się do poszczególnych krawędzi.

19.4, 19.5

Użycie obrazu do utworzenia krawędzi.

Użyj właściwości border-image lub jednej z właściwości odnoszących się do konkretnych krawędzi.

19.6, 19.7

Określenie koloru lub obrazu tła.

Użyj właściwości background-color lub background-image.

19.8

Określenie położenia obrazu tła.

Użyj właściwości background-position.

19.9

Określenie relacji pomiędzy tłem elementu a obszarem jego przewijania.

Użyj właściwości background-attachment.

19.10

Określenie pozycji początkowej tła i jego przycinania.

Użyj właściwości background-origin i background-clip.

19.11, 19.12

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Tabela 19.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Zdefiniowanie wszystkich właściwości tła jedną deklaracją.

Użyj właściwości background.

19.13

Nadanie elementowi cienia.

Użyj właściwości box-shadow.

19.14, 19.15

Nadanie obramowania Zacznijmy od właściwości definiujących obramowania. Używa się ich bardzo często i wykorzystamy je do stworzenia graficznej podstawy do dalszej pracy z właściwościami margin i padding w rozdziale 20. Do najważniejszych właściwości obramowania należą border-width, border-style i border-color, których opis znajduje się w tabeli 19.2. Tabela 19.2. Podstawowe właściwości obramowania Właściwość

Opis

Wartości

border-width

Określa szerokość obramowania.

Tabela 19.3

border-style

Określa styl obramowania.

Tabela 19.4

border-color

Określa kolor obramowania.

Przykład zastosowania tych właściwości widać w listingu 19.1. Listing 19.1. Podstawowe obramowanie

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W listingu 19.1 określiłem akapit elementem p, a elementem style nadałem mu obramowanie, które zdefiniowałem właściwościami border-width, border-style i border-color.

398

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Szerokość obramowania Właściwości border-width możesz nadać wartość wyrażoną w typowych jednostkach miary, procentową albo podaną jako jedno z trzech skrótowych określeń. W tabeli 19.3 znajduje się ich opis. Domyślna wartość border-width to medium. Tabela 19.3. Wartości właściwości border-width Wartość

Opis

Określa szerokość obramowania wyrażoną jednostkami miary CSS, np. em, px i cm.

%

Określa szerokość obramowania wartością procentową szerokości obszaru, wokół którego obramowanie jest rozrysowywane.

thin medium thick

Określa szerokość obramowania według predefiniowanych wartości — od najcieńszego do najszerszego, choć dokładna szerokość jest inna w zależności od przeglądarki.

Styl obramowania Właściwości border-style można nadać jedną z wartości, które widnieją w tabeli 19.4. Domyślna wartość to none, czyli brak obramowania. Tabela 19.4. Wartości właściwości border-style Wartość

Opis

none

Nie rozrysowuje obramowania.

dashed

Obramowanie jest ciągiem prostokątnych kresek.

dotted

Obramowanie jest ciągiem kropek.

double

Obramowanie składa się z dwóch równoległych linii z odstępem pomiędzy nimi.

groove

Obramowanie sprawia wrażenie wgłębionego w stronę.

inset

Obramowanie wywołuje wrażenie, jakby obszar w jego obrębie był wgłębiony w stronę.

outset

Obramowanie wywołuje wrażenie, jakby obszar w jego obrębie wystawał ze strony.

ridge

Obramowanie sprawia wrażenie wystającego ze strony.

solid

Obramowanie składa się z pojedynczej, nieprzerwanej linii.

Wygląd wszystkich tych rodzajów obramowania widać na rysunku 19.1. Niektóre przeglądarki mają trudności z nadawaniem stylów obramowania opartych na dwóch kolorach, takich jak inset i outset, kiedy właściwości border-color nadana jest wartość black. Takie przeglądarki (w tym m.in. Google Chrome) używają koloru czarnego w charakterze obydwu tonów, co tworzy obramowanie wyglądające tak samo, jak w przypadku stylu solid. Inteligentniejsze przeglądarki — jak np. Firefox — wiedzą, że w takiej sytuacji należy użyć odcienia szarości. Aby uzyskać powyższy rysunek, który przedstawia przeglądarkę Chrome, nadałem właściwości border-color wartość gray dla stylów groove, inset, outset i ridge.

Nałożenie obramowania na jedną krawędź Na każdą krawędź elementu można nałożyć inne obramowanie, wykorzystując w tym celu bardziej szczegółowe właściwości, które opisuję w tabeli 19.5.

399

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Rysunek 19.1. Różne wartości właściwości border-style Tabela 19.5. Właściwości obramowania odnoszące się do poszczególnych krawędzi Właściwość

Opis

Wartości

border-top-width border-top-style border-top-color

Definiuje górną krawędź.

Takie same, jak dla ogólnych właściwości krawędzi.

border-bottom-width border-bottom-style border-bottom-color

Definiuje dolną krawędź.

Takie same, jak dla ogólnych właściwości krawędzi.

border-left-width border-left-style border-left-color

Definiuje lewą krawędź.

Takie same, jak dla ogólnych właściwości krawędzi.

border-right-width border-right-style border-right-color

Definiuje prawą krawędź.

Takie same, jak dla ogólnych właściwości krawędzi.

Powyższe właściwości możesz wykorzystywać do tworzenia całych obramowań lub łączyć je z ich ogólnymi odpowiednikami w celu nadpisania cech poszczególnych krawędzi. W listingu 19.2 widnieje przykład wykorzystania tych właściwości zgodnie z drugim podejściem. Listing 19.2. Zastosowanie właściwości odnoszących się do poszczególnych krawędzi

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Rezultat zastosowania tych właściwości widać na rysunku 19.2.

Rysunek 19.2. Nadawanie obramowania poszczególnym krawędziom

Właściwości zbiorcze obramowania Zamiast używać poszczególnych właściwości stylu, szerokości i koloru, możesz korzystać z właściwości zbiorczych, by podać wszystkie wartości w jednej deklaracji. W tabeli 19.6 znajduje się opis tych właściwości. Tabela 19.6. Właściwości zbiorcze border Właściwość

Opis

Wartości

border

Definiuje obramowanie wszystkich krawędzi.



border-top border-bottom border-left border-right

Definiuje obramowanie wybranej krawędzi.



Wartości tych właściwości możesz określić w jednej deklaracji, podając kolejno oddzielone spacjami wartości szerokości, stylu i koloru, tak jak w listingu 19.3. Listing 19.3. Zastosowanie właściwości zbiorczych obramowania

Przykład

401

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Zwróć uwagę, że nie przypisałem właściwości border-top wartości koloru. Kiedy pomijasz którąś z wartości, przeglądarka używa takich, które przypisano wcześniej — w tym przypadku jest to kolor nadany zbiorczej właściwości border. Rezultat zastosowania tych właściwości widać na rysunku 19.3.

Rysunek 19.3. Zastosowanie właściwości zbiorczych obramowania

Obramowania z zaokrąglonymi rogami Obramowanie z zaokrąglonymi rogami możesz utworzyć przy pomocy funkcji radius, z którą powiązanych jest pięć właściwości. W tabeli 19.7 znajduje się opis każdej z nich. Tabela 19.7. Właściwości radius obramowania Właściwość

Opis

Wartości

border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius

Określa promień pojedynczego narożnika.

Para jednostek miary lub wartości procentowych. Wartości procentowe odnoszą się do długości i szerokości obramowania.

border-radius

Zbiorczo określa promienie wszystkich narożników.

Jedna lub cztery pary jednostek miary lub procentowych, oddzielone znakiem /.

Zaokrąglone narożniki definiuje się, podając dwie wartości promienia, czy to jako jednostki miary, czy wartości procentowe. Pierwsza wartość określa promień poziomy, a druga pionowy. Wartości procentowe odnoszą się do wielkości pola elementu w poziomie i pionie. Na rysunku 19.4 widać przykład wykorzystania wartości promienia do utworzenia zaokrąglonego narożnika.

402

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Rysunek 19.4. Określenie zaokrąglenia narożnika wartościami promienia Jak widać na rysunku, wartości promienia służą do utworzenia nałożonego na pole elementu owalu, który określa kształt narożnika. W listingu 19.4 wartości te podane są w deklaracji stylu. Listing 19.4. Utworzenie zaokrąglonego narożnika obramowania

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Kiedy podana jest tylko jedna wartość, to jest ona przypisana promieniowi zarówno poziomemu, jak i pionowemu. Wygląd narożnika obramowania widać na rysunku 19.5 — powiększyłem obszar, na którym znajduje się narożnik, by łatwiej było mu się przyjrzeć.

Rysunek 19.5. Utworzenie zaokrąglonego narożnika „ Wskazówka Zauważ, że widoczne na rysunku obramowanie nachodzi na tekst. Do tworzenia przestrzeni między treścią elementu a jego obramowaniem służą dopełnienia, które omówię w rozdziale 20.

403

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Właściwość zbiorcza border-radius pozwala nadać jedną wartość wszystkim czterem narożnikom bądź czterech pojedynczych wartości w jednej deklaracji, tak jak widać w listingu 19.5. Listing 19.5. Zastosowanie właściwości zbiorczej border-radius

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W listingu 19.5 widnieją dwa akapity, którym przypisano dwie oddzielne deklaracje border-radius. W pierwszej podane są tylko dwie wartości, które odnoszą się do wszystkich czterech rogów obramowania. Zauważ, że wartości poziomych promieni oddzielone są od wartości pionowych znakiem /. W drugiej deklaracji podałem osiem wartości. Pierwsze cztery wartości określają poziome promienie każdego narożnika, a ostatnie cztery pionowe. Te zbiory wartości również są oddzielone znakiem /. Rezultat użycia tych deklaracji widać na rysunku 19.6. Wygląda dość dziwnie, ale dzięki temu widać, jak można pojedynczą deklaracją zdefiniować różne zaokrąglenia poszczególnych narożników oraz do woli zestawiać wartości procentowe i jednostki miary.

Obrazy w obramowaniu Nie trzeba się ograniczać do tworzenia obramowań przy użyciu właściwości border-style. Do tworzenia specjalnych obramowań elementów można też używać obrazów. Poszczególne cechy obramowania obrazkowego określa się pięcioma właściwościami, ale cechy całego obramowania można też zdefiniować w jednej deklaracji. W tabeli 19.8 znajduje się omówienie wszystkich sześciu właściwości.

404

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Rysunek 19.6. Zastosowanie właściwości zbiorczej border-radius Tabela 19.8. Właściwości border-image Właściwość

Opis

Wartości

border-image-source

Określa źródło obrazu.

none lub url()

border-image-slice

Określa odstępy między cięciami obrazu.

1 – 4 wartości procentowe lub w jednostkach miary, przy czym wartości odnoszą się do szerokości i wysokości obrazu.

border-image-width

Określa szerokość obramowania.

auto

border-image-outset

Określa obszar poza standardowym obramowaniem, na którym ma być wyświetlane obramowanie obrazkowe.

1 – 4 wartości procentowe lub w jednostkach miary.

border-image-repeat

Określa sposób, w jaki obraz wypełnia obszar obramowania.

Jedna lub dwie wartości spośród następujących: stretch, repeat i round.

border-image

Właściwość zbiorcza, która pozwala na podanie wszystkich wartości w jednej deklaracji.

Takie same, jak przy właściwościach szczegółowych; więcej przeczytasz poniżej.

1 – 4 wartości procentowe lub w jednostkach miary.

Niestety, kiedy piszę te słowa, popularne przeglądarki nie obsługują tych właściwości. Wprawdzie można tworzyć obramowania obrazkowe, ale jedynie przy użyciu właściwości zbiorczej oznaczonej prefiksami przeglądarkowymi, które opisałem w rozdziale 16.; IE w ogóle nie obsługuje tej funkcji. Z tego powodu mogę Ci zademonstrować użycie ogólnej funkcji, ale nie szczegółowych właściwości. Właściwości zbiorcze charakterystyczne dla poszczególnych przeglądarek działają tak samo jak właściwość border-image, więc nie powinieneś mieć żadnego problemu z przełożeniem przedstawionych w tym punkcie przykładów na standardowe właściwości, kiedy przeglądarki zaczną je obsługiwać.

Cięcie obrazu Cięcie obrazu jest podstawą wykorzystania obrazu jako obramowania. Podane wartości określają odstępy, według których przeglądarka dzieli obraz na dziewięć części. Na potrzeby wizualizacji stworzyłem obraz, który pozwoli nam zobaczyć, jak przeglądarka dzieli obraz na części i jak wykorzystuje każdą z nich. Widać go na rysunku 19.7.

405

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Rysunek 19.7. Obraz, który powstał na potrzeby wizualizacji działania funkcji obramowania Obraz ma wymiary 90×90 pikseli, a pojedyncze fragmenty 30×30 pikseli. Środkowy fragment jest przezroczysty. W celu podzielenia obrazu należy podać odległości od górnej, prawej, dolnej i lewej krawędzi obrazu, przedstawione jako konkretne długości lub wartości procentowe wielkości całego obrazu. Wszystkie cztery odstępy można zdefiniować osobno lub dwiema wartościami określającymi odstępy poziome i pionowe. Można też podać pojedynczą wartość, określającą wszystkie cztery odstępy. W tym przypadku podałem pojedynczą wartość 30px, tworząc tym samym odpowiednie fragmenty, tak jak widać na rysunku 19.8.

Rysunek 19.8. Cięcie obrazu obramowania W wyniku cięcia obrazu powstaje osiem fragmentów. Fragmenty oznaczone numerami 1, 3, 6 i 8 używane są jako narożniki, a numerami 2, 4, 5 i 7 jako krawędzie obramowania. W listingu 19.6 widnieją właściwości poszczególnych przeglądarek, służące do dzielenia obrazu i używania jego fragmentów jako obramowania. Listing 19.6. Wykorzystanie pociętego obrazu jako obramowania

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Każda z przedstawionych deklaracji właściwości używa tych samych argumentów. Do podania obrazu należy użyć funkcji url — przestrzeganie tej formuły jest konieczne, ponieważ specyfikacja CSS przewiduje możliwość wdrożenia innych sposobów pobierania obrazów. W każdym przypadku podałem pojedynczą wartość cięcia 30, co odpowiada rozmiarom fragmentów przykładowego obrazu. Zauważ, że przy określaniu odstępów cięć nie podaje się jednostek miary — zakłada się, że to piksele. Znak / służy do oddzielania wartości cięć od wartości określających szerokość obramowania. Dla każdego boku elementu można określić inną szerokość, ale w tym przypadku postanowiłem podać jedną wartość dla wszystkich czterech — 50px. Na rysunku 19.9 widać, jak obraz wygląda w Chrome; w Firefoksie i Operze jego wygląd jest taki sam.

Rysunek 19.9. Wykorzystanie obrazu jako obramowania Powyżej widać, jak przeglądarka wykorzystuje każdy z fragmentów obrazu. Fragmenty oznaczone numerami 2 i 7 są mało czytelne, ale to dlatego, że przypisane zostały górnej i dolnej krawędzi.

Styl powtórzeń fragmentów Na rysunku 19.9 widać, że fragmenty zostały rozciągnięte tak, by wypełniły obszar obramowania. Aby uzyskać inny efekt, wystarczy zmienić styl powtórzeń przy użyciu właściwości border-image-repeat; powtórzenia można też definiować przy użyciu właściwości zbiorczych. W tabeli 19.9 znajduje się opis wartości stylu powtórzeń. Kiedy piszę te słowa, z obsługą wartości stylów powtórzeń bywa różnie. Żadna z przeglądarek nie obsługuje wartości space, a Chrome nie obsługuje wartości round. W listingu 19.7 widać przykład zastosowania wartości repeat i round w Firefoksie do zmiany stylu powtórzeń obramowania.

407

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Tabela 19.9. Wartości właściwości border-image-repeat Wartość

Opis

stretch

Fragment rozciągany jest tak, by wypełnić cały obszar; jest to wartość domyślna.

repeat

Fragment jest powtarzany, by wypełnić cały obszar, przez co w obramowaniu mogą występować urwane fragmenty.

round

Fragment jest rozciągany i powtarzany, co pozwala zapobiec pojawianiu się urwanych fragmentów.

space

Fragment powtarzany jest bez cięcia poszczególnych fragmentów, a pozostała przestrzeń rozdzielana jest równomiernie.

Listing 19.7. Zastosowanie stylu repeat przy określaniu powtórzeń fragmentów obramowania

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W listingu 19.7 pierwsza wartość określa styl powtórzeń w poziomie, a druga w pionie. Gdybym podał tylko jedną wartość, to zostałaby ona wykorzystana przy powtórzeniach poziomych i pionowych. Różnice pomiędzy tymi dwiema wartościami widać na rysunku 19.10.

Rysunek 19.10. Zastosowanie wartości round i repeat przy określaniu powtórzeń fragmentów obrazu obramowania

408

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Zauważ, że górna i dolna krawędź nie zawierają urwanych fragmentów. Cyfry 2 i 7 zostały nieco rozciągnięte i powtórzone, dzięki czemu nie są w żadnym miejscu urwane. Tymczasem cyfry występujące na obszarze lewej i prawej krawędzi, którym nadano styl repeat, są urwane.

Tła elementów Drugim widocznym obszarem pola elementu jest jego treść. W tym podrozdziale przedstawię Ci właściwości służące do stylizacji tego obszaru. (Szczegóły co do stylizacji samej treści omówię w rozdziale 22.). Ich opis znajduje się w tabeli 19.10. Tabela 19.10. Właściwości tła Właściwość

Opis

Wartości

background-color

Określa kolor tła elementu. Kolor wyświetlany jest pod obrazami.

background-image

Określa obrazy tła elementu. Jeżeli podany jest więcej niż jeden obraz, to każdy kolejny jest rozrysowywany za tym, który go poprzedza.

none lub url(obraz)

background-repeat

Określa styl powtórzeń obrazów.

Tabela 19.11

background-size

Określa wielkość obrazu tła.

Tabela 19.12

background-position

Określa położenie obrazu tła.

Tabela 19.13

background-attachment

Określa zaczepienie obrazów tła znajdujących się w elemencie z własnym obszarem widoku.

Tabela 19.14

background-clip

Określa obszar przycinania.

Tabela 19.15

background-origin

Określa pozycję początkową obrazu tła.

Tabela 19.15

background

Właściwość zbiorcza.

Omówienie znajdziesz poniżej.

Kolor i obraz tła Wybór tła elementu należy zacząć od określenia koloru lub obrazu tła (bądź i jednego, i drugiego) przy użyciu właściwości tła przedstawionych w listingu 19.8. Listing 19.8. Określenie koloru i obrazu tła

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie nadałem właściwości background-color wartość lightgray, a funkcję url zastosowałem do wczytania obrazu banana.png, przypisanego właściwości background-image. Rezultat widać na rysunku 19.11. Obraz tła zawsze jest rozrysowywany nad kolorem tła.

Rysunek 19.11. Kolor i obraz tła Powyższy obraz wprawdzie gryzie się z tekstem elementu, ale tak się zwykle dzieje, jeżeli obraz tła nie jest dobrany bardzo starannie. Zauważ, że obraz jest wielokrotnie powtórzony w poziomie. Efekt ten uzyskuje się przy użyciu właściwości background-repeat, której obsługiwane wartości opisane są w tabeli 19.11. Tabela 19.11. Wartości background-repeat Wartość

Opis

repeat-x

Powtarza obraz w poziomie; obraz może być urwany.

repeat-y

Powtarza obraz w pionie; obraz może być urwany.

repeat

Powtarza obraz w obydwu kierunkach; obraz może być urwany.

space

Obraz powtarzany jest aż do wypełnienia obszaru, lecz bez urywania fragmentów; pozostała przestrzeń rozkłada się równomiernie między powtórzonymi obrazami.

round

Obraz jest skalowany tak, by powtórzone fragmenty nie były urwane.

no-repeat

Obraz nie jest powtarzany.

Charakter powtórzeń można określić zarówno w poziomie, jak i w pionie. Kiedy podana jest tylko jedna wartość, przeglądarka używa jej w odniesieniu do obydwu kierunków. Wartości repeat-x i repeat-y to wyjątki — kiedy któraś z nich jest podana, przeglądarka używa stylu no-repeat jako drugiej wartości.

Rozmiar obrazu tła Podany przeze mnie obraz jest większy od elementu, więc użyłem właściwości background-size, by zmniejszyć go do wielkości 40×40 pikseli. Wielkość można też określać odnoszącymi się do szerokości i wysokości obrazu wartościami procentowymi, a także predefiniowanymi wartościami, które opisuję w tabeli 19.12.

410

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Tabela 19.12. Wartości background-size Wartość

Opis

contain

Obraz skalowany jest do największego rozmiaru, przy jakim może się zmieścić w obszarze wyświetlania, z jednoczesnym zachowaniem proporcji.

cover

Obraz skalowany jest do najmniejszego rozmiaru, przy jakim może się zmieścić w obszarze wyświetlania, z jednoczesnym zachowaniem proporcji.

auto

Domyślna wartość. Obraz wyświetlany jest w pełnym rozmiarze.

Zastosowanie wartości contain powoduje zeskalowanie obrazu tak, aby był w całości widoczny w obrębie elementu. Przeglądarka sama stwierdza, czy większa jest szerokość, czy długość obrazu, po czym skaluje według dłuższej osi. Z kolei wartość cover poleca przeglądarce, by skalowała obraz według krótszej osi, wobec czego nie cały obraz jest widoczny. Przykład zastosowania dwóch różnych stylów skalowania widać na rysunku 19.12.

Rysunek 19.12. Style skalowania contain i cover Wysokość obrazka z bananem jest większa od jego szerokości. Kiedy więc używasz wartości cover, obraz jest skalowany tak, by zachować szerokość obrazu, pomimo że nie widać jego pełnej wysokości. Rezultatem tego jest element u góry rysunku 19.12. Kiedy używasz wartości contain, obraz jest skalowany tak, by w pełni była widoczna jego najdłuższa oś — obraz jest zatem widoczny w całości, pomimo że nie zajmuje całego obszaru tła. Rezultatem tego jest element u dołu rysunku 19.12.

Położenie obrazu tła Właściwość background-position służy do wskazywania przeglądarce, gdzie powinna zamieścić obraz tła, i najbardziej się przydaje, kiedy nie używasz funkcji powtarzania obrazu. Przykład zastosowania tej właściwości widać w listingu 19.9. Listing 19.9. Określenie położenia obrazu tła

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Powyższa deklaracja wskazuje przeglądarce, by zaczęła rozrysowywać obraz tła w odległości 30 pikseli od lewej krawędzi i 10 pikseli od górnej. Położenie zdefiniowałem przy użyciu jednostek miary, choć mogłem też skorzystać z predefiniowanych wartości podanych w tabeli 19.13. Tabela 19.13. Wartości background-position Wartość

Opis

top

Umieszcza obraz przy górnej krawędzi.

left

Umieszcza obraz przy lewej krawędzi.

right

Umieszcza obraz przy prawej krawędzi.

bottom

Umieszcza obraz przy dolnej krawędzi.

center

Umieszcza obraz pośrodku obszaru.

Pierwsza wartość określa położenie obrazu w pionie — może to być top, bottom lub center. Druga wartość określa położenie poziome — może to być left, right lub center. Rezultat zastosowania deklaracji z powyższego przykładu widać na rysunku 19.13.

Rysunek 19.13. Określenie pozycji obrazu tła

Zaczepienie obrazu tła Kiedy nadajesz tło elementowi z własnym polem widoku, możesz określić jego zaczepienie. Dobrym przykładem takiego elementu jest textarea, który opisałem w rozdziale 14. — automatycznie pojawiają się w nim paski przewijania treści. Innym typowym przykładem jest element body (omówiony szczegółowo

412

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

w rozdziale 7.), w którym pojawiają się paski przewijania, kiedy znajduje się w nim więcej treści, niż mieści się w oknie przeglądarki. Zaczepienie obrazu definiuje się właściwością background-attachment. W tabeli 19.14 znajdują się obsługiwane przez niego wartości. Tabela 19.14. Wartości background-attachment Wartość

Opis

fixed

Tło jest przyczepione do okna przeglądarki, czyli nie przewija się wraz z treścią.

local

Tło jest przyczepione do treści, czyli przewija się wraz z nią.

scroll

Tło jest przyczepione do elementu i nie przewija się z treścią.

W listingu 19.10 widnieje element textarea o zdefiniowanej właściwości background-attachment. Listing 19.10. Zastosowanie właściwości background-attachment

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Działania poszczególnych trybów przyczepienia nie mogę zademonstrować na rysunkach — to coś, co sam musisz zobaczyć w przeglądarce. Aby ujrzeć różnice w działaniu trybów fixed i scroll, otwórz przykładowy dokument HTML, zmień wielkość okna przeglądarki tak, by element textarea nie był w pełni widoczny, a następnie przewiń treść paskiem przeglądarki (ale nie paskiem elementu textarea).

Pozycja początkowa tła i styl przycinania Pozycja początkowa tła określa, na które miejsce w polu elementu nałożony ma być kolor lub obraz tła. Styl przycinania określa, w którym obszarze pola elementu kolor i obraz tła są rozrysowywane. Za te funkcje odpowiadają właściwości background-origin i background-clip, które obsługują te same trzy wartości, opisane w tabeli 19.15.

413

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Tabela 19.15. Wartości background-origin i background-clip Wartość

Opis

border-box

Kolor i obraz tła rozrysowywane są w obrębie obramowania.

padding-box

Kolor i obraz tła rozrysowywane są w obrębie pola dopełnienia.

content-box

Kolor i obraz tła rozrysowywane są w obrębie pola treści.

W listingu 19.11 widać przykład zastosowania właściwości background-origin. Listing 19.11. Zastosowanie właściwości background-origin

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W listingu 19.11 użyłem wartości border-box, wobec czego przeglądarka rozrysowuje kolor i obraz tła od pola obramowania — i pod obramowaniem. Pod obramowaniem, ponieważ obramowanie zawsze jest rozrysowywane nad tłem. Rezultat widać na rysunku 19.14.

Rysunek 19.14. Zastosowanie właściwości background-origin

414

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Właściwość background-clip określa, która część tła jest widoczna, poprzez nałożenie pola przycinania. Elementy graficzne znajdujące się poza nim nie są wyświetlane. Właściwości tej możesz nadawać te same trzy wartości, co w przypadku background-origin, a rezultat ich połączenia widać w listingu 19.12. Listing 19.12. Zastosowanie właściwości background-clip

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Powyższa kombinacja poleca przeglądarce, by rozrysowała tło od pola obramowania, lecz nie wyświetlała tego, co znajduje się poza polem treści. Dość subtelny efekt widać na rysunku 19.15.

Rysunek 19.15. Zastosowanie właściwości border-origin i border-clip w zestawieniu

Właściwość zbiorcza background Właściwość background pozwala na określenie wszystkich szczegółowych wartości tła w pojedynczej deklaracji. Oto właściwy format deklaracji wartości tej właściwości, która odnosi się do właściwości szczegółowych:

415

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

background:

Jest to dość rozwlekła deklaracja, ale możesz pomijać poszczególne wartości — przeglądarka używa wtedy wartości domyślnych. W listingu 19.13 widnieje przykład zastosowania właściwości zbiorczej background. Listing 19.13. Zastosowanie właściwości zbiorczej background

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Powyższa właściwość zbiorcza ma takie samo znaczenie, jak zbiór następujących właściwości szczegółowych: background-color: lightgray; background-position: top right; background-repeat: no-repeat; background-origin: border-box; background-position: content-box; background-attachment: local; background-image: url(banana.png);

„ Wskazówka Obecnie nie wszystkie przeglądarki obsługują tę właściwość.

Cienie Jedną z najbardziej wyczekiwanych funkcji CSS3 jest możliwość nadania cienia polu elementu. Służy do tego właściwość drop-shadow, którą omawiam w tabeli 19.16. Tabela 19.16. Właściwość drop-shadow Właściwość

Opis

Wartości

drop-shadow

Definiuje cień elementu.

Tabela 19.17

416

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Ogólna wartość elementu box-shadow składa się z następujących szczegółowych wartości: box-shadow: hoffset voffset blur spread color inset

Ich opis znajduje się w tabeli 19.17. Tabela 19.17. Wartości właściwości box-shadow Wartość

Opis

hoffset

Poziome oddalenie wyrażane jednostkami miary odległości. Wartość dodatnia przesuwa cień w prawo, a ujemna w lewo.

voffset

Pionowe oddalenie wyrażane jednostkami miary odległości. Wartość dodatnia przesuwa cień w dół, a ujemna w górę.

blur

(Opcjonalna). Określa promień rozmycia, wyrażany jednostkami miary odległości. Im większa wartość, tym bardziej rozmyta jest krawędź pola. Przy wartości domyślnej 0 krawędź pola jest ostra.

spread

(Opcjonalna). Określa promień szerokości cienia, wyrażany jednostkami miary odległości. Dodatnie wartości rozszerzają cień we wszystkie strony, a ujemne sprawiają, że cień ściągany jest ku polu.

color

(Opcjonalna). Kolor cienia. Przeglądarka sama wybiera kolor, kiedy ta wartość jest pominięta.

inset

(Opcjonalna). Sprawia, że cień znajduje się w obrębie pola. W listingu 19.15 znajdziesz tego przykład.

„ Ostrzeżenie Zastanów się dobrze, czy warto pominąć wartość color. Powinna to być wartość opcjonalna, której pominięcie pozwala przeglądarce na wykorzystanie domyślnej barwy, być może odpowiedniej dla systemu operacyjnego lub samej przeglądarki. Tymczasem w chwili, kiedy to piszę, przeglądarki oparte na Webkit nie rozrysowują cieni, kiedy kolor nie jest zdefiniowany. Z tego względu warto jednoznacznie określić barwę wartością box-shadow.

Przykład zastosowania tej właściwości widać w listingu 19.14. Listing 19.14. Utworzenie cienia

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

417

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Rezultat zastosowania tej właściwości widać na rysunku 19.16.

Rysunek 19.16. Przypisany elementowi cień W pojedynczej deklaracji box-shadow można definiować więcej niż jeden cień. Wystarczy oddzielić wartości kolejnych cieni przecinkami, tak jak widać w listingu 19.15. Listing 19.15. Nadanie elementowi więcej niż jednego cienia

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W listingu 19.15 zdefiniowałem dwa cienie, przy czym jeden znajduje się wewnątrz elementu. Rezultat widać na rysunku 19.17.

Obrysy Obrysów można używać zamiast obramowań. Przydają się najbardziej, kiedy chcesz zwrócić użytkownikowi uwagę na jakiś element, np. przycisk, który trzeba nacisnąć, lub błąd w danych. Obrysy rysowane są na krawędziach pola obramowania. Główną różnicą między obramowaniem a obrysem jest to, że obrysy nie są traktowane jako część strony, przez co layout nie dostosowuje się do nich. W tabeli 19.18 znajduje się opis właściwości odnoszących się do obrysów.

418

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Rysunek 19.17. Nadanie elementowi więcej niż jednego cienia Tabela 19.18. Właściwości outline Właściwość

Opis

Wartości

outline-color

Określa kolor obrysu.

outline-offset

Określa oddalenie obrysu.

outline-style

Określa styl obrysu.

Takie same, jak właściwości border-style (tabela 19.4).

outline-width

Określa szerokość obrysu.

thin medium thick

outline

Właściwość zbiorcza, określająca obrys w jednej deklaracji.



W listingu 19.16 widać przykład zastosowania obrysu. Zamieściłem w tym przykładzie prosty skrypt, aby ukazać, jak obrysy mogą być rozrysowywane bez zmiany layoutu strony. Listing 19.16. Zastosowanie obrysu

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy

419

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

uwzględnili niezliczone odmiany jabłek, pomarańczy i innych dokonać wyboru spośród tysięcy możliwości.

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad uwzględnili niezliczone odmiany jabłek, pomarańczy i innych dokonać wyboru spośród tysięcy możliwości.

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad uwzględnili niezliczone odmiany jabłek, pomarańczy i innych dokonać wyboru spośród tysięcy możliwości.

Wyłącz obrys Włącz obrys



owoców, musielibyśmy

pięćset odmian. Gdybyśmy owoców, musielibyśmy

pięćset odmian. Gdybyśmy owoców, musielibyśmy

Rezultat zastosowania obrysu widać na rysunku 19.18. Zauważ, że elementy nie zmieniają położenia. Jest tak, ponieważ obrysy nie zajmują przestrzeni w layoucie strony.

Rysunek 19.18. Nadanie elementowi obrysu

420

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

Podsumowanie W tym rozdziale przedstawiłem Ci właściwości służące do tworzenia obramowań, teł i obrysów pola elementu. Obramowania można wybierać ze zbioru prostych stylów lub tworzyć je od początku przy użyciu obrazów. Techniką leżącą u podstaw tworzenia obramowań obrazkowych jest cięcie obrazu na fragmenty, które są następnie wykorzystywane do rozrysowywania różnych części obramowania. Obramowania możesz uzupełniać tłami. Pokazałem Ci, jak tworzyć tła składające się z kolorów i obrazów, oraz sposoby konfigurowania ich relacji z polem elementu w ogóle. Rozdział zakończyłem omówieniem cieni, które wraz z zaokrąglonymi narożnikami są najważniejszymi nowymi funkcjami CSS3 z dziedziny obramowań i teł.

421

ROZDZIAŁ 19. „ OBRAMOWANIA I TŁA

422

ROZDZIAŁ 20

Model polowy

W tym rozdziale omówię właściwości CSS służące do konfiguracji pola elementu. W rozdziale 16. objaśniłem, że model polowy to jedna z koncepcji leżących u podstaw CSS i można go używać zarówno w konfiguracji wyglądu elementów, jak i ogólnego układu dokumentu. W tabeli 20.1 znajduje się streszczenie całego rozdziału. Tabela 20.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Określenie wielkości pola dopełnienia.

Użyj właściwości zbiorczej padding lub właściwości padding-top, padding-bottom, padding-left i padding-right.

20.1, 20.2

Określenie wielkości pola marginesu.

Użyj właściwości zbiorczej margin lub właściwości margin-top, margin-bottom, margin-left i margin-right.

20.3

Określenie wielkości elementu.

Użyj właściwości width i height.

20.4

Określenie, do których obszarów pola wymiary się odnoszą.

Użyj właściwości box-sizing.

20.4

Określenie ograniczeń rozmiaru elementu.

Użyj właściwości max-width, min-width, max-height i min-height.

20.5

Określenie obsługi przepełnienia.

Użyj właściwości overflow, overflow-x lub overflow-y.

20.6, 20.7

Określenie widoczności elementu.

Użyj właściwości visibility; zapoznaj się też z wartością none właściwości display.

20.8

Określenie sposobu wyświetlania elementu.

Użyj właściwości display.

—

Określenie rodzaju pola, by element był wyświetlany w osobnym bloku w pionie.

Użyj właściwości display o wartości block.

20.9

Określenie rodzaju pola elementu tak, żeby był wyświetlany tak jak wyraz w akapicie.

Użyj właściwości inline o wartości block.

20.10

Określenie rodzaju pola elementu tak, żeby był traktowany jako element liniowy w odniesieniu do otaczających go treści, a jako blokowy w stosunku do treści w nim zawartych.

Użyj właściwości display o wartości inline-block.

20.11

ROZDZIAŁ 20. „ MODEL POLOWY

Tabela 20.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Określenie rodzaju pola elementu tak, by sposób jego wyświetlania był zależny od otaczających go elementów.

Użyj właściwości display o wartości run-in.

20.12, 20.13

Ukrycie elementu i jego zawartości.

Użyj właściwości display o wartości none.

20.14

Przesunięcie elementu w lewo lub w prawo, aby znajdował się przy krawędzi okalającego go pola lub innego pływającego elementu.

Użyj właściwości display o wartości float.

20.15

Zapewnienie, by pływający element nie był umieszczany obok innego pływającego elementu.

Użyj właściwości display o wartości clear.

20.16

Dopełnienia Dopełnienia dodają pustą przestrzeń pomiędzy treścią elementu a jego obramowaniem. Można określać dopełnienia poszczególnych krawędzi pola treści lub skorzystać z właściwości zbiorczej padding do zdefiniowania wartości w ramach jednej deklaracji. Właściwości padding omówione są w tabeli 20.2. Tabela 20.2. Właściwości padding Właściwość

Opis

Wartości

padding-top

Określa dopełnienie przy górnej krawędzi.

lub

padding-right

Określa dopełnienie przy prawej krawędzi.

lub

padding-bottom

Określa dopełnienie przy dolnej krawędzi.

lub

padding-left

Określa dopełnienie przy lewej krawędzi.

lub

padding

Ta właściwość zbiorcza określa dopełnienie przy wszystkich krawędziach w jednej deklaracji.

Od jednej do czterech wartości lub

Określające dopełnienie wartości procentowe odnoszą się zawsze do szerokości kontenera — wysokość nie jest brana pod uwagę. W listingu 20.1 widać przykład nadania elementowi dopełnienia. Listing 20.1. Nadanie elementowi dopełnienia

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W listingu 20.1 nadałem inne wielkości dopełnienia poszczególnym krawędziom pola, czego rezultat widać na rysunku 20.1. Właściwość background-clip (opisaną w rozdziale 19.) zdefiniowałem tak, by kolor tła nie nachodził na obszar dopełnienia, tym samym wyróżniając efekt graficzny dopełnienia.

Rysunek 20.1. Element z dopełnieniem Właściwości zbiorczej padding można użyć do określenia dopełnienia wszystkich czterech krawędzi w jednej deklaracji. Używając jej, możesz określić od jednej do czterech wartości. Cztery podane wartości definiują kolejno dopełnienie górnej, prawej, dolnej i lewej krawędzi. Kiedy któreś wartości są pominięte, przeglądarka wykorzystuje wartość, która najbardziej pasuje: kiedy brakuje wartości lewego dopełnienia, wykorzystana jest wartość prawego dopełnienia; kiedy brakuje wartości dolnego dopełnienia, wykorzystana jest wartość dopełnienia górnego. Jeżeli podana jest tylko jedna wartość, to określa ona dopełnienie wszystkich krawędzi. W listingu 20.2 widać przykład zastosowania właściwości zbiorczej padding. Utworzyłem w tym przykładzie także zaokrąglone narożniki, by pokazać, jak wykorzystać dopełnienie do zapewnienia, żeby obramowanie nie nachodziło na treść. Listing 20.2. Zastosowanie właściwości zbiorczej padding

Przykład



425

ROZDZIAŁ 20. „ MODEL POLOWY

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Wygląd obramowania i dopełnienia widać na rysunku 20.2.

Rysunek 20.2. Zastosowanie właściwości zbiorczej padding Gdyby zabrakło tu dopełnienia, obramowanie zostałoby narysowane na tekście, tak jak w przykładzie w rozdziale 19. Dopełnienie pozwala temu zapobiec, sprawiając, by między treścią a obramowaniem znalazło się wystarczająco dużo przestrzeni.

Marginesy Margines jest obszarem pomiędzy obramowaniem elementu a innymi znajdującymi się na stronie obiektami, w tym innymi elementami oraz elementem-rodzicem. W tabeli 20.3 znajduje się opis właściwości określających margines. Tabela 20.3. Właściwości margin Właściwość

Opis

Wartości

margin-top

Określa margines przy górnej krawędzi.

auto

margin-right

Określa margines przy prawej krawędzi.

auto

margin-bottom

Określa margines przy dolnej krawędzi.

auto

margin-left

Określa margines przy lewej krawędzi.

auto

margin

Ta właściwość zbiorcza określa margines przy wszystkich krawędziach w jednej deklaracji.

auto

426

ROZDZIAŁ 20. „ MODEL POLOWY

Podobnie jak przy właściwościach dopełnienia, wartości procentowe zawsze odnoszą się do szerokości kontenera, nawet gdy określają dopełnienie górnej i dolnej krawędzi. W listingu 20.3 widnieje przykład utworzenia marginesu. Listing 20.3. Nadanie elementom marginesów

Przykład







W listingu 20.3 utworzyłem dwa elementy img. Marginesom przy górnej i dolnej krawędzi nadałem wielkość 4px, a przy lewej i prawej krawędzi 20px. Utworzoną marginesami przestrzeń wokół elementów widać na rysunku 20.3, który przedstawia elementy img z marginesami i bez.

Rysunek 20.3. Rezultat nadania elementom marginesów Marginesy nie są zawsze wyświetlane, nawet kiedy nadajesz je przy użyciu którejś z właściwości marginesów. Przykładowo, kiedy margines jest zdefiniowany dla elementu z właściwością display o wartości inline, margines nie jest nadawany górnym i dolnym krawędziom. Właściwość display omówię w podrozdziale „Typy pola elementu” w dalszej części rozdziału.

Rozmiar elementu Przeglądarki określają rozmiary elementów, sugerując się ogólną postacią treści na stronie, przy czym muszą przestrzegać straszliwie szczegółowych zasad. Takiemu zachowaniu przeglądarki możesz zapobiec, korzystając z właściwości definiujących rozmiar, które omawiam w tabeli 20.4.

427

ROZDZIAŁ 20. „ MODEL POLOWY

Tabela 20.4. Właściwości size Właściwość

Opis

Wartości

width height

Określa szerokość i wysokość elementu.

auto

min-width min-height

Określa minimalną szerokość lub wysokość elementu.

auto

max-width max-height

Określa maksymalną szerokość lub wysokość elementu.

auto

box-sizing

Określa, która część pola elementu jest podstawą dla określenia wielkości.

content-box padding-box border-box margin-box

Domyślna wartość wszystkich tych właściwości to auto, która poleca przeglądarce, by sama określiła wysokość i szerokość elementu. Wymiary można też określać jednostkami miary lub wartościami procentowymi. Wartości procentowe obliczane są na podstawie szerokości kontenera, nawet kiedy obliczana jest wysokość. W listingu 20.4 widnieje przykład określenia wymiarów elementu. Listing 20.4. Określenie wymiarów elementu

Przykład









428

ROZDZIAŁ 20. „ MODEL POLOWY

W tym przykładzie znajdują się trzy kluczowe elementy. W elemencie div znajdują się dwa elementy img. Wygląd tych elementów w przeglądarce widać na rysunku 20.4.

Rysunek 20.4. Określenie rozmiaru elementu Element div jest dzieckiem elementu body. Kiedy określam szerokość div jako 75%, polecam przeglądarce, że szerokość elementu div ma wynosić 75% szerokości jego kontenera (w tym wypadku elementu body). Kiedy użytkownik zmienia rozmiar okna przeglądarki, zmianie ulegają również wymiary elementu body i — co za tym idzie — elementu div, który dostosowuje się do szerokości 75% swojego rodzica. Przykład tego widać na rysunku 20.5. Elementowi div nadałem obramowanie, aby łatwiej było się zorientować co do jego wymiarów.

Rysunek 20.5. Zmiana rozmiaru okna przeglądarki w ramach przedstawienia względnej relacji wymiarów Jak widać, szerokość elementu div zawsze jest równa 75% szerokości elementu body, który wypełnia całe okno przeglądarki. Wysokość elementu div określiłem jako 100px, co jest wartością bezwzględną i nie ulega zmianie wraz ze zmianami rozmiaru kontenera. Widać tu też, że część elementu div została ucięta, kiedy zmieniłem rozmiar okna tak, by było szerokie a krótkie. To samo w zasadzie zrobiłem z elementami img. Wartość width pierwszego z nich określona jest jako 50% szerokości kontenera — element zmienia zatem wymiary, by dostosować się do tej relacji, pomimo że powoduje to utratę pierwotnych proporcji. Drugiemu elementowi img nie nadałem określonej szerokości, przez co określenie jej leży wyłącznie w gestii przeglądarki. Szerokość domyślnie wywodzi się z wysokości w taki sposób, by zachować pierwotne proporcje. „ Wskazówka Zauważ, jak obrazy na rysunku 20.5 zachodzą na krawędzie elementu div. Zjawisko to określa się mianem przepełnienia. Sposoby kontrolowania przepełnienia omówię w dalszej części rozdziału.

Pole wymiarów Obydwa podane w przykładzie elementy img mają jednakową wartość height (50%), lecz mimo to wyglądają inaczej. Jest tak, ponieważ właściwością box-sizing zmieniłem obszar pola elementu, którego wielkość definiowana jest omówionymi wcześniej właściwościami.

429

ROZDZIAŁ 20. „ MODEL POLOWY

Wysokość i szerokość są domyślnie nadawane polu treści elementu. Oznacza to, że rzeczywista wielkość elementu z właściwością height o wartości 100px wynosi 100 pikseli plus wartości dopełnień, obramowań i marginesów górnej i dolnej krawędzi. Właściwość box-sizing pozwala na określenie, do którego obszaru pola elementu mają się odnosić właściwości decydujące o wielkości — dzięki temu nie musisz samodzielnie wyliczać wynikających z tego różnic. W tabeli 20.4 widnieją wartości obsługiwane przez tę właściwość. „ Wskazówka Właściwości odpowiedzialne za rozmiar często są używane do tworzenia layoutów. Takie podejście się sprawdza, ale o wiele lepiej skorzystać z funkcji tworzenia layoutów przy użyciu tabel. Szczegóły znajdziesz w rozdziale 21.

Określanie minimalnych i maksymalnych wielkości Właściwości min- i max- służą do określania ograniczeń, jakich przeglądarka musi przestrzegać przy określaniu rozmiaru elementów. Przeglądarka ma jednak pewną swobodę w określaniu rozmiaru elementów. W listingu 20.5 widnieje przykład zastosowania tych właściwości. Listing 20.5. Określa zakres wielkości

Przykład







W listingu 20.5 nadałem właściwości min-width i max-width pojedynczemu elementowi img oraz określiłem wstępną szerokość jako 50% kontenera. Przeglądarka może wobec tego swobodnie zmieniać rozmiar elementu w granicach podanych przeze mnie wartości, zachowując jednocześnie format obrazu, jak widać na rysunku 20.6. Na rysunku 20.6 widać, co się dzieje po zmniejszeniu okna. Im okno jest mniejsze, tym mniejszy staje się rozmiar obrazu — zachowana zostaje relacja proporcji pomiędzy elementem img a body. Po dojściu do minimalnej szerokości przeglądarka przestaje zmieniać rozmiar obrazu. Widać to w najmniejszym oknie przeglądarki, gdzie obraz jest przycięty dolną krawędzią okna. „ Uwaga Obsługa właściwości box-sizing różni się w zależności od przeglądarki.

430

ROZDZIAŁ 20. „ MODEL POLOWY

Rysunek 20.6. Określenie ograniczenia rozmiaru elementu właściwościami min- i max-

Przepełnienie Przy zmianie rozmiaru elementów w końcu trafiasz na sytuację, w której treści zajmują za dużo miejsca, by zmieścić się w polu treści elementu. W takich sytuacjach treść domyślnie i tak jest rozrysowywana, choćby i wychodziła poza pole elementu. W listingu 20.6 utworzyłem element o określonych wymiarach, które nie wystarczają do objęcia całej treści elementu. Listing 20.6. Utworzenie elementu, który jest za mały, by wyświetlić w nim całą treść

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Właściwościom width i height nadałem bezwzględne wartości, czego rezultat widać na rysunku 20.7. To zachowanie można zmienić przy użyciu właściwości overflow, których opis znajduje się w tabeli 20.5. Właściwości overflow-x i overflow-y określają styl obsługi przepełnień w poziomie i pionie; właściwość zbiorcza overflow pozwala na zdefiniowanie stylu obsługi w obydwu kierunkach w pojedynczej deklaracji. W tabeli 20.6 znajduje się opis wartości obsługiwanych przez tę właściwość. W listingu 20.7 widać przykład zastosowania właściwości przepełnienia.

431

ROZDZIAŁ 20. „ MODEL POLOWY

Rysunek 20.7. Domyślny wygląd elementu, którego treść zajmuje więcej miejsca niż sam element Tabela 20.5. Właściwości overflow Właściwość

Opis

Wartości

overflow-x overflow-y

Określenie stylu obsługi przepełnienia w poziomie i pionie.

Tabela 20.6

overflow

Właściwość zbiorcza.

overflow overflow-x overflow-y

Tabela 20.6. Wartości właściwości overflow Wartość

Opis

auto

Ta wartość poleca przeglądarce, by sama rozstrzygnęła, co należy zrobić. Zwykle oznacza to, że na ekranie pojawia się pasek przewijania, kiedy treść nie mieści się w polu treści elementu — i tylko wtedy (w odróżnieniu od zachowania określanego wartością scroll, która poleca, by pasek pojawiał się niezależnie od tego, czy jest potrzebny).

hidden

Treść przycinana jest tak, by jedynie jej część była widoczna w polu treści. Użytkownik nie ma żadnej możliwości zapoznania się z przyciętą treścią.

no-content

Treść nie jest wyświetlana, jeżeli nie można jej wyświetlić w pełni. Ta wartość nie jest obsługiwana przez popularne przeglądarki.

no-display

Treść jest ukrywana, jeżeli nie można jej wyświetlić w pełni. Ta wartość nie jest obsługiwana przez popularne przeglądarki.

scroll

Przeglądarka wyświetla mechanizm przewijania, który pozwala użytkownikowi na zapoznanie się z całą treścią. Jest to zwykle pasek przewijania, choć mechanizm może się różnić w zależności od przeglądarki i systemu. Pasek jest widoczny, nawet kiedy nie ma żadnego przepełnienia.

visible

Wartość domyślna. Zawartość elementu wyświetlana jest pomimo tego, że zajmuje więcej miejsca niż pole treści.

Listing 20.7. Określenie sposobu obsługi przepełnienia

Przykład

432

ROZDZIAŁ 20. „ MODEL POLOWY

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, dokonać wyboru spośród tysięcy możliwości.

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, dokonać wyboru spośród tysięcy możliwości.

odmian. Gdybyśmy musielibyśmy

odmian. Gdybyśmy musielibyśmy

W listingu 20.7 nadałem właściwości overflow akapitu first wartość hidden, a akapitu second wartość scroll. Rezultat widać na rysunku 20.8.

Rysunek 20.8. Zastosowanie właściwości overflow o wartościach hidden i scroll „ Wskazówka Obsługa przepełnień jest jednym z aspektów modułu CSS, którego ostateczna forma dopiero zostanie ustanowiona. Padają propozycje, by rozszerzyć zbiór właściwości przepełnienia o obsługę funkcji marquee, która polega na przewijaniu treści elementu z upływem czasu, tak by można było się zapoznać z nią w całości. Specyfikacja CSS3 przewiduje zastosowanie pewnych właściwości, których jeszcze żadna przeglądarka nie obsługuje: overflow-style, marquee-direction, marquee-loop, marquee-play-count, marquee-speed i marquee-style.

433

ROZDZIAŁ 20. „ MODEL POLOWY

Widoczność elementu Widoczność elementów określa się właściwością visibility, której opis znajduje się w tabeli 20.7. Sam pomysł ukrywania elementów może się wydawać dziwny, ale wykorzystując tę właściwość w JavaScript, można uzyskać dość zaawansowane efekty. Tabela 20.7. Właściwość visibility Właściwość

Opis

Wartości

visibility

Określa widoczność elementu.

collapse hidden visible

W tabeli 20.8 znajduje się opis wartości obsługiwanych przez właściwość visibility. Tabela 20.8. Wartości właściwości visibility Wartość

Opis

collapse

Element nie jest widoczny i nie zajmuje miejsca na stronie.

hidden

Element nie jest widoczny, ale mimo to zajmuje miejsce na stronie.

visible

Wartość domyślna — element jest widoczny.

W listingu 20.8 widnieje przykład zmiany widoczności elementu przy użyciu JavaScript i kilku elementów button (które omówiłem w rozdziale 12.).

Listing 20.8. Zastosowanie właściwości visibility

Przykład

Pozycja	Nazwa	Kolor	Rozmiar
Ulubiony:	Jabłko	Zielony	Średni
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży

Visible Collapse

434

ROZDZIAŁ 20. „ MODEL POLOWY

Hidden

Przedstawiony w tym przykładzie skrypt wyszukuje elementy z przypisaną właściwością id o wartości firstchoice i określa wartość właściwości visibility na podstawie tego, który z przycisków został uprzednio naciśnięty. W ten sposób można przełączać pomiędzy wartościami visible, hidden i collapse. Efekt zastosowania poszczególnych wartości widać na rysunku 20.9.

Rysunek 20.9. Rezultat zastosowania różnych wartości właściwości visibility Wartość collapse można określać jedynie dla elementów tabelowych w rodzaju tr i td, o których przeczytasz więcej w rozdziale 11. Niektóre przeglądarki, takie jak Chrome, w ogóle nie obsługują wartości collapse i dlatego na potrzeby rysunku 20.9 użyłem Firefoksa. „ Wskazówka Taki sam efekt, jaki uzyskuje się wartością collapse, można uzyskać, nadając wartość none właściwości display elementów nietabelowych oraz elementom tabelowym w przeglądarkach, które nie obsługują funkcji collapse. Właściwość display omówię poniżej.

Typy pola elementu Właściwość display pozwala na zmianę typu pola elementu, co z kolei zmienia sposób, w jaki element układany jest na stronie. Pewnie zauważyłeś, że niektóre elementy w przykładach z części II książki zostały obstylowane właściwością display. Wielu elementom nadaje się wartość domyślną, inline, ale niektóre mają inne wartości. Opis wartości obsługiwanych przez właściwość display znajduje się w tabeli 20.9. Powyższe wartości często okazują się niezrozumiałe, a wywierają niepośledni wpływ na layout dokumentów. Każdy z typów pól omówię w poniższych punktach.

Elementy blokowe Zastosowanie wartości block skutkuje utworzeniem elementu blokowego, czyli oddzielonego w pionie od otaczających go elementów. Taki efekt przeważnie uzyskuje się, łamiąc wiersz przed danym elementem i po nim, tworząc tym samym wrażenie odrębności owego elementu od jego otoczenia — tak jak oddzielone

435

ROZDZIAŁ 20. „ MODEL POLOWY

Tabela 20.9. Wartości właściwości display Wartość

Opis

inline

Pole wyświetlane jest tak jak wyraz w wierszu tekstu.

block

Pole wyświetlane jest jak akapit.

inline-block

Pole wyświetlane jest jak wiersz tekstu.

list-item

Pole wyświetlane jest jako pozycja na liście, zazwyczaj z poprzedzającym ją znakiem punktowym lub innym tego typu oznaczeniem (np. liczbą porządkową).

run-in

Typ pola jest inny w zależności od otaczających go elementów. Przykłady znajdziesz w listingach 20.12 i 20.13.

compact

Typ pola nie jest ani blokiem, ani markerem (takim, jaki powstaje, kiedy używa się typu list-type). Kiedy piszę te słowa, popularne przeglądarki nie obsługują tej wartości.

flexbox

Ta wartość odnosi się do układów elastycznych pól, które omówię w rozdziale 21.

table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption

Te wartości określają położenie elementów w tabeli; więcej na ten temat przeczytasz w rozdziale 21.

ruby ruby-base ruby-text ruby-base-group ruby-text-group

Te wartości określają rozmieszczenie tekstu w ramach notacji ruby.

none

Element staje się niewidzialny i nie zajmuje miejsca na stronie.

są od siebie akapity książki. Domyślny styl wyświetlania elementu p — wskazującego akapit — zawiera właściwość display o wartości block, lecz możesz tę wartość nadać dowolnemu elementowi, tak jak widać w listingu 20.9. Listing 20.9. Właściwość display o wartości block

Przykład



436

ROZDZIAŁ 20. „ MODEL POLOWY

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek. Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

Wpływ, jaki elementy blokowe wywierają na layout, widać na przykładzie dwóch różnych rodzajów elementów. Pierwszy to element p, którego domyślna wartość właściwości display to block; więcej na temat elementu p przeczytasz w rozdziale 9. Chciałem również pokazać, że tę wartość można nadać każdemu elementowi, toteż zamieściłem w kodzie element span, któremu w elemencie style ową wartość nadałem. Rezultat widać na rysunku 20.10.

Rysunek 20.10. Nadanie wartości block właściwości display Widziałeś już wcześniej, jak element p wygląda na ekranie. Elementom w tym przykładzie nadałem obramowanie, żeby ich pionowe oddzielenie było bardziej wyraźne. Zauważ, że element span, któremu nadałem wartość block, również wyróżnia się z pola elementu p, w którym jest zawarty.

Elementy liniowe Zastosowanie wartości inline skutkuje utworzeniem elementu liniowego, czyli wyświetlanego w taki sposób, by nie wyróżniał się graficznie od otaczających go treści, np. tak jak słowo w wierszu tekstu. W listingu 20.10 widać przykład zastosowania tej wartości, także w odniesieniu do elementów p, które są domyślnie elementami blokowymi. Listing 20.10. Właściwość display o wartości inline



437

ROZDZIAŁ 20. „ MODEL POLOWY

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek. Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

Wartość inline nadałem elementom p i span, czego rezultat widać na rysunku 20.11. Elementy p nie są od siebie oddzielone, a element span wyświetlany jest w większym ciągu tekstu.

Rysunek 20.11. Nadanie wartości inline właściwości display Kiedy wartość inline jest w użyciu, przeglądarka ignoruje niektóre inne, takie jak width, height i margin. W listingu zdefiniowałem wartości tych trzech właściwości dla elementu span, ale — jak widać — nie zostały one ostatecznie wykorzystane przy tworzeniu layoutu.

438

ROZDZIAŁ 20. „ MODEL POLOWY

Elementy liniowo-blokowe Zastosowanie wartości inline-block skutkuje utworzeniem elementu, którego pole ma mieszane właściwości pól typu block i inline. Element nie jest zatem oddzielony w pionie od innych elementów, a jego treść występuje w jednej linii z otaczającymi ją treściami. Jednocześnie jednak wnętrze pola traktowane jest jako element block, którego właściwości takie jak width, height i margin są aktywne. Rezultat widać w listingu 20.11. Listing 20.11. Zastosowanie wartości inline-block

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek. Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

W tym listingu zmieniłem jedynie wartość właściwości display elementu span, ale różnica efektu graficznego jest znacząca, ponieważ pominięte wcześniej (kiedy właściwość display miała wartość inline) właściwości zostały zastosowane do elementów. Rezultat widać na rysunku 20.12.

Elementy run-in Zastosowanie wartości run-in skutkuje utworzeniem elementu, którego typ jest zależny od tego, jakie elementy go otaczają. Zdarzają się trzy sytuacje, w których przeglądarka musi sama określić charakter pola elementu run-in. 1. Jeżeli element run-in zawiera element, którego właściwość display ma wartość block, to staje się on elementem blokowym.

439

ROZDZIAŁ 20. „ MODEL POLOWY

Rysunek 20.12. Nadanie właściwości display wartości inline-block 2. W innym wypadku, jeżeli kolejny brat elementu run-in jest elementem blokowym, to element run-in staje się pierwszym elementem liniowym w obrębie brata. Ten warunek przedstawię w listingu 20.12. 3. W innym wypadku element run-in traktowany jest jako element blokowy. Spośród tych trzech warunków najbardziej warto omówić drugi. W listingu 20.12 widnieje element run-in, którego brat jest elementem blokowym.

Listing 20.12. Element run-in z bratem, który jest elementem blokowym

Przykład



Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian.

Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Na rysunku 20.13 widać, jak element run-in jest traktowany jako część następującego po nim bloku. Muszę tu jednak zwrócić uwagę, że nie wszystkie przeglądarki obsługują tę funkcję poprawnie.

440

ROZDZIAŁ 20. „ MODEL POLOWY

Rysunek 20.13. Element run-in z elementem blokowym jako bratem Jeżeli brat nie jest elementem blokowym, to element run-in traktowany jest jako blok. Przykład tego widać w listingu 20.13. Listing 20.13. Element run-in z elementem liniowym jako bratem

Przykład



Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian.

Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie element run-in wyświetlony jest jako element blokowy, tak jak widać na rysunku 20.14.

Rysunek 20.14. Element run-in wyświetlony jako element blokowy

441

ROZDZIAŁ 20. „ MODEL POLOWY

Ukrywanie elementów Wartość none poleca przeglądarce, by nie wyświetlała pola danego elementu ani jego potomków. Kiedy właściwość display ma wartość none, element nie zajmuje miejsca na stronie. W listingu 20.14 widnieje dokument HTML, w którym zawarto prosty skrypt, przełączający wartość właściwości display elementu p między block a none. Listing 20.14. Zastosowanie wartości none właściwości display

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek. Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

Block None

Na rysunku 20.15 widać, jak zastosowanie wartości none skutkuje usunięciem elementu z layoutu.

Pływające pola Właściwość float służy do tworzenia pływającego pola, które ulega przemieszczeniu w określoną stronę, aż jego lewa lub prawa krawędź zetknie się z krawędzią kontenera lub innego pływającego pola. W tabeli 20.10 znajduje się opis tej właściwości. W tabeli 20.11 znajduje się opis wartości obsługiwanych przez właściwość float. W listingu 20.15 widnieje przykład zastosowania właściwości float.

442

ROZDZIAŁ 20. „ MODEL POLOWY

Rysunek 20.15. Rezultat nadania wartości none właściwości display Tabela 20.10. Właściwość float Właściwość

Opis

Wartości

float

Określa styl pływania elementu.

left right none

Tabela 20.11. Wartości właściwości display Wartość

Opis

left

Element ulega przesunięciu tak, by jego lewa krawędź zetknęła się z lewą krawędzią kontenera lub prawą krawędzią innego pływającego pola.

right

Element ulega przesunięciu tak, by jego prawa krawędź zetknęła się z prawą krawędzią kontenera lub lewą krawędzią innego pływającego pola.

none

Element nie pływa.

Listing 20.15. Zastosowanie właściwości float

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

443

ROZDZIAŁ 20. „ MODEL POLOWY

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

Left Right None

W tym przykładzie znajduje się kilka elementów p — właściwość float dwóch z nich ma wartość left. Oznacza to, że są one przemieszczane w lewo, aż zetkną się z krawędzią kontenera lub innego pływającego elementu. Ponieważ dwa elementy ulegają przemieszczeniu, pierwszy z nich przesuwa się do krawędzi kontenera, a drugi do krawędzi pierwszego. Rezultat widać na rysunku 20.16.

Rysunek 20.16. Właściwość float o wartości left „ Wskazówka Zauważ, że kiedy odnoszę się do właściwości float w JavaScript, to muszę korzystać z członu cssFloat. O obstylowaniu elementów w JavaScript opowiem szerzej w rozdziale 29.

Zauważ, jak reszta treści oblewa pływające elementy. W tym przykładzie utworzyłem również kilka elementów button oraz załączyłem prosty skrypt, który zmienia wartość float dwóch elementów p na

444

ROZDZIAŁ 20. „ MODEL POLOWY

podstawie tego, który przycisk został naciśnięty. Po naciśnięciu przycisku Right elementy przemieszczają się w prawo, tak jak widać na rysunku 20.17. Zwróć uwagę na kolejność elementów: pierwszy podany w dokumencie element znajduje się wtedy najdalej po prawej.

Rysunek 20.17. Właściwość float o wartości right Ostatni przycisk, None, wyłącza pływanie elementów, nadając ich właściwościom float wartość none. Przywraca to domyślne zachowanie pól elementów. Element p jest domyślnie elementem blokowym; rezultat widać na rysunku 20.18.

Rysunek 20.18. Właściwość float o wartości none

Zapobieganie stykaniu się elementów Pływające elementy domyślnie stykają się ze sobą. Można temu zapobiec przy użyciu właściwości clear, która wskazuje, że jedna bądź obydwie krawędzie pływającego elementu nie mogą się stykać z krawędzią innego pływającego elementu. W tabeli 20.12 znajduje się opis właściwości clear.

445

ROZDZIAŁ 20. „ MODEL POLOWY

Tabela 20.12. Właściwość clear Właściwość

Opis

Wartości

clear

Określa, czy element może sąsiadować z innym pływającym elementem.

left right both none

W tabeli 20.13 znajduje się opis wartości obsługiwanych przez właściwość clear. Tabela 20.13. Wartości właściwości clear Wartość

Opis

left

Lewa krawędź elementu nie może sąsiadować z innym pływającym elementem.

right

Prawa krawędź elementu nie może sąsiadować z innym pływającym elementem.

both

Żadna z krawędzi elementu nie może sąsiadować z innym pływającym elementem.

none

Każda krawędź elementu może sąsiadować z innym pływającym elementem.

W listingu 20.16 znajduje się przykład zastosowania właściwości clear. Listing 20.16. Zastosowanie właściwości clear

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

446

ROZDZIAŁ 20. „ MODEL POLOWY

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

Left Right None

Powyższy kod jest prostym rozwinięciem kodu z poprzedniego przykładu — dodałem nowy styl, który oczyszcza lewą krawędź elementu p. Wpływ tej zmiany na layout strony widać na rysunku 20.19, gdzie elementy ulegają przemieszczeniu w lewą stronę.

Rysunek 20.19. Oczyszczenie lewej krawędzi pływającego dokumentu Lewa krawędź elementu p nie może sąsiadować z innym pływającym elementem, wobec czego przeglądarka przenosi ów element niżej. Prawa krawędź pozostaje nieoczyszczona — w sytuacji, kiedy elementy miałyby być przemieszczane w prawo, już mogłyby się stykać, tak jak widać na rysunku 20.20.

447

ROZDZIAŁ 20. „ MODEL POLOWY

Rysunek 20.20. Nieoczyszczona prawa krawędź elementu przemieszczanego w prawo

Podsumowanie W tym rozdziale pokazałem Ci, jak przeprowadzić podstawową konfigurację modelu polowego elementu, tym samym zmieniając jego wygląd na stronie. Zaczęliśmy od podstawowych właściwości w rodzaju padding i margin, po czym przeszliśmy do kwestii bardziej skomplikowanych, m.in. zakresów szerokości i wysokości oraz obsługi przepełnień. Najważniejszym tematem, który poruszyłem w tym rozdziale, jest to, jak różne rezultaty można uzyskać przy użyciu różnych rodzajów pól elementu. Zrozumienie zależności pomiędzy elementami blokowymi a liniowymi jest kwestią fundamentalną, jeśli chodzi o opanowanie tworzenia layoutów w HTML5. Z kolei pływające elementy i oczyszczone krawędzie są powszechnie stosowane do zapewniania layoutom elastyczności. W następnym rozdziale pokażę Ci jeszcze więcej złożonych, obsługiwanych przez CSS modeli służących do tworzenia layoutów.

448

ROZDZIAŁ 21

Tworzenie layoutów

W tym rozdziale przedstawię Ci różne sposoby kontrolowania układu elementów na stronie. Wraz ze zwiększeniem nacisku na oddzielenie semantyki elementów HTML od ich aspektu prezentacyjnego rola CSS w tworzeniu layoutów stała się w HTML5 istotniejsza. CSS3 oferuje bardzo przydatne funkcje tworzenia layoutów, których oczywiście możesz używać wraz z funkcjami dostępnymi w poprzednich wersjach CSS. CSS3 obsługuje dwa modele layoutów, które musiałyby jeszcze dojrzeć, bym je omówił w tym rozdziale. Pierwszy model layoutów szablonowych pozwala na elastyczne rozmieszczanie elementów. Moduł ten nie jest obsługiwany przez żadną przeglądarkę, ale możesz poeksperymentować z jego funkcjami przy użyciu wtyczki jQuery dostępnej pod adresem http://a.deveria.com/?p=236. Drugi moduł służy do tworzenia elastycznych siatek layoutowych. Niestety, specyfikacja tego modułu nie jest jeszcze ukończona i żadna przeglądarka go nie obsługuje. Stan funkcji tworzenia layoutów w CSS3 jest niestabilny. Jeden ze stylów tworzenia layoutów, które omówię w tym rozdziale — tj. elastyczny model polowy — może się wprawdzie pochwalić świetnymi funkcjami, lecz jego standard wciąż się zmienia. Z tego względu muszę zademonstrować ten sposób tworzenia layoutów, wykorzystując właściwości obsługiwane przez konkretne przeglądarki, zaimplementowane na podstawie wczesnych wersji standardu. Mając wzgląd na to, że właściwa forma tych nowych funkcji dopiero jest opracowywana, sugeruję używać frameworka CSS przy tworzeniu rozbudowanych layoutów stron. Polecam Blueprint, który można pobrać ze strony www.blueprintcss.org. Dopóki obsługa tworzenia layoutów w CSS3 nie przybierze ostatecznej formy, framework CSS pozwoli Ci na korzystanie z pożądanych funkcji. W tabeli 21.1 znajduje się streszczenie całego rozdziału. Tabela 21.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Zmiana sposobu pozycjonowania elementu w obrębie kontenera.

Użyj właściwości position.

21.1

Oddalenie elementu od krawędzi kontenera.

Użyj właściwości top, bottom, left i right.

21.1

Określenie kolejności rysowania elementu.

Użyj właściwości z-index.

21.2

Utworzenie layoutu przypominającego układ strony w gazecie.

Użyj layoutu wielokolumnowego.

21.3, 21.4

Elastyczne przydzielanie przestrzeni elementom zawartym w jednym kontenerze.

Użyj layoutu flexbox.

21.5 – 21.9

Utworzenie layoutu tabelowego.

Użyj layoutu tabelowego CSS.

21.10

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Pozycjonowanie Najprostszą metodą zarządzania treścią jest pozycjonowanie, które pozwala na zmianę sposobu, w jaki przeglądarka rozkłada elementy. W tabeli 21.2 znajduje się opis właściwości pozycjonujących. Tabela 21.2. Właściwości pozycjonujące Właściwość

Opis

Wartości

position

Określa metodę pozycjonowania.

Tabela 21.3

left right top bottom

Określa oddalenie pozycjonowanych elementów.

auto

z-index

Określa kolejność elementów.

Rodzaje pozycjonowania Właściwość position określa metodę pozycjonowania elementu. Opis obsługiwanych wartości znajduje się w tabeli 21.3. Tabela 21.3. Wartości właściwości position Wartość

Opis

static

Element jest pozycjonowany standardowo; wartość domyślna.

relative

Element jest pozycjonowany względem swojej standardowej pozycji.

absolute

Element jest pozycjonowany względem swojego pierwszego przodka, którego właściwość position ma inną wartość niż static.

fixed

Element jest pozycjonowany względem okna przeglądarki.

Różne wartości właściwości position wskazują różne elementy, względem których dany element ma być pozycjonowany. Właściwości top, bottom, left i right służą do przemieszczania danego elementu względem elementu określonego właściwością position. W listingu 21.1 widnieje przykład zastosowania tych różnych wartości. Listing 21.1. Zastosowanie właściwości position

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy

450

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

Static Relative Absolute Fixed

W tym przykładzie dodałem do kodu krótki skrypt, który zmienia wartość właściwości position elementu img na podstawie tego, który przycisk został naciśnięty. Zauważ, że właściwości left nadałem wartość 150px, a top wartość 5px. Wynika z tego, że element img ma być oddalony o 150 pikseli od osi poziomej oraz o 5 pikseli od osi pionowej, kiedy właściwość position ma wartość inną niż static. Na rysunku 21.1 widać przejście od domyślnej wartości static do wartości relative.

Rysunek 21.1. Zastosowanie właściwości position o wartościach static i relative

451

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Zastosowanie wartości relative sprawia, że właściwości top, bottom, left i right pozycjonują element względem miejsca, w którym by się znajdował w sytuacji, gdyby użyta była wartość static. Jak widać na rysunku, użycie właściwości left i top o wartości 150px sprawia, że element img przesuwa się w dół i na prawo. Zastosowanie wartości absolute sprawia, że element pozycjonowany jest względem najbliższego przodka o wartości właściwości position innej niż static. W tym przykładzie takiego przodka nie ma, wobec czego element pozycjonowany jest względem elementu body, tak jak widać na rysunku 21.2.

Rysunek 21.2. Zastosowanie właściwości position o wartości absolute Zauważ, że element img przemieszcza się wraz z pozostałą treścią, kiedy przewijam stronę. Działa to inaczej, kiedy używa się wartości fixed, tak jak widać na rysunku 21.3.

Rysunek 21.3. Zastosowanie właściwości position o wartości fixed Kiedy wartość fixed jest w użyciu, element pozycjonowany jest względem okna przeglądarki. Oznacza to, że element zawsze zajmuje ten sam obszar, nawet przy przewijaniu strony.

Kolejność elementów Właściwość z-index pozwala na określenie kolejności rysowania elementów. Jej opis znajduje się w tabeli 21.4. Tabela 21.4. Właściwość z-index Właściwość

Opis

Wartości

z-index

Określa względną kolejność rysowania elementu.

Właściwości z-index nadaje się wartości liczbowe; dozwolone są także wartości ujemne. Im wartość jest mniejsza, tym „dalej” od użytkownika dany element jest rozrysowywany. Ta właściwość jest przydatna tylko wtedy, kiedy elementy na siebie nachodzą, tak jak w listingu 21.2.

452

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Listing 21.2. Zastosowanie właściwości z-index

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

W tym przykładzie utworzyłem dwa elementy img pozycjonowane wartością fixed oraz z właściwościami top i left określonymi tak, by elementy na siebie nachodziły. Wartość właściwości z-index elementu img, którego właściwości id przypisano wartość apple, jest wyższa od wartości drugiego elementu, wobec czego jest on rozrysowywany nad obrazem banana, tak jak widać na rysunku 21.4. Domyślna wartość właściwości z-index elementów to zero, przez co przeglądarka rozrysowała obrazy nad elementami p.

453

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Rysunek 21.4. Zastosowanie właściwości z-index

Layouty wielokolumnowe Funkcja tworzenia layoutów wielokolumnowych umożliwia rozkładanie treści w wielu pionowych kolumnach, tak jak w gazecie. W tabeli 21.5 znajduje się opis właściwości służących do tworzenia takich layoutów. Tabela 21.5. Właściwości wielokolumnowe Właściwość

Opis

Wartości

column-count

Określa pożądaną liczbę kolumn.

column-fill

Określa rozmieszczenie treści w kolumnach. Wartość balance poleca przeglądarce, by minimalizowała różnice wysokości kolumn, a wartość auto, by rozmieszczała treść na całej szerokości kolumn.

balance auto

column-gap

Określa odstęp między kolumnami.

column-rule

Właściwość zbiorcza, służąca do określania wszystkich wartości column-rule-* w jednej deklaracji.



column-rule-color

Określa kolor linii między kolumnami.

column-rule-style

Określa styl linii między kolumnami.

Takie same, jak właściwości border-style

column-rule-width

Określa szerokość linii między kolumnami.

columns

Właściwość zbiorcza, służąca do określania wartości column-span i column-width.



column-span

Określa, ile kolumn dany element zajmuje.

none all

column-width

Określa szerokość kolumn.

W listingu 21.3 widać przykład layoutu wielokolumnowego.

454

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Listing 21.3. Zastosowanie layoutu wielokolumnowego

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach. Rzecz jasna, istnieją też naprawdę wyjątkowe owoce — do głowy przychodzi mi durian, jadany powszechnie w Azji Południowo-Wschodniej, a znany jako "król owoców". Durian nie jest zbyt dobrze znany w Europie i Stanach Zjednoczonych, chyba że ze względu na jego intensywny zapach, opisywany jako połączenie migdałów, zgniłej cebuli i przepoconych skarpet.

W tym przykładzie nadałem elementowi p, zawierającemu zarówno tekst, jak i elementy img, kilka właściwości wielokolumnowych. Rezultat widać na rysunku 21.5. „ Uwaga Na rysunku widać Operę, która jest obecnie jedyną przeglądarką obsługującą wielokolumnowe layouty. Nie obsługuje ona wprawdzie wszystkich właściwości, lecz podstawowe funkcje jak najbardziej w niej działają.

Jak widać na rysunku 21.5, zawartość elementu p przechodzi przez kolejne kolumny, tak jak w gazecie. Elementom img nadałem właściwość flow, żeby treść tekstowa elementu p ładnie oblewała obrazki. Więcej szczegółów na temat właściwości float przeczytasz w rozdziale 20.

455

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Rysunek 21.5. Layout wielokolumnowy Właściwości column-count użyłem do utworzenia layoutu składającego się z trzech kolumn. Przeglądarka zmienia szerokość kolumn wraz ze zmianą wielkości okna tak, by zachować ich liczbę. Można jednak zamiast tego określić pożądaną szerokość kolumn, tak jak w listingu 21.4. Listing 21.4. Określenie szerokości kolumn ...

...

Kiedy używasz tej właściwości, przeglądarka zachowuje określoną szerokość kolumn, odpowiednio je dodając lub usuwając, tak jak widać na rysunku 21.6.

Layouty flexboksowe Elastyczny layout polowy (z ang. flexible box layout, znany również jako flexbox) jest jednym z ulepszeń CSS3, w ramach którego można właściwości display nadać nową wartość — flexbox — a także używać kilku dodatkowych właściwości. Elastyczny layout pozwala na tworzenie płynnych interfejsów, które zachowują się poprawnie przy zmianach wielkości okna przeglądarki. Polega to na przydzielaniu

456

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Rysunek 21.6. Definiowanie kolumn według szerokości zamiast liczebności niewykorzystywanej przestrzeni kontenera zawartym w nim elementom. Specyfikacja flexboksa podaje następujące nowe właściwości: • • • •

flex-align flex-direction flex-order flex-pack

W chwili, kiedy to piszę, standard elastycznego layoutu polowego jest jeszcze niedookreślony. Nazwy właściwości i ich wartości niedawno się zmieniły. Popularne przeglądarki obsługują podstawowe funkcje tego modułu przy użyciu własnych właściwości i wartości, których nazwy oparte są na starych nazwach właściwości. Flexbox jest użyteczną i ważną nowością w CSS, wobec czego przedstawię Ci funkcje oparte na wcześniejszej wersji standardu i z wykorzystaniem właściwości z prefiksami -webkit. Nie jest to idealne rozwiązanie, ale dzięki temu będziesz mógł się zapoznać z zasadami działania flexboksa i — miejmy nadzieję — bez trudu zacząć korzystać z właściwego standardu, kiedy już zostanie opracowany i wprowadzony do powszechnego użycia. Mając wzgląd na różnice między specyfikacją a implementacją tej funkcji, zacznijmy od omówienia problemu, do którego rozwiązywania ma służyć właśnie flexbox. W listingu 21.5 widnieje prosty layout, w którym taki problem występuje. Listing 21.5. Dokument HTML z niezadowalającym layoutem

Przykład



457

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

Widzimy tu trzy elementy p zagnieżdżone w elemencie div. Chciałem je wyświetlić w jednym rzędzie, co łatwo zrobić przy użyciu omówionej w rozdziale 20. właściwości float. Wygląd tego kodu w przeglądarce widać na rysunku 21.7.

Rysunek 21.7. Element z nieprzydzieloną, pustą przestrzenią Problemem, który można rozwiązać przy użyciu flexboksa, jest pusta przestrzeń znajdująca się po prawej stronie elementów p. Można to zrobić na kilka różnych sposobów. Można wprawdzie określić szerokość wartościami procentowymi, ale flexbox jest o wiele płynniejszym i bardziej eleganckim rozwiązaniem. W tabeli 21.6 znajdują się trzy właściwości -webkit, które wykorzystują podstawowe funkcje flexbox — prefiks -webkit pominąłem, żeby zachować zwięzłość.

458

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Tabela 21.6. Właściwości flexboksa -webkit Właściwość

Opis

Wartości

box-align

Wskazuje przeglądarce, jak radzić sobie z nadmiarową przestrzenią, kiedy wysokość elementów jest mniejsza od wysokości kontenera.

start end center baseline stretch

box-flex

Określa elastyczność elementu; odnosi się do poszczególnych elementów zawartych w kontenerze flexboksowym.

box-pack

Wskazuje przeglądarce, jak przydzielać przestrzeń, kiedy elastyczne elementy osiągają swój maksymalny rozmiar.

start end center justify

Prosty flexbox Flexbox tworzy się przy użyciu właściwości display. Standardowa wartość to flexbox, ale dopóki standard nie zostanie ukończony i wprowadzony, musisz używać wartości -webkit-box. Sposób przydzielania niewykorzystanej przestrzeni elementom określa się właściwością box-flex. Przykład zastosowania nowej wartości display i właściwości box-flex widać w listingu 21.6. Listing 21.6. Utworzenie prostego flexboksa

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam

459

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

Właściwość display nadałem kontenerowi flexboksowemu — jest to element, w którym znajdzie się nadmiarowa przestrzeń i którego zawartość chcemy elastycznie rozmieścić. Właściwość box-flex nadaje się elementom znajdującym się w obrębie kontenera flexboksowego i wskazuje ona przeglądarce, które elementy powinny zmieniać rozmiar wraz ze zmianą rozmiaru kontenera. W tym przypadku nadałem ją elementowi p z właściwością id o wartości second. „ Wskazówka Zauważ, że usunąłem właściwość float z deklaracji stylu elementów p. Elementy flexboksowe nie mogą zawierać pływających elementów.

Zmianę rozmiaru wybranego elementu widać na rysunku 21.8.

Rysunek 21.8. Elastyczny element Na rysunku 21.8 powiększyłem pole przeglądarki, przez co kontener div rozszerzył się, a akapit second zajął dodatkowe miejsce. Elastyczność nie odnosi się jedynie do nadmiarowej przestrzeni — kiedy zmniejszam okno przeglądarki, to właśnie elastyczny element zmniejsza się tak, by dostosować layout do pomniejszonego obszaru okna, tak jak widać to na rysunku 21.9. Zauważ, że wielkość elementów, którym nie nadałem właściwości box-flex, nie uległa zmianie.

Użycie wielu elastycznych elementów Przy użyciu właściwości box-flex możesz polecić przeglądarce, by uznała więcej elementów za elastyczne. Podane wartości określają stosunek, w jakim przeglądarka ma przydzielać przestrzeń. W listingu 21.7 widnieją zmiany, jakie wprowadziłem w elemencie style z poprzedniego przykładu.

460

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Rysunek 21.9. Elastyczny element zmienia swoją wielkość, by dostosować się do zmniejszonego obszaru Listing 21.7. Utworzenie większej liczby elastycznych elementów ...

...

Właściwość box-flex nadałem elementowi p z właściwością id o wartości first. Wartość tej właściwości to 3, wobec czego przeglądarka przydziela elementowi first trzy razy tyle dodatkowej przestrzeni niż elementowi second. Tak określone proporcje odnoszą się jedynie do elastyczności elementów — służą do przydzielania elementom dodatkowej przestrzeni bądź odejmowania jej, ale nie do określania docelowego rozmiaru. Efekt zastosowania tej proporcji widać na rysunku 21.10.

Przestrzeń pionowa Właściwość box-align wskazuje przeglądarce, co robić z nadmiarową przestrzenią pionową. Jej opis znajduje się w tabeli 21.7. Domyślnie elementy rozciągane są w pionie tak, by zapełnić całą dostępną przestrzeń. Przykład tego widać na rysunku 21.10, gdzie pierwszym dwóm elementom p nadałem taki rozmiar, by znajdowała się pod nimi wolna przestrzeń. W tabeli 21.8 znajdują się wartości obsługiwane przez właściwość box-align.

461

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Rysunek 21.10. Zastosowanie proporcji elastyczności Tabela 21.7. Właściwość box-align Właściwość

Opis

Wartości

box-align

Określa, jak przeglądarka ma obsługiwać nadmiarową przestrzeń pionową.

start end stretch center

Tabela 21.8. Wartości właściwości box-align Wartość

Opis

start

Elementy rozmieszczane są wzdłuż górnej krawędzi kontenera, a pod nimi znajduje się pusta przestrzeń.

end

Elementy rozmieszczane są wzdłuż dolnej krawędzi kontenera, a nad nimi znajduje się pusta przestrzeń.

center

Nadmiarowa przestrzeń rozdzielana jest równomiernie i wyświetlana zarówno pod, jak i nad elementami.

stretch

Zmienia wysokość elementów tak, by zajmowały całą dostępną przestrzeń.

W listingu 21.8 znajdują się zmiany, jakie naniosłem w elemencie style, by wprowadzić właściwość box-align. Zauważ, że nadaję tę właściwość kontenerowi, a nie zawartym w nim elementom. Listing 21.8. Zastosowanie właściwości box-align ...

...

W tym przykładzie wybrałem wartość end — elementy są zatem rozmieszczane wzdłuż dolnej krawędzi kontenera, a wszelka wolna przestrzeń znajduje się nad nimi, tak jak widać na rysunku 21.11.

Rysunek 21.11. Zastosowanie właściwości box-align

Maksymalne wielkości Flexbox może przestrzegać maksymalnych rozmiarów określonych dla elementów treści. Przeglądarka rozciąga wtedy elementy na pustą przestrzeń dopóty, dopóki nie osiągają maksymalnego rozmiaru. Właściwość box-pack wskazuje przeglądarce, co powinna zrobić, jeśli wszystkie elastyczne elementy osiągną maksymalny rozmiar, a w oknie wciąż pozostanie jakaś wolna przestrzeń. Opis tej właściwości znajduje się w tabeli 21.9. Tabela 21.9. Właściwość box-pack Właściwość

Opis

Wartości

box-pack

Określa, co przeglądarka ma robić z dodatkową przestrzenią, której nie może przydzielić elastycznym elementom.

start end justify center

W tabeli 21.10 znajduje się opis wartości obsługiwanych przez tę właściwość. W listingu 21.9 widać przykład zastosowania właściwości box-pack. Zauważ, że właściwościom max-width elementów p nadałem określone wartości; więcej na temat właściwości max-width przeczytasz w rozdziale 20. Rezultat zastosowania tej właściwości widać na rysunku 21.12. Kiedy elastyczne elementy p osiągają maksymalną szerokość, przeglądarka rozmieszcza wolną przestrzeń między nimi. Zauważ, że znajduje się ona wyłącznie pomiędzy elementami — pusta przestrzeń nie występuje ani przed pierwszym elementem, ani po ostatnim.

463

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Tabela 21.10. Wartości właściwości box-pack Wartość

Opis

start

Elementy rozmieszczane są od lewej krawędzi kontenera, a nieprzydzielona przestrzeń wyświetlana jest po prawej stronie ostatniego elementu.

end

Elementy rozmieszczane są od prawej krawędzi kontenera, a nieprzydzielona przestrzeń wyświetlana jest po lewej stronie ostatniego elementu.

center

Nieprzydzielona przestrzeń rozmieszczana jest równomiernie po lewej stronie pierwszego elementu i prawej ostatniego.

justify

Nieprzydzielona przestrzeń rozmieszczana jest równo pomiędzy elementami.

Listing 21.9. Zastosowanie właściwości box-pack

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

464

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Rysunek 21.12. Zastosowanie właściwości box-pack



Layouty tabelowe Przez wiele lat elementu HTML table powszechnie używano do tworzenia layoutów stron internetowych. Ze względu jednak na zwiększenie nacisku na zachowanie sensu semantycznego elementów HTML, wykorzystywanie tej metody jest obecnie niepożądane — w HTML5 należy używać elementu table wyłącznie do przedstawiania danych tabelowych; więcej na ten temat przeczytasz w rozdziale 11. Rzecz jasna, element table był tak popularny, ponieważ zaspokajał zapotrzebowanie na proste siatki, w których można by zamieszczać treść. Na szczęście, funkcji tworzenia layoutów tabelowych w CSS można używać tak samo jak elementu table, lecz bez błędnego wykorzystywania jego znaczenia semantycznego. Layouty tabelowe CSS tworzy się przy użyciu właściwości display. Obsługiwane przez tę właściwość wartości opisane są w tabeli 21.11. Każda z nich jest odpowiednikiem jakiegoś elementu HTML. Tabela 21.11. Wartości właściwości display, które służą do tworzenia layoutów tabelowych Wartość

Opis

table

Działa jak element table.

inline-table

Działa jak element table, lecz tworzy element liniowy; o elementach blokowych i liniowych przeczytasz więcej w rozdziale 20.

table-caption

Działa jak element caption.

table-column

Działa jak element col.

table-column-group

Działa jak element colgroup.

table-header-group

Działa jak element thead.

table-row-group

Działa jak element tbody.

table-footer-group

Działa jak element tfoot.

table-row

Działa jak element tr.

table-cell

Działa jak element td.

465

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

W listingu 21.10 widać przykład zastosowania tych wartości. Listing 21.10. Utworzenie layoutu tabelowego CSS

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

To jest jabłko.

To jest banan.

466

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

Tutaj nie ma obrazka.

Rezultat zastosowania tych wartości widać na rysunku 21.13.

Rysunek 21.13. Prosty layout tabelowy CSS Layouty tabelowe cenione są ze względu na automatyczną zmianę wymiarów komórek, w której najszersze bądź najwyższe treści określają rozmiar całej kolumny lub rzędu. Efekt w działaniu widać na rysunku 21.13.

Podsumowanie W tym rozdziale przedstawiłem Ci funkcje CSS służące do tworzenia layoutów — od prostego pozycjonowania elementów, po płynność elastycznych layoutów polowych. Pokazałem Ci również, jak tworzyć layouty tabelowe bez nadużywania elementu HTML table. Tworzenie layoutów jest aspektem, do którego odnosi się wiele modułów CSS3, lecz jednocześnie funkcje te są dopiero w powijakach i nie wszystkie są odpowiednio zdefiniowane i obsługiwane przez przeglądarki. W międzyczasie jak najbardziej można jednak używać tych funkcji (zwłaszcza z pomocą frameworka CSS do tworzenia layoutów). Zachęcam Cię też do uważnego śledzenia postępów we wdrażaniu nowych modułów CSS do tworzenia layoutów.

467

ROZDZIAŁ 21. „ TWORZENIE LAYOUTÓW

468

ROZDZIAŁ 22

Stylizacja tekstu

W tym rozdziale przedstawię Ci właściwości CSS służące do stylizacji tekstu. Jest to jeszcze niedookreślona dziedzina CSS3. Istnieją pewne użyteczne nowe funkcje, które są w szerokim użyciu i które omówię w kolejnych podrozdziałach. Jednocześnie padały też propozycje wprowadzenia funkcji, o których nie można się jeszcze wypowiadać z pewnością — często odnoszą się one do szczegółów typograficznych i nie ma pewności, czy zainteresowanie nimi będzie wystarczające, by włączyć je do standardu. Tak czy inaczej, funkcje obsługiwane przez popularne przeglądarki dają wiele możliwości pracy z tekstem, a w dodatku czynią ją przyjemną. W tabeli 22.1 znajduje się streszczenie całego rozdziału. Tabela 22.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Wyrównanie bloku tekstu.

Użyj właściwości text-align i text-justify.

22.1

Określenie sposobu przetwarzania białych znaków.

Użyj właściwości whitespace.

22.2, 22.3

Określenie kierunku zapisu tekstu.

Użyj właściwości direction.

22.4

Określenie odstępów między wyrazami, literami i wierszami.

Użyj właściwości letter-spacing, word-spacing i line-height.

22.5

Określenie sposobu łamania przepełnień tekstowych.

Użyj właściwości word-wrap.

22.6

Określenie wcięcia tekstu.

Użyj właściwości text-indent.

22.7

Ozdobienie lub przekształcenie tekstu.

Użyj właściwości text-decoration lub text-transform.

22.8

Nadanie blokowi tekstu cienia.

Użyj właściwości text-shadow.

22.9

Wskazanie i skonfigurowanie fonta.

Użyj właściwości font, font-family, font-size, font-style, font-variant i font-weight.

22.10 – 22.12

Zastosowanie własnego fonta.

Użyj właściwości @font-face.

22.13

„ Wskazówka Do określenia koloru tekstu można użyć właściwości color, którą opiszę w rozdziale 24.

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Podstawowe style tekstu W poniższych punktach pokażę Ci, jak używać właściwości służących do podstawowej stylizacji tekstu.

Wyrównywanie i justowanie tekstu W tabeli 22.2 znajduje się opis właściwości służących do określania sposobu wyrównywania i justowania tekstu. Tabela 22.2. Właściwości określające sposób wyrównywania i justowania Właściwość

Opis

Wartości

text-align

Określa wyrównanie bloku tekstu.

start end left right center justify

text-justify

Określa sposób, w jaki tekst ma być justowany, kiedy właściwości text-align nadana jest wartość justify.

Tabela 22.3

Działanie właściwości text-align jest dość proste, choć warto zauważyć, że istnieje możliwość wyrównania tekstu do określonej krawędzi (przy użyciu wartości left i right) lub do odpowiednich krawędzi w odniesieniu do danego języka (przy użyciu wartości start i end). Rozróżnienie to jest istotne w pracy z pismem zapisywanym od prawej do lewej. W listingu 22.1 widnieje przykład zastosowania właściwości text-align w odniesieniu do bloków tekstu. Listing 22.1. Wyrównywanie tekstu

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Start

470

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

End Left Right Justify Center

W tym przykładzie zamieściłem prosty skrypt, który zmienia wartość właściwości text-align elementu p na podstawie tego, który przycisk ostatnio naciśnięto. Na rysunku 22.1 widać wpływ niektórych z tych wartości na wyrównanie tekstu.

Rysunek 22.1. Rezultat nadania właściwości text-align wartości center i right Kiedy używasz wartości justify, możesz też użyć właściwości text-justify do określenia odstępów w tekście. Opis wartości obsługiwanych przez tę właściwość znajduje się w tabeli 22.3. Tabela 22.3. Wartości właściwości text-justify Wartość

Opis

auto

Przeglądarka sama wybiera styl justowania.

none

Justowanie tekstu jest wyłączone.

inter-word

Regulowane są odstępy między słowami. Jest to styl odpowiedni dla języków takich jak polski, w których występują odstępy międzywyrazowe.

inter-ideograph

Regulowane są odstępy między słowami i grafemami. Jest to styl odpowiedni dla języków takich jak japoński i koreański.

inter-cluster

Regulowane są odstępy między słowami i zbiorami grafemów. Jest to styl odpowiedni dla języków takich jak tajski.

distribute

Regulowane są odstępy między słowami i zbiorami grafemów we wszystkich rodzajach pisma poza tymi, które są zapisane kursywą lub jednym ciągiem.

kashida

Justowanie polega na przedłużaniu znaków — odnosi się to jedynie do tekstu zapisanego kursywą.

471

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Białe znaki Białe znaki w kodzie HTML zwykle są kondensowane lub ignorowane. Pozwala to na oddzielenie układu dokumentów HTML od ich wyglądu na stronie. W listingu 22.2 widnieje dokument HTML z blokiem tekstowym, w którym znajdują się białe znaki. Listing 22.2. Dokument HTML z białymi znakami

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Wprowadziłem do tekstu kilka spacji, tabulatorów i dodatkowo kilka razy złamałem wiersze. Większe ilości białych znaków (np. kilka spacji) są przez przeglądarkę kondensowane, tj. zastępowane pojedynczą spacją. Inne rodzaje białych znaków, takie jak łamanie wierszy, są zwyczajnie ignorowane, a przeglądarka zawija tekst tak, by pojedyncze linie mieściły się w obrębie elementu. Wygląd powyższego tekstu w przeglądarce widać na rysunku 22.2. Nie zawsze jest to pożądane zachowanie — niekiedy może Ci zależeć na zachowaniu formatowania tekstu z dokumentu źródłowego. Obsługę białych znaków możesz zdefiniować właściwością whitespace, którą opisuję w tabeli 22.4. Tabela 22.4. Właściwość whitespace Właściwość

Opis

Wartości

whitespace

Określa obsługę białych znaków.

Tabela 22.5

Wartości obsługiwane przez właściwość whitespace opisane są w tabeli 22.5.

472

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Rysunek 22.2. Domyślny sposób obsługi białych znaków w dokumencie HTML Tabela 22.5. Wartości właściwości whitespace Wartość

Opis

normal

Wartość domyślna; białe znaki są kondensowane, a wiersze zawijane.

nowrap

Białe znaki są kondensowane, ale wiersze nie są zawijane.

pre

Białe znaki są zachowane, a tekst jest zawijany tylko w miejscach łamania wiersza. Działa tak samo, jak element pre, który opisałem w rozdziale 8.

pre-line

Białe znaki są kondensowane, a tekst jest zawijany tak, by wiersze mieściły się w elemencie, ale żeby zachować też łamanie wiersza.

pre-wrap

Białe znaki są zachowane, a tekst jest zawijany tak, by wiersze mieściły się w elemencie, ale żeby zachować też łamanie wiersza.

W listingu 22.3 widnieje przykład zastosowania właściwości whitespace. Listing 22.3. Zastosowanie właściwości whitespace

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy

uwzględnili niezliczone odmiany

jabłek,

473

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Rezultat zastosowania wartości pre-line widać na rysunku 22.3. Tekst jest zawijany tak, by treść mieściła się w elemencie, ale żeby jednocześnie zachować łamanie wiersza.

Rysunek 22.3. Zastosowanie właściwości whitespace o wartości pre-line „ Wskazówka Moduł CSS3 służący do obsługi tekstu uznaje właściwość whitespace za właściwość zbiorczą definiującą dwie inne: bikeshedding i text-wrap. Żadna z nich nie została jeszcze zaimplementowana, a definicja właściwości bikeshedding jest niepełna.

Kierunek tekstu Właściwość direction pozwala wskazać przeglądarce kierunek zapisu bloku tekstu. Jej opis znajduje się w tabeli 22.6. Tabela 22.6. Właściwość direction Właściwość

Opis

Wartości

direction

Określa kierunek zapisu tekstu.

ltr rtl

474

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

W listingu 22.4 widnieje prosty przykład zastosowania właściwości direction. Listing 22.4. Zastosowanie właściwości direction

Przykład

Tekst zapisany od lewej do prawej

Tekst zapisany od prawej do lewej

Rezultat zastosowania tej właściwości widać na rysunku 22.4.

Rysunek 22.4. Zastosowanie właściwości direction „ Ostrzeżenie Właściwość direction została usunięta z ostatniej wersji tego modułu CSS, aczkolwiek nie uzasadniono tego w żaden sposób i może się ona jeszcze znaleźć w ukończonym module.

Odstępy między wyrazami, literami i wierszami Możesz wskazać przeglądarce wielkość odstępów między wyrazami, literami i wierszami. Służące do tego właściwości opisuję w tabeli 22.7. W listingu 22.5 widać blok tekstu, któremu przypisano te trzy właściwości.

475

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Tabela 22.7. Właściwości spacing Właściwość

Opis

Wartości

letter-spacing

Określa odstępy między literami.

normal

word-spacing

Określa odstępy między wyrazami.

normal

line-height

Określa odstępy między wierszami.

normal



Listing 22.5. Zastosowanie właściwości letter-spacing i word-spacing

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Rezultat zastosowania tych właściwości widać na rysunku 22.5.

Dzielenie wyrazów Właściwość word-wrap wskazuje przeglądarce, co robić ze słowami szerszymi od bloku elementu. W tabeli 22.8 znajduje się opis obsługiwanych wartości. Tabela 22.8. Wartości właściwości word-wrap Wartość

Opis

normal

Wyrazy nie są dzielone, nawet kiedy nie mieszczą się w elemencie.

break-word

Wyrazy są dzielone tak, by mieściły się w elemencie.

476

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Rysunek 22.5. Rezultat zastosowania właściwości word-spacing i letter-spacing W listingu 22.6 widnieje przykład zastosowania właściwości word-wrap. Listing 22.6. Zastosowanie właściwości word-wrap

Przykład

Istnieje wiele różnych rodzajów owoców — sam całkowicieprzezemniezmyślonyowoc ma ponad pięćset odmian.

Istnieje wiele różnych rodzajów owoców — sam całkowicieprzezemniezmyślonyowoc ma ponad pięćset odmian.

477

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

W tym przykładzie znajdują się dwa elementy p, którym nadałem różne wartości właściwości word-wrap. Rezultat widać na rysunku 22.6.

Rysunek 22.6. Rezultat zastosowania właściwości word-wrap Znajdującemu się po lewej stronie elementowi p nadałem wartość break-word, dzięki czemu zawarte w tekście długie słowo zostało podzielone i zawinięte, żeby mogło się zmieścić w elemencie. Drugiemu elementowi p nadałem domyślną wartość normal, przez co przeglądarka nie podzieliła wyrazu, pomimo że wystaje poza krawędź elementu p. „ Wskazówka Możesz użyć opisanej w rozdziale 20. właściwości overflow, żeby polecić przeglądarce, by nie wyświetlała przepełnień tekstowych — skutkuje to jedynie niewyświetleniem tej części wyrazu, która nie mieści się w elemencie.

Wcięcie pierwszego wiersza Właściwość text-indent pozwala na określenie wcięcia pierwszego wiersza bloku tekstowego, czy to jednostkami miary, czy odsetkiem szerokości kontenera. W tabeli 22.9 znajduje się opis tej właściwości. Tabela 22.9. Właściwość text-indent Właściwość

Opis

Wartości

text-indent

Określa wcięcie pierwszego wiersza tekstu.



W listingu 22.7 widnieje przykład zastosowania tej właściwości. Listing 22.7. Zastosowanie właściwości text-indent

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Rezultat zastosowania tej właściwości widać na rysunku 22.7.

Rysunek 22.7. Wcięcie pierwszego wiersza bloku tekstu

Dekorowanie i przekształcanie tekstu Na dekorowanie i przekształcanie tekstu pozwalają dwie właściwości, text-decoration i text-transform. Ich opis znajduje się w tabeli 22.10. Tabela 22.10. Właściwości służące do dekorowania i przekształcania tekstu Właściwość

Opis

Wartości

text-decoration

Określa dekorację bloku tekstu.

none underline overline line-through blink

text-transform

Określa sposób przekształcenia bloku tekstu.

none capitalize uppercase lowercase

Właściwość text-decoration nadaje blokowi tekstu określony efekt graficzny, np. podkreślenie. Domyślna wartość to none, czyli brak dekoracji. Właściwość text-transform określa z kolei wielkość liter bloku tekstu; jej domyślna wartość to również none. Przykład zastosowania obydwu tych właściwości widać w listingu 22.8.

479

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Listing 22.8. Zastosowanie właściwości text-decoration i text-transform

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Na rysunku 22.8 widać efekt zastosowania właściwości text-transform o wartości uppercase oraz właściwości text-decoration o wartości line-through.

Rysunek 22.8. Udekorowany i przekształcony tekst „ Wskazówka Wartości blink właściwości text-decoration należy używać bardzo ostrożnie. Wywołuje ona niezwykle denerwujący efekt, który może być szczególnie męczący, jeżeli użytkownik musi przez dłuższy czas korzystać ze strony. Sugeruję poszukać mniej irytującego sposobu przyciągania uwagi użytkownika.

Nadawanie tekstowi cienia W rozdziale 19. pokazałem Ci, jak przypisywać elementom cienie. To samo można zrobić z tekstem przy użyciu właściwości text-shadow, którą opisuję w tabeli 22.11.

480

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Tabela 22.11. Właściwość text-shadow Właściwość

Opis

Wartości

text-shadow

Nadaje cień blokowi tekstu.



Wartości i określają oddalenie cienia od tekstu. Wartości wyraża się jednostkami miary odległości, a dopuszczalne jest podawanie wartości ujemnych. Wartość również określa się jednostkami miary odległości, a odnosi się ona do rozmycia cienia; jej użycie nie jest obowiązkowe. Wartość określa kolor cienia. W listingu 22.9 widnieje przykład zastosowania właściwości text-shadow. Listing 22.9. Zastosowanie właściwości text-shadow

Przykład



Przemyślenia o owocach

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie nadałem tekstowi dwa różne cienie. Rezultat widać na rysunku 22.9. Zauważ, że kształt cienia oparty jest na kształcie liter, a nie kontenera.

Rysunek 22.9. Nadanie tekstowi cienia

481

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Fonty Jedną z najważniejszych zmian, jakie można wprowadzić w tekście, jest zmiana fonta służącego do wyświetlania znaków. W tabeli 22.12 znajduje się opis właściwości odnoszących się do fontów. W zakresie typografii trudno o kompromis — z jednej strony, jest wielu zaawansowanych użytkowników, którzy chcą mieć kontrolę nad każdym jej aspektem. Tymczasem są też designerzy i programiści, którym zależy na łatwym dostępie do najważniejszych funkcji typograficznych i którzy nie chcą się zagłębiać w szczegóły. Niestety, obsługa fontów CSS nie zadowala ani jednych, ani drugich. CSS obsługuje niewiele istotnych aspektów pracy z krojami pisma, a i te nie są szczególnie użyteczne dla typowego designera i programisty. Istnieją proponowane moduły CSS3, które miałyby usprawnić obsługę krojów, ale znajdują się one dopiero we wczesnej fazie rozwoju i jeszcze trzeba poczekać, aż zostaną wprowadzone do powszechnego użycia. Tabela 22.12. Właściwości fontów Właściwość

Opis

font-family

Wartości

Określa rodzinę fontów przypisaną blokowi tekstu.

Tabela 22.13

font-size

Określa wielkość tekstu.

Tabela 22.14

font-style

Określa styl fonta.

normal italic oblique

font-variant

Określa, czy tekst ma być zapisany kapitalikami.

normal smallcaps

font-weight

Określa grubość tekstu.

normal bold bolder lighter

font

Właściwość zbiorcza, definiująca cechy fonta w jednej deklaracji.

Zapoznasz się z nimi w kolejnych punktach.

Wartości właściwości font zapisuje się w następującym formacie: font:

Wybór fonta Właściwość font-family określa fonty, jakimi tekst ma być zapisywany, w preferowanej kolejności. Przeglądarka zaczyna od sprawdzenia pierwszego fonta na liście i przechodzi do kolejnych, aż znajdzie taki, z którego może skorzystać. Funkcji tej należy używać, ponieważ korzystasz z fontów zainstalowanych na komputerze użytkownika, a — rzecz jasna — różni użytkownicy mają różne fonty w zależności od używanego systemu i własnych upodobań. Wreszcie, CSS obsługuje ogólne kategorie fontów, do których każdy ma dostęp — są to standardowe rodziny fontów, których użycie może poskutkować zróżnicowanym doborem konkretnych fontów przez przeglądarki. Opis standardowych rodzin fontów znajduje się w tabeli 22.13. Tabela 22.13. Standardowe rodziny fontów Standardowa rodzina fontów

Przykładowy font

serif

Times

sans-serif

Helvetica

cursive

Zapf-Chancery

fantasy

Western

monospace

Courier

482

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

W listingu 22.10 widnieje przykład przypisania właściwości font-family blokowi tekstu. Listing 22.10. Zastosowanie właściwości font-family

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie nadałem właściwości font-family wartość HelveticaNeue Condensed. Tego kroju używa się w moim wydawnictwie i nie jest on zainstalowany w każdym systemie. Jako źródło krojów zapasowych określiłem standardową rodzinę monospace na wypadek, gdyby HelveticaNeue Condensed nie była dostępna. Rezultat widać na rysunku 22.10.

Rysunek 22.10. Zastosowanie właściwości font-family Przeglądarkę widoczną po prawej włączyłem na komputerze, na którym napisałem tę książkę. Mam na nim zainstalowane fonty mojego wydawnictwa, toteż przeglądarka znalazła na nim HelveticaNeue Condensed. Przeglądarkę widoczną po lewej uruchomiłem na jednym z moich komputerów testowych, na którym nie ma fonta HelveticaNeue Condensed. Jak widać, przeglądarka skorzystała ze standardowego kroju monospace. „ Wskazówka Z korzystaniem z zapasowych fontów bywa taki problem, że fonty mogą mieć na ekranie różny rozmiar. Widać to na rysunku powyżej, gdzie font zapasowy jest większy od docelowego. Do określenia proporcji skalowania można użyć właściwości font-size-adjust, ale obecnie jest to funkcja obsługiwana wyłącznie przez Firefoksa.

483

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Rozmiar fonta Właściwość font-size pozwala na określenie wielkości fonta. Opis wartości obsługiwanych przez tę właściwość znajduje się w tabeli 22.14. Tabela 22.14. Wartości właściwości font-size Wartość

Opis

xx-small x-small small medium large x-large xx-large

Określa rozmiar fonta. Przeglądarka sama określa dokładny rozmiar definiowany przez poszczególne wartości, ale można z pewnością stwierdzić, że im niżej wartość znajduje się na liście, tym większy określa rozmiar.

smaller larger

Określa rozmiar fonta względem rozmiaru fonta rodzica.

Dokładnie określa rozmiar fonta w jednostkach miary.

Określa rozmiar fonta jako odsetek rozmiaru fonta rodzica.

W listingu 22.11 znajduje się przykład zastosowania właściwości font-size. Listing 22.11. Zastosowanie właściwości font-size

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

484

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

W tym przykładzie użyłem trzech deklaracji font-size. Rezultat widać na rysunku 22.11.

Rysunek 22.11. Zastosowanie właściwości font-size

Styl i grubość fonta Grubość fonta można określić właściwością font-weight. Właściwość font-style pozwala na wybranie fonta zwykłego, kursywowego lub pochylonego. Kursywa różni się od pochylonego pisma, ale bardzo subtelnie — na ogół wygląd tekstu zapisanego jednym i drugim rodzajem pisma niewiele się różni, jeśli w ogóle. W listingu 22.12 widnieje przykład zastosowania tych właściwości. Listing 22.12. Zastosowanie właściwości font-weight i font-style

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

485

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

Rezultat zastosowania tych właściwości widać na rysunku 22.12.

Rysunek 22.12. Zastosowanie właściwości font-weight i font-style

Fonty internetowe Wspomniałem już wcześniej o jednym z największych problemów z używaniem fontów CSS — tym, że nie można zakładać, że na komputerze użytkownika znajduje się określony font. Rozwiązaniem tego problemu jest zastosowanie fontów internetowych, co polega na wczytaniu fonta na stronę, przez co użytkownik sam nie musi podejmować w tym zakresie jakichkolwiek dodatkowych działań. Fonty internetowe określa się właściwością @font-face, tak jak widać to w listingu 22.13. Listing 22.13. Wykorzystanie fonta internetowego

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Przy korzystaniu z właściwości @font-face do opisu używanego fonta stosuje się standardowe właściwości obsługi fontów. Właściwość font-family wskazuje nazwę, jaką ma być określany pobierany font, a font-style i font-weight wskazują przeglądarce styl i grubość fonta — możesz więc zapisywać znaki kursywą i pogrubionym pismem. Właściwość src służy do wskazywania lokalizacji pliku fonta. Fonty internetowe występują w wielu formatach, ale WOFF wydaje się najbardziej powszechny i dostępny. „ Wskazówka Niektóre serwery domyślnie nie przesyłają przeglądarce plików fontów. W takiej sytuacji może być konieczne dodanie typu pliku lub standardu MIME do konfiguracji.

Rezultat zastosowania fonta internetowego widać na rysunku 22.13.

Rysunek 22.13. Zastosowanie fonta internetowego Jest wiele źródeł fontów internetowych — moim ulubionym jest Google. Oferowane przez Google fonty wraz z instrukcją włączania ich w kod HTML znajdziesz na stronie www.google.com/webfonts, skąd zresztą wziąłem krój użyty w powyższym przykładzie.

Podsumowanie W tym rozdziale przedstawiłem Ci właściwości CSS służące do stylizacji tekstu. Oferują one zarówno proste funkcje (np. wyrównywanie tekstu), jak i bardziej rozbudowane (używanie określonych fontów i nadawanie tekstowi cieni). Jest to kolejna nie w pełni określona dziedzina CSS. Istnieją pewne ciekawe propozycje wprowadzenia właściwości, które dawałyby większą kontrolę nad wyglądem tekstu, ale nie jest jeszcze jasne, czy cieszyłyby się wystarczającym zainteresowaniem, żeby je wdrożyć — jest dość prawdopodobne, że owe propozycje nie zostaną włączone do standardu.

487

ROZDZIAŁ 22. „ STYLIZACJA TEKSTU

488

ROZDZIAŁ 23

Przejścia, animacje i przekształcenia W tym rozdziale przedstawię Ci trzy różne sposoby nadawania prostych efektów specjalnych elementom HTML: przejść, animacji i przekształceń. Każdy z tych terminów omówię i zilustruję w dalszej części rozdziału. Są one nowością w CSS3 i w chwili, kiedy to piszę, można z nich korzystać jedynie przy użyciu właściwości z prefiksami przeglądarkowymi. Podejrzewam, że ta sytuacja ulegnie zmianie dość szybko, jako że owe funkcje będą niezwykle popularne wśród webdesignerów i webdeweloperów. Okraszanie elementów HTML efektami specjalnymi nie jest nowym pomysłem, a w większości dobrych bibliotek JavaScript można znaleźć co najmniej kilka efektów, które wprowadzane są teraz do CSS3. Przewagą CSS3 nad JavaScript jest jego wydajność. Nowe funkcje w znacznej mierze opierają się na zmianie wartości właściwości CSS wraz z upływem czasu, a jest to coś, co można robić bezpośrednio w przeglądarce bez nadmiernego obciążania komputera. Tym niemniej te efekty (także najprostsze) wymagają dużej mocy obliczeniowej, zwłaszcza kiedy występują na złożonych stronach internetowych. Z tego względu z opisanych w tym rozdziale efektów powinieneś korzystać sporadycznie. Spowalnianie komputera użytkownika nigdy nie jest pożądane, zwłaszcza jeśli ma to służyć jedynie zademonstrowaniu talentu animatorskiego. Kolejnym argumentem przeciwko nadużywaniu tych efektów jest to, że bywają one rozpraszające i irytujące. Używaj ich do usprawniania czynności, jakie użytkownik wykonuje na stronie — jakiekolwiek by nie były — i nie nadawaj ich elementom, które nie są dla tego zadania kluczowe. W tabeli 23.1 znajduje się streszczenie tego rozdziału. Tabela 23.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Utworzenie podstawowego przejścia.

Użyj właściwości transition-delay, transition-property i transition-duration albo właściwości zbiorczej transition.

23.1, 23.2

Utworzenie odwróconego przejścia.

Określ odwrócone przejście w podstawowym stylu elementu.

23.3

Określenie sposobu obliczania pośrednich wartości właściwości przejścia.

Użyj właściwości transition-timing-function.

23.4

Utworzenie prostej animacji.

Użyj właściwości animation-delay, animation-duration, animation-iteration-count i animation-name. Wartość animation-name musi odpowiadać zbiorowi klatek kluczowych zdefiniowanych regułą @keyframes.

23.5

Określenie początkowego stanu animacji.

Zamieść w regule @keyframes klauzulę from.

23.6

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Tabela 23.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Określenie klatek kluczowych animacji.

Dodaj warunki do reguły @keyframes, używając nazwy klauzuli do określenia punktu animacji (w wartościach procentowych), w którym dana klatka się znajduje.

23.7

Określenie kierunku powtórzeń animacji.

Użyj właściwości animation-direction.

23.8

Zachowanie końcowego stanu animacji.

Animacje po zakończeniu powracają do stanu wejściowego; rozważ skorzystanie z przekształcenia.

23.9

Wprowadzenie animacji do wejściowego layoutu strony.

Zamieść właściwości animacji w stylach odnoszących się do elementów w ich stanie wejściowym.

23.10

Utwórz dodatkowe style zawierające właściwość

23.11

Wielokrotne wykorzystanie klatek kluczowych.

animation-name, których wartości odnoszą się do tej samej reguły @keyframes.

Nadanie elementowi więcej niż jednej animacji.

Określ dodatkowe reguły @keyframes jako wartość właściwości animation-name.

23.12, 23.13

Zatrzymanie i wznowienie animacji.

Użyj właściwości animation-play-state.

23.14

Przekształcenie elementu.

Użyj właściwości transform.

23.15

Określenie punktu wyjścia przekształcenia.

Użyj właściwości transform-origin.

23.16

Ujęcie przekształcenia jako animacji lub przejścia.

Włącz właściwość transform do przekształcanego stylu lub reguły @keyframes.

23.17

Przejścia Przeglądarka domyślnie wprowadza zmiany właściwości CSS elementów bez żadnej zwłoki. Kiedy na przykład używasz selektora :hover, przeglądarka wprowadza właściwości określone tym selektorem, kiedy tylko użytkownik zamieszcza kursor nad danym elementem. W listingu 23.1 widnieje przykład. Listing 23.1. Natychmiastowe zastosowanie nowej wartości właściwości

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie znajduje się element span, któremu nadałem dwa precyzyjne style. Pierwszy z nich (z selektorem #banana) używany jest standardowo, a drugi (z selektorem #banana:hover) tylko wtedy, kiedy nad elementem znajduje się kursor. „ Wskazówka Użyłem w tym przykładzie właściwości color, którą omówię w rozdziale 24.

Przeglądarka reaguje, kiedy użytkownik umieszcza kursor nad elementem span — natychmiast nanosi wtedy nowe wartości właściwości. Zmianę widać na rysunku 23.1.

Rysunek 23.1. Natychmiastowe zastosowanie innych wartości właściwości CSS Funkcja przejścia CSS daje kontrolę nad tempem nadawania nowych wartości. Możesz zatem polecić, by wygląd ukazanego w przykładzie elementu span zmieniał się stopniowo, sprawiając tym samym, by efekt najechania kursorem na słowo banan nie był tak rażący. W tabeli 23.2 znajdują się właściwości, które to umożliwiają. Właściwości transition-delay i transition-duration określa się wartościami czasowymi CSS, czyli wartością liczbową z przyrostkiem ms (oznaczającym milisekundy) lub s (oznaczającym sekundy). Wartości właściwości zbiorczej transition zapisuje się w następującym formacie: transition:

W listingu 23.2 widnieje przykład nadania przejścia przykładowemu dokumentowi HTML. W chwili, kiedy to piszę, żadna z popularnych przeglądarek nie obsługuje właściwości przejść jako takich, lecz wszystkie poza Internet Explorerem obsługują odpowiedniki tych właściwości z prefiksami przeglądarkowymi. W listingu korzystam z prefiksu -webkit.

491

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Tabela 23.2. Właściwości przejścia Właściwość

Opis

Wartości

transition-delay

Określa opóźnienie, po którym przejście się rozpoczyna.

transition-duration

Określa czas, w jakim przejście się odbywa.

transition-property

Określa właściwość, do której odnosi się przejście.

transition-timing-function

Określa sposób obliczania wartości pośrednich podczas przejścia.

Listing 23.4

transition

Właściwość zbiorcza, która definiuje wszystkie szczegóły przejścia w jednej deklaracji.

Listing 23.2

Listing 23.2. Zastosowanie przejścia

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

492

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

„ Uwaga Standardowe właściwości animacji nie są jeszcze obsługiwane przez którąkolwiek z popularnych przeglądarek. Podobnie jak w przypadku przejść, wszystkie przeglądarki poza Internet Explorerem obsługują te funkcje przy pomocy właściwości z prefiksami przeglądarkowymi. W listingu 23.2 użyłem prefiksu -webkit, co oznacza, że przykładowy kod działa tylko w Safari i Chrome. Jeżeli chcesz go użyć w Firefoksie lub Operze, to zwyczajnie podstaw -moz lub -o pod -webkit. Jest to kolejna istotna dziedzina usprawnień w CSS3 i spodziewam się, że funkcje te wkrótce zostaną poprawnie wdrożone.

W tym przykładzie nadałem przejście stylowi określonemu selektorem #banana:hover. Zaczyna się ono 100 milisekund po najechaniu kursorem na element span, trwa 500 milisekund i nadaje temu elementowi właściwości background-color, color, padding, font-size i border. Na rysunku 23.2 widnieją kolejne etapy przejścia.

Rysunek 23.2. Kolejne etapy przejścia Zauważ, że w powyższym przykładzie zdefiniowałem kilka właściwości. Właściwości przejścia określane są oddzielonymi przecinkami wartościami, przez co kilka przejść efektów zachodzi jednocześnie. Także właściwościom opóźnienia i czasu trwania przejścia można nadać kilka różnych wartości, żeby przejścia poszczególnych właściwości zaczynały się z różnym opóźnieniem i trwały przez różne okresy.

Odwrócone przejścia Przejścia zachodzą tylko wtedy, kiedy nadawany jest zestawiony z nimi styl. Mój przykładowy styl wykorzystuje selektor :hover, wobec czego styl jest nadawany wyłącznie wtedy, kiedy kursor znajduje się nad elementem span. Kiedy tylko użytkownik zdejmuje kursor z elementu span, to elementowi temu nadawany jest na nowo styl #banana i jego wygląd natychmiast wraca do swojej pierwotnej postaci. To właśnie z tego powodu większość przejść zachodzi parami: przejście do tymczasowego stanu oraz odwrócone przejście do stanu pierwotnego. W listingu 23.3 widnieje przykład wygładzenia powrotu do pierwotnego stanu poprzez utworzenie drugiego przejścia. Listing 23.3. Utworzenie drugiego przejścia

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W powyższym przykładzie pominąłem właściwość transition-property. Dzięki temu wszystkie zmiany właściwości nadawane są stopniowo przez cały czas trwania przejścia. Zdefiniowałem również wstępne, 10-milisekundowe opóźnienie i czas trwania 250 milisekund. Dodanie krótkotrwałego odwrotnego przejścia sprawia, że powrót do pierwotnego stanu jest mniej drażniący. „ Wskazówka Przeglądarka nie uruchamia przejść bezpośrednio po wczytaniu strony. Oznacza to, że przy wyświetleniu dokumentu HTML elementom przypisywane są wartości określone w stylu #banana, a stopniowe przypisywanie wartości pierwotnych zachodzi dopiero przy przejściach odwrotnych.

Wybór sposobu obliczania wartości pośrednich Kiedy korzystasz z przejścia, przeglądarka musi wypracować wartości pośrednie pomiędzy wejściowymi a końcowymi wartościami każdej właściwości. Właściwość transition-timing-function służy do określenia sposobu, w jaki to się odbywa, przy czym wartości te wyrażane są jako cztery punkty na kwadratowej krzywej Béziera. Predefiniowanych krzywych do wyboru jest pięć: • ease (domyślna wartość), • linear, • ease-in, • ease-out, • ease-in-out.

494

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Każdą z tych krzywych widać na rysunku 23.3. Wskazują one tempo, w jakim wartości pośrednie wzrastają do wartości docelowej.

Rysunek 23.3. Krzywe funkcji czasowego rozkładu przejścia Najłatwiejszym sposobem na zapoznanie się z tymi wartościami jest poeksperymentowanie z nimi we własnym dokumencie HTML. Istnieje jeszcze jedna wartość — cubic-bezier — która pozwala na samodzielne określenie krzywej. Z doświadczenia wiem jednak, że tak definiowane przejścia są za mało płynne, a brak szczegółowości w określaniu wartości pogarsza jakość przejścia, przez co samodzielne definiowanie krzywej w zasadzie nie ma sensu. Pozostaje mieć nadzieję, że kolejne implementacje tej funkcji będą się polepszać w miarę postępów w tworzeniu ostatecznego standardu. W listingu 23.4 widać przykład zastosowania właściwości transition-timing-function. Listing 23.4. Zastosowanie właściwości transition-timing-function

Przykład

495

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Użyłem wartości linear, która — jak sądzę — pozwala na uzyskanie najpłynniejszego przejścia.

Animacje Animacje CSS są w zasadzie usprawnionymi przejściami. Dają więcej możliwości, a także zapewniają większą kontrolę i elastyczność przy przechodzeniu od jednego stylu CSS do drugiego. W tabeli 23.3 znajduje się opis właściwości animacji. Tabela 23.3. Właściwości animacji Właściwość

Opis

Wartości

animation-delay

Określa opóźnienie przed rozpoczęciem animacji.

animation-direction

Określa, czy animacja ma być cyklicznie odgrywana wstecz.

normal alternate

animation-duration

Określa czas odgrywania animacji.

animation-iteration-count

Określa, ile razy animacja ma być odegrana.

infinite

animation-name

Określa nazwę animacji.

none

animation-play-state

Pozwala na zatrzymanie i wznowienie animacji.

running paused

animation-timing-function

Określa sposób obliczania pośrednich wartości animacji. We wcześniejszym podrozdziale „Przejścia” przeczytasz więcej na temat wartości tej właściwości.

ease linear ease-in ease-out ease-in-out cubic-bezier

animation

Właściwość zbiorcza.

Opis znajdziesz poniżej.

Wartości właściwości zbiorczej animation zapisuje się w następującym formacie: animation:

Zauważ, że żadna z tych właściwości nie pozwala na określenie, które właściwości CSS elementów mają wejść w skład animacji. Jest tak, ponieważ animacje definiuje się w dwóch częściach. Pierwsza część zawarta jest w deklaracji stylu i wykorzystuje właściwości opisane w tabeli 23.3. Określa ona styl animacji, ale nie wskazuje tego, co ma być animowane. Drugą część definiuje się przy użyciu reguły @keyframes; służy do określania zbioru właściwości, do których animacja się odnosi. Obydwie części kodu odpowiadającego za animację widać w listingu 23.5. Listing 23.5. Utworzenie animacji

Przykład

496

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Żeby zrozumieć powyższy przykład, musisz się przyjrzeć obydwu częściom kodu odpowiedzialnego za animację. Pierwsza część — ujęta w elemencie style — składa się z właściwości animacji określonych dla selektora #banana:hover. Zacznijmy od podstawowych właściwości: animacja zaczyna się 100 milisekund po nadaniu stylu, trwa 500 milisekund, a następnie powtarza się w nieskończoność; jej wartości pośrednie obliczane są przy użyciu funkcji linear. Poza powtórzeniami wszystkie te właściwości mają bezpośrednie odpowiedniki wśród właściwości przejść. Te podstawowe właściwości nie określają zbioru właściwości, które mają być animowane. Do tego celu muszę użyć właściwości animation-name. Nadając jej wartość GrowShrink, poleciłem przeglądarce, by znalazła zbiór klatek kluczowych o nazwie GrowShrink i wykorzystała wartości podstawowych właściwości do animowania właściwości określonych dla tychże klatek. Oto zawarta w powyższym listingu deklaracja klatek kluczowych (z usuniętym prefiksem -webkit): @keyframes GrowShrink { to { font-size: x-large; border: medium solid white; background-color: green;

497

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

color: white; padding: 4px; } }

Deklarację zacząłem od członu @keyframes, a następnie podałem nazwę, jaką ten zbiór ma nosić. W tym przypadku jest to GrowShrink. W ramach deklaracji określiłem zbiór właściwości, które mają być animowane. W tym przypadku jest to pięć właściwości z wartościami, zawarte w deklaracji to. Jest to najprostsza deklaracja zbioru klatek kluczowych. Deklaracja to określa zbiór właściwości do animowania oraz wartości, jakie owe właściwości mają przybrać w chwili zakończenia animacji. (Już wkrótce przedstawię Ci bardziej rozbudowane definicje klatek kluczowych). Wartości wejściowe animacji są tożsame z wartościami właściwości animowanego elementu sprzed odegrania animacji. Animacja w powyższym listingu przypomina przykładowe przejścia, które przedstawiłem Ci już w tym rozdziale. Wystarczy zresztą otworzyć ten dokument HTML w przeglądarce i najechać kursorem na element span, by przekonać się, że ta animacja wygląda tak samo, jak owe przejścia — przynajmniej początkowo. Różnica jest taka, że animacja powtarza się. Element span rozrasta się, osiąga maksymalny rozmiar, następnie powraca do pierwotnego stanu, po czym odgrywana jest od nowa. Rezultat widać na rysunku 23.4.

Rysunek 23.4. Powtarzające się stany animacji

Klatki kluczowe Obsługa klatek kluczowych animacji w CSS jest niezwykle elastyczna i godna uwagi. W poniższych podpunktach przedstawię Ci różne sposoby definiowania klatek kluczowych w celu tworzenia bardziej złożonych efektów.

Określenie stanu początkowego W poprzednim przykładzie wartości animowanych właściwości pobrałem z samego elementu. Można jednak zdefiniować zamienny zestaw początkowych wartości przy użyciu klauzuli from, tak jak widać to w listingu 23.6. Listing 23.6. Określenie odmiennego stanu pierwotnego ...

...

W tym przykładzie określiłem początkowe wartości właściwości font-size i background-color. Określone w klauzuli to początkowe wartości innych właściwości pobierane są z elementu przy rozpoczęciu animacji. Rezultat zastosowania nowej klauzuli widać na rysunku 23.5. Rozmiar tekstu i kolor tła elementu span powraca do pierwotnych wartości określonych w klauzuli from, kiedy animacja się powtarza.

Rysunek 23.5. Określenie początkowej wartości klauzulą from

Określenie pośrednich klatek kluczowych Do określania pośrednich etapów animacji służą dodatkowe klatki kluczowe. Tworzy się je, dodając klauzule procentowe, tak jak widać w listingu 23.7. Listing 23.7. Dodawanie pośrednich klatek kluczowych ...

...

Każda klauzula procentowa określa punkt animacji, w którym określone w niej właściwości i wartości mają być w pełni zastosowane. W tym przykładzie zdefiniowałem wartości 50% i 75%. Pośrednie klatki kluczowe mają dwa zastosowania. Po pierwsze, służą do określania nowego tempa zmiany właściwości — co w tym przypadku zastosowałem do właściwości padding. W punkcie środkowym (zdefiniowanym klauzulą 50%) dopełnienie animowanego elementu wynosi 1px. Przy punkcie określonym wartością 75% ma ono mieć wartość 2px, a przy zakończeniu animacji — 4px. Przeglądarka oblicza zmianę wartości pomiędzy kolejnymi klatkami przy użyciu funkcji określania czasu, zdefiniowanej właściwością animation-timing-function, co pozwala na uzyskanie gładkiego przejścia między klatkami. „ Wskazówka Do definiowania pierwszej i ostatniej klatki kluczowej możesz użyć klauzul 0% i 100% zamiast from i to.

Klatki pośrednie służą też do definiowania wartości w ramach tworzenia bardziej rozbudowanych animacji. Tak właśnie zrobiłem z właściwością background-color. Początkowa wartość (red) zdefiniowana

500

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

jest klauzulą from. W punkcie 50-procentowym wartość to yellow, a pod koniec animacji green. Dodając inne wartości pośrednie, utworzyłem dwa przejścia kolorystyczne w jednej animacji — od czerwonego do żółtego i od żółtego do zielonego. Zauważ, że nie podałem wartości pośredniej w klauzuli 75%. Zrobiłem tak, ponieważ nie trzeba nadawać wartości każdej klatce kluczowej. Rezultat wprowadzenia nowych klatek kluczowych widać na rysunku 23.6.

Rysunek 23.6. Dodanie pośrednich klatek kluczowych

Określenie kierunku powtórzeń Kiedy polecasz, by animacja się powtarzała, możesz zdecydować, co ma się dziać, gdy dobiega ona końca. Zachowanie to określa się właściwością animation-direction, wykorzystując wartości opisane w tabeli 23.4. Tabela 23.4. Wartości właściwości animation-direction Wartość

Opis

normal

Każde powtórzenie animacji odgrywane jest naprzód. Przy kolejnych powtórzeniach element powraca do swojego pierwotnego stanu i animowany jest na nowo.

alternate

Animacja odgrywana jest naprzód i wstecz — taka pętla jest uznawana przez właściwość animation-iteration count za dwa powtórzenia.

Przykład zastosowania właściwości animation-direction widać w listingu 23.8. Listing 23.8. Zastosowanie właściwości animation-direction

W tym przykładzie użyłem właściwości animation-iteration-count do wskazania, że animacja powinna być odegrana jedynie dwukrotnie. Po zakończeniu drugiego powtórzenia animowany element powraca do swojego pierwotnego stanu. Właściwości animation-direction nadałem wartość alternate, sprawiając tym samym, że została odegrana naprzód i wstecz. Rezultat widać na rysunku 23.7.

Rysunek 23.7. Określenie kierunku odgrywania animacji wartością alternate Gdybym nadał właściwości animation-iteration-count wartość infinite, animacja byłaby odgrywana w jedną i drugą stronę przez cały czas, kiedy mysz znajdowałaby się nad elementem span, tworząc tym samym efekt pulsowania. Zastosowanie wartości normal sprawia, że każde powtórzenie animacji odgrywane jest od początku. Rezultat widać na rysunku 23.8.

Rysunek 23.8. Określenie kierunku odgrywania animacji wartością normal

Stan końcowy Jednym z ograniczeń animacji CSS jest to, że wartości właściwości zdefiniowanych przez klatki kluczowe animacji są używane jedynie podczas samej animacji. Po zakończeniu animacji wygląd animowanego elementu powraca do stanu początkowego. Listing 23.9 jest tego przykładem.

502

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Listing 23.9. Utrata stanu animacji po jej zakończeniu ...

...

Rezultat widać na rysunku 23.9. Choć mysz wciąż się znajduje nad elementem span, jego wygląd po zakończeniu animacji powraca do stanu pierwotnego.

Rysunek 23.9. Po zakończeniu animacji wygląd elementu powraca do stanu pierwotnego Dzieje się tak, ponieważ animacje CSS wdrażają wygląd zdefiniowany nowym stylem, lecz nie wprowadzają żadnych stałych zmian. Jeżeli chcesz zachować końcowy wygląd elementu, musisz skorzystać z przejścia — co opisałem już wcześniej.

Animowanie elementów layoutu Animacje mają nad przejściami przewagę taką, że można nimi tworzyć automatycznie animowane elementy. Przykład tego widnieje w listingu 23.10.

503

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Listing 23.10. Animowanie elementu początkowego layoutu ...

...

W tym przykładzie zdefiniowałem animację przy użyciu selektora #banana. Styl ten jest nadawany automatycznie po wczytaniu strony. Innymi słowy, animacja uruchamia się, kiedy tylko przeglądarka wyświetla dokument HTML. „ Wskazówka Powinieneś używać tej funkcji szczególnie ostrożnie. Animacji, które nie wynikają z czynności użytkownika, należy używać sporadycznie, a same efekty animacji powinny być subtelne i nie utrudniać czytelnikowi czytania bądź korzystania ze strony.

Wielokrotne wykorzystanie klatek kluczowych Ten sam zestaw klatek kluczowych możesz wykorzystać w wielu animacjach, przy czym każdej można wtedy przypisać inne wartości właściwości animacji. W listingu 23.11 widnieje przykład. Listing 23.11. Wielokrotne wykorzystanie klatek kluczowych w różnych animacjach

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W listingu 23.11 widnieją dwa style, wykorzystujące klatki kluczowe ColorSwap. Animacja przypisana selektorowi #apple trwa krótko, odgrywana jest w innym tempie i wyłącznie naprzód.

Nadawanie wielu animacji wielu elementom Powyższy przykład można jeszcze zmodyfikować, by nadać wielu elementom tę samą animację. Robi się to, poszerzając zakres selektora zawierającego szczegóły animacji, tak jak widać to w listingu 23.12. Listing 23.12. Wybieranie wielu elementów ...

...

W tym przykładzie selektor odnosi się do obydwu elementów span w dokumencie, wobec czego obydwa są animowane z użyciem tych samych klatek kluczowych i na podstawie takiej samej konfiguracji. Rezultat widać na rysunku 23.10.

Rysunek 23.10. Nadanie jednej animacji wielu elementom Możesz również nadać więcej niż jedną animację pojedynczemu elementowi, zwyczajnie dodając do właściwości animacji oddzielone przecinkami wartości. W listingu 23.13 widnieje przykład nadania wielu klatek kluczowych pojedynczemu elementowi. Listing 23.13. Nadanie wielu klatek kluczowych pojedynczemu elementowi ...

...

W tym przykładzie przypisałem klatki kluczowe ColorSwap i GrowShrink elementom #banana i #apple. Przeglądarka jednocześnie zastosowuje obydwie klatki kluczowe.

Wstrzymywanie i wznawianie animacji Animacje można wstrzymywać i wznawiać przy użyciu właściwości animation-play-state. Animacja zatrzymuje się, kiedy właściwości przypisana jest wartość paused. Wartość playing wznawia animację. W listingu 23.14 widać, jak można zmienić wartość tej właściwości przy użyciu JavaScript. Więcej o wykorzystaniu JavaScript w podobnych sytuacjach przeczytasz w części IV książki. Listing 23.14. Wstrzymanie i wznowienie animacji

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Running Paused

Przekształcenia Przekształcenia CSS pozwalają na zmianę kształtu elementów w sposób linearny — oznacza to, że elementy można obracać, skalować, przekrzywiać i przemieszczać. W tabeli 23.5 znajdują się właściwości służące do definiowania przekształceń. Tabela 23.5. Właściwości przekształceń Właściwość

Opis

transform

Poleca, by zastosować przekształcenie.

Tabela 23.6

transform-origin

Określa punkt wyjścia przekształcenia.

Tabela 23.7

508

Wartości

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Nadanie przekształcenia Element przekształca się poprzez nadanie mu właściwości transform. Właściwość ta obsługuje zbiór predefiniowanych funkcji, których opis znajduje się w tabeli 23.6. Tabela 23.6. Wartości właściwości transform Wartość

Opis

translate() translateX() translateY()

Przemieszczenie elementu po osi x, y bądź obydwu z nich.

scale() scaleX() scaleY()

Zeskalowanie elementu wzdłuż jednej lub obydwu osi.

rotate()

Obrócenie elementu.

skew() skewX() skewY()

Przekrzywienie elementu wzdłuż jednej lub obydwu osi.

matrix(4-6 x )

Określenie innego przekształcenia. Większość przeglądarek nie obsługuje jeszcze skalowania po osi z, wobec czego ignorują ostatnie dwie wartości; czasami jednak należy je wręcz pominąć.

W listingu 23.15 widnieje przykład przekształcenia. Tak jak w przypadku innych omówionych w tym rozdziale funkcji CSS, popularne przeglądarki nie obsługują jeszcze przekształceń bezpośrednio. W listingu użyłem prefiksu -moz, ponieważ ich obsługa w Firefoksie jest najpełniejsza. Listing 23.15. Nadanie elementowi transformacji

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

509

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

W tym przykładzie zamieściłem deklarację właściwości transform w stylu #banana, określając dwa przekształcenia. Pierwsze z nich to obrót o wartości -45deg (czyli o 45 stopni w kierunku przeciwnym do ruchu wskazówek zegara), a drugie to skalowanie o wartości 1.2 wzdłuż osi x. Rezultat tych przekształceń widać na rysunku 23.11.

Rysunek 23.11. Obracanie i skalowanie elementu Jak widzisz, element został obrócony i zeskalowany zgodnie z podanymi wartościami. Zauważ, że layout strony nie uległ zmianie, by dostosować się do przekształceń. Element nachodzi na otaczającą go treść.

Określenie punktu wyjścia Właściwość transform-origin pozwala na określenie punktu, w stosunku do którego przekształcenie ma być wykonane. Domyślnie jest to punkt środkowy elementu, ale możesz wybrać inny przy użyciu wartości opisanych w tabeli 23.7. Tabela 23.7. Wartości właściwości transform-origin Wartość

Opis

Określa początek osi x lub y elementu.

Określa odległość.

left center right

Określa punkt na osi x.

top center bottom

Określa punkt na osi y.

Do zdefiniowania właściwości trzeba podać wartości osi x i y. Kiedy podana jest tylko jedna wartość, to zakłada się, że druga to center. W listingu 23.16 widnieje przykład zastosowania właściwości transform-origin. Listing 23.16. Zastosowanie właściwości transform-origin

Przykład

510

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie określiłem punkt wyjścia jako prawy górny róg elementu. Rezultat widać na rysunku 23.12.

Rysunek 23.12. Określenie punktu wyjścia przekształcenia

Utworzenie animacji lub przejścia z przekształceniem Przekształcenie, podobnie jak inne właściwości CSS, można wykorzystać jako część animacji lub przejścia. W listingu 23.17 widnieje tego przykład. Listing 23.17. Utworzenie przejścia z przekształceniem

Przykład

511

ROZDZIAŁ 23. „ PRZEJŚCIA, ANIMACJE I PRZEKSZTAŁCENIA

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie zdefiniowałem przejście, w ramach którego przekształcenie w postaci 360-stopniowego obrotu zachodzi w ciągu 1,5 sekundy. Zostaje ono uruchomione, kiedy użytkownik najeżdża kursorem na element span. Rezultat widać na rysunku 23.13.

Rysunek 23.13. Połączenie przejścia z przekształceniem

Podsumowanie W tym rozdziale przedstawiłem Ci trzy nowe funkcje CSS3, które dają znaczącą kontrolę nad wyglądem elementów. Przejścia, transformacje i animacje są łatwe w użyciu, działają stosunkowo dobrze oraz zapewniają dużą elastyczność. Zalecam, by korzystać z nich sporadycznie, aczkolwiek ich staranne zastosowanie może ulepszyć wygląd stron i aplikacji oraz ogólną jakość doświadczenia użytkownika. Korzystałem w tym rozdziale z właściwości z prefiksami przeglądarkowymi, ale są one bardzo podobne do standardowych. Sądzę, że przeglądarki już wkrótce zaczną obsługiwać standardowe właściwości.

512

ROZDZIAŁ 24

Inne właściwości i funkcje CSS

W tym rozdziale, na zakończenie części o CSS, zajmę się właściwościami, które nie pasowały do innych rozdziałów. Są one wprawdzie przydatne i ważne, lecz nie mogłem ich w żaden sposób powiązać z tematyką pozostałych rozdziałów. Pokażę Ci, jak określać kolor pierwszego planu i krycie elementów oraz jak nadawać specjalne style tabelom i elementom list. W tabeli 24.1 znajduje się streszczenie całego rozdziału. Tabela 24.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Określenie koloru pierwszego planu elementu.

Użyj właściwości color.

24.1

Określenie przezroczystości elementu.

Użyj właściwości opacity.

24.2

Określenie sposobu rysowania sąsiadujących komórek tabeli.

Użyj właściwości border-collapse i border-spacing.

24.3 – 24.5

Określenie położenia podpisu tabeli.

Użyj właściwości caption-side.

24.6

Określenie sposobu obliczania rozmiaru tabeli.

Użyj właściwości table-layout.

24.7

Określenie zastosowanego w liście rodzaju znacznika.

Użyj właściwości list-style-type.

24.8

Wykorzystanie obrazu jako znacznika listy.

Użyj właściwości list-style-image.

24.9

Określenie położenia znacznika listy.

Użyj właściwości list-style-position.

24.10

Określenie wyglądu kursora.

Użyj właściwości cursor.

24.11

Określenie koloru i krycia elementu Zetknąłeś się już z różnymi zastosowaniami kolorów CSS — właściwościami background-color, border-color i innymi. Są jeszcze dwie właściwości, które odnoszą się do kolorów. Opisuję je w tabeli 24.2. Tabela 24.2. Właściwości koloru Właściwość

Opis

Wartości

color

Określa kolor pierwszego planu elementu.

opacity

Określa krycie elementu.

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Określenie koloru pierwszego planu Właściwość color określa kolor pierwszego planu elementu. Z zasady różne elementy różnie interpretują sens tego ustawienia koloru, jednak w praktyce właściwość color określa kolor tekstu. W listingu 24.1 widnieje przykład zastosowania tej właściwości. Listing 24.1. Zastosowanie właściwości color

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Dowiedz się więcej o bananach

W tym przykładzie użyłem właściwości color dwukrotnie: raz, żeby określić kolor i przezroczystość pierwszego planu elementu span, i raz, żeby określić kolor pierwszego planu elementów a, gdy najeżdża na nie kursor. Rezultat widać na rysunku 24.1. Efekt może być mało widoczny na papierze — najlepiej spojrzeć na dokument HTML wyświetlony w przeglądarce.

Określenie krycia elementu Zauważ, że w poprzednim przykładzie przy użyciu funkcji rgba określiłem kolor elementu span. Nadałem tekstowi lekką przezroczystość, podając wartość alpha mniejszą niż 1. Na rysunku wprawdzie trudno to zobaczyć, ale w efekcie tło nieco przez tekst prześwituje.

514

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Rysunek 24.1. Zastosowanie właściwości color do określenia koloru pierwszego planu Właściwości opacity można używać do nadawania elementom i ich treści tekstowej przezroczystości. Obsługuje ona wartości od 0 (oznaczającego całkowitą przezroczystość) do 1 (oznaczającego całkowite krycie). W listingu 24.2 widnieje przykład zastosowania tej właściwości. Listing 24.2. Zastosowanie właściwości opacity

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości. Dowiedz się więcej o bananach

W tym przykładzie nadałem elementowi span krycie 0.4. Efekt widać na rysunku 24.2, choć na papierze może być mało widoczny.

515

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Rysunek 24.2. Określenie krycia elementu

Obstylowanie tabel Istnieją różne właściwości, które pozwalają na określenie stylu wyglądu elementu table, który przedstawiłem w rozdziale 11. W tabeli 24.3 znajduje się opis tych właściwości. Tabela 24.3. Właściwości tabel Właściwość

Opis

Wartości

border-collapse

Określa sposób obsługi krawędzi sąsiadujących komórek.

collapse separate

border-spacing

Określa odstępy pomiędzy krawędziami sąsiadujących komórek.

1 lub 2

caption-side

Określa położenie elementu caption.

top bottom

empty-cells

Określa sposób rozrysowywania krawędzi pustych komórek.

hide show

table-layout

Określa sposób tworzenia layoutu tabeli.

auto fixed

Kondensowanie obramowania tabel Właściwość border-collapse pozwala na określenie sposobu, w jaki przeglądarka rozrysowuje obramowania elementu table. Przykład użycia standardowego sposobu widać na rysunku 24.3.

Rysunek 24.3. Domyślny wygląd obramowań tabeli

516

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Przeglądarka rozrysowuje obramowanie wokół samej tabeli oraz poszczególnych komórek, tworząc tym samym podwójne obwódki. Zachowanie to możesz zmienić, używając właściwości border-collapse, tak jak widać w listingu 24.3. Listing 24.3. Zastosowanie właściwości border-collapse

Przykład



Wyniki analizy owoców w roku 2011

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy	Duży	450
© 2011 Adam Freeman — Instytut Analizy Owoców

Wartość collapse wskazuje przeglądarce, by nie rozrysowywać obramowań na wszystkich krawędziach sąsiadujących elementów. Rezultat widać na rysunku 24.4.

517

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Rysunek 24.4. Skondensowanie obramowania tabeli

Konfiguracja oddzielonych krawędzi Kiedy wartości border-collapse przypisana jest domyślna wartość separate, wygląd tabeli możesz zmodyfikować przy użyciu kilku dodatkowych właściwości. Właściwość border-spacing określa odstępy pomiędzy obramowaniami sąsiadujących elementów, tak jak widać w listingu 24.4. Listing 24.4. Zastosowanie właściwości border-spacing

Przykład



Wyniki analizy owoców w roku 2011







518

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy
© 2011 Adam Freeman — Instytut Analizy Owoców

W tym przykładzie utworzyłem 10-pikselowy odstęp pomiędzy obramowaniami. Rezultat widać na rysunku 24.5.

Rysunek 24.5. Zastosowanie właściwości border-spacing

Obsługa pustych komórek Można również wskazać przeglądarce, jak powinna obsługiwać puste komórki. Przeglądarka domyślnie rozrysowuje obramowanie wokół pustej komórki, co widać na rysunku 24.5. To zachowanie można zdefiniować przy użyciu wartości empty-cells. Zastosowanie domyślnej wartości show wywołuje efekt widoczny na rysunku 24.3, podczas gdy użycie wartości hide sprawia, że obramowanie nie jest rozrysowywane. W listingu 24.5 dodałem właściwość empty-cells do elementu style z poprzedniego przykładu. Listing 24.5. Zastosowanie właściwości empty-cells

Rezultat widać na rysunku 24.6.

Rysunek 24.6. Zastosowanie właściwości empty-cells

Położenie podpisu Jak wspomniałem w rozdziale 11., kiedy w elemencie table zamieszcza się element caption, to podpis wyświetlany jest u góry tabeli, nawet jeśli caption nie jest jej pierwszym dzieckiem. Można zmienić to zachowanie przy użyciu właściwości caption-side. Obsługuje ona dwie wartości: top (która jest domyślna) i bottom. W listingu 24.6 widnieje przykład zastosowania tej właściwości. Listing 24.6. Zastosowanie właściwości caption-side

Przykład



Wyniki analizy owoców w roku 2011

520

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Ulubiony:	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy
© 2011 Adam Freeman — Instytut Analizy Owoców

Rezultat zastosowania tej właściwości widać na rysunku 24.7.

Rysunek 24.7. Przemieszczenie podpisu przy użyciu właściwości caption-side

Określenie układu tabeli Przeglądarka domyślnie określa szerokość tabeli na podstawie najszerszej komórki w każdej kolumnie. Dzięki temu nie musisz sam się zastanawiać nad rozmiarami, ale jednocześnie przeglądarka musi otrzymać całą zawartość tabeli, żeby określić układ całej strony. Sposób, w jaki przeglądarka wyświetla tabele, określany jest właściwością table-layout, której domyślna wartość to auto. Automatyczne generowanie układu tabeli można wyłączyć, używając drugiej obsługiwanej wartości — fixed. Kiedy wybrana jest wartość fixed, rozmiar tabeli określony jest wartościami width tabeli i pojedynczych kolumn. Jeżeli nie ma żadnych informacji o szerokości kolumny, przeglądarka przydziela kolumnom równą ilość miejsca.

521

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

W ten sposób przeglądarka może określić szerokość każdej kolumny już po otrzymaniu jednego rzędu danych tabeli. Dane w kolejnych rzędach zawijane są tak, by się mieściły, przez co mogą być wyższe niż przy zastosowaniu wartości auto. W listingu 24.7 widnieje przykład zastosowania właściwości table-layout. Listing 24.7. Zastosowanie właściwości table-layout

Przykład



Wyniki analizy owoców w roku 2011

Pozycja	Nazwa	Kolor	Rozmiar i oddane głosy
Bardzo bardzo bardzo bardzo długi nagłówek	Jabłko	Zielony	Średni	500
Drugi ulubiony:	Pomarańcza	Pomarańczowy
© 2011 Adam Freeman — Instytut Analizy Owoców

522

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

W tym przykładzie użyłem właściwości width elementu table, by nadać tabeli szerokość 100% dostępnego miejsca, oraz określiłem styl tworzenia układu tabeli jako fixed. Zmieniłem również zawartość drugiego rzędu, by zademonstrować, jak w takim przypadku działa tworzenie układu. Widać to na rysunku 24.8.

Rysunek 24.8. Zastosowanie właściwości table-layout Zauważ, jak dostępna przestrzeń rozłożona jest równo na pięć kolumn i jak długi napis w drugim rzędzie jest zawinięty, by mógł się zmieścić — rząd ten jest przez to o wiele wyższy od pozostałych.

Stylizacja list Istnieją różne właściwości służące do stylizacji list. W tabeli 24.4 znajduje się ich opis. Tabela 24.4. Właściwości list Właściwość

Opis

Wartości

list-style-type

Określa rodzaj znacznika w liście.

Tabela 24.5

list-style-image

Określa obraz do użycia w charakterze znacznika.

list-style-position

Określa położenie znacznika w odniesieniu do pola listy elementów.

inside outside

list-style

Właściwość zbiorcza, określająca wszystkie cechy listy.

Omówienie znajdziesz poniżej.

Wartości właściwości zbiorczej list-style zapisuje się w następującym formacie: list-style:

Określenie typu znaczników listy Właściwości list-style-type można użyć do określenia stylu znaczników listy. Obsługiwane wartości widnieją w tabeli 24.5. W tabeli 24.5 przedstawiłem tylko niektóre z obsługiwanych stylów. Jest ich dużo więcej — opierają się na różnych alfabetach, symbolach i systemach liczbowych. Pełną listę znajdziesz pod adresem www.w3.org/ TR/css3-lists. W listingu 24.8 widać przykład zastosowania list-style-type.

523

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Tabela 24.5. Wartości właściwości list-style-type Wartość

Opis

none

Znacznik nie jest wyświetlany.

box check circle diamond disc dash square

Zastosowanie podanego kształtu jako znacznika. Nie każda przeglądarka obsługuje wszystkie kształty.

decimal

Użycie liczb dziesiętnych jako znaczników.

binary

Użycie liczb binarnych jako znaczników.

lower-alpha

Użycie małych liter alfabetu jako znaczników.

upper-alpha

Użycie dużych liter alfabetu jako znaczników.

Listing 24.8. Zastosowanie właściwości list-style-type

Przykład



Lubię jabłka i pomarańcze. Lubię też:

banany

mango

wiśnie

śliwki

brzoskwinie

winogrona

Tę właściwość możesz nadawać zarówno całym listom, jak i pojedynczym jej elementom. W tym przykładzie zrobiłem i jedno, i drugie. Rezultat, który widać na rysunku 24.9, nie jest jednak szczególnie sensowny.

Użycie obrazu jako znacznika listy Właściwością list-style-image możesz wskazać obraz do wykorzystania jako znacznik. W listingu 24.9 widać przykład jej zastosowania.

524

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Rysunek 24.9. Określenie typu znaczników list Listing 24.9. Użycie obrazu jako znacznika listy

Przykład



Lubię jabłka i pomarańcze. Lubię też:

• banany
• mango
• wiśnie
• śliwki
• brzoskwinie
• winogrona

Rezultat zastosowania tej właściwości widać na rysunku 24.10.

Określenie położenia znacznika Położenie znacznika w odniesieniu do pola treści elementu li można określić właściwością list-style-position. Właściwość ta obsługuje wartości inside (która sprawia, że znacznik wyświetlany jest w polu treści) i outside (która sprawia, że znacznik wyświetlany jest poza polem treści). W listingu 24.10 widnieje przykład zastosowania właściwości list-style-position.

525

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Rysunek 24.10. Użycie obrazu jako znacznika listy Listing 24.10. Określenie położenia znacznika

Przykład



Lubię jabłka i pomarańcze. Lubię też:

Oto elementy o wartości inside:
• banany
• mango
• wiśnie
Oto elementy o wartości outside:
• śliwki
• brzoskwinie
• winogrona

Elementom li przypisałem dwie klasy o różnych wartościach właściwości list-style-position. Rezultat widać na rysunku 24.11.

526

ROZDZIAŁ 24. „ INNE WŁAŚCIWOŚCI I FUNKCJE CSS

Rysunek 24.11. Określenie położenia znacznika Na tym rysunku nadałem właściwość background-color wszystkim elementom li, żeby efekt zastosowania obydwu wartości był widoczny.

Określenie stylu kursora Właściwość cursor służy do określenia zmiany wyglądu kursora. Jej opis znajduje się w tabeli 24.6. Tabela 26.4. Właściwość cursor Właściwość

Opis

Wartości

cursor

Określa styl kursora.

auto, crosshair, default, help, move, pointer, progress, text, wait, n-resize, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize i sw-resize

Wartości właściwości cursor określają, jak ma wyglądać kursor po przesunięciu go na obstylowany element. Przykład zastosowania tej właściwości widać w listingu 24.11. Listing 24.11. Zastosowanie właściwości cursor

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Rezultat widać na rysunku 24.12. Powiększyłem kursor, żeby pokazać, jak zmienia się w kursor oczekiwania Windows 7, gdy znajduje się nad elementem span.

Rysunek 24.12. Określenie stylu kursora

Podsumowanie W tym rozdziale opisałem właściwości CSS, które nigdzie indziej nie pasowały. Nie znaczy to bynajmniej, że nie są ważne, ale po prostu nie przystawały do tematyki poprzednich rozdziałów. Opisane w tym rozdziale właściwości służą do określania koloru i krycia elementów oraz nadawania stylów listom i tabelom — same w sobie są to istotne funkcje HTML.

528

CZĘŚĆ IV

Praca z DOM

Obiektowy model dokumentu (DOM — ang. document object model) umożliwia wykorzystywanie JavaScript do eksplorowania zawartości dokumentu HTML i manipulowania nią. Ten zestaw funkcji jest nieodzowny przy tworzeniu bogatych treści. W kolejnych rozdziałach pokażę Ci, jak uzyskać dostęp do DOM — jak znajdować i modyfikować reprezentujące elementy dokumentu obiekty JavaScript oraz jak przy pomocy zdarzeń reagować na czynności użytkownika.

ROZDZIAŁ 25

Wprowadzenie do DOM

W tej części książki zapoznasz się z obiektowym modelem dokumentu — DOM. Zaawansowane efekty można wprawdzie uzyskać przy użyciu przedstawionych już elementów HTML i właściwości CSS, ale jeżeli zależy Ci na całkowitej kontroli nad kodem HTML, wykorzystanie JavaScript jest absolutnie konieczne. DOM jest połączeniem między JavaScript a zawartością dokumentu HTML. Przy użyciu DOM możliwe jest dodawanie, usuwanie i modyfikowanie elementów. Na czynności użytkowników można reagować przy pomocy zdarzeń; DOM pozwala również na uzyskanie pełnej kontroli nad CSS. Od tej pory będziemy się zajmować programistycznym aspektem HTML5. Wcześniej tworzyliśmy treści przy użyciu deklaracji elementów CSS, ale już najwyższy czas wypłynąć na szerokie wody i skoncentrować się na JavaScript. Jeśli musisz odświeżyć swoją wiedzę, w rozdziale 5. znajdziesz podstawy JavaScript.

Obiektowy model dokumentu DOM jest zbiorem obiektów reprezentujących elementy dokumentu HTML. Jak sama nazwa wskazuje, DOM jest modelem zbudowanym z obiektów, które składają się na wyobrażenie dokumentu. DOM jest fundamentalnym narzędziem webdeweloperskim, które pozwala na połączenie struktury i treści dokumentu HTML z JavaScript. W listingu 25.1 znajdziesz przykład prostego dokumentu HTML. Listing 25.1. Prosty dokument HTML

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Wygląd przykładowego dokumentu HTML w przeglądarce widać na rysunku 25.1.

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Rysunek 25.1. Podstawowy dokument HTML w przeglądarce Przed wyświetleniem dokumentu HTML przeglądarka parsuje kod HTML i tworzy model. Model odwzorowuje hierarchię elementów HTML (rysunek 25.2), w której każdy element reprezentowany jest przez obiekt JavaScript.

Rysunek 25.2. Hierarchia elementów dokumentu HTML Jak dowiesz się z kolejnych rozdziałów, DOM można używać do pozyskiwania informacji o dokumencie i wprowadzania w nim zmian. Leży on zatem u podstaw nowoczesnych aplikacji internetowych. Każdemu obiektowi w modelu przypisane są właściwości i metody. Kiedy używasz ich do wprowadzania zmian w stanie obiektu, przeglądarka odzwierciedla owe zmiany w odpowiednim elemencie HTML i aktualizuje dokument. Wszystkie obiekty DOM, które reprezentują elementy, obsługują ten sam zbiór podstawowych funkcji. Są to obiekty HTMLElement. Z bazowych funkcji HTMLElement korzystać można zawsze, niezależnie od tego, jaki rodzaj elementu ów obiekt reprezentuje. Ponadto, niektóre obiekty obsługują dodatkowe funkcje, pozwalające na wykonywanie operacji właściwych dla wyjątkowych charakterystyk danych elementów HTML. Te dodatkowe funkcje opiszę w rozdziale 31. Trzeba tu koniecznie zwrócić uwagę, że każdy znajdujący się w modelu dokumentu obiekt, który reprezentuje jakiś element, zawsze obsługuje funkcje HTMLElement, a niekiedy także dodatkowe funkcje. Nie wszystkie dostępne obiekty reprezentują elementy HTML. Jak się wkrótce przekonasz, istnieją obiekty reprezentujące zbiory elementów i informacje o samym DOM. Istnieje też obiekt Document, który jest punktem wyjścia do pracy z DOM i tematem rozdziału 26. „ Uwaga Pomijam tutaj pewne szczegóły. Jeżeli jesteś zaznajomiony z założeniami programowania obiektowego, to być może pomoże Ci informacja, że HTMLElement jest interfejsem obsługiwanym przez obiekty zawarte w DOM. Obiekty reprezentujące bardziej szczegółowe elementy są interfejsami wywodzącymi się z HTMLElement — oznacza to, że obiekt można traktować albo jako implementację HTMLElement, albo jego bardziej szczegółowy podtyp. Nie martw się, jeśli nie masz pojęcia o założeniach programowania obiektowego. Standardowe programowanie na potrzeby Internetu nie wymaga ich znajomości. Nie będę już do nich wracał i w celu zachowania prostoty będę stale używał pojęcia obiekt.

532

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Poziomy DOM i zgodność Zaczynając swoją pracę z DOM, z pewnością trafisz na artykuły i przewodniki, w których pojawią się wzmianki o poziomach DOM (np. o tym, że dana funkcja obsługiwana jest przez poziom 3 DOM). Poziomy DOM to w istocie kolejne zestandaryzowane wersje tego modelu, wobec czego na ogół nie ma sensu przejmować się ich numeracją. Proces standaryzacji DOM przyniósł umiarkowanie dobre efekty. Istnieją wprawdzie standardy i dokumenty opisujące każdy poziom DOM, ale nie są one w pełni wdrożone, a przeglądarki obsługują wybrane funkcje, ignorując pozostałe. Co gorsza, istnieje pewna niespójność pod względem tego, jakie funkcje są obsługiwane. Problem ten wynika częściowo z tego, że specyfikację DOM opracowywano niezależnie od standardu HTML. W HTML5 podjęto próbę ustosunkowania się do tej kwestii, poprzez uwzględnienie podstawowego zbioru funkcji DOM, które powinny być obsługiwane. Rozwiązanie to jednak dopiero ma wejść w życie, wobec czego trzeba się liczyć z pewnym nieuporządkowaniem. Ze zróżnicowaniem obsługi funkcji DOM można sobie radzić na różne sposoby. Po pierwsze, można skorzystać z biblioteki JavaScript w rodzaju jQuery, która niweluje różnice pomiędzy implementacjami funkcji w poszczególnych przeglądarkach. Biblioteka pozwala wprawdzie na zapewnienie spójności, lecz ceną tego jest ograniczenie funkcjonalności wyłącznie do funkcji obsługiwanych przez ową bibliotekę. Jeśli chcesz skorzystać z funkcji nieobsługiwanych przez bibliotekę, to musisz używać DOM bezpośrednio i mierzyć się z podstawowymi problemami. Nie twierdzę bynajmniej, że jQuery i inne biblioteki są bezwartościowe — przeciwnie, bywają bardzo przydatne i warto się im przyjrzeć. Drugie podejście jest z gruntu zachowawcze: należy używać tylko tych funkcji, o których wiadomo, że są powszechnie obsługiwane. Jest to na ogół najbardziej rozsądna metoda, choć wiąże się z koniecznością uważnego i dogłębnego testowania. Co więcej, trzeba pamiętać o testowaniu nowych wersji przeglądarek, by mieć pewność, że obsługa funkcji nie uległa zmianie bądź nie zrezygnowano z niej.

Testowanie obsługi funkcji DOM Trzecie podejście przewiduje sprawdzenie obsługi właściwości lub metody przez obiekt DOM powiązany z daną funkcją. W listingu 25.2. widnieje prosty przykład. Listing 25.2. Sprawdzanie obsługi funkcji

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

„ Wskazówka Nie przejmuj się szczegółami skryptu znajdującego się w listingu 25.2. Wykorzystane w nim obiekty i funkcje omówię w kolejnych rozdziałach.

Zastosowany w tym przykładzie skrypt używa klauzuli if do określenia, czy obiekt document obsługuje metodę querySelectorAll. Jeśli wartość klauzuli zostaje obliczona jako true, to znaczy, że przeglądarka obsługuje daną funkcję i można z niej korzystać. Jeżeli natomiast okaże się, że jej wartość to false, to pożądane rezultaty należy uzyskać innymi środkami. Powyższa porada stosunkowo często pojawia się przy pracy z DOM, lecz zazwyczaj udziela się jej bez namysłu i wskazania mankamentów, które bywają znaczące. Pierwszym mankamentem jest to, że rezultat zastosowania danej funkcji nie zawsze można uzyskać innymi metodami. Przykład z listingu 25.2 działa poprawnie, ponieważ sprawdzam w nim obsługę pomocniczej funkcji opartej na innych funkcjach — nie zawsze jednak mamy z taką sytuacją do czynienia. Drugim mankamentem jest to, że sprawdzam tu jedynie obecność funkcji, a nie jakość i spójność jej implementacji. Obsługa wielu funkcji, zwłaszcza nowych, staje się stabilna i spójna dopiero po wydaniu kolejnych wersji przeglądarek. Nie jest to tak poważny problem jak kiedyś, ale zróżnicowanie obsługi funkcji w różnych przeglądarkach może doprowadzić do uzyskania nieoczekiwanych rezultatów. Trzecim mankamentem jest konieczność sprawdzenia każdej funkcji, na której zamierzasz polegać. Wymaga to niezwykłej wytrwałości i tworzenia kodu pełnego niezliczonych testów. Nie twierdzę bynajmniej, że jest to bezużyteczna technika, tylko że ma ona swoje minusy i nie należy nią zastępować rzeczywistych testów.

Spis funkcji DOM W poniższych punktach znajduje się spis obiektów, metod, właściwości i zdarzeń, które omówię w dalszych rozdziałach.

Właściwości Document W rozdziale 26. znajduje się opis obiektu Document, który reprezentuje bieżący dokument i jest punktem wyjścia do pracy z DOM. W tabeli 25.1 znajduje się opis właściwości obsługiwanych przez ten obiekt. Tabela 25.1. Obiekt Document Nazwa

Opis

Zwracana wartość

activeElement

Zwraca obiekt reprezentujący sfokusowany w danej chwili element dokumentu.

HTMLElement

body

Zwraca obiekt reprezentujący element body dokumentu.

HTMLElement

characterSet

Zwraca informację o kodowaniu znaków w dokumencie. Jest to właściwość przeznaczona tylko do odczytu.

tekst

charset

Zwraca lub definiuje informację o kodowaniu znaków w dokumencie.

tekst

534

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Tabela 25.1. Obiekt Document — ciąg dalszy Nazwa

Opis

Zwracana wartość

childNodes

Zwraca zbiór elementów-dzieci.

HTMLElement[]

compatMode

Zwraca informację o trybie kompatybilności dokumentu.

tekst

cookie

Zwraca lub definiuje ciasteczka bieżącego dokumentu.

tekst

defaultCharset

Zwraca domyślne kodowanie znaków używane przez przeglądarkę.

tekst

defaultView

Zwraca obiekt Window bieżącego dokumentu. Więcej na temat obiektu Window przeczytasz w rozdziale 26.

Window

dir

Zwraca lub definiuje kierunek zapisu tekstu w dokumencie.

tekst

domain

Zwraca lub definiuje domenę bieżącego dokumentu.

tekst

embeds plugins

Zwraca obiekty reprezentujące wszystkie elementy embed w dokumencie.

HTMLCollection

firstChild

Zwraca pierwsze dziecko elementu.

HTMLElement

forms

Zwraca obiekty reprezentujące wszystkie elementy form w dokumencie.

HTMLCollection

getElementById()

Zwraca element o podanej wartości id.

HTMLElement

getElementsByClassName()

Zwraca elementy o podanej wartości class.

HTMLElement[]

getElementsByName()

Zwraca elementy o podanej wartości name.

HTMLElement[]

getElementsByTagName()

Zwraca elementy podanego typu.

HTMLElement[]

hasChildNodes()

Zwraca wartość true, jeśli bieżący element ma dzieci.

wartość_boolowska

head

Zwraca obiekt reprezentujący element head.

HTMLHeadElement

images

Zwraca obiekty reprezentujące wszystkie elementy img.

HTMLCollection

implementation

Podaje informacje o dostępnych funkcjach DOM.

DOMImplementation

lastChild

Zwraca ostatni element-dziecko.

HTMLElement

lastModified

Zwraca ostatni czas modyfikacji dokumentu.

tekst

links

Zwraca obiekty reprezentujące wszystkie elementy a i area dokumentu, którym zdefiniowano atrybut href.

HTMLCollection

location

Podaje informację o adresie URL bieżącego dokumentu.

Location

nextSibling

Zwraca brata znajdującego się po bieżącym elemencie.

HTMLElement

parentNode

Zwraca rodzica elementu.

HTMLElement

previousSibling

Zwraca brata znajdującego się przed bieżącym elementem.

HTMLElement

535

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Tabela 25.1. Obiekt Document — ciąg dalszy Nazwa

Opis

Zwracana wartość

querySelector()

Zwraca pierwszy element, do którego odnosi się podany selektor CSS.

HTMLElement

querySelectorAll()

Zwraca wszystkie elementy, do których odnosi się podany selektor CSS.

HTMLElement[]

readyState

Zwraca informacje o stanie bieżącego dokumentu.

tekst

referrer

Zwraca adres URL dokumentu, który przekierował przeglądarkę do bieżącego dokumentu; jest to wartość odpowiedniego nagłówka HTTP.

tekst

scripts

Zwraca obiekty reprezentujące wszystkie elementy script.

HTMLCollection

title

Zwraca lub definiuje tytuł bieżącego dokumentu.

tekst

W rozdziale 26. znajduje się również omówienie obiektu Location, który pokrótce opisuję w tabeli 25.2. Tabela 25.2. Obiekt Location Nazwa

Opis

Zwracana wartość

assign()

Przechodzi do określonego adresu URL.

void

hash

Zwraca lub definiuje komponent skrótu w adresie URL dokumentu.

tekst

host

Zwraca lub definiuje komponent nazwy hosta i portu adresu URL dokumentu.

tekst

hostname

Zwraca lub definiuje komponent nazwy hosta adresu URL dokumentu.

tekst

href

Zwraca lub definiuje lokalizację bieżącego dokumentu.

tekst

pathname

Zwraca lub definiuje komponent ścieżki adresu URL dokumentu.

tekst

port

Zwraca lub definiuje komponent portu w adresie URL dokumentu.

tekst

protocol

Zwraca lub definiuje komponent protokołu w adresie URL dokumentu.

tekst

reload()

Odświeża bieżący dokument.

void

replace()

Przechodzi z bieżącego dokumentu do tego, który wskazano adresem URL.

void

resolveURL()

Zamienia podany względny URL na absolutny.

tekst

search

Zwraca lub definiuje komponent zapytania adresu URL dokumentu.

tekst

536

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Właściwości Window W rozdziale 27. znajduje się omówienie obiektu Window, który obsługuje szeroki zakres funkcji. W tabeli 25.3 znajduje się opis właściwości obsługiwanych przez ten obiekt. Tabela 25.3. Obiekt Window Nazwa

Opis

Zwracana wartość

alert()

Wyświetla okno i oczekuje na jego wyłączenie.

void

blur()

Usuwa fokus z okna.

void

clearInterval()

Anuluje licznik odstępu.

void

clearTimeout()

Anuluje licznik opóźnienia.

void

close()

Zamyka okno.

void

confirm()

Wyświetla okno z zapytaniem oraz odpowiedziami OK i Anuluj.

wartość_boolowska

defaultView

Zwraca Window bieżącego dokumentu.

Window

document

Zwraca obiekt Document powiązany z danym oknem.

Document

focus()

Fokusuje okno.

void

frames

Zwraca tablicę obiektów Window odnoszących się do elementów iframe osadzonych w dokumencie.

Window[]

history

Daje dostęp do historii przeglądarki.

History

innerHeight

Zwraca wysokość pola treści okna.

liczba

innerWidth

Zwraca szerokość pola treści okna.

liczba

length

Zwraca liczbę elementów iframe osadzonych w dokumencie.

liczba

location

Podaje informacje o lokalizacji bieżącego dokumentu.

Location

opener

Zwraca okno Window, w którym otworzono bieżący kontekst przeglądania.

Window

outerHeight

Zwraca wysokość okna, uwzględniając obramowania, paski menu itp.

liczba

outerWidth

Zwraca szerokość okna, uwzględniając obramowania, paski menu itp.

liczba

pageXOffset

Zwraca liczbę pikseli, o którą przewinięto okno poziomo od lewego górnego rogu.

liczba

pageYOffset

Zwraca liczbę pikseli, o którą przewinięto okno pionowo od lewego górnego rogu.

liczba

parent

Zwraca rodzica bieżącego okna Window.

Window

postMessage(, )

Definiuje komunikat, który ma być przesłany do innego dokumentu.

void

print()

Pyta użytkownika, czy wydrukować stronę.

void

537

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Tabela 25.3. Obiekt Window — ciąg dalszy Nazwa

Opis

Zwracana wartość

prompt(, )

Wyświetla okno, w którym użytkownik ma podać wartość.

tekst

screen

Zwraca obiekt Screen, który opisuje ekran.

Screen

screenLeft screenX

Zwraca liczbę pikseli od lewej krawędzi okna do lewej krawędzi ekranu.

liczba

screenTop screenY

Zwraca liczbę pikseli od górnej krawędzi okna do górnej krawędzi ekranu.

liczba

scrollBy(, )

Przewija dokument względem jego bieżącego położenia.

void

scrollTo(, )

Przewija do określonego miejsca.

void

self

Zwraca okno Window bieżącego dokumentu.

setInterval(, )

Uruchamia licznik, który przywołuje podaną funkcję w milisekundowych odstępach określonych wartością czas.

odstęp_czasowy

setTimeout(, )

Uruchamia licznik, który przywołuje podaną funkcję po opóźnieniu określonym wartością czas.

odstęp_czasowy

showModalDialog()

Wyświetla wyskakujące okno, w którym pokazany jest podany adres URL.

void

stop()

Wstrzymuje wczytywanie dokumentu.

void

top

Zwraca okno Window znajdujące się najwyżej w hierarchii okien.

Window

W rozdziale 27. znajduje się omówienie obiektu History, którego właściwości opisuję w tabeli 25.4. Tabela 25.4. Obiekt History Nazwa

Opis

Zwracana wartość

back()

Wczytuje poprzedni dokument w historii.

void

forward()

Wczytuje następny dokument w historii.

void

go()

Kieruje przeglądarkę do pozycji historii określonej względem bieżącego dokumentu. Wartości dodatnie przenoszą naprzód, ujemne wstecz.

void

length

Zwraca liczbę pozycji w historii.

liczba

pushState(, , )

Dodaje pozycję do historii przeglądarki.

void

replaceState(, , )

Zastępuje bieżącą pozycję w historii przeglądarki.

void

state

Zwraca dane o stanie powiązane z bieżącym dokumentem w historii przeglądarki.

obiekt

W rozdziale 27. znajduje się omówienie obiektu Screen, którego właściwości opisuję w tabeli 25.5.

538

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Tabela 25.5. Obiekt Screen Nazwa

Opis

Zwracana wartość

availHeight

Zwraca wysokość obszaru ekranu, na którym można wyświetlać okna (z wyłączeniem pasków narzędzi itp.).

liczba

availWidth

Zwraca szerokość obszaru ekranu, na którym można wyświetlać okna (z wyłączeniem pasków narzędzi itp.).

liczba

colorDepth

Zwraca głębię koloru ekranu.

liczba

height

Zwraca wysokość ekranu.

liczba

width

Zwraca szerokość ekranu.

liczba

Właściwości HTMLElement W rozdziale 28. znajduje się omówienie obiektu HTMLElement, który reprezentuje elementy HTML w dokumencie. W tabeli 25.6 znajduje się opis właściwości tego obiektu. Tabela 25.6. Obiekt HTMLElement Nazwa

Opis

Zwracana wartość

checked

Zwraca lub definiuje obecność atrybutu checked.

wartość_boolowska

classList

Zwraca lub definiuje listę klas, do których element należy.

DOMTokenList

className

Zwraca lub definiuje listę klas, do których element należy.

tekst

dir

Zwraca lub definiuje wartość atrybutu dir.

tekst

disabled

Zwraca lub definiuje wartość atrybutu dir.

wartość_boolowska

hidden

Zwraca informację o obecności atrybutu hidden lub wprowadza go.

wartość_boolowska

id

Zwraca lub definiuje wartość atrybutu id.

tekst

lang

Zwraca lub definiuje wartość atrybutu lang.

tekst

spellcheck

wartość_boolowska Zwraca informację o obecności atrybutu spellcheck lub wprowadza go.

tabIndex

Zwraca lub definiuje wartość atrybutu tabindex.

liczba

tagName

Zwraca nazwę znacznika, wskazując tym samym typ elementu.

tekst

title

Zwraca lub definiuje wartość atrybutu title.

tekst

539

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Tabela 25.6. Obiekt HTMLElement — ciąg dalszy Nazwa

Opis

Zwracana wartość

add()

Nadaje elementowi określoną klasę.

void

contains()

Zwraca wartość true, jeżeli element należy do podanej klasy.

wartość_boolowska

length

Zwraca liczbę klas, do których element należy.

liczba

remove()

Usuwa element z określonej klasy.

void

toggle()

Dodaje klasę, jeśli nie jest zdefiniowana, a usuwa ją, jeśli jest.

wartość_boolowska

attributes

Zwraca nadane elementowi atrybuty.

Attr[]

dataset

Zwraca atrybuty data-*.

tekst[]

getAttribute()

Zwraca wartość podanego atrybutu.

tekst

hasAttribute()

Zwraca wartość true, jeśli elementowi przypisany jest podany atrybut.

wartość_boolowska

removeAttribute()

Usuwa podany atrybut z elementu.

void

setAttribute(, )

Nadaje elementowi atrybut o podanej nazwie i wartości.

void

appendChild(HTMLElement)

Dodaje do podanego elementu dziecko określonego typu.

HTMLElement

cloneNode(boolean)

Kopiuje element.

HTMLElement

compareDocumentPosition(HTMLElement)

Określa względne położenie elementu.

liczba

innerHTML

Zwraca lub definiuje treść elementu.

tekst

insertAdjacentHTML(, )

Zamieszcza kod HTML w miejscu określonym względem elementu.

void

insertBefore(, )

Zamieszcza podany element przed określonym elementem-dzieckiem.

HTMLElement

isEqualNode()

Określa, czy podany element jest równy bieżącemu elementowi.

wartość_boolowska

isSameNode(HTMLElement)

Określa, czy podany element jest tożsamy z bieżącym elementem.

wartość_boolowska

outerHTML

Zwraca lub definiuje kod HTML i zawartość elementu.

tekst

removeChild(HTMLElement)

Usuwa określone dziecko bieżącego elementu.

HTMLElement

replaceChild(HTMLElement, HTMLElement)

Zastępuje dziecko bieżącego elementu.

HTMLElement

createElement()

Tworzy nowy obiekt HTMLElement określonego typu.

HTMLElement

createTextNode()

Tworzy nowy obiekt Text o podanej treści.

Text

540

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

W rozdziale 28. znajduje się omówienie obiektu Text, który reprezentuje treść tekstową dokumentu. W tabeli 25.7 opisuję właściwości obiektu Text. Tabela 25.7. Obiekt Text Nazwa

Opis

Zwracana wartość

appendData()

Dodaje określony ciąg znaków na końcu bloku tekstowego.

void

data

Zwraca lub definiuje tekst.

tekst

deleteData(, )

Usuwa tekst z ciągu znaków. Pierwsza liczba określa pozycję, a druga liczbę znaków do usunięcia.

void

insertData(, )

Zamieszcza podany ciąg znaków na określonej pozycji.

void

length

Zwraca liczbę znaków.

liczba

replaceData(, , )

Zamienia wskazany zakres tekstu na określony ciąg znaków.

void

replaceWholeText()

Zamienia cały tekst.

Text

splitText()

Dzieli element Text na dwa osobne elementy we wskazanym miejscu. W punkcie „Zamieszczenie elementu w bloku tekstu” w rozdziale 28. znajdziesz przykład zastosowania tej metody.

Text

substringData(, )

Zwraca ciąg znaków z tekstu.

tekst

wholeText

Zwraca tekst.

tekst

Właściwości CSS w DOM W rozdziale 29. znajduje się omówienie wykorzystania DOM do pracy ze stylami CSS dokumentu. Spis właściwości obiektu CSSStyleDeclaration i stylów, do których się odnoszą (oraz rozdziałów, w których są opisane), znajdziesz w tabeli 25.8. Tabela 25.8. Właściwości obiektu CSSStyleDeclaration Właściwość

Odnosi się do

Rozdział

background

background

19

backgroundAttachment

background-attachment

19

backgroundColor

background-color

19

backgroundImage

background-image

19

backgroundPosition

background-position

19

backgroundRepeat

background-repeat

19

border

border

19

borderBottom

border-bottom

19

borderBottomColor

border-bottom-color

19

borderBottomStyle

border-bottom-style

19

541

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Tabela 25.8. Właściwości obiektu CSSStyleDeclaration — ciąg dalszy Właściwość

Odnosi się do

Rozdział

borderBottomWidth

border-bottom-width

19

borderCollapse

border-collapse

24

borderColor

border-color

19

borderLeft

border-left

19

borderLeftColor

border-left-color

19

borderLeftStyle

border-left-style

19

borderLeftWidth

border-left-width

19

borderRight

border-right

19

borderRightColor

border-right-color

19

borderRightStyle

border-right-style

19

borderRightWidth

border-right-width

19

borderSpacing

border-spacing

24

borderStyle

border-style

19

borderTop

border-top

19

borderTopColor

border-top-color

19

borderTopStyle

border-top-style

19

borderTopWidth

border-top-width

19

borderWidth

border-width

19

captionSide

caption-side

24

clear

clear

20

color

color

24

cssFloat

float

20

cursor

cursor

24

direction

direction

22

display

display

20

emptyCells

empty-cells

24

font

font

22

fontFamily

font-family

22

fontSize

font-size

22

fontStyle

font-style

22

fontVariant

font-variant

22

fontWeight

font-weight

22

height

height

20

letterSpacing

letter-spacing

22

lineHeight

line-height

22

542

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Tabela 25.8. Właściwości obiektu CSSStyleDeclaration — ciąg dalszy Właściwość

Odnosi się do

Rozdział

listStyle

list-style

24

listStyleImage

list-style-image

24

listStylePosition

list-style-position

24

listStyleType

list-style-type

24

margin

margin

20

marginBottom

margin-bottom

20

marginLeft

margin-left

20

marginRight

margin-right

20

marginTop

margin-top

20

maxHeight

max-height

20

maxWidth

max-width

20

minHeight

min-height

20

minWidth

min-width

20

outline

outline

19

outlineColor

outline-color

19

outlineStyle

outline-style

19

outlineWidth

outline-width

19

overflow

overflow

20

padding

padding

20

paddingBottom

padding-bottom

20

paddingLeft

padding-left

20

paddingRight

padding-right

20

paddingTop

padding-top

20

tableLayout

table-layout

24

textAlign

text-align

22

textDecoration

text-decoration

22

textIndent

text-indent

22

textShadow

text-shadow

22

textTransform

text-transform

22

visibility

visibility

20

whiteSpace

whitespace

22

width

width

20

wordSpacing

word-spacing

22

zIndex

z-index

21

543

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Zdarzenia DOM W rozdziale 30. znajduje się omówienie systemu zdarzeń DOM. Zdarzenia są różne, a ich opis znajdziesz w tabeli 25.9. Tabela 25.9. Zdarzenia DOM Nazwa

Opis

blur

Wyzwalane, kiedy element przestaje być sfokusowany.

click

Wyzwalane po naciśnięciu i puszczeniu przycisku myszy.

dblclick

Wyzwalane po dwukrotnym naciśnięciu i puszczeniu przycisku myszy.

focus

Wyzwalane, kiedy element staje się sfokusowany.

focusin

Wyzwalane, kiedy element ma być sfokusowany.

focusout

Wyzwalane, kiedy element ma przestać być sfokusowany.

keydown

Wyzwalane, kiedy użytkownik naciska klawisz.

keypress

Wyzwalane, kiedy użytkownik naciska i puszcza klawisz.

keyup

Wyzwalane, kiedy użytkownik puszcza klawisz.

mousedown

Wyzwalane przy naciśnięciu przycisku myszy.

mouseenter

Wyzwalane, kiedy kursor wchodzi na obszar elementu lub jego potomków.

mouseleave

Wyzwalane, kiedy kursor wychodzi z obszaru elementu lub jego potomków.

mousemove

Wyzwalane, kiedy kursor porusza się po elemencie.

mouseout

Tak samo, jak w przypadku mouseleave, z tym że zdarzenie jest wyzwalane, kiedy kursor wciąż znajduje się na elemencie-potomku.

mouseover

Tak samo, jak w przypadku mouseenter, z tym że zdarzenie jest wyzwalane, kiedy kursor wciąż znajduje się na elemencie-potomku.

mouseup

Wyzwalane po puszczeniu przycisku myszy.

onabort

Wyzwalane, kiedy następuje przerwa we wczytywaniu dokumentu lub zasobów.

onafterprint

Wyzwalane, kiedy przywołana jest metoda Window.print(), zanim użytkownikowi pokazane zostają opcje drukowania.

onbeforeprint

Wyzwalane po wydrukowaniu dokumentu.

onerror

Wyzwalane, kiedy następuje błąd we wczytywaniu dokumentu lub zasobów.

onhashchange

Wyzwalane, kiedy fragment hash ulega zmianie.

onload

Wyzwalane po zakończeniu wczytywania dokumentu lub zasobów.

onpopstate

Wyzwalane, by utworzyć obiekt stanu w historii przeglądarki. W rozdziale 26. znajduje się przykład zastosowania tego zdarzenia.

onresize

Wyzwalane przy zmianie wielkości okna.

onunload

Wyzwalane, kiedy przeglądarka opuszcza dokument.

readystatechange

Wyzwalane, kiedy właściwość readyState zmienia wartość.

reset

Wyzwalane przy wyzerowaniu formularza.

submit

Wyzwalane przy wysłaniu formularza.

544

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

Podsumowanie W tym rozdziale ułożyłem podstawy pod omówienie DOM oraz przedstawiłem jego rolę w odniesieniu do dokumentów HTML. Objaśniłem również, że poziomy specyfikacji DOM mają niewiele wspólnego z funkcjami obsługiwanymi przez popularne przeglądarki, a także przedstawiłem różne podejścia, które pozwalają się upewnić, czy funkcje DOM, na których polegasz, dostępne są w przeglądarkach, z myślą o których programujesz. Przypominam jednak, że żadne z tych podejść nie zastąpi uważnego i dogłębnego testowania. Przedstawiłem tu również zwięzłe spisy obiektów, właściwości i zdarzeń, które opiszę w kolejnych rozdziałach.

545

ROZDZIAŁ 25. „ WPROWADZENIE DO DOM

546

ROZDZIAŁ 26

Obiekt Document

W tym rozdziale przedstawię Ci jeden z kluczowych komponentów DOM: obiekt Document. Obiekt Document jest punktem wyjścia do pracy z funkcjami DOM, pozwala na uzyskiwanie informacji o bieżącym dokumencie, a także oferuje zbiór funkcji służących do eksplorowania, nawigowania, przeszukiwania oraz manipulowania strukturą i treścią. W tabeli 26.1 znajduje się streszczenie rozdziału. Tabela 26.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Wykonywanie podstawowych czynności w DOM.

Użyj podstawowych funkcji DOM API.

26.1

Pobranie informacji o dokumencie.

Użyj właściwości metadanych document.

26.2

Pobranie informacji o lokalizacji dokumentu.

Użyj właściwości document.location.

26.3

Przejście do nowego dokumentu.

Zmień wartość właściwości obiektu Location.

26.4, 26.5

Odczytywanie i zapisywanie ciasteczek.

Użyj właściwości document.cookie.

26.6

Określenie postępów w przetwarzaniu dokumentu.

Użyj właściwości document.readystate.

26.7

Pobranie szczegółów co do funkcji DOM obsługiwanych przez przeglądarkę.

Użyj właściwości document.implementation.

26.8

Pozyskanie obiektów reprezentujących określone typy elementów.

Użyj właściwości document, takich jak images, links i scripts.

26.9, 26.10

Wyszukanie elementów w dokumencie.

Użyj metod document.getElement*.

26.11

Wyszukanie elementów w dokumencie przy użyciu selektora CSS.

Użyj metody document.querySelector lub document.querySelectorAll.

26.12

Łańcuchowe przeszukanie elementów.

Użyj metod przeszukiwania na rezultatach wcześniejszego wyszukiwania.

26.13

Nawigowanie po drzewie DOM.

Użyj metod dokumentu lub elementu oraz właściwości takich jak hasChildNodes(), firstChild i lastChild.

26.14

Do obiektu Document uzyskuje się dostęp przy użyciu globalnej zmiennej document; jest to jeden z kluczowych obiektów tworzonych przez przeglądarkę. Obiekt Document dostarcza informacje o całym

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

dokumencie, a także daje dostęp do poszczególnych obiektów w modelu. Pracę z DOM najlepiej rozpocząć od przykładu. W listingu 26.1 widnieje przykładowy dokument z poprzedniego rozdziału, do którego dodałem skrypt demonstrujący podstawowe funkcje DOM w działaniu. Listing 26.1. Zastosowanie obiektu Document

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Powyższy skrypt jest wprawdzie krótki i nieskomplikowany, lecz zgrabnie demonstruje wiele z różnych zastosowań DOM. Poniżej rozłożę skrypt na części pierwsze i wytłumaczę, o co chodzi. Jedną z najbardziej podstawowych rzeczy, do których używa się obiektu Document, jest pozyskiwanie informacji o dokumencie HTML, nad którym pracujesz. Pierwszy wiersz skryptu służy właśnie do tego. document.writeln("URL: " + document.URL);

W tym przypadku odczytałem wartość właściwości document.URL, otrzymując adres URL bieżącego dokumentu. Jest to adres URL, którego przeglądarka użyła do wczytania dokumentu z podanym skryptem. Pozyskiwanie różnych rodzajów informacji z obiektu Document pokażę Ci w punkcie „Pobieranie informacji z dokumentu” w dalszej części rozdziału. W skrypcie zastosowałem również metodę writeln. document.writeln("URL: " + document.URL);

Metoda ta dodaje treść na końcu dokumentu HTML. W tym przypadku podałem znacznik otwierający elementu pre i wartość właściwości URL. Jest to bardzo prosty przykład modyfikacji DOM, czyli zmiany struktury dokumentu. Manipulowanie strukturą DOM opiszę bardziej szczegółowo w rozdziale 28. Następnie wybieram niektóre elementy z dokumentu. var elems = document.getElementsByTagName("p");

Elementy można wybierać na różne sposoby, co opiszę w podrozdziale „Znajdowanie obiektów elementów HTML” w dalszej części rozdziału. Metoda getElementsByTagName wybiera wszystkie elementy

548

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

danego typu, czyli w tym przypadku elementy p. Wszelkie zawarte w dokumencie elementy p zwracane są przez metodę i zamieszczane w zmiennej elems. Jak wspomniałem, wszystkie elementy reprezentowane są przez elementy HTMLElement, który obsługuje podstawową funkcję reprezentowania elementów HTML. Rezultatem zastosowania metody getElementsByTagName jest utworzenie zbioru obiektów HTMLElement. Skoro już uzyskałem zbiór obiektów HTMLElement, mogę użyć pętli for do wyliczenia zawartości tego zbioru i przetworzyć każdy element p, który przeglądarka znalazła w dokumencie: for (var i = 0; i < elems.length; i++) { document.writeln("ID elementu: " + elems[i].id); elems[i].style.border = "medium double black"; elems[i].style.padding = "4px"; }

Odczytałem właściwość id każdego HTMLElement w zbiorze, aby uzyskać wartość atrybutu id i wykorzystać metodę document.writeln, by dodać rezultat do treści elementu pre, który zdefiniowałem wcześniej. for (var i = 0; i < elems.length; i++) { document.writeln("ID elementu: " + elems[i].id); elems[i].style.border = "medium double black"; elems[i].style.padding = "4px"; }

Właściwość id jest jedną z wielu właściwości obsługiwanych przez HTMLElement. Pozostałe przedstawię Ci w rozdziale 28. Właściwości tych można używać do pozyskiwania informacji o elemencie lub modyfikowania ich (a tym samym modyfikowania reprezentowanych przez nie elementów HTML). W tym przypadku użyłem właściwości style do zmiany wartości właściwości CSS border i padding. for (var i = 0; i < elems.length; i++) { document.writeln("ID elementu: " + elems[i].id); elems[i].style.border = "medium double black"; elems[i].style.padding = "4px"; }

Rezultatem tych zmian jest utworzenie stylu inline dla każdego z elementów znalezionych przy użyciu getElementsByTagName; style inline omówiłem w rozdziale 4. Kiedy modyfikujesz obiekt, przeglądarka natychmiast zmienia odpowiadający mu element. W tym przypadku przypisuje elementom p dopełnienie

i obramowanie. W ostatnim wierszu skryptu znajduje się polecenie zapisania znacznika końcowego elementu pre, którego znacznik otwierający utworzyłem na początku skryptu. Zrobiłem to przy użyciu metody write, która działa tak samo jak writeln, lecz nie wstawia znaku zakończenia wiersza na końcu dodanego do dokumentu ciągu znaków. Nie jest to szczególnie istotna różnica, jeżeli nie zapisujesz preformatowanych treści lub treści, których białe znaki powinny być obsługiwane niestandardowo (o czym przeczytasz więcej w rozdziale 22.). Zastosowanie elementu pre oznacza, że dodane metodą writeln znaki sygnalizujące koniec wiersza wykorzystywane są przy określaniu struktury treści. Wygląd dokumentu potraktowanego takim skryptem widać na rysunku 26.1.

Metadane dokumentu Jak wytłumaczyłem w poprzednim podrozdziale, obiektu Document można użyć do pobrania informacji o dokumencie. W tabeli 26.2 znajduje się opis właściwości służących do pobierania metadanych dokumentu.

Pobieranie informacji z dokumentu Użyteczne informacje o dokumencie możesz pozyskać przy pomocy właściwości metadanych, tak jak widać to w listingu 26.2.

549

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Rysunek 26.1. Rezultat zastosowania skryptu w podstawowym dokumencie HTML Tabela 26.2. Właściwości metadanych dokumentu Właściwość

Opis

Zwracana wartość

characterSet

Zwraca kodowanie znaków w dokumencie. Jest to właściwość przeznaczona tylko do odczytu.

tekst

charset

Zwraca lub definiuje kodowanie znaków w dokumencie.

tekst

compatMode

Zwraca informację o trybie kompatybilności dokumentu.

tekst

cookie

Zwraca lub definiuje ciasteczka bieżącego dokumentu.

tekst

defaultCharset

Zwraca domyślne kodowanie znaków przeglądarki.

tekst

defaultView

Zwraca obiekt Window bieżącego dokumentu; w rozdziale 27. znajdziesz więcej informacji na temat tego obiektu.

Window

dir

Zwraca lub definiuje kierunek zapisu tekstu w bieżącym dokumencie.

tekst

domain

Zwraca lub definiuje domenę bieżącego dokumentu.

tekst

implementation

Podaje informacje o dostępnych funkcjach DOM.

DOMImplementation

lastModified

Zwraca ostatni czas modyfikacji dokumentu lub bieżący czas, jeśli czas modyfikacji nie jest dostępny.

tekst

location

Podaje informacje o adresie URL bieżącego dokumentu.

Location

readyState

Zwraca informacje o stanie bieżącego dokumentu. Jest to właściwość przeznaczona tylko do odczytu.

tekst

referrer

Zwraca adres URL dokumentu, który przekierował przeglądarkę do bieżącego dokumentu; jest to wartość odpowiedniego nagłówka HTTP.

tekst

title

Zwraca lub definiuje tytuł bieżącego dokumentu; o elemencie title przeczytasz więcej w rozdziale 7.

tekst

Listing 26.2. Zastosowanie obiektu Document do pozyskania metadanych

Przykład

550

ROZDZIAŁ 26. „ OBIEKT DOCUMENT





Właściwości te dają Ci wgląd w dokument, nad którym pracujesz. Wartości tych właściwości w przeglądarce widać na rysunku 26.2.

Rysunek 26.2. Podstawowe informacje o dokumencie

Tryb dziwactw Właściwość compatMode służy do sprawdzania, jak przeglądarka obsłużyła treść dokumentu. W sieci często można się spotkać z niestandardowym kodem HTML, a przeglądarki starają się wyświetlać także kod, który nie jest zgodny ze specyfikacją HTML. Niekiedy można się spotkać z kodem wykorzystującym funkcje, które pojawiły się jeszcze w czasach, kiedy przeglądarki konkurowały ze sobą pod względem swojej wyjątkowości, a nie zgodności ze standardami. Właściwość compatMode zwraca jedną z dwóch wartości, omówionych w tabeli 26.3. Tabela 26.3. Wartości właściwości compatMode Wartość

Opis

CSS1Compat

Dokument jest zgodny ze specyfikacją HTML — nie musi tu jednak chodzić o HTML5; ta wartość wyświetlana jest również przy prawidłowych dokumentach HTML 4.

BackCompat

W dokumencie występują niestandardowe funkcje, wobec czego włączony zostaje tryb dziwactw.

551

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Obiekt Location Właściwość document.location zwraca obiekt Location, który dostarcza szczegółowe informacje co do adresu dokumentu i pozwala na przechodzenie do innych dokumentów. W tabeli 26.4 znajduje się opis funkcji i właściwości obiektu Location. Tabela 26.4. Metody i właściwości obiektu Location Właściwość

Opis

Zwracana wartość

protocol

Zwraca lub definiuje komponent protokołu adresu URL dokumentu.

tekst

host

Zwraca lub definiuje komponent hosta adresu URL dokumentu.

tekst

href

Zwraca lub definiuje lokalizację bieżącego dokumentu.

tekst

hostname

Zwraca lub definiuje komponent hosta i portu adresu URL dokumentu.

tekst

port

Zwraca lub definiuje komponent portu adresu URL dokumentu.

tekst

pathname

Zwraca lub definiuje komponent ścieżki adresu URL dokumentu.

tekst

search

Zwraca lub definiuje komponent kwerendy adresu URL dokumentu.

tekst

hash

Zwraca lub definiuje komponent skrótu adresu URL dokumentu.

tekst

assign()

Przechodzi do określonego adresu URL.

void

replace()

Przechodzi z bieżącego dokumentu do tego, który wskazano adresem URL.

void

reload()

Odświeża bieżący dokument.

void

resolveURL()

Zamienia podany względny URL na absolutny.

tekst

Właściwości document.location można użyć do pozyskania informacji o lokalizacji bieżącego obiektu, tak jak widać to w listingu 26.3. Listing 26.3. Zastosowanie obiektu Location do pobrania informacji o dokumencie

Przykład





Właściwość search zwraca ciąg znaków z zapytaniem w adresie URL, a właściwość hash odpowiedni fragment adresu URL. Na rysunku 26.3 widnieją zwrócone wartości właściwości Location dla adresu URL http://titan/pliki/przyklad.html?query=apples#apples.

Rysunek 26.3. Zastosowanie obiektu Location do pobrania informacji „ Wskazówka Zauważ, że właściwość nie zwraca wartości, kiedy numer portu to 80 — domyślny dla HTTP.

Wykorzystanie obiektu Location w nawigacji Obiektu Location można też użyć przy pomocy właściwości document.location do przechodzenia do innych dokumentów. Można to zrobić na kilka różnych sposobów. Po pierwsze, możesz przypisać nową wartość którejś z właściwości, które wykorzystałem w poprzednim przykładzie, tak jak w listingu 26.4. Listing 26.4. Przejście do dokumentu poprzez przypisanie nowej wartości właściwości Location

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Naciśnij mnie

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

553

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach.

W powyższym przykładzie utworzyłem element button, którego kliknięcie powoduje przypisanie nowej wartości właściwości document.location. Związek pomiędzy przyciskiem a funkcją JavaScript wykonywaną po jego naciśnięciu ustanawia się przy użyciu zdarzenia. Do tego służy właściwość onclick, a o zdarzeniach przeczytasz więcej w rozdziale 30. Wprowadzona zmiana sprawia, że przeglądarka przechodzi do elementu, którego wartość atrybutu id pokrywa się z wartością hash, czyli w tym przypadku do elementu img. Rezultat widać na rysunku 26.4.

Rysunek 26.4. Wykorzystanie obiektu Location w nawigacji Choć w tym wypadku przeszedłem do innej lokalizacji w obrębie jednego dokumentu, właściwości obiektu Location można używać także do przechodzenia do innych dokumentów. Zazwyczaj jednak robi się to przy użyciu właściwości href, która pozwala na podanie pełnego adresu URL. Można też skorzystać z metod obsługiwanych przez obiekt Location. Metody assign i replace różnią się tym, że replace usuwa bieżący dokument z historii przeglądarki. Oznacza to, że jeśli użytkownik kliknie później przycisk Wstecz, to przeglądarka pominie bieżący dokument, zupełnie jakby w ogóle go wcześniej nie odwiedzono. W listingu 26.5 widnieje przykład zastosowania metody assign. Listing 26.5. Nawigowanie przy użyciu metody assign obiektu Location

Przykład



Naciśnij mnie



Po kliknięciu elementu button przeglądarka przechodzi do podanego adresu URL — w tym przypadku http://www.helion.pl.

Odczytywanie i zapisywanie ciasteczek Właściwość cookie pozwala na odczytywanie, tworzenie i aktualizowanie powiązanych z dokumentem ciasteczek. W listingu 26.6 widnieje przykład. Listing 26.6. Odczytywanie i tworzenie ciasteczek

Przykład

Dodaj ciasteczko Aktualizuj ciasteczko



Właściwość cookie działa nieco dziwnie. Kiedy odczytujesz wartość właściwości, otrzymujesz wszystkie powiązane z dokumentem ciasteczka. Ciasteczka są parami nazw i wartości wyrażonymi w formie nazwa=wartość. Jeżeli ciasteczek jest więcej, wszystkie są zwracane w rezultacie właściwości, oddzielone od siebie średnikami: nazwa1=wartość1;nazwa2=wartość2.

555

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Przy tworzeniu nowego ciasteczka należy natomiast przypisać nową parę nazwy i wartości jako wartość właściwości cookie — zostaje ona wtedy dodana do zbioru ciasteczek dokumentu. Naraz można utworzyć tylko jedno ciasteczko. Kiedy określasz wartość, której nazwa odpowiada nazwie istniejącego ciasteczka, to owa wartość zostaje wykorzystana w ramach aktualizacji owego ciasteczka. Zademonstrowałem to w listingu skryptem, który odczytuje, tworzy i aktualizuje ciasteczka. Funkcja readCookies odczytuje wartość właściwości document.cookie i wykorzystuje rezultat jako treść elementu p. W dokumencie znajdują się dwa elementy button. Po kliknięciu przycisku Dodaj ciasteczko funkcja createCookie przypisuje właściwości cookie nową wartość, która zostaje dodana do zbioru ciasteczek. Przycisk Aktualizuj ciasteczko przywołuje funkcję updateCookie, która nadaje nową wartość istniejącemu ciasteczku. Rezultat zastosowania tego skryptu widać na rysunku 26.5, ale jeśli chcesz w pełni pojąć, jak to działa, otwórz ten dokument i pobaw się trochę.

Rysunek 26.5. Dodawanie i aktualizowanie ciasteczek W tym przypadku dodałem trzy ciasteczka, przy czym zaktualizowałem wartość jednego z nich. Choć forma nazwa=wartość jest domyślna przy dodawaniu ciasteczek, to możesz określić dodatkowe dane co do sposobu ich obsługi. Ich opis znajdziesz w tabeli 26.5. Tabela 26.5. Dodatkowe pola, które można dodać do ciasteczka Dodatek

Opis

path=

Określa ścieżkę powiązaną z ciasteczkiem; domyślnie jest to ścieżka bieżącego dokumentu, jeśli nie podano innej wartości.

domain=

Określa domenę powiązaną z ciasteczkiem; domyślnie jest to domena bieżącego dokumentu, jeśli nie podano innej wartości.

max-age=

Określa żywotność ciasteczka, mierzoną w sekundach od jego utworzenia.

expired=

Określa żywotność ciasteczka, określoną datą wyrażoną w formacie GMT.

secure

Ciasteczko przesyłane jest tylko bezpiecznym połączeniem (HTTPS).

Powyższe elementy dodaje się do pary nazwy i wartości, oddzielając je średnikami: document.cookie = "MyCookie=MyValue;max-age=10";

Stan żądania Właściwość document.readyState dostarcza informacji o bieżącym stanie procesu wczytywania i parsowania dokumentu HTML. Pamiętaj, że przeglądarka domyślnie wykonuje skrypt od razu po znalezieniu elementu script w dokumencie, lecz wykonanie skryptu można też opóźnić, używając atrybutu defer (omówionego w rozdziale 7.). Jak już widziałeś w kilku przykładach, systemu zdarzeń JavaScript możesz użyć do wykonywania poszczególnych funkcji w odpowiedzi na zmiany w dokumencie lub czynności wykonane przez użytkownika. Temat ten omówię szerzej w rozdziale 30.

556

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

We wszystkich takich sytuacjach warto wiedzieć, jak wyglądają postępy przeglądarki we wczytywaniu i przetwarzaniu kodu HTML. Właściwość readyState zwraca trzy różne wartości, które opisuję w tabeli 26.6. Tabela 26.6. Wartości zwracane przez właściwość readyState Wartość

Opis

loading

Przeglądarka wczytuje i przetwarza dokument.

interactive

Dokument został zinterpretowany, ale przeglądarka wciąż wczytuje powiązane zasoby (obrazy, inne materiały).

complete

Dokument został zinterpretowany i wszystkie zasoby zostały wczytane.

Wartość właściwości readyState zmienia się od loading, przez interactive, do complete w miarę wczytywania i przetwarzania dokumentu. Właściwość ta jest najbardziej przydatna w połączeniu ze zdarzeniem readystatechange, które jest wyzwalane wtedy, kiedy zmienia się wartość właściwości readyState. Zdarzenia omówię w rozdziale 30., ale w listingu 26.7 widać przykład zastosowania zdarzenia z właściwością do wykonania określonego zadania. Listing 26.7. Wykorzystanie stanu żądania dokumentu do opóźnienia wykonania skryptu

Przykład



Naciśnij mnie



Skrypt ten wykorzystuje stan żądania dokumentu do opóźnienia wykonania funkcji do momentu, aż dokument wejdzie w stan interactive. Opiera się on na możliwości znalezienia w dokumencie elementów, których przeglądarka nie wczytała w chwili, kiedy skrypt ma być wykonany. Opóźniając wykonanie skryptu do chwili, kiedy dokument będzie w pełni wczytany, mamy pewność, że elementy zostaną znalezione. Tego rozwiązania można użyć zamiast metody polegającej na zamieszczeniu skryptu na końcu dokumentu. Kwestię znajdowania elementów omówię w podrozdziale „Znajdowanie obiektów elementów HTML” w dalszej części rozdziału. Zdarzenia omówię z kolei w rozdziale 30.

Pozyskiwanie szczegółów o implementacji DOM Właściwość document.implementation dostarcza informacje o obsłudze funkcji DOM w przeglądarce. Zwraca ona obiekt DOMImplementation, który obsługuje pewną interesującą nas metodę: hasFeature. Można jej użyć do określenia, które funkcje DOM są obsługiwane, tak jak widać to w listingu 26.8.

557

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Listing 26.8. Zastosowanie metody document.implementation.hasFeature

Przykład





Skrypt ten sprawdza obsługę niektórych z różnorakich funkcji DOM i zdefiniowanych poziomów funkcji DOM. Nie jest to tak przydatne, jak by się wydawało. Po pierwsze, przeglądarki nie zawsze zgłaszają funkcje, które są prawidłowo zaimplementowane. Niektóre obsługują pewne funkcje, ale nie zgłaszają ich przy zastosowaniu metody hasFeature, a inne zgłaszają obsługę funkcji, których w rzeczywistości wcale nie obsługują. Po drugie, zgłoszenie obsługi funkcji nie oznacza, że owa obsługa jest w jakikolwiek sposób przydatna. Nie ma z tym już takiego problemu jak dawniej, ale pomiędzy różnymi implementacjami DOM istnieją pewne różnice. Jeżeli zamierzasz pisać kod, który działa na wszystkich popularnych przeglądarkach (a powinieneś), to metoda Feature na niewiele Ci się zda. Zamiast tego sprawdź dokładnie kod podczas testowania, w razie konieczności sprawdź obsługę i zapasowe opcje i — ewentualnie — rozważ skorzystanie z biblioteki JavaScript (takiej jak jQuery), która pomoże Ci wygładzić różnice pomiędzy implementacjami DOM.

Znajdowanie obiektów elementów HTML Jednym z najważniejszych zadań, jakie spełnia obiekt Document, jest pełnienie roli punktu wyjścia do pracy z obiektami reprezentującymi elementy w dokumencie. Zadanie to możesz wykonać na kilka różnych sposobów. Istnieją właściwości, które zwracają obiekty reprezentujące określone typy elementów w dokumencie. Istnieją też pewne przydatne metody, które pozwalają na znajdowanie elementów przy użyciu kryteriów wyszukiwania; DOM można potraktować jako drzewo, po którego strukturze można nawigować. Techniki te omówię w kolejnych punktach. „ Wskazówka Rzecz jasna, powinno Ci zależeć na pozyskiwaniu tych obiektów we właściwej kolejności, by móc z nimi zrobić coś ciekawego. Wykorzystanie tych obiektów omówię w rozdziale 38., w którym opiszę funkcje obiektu HTMLElement.

558

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Zastosowanie właściwości do pozyskiwania obiektów elementów Obiekt Document dostarcza zbiór właściwości, które zwracają obiekty reprezentujące określone elementy lub typy elementów w dokumencie. Właściwości te opisuję w tabeli 26.7. Tabela 26.7. Właściwości elementów obiektu Document Właściwość

Opis

Zwracana wartość

activeElement

Zwraca obiekt reprezentujący sfokusowany element.

HTMLElement

body

Zwraca obiekt reprezentujący element body.

HTMLElement

embeds plugins

Zwraca obiekt reprezentujący wszystkie elementy embed.

HTMLCollection

forms

Zwraca obiekt reprezentujący wszystkie elementy form.

HTMLCollection

head

Zwraca obiekt reprezentujący wszystkie elementy head.

HTMLHeadElement

images

Zwraca obiekt reprezentujący wszystkie elementy img.

HTMLCollection

links

Zwraca obiekty reprezentujące wszystkie elementy a i area dokumentu, którym zdefiniowano atrybut href.

HTMLCollection

scripts

Zwraca obiekty reprezentujące wszystkie elementy script.

HTMLCollection

Większość właściwości opisanych w tabeli 26.7 zwraca obiekt HTMLCollection. DOM w ten sposób przedstawia zbiór reprezentujących elementy obiektów. W listingu 26.9 widnieje przykład zastosowania dwóch metod korzystania z obiektów zawartych w zbiorze. Listing 26.9. Praca z obiektem HTMLCollection

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Pierwsza metoda pracy z HTMLCollection polega na traktowaniu tego elementu jak tablicy. Właściwość length zwraca liczbę elementów w zbiorze, a standardowy indeksator tablic JavaScript pozwala (za sprawą notacji element[i]) na uzyskanie bezpośredniego dostępu do poszczególnych obiektów w zbiorze. Jest to pierwsze podejście, którego użyłem w przykładzie, kiedy zastosowałem właściwość document.images do uzyskania kontenera HTMLCollection, reprezentującego wszystkie elementy img w dokumencie. „ Wskazówka Zauważ, że do określenia zawartości elementu pre użyłem właściwości innerHTML. Omówię ją bardziej szczegółowo w rozdziale 38.

Drugie podejście przewiduje zastosowanie metody namedItem, która zwraca zawarty w kolekcji element o określonej wartości atrybutu id lub name (o ile taka istnieje). Jest to drugie rozwiązanie, które zastosowałem w przykładzie, gdzie użyłem metody namedItem do pobrania obiektu reprezentującego element img z atrybutem id o wartości apple. „ Wskazówka Zauważ, że odczytałem wartość właściwości src jednego z obiektów. Ta właściwość obsługiwana jest przez obiekty HTMLImageElement, służące do reprezentowania elementów img. Więcej o tym rodzaju obiektów powiem w rozdziale 31. Kolejna zastosowana przeze mnie właściwość — id — jest obsługiwana przez HTMLElement, a zatem dostępna dla wszystkich rodzajów elementów.

Pozyskanie nazwanego elementu przy użyciu notacji tablicowej Do pozyskiwania obiektów reprezentujących elementy nazwane można użyć notacji tablicowej. Elementy te charakteryzują się tym, że mają przypisaną wartość właściwości id lub name. W listingu 26.10 widnieje przykład. Listing 26.10. Pozyskiwanie obiektów elementów nazwanych

Przykład





560

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

W tym przykładzie widać, w jaki sposób użyłem indeksownika tablicowego do pozyskania elementu o wartości apple właściwości id. Pozyskiwanie elementów w ten sposób wiąże się z tym, że można otrzymać różne rezultaty w zależności od zawartości dokumentu oraz kolejności elementów. Przeglądarka przeszukuje dokument w głąb, próbując znaleźć elementy właściwością id lub name o podanej wartości. Jeżeli pierwszy element ma przypisaną właściwość id, to przeglądarka kończy przeszukiwanie (ponieważ wartości id w dokumentach muszą być unikalne) i zwraca HTMLElement reprezentujący ów element. Jeżeli pierwszy znaleziony element ma przypisaną wartość właściwości name, to uzyskujesz albo HTMLElement (jeśli tylko jeden element odpowiada przedmiotowi kwerendy), albo HTMLCollection (jeśli jest ich więcej). Przeglądarka nie wyszukuje wartości id, jeśli już trafiła na wartości name. Widać tu, jak użyłem właściwości namedItem do sprawdzenia, jaki otrzymam rodzaj rezultatu. Uzyskałem obiekt HTMLElement, ponieważ podana przeze mnie wartość była zgodna z wartością id. „ Wskazówka Do elementów nazwanych możesz się również odnosić jak do właściwości. Innymi słowy, document[apple] i document.apple mają takie samo znaczenie. Wolę jednak używać zapisu z kropką, ponieważ jasne wtedy jest, że usiłuję pozyskać obiekty elementów. Jest to jednak kwestia indywidualnych preferencji.

Przeszukiwanie elementów Obiekt Document obsługuje szereg metod, które można wykorzystać do przeszukiwania elementów w dokumencie. Ich opis znajduje się w tabeli 26.8. Jak można się spodziewać, niektóre z tych metod zwracają więcej niż jeden element. W tabeli ukazałem je tak, jakby zwracały tablice obiektów HTMLElement, ale nie jest to do końca prawda. W rzeczywistości metody te zwracają obiekty NodeList, które są częścią bazowej specyfikacji DOM obsługującej ustrukturyzowane dokumenty — nie tylko HTML. W tym przypadku można jednak potraktować je jako tablice i skupić się na HTML5.

561

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Tabela 26.8. Metody Document służące do przeszukiwania elementów Właściwość

Opis

Zwracana wartość

getElementById()

Zwraca element o podanej wartości właściwości id.

HTMLElement

getElementsByClassName()

Zwraca elementy o podanej wartości właściwości class.

HTMLElement[]

getElementsByName()

Zwraca elementy o podanej wartości właściwości name.

HTMLElement[]

getElementsByTagName()

Zwraca elementy określonego typu.

HTMLElement[]

querySelector()

Zwraca pierwszy element, który odpowiada podanemu selektorowi CSS.

HTMLElement

querySelectorAll()

Zwraca wszystkie elementy, które odpowiadają podanemu selektorowi CSS.

HTMLElement[]

Metody przeszukiwania można podzielić na dwie kategorie. W listingu 26.11 przedstawiam pierwszą kategorię — metody, których nazwy zaczynają się od członu getElement. Listing 26.11. Zastosowanie metod document.getElement*

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Metody te działają tak, jak można się spodziewać, i należy zwrócić uwagę tylko na jedną rzecz. Kiedy używasz metody getElementById, przeglądarka zwraca wartość null, jeśli nie znaleziono żadnego elementu o podanej wartości id. Z kolei inne metody zawsze zwracają tablicę obiektów HTMLElement, lecz właściwości length zwracana jest wartość 0, wskazująca brak pasujących elementów.

Przeszukiwanie z użyciem selektorów CSS Innym użytecznym sposobem jest zastosowanie selektorów CSS. Selektory pozwalają na znajdowanie szerszego zakresu elementów w dokumencie. Selektory CSS opisałem w rozdziałach 17. i 18. W listingu 26.12 widnieje przykład pozyskania obiektów elementów w ten sposób. Listing 26.12. Pozyskiwanie obiektów elementów przy użyciu selektorów CSS

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

W tym przykładzie użyłem selektora, który odnosi się do wszystkich elementów p i elementu img z właściwością id o wartości apple. Trudno uzyskać taki sam rezultat, używając innych metod. Sam używam selektorów częściej niż metod getElement.

563

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Przeszukiwanie łańcuchowe DOM oferuje dość przyjemną funkcję, polegającą na tym, że wszystkie metody przeszukiwania (z wyjątkiem jednej) obsługiwane przez obiekt Document są również obsługiwane przez obiekty HTMLElement, co pozwala na przeprowadzanie łańcuchowego przeszukiwania. Wyjątkiem jest tu metoda getElementById, której można używać jedynie za pośrednictwem obiektu Document. W listingu 26.13 znajduje się demonstracja przeszukiwania łańcuchowego. Listing 26.13. Przeszukiwanie łańcuchowe

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W powyższym przykładzie wykonałem dwa przeszukiwania łańcuchowe, zaczynające się od metody getElementById, która pozwoliła mi pracować na jednym obiekcie. W pierwszym przypadku utworzyłem łańcuchowe przeszukiwanie przy użyciu metody getElementsByTagName, a w drugim przy pomocy bardzo prostego selektora CSS zawartego w metodzie querySelectorAll. Każdy z tych przykładów zwraca kolekcję elementów span zawartych w elemencie p, którego właściwość p ma wartość tblock.

Rzecz jasna, ten sam efekt możesz uzyskać przy użyciu metod wykorzystujących selektory CSS odnoszące się wyłącznie do obiektu Document (co zrobiłem w trzeciej części przykładu), lecz przedstawiona tu funkcja bywa przydatna w pracy z obiektami HTMLElement wytworzonymi przez inne funkcje w skrypcie (lub przez inny skrypt). Rezultat przeszukiwania widać na rysunku 26.6.

564

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

Rysunek 26.6. Przeszukiwanie łańcuchowe

Nawigacja w drzewie DOM Wyszukiwanie elementów można również przeprowadzić, traktując DOM jako drzewo i poruszając się po jego hierarchicznej strukturze. Istnieje pewien zestaw obsługiwanych przez wszystkie obiekty DOM właściwości i metod, które właśnie do tego służą. Ich opis znajdziesz w tabeli 26.9. Tabela 26.9. Właściwości i metody nawigacji w drzewie DOM Właściwość

Opis

Zwracana wartość

childNodes

Zwraca zbiór elementów-dzieci.

HTMLElement[]

firstChild

Zwraca pierwsze dziecko elementu.

HTMLElement

hasChildNodes()

Zwraca wartość true, jeśli bieżący element ma dzieci.

wartość_boolowska

lastChild

Zwraca ostatni element-dziecko.

HTMLElement

nextSibling

Zwraca brata znajdującego się po bieżącym elemencie.

HTMLElement

parentNode

Zwraca rodzica elementu.

HTMLElement

previousSibling

Zwraca brata znajdującego się przed bieżącym elementem.

HTMLElement

W listingu 26.14 widnieje skrypt, który pozwala na nawigowanie po dokumencie, wyświetlając informacje o bieżąco zaznaczonym elemencie osadzonym w elemencie pre. Listing 26.14. Nawigacja w drzewie DOM

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek,

565

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Rodzic Pierwsze dziecko Poprzedni brat Następny brat

Najważniejszy fragment skryptu został tu pogrubiony — to właśnie ta sekcja odpowiada za nawigację. Reszta skryptu przygotowuje pole pod nawigację, obsługuje kliknięcia przycisków i odpowiada za wyświetlanie informacji o zaznaczonym elemencie. Rezultat zastosowania skryptu widać na rysunku 26.7.

Rysunek 26.7. Nawigacja w drzewie DOM

Podsumowanie W tym rozdziale przedstawiłem Ci obiekt Document, który jest tworzony przez przeglądarkę i służy jako punkt wyjścia do pracy z obiektowym modelem dokumentu (DOM). Objaśniłem, jak pozyskiwać informacje o dokumencie, jak znajdować i pozyskiwać obiekty reprezentujące elementy dokumentu oraz jak nawigować po strukturze drzewa DOM.

567

ROZDZIAŁ 26. „ OBIEKT DOCUMENT

568

ROZDZIAŁ 27

Obiekt Window

Obiekt Window dodano do specyfikacji HTML w ramach HTML5. Wcześniej funkcjonował on w ramach nieoficjalnego standardu. Przeglądarki obsługiwały mniej więcej taki sam zestaw funkcji w dość spójny sposób. W HTML5 zdefiniowany w specyfikacji obiekt Window obejmuje zarówno swoje faktyczne funkcje, jak i pewne ulepszenia. Z implementacją tego obiektu bywa różnie — poszczególne przeglądarki odznaczają się różnym stopniem zgodności. W tym rozdziale skoncentruję się na funkcjach, które cieszą się dość rzetelną obsługą. „ Uwaga Niektóre z zaawansowanych funkcji, które opiszę w tym rozdziale, bazują na zdarzeniach DOM, które są tematem rozdziału 30. Jeżeli nie jesteś obeznany ze zdarzeniami, to możesz sięgnąć do tamtego rozdziału, a następnie wrócić do przedstawionych tutaj przykładów.

Obiekt Window służył za swego rodzaju składowisko funkcji, które nigdzie indziej nie pasowały. Zobaczysz to na własne oczy w ramach zapoznawania się z funkcjami przezeń obsługiwanymi. W tabeli 27.1 znajduje się streszczenie tego rozdziału. Tabela 27.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Pozyskanie obiektu Window.

Użyj document.defaultView lub globalnej zmiennej window.

27.1

Pobranie informacji o oknie.

Użyj właściwości informacyjnych Window.

27.2

Posługiwanie się oknem.

Użyj metod obsługiwanych przez obiekt Window.

27.3

Przedstawienie użytkownikowi modalnego okna dialogowego.

Użyj metod alert, confirm, prompt i showModalDialog z obiektem Window.

27.4

Wykonywanie prostych operacji na historii przeglądarki.

Użyj metod back, forward i go z obiektem History zwróconym przez właściwość Window.history.

27.5

Manipulowanie historią przeglądarki.

Użyj metod pushState i replaceState z obiektem History, zwróconym przez właściwość Window.history.

27.6 – 27.11

Wysłanie komunikatu skryptowi wykonywanemu w innym dokumencie.

Użyj funkcji przesyłania komunikatów między dokumentami.

27.12 – 27.15

Ustawienie jednorazowego lub powtarzającego się licznika.

Użyj metod setInterval, setTimeout, clearInterval i clearTimeout z obiektem Window.

27.16

ROZDZIAŁ 27. „ OBIEKT WINDOW

Pozyskanie obiektu Window Obiekt Window można pozyskać na dwa sposoby. HTML5 przewiduje zastosowanie właściwości defaultView z obiektem Document. Innym sposobem jest użycie globalnej zmiennej window, którą obsługują wszystkie przeglądarki. W listingu 27.1 widnieje przykład zastosowania obydwu tych technik. Listing 27.1. Pozyskanie obiektu Window

Przykład

outerWidth:
outerHeight:

W powyższym skrypcie użyłem obiektu Window do odczytania wartości pary właściwości — outerWidth i outerHeight — które opiszę w kolejnym punkcie.

Pozyskiwanie informacji o oknie Jak sama nazwa wskazuje, podstawowe funkcje obiektu Window odnoszą się do okna, w którym wyświetlany jest bieżący dokument. W tabeli 27.2 znajduje się spis obsługujących te funkcje właściwości i metod. Na potrzeby HTML zakładki w oknie przeglądarki traktowane są jako osobne okna. W listingu 27.2 widnieje przykład zastosowania tych właściwości do pozyskania informacji o oknie. Listing 27.2. Pozyskanie informacji o oknie

Przykład



570

ROZDZIAŁ 27. „ OBIEKT WINDOW

Tabela 27.2. Właściwości i metody Window Nazwa

Opis

Zwracana wartość

innerHeight

Zwraca wysokość pola treści okna.

liczba

innerWidth

Zwraca szerokość pola treści okna.

liczba

outerHeight

Zwraca wysokość okna, uwzględniając obramowania, paski menu itp.

liczba

outerWidth

Zwraca szerokość okna, uwzględniając obramowania, paski menu itp.

liczba

pageXOffset

Zwraca liczbę pikseli, o którą przewinięto okno poziomo od lewego górnego rogu.

liczba

pageYOffset

Zwraca liczbę pikseli, o którą przewinięto okno pionowo od lewego górnego rogu.

liczba

screen

Zwraca obiekt Screen, który opisuje ekran.

Screen

screenLeft screenX

Zwraca liczbę pikseli od lewej krawędzi okna do lewej krawędzi ekranu. Nie każda przeglądarka obsługuje obydwie te właściwości, a sposób obliczania wartości bywa różny.

liczba

screenTop screenY

Zwraca liczbę pikseli od górnej krawędzi okna do górnej krawędzi ekranu. Nie każda przeglądarka obsługuje obydwie te właściwości, a sposób obliczania wartości bywa różny.

liczba

outerWidth:		outerHeight:
innerWidth:		innerHeight:
screen.width:		screen.height:

= = = = = =

window.outerWidth; window.outerHeight; window.innerHeight; window.innerHeight; window.screen.width; window.screen.height;

Podany w tym przykładzie skrypt wyświetla wartość różnych właściwości Window w tabeli. Zauważ, że użyłem właściwości screen do uzyskania obiektu Screen. Dostarcza on informacji o ekranie, na którym wyświetlane jest okno, i obsługuje właściwości podane w tabeli 27.3. Rezultat zastosowania skryptu widać na rysunku 27.1.

Rysunek 27.1. Wyświetlone informacje o oknie i ekranie

571

ROZDZIAŁ 27. „ OBIEKT WINDOW

Tabela 27.3. Właściwości obiektu Screen Nazwa

Opis

Zwracana wartość

availHeight

Wysokość obszaru ekranu, na którym można wyświetlać okna (z wyłączeniem pasków narzędzi itp.).

liczba

availWidth

Szerokość obszaru ekranu, na którym można wyświetlać okna (z wyłączeniem pasków narzędzi itp.).

liczba

colorDepth

Głębia koloru ekranu.

liczba

height

Wysokość ekranu.

liczba

width

Szerokość ekranu.

liczba

Interakcja z oknem Obiekt Window obsługuje szereg metod służących do prowadzenia interakcji z oknem, w którym dokument jest wyświetlany. Ich opis znajduje się w tabeli 27.4. Tabela 27.4. Funkcje interakcji z oknem Nazwa

Opis

Zwracana wartość

blur()

Odfokusowuje okno.

void

close()

Zamyka okno.

void

focus()

Fokusuje okno.

void

print()

Pyta użytkownika, czy wydrukować stronę.

void

scrollBy(, )

Przewija dokument względem jego bieżącego położenia.

void

scrollTo(, )

Przewija do określonego miejsca.

void

stop()

Wstrzymuje wczytywanie dokumentu.

void

Metod tych należy używać ostrożnie, gdyż przejmują one od użytkownika kontrolę nad oknem przeglądarki. Użytkownicy mają bardzo jasno określone oczekiwania co do zachowania aplikacji, a samodzielnie przewijające, drukujące i zamykające się okna nie są pożądane. Jeśli już musisz korzystać z tych metod, daj użytkownikowi kontrolę i udziel mu jasnych, wizualnych wskazówek odnośnie do tego, co będzie się dziać. W listingu 27.3 widnieje przykład zastosowania niektórych metod wykorzystywanych w interakcji z oknami. Listing 27.3. Interakcja z oknem

Przykład

Przewiń Drukuj Zamknij

572

ROZDZIAŁ 27. „ OBIEKT WINDOW

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podczas podróży do Azji uderzyła mnie rozmaitość odmian bananów — wiele z nich miało wyjątkowy smak i można je było dostać wyłącznie w niedużych regionach. Rzecz jasna, istnieją też naprawdę wyjątkowe owoce — do głowy przychodzi mi durian, jadany powszechnie w Azji Południowo-Wschodniej, a znany jako "król owoców". Durian nie jest zbyt dobrze znany w Europie i Stanach Zjednoczonych, chyba że ze względu na jego intensywny zapach, opisywany jako połączenie migdałów, zgniłej cebuli i przepoconych skarpet.

Wyświetlanie zapytań Obiekt Window obsługuje metody przedstawiające użytkownikowi różne rodzaje zapytań, których opis znajduje się w tabeli 27.5. Tabela 27.5. Funkcje zapytań Nazwa

Opis

Zwracana wartość

alert()

Wyświetla okno dialogowe i czeka na jego wyłączenie.

void

confirm()

Wyświetla okno dialogowe z zapytaniem OK/Anuluj.

wartość_boolowska

prompt(, )

Wyświetla okno dialogowe, w którym użytkownik ma podać wartość.

tekst

showModalDialog()

Wyświetla wyskakujące okno o podanym URL.

void

Poszczególne metody służą do wyświetlania różnego rodzaju zapytań. W listingu 27.4 widnieje przykład ich zastosowania. Z przedstawionych tutaj funkcji należy korzystać ostrożnie. Każda przeglądarka obsługuje zapytania inaczej, przez co doświadczenie użytkownika jest zróżnicowane.

573

ROZDZIAŁ 27. „ OBIEKT WINDOW

Listing 27.4. Wyświetlenie zapytania

Przykład

Ostrzeżenie Zatwierdzenie Zapytanie Okno modalne



Na rysunku 27.2 widać przykład tego, jak Chrome i Firefox inaczej interpretują ostrzeżenie. Okna ostrzeżeń wyglądają podobnie, jednak znacząco się różnią. Chrome interpretuje specyfikację dosłownie i wyświetla okno modalne. W takiej sytuacji przeglądarka nie może zrobić nic innego, dopóki użytkownik nie kliknie przycisku OK, by wyłączyć okno. Użytkownik nie może przełączać zakładek, zamknąć bieżącej zakładki ani zrobić czegokolwiek innego z przeglądarką. Firefox podchodzi do tego bardziej elastycznie i ogranicza efekt działania zapytania do bieżącej zakładki. To rozwiązanie jest bardziej sensowne, ale mimo wszystko jest inne — kwestię niespójności należy rozważyć bardzo uważnie przy doborze funkcji wykorzystanych w aplikacji internetowej.

Rysunek 27.2. Ostrzeżenie w Chrome i Firefoksie

574

ROZDZIAŁ 27. „ OBIEKT WINDOW

Metoda showModalDialog otwiera wyskakujące okno — coś notorycznie nadużywanego przez reklamodawców. W istocie, wyskakujących okien nadużywano tak często, że wszystkie przeglądarki starają się ograniczyć ich zastosowanie do stron, które użytkownik sam zatwierdził. Jeżeli zamierzasz przekazać użytkownikowi istotne informacje w wyskakującym oknie, to musisz się liczyć z ryzykiem, że wcale nie zwróci na nie uwagi. „ Wskazówka Jeśli chcesz przyciągnąć uwagę użytkownika, rozważ skorzystanie z pól dialogowych inline oferowanych przez biblioteki JavaScript w rodzaju jQuery. Są łatwe w użyciu, mniej inwazyjne, a także spójne pod względem zachowania i wyglądu w różnych przeglądarkach. Więcej na temat jQuery przeczytasz w mojej książce Pro jQuery.

Pozyskiwanie ogólnych informacji Obiekt Window daje dostęp do obiektów, które zwracają ogólniejsze informacje, m.in. szczegóły o bieżącej lokalizacji (tj. adres URL, z którego przekierowano przeglądarkę do bieżącego dokumentu) i historii przeglądania. Ich opis znajduje się w tabeli 27.6. Tabela 27.6. Właściwości informacyjne Nazwa

Opis

Zwracana wartość

document

Zwraca obiekt Document powiązany z bieżącym oknem.

Document

history

Daje dostęp do historii przeglądarki.

History

location

Podaje szczegóły lokalizacji bieżącego dokumentu.

Location

Obiekt Document jest tematem rozdziału 26. Obiekt Location zwracany przez właściwość Window.location jest tożsamy z właściwością Document.location, który również opisałem w rozdziale 26. Poniżej zajmiemy się pracą z historią przeglądarki.

Praca z historią przeglądarki Właściwość Window.history zwraca obiekt History, którego używa się do wykonywania prostych operacji na historii przeglądarki. W tabeli 27.7 znajduje się opis właściwości i metod obsługiwanych przez obiekt History. Tabela 27.7. Właściwości i metody obiektu History Nazwa

Opis

Zwracana wartość

back()

Wczytuje poprzedni dokument w historii.

void

forward()

Wczytuje następny dokument w historii.

void

go()

Kieruje przeglądarkę do pozycji historii określonej względem bieżącego dokumentu. Wartości dodatnie przenoszą naprzód, ujemne wstecz.

void

length

Zwraca liczbę pozycji w historii.

liczba

pushState(, , )

Dodaje pozycję do historii przeglądarki.

void

replaceState(, , )

Zastępuje bieżącą pozycję w historii przeglądarki.

void

state

Zwraca dane o stanie powiązane z bieżącym dokumentem w historii przeglądarki.

obiekt

575

ROZDZIAŁ 27. „ OBIEKT WINDOW

Poruszanie się po historii przeglądania Metody back, forward i go polecają przeglądarce, by przeszła do danego adresu URL z historii. Metody back i forward działają tak samo, jak przyciski Wstecz i Dalej w przeglądarce. Metoda ta służy do przejścia do pozycji w historii określonej względem bieżącego dokumentu. Pozytywna wartość wskazuje przeglądarce, by przeszła naprzód, a negatywna, by się cofnęła. Podana wielkość określa, o ile kroków ma nastąpić przejście. Przykładowo, wartość -2 poleca przeglądarce, by przeszła o dwa dokumenty wcześniej. W listingu 27.5 widnieje przykład zastosowania tych trzech metod. Listing 27.5. Nawigacja po historii przeglądarki

Przykład

Back Forward Go



Poza tymi podstawowymi funkcjami, HTML5 obsługuje również funkcję zmiany historii przeglądania — z pewnymi ograniczeniami. Omówienie najlepiej zacząć od przykładowego problemu, który można rozwiązać przez zmianę historii, tak jak widać to w listingu 27.6. Listing 27.6. Praca z historią przeglądarki

Przykład

Banan Jabłko



W powyższym przykładzie znajduje się skrypt, który wyświetla odpowiedni komunikat w zależności od tego, który przycisk użytkownik kliknął. To ogólnie bardzo proste. Problem w tym, że kiedy użytkownik odchodzi z przykładowego dokumentu, informacja o tym, który przycisk kliknięto, zostaje utracona. Widać to na rysunku 27.3.

Rysunek 27.3. Standardowa sekwencja historii przeglądania Sekwencja wygląda następująco: 1. Przechodzę do przykładowego dokumentu, w którym widać komunikat Nie dokonano wyboru. 2. Klikam przycisk Banan. Wyświetla się komunikat Banan. 3. Przechodzę do adresu http://www.helion.pl. 4. Klikam przycisk Wstecz, by wrócić do przykładowego dokumentu. Na końcu sekwencji powracam do przykładowego dokumentu, w którym nie ma żadnego śladu po moim wcześniejszym wyborze. Jest to standardowe zachowanie przeglądarki — historia przeglądania obsługiwana jest przy użyciu adresów URL. Historia mojej sesji wygląda następująco: • http://titan/pliki/przyklad.html • http://www.helion.pl

Wprowadzenie nowej pozycji do historii Metoda History.pushState pozwala — z pewnymi ograniczeniami — na dodanie adresu URL do historii przeglądarki. URL musi mieć tę samą nazwę serwera i port, co bieżący dokument. Adres URL można dodać, używając ciągu kwerendy lub skrótu dodanego do bieżącego dokumentu, tak jak widać to w listingu 27.7.

577

ROZDZIAŁ 27. „ OBIEKT WINDOW

Listing 27.7. Dodanie nowej pozycji do historii przeglądania

Przykład

Banan Jabłko



W powyższym skrypcie przy użyciu metody pushState dodałem nową pozycję do historii przeglądania. Dodałem URL bieżącego dokumentu z dodanym ciągiem kwerendy, wskazującym, który przycisk kliknął użytkownik. Dodałem też fragment kodu, który wykorzystuje obiekt Location (opisany w rozdziale 26.) przy odczycie ciągu kwerendy i wybranej wartości. Zastosowanie tego skryptu wywołuje dwie widoczne dla użytkownika zmiany. Pierwszą widać, kiedy użytkownik naciska jeden z przycisków, tak jak na rysunku 27.4.

Rysunek 27.4. Rezultat wprowadzenia nowej pozycji do historii przeglądarki Kiedy użytkownik klika przycisk Banan, w pasku adresu przeglądarki pojawia się URL, który wprowadziłem do historii przeglądania. Dokument nie jest odświeżany — zmienia się jedynie historia i wyświetlany adres URL. Na tym etapie historia przeglądarki wygląda następująco:

578

ROZDZIAŁ 27. „ OBIEKT WINDOW

• http://titan/pliki/przyklad.html • http://titan/pliki/przyklad.html?banana Po każdym kliknięciu przycisku do historii dodany zostaje nowy adres URL, tworząc tym samym historię nawigacji. Te dodatkowe pozycje przydają się, kiedy użytkownik przechodzi gdzieś indziej, a następnie powraca do dokumentu, tak jak widać na rysunku 27.5.

Rysunek 27.5. Zachowanie „okruszków” historii przeglądania Tym razem po kliknięciu przycisku Wstecz wczytany zostaje dodany do historii adres URL, a skrypt wykorzystuje ciąg kwerendy do zachowania stanu aplikacji. Jest to prosta, lecz użyteczna technika.

Dodanie nowej pozycji z adresem innego dokumentu Przy dodawaniu nowej pozycji do historii przeglądania nie musisz używać ani ciągu kwerendy, ani fragmentu tego samego dokumentu. Możesz podać adres URL pochodzący z tego samego źródła, co bieżący dokument. Trzeba tu jednak zwrócić uwagę na pewną osobliwość. Przykład znajdziesz w listingu 27.8. Listing 27.8. Podanie innego adresu URL jako pozycji w historii

Przykład

Banan Jabłko



Wprowadziłem w skrypcie tylko jedną zmianę: przypisałem metodzie pushState argument otherpage.html. W listingu 27.9 widnieje zawartość strony otherpage.html. Listing 27.9. Zawartość strony otherpage.html

Inna strona

Inna strona

Wciąż tu używam ciągu kwerendy do zapamiętania wyboru użytkownika, pomimo że sam dokument jest inny. I tu właśnie mamy do czynienia ze wspomnianą osobliwością. Na rysunku 27.6 widać to, co pojawia się po otworzeniu tego dokumentu.

Rysunek 27.6. Wprowadzenie do historii przeglądania innego adresu URL Jak widać na rysunku, w polu adresu wyświetlony zostaje adres URL innego dokumentu, lecz sam dokument się nie zmienia. I tu tkwi haczyk: jeśli użytkownik przejdzie do innego dokumentu, a następnie kliknie przycisk Wstecz, to przeglądarka będzie musiała wybrać, czy wyświetlić pierwotny dokument (w tym wypadku przyklad.html), czy dokument, który podano (otherpage.html). Nie ma możliwości określenia, który adres ma być w takim przypadku wykorzystany. Co gorsza, różne przeglądarki działają pod tym względem inaczej.

580

ROZDZIAŁ 27. „ OBIEKT WINDOW

Zapisywanie kompleksowych stanów w historii Zauważ, że w ostatnich przykładach użyłem metody pushState z pustymi ciągami ("") jako pierwszymi dwoma argumentami. Środkowy argument ignorowany jest przez wszystkie popularne przeglądarki, więc nie interesuje nas tutaj. Pierwszy argument bywa jednak bardzo przydatny, ponieważ pozwala na skojarzenie obiektu kompleksowego stanu z adresem URL w historii przeglądarki. W poprzednich przykładach wybór użytkownika uchwyciłem w ciągu kwerendy, co jest całkowicie dobrym rozwiązaniem w przypadku prostych danych, ale nie przydaje się zanadto, jeśli trzeba zachować bardziej złożone informacje. W listingu 27.10 znajduje się demonstracja użycia pierwszego argumentu pushState do zapisania złożonych danych. Listing 27.10. Zachowanie obiektu stanu w historii przeglądarki

Przykład

Nazwa:
Kolor:
Wielkość:
Stan:
Zdarzenie:

Banan Jabłko



W tym przykładzie przedstawiłem wybór użytkownika przy użyciu obiektu z trzema właściwościami, określającymi nazwę, kolor i wielkość wybranego przez użytkownika owocu. stateObj = { name: "apple", color: "red", size: "medium"}

Kiedy użytkownik dokonuje wyboru, metoda History.pushState tworzy nową pozycję w historii przeglądania i powiązuje z nią obiekt stanu. window.history.pushState(stateObj, "");

Nie podałem w tym przykładzie adresu URL, wobec czego obiekt stanu powiązany jest z bieżącym dokumentem. (Zrobiłem to, żeby zademonstrować możliwości — mogłem podać adres URL, tak samo jak w poprzednich przykładach). Kiedy użytkownik powraca do dokumentu, obiekt stanu możesz pozyskać na dwa sposoby. Pierwszy z nich wykorzystuje właściwość history.state: ... if (window.history.state) { displayState(window.history.state); ...

Problem w tym, że nie wszystkie przeglądarki udostępniają obiekt stanu za pośrednictwem tej właściwości — przykładem jest Chrome. Aby sobie z tym poradzić, musisz także wywołać zdarzenie popstate. Zdarzenia omówię dopiero w rozdziale 30., ale ten przykład jest istotny dla pracy z historią, więc możesz powrócić do tego punktu, kiedy już przeczytasz wspomniany rozdział. window.onpopstate = function(e) { displayState(e.state); document.getElementById("event").innerHTML = "Yes"; }

Zauważ, że informacje o stanie wyświetlam w elemencie table wraz ze szczegółami co do sposobu, w jaki pozyskałem ten obiekt — przy użyciu właściwości czy zdarzenia. Wygląd tabeli widać na rysunku 27.7, ale z tym przykładem warto samodzielnie poeksperymentować. „ Ostrzeżenie Nie możesz polegać na dostępności informacji o stanie. Historię przeglądarki można utracić na wiele różnych sposobów, m.in. na skutek tego, że sam użytkownik ją usunie.

582

ROZDZIAŁ 27. „ OBIEKT WINDOW

Rysunek 27.7. Wykorzystanie obiektu stanu w historii przeglądarki

Zastąpienie pozycji w historii przeglądarki W poprzednich przykładach skoncentrowałem się na dodawaniu do historii dokumentów innych niż bieżący, ale istnieje też metoda replaceState, której można użyć do zastąpienia pozycji, na której zapisany jest bieżący dokument. Przykład jej zastosowania widać w listingu 27.11. Listing 27.11. Zastąpienie bieżącej pozycji w historii przeglądarki

Przykład

Banan Jabłko



Przekazywanie komunikatów między dokumentami Obiekt Window jest punktem wyjścia do pracy z kolejną nowością w HTML5 — funkcją przekazywania komunikatów między dokumentami (z ang. cross-document messaging). Skrypty z różnych źródeł standardowo nie mogą się między sobą komunikować, pomimo że komunikacja pomiędzy skryptami jest na tyle pożądaną funkcją, że nie sposób zliczyć wszystkich sztuczek służących do obchodzenia zabezpieczeń przeglądarek. „ Uwaga Opisuję tutaj zaawansowane działania, wykorzystujące zdarzenia, które omówię dopiero w rozdziale 30. Możesz zatem zapoznać się z treścią rozdziału 30., by powrócić do tego podrozdziału.

Źródła skryptów Przeglądarki używają komponentów adresu URL do określania źródeł zasobów takich jak skrypty. Obowiązują ograniczenia dotyczące interakcji i komunikacji pomiędzy skryptami z różnych źródeł. Jeśli protokół, nazwa hosta i port pokrywają się ze sobą, to uznaje się, że dwa skrypty pochodzą z jednego źródła, nawet jeśli inne części URL są różne. W poniższej tabeli znajdziesz kilka przykładów opartych na adresie URL http://serwer. mojadomena.com/przyklad.html. URL

Rezultat

http://serwer.mojadomena.com/aplikacje/przyklad.html https://serwer.mojadomena.com/aplikacje/przyklad.html http://serwer:81.mojadomena.com/aplikacje/przyklad.html http://innyserwer.mojadomena.com/aplikacje/przyklad.html

Jednakowe źródło Inne źródło; inny protokół Inne źródło; inny port Inne źródło; inny host

Źródło skryptu można zmienić właściwością document.domain, ale tylko tak, by poszerzyć zakres bieżącego adresu URL. Przykładowo, skrypty z http://serwer1.domena.com i http://serwer1.domena.com można przypisać do tego samego źródła, nadając ich właściwościom domain wartość domain.com.

HTML5 obsługuje ten rodzaj komunikacji przy użyciu metody Window, opisanej w tabeli 27.8. Tabela 27.8. Metoda służąca do komunikacji pomiędzy dokumentami Nazwa

Opis

Zwracana wartość

postMessage(, )

Przesyła wskazany komunikat innemu dokumentowi.

void

W listingu 27.12 widnieje przykładowy problem, który można rozwiązać tą funkcją.

584

ROZDZIAŁ 27. „ OBIEKT WINDOW

Listing 27.12. Problem komunikacji między dokumentami

Przykład

Gotowe

Wyślij komunikat

W dokumencie tym znajduje się element iframe, który wczytuje dokument z innego źródła. Skrypty pochodzą z tego samego źródła tylko wtedy, kiedy ich hosty i porty są jednakowe. Dokument wczytałem z portu 80 serwera titan, więc drugi serwer z portem 81 uznany został za inne źródło. W listingu 27.13 widnieje treść dokumentu otherdomain.html, który jest wczytywany przez iframe. Listing 27.13. Dokument otherdomain.html

Inna strona

To jest osadzony dokument



Główny dokument, przyklad.html, ma za zadanie przywołać funkcję displayMessage zawartą w elemencie script osadzonego dokumentu, otherdomain.html. Metodę postMessage musiałem przywołać dla obiektu Window zawierającego dokument, do którego chciałem się odnieść. Na szczęście, obiekt Window oferuje możliwości znajdowania osadzonych dokumentów, które opisuję w tabeli 27.9. W tym przykładzie do zlokalizowania pożądanego obiektu Window użyję notacji tablicowej, aby móc przywołać metodę postMessage. W listingu 27.14 widnieje fragment, który koniecznie trzeba dodać do dokumentu przyklad.html. Listing 27.14. Zlokalizowanie obiektu Window i przywołanie metody postMessage

Przykład

585

ROZDZIAŁ 27. „ OBIEKT WINDOW

Tabela 27.9. Znajdowanie osadzonych okien Nazwa

Opis

Zwracana wartość

defaultView

Zwraca okno Window aktywnego dokumentu.

Window

frames

Zwraca tablicę obiektów Window osadzonych w dokumencie elementów iframe.

Window[]

opener

Zwraca okno Window, które otworzyło bieżący kontekst przeglądania.

Window

parent

Zwraca rodzica bieżącego okna Window.

Window

self

Zwraca okno Window bieżącego dokumentu.

Window

top

Zwraca znajdujące się najwyżej w hierarchii okno Window.

Window

length

Zwraca liczbę osadzonych elementów iframe w dokumencie.

liczba

[]

Zwraca okno Window osadzonego dokumentu o określonym numerze indeksowym.

Window

[]

Zwraca okno Window osadzonego dokumentu o określonej nazwie.

Window

Gotowy

Wyślij komunikat

Znajduję obiekt Window (window["nested"]) zawierający skrypt, któremu chcę przesłać komunikat, aby następnie przywołać metodę postMessage. Podane dwa argumenty określają komunikat i źródło docelowego skryptu, czyli w tym przypadku http://titan:81, choć właściwe źródło będzie inne, jeśli sam będziesz pracował nad tym przykładem. „ Ostrzeżenie Dla bezpieczeństwa przeglądarka pomija wiadomość, gdy metoda postMessage przywołana jest z błędnym źródłem.

Aby odebrać komunikat, muszę nasłuchiwać zdarzenie message w drugim skrypcie. (Jak już wspomniałem, zdarzenia omówię w rozdziale 30., więc jeśli nie znasz się na zdarzeniach i ich działaniu, to możesz najpierw zapoznać się z tym rozdziałem). Przeglądarka tworzy obiekt MessageEvent, który obsługuje właściwości opisane w tabeli 27.10. W listingu 27.15 widnieje przykład zastosowania zdarzenia message do przekazywania komunikatów między dokumentami.

586

ROZDZIAŁ 27. „ OBIEKT WINDOW

Tabela 27.10. Właściwości MessageEvent Nazwa

Opis

Zwracana wartość

data

Zwraca komunikat przesłany z innego skryptu.

obiekt

origin

Zwraca źródło nadawcy.

tekst

source

Zwraca okno powiązane ze skryptem, który wysłał komunikat.

Window

Listing 27.15. Nasłuchiwanie zdarzenia message

Inna strona

To jest osadzony dokument



O metodzie addEventListener przeczytasz w rozdziale 30. Zauważ, że przy odbiorze komunikatu sprawdzam właściwość origin obiektu MessageEvent, żeby mieć pewność, że mam do czynienia ze znajomym i zaufanym źródłem. Jest to ważne zabezpieczenie, które zapobiega podejmowaniu działań na podstawie nieznanych i niezaufanych skryptów. Dysponuję teraz prostym mechanizmem przesyłania komunikatów pomiędzy skryptami pochodzącymi z różnych źródeł. Rezultat widać na rysunku 27.8.

Rysunek 27.8. Zastosowanie funkcji przekazywania komunikatów pomiędzy dokumentami

587

ROZDZIAŁ 27. „ OBIEKT WINDOW

Liczniki Obiekt Window oferuje użyteczną funkcję ustawiania liczników działających jednorazowo bądź cyklicznie. Służą one do wykonywania funkcji po upływie określonego czasu. W tabeli 27.11 znajduje się opis metod, które przywołują tę funkcję. Tabela 27.11. Metody przywołujące licznik Nazwa

Opis

Zwracana wartość

clearInterval()

Anuluje licznik odstępu.

void

clearTimeout()

Anuluje licznik opóźnienia.

void

setInterval(, )

Uruchamia licznik, który przywołuje podaną funkcję w milisekundowych odstępach określonych wartością czas.

odstęp_czasowy

setTimeout(, )

Uruchamia licznik, który przywołuje podaną funkcję po opóźnieniu określonym wartością czas.

odstęp_czasowy

Metoda setTimeout uruchamia licznik, który przywołuje określoną funkcję jednorazowo, podczas gdy metoda setInterval uruchamia licznik przywołujący funkcję wielokrotnie. Metody te zwracają unikalny identyfikator, którego można później użyć jako argumentu metod clearTimeout i clearInterval do anulowania licznika. W listingu 27.16 widnieje przykład zastosowania metod licznika. Listing 27.16. Zastosowanie metod licznika

Przykład

Ustaw czas Wyzeruj czas Ustaw odstęp Wyzeruj odstęp

Podany w tym przykładzie skrypt tworzy i zeruje liczniki czasu oraz odstępów, przywołujące funkcję displayMsg, która definiuje treść elementu p. Rezultat widać na rysunku 27.9.

Rysunek 27.9. Zastosowanie liczników czasu i odstępu Liczniki czasu i odstępów bywają użyteczne, ale należy bardzo ostrożnie decydować o ich użyciu. Użytkownicy oczekują, że stan aplikacji będzie pozostawał jednakowy, dopóki sami nie podejmą stosownych działań. Jeśli używasz liczników do automatycznej zmiany stanu aplikacji, to powinieneś się zastanowić, czy efekt jest przydatny dla użytkownika, czy zwyczajnie irytujący.

Podsumowanie W tym rozdziale przedstawiłem Ci nietypowy zbiór funkcji obsługiwanych przez obiekt Window. Niektóre z nich są bezpośrednio powiązane z oknami, m.in. możliwość pobrania informacji o wielkości okna przeglądarki i ekranu, na którym jest wyświetlane. Inne funkcje są z nimi związane tylko pośrednio, m.in. funkcje historii i przekazu komunikatów między dokumentami, które są bardzo ważne w HTML5.

589

ROZDZIAŁ 27. „ OBIEKT WINDOW

590

ROZDZIAŁ 28

Praca z elementami DOM

W poprzednim rozdziale, przy omówieniu funkcji działających na poziomie dokumentu, wspomniałem o niektórych funkcjach obiektu HTMLElement. Teraz możemy się już odpowiednio skoncentrować na nim samym. W niniejszym rozdziale przedstawię Ci poszczególne właściwości i metody HTMLElement oraz pokażę, jak ich używać. W tabeli 28.1 znajduje się streszczenie rozdziału. Miej w pamięci, że nie wszystkie popularne przeglądarki będą obsługiwać podane tutaj przykłady. Tabela 28.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Pobranie informacji o elemencie.

Użyj właściwości metadanych HTMLElement.

28.1

Pobranie lub zdefiniowanie pojedynczego ciągu znaków, zawierającego wszystkie klasy, do których element jest przypisany.

Użyj właściwości className.

28.2

Sprawdzenie lub zmodyfikowanie poszczególnych klas elementów.

Użyj właściwości classList.

28.3

Pobranie lub zdefiniowanie atrybutów elementu.

Użyj metod attribute, getAttribute, setAttribute, removeAttribute i hasAttribute.

28.4, 28.6

Pobranie lub zdefiniowanie niestandardowych atrybutów elementu.

Użyj właściwości dataset.

28.5

Praca z zawartością tekstową elementu.

Użyj obiektów Text.

28.7 – 28.9

Tworzenie i usuwanie elementów.

Użyj metod document.create* i HTMLElement służących do zarządzania elementami-dziećmi.

28.10

Powielenie elementu.

Użyj metody cloneNode.

28.11

Przeniesienie elementu.

Użyj metody appendChild.

28.12

Sprawdzenie identyczności dwóch obiektów.

Użyj metody isSameNode.

28.13

Sprawdzenie równości dwóch obiektów.

Użyj metody isEqualNode.

28.14

Bezpośrednia praca nad fragmentami HTML.

Użyj właściwości innerHTML i outerHTML oraz metody insertAdjacentHTML.

28.15 – 28.17

Wstawienie elementu do bloku tekstu.

Użyj metod splitText i appendChild.

28.18

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Praca z obiektami elementów Obiekty HTMLElement obsługują szereg właściwości, których można używać do odczytywania i modyfikowania danych reprezentowanego elementu. W tabeli 28.2 znajduje się opis tych właściwości. Tabela 28.2. Właściwości danych elementów Właściwość

Opis

Zwracana wartość

checked

Sprawdza lub definiuje obecność atrybutu checked.

wartość_boolowska

classList

Pobiera lub definiuje listę klas, do których element przynależy.

DOMTokenList

className

Pobiera lub definiuje listę klas, do których element przynależy.

tekst

dir

Pobiera lub definiuje wartość atrybutu dir.

tekst

disabled

Sprawdza lub definiuje obecność atrybutu disabled.

wartość_boolowska

hidden

Sprawdza lub definiuje obecność atrybutu hidden.

wartość_boolowska

id

Pobiera lub definiuje wartość atrybutu id.

tekst

lang

Pobiera lub definiuje wartość atrybutu lang.

tekst

spellcheck

Sprawdza lub definiuje obecność atrybutu spellcheck.

wartość_boolowska

tabIndex

Pobiera lub definiuje wartość atrybutu tabindex.

liczba

tagName

Zwraca nazwę znacznika (wskazując tym samym rodzaj elementu).

tekst

title

Pobiera lub definiuje wartość atrybutu title.

tekst

W listingu 28.1 widać przykład zastosowania niektórych z podstawowych właściwości, które podano w liście. Listing 28.1. Zastosowanie podstawowych właściwości danych elementów

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

+= += += += +=

"id: " + elem.id + "\n"; "dir: " + elem.dir + "\n"; "lang: " + elem.lang + "\n"; "hidden: " + elem.hidden + "\n"; "disabled: " + elem.disabled + "\n";

Rezultat zastosowania tych właściwości widać na rysunku 28.1.

Rysunek 28.1. Pobranie informacji o elemencie

Praca z klasami Praca z klasami, do których przypisany jest element, może się odbywać na dwa sposoby. Pierwszy z nich opiera się na wykorzystaniu właściwości className, która zwraca listę klas. Klasy można dodawać i usuwać poprzez zmianę wartości ciągu znaków. Przykład odczytania i zmiany klas tym sposobem widać w listingu 28.2. Listing 28.2. Zastosowanie właściwości className

Przykład

593

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Istnieje wiele różnych rodzajów owoców — sam ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Naciśnij mnie



„ Wskazówka Klasy są standardowo używane do przypisywania elementom stylów. O pracy ze stylami w DOM przeczytasz w rozdziale 29.

W powyższym przykładzie naciśnięcie przycisku przywołuje skrypt, który dodaje nową klasę do listy elementu. Zauważ, że musiałem umieścić spację przed każdą wartością dodaną do właściwości className, ponieważ przeglądarka spodziewa się listy oddzielonych od siebie spacjami klas. Po wprowadzeniu takiej zmiany przeglądarka nadaje style zgodnie z selektorami klasowymi, wobec czego dokument widocznie zmienia wygląd, tak jak widać to na rysunku 28.2.

Rysunek 28.2. Zastosowanie właściwości className Właściwość className jest łatwa w użyciu, kiedy chcesz szybko przypisać element do nowych klas. O wiele trudniej jednak używać jej do jakichkolwiek innych celów, np. do usunięcia klasy. Na szczęście, możesz też użyć właściwości classList, która zwraca obiekt DOMTokenList. Obiekt ten obsługuje kilka użytecznych metod i właściwości, które pozwalają na zarządzanie listą klas; opisuję je w tabeli 28.3. Tabela 28.3. Właściwości i metody DOMTokenList Składowa

Opis

Zwracana wartość

add()

Dodaje wskazaną klasę do elementu.

void

contains()

Zwraca wartość true, jeśli element należy do podanej klasy.

wartość_boolowska

length

Zwraca liczbę klas, do których element przynależy.

liczba

remove()

Usuwa podaną klasę z elementu.

void

toggle()

Dodaje klasę, jeśli nie jest obecna, a usuwa, jeśli jest obecna.

wartość_boolowska

594

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Abstrahując od tych właściwości i metod, masz również możliwość pobierania klas według numeru indeksowego, z wykorzystaniem notacji tablicowej. Przykład wykorzystania obiektu DOMTokenList widać w listingu 28.3. Listing 28.3. Zastosowanie właściwości classList

Przykład

Istnieje wiele różnych rodzajów owoców — sam ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Przełącz klasę



W tym przykładzie funkcja listClasses wykorzystuje właściwość classList do pobrania i wyliczenia klas, do których przynależy element p, wykorzystując przy zwracaniu nazw klas indeksator tablicowy. Przywoływana po naciśnięciu przycisku funkcja toggleClass używa metody toggle do dodawania i usuwania klasy newclass. Jako że z tą klasą powiązany jest styl, efekt jej zmiany jest widoczny na rysunku 28.3.

595

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Rysunek 28.3. Wyliczenie i przełączenie klasy

Praca z atrybutami elementu Istnieją właściwości obsługujące niektóre z najważniejszych atrybutów globalnych, ale możliwy jest także odczyt i definiowanie poszczególnych atrybutów elementu. W tabeli 28.4 znajduje się opis służących do tego metod i właściwości obsługiwanych przez obiekt HTMLElement. Tabela 28.4. Właściwości i metody odnoszące się do atrybutów Składowa

Opis

Zwracana wartość

attributes

Zwraca nadane elementowi atrybuty.

Attr[]

dataset

Zwraca atrybuty data-*.

tekst[]

getAttribute()

Zwraca wartość podanego atrybutu.

tekst

hasAttribute()

Zwraca wartość true, jeśli elementowi przypisany jest podany atrybut.

wartość_boolowska

removeAttribute()

Usuwa podany atrybut elementu.

void

setAttribute(, )

Nadaje atrybut o podanej nazwie i wartości.

void

Istnieją cztery proste w użyciu i przewidywalne w działaniu metody, które służą do pracy z atrybutami. W listingu 28.4 widnieje przykład ich zastosowania. Listing 28.4. Zastosowanie metod atrybutów

Przykład

There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices.

596

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

W tym przykładzie sprawdziłem, dodałem i zmieniłem wartości atrybutu lang. Rezultat zastosowania tego skryptu widać na rysunku 28.4.

Rysunek 28.4. Zastosowanie metod atrybutów

Praca z atrybutami data-* W rozdziale 3. wspomniałem, że HTML5 obsługuje niestandardowe atrybuty, wykorzystując do tego prefiks data-. Oznacza to, że możesz stworzyć atrybut w rodzaju data-mójnowyatrybut. Z niestandardowymi atrybutami w DOM można pracować z wykorzystaniem właściwości dataset, która zwraca tablicę wartości indeksowanych według nazwy owej niestandardowej właściwości. W listingu 28.5 widnieje przykład. Listing 28.5. Zastosowanie właściwości dataset

Przykład





597

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Istnieje wiele różnych rodzajów owoców — sam ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Tablica wartości zwróconych przez właściwość dataset nie jest indeksowana według pozycji, tak jak ma to miejsce w przypadku standardowych tablic. Do wyliczania atrybutów data-* należy użyć deklaracji for...in, tak jak w listingu. Możesz też przywołać wartość według jej nazwy. Zauważ, że należy tu podać jedynie tę część nazwy atrybutu, która znajduje się po członie data-*. Jeśli więc chcesz sprawdzić wartość atrybutu data-owoc, to powinieneś przywołać wartość dataset["owoc"]. Rezultat zastosowania tego skryptu widać na rysunku 28.5.

Rysunek 28.5. Zastosowanie właściwości dataset

Praca ze wszystkimi atrybutami Zbiór wszystkich atrybutów elementu możesz pozyskać przy użyciu właściwości attributes, która zwraca tablicę obiektów Attr. Właściwości obiektu Attr opisane są w tabeli 28.5. Tabela 28.5. Właściwości obiektu Attr Właściwości

Opis

Zwracana wartość

name

Zwraca nazwę atrybutu.

tekst

value

Zwraca lub definiuje wartość atrybutu.

tekst

W listingu 28.6 widnieje przykład zastosowania właściwości attributes i obiektu Attr do odczytania i zmodyfikowania atrybutów elementu.

598

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Listing 28.6. Praca z właściwością attributes

Przykład

Istnieje wiele różnych rodzajów owoców — sam ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Jak widać w listingu, atrybuty w tablicy obiektów Attr indeksowane są według pozycji i nazwy. W tym przykładzie wyliczyłem nazwy i wartości przypisanych elementowi atrybutów, a następnie zmieniłem wartość jednego z nich. Rezultat zastosowania tego skryptu widać na rysunku 28.6.

Rysunek 28.6. Zastosowanie właściwości attributes

599

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Praca z tekstem Zawartość tekstową elementu reprezentuje obiekt Text, który w modelu dokumentu występuje jako dziecko owego elementu. W listingu 28.7 widnieje element z treścią tekstową. Listing 28.7. Element z treścią tekstową ...

Istnieje wiele różnych rodzajów owoców — sam ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

...

Reprezentowany w modelu dokumentu element p przybiera postać obiektu HTMLElement, a jego treść reprezentowana jest przez obiekt Text, tak jak widać na rysunku 28.7.

Rysunek 28.7. Relacja pomiędzy obiektami reprezentującymi element i jego treść Wszystkie zawierające tekst dzieci elementu obsługiwane są w ten sam sposób. W listingu 28.8 zamieściłem w akapicie dodatkowy element. Listing 28.8. Dodanie elementu do akapitu ...

Istnieje wiele różnych rodzajów owoców — sam ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

...

Wprowadzenie elementu b zmienia hierarchię węzłów tak, by przedstawiony w niej był element p i jego zawartość, tak jak widać to na rysunku 28.8.

Rysunek 28.8. Rezultat dodania elementu do akapitu Pierwsze dziecko elementu p jest obiektem Text, który reprezentuje tekst od początku bloku do elementu b. Element b ma własne dziecko, jakim jest obiekt Text, który reprezentuje treść zawartą pomiędzy jego otwierającym a zamykającym znacznikiem. Wreszcie, ostatnie dziecko elementu p jest obiektem Text, reprezentującym tekst znajdujący się po elemencie b — do końca bloku. W tabeli 28.6 znajduje się opis składowych obsługiwanych przez obiekt Text. Niestety, nie ma żadnego wygodnego sposobu na znajdowanie elementów Text, poza wyszukiwaniem obiektów elementów-rodziców i przechodzeniem przez ich dzieci. Praca z elementami Text jest wobec tego trudniejsza, niż powinna. W listingu 28.9 widnieją niektóre z metod i właściwości elementu Text. Po naciśnięciu elementu button wyświetlana jest liczba znaków w pierwszym dziecku Text elementu p, a jego zawartość zostaje zmieniona metodą replaceWholeText.

600

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Tabela 28.6. Składowe obiektu Text Składowa

Opis

Zwraca

appendData()

Dodaje określony ciąg znaków na końcu bloku tekstowego.

void

data

Zwraca lub definiuje tekst.

tekst

deleteData(, )

Usuwa tekst z ciągu znaków. Pierwsza liczba określa pozycję, a druga liczbę znaków do usunięcia.

void

insertData(, )

Zamieszcza podany ciąg znaków na określonej pozycji.

void

length

Zwraca liczbę znaków.

liczbę

replaceData(, , )

Zamienia wskazany zakres tekstu na określony ciąg znaków.

void

replaceWholeText()

Zamienia cały tekst.

Text

splitText()

Dzieli element Text na dwa osobne elementy we wskazanym miejscu. W punkcie „Wstawienie elementu do bloku tekstu” znajdziesz przykład zastosowania tej metody.

Text

substringData(, )

Zwraca ciąg znaków z tekstu.

tekst

wholeText

Zwraca tekst.

tekst

Listing 28.9. Praca z obiektami Text

Przykład

Istnieje wiele różnych rodzajów owoców — sam ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Naciśnij mnie



601

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

„ Ostrzeżenie Trzeba koniecznie zwrócić uwagę, że przy pracy z tekstem białe znaki nie są kondensowane. Oznacza to, że wszelkie spacje i inne białe znaki służące do ustrukturyzowania kodu HTML są traktowane jako część tekstu.

Modyfikacja modelu W poprzednich punktach pokazałem Ci, jak używać DOM do modyfikowania pojedynczych elementów. Przy użyciu DOM możesz — na przykład — zmieniać atrybuty i treść tekstową. Jest to możliwe, ponieważ DOM jest aktywnie połączony z dokumentem. Wprowadzenie zmiany w DOM sprawia, że przeglądarka wprowadza odpowiednią zmianę w dokumencie. Dzięki temu połączeniu można nawet zmienić strukturę dokumentu. Można dodawać, usuwać, powielać i kopiować elementy w dowolny sposób. W tym celu wystarczy zmienić hierarchię DOM, a jako że wspomniane połączenie działa na bieżąco, zmiany hierarchii natychmiast stają się widoczne w przeglądarce. W tabeli 28.7 znajduje się opis właściwości i metod służących do zmiany hierarchii DOM. Tabela 28.7. Składowe służące do manipulacji strukturą DOM Składnik

Opis

Zwracana wartość

appendChild(HTMLElement)

Dodaje podanemu elementowi dziecko określonego typu.

HTMLElement

cloneNode(boolean)

Kopiuje element.

HTMLElement

compareDocumentPosition(HTMLElement)

Określa względne położenie elementu.

liczba

innerHTML

Zwraca lub definiuje treść elementu.

tekst

insertAdjacentHTML(, )

Zamieszcza kod HTML w miejscu określonym względem elementu.

void

insertBefore(, )

Zamieszcza podany element przed określonym elementem-dzieckiem.

HTMLElement

isEqualNode()

Określa, czy podany element jest równy bieżącemu elementowi.

wartość_boolowska

isSameNode(HTMLElement)

Określa, czy podany element jest tożsamy z bieżącym elementem.

wartość_boolowska

outerHTML

Zwraca lub definiuje kod HTML i zawartość elementu.

tekst

removeChild(HTMLElement)

Usuwa określone dziecko bieżącego elementu.

HTMLElement

replaceChild(HTMLElement, HTMLElement)

Zastępuje dziecko bieżącego elementu.

HTMLElement

Przedstawione tutaj właściwości i metody obsługiwane są przez wszystkie obiekty elementów. Ponadto, obiekt document obsługuje dwie metody służące do tworzenia nowych elementów. Funkcja ta jest nieodzowna, kiedy chce się dodać treść do dokumentu. Opis tych metod znajduje się w tabeli 28.8. Tabela 28.8. Składowe służące do manipulacji strukturą DOM Składowa

Opis

Zwraca

createElement()

Tworzy nowy obiekt HTMLElement określonego typu.

HTMLElement

createTextNode()

Tworzy nowy obiekt Text o podanej treści.

Text

602

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Tworzenie i usuwanie elementów Nowe elementy tworzy się przy użyciu obiektu document, a następnie wprowadza je poprzez odnalezienie istniejącego HTMLElement i wykorzystanie jednej z opisanych powyżej metod. W listingu 28.10 znajduje się przykład zastosowania tej funkcji. Listing 28.10. Tworzenie i usuwanie elementów

Przykład

Nazwa	Kolor
Banan	Żółty
Jabłko	Czerwony/Zielony

Dodaj element Usuń element



Podany w tym przykładzie skrypt wykorzystuje DOM przy dodawaniu i usuwaniu rzędów w elemencie table (o którym pisałem w rozdziale 11.). Dodawanie rzędu zaczynam od utworzenia elementu tr, którego

603

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

następnie używam jako rodzica obiektów td i Text. Zauważ, że wykorzystałem rezultaty metody do utworzenia łańcucha przywołań i odrobinę uprościłem kod. Jak widzisz, tworzenie elementów jest pracochłonne. Trzeba utworzyć element, powiązać go z rodzicem, a następnie powtórzyć proces przy każdym elemencie-dziecku bądź obiekcie Text. Usuwanie elementów również jest mało poręczne. W tym celu trzeba znaleźć element, przejść do elementu-rodzica, a następnie użyć metody removeChild. Rezultat zastosowania tego skryptu widać na rysunku 28.9.

Rysunek 28.9. Wykorzystanie DOM do tworzenia i usuwania elementów

Powielanie elementów Metoda cloneNode służy do powielania istniejących elementów. Jest ona wygodna o tyle, że pozwala na uniknięcie tworzenia elementów od podstaw. W listingu 28.11 znajduje się przykład zastosowania tej techniki. Listing 28.11. Powielanie elementów

Przykład







604

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Pomnóż	Wynik
1 x 1	1

Dodaj rząd



W tym przykładzie powieliłem znajdujący się w tabeli rząd. Boolowski argument metody cloneNode określa, czy elementy-dzieci również mają być powielone. W tym przypadku podałem wartość true, ponieważ chciałem, by elementy td zawarte w elemencie tr utworzyły strukturę nowego rzędu. „ Wskazówka Zauważ, jak niezręcznie wygląda określanie tekstu komórek tabeli w tym przykładzie. Praca z obiektami Text jest naprawdę męcząca. Z prostszym podejściem zapoznasz się w punkcie „Praca z fragmentami HTML” w dalszej części tego rozdziału.

Przenoszenie elementów Przenoszenie elementów z jednej części dokumentu do drugiej polega zwyczajnie na powiązaniu elementu z jego nowym rodzicem. Nie musisz przenosić elementu z jego pozycji wyjściowej. W listingu 28.12 widnieje przykład przeniesienia rzędu z jednej tabeli do drugiej. Listing 28.12. Przenoszenie elementów

Przykład



605

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Owoc	Kolor
Banan	Żółty
Jabłko	Czerwony/Zielony

Owoc	Kolor
Śliwka	Fioletowy

Przenieś rząd

Po naciśnięciu przycisku skrypt przenosi element tr z atrybutem id o wartości apple i używa metody appendChild na elemencie tbody o atrybucie id o wartości fruitsBody. Rezultatem jest przeniesienie rzędu z jednej tabeli do innej, co widać na rysunku 28.10.

Rysunek 28.10. Przeniesienie elementu z jednej części dokumentu do innej

Porównywanie obiektów elementów Obiekty elementów można porównywać na dwa sposoby. Po pierwsze, wystarczy sprawdzić, czy reprezentują ten sam element, co robi się przy użyciu metody isSameNode. Pozwala to na porównanie obiektów, które zostały pozyskane w różnych kwerendach, tak jak widać to w listingu 28.13.

606

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Listing 28.13. Porównanie obiektów elementów

Przykład

Owoc	Kolor
Śliwka	Fioletowy

Podany w tym przykładzie skrypt znajduje obiekty elementów na dwa różne sposoby: szukając konkretnego id oraz przeszukując element-rodzica według rodzaju znacznika. Metoda isSameNode zwraca wartość true przy porównywaniu tych obiektów, ponieważ reprezentują ten sam element. Zamiast tego można też sprawdzić, czy obiekty są sobie równe, co robi się metodą isEqualNode. Elementy są równe, kiedy są jednakowego typu, mają te same wartości atrybutów, a także wszystkie ich dzieci są równe i występują w tej samej kolejności. W listingu 28.14 znajduje się przykład pary równych elementów. Listing 28.14. Praca z równymi elementami

Przykład

Owoc	Kolor
Śliwka	Fioletowy

Owoc	Kolor
Śliwka	Fioletowy

W tym przykładzie obydwa elementy tr są równe, pomimo że są osobnymi elementami w różnych częściach dokumentu. Gdybym zmienił którykolwiek z atrybutów lub treść elementu-dziecka td, elementy nie byłyby już równe.

Praca z fragmentami HTML Właściwości innerHTML i outerHTML wraz z metodą insertAdjacentHTML są wygodnymi skrótami składniowymi, które pozwalają na pracę z fragmentami kodu HTML. Dzięki temu można uniknąć tworzenia rozbudowanych hierarchii składających się z obiektów elementów i obiektów tekstowych. W listingu 28.15 widnieje przykład zastosowania właściwości innerHTML i outerHTML do pobierania kodu HTML z elementów. Listing 28.15. Zastosowanie właściwości innerHTML i outerHTML

Przykład

Owoc	Kolor
Śliwka	Fioletowy

Wewnętrzny HTML Zewnętrzny HTML

Właściwość outerHTML zwraca ciąg znaków, w którym znajduje się definiujący element kod HTML oraz kod wszystkich jego dzieci. Właściwość innerHTML zwraca kod HTML samych dzieci. W tym przykładzie utworzyłem dwa przyciski, które służą do wyświetlania „wewnętrznego” i „zewnętrznego” kodu HTML rzędu tabeli. Treść wyświetlana jest w elemencie textarea, tak by przeglądarka traktowała zwracane przez te właściwości ciągi znaków jako tekst, a nie kod HTML dokumentu. Rezultat zastosowania skryptu widać na rysunku 28.11.

Rysunek 28.11. Wyświetlanie właściwości outerHTML rzędu tabeli

609

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Zmiana struktury dokumentu Właściwości outerHTML i innerHTML używa się także do zmiany struktury dokumentu. Właściwości innerHTML użyłem w wielu przykładach przedstawionych w tej części książki. Jest to wygodny sposób ustawiania zawartości elementów, ponieważ umożliwia podawanie treści tekstowej bez konieczności tworzenia elementów Text. W listingu 28.16 widnieje przykład zastosowania tych właściwości w ramach modyfikowania modelu dokumentu. Listing 28.16. Modyfikacja modelu dokumentu

Przykład

Owoc	Kolor
Banan	Żółty
Jabłko	Czerwony/Zielony

Owoc	Kolor
Śliwka	Fioletowy
To jest element zastępczy

Przenieś rząd

610

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

W tym przykładzie użyłem właściwości innerHTML do zdefiniowania elementów-dzieci rzędu tabeli oraz outerHTML do zastąpienia elementu w wierszu. Właściwości te działają, opierając się na ciągach znaków, co oznacza, że fragmenty HTML pozyskuje się przez odczytanie wartości właściwości lub tworzenie ciągów znakowych od podstaw, tak jak widać to w listingu. Rezultat widać na rysunku 28.12.

Rysunek 28.12. Zastosowanie właściwości innerHTML i outerHTML

Wstawianie fragmentów HTML Właściwości innerHTML i outerHTML przydają się przy zastępowaniu istniejących elementów, ale jeśli chcesz użyć fragmentu HTML do wprowadzenia nowych elementów, to musisz skorzystać z metody insertAdjacentHTML. Metoda ta używa dwóch argumentów — pierwszy to wartość z tabeli 28.9, która wskazuje, gdzie fragment powinien być wstawiony względem bieżącego dokumentu, a drugi to właśnie fragment, który ma być wstawiony. Tabela 28.9. Wartości położenia metody insertAdjacentHTML Wartość

Opis

afterbegin

Wstawia fragment jako pierwsze dziecko bieżącego elementu.

afterend

Wstawia fragment bezpośrednio po bieżącym elemencie.

beforebegin

Wstawia fragment bezpośrednio przed bieżącym elementem.

beforeend

Wstawia fragment jako ostatnie dziecko bieżącego elementu.

W listingu 28.17 widnieje przykład wykorzystania metody insertAdjacentHTML przy wstawianiu fragmentów kodu HTML do rzędu tabeli i dookoła niego. Listing 28.17. Zastosowanie metody insertAdjacentHTML

Przykład







611

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Owoc	Kolor
To jest element zastępczy

After Begin After End Before Begin Before End

W tym przykładzie użyłem różnych wartości położenia, by zaprezentować zamieszczanie fragmentów HTML w różnych miejscach. Najlepiej poeksperymentować z nimi w przeglądarce, aczkolwiek ogólny efekt widać na rysunku 28.13.

Rysunek 28.13. Wstawianie fragmentów HTML do dokumentu

Wstawienie elementu do bloku tekstu Istotną wariacją modyfikacji modelu jest możliwość dodania elementu do bloku tekstu reprezentowanego obiektem Text. W listingu 28.18 widnieje tego przykład.

612

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

Listing 28.18. Wstawienie elementu do bloku tekstu

Przykład

Istnieje wiele różnych rodzajów owoców — sam ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Wstaw element

W tym przykładzie wykonałem niebanalne zadanie, jakim jest przeniesienie wyrazu z istniejącego bloku tekstowego i zrobienie z niego dziecka nowego elementu b. Podobnie jak w poprzednich przykładach, praca z modelem wiąże się z tworzeniem dość rozbudowanego kodu. Rezultat widać na rysunku 28.14.

Rysunek 28.14. Zamieszczenie elementu w bloku tekstu

Podsumowanie W tym rozdziale przedstawiłem funkcje obiektów HTMLElement i Text, które — kolejno — reprezentują elementy i treść w dokumentach HTML. Dowiedziałeś się, jak pobierać informacje o elementach z obiektów, jak pracować z treścią tekstową oraz jak wykorzystywać możliwości DOM, by dodawać, modyfikować,

613

ROZDZIAŁ 28. „ PRACA Z ELEMENTAMI DOM

powielać, przenosić i usuwać elementy. Praca z DOM może wymagać tworzenia rozbudowanych skryptów, ale aktywne połączenie między modelem obiektowym a wyglądem dokumentu sprawia, że jest to warte wysiłku.

614

ROZDZIAŁ 29

Stylizacja elementów DOM

Jak wiesz z rozdziału 4., style można przypisywać elementom pośrednio (przy użyciu arkusza stylu lub elementu style) lub bezpośrednio (z użyciem atrybutu style). W tym rozdziale pokażę Ci, jak używać DOM w pracy ze stylami CSS dokumentów — zarówno tymi, które zdefiniowałeś, jak i obliczonymi stylami o automatycznie wyliczonych wartościach, którymi przeglądarka posługuje się przy wyświetlaniu elementów. Specyfikacja pracy z CSS w DOM opisuje rozbudowane hierarchie typów obiektów, które często nie są w ogóle obsługiwane przez przeglądarki. W tym rozdziale znajduje się uproszczony spis obiektów, które rzeczywiście są obsługiwane. W tabeli 29.1 znajduje się streszczenie całego rozdziału. Zauważ, że nie wszystkie przykłady działają w popularnych przeglądarkach. Tabela 29.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Pozyskanie podstawowych informacji o arkuszu stylów.

Użyj właściwości CSSStyleSheet.

29.1

Pozyskanie szczegółowych informacji o ograniczeniach medium obowiązujących dany arkusz stylów.

Użyj obiektu MediaList.

29.2

Użyj właściwości disabled obiektu

29.3

Aktywacja i dezaktywacja arkusza stylów.

CSSStyleSheet.

Pozyskanie szczegółowych informacji o poszczególnych stylach z arkusza stylów.

Użyj obiektów CSSRuleList i CSSStyleRule.

29.4

Pobranie stylu z atrybutu style elementu.

Użyj właściwości HTML.style.

29.5

Pobranie lub zdefiniowanie wartości podstawowych właściwości CSS.

Użyj właściwości pomocniczych obiektu CSSStyleDeclaration.

29.6

Pobranie lub zdefiniowanie wartości wszystkich właściwości CSS.

Użyj metod setProperty i getPropertyValue.

29.7

Sprawdzenie właściwości zdefiniowanych w stylu.

Wylicz style przy użyciu właściwości length i metody getPropertyValue.

29.8

Pobranie lub zdefiniowanie priorytetu właściwości.

Użyj metod getPropertyPriority i setProperty.

29.9

Praca ze szczegółowymi obiektami CSS w DOM.

Użyj metody getPropertyCSSValue.

29.10

Użyj metody

29.11

Pozyskanie obliczonego stylu elementu.

document.defaultView.getComputedStyle.

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Praca z arkuszami stylów Dostęp do arkuszy CSS dokumentu uzyskuje się za pośrednictwem właściwości document.styleSheets, która zwraca zbiór obiektów reprezentujących powiązane z dokumentem arkusze stylów. W tabeli 29.2 znajduje się opis tej właściwości. Tabela 29.2. Uzyskiwanie dostępu do arkuszy stylów Właściwość document.styleSheets

Opis

Zwracana wartość

Zwraca kolekcję arkuszy stylów.

CSSStyleSheet[]

Każdy arkusz stylów reprezentowany jest przez obiekt CSSStyleSheet, który obsługuje szereg właściwości i metod służących do manipulowania stylami dokumentu. W tabeli 29.3 znajduje się opis składowych CSSStyleSheet. Tabela 29.3. Składowe obiektu CSSStyleSheet Składowa

Opis

Zwracana wartość

cssRules

Zwraca zbiór wartości zawartych w arkuszu stylów.

CSSRuleList

deleteRule()

Usuwa regułę z arkusza stylów.

void

disabled

Sprawdza, czy arkusz stylów jest zdezaktywowany, lub dezaktywuje go.

wartość_boolowska

href

Zwraca wartość href połączonych arkuszy stylów.

tekst

insertRule(, )

Wprowadza nową regułę do arkusza stylów.

liczba

media

Zwraca zbiór ograniczeń medium obowiązujący arkusz stylów.

MediaList

ownerNode

Zwraca element, w którym zdefiniowano styl.

HTMLElement

title

Zwraca wartość atrybutu title.

tekst

type

Zwraca wartość atrybutu type.

tekst

Pobieranie podstawowych informacji o arkuszach stylów Zacząć należy od uzyskania podstawowych informacji o arkuszach stylów zdefiniowanych w dokumencie. W listingu 29.1 znajduje się przykład. Listing 29.1. Pobranie podstawowych informacji o arkuszach stylów w dokumencie

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Podany w tym przykładzie skrypt wylicza zdefiniowane w dokumencie arkusze stylów i tworzy element table, zawierający podstawowe informacje o każdym z nich. W tym dokumencie zawarte są trzy arkusze stylów. Dwa są zdefiniowane przy użyciu elementów style, a trzeci znajduje się w zewnętrznym pliku styles.css, który jest importowany elementem link. Dane wyjściowe skryptu widać na rysunku 29.1. Zauważ, że nie wszystkie właściwości mają wartości. Przykładowo, właściwość href zwraca wartość

tylko, jeśli arkusz stylów zostaje wczytany z zewnętrznego pliku.

Praca z ograniczeniami medium Jak pokazałem w rozdziale 7., przy definiowaniu arkuszy stylów można użyć atrybutu media, by ograniczyć sytuacje, w których owe style się w ogóle nadaje. Dostęp do tych ograniczeń możesz uzyskać przy użyciu właściwości CSSStyleSheet.media, która zwraca obiekt MediaList. Metody i właściwości obiektu MediaList opisane są w tabeli 29.4.

617

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Rysunek 29.1. Pobranie informacji o arkuszach stylów dokumentu Tabela 29.4. Składowe obiektu MediaList Składowa

Opis

Zwracana wartość

appendMedium()

Dodaje nowe medium do listy.

void

deleteMedium()

Usuwa medium z listy.

void

item()

Zwraca medium wskazane miejscem indeksowym.

tekst

length

Zwraca liczbę mediów.

liczba

mediaText

Zwraca wartość tekstową atrybutu media.

tekst

W listingu 29.2 widnieje przykład zastosowania obiektu MediaList. Listing 29.2. Zastosowanie obiektu MediaList

Przykład





618

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

W tym przykładzie utworzyłem tabelę z wszelkimi arkuszami stylów, w których występuje atrybut media. W tabeli znajduje się wyliczenie poszczególnych mediów, całkowita liczba mediów podanych jako wartość atrybutu oraz sam ciąg znaków atrybutu media. Rezultat zastosowania skryptu widać na rysunku 29.2.

Rysunek 29.2. Praca z obiektem MediaList

619

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Dezaktywowanie arkuszy stylów Właściwość CSSStyleSheet.disabled umożliwia aktywowanie i dezaktywowanie wszystkich stylów arkuszu jednym poleceniem. W listingu 29.3 widnieje przykład zastosowania tej właściwości do przełączania aktywności arkusza. Listing 29.3. Aktywacja i dezaktywacja arkusza stylów

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Naciśnij mnie



W tym przykładzie kliknięcie przycisku przełącza wartość właściwości disabled (jedynego tutaj) arkusza stylów. Po dezaktywacji arkusza żaden z zawartych w nim stylów nie jest nadawany elementom, co widać na rysunku 29.3.

Rysunek 29.3. Dezaktywacja i aktywacja arkusza stylów

620

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Praca z wybranymi stylami Właściwość CSSStyleSheet.cssRules zwraca obiekt CSSRuleList, który daje dostęp do poszczególnych stylów w arkuszu. Składowe tego obiektu opisane są w tabeli 29.5. Tabela 29.5. Składowe obiektu CSSRuleList Składowa

Opis

Zwracana wartość

item()

Zwraca styl CSS wskazany pozycją indeksową.

CSSStyleRule

length

Zwraca liczbę stylów w arkuszu.

liczba

Każdy styl CSS w arkuszu reprezentowany jest przez obiekt CSSStyleRule. Składowe CSSStyleRule opisane są w tabeli 29.6. Tabela 29.6. Składowe obiektu CSSStyleRule Składowa

Opis

Zwracana wartość

cssText

Pobiera lub definiuje treść (w tym selektor) stylu.

tekst

parentStyleSheet

Pobiera arkusz stylu, w którym zawarty jest styl.

CSSStyleSheet

selectorText

Pobiera lub definiuje treść selektora stylu.

tekst

style

Pobiera obiekt reprezentujący style.

CSSStyleDeclaration

W listingu 29.4 widnieje przykład zastosowania obiektu CSSRuleList i podstawowych właściwości obiektu CSSStyleRule. Podstawowych, ponieważ właściwość style zwraca właściwość CSSStyleDeclaration, dzięki której można się zagłębić w stylu i która jest obiektem używanym przy nadawaniu stylów wybranym elementom. Więcej na temat obiektu CSSStyleDeclaration przeczytasz w punkcie „Praca z obiektami CSSStyleDeclaration” w dalszej części rozdziału. Listing 29.4. Praca z obiektami CSSRuleList i CSSStyleRule

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

621

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Naciśnij mnie



W tym przykładzie użyłem tych obiektów w dwóch celach. Po pierwsze, uzyskałem informacje o zdefiniowanych stylach, arkuszu stylu, selektorze i poszczególnych deklaracjach. Widać to na rysunku 29.4. „ Wskazówka Zwróć uwagę, że podane w deklaracjach stylów właściwości zbiorcze rozkładane są przez przeglądarkę na właściwości składowe. Nie wszystkie przeglądarki tak robią. Niektóre, m.in. Firefox, wyświetlają właściwości zbiorcze, a inne, tak jak Chrome, nie. Jeżeli chcesz przetworzyć kod CSS jako ciąg znaków, to musisz wziąć to pod uwagę, choć zazwyczaj taki bezpośredni sposób pracy z wartościami CSS to zły pomysł. W punkcie „Praca z obiektami CSSStyleDeclaration” znajduje się omówienie lepszego podejścia.

Skrypt ten również wykazuje, jak łatwo można zmienić styl. Po kliknięciu przycisku button selektor jednego ze stylów zmienia się z #block1 na #block2, przez co zmienia się element p, do którego odnosi się

622

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Rysunek 29.4. Uzyskanie informacji o stylu styl. Podobnie jak w przypadku innych zmian w DOM, przeglądarka natychmiast odwzorowuje zmianę selektora i aktualizuje sposób, w jaki style są przypisane, co widać na rysunku 29.5.

Rysunek 29.5. Zmiana selektora stylu

Praca ze stylami elementów Aby pozyskać właściwości zdefiniowane w atrybucie style elementu, musisz odczytać wartość właściwości style obiektów HTMLElement (o których przeczytasz więcej w rozdziale 28.). Właściwość style zwraca obiekt CSSStyleDeclaration — jest to obiekt takiego samego typu, jakie pozyskuje się za pośrednictwem arkuszy stylów. Opiszę go szczegółowo w następnym punkcie. Do przedstawienia właściwości HTMLElement.style w listingu 29.5 użyłem właściwości CSSStyleDeclaration.cssText, aby wyświetlić i zmodyfikować nadane elementowi właściwości stylów. Listing 29.5. Pozyskanie obiektu CSSStyleDeclaration z obiektu HTMLElement

Przykład

623

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Naciśnij mnie



Skrypt ten wyświetla wartości atrybutu style elementu i sprawia, że po kliknięciu przycisku button wartości odnoszą się do innego stylu. Rezultat widać na rysunku 29.6. Na powyższym rysunku użyłem Firefoksa, ponieważ wyświetla on właściwości zbiorcze nazw jako wartość cssText. „ Wskazówka W punkcie o arkuszach stylów wytłumaczyłem, że lepiej nie próbować przetwarzać wartości właściwości cssText bezpośrednio. To samo odnosi się do pracy z pojedynczymi elementami. W punkcie traktującym o obiekcie CSSStyleDeclaration zapoznasz się z wydajniejszym sposobem zagłębiania się w szczegóły wartości właściwości CSS.

Praca z obiektami CSSStyleDeclaration To, czy zajmujesz się arkuszami stylów, czy atrybutami style elementów, nie jest istotne. Aby uzyskać pełną kontrolę nad CSS za pośrednictwem DOM, musisz skorzystać z obiektu CSSStyleDeclaration. W tabeli 29.7 znajduje się opis składowych tego istotnego obiektu.

624

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Rysunek 29.6. Odczytanie i zmiana stylu odnoszącego się do elementu Tabela 29.7. Składniki obiektu CSSStyleDeclaration Składowa

Opis

Zwracana wartość

cssText

Pobiera lub modyfikuje treść stylu.

tekst

getPropertyCSSValue()

Pobiera wskazaną właściwość.

CSSPrimitiveValue

getPropertyPriority()

Pobiera priorytet wskazanej właściwości.

tekst

getPropertyValue()

Pobiera wskazaną wartość jako ciąg znaków.

tekst

item()

Pobiera element o wskazanej pozycji indeksowej.

tekst

length

Pobiera liczbę elementów.

liczba

parentRule

Pobiera regułę stylu, jeżeli takowa istnieje.

CSSStyleRile

removeProperty()

Usuwa wskazaną właściwość.

tekst

setProperty(, , )

Określa wartość i priorytet wskazanej właściwości.

void

Właściwość pomocnicza służąca do pobierania lub definiowania wskazanej właściwości CSS.

tekst

Poza metodą item większość przeglądarek obsługuje notację tablicową, wobec czego elementy element(4) i element[4] są równoznaczne.

Praca z właściwościami pomocniczymi Z obiektem CSSStyleDeclaration najłatwiej pracuje się przy użyciu właściwości pomocniczych, które odpowiadają poszczególnym właściwościom CSS. Bieżącą wartość właściwości CSS możesz określić poprzez odczytanie właściwości reprezentującego ją obiektu i zmianę wartości CSS poprzez przypisanie nowej wartości właściwości obiektu.

625

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

„ Wskazówka Wartości, które odczytuję i modyfikuję w tym punkcie, to wartości skonfigurowane. W praktyce odczytuje się i modyfikuje wartości zdefiniowane w dokumencie HTML — w arkuszu stylów lub przypisane bezpośrednio elementom. Kiedy przeglądarka wyświetla element, to robi to na podstawie wygenerowanego zbioru wartości obliczonych, w ramach którego style przeglądarek, arkuszy stylów i atrybutów style kaskadują oraz są dziedziczone na podstawie modelu opisanego w rozdziale 4. W punkcie „Praca z obliczonymi stylami” dowiesz się więcej na temat pozyskiwania obliczonych wartości CSS elementu.

W listingu 29.6 widnieje przykład. Listing 29.6. Praca z właściwościami pomocniczymi obiektu CSSStyleDeclaration

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Naciśnij mnie



Przedstawiony w listingu 29.6 skrypt wyświetla wartości czterech właściwości pomocniczych CSSStyleDeclaration. Są one odczytywane z obiektów pozyskanych z arkusza stylów i atrybutu style

elementu, co ukazuje dwa różne sposoby pobierania tych obiektów. Wygląd tych wartości widać na rysunku 29.7.

Rysunek 29.7. Odczytywanie wartości z właściwości pomocniczych stylu Właściwości pomocnicze border, color i padding odpowiadają właściwościom CSS o tych samych nazwach. Właściwość pomocnicza paddingTop odpowiada właściwości CSS padding-top. Przełożenie nazewnictwa wielowyrazowych właściwości CSS polega na usunięciu dywizów oraz pisaniu drugiego i kolejnych członów od wielkich liter. Jak widać, istnieją właściwości pomocnicze odpowiadające zarówno

627

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

zbiorczym, jak i indywidualnym właściwościom CSS (np. padding i paddingTop). Właściwości pomocnicze zwracają pusty ciąg znaków (""), kiedy odpowiadającym im właściwościom CSS nie jest przypisana żadna wartość. Po kliknięciu przycisku skrypt modyfikuje wartość pojedynczych właściwości dopełnienia, używając do tego właściwości pomocniczych paddingTop, paddingBottom, paddingLeft i paddingRight obiektu CSSStyleDeclaration, pozyskanego z pierwszego arkusza stylów dokumentu. Rezultat widać na rysunku 29.8. Zmiana wartości wywołuje natychmiastową zmianę wyglądu dokumentu, a ponadto zbiorcze i indywidualne właściwości pomocnicze odpowiednio ulegają zmianie, by odzwierciedlić nowe wartości.

Rysunek 29.8. Zmiana właściwości CSS za pośrednictwem obiektu CSSStyleDeclaration

Praca ze standardowymi właściwościami Właściwości pomocnicze są łatwe w użyciu, o ile znasz już nazwy właściwości CSS, z którymi chcesz pracować, i pod warunkiem że rzeczywiście odpowiadają im jakieś właściwości pomocnicze. Jeżeli chcesz zapoznać się z właściwościami CSS automatycznie lub pobrać bądź zdefiniować właściwość CSS, której nie odpowiada żadna właściwość zbiorcza, to mogą Ci się przydać inne składowe obiektu CSSStyleDeclaration. W listingu 29.7 widnieje przykład zastosowania niektórych z tych właściwości. Listing 29.7. Zastosowanie standardowych właściwości obiektu CSSStyleDeclaration

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Naciśnij mnie



W tym przykładzie odczytałem właściwości stylów z jednego tylko źródła — arkusza. Użyłem metody getPropertyValue do pobrania wartości właściwości CSS, a także metody setProperty do zdefiniowania

nowych wartości. Zauważ, że z tymi metodami trzeba używać standardowych nazw właściwości CSS, a nie nazw właściwości pomocniczych.

629

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Automatyczne sprawdzanie właściwości W podanych dotąd przykładach bezpośrednio wskazywałem właściwości CSS, z którymi chciałem pracować. Gdybym chciał pozyskać informacje co do tego, które właściwości zostały wcześniej nadane, musiałbym to zrobić przy użyciu składowych CSSStyleDeclaration, jak widać w listingu 29.8. Listing 29.8. Automatyczne sprawdzanie właściwości CSS

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Zawarty w tym przykładzie skrypt wylicza właściwości pierwszego stylu w arkuszu. Rezultat widać na rysunku 29.9.

630

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Rysunek 29.9. Wyliczenie właściwości stylu

Sprawdzenie ważności właściwości stylu Jak już wspomniałem w rozdziale 4., możesz przypisać deklaracji właściwości dyrektywę !important, by nadać jej wartości priorytet, kiedy przeglądarka określa, którymi wartościami posłużyć się przy wyświetlaniu elementu. W pracy z obiektem CSSStyleDeclaration możesz użyć metody getPropertyPriority, żeby sprawdzić, czy właściwości nadano dyrektywę !important. Przykład znajdziesz w listingu 29.9. Listing 29.9. Sprawdzenie ważności właściwości

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Metoda getPropertyPriority zwraca wartość important w przypadku właściwości o wysokim priorytecie, a pusty ciąg znaków (""), jeśli nie zdefiniowano informacji o ważności. „ Wskazówka Metodą setProperty możesz określić ważność wartości. Przy wcześniejszej demonstracji metody setProperty pominąłem argument definiujący ważność, ale jeżeli chcesz nadać wartości dyrektywę !important, to podaj important jako trzeci argument metody setProperty.

Zastosowanie szczegółowych obiektów CSS w DOM Wyliczając zawarte w stylu właściwości i używając metody getPropertyValue, możesz sprawdzić, jakie właściwości zostały wykorzystane. Tym niemniej i tak musisz coś wiedzieć o właściwościach, by móc z nich skorzystać. Przykładowo, musisz wiedzieć, że wartości właściwości width wyrażane są jednostkami długości, a wartości właściwości animation-delay jednostkami czasu. W niektórych sytuacjach może Ci nie zależeć na tym, by wiedzieć o takich rzeczach z wyprzedzeniem. Możesz zatem użyć metody CSSStyleDeclaration.getPropertyCSSValue do pozyskiwania obiektów CSSPrimitiveValue reprezentujących wartości zdefiniowane dla każdej właściwości w stylu. W tabeli 29.8 znajduje się opis składowych obiektu CSSPrimitiveValue. Tabela 29.8. Składowe obiektu CSSPrimitiveValue Składowa

Opis

Zwracana wartość

cssText

Pobiera tekstowe odwzorowanie wartości.

tekst

getFloatValue()

Pobiera wartość liczbową.

liczba

getRGBColorValue()

Pobiera wartość koloru.

RGBColor

getStringValue()

Pobiera wartość będącą ciągiem znaków.

tekst

primitiveType

Pobiera typ jednostki, w jakiej wyrażana jest wartość.

liczba

setFloatValue(, )

Określa wartość liczbową.

void

setStringValue(, )

Określa treść ciągu znaków.

void

632

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Kluczem do korzystania z obiektu CSSPrimitiveValue jest właściwość primitiveType, która zwraca jednostki, w jakich wyrażana jest wartość właściwości. Zdefiniowane typy jednostek znajdziesz w tabeli 29.9. Odpowiadają one jednostkom CSS, które opisałem w rozdziale 4. Tabela 29.9. Składowe obiektu CSSPrimitiveValue Typy jednostek

Opis

CSS_NUMBER

Jednostka wyrażona jest liczbowo.

CSS_PERCENTAGE

Jednostka wyrażona jest procentowo.

CSS_EMS

Jednostka wyrażona jest w firetach.

CSS_PX

Jednostka wyrażona jest w pikselach CSS.

CSS_CM

Jednostka wyrażona jest w centymetrach.

CSS_IN

Jednostka wyrażona jest w calach.

CSS_PT

Jednostka wyrażona jest w punktach.

CSS_PC

Jednostka wyrażona jest w pica.

CSS_DEG

Jednostka wyrażona jest w stopniach.

CSS_RAD

Jednostka wyrażona jest w radianach.

CSS_GRAD

Jednostka wyrażona jest w gradach.

CSS_MS

Jednostka wyrażona jest w milisekundach.

CSS_S

Jednostka wyrażona jest w sekundach.

CSS_STRING

Jednostka wyrażona jest w ciągach znakowych.

CSS_RGBCOLOR

Jednostka wyrażona jest jako kolor.

W listingu 29.10 widnieje przykład zastosowania tego obiektu do określenia liczby jednostek i typu jednostki wartości właściwości CSS. Listing 29.10. Zastosowanie obiektu CSSPrimitiveValue

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

633

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM



Jedną z najbardziej przydatnych funkcji obiektu CSSPrimitiveValue jest możliwość konwersji jednostek. Skrypt z listingu 29.10 sprawdza wartości, które są wyrażone jako piksele, i wyraża je w punktach i calach. Oznacza to, że możesz pracować z wartościami wyrażanymi jednostkami, które Ci odpowiadają, a nie zdawać się na domyślne. Zauważ, że wartości koloru pobierane są przy użyciu metody GetRGBColorValue, która zwraca obiekt RGBColor. Obiekt ten ma trzy właściwości (kolor czerwony, zielony i niebieski), które zwracają własne obiekty. Sposób, w jaki przeglądarka radzi sobie z rodzajami jednostek, widać na rysunku 29.10.

Praca z obliczonymi stylami Wszystkie przedstawione w tym rozdziale przykłady dotyczyły wartości właściwości CSS zdefiniowanych w arkuszach lub atrybutach style. Przydaje się to, kiedy chce się określić, co jest zawarte w samym dokumencie, ale — jak wspomniałem w rozdziale 4. — przeglądarka zestawia style z różnych źródeł, kiedy sprawdza, jakich wartości powinna użyć przy wyświetlaniu elementów. Wliczają się w to właściwości, którym nie zdefiniowałeś bezpośrednio wartości, a które są albo dziedziczone, albo oparte na konwencji stylistycznej używanej przez przeglądarkę.

634

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Rysunek 29.10. Praca z obiektem CSSPrimitiveValue Zbiór wartości właściwości CSS używany przez przeglądarkę do wyświetlania elementu nazywany jest stylem obliczonym. Obiekt CSSStyleDeclaration zawierający obliczony styl elementu można pozyskać przy użyciu metody document.defaultView.getComputedStyle. Zwracany przez tę metodę obiekt zawiera szczegóły wszystkich właściwości, których przeglądarka używa do wyświetlania elementu, oraz ich wartości. „ Wskazówka Obliczonego stylu nie można zmienić przy użyciu obiektu CSSStyleDeclaration, pozyskiwanego metodą getComputedStyle. W tym celu należy zmodyfikować arkusz stylów lub bezpośrednio nadać właściwość atrybutowi style elementu, tak jak opisałem to wcześniej.

W listingu 29.11 widnieje przykład pracy z wartościami obliczonych właściwości. Listing 29.11. Praca z obliczonym stylem elementu

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie wyświetliłem wartości niektórych właściwości, których sam nie zdefiniowałem. Rezultat widać na rysunku 29.11. Widać tu też, dlaczego pokazałem tylko kilka właściwości. W pierwszym rzędzie znajduje się informacja o liczbie obliczonych stylów. Liczebność różni się w zależności od przeglądarki, ale 223 właściwości zgłoszone przez Chrome to standard.

Rysunek 29.11. Praca z obliczonym stylem

636

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

Podsumowanie W tym rozdziale pokazałem Ci różne sposoby, na jakie możesz używać DOM w pracy z właściwościami i wartościami CSS dokumentu HTML. Możesz pracować z arkuszami stylów lub atrybutami style poszczególnych elementów, a także skorzystać z wielkiego zbioru obiektów, by zagłębić się w szczegóły stylów. Nie musisz pracować jedynie z właściwościami i wartościami, które sam jednoznacznie podałeś, gdyż masz możliwość odniesienia się do obliczonego stylu, którego przeglądarka używa do wyświetlania elementów. Pozwala to na porównanie zdefiniowanych przez Ciebie stylów z tymi, które ostatecznie są używane.

637

ROZDZIAŁ 29. „ STYLIZACJA ELEMENTÓW DOM

638

ROZDZIAŁ 30

Zdarzenia

Zdarzenia, które podawałem w przykładach w tej części książki, były przywoływane w odpowiedzi na kliknięcia przycisków. W tym rozdziale zagłębię się w szczegóły — wytłumaczę, czym zdarzenia właściwie są, pokażę, jak działają, oraz przedstawię ich miejsce w DOM ogółem. Krótko mówiąc, zdarzenia pozwalają na tworzenie funkcji JavaScript przywoływanych w odpowiedzi na zmianę stanu elementu, np. fokusowanie lub odfokusowanie go, albo kliknięcie elementu. W tym rozdziale skoncentruję się na przedstawieniu mechanizmu działania zdarzeń oraz zdarzeń obsługiwanych przez obiekty document i HTMLElement. Są to najczęściej używane zdarzenia, które odnoszą się do wszystkich dokumentów i elementów. W tabeli 30.1 znajduje się streszczenie całego rozdziału. Tabela 30.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Obsłużenie zdarzenia inline.

Użyj któregoś z atrybutów on* elementu.

30.1, 30.2

Obsłużenie zdarzenia w funkcji.

Zdefiniuj funkcję i użyj jej nazwy jako wartości atrybutu on*.

30.3

Zastosowanie DOM do obsłużenia zdarzeń.

Użyj standardowych technik przeszukiwania DOM i przypisz funkcję przy użyciu właściwości on* lub metody addEventListener reprezentującego element obiektu HTMLElement.

30.4, 30.5

Określenie typów zdarzeń.

Użyj właściwości Event.type.

30.6

Przetworzenie zdarzenia, zanim dotrze do elementu-potomka.

Użyj funkcji przechwytywania zdarzeń.

30.7

Wstrzymanie propagacji zdarzenia.

Użyj metody stopPropagation lub stopImmediatePropagation z obiektem Event.

30.8

Przetworzenie zdarzenia po jego dotarciu do elementu-potomka.

Użyj funkcji bąbelkowania zdarzeń.

30.9

Wstrzymanie domyślnej czynności powiązanej ze zdarzeniem.

Użyj metody preventDefault z obiektem Event.

30.10

Reagowanie na działania wykonywane z użyciem myszy.

Obsłuż zdarzenia myszy.

30.11

Reagowanie na fokusowanie i odfokusowywanie elementów.

Użyj zdarzeń fokusowania.

30.12

Reagowanie na naciśnięcia klawiszy.

Użyj zdarzeń klawiaturowych.

30.13

ROZDZIAŁ 30. „ ZDARZENIA

Wykorzystanie prostych procedur obsługi zdarzeń Istnieje kilka różnych sposobów obsługiwania zdarzeń. Można to zrobić bezpośrednio, tworząc prostą procedurę obsługi zdarzeń przy użyciu atrybutu zdarzenia. Elementy obsługują po jednym atrybucie zdarzenia na obsługiwane zdarzenie. Przykładowo, atrybut zdarzenia onmouseover jest odpowiednikiem globalnego zdarzenia mouseover, wyzwalanego, kiedy użytkownik przeciąga kursor na obszar ekranu zajęty przez element. Jest to ogólny schemat — większości zdarzeń odpowiada atrybut elementu on.

Wprowadzenie prostej procedury obsługi zdarzeń inline Najbardziej bezpośredni sposób użycia atrybutu elementu polega na przypisaniu atrybutowi zbioru deklaracji JavaScript. Po wyzwoleniu wydarzenia przeglądarka wykonuje podane deklaracje. W listingu 30.1 znajduje się tego prosty przykład. Listing 30.1. Obsługa wydarzenia przy użyciu kodu JavaScript inline

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie podałem dwie deklaracje JavaScript do wykonania w odpowiedzi na zdarzenie mouseover. Zrobiłem to, podając je jako wartość atrybutu zdarzenia onmouseover elementu p. Deklaracje

są następujące: this.style.background='white'; this.style.color='black'

Oto właściwości CSS, które nadawane są bezpośrednio atrybutowi style elementu, tak jak objaśniłem to w rozdziale 4. Przeglądarka nadaje specjalnej zmiennej this wartość, która jest obiektem HTMLElement reprezentującym element, który wywołał zdarzenie, a właściwość style zwraca obiekt CSSStyleDeclaration elementu. „ Wskazówka Zauważ, że objąłem podwójnym cudzysłowem ogólną wartość atrybutu, a pojedynczymi cudzysłowami kolory, które chciałem ująć jako literały ciągów JavaScript. Sam możesz zamienić miejscami te cudzysłowy, ale przedstawiam tutaj sposób osadzania cytowanych wartości w atrybucie.

640

ROZDZIAŁ 30. „ ZDARZENIA

Po otworzeniu dokumentu w przeglądarce pierwotny styl zdefiniowany w elemencie style nadawany jest elementowi p. Deklaracje JavaScript wykonywane są po przeciągnięciu kursora nad element, zmieniając wartości przypisane właściwościom CSS background i color przy użyciu technik przedstawionych w rozdziale 4. Przejście widać na rysunku 30.1.

Rysunek 30.1. Obsługa zdarzenia MouseOver Jest to przejście w jedną stronę — styl nie wraca do pierwotnej postaci po przesunięciu kursora z obszaru elementu. Wiele zdarzeń występuje w parach. Odpowiednikiem mouseover jest mouseout, który obsługuje się atrybutem zdarzenia onmouseout, tak jak widać w listingu 30.2. Listing 30.2. Obsługa zdarzenia MouseOut

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W ten sposób powstał element reagujący na pojawienie się i zniknięcie kursora z jego obszaru. Nowe przejście widać na rysunku 30.2. Listing 30.2 ukazuje pierwszy z dwóch problemów związanych z procedurami obsługi inline — są rozwlekłe i utrudniają czytanie kodu. Drugi problem jest taki, że deklaracje JavaScript odnoszą się w tej sytuacji tylko do jednego elementu. Musiałbym te same deklaracje przypisać kolejno każdemu elementowi p.

641

ROZDZIAŁ 30. „ ZDARZENIA

Rysunek 30.2. Przejście powstałe wskutek zestawienia dwóch odpowiadających sobie zdarzeń

Wprowadzenie prostej procedury obsługi zdarzeń Problemom z rozwlekłym kodem i powielaniem go możemy zaradzić, definiując funkcję i podając jej nazwę jako wartość atrybutów zdarzeń elementu. W listingu 30.3 widnieje przykład, jak tego dokonać. Listing 30.3. Wykorzystanie funkcji do obsłużenia zdarzenia

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

642

ROZDZIAŁ 30. „ ZDARZENIA

W tym przykładzie zdefiniowałem funkcje JavaScript, zawierające deklaracje, które mają być wykonane w odpowiedzi na czynności myszy; podałem je jako wartości atrybutów onmouseover i onmouseout. Wartość specjalna this odnosi się do elementu, który wyzwala zdarzenie. Jest to lepsze podejście od tego, które przedstawiłem wcześniej. Kod nie powtarza się w tak znacznym stopniu i nieco łatwiej się go czyta. Lubię jednak oddzielać zdarzenia od elementów HTML, a w tym celu trzeba wrócić do naszego dobrego przyjaciela — DOM.

Zastosowanie DOM i obiektu Event Proste procedury, które zaprezentowałem w poprzednich punktach, są odpowiednie dla prostych zadań, ale jeśli chcesz skorzystać z bardziej rozbudowanych procedur obsługi (i definiować je bardziej elegancko), to powinieneś skorzystać z DOM i obiektu Event JavaScript. W listingu 30.4 widnieje przykład użycia obiektu Event i wykorzystania DOM do powiązania funkcji ze zdarzeniem. Listing 30.4. Użycie DOM do określenia procedury obsługi zdarzenia

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

Z tym podejściem zetknąłeś się już w przykładach z poprzednich rozdziałów. Skrypt (który musiałem przenieść na koniec dokumentu ze względu na to, że pracuję z DOM) znajduje wszystkie elementy, którym chcę przypisać zdarzenia, i podaje nazwę funkcji właściwości procedury obsługi zdarzenia. Wszystkie zdarzenia obsługiwane są przez takie właściwości i nazwy wszystkich z nich zaczynają się od członu on, po którym występuje nazwa zdarzenia. Więcej o dostępnych zdarzeniach dowiesz się w punkcie „Praca ze zdarzeniami HTML” w dalszej części rozdziału. „ Wskazówka Zauważ, że użyłem nazwy funkcji do wskazania jej jako nasłuchiwacza zdarzeń. Typowym błędem jest zamieszczenie nawiasów po nazwie funkcji, tj. podanie handleMouseOver() zamiast handleMouse. Sprawia to, że funkcja jest przywoływana przy wykonaniu skryptu, a nie przy wyzwoleniu zdarzenia.

W podanych w listingu funkcjach obsługujących zdarzenia zawarty jest parametr e. Odnosi się on do utworzonego przez przeglądarkę obiektu Event, reprezentującego zdarzenie po jego wyzwoleniu. Obiekty Event dostarczają informacji o tym, co się dzieje, i umożliwiają reagowanie na czynności użytkowników w bardziej elastyczny sposób niż poprzez włączanie kodu do atrybutów elementów. W tym przykładzie użyłem właściwości target do pozyskania obiektu HTMLElement, który wyzwolił zdarzenie, aby właściwością style zmienić jego wygląd. Zanim przedstawię Ci obiekty zdarzeń, chcę Ci pokazać odmienne podejście do wskazywania funkcji służących do przetwarzania zdarzeń. Właściwości zdarzeń (których nazwy zaczynają się od członu *on) są zazwyczaj najłatwiejsze w użyciu, ale możesz także skorzystać z metody addEventListener, obsługiwanej przez obiekt HTMLElement. Możesz także użyć metody removeEventListener do odłączenia funkcji od zdarzenia. Obydwie metody pozwalają na wyrażenie w postaci argumentów typów zdarzeń oraz obsługujących je funkcji, co widać w listingu 30.5. Listing 30.5. Zastosowanie metod addEventListener i removeEventListener

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

644

ROZDZIAŁ 30. „ ZDARZENIA

Naciśnij mnie



W podanym tu skrypcie występuje metoda addEventListener, która określa funkcje handleMouseOver i handleMouseOut jako procedury obsługi zdarzeń elementów p. Po kliknięciu przycisku metoda removeEventListener odłącza funkcję handleMouseOut od elementu p z atrybutem id o wartości block2. Zauważ, że użyłem właściwości onclick w odniesieniu do przycisku, by określić procedurę obsługi zdarzenia click. Chciałem w ten sposób pokazać, że możesz w obrębie jednego skryptu do woli zestawiać różne techniki. Zaletą metody addEventListener jest to, że pozwala ona na uzyskanie dostępu do niektórych zaawansowanych funkcji zdarzeń, które wkrótce opiszę. Opis składowych obiektu Event znajduje się w tabeli 30.2. „ Wskazówka Obiekt Event obsługuje funkcje dostępne dla wszystkich zdarzeń. Z opisu podstawowych zdarzeń w dalszej części rozdziału dowiesz się jednak, że istnieją inne odnoszące się do zdarzeń obiekty, które obsługują dodatkowe funkcje przynależące do poszczególnych rodzajów zdarzeń.

Odróżnianie zdarzeń według typu Właściwość type wskazuje, jakiego typu jest zdarzenie. Wartość ta występuje w postaci ciągu znaków, np. mouseover. Możliwość sprawdzenia typu zdarzenia pozwala na wykorzystanie jednej funkcji do obsłużenia wielu typów, tak jak widać w listingu 30.6. Listing 30.6. Zastosowanie właściwości type

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Najciekawsze są odmiany owoców dostępne w poszczególnych krajach. Sam mieszkam w pobliżu Londynu, w okolicy, która słynie ze swoich jabłek.

W podanym tutaj skrypcie użyłem właściwości type w ramach pojedynczej funkcji obsługi zdarzeń do sprawdzenia, z jakiego typu zdarzeniami pracuję.

Przepływ zdarzeń Zdarzenie przechodzi przez trzy fazy: przechwytywania, celu i bąbelkowania. W tym punkcie opiszę każdą z tych faz i pokażę, jak przebiegają oraz jak możesz wykorzystać funkcje nasłuchiwaczy zdarzeń do przejęcia nad nimi kontroli.

Faza przechwytywania Po wyzwoleniu zdarzenia przeglądarka określa element, do którego owo zdarzenie się odnosi, a które nazywa się celem zdarzenia. Przeglądarka analizuje wszystkie elementy zawarte pomiędzy elementem body a celem i sprawdza, czy mają procedury obsługi zdarzeń, które wymagają powiadomienia o zdarzeniach odnoszących się do ich potomków. Przeglądarka wyzwala takie procedury jeszcze przed wyzwoleniem procedur samego celu. W listingu 30.7 znajdziesz przykład. Listing 30.7. Przechwytywanie zdarzeń

Przykład

647

ROZDZIAŁ 30. „ ZDARZENIA

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

W tym przykładzie utworzyłem element span jako dziecko elementu p i zdefiniowałem procedury obsługi zdarzeń mouseover i mouseout. Zauważ, że przy definiowaniu procedury rodzica (czyli elementu p) dodałem do metody addEventListener trzeci argument: textblock.addEventListener("mouseover", handleDescendantEvent, true);

Ten dodatkowy argument wskazuje przeglądarce, że chcę, by element p przechwytywał zdarzenia swoich potomków w fazie przechwytywania. Po wyzwoleniu zdarzenia mouseover przeglądarka zaczęła analizę od elementu głównego dokumentu HTML, by przejść przez drzewo DOM ku celowi (czyli elementowi, który wyzwolił zdarzenie). Przy każdym elemencie hierarchii przeglądarka sprawdza, czy wymaga on powiadomienia o przechwytywanych zdarzeniach. Sekwencję przechwytywania zdarzeń w przykładowym dokumencie widać na rysunku 30.3. Przy każdym elemencie przeglądarka przywołuje wszelkie przechwytujące nasłuchiwacze. W tym wypadku przeglądarka odnajduje i przywołuje funkcję handleDescendantEvent, którą połączyłem z elementem p. Po przywołaniu funkcji handleDescendantEvent obiekt Event przechowuje informacje o elemencie docelowym (przy użyciu właściwości target) oraz o elemencie, który przywołał element (przy użyciu właściwości currentTarget). Używam obydwu tych właściwości do zmiany stylu elementu p i jego dziecka span. Rezultat widać na rysunku 30.4. Przechwytywanie zdarzeń daje każdemu z przodków elementów możliwość zareagowania na zdarzenie, zanim zostanie ono przekazane samemu elementowi. Procedura obsługi elementu-rodzica może

648

ROZDZIAŁ 30. „ ZDARZENIA

Rysunek 30.3. Przepływ przechwytywania zdarzeń

Rysunek 30.4. Praca z przechwytywaniem zdarzeń zatrzymać przepływ zdarzenia do docelowego elementu poprzez przywołanie funkcji stopPropagation lub stopImmediatePropagation przy obiekcie Event. Funkcje te różnią się tym, że stopPropagation sprawia, że przywoływane są wszystkie nasłuchiwacze zdarzeń przypisane bieżącemu elementowi, podczas gdy stopImmediatePropagation ignoruje wszelkie nasłuchiwacze, które nie zostały wyzwolone. W listingu 30.8 widnieje przykład dodania funkcji stopPropagation do procedury obsługi handleDescendantEvent. Listing 30.8. Zapobieganie dalszemu przepływowi zdarzenia ... function handleDescendantEvent(e) { if (e.type == "mouseover" && e.eventPhase == Event.CAPTURING_PHASE) { e.target.style.border = "thick solid red"; e.currentTarget.style.border = "thick double black"; } else if (e.type == "mouseout" && e.eventPhase == Event.CAPTURING_PHASE) { e.target.style.removeProperty("border"); e.currentTarget.style.removeProperty("border"); } e.stopPropagation(); } ...

Zmiana ta sprawia, że faza przechwytywania przeglądarki kończy się po przywołaniu procedury obsługi elementu p. Żadne inne elementy nie są analizowane, a fazy celu i bąbelkowania (które wkrótce opiszę) zostają pominięte. W tym przypadku oznacza to, że zmiany stylów w ramach funkcji handleMouseEvent nie są nadawane w odpowiedzi na zdarzenie mouseover. Rezultat widać na rysunku 30.5.

649

ROZDZIAŁ 30. „ ZDARZENIA

Rysunek 30.5. Wstrzymanie propagacji zdarzenia Zauważ, że w ramach procedury sprawdzam typ zdarzenia i fazę, w której się znajduje, używając do tego właściwości eventPhase: ... if (e.type == "mouseout" && e.eventPhase == Event.CAPTURING_PHASE) { ...

Uaktywnienie przechwytywania zdarzeń przy definiowaniu nasłuchiwacza nie powstrzymuje zdarzeń, które odnoszą się do samego nasłuchującego elementu. W tym przypadku element p zajmuje pewien obszar na ekranie i reaguje na zdarzenia mouseover. Aby temu zapobiec, sprawiam, by zmiany stylów zachodziły tylko w przypadku zdarzeń w fazie przechwytywania (tj. zdarzeń, których celem jest potomek, a analizowane są tylko dlatego, że zdefiniowałem przechwytującego nasłuchiwacza). Właściwość eventPhase zwraca jedną z trzech wartości przedstawionych w tabeli 30.3, które reprezentują trzy fazy wydarzenia. Pozostałe dwie fazy opiszę w kolejnych punktach. Tabela 30.3. Wartości właściwości Event.eventPhase Nazwa

Opis

CAPTURING_PHASE

Zdarzenie jest w fazie przechwytywania.

AT_TARGET

Zdarzenie jest w fazie celu.

BUBBLING_PHASE

Zdarzenie jest w fazie bąbelkowania.

Faza celu Faza celu jest najprostsza z tych trzech faz. Po zakończeniu fazy przechwytywania przeglądarka wyzwala nasłuchiwacze danego typu zdarzenia, które zostały przypisane elementowi docelowemu, tak jak widać na rysunku 30.6. Widziałeś już tę fazę w poprzednich przykładach. Należy tu jedynie zwrócić uwagę na to, że funkcję addEventListener można przywołać wielokrotnie, wobec czego dany typ zdarzenia może mieć więcej niż jednego nasłuchiwacza. „ Wskazówka Przywołując funkcje stopPropagation lub stopImmediatePropagation w trakcie fazy celu, zatrzymujesz przepływ zdarzenia, a faza bąbelkowania nie dochodzi do skutku.

650

ROZDZIAŁ 30. „ ZDARZENIA

Rysunek 30.6. Faza celu

Faza bąbelkowania Po zakończeniu fazy celu przeglądarka wraca po łańcuchu przodków do elementu body. Przy każdym elemencie przeglądarka sprawdza, czy dany element zdarzenia nasłuchiwany jest przez nieprzechwytujące obiekty (tj. takie, w przypadku których trzeci argument funkcji addEventListener ma wartość false). Określa się to mianem bąbelkowania zdarzeń. W listingu 30.9 widnieje przykład. Listing 30.9. Bąbelkowanie zdarzeń

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Dodałem nową funkcję o nazwie handleBubbleMouseEvent elementowi p. Element p ma teraz dwa nasłuchiwacze zdarzeń — jeden działający w fazie przechwytywania, a drugi w fazie bąbelkowania. Kiedy używasz metody addEventListener, to zawsze jesteś w którymś z tych stanów. Oznacza to, że nasłuchiwacze elementu zawsze są powiadamiane zarówno o zdarzeniach potomków, jak i własnych zdarzeniach. Pozostaje wybrać, czy nasłuchiwacz zdarzeń potomków ma być przywoływany przed fazą celu czy po niej. Skutkiem tej zmiany jest obecność trzech funkcji nasłuchujących, które są wyzwalane przy wydarzeniu mouseover elementu span. Funkcja handleDescendantEvent wyzwalana jest w trakcie fazy przechwytywania, funkcja handleMouseEvent w trakcie fazy celu, a handleBubbleMouseEvent w trakcie fazy bąbelkowania. Rezultat widać na rysunku 30.7.

Rysunek 30.7. Faza bąbelkowania Na pojawienie się elementu mają teraz wpływ zmiany stylu wszystkich funkcji nasłuchujących, tak jak widać na rysunku 30.8.

652

ROZDZIAŁ 30. „ ZDARZENIA

Rysunek 30.8. Rezultat dodania procedury obsługującej, aktywnej w fazie bąbelkowania „ Wskazówka Nie wszystkie zdarzenia obsługują bąbelkowanie. Możesz sprawdzić, czy zdarzenie będzie bąbelkować, używając właściwości bubbles.

Praca ze zdarzeniami, które można anulować Niektóre zdarzenia mają zdefiniowane domyślne czynności wykonywane po wyzwoleniu zdarzenia. Przykładowo, domyślna czynność zdarzenia click elementu a to wczytanie treści o adresie URL podanym w atrybucie href. Kiedy zdarzeniu przypisana jest domyślna czynność, wartość jego właściwości cancelable to true. Możesz wstrzymać wykonanie domyślnej czynności, przywołując funkcję preventDefault. W listingu 30.10 widnieje przykład wykorzystania w procedurze obsługi zdarzenia, które można anulować. Listing 30.10. Anulowanie domyślnej czynności

Przykład

Odwiedź stronę Helionu Odwiedź stronę W3C

W tym przykładzie użyłem funkcji confirm do spytania użytkownika, czy rzeczywiście chce przejść do adresu URL, do którego prowadzi element. Jeśli użytkownik kliknie przycisk Anuluj, to przywołana zostanie funkcja preventDefault — sprawi to, że przeglądarka nie przejdzie do tego adresu. Zauważ, że przywołanie funkcji preventDefault nie powstrzymuje przepływu zdarzenia przez fazy przechwycenia, celu i bąbelkowania. Fazy te i tak zostaną przeprowadzone, ale przeglądarka nie wykona domyślnej czynności na końcu fazy bąbelkowania. Możesz sprawdzić, czy poprzedzająca zdarzenie procedura obsługi przywołuje funkcję preventDefault, odczytując właściwość defaultPrevented; jeśli zwraca wartość true, to znaczy, że funkcja preventDefault została przywołana.

Praca ze zdarzeniami HTML HTML obsługuje szereg zdarzeń, które opiszę w kolejnych punktach, gdzie są pogrupowane według typu. Zdarzenia dokumentu i okna odnoszą się do obiektów Document i Window, które omówiłem w rozdziałach 25. i 26. Pozostałe zdarzenia obsługiwane są przez wszystkie obiekty HTMLElement i są wobec tego uniwersalne. Aby obsłużyć unikalne właściwości każdego typu zdarzenia, przeglądarka przywołuje obiekty obsługujące właściwości dodatkowe względem bazowego obiektu Event. Zrozumiesz, w czym rzecz, kiedy zapoznasz się z przykładami.

Zdarzenia obiektów Document i Window Poza funkcjami, z którymi zapoznałeś się w poprzednich rozdziałach, obiekt Document obsługuje zdarzenie opisane w tabeli 30.4. Przykład jego zastosowania znajdziesz w rozdziale 25. Tabela 30.4. Zdarzenia obiektu Document Nazwa

Opis

readystatechange

Wyzwalane, kiedy zmienia się wartość właściwości readyState.

Obiekt window obsługuje szeroki zakres zdarzeń, które opisuję w tabeli 30.5. Niektóre z nich można obsługiwać za pośrednictwem elementu body, ale nie jest to możliwość oferowana przez wszystkie przeglądarki, wobec czego użycie obiektu window jest pewniejszym rozwiązaniem.

Praca ze zdarzeniami myszy Ze zdarzeniami mouseover i mouseout zetknąłeś się już we wcześniejszej części tego rozdziału, ale pełny zbiór zdarzeń związanych z działaniem myszy znajdziesz w tabeli 30.6.

654

ROZDZIAŁ 30. „ ZDARZENIA

Tabela 30.5. Zdarzenia obiektu window Nazwa

Opis

onabort

Wyzwalane, kiedy wczytywanie dokumentu lub zasobów zostaje przerwane.

onafterprint

Wyzwalane, kiedy przywołana zostaje metoda Window.print(), zanim wyświetlone zostają opcje drukowania.

onbeforeprint

Wyzwalane po wydrukowaniu dokumentu.

onerror

Wyzwalane, kiedy pojawia się błąd wczytywania dokumentu lub zasobów.

onhashchange

Wyzwalane, kiedy zmienia się fragment skrótu adresu URL.

onload

Wyzwalane po zakończeniu wczytywania dokumentu lub zasobów.

onpopstate

Wyzwalane, by utworzyć obiekt stanu powiązany z historią przeglądarki. Przykład znajdziesz w rozdziale 27.

onresize

Wyzwalane przy zmianie wielkości okna.

onunload

Wyzwalane przy opuszczaniu strony.

Tabela 30.6. Zdarzenia związane z działaniem myszy Nazwa

Opis

click

Wyzwalane po kliknięciu przycisku myszy.

dblclick

Wyzwalane po dwukrotnym kliknięciu przycisku myszy.

mousedown

Wyzwalane po kliknięciu i przytrzymaniu przycisku myszy.

mouseenter

Wyzwalane, kiedy kursor wchodzi na obszar elementu lub jednego z jego potomków.

mouseleave

Wyzwalane, kiedy kursor wychodzi poza obszar elementu i wszystkich jego potomków.

mousemove

Wyzwalane, kiedy kursor porusza się nad elementem.

mouseout

Tak samo jak w przypadku mouseleave, z tym że zdarzenie jest wyzwalane, kiedy kursor wciąż znajduje się nad potomkiem.

mouseover

Tak samo jak w przypadku mouseenter, z tym że zdarzenie jest wyzwalane, kiedy kursor wciąż znajduje się nad potomkiem.

mouseup

Wyzwalane po puszczeniu klawisza myszy.

Po wyzwoleniu zdarzenia myszy przeglądarka przywołuje obiekt MouseEvent. Jest to obiekt Event z dodatkowymi właściwościami i metodami, ukazanymi w tabeli 30.7. W listingu 30.11 widnieje przykład zastosowania dodatkowych funkcji, które oferuje obiekt MouseEvent. Listing 30.11. Wykorzystanie obiektu MouseEvent do reagowania na zdarzenia myszy

Przykład

Istnieje wiele różnych rodzajów owoców — sam banan ma ponad pięćset odmian. Gdybyśmy uwzględnili niezliczone odmiany jabłek, pomarańczy i innych owoców, musielibyśmy dokonać wyboru spośród tysięcy możliwości.

Typ:
X:
Y:

Podany w tym przykładzie skrypt aktualizuje komórki tabeli w odpowiedzi na dwa rodzaje zdarzeń myszy. Rezultat widać na rysunku 30.9.

Rysunek 30.9. Praca ze zdarzeniami myszy

Praca ze zdarzeniami fokusowania Zdarzenia związane z fokusowaniem wyzwalane są w reakcji na fokusowanie i odfokusowywanie elementów. W tabeli 30.8 znajduje się ich opis. Tabela 30.8. Zdarzenia związane z fokusowaniem Nazwa

Opis

blur

Wyzwalane, kiedy element jest odfokusowywany.

focus

Wyzwalane, kiedy element jest sfokusowany.

focus in

Wyzwalane, kiedy element ma być sfokusowany.

focus out

Wyzwalane, kiedy element ma być odfokusowany.

Zdarzenia te reprezentowane są obiektem FocusEvent, który dodaje właściwość opisaną w tabeli 30.9 do bazowych funkcji obiektu Event. Tabela 30.9. Obiekt FocusEvent Nazwa

Opis

Zwracana wartość

relatedTarget

Element, który ma zostać sfokusowany lub odfokusowany; ta właściwość używana jest tylko przez zdarzenia focusin i focusout.

HTMLElement

657

ROZDZIAŁ 30. „ ZDARZENIA

W listingu 30.12 widnieje przykład zastosowania zdarzeń fokusowania. Listing 30.12. Zastosowanie zdarzeń fokusowania

Przykład

Owoc:

Nazwa:

Zagłosuj Wyzeruj



Podany w tym przykładzie skrypt wykorzystuje zdarzenia focus i blur do zmiany stylu dwóch elementów input. Rezultat widać na rysunku 30.10.

Praca ze zdarzeniami klawiatury Zdarzenia klawiatury wyzwalane są w odpowiedzi na naciśnięcia klawiszy. Zdarzenia z tej kategorii przedstawione są w tabeli 30.10.

658

ROZDZIAŁ 30. „ ZDARZENIA

Rysunek 30.10. Zastosowanie zdarzeń focus i blur Tabela 30.10. Zdarzenia klawiatury Nazwa

Opis

keydown

Wyzwalane, kiedy użytkownik przytrzymuje klawisz.

keypress

Wyzwalane, kiedy użytkownik naciska i puszcza klawisz.

keyup

Wyzwalane, kiedy użytkownik puszcza klawisz.

Zdarzenia te reprezentowane są przez obiekt FocusEvent, który dodaje właściwości opisane w tabeli 30.11 do funkcji bazowego obiektu Event. Tabela 30.11. Obiekt KeyboardEvent Nazwa

Opis

Zwracana wartość

char

Zwraca znak odpowiadający naciśniętemu klawiszowi.

tekst

key

Zwraca naciśnięty klawisz.

tekst

ctrlKey

Zwraca wartość true, jeśli klawisz Ctrl był przytrzymany podczas naciśnięcia właściwego klawisza.

wartość_boolowska

shiftKey

Zwraca wartość true, jeśli klawisz Shift był przytrzymany podczas naciśnięcia właściwego klawisza.

wartość_boolowska

altKey

Zwraca wartość true, jeśli klawisz Alt był przytrzymany podczas naciśnięcia właściwego klawisza.

wartość_boolowska

repeat

Zwraca wartość true, jeśli klawisz jest przytrzymany.

wartość_boolowska

W listingu 30.13 widnieje przykład zastosowania zdarzeń klawiatury. Listing 30.13. Zastosowanie zdarzeń klawiatury

Przykład

Owoc:

Nazwa:

Zagłosuj Wyzeruj





Podany w tym przykładzie skrypt zmienia treść elementu span tak, by wyświetlał informacje o naciskanych klawiszach, przesyłane elementom input. Zauważ, że użyłem funkcji String.fromCharCode do nadania właściwości keyCode bardziej użytecznej wartości. Rezultat widać na rysunku 30.11.

Rysunek 30.11. Wykorzystanie zdarzeń klawiatury

Praca ze zdarzeniami formularza Element form obsługuje dwa wyjątkowe dla niego zdarzenia. Ich opis znajduje się w tabeli 30.12. Przykłady zastosowania zdarzeń formularza znajdziesz w rozdziałach 33. i 34., gdzie przedstawię Ci Ajax.

660

ROZDZIAŁ 30. „ ZDARZENIA

Tabela 30.12. Zdarzenia formularza Nazwa

Opis

submit

Wyzwalane przy wysłaniu formularza.

reset

Wyzwalane przy wyzerowaniu formularza.

Podsumowanie W tym rozdziale opisałem, jak system zdarzeń umożliwia reagowanie na zmiany stanu elementów dokumentu. Przedstawiłem Ci różne sposoby obsługiwania zdarzeń, od prostych właściwości on*, przez procedury obsługi, po metodę addEventListener. Każdy z nich ma swoje zalety. Omówiłem także trzy fazy zdarzenia — przechwytywania, celu i bąbelkowania — oraz to, jak je wykorzystać w przechwytywaniu zdarzeń podczas ich propagacji. Zakończyłem rozdział opisem zdarzeń obsługiwanych przez większość elementów HTML.

661

ROZDZIAŁ 30. „ ZDARZENIA

662

ROZDZIAŁ 31

Obiekty poszczególnych elementów Obiektowy model dokumentu (DOM) obsługuje zbiór obiektów reprezentujących różne typy elementów HTML w dokumencie. Te obiekty można traktować jako obiekty HTMLElement — zresztą na ogół właśnie tak się robi w skryptach. Jeżeli jednak chcesz uzyskać dostęp do atrybutu lub funkcji, które są właściwe konkretnemu elementowi, to przeważnie musisz skorzystać z któregoś z tych obiektów. Obiekty te nie są szczególnie przydatne. Ogólnie rzecz biorąc, definiują właściwości odpowiadające atrybutom elementów, których wartości można uzyskać za pośrednictwem funkcji obiektu HTMLElement. Istnieje kilka wyjątków — formularze oferują pewne przydatne metody do użycia w ramach zatwierdzania danych wejściowych, a tabele metody służące do tworzenia ich zawartości.

Obiekty dokumentu i metadanych W tym punkcie opisane są obiekty reprezentujące elementy danych i metadanych. Więcej o tych elementach dowiesz się z rozdziału 7.

Element base Element base jest reprezentowany przez obiekt HTMLBaseElement. Obiekt ten nie obsługuje dodatkowych zdarzeń, ale ma dwie właściwości, których opis znajduje się w tabeli 31.1. Tabela 31.1. Obiekt HTMLBaseElement Nazwa

Opis

Zwracana wartość

href

Odpowiednik atrybutu href.

tekst

target

Odpowiednik atrybutu target.

tekst

Element body Element body reprezentowany jest przez obiekt HTMLBodyElement. Nie ma on dodatkowych właściwości, ale obsługuje zdarzenia przedstawione w tabeli 31.2. „ Wskazówka Niektóre przeglądarki obsługują te zdarzenia za pośrednictwem obiektu Window, który opisałem w rozdziale 27.

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.2. Zdarzenia HTMLBodyElement Zdarzenie

Opis

error

Wyzwalane, kiedy następuje błąd przy wczytywaniu zasobów, np. skryptu lub obrazu.

load

Wyzwalane po wczytaniu dokumentu i jego zasobów.

unload

Wyzwalane, kiedy przeglądarka wyłącza dokument (zazwyczaj wtedy, kiedy użytkownik przechodzi pod inny adres).

Element link Element link reprezentowany jest przez obiekt HTMLLinkElement, który obsługuje właściwości przedstawione w tabeli 31.3. Tabela 31.3. Obiekt HTMLLinkElement Nazwa

Opis

Zwracana wartość

disabled

Odpowiednik atrybutu disabled.

wartość_boolowska

href

Odpowiednik atrybutu href.

tekst

rel

Odpowiednik atrybutu rel.

tekst

media

Odpowiednik atrybutu media.

tekst

hreflang

Odpowiednik atrybutu hreflang.

tekst

type

Odpowiednik atrybutu type.

tekst

Element meta Element meta jest reprezentowany przez obiekt HTMLMetaElement, który obsługuje właściwości ukazane w tabeli 31.4. Tabela 31.4. Obiekt HTMLMetaElement Nazwa

Opis

Zwracana wartość

name

Odpowiednik atrybutu name.

tekst

httpEquiv

Odpowiednik atrybutu http-equiv.

tekst

content

Odpowiednik atrybutu content.

tekst

Element script Element script reprezentowany jest w DOM przez obiekt HTMLScriptElement, który obsługuje dodatkowe właściwości opisane w tabeli 31.5. Tabela 31.5. Obiekt HTMLScriptElement Nazwa

Opis

Zwracana wartość

src

Odpowiednik atrybutu src.

tekst

async

Odpowiednik atrybutu async.

wartość_boolowska

defer

Odpowiednik atrybutu defer.

wartość_boolowska

664

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.5. Obiekt HTMLScriptElement — ciąg dalszy Nazwa

Opis

Zwracana wartość

type

Odpowiednik atrybutu type.

tekst

charset

Odpowiednik atrybutu charset.

tekst

text

Odpowiednik atrybutu text.

tekst

Element style Element style reprezentowany jest w DOM przez obiekt HTMLStyleElement, który obsługuje dodatkowe właściwości opisane w tabeli 31.6. Tabela 31.6. Obiekt HTMLStyleElement Nazwa

Opis

Zwracana wartość

disabled

Odpowiednik atrybutu disabled.

wartość_boolowska

media

Odpowiednik atrybutu media.

tekst

typed

Odpowiednik atrybutu typed.

tekst

scoped

Odpowiednik atrybutu scoped.

wartość_boolowska

Element title Element title reprezentowany jest w DOM przez obiekt HTMLTitleElement, który obsługuje właściwości opisane w tabeli 31.7. Tabela 31.7. Obiekt HTMLTitleElement Nazwa

Opis

Zwracana wartość

text

Pobiera lub definiuje zawartość elementu title.

tekst

Inne elementy dokumentu i metadanych Elementy head i html reprezentowane są — kolejno — przez obiekty HTMLHeadElement i HTMLHtmlElement. Nie obsługują one żadnych dodatkowych metod, właściwości i zdarzeń poza tymi obsługiwanymi przez HTMLElement. Element noscript nie ma żadnego odpowiednika w postaci obiektu DOM i reprezentowany jest wyłącznie przez HTMLElement.

Elementy tekstowe W tym punkcie opiszę obiekty, które reprezentują elementy tekstowe. O tych elementach dowiesz się więcej z rozdziału 8.

Element a Element a reprezentowany jest przez obiekt HTMLAnchorElement, który obsługuje właściwości przedstawione w tabeli 31.8. Poza obsługiwaniem właściwości odpowiadających atrybutom elementów obiekt ten obsługuje także zbiór właściwości pomocniczych, które ułatwiają pobieranie i definiowanie składowych adresu URL, określonego atrybutem href.

665

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.8. Obiekt HTMLAnchorElement Nazwa

Opis

Zwracana wartość

href

Odpowiednik atrybutu href.

tekst

target

Odpowiednik atrybutu target.

tekst

rel

Odpowiednik atrybutu rel.

tekst

media

Odpowiednik atrybutu media.

tekst

hreflang

Odpowiednik atrybutu hreflang.

tekst

type

Odpowiednik atrybutu type.

tekst

text

Zwraca lub definiuje tekst elementu.

tekst

protocol

Zwraca lub definiuje komponent protokołu wartości atrybutu href.

tekst

host

Zwraca lub definiuje komponent nazwy hosta i portu wartości atrybutu href.

tekst

hostname

Zwraca lub definiuje komponent nazwy hosta wartości atrybutu href.

tekst

port

Zwraca lub definiuje komponent portu wartości atrybutu href.

tekst

pathname

Zwraca lub definiuje komponent ścieżki wartości atrybutu href.

tekst

search

Zwraca lub definiuje komponent zapytania wartości atrybutu href.

tekst

hash

Zwraca lub definiuje komponent skrótu wartości atrybutu href.

tekst

Elementy del i ins Elementy del i ins reprezentowane są przez obiekt HTMLModElement. Można je od siebie odróżnić, używając właściwości tagName obsługiwanej przez HTMLElement. Szczegóły znajdziesz w rozdziale 26. Dodatkowe właściwości obsługiwane przez HTMLModElement opisane są w tabeli 31.9. Tabela 31.9. Obiekt HTMLModElement Nazwa

Opis

Zwracana wartość

cite

Odpowiednik atrybutu cite.

tekst

dateTime

Odpowiednik atrybutu datetime.

tekst

Element q Element q reprezentowany jest przez obiekt HTMLQuoteElement. Obsługiwana przez niego właściwość opisana jest w tabeli 31.10. Tabela 31.10. Obiekt HTMLQuoteElement Nazwa

Opis

Zwracana wartość

cite

Odpowiednik atrybutu cite.

tekst

Element time Element time reprezentowany jest przez obiekt HTMLTimeElement. Obsługiwane przez niego dodatkowe właściwości opisane są w tabeli 31.11.

666

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.11. Obiekt HTMLTimeElement Nazwa

Opis

Zwracana wartość

dateTime

Odpowiednik atrybutu datetime.

tekst

pubDate

Odpowiednik atrybutu pubdate.

tekst

valueAsDate

Sprawdza godzinę i datę i zwraca obiekt Date.

Date

Inne elementy tekstowe Elementy br i span reprezentowane są — kolejno — przez obiekty HTMLBRElement i HTMLSpanElement. Obiekty te nie obsługują żadnych dodatkowych metod, właściwości ani zdarzeń poza tymi obsługiwanymi przez HTMLElement. Następujące elementy reprezentowane są wyłącznie przez HTMLElement: abbr, b, cite, code, dfn, em, i, u, kbd, mark, rt, rp, ruby, s, samp, small, strong, sub, sup, var i wbr.

Elementy grupujące W tym punkcie opisuję obiekty, które reprezentują elementy grupujące. Więcej na ich temat przeczytasz w rozdziale 9.

Element blockquote Element blockquote reprezentowany jest przez obiekt HTMLQuoteElement. Ten sam obiekt reprezentuje element q; omówiłem go w tabeli 31.10.

Element li Element li reprezentowany jest przez obiekt HTMLLIElement, który obsługuje właściwość omówioną w tabeli 31.12. Tabela 31.12. Obiekt HTMLLIElement Nazwa

Opis

Zwracana wartość

value

Odpowiednik atrybutu value.

liczba

Element ol Element ol reprezentowany jest przez obiekt HTMLOLListElement, który obsługuje właściwości przedstawione w tabeli 31.13. Tabela 31.13. Obiekt HTMLOLListElement Nazwa

Opis

Zwracana wartość

reversed

Odpowiednik atrybutu reversed.

wartość_boolowska

start

Odpowiednik atrybutu start.

liczba

type

Odpowiednik atrybutu type.

tekst

667

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Inne elementy grupujące W tabeli 31.14 znajduje się zbiór elementów grupujących, reprezentowanych przez odpowiadające im obiekty, które obsługują takie same funkcje, jak HTMLElement. Tabela 31.14. Obiekty elementów grupujących, które nie obsługują dodatkowych właściwości Nazwa

Obiekt DOM

div

HTMLDivElement

dl

HTMLDListElement

hr

HTMLHRElement

p

HTMLParagraphElement

pre

HTMLPreElement

ul

HTMLUListElement

Następujące elementy nie mają swoich konkretnych odpowiedników w DOM i reprezentowane są wyłącznie przez HTMLElement: dd, dt, figcaption i figure.

Elementy sekcji W tym punkcie opiszę obiekty reprezentujące elementy sekcji. Więcej na ich temat przeczytasz w rozdziale 10.

Element details Element details reprezentowany jest przez obiekt HTMLDetailsElement. Obsługiwane przez niego właściwości opisane są w tabeli 31.15. Tabela 31.15. Obiekt HTMLDetailsElement Nazwa

Opis

Zwracana wartość

open

Odpowiednik atrybutu open.

wartość_boolowska

Inne elementy sekcji Elementy h1 – h6 reprezentowane są przez obiekt HTMLHeadingElement, który nie obsługuje jednak dodatkowych właściwości. Następujące elementy nie są reprezentowane przez własne obiekty: address, article, aside, footer, header, hgroup, nav, section i summary.

Elementy tabeli W tym punkcie znajduje się opis obiektów reprezentujących elementy tabel. Więcej na ich temat przeczytasz w rozdziale 11.

Elementy col i colgroup Elementy col i colgroup reprezentowane są przez obiekt HTMLTableColElement, który obsługuje właściwość przedstawioną w tabeli 31.16.

668

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.16. Obiekt HTMLTableColElement Nazwa

Opis

Zwracana wartość

span

Odpowiednik atrybutu span.

liczba

Element table Element table reprezentowany jest przez obiekt HTMLTableElement. Jest to jeden z najbardziej przydatnych obiektów, które odnoszą się do konkretnych elementów. Właściwości i metody obsługiwane przez ten obiekt opisane są w tabeli 31.17. Tabela 31.17. Obiekt HTMLTableElement Nazwa

Opis

Zwracana wartość

border

Odpowiednik atrybutu border.

tekst

caption

Zwraca element podpisu tabeli.

HTMLElement

createCaption()

Zwraca element podpisu tabeli — w razie konieczności tworzy go.

HTMLElement

deleteCaption()

Usuwa element podpisu tabeli.

void

tHead

Zwraca element thead tabeli.

HTMLTableSectionElement

createTHead()

Zwraca element thead — w razie konieczności tworzy go.

HTMLTableSectionElement

deleteTHead()

Usuwa element thead tabeli.

void

tFoot

Zwraca element tfoot tabeli.

HTMLTableSectionElement

createTFoot()

Zwraca element tfoot — w razie konieczności tworzy go.

HTMLTableSectionElement

deleteTFoot()

Usuwa element tfoot tabeli.

void

tBodies

Zwraca elementy tbody.

HTMLTableSectionElement[]

createTBody

Zwraca element tbody — w razie konieczności tworzy go.

HTMLTableSectionElement

rows

Zwraca rzędy tabeli.

HTMLTableRowElement[]

insertRow()

Tworzy nowy rząd tabeli w podanym miejscu.

HTMLTableRowElement

deleteRow()

Usuwa rząd znajdujący się w podanym miejscu.

void

Elementy thead, tbody i tfoot Elementy thead, tbody i tfoot reprezentowane są przez obiekt HTMLTableSectionElement. Właściwości i metody obsługiwane przez ten obiekt opisane są w tabeli 31.18.

Element th Element th reprezentowany jest przez obiekt HTMLTableHeaderCellElement. Obsługiwane przez ten obiekt właściwości opisane są w tabeli 31.19.

669

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.18. Obiekt HTMLTableSectionElement Nazwa

Opis

Zwracana wartość

rows

Zwraca zbiór rzędów znajdujących się w tej sekcji tabeli.

HTMLTableRowElement[]

insertRow()

Wstawia nowy rząd w podanym miejscu.

HTMLTableRowElement

deleteRow()

Usuwa rząd znajdujący się w podanym miejscu.

void

Tabela 31.19. Obiekt HTMLTableHeaderCellElement Nazwa

Opis

Zwracana wartość

rows

Zwraca zbiór rzędów znajdujących się w tej sekcji tabeli.

HTMLTableRowElement[]

insertRow()

Wstawia nowy rząd w podanym miejscu.

HTMLTableRowElement

deleteRow()

Usuwa rząd znajdujący się w podanym miejscu.

void

Element tr Element tr reprezentowany jest przez obiekt HTMLTableRowElement, który obsługuje właściwości i metody przedstawione w tabeli 31.20. Tabela 31.20. Obiekt HTMLTableRowElement Nazwa

Opis

Zwracana wartość

rowIndex

Zwraca położenie rzędu w tabeli.

liczba

sectionRowIndex

Zwraca położenie rzędu w tej sekcji tabeli.

liczba

cells

Zwraca zbiór elementów komórek.

HTMLElement[]

insertCell()

Wstawia nową komórkę w podanym miejscu.

HTMLElement

deleteCell()

Usuwa komórkę znajdującą się w podanym miejscu.

void

Inne elementy tabeli W tabeli 31.21 znajduje się zbiór elementów tabeli reprezentowanych przez konkretne obiekty, które jednak nie obsługują dodatkowych funkcji poza oferowanymi przez HTMLElement. Tabela 31.21. Obiekty elementów tabeli, które nie obsługują dodatkowych właściwości Nazwa

Obiekt DOM

caption

HTMLTableCaptionElement

td

HTMLTableDataCellElement

670

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Elementy formularza W tym punkcie opiszę obiekty reprezentujące elementy formularza. Więcej na ich temat przeczytasz w rozdziałach 12. – 14.

Element button Element button reprezentowany jest przez obiekt HTMLButtonElement, który obsługuje właściwości i metody przedstawione w tabeli 31.22. Tabela 31.22. Obiekt HTMLButtonElement Nazwa

Opis

Zwracana wartość

autofocus

Odpowiednik właściwości autofocus.

wartość_boolowska

disabled

Odpowiednik właściwości disabled.

disabled

form

Zwraca element form, z którym powiązany jest dany element; odpowiednik właściwości form.

HTMLFormElement

formAction

Odpowiednik właściwości formAction.

tekst

formEncType

Odpowiednik właściwości formEncType.

tekst

formMethod

Odpowiednik właściwości formMethod.

tekst

formNoValidate

Odpowiednik właściwości formNoValidate.

tekst

formTarget

Odpowiednik właściwości formTarget.

tekst

name

Odpowiednik właściwości name.

tekst

type

Odpowiednik właściwości type.

tekst

value

Odpowiednik właściwości value.

tekst

labels

Zwraca elementy oznaczeń, których atrybuty odnoszą się do podanego elementu button.

HTMLLabelElement[]

Element datalist Element datalist reprezentowany jest przez obiekt HTMLDataListElement, który obsługuje właściwość podaną w tabeli 31.23. Tabela 31.23. Obiekt HTMLDataListElement Nazwa

Opis

Zwracana wartość

options

Zwraca zbiór elementów option zawartych w elemencie datalist.

HTMLOptionElement[]

Element fieldset Element fieldset reprezentowany jest przez obiekt HTMLFieldSetElement, który obsługuje właściwości przedstawione w tabeli 31.24.

671

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.24. Obiekt HTMLFieldSetElement Nazwa

Opis

Zwracana wartość

disabled

Odpowiednik właściwości disabled.

wartość_boolowska

form

Odpowiednik właściwości form.

HTMLFormElement

name

Odpowiednik właściwości name.

tekst

elements

Zwraca zbiór kontrolek formularza zawartych w elemencie fieldset.

HTMLElement[]

Element form Element form reprezentowany jest przez obiekt HTMLFormElement, który obsługuje właściwości i metody przedstawione w tabeli 31.25. Tabela 31.25. Obiekt HTMLFormElement Nazwa

Opis

Zwracana wartość

acceptCharset

Odpowiednik atrybutu accept-charset.

tekst

action

Odpowiednik atrybutu action.

tekst

autocomplete

Odpowiednik atrybutu autocomplete.

tekst

enctype

Odpowiednik atrybutu enctype.

tekst

encoding

Odpowiednik atrybutu encoding.

tekst

method

Odpowiednik atrybutu method.

tekst

name

Odpowiednik atrybutu name.

tekst

noValidate

Odpowiednik atrybutu novalidate.

wartość_boolowska

target

Odpowiednik atrybutu target.

tekst

elements

Zwraca elementy formularza.

HTMLElement[]

length

Zwraca liczbę elementów formularza.

liczba

[]

Zwraca element formularza o podanej nazwie.

HTMLElement

[]

Zwraca element formularza znajdujący się na podanej pozycji indeksowej.

HTMLElement

submit()

Wysyła formularz.

void

reset()

Wyzerowuje formularz.

void

checkValidity()

Zwraca wartość true, jeśli wszystkie elementy formularza przechodzą z powodzeniem proces zatwierdzania danych wejściowych; w innym wypadku zwraca wartość false.

wartość_boolowska

Element input Element input reprezentowany jest przez obiekt HTMLInputElement, który obsługuje właściwości i metody przedstawione w tabeli 31.26.

672

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.26. Obiekt HTMLInputElement Nazwa

Opis

Zwracana wartość

accept

Odpowiednik atrybutu accept.

tekst

alt

Odpowiednik atrybutu alt.

tekst

autocomplete

Odpowiednik atrybutu autocomplete.

tekst

autofocus

Odpowiednik atrybutu autofocus.

wartość_boolowska

checked

Zwraca wartość true, jeśli element jest zaznaczony.

wartość_boolowska

dirName

Odpowiednik atrybutu dirname.

tekst

disabled

Odpowiednik atrybutu disabled.

wartość_boolowska

form

Odpowiednik atrybutu form.

tekst

formAction

Odpowiednik atrybutu formaction.

tekst

formEnctype

Odpowiednik atrybutu formenctype.

tekst

formMethod

Odpowiednik atrybutu formmethod.

tekst

formNoValidate

Odpowiednik atrybutu formnovalidate.

tekst

formTarget

Odpowiednik atrybutu formtarget.

tekst

list

Odpowiednik atrybutu list.

HTMLElement

max

Odpowiednik atrybutu max.

tekst

maxLength

Odpowiednik atrybutu maxlength.

liczba

min

Odpowiednik atrybutu min.

tekst

multiple

Odpowiednik atrybutu multiple.

wartość_boolowska

name

Odpowiednik atrybutu name.

tekst

pattern

Odpowiednik atrybutu pattern.

tekst

placeholder

Odpowiednik atrybutu placeholder.

tekst

readOnly

Odpowiednik atrybutu readonly.

wartość_boolowska

required

Odpowiednik atrybutu required.

wartość_boolowska

size

Odpowiednik atrybutu size.

liczba

src

Odpowiednik atrybutu src.

tekst

step

Odpowiednik atrybutu step.

tekst

type

Odpowiednik atrybutu type.

tekst

value

Odpowiednik atrybutu value.

tekst

valueAsDate

Zwraca atrybut value jako datę bądź definiuje go jako taką.

Date

valueAsNumber

Zwraca atrybut value jako liczbę bądź definiuje go jako taką.

liczba

selectedOption

Zwraca element option z elementu datalist wskazanego atrybutem list, odnoszącym się do atrybutu value elementu input.

HTMLOptionElement

673

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.26. Obiekt HTMLInputElement — ciąg dalszy Nazwa

Opis

Zwracana wartość

stepUp()

Zwiększa wartość atrybutu value o podaną liczbę.

void

stepDown()

Zmniejsza wartość atrybutu value o podaną liczbę.

void

willValidate

Zwraca wartość true, jeśli element ma być poddany weryfikacji poprawności danych wejściowych po wysłaniu formularza; w innym wypadku zwraca wartość false.

wartość_boolowska

validity

Zwraca informację o poprawności danych wejściowych.

ValidityState

validationMessage

Zwraca komunikat o błędzie, który pojawia się po weryfikacji poprawności danych.

tekst

checkValidity()

Sprawdza poprawność danych wejściowych elementu.

wartość_boolowska

setCustomValidity()

Określa niestandardowy komunikat weryfikacyjny.

void

labels

Zwraca oznaczenia label powiązane z danym elementem.

HTMLLabelElement[]

Element label Element label reprezentowany jest przez obiekt HTMLLabelElement, który obsługuje właściwości przedstawione w tabeli 31.27. Tabela 31.27. Obiekt HTMLLabelElement Nazwa

Opis

Zwracana wartość

form

Zwraca element form powiązany z danym elementem label.

HTMLFormElement

htmlFor

Odpowiednik atrybutu for.

tekst

control

Zwraca element podany dla atrybutu for.

HTMLElement

Element legend Element legend reprezentowany jest przez obiekt HTMLLegendElement, który obsługuje właściwość przedstawioną w tabeli 31.28. Tabela 31.28. Obiekt HTMLLegendElement Nazwa

Opis

Zwracana wartość

form

Zwraca element form powiązany z danym elementem legend.

HTMLFormElement

Element optgroup Element optgroup reprezentowany jest przez obiekt HTMLOptGroupElement, który obsługuje właściwości przedstawione w tabeli 31.29.

674

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.29. Obiekt HTMLOptGroupElement Nazwa

Opis

Zwracana wartość

disabled

Odpowiednik atrybutu disabled.

wartość_boolowska

label

Odpowiednik atrybutu label.

tekst

Element option Element option reprezentowany jest przez obiekt HTMLOptionElement, który obsługuje właściwości przedstawione w tabeli 31.30. Tabela 31.30. Obiekt HTMLOptionElement Nazwa

Opis

Zwracana wartość

disabled

Odpowiednik atrybutu disabled.

wartość_boolowska

form

Zwraca element form, z którym powiązany jest dany element option.

HTMLFormElement

label

Odpowiednik atrybutu label.

tekst

selected

Odpowiednik atrybutu selected.

wartość_boolowska

value

Odpowiednik atrybutu value.

tekst

text

Odpowiednik atrybutu text.

tekst

index

Zwraca pozycję indeksową danego elementu w obrębie elementu-rodzica select.

liczba

Element output Element output reprezentowany jest przez obiekt HTMLOutputElement, który obsługuje właściwości przedstawione w tabeli 31.31. Tabela 31.31. Obiekt HTMLOutputElement Nazwa

Opis

Zwracana wartość

htmlFor

Odpowiednik atrybutu for.

tekst

form

Odpowiednik atrybutu form.

HTMLFormElement

name

Odpowiednik atrybutu name.

tekst

type

Odpowiednik atrybutu type.

tekst

value

Odpowiednik atrybutu value.

tekst

willValidate

Zwraca wartość true, jeśli element ma być poddany weryfikacji poprawności danych wejściowych po wysłaniu formularza; w innym wypadku zwraca wartość false.

wartość_boolowska

validationMessage

Zwraca informację o poprawności danych wejściowych.

tekst

checkValidity()

Zwraca komunikat o błędzie, który pojawia się po weryfikacji poprawności danych.

wartość_boolowska

675

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.31. Obiekt HTMLOutputElement — ciąg dalszy Nazwa

Opis

Zwracana wartość

setCustomValidity()

Sprawdza poprawność danych wejściowych elementu.

void

labels

Zwraca oznaczenia label powiązane z danym elementem.

HTMLLabelElement[]

Element select Element select reprezentowany jest przez obiekt HTMLSelectElement, który obsługuje właściwości i metody przedstawione w tabeli 31.32. Tabela 31.32. Obiekt HTMLSelectElement Nazwa

Opis

Zwracana wartość

autofocus

Odpowiednik atrybutu autofocus.

wartość_boolowska

disabled

Odpowiednik atrybutu disabled.

wartość_boolowska

form

Zwraca formularz, z którym dany element jest powiązany.

HTMLFormElement

multiple

Odpowiednik atrybutu multiple.

wartość_boolowska

name

Odpowiednik atrybutu name.

tekst

required

Odpowiednik atrybutu required.

wartość_boolowska

size

Odpowiednik atrybutu size.

liczba

type

Zwraca wartość select-multiple, jeśli elementowi przypisany jest atrybut multiple; w innym wypadku zwraca wartość select-one.

tekst

options

Zwraca zbiór elementów option.

HTMLOptionElement[]

length

Zwraca lub określa liczbę elementów option.

liczba

[]

Zwraca element o wskazanej pozycji indeksowej.

HTMLElement

selectedOptions

Zwraca zaznaczone elementy option.

HTMLOptionElement[]

selectedIndex

Zwraca pozycję indeksową pierwszego zaznaczonego elementu option.

liczba

value

Zwraca wybraną wartość.

tekst

willValidate

Zwraca wartość true, jeśli element ma być poddany weryfikacji poprawności danych wejściowych po wysłaniu formularza; w innym wypadku zwraca wartość false.

boolean

validationMessage

Zwraca informację o poprawności danych wejściowych.

tekst

checkValidity()

Zwraca komunikat o błędzie, który pojawia się po weryfikacji poprawności danych.

wartość_boolowska

676

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.32. Obiekt HTMLSelectElement — ciąg dalszy Nazwa

Opis

Zwracana wartość

setCustomValidity()

Sprawdza poprawność danych wejściowych elementu.

void

labels

Zwraca oznaczenia label powiązane z danym elementem.

HTMLLabelElement[]

Element textarea Element textarea reprezentowany jest przez obiekt HTMLTextAreaElement, który obsługuje metody i właściwości przedstawione w tabeli 31.33. Tabela 31.33. Obiekt HTMLTextAreaElement Nazwa

Opis

Zwracana wartość

autofocus

Odpowiednik atrybutu autofocus.

wartość_boolowska

cols

Odpowiednik atrybutu cols.

liczba

dirName

Odpowiednik atrybutu dirName.

tekst

disabled

Odpowiednik atrybutu disabled.

wartość_boolowska

form

Zwraca formularz, z którym powiązany jest dany element.

HTMLFormElement

maxLength

Odpowiednik atrybutu maxlength.

liczba

name

Odpowiednik atrybutu name.

tekst

placeholder

Odpowiednik atrybutu placeholder.

tekst

readOnly

Odpowiednik atrybutu readonly.

wartość_boolowska

required

Odpowiednik atrybutu required.

wartość_boolowska

rows

Odpowiednik atrybutu rows.

liczba

wrap

Odpowiednik atrybutu wrap.

tekst

type

Zwraca element textarea.

tekst

value

Zwraca treść elementu.

tekst

textLength

Zwraca długość atrybutu value.

liczba

willValidate

Zwraca wartość true, jeśli element ma być poddany weryfikacji poprawności danych wejściowych po wysłaniu formularza; w innym wypadku zwraca wartość false.

wartość_boolowska

validationMessage

Zwraca informację o poprawności danych wejściowych.

tekst

checkValidity()

Zwraca komunikat o błędzie, który pojawia się po weryfikacji poprawności danych.

wartość_boolowska

setCustomValidity()

Sprawdza poprawność danych wejściowych elementu.

void

labels

Zwraca oznaczenia label powiązane z danym elementem.

HTMLLabelElement[]

677

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Elementy content W tym punkcie opiszę obiekty reprezentujące elementy służące do osadzania treści w dokumencie. Więcej na ich temat przeczytasz w rozdziale 15. „ Uwaga Pozostałe elementy służące do osadzania treści — canvas i video — opiszę w rozdziale 34.

Element area Element area reprezentowany jest przez obiekt HTMLAreaElement, który obsługuje właściwości przedstawione w tabeli 31.34. Tabela 31.34. Obiekt HTMLAreaElement Nazwa

Opis

Zwracana wartość

alt

Odpowiednik atrybutu alt.

tekst

coords

Odpowiednik atrybutu coords.

tekst

shape

Odpowiednik atrybutu shape.

tekst

href

Odpowiednik atrybutu href.

tekst

target

Odpowiednik atrybutu target.

tekst

rel

Odpowiednik atrybutu rel.

tekst

media

Odpowiednik atrybutu media.

tekst

hrefLang

Odpowiednik atrybutu hrefLang.

tekst

type

Odpowiednik atrybutu type.

tekst

protocol

Właściwość pomocnicza, która zwraca lub definiuje komponent protokołu wartości atrybutu href.

tekst

host

Właściwość pomocnicza, która zwraca lub definiuje komponent hosta i portu wartości atrybutu href.

tekst

hostname

Właściwość pomocnicza, która zwraca lub definiuje komponent protokołu wartości atrybutu href.

tekst

port

Właściwość pomocnicza, która zwraca lub definiuje komponent portu wartości atrybutu href.

tekst

pathname

Właściwość pomocnicza, która zwraca lub definiuje komponent ścieżki wartości atrybutu href.

tekst

search

Właściwość pomocnicza, która zwraca lub definiuje komponent zapytania wartości atrybutu href.

tekst

hash

Właściwość pomocnicza, która zwraca lub definiuje komponent skrótu wartości atrybutu href.

tekst

Element embed Element embed reprezentowany jest przez obiekt HTMLEmbedElement, który obsługuje właściwości przedstawione w tabeli 31.35.

678

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.35. Obiekt HTMLEmbedElement Nazwa

Opis

Zwracana wartość

src

Odpowiednik atrybutu src.

tekst

type

Odpowiednik atrybutu type.

tekst

width

Odpowiednik atrybutu width.

tekst

height

Odpowiednik atrybutu height.

tekst

Element iframe Element iframe reprezentowany jest przez obiekt HTMLEmbedElement, który obsługuje właściwości przedstawione w tabeli 31.36. Tabela 31.36. Obiekt HTMLFrameElement Nazwa

Opis

Zwracana wartość

src

Odpowiednik atrybutu src.

tekst

srcdoc

Odpowiednik atrybutu srcdoc.

tekst

name

Odpowiednik atrybutu name.

tekst

sandbox

Odpowiednik atrybutu sandbox.

tekst

seamless

Odpowiednik atrybutu seamless.

tekst

width

Odpowiednik atrybutu width.

tekst

height

Odpowiednik atrybutu height.

tekst

contentDocument

Zwraca obiekt document.

Document

contentWindow

Zwraca obiekt window.

Window

Elementy img Element img reprezentowany jest przez obiekt HTMLImageElement, który obsługuje właściwości przedstawione w tabeli 31.37. Tabela 31.37. Obiekt HTMLImageElement Nazwa

Opis

Zwracana wartość

alt

Odpowiednik atrybutu alt.

tekst

src

Odpowiednik atrybutu src.

tekst

useMap

Odpowiednik atrybutu useMap.

tekst

isMap

Odpowiednik atrybutu isMap.

wartość_boolowska

width

Odpowiednik atrybutu width.

liczba

height

Odpowiednik atrybutu height.

liczba

complete

Zwraca wartość true, jeśli obraz został pobrany.

wartość_boolowska

679

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Element map Element map reprezentowany jest przez obiekt HTMLMapElement, który obsługuje właściwości przedstawione w tabeli 31.38. Tabela 31.38. Obiekt HTMLMapElement Nazwa

Opis

Zwracana wartość

name

Odpowiednik atrybutu name.

tekst

areas

Zwraca elementy area mapy obrazu.

HTMLAreaElement[]

images

Zwraca elementy img i object mapy obrazu.

HTMLElement[]

Element meter Element meter reprezentowany jest przez obiekt HTMLMeterElement, który obsługuje właściwości przedstawione w tabeli 31.39. Tabela 31.39. Obiekt HTMLMeterElement Nazwa

Opis

Zwracana wartość

value

Odpowiednik atrybutu value.

liczba

max

Odpowiednik atrybutu max.

tekst

form

Zwraca formularz, z którym dany element jest powiązany.

HTMLFormElement

labels

Zwraca elementy oznaczeń powiązane z danym elementem.

HTMLLabelElement[]

Element object Element object reprezentowany jest przez obiekt HTMLObjectElement, który obsługuje właściwości przedstawione w tabeli 31.40. Tabela 31.40. Obiekt HTMLObjectElement Nazwa

Opis

Zwracana wartość

data

Odpowiednik atrybutu data.

tekst

type

Odpowiednik atrybutu type.

tekst

form

Zwraca element form, z którym powiązany jest dany element.

HTMLFormElement

name

Odpowiednik atrybutu name.

tekst

useMap

Odpowiednik atrybutu usemap.

tekst

width

Odpowiednik atrybutu width.

tekst

height

Odpowiednik atrybutu height.

tekst

contentDocument

Zwraca obiekt document.

Document

contentWindow

Zwraca obiekt window.

Window

680

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Tabela 31.40. Obiekt HTMLObjectElement — ciąg dalszy Nazwa

Opis

Zwracana wartość

willValidate

Zwraca wartość true, jeśli element ma być poddany weryfikacji poprawności danych wejściowych po wysłaniu formularza; w innym wypadku zwraca wartość false.

wartość_boolowska

validationMessage

Zwraca komunikat o błędzie, który pojawia się po weryfikacji poprawności danych.

tekst

checkValidity()

Sprawdza poprawność danych wejściowych elementu.

wartość_boolowska

setCustomValidity()

Określa niestandardowy komunikat weryfikacyjny.

void

labels

Zwraca elementy oznaczeń powiązane z danym elementem.

HTMLLabelElement[]

Element param Element param reprezentowany jest przez obiekt HTMLParamElement, który obsługuje właściwości przedstawione w tabeli 31.41. Tabela 31.41. Obiekt HTMLParamElement Nazwa

Opis

Zwracana wartość

name

Odpowiednik atrybutu name.

tekst

value

Odpowiednik atrybutu value.

tekst

Element progress Element progress reprezentowany jest przez obiekt HTMLProgressElement, który obsługuje właściwości przedstawione w tabeli 31.42. Tabela 31.42. Obiekt HTMLProgressElement Nazwa

Opis

Zwracana wartość

value

Odpowiednik atrybutu value.

liczba

max

Odpowiednik atrybutu max.

liczba

position

Odpowiednik atrybutu position.

liczba

form

Zwraca element form, z którym powiązany jest dany element.

HTMLFormElement

labels

Zwraca elementy oznaczeń powiązane z danym elementem.

HTMLFormElement[]

681

ROZDZIAŁ 31. „ OBIEKTY POSZCZEGÓLNYCH ELEMENTÓW

Podsumowanie W tym rozdziale wymieniłem obiekty reprezentujące różne typy elementów w DOM. W większości nie są zbyt przydatne — z dwoma wyjątkami. Pierwszy wyjątek to elementy formularza, które dają kontrolę nad zatwierdzaniem i wysyłaniem formularzy. Drugi wyjątek to elementy tabel, które pozwalają na zarządzanie zawartością tabel. Tym niemniej, opisane w tym rozdziale obiekty są w znacznej mierze zbiorem właściwości reprezentujących konkretne atrybuty, do których wartości można uzyskać dostęp za pośrednictwem uniwersalnego obiektu HTMLElement.

682

CZĘŚĆ V

Zaawansowane funkcje

W ostatniej części książki przedstawię Ci niektóre z zaawansowanych funkcji HTML5, w tym Ajaksa (służącego do wysyłania serwerowi żądań w tle) i element canvas (który pozwala na rysowanie z użyciem JavaScript).

ROZDZIAŁ 32

Wprowadzenie do Ajaksa. Część I Ajax jest nieodzownym narzędziem do tworzenia nowoczesnych aplikacji internetowych. Umożliwia asynchroniczne wysyłanie i pobieranie danych z serwera oraz przetwarzanie ich z użyciem JavaScript. Nazwa Ajax jest skrótem od Asynchronous JavaScript and XML (asynchroniczny JavaScript i XML) i powstała w czasach, kiedy XML był preferowanym formatem transferu danych, choć — o czym jeszcze wspomnę — zdążyło to już ulec zmianie. Ajax jest technologią, o którą toczą się spory. Jego nieoceniona użyteczność przy tworzeniu bogatych aplikacji internetowych sprawia, że projektanci i deweloperzy zdołali już wypracować cały system praktyk, a także regularnie wykłócają się z zapałem o to, jak używać Ajaksa prawidłowo. Są to w większości głupoty, bez których można się doskonale obejść. Po zapoznaniu się ze szczegółami okazuje się, że Ajax jest zaskakująco prosty, wobec czego można się bardzo szybko nauczyć sprawnego wydawania żądań. Moje zalecenia co do radzenia sobie z fanatykami odnoszą się także do fanatyków Ajaksa: należy przytakiwać, po czym wycofać się i zrobić to, co będzie najkorzystniejsze dla projektu. „ Wskazówka Nazwę Ajax zapisuje się na różne sposoby. Obecnie „Ajax” zdaje się być formą najpowszechniejszą, ale popularny jest też zapis „AJAX”, a niektórzy (twierdząc, że słowa „and” nigdy nie należy pisać od wielkiej litery) używają nawet formy „AjaX”. Wszystkie te nazwy odnoszą się do jednego zbioru technik. W tej książce starałem się trzymać formy „Ajax”.

Najważniejsza specyfikacja Ajaksa nosi nazwę obiektu JavaScript, który służy do definiowania i wydawania żądań: XMLHttpRequest. Owa specyfikacja ma dwa poziomy. Wszystkie popularne przeglądarki obsługują poziom pierwszy, który z kolei obsługuje podstawowe funkcje. Poziom drugi rozszerza bazową specyfikację o dodatkowe zdarzenia, funkcje ułatwiające pracę z elementami form oraz obsługę pokrewnych specyfikacji, m.in. CORS (którą omówię w dalszej części rozdziału). W tym rozdziale omówię podstawy Ajaksa. Pokażę, jak tworzyć, konfigurować i wykonywać proste żądania. Przedstawię Ci, jak zdarzenia informują o postępach w realizacji żądania, jak radzić sobie z błędami żądań i aplikacji oraz jak wydawać żądania na przestrzeni różnych źródeł. Wszystkie zawarte w tym rozdziale przykłady dotyczą pobierania danych z serwera. Wysyłaniem danych — a zwłaszcza danych z formularza, do czego Ajaksa używa się zresztą najczęściej — zajmę się w następnym rozdziale. W tabeli 32.1 znajduje się streszczenie całego rozdziału.

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Tabela 32.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Wydanie żądania Ajaksa.

Utwórz obiekt XMLHttpRequest i przywołaj metody open i send.

32.1 – 32.3

Wykorzystanie jednorazowych zdarzeń do śledzenia postępów w realizacji żądania.

Użyj zdarzeń drugiego poziomu, w rodzaju onload, onloadstart i onloadend.

32.4

Reaguj na błędy lub użyj deklaracji

32.5

Wykrywanie i naprawianie błędów.

try...catch.

Określenie nagłówków żądania Ajaksa.

Użyj metody setRequestHeader.

32.6 – 32.7

Odczytanie nagłówków z odpowiedzi serwera.

Użyj metod getResponseHeader i getAllResponseHeaders.

32.8

Wydanie żądania Ajaksa na przestrzeni różnych źródeł.

Zdefiniuj nagłówek Access-Control-Allow-Origin w odpowiedzi serwera.

32.9 – 32.12

Przerwanie żądania.

Użyj metody abort.

32.13, 32.14

Początki z Ajaksem Punktem wyjścia do wykorzystania Ajaksa jest obiekt XMLHttpRequest, którego działanie najprościej wytłumaczyć przykładem. W listingu 32.1 widnieje przykład wykorzystania obiektu XMLHttpRequest do wykonania podstawowego zadania. Listing 32.1. Zastosowanie obiektu XMLHttpRequest

Przykład

jablka wisnie banany

Naciśnij przycisk



W tym przykładzie widnieją trzy elementy button, oznaczone nazwami różnych owoców: jablka, wisnie i banany. Jest tu również element div, który początkowo wyświetla prosty komunikat, polecający użytkownikowi nacisnąć któryś z przycisków. Wygląd tego dokumentu widać na rysunku 32.1.

Rysunek 32.1. Pierwotny stan dokumentu będącego prostym przykładem zastosowania Ajaksa Po naciśnięciu któregoś z przycisków skrypt wczytuje inny dokument HTML i osadza go w pliku jako treść elementu div. Istnieją jeszcze trzy dokumenty, które odpowiadają oznaczeniom elementów button: jablka.html, wisnie.html i banany.html. Na rysunku 32.2 widnieje przykład wyświetlenia jednego z tych dokumentów.

Rysunek 32.2. Wyświetlenie asynchronicznie wczytanego dokumentu Trzy dodatkowe dokumenty są dość nieskomplikowane — składają się z obrazu i akapitu z artykułu na Wikipedii o danym owocu. W listingu 32.2 znajduje się treść dokumentu wisnie.html, ale wszystkie trzy wyglądają mniej więcej tak samo — znajdziesz je w materiałach źródłowych książki na stronie www.helion.pl/ksiazki/htm5pe.htm. Listing 32.2. Treść dokumentu wisnie.html

Wiśnia

687

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Wiśnia (Cerasus Miller) — rodzaj roślin należący do rodziny różowatych (Rosaceae). Występuje w około 60 gatunkach w strefie umiarkowanej półkuli północnej, głównie we wschodniej Azji. W Polsce w stanie naturalnym występują tylko dwa gatunki wiśni: wiśnia karłowata, rosnąca na wyżynach południowych, prawnie chroniona, oraz czereśnia ptasia, zwana trześnią.

Po naciśnięciu przycisków z kolejnymi owocami przeglądarka zwraca żądane dokumenty asynchronicznie, czyli bez odświeżania głównego dokumentu. To jest właśnie charakterystyczne zachowanie Ajaksa. Wystarczy spojrzeć na skrypt, by przekonać się, jak to działa. Zaczyna się od funkcji handleButtonPress, która przywoływana jest w reakcji na zdarzenie click elementu button: function handleButtonPress(e) { var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = handleResponse; httpRequest.open("GET", e.target.innerHTML + ".html"); httpRequest.send(); }

Pierwszym krokiem jest utworzenie nowego obiektu XMLHttpRequest. W odróżnieniu od większości obiektów DOM, do tego obiektu nie uzyskuje się dostępu za pośrednictwem globalnej zmiennej zdefiniowanej przez samą przeglądarkę. Należy użyć słowa kluczowego new. var httpRequest = new XMLHttpRequest();

Kolejny krok to określenie procedury obsługi zdarzenia readystatechange. Zdarzenie to jest wyzwalane kilkakrotnie w procesie żądania, dostarczając informacje o postępach. Do tego zdarzenia (oraz innych, które obsługuje obiekt XMLHttpRequest) wrócę w dalszej części tego rozdziału. Właściwości onreadystatechange nadałem wartość handleResponse — jest to funkcja, do której niedługo powrócimy. httpRequest.onreadystatechange = handleResponse;

Teraz już można wskazać obiektowi XMLHttpRequest, co ma robić. Używa się do tego metody open, która podaje metodę HTTP (w tym wypadku GET) i URL, do którego żądanie się odnosi. httpRequest.open("GET", e.target.innerHTML + ".html");

„ Wskazówka Powyżej przedstawiłem najprostszy sposób zastosowania metody open. Można również podać przeglądarce dane dostępu do serwera, np. httpRequest.open("GET", e.target.innerHTML + ".html", true, "adam", "tajemnica"). Ostatnie dwa argumenty to nazwa użytkownika i hasło, które należy przesłać serwerowi. Argument o wartości true wskazuje, że żądanie ma być wykonane asynchronicznie. Argument ten zawsze powinien mieć wartość true.

URL żądania tworzę na podstawie tego, który przycisk button użytkownik nacisnął. Po naciśnięciu przycisku jablka przywołany zostaje adres URL jablka.html. Przeglądarka radzi sobie także z względnymi

688

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

URL, w razie potrzeby bazując na lokalizacji bieżącego dokumentu. W tym przypadku zakłada się, że skoro główny dokument zostaje wczytany z lokalizacji http://titan/pliki/, to jablka.html odnosi się do pliku http://titan/pliki/jablka.html. Adresy URL mogą być u Ciebie inne, ale rezultat będzie taki sam. „ Wskazówka Konieczne jest wybranie właściwej metody HTTP żądania. Jak wspomniałem w rozdziale 12., żądania GET służą do bezpiecznych interakcji, czyli takich, w ramach których możesz bez końca powtarzać to jedno żądanie bez żadnych efektów ubocznych. Żądania POST służą do niebezpiecznych interakcji, przy których żądanie wywołuje jakąś zmianę na serwerze, a wielokrotne powtórzenie żądania może prowadzić do problemów. Istnieją wprawdzie inne metody HTTP, ale GET i POST używa się najczęściej. Jeśli zresztą będziesz chciał użyć innej metody, to będziesz musiał skorzystać z konwencji przedstawionej w punkcie „Zmiana metody HTTP żądania”, by żądanie w ogóle przeszło przez firewalle.

Funkcja kończy się metodą send. httpRequest.send();

W tym przykładzie nie wysyłam serwerowi danych, więc na końcu metody send nie zamieściłem żadnego argumentu. Wysyłanie danych przedstawię Ci w dalszej części rozdziału, ale w omawianym tutaj prostym przykładzie jedynie pobieramy dokumenty HTML z serwera.

Obsługa odpowiedzi Kiedy tylko skrypt przywołuje metodę send, przeglądarka przekazuje serwerowi żądanie w tle. Ponieważ żądanie obsługiwane jest w tle, powiadomienia o postępach w realizacji żądania polegają w Ajaksie na zdarzeniach. W poniższym przykładzie obsługuję te zdarzenia funkcją handleResponse: function handleResponse(e) { if (e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200) { document.getElementById("target").innerHTML = e.target.responseText; } }

Po wyzwoleniu zdarzenia readystatechange przeglądarka przekazuje obiekt Event podanej procedurze obsługi. Jest to ten sam obiekt Event, który opisałem w rozdziale 30., a właściwości target przypisana jest wartość XMLHttpRequest, do którego zdarzenie się odnosi. Zdarzenie readystatechange informuje o różnych etapach, które można zidentyfikować, odczytując wartość właściwości XMLHttpRequest.readyState. Wartości tej właściwości opisane są w tabeli 32.2. Tabela 32.2. Wartości właściwości XMLHttpRequest.readyState Wartość

Wartość liczbowa

Opis

UNSENT

0

Utworzono obiekt XMLHttpRequest.

OPENED

1

Przywołano metodę open.

HEADERS_RECEIVED

2

Odebrano nagłówki odpowiedzi serwera.

LOADING

3

Odbierana jest odpowiedź serwera.

DONE

4

Przekaz odpowiedzi zakończył się — z powodzeniem lub nie.

Status DONE sygnalizuje, że żądanie zostało zakończone, lecz nic nie mówi o tym, czy się powiodło. Kod statusu HTTP uzyskuje się przy użyciu właściwości status, która zwraca wartość liczbową. Przykładowo, wartość 200 wskazuje na sukces. Wartości właściwości readyState i status w zestawieniu pozwalają na sprawdzenie wyniku żądania.

689

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

To, jak sprawdziłem obydwie te właściwości, widać po funkcji handleResponse. Treść elementu div określam tylko wtedy, kiedy właściwość readyState ma wartość DONE, a status wartość 200. Dane wysłane przez serwer pobieram właściwością XMLHttpRequest.responseText. document.getElementById("target").innerHTML = e.target.responseText;

Właściwość responseText zwraca ciąg znaków reprezentujący dane pobrane z serwera. Użyłem tej właściwości do zdefiniowania wartości innerHTML elementu div tak, by wyświetlał zawartość wskazanego dokumentu. Oto prosty przykład zastosowania Ajaksa — użytkownik klika przycisk, przeglądarka pobiera dokument z serwera w tle, a następnie wywołuje się zdarzenie, by wyświetlić treść tego dokumentu. Na rysunku 32.3 widnieje rezultat zastosowania tego skryptu wraz z różnymi dokumentami, które można w ten sposób wyświetlić.

Rysunek 32.3. Rezultat użycia skryptu z przykładu prostego zastosowania Ajaksa

Problem z Operą Zanim przejdziemy dalej, musimy przez chwilę zająć się obsługą standardu XMLHttpRequest w Operze, która — cóż — nie umywa się do obsługi w innych przeglądarkach. Przykład ukazany na początku rozdziału zadziała idealnie w innych popularnych przeglądarkach, lecz trzeba w nim nanieść kilka zmian, by poradzić sobie z problemami, które pojawiają się w Operze. W listingu 32.3 widnieje odpowiednio zmodyfikowany przykład. Listing 32.3. Przykład zmodyfikowany na potrzeby Opery

Przykład

jablka wisnie banany

Naciśnij przycisk



Pierwszy problem tkwi w tym, że Opera nie wysyła obiektu Event przy wyzwoleniu zdarzenia readystatechange. Trzeba zatem przypisać obiekt XMLHttpRequest do globalnej zmiennej, by móc się do niego później odnieść. Stworzyłem var o nazwie httpRequest, do którego się odnoszę przy utworzeniu obiektu funkcją handleButtonPress, a następnie podczas przetwarzania zakończonego żądania funkcją handleResponse. Nie wydaje się to szczególnie ciekawe, ale jeśli użytkownik naciśnie przycisk podczas przetwarzania żądania, to globalnej zmiennej przypisany zostanie nowy obiekt XMLHttpRequest i stracisz możliwość odniesienia się do pierwotnego żądania. Drugi problem jest taki, że Opera nie obsługuje nazw wartości właściwości readyState obiektu XMLHttpRequest, wobec czego trzeba korzystać z wartości numerycznych podanych w tabeli 32.2. Trzeba zatem sprawdzić, czy wartość wynosi 4, a nie XMLHttpRequest.DONE. Mam nadzieję, że do wydania mojej książki Opera zdąży zaktualizować i usprawnić obsługę XMLHttpRequest. W innym wypadku sam będziesz musiał tworzyć skrypty, które będą uwzględniać takie problematyczne zachowanie.

Zdarzenia Ajaksa Skoro już utworzyliśmy i przeanalizowaliśmy prosty przykładowy kod, to możemy przejść do funkcji obsługiwanych przez XMLHttpRequest i wykorzystania ich w żądaniach. Należy zacząć od dodatkowych zdarzeń określonych w specyfikacji poziomu drugiego. Z jednym z nich — readystatechange, który został przeniesiony z poziomu pierwszego — już się zetknąłeś, ale są też inne, które opisuję w tabeli 32.3. Większość tych zdarzeń wyzwala się na określonym etapie wykonywania żądania. Wyjątkiem jest readystatechange (który już opisałem) i progress, który można wyzwalać wielokrotnie w celu uzyskiwania aktualizacji w sprawie postępów. Poza readystatechange zdarzenia przedstawione w tabeli zdefiniowane są w specyfikacji drugiego poziomu XMLHttpRequest. Kiedy piszę te słowa, obsługa tych zdarzeń jest zróżnicowana. Firefox może się pochwalić najpełniejszą obsługą, Opera w ogóle ich nie obsługuje, a Chrome obsługuje niektóre z nich, lecz niezgodnie ze specyfikacją. „ Ostrzeżenie Wykorzystanie zdarzenia readystatechange jest obecnie — ze względu na cząstkową obsługę zdarzeń drugopoziomowych — jedyną wiarygodną metodą śledzenia postępów w wykonywaniu żądania.

691

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Tabela 32.3. Zdarzenia obsługiwane przez obiekt XMLHttpRequest Nazwa

Opis

Rodzaj zdarzenia

abort

Wyzwalane przy przerwaniu żądania.

ProgressEvent

error

Wyzwalane w przypadku niepowodzenia w wykonywaniu żądania.

ProgressEvent

load

Wyzwalane, kiedy żądanie zostaje wykonane z powodzeniem.

ProgressEvent

loadend

Wyzwalane, kiedy żądanie zostaje wykonane — z powodzeniem lub nie.

ProgressEvent

loadstart

Wyzwalane przy rozpoczęciu wykonywania żądania.

ProgressEvent

progress

Wyzwalane, by wskazać postępy w wykonywaniu żądania.

ProgressEvent

readystatechange

Wyzwalane na różnych etapach wykonywania żądania.

Event

timeout

Wyzwalane, kiedy kończy się czas oczekiwania na odpowiedź.

ProgressEvent

Przy wyzwalaniu zdarzeń przeglądarka używa standardowego obiektu Event (opisanego w rozdziale 30.) przy zdarzeniu readystatechange, a obiektu ProgressEvent przy innych zdarzeniach. Obiekt ProgressEvent obsługuje wszystkie składowe obiektu Event oraz dodatkowe składowe, których opis widnieje w tabeli 32.4. Tabela 32.4. Dodatkowe właściwości obsługiwane przez ProgressEvent Nazwa

Opis

Zwracana wartość

lengthComputable

Zwraca wartość true, jeśli można obliczyć całkowitą długość strumienia danych.

wartość_boolowska

loaded

Zwraca ilość wczytanych dotąd danych.

liczba

total

Zwraca całkowitą ilość dostępnych danych.

liczba

W listingu 32.4 widnieje przykład zastosowania tych zdarzeń. Pokazuję go na przykładzie Firefoksa, w którym obsługa zdarzeń jest najpełniejsza i najpoprawniejsza. Listing 32.4. Zastosowanie jednorazowych zdarzeń obsługiwanych przez XMLHttpRequest

Przykład



jablka wisnie banany



692

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Naciśnij przycisk



693

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Jest to inny wariant poprzedniego przykładu. Utworzyłem procedury obsługi niektórych zdarzeń oraz zapis o każdym przetwarzanym zdarzeniu w elemencie table. Wyzwalanie zdarzeń w Firefoksie widać na rysunku 32.4.

Rysunek 32.4. Wyzwalane w Firefoksie zdarzenia drugopoziomowe

Obsługa błędów W pracy z Ajaksem należy pamiętać o dwóch rodzajach błędów. Różnica między nimi wynika z przyjęcia różnych perspektyw. Pierwszy rodzaj błędu jest problemem dla obiektu XMLHttpRequest — problemem, który uniemożliwia przekazanie żądania serwerowi, np. kiedy nie można przetworzyć nazwy hosta w DNS, próba połączenia spotyka się z odmową albo adres URL jest błędny. Drugi rodzaj błędu jest problemem z punktu widzenia aplikacji, ale nie samego obiektu XMLHttpRequest. Kiedy serwer otrzymuje żądanie, przyjmuje je, przetwarza i zwraca odpowiedź pozbawioną treści, którą chciałeś uzyskać, to mamy do czynienia właśnie z takim błędem. Może to mieć miejsce, kiedy podany adres URL nie istnieje. Takie błędy można obsługiwać na trzy różne sposoby, tak jak widać to w listingu 32.5. Listing 32.5. Obsługa błędów Ajaksa

Przykład

jablka wisnie banany ogorek Błędny host Błędny URL

694

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Naciśnij przycisk



Obsługa błędów wejściowych Pierwszy rodzaj błędu następuje, kiedy podajesz obiektowi XMLHttpRequest błędne dane, np. źle sformatowany adres URL. Zdarza się to zaskakująco często przy tworzeniu adresu URL na podstawie danych podawanych przez użytkownika. Na potrzeby symulacji zamieściłem w przykładowym dokumencie przycisk button oznaczony jako Błędny URL. Naciśnięcie tego przycisku powoduje wywołanie metody open: httpRequest.open("GET", "http://");

Nawet nie zliczę, ile razy zetknąłem się z tym problemem (i — co gorsza — ile razy sam go spowodowałem). Na ogół jest tak, że użytkownik zostaje poproszony o podanie wartości w elemencie input, którego treść następnie służy do wygenerowania adresu URL na potrzeby żądania Ajaksa. Kiedy użytkownik wyzwala żądanie bez podania wartości, metoda open otrzymuje niepełny URL albo — tak jak w tym przypadku — sam człon protokołu. Jest to błąd, który uniemożliwia wykonanie żądania; obiekt XMLHttpRequest sygnalizuje o błędzie, kiedy coś takiego się zdarza. Oznacza to, że musisz opatrzyć żądanie deklaracją try...catch. try { ... httpRequest.open("GET", "http://brak.domeny/dokument.html"); ... httpRequest.send(); } catch (error) { displayErrorMsg("try/catch", error.message); }

Klauzula catch daje szansę na naprawienie błędu. Możesz zdecydować, czy należy poprosić użytkownika o podanie wartości, czy powrócić do domyślnego adresu URL, czy też zwyczajnie anulować żądanie. W tym przykładzie postanowiłem wyświetlić komunikat o błędzie przy użyciu funkcji displayErrorMsg. Funkcja ta znajduje się w przykładowym skrypcie i wyświetla właściwość Error.message w elemencie div o ID errormsg.

Obsługa błędów żądań Drugi rodzaj błędu pojawia się, kiedy żądanie zostaje wydane, lecz dzieje się z nim coś nie tak. Na potrzeby symulacji zamieściłem w tym przykładzie przycisk Błędny host. Po jego naciśnięciu metoda open zostaje przywołana z adresem URL, którego nie można wykorzystać. httpRequest.open("GET", "http://brak.domeny/dokument.html");

Z tym adresem URL są dwa problemy. Po pierwsze, jego nazwa hosta nie może być przetworzona w DNS, więc przeglądarka nie może nawiązać połączenia z serwerem. Obiekt XMLHttpRequest zauważa ten problem dopiero po rozpoczęciu wykonywania żądania, wobec czego informuje o nim na dwa sposoby. Jeżeli utworzyłeś nasłuchiwacz zdarzenia error, to przeglądarka prześle funkcji nasłuchującej obiekt Event. Oto funkcja z przykładu: function handleError(e) { displayErrorMsg("Error event", httpRequest.status + httpRequest.statusText); }

696

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Ilość informacji pozyskiwanych od obiektu XMLHttpRequest o tego typu błędach różni się w zależności od przeglądarki. Niestety, najczęściej otrzymuje się status o wartości 0 i pusty statusText. Drugi problem polega na tym, że adres URL ma inne źródło niż skrypt, który wydaje żądanie — domyślnie jest to niedopuszczalne. Zazwyczaj można wydawać żądania Ajaksa jedynie adresom URL o takim samym źródle, jak źródło wczytanego skryptu. Przeglądarka może zgłosić ten problem, tworząc obiekt Error lub wyzwalając zdarzenie error — to już zależy od przeglądarki. Różne przeglądarki sprawdzają źródło w różnych momentach, wobec czego nie zawsze wskazują na ten sam problem. Do obejścia ograniczenia źródła możesz użyć Cross-Origin Resource Sharing (CORS); więcej na ten temat przeczytasz w punkcie „Wydawanie żądań Ajaksa między różnymi źródłami”.

Obsługa błędów aplikacji Ostatni rodzaj błędu pojawia się, kiedy żądanie zostaje zakończone sukcesem z punktu widzenia obiektu XMLHttpRequest, ale zarazem nie dostarcza danych, na które liczyłeś. Na potrzeby symulacji utworzyłem w dokumencie przycisk button o nazwie cucumber. Po naciśnięciu tego przycisku generowany jest adres URL, tak samo jak w przypadku przycisków jablka, wisnie i banany, z tym że na serwerze nie ma dokumentu cucumber.html. W takich sytuacjach nie pojawia się żaden błąd (jako że żądanie w zasadzie udaje się wykonać z powodzeniem), więc sytuację trzeba oszacować na podstawie właściwości status. Przywołanie nieistniejącego dokumentu skutkuje uzyskaniem kodu statusu 404, który wskazuje, że serwer nie może znaleźć wywołanego dokumentu. Oto, jak obsługuję kody statusu o wartości innej niż 200 (która wskazuje, że wszystko się powiodło): if (httpRequest.status == 200) { target.innerHTML = httpRequest.responseText; } else { document.getElementById("statusmsg").innerHTML = "Status: " + httpRequest.status + " " + httpRequest.statusText; }

W tym przykładzie zwyczajnie wyświetlam wartości status i statusText. W prawdziwej aplikacji należałoby jednak odnieść się do błędu w użyteczny i znaczący sposób, np. wyświetlić jakąś treść zapasową lub poinformować użytkownika o problemie, w zależności od charakteru tej aplikacji.

Pobieranie i definiowanie nagłówków Obiekt XMLHttpRequest pozwala na definiowanie nagłówków żądań i odczytywanie nagłówków odpowiedzi serwera. W tabeli 32.5 znajduje się opis metod związanych z nagłówkami. Tabela 32.5. Metody odnoszące się do nagłówków obiektu XMLHttpRequest Metoda

Opis

Zwracana wartość

setRequestHeader(, )

Nadaje nagłówkowi określoną wartość.

void

getResponseHeader()

Zwraca wartość określonego nagłówka.

tekst

getAllResponseHeaders()

Zwraca wszystkie nagłówki w jednym ciągu.

tekst

Zmiana metody HTTP żądania Rzadko kiedy trzeba dodawać lub zmieniać nagłówki żądań Ajaksa. Przeglądarka wie, co ma wysłać, a serwer wie, jak odpowiedzieć. Są jednak pewne wyjątki. Pierwszy z nich pojawia się przy nagłówku X-HTTP-Method-Override.

697

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Standard HTTP, używany na ogół do pobierania i przesyłania dokumentów HTML przez Internet, obsługuje szereg metod. Większość ludzi zna powszechnie używane metody GET i POST, ale są też inne, w tym PUT i DELETE. Coraz popularniejsze staje się wykorzystywanie tych metod HTTP do nadawania znaczenia adresom URL pobieranym z serwera. Przykładowo, gdybyś chciał zobaczyć rejestr użytkownika, to podałbyś następujący kod: httpRequest.open("GET", "http://mojserwer/rejestr/freeman/adam");

Powyższe to jedynie metoda HTTP i URL żądania. Żeby to żądanie mogło zadziałać, potrzebna byłaby aplikacja po stronie serwera, która wiedziałaby, jak je przetworzyć i zwrócić odpowiednie dane. Gdybyś chciał usunąć dane, to mógłbyś podać następujący kod: httpRequest.open("DELETE", "http://mojserwer/rejestr/freeman/adam");

Chodzi tutaj o to, aby wyrazić to, co serwer ma zrobić, przy użyciu metody HTTP, a nie poprzez zakodowanie tego w samym adresie URL. Stosowanie się do tego rozwiązania wpisuje się w szerszy trend korzystania z API typu REpresentational State Transfer. Określenie tego, co jeszcze należy do API typu REST, jest tematem częstych i zaognionych dyskusji — w które nie zamierzam się tutaj wgłębiać. Wykorzystanie metod HTTP w ten sposób jest problematyczne o tyle, że wiele popularnych technologii internetowych obsługuje jedynie metody GET i POST, a wiele firewalli przepuszcza wyłącznie tego typu żądania. Istnieje konwencja, która pozwala na ominięcie tego ograniczenia — należy skorzystać z nagłówka HTTP-Method-Override do określenia metody HTTP, której chcesz użyć, formalnie jednak wysyłając żądanie POST. W listingu 32.6 widnieje przykład. Listing 32.6. Definiowanie nagłówka żądania

Przykład

jablka wisnie banany

Naciśnij przycisk



W tym przykładzie użyłem metody setRequestHeader przy obiekcie XMLHttpRequest, by wskazać, że żądanie ma być przetworzone tak, jakbym użył metody HTTP DELETE. Zauważ, że nagłówek zdefiniowałem już po przywołaniu metody open. Obiekt XMLHttpRequest zwraca błąd, kiedy zamieszcza się metodę setRequestHeader przed metodą open. „ Wskazówka Zmiana domyślnej metody HTTP działa tylko wtedy, kiedy framework aplikacji po stronie serwera rozumie konwencję x-HTTP-Method-Override i sama aplikacja jest ustawiona tak, by zwracać uwagę na rzadziej stosowane metody HTTP.

Wyłączenie buforowania treści Drugi nagłówek, który warto zamieścić w żądaniu Ajaksa — zwłaszcza w ramach pisania skryptów i usuwania usterek — to Cache-Control. Niektóre przeglądarki buforują treść pozyskaną przez żądanie Ajaksa i już jej nie żądają do końca sesji. Jeśli mamy się odnieść do używanego w tym rozdziale przykładu, oznacza to, że wszelkie zmiany w plikach jablka.html, wisnie.html i banany.html nie zostałyby od razu odzwierciedlone w przeglądarce. W listingu 32.7 widać, jak ustawić nagłówek, by tego uniknąć. Listing 32.7. Wyłączenie buforowania treści ... function handleButtonPress(e) { httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = handleResponse; httpRequest.open("GET", e.target.innerHTML + ".html"); httpRequest.setRequestHeader("Cache-Control", "no-cache"); httpRequest.send(); } ...

Wartość nagłówka określa się w taki sam sposób, jak w poprzednim przykładzie. Tym razem jednak interesuje nas nagłówek Cache-Control, któremu chcemy nadać wartość no-cache. Kiedy taka informacja jest obecna, zmiany treści przywoływanej przez Ajaksa wyświetlają się przy kolejnym przywołaniu dokumentu.

Odczytywanie nagłówków odpowiedzi Nagłówki HTTP wysyłane przez serwer w odpowiedzi na żądanie Ajaksa można odczytać przy użyciu metod getResponseHeader i getAllResponseHeaders. Zazwyczaj treść nagłówków nie jest szczególnie interesująca, ponieważ jest ona obiektem wymiany pomiędzy przeglądarką a serwerem. W listingu 32.8 widnieje przykład wykorzystania tych właściwości.

699

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Listing 32.8. Odczytywanie nagłówków odpowiedzi

Przykład



jablka wisnie banany

Naciśnij przycisk



Nagłówki odpowiedzi są dostępne, kiedy readyState zmienia się na HEADERS_RECEIVED (który ma wartość numeryczną 2). Nagłówki to pierwsza rzecz, którą serwer zwraca w odpowiedzi — dlatego właśnie możesz je odczytać, zanim sama treść staje się dostępna. W tym przykładzie przypisałem dwóm elementom div treść odpowiadającą wartości jednego nagłówka (Content-Type) i wszystkich nagłówków pozyskanych metodami getResponseHeader i getAllResponseHeader. Rezultat widać na rysunku 32.5.

700

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Rysunek 32.5. Odczytywanie nagłówków odpowiedzi

Wydawanie żądań Ajaksa między różnymi źródłami Przeglądarki domyślnie wprowadzają ograniczenia, które sprawiają, że skrypty Ajaksa mogą jedynie wydawać żądania w obrębie źródła dokumentu, w których są zawarte. Jak pamiętasz, źródło jest połączeniem protokołu, nazwy hosta i portu adresu URL. Oznacza to, że kiedy wczytuję dokument z adresu http://titan, to zawarty w dokumencie skrypt zwykle nie może wysłać żądania pod adres http://titan:8080, ponieważ port jest inny, a przez to poza źródłem dokumentu. Żądanie Ajaksa, wychodzące z jednego źródła do innego, nazywamy żądaniem międzyźródłowym (ang. Same origin policy). „ Wskazówka Ta zasada ma na celu zredukowanie zagrożenia ataku typu cross-site scripting (XSS), przy którym dochodzi do wymuszenia na przeglądarce (lub użytkowniku) uruchomienia szkodliwego skryptu. Tematyka tej książki nie obejmuje kwestii ataków XSS, ale możesz się z tym tematem zapoznać na Wikipedii pod adresem http://pl.wikipedia.org/wiki/Cross-site_scripting.

Z tym podejściem wiąże się taki problem, że całkowicie uniemożliwia ono wykonywanie żądań międzyźródłowych. Z tego powodu w powszechnym użyciu są pewne nieeleganckie sztuczki, służące do wymuszania na przeglądarce wydawania żądań, które obchodzą wspomnianą zasadę. Szczęśliwie, powstał już uznawany sposób wykonywania żądań międzyźródłowych, który jest opisany w specyfikacji Cross-Origin Resource Sharing (CORS). „ Uwaga Mamy tu do czynienia z zaawansowanym tematem, którego zgłębienie wymaga podstawowej znajomości nagłówków HTTP. Jako że tematem tej książki jest HTML5, to nie będę szczegółowo omawiał samego HTTP. Jeżeli temat HTTP jest Ci obcy, to możesz pominąć ten punkt.

Na dobry początek przyjrzyjmy się problemowi, który chcemy naprawić. W listingu 32.9 widać dokument HTML ze skryptem, który chce wykonać żądanie międzyźródłowe. Listing 32.9. Skrypt, który wykonuje żądanie międzyźródłowe

Przykład

701

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I



jablka wisnie banany

Naciśnij przycisk



Podany w tym przykładzie skrypt uzupełnia treść naciśniętego przycisku — dodaje do niego ścieżkę http://titan:8080 i usiłuje wykonać żądanie Ajaksa (np. http://titan:8080/jablka). Dokument ten jest wczytywany z http://titan/pliki/przyklad.html, co oznacza, że skrypt usiłuje wykonać żądanie międzyźródłowe. Serwer, do którego skrypt usiłuje dotrzeć, działa na Node.js. W listingu 32.10 widnieje kod, który zapisałem w pliku fruitselector.js. (Więcej o Node.js przeczytasz w rozdziale 2.). Listing 32.10. Skrypt Node.js fruitselector.js var http = require('http'); http.createServer(function (req, res) { console.log("[200] " + req.method + " to " + req.url); res.writeHead(200, "OK", {"Content-Type": "text/html"}); res.write('Owoców razem'); res.write('

'); res.write('Wybrałeś ' + req.url.substring(1)); res.write('

'); res.end(); }).listen(8080);

To bardzo prosty serwer, generujący prosty dokument HTML na podstawie URL, którego zażądał klient. Jeśli więc klient zażąda http://titan:8080/jablka, to serwer wygeneruje i zwróci następujący dokument HTML:

Owoców razem

702

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Wybrałeś jablka

Skrypt zawarty w takiej postaci w przyklad.html nie może pozyskać z serwera potrzebnych danych. Można to naprawić, dodając nagłówek do odpowiedzi przesyłanej z serwera do przeglądarki, tak jak widać to w listingu 32.11. Listing 32.11. Dodanie nagłówka międzyźródłowego var http = require('http'); http.createServer(function (req, res) { console.log("[200] " + req.method + " to " + req.url); res.writeHead(200, "OK", { "Content-Type": "text/html", "Access-Control-Allow-Origin": "http://titan" }); res.write('Owoców razem'); res.write('

'); res.write(Wybrałeś ' + req.url.substring(1)); res.write('

'); res.end(); }).listen(8080);

Nagłówek Access-Control-Allow-Origin określa źródło, z którego można wykonywać międzyźródłowe żądania do danego dokumentu. Jeśli źródło podane w nagłówku odpowiada źródłu bieżącego dokumentu, to przeglądarka wczyta i przetworzy dane zawarte w odpowiedzi. „ Wskazówka Obsługa CORS polega na tym, że przeglądarka stosuje się do zasad bezpieczeństwa międzyźródłowego po nawiązaniu kontaktu z serwerem i pozyskaniu nagłówka odpowiedzi. Oznacza to, że żądanie jest wykonywane nawet po odrzuceniu odpowiedzi ze względu na brak nagłówka w niej lub podanie innej domeny. Jest to inne podejście od tego, które stosują przeglądarki niewykorzystujące CORS i blokujące żądanie, bez nawiązywania jakiejkolwiek łączności z serwerem.

Dzięki dodaniu nagłówka do odpowiedzi serwera skrypt zawarty w dokumencie przyklad.html może żądać danych z serwera i odbierać je, tak jak widać to na rysunku 32.6.

Rysunek 32.6. Umożliwienie działania żądań międzyźródłowych Ajaksa

703

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Nagłówek żądania źródła Przeglądarka w ramach CORS dodaje do żądania nagłówek Origin, który określa źródło bieżącego dokumentu. Możesz skorzystać z tego, by móc elastyczniej określać wartość nagłówka Access-Control-Allow-Origin, tak jak widać to w listingu 32.12. Listing 32.12. Wykorzystanie nagłówka żądania Origin var http = require('http'); http.createServer(function (req, res) { console.log("[200] " + req.method + " to " + req.url); res.statusCode = 200; res.setHeader("Content-Type", "text/html"); var origin = req.headers["origin"]; if (origin.indexOf("titan") > -1) { res.setHeader("Access-Control-Allow-Origin", origin); } res.write('Owoców razem'); res.write('

'); res.write(Wybrałeś ' + req.url.substring(1)); res.write('

'); res.end(); }).listen(8080);

Zmieniłem skrypt serwera tak, by definiował nagłówek odpowiedzi Access-Control-Allow-Origin tylko wtedy, kiedy w żądaniu znajduje się nagłówek Origin o wartości titan. Taki sposób sprawdzania źródła żądania jest bardzo powolny, ale możesz odpowiednio zmodyfikować tę metodę, by działała bardziej rygorystycznie w kontekście Twoich własnych projektów. „ Wskazówka Możesz również przypisać nagłówkowi Access-Control-Allow-Origin asterysk (*), który wskazuje, że dopuszczalne są międzyźródłowe żądania z dowolnego źródła. Przemyśl poważnie kwestie bezpieczeństwa, zanim zdecydujesz się na użycie tego ustawienia.

Zaawansowane funkcje CORS Specyfikacja CORS określa szereg dodatkowych nagłówków, dzięki którym można uzyskać szczegółową kontrolę nad międzyźródłowymi żądaniami, w tym m.in. możliwość ograniczania żądań do określonych metod HTTP. Te zaawansowane funkcje wymagają użycia żądania preflight, przy którym przeglądarka najpierw przesyła serwerowi żądanie określające ograniczenia oraz drugie żądanie, które pobiera dane. Kiedy piszę te słowa, nie można polegać na obsłudze tych zaawansowanych funkcji.

Przerywanie żądań Obiekt XMLHttpRequest obsługuje metodę, która pozwala na anulowanie żądania. Jej opis znajduje się w tabeli 32.6.

704

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Tabela 32.6. Metoda XMLHttpRequest abort Składowa

Opis

Zwracana wartość

abort()

Przerywa bieżące żądanie.

void

Aby zademonstrować działanie tej funkcji, zmodyfikowałem skrypt Node.js fruitselector.js, wprowadzając do niego dziesięciosekundowe opóźnienie, co widać w listingu 32.13. Listing 32.13. Wprowadzenie opóźnienia var http = require('http'); http.createServer(function (req, res) { console.log("[200] " + req.method + " to " + req.url); res.statusCode = 200; res.setHeader("Content-Type", "text/html"); setTimeout(function() { var origin = req.headers["origin"]; if (origin.indexOf("titan") > -1) { res.setHeader("Access-Control-Allow-Origin", origin); } res.write('Owoców razem'); res.write('

'); res.write(Wybrałeś ' + req.url.substring(1)); res.write('

'); res.end(); }, 10000); }).listen(8080);

Po otrzymaniu żądania serwer zapisuje wstępnie nagłówki odpowiedzi, zatrzymuje się na dziesięć sekund, a następnie dokańcza odpowiedź. W listingu 32.14 widnieje przykład wykorzystania funkcji przerywania obiektu XMLHttpRequest w przeglądarce. Listing 32.14. Przerywanie żądań

Przykład

jablka wisnie banany

Przerwij

Naciśnij przycisk



Zamieściłem w dokumencie przycisk Przerwij, który przywołuję metodę abort na obiekcie XMLHttpRequest, co pozwala przerwać żądanie inflight. Mamy teraz dużo czasu na przerwanie żądania, ponieważ wprowadziłem opóźnienie po stronie serwera. XMLHttpRequest sygnalizuje przerwanie żądania zdarzeniem abort i readystatechange. W tym przykładzie dokument reaguje na zdarzenie abort i aktualizuje treść elementu div z właściwością id o wartości target tak, by informował o tym, że żądanie zostało przerwane. Rezultat widać na rysunku 32.7.

Rysunek 32.7. Przerwanie żądania

706

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

Podsumowanie W tym rozdziale przedstawiłem Ci Ajaksa na przykładzie obiektu XMLHttpRequest. Ajax pozwala na wykonywanie żądań w tle i zapewnienie użytkownikowi płynniejszej pracy z dokumentem. Objaśniłem, jak obiekt XMLHttpRequest informuje o postępach w wykonywaniu żądania za pośrednictwem serii zdarzeń. Pokazałem, jak wykrywać różne rodzaje błędów i radzić sobie z nimi oraz jak ustawić nagłówki żądań, by poinformować przeglądarkę lub serwer, jakiej operacji wymagasz. Co do bardziej zaawansowanych kwestii: przedstawiłem Cross-Origin Resource Sharing (CORS) — zbiór nagłówków, które pozwalają skryptowi wysłać żądanie Ajaksa do innego źródła. Jest to przydatna technika — o ile masz możliwość dodawania nagłówków do odpowiedzi serwera. Wszystkie przedstawione w tym rozdziale przykłady dotyczą pobierania danych z serwera. W następnym rozdziale zajmę się przesyłaniem danych serwerowi.

707

ROZDZIAŁ 32. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ I

708

ROZDZIAŁ 33

Wprowadzenie do Ajaksa. Część II Kontynuując omówienie Ajaksa, pokażę Ci w tym rozdziale, jak przesyła się klientowi dane. Przesyłanie formularzy i plików to dwa standardowe zastosowania Ajaksa, dzięki którym można zapewnić użytkownikowi bogatsze doświadczenie z aplikacją. Pokażę Ci również, jak śledzić postępy w przesyłaniu danych na serwer i jak radzić sobie z różnymi formatami odpowiedzi serwera na żądania Ajaksa. W tabeli 33.1 znajduje się streszczenie całego rozdziału. W pierwszych trzech listingach utworzę serwer i dokument HTML, na których opierają się pozostałe przykłady. Tabela 33.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Przesłanie danych z formularza na serwer.

Użyj DOM do pobrania pojedynczych wartości i zestawienia ich w formacie URL.

33.4

Zakodowanie i wysłanie danych formularza bez użycia DOM.

Użyj obiektu FormData.

33.5

Przesłanie dodatkowych wartości formularza lub wybiórcze przesyłanie danych formularza.

Użyj metody append z obiektem FormData.

33.6

Wysłanie danych JSON.

Użyj metody JSON.stringify i wybierz typ treści żądania application/json.

33.7

Wysłanie pliku na serwer.

Dodaj element input do formularza z właściwością type o wartości file i użyj obiektu FormData.

33.8

Śledzenie postępów wczytywania danych na serwer.

Użyj obiektu XMLHttpRequestUpload.

33.9

Pobranie fragmentów kodu HTML z serwera.

Odczytaj właściwość responseText.

33.10, 33.11

Zmiana typu MIME wysłanego z serwera.

Użyj metody overrideMimeType.

33.12

Pobranie kodu XML z serwera.

Użyj właściwości responseXML.

33.13, 33.14

Pobranie danych JSON z serwera.

Użyj metody JSON.parse.

33.15, 33.16

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Przygotowanie się do wysłania danych serwerowi Ajaksa najczęściej używa się do przesyłania danych serwerowi. Klienty zazwyczaj wysyłają dane z formularzy, czyli wartości podane dla elementów input zawartych w elemencie form. W listingu 33.1 widnieje przykładowy formularz, którego będziemy używać w tym rozdziale. Podany tutaj kod zapisałem w pliku przyklad.html. Listing 33.1. Podstawowy formularz

Przykład



Banany:

Jabłka:

Wiśnie:

Razem: 0 sztuk

Wyślij



W powyższym formularzu znajdują się trzy elementy input oraz przycisk button służący do wysyłania danych. Elementy input pozwalają użytkownikowi złożyć zamówienie na podaną liczbę różnych owoców, a przycisk button wysyła formularz serwerowi. Więcej o tych elementach przeczytasz w rozdziałach 12., 13. i 14.

Utworzenie serwera Na potrzeby kolejnych przykładów należy stworzyć serwer, który będzie przetwarzał żądania. Skorzystałem znowu z Node.js, przede wszystkim ze względu na jego prostotę i to, że opiera się na JavaScript. W rozdziale 2. przeczytasz więcej na temat wykorzystania Node.js. Nie będę teraz szerzej opisywał, jak ten skrypt działa — jest napisany w JavaScript, więc sam powinieneś być w stanie go sobie wytłumaczyć. Tak czy inaczej,

710

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

nie trzeba rozumieć skryptu serwera, żeby nauczyć się obsługi Ajaksa — możesz potraktować serwer jako black box. W listingu 33.2 widnieje skrypt fruitcalc.js. Listing 33.2. Skrypt fruitcalc.js w Node.js var http = require('http'); var querystring = require('querystring'); var multipart = require('multipart'); function writeResponse(res, data) { var total = 0; for (fruit in data) { total += Number(data[fruit]); } res.writeHead(200, "OK", { "Content-Type": "text/html", "Access-Control-Allow-Origin": "http://titan"}); res.write('Sztuk razem'); res.write('

Zamówiono ' + total + ' sztuk

'); res.end(); } http.createServer(function (req, res) { console.log("[200] " + req.method + " to " + req.url); if (req.method == 'OPTIONS') { res.writeHead(200, "OK", { "Access-Control-Allow-Headers": "Content-Type", "Access-Control-Allow-Methods": "*", "Access-Control-Allow-Origin": "*" }); res.end(); } else if (req.url == '/form' && req.method == 'POST') { var dataObj = new Object(); var contentType = req.headers["content-type"]; var fullBody = ''; if (contentType) { if (contentType.indexOf("application/x-www-form-urlencoded") > -1) { req.on('data', function(chunk) { fullBody += chunk.toString();}); req.on('end', function() { var dBody = querystring.parse(fullBody); dataObj.bananas = dBody["bananas"]; dataObj.apples = dBody["apples"]; dataObj.cherries= dBody["cherries"]; writeResponse(res, dataObj); }); } else if (contentType.indexOf("application/json") > -1) { req.on('data', function(chunk) { fullBody += chunk.toString();}); req.on('end', function() { dataObj = JSON.parse(fullBody); writeResponse(res, dataObj); }); } else if (contentType.indexOf("multipart/form-data") > -1) { var partName; var partType;

711

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

var parser = new multipart.parser(); parser.boundary = "--" + req.headers["content-type"].substring(30); parser.onpartbegin = function(part) { partName = part.name; partType = part.contentType}; parser.ondata = function(data) { if (partName != "file") { dataObj[partName] = data; } }; req.on('data', function(chunk) { parser.write(chunk);}); req.on('end', function() { writeResponse(res, dataObj);}); } } } }).listen(8080);

Wyróżniłem tutaj fragment skryptu, na który należy zwrócić uwagę, tj. funkcję writeResponse. Funkcja ta jest przywoływana po pobraniu wartości z formularzy zawartych w żądaniu i odpowiada za wygenerowanie odpowiedzi. Na razie tworzy ona prosty dokument HTML, taki jak w listingu 33.3, ale jeszcze ją zmienimy i ulepszymy w ramach pracy z innymi formatami. Listing 33.3. Prosty dokument HTML utworzony funkcją writeResponse

Sztuk razem

Zamówiono 27 sztuk

To dość prosta odpowiedź, ale zarazem dobry punkt wyjścia. Serwer podsumowuje liczbę owoców zamówionych przez użytkownika na podstawie elementów input z formularza form. Skrypt działający po stronie serwera ma za zadanie rozkodowywać poszczególne formaty danych, które klient przesyła przy użyciu Ajaksa. Serwer można uruchomić następująco: bin\node.exe fruitcalc.js

Powyższy skrypt przeznaczony jest do użycia tylko w tym rozdziale. Nie jest to serwer uniwersalnego użytku i nie zalecam używania jego fragmentów w pracy produkcyjnej. Kolejne zawarte w tym rozdziale przykłady opierają się na pewnych założeniach i skrótach, wobec czego skrypt ten nie jest przydatny do jakiegokolwiek poważnego użytku.

Problem Problem, który chciałbym rozwiązać przy użyciu Ajaksa, zilustrowałem zwięźle na rysunku 33.1. Kiedy wysyłasz formularz, przeglądarka wyświetla rezultat jako nową stronę. Wynikają z tego dwie rzeczy: • Użytkownik musi zaczekać, aż serwer przetworzy dane i wygeneruje odpowiedź. • Utracony zostaje kontekst dokumentu, gdyż rezultaty wyświetlane są jako nowy dokument. Jest to sytuacja idealna do wykorzystania Ajaksa. Żądanie można wykonać asynchronicznie, co pozwala użytkownikowi na kontynuowanie interakcji z dokumentem podczas przetwarzania formularza.

712

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Rysunek 33.1. Wysłanie prostego formularza

Wysyłanie danych formularza Najprostszy sposób wysyłania danych na serwer polega na ich samodzielnym gromadzeniu i formatowaniu. W listingu 33.4 widnieje dodatkowy skrypt, który do tego służy. Listing 33.4. Ręczne zbieranie i wysyłanie danych

Przykład



Banany:

Jabłka:

Wiśnie:

Razem: 0 sztuk

Wyślij



Ten skrypt tylko sprawia wrażenie skomplikowanego. Dla ułatwienia objaśnię jego poszczególne fragmenty. Najważniejsza jest tu funkcja handleButtonPress, przywoływana w odpowiedzi na kliknięcie elementu button. W pierwszej kolejności przywołuję metodę preventDefault przy obiekcie Event, który przeglądarka utworzyła na potrzeby funkcji. Opisałem tę metodę w rozdziale 30., gdzie objaśniłem, że niektóre zdarzenia domyślnie wykonują pewne działania. Dla elementu button w formularzu domyślną czynnością jest wysłanie formularza w standardowy sposób, bez użycia Ajaksa. Nie chcę, żeby tak się działo, więc przywołuję metodę preventDefault. „ Wskazówka Przywołanie metody preventDefault zwykle umieszczam na początku procedury obsługi zdarzenia, ponieważ ułatwia to poprawianie błędów. Gdybym przywołał ją na końcu funkcji, to wszelkie przeoczone błędy w skrypcie przerywałyby wykonywanie funkcji i wymuszałyby wykonanie domyślnej czynności. Następuje to tak szybko, że przeczytanie szczegółów błędu w konsoli przeglądarki jest niemalże niemożliwe.

Kolejnym krokiem jest zebranie i sformatowanie wartości elementów input: var formData = ""; var inputElements = document.getElementsByTagName("input"); for (var i = 0; i < inputElements.length; i++) { formData += inputElements[i].name + "=" + inputElements[i].value + "&"; }

Wykorzystałem tutaj DOM do zebrania zbioru elementów input i utworzenia ciągu z atrybutami name i value każdego z nich. Wartości name i value oddzielone są znakiem równości (=), a informacje o kolejnych elementach input etką (&). Rezultat wygląda następująco: bananas=2&apples=5&cherries=20&

714

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

W rozdziale 12. wspomniałem, że istnieje domyślny sposób kodowania danych z formularza — application/x-www-form-urlencoded. Jest to domyślne kodowanie elementu form, ale nie Ajaksa, wobec

czego trzeba dodać nagłówek, który wskaże serwerowi, jakiego formatu danych może się spodziewać: httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Reszta skryptu to standardowe żądanie Ajaksa, takie jak te, które opisałem w poprzednim rozdziale — jednak z pewnymi wyjątkami. Po pierwsze, używam metody HTTP POST, kiedy przywołuję metodę open przy obiekcie XMLHttpRequest. Dane z zasady zawsze są przesyłane serwerowi metodą POST, a nie GET. Adres URL, pod który chcę wysłać żądanie, odczytuję z właściwości action obiektu HTMLFormElement: httpRequest.open("POST", form.action);

Akcja form wykonuje żądanie międzyźródłowe, które po stronie serwera obsługuję opisaną w poprzednim rozdziale techniką CORS. Po drugie, warto zauważyć, że przekazuję serwerowi ciąg znaków w postaci argumentu metody send: httpRequest.send(formData);

Kiedy uzyskuję odpowiedź serwera, używam DOM do zdefiniowania treści elementu div oznaczonego właściwością id o wartości results. Rezultat widać na rysunku 33.2.

Rysunek 33.2. Przesłanie formularza Ajaksem Zwracany przez serwer w odpowiedzi na przesłanie formularza dokument HTML wyświetlany jest na tej samej stronie, a żądanie wykonywane jest asynchronicznie. Efekt jest o wiele przyjemniejszy od tego, z którym mieliśmy do czynienia na początku.

Wysyłanie danych formularza obiektem FormData Bardziej elegancki sposób zbierania danych formularza polega na wykorzystaniu obiektu FormData, który wchodzi w skład specyfikacji drugiego poziomu XMLHttpRequest. „ Uwaga W chwili, gdy to piszę, obiekt FormData obsługiwany jest przez Chrome, Safari i Firefoksa, ale nie przez Operę i Internet Explorer.

715

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Utworzenie obiektu FormData Przy tworzeniu obiektu FormData możesz podać obiekt HTMLFormElement (opisany w rozdziale 31.) — wtedy wartości wszystkich elementów formularza są zbierane automatycznie. W listingu 33.5 widnieje przykład. Listing przedstawia sam skrypt, ponieważ kod HTML pozostaje taki sam. Listing 33.5. Zastosowanie obiektu FormData ...

...

Rzecz jasna, główną zmianą jest tu zastosowanie obiektu FormData: var formData = new FormData(form);

Należy też zauważyć, że nie definiuję już wartości nagłówka Content-Type. Kiedy używa się obiektu FormData, dane zawsze są kodowane jako multipart/form-data (co opisałem w rozdziale 12.).

Modyfikacja obiektu FormData Obiekt FormData obsługuje metodę, która pozwala na dodawanie par nazw i wartości do przesyłanych serwerowi danych. Jej opis znajduje się w tabeli 33.2. Tabela 33.2. Metoda nagłówkowa obiektu XMLHttpRequest Metoda

Opis

Zwracana wartość

append(, )

Dodaje nazwę i wartość do zbioru danych.

void

Metody append można używać do uzupełniania danych zebranych z formularza, lecz można też tworzyć obiekty FormData bez użycia HTMLFormElement. Oznacza to, że metody append można używać do szczegółowego dobierania przesyłanych klientowi wartości. W listingu 33.6 widnieje tego przykład. Pokazuję tu sam skrypt, ponieważ inne elementy HTML pozostają niezmienione.

716

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Listing 33.6. Wybiórcze przesyłanie serwerowi danych przy użyciu obiektu FormData ...

...

Skrypt ten tworzy obiekt FormData bez tworzenia obiektu HTMLFormElement. Używam następnie DOM do znalezienia wszystkich elementów input w dokumencie i dodania par nazw i wartości tych elementów, których atrybut name nie ma wartości cherries. Rezultat widać na rysunku 33.3, gdzie z całkowitej wartości zwróconej przez serwer wyłączona jest wartość podana przez użytkownika w polu Wiśnie.

Rysunek 33.3. Wybiórcze przesyłanie danych przy użyciu obiektu FormData

717

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Wysyłanie danych JSON Ajax nie służy tylko do wysyłania danych z formularza. Można z jego użyciem wysyłać praktycznie wszystko, w tym dane JavaScript Object Notation (JSON), który to format zyskał dużą popularność. Ajax wyrósł na gruncie XML, lecz jest to w istocie format charakteryzujący się dużą rozwlekłością. Kiedy aplikacja internetowa musi przekazać dużą liczbę dokumentów XML, owa rozwlekłość przekłada się na znaczne zużycie przepustowości i pojemności systemu. JSON często określa się mianem odchudzonego XML. Jest łatwy w zapisie i odczycie, bardziej zwięzły niż XML oraz cieszy się niemal powszechną obsługą. JSON wykroczył poza ramy JavaScript; współcześnie wiele pakietów i systemów zna ten format. Oto prosty obiekt JavaScript przedstawiony w JSON: {"bananas":"2","apples":"5","cherries":"20"}

Obiekt ten ma trzy właściwości: bananas, apples i cherries, których wartości wynoszą — kolejno — 2, 5 i 20.

JSON nie może się wprawdzie pochwalić takim bogactwem funkcji jak XML, lecz wiele aplikacji i tak z owych funkcji nie korzysta. JSON jest prosty, elegancki i ekspresyjny. W listingu 33.7 widnieje przykład tego, z jaką łatwością wysyła się dane JSON na serwer. Listing 33.7. Przesłanie danych JSON na serwer ...

...

W tym skrypcie utworzyłem nowy obiekt Object i zdefiniowałem właściwości odpowiadające wartościom atrybutu name elementów input formularza. Mógłbym podać dowolne inne dane, ale elementy input są

718

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

w tym wypadku wygodne, a poza tym ich wykorzystanie pozwoli na zachowanie spójności z wcześniejszymi przykładami. Aby wskazać serwerowi, że przesyłam dane JSON, nadałem nagłówkowi Content-Type żądania wartość application/json. httpRequest.setRequestHeader("Content-Type", "application/json");

Obiektu JSON używam do konwertowania danych z formatu JSON, ale także na ów format. (Większość przeglądarek obsługuje ten obiekt bezpośrednio, ale możesz też wprowadzić jego obsługę do starszych przeglądarek, używając skryptu dostępnego pod adresem https://github.com/douglascrockford/JSON-js/ blob/master/json2.js). Obiekt JSON obsługuje dwie metody, których opis znajduje się w tabeli 33.3. Tabela 33.3. Metody obsługiwane przez obiekt JSON Metoda

Opis

Zwracana wartość

parse()

Parsuje zakodowany w JSON ciąg znaków i tworzy obiekt.

obiekt

stringify()

Tworzy zakodowane w JSON odzwierciedlenie podanego obiektu.

tekst

W listingu 33.7 użyłem metody stringify i przekazałem rezultat metodzie send obiektu HTMLHttpRequest. W przykładzie zmieniło się jedynie kodowanie danych. Rezultat wysłania formularza z dokumentu pozostaje taki sam.

Wysyłanie plików Plik możesz przesłać serwerowi przy użyciu obiektu FormData oraz elementu input z atrybutem type o wartości file. Po wysłaniu formularza obiekt FormData automatycznie sprawia, żeby treść wybranego przez użytkownika pliku została wczytana wraz z resztą podanych w formularzu wartości. W listingu 33.8 znajduje się przykład zastosowania obiektu FormData w taki sposób. Listing 33.8. Wysłanie pliku serwerowi przy użyciu obiektu FormData

Przykład



Banany:

Jabłka:

719

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Wiśnie:

Plik:

Razem: 0 sztuk

Wyślij



„ Uwaga Wczytywanie plików przy użyciu Ajaksa bywa problematyczne dla przeglądarek, które nie obsługują obiektu FormData. Istnieje wiele sztuczek i sposobów na obejście tego problemu — czy to z użyciem Flasha, czy skomplikowanych sekwencji wysyłania danych z formularzy do ukrytych elementów iframe. Wszystkie wiążą się jednak z poważnymi mankamentami, więc należy ich używać ostrożnie.

W tym przykładzie najważniejsza zmiana dotyczy elementu form. Dodanie elementu input sprawia, że obiekt FormData wczytuje dowolny, wybrany przez użytkownika plik. Rezultat widać na rysunku 33.4. „ Wskazówka W rozdziale 37. pokażę Ci, jak wykorzystać API obsługujące funkcję przeciągania i puszczania, by umożliwić użytkownikowi przeciąganie plików do wczytania z systemu zamiast wybierania ich w oknie zapytania.

720

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Rysunek 33.4. Dodanie elementu input, który wczytuje pliki za pośrednictwem obiektu FormData

Śledzenie postępów wczytywania Możliwe jest śledzenie postępów wczytywania danych na serwer przy pomocy właściwości upload obiektu XMLHttpRequest, którą opisuję w tabeli 33.4. Tabela 33.4. Właściwość upload Nazwa

Opis

Zwracana wartość

upload

Zwraca obiekt służący do śledzenia postępów.

XMLHttpRequestUpload

Zwracany przez właściwość upload obiekt XMLHttpRequestUpload obsługuje jedynie atrybuty służące do tworzenia procedur obsługi zdarzeń opisanych w poprzednim rozdziale: onprogress, onload i innych. W listingu 33.9 widnieje przykład wykorzystania tych zdarzeń do pokazania użytkownikowi informacji o postępach wczytywania danych. Listing 33.9. Śledzenie i wyświetlanie postępów wczytywania

Przykład



Banany:

Jabłka:

721

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Wiśnie:

Plik:

Postęp:

Razem: 0 sztuk

Wyślij



722

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

W tym przykładzie dodałem do kodu element progress (omówiony w rozdziale 15.), który przedstawia użytkownikowi informacje o postępach wczytywania danych. Obiekt XMLHttpRequestUpload uzyskałem poprzez odczytanie właściwości XMLHttpRequest.upload i zdefiniowałem funkcje reagujące na zdarzenia progress i load. Przeglądarka nie wyświetla informacji o postępach, gdy nie ma wielu danych do przesłania, toteż najlepiej przetestować ten przykład przy pomocy dużego pliku. Na rysunku 33.5 widnieje pasek postępu wczytywania na serwer pliku wideo.

Rysunek 33.5. Pasek postępu wczytywania danych na serwer

Żądanie i przetwarzanie różnych typów treści W przedstawionych dotąd przykładach zastosowania Ajaksa zwracane były całe dokumenty HTML, zawierające elementy head, title i body. Owe elementy są dodatkowym obciążeniem, a — jeśli weźmiemy pod uwagę, że serwer w istocie przekazuje niewielką ilość danych — stosunek informacji przydatnych do nieprzydatnych pozostawia wiele do życzenia. Szczęśliwie, nie trzeba pobierać całych dokumentów HTML. Co więcej, w ogóle nie trzeba pobierać kodu HTML. W kolejnych punktach pokażę Ci, jak radzić sobie z różnymi rodzajami danych i — tym samym — zmniejszyć stopień, w jakim żądania Ajaksa obciążają system.

Pobieranie fragmentów HTML Najprościej dokonać zmiany polegającej na tym, by serwer zwracał nie cały dokument, lecz fragment kodu HTML. W tym celu należy jednak wprowadzić zmianę w funkcji writeResponse skryptu serwerowego Node.js, którą widać w listingu 33.10. Listing 33.10. Serwer zmodyfikowany tak, by zwracał fragment kodu HTML ... function writeResponse(res, data) { var total = 0; for (fruit in data) { total += Number(data[fruit]); } res.writeHead(200, "OK", { "Content-Type": "text/html", "Access-Control-Allow-Origin": "http://titan"}); res.write('

Zamówiono' + total + ' sztuk

'); res.end(); } ...

723

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Zamiast całego dokumentu serwer przesyła teraz jedynie fragment kodu HTML. W listingu 33.11 widnieje dokument HTML klienta. Listing 33.11. Praca z fragmentami kodu HTML

Przykład



Banany:

Jabłka:

Wiśnie:

Razem: 0 sztuk

Wyślij



Usunąłem także niektóre dodatki, mające służyć do wczytywania plików i śledzenia postępów. Dane przesyłane są teraz na serwer w formacie JSON; serwer z kolei zwraca fragmenty kodu HTML, choć nie ma żadnego związku między formatem, w jakim wysyłam dane na serwer, a formatem, w jakim serwer je zwraca. Upewniłem się, czy nagłówek Content-Type ma wartość text/html, która mówi przeglądarce, że ma do czynienia z kodem HTML, pomimo że przesyłane dane nie zaczynają się od elementu DOCTYPE lub HTML. Możesz skorzystać z metody overrideMimeType, jeśli chcesz samodzielnie określić typ danych, zamiast pozostawić to w gestii nagłówka Content-Type. Przykład widać w listingu 33.12. Listing 33.12. Samodzielna zmiana typu danych

Określenie typu danych bywa przydatne, jeśli serwer nie klasyfikuje danych tak, jak chcesz. Zdarza się to najczęściej wtedy, kiedy przekazujesz fragmenty plików serwerowi, który ma ustalone oczekiwania co do parametrów nagłówka Content-Type.

725

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Pobieranie danych XML XML nie jest już tak powszechnie używany w aplikacjach internetowych jak kiedyś — w znacznym stopniu został już zastąpiony przez JSON. Umiejętność obsługi danych XML wciąż jednak bywa przydatna, zwłaszcza w pracy z przestarzałymi źródłami danych. W listingu 33.13 widnieją zmiany, które trzeba wprowadzić do skryptu serwera, by możliwe było wysyłanie przeglądarce danych XML. Listing 33.13. Wysyłanie danych XML z serwera function writeResponse(res, data) { var total = 0; for (fruit in data) { total += Number(data[fruit]); } res.writeHead(200, "OK", { "Content-Type": "application/xml", "Access-Control-Allow-Origin": "http://titan"}); res.write(""); res.write(""); for (fruit in data) { res.write("") total += Number(data[fruit]); } res.write(""); res.end(); }

Ta zmodyfikowana funkcja generuje krótki dokument XML, taki jak ten:





Jest to wprawdzie zbiór danych, które chcę wyświetlić w kliencie, lecz nie są one w formacie, który można przedstawić za pomocą właściwości DOM innerHTML. Na szczęście, obiekt XMLHttpRequest ułatwia pracę z XML — nic dziwnego, skoro x w nazwie Ajax oznacza właśnie XML. W listingu 33.14 widać przykład wykorzystania XML w przeglądarce. Listing 33.14. Tworzenie odpowiedzi Ajaksa w XML

Zmiany potrzebne do zapewnienia współpracy skryptu z danymi XML wprowadza się w funkcji handleResponse. Po udanym wykonaniu żądania od razu zmieniam typ MIME odpowiedzi: httpRequest.overrideMimeType("application/xml");

W tym przykładzie nie jest to konieczne, ponieważ serwer wysyła cały dokument XML. Kiedy jednak ma się do czynienia z fragmentami XML, trzeba jasno wskazać przeglądarce, że pracujesz z kodem XML — w innym wypadku obiekt XMLHttpRequest nie będzie mógł poprawnie obsłużyć właściwości responseXML, której używam w następującej deklaracji: var xmlDoc = httpRequest.responseXML;

Właściwości responseXML można używać zamiast responseText. Przetwarza ona otrzymany XML i zwraca go jako obiekt Document. Możesz wykorzystać tę technikę do poruszania się po kodzie XML z wykorzystaniem funkcji DOM przeznaczonych dla kodu HTML (które opisałem w rozdziale 26.). var val = xmlDoc.getElementsByTagName("fruitorder")[0].getAttribute("total");

Powyższa deklaracja pobiera wartość atrybutu total pierwszego elementu fruitorder, którą następnie wykorzystuję z właściwością innerHTML do pokazania użytkownikowi rezultatu. document.getElementById("results").innerHTML = "Zamówiono " + val + " sztuk";

HTML a XML w DOM Muszę się do czegoś przyznać. Przez całą część IV celowo pomijałem kwestię relacji pomiędzy HTML, XML i DOM. Wszystkie funkcje używane w nawigacji i obsłudze elementów dokumentu HTML można wykorzystać także w pracy z XML. Co więcej, obiekty reprezentujące elementy HTML wywodzą się z pewnych bazowych obiektów służących do obsługi XML. Większości czytelników tej książki prawdopodobnie jednak zależy na obsłudze HTML. Jeżeli pracujesz z XML, to zapoznaj się z tematyką bazowej obsługi XML, której specyfikacja znajduje się na stronie www.w3.org/standards/techs/dom. Tym niemniej, jeśli dużo pracujesz z XML, to rozważ, czy nie warto byłoby skorzystać z innej strategii kodowania. XML jest rozwlekły w swojej formie, a zmuszanie przeglądarki do przechodzenia przez złożony proces parsowania nie jest zawsze najlepszym rozwiązaniem. A nuż elegancki i zwięzły format — taki jak JSON — okaże się lepszy.

727

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

Pobieranie danych JSON Z danymi JSON z reguły łatwiej się pracuje niż z danymi XML, ponieważ dysponujesz wtedy obiektem JavaScript, który można analizować i wykorzystywać z użyciem podstawowych funkcji języka. W listingu 33.15 widnieją poprawki, które trzeba wprowadzić, by skrypt serwera generował odpowiedzi JSON. Listing 33.15. Generowanie odpowiedzi JSON przez serwer function writeResponse(res, data) { var total = 0; for (fruit in data) { total += Number(data[fruit]); } data.total = total; var jsonData = JSON.stringify(data); res.writeHead(200, "OK", { "Content-Type": "application/json", "Access-Control-Allow-Origin": "http://titan"}); res.write(jsonData); res.end(); }

Do wygenerowania odpowiedzi JSON wystarczy nadać właściwość total obiektowi przekazywanemu funkcji jako parametr data i użyć metody JSON.stringify do przedstawienia tego obiektu jako ciągu znaków. Serwer wysyła wtedy przeglądarce odpowiedź w następującej postaci: {"bananas":"2","apples":"5","cherries":"20","total":27}

W listingu 33.16 widnieją zmiany skryptu, które trzeba wprowadzić, by przeglądarka mogła przetworzyć tę odpowiedź. Listing 33.16. Odebranie odpowiedzi JSON z serwera

JSON jest niezwykle prosty w obsłudze, jak zresztą widać na przykładzie tych dwóch listingów. Owa łatwość użycia wraz ze zwięzłością przedstawiania danych leżą u podstaw popularności JSON.

Podsumowanie W tym rozdziale omówiłem pozostałe zawiłości Ajaksa. Pokazałem Ci, jak przesyłać dane na serwer, zarówno ręcznie, jak i z użyciem obiektu FormData. Dowiedziałeś się, jak wysyłać pliki i śledzić postępy w ich wczytywaniu na serwer. Opowiedziałem również o tym, jak radzić sobie z różnymi formatami, w jakich przesyła się dane z serwera: HTML, fragmentami kodu HTML, XML i JSON.

729

ROZDZIAŁ 33. „ WPROWADZENIE DO AJAKSA. CZĘŚĆ II

730

ROZDZIAŁ 34

Multimedia

W HTML5 pojawiła się funkcja odtwarzania plików audio i wideo bez konieczności używania wtyczek w rodzaju Adobe Flash. Wtyczki są częstą przyczyną zawieszania się przeglądarek, a Flash w szczególności cieszy się pod tym względem złą sławą. Nawiasem mówiąc, znienawidziłem Flasha za sposób, w jaki odtwarza multimedia. Przy pisaniu lubię słuchać podcastów, a Chrome domyślnie odtwarza je przy pomocy Flasha. Wprawdzie podoba mi się prostota integracji Flasha, ale mimo to od czasu do czasu coś się psuje, zawieszając system. Zawsze się wtedy wściekam i przeklinam Adobe. Wszechobecność Flasha jest przydatna, ale jakość oprogramowania pozostawia wiele do życzenia. Jak się przekonasz w tym rozdziale, wbudowana obsługa odtwarzania multimediów w HTML wydaje się obiecująca, choć wciąż zdarzają się pewne zgrzyty. Wynikają one w znacznym stopniu ze sposobu obsługi formatów przez różne przeglądarki oraz tego, co same przeglądarki sądzą o swoich możliwościach ich odtwarzania. W tabeli 34.1 znajduje się streszczenie całego rozdziału. Tabela 34.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Zamieszczenie pliku wideo w dokumencie HTML.

Użyj elementu video.

34.1

Określenie, czy plik wideo ma być wczytany, zanim użytkownik zacznie jego odtwarzanie.

Użyj atrybutu preload.

34.2

Określenie obrazu, który ma być widoczny przed rozpoczęciem odtwarzania pliku wideo.

Użyj atrybutu poster.

34.3

Określenie wielkości filmu na ekranie.

Użyj atrybutów width i height.

34.4

Określenie źródła pliku wideo.

Użyj atrybutu src.

34.5

Określenie różnych formatów pliku wideo z podanego źródła.

Użyj elementu source.

34.6, 34.7

Zamieszczenie pliku audio w dokumencie HTML.

Użyj elementu audio.

34.8, 34.9

Manipulowanie elementami multimediów za pośrednictwem DOM.

Użyj obiektu HTMLMediaElement, HTMLVideoElement lub HTMLAudioElement.

34.10

Zdobycie informacji, czy dany format jest obsługiwany przez przeglądarkę.

Użyj metody canPlayType.

34.11

Kontrolowanie odtwarzania.

Użyj metod play i pause obiektu HTMLMediaElement oraz właściwości podających szczegóły odtwarzania.

34.12, 34.13

ROZDZIAŁ 34. „ MULTIMEDIA

„ Wskazówka Do odtworzenia przedstawionych tutaj przykładów konieczne może być dodanie pewnych typów MIME do serwera. Znajdziesz je w listingu 34.7.

Element video Element video służy do zamieszczania materiałów wideo na stronie internetowej. W tabeli 34.2 znajduje się opis tego elementu. Tabela 34.2. Element video Element

video

Typ elementu

Strukturalny/Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne lub treściowe

Atrybuty lokalne

autoplay, preload, controls, loop, poster, height, width, muted, src

Zawartość

Elementy source i track, a także elementy treściowe i strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

W listingu 34.1 widnieje przykład zastosowania tego elementu w podstawowym wymiarze. Listing 34.1. Zastosowanie elementu video

Przykład

Nie można wyświetlić filmu



Jeśli kiedykolwiek widziałeś film na stronie internetowej, rezultat zastosowania elementu video na pewno wyda Ci się znajomy (rysunek 34.1). Jeżeli przeglądarka nie obsługuje elementu video lub nie może odtworzyć filmu, wyświetla treść zastępczą (zawartą między znacznikiem otwierającym a zamykającym). W powyższym przykładzie podałem prosty komunikat tekstowy, ale często zamiast tego oferuje się inną metodę odtwarzania plików wideo — bez użycia HTML5, czyli np. za pośrednictwem Flasha — na potrzeby starszych przeglądarek. Element video obsługuje różne atrybuty, które opisuję w tabeli 34.3.

Wczytywanie filmu z wyprzedzeniem Atrybut preload wskazuje przeglądarce, czy powinna pobrać film od razu po pierwszym wczytaniu strony, na której znajduje się element video. Wczytanie filmu z wyprzedzeniem zmniejsza opóźnienie, z jakim film

732

ROZDZIAŁ 34. „ MULTIMEDIA

Rysunek 34.1. Zastosowanie elementu video Tabela 34.3. Atrybuty elementu video Atrybut

Opis

autoplay

Atrybut — jeżeli jest obecny — poleca przeglądarce, by zaczęła odtwarzanie filmu, kiedy tylko stanie się to możliwe.

preload

Wskazuje przeglądarce, czy ma wczytać plik wideo z wyprzedzeniem. Więcej na ten temat przeczytasz w kolejnym punkcie.

controls

Jeśli ten atrybut nie jest obecny, przeglądarka nie wyświetla kontrolek.

loop

Atrybut — jeżeli jest obecny — poleca przeglądarce, by powtarzała odtwarzanie filmu.

poster

Wskazuje obraz do wyświetlania w trakcie wczytywania pliku wideo. Więcej na ten temat przeczytasz w punkcie „Wyświetlanie obrazu zastępczego”.

height

Określa wysokość filmu. Więcej szczegółów znajdziesz w punkcie „Rozmiar filmu”.

width

Określa szerokość filmu. Więcej szczegółów znajdziesz w punkcie „Rozmiar filmu”.

muted

Atrybut — jeżeli jest obecny — sprawia, że film ma domyślnie wyłączony dźwięk.

src

Wskazuje film do wyświetlenia. Więcej szczegółów znajdziesz w punkcie „Źródło i format filmu”.

jest odtwarzany, ale może również być zwyczajnym marnotrawstwem transferu, jeśli użytkownik w końcu nie obejrzy filmu. Opis wartości obsługiwanych przez ten atrybut znajduje się w tabeli 34.4. Tabela 34.4. Wartości atrybutu preload Wartość

Opis

none

Film nie ma być wczytywany, dopóki użytkownik nie zacznie odtwarzania.

metadata

Przed rozpoczęciem odtwarzania wczytane mają być jedynie metadane filmu (szerokość, wysokość, pierwsza klatka, czas trwania i inne takie informacje).

auto

Poleca przeglądarce, by wczytała cały plik wideo jak najszybciej. Przeglądarka może zignorować to polecenie. Jest to wartość domyślna.

Decyzja, czy należy wczytać film z wyprzedzeniem, powinna być podjęta na podstawie szacowanego prawdopodobieństwa, że użytkownik zechce go obejrzeć, oraz ilości transferu potrzebnej do automatycznego

733

ROZDZIAŁ 34. „ MULTIMEDIA

wczytania pliku wideo. Automatyczne wczytywanie filmu przekłada się na płynniejsze doświadczenie użytkownika, ale jednocześnie może znacząco i niepotrzebnie obciążyć połączenie, jeśli użytkownik opuści stronę, nie obejrzawszy filmu. Wartość metadata można potraktować jako sensowny kompromis między wartościami none a auto. Z wartością none wiąże się taki problem, że obszar filmu na ekranie jest pierwotnie pusty. Wartość metadata poleca przeglądarce pobrać informacje pozwalające na pokazanie użytkownikowi pierwszej klatki filmu, bez pobierania całego pliku. W listingu 34.2 widnieje przykład zastosowania wartości none i metadata w jednym dokumencie. Listing 34.2. Zastosowanie atrybutu preload z wartościami none i metadata

Przykład

Nie można wyświetlić filmu

Nie można wyświetlić filmu



Wpływ zastosowania tych wartości na sposób wyświetlania filmów widać na rysunku 34.2.

Rysunek 34.2. Zastosowanie atrybutu preload z wartościami none i metadata „ Ostrzeżenie Wartość metadata zapewnia użytkownikowi odpowiedni podgląd, lecz należy jej używać ostrożnie. W ramach zabawy tą właściwością skorzystałem z analizatora sieci i odkryłem, że przeglądarki wczytywały całe pliki wideo z wyprzedzeniem, pomimo że miały pobierać tylko metadane. Powiedzmy sobie szczerze: atrybut preload określa preferencję, którą przeglądarka może zupełnie zignorować. Jeśli jednak musisz ograniczyć zużycie transferu, to sensowniej może być skorzystać z atrybutu poster, o którym przeczytasz więcej w kolejnym punkcie.

734

ROZDZIAŁ 34. „ MULTIMEDIA

Wyświetlanie obrazu zastępczego Możesz użyć atrybutu poster do przedstawienia użytkownikowi obrazu zastępczego. Obraz taki pokazywany jest w miejscu filmu, dopóki użytkownik nie zacznie odtwarzania. W listingu 34.3 widnieje przykład zastosowania atrybutu poster. Listing 34.3. Zastosowanie atrybutu poster do określenia obrazu zastępczego

Przykład

Nie można wyświetlić filmu



Zrobiłem zrzut pierwszej klatki filmu, na którą nałożyłem słowo Poster. Na rysunku widnieją kontrolki, które wskazują użytkownikowi, że obraz przedstawia plik wideo. Zamieściłem też w przykładzie element img, by pokazać, że obraz zastępczy wyświetlany jest przez element video bez żadnych zmian. Na rysunku 34.3 widać ten obraz w obydwu postaciach.

Rysunek 34.3. Utworzenie obrazu zastępczego dla pliku wideo

Rozmiar filmu Gdy atrybuty width i height są pominięte, przeglądarka wyświetla mały element zastępczy, który dostosowuje swój rozmiar do właściwych wymiarów filmu, kiedy metadane stają się dostępne (czyli kiedy użytkownik zaczyna odtwarzanie lub jeśli atrybut preload ma wartość metadata). Dostosowanie layoutu do wymiarów filmu może w takiej sytuacji wyglądać dość nieelegancko. Definiując atrybuty width i height, pozwolisz przeglądarce zachować format obrazu filmu i nie będziesz się musiał martwić tym, że obraz zostanie rozciągnięty. W listingu 34.4 widnieje przykład zastosowania tych atrybutów.

735

ROZDZIAŁ 34. „ MULTIMEDIA

Listing 34.4. Zastosowanie atrybutów width i height

Przykład



Nie można wyświetlić filmu



W tym przykładzie zdefiniowałem wartość atrybutu width nieproporcjonalnie do atrybutu height. Nadałem również elementowi video styl, by ukazać, jak przeglądarka wykorzystuje jedynie część przydzielonego elementowi miejsca, by zachować format obrazu. Rezultat widać na rysunku 34.4.

Rysunek 34.4. Przeglądarka zachowuje format obrazu filmu

Źródło i format filmu Film najprościej wskazać atrybutem src, podając adres URL pliku wideo. Przyjąłem to podejście w poprzednich przykładach i ukazuję je ponownie w listingu 34.5. Listing 34.5. Wskazanie źródła filmu atrybutem src

Przykład



736

ROZDZIAŁ 34. „ MULTIMEDIA

Nie można wyświetlić filmu



W powyższym listingu użyłem atrybutu src do wskazania pliku timessquare.webm z filmem w formacie WebM. Tym samym wkraczamy do skomplikowanego świata formatów plików wideo. Wspomniałem wcześniej o wojnach przeglądarek, w których kilka korporacji usiłowało zdominować rynek, tworząc niestandardowe rozwinięcia HTML i tym podobne technologie. Szczęśliwie, tamte czasy przeminęły, a zgodność ze standardami jest dziś uznawana za zaletę przeglądarki — taką samą jak szybkość działania, łatwość w użyciu i przykuwające uwagę logo. Niestety, z formatami wideo nie ma tak dobrze. Walka o stworzenie dominującego w HTML5 formatu jest dla różnych firm okazją do zarobienia niemałych pieniędzy. Zwycięska firma mogłaby pobierać opłaty licencyjne i tantiemy, a jej portfel patentowy zyskałby na wartości. Z tego względu nie ma żadnego powszechnie obsługiwanego formatu wideo, a jeśli chcesz dotrzeć z jakimś filmem do ogółu publiki, to powinieneś go dystrybuować w różnych formatach. W tabeli 34.5 znajdują się formaty, które są obsługiwane najpowszechniej (choć z pewnością zastąpią je inne). Tabela 34.5. Powszechnie obsługiwane formaty wideo Obsługujące przeglądarki

Format

Opis

WebM

Google promuje WebM jako nieopatentowany i bezpłatny format. Twórcy formatu MP4/H.264 otwarcie usiłują znaleźć pulę patentów, by móc złożyć pozew przeciwko WebM (lub przynajmniej przestraszyć ludzi na tyle, by przestali z niego korzystać).

Opera Chrome Firefox

Ogg/Theora

Ogg Theora jest otwartym, bezpłatnym i nieopatentowanym formatem.

Opera Chrome Firefox

MP4/H.264

Korzystanie z tego formatu ma być darmowe do 2015 roku, ponieważ właściciel licencji zrezygnował ze swojego standardowego systemu opłat.

Internet Explorer Chrome Safari

Niestety, nie ma jednego formatu, którego można by używać we wszystkich popularnych przeglądarkach. Dopóki taki się nie pojawi, konieczne będzie kodowanie filmów w różnych formatach. „ Uwaga Kodowanie plików wideo wiąże się z wieloma szczegółami, które zamierzam zupełnie pominąć — kontenerami, kodekami i innymi ciekawymi rzeczami. Szczęśliwie, każdy format oferuje opcje, które pozwalają zrezygnować z wysokiej jakości lub niewielkich rozmiarów pliku na rzecz kompatybilności. Wystarczy spojrzeć na ciągle zmieniającą się obsługę plików wideo w przeglądarkach, by zrozumieć, że ciągle będziemy mieli do czynienia z coraz to nowszymi kombinacjami. Polecam Ci zapoznać się z dokumentacją popularnych przeglądarek, by rozeznać się w obsłudze; możesz też postępować tak jak ja i udostępniać pliki wideo we wszelkich możliwych formatach, by sprawdzić, który jest najpowszechniej obsługiwany.

Opisany w tabeli 34.6 element source służy do określania zróżnicowanych formatów. W listingu 34.6 widnieje przykład zastosowania elementu source do wskazania przeglądarce wyboru formatów wideo. Przeglądarka sprawdza kolejne formaty z sekwencji, w poszukiwaniu pliku wideo, który może odtworzyć. Może się to wiązać z wysyłaniem serwerowi wielu żądań w celu uzyskania dodatkowych informacji o każdym pliku. Przeglądarka określa, czy może odtworzyć dany plik, m.in. poprzez sprawdzenie zwróconego przez serwer typu MIME. Możesz dodatkowo udzielić użytkownikowi wskazówki, przypisując elementowi source atrybut type, określający typ MIME pliku, tak jak w listingu 34.7.

737

ROZDZIAŁ 34. „ MULTIMEDIA

Tabela 34.6. Element source Element

source

Typ elementu

Nie dotyczy

Dozwoleni rodzice

video, audio

Atrybuty lokalne

src, type, media

Zawartość

Brak

Znaczniki

Void

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

Listing 34.6. Zastosowanie elementu source

Przykład



Nie można wyświetlić filmu



Listing 34.7. Nadanie atrybutu type elementowi source

Przykład



Nie można wyświetlić filmu



„ Wskazówka Atrybut media wskazuje przeglądarce, do jakiego urządzenia film jest najlepiej przystosowany. W rozdziale 7. dowiesz się więcej o nadawaniu temu atrybutowi wartości.

Element track Specyfikacja HTML5 uwzględnia również element track, który oferuje mechanizm obsługujący dodatkowe materiały związane z filmem — m.in. napisy i tytuły fragmentów. W tabeli 34.7 znajduje się opis elementu, choć żadna z popularnych przeglądarek jeszcze go nie obsługuje. 738

ROZDZIAŁ 34. „ MULTIMEDIA

Tabela 34.7. Element track Element

track

Typ elementu

Nie dotyczy

Dozwoleni rodzice

video, audio

Atrybuty lokalne

kind, src, srclang, label, default

Zawartość

Brak

Znaczniki

Void

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

Element audio Element audio umożliwia osadzanie materiałów audio w dokumentach HTML. Jego opis znajduje się w tabeli 34.8. Tabela 34.8. Element audio Element

video

Typ elementu

Strukturalny/Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne lub treściowe

Atrybuty lokalne

autoplay, preload, controls, loop, muted, src

Zawartość

Elementy source i track, a także elementy treściowe i strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

Jak widać, element audio ma wiele wspólnego z elementem video. W listingu 34.8 widnieje przykład jego zastosowania. Listing 34.8. Zastosowanie elementu audio

Przykład

Nie można odtworzyć ścieżki audio



Źródło pliku audio określa się atrybutem src. Choć o formaty audio nie toczą się takie boje jak o formaty wideo, to nadal nie ma jednego formatu, którego obsługa byłaby wbudowana we wszystkie przeglądarki. Sądzę jednak, że prędzej pojawi się uniwersalny format audio niż wideo.

739

ROZDZIAŁ 34. „ MULTIMEDIA

„ Wskazówka Nadając elementowi atrybut autoplay, a pomijając atrybut controls, sprawiasz, że plik dźwiękowy odtwarza się sam, a użytkownik nijak nie może go wyłączyć. W imieniu wszystkich użytkowników na świecie błagam Cię, byś tego nie robił, zwłaszcza jeśli zamierzasz puszczać nudną, automatycznie skomponowaną i niczym niewyróżniającą się muzykę. Użytkownik zmuszony do słuchania jej będzie się czuł na Twojej stronie zupełnie tak, jakby puszczano mu dżingle w oczekiwaniu na połączenie z infolinią — zwłaszcza jeśli nie będzie mógł nawet określić, na jakich instrumentach utwór jest zagrany. Nie wmuszaj w użytkowników bezbarwnej, bezdusznej i bezsensownej muzyki, a już na pewno nie puszczaj jej automatycznie, nie dając nawet możliwości jej wyłączenia.

W listingu 34.9 widnieje przykład wykorzystania elementu source do podania wielu formatów. Listing 34.9. Wykorzystanie elementu source do podania wielu formatów audio

Przykład



Nie można odtworzyć ścieżki audio



W obydwu przykładach podałem atrybut controls, żeby przeglądarka wyświetliła standardowe kontrolki odtwarzacza. Istnieją pewne różnice w zależności od przeglądarki, ale rysunek 34.5 pokazuje, czego mniej więcej można się spodziewać.

Rysunek 34.5. Domyślne kontrolki elementu audio w Google Chrome

Praca z osadzonymi mediami za pośrednictwem DOM Elementy audio i video są do siebie na tyle podobne, że obiekt HTMLMediaElement obsługuje podstawowe funkcje obydwu z nich w DOM. Element audio w DOM reprezentowany jest przez obiekt HTMLAudioElement, który jednak nie obsługuje nic ponad to, co oferuje HTMLMediaElement. Element video reprezentowany jest przez obiekt HTMLVideoElement, obsługujący z kolei kilka dodatkowych właściwości, które opiszę w dalszej części rozdziału. „ Wskazówka Elementy audio i video mają ze sobą tyle wspólnego, że w zasadzie różnią się jedynie ilością zajmowanego miejsca na ekranie. Element audio nie zajmuje dużego obszaru ekranowego, na którym miałby

740

ROZDZIAŁ 34. „ MULTIMEDIA

być wyświetlany film. Co więcej, elementu audio można używać do puszczania plików wideo (oczywiście chodzi tylko o ich ścieżki dźwiękowe), a elementu video do odtwarzania plików audio (przy czym wtedy wyświetlacz elementu pozostaje pusty). Może to osobliwe, ale tak jest.

Pobieranie informacji o mediach Obiekt HTMLMediaElement obsługuje różne składowe, służące do pobierania i modyfikowania danych o elemencie oraz powiązanych z nim mediach. Opisuję je w tabeli 34.9. Tabela 34.9. Podstawowe składowe obiektu HTMLMediaElement Składowa

Opis

Zwracana wartość

autoplay

Sprawdza lub definiuje występowanie atrybutu autoplay.

wartość_boolowska

canPlayType()

Sprawdza, czy przeglądarka może odtworzyć plik o określonym typie MIME.

tekst

currentSrc

Zwraca bieżące źródło.

tekst

controls

Sprawdza lub definiuje obecność atrybutu controls.

wartość_boolowska

defaultMuted

Sprawdza lub definiuje początkową obecność atrybutu muted.

wartość_boolowska

loop

Sprawdza lub definiuje obecność atrybutu loop.

wartość_boolowska

muted

Sprawdza lub definiuje obecność atrybutu muted.

wartość_boolowska

preload

Sprawdza lub definiuje wartość atrybutu preload.

tekst

src

Sprawdza lub definiuje wartość atrybutu src.

tekst

volume

Sprawdza lub definiuje głośność w skali od 0.0 do 1.0.

liczba

Obiekt HTMLVideoElement obsługuje dodatkowe właściwości, które przedstawiam w tabeli 34.10. Tabela 34.10. Właściwości obsługiwane przez obiekt HTMLVideoElement Składowa

Opis

Zwracana wartość

height

Zwraca lub definiuje wartość atrybutu height.

liczba

poster

Zwraca lub definiuje wartość atrybutu poster.

tekst

videoHeight

Zwraca rzeczywistą wysokość obrazu.

liczba

videoWidth

Zwraca rzeczywistą szerokość obrazu.

liczba

width

Zwraca lub definiuje wartość atrybutu width.

liczba

W listingu 34.10 widnieje przykład wykorzystania niektórych właściwości HTMLMediaElement do uzyskania podstawowych informacji o elemencie multimedialnym. Listing 34.10. Uzyskanie podstawowych informacji o elemencie multimedialnym

Przykład





Nie można wyświetlić filmu

Właściwość	Wartość

Podany w przykładzie skrypt wyświetla wartości właściwości w tabeli obok elementu video. Rezultat widać na rysunku 34.6.

Rysunek 34.6. Wyświetlanie podstawowych informacji o elemencie video Na powyższym rysunku widać Operę, ponieważ jest to jedyna przeglądarka, która prawidłowo obsługuje właściwość currentSrc. Właściwość ta wyświetla wartość atrybutu src, czy to pobranej z samego elementu multimedialnego, czy używanego elementu source, jeśli jest jakiś wybór formatów.

742

ROZDZIAŁ 34. „ MULTIMEDIA

Określenie możliwości odtworzenia multimediów Metody canPlayType można użyć do sprawdzenia, czy przeglądarka może odtworzyć dany format. Zwraca ona jedną z wartości podanych w tabeli 34.11. Tabela 34.11. Wartości atrybutu canPlayType Wartość

Opis

"" (pusty ciąg znaków)

Przeglądarka nie może odtworzyć podanego typu multimediów.

maybe

Przeglądarka może być w stanie odtworzyć podanego typu multimedia.

probably

Jest bardzo duże prawdopodobieństwo, że przeglądarka jest w stanie odtworzyć podanego typu multimedia.

Wartości te podają — rzecz jasna — dość ogólne informacje. Wynika to ze złożoności niektórych formatów multimediów oraz ustawień kodowania przy tworzeniu takich plików. W listingu 34.11 widnieje przykład zastosowania metody canPlayType. Listing 34.11. Zastosowanie metody canPlayType

Przykład



Nie można wyświetlić filmu

Właściwość	Wartość

W podanym tutaj skrypcie użyłem metody canPlayType do sprawdzenia kilku typów multimediów. Po otrzymaniu odpowiedzi probably nadaję wartość atrybutowi src elementu video. Przy okazji odnotowuję w tabeli odpowiedzi dotyczące pozostałych typów multimediów. Przy wybieraniu formatów w ten sposób należy uważać, jako że przeglądarki potrafią w różny sposób szacować swoją zdolność do ich odtwarzania. Na rysunku 34.7 widnieje odpowiedź Firefoksa.

Rysunek 34.7. Określenie obsługi formatów multimediów w Firefoksie Firefox podchodzi bardzo optymistycznie do formatu WebM, a poza tym jest pewien, że nie potrafi odtwarzać plików Ogg i MP4. W rzeczywistości radzi sobie z plikami Ogg bardzo dobrze. Na rysunku 34.8 widnieje odpowiedź Chrome.

Rysunek 34.8. Określenie obsługi formatów multimediów w Chrome Chrome jest bardziej sceptyczny co do swoich możliwości, lecz mimo to bez problemu odtwarza wszystkie trzy rodzaje plików. W tym wypadku sceptycyzm Chrome sprawia, że metoda canPlayType w ogóle nie zwraca odpowiedzi probably, przez co żaden z plików nie zostaje wybrany do odtworzenia. Trudno krytykować przeglądarki za niespójność takich diagnoz. Mamy do czynienia ze zbyt wieloma zmiennymi, by liczyć na pewne odpowiedzi, ale owa rozbieżność w ocenie obsługi powinna nam sugerować, żeby korzystać z metody canPlayType bardzo ostrożnie.

744

ROZDZIAŁ 34. „ MULTIMEDIA

Kontrolowanie sposobu odtwarzania Obiekt HTMLMediaElement obsługuje kilka składowych, które pozwalają na kontrolowanie sposobu odtwarzania plików i pobieranie informacji. Opisuję je w tabeli 34.12. Tabela 34.12. Składowe obiektu HTMLMediaElement odnoszące się do odtwarzania Składowa

Opis

Zwracana wartość

currentTime

Zwraca informację o odtwarzanym aktualnie momencie.

liczba

duration

Zwraca całkowity czas trwania pliku.

liczba

ended

Zwraca wartość true, jeśli odtwarzanie się skończyło.

wartość_boolowska

pause()

Pauzuje odtwarzanie.

void

paused

Zwraca wartość true, jeśli odtwarzanie zostało zapauzowane; w innym wypadku zwraca wartość false.

wartość_boolowska

play()

Rozpoczyna odtwarzanie pliku.

void

W listingu 34.12 widać przykład zastosowania właściwości podanych w powyższej tabeli do uzyskania informacji o odtwarzaniu. Listing 34.12. Zastosowanie właściwości HTMLMediaElement do uzyskania szczegółów odtwarzania multimediów

Przykład





Nie można wyświetlić filmu

Właściwość	Wartość

Naciśnij mnie



Zamieściłem w tym przykładzie element button, po którego naciśnięciu w tabeli pojawiają się bieżące wartości currentTime, duration, paused i ended. Rezultat widać na rysunku 34.9.

Rysunek 34.9. Pobranie wartości właściwości odtwarzania Metodami odtwarzania można podmienić standardowe kontrolki. W listingu 34.13 widnieje tego przykład. Listing 34.13. Zastąpienie standardowych kontrolek odtwarzania

Przykład



Nie można wyświetlić filmu

Play Pause



W tym przykładzie nie zamieściłem w elemencie video atrybutu controls i wykorzystałem metody play i pause (aktywowane naciśnięciami przycisków button) do rozpoczynania i wstrzymywania odtwarzania. Rezultat widać na rysunku 34.10.

Rysunek 34.10. Zastąpienie standardowych kontrolek odtwarzania „ Wskazówka W specyfikacji HTML określony jest szereg zdarzeń powiązanych z wczytywaniem i odtwarzaniem multimediów, obsługiwanych przez właściwość controller obiektu HTMLMediaElement. Na razie żadna z popularnych przeglądarek nie obsługuje ani tej właściwości, ani obiektu MediaController, który powinna zwracać.

Podsumowanie W tym rozdziale pokazałem Ci, jak HTML5 obsługuje wbudowany system odtwarzania mediów za pośrednictwem elementów video i audio oraz jak posługiwać się tymi elementami za pośrednictwem DOM. Wbudowana obsługa multimediów ma w sobie duży potencjał, jeśli weźmiemy pod uwagę trudności z wtyczkami typu Flash, lecz jest to funkcja, która dopiero zaczyna być wdrażana. Będziesz, niestety, musiał pracować na chybił trafił, dopóki nie zostaną rozwiązane problemy z obsługą i dopóki przeglądarki nie zaczną standardowo korzystać z tej funkcji.

747

ROZDZIAŁ 34. „ MULTIMEDIA

748

ROZDZIAŁ 35

Element canvas. Część I W poprzednim rozdziale wspomniałem nieco o mieszanych uczuciach, jakie większość deweloperów i projektantów aplikacji żywi w stosunku do Adobe Flash. Flash jest nielubiany za niestabilność i słabe zabezpieczenia, a ostatnimi czasy Adobe oskarżane jest o wydawanie niskiej jakości oprogramowania. Jednocześnie Flasha ceni się za jego wszechobecność i to, że umożliwia tworzenie bogatych treści. HTML5 jako zamiennik Flasha oferuje element canvas. Jeśli zdarzyło Ci się przeczytać jakikolwiek opis nowych możliwości HTML5, to z pewnością właśnie canvas był jedną z pierwszych wymienionych funkcji, w dodatku przedstawioną jako pogromca Flasha. Jak to zwykle bywa — pobożne życzenia sobie, a rzeczywistość sobie. Element canvas jest obszarem rysowania, który konfiguruje się i którego się używa za pośrednictwem JavaScript. Jest elastyczny, względnie łatwy w użyciu i obsługuje na tyle dużo funkcji, że może zastępować Flasha przy tworzeniu niektórych rodzajów bogatych treści. Jest jednak za wcześnie, by go nazywać pogromcą Flasha (czy nawet zamiennikiem), gdyż musi się on dopiero upowszechnić. Czytasz właśnie pierwszy z dwóch rozdziałów o elemencie canvas. Pokażę Ci tu, jak przygotować się do pracy z nim, i przedstawię obiekty, których będziemy używać w JavaScript, by zarządzać obszarem rysowania. Zaprezentuję tworzenie podstawowych kształtów, wykorzystanie jednolitych kolorów i gradientów oraz pokażę, jak rysować obrazy. W następnym rozdziale zajmę się bardziej skomplikowanymi kształtami, a także nadawaniem efektów i przekształceń. W tabeli 35.1 znajduje się streszczenie całego rozdziału. Tabela 35.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Przygotowanie płótna do rysowania.

Znajdź element canvas w DOM i przywołaj metodę getContext obiektu HTMLCanvasObject.

35.1, 35.2

Narysowanie prostokąta.

Użyj metod fillRect i strokeRect.

35.3

Usunięcie prostokąta.

Użyj metody clearRect.

35.4

Określenie stylu operacji rysowania.

Określ wartości właściwości rysowania (takie jak lineWidth i lineJoin) przed wykonaniem operacji.

35.5, 35.6

Wykorzystanie jednolitych kolorów w operacjach rysowania.

Nadaj właściwościom fillStyle i strokeStyle wartości kolorystyczne i nazwy.

35.7

Utworzenie gradientu liniowego.

Przywołaj metodę createLinearGradient i określ kolory gradientu metodą addColorStop.

35.8 – 35.11

Utworzenie gradientu promieniowego.

Przywołaj metodę createRadialGradient i określ kolory gradientu metodą addColorStop.

35.12, 35.13

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Tabela 35.1. Streszczenie rozdziału — ciąg dalszy Problem

Rozwiązanie

Listing

Utworzenie wzorka.

Przywołaj metodę createPattern i wskaż źródło obrazu wzorka oraz styl powtórzeń.

35.14, 35.15

Zapisanie i przywrócenie stanu obrazu.

Użyj metod save i restore.

35.16

Narysowanie obrazu na płótnie.

Użyj metody drawImage, wskazując jako źródło element img, canvas lub video.

35.17 – 35.20

Początki z elementem canvas Element canvas jest dość prosty o tyle, że wszystkie jego funkcje dostępne są z poziomu obiektu w JavaScript, wobec czego do samego tego elementu odnoszą się tylko dwa atrybuty, co widać w tabeli 35.2. Tabela 35.2. Element canvas Element

canvas

Typ elementu

Strukturalny/Treściowy

Dozwoleni rodzice

Dowolny element, który może zawierać elementy strukturalne lub treściowe

Atrybuty lokalne

height, width

Zawartość

Elementy treściowe i strukturalne

Znaczniki

Znacznik otwierający i zamykający

Nowość w HTML5

Tak

Zmiany w HTML5

Nie dotyczy

Domyślny styl prezentacji

Brak

Zawartość elementu canvas służy jako zapasowa treść na wypadek, gdyby przeglądarka tego elementu nie obsługiwała. W listingu 35.1 widnieje element canvas i prosta treść zapasowa. Listing 35.1. Wykorzystanie elementu canvas z podstawową treścią zastępczą

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Jak możesz się domyślać, atrybuty width i height określają wielkość elementu na ekranie. Wygląd elementu w przeglądarce widać na rysunku 35.1, choć na razie nie ma tu nic ciekawego.

750

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Rysunek 35.1. Zamieszczenie elementu canvas w dokumencie HTML „ Wskazówka W tym przykładzie nadałem elementowi canvas styl z obramowaniem, gdyż inaczej nie byłby on widoczny w oknie przeglądarki. Żeby było jasne, jak opisywane operacje odnoszą się do współrzędnych płótna, we wszystkich pozostałych przykładach będzie ono miało obramowanie.

Uzyskanie kontekstu płótna Aby móc rysować na płótnie, musimy najpierw pozyskać obiekt kontekstu, który obsługuje funkcje rysujące określonych stylów graficznych. My będziemy pracować w kontekście 2d, który służy do wykonywania operacji rysowania dwuwymiarowego. Niektóre przeglądarki obsługują eksperymentalny kontekst trójwymiarowy, który jest jednak dopiero w powijakach. Kontekst uzyskujemy za pośrednictwem obiektu reprezentującego element canvas w DOM. Obiekt ten, HTMLCanvasElement, opisany jest w tabeli 35.3. Tabela 35.3. Obiekt HTMLCanvasElement Składowa

Opis

Zwracana wartość

height

Odpowiednik atrybutu height.

liczba

width

Odpowiednik atrybutu width.

liczba

getContext()

Zwraca kontekst rysowania.

obiekt

Najważniejsza jest tu metoda getContext. Do uzyskania obiektu kontekstu dwuwymiarowego podajemy 2d jako argument. Uzyskawszy kontekst, możemy się zabrać za rysowanie. W listingu 35.2 widnieje przykład wykonania tej czynności. Listing 35.2. Uzyskanie obiektu kontekstu dwuwymiarowego płótna

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W powyższym listingu wyróżniłem najważniejszą deklarację. Posłużyłem się obiektem document do znalezienia obiektu reprezentującego element canvas w DOM oraz przywołałem metodę getContext z argumentem 2d. Ta deklaracja albo bardzo podobne wariacje znajdują się w każdym przykładzie w tym rozdziale. Po uzyskaniu obiektu kontekstu mogę się wziąć za rysowanie. W tym przykładzie przywołałem metodę fillRect, która rozrysowuje wypełniony prostokąt. Rezultat widać na rysunku 35.2.

Rysunek 35.2. Pozyskanie obiektu kontekstu i wykonanie prostej operacji rysowania

Rysowanie prostokątów Zacznijmy od obsługi prostokątów przez canvas. W tabeli 35.4 widnieją odpowiednie metody, które odnoszą się do obiektu kontekstu, a nie do samego płótna. Tabela 35.4. Metody służące do rysowania prostych kształtów Nazwa

Opis

Zwracana wartość

clearRect(x, y, w, h)

Usuwa wskazany prostokąt.

void

fillRect(x, y, w, h)

Rysuje prostokąt z wypełnieniem.

void

strokeRect(x, y, w, h)

Rysuje prostokąt bez wypełnienia.

void

„ Wskazówka Rysować można także bardziej złożone kształty, lecz opowiem o tym dopiero w rozdziale 36. Wykorzystanie prostokątów w objaśnianiu innych funkcji płótna pozwoli nam uniknąć ugrzęźnięcia w analizie działania innych kształtów.

Powyższe trzy metody przyjmują cztery argumenty. Pierwsze dwa (czyli x i y) określają oddalenie od lewego górnego rogu płótna. Argumenty w i h określają szerokość i wysokość rysowanego prostokąta. W listingu 35.3 widnieje przykład zastosowania metod fillRect i strokeRect.

752

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Listing 35.3. Zastosowanie metod fillRect i strokeRect

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Podany w tym przykładzie skrypt używa metod fillRect i strokeRect do utworzenia serii wypełnionych i pustych prostokątów, co widać na rysunku 35.3.

Rysunek 35.3. Rysowanie wypełnionych i pustych prostokątów Nadałem skryptowi taką postać, by zwrócić uwagę na zautomatyzowany charakter elementu canvas. Do narysowania prostokątów użyłem pętli JavaScript for. Mógłbym wprawdzie napisać dziesięć osobnych deklaracji z własnymi współrzędnymi, ale jednym z atutów płótna jest właśnie taka automatyzacja. Jeśli jednak nie masz doświadczenia z programowaniem, to możesz mieć trudności ze zrozumieniem tego aspektu pracy. Metoda clearRect usuwa wszystko, co zostało narysowane na obszarze wskazanego prostokąta. W listingu 35.4 widać przykład jej zastosowania.

753

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Listing 35.4. Zastosowanie metody clearRect

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W tym przykładzie użyłem metody clearRect do wyczyszczenia obszaru płótna, na którym uprzednio narysowałem prostokąty metodą fillRect. Rezultat widać na rysunku 35.4.

Rysunek 35.4. Zastosowanie metody clearRect

Ustawienie stanu rysowania Operacje rysowania definiuje się stanem rysowania, czyli zbiorem właściwości określających wszystko, od szerokości linii po kolor wypełnienia. Przy rysowaniu kształtu używane są bieżące ustawienia stanu rysowania. W listingu 35.5 widnieje przykład, w którym użyto właściwości lineWidth, będącej częścią stanu rysowania, która określa szerokość linii rysowanych np. metodą strokeRect.

754

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Listing 35.5. Ustawienie stanu rysowania przed wykonaniem operacji

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Kiedy używam metody strokeRect, bieżąca wartość właściwości lineWidth zostaje wykorzystana przy rozrysowaniu prostokąta. W powyższym przykładzie określiłem wartość tej właściwości jako 2, 4, a w końcu 6 pikseli, czego efektem jest pogrubienie boków prostokątów. Zauważ, że nie zmieniłem wartości przed ostatnim wywołaniem strokeRect. Zrobiłem to, by pokazać, że wartości właściwości stanu rysowania nie zmieniają się pomiędzy kolejnymi operacjami, co widać na rysunku 35.5.

Rysunek 35.5. Zamiana wartości stanu rysowania pomiędzy kolejnymi operacjami rysowania W tabeli 35.5 widnieją podstawowe właściwości stanu rysowania. Są też inne właściwości, które omówimy przy bardziej zaawansowanych funkcjach.

Styl rysowania styku linii Właściwość lineJoin określa, jak rozrysowywane są stykające się linie. Obsługuje trzy wartości: round, bevel i miter, przy czym ta ostatnia jest domyślna. W listingu 35.6 widnieje przykład zastosowania tych trzech stylów.

755

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Tabela 35.5. Podstawowe właściwości stanu rysowania Nazwa

Opis

Domyślna wartość

fillStyle

Zwraca lub definiuje styl wypełnienia kształtu.

black

lineJoin

Zwraca lub definiuje styl styku linii.

miter

lineWidth

Zwraca lub definiuje szerokość linii.

1.0

strokeStyle

Zwraca lub definiuje styl rysowania linii.

black

Listing 35.6. Określenie właściwości lineJoin

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W tym przykładzie użyłem właściwości lineWidth, żeby metoda strokeRect rozrysowywała bardzo grube linie, oraz skorzystałem po kolei z wszystkich wartości lineJoin. Rezultat widać na rysunku 35.6.

Rysunek 35.6. Właściwość lineJoin

756

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Styl wypełnienia kształtu i rysowania linii Przy określaniu stylu właściwościami fillStyle i strokeStyle można także zdefiniować kolor oparty na wartościach CSS, które opisałem w rozdziale 4. — nazwie lub modelu koloru. W listingu 35.7 widnieje przykład. Listing 35.7. Określenie kolorów właściwościami fillStyle i strokeStyle

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W tym przykładzie zdefiniowałem dwie tablice kolorów przy użyciu nazw kolorów CSS i modelu rgb. Następnie przypisałem te barwy właściwościom fillStyle i strokeStyle w pętli for, która przywołuje metody fillRect i strokeRect. Rezultat widać na rysunku 35.7. „ Uwaga Rzecz jasna, przykłady dotyczące kolorów tracą sens, gdy są wydrukowane w odcieniach szarości. Powinieneś wobec tego rzucić okiem na ten przykład w przeglądarce; wszystkie przedstawione w tej książce listingi możesz pobrać za darmo ze strony www.helion.pl/ksiazki/htm5pe.htm.

Gradienty Style wypełnień i obramowań można także określać gradientami. Gradient jest stopniowym przejściem pomiędzy dwoma kolorami lub większą ich liczbą. Element canvas obsługuje dwa rodzaje gradientów — liniowe i promieniowe — które tworzy się metodami opisanymi w tabeli 35.6.

757

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Rysunek 35.7. Określenie stylów wypełniania i rysowania linii z użyciem kolorów CSS Tabela 35.6. Metody służące do tworzenia gradientów Nazwa

Opis

Zwracana wartość

createLinearGradient(x0, y0, x1, y1)

Tworzy gradient liniowy.

CanvasGradient

createRadialGradient(x0, y0, r0, x1, y1, r1)

Tworzy gradient promieniowy.

CanvasGradient

Obydwie te metody zwracają obiekt CanvasGradient, który obsługuje metodę opisaną w tabeli 35.7. Jego argumenty określają linię lub koło, na których opierają się gradienty, co zobaczysz w kolejnych przykładach. Tabela 35.7. Metoda CanvasGradient Nazwa

Opis

Zwracana wartość

addColorStop(, )

Umieszcza kolor na linii gradientu.

void

Gradient liniowy Kolory gradientu liniowego rozmieszczone są na linii. W listingu 35.8 widnieje przykład utworzenia prostego gradientu liniowego. Listing 35.8. Utworzenie gradientu liniowego

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Metodzie createLinearGradient nadajemy cztery wartości, które określają współrzędne początku i końca linii na płótnie. W tym przykładzie utworzyłem linię zaczynającą się w punkcie 0,0, a kończącą w punkcie 500,140, czyli w lewym górnym i prawym dolnym rogu płótna, tak jak widać na rysunku 35.8.

Rysunek 35.8. Linia gradientu liniowego Widoczna tutaj linia przedstawia gradient. Możemy teraz użyć metody addColorStop na zwróconym przez metodę createLinearGradient obiekcie CanvasGradient, by umieścić kolory na linii gradientu: grad.addColorStop(0, "red"); grad.addColorStop(0.5, "white"); grad.addColorStop(1, "black");

Pierwszy argument metody addColorStop to punkt na linii, w którym chcemy zamieścić podany w drugim argumencie kolor. Punkt początkowy (w tym wypadku 0,0) przedstawiony jest tu jako wartość 0, a końcowy jako 1. W powyższym przykładzie zadeklarowałem, że chcę uzyskać gradient zaczynający się od koloru czerwonego (red), przechodzący w biel (white) w połowie, a kończący się kolorem czarnym (black). Płótno oblicza, jak utworzyć płynne przejścia w tych punktach. Można podać dowolną liczbę punktów kolorów, ale ich nadmiar może doprowadzić do uzyskania czegoś, co przypomina tęczę. Po utworzeniu gradientu i dodaniu punktów kolorów możemy obiektem CanvasGradient określić właściwości fillStyle lub strokeStyle: ctx.fillStyle = grad;

Wreszcie, rysujemy kształt — w tym przypadku wypełniony prostokąt: ctx.fillRect(0, 0, 500, 140);

Prostokąt jest wielkości płótna i widać w nim cały gradient (rysunek 35.9).

Rysunek 35.9. Zamieszczenie gradientu liniowego w prostokącie z wypełnieniem

759

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Jak widać, kolory zmieniają się wzdłuż linii gradientu. Lewy górny róg jest jednolicie czerwony, środek biały, a prawy dolny róg czarny, przy czym barwy płynnie w siebie przechodzą.

Gradient liniowy a mniejsze kształty Linię gradientu tworzymy względem płótna, a nie rysowanych kształtów, co może początkowo prowadzić do zakłopotania. Listing 35.9 ukazuje, co mam na myśli. Listing 35.9. Wykorzystanie gradientu z kształtem, który nie wypełnia całego płótna

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W tym przykładzie jedynie zmniejszyłem prostokąt, co widać na rysunku 35.10.

Rysunek 35.10. Niepełny widok gradientu Właśnie tutaj widać problem wynikający z tego, że gradient odnosi się do płótna. Narysowałem prostokąt na obszarze jednolitej czerwieni — wprawdzie z bliska można by dostrzec lekkie przejście w biel, ale i tak ma się wrażenie jednolitości barwy. Najlepiej pamiętać o tym, że kiedy rysujemy kształt, to ukazujemy w nim dany fragment gradientu. Należy zatem zwracać uwagę na to, jak linia gradientu odnosi się do obszaru, na którym pojawi się kształt. W listingu 35.10 widać, jak przystosować linię gradientu do kształtu.

760

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Listing 35.10. Dopasowanie linii gradientu do kształtu

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W tym przykładzie utworzyłem linię gradientu, która zaczyna się i kończy w obrębie obszaru, który zostanie objęty małym prostokątem. Na razie jednak narysowałem prostokąt obejmujący całe płótno, żebyś zobaczył wygląd nowego gradientu (rysunek 35.11).

Rysunek 35.11. Rezultat przesunięcia i skrócenia linii gradientu Widać tutaj, jak przesunąłem gradient do miejsca, które ukażę przy użyciu mniejszego prostokąta. Na koniec trzeba dopasować prostokąt do gradientu, tak jak w listingu 35.11. Listing 35.11. Dopasowanie kształtu do gradientu

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



„ Wskazówka Zauważ, że wartości argumentów metody createLinearGradient różnią się od parametrów metody fillRect. Wartości createLinearGradient reprezentują parę współrzędnych na płótnie, podczas gdy wartości fillRect określają wysokość i szerokość prostokąta względem jednego punktu. Kiedy gradient i kształt rozchodzą się, to przyczyny warto poszukać właśnie w tych wartościach.

Kształt jest już idealnie wyrównany z gradientem, co widać na rysunku 35.12. Rzecz jasna, nie zawsze musi nam zależeć na takim wyrównaniu. Czasami lepiej ukazać konkretny obszar większego gradientu, by uzyskać inny efekt. Niezależnie od celu, jaki chcesz osiągnąć, musisz rozumieć relację pomiędzy gradientem a kształtami, w jakich się go ukazuje.

Rysunek 35.12. Wyrównanie kształtu z gradientem

Gradient promieniowy Gradienty promieniowe definiuje się na podstawie dwóch kół. Punkt początkowy gradientu określany jest pierwszym kołem, a drugie koło określa jego granicę; pomiędzy nimi zamieszcza się punkty kolorów. W listingu 35.12 widnieje przykład utworzenia takiego gradientu.

762

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Listing 35.12. Utworzenie gradientu promieniowego

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Sześć argumentów metody createRadialGradient określa: • współrzędne środka koła początkowego (pierwszy i drugi argument), • promień koła początkowego (trzeci argument), • współrzędne środka koła końcowego (czwarty i piąty argument), • promień koła końcowego (szósty argument). Podane w tym przykładzie wartości tworzą koło początkowe i końcowe, które widać na rysunku 35.13. Zauważ, że możliwe jest utworzenie gradientu (nie tylko promieniowego, ale i liniowego), który wychodzi poza płótno.

Rysunek 35.13. Koło początkowe i końcowe gradientu promieniowego W tym przykładzie koło początkowe jest mniejsze i zawarte w kole końcowym. Dodane punkty koloru zamieszczane są na linii ciągnącej się od koła początkowego (punktu o wartości 0.0) do koła końcowego (punktu o wartości 1.0). „ Wskazówka Bądź ostrożny przy tworzeniu par kół, w których jedno koło nie jest zawarte w drugim. Obliczanie gradientów jest obsługiwane różnie w różnych przeglądarkach, a rezultaty bywają chaotyczne.

763

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Jako że możemy zdefiniować położenie obydwu kół, to odległość pomiędzy ich krawędziami może być zróżnicowana, tak samo jak intensywność przejścia kolorystycznego. Rezultat widać na rysunku 35.14.

Rysunek 35.14. Gradient promieniowy Na rysunku widnieje cały gradient, ale także tutaj należy pamiętać o relacji między gradientem a rozrysowanymi kształtami. W listingu 35.13 tworzę dwa mniejsze kształty, które ukazują jedynie fragmenty gradientu. Listing 35.13. Wykorzystanie mniejszych kształtów z gradientem promieniowym

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Zauważ, że mogę użyć gradientu zarówno z fillStyle, jak i ze strokeStyle. Jak widać na rysunku 35.15, gradientami można rysować i kształty, i obramowania.

764

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Rysunek 35.15. Wypełnienie i obramowanie rozrysowane gradientem promieniowym

Wzory Poza jednolitymi kolorami i gradientami można również tworzyć wzory. Robi się to przy użyciu metody createPattern, obsługiwanej przez obiekt kontekstu. Dwuwymiarowy kontekst rysowania teoretycznie obsługuje trzy rodzaje wzorów — obrazy, filmy i płótna — lecz w rzeczywistości obsługiwane są tylko wzory obrazów (a i to jedynie w Firefoksie i Operze; na razie inne przeglądarki nie uznają tego typu wzoru). Wzór obrazu tworzy się, podając obiekt HTMLImageElement jako pierwszy argument metody createPattern. Drugi argument określa styl powtórzeń i musi mieć którąś z wartości przedstawionych w tabeli 35.8. Tabela 35.8. Wartości powtórzeń wzorów Wartość

Opis

repeat

Obraz jest powtarzany w poziomie i w pionie.

repeat-x

Obraz jest powtarzany w poziomie.

repeat-y

Obraz jest powtarzany w pionie.

no-repeat

Obraz nie jest powtarzany.

W listingu 35.14 widnieje przykład utworzenia i wykorzystania wzoru obrazu. Listing 35.14. Wykorzystanie wzoru obrazu

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W powyższym dokumencie zawarty jest element img. Użytkownik go nie widzi, ponieważ nadałem mu atrybut hidden (który opisałem w rozdziale 4.). W skrypcie, za pośrednictwem DOM, zlokalizowałem obiekt HTMLImageElement, który reprezentuje element img jako pierwszy argument metody createPattern. Drugiemu argumentowi nadałem wartość repeat, która sprawia, że obraz jest powtarzany w obydwu osiach. Wreszcie, określiłem wzorzec jako wartość właściwości fillStyle, a metodą fillRect narysowałem wypełniony prostokąt wielkości płótna. Rezultat widać na rysunku 35.16.

Rysunek 35.16. Utworzenie wzoru obrazu Wzór jest oparty na bieżącym stanie elementu img; oznacza to, że nie ulegnie on zmianie, jeśli z pomocą JavaScript i DOM zmienimy wartość jego atrybutu src. Tak jak z gradientami, wzory odnoszą się do całego płótna. O widoczności obszarów wzoru decydujesz sam, poprzez rozrysowywanie kształtów. W listingu 35.15 widnieje przykład wykorzystania wzoru jako wypełnienia i obramowania. Listing 35.15. Wykorzystanie wzoru obrazu z mniejszymi kształtami

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Rezultat widać na rysunku 35.17.

Rysunek 35.17. Wykorzystanie wzoru obrazu z mniejszymi kształtami

Zapisywanie i przywracanie stanu rysowania Stan rysowania można zapisać, a następnie przywrócić, przy użyciu metod opisanych w tabeli 35.9. Tabela 35.9. Zapisywanie i przywracanie stanu Wartość

Opis

save()

Zapisuje wartości właściwości stanu rysowania i przenosi na stos stanów.

restore()

Pobiera pierwszy zbiór wartości ze stosu stanów i na ich podstawie definiuje stan rysowania.

Zapisane stany obrazów są przechowywane w stosie LIFO, czyli takim, w którym ostatni zapisany metodą save stan jest pierwszym, który zostaje pobrany metodą restore. W listingu 35.16 widnieje przykład zastosowania tych metod. Listing 35.16. Zapisywanie i przywracanie stanu

Przykład



767

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Twoja przeglądarka nie obsługuje elementu canvas

Zapisz Przywróć



W powyższym przykładzie utworzyłem tablicę, w której znajdują się nazwy kolorów CSS oraz gradient liniowy. Bieżący stan rysowania został zapisany metodą save po naciśnięciu przycisku Zapisz. Po naciśnięciu przycisku Przywróć przywrócony zostaje poprzedni stan rysowania. Przy naciskaniu tych przycisków przywoływana jest funkcja draw, która używa metody fillRect do narysowania wypełnionego prostokąta. Właściwość fillStyle jest przenoszona po tablicy w jedną lub w drugą stronę, a przy naciskaniu przycisków — zapisywana i przywracana, ponieważ jest ona częścią stanu rysowania. Rezultat widać na rysunku 35.18. Zapisywana i przywracana nie jest sama zawartość płótna, lecz wartości właściwości stanu rysowania, w tym zarówno właściwości opisanych już w tym rozdziale (m.in. lineWidth, fillStyle i strokeStyle), jak i kilku innych, które opiszę w rozdziale 36.

768

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Rysunek 35.18. Zapisywania i przywracanie stanu rysowania

Rysowanie obrazów Obrazy na płótnie można rozrysowywać przy użyciu metody drawImage, która może obsługiwać trzy, pięć lub dziewięć argumentów. Pierwszy argument jest zawsze źródłem obrazu — może to być obiekt DOM, reprezentujący element img, video lub inny element canvas. W listingu 35.17 widnieje przykład zastosowania tej metody z wykorzystaniem elementu img jako źródła. Listing 35.17. Zastosowanie metody drawImage

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Gdy podajemy trzy argumenty, drugi i trzeci określają współrzędne na płótnie, z których obraz ma być rozrysowany. Obraz rysowany jest w swojej rzeczywistej szerokości i wysokości. Kiedy podajemy pięć argumentów, to ostatnie dwa określają docelową szerokość i wysokość obrazu — mają pierwszeństwo przed wymiarami rzeczywistymi. Kiedy podajemy dziewięć argumentów: • Drugi i trzeci określają, od którego punktu w pierwotnym obrazie ma on być odtworzony. • Czwarty i piąty określają szerokość i wysokość obszaru obrazu źródłowego do rozrysowania.

769

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

• Szósty i siódmy określają współrzędne punktu na płótnie, w którym ma się znaleźć lewy górny róg obrazu. • Ósmy i dziewiąty określają szerokość i wysokość punktu na płótnie, w którym obraz ma się kończyć. Efekt zastosowania tych argumentów widać na rysunku 35.19.

Rysunek 35.19. Rysowanie obrazu

Obrazy filmowe Jako źródło obrazu rysowanego metodą drawImage można także podać element video. Robiąc to, uzyskujemy migawkę z filmu. W listingu 35.18 widnieje przykład zastosowania tej wartości. Listing 35.18. Wykorzystanie filmu jako źródła dla metody drawImage

Przykład



Nie można odtworzyć filmu

Migawka

Twoja przeglądarka nie obsługuje elementu canvas



770

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

W tym przykładzie zamieściłem element video, przycisk button oraz element canvas. Po naciśnięciu przycisku bieżąca klatka filmu zostaje wykorzystana przez metodę drawImage do utworzenia obrazu na płótnie. Rezultat widać na rysunku 35.20.

Rysunek 35.20. Wykorzystanie filmu jako źródła dla metody drawImage W filmach demonstracyjnych HTML5 często widać figury rozrysowywane na płótnie nałożonym na obraz. Robi się to techniką, którą Ci właśnie przedstawiłem, w połączeniu z licznikiem (opisanym w rozdziale 27.). Listing 35.19 pokazuje, jak je należy połączyć. Nie jestem jednak szczególnym miłośnikiem tej techniki. Jeśli chcesz wiedzieć czemu, to rzuć tylko okiem, jak bardzo taki dokument obciąża procesor. Listing 35.19. Wykorzystanie płótna do wyświetlenia i narysowania figur na filmie

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W tym przykładzie widać element video, któremu nadałem atrybut hidden, żeby był niewidoczny dla użytkownika. Użyłem dwóch liczników — pierwszy uruchamia się co 25 milisekund i rozrysowuje bieżącą klatkę filmu, a następnie obramowanie prostokąta. Drugi licznik uruchamia się co 100 milisekund i zmienia wartości prostokąta. Rezultatem jest prostokąt, który zmienia rozmiar i jest nałożony na obraz filmu. Działanie tego efektu widać mniej więcej na rysunku 35.21, choć żeby móc go zobaczyć w całej okazałości, powinieneś obejrzeć przykładowy dokument w przeglądarce.

Rysunek 35.21. Wykorzystanie liczników do nałożenia obrazu na film zawarty w elemencie canvas Kiedy używamy plików wideo w ten sposób, nie mamy możliwości korzystania z wbudowanych kontrolek. Dla ułatwienia użyłem atrybutu autoplay, ale lepiej jednak wprowadzić własne kontrolki, takie jakie opisałem w rozdziale 34.

Obrazy z elementu canvas Zawartość jednego płótna można wykorzystać jako źródło dla metody drawImage innego płótna, tak jak pokazuję w listingu 35.20. Listing 35.20. Wykorzystanie płótna jako źródła dla metody drawImage

Przykład



772

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Twoja przeglądarka nie obsługuje elementu canvas

Naciśnij mnie

Twoja przeglądarka nie obsługuje elementu canvas



W tym przykładzie dodałem drugi element canvas oraz przycisk button. Po naciśnięciu przycisku reprezentującym pierwotny element canvas obiektem HTMLCanvasElement przywołuję metodę drawImage obiektu kontekstowego drugiego elementu canvas. W praktyce naciśnięcie przycisku skutkuje pobraniem migawki z płótna po lewej i wyświetleniem go na płótnie po prawej. Z płótna pobierane jest wszystko, w tym czerwony prostokąt, który jest nałożony. Możemy teraz wykonywać kolejne operacje rysowania, więc na drugim płótnie utworzyłem grube, czarne obramowanie wokół migawki. Rezultat widać na rysunku 35.22.

Podsumowanie W tym rozdziale przedstawiłem element canvas. Pokazałem, jak rysować proste kształty, konfigurować, zapisywać i przywracać stan rysowania oraz jak wykorzystywać jednolite kolory i gradienty w operacjach rysowania. Pokazałem również, jak rysować obrazy z wykorzystaniem zawartości elementów img, video oraz innych elementów canvas jako źródła. W rozdziale 36. pokażę Ci, jak rysować bardziej skomplikowane kształty oraz nadawać efekty i przekształcenia.

773

ROZDZIAŁ 35. „ ELEMENT CANVAS. CZĘŚĆ I

Rysunek 35.22. Wykorzystanie jednego płótna jako źródła dla metody drawImage drugiego płótna

774

ROZDZIAŁ 36

Element canvas. Część II W tym rozdziale omówię kolejne funkcje elementu canvas. Pokażę, jak się rysuje bardziej rozbudowane kształty (w tym łuki i krzywe), jak ogranicza się operacje rysowania poprzez zastosowanie obszarów przycinania oraz jak rozrysowuje się tekst. Opiszę również efekty i przekształcenia, których można używać na płótnie, w tym cienie, przezroczystości, obroty i przesunięcia. W tabeli 36.1 znajduje się streszczenie całego rozdziału. Tabela 36.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Narysowanie kształtu ze ścieżek.

Użyj metod beginPath, moveTo, lineTo i — dodatkowo — closePath.

36.1

Określenie stylu zakończeń linii.

Określ właściwość lineCap.

36.2

Rysowanie prostokątów na ścieżkach.

Użyj metody rect.

36.3, 36.4

Narysowanie łuku.

Użyj metod arc i arcTo.

36.5 – 36.7

Narysowanie sześciennej lub kwadratowej krzywej Béziera.

Użyj metod bezierCurveTo i quadraticCurveTo.

36.8 – 36.9

Ograniczenie działania operacji rysowania do określonego obszaru płótna.

Użyj metody clip.

36.10

Narysowanie tekstu na płótnie.

Użyj metody fillText lub strokeText.

36.11

Dodanie cieni do tekstu lub kształtów.

Użyj właściwości cieni.

36.12

Określenie ogólnej wartości przezroczystości.

Użyj właściwości globalAlpha.

36.13

Określenie stylu opozycji.

Użyj właściwości globalCompositeOperation.

36.14

Przekształcenie płótna.

Użyj jednej z metod przekształceń, np. rotate lub scale.

36.15

Rysowanie z użyciem ścieżek Przykłady przedstawione w rozdziale 35. oparte były na funkcji rysowania prostokątów. Prostokąt jest wprawdzie przydatnym kształtem, lecz nie zawsze akurat jego potrzeba. Szczęśliwie, element canvas obsługuje szereg metod, które umożliwiają rysowanie kształtów przy użyciu ścieżek. Ścieżki są zbiorem pojedynczych

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

linii (określanych mianem podścieżek), które składają się razem na kształt. Podścieżki w zasadzie rysuje się tak, jak długopisem po kartce bez odrywania go od niej — każda kolejna podścieżka zaczyna się tam, gdzie ostatnia się skończyła. W tabeli 36.2 widnieją metody służące do rysowania prostych ścieżek. Tabela 36.2. Podstawowe metody służące do rysowania ścieżek Nazwa

Opis

Zwracana wartość

beginPath()

Zaczyna rysowanie nowej ścieżki.

void

closePath()

Zamyka ścieżkę, rysując linię od końca ostatniej podścieżki do współrzędnych punktu początkowego.

void

fill()

Wypełnia określony podścieżkami kształt.

void

isPointInPath(x, y)

Zwraca wartość true, jeśli podany punkt zawarty jest w kształcie określonym ścieżką.

wartość_boolowska

lineTo(x, y)

Rysuje ścieżkę do punktu o podanych współrzędnych.

void

moveTo(x, y)

Przenosi punkt początkowy rysowania do punktu o podanych współrzędnych, bez rysowania podścieżki.

void

rect(x, y, w, h)

Rysuje prostokąt, którego górny lewy róg znajduje się w punkcie (x, y), o szerokości w i wysokości h.

void

stroke()

Rysuje obramowanie kształtu określonego podścieżkami.

void

Podstawowa sekwencja rysowania ścieżki wygląda następująco: • przywołanie metody beginPath, • przeniesienie punktu początkowego metodą moveTo, • rozrysowanie podścieżek metodami w rodzaju arc, lineTo itp., • ewentualne przywołanie metody closePath, • przywołanie metod fill lub stroke. W kolejnych punktach pokażę Ci, jak ta sekwencja wygląda przy zastosowaniu różnych metod rysowania podścieżek.

Rysowanie ścieżek liniami Najbardziej podstawowe ścieżki składają się z linii prostych. W listingu 36.1 widnieje przykład utworzenia takiej ścieżki. Listing 36.1. Utworzenie ścieżki z linii prostych

Przykład



Twoja przeglądarka nie obsługuje elementu canvas

776

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II



W powyższym przykładzie utworzyłem trzy ścieżki. Ich wygląd na płótnie widać na rysunku 36.1.

Rysunek 36.1. Utworzenie prostych ścieżek przy użyciu metody lineTo Pierwszą ścieżkę utworzyłem poprzez narysowanie dwóch linii i zastosowanie metody closePath, która zamyka ścieżkę. Przywołałem następnie metodę fill do wypełnienia kształtu stylem określonym właściwością fillStyle — w tym przykładzie użyłem jednolitego koloru, ale można też skorzystać z gradientów i wzorów opisanych w rozdziale 35. W przypadku drugiego kształtu utworzyłem trzy podścieżki, ale nie zamknąłem kształtu. Jak widać, użyłem zarówno metody fill, jak i stroke, żeby wypełnić kształt kolorem oraz narysować linię na ścieżce. Zauważ, że kolor wypełnienia jest rozrysowywany tak, jakby kształt był zamknięty — element canvas wypełnia kształt, opierając się na hipotetycznej linii ciągnącej się od ostatniego punktu do pierwszego. Z kolei metoda stroke uwzględnia jedynie te ścieżki, które rzeczywiście zostały narysowane.

777

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

„ Wskazówka W przypadku drugiego kształtu metodę fill przywołałem przed stroke, wobec czego kształt najpierw został wypełniony, a dopiero potem obrysowany. Gdyby właściwość lineWidth miała wartość większą niż 1 i gdybyśmy najpierw przywołali metodę stroke, otrzymalibyśmy inny efekt. Szersze linie rozchodzą się na obydwie strony ścieżki, toteż po przywołaniu metody fill część linii zostałaby zakryta, przez co wydawałaby się cieńsza.

W przypadku trzeciego kształtu narysowałem jedynie linię pomiędzy dwoma punktami — ścieżki nie muszą się składać z więcej niż jednej podścieżki. Kiedy rysujemy linie lub tworzymy otwarte kształty, to właściwością lineCap możemy określić styl zakończenia linii. Owa właściwość obsługuje trzy wartości: butt (domyślna), round i square. W listingu 36.2 widnieje przykład zastosowania wszystkich wartości tej właściwości. Listing 36.2. Określenie właściwości lineCap

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Zawarty w tym przykładzie skrypt rozrysowuje bardzo szeroką linię w każdym ze stylów. Dodałem również linię pomocniczą, by pokazać, że przy stylach round i square końcówki rysowane są jako przedłużenie linii, co widać na rysunku 36.2.

778

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Rysunek 36.2. Trzy style lineCap

Rysowanie prostokątów Metoda rect dodaje prostokątne ścieżki do bieżącej ścieżki. Jeśli potrzebny Ci jest osobny prostokąt, to jednak lepiej skorzystaj z opisanych w rozdziale 35. metod fillRect i strokeRect. Metoda rect przydaje się, kiedy trzeba dodać prostokąt do bardziej złożonego kształtu, tak jak widać to w listingu 36.3. Listing 36.3. Rysowanie prostokąta metodą rect

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



779

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Przy korzystaniu z metody rect nie trzeba używać metody moveTo, ponieważ współrzędne prostokąta określamy pierwszymi dwoma argumentami. W listingu zdefiniowałem dwie linie i przywołałem metodę closePath, by utworzyć trójkąt. Następnie narysowałem dwa przylegające do siebie prostokąty. Rezultat widać na rysunku 36.3.

Rysunek 36.3. Zastosowanie metody rect do narysowania prostokątów Podścieżki nie muszą się stykać, żeby wchodzić w skład ścieżki. Nawet oddzielone od siebie ścieżki traktowane są jak składowe jednego kształtu. W listingu 36.4 widnieje przykład. Listing 36.4. Praca z osobnymi podścieżkami ...

...

W tym przykładzie podścieżki nie są ze sobą połączone, a mimo to rezultat traktowany jest jako jedna ścieżka. Kiedy przywołuję metodę stroke lub fill, efekty nadawane są wszystkim podścieżkom, co widać na rysunku 36.4.

Rysowanie łuków Do rysowania łuków na płótnie służą metody arc i arcTo, choć robią to w różny sposób. W tabeli 36.3 widnieje opis tych metod.

780

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Rysunek 36.4. Utworzenie osobnych podścieżek Tabela 36.3. Metody służące do rysowania łuków Nazwa

Opis

Zwracana wartość

arc(x, y, rad, startAngle, endAngle, direction)

Rysuje łuk do punktu (x, y) o promieniu rad, kącie początkowym startAngle i kącie końcowym endAngle. Opcjonalny parametr direction określa kierunek, w jakim łuk jest rysowany.

void

arcTo(x1, y1, x2, y2, rad)

Rysuje łuk do punktu (x2, y2), który przechodzi przez punkt (x1, y2) i ma promień rad.

void

Wykorzystanie metody arcTo W listingu 36.5 widnieje przykład wykorzystania metody arcTo. Listing 36.5. Zastosowanie metody arcTo

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Łuk rysowany metodą arcTo odnosi się do dwóch linii. Pierwsza rozrysowywana jest od końca ostatniej podścieżki do punktu wskazanego pierwszymi dwoma argumentami metody. Druga linia rozrysowywana jest od punktu określonego pierwszymi dwoma argumentami do punktu określonego trzecim i czwartym argumentem. Łuk rysowany jest jako najkrótsza możliwie linia od końca ostatniej podścieżki do drugiego podanego punktu i jest wycinkiem koła o promieniu określonym ostatnim argumentem. Aby to lepiej zobrazować, umieściłem na płótnie kilka dodatkowych ścieżek (rysunek 36.5).

Rysunek 36.5. Zastosowanie metody arcTo Na rysunku widać dwie czerwone linie. Podałem wartość promienia, a obydwie linie są jednakowej długości, wobec czego na płótnie pojawia się łuk, który schludnie przechodzi od ostatniego punktu poprzedniej podścieżki do punktu określonego trzecim i czwartym argumentem metody. Promień i długości linii nie zawsze mają tak wygodnie dobrane długości, wobec czego płótno w razie konieczności modyfikuje rysowany łuk. W ramach przykładu w listingu 36.6 wykorzystuję opisane w rozdziale 30. zdarzenia służące do śledzenia ruchów myszy i rysowania linii łuku z różnych punktów wraz z przesuwaniem się kursora po ekranie. Listing 36.6. Rysowanie łuków w odpowiedzi na ruchy myszą

Przykład

782

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II



Twoja przeglądarka nie obsługuje elementu canvas



Podany w tym przykładzie skrypt przenosi punkty na podstawie tego, który klawisz jest naciśnięty podczas poruszania kursorem. Kiedy naciśnięty jest klawisz Ctrl, przesuwany jest pierwszy punkt (czyli ten, który określa koniec poprzedniej podścieżki). Kiedy naciśnięty jest klawisz Shift, przesuwany jest drugi punkt (czyli ten, który zdefiniowany jest dwoma pierwszymi argumentami metody arcTo). Kiedy żaden nie jest naciśnięty, przesuwany jest trzeci punkt (czyli ten, który zdefiniowany jest trzecim i czwartym argumentem metody). Warto pobawić się tym przykładem, by zobaczyć, jak kształt łuku reaguje na zmiany położenia obydwu linii. Zrzut widać na rysunku 36.6.

Rysunek 36.6. Oddziaływanie linii na łuk

Wykorzystanie metody arc Metoda arc jest nieco łatwiejsza w obsłudze. Pierwsze dwa argumenty tej metody określają pewien punkt na płótnie. Promień łuku definiujemy trzecim argumentem, a następnie określamy początkowy i końcowy kąt łuku. Ostatni argument określa, czy łuk rysowany ma być w kierunku ruchu wskazówek zegara, czy przeciwnym. W listingu 36.7 widnieje kilka przykładów. Listing 36.7. Zastosowanie metody arc

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Utworzone tymi łukami figury widać na rysunku 36.7.

Rysunek 36.7. Zastosowanie metody arc Jak widać po pierwszym i drugim łuku, metody arc można używać do rysowania całych kół i regularnych łuków. Jak jednak widać na przykładzie trzeciej figury, metodą arc można również tworzyć bardziej złożone ścieżki. Kiedy używamy metody arc po narysowaniu podścieżki, to od końcowego punktu tejże podścieżki rozrysowywana jest linia do współrzędnych określonych pierwszymi dwoma argumentami metody arc. Jest ona rozrysowywana poza opisanym powyżej łukiem. Wykorzystałem to zachowanie w połączeniu z pętlą for, aby połączyć cztery małe łuki rozrysowane wokół jednego punktu, tworząc tym samym kształt z rysunku 36.7.

Rysowanie krzywych Béziera Płótno oferuje możliwość rysowania dwóch rodzajów krzywych Béziera: sześciennych i kwadratowych. Z takich krzywych prawdopodobnie miałeś okazję skorzystać w ramach pracy z programem graficznym. Na początku należy wybrać punkt początkowy i końcowy, a następnie dobrać jeden lub więcej punktów kontrolnych, określających kształt krzywej. Problem z rysowaniem krzywych Béziera na płótnie jest taki, że nie mamy żadnego podglądu graficznego, wobec czego trudno uzyskać pożądany kształt. W kolejnych przykładach używam skryptu, który pozwala na uzyskanie jakiegoś oglądu działania tej funkcji, ale już w pracy nad rzeczywistym projektem będziesz musiał poeksperymentować, żeby uzyskać krzywe o odpowiednim kształcie. W tabeli 36.4 widnieją metody służące do rysowania krzywych.

785

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Tabela 36.4. Metody służące do rysowania krzywych Nazwa

Opis

Zwracana wartość

bezierCurveTo(cx1, cy1, cx2, cy2, x, y)

Rysuje krzywą Béziera o punktach kontrolnych (cx1, cy1) i (cx2, cy2) do punktu (x, y).

void

quadraticCurveTo(cx, xy, x, y)

Rysuje kwadratową krzywą Béziera (x, y) o punkcie kontrolnym (cx, cy).

void

Rysowanie sześciennych krzywych Béziera Metoda bezierCurveTo rysuje krzywą od końca poprzedniej podścieżki do punktu określonego piątym i szóstym argumentem. Na kształt krzywej wpływają dwa punkty kontrolne, określone pierwszymi czterema argumentami. W listingu 36.8 widnieje przykład zastosowania tej metody (i kilka dodatkowych ścieżek, które ułatwiają zrozumienie związku między wartościami argumentów a kształtem krzywej). Listing 36.8. Rysowanie kwadratowych krzywych Béziera

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Abyś mógł zrozumieć, na czym polega rysowanie krzywych, skrypt w powyższym przykładzie pozwala na przenoszenie punktów kontrolnych krzywej Béziera kursorem. Kiedy naciśnięty jest przycisk Shift, kursor przesuwa pierwszy punkt kontrolny, a kiedy naciśnięty jest przycisk Ctrl, to kursor przesuwa drugi punkt. Rezultat widać na rysunku 36.8.

Rysunek 36.8. Rozrysowanie sześciennej krzywej Béziera

Rysowanie kwadratowych krzywych Béziera Jako że kwadratowa krzywa Béziera ma tylko jeden punkt kontrolny, to metoda quadraticCurveTo obsługuje o dwa argumenty mniej niż metoda bezierCurveTo. W listingu 36.9 widnieje treść poprzedniego przykładu, dostosowana do potrzeb narysowania krzywej kwadratowej metodą quadraticCurveTo.

787

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Listing 36.9. Narysowanie kwadratowej krzywej Béziera

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Przykładową krzywą widać na rysunku 36.9.

Rysunek 36.9. Kwadratowa krzywa Béziera

Utworzenie obszaru przycinania Jak już pokazałem, metod stroke i fill można użyć do narysowania i wypełnienia ścieżki. Można też jednak skorzystać z innej metody, którą opisuję w tabeli 36.5. Tabela 36.5. Metoda clip Nazwa

Opis

Zwracana wartość

clip()

Tworzy nowy obszar przycinania.

void

Po określeniu obszaru przycinania jedynie te ścieżki, które się w nim znajdują, są wyświetlane na ekranie. W listingu 36.10 widnieje przykład. Listing 36.10. Wykorzystanie obszaru przycinania

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Podany w tym przykładzie skrypt rysuje wypełniający całe płótno prostokąt, tworzy mniejszy obszar przycinania, a następnie rozrysowuje kolejny prostokąt na całe płótno. Jak widać na rysunku 36.10, narysowana została jedynie ta część drugiego prostokąta, która mieści się w obszarze przycinania.

Rysunek 36.10. Rezultat zastosowania obszaru przycinania

Rysowanie tekstu Na płótnie można również rysować tekst, choć obsługa tej funkcji jest mało rozbudowana. W tabeli 36.6 znajduje się opis dostępnych metod. Tabela 36.6. Metody służące do rysowania tekstu Nazwa

Opis

Zwracana wartość

filltext(, x, y, szerokość)

Rysuje podany tekst od punktu (x, y) oraz wypełnia go. Opcjonalny argument szerokości określa górny limit szerokości tekstu.

void

strokeText(, x, y, szerokość)

Rysuje podany tekst od punktu (x, y) oraz obrysowuje go. Opcjonalny argument szerokości określa górny limit szerokości tekstu.

void

Istnieją trzy właściwości stanu rysowania, którymi można określić sposób rysowania tekstu. Ich opis znajduje się w tabeli 36.7.

790

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Tabela 36.7. Właściwości stanu rysowania tekstu Nazwa

Opis

Zwracana wartość

font

Określa font, którym tekst ma być narysowany.

tekst

textAlign

Określa położenie tekstu. Obsługuje wartości start, end, left, right i center.

tekst

textBaseline

Określa linię bazową tekstu. Obsługuje wartości top, hanging, middle, alphabetic, ideographic i bottom.

tekst

W listingu 36.11 widnieje przykład wypełnionego i obrysowanego tekstu. Wartość właściwości font określa się ciągiem znaków o takim samym formacie, jak w przypadku właściwości zbiorczej fonta w CSS, którą opisałem w rozdziale 22. Listing 36.11. Rysowanie tekstu na płótnie

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Tekst został narysowany z użyciem właściwości fillStyle i strokeStyle, które obsługują te same kolory, gradienty i wzory, co kształty. W tym przykładzie wypełniłem i obrysowałem tekst dwoma jednolitymi kolorami. Rezultat widać na rysunku 36.11.

Rysunek 36.11. Wypełnienie i obrysowanie tekstu

791

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Wykorzystanie efektów i przekształceń Płótno obsługuje różne efekty i przekształcenia, które opisuję w kolejnych punktach.

Cienie Rysowanym na płótnie kształtom i tekstom można nadawać cienie przy użyciu czterech właściwości stanu rysowania. Ich opis znajduje się w tabeli 36.8. Tabela 36.8. Właściwości cieni Nazwa

Opis

Zwracana wartość

shadowBlur

Określa stopień rozmycia cienia.

liczba

shadowColor

Określa kolor cienia.

tekst

shadowOffsetX

Określa przesunięcie cienia na osi x.

liczba

shadowOffsetY

Określa przesunięcie cienia na osi y.

liczba

W listingu 36.12 widać, jak nadaje się cienie przy użyciu powyższych właściwości. Listing 36.12. Nadanie cieni kształtom i tekstowi

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



W powyższym przykładzie nadałem cienie tekstowi, prostokątowi, kołu oraz dwóm łukom. Jak widać na rysunku 36.12, cienie te są nadawane niezależnie od tego, czy kształty są zamknięte, otwarte, wypełnione, czy obrysowane.

Rysunek 36.12. Nadawanie cieni tekstowi i kształtom

Przezroczystość Przezroczystość tekstu i kształtów można określić na dwa sposoby. Pierwszy polega na określeniu wartości właściwości fillStyle lub strokeStyle funkcją rgba (w odróżnieniu od rgb), którą opisałem w rozdziale 4. Można też skorzystać z właściwości stanu rysowania globalAlpha, która jest nadawana globalnie. W listingu 36.13 widnieje przykład zastosowania tej ostatniej. Listing 36.13. Zastosowanie właściwości globalAlpha

Przykład



Twoja przeglądarka nie obsługuje elementu canvas



Wartości właściwości globalAlpha zawierają się w przedziale od 0 (całkowitej przezroczystości) do 1 (pełnego krycia, które jest domyślną wartością). W tym przykładzie narysowałem tekst, nadałem właściwości globalAlpha wartość 0.5, a następnie wypełniłem częściowo pokrywający tekst prostokąt. Rezultat widać na rysunku 36.13.

Rysunek 36.13. Określenie przezroczystości właściwością globalAlpha

Kompozycja Przezroczystość można wykorzystywać w połączeniu z właściwością globalCompositeOperation, w ramach określenia sposobu rysowania kształtów i tekstu na płótnie. Właściwość ta obsługuje wartości opisane w tabeli 36.9. W przypadku tej właściwości obrazem źródłowym są wszelkie operacje wykonane po jej zdefiniowaniu, a docelowy obraz jest stanem płótna w chwili jej określenia. Wartości właściwości CompositeOperation tworzą niekiedy uderzające efekty. W listingu 36.14 znajduje się element select, w którym zawarte są wszystkie wartości kompozycji. Warto pobawić się tym przykładem, żeby przekonać się, jak działa każdy tryb kompozycji. Listing 36.14. Zastosowanie właściwości globalCompositeOperation

Przykład



Twoja przeglądarka nie obsługuje elementu canvas

Opcja kompozycji: copy destination-atopdestination-in destination-overdestination-out lightersource-atop source-insource-out

794

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Tabela 36.9. Obsługiwane wartości globalCompositeOperation Wartość

Opis

copy

Rysuje obraz źródłowy nad obrazem docelowym, ignorując przezroczystość.

destination-atop

Tak samo jak source-atop, ale z wykorzystaniem obrazu docelowego zamiast obrazu źródłowego i na odwrót.

destination-in

Tak samo jak source-in, ale z wykorzystaniem obrazu docelowego zamiast obrazu źródłowego i na odwrót.

destination-over

Tak samo jak source-over, ale z wykorzystaniem obrazu docelowego zamiast obrazu źródłowego i na odwrót.

destination-out

Tak samo jak source-out, ale z wykorzystaniem obrazu docelowego zamiast obrazu źródłowego i na odwrót.

lighter

Wyświetla sumę obrazu źródłowego i docelowego, przy czym limit wartości kolorystycznych wynosi ok. 255 (czyli 100%).

source-atop

Wyświetla obraz źródłowy, gdziekolwiek obraz źródłowy i docelowy są nieprzezroczyste. Wyświetla obraz docelowy, gdziekolwiek obraz docelowy jest nieprzezroczysty, a obraz źródłowy jest przezroczysty. Wszędzie indziej wyświetlana jest przezroczystość.

source-in

Wyświetla obraz źródłowy, gdziekolwiek obraz źródłowy i docelowy są nieprzezroczyste. Wszędzie indziej wyświetlana jest przezroczystość.

source-out

Wyświetla obraz źródłowy, gdziekolwiek obraz źródłowy jest nieprzezroczysty, a obraz docelowy jest przezroczysty. Wszędzie indziej wyświetlana jest przezroczystość.

source-over

Wyświetla obraz źródłowy, gdziekolwiek obraz źródłowy jest nieprzezroczysty. Wszędzie indziej wyświetlana jest przezroczystość.

xor

Wyświetla obraz źródłowy i docelowy z wyjątkiem ich części wspólnej. source-overxor



Zastosowanie wartości source-out i destination-over widać na rysunku 36.14. Niektóre przeglądarki interpretują style na nieco inne sposoby, więc na ekranie możesz zobaczyć coś innego, niż widać na poniższym rysunku.

Rysunek 36.14. Zastosowanie właściwości globalCompositeOperation

Przekształcenia Na płótnie można użyć przekształcenia, które odnosi się do kolejnych operacji rysujących. W tabeli 36.10 znajduje się opis metod przekształceń. Tabela 36.10. Metody przekształceń Nazwa

Opis

Zwracana wartość

scale(, )

Skaluje płótno w osi x według wartości skalowanie x i osi y według wartości skalowanie y.

void

rotate()

Obraca płótno w kierunku ruchu wskazówek zegara wokół punktu (0, 0) o określoną liczbę radianów.

void

translate(, )

Przesuwa płótno w osi x według wartości x i osi y według wartości y.

void

transform(a, b, c, d, e, f)

Łączy dokonane przekształcenia z matrycą określoną wartościami a-f.

void

setTransform(a, b, c, d, e, f)

Zastępuje dokonane przekształcenia matrycą określoną wartościami a-f.

void

Wywoływane tymi metodami przekształcenia odnoszą się jedynie do kolejnych operacji rysowania — zawartość, która została już narysowana, pozostaje niezmieniona. W listingu 36.15 widnieje przykład zastosowania metod skalowania, obracania i przesuwania. Listing 36.15. Wykorzystanie przekształceń

Przykład

796

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II



Twoja przeglądarka nie obsługuje elementu canvas



W powyższym przykładzie utworzyłem, wypełniłem i obrysowałem tekst, a następnie zeskalowałem, przesunąłem i obróciłem płótno — te ostatnie czynności wpłynęły na wygląd wypełnionego prostokąta oraz obrysowanego prostokąta, które później narysowałem. Rezultat widać na rysunku 36.15.

Rysunek 36.15. Przekształcenie płótna

797

ROZDZIAŁ 36. „ ELEMENT CANVAS. CZĘŚĆ II

Podsumowanie W tym rozdziale pokazałem, jak rysować na płótnie różnego rodzaju ścieżki — linie, prostokąty, łuki i krzywe. Pokazałem także funkcje rysowania tekstu na płótnie oraz sposoby nadawania efektów w rodzaju cieni i przezroczystości. Zakończyłem, przedstawiając różne obsługiwane przez płótno tryby kompozycji i przekształcenia.

798

ROZDZIAŁ 37

Funkcja przeciągania i upuszczania W HTML5 pojawiła się obsługa przeciągania i upuszczania. Wcześniej można było korzystać z tej funkcji jedynie z pomocą bibliotek JavaScript w rodzaju jQuery. Zaletą wprowadzenia obsługi przeciągania i upuszczania do przeglądarki jest to, że funkcja ta jest odpowiednio zintegrowana z systemem operacyjnym i — jak się przekonasz — działa w wielu przeglądarkach. Funkcja „przeciągnij i upuść” wciąż jest jednak w powijakach, wobec czego istnieje duży rozdźwięk pomiędzy specyfikacją a jej implementacją w popularnych przeglądarkach. Nie wszystkie elementy specyfikacji są obsługiwane we wszystkich przeglądarkach, a działanie niektórych funkcji bywa bardzo zróżnicowane. W tym rozdziale pokażę Ci, jak to działa obecnie. Nie znajdziesz tu pełnej listy funkcji opisanych w standardzie HTML5, ale przedstawione tutaj informacje powinny Ci wystarczyć do pracy. W tabeli 37.1 znajduje się streszczenie całego rozdziału. Tabela 37.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Umożliwienie przeciągania elementu HTML.

Nadaj atrybutowi draggable wartość true.

37.1

Zarządzanie przeciąganiem.

Użyj zdarzeń dragstart, drag i dragend.

37.2

Utworzenie obszaru docelowego przeciągania.

Użyj zdarzeń dragenter i dragover.

37.3

Zamieszczenie przeciągniętego elementu w obszarze docelowym.

Użyj zdarzenia drop.

37.4

Przeniesienie danych z upuszczonego elementu do obszaru docelowego.

Użyj obiektu DataTransfer.

37.5

Filtrowanie elementów według treści.

Użyj metody getData obiektu DataTransfer.

37.6

Użyj właściwości files obiektu

37.7

Przetworzenie plików przeciągniętych z systemu operacyjnego do obszaru docelowego.

DataTransfer.

Wczytanie plików przeciągniętych z systemu operacyjnego do obszaru docelowego w ramach wysyłania formularza Ajax.

Użyj metody append obiektu FormData, przekazując obiekt File jako drugi argument.

37.8

Tworzenie elementów źródłowych To, które elementy dokumentu można przeciągnąć, wskazujemy przeglądarce atrybutem draggable, który obsługuje trzy wartości opisane w tabeli 37.2.

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

Tabela 37.2. Wartości atrybutu draggable Wartość

Opis

true

Można przeciągnąć element.

false

Nie można przeciągnąć elementu.

auto

Przeglądarka sama decyduje, czy można przeciągnąć element.

Domyślna wartość to auto, która pozostawia decyzję przeglądarce. Wtedy zazwyczaj wszystkie elementy można przeciągać, wobec czego konieczne jest nadanie atrybutowi draggable wartości false ręcznie, by zdezaktywować przeciąganie. Kiedy korzystam z funkcji „przeciągnij i upuść”, przeważnie samodzielnie nadaję atrybutowi draggable wartość true, pomimo że przeglądarki domyślnie pozwalają na przeciąganie wszystkich elementów. W listingu 37.1 widnieje prosty dokument HTML z elementami, które można przeciągać. Listing 37.1. Określenie elementów, które można przeciągać

Przykład

Przeciągnij

W powyższym przykładzie widnieją trzy elementy img z atrybutami draggable o wartości true. Utworzyłem również element div z atrybutem id o wartości target, który wkrótce uczynimy obszarem docelowym przeciąganych elementów img. Wygląd dokumentu w przeglądarce widać na rysunku 37.1. Same obrazki owoców możemy już przeciągać, lecz przeglądarka wskazuje, że nie można ich nigdzie upuścić. W takich sytuacjach kursor zwykle zmienia się w znak zakazu, tak jak na rysunku 37.2.

Obsługa zdarzeń przeciągania Funkcję przeciągania i upuszczania obsługuje się z pomocą serii zdarzeń. Zdarzenia te odnoszą się do przeciąganego elementu oraz potencjalnych obszarów docelowych. W tabeli 37.3 znajduje się opis zdarzeń odnoszących się do przeciąganego elementu.

800

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

Rysunek 37.1. Trzy obrazy z aktywnym przeciąganiem oraz obszar docelowy

Rysunek 37.2. Przeglądarka wskazuje, że przeciągniętego elementu nie można upuścić Tabela 37.3. Zdarzenia odnoszące się do przeciąganych elementów Nazwa

Opis

dragstart

Wyzwalane przy rozpoczęciu przeciągania.

drag

Wyzwalane cyklicznie podczas przeciągania elementu.

dragend

Wyzwalane po zakończeniu przeciągania.

Powyższych zdarzeń można użyć do graficznego wyróżnienia przeciąganych elementów, tak jak w listingu 37.2. Listing 37.2. Wykorzystanie zdarzeń odnoszących się do przeciąganych elementów

Przykład



801

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

Przeciągnij

Zdefiniowałem nowy styl CSS, który przypisałem elementom należącym do klasy dragged. Przeciągany element przypisuję do tej klasy w ramach zdarzenia dragstart, a usuwam go z niej przy zdarzeniu dragend. W odpowiedzi na zdarzenie drag zmieniam tekst w obszarze docelowym na wartość id przeciąganego elementu. Zdarzenie drag przywoływane jest co kilka milisekund podczas przeciągania, więc nie jest to wprawdzie najefektywniejsza metoda, ale przynajmniej pozwala na zademonstrowanie tego zdarzenia w działaniu. Rezultat widać na rysunku 37.3. Zauważ, że wciąż nie mamy działającego obszaru docelowego, ale jednak poczyniliśmy już pewne postępy.

Rysunek 37.3. Wykorzystanie zdarzeń dragstart, dragend i drag

Utworzenie obszaru docelowego Aby utworzyć obszar docelowy, musimy skorzystać ze zdarzeń dragenter i dragover. Te dwa zdarzenia odnoszą się właśnie do owego obszaru. W tabeli 37.4 znajduje się opis wszystkich takich zdarzeń.

802

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

Tabela 37.4. Zdarzenia odnoszące się do obszaru docelowego Nazwa

Opis

dragenter

Wyzwalane, kiedy przeciągany element wchodzi na obszar docelowy.

dragover

Wyzwalane, kiedy przeciągany element porusza się po obszarze docelowym.

dragleave

Wyzwalane, kiedy przeciągany element opuszcza obszar docelowy.

drop

Wyzwalane, kiedy przeciągany element zostaje upuszczony w obszarze docelowym.

Zdarzenia dragenter i dragover domyślnie odmawiają przyjęcia przeciąganego elementu, toteż koniecznie trzeba zdezaktywować ich domyślne zachowanie. Przykład widnieje w listingu 37.3. Listing 37.3. Utworzenie obszaru docelowego przy użyciu zdarzeń dragenter i dragover

Przykład

Przeciągnij

„ Uwaga Według specyfikacji funkcji przeciągania i upuszczania konieczne jest również nadanie atrybutu dropzone elementowi, który chcemy przekształcić w obszar docelowy. Atrybut ten powinien mieć wartość opisującą dopuszczalne czynności i typy danych. W rzeczywistości przeglądarki obsługują tę funkcję zupełnie inaczej, wobec czego nie opisuję w tym rozdziale działania funkcji według specyfikacji, lecz to, jak naprawdę działa.

Dzięki tym poprawkom uzyskaliśmy działający obszar docelowy. Po przeciągnięciu elementu nad obszar docelowy przeglądarka wskazuje, że zostanie on zaakceptowany po upuszczeniu, tak jak widać to na rysunku 37.4.

Rysunek 37.4. Przeglądarka wskazuje, że element można upuścić

Przyjmowanie upuszczonych treści Przyjmowanie upuszczonego elementu obsługuje się zdarzeniem drop, które jest wyzwalane przy upuszczeniu przeciąganego elementu na element obszaru docelowego. W listingu 37.4 widnieje przykład obsłużenia zdarzenia drop przy użyciu globalnej zmiennej jako łącznika pomiędzy przeciąganym elementem a obszarem docelowym. Listing 37.4. Obsługa zdarzenia drop

Przykład



804

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

Przeciągnij

Wartość zmiennej draggedID definiowana jest przy wyzwoleniu zdarzenia dragstart. Pozwala mi to na sprawdzanie wartości atrybutu id przeciąganego elementu. Po wyzwoleniu zdarzenia drop wykorzystuję tę wartość do powielenia przeciągniętego elementu img i przypisania go elementowi obszaru docelowego jako dziecka. „ Wskazówka W tym przykładzie zdezaktywowałem domyślne działanie zdarzenia drop. Gdyby nie to, przeglądarka mogłaby wykonać pewne dość nieoczekiwane czynności. Firefox na przykład wyłączyłby stronę i wyświetlił obraz podany w atrybucie src przeciąganego elementu img.

Rezultat widać na rysunku 37.5.

805

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

Rysunek 37.5. Reakcja na zdarzenie drag

Praca z obiektem DataTransfer DragEvent — który wywodzi się ze zdarzenia MouseEvent — jest obiektem przywoływanym przy zdarzeniach przeciągania i upuszczania. Obiekt DragEvent obsługuje wszelkie funkcje obiektów Event i MouseEvent

(które opisałem w rozdziale 30.) oraz dodatkową właściwość opisaną w tabeli 37.5. Tabela 37.5. Właściwość obsługiwana przez obiekt DragEvent Nazwa

Opis

Zwracana wartość

dataTransfer

Zwraca obiekt służący do przekazywania danych obszarowi docelowemu.

DataTransfer

Obiekt DataTransfer służy do przekazywania wybranych danych z przeciąganego elementu do elementu obszaru docelowego. Właściwości i metody obsługiwane przez obiekt DataTransfer opisane są w tabeli 37.6. Tabela 37.6. Właściwości obsługiwane przez obiekt DataTransfer Nazwa

Opis

Zwracana wartość

types

Zwraca formaty danych.

tekst[]

getData()

Zwraca dane podanego formatu.

tekst

setData(, )

Definiuje dane określonego formatu.

void

clearData()

Usuwa dane podanego formatu.

void

files

Zwraca listę przeciągniętych plików.

FileList

W poprzednim przykładzie sklonowałem sam element. Obiekt DataTransfer pozwala jednak na przyjęcie bardziej złożonego podejścia. Obiektu DataTransfer można przede wszystkim użyć do przeniesienia danych z przeciąganego elementu do obszaru docelowego, tak jak widać to w listingu 37.5. Listing 37.5. Wykorzystanie obiektu DataTransfer do przenoszenia danych

Przykład

806

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

Przeciągnij

Przy reagowaniu na zdarzenie dragstart użyłem metody setData do podania danych, które chcę przenieść. Pierwszy argument, który określa typ danych, obsługuje jedynie dwie wartości — Text i Url (przy czym przeglądarki spójnie obsługują tylko Text). Drugi argument określa dane do przekazania — w tym wypadku jest to atrybut id przeciąganego elementu. Do pobrania wartości używam metody getData, podając jako argument typ danych.

807

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

Być może zastanawiasz się, dlaczego lepiej przyjąć to podejście, niż zwyczajnie skorzystać z globalnej zmiennej. Otóż działa ono w różnych przeglądarkach. Nie chodzi mi tu o spójność działania w obrębie okien i zakładek jednej przeglądarki, lecz rzeczywiście pomiędzy różnymi przeglądarkami. Oznacza to, że mogę przeciągnąć element z dokumentu w Chrome i upuścić go w dokumencie w Firefoksie, ponieważ przeglądarkowa funkcja „przeciągnij i upuść” zintegrowana jest ze swoim systemowym odpowiednikiem. Możesz napisać słowo banana w edytorze tekstu, a następnie zaznaczyć je i przeciągnąć do obszaru docelowego przeglądarki — wyświetli się wtedy obrazek z bananem, tak samo, jak gdybyś przeciągnął któryś z elementów img w przykładowym dokumencie.

Filtrowanie przeciąganych elementów według treści Dane zawarte w obiekcie DataTransfer możemy wykorzystać przy określaniu rodzajów elementów, które mają być przyjmowane przez obszar docelowy. W listingu 37.6 widnieje tego przykład. Listing 37.6. Wykorzystanie obiektu DataTransfer do filtrowania przeciąganych elementów ...

...

W tym przykładzie pobrałem i sprawdziłem wartość danych z obiektu DataTransfer. Wskazałem, że jestem gotów przyjąć wyłącznie przeciągane elementy o wartości banana. Przez filtr nie przechodzą zatem obrazki jabłka i wiśni — gdyby użytkownik przeciągnął je na obszar docelowy, to przeglądarka wskazałaby, że nie można ich upuścić.

808

ROZDZIAŁ 37. „ FUNKCJA PRZECIĄGANIA I UPUSZCZANIA

„ Wskazówka Ten sposób filtrowania nie działa w Chrome, jako że metoda getData nie działa, kiedy przywołuje się ją w procedurze obsługi zdarzeń dragenter i dragover.

Przeciąganie i upuszczanie plików Przeglądarki obsługują jeszcze jedną nową funkcję HTML5 — File API — która umożliwia pracę z plikami na komputerze lokalnym, choć w bardzo szczegółowo ograniczony sposób. Ograniczenie częściowo wynika z tego, że zazwyczaj nie posługujemy się File API bezpośrednio, lecz przy użyciu innych funkcji, w tym przeciągania i upuszczania. W listingu 37.7 widać przykład wykorzystania File API do określenia, jak przeglądarka ma reagować, gdy użytkownik przeciągnie plik z systemu operacyjnego do obszaru docelowego. Listing 37.7. Obsługa plików

Przykład

Upuść pliki tutaj

Kiedy użytkownik upuszcza plik w obszarze docelowym, właściwość files obiektu DataTransfer zwraca obiekt FileList. Możemy go potraktować jako tablicę obiektów File, reprezentujących upuszczone przez użytkownika pliki (użytkownik może zresztą zaznaczyć kilka plików i upuścić je za jednym zamachem). W tabeli 37.7 znajduje się opis właściwości obiektu File. Tabela 37.7. Właściwości obsługiwane przez obiekt File Nazwa

Opis

Zwracana wartość

name

Pobiera nazwę pliku.

tekst

type

Pobiera typ pliku wyrażony jako typ MIME.

tekst

size

Pobiera rozmiar pliku (w bajtach).

liczba

Skrypt z powyższego przykładu wylicza pliki upuszczane w obszarze docelowym i wyświetla wartości właściwości File w tabeli. Rezultat widać na rysunku 37.6, gdzie w obszarze docelowym upuściłem kilka przykładowych plików.

Rysunek 37.6. Wyświetlanie danych o plikach

Wczytywanie upuszczonych plików do formularza Funkcję „przeciągnij i upuść”, File API i wczytywania danych można połączyć, używając żądania Ajaksa, aby pozwolić użytkownikom na przeciąganie plików z systemu operacyjnego do formularza. W listingu 37.8 widnieje przykład. Listing 37.8. Połączenie funkcji „przeciągnij i upuść”, File API i obiektu FormData

Przykład



Banany:

Jabłka:

Wiśnie:

Plik:

Razem: 0 items

Przeciągnij pliki

Wyślij formularz



W powyższym przykładzie dodałem pole docelowe do przykładowego dokumentu z rozdziału 33., w którym zademonstrowałem wykorzystanie obiektu FormData do wczytywania danych formularza na serwer. Pliki upuszczane w obszarze docelowym możemy włączyć do formularza przy użyciu metody FormData.append, podając obiekt File jako drugi jej argument. Po wysłaniu formularza treść plików jest automatycznie wczytywana na serwer w ramach żądania.

Podsumowanie W tym rozdziale omówiłem obsługę przeciągania i upuszczania elementów. Implementacja tej funkcji pozostawia wiele do życzenia, lecz sama funkcja wygląda obiecująco i spodziewam się, że nie minie dużo czasu, nim popularne przeglądarki ustosunkują się do różnych niespójności. Jeżeli jednak nie chcesz na to czekać (albo w ogóle nie zależy Ci na przeciąganiu danych między przeglądarkami i systemem operacyjnym), to rozważ skorzystanie z biblioteki JavaScript w rodzaju jQuery czy jQuery UI.

812

ROZDZIAŁ 38

Geolokalizacja

Geolocation API umożliwia pozyskiwanie danych o bieżącym położeniu geograficznym użytkownika czy położeniu systemu, w którym włączona jest przeglądarka. Nie jest to część specyfikacji HTML5, ale geolokalizacja uznawana jest za jedną z nowych funkcji, które HTML5 zapewnia. W tabeli 38.1 znajduje się streszczenie rozdziału. Tabela 38.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Pobranie informacji o bieżącym położeniu.

Użyj metody getCurrentPosition, podając funkcję do przywołania, gdy dostępne będą dane o lokalizacji.

38.1

Obsługa błędów geolokalizacji.

Podaj metodzie getCurrentPosition drugi argument, określający funkcję przywoływaną w przypadku błędu.

38.2

Zdefiniowanie opcji żądań geolokalizacyjnych.

Podaj metodzie getCurrentPosition drugi argument, określający wymagane opcje.

38.3

Sprawdzanie położenia na bieżąco.

Użyj metod watchPosition i clearWatch.

38.4

Wykorzystanie geolokalizacji Funkcji geolokalizacji używa się przy pomocy globalnej właściwości navigator.geolocation, która zwraca obiekt Geolocation. Jego metody opisane są w tabeli 38.2. Tabela 38.2. Obiekt Geolocation Nazwa

Opis

Zwracana wartość

getCurrentPosition(callback, errorCallback, options)

Pobiera bieżącą lokalizację.

void

watchPosition(callback, error, options)

Rozpoczyna monitorowanie bieżącej lokalizacji.

liczba

clearWatch(id)

Kończy monitorowanie bieżącej lokalizacji.

void

Pobranie informacji o bieżącej lokalizacji Metoda getCurrentPosition pobiera informację o bieżącej lokalizacji, choć informacja ta nie jest sama zwracana przez tę metodę. Zamiast tego należy utworzyć funkcję zwrotną, przywoływaną, kiedy dane

ROZDZIAŁ 38. „ GEOLOKALIZACJA

o lokalizacji są dostępne — uwzględnia to sytuację, w której może następować opóźnienie między wydaniem żądania a pojawieniem się informacji. W listingu 38.1 widnieje przykład pobrania informacji o lokalizacji przy użyciu tej metody. Listing 38.1. Pozyskanie danych o bieżącej lokalizacji

Przykład

Długość geograficzna:	-	Szerokość geograficzna:	-
Wysokość:	-	Dokładność:	-
Dokładność wysokości:	-	Kierunek:	-
Prędkość:	-	Czas:	-

W powyższym skrypcie przywołano metodę getCurrentPosition, podając funkcję displayPosition jako jej argument. Kiedy dane o lokalizacji są dostępne, wymieniona funkcja zostaje przywołana, a przeglądarka przekazuje obiekt Position, który podaje informacje o pozycji — szczegóły wyświetlane są w komórkach elementu table. Obiekt Position jest dość nieskomplikowany, co widać w tabeli 38.3. Bardzo ciekawy jest tu obiekt Coordinates, zwracany przez właściwość Position.coords. W tabeli 38.4 znajduje się opis właściwości obiektu Coordinates.

814

ROZDZIAŁ 38. „ GEOLOKALIZACJA

Tabela 38.3. Obiekt Position Nazwa

Opis

Zwracana wartość

coords

Zwraca współrzędne bieżącej lokalizacji.

Coordinates

timestamp

Zwraca czas, w którym pozyskano współrzędne.

tekst

Tabela 38.4. Obiekt Coordinates Nazwa

Opis

Zwracana wartość

latitude

Zwraca szerokość geograficzną w stopniach dziesiętnych.

liczba

longtitude

Zwraca długość geograficzną w stopniach dziesiętnych.

liczba

altitude

Zwraca wysokość w metrach.

liczba

accuracy

Zwraca dokładność współrzędnych w metrach.

liczba

altitudeAccuracy

Zwraca dokładność wysokości w metrach.

liczba

heading

Zwraca kierunek ruchu w stopniach.

liczba

speed

Zwraca prędkość ruchu w metrach na sekundę.

liczba

Nie wszystkie wartości danych obiektu Coordinates są stale dostępne. Sposób, w jaki przeglądarka pozyskuje dane o lokalizacji, nie jest jednoznacznie określony, wobec czego istnieją różne techniki. Urządzenia przenośne coraz częściej wyposażone są w systemy GPS, przyspieszeniomierze i kompasy, dzięki czemu dostępne są na nich najdokładniejsze i najpełniejsze dane. Informacje o lokalizacji można też pobierać na innych urządzeniach — geolokalizacja w przeglądarkach opiera się na danych o sieci. Jeżeli komputer ma adapter Wi-Fi, to znajdujące się w zasięgu sieci są porównywane z katalogiem sieci stworzonym w toku badań prowadzonych w ramach tworzenia wizualizacji ulicznych typu Google Street View. W przypadku braku sieci Wi-Fi ogólne rozeznanie co do lokalizacji można uzyskać na podstawie podanego przez dostawcę usługi internetowej adresu IP. Dokładność informacji o lokalizacji opartych na danych o sieci bywa różna — w tym także zaskakująco trafna. Przy testowaniu tej funkcji zdziwiłem się, jak szczegółowo została wskazana moja lokalizacja. Wręcz tak dokładnie, że na zrzutach zamieściłem dane geolokalizacyjne Empire State Building. Gdybyś miał moje prawdziwe dane geolokalizacyjne, wyliczone na podstawie mojej sieci Wi-Fi i pobliskich sieci, to bez problemu znalazłbyś mój dom i zdjęcia mojego samochodu na podjeździe. To dość niepokojące i dlatego właśnie wszystkie przeglądarki pytają użytkownika o pozwolenie na pobranie takich danych, gdy otwierają dokument wykorzystujący funkcję geolokalizacji. Na rysunku 38.1 widać, jak to wygląda w Chrome.

Rysunek 38.1. Udzielanie zgody na skorzystanie z funkcji geolokalizacji Kiedy użytkownik potwierdza żądanie, informacje o lokalizacji zostają pozyskane. Gdy są już dostępne, przywołana zostaje funkcja zwrotna. Dane dostępne na moim komputerze widać na rysunku 38.2. 815

ROZDZIAŁ 38. „ GEOLOKALIZACJA

Rysunek 38.2. Informacje o położeniu uzyskane przy użyciu funkcji geolokalizacji Komputer, na którym piszę książki, nie jest wyposażony w jakikolwiek specjalistyczny sprzęt geolokalizacyjny — nie ma GPS, kompasu, wysokościomierza czy akcelerometru. Z tego względu dostępne są tylko dane o szerokości i długości geograficznej oraz dokładności ich wartości. Chrome ocenia, że znajduję się w promieniu 69 metrów od podanego miejsca — rzeczywiście jednak jestem trochę dalej. „ Wskazówka Chrome, Firefox i Opera używają funkcji geolokalizacji Google’a. Internet Explorer i Safari mają własne funkcje. Sam mogę wypowiedzieć się tylko o własnym położeniu, ale o ile funkcja Microsoftu rzekomo podaje dane z dokładnością do 48 tysięcy metrów, to w moim wypadku była to dokładność do ok. 5 kilometrów. Funkcja Apple’a działa teoretycznie z dokładnością do 500 metrów, ale to ona podała najlepsze wartości, wskazując moje położenie z dokładnością do paru metrów. Nieźle!

Obsługa błędów funkcji geolokalizacji Metodzie getCurrentPosition możemy przypisać drugi argument, który pozwala na utworzenie funkcji przywoływanej w razie wystąpienia błędu przy pozyskiwaniu informacji o położeniu. Funkcji tej używa się przy pomocy obiektu PositionError, który obsługuje właściwości opisane w tabeli 38.5. Tabela 38.5. Obiekt PositionError Nazwa

Opis

Zwracana wartość

code

Zwraca kod, który wskazuje rodzaj błędu.

liczba

message

Zwraca ciąg znaków, który opisuje błąd.

tekst

Właściwość code może mieć trzy różne wartości, które są opisane w tabeli 38.6. Tabela 38.6. Wartości właściwości PositionError.code Wartość

Opis

1

Użytkownik nie pozwolił na użycie funkcji geolokalizacji.

2

Określenie lokalizacji okazało się niemożliwe.

3

Skończył się czas oczekiwania żądania. W listingu 38.2 widnieje przykład pozyskiwania informacji o błędach przy użyciu obiektu PositionError.

816

ROZDZIAŁ 38. „ GEOLOKALIZACJA

Listing 38.2. Obsługa błędów przy użyciu obiektu PositionError

Przykład

Długość geograficzna:	-	Szerokość geograficzna:	-
Wysokość:	-	Dokładność:	-
Dokładność wysokości:	-	Kierunek:	-
Prędkość:	-	Czas:	-
Kod błędu:	-	Komunikat błędu:	-

817

ROZDZIAŁ 38. „ GEOLOKALIZACJA

Błąd najprościej wywołać, odmawiając przeglądarce pozwolenia na uruchomienie geolokalizacji. Zawarty w tym przykładzie skrypt wyświetla szczegóły o błędzie w elemencie table — rezultat widać na rysunku 38.3.

Rysunek 38.3. Wyświetlanie szczegółów o błędzie geolokalizacji

Definiowanie opcji geolokalizacji Metodzie getCurrentPosition można też podać trzeci argument — obiekt PositionOptions. Funkcja ta pozwala na określenie w jakimś stopniu sposobu, w jaki dane o lokalizacji mają być pozyskiwane. W tabeli 38.7 widnieją właściwości obsługiwane przez ten obiekt. Tabela 38.7. Obiekt PositionOptions Nazwa

Opis

Zwracana wartość

enableHighAccuracy

Wskazuje przeglądarce, że pożądany jest możliwie najlepszy rezultat.

wartość_boolowska

timeout

Określa limit czasowy wykonywania żądania (w milisekundach), po którym pojawia się komunikat o upłynięciu czasu.

liczba

maximumAge

Wskazuje przeglądarce, że akceptowalna jest lokalizacja zapisana w buforze, o ile nie została zapisana wcześniej niż przed podaną liczbą milisekund.

liczba

Nadanie właściwości highAccuracy wartości true jedynie wskazuje przeglądarce, by podała możliwie najlepszy rezultat, lecz nie gwarantuje, że wskazana zostanie dokładniejsza lokalizacja. W przypadku urządzeń przenośnych dokładniejsze wskazanie lokalizacji może być możliwe po wyłączeniu trybu oszczędzania baterii lub — niekiedy — włączeniu funkcji GPS. Mniej dokładne informacje geolokalizacyjne pobiera się przez Wi-Fi bądź z danych stacji przekaźnikowej. W listingu 38.3 widnieje przykład zastosowania obiektu PositionOptions do wydania żądania lokalizacji. Listing 38.3. Zdefiniowanie opcji żądania danych lokalizacji

Przykład

Długość geograficzna:	-	Szerokość geograficzna:	-
Wysokość:	-	Dokładność:	-
Dokładność wysokości:	-	Kierunek:	-
Prędkość:	-	Czas:	-
Kod błędu:	-	Komunikat błędu:	-

819

ROZDZIAŁ 38. „ GEOLOKALIZACJA

Co ciekawe, nie tworzymy tutaj nowego obiektu PositionOptions, lecz zwyczajny obiekt Object o właściwościach odpowiadających właściwościom tabeli. W tym przykładzie wskazałem, że nie wymagam podania najlepszego rezultatu, jestem gotów poczekać dwie sekundy na upływ czasu żądania oraz mogę przyjąć dane lokalizacji zapisane w buforze w ciągu ostatnich trzydziestu sekund.

Śledzenie lokalizacji Aktualizacje danych o lokalizacji można uzyskiwać z pomocą metody watchPosition. Wykorzystuje ona te same argumenty co metoda getCurrentPosition i działa tak samo z taką różnicą, że funkcje zwrotne są ciągle przywoływane wraz ze zmianą położenia. W listingu 38.4 widnieje przykład zastosowania metody watchPosition. Listing 38.4. Zastosowanie metody watchPosition

Przykład

Długość geograficzna:	-	Szerokość geograficzna:	-
Wysokość:	-	Dokładność:	-
Dokładność wysokości:	-	Kierunek:	-
Prędkość:	-	Czas:	-
Kod błędu:	-	Komunikat błędu:	-

Przerwij aktualizację



Podany w tym przykładzie skrypt śledzi bieżącą lokalizację przy użyciu metody watchPosition. Owa metoda zwraca wartość ID, którą można przekazać metodzie clearWatch, kiedy chce się przestać śledzić lokalizację. W tym wypadku dzieje się to po naciśnięciu elementu button. „ Ostrzeżenie Obecne wersje popularnych przeglądarek nie obsługują metody watchPosition za dobrze, a zaktualizowane dane o lokalizacji nie zawsze są właściwe. Lepszym sposobem może być użycie licznika (opisanego w rozdziale 27.) i okresowe przywoływanie metody getCurrentPosition.

Podsumowanie W tym rozdziale opisałem Geolocation API, które podaje informacje o bieżącej lokalizacji urządzenia, na którym działa przeglądarka. Objaśniłem, że mechanizm pozyskiwania danych lokalizacji różni się w zależności od przeglądarki i że urządzenie nie musi być wyposażone w GPS, żeby możliwe było korzystanie z usług geolokalizacyjnych.

821

ROZDZIAŁ 38. „ GEOLOKALIZACJA

822

ROZDZIAŁ 39

Magazynowanie danych

Magazyn danych pozwala na zachowywanie w przeglądarce prostych danych o kluczach i wartościach. W działaniu przypomina ciasteczka, lecz jego implementacja jest lepsza, a ponadto umożliwia przechowywanie większych ilości danych. Istnieją dwa rodzaje magazynów — lokalny i sesji. Obydwa opierają się na tym samym mechanizmie, lecz różnią się pod względem widoczności danych i czasu ich przechowywania. W tabeli 39.1 znajduje się streszczenie całego rozdziału. Tabela 39.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Przechowanie trwałych danych w przeglądarce.

Użyj właściwości localStorage do uzyskania obiektu Storage.

39.1

Śledzenie zmian w magazynie wywołanych przez inne dokumenty z tego samego źródła.

Obsłuż zdarzenie storage.

39.2

Przechowanie tymczasowych danych w przeglądarce.

Użyj właściwości sessionStorage do uzyskania obiektu Storage.

39.3

Śledzenie zmian w magazynie w głównym kontekście przeglądania.

Obsłuż zdarzenie storage.

39.4

„ Wskazówka Istnieje też magazyn Indexed Database API, który pozwala na przechowywanie bogatych danych oraz wykonywanie kwerend typu SQL. Kiedy jednak piszę te słowa, owa specyfikacja wciąż się kształtuje, a jej obsługa w przeglądarkach jest niestabilna i w fazie eksperymentów.

Magazyn lokalny Funkcji magazynu lokalnego używa się z pomocą właściwości globalnej localStorage, która zwraca opisany w tabeli 39.2 obiekt Storage. Obiekt ten służy do przechowywania par ciągów znakowych klucz-wartość. Obiekt Storage pozwala na przechowywanie par kluczy i wartości w postaci ciągów znakowych. Klucze nie mogą się powtarzać, wobec czego zastosowanie metody setItem z kluczem istniejącym już w obiekcie Storage skutkuje aktualizacją jego wartości. W listingu 39.1 widnieje przykład dodawania, modyfikowania i usuwania danych z magazynu lokalnego.

ROZDZIAŁ 39. „ MAGAZYNOWANIE DANYCH

Tabela 39.2. Obiekt Storage Nazwa

Opis

Zwracana wartość

clear()

Usuwa zapisane pary kluczy i wartości.

void

getItem()

Zwraca wartość podaną dla danego klucza.

tekst

key()

Zwraca klucz znajdujący się na określonej pozycji indeksowej.

tekst

length

Zwraca liczbę zapisanych par kluczy i wartości.

liczba

removeItem()

Usuwa parę kluczy i wartości, zawierającą podany klucz.

tekst

setItem(, )

Dodaje nową parę kluczy i wartości bądź aktualizuje wartość, jeśli podany klucz już istnieje.

void

[]

Pozwala na pobranie wartości przypisanej danemu kluczowi za pośrednictwem tablicy.

tekst

Listing 39.1. Praca z magazynem lokalnym

Przykład



Klucz: Wartość:

Dodaj Usuń

Zapisano elementów

Zapisanych elementów:	-

W tym przykładzie sprawdzam liczbę elementów zapisanych w magazynie lokalnym oraz wyliczam zbiór zapisanych par nazw i wartości w tabeli. Wprowadziłem dwa elementy input, których treść zapisywana jest w magazynie po naciśnięciu przycisku Dodaj. Z kolei po naciśnięciu przycisku Usuń zawartość magazynu lokalnego jest usuwana. Rezultat widać na rysunku 39.1.

Rysunek 39.1. Praca z magazynem lokalnym Przeglądarka nie usunie danych dodanych z użyciem obiektu localStorage, dopóki użytkownik nie wyczyści danych przeglądania. (Specyfikacja pozwala również na usuwanie danych ze względu na bezpieczeństwo, ale nie jest określone, jakie właściwie problemy z bezpieczeństwem miałyby wymuszać usuwanie danych lokalnych).

825

ROZDZIAŁ 39. „ MAGAZYNOWANIE DANYCH

Nasłuchiwanie zdarzeń magazynowania Dane zapisane w magazynie lokalnym są dostępne dla każdego dokumentu z tego samego źródła. Kiedy jakiś dokument wprowadza zmianę w magazynie lokalnym, wyzwalane jest zdarzenie storage, którego można nasłuchiwać w innych dokumentach z tego samego źródła, by na bieżąco śledzić zmiany. Zdarzenie storage tworzy obiekt StorageEvent, którego składowe opisane są w tabeli 39.3. Tabela 39.3. Obiekt StorageEvent Nazwa

Opis

Zwracana wartość

key

Zwraca klucz, który zmodyfikowano.

tekst

oldValue

Zwraca poprzednią wartość klucza.

tekst

newValue

Zwraca nową wartość klucza.

tekst

url

Zwraca adres URL dokumentu, który wprowadził zmianę.

tekst

storageArea

Zwraca obiekt Storage, który uległ zmianie.

Storage

W listingu 39.2 widnieje dokument storage.html, który nasłuchuje i kataloguje zdarzenia wydane przez obiekt magazynu lokalnego. Listing 39.2. Katalogowanie zdarzeń magazynu lokalnego

Magazyn

key	oldValue	newValue	url	storageArea

826

ROZDZIAŁ 39. „ MAGAZYNOWANIE DANYCH

Zdarzenie storage wyzwalane jest przez obiekt Window dowolnego dokumentu korzystającego z magazynu, w którym zaszła zmiana. W tym przykładzie do elementu table wstawiam nowy rząd przy każdym przechwyceniu zdarzenia — rezultat widać na rysunku 39.2.

Rysunek 39.2. Wyświetlanie szczegółów zdarzeń magazynowania Na rysunku widać zdarzenia dodawania nowych elementów do magazynu lokalnego. Sekwencja jest następująca: • Dodanie nowej pary: Banan/Żółty. • Dodanie nowej pary: Jabłko/Czerwony. • Aktualizacja wartości związanej z Jabłko na Zielony. • Dodanie nowej pary: Wiśnia/Czerwony. • Naciśnięcie przycisku Usuń (który przywołuje metodę clear). Jak widać, wartość null pojawia się wtedy, kiedy zdarzeniu nie można przypisać określonej wartości. Przykładowo, kiedy dodałem do magazynu nowy element, właściwość oldValue zwróciła wartość null. W ostatnim zdarzeniu właściwości key, oldValue i newValue mają wartość null. Jest to zdarzenie wyzwolone po przywołaniu metody clear, która usuwa wszystkie znajdujące się w magazynie elementy. Właściwość url wskazuje, który dokument wprowadził zmianę. Właściwość storageArea zwraca obiekt Storage, który uległ zmianie — może to być zarówno obiekt magazynu lokalnego, jak i sesji (który już wkrótce omówię). W tym przykładzie nasłuchiwaliśmy jedynie zdarzeń obiektu magazynu lokalnego. „ Uwaga Zdarzenia nie są dystrybuowane w dokumencie, który wprowadził zmianę. Zapewne zakłada się, że już wiemy, co się zdarzyło. Zdarzenia są zatem dostępne jedynie w innych dokumentach z tego samego źródła.

Magazyn sesji Magazyn sesji działa tak samo jak magazyn lokalny, z tym że dane zachowywane są jedynie na potrzeby konkretnego kontekstu przeglądania i są usuwane po zamknięciu dokumentu. Z magazynu sesji korzysta się za pośrednictwem globalnej zmiennej sessionStorage, która zwraca obiekt Storage (opisany już w tabeli 39.2). Przykład wykorzystania magazynu sesji widać w listingu 39.3.

827

ROZDZIAŁ 39. „ MAGAZYNOWANIE DANYCH

Listing 39.3. Wykorzystanie magazynu sesji

Przykład



Klucz: Wartość:

Dodaj Usuń

Zapisano elementów

Zapisanych elementów:	-

Powyższy przykład działa tak samo, jak w przypadku magazynu lokalnego, z tym że widoczność i trwałość danych jest ograniczona. Ograniczenia te wpływają na sposób obsługi zdarzenia storage — pamiętaj, że zdarzenia magazynowania wyzwalane są tylko w dokumentach, które dzielą magazyn. W przypadku magazynu sesji zdarzenia wyzwalane są tylko w osadzonych dokumentach, np. znajdujących się w elemencie iframe. W listingu 39.4 widnieje poprzedni przykład z dodanym elementem iframe, w którym osadzony jest dokument storage.html. Listing 39.4. Wykorzystanie zdarzeń magazynowania z magazynem sesji

Przykład



Klucz: Wartość:

Dodaj Usuń

Zapisano elementów

Zapisanych elementów:	-

Raport zdarzeń widnieje na rysunku 39.3.

Rysunek 39.3. Zdarzenia magazynowania w pracy z magazynem sesji

Podsumowanie W tym rozdziale opisałem magazyn danych, który pozwala na przechowywanie par kluczy i wartości w pamięci przeglądarki. Jest to prosta funkcja, lecz ze względu na trwałość magazynu lokalnego jest bardzo użyteczna, zwłaszcza przy zapisywaniu prostych preferencji użytkownika.

830

ROZDZIAŁ 40

Aplikacje internetowe działające offline Bufor offline pozwala na podanie wszystkich zasobów, których aplikacja internetowa potrzebuje do działania. Dzięki temu przeglądarka może je wszystkie pobrać podczas wczytywania dokumentu HTML, a użytkownik używać aplikacji nawet wtedy, kiedy nie jest połączony z internetem. Kiedy piszę te słowa, obsługa opisanych w tym rozdziale funkcji jest wyjątkowo zróżnicowana, więc potraktuj wszystko poniżej raczej jako ogólne omówienie kierunku, w którym zmierza rozwój aplikacji offline, niż jako zbiór wytycznych. W tabeli 40.1 znajduje się streszczenie całego rozdziału. Tabela 40.1. Streszczenie rozdziału Problem

Rozwiązanie

Listing

Aktywacja buforowania offline.

Utwórz manifest i odnieś się do niego w atrybucie manifest elementu html.

40.1 – 40.3

Wskazanie zasobów, które aplikacja offline ma zapisać w buforze.

Podaj listę zasobów u góry manifestu lub w sekcji CACHE.

40.4

Wskazanie treści zastępczych, które aplikacja ma wykorzystać w przypadku braku właściwych zasobów.

Podaj listę treści w sekcji FALLBACK manifestu.

40.5 – 40.8

Wskazanie zasobów, które zawsze są pobierane z serwera.

Podaj listę treści w sekcji NETWORK manifestu.

40.9

Określenie, czy przeglądarka działa offline.

Odczytaj wartość właściwości window.navigator.onLine.

40.10

Bezpośrednia praca z buforem offline.

Pozyskaj obiekt ApplicationCache, odczytując właściwość window.applicationCache.

40.11 – 40.13

Problem Do zrozumienia charakteru problemu, któremu chcemy zaradzić poprzez utworzenie aplikacji internetowej offline, potrzebny nam będzie przykład. W listingu 40.1 widnieje bardzo prosta aplikacja, która działa na podstawie danych pobieranych na bieżąco z serwera.

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Listing 40.1. Prosta aplikacja internetowa

Przykład



Banan Jabłko Wiśnie



Widnieje tu element img, którego atrybut src określany jest przy naciśnięciu przycisku button. Każdy przycisk wskazuje przeglądarce inny obraz do pobrania z serwera. W toku działania tej aplikacji potrzebne będą trzy obrazy: • banana100.png, • apple100.png, • cherries100.png. Jeden z obrazów, banana100.png, wyświetlany jest po wczytaniu dokumentu, ponieważ określony jest jako pierwotna wartość atrybutu src elementu img. Wygląd dokumentu w przeglądarce widać na rysunku 40.1.

Rysunek 40.1. Prosta aplikacja internetowa Używam w tym rozdziale Firefoksa, ponieważ łatwo w nim wejść w tryb offline — służy do tego opcja Pracuj w trybie offline w menu Dla twórców witryn. Problem pojawia się, kiedy włączamy tryb offline (co widać na rysunku 40.2), w którym symulowane jest przerwanie połączenia z internetem bez konieczności wyłączania adaptera Wi-Fi.

832

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Rysunek 40.2. Żądanie zasobów niedostępnych w trybie offline Po naciśnięciu przycisku Jabłko przeglądarka usiłuje wczytać obraz apple100.png. Rzecz jasna, żądanie nie może zostać spełnione z powodu braku połączenia. Tymczasem po kliknięciu przycisku Banan wyświetlony zostanie właściwy obraz, ponieważ banana100.png znalazł się w buforze przeglądarki po wczytaniu dokumentu. Przy tworzeniu aplikacji offline naszym celem jest zapewnienie, by wszystkie potrzebne zasoby były dostępne nawet dla aplikacji odłączonej od sieci.

Utworzenie manifestu Manifest pozwala na określenie listy zasobów potrzebnych do pracy offline. W listingu 40.2 widnieje manifest naszej przykładowej aplikacji. Listing 40.2. Prosty manifest CACHE MANIFEST przyklad.html banana100.png apple100.png cherries100.png

Manifest jest zwykłym plikiem tekstowym. W pierwszym wierszu zawsze musi się znaleźć CACHE MANIFEST, po którym podaje się potrzebne aplikacji zasoby — po jednym na linijkę.

„ Wskazówka Specyfikacja aplikacji online zaleca dodanie samego dokumentu HTML do manifestu, pomimo że i tak znajdzie się w buforze jeszcze przed pobraniem manifestu.

Nie ma żadnego obowiązującego systemu nazewnictwa plików manifestów, ale najczęściej używa się rozszerzenia .appcache. Tekst z powyższego przykładu zapisałem w pliku fruit.appcache. Bez względu na wybrane nazewnictwo musisz zapewnić, by serwer przekazywał przeglądarce treść manifestu jako typ MIME text/cache-manifest. „ Ostrzeżenie Przeglądarka nie wykorzysta pliku buforowego, jeśli serwer nie określi prawidłowo typu MIME.

Plik manifestu łączymy z dokumentem przy użyciu atrybutu manifest elementu html, tak jak w listingu 40.3.

833

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Listing 40.3. Powiązanie pliku manifestu z dokumentem HTML

Przykład



Banan Jabłko Wiśnie



Kiedy elementowi html nadany jest atrybut manifest, przeglądarka może spytać użytkownika o pozwolenie na lokalny zapis zasobów offline. Wygląda to różnie, w zależności od przeglądarki. Chrome i Opera pozwalają na buforowanie danych offline bez pytania użytkownika o zgodę. Firefox z kolei wymaga udzielenia konkretnego zezwolenia przez użytkownika, co widać na rysunku 40.3.

Rysunek 40.3. Pytanie użytkownika o zezwolenie na zapis danych offline Przeglądarka pobiera wszystkie dane określone w manifeście, nawet jeśli nie są jeszcze potrzebne. W przypadku naszej prostej aplikacji oznacza to, że pobierane są wszystkie trzy obrazy. Aplikacja dzięki temu działa poprawnie, nawet kiedy jesteśmy offline, tak jak widać na rysunku 40.4. Jak widzisz, utworzenie aplikacji internetowej działającej offline jest bardzo proste. Wystarczy utworzyć manifest, zamieścić w nim wszystkie wymagane przez aplikację zasoby, a następnie nadać wartość atrybutowi manifest elementu html dokumentu.

834

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Rysunek 40.4. Utworzenie aplikacji offline

Określanie sekcji manifestu W pliku manifestu można tworzyć trzy rodzaje sekcji, które opisuję poniżej.

Sekcja CACHE Pliki do zapisania w buforze umieszcza się na początku manifestu, lecz można je też podać w sekcji CACHE. W listingu 40.4 widnieje przykład. Listing 40.4. Utworzenie sekcji CACHE w manifeście CACHE MANIFEST przyklad.html banana100.png CACHE: apple100.png cherries100.png

Jedne zasoby umieściłem w domyślnej sekcji na początku manifestu, a pozostałe w sekcji CACHE. Manifest jest w istocie taki sam jak poprzednio, ale utworzenie takiej sekcji pozwala na umieszczanie spisu zasobów już po pozostałych sekcjach, które omówię dalej.

Sekcja FALLBACK Sekcja FALLBACK pozwala określić, jak przeglądarka ma się odnieść do zasobów, które nie zostały uwzględnione w manifeście. W listingu 40.5 widnieje przykład. Listing 40.5. Utworzenie sekcji FALLBACK w manifeście CACHE MANIFEST przyklad.html banana100.png FALLBACK: *.png offline.png CACHE: apple100.png

835

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

W tym przykładzie dodałem sekcję FALLBACK. Znajduje się w niej jedna pozycja, która poleca przeglądarce, by używała pliku offline.png za każdym razem, kiedy musi wyświetlić plik png, który nie został zapisany offline. „ Wskazówka W sekcji CACHE nie trzeba podawać zasobów zastępczych, ponieważ przeglądarka pobiera je automatycznie.

Z sekcji CACHE usunąłem plik cherries100.png, wobec czego tracimy dostęp do wymaganego przez aplikację pliku. Sposób, w jaki przeglądarka wykorzystuje zastępcze zasoby, widać na rysunku 40.5.

Rysunek 40.5. Wykorzystanie zastępczych zasobów Obraz offline.png przedstawia najzwyczajniejszy krzyżyk. Podawanie treści zastępczych dla obrazów nie jest idealnym rozwiązaniem, ale w ten sposób przynajmniej możliwe jest zachowanie struktury i layoutu strony. Treści zastępcze są bardziej przydatne w przypadku linków do innych dokumentów. W listingu 40.6 widnieje kolejna wersja naszej aplikacji internetowej, tym razem z dodanym odnośnikiem do innego pliku HTML. Listing 40.6. Odnośnik do innego pliku

Przykład



Banan Jabłko Wiśnie

Odnośnik do innej strony



Możemy następnie utworzyć dokument zastępczy do wykorzystania w przypadku, gdyby plik HTML, do którego prowadzi odnośnik, nie został zapisany w buforze offline. Nadałem temu dokumentowi nazwę offline.html, a jego treść widać w listingu 40.7. Listing 40.7. Dokument offline.html

Offline

Nie jesteś połączony z siecią. Za to masz tu treść zastępczą.

Następnie możemy zamieścić wpis o treści zastępczej w manifeście, tak jak widać to w listingu 40.8. Listing 40.8. Dodanie wpisu o treści zastępczej plików HTML do manifestu CACHE MANIFEST przyklad.html banana100.png FALLBACK: *.png offline.png * offline.html CACHE: apple100.png

Plik, do którego podałem odnośnik (otherpage.html), nie znajduje się w manifeście, więc nie zostanie też zapisany w buforze offline. Po kliknięciu tego linku w głównym dokumencie w trybie offline otrzymujemy dokument zastępczy, tak jak widać na rysunku 40.6. (Komunikat wyświetlany na stronie zastępczej nie jest szczególnie pomocny, ale pozwala zademonstrować działanie tej funkcji. W prawdziwej aplikacji można by zamieścić bardziej przydatną informację, albo nawet stworzyć skrypt pozwalający na działanie aplikacji w ograniczonym zakresie, z wykorzystaniem zasobów znajdujących się w buforze online).

Rysunek 40.6. Wykorzystanie treści zastępczych w dokumentach HTML

837

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Sekcja NETWORK Sekcja NETWORK manifestu określa zbiór zasobów, które nie mają być buforowane i które przeglądarka powinna zawsze pobierać z serwera, nawet w trybie offline. W listingu 40.9 widnieje przykład zastosowania sekcji NETWORK. Listing 40.9. Utworzenie sekcji NETWORK w manifeście CACHE MANIFEST przyklad.html banana100.png FALLBACK: * offline.html NETWORK: cherries100.png CACHE: apple100.png

W tym przykładzie dodałem obraz cherries100.png do sekcji NETWORK. Przeglądarka będzie wobec tego próbowała pobrać obraz z serwera, nawet gdy nie będzie połączona z siecią. (W takiej sytuacji wykorzysta jednak buforowany obraz, jeśli ten został pobrany, niezależnie od manifestu, tj. jeśli użytkownik naciśnie przycisk Wiśnie przed utratą połączenia). „ Wskazówka Utworzenie sekcji wymuszającej na aplikacji działającej offline pobieranie danych z serwera może wydawać się dziwne, ale trzeba pamiętać, że przeglądarka używa buforowanych danych także wtedy, kiedy jest połączona z siecią.

Sprawdzenie stanu przeglądarki To, czy przeglądarka jest połączona z siecią, można określić na podstawie właściwości window.navigator.onLine, którą opisuję w tabeli 40.2. Tabela 40.2. Właściwość onLine Nazwa

Opis

Zwracana wartość

window.navigator.onLine

Zwraca wartość false, jeśli przeglądarka na pewno jest połączona z siecią, a true, jeśli być może jest połączona.

wartość_boolowska

Ta właściwość podaje pewną informację tylko wtedy, kiedy przeglądarka jest z całą pewnością niepołączona. Wartość true nie oznacza, że przeglądarka jest połączona, lecz że nie wie na pewno, czy nie jest. W listingu 40.10 widnieje przykład zastosowania tej właściwości. Listing 40.10. Określenie stanu przeglądarki

Przykład

838

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Przeglądarka jest: unknown.



Obydwa stany widać na rysunku 40.7 — osiągnąłem ten efekt dzięki poręcznemu trybowi offline Firefoksa. W rzeczywistości rzadko kiedy panuje jasność co do stanu. Przeglądarka może samodzielnie określić swój stan, a większość nie określa się jako offline, dopóki nie spróbują bezskutecznie wykonać żądania. Z drugiej strony, niektóre przeglądarki na urządzeniach przenośnych przechodzą w tryb offline, kiedy tylko tracą kontakt z siecią.

Rysunek 40.7. Wykrycie stanu przeglądarki

Praca z buforem offline Z buforem offline można pracować bezpośrednio, przywołując właściwość window.applicationCache, która zwraca obiekt ApplicationCache. Składowe tego obiektu opisane są w tabeli 40.3. Tabela 40.3. Obiekt ApplicationCache Nazwa

Opis

Zwracana wartość

update()

Aktualizuje bufor tak, by pobierane były najnowsze wersje elementów zawartych w manifeście.

void

swapCache()

Zamienia bieżący bufor na najbardziej aktualny.

void

status

Zwraca stan bufora.

liczba

„ Ostrzeżenie Mamy tu do czynienia z dość zaawansowaną kwestią, a praca z mechanizmem buforowania bywa niezwykle frustrująca. Zanim skorzystasz z opisanych w tym podrozdziale obiektów i technik, zastanów się, czy naprawdę zależy Ci na kontrolowaniu bufora.

Właściwość status zwraca wartość numeryczną; poszczególne wartości opisane są w tabeli 40.4.

839

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Tabela 40.4. Wartości właściwości status ApplicationCache Wartość

Nazwa

Opis

0

UNCACHED

Dokument nie ma swojego bufora albo buforowane dane jeszcze nie zostały pobrane.

1

IDLE

Bufor nie wykonuje żadnej czynności.

2

CHECKING

Przeglądarka sprawdza aktualizacje manifestu bądź podanych w nim elementów.

3

DOWNLOAD

Przeglądarka pobiera manifest lub aktualizacje treści.

4

UPDATEREADY

Dostępne są zaktualizowane dane bufora.

5

OBSOLETE

Buforowane dane są przestarzałe i nie należy ich używać — następuje to, kiedy żądanie pliku manifestu zwraca kod 4xx HTTP (co zwykle wskazuje, że plik manifestu został usunięty).

Poza metodami i właściwością status obiekt ApplicationCache obsługuje zdarzenia wyzwalane przy zmianie statusu bufora. Opisuję je w tabeli 40.5. Tabela 40.5. Wartości właściwości status ApplicationCache Nazwa

Opis

checking

Przeglądarka pobiera pierwotny manifest lub sprawdza, czy został zaktualizowany.

noupdate

Nie ma żadnej aktualizacji i bieżący manifest jest najbardziej aktualny.

downloading

Przeglądarka pobiera zasoby podane w manifeście.

progress

Wyzwalane podczas pobierania.

cached

Wszelkie podane w manifeście zasoby zostały pobrane i zapisane w buforze.

updateready

Pobrano nowe zasoby, które są gotowe do wykorzystania.

obsolete

Bufor się zdezaktualizował.

Metody i wartości właściwości status można wykorzystać do przejęcia kontroli nad buforem offline, tak jak widać to w listingu 40.11. Listing 40.11. Bezpośrednia praca z buforem aplikacji

Przykład



Banan Jabłko Wiśnie

840

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Aktualizuj Zamień bufor

Przeglądarka jest:

Typ zdarzenia

W tym przykładzie znajdują się przyciski, które przywołują metody update i swapCache obiektu ApplicationCache. Skrypt ten również określa nasłuchiwacza niektórych zdarzeń i wyświetla typ zdarzenia w elemencie table. Teraz potrzebujemy już tylko manifestu. W listingu 40.12 widnieje manifest, który wykorzystano z tym przykładem.

841

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Listing 40.12. Manifest przykładowego bufora CACHE MANIFEST CACHE: przyklad.html banana100.png cherries100.png apple100.png FALLBACK: * offline.html

Nie ma tu nic nowego. Znajduje się tu główny dokument, wykorzystywane przez niego obrazy oraz dokument zastępczy. Stronę w działaniu widać na rysunku 40.8.

Rysunek 40.8. Samodzielne kontrolowanie bufora Należy zwrócić uwagę na dwie rzeczy na tym rysunku. Po pierwsze: sekwencja zdarzeń. Przy wczytywaniu dokumentu przeglądarka wykrywa atrybut manifest elementu html i zaczyna pobierać dane, które są zapisywane w buforze. Widać to po elemencie table, w którym pojawiają się zdarzenia checking, downloading i cached.

Aktualizowanie Aby wprowadzić zmianę w buforze, trzeba dokonać jakiejś aktualizacji na serwerze. W celu zastąpienia wisienek cytryną zwyczajnie nadpisałem znajdujący się na serwerze plik cherries100.png obrazem cytryny. Gwoli jasności: nazwa pliku to wciąż cherries100.png, ale znajduje się w nim obraz cytryny. Po przywołaniu metody update obiektu ApplicationCache przeglądarka sprawdza, czy plik manifestu uległ zmianie — nie sprawdza jednak, czy zmodyfikowano któryś z plików zawartych w owym manifeście. Żeby przeglądarka wczytała podmieniony obraz, muszę zatem również wprowadzić zmianę w pliku manifestu. Dla uproszczenia sprawy zmieniłem nazwę zastępczego pliku HTML, co widać w listingu 40.13. Listing 40.13. Wprowadzenie zmiany w pliku manifestu CACHE MANIFEST CACHE: przyklad.html banana100.png cherries100.png

842

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

apple100.png FALLBACK: * offline2.html

„ Ostrzeżenie Do powikłań przy usuwaniu błędów w buforze offline w znacznej mierze przyczynia się to, że przeglądarka odnosi się do poszczególnych pozycji w manifeście. Niezły bałagan może mieć miejsce, jeśli różnym rodzajom treści przypisałeś różne czasy upływu ważności, gdyż przeglądarka sprawdzi w takiej sytuacji aktualizacje tylko niektórych elementów. Aby zmiany w buforze były wprowadzane natychmiastowo (a właściwie prawie natychmiastowo — więcej o tym przeczytasz w kolejnym punkcie), najbezpieczniej nadać nagłówkowi Cache-Control serwera wartość no-cache. Poleca to przeglądarce, by nie sprawdzała aktualizacji za każdym razem, kiedy potrzebne są jakieś zasoby (choć nie jest to najlepsze rozwiązanie w pracy z serwerem produkcyjnym).

Pobranie aktualizacji Po wprowadzeniu zmian na serwerze możemy polecić przeglądarce, by zaktualizowała bufor offline. W tym celu należy nacisnąć przycisk Aktualizuj. Rezultat widać na rysunku 40.9.

Rysunek 40.9. Pobranie aktualizacji bufora offline Na ekranie pokaże się nowa sekwencja zdarzeń (checking, downloading, updateready), a stan bufora zmieni się na UPDATEREADY. Do tej pory przeglądarka pobrała zmodyfikowane zasoby, ale jeszcze nie zapisała ich w używanym przez nas buforze. Innymi słowy: kliknięcie przycisku Wiśnie i tak sprawi, że wyświetlony zostanie obraz z wiśniami, pomimo że przeglądarka już pobrała i zabuforowała obraz z cytryną o takiej samej nazwie.

Zastosowanie aktualizacji Kiedy jesteśmy gotowi skorzystać z zaktualizowanych zasobów, naciskamy przycisk Zamień bufor, który przywołuje metodę swapCache obiektu ApplicationCache. Zaktualizowane zasoby są zapisywane w buforze offline aplikacji. „ Ostrzeżenie Kolejną przyczyną występowania niejasności przy pracy z buforem jest efekt, jaki wywołuje zastosowanie aktualizacji. Zmiany wprowadzane są dopiero przy kolejnym pobraniu zasobów z bufora. Oznacza to, że zapisane w buforze arkusze stylów i skrypty nie zostają ponownie wczytane przez samą przeglądarkę, wobec czego trzeba samemu odświeżyć korzystający z nich dokument, by zmiany stały się widoczne.

843

ROZDZIAŁ 40. „ APLIKACJE INTERNETOWE DZIAŁAJĄCE OFFLINE

Po naciśnięciu przycisku Wiśnie na ekranie pojawia się obrazek cytryny, co widać na rysunku 40.10.

Rysunek 40.10. Zastosowanie aktualizacji bufora offline „ Ostrzeżenie Frustrujące jest także to, że między zastosowaniem aktualizacji a wprowadzeniem zaktualizowanych treści do dokumentu trzeba czasami chwilę poczekać. Podczas pracy nad tym rozdziałem zetknąłem się z opóźnieniami trwającymi od kilku sekund do dziesięciu minut, a nawet dłuższymi.

Podsumowanie W tym rozdziale pokazałem Ci, jak tworzyć aplikacje działające nawet wtedy, kiedy przeglądarka nie jest połączona z siecią. Jest to bardzo przydatna funkcja, która przynosi świetne rezultaty, jeśli zdołasz stworzyć właściwą konfigurację. Tym niemniej testowanie i usuwanie błędów z bufora aplikacji potrafi doprowadzić do szału, zwłaszcza jeśli bezpośrednio kontrolujesz bufor przy użyciu obiektu ApplicationCache.

844

Skorowidz

A ActiveState, 36 Adobe Flash, Patrz: Flash adres e-mailowy, 322 IP, 815 URL, 131, 134, 154, 169, 179, 322, 326, 328, 329, 389, 394, 553, 665, 694, 696 względny, 130, 328 Ajax, 685, 686, 709, 718 akapit, 185, 191 animacja, 489, 493, 496 deklaracja, 496 etap pośredni, 499 kierunek powtórzeń, 501 layoutu, 503 stan końcowy, 502 stan początkowy, 498 wielu elementów, 505 właściwość, 353 wstrzymywanie, 507 wznawianie, 507 z przekształceniem, 511 API REpresentational State Transfer, 698, Patrz: API REST REST, 698 aplikacja offline, 831, 833 Apple, 30 argument funkcji, Patrz: funkcja argumenty arkusz stylu, 61, Patrz też: CSS kodowanie znaków, 67 zewnętrzny, 65 atak cross-site scripting, Patrz: XSS atrybut, 44 accept, 307 accesskey, 49

action, 258, 271 allowfullscreen, 334 alt, 305, 330 async, 126, 145, 147, 148 autocomplete, 261, 262 autofocus, 265, 310, 317 autoplay, 740 autorski, 45 boolowski, 44, 46, 53, 180 border, 249, 251 charset, 143 checked, 293 circle, 330 cite, 169, 179, 189 class, 50, 176, 186, 188, 358 cols, 314 colspan, 238, 239 content, 132 contenteditable, 52 contextmenu, 53 controls, 740 coords, 329 datetime, 179, 180 default, 330 defer, 126, 143, 145, 147, 556 dir, 53, 173 dirname, 279, 285 disabled, 266, 284, 285, 310, 317 draggable, 53, 799 dropzone, 53 elementu, 596, 598 enctype, 259, 271 form, 310, 317, 337 formaction, 272, 305 formenctype, 305 formmethod, 272, 305 formnovalidate, 305, 323 formtarget, 305

„ SKOROWIDZ

atrybut globalny, 44, 49, 62, 186, 243, 359, 596 headers, 242, 243 height, 305, 326, 327, 332, 334, 735 hidden, 53 high, 341 href, 44, 130, 131, 151, 153, 154, 327, 330, 665 hreflang, 153, 330 http-equiv, 125, 134 id, 55, 186, 265, 394 ismap, 327 keytype, 317 klasy, 71 label, 283, 313 lang, 55, 394 list, 279, 281, 290, 297, 299 lokalny, 44, 49, 153 low, 341 manifest, 834 max, 290, 299, 318, 319, 320, 340 maxlength, 278, 279, 286, 297 media, 136, 153, 330, 738 method, 259, 271 min, 290, 299, 318, 319, 320 multiple, 307, 310, 311 name, 132, 263, 310, 317, 332, 338 niestandardowy, 597 novalidate, 323 open, 226 optimum, 341, 342 pattern, 279, 286, 297, 318, 321 placeholder, 279, 280, 281, 286, 297 poly, 330 poster, 734, 735 preload, 732, 734 pubdate, 180 readonly, 279, 284, 286, 290, 297, 299 rect, 330 rel, 125, 142, 153, 330 required, 279, 286, 290, 293, 297, 299, 307, 310, 318, 319, 320, 321, 387 reversed, 195 rows, 314 rowspan, 238, 239, 240 sandbox, 333 scoped, 135 seamless, 333 shape, 329 size, 278, 279, 280, 286, 297, 310, 311 span, 246, 249 spellcheck, 56 src, 126, 143, 305, 326, 332, 334, 736, 739 srcdoc, 332 start, 194, 200 step, 290, 299 style, 57, 62, 63, 360, 615

846

tabindex, 57 target, 131, 153, 155, 262, 271, 330, 332, 338 td, 242 th, 242 title, 58, 168, 169 type, 135, 143, 144, 153, 194, 256, 270, 271, 272, 273, 277, 278, 285, 289, 290, 296, 330, 334 usemap, 331, 338 value, 197, 200, 279, 280, 281, 286, 290, 293, 297, 299, 319, 340, 341 width, 305, 326, 327, 332, 334, 735 wrap, 314 wszystkie, 598 audio, 32, 731, 739 odtwarzanie, 745 autouzupełnianie, 261, 262, 282

B barwa, Patrz: kolor biblioteka, 144 JavaScript, 33, 575 Modernizr, Patrz: Modernizr blog, 220 blok kodu, 90 Blueprint, 85, 449 błąd, 694 aplikacji, 697 geolokalizacji, 816 wejściowy, 696 żądania, 696 błędy, 106, 111 bufora offline, 843 bracia, 47 brat, 368 bufor offline, 831, 839

C Cascading Style Sheets, Patrz: CSS Chrome, 33, 35, 68, 210, 211, 214, 261, 280, 291, 300, 301, 319, 338, 386, 387, 399, 493, 574, 622, 691, 715, 731, 744, 809, 815, 816, 834 ciasteczko, Patrz: cookie cień, 397, 416, 481, 792 cookie, 555 CORS, 703, 704 cross-document messaging, Patrz: przekazywanie komunikatów między dokumentami CSS, 31, 41, 45, 47, 48, 61, 67, 116, 134, 345, 616 deklaracja, Patrz: styl deklaracja framework, 84 narzędzia, 83 selektor, 55 typu inline, 47

„ SKOROWIDZ

CSS3, 345 cytat, 167, 171, 189 czcionka, 482, 484, 485, Patrz też: font internetowa, 486 czytnik ekranowy, 242

D dane, 663, 709 elementu, 741 JSON, 728 kodowanie, 259, 260 kontaktowe, 224 magazynowanie, 823 pobieranie, 726 poufne, 304 przesyłanie, 710 ukryte, 303 wejściowe, 167 weryfikacja, 317, 318, 385 wyjściowe, 167 wysyłanie, 713, 715 data, 180, 298 definicja, 167, 169, 197, 198 deklaracja, 89 charset, 67 for...in, 96 if z operatorem negacji, 110 import, 66 warunkowa, 100 długość, 75 DNS, 694 Document Object Model, Patrz: DOM Dojo, 112 dokument, 125, 126, 531, 548, 551, 556, 654 drzewo, 48 HTML, Patrz: HTML dokument nazwa, 129 osadzony, 585 pobieranie, 723 sekcja, Patrz: sekcja struktura, 610 tytuł, 129 ustrukturyzowany, 561 DOM, 263, 529, 531, 541, 547, 602, 643, 663, 740 drzewo, 565 implementacja, 557 nawigacja, 565 poziom, 533 testowanie, 533 dopełnienie, 403, 424 dziecko, 47, 48, 346, 366 n-te, 381 dziedziczenie, 67, 73 dzielenie wyrazów, 476

E edytor Komodo Edit, Patrz: Komodo Edit tekstu, 36 efekty, 792, Patrz też: cień, przezroczystość elastyczny layout polowy, Patrz: flexbox elastyczny model polowy, Patrz: flexbox element, 40, 115, 116, 125 a, 42, 118, 128, 131, 151, 152, 154, 161, 217, 327, 338, 665 abbr, 118, 152, 168, 169, 667 address, 120, 223, 224, 668 aktywny, 382 area, 122, 329, 330, 678 article, 115, 117, 120, 180, 187, 220, 224, 668 aside, 120, 220, 668 atrybut, 596, Patrz: atrybut atrybuty wszystkie, 598 audio, 122, 739, 740 b, 115, 118, 151, 156, 667 base, 118, 125, 130, 131, 154, 663 bdi, 152, 174 bdo, 152, 173 blockquote, 120, 189, 191, 667 blokowy, 435, 437 body, 42, 43, 47, 118, 125, 128, 184, 186, 224, 663 br, 118, 152, 164, 667 button, 42, 121, 254, 256, 270, 272, 273, 274, 289, 323, 341, 444, 687, 714 canvas, 32, 122, 342, 749, 750, 752, 765, 772, 775 caption, 121, 243, 244 checkbox, 294 cite, 116, 119, 151, 152, 171, 667 code, 40, 42, 119, 128, 146, 152, 167, 188, 202, 667 col, 245, 247, 248, 249, 668 colgroup, 121, 245, 246, 247, 668 command, 123 dane, 592, 741 datalist, 121, 281, 282, 283, 671 dd, 120, 197, 198, 668 default, 384 del, 119, 152, 178, 179, 666 details, 120, 224, 226, 668 dfn, 152, 169, 667 div, 116, 117, 120, 186, 187, 188, 687 dl, 120, 197 doctype, 125, 126 DOCTYPE, 42, 46, 118 domyślny, 384 dopełnienie, 346 dt, 120, 197, 198, 668 elastyczny, 460 em, 119, 151, 157, 667 embed, 122, 333, 334, 678 fieldset, 122, 267, 268, 269, 671

847

„ SKOROWIDZ

element figcaption, 120, 201, 202, 668 figure, 115, 120, 200, 202, 668 fokusowanie, Patrz: fokusowanie footer, 120, 211, 668 form, 122, 254, 255, 261, 262, 272, 274, 323, 338, 660, 672, 710, 720 formularza, 671, 682 główny, 127, 376 grupujący, 43, 191, 667, 668 h1, 204, 205 h1 – h6, 120, 204, 211, 668 head, 42, 46, 47, 118, 125, 127, 128, 130, 142, 665 header, 120, 211, 217, 668 hgroup, 116, 121, 205, 208, 668 hr, 42, 43, 120, 191 html, 42, 43, 46, 118, 125, 127, 665 HTMLCollection, 560 i, 119, 151, 158, 667 identyfikator, 55 iframe, 122, 131, 331, 332, 333, 338, 679, 720 img, 122, 154, 326, 327, 328, 337, 560, 679, 766, 769 input, 42, 121, 122, 254, 255, 259, 265, 274, 277, 283, 285, 287, 289, 290, 291, 292, 295, 298, 300, 302, 305, 307, 323, 385, 386, 672, 710 dezaktywacja, 266, 269 ins, 119, 152, 178, 179, 666 interaktywny, 391 kbd, 119, 152, 167, 667 keygen, 122, 309, 316 kliknięcie, 639 kolejność rysowania, 452 krawędź, 399, 424, 447 label, 42, 122, 264, 265, 674 legend, 122, 268, 674 li, 48, 120, 193, 196, 200, 217, 667 liniowo-blokowy, 439 liniowy, 437 link, 125, 139, 140, 141, 664 map, 122, 329, 331, 680 margines, 346 mark, 119, 152, 177, 667 menu, 123, 196 meta, 118, 125, 131, 133, 150, 664 meter, 122, 341, 680 nav, 121, 211, 215, 668 nazwany, 560, 561 nieaktywny, 382 nietabelowy, 435 noscript, 118, 126, 142, 148, 150, 665 obiektu Document, 559 object, 122, 333, 334, 337, 338, 680 obramowanie, 346, 356, 397, 398, 399, 401, 407, 418, 426 obrazkowe, 404 specjalne, 404 z zaokrąglonymi rogami, 402

848

obrys, 418 odstępy, 445 ogólny, 116 ol, 117, 120, 193, 200, 667 opis, 117 optgroup, 122, 309, 312, 313, 674 option, 122, 282, 283, 310, 311, 313, 675 osadzające treść w dokumencie, 678 output, 122, 309, 316, 675 p, 42, 120, 128, 185, 188, 191, 265, 437 param, 122, 681 password, 294 pole, 423, Patrz: pole elementu porównywanie, 606 powielanie, 604 pozycjonowanie, Patrz: pozycjonowanie pre, 120, 188 progress, 123, 339, 340, 723 przenoszenie, 605 pusty, 42 q, 119, 152, 169, 189, 666, 667 rozmiar, 427, 430 rp, 119, 152, 172, 173, 667 rt, 119, 152, 172, 173, 667 ruby, 119, 152, 172, 667 run-in, 439 s, 119, 151, 159, 667 samp, 119, 152, 167, 667 script, 52, 88, 92, 118, 126, 142, 143, 144, 146, 147, 148, 664 section, 121, 187, 209, 211, 668 sekcji, 668 select, 122, 309, 311, 312, 676 semantyczny, 41 sfokusowany, 391 skryptowy, 142 small, 119, 151, 162, 667 source, 123, 737 span, 116, 119, 152, 176, 187, 383, 437, 491, 667 strong, 119, 151, 160, 667 strukturalny, 48 styl, 623, 624 style, 42, 63, 64, 118, 125, 134, 135, 217, 615, 665 sub, 119, 151, 163, 667 summary, 121, 225, 668 sup, 119, 151, 163, 667 svg, 123 tabel, 668, 670, 682 tabelowy, 435 table, 42, 121, 229, 231, 235, 236, 241, 243, 244, 249, 251, 465, 617, 669 tbody, 121, 235, 236, 669 td, 42, 121, 229, 232, 238 tekstowy, 151, 156, 176, 665 Text, 600 textarea, 42, 56, 122, 278, 309, 313, 677

„ SKOROWIDZ

tfoot, 121, 235, 236, 247, 669 th, 42, 121, 232, 234, 238, 243, 669 thead, 121, 235, 236, 247, 669 time, 119, 152, 180, 666 title, 42, 47, 118, 128, 129, 665 tło, 409, 410, 411, 412, 413, 415 tr, 42, 121, 229, 231, 670 track, 123, 738 treściowy, 48 treść, 430 tworzenie, 603, 604 typ, 48, 357 u, 119, 151, 161, 667 ukrywanie, 442 ul, 120, 195, 199, 200, 217 usuwanie, 603, 604 var, 119, 152, 167, 667 video, 123, 732, 740, 769, 770 void, 43 wbr, 119, 152, 164, 165, 166, 667 weryfikacja, 385 widoczność, 434 wstawianie do bloku tekstu, 612 wyszukiwanie, 563 z ograniczeniami, 48 zawartość, 346 zaznaczony, 383 encja, 48, 260

F favikona, 141 film, Patrz: wideo Firebug, 111 Firefox, 33, 35, 111, 142, 210, 211, 214, 280, 291, 399, 493, 574, 622, 691, 715, 744, 765, 805, 816, 839 Flash, 30, 32, 720, 731, 749 flexbox, 449, 456, 457, 458, 459 wielkość maksymalna, 463 flow, Patrz: element strukturalny fokusowanie, 639, 657 font, 77, 482, 484, 485, Patrz też: czcionka internetowy, 486 format ico, 141 formularz, 121, 253, 255, 305, 309, 337, 386, 660, 671, 682, 709, 710, 712, 715 etykieta, 263, 264 grupowanie elementów, 267 konfiguracja, 258 framework CSS, 449 funkcja, 32, 90, 94, 644, Patrz też: metoda analizy stylów, 83 argumenty, 91 collapse, 435 displayErrorMsg, 696 displayMsg, 589

displayPosition, 814 geolokalizacji, 813 handleButtonPress, 688, 714 handleDescendantEvent, 648 handleResponse, 689 HTMLElement, 532 JavaScript, 639 listClasses, 595 marquee, 433 new Array, 104 Number, 103 parametry, 90 parseFloat, 104 parseInt, 104 przeciągnij i upuść, 799, 800, 804, 810 readCookies, 556 stopImmediatePropagation, 649, 650 stopPropagation, 649, 650 table CSS, 241 toggleClass, 595 url, 407 writeResponse, 712, 723

G Geolocation API, 813 geolokalizacja, 813, 815, 818, 820 Google’a, 816 godzina, 180, 298 GPS, 815 gradient liniowy, 757, 758, 760 promieniowy, 757, 762 grafika, 342 grupowanie treści, 183, 185

H hasło, 285, 286, 688 wyszukiwania, 302 host, 130, 584, 694 HTML dokument, 45, 46 standard, Patrz: standard HTML HTML5 specyfikacja bazowa, 31 standard, Patrz: standard HTML5

I identyfikator fragmentu, 55, 394 ilustracja, 200 indeks dolny, 163 górny, 163

849

„ SKOROWIDZ

indeksownik tablicowy, 561 interakcja, 689 niezabezpieczona, 259 zabezpieczona, 259 interfejs, 382, 532 Internet Explorer, 30, 35, 210, 715, 816 iOS, 30

J JavaScript, 30, 32, 36, 45, 83, 87, 142, 143, 274, 444, 533 biblioteka, 112 debuger, 111 dezaktywacja, 148 narzędzia, 111 obiekt, Patrz: obiekt operator, Patrz: operator prymityw, Patrz: prymityw tablica, Patrz: tablica JavaScript Object Notation, Patrz: JSON jednostka, 82 bezwzględna, 76 czasu, 82 nieobdługiwana, 81 obliczanie, 81 względna, 77, 80 jednostki, 633 konwersja, 634 język ISO, 56 Java, 30 skryptowy, 142 znaczników, 34 jQuery, 112, 144, 300, 317, 449, 533, 799 jQuery UI, 112 JSON, 718, 725, 726, 728

K kalkulator, 316 kaskadowanie, 83 kaskadowość, 67, 69 kaskadujące arkusze stylów, Patrz: CSS kąt, 82 keywords, 133 klasa, 116, 362, 593 article, 117 klatka kluczowa, 497, 498, 504 klauzula procentowa, 499 klient użytkownika, 45 klucz, 823 prywatny, 316 publiczny, 316

850

kodowanie, Patrz: dane kodowanie kolor, 74, 300, 409, 417, 513, 757 pierwszego planu, 514 wypełnienia, 754 Komodo Edit, 36 kompas, 815 kompozycja, 794 komunikat, 586 kontekst, 751, 765 2d, 751 3d, 751 przeglądania, 131, 155, 262, 332, 338 kontener, 346 krzywa Béziera, 495, 785, 787 kursor, 389, 527

L layout, 241, 249, 251, 265, 418, 430, 437, 449 animacja, 503 elastyczny, 457 siatkowy, 449 szablonowy, 449 tabelowy, 465 wielokolumnowy, 454 właściwość, 351 LESS, 84 liczba całkowita, 93 rzeczywista, Patrz: liczba zmiennoprzecinkowa zmiennoprzecinkowa, 93 licznik, 588, 771 CSS, 373 czasu, 589 odstępów, 589 linia, 778 pozioma, 43 prosta, 776 stykająca się, 755 szerokość, 754 zakończenie, 778 lista, 193, 513, 523 definicji, 197 klas, 593 nieuporządkowana, 48, 195, 200 o specyficznej numeracji, 199 uporządkowana, 48, 193, 197 wewnętrzna, 200 znacznik, 523, 524, 525 literał obiektowy, 94, 97 tablicowy, 105 logo, 211 logogram, Patrz: pismo logograficzne, znak ruby

„ SKOROWIDZ

Ł łuk, 780

M magazyn danych, 823 lokalny, 823, 826 sesji, 823, 827 manifest, 833, 835 mapa, 305, 331 obrazu działająca po stronie klienta, 329, 338 obrazu przetwarzana po stronie serwera, 327 margines, 426, 427 menu, 48 kontekstowe, 53 metadane, 46, 48, 118, 125, 127, 128, 129, 131, 133, 549, 663, 734 metoda, 94, 97, Patrz też: funkcja addColorStop, 759 addEventListener, 587, 644, 645 append, 716 arc, 780, 784, 785 arcTo, 780, 781, 782 assign, 554 back, 576 bezierCurveTo, 786 canPlayType, 743 clearInterval, 588 clearRect, 753 clearTimeout, 588 cloneNode, 604, 605 closePath, 777, 780 createLinearGradient, 759, 762 createPattern, 765 createRadialGradient, 763 CSSStyleDeclaration.getPropertyCSSValue, 632 DELETE, 698 do interakcji z oknem, 572 Document, 561 document.defaultView.getComputedStyle, 635 document.writeln, 89 drawImage, 769, 770, 772 fill, 777, 778, 780, 789 fillRect, 753, 757, 762, 779 forward, 576 GET, 698 getAllResponseHeaders, 699 getComputedStyle, 635 getContext, 751 getCurrentPosition, 813, 816, 818, 821 getElement, 562

getElementById, 564 getElementsByTagName, 548 getPropertyPriority, 632 getPropertyValue, 632 getResponseHeader, 699 hasFeature, 557 History.pushState, 577, 582 HTMLElement, 591 HTTP, 259, 689, 697 insertAdjacentHTML, 608, 611 isEqualNode, 607 isSameNode, 606 moveTo, 780 namedItem, 560 open, 688 pause, 747 play, 747 POST, 698 postMessage, 586 preventDefault, 714 przeszukiwania, 564 PUT, 698 quadraticCurveTo, 787 querySelectorAll, 564 rect, 779 removeEventListener, 644 replace, 554 restore, 767 save, 767 send, 689, 719 setInterval, 588 setItem, 823 setRequestHeader, 699 setTimeout, 588 showModalDialog, 575 stringify, 719 stroke, 777, 780, 789 strokeRect, 753, 754, 755, 757, 779 toggle, 595 toString, 102 watchPosition, 820, 821 writeln, 89, 548 Microsoft, 30 MIME, 732, 833 model polowy, 346, 449 zbudowany z obiektów, 531 Modernizr, 33, 83 moduł multipart, 36 modyfikator, 137 Mozilla Developer Network, 34 multimedia, 731, 747

851

„ SKOROWIDZ

N nagłówek, 211, 235, 697 Cache-Control, 699 header, 220 HTTP, 701 odpowiedzi, 699 żądania, 704 nawigacja, 553 nazwa użytkownika, 688 Netscape, 30 Netscape Navigator, 30 Node.js, 36, 253, 256, 710, 723 notacja ruby, Patrz: pismo logograficzne, znak ruby tablicowa, 560, 595 numer indeksowy, 595

O obiekt, 93, 95 ApplicationCache, 839, 841 Array, 106 CanvasGradient, 758, 759 Coordinates, 814 CSSPrimitiveValue, 632 CSSRuleList, 621 CSSStyleDeclaration, 541, 624, 625, 635 CSSStyleRule, 621 CSSStyleSheet, 616 DataTransfer, 806, 808 document, 89, 603 Document, 532, 534, 547, 549, 558, 561, 564, 570, 654 elementy, 559 DOM, 532, 533 DOMTokenList, 594 DragEvent, 806 elementów, 608 Event, 643, 645, 654, 691, 692 FocusEvent, 659 FormData, 715, 716, 719, 720 Geolocation, 813 History, 538, 575 HTMLAnchorElement, 665 HTMLAreaElement, 678 HTMLAudioElement, 740 HTMLBaseElement, 663 HTMLBodyElement, 663 HTMLBRElement, 667 HTMLCanvasElement, 751 HTMLDataListElement, 671 HTMLDetailsElement, 668 HTMLElement, 532, 539, 549, 564, 591, 592, 644 tablica, 561 HTMLEmbedElement, 678, 679

852

HTMLFieldSetElement, 671 HTMLFormElement, 672 HTMLHeadElement, 665 HTMLHeadingElement, 668 HTMLHtmlElement, 665 HTMLHttpRequest, 719 HTMLImageElement, 560, 679, 765 HTMLInputElement, 672 HTMLLabelElement, 674 HTMLLegendElement, 674 HTMLLIElement, 667 HTMLLinkElement, 664 HTMLMapElement, 680 HTMLMediaElement, 740, 741, 745 HTMLMetaElement, 664 HTMLMeterElement, 680 HTMLModElement, 666 HTMLObjectElement, 680 HTMLOLListElement, 667 HTMLOptGroupElement, 674 HTMLOptionElement, 675 HTMLOutputElement, 675 HTMLProgressElement, 681 HTMLQuoteElement, 666, 667 HTMLScriptElement, 664 HTMLSelectElement, 676 HTMLSpanElement, 667 HTMLStyleElement, 665 HTMLTableColElement, 668 HTMLTableElement, 669 HTMLTableHeaderCellElement, 669 HTMLTableRowElement, 670 HTMLTableSectionElement, 669 HTMLTextAreaElement, 677 HTMLTimeElement, 666 HTMLTitleElement, 665 HTMLVideoElement, 740 JavaScript, 685 JSON, 719 KeyboardEvent, 659 Location, 536, 552, 553, 554 MediaList, 617 MessageEvent, 586, 587 NodeList, 561 Position, 814 PositionOptions, 818 ProgressEvent, 692 Screen, 538 stanu, 582 Storage, 823, 827 StorageEvent, 826 tekstowy, 608 Text, 541, 600, 612 Window, 537, 569, 570, 573, 575, 584, 588, 654, 827 właściwość, 96, 97, 98 XMLHttpRequest, 686, 691, 697, 704, 721

„ SKOROWIDZ

obramowanie, 249, 251, 751, 757, Patrz: tabela obramowanie, Patrz: element obramowanie obraz, 326, 404, 405, 409, 524, 765, 769 zastępczy, 735 obsługa błędów, 106 obszar przycinania, 790 odnośnik, 152, 153, 154, 161 graficzny, 327 oparty na obrazach, 154 wewnętrzny, 155 odtwarzanie natywne, 32, 33 odwołanie, 167 okno, 155, 570, 654 opcja wyboru, 309 Opera, 35, 211, 283, 300, 301, 387, 455, 493, 690, 691, 715, 742, 765, 816, 834 operator, 99, 111

P parametr funkcji, Patrz: funkcja parametry parser XML, 46 parsowanie, 556 pasek postępu, 339, 340 phrasing, Patrz: element treściowy piksel, 79, 326 referencyjny, 79 pismo logograficzne, 171, 172 plik, 709 audio, Patrz: audio graficzny, 326 odtwarzanie, 745 przesyłanie, 719 wczytywanie, 307, 308 wideo, Patrz: wideo płótno, Patrz: element canvas podpis, 243 podścieżka, 776, 780 podtytuł, 205 pole elementu, 346, 435 pływające, 442 przycinania, 415 tekstowe, 313 wyboru, 295 położenie geograficzne, 813 port, 130, 584 8080, 257 potomek, 47, 365 pozycjonowanie, 450 prawda/fałsz, 292 prefiks, 346, 491 data-, 597 programowanie obiektowe, 532 prostokąt, 752, 775, 779

protokół, 130, 584 ftp, 154 http, 154 HTTP, 133 https, 154 mailto, 154 prymityw, 100 przeciąganie, 53, 799, 800 przeglądarka, 30, 31, 32, 33, 45, 67, 146, 154, 165, 345, 547, 558 Apple Safari, Patrz: Safari Google Chrome, Patrz: Chrome historia, 575, 576, 577, 579, 581, 583 Internet Explorer, Patrz: Internet Explorer Mozilla Firefox, Patrz: Firefox NCSA Mosaic, 29 Netscape Navigator, Patrz: Netscape Navigator offline, 838 Opera, Patrz: Opera prefiks, Patrz: prefiks przejście, 489, 490, 494, 503 odwrócone, 493 tematyczne, 191 właściwość, 353 z przekształceniem, 511 przekazywanie komunikatów między dokumentami, 584 przekształcenie, 489, 508, 509, 511, 792, 796 punkt wyjścia, 510 właściwość, 353 przepełnienie, 429, 431, 433 tekstowe, 478 przestrzeń pionowa, 461 przeszukiwanie łańcuchowe, 564 przezroczystość, 514, 793 przycisk, 386 graficzny, 305 przyspieszeniomierz, 815 pseudoklasa, 375, 388 interfejsu, 382 pseudoselektor, 369, 372, 392

R ramka, 155, 332 rodzic, 47, 48, 74, 346

S Safari, 35, 211, 338, 493, 715, 816 Same origin policy, Patrz: żądanie międzyźródłowe Scalable Vector Graphics, Patrz: SVG sekcja, 203, 209, 225, 668 CACHE, 835, 836 FALLBACK, 835, 836

853

„ SKOROWIDZ

sekcja NETWORK, 838 tytuł, 225 SelectorGadget, 83 selektor, 234, 392 active, 390 after, 170, 199, 372, 373 atrybutów, 360, 362 before, 170, 199, 200, 372, 373 bezpośredni, 368 brata, 368, 383 checked, 383 CSS, 63, 346, 355, 563, 564 disabled, 382 dynamiczny, 388 dzieci, 366, 377 empty, 393 enabled, 382 first-child, 377 first-letter, 370 first-line, 370 focus, 391 hover, 389, 490 ID, 151, 359 in-range, 386, 387 invalid, 385 klasy, 358, 362 lang, 394 last-child, 378 link, 388 łączenie, 363 negacji, 383, 392 n-tego dziecka, 381 ogólny, 368 only-child, 379 only-of-type, 380 optional, 387 out-of-range, 386 podstawowy, 356 potomków, 365 pseudoelementów, 369, 370 pseudoelementów CSS, 170 pseudoklas, 369, 376, 388 pseudoklas interfejsu, 382 required, 387 root, 376 statyczny, 388 strukturalny, 376 target, 394 uniwersalny, 356, 358 valid, 385, 386 visited, 388, 389 serwer, 709, 838 titan, 257 utworzenie, 710

854

skalowanie, 797 grafiki wektorowe, Patrz: SVG skrót, 167, 168 klawiszowy, 49 skrypt, 142, 147, 256, 556 inline, 88, 143, 147 komunikacja, 584 śledzący, 148 wykonywalny po stronie klienta, 30 zaufany, 587 zewnętrzny, 88, 147 źródło, 584 słowo kluczowe function, 90 new, 688 return, 91 this, 95 var, 92 spacja, 472 stan rysowania, 754, 767 standard, 34 HTML, 31 HTML5, 33 RFC3339, 180 stopka, 211, 235, 236 footer, 220 styl aktywowanie, 620 analiza, 83 definiowanie, 62, 63, 65, 67 deklaracja, 61 dezaktywowanie, 620 dostęp, 621 dziedziczenie, Patrz: dziedziczenie elementu, 623, 624 graficzny, 751 importowanie, 66 inline, 62, 69, 549 kaskadowość, Patrz: kaskadowość, CSS nakładanie, 62 obliczony, 615, 635 osadzony, 63, 69 precyzja, 70 prosty, 61 przeglądarki, 67, 69 przetworzony, 83 selektor, 65, 83 użytkownika, 68, 69, 70 wartość, 62 inherit, 74 właściwość, 61, 67, 69 width, 75 zewnętrzny, 69 SVG, 34

„ SKOROWIDZ

system GPS, 815 operacyjny Apple iOS, Patrz: iOS szyfrowanie, 286, 316

Ś ścieżka, 776, 780, 789 śledzenie postępów wczytywania danych, 721

tryb offline, 832 typ boolean, 92, 93, 109 konwersja, 102, 103 MIME, 732, 833 number, 92, 93, 103, 109 prosty, 92 string, 92, 109 typografia, 482

U

T tabela, 229, 234, 236, 242, 249, 430, 435, 465, 513, 516, 668, 682 krawędzie, 518 nieregularna, 238 obramowanie, 516, 519 odstępy pomiędzy komórkami, 518 podpis, 520 puste komórki, 519 układ, 521 tablica, 104, 105, 106, 560 obiektów Attr, 598 obiektów HTMLElement, 561 wartości indeksowanych według nazwy właściwości, 597 tabulator, 472 tag, Patrz: znacznik tekst, 469, 600 cień, 481 dekorowanie, 479 dodany, 178 dzielenie wyrazów, 476 fonty, 482, 484, 485, 486 justowanie, 470 kierunek, 474 odstępy między wyrazami, 475 podkreślony, 161 podświetlony, 177 pomniejszony, 162 przekreślony, 159 przekształcanie, 479 rysowanie, 790 usunięty, 178 ważny, 160 wcięcie pierwszego wiersza, 478 właściwość, 352 wstawianie elementu, 612 zawijanie, 472 tło, Patrz: element tło treść numeryczna, 373 zapasowa, 750 zastępcza, 326, 336, 732 trójkąt, 780

upuszczanie, 53, 799, 800

W W3C, 31, 32, 34, 259, 345 wartość, 132 domyślna, 280 liczbowa, 339 noarchive, 132 nofollow, 132 noindex, 132 null, 108, 109, 110, 111, 563 numeryczna, 290 obliczona, 626 skonfigurowana, 626 undefined, 108, 109, 110, 111 ważność, 631, 632 wcięcie pierwszego wiersza, 478 Webkit, 417 wideo, 32, 731, 732, 765, 770 format, 737 odtwarzanie, 745 źródło, 736 właściwość, 353 animacji, 353, 497 counter, 199, 200 counter-reset, 373 CSSStyleDeclaration, 627 layoutu, 351 length, 563 pomocnicza, 625, 627 przejścia, 353, 491, 494 przekształcenia, 353 sprawdzanie automatyczne, 630 tekstu, 352 width, 137 World Wide Web Consortium, Patrz: W3C współrzędne, 306 wtyczka, 30, 31, 32, 111, 333, 342 wynik obliczenia, 316 wyobrażenie wartości liczbowych, 339 wypełnienie, 757 wzór, 765

855

„ SKOROWIDZ

X XHTML, 46 XML, 46 XSS, 701, 703

Y YouTube, 33, 334

Z zakładka, 155 zapytanie, 573 zasoby audiowizualne, 342 osadzanie, 325, 333, 342 pobieranie z wyprzedzeniem, 142 źródła, 584 zdarzenie, 531, 554, 569, 584, 639 atrybut, 640 bąbelkowanie, 651, 653 blur, 544 cel, 647 click, 544, 653 dblclick, 544 DOM, 544 faza bąbelkowania, 647, 649, 651 faza celu, 647, 649, 650 faza przechwytywania, 647 focus, 544 focusin, 544 focusout, 544 fokusowania, 657 formularza, 660 keydown, 544 keypress, 544 keyup, 544 klawiatury, 658 message, 586 mousedown, 544 mouseenter, 544 MouseEvent, 806 mouseleave, 544 mousemove, 544 mouseout, 544, 654 mouseover, 544, 640, 654 mouseup, 544

856

myszy, 654 nasłuchiwacz, 644, 648, 650 nasłuchiwanie, 586 onabort, 544 onafterprint, 544 onbeforeprint, 544 onhashchange, 544 onmouseover, 640 onpopstate, 544 onresize, 544 onunload, 544 progress, 691 prosta procedura obsługi, 640, 642 przeciąganie, 800, 806 readystatechange, 557, 688, 691, 692 reset, 544 storage, 826 submit, 544 typ, 645 zmienna, 92 globalna, 92 lokalna, 92 typ, 92, Patrz też: typ window, 570 znacznik, 40, 116, 127 otwierający, 42, 44, 548 otwierającym, 732 pojedynczy, 42, 44 zamykający, 42, 44, 145, 732 znak biały, 472 ruby, 172 specjalny, 260

Ź źródło audio, 739 zaufane, 587

Ż żądanie, 689, 694, 701, 712 anulowanie, 704 GET, 259, 689 międzyźródłowe, 701 nagłówek, 697, 704 POST, 259, 689 preflight, 70

„ NOTATKI

845