Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00488 013815 11056495 na godz. na dobę w sumie
Tajemnice JavaScriptu. Podręcznik ninja - książka
Tajemnice JavaScriptu. Podręcznik ninja - książka
Autor: , Liczba stron: 432
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-8504-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).

Najlepsze porady dla programistów JavaScript!

JavaScript to język programowania, który wymaga od programisty szerokiej wiedzy i dokładności. Chwila nieuwagi może spowodować poważne problemy, trudne do wykrycia. Jak sobie radzić w tym wymagającym środowisku? Jak zwinnie poruszać się pomiędzy zastawionymi pułapkami?

Na te i wiele innych pytań znajdziesz odpowiedź w tej książce. Dzięki niej będziesz zwinnie jak ninja przemykał pomiędzy niuansami języka JavaScript. W trakcie lektury poznasz dogłębnie najlepszą broń przeciw błędom — debuger oraz testy automatyczne. W kolejnych rozdziałach nauczysz się korzystać z potencjału funkcji oraz domknięć. W tej doskonałej książce znajdziesz również szerokie omówienie wyrażeń regularnych — tematu, który spędza programistom sen z oczu. Ponadto szczegółowo poznasz zasady programowania obiektowego w JavaScripcie, modyfikowania drzewa DOM, wsparcia dla różnych przeglądarek oraz obsługi zdarzeń. Książka ta zawiera praktyczne porady, które sprawdzą się w codziennej pracy z językiem JavaScript. Jest to obowiązkowa pozycja dla każdego programisty!

Dzięki tej książce:

- nauczysz się pisać testy automatyczne
- wykorzystasz wyrażenia regularne w JavaScripcie
- zmodyfikujesz drzewo DOM
- opanujesz niuanse języka JavaScript

Pisz kod JavaScript jak prawdziwy ninja!

 


 

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Secrets of the JavaScript Ninja Tłumaczenie: Piotr Pilch ISBN: 978-83-246-8504-2 Original edition copyright © 2013 by Manning Publications Co. All rights reserved Polish edition copyright © 2014 by HELION SA. 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 bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Projekt okładki: Studio Gravite/Olsztyn Obarek, Pokoński, Pazdrijowski, Zaprucki Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock Images LLC. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/tajani.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/tajani Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci Przedmowa 9 Podzi(cid:218)kowania 11 O ksi(cid:200)(cid:285)ce 13 O autorach 19 CZ(cid:125)(cid:165)(cid:109) I. PRZYGOTOWANIE DO TRENINGU 21 Rozdzia(cid:239) 1. Zosta(cid:241) wojownikiem 23 J(cid:218)zyk JavaScript 25 1.1. Omawiane biblioteki j(cid:218)zyka JavaScript 24 1.2. 1.3. Kwestie dotycz(cid:200)ce obs(cid:239)ugi wielu przegl(cid:200)darek 26 1.4. Najlepsze obecnie praktyki 30 Najlepsze obecnie praktyki — testowanie 30 Najlepsze obecnie praktyki — analizowanie wydajno(cid:258)ci 31 1.4.1. 1.4.2. Podsumowanie 32 1.5. Rozdzia(cid:239) 2. Bro(cid:241) w postaci testowania i debugowania 33 2.1. Debugowanie kodu 34 2.1.1. 2.1.2. Rejestrowanie 34 Punkty wstrzymania 36 2.2. Generowanie testu 38 2.3. (cid:165)rodowiska testowania 40 2.3.1. 2.3.2. 2.3.3. 2.3.4. QUnit 43 YUI Test 43 JsUnit 43 Nowsze (cid:258)rodowiska testów jednostkowych 43 2.4. Fundamenty pakietu testów 44 Asercja 44 Grupy testów 45 Testowanie asynchroniczne 47 2.4.1. 2.4.2. 2.4.3. Podsumowanie 49 2.5. CZ(cid:125)(cid:165)(cid:109) II. TRENING UCZNIA 51 Rozdzia(cid:239) 3. Funkcje s(cid:200) najwa(cid:285)niejsze 53 3.1. Na czym polega funkcyjno(cid:258)(cid:202)? 54 3.1.1. 3.1.2. Dlaczego wa(cid:285)na jest funkcyjna natura j(cid:218)zyka JavaScript? 55 Sortowanie za pomoc(cid:200) komparatora 60 Kup książkęPoleć książkę 4 Spis tre(cid:258)ci 3.2. Deklaracje 63 3.2.1. Okre(cid:258)lanie zasi(cid:218)gu i funkcje 66 3.3. Wywo(cid:239)ania 71 Od argumentów do parametrów funkcji 72 3.3.1. 3.3.2. Wywo(cid:239)anie funkcji jako funkcji 73 3.3.3. Wywo(cid:239)anie funkcji jako metody 74 3.3.4. Wywo(cid:239)anie funkcji jako konstruktora 77 3.3.5. Wywo(cid:239)anie za pomoc(cid:200) metod apply() i call() 80 Podsumowanie 84 3.4. Rozdzia(cid:239) 4. Pos(cid:239)ugiwanie si(cid:218) funkcjami 87 4.1. Funkcje anonimowe 88 4.2. Rekurencja 90 Rekurencja w funkcjach z nazw(cid:200) 90 Rekurencja z metodami 92 Problem z podkradanym odwo(cid:239)aniem 93 4.2.1. 4.2.2. 4.2.3. 4.2.4. Wstawiane funkcje z nazw(cid:200) 95 4.2.5. W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) callee 97 4.3. U(cid:285)ywanie funkcji jako obiektów 98 Przechowywanie funkcji 99 Funkcje z automatycznym zapami(cid:218)tywaniem 100 Oszukiwanie metod tablicowych 103 4.3.1. 4.3.2. 4.3.3. 4.4. Listy argumentów o zmiennej d(cid:239)ugo(cid:258)ci 105 U(cid:285)ycie metody apply() do dostarczania zmiennej argumentów 105 Przeci(cid:200)(cid:285)anie funkcji 107 4.4.1. 4.4.2. Sprawdzanie pod k(cid:200)tem funkcji 116 Podsumowanie 118 4.5. 4.6. Rozdzia(cid:239) 5. Zamkni(cid:218)cie si(cid:218) w domkni(cid:218)ciach 119 5.1. 5.2. Zmienne prywatne 125 Sposób dzia(cid:239)ania domkni(cid:218)(cid:202) 120 Praktyczne wykorzystanie domkni(cid:218)(cid:202) 125 5.2.1. 5.2.2. Wywo(cid:239)ania zwrotne i liczniki czasu 127 Powi(cid:200)zanie kontekstów funkcji 131 5.3. 5.4. Cz(cid:218)(cid:258)ciowe stosowanie funkcji 136 Przes(cid:239)anianie dzia(cid:239)ania funkcji 139 5.5. 5.5.1. 5.5.2. Zapami(cid:218)tywanie 139 Opakowanie funkcji 142 5.6. Funkcje bezpo(cid:258)rednie 144 Zasi(cid:218)g tymczasowy i zmienne prywatne 146 P(cid:218)tle 150 Opakowywanie biblioteki 152 5.6.1. 5.6.2. 5.6.3. Podsumowanie 153 5.7. Kup książkęPoleć książkę Spis tre(cid:258)ci 5 Rozdzia(cid:239) 6. Obiektowo(cid:258)(cid:202) z prototypami 155 6.1. Tworzenie instancji i prototypy 156 Tworzenie instancji obiektu 156 Okre(cid:258)lanie typu obiektu za po(cid:258)rednictwem konstruktorów 164 Dziedziczenie i (cid:239)a(cid:241)cuch prototypów 166 Prototypy modelu DOM j(cid:218)zyka HTML 171 6.1.1. 6.1.2. 6.1.3. 6.1.4. Pu(cid:239)apki! 173 6.2.1. 6.2.2. 6.2.3. 6.2.4. Pisanie kodu bardziej zbli(cid:285)onego do kodu z klasami 183 6.3.1. Sprawdzanie pod k(cid:200)tem serializacji funkcji 186 Inicjalizacja podklas 187 6.3.2. 6.3.3. Zachowywanie supermetod 188 Podsumowanie 190 Rozszerzanie obiektu 173 Rozszerzanie liczby 175 U(cid:285)ywanie podklas dla wbudowanych obiektów 177 Problemy z tworzeniem instancji 178 6.2. 6.3. 6.4. Rozdzia(cid:239) 7. Borykanie si(cid:218) z wyra(cid:285)eniami regularnymi 193 7.1. Dlaczego wyra(cid:285)enia regularne s(cid:200) tak wa(cid:285)ne? 194 7.2. Od(cid:258)wie(cid:285)enie informacji o wyra(cid:285)eniach regularnych 195 7.2.1. 7.2.2. Wyrazy i operatory 197 Omówienie wyra(cid:285)e(cid:241) regularnych 195 7.3. Kompilowanie wyra(cid:285)e(cid:241) regularnych 201 7.4. Przechwytywanie pasuj(cid:200)cych segmentów 204 7.4.1. Wykonywanie prostych przechwytywa(cid:241) 204 7.4.2. 7.4.3. 7.4.4. Zast(cid:218)powanie za pomoc(cid:200) funkcji 209 Dopasowywanie za pomoc(cid:200) globalnych wyra(cid:285)e(cid:241) regularnych 205 Przywo(cid:239)ywanie przechwytywa(cid:241) 207 Grupy bez przechwytywania 208 7.5. 7.6. Rozwi(cid:200)zywanie typowych problemów z wykorzystaniem wyra(cid:285)e(cid:241) regularnych 212 Obcinanie (cid:239)a(cid:241)cucha 212 Dopasowywanie znaków nowego wiersza 214 Unicode 215 Znaki o zmienionym znaczeniu 216 7.6.1. 7.6.2. 7.6.3. 7.6.4. Podsumowanie 217 7.7. Rozdzia(cid:239) 8. W(cid:200)tki i liczniki czasu 219 8.1. Sposób dzia(cid:239)ania liczników czasu i w(cid:200)tkowo(cid:258)ci 220 8.1.1. Ustawianie i usuwanie liczników czasu 220 8.1.2. Wykonywanie licznika czasu w obr(cid:218)bie w(cid:200)tku wykonywania 221 8.1.3. Ró(cid:285)nice mi(cid:218)dzy czasami oczekiwania i interwa(cid:239)ami 223 8.2. Minimalne opó(cid:283)nienie licznika czasu i wiarygodno(cid:258)(cid:202) 225 8.3. Radzenie sobie z przetwarzaniem kosztownym obliczeniowo 228 8.4. 8.5. 8.6. Scentralizowane kontrolowanie liczników czasu 231 Testowanie asynchroniczne 235 Podsumowanie 236 Kup książkęPoleć książkę 6 Spis tre(cid:258)ci CZ(cid:125)(cid:165)(cid:109) III. TRENING WOJOWNIKA 237 Rozdzia(cid:239) 9. Alchemia wojownika. Analizowanie kodu w (cid:258)rodowisku wykonawczym 239 9.1. Mechanizmy analizy kodu 240 Analizowanie za pomoc(cid:200) metody eval() 240 Analizowanie za po(cid:258)rednictwem konstruktora Function 243 Analizowanie przy u(cid:285)yciu liczników czasu 244 Analizowanie w zasi(cid:218)gu globalnym 244 Bezpieczne analizowanie kodu 247 9.1.1. 9.1.2. 9.1.3. 9.1.4. 9.1.5. „Dekompilacja” funkcji 248 9.2. 9.3. Analizowanie kodu w praktyce 251 Przekszta(cid:239)canie (cid:239)a(cid:241)cuchów JSON 251 Importowanie kodu z przestrzeni(cid:200) nazw 253 Kompresja i ukrywanie kodu JavaScript 254 Dynamiczne przebudowywanie kodu 256 Znaczniki skryptu zorientowanego aspektowo 257 9.3.1. 9.3.2. 9.3.3. 9.3.4. 9.3.5. 9.3.6. Metaj(cid:218)zyki i j(cid:218)zyki DSL 258 Podsumowanie 262 9.4. Rozdzia(cid:239) 10. Instrukcje with 263 10.1. O co chodzi z instrukcj(cid:200) with? 264 10.1.1. 10.1.2. 10.1.3. Kwestie dotycz(cid:200)ce wydajno(cid:258)ci 268 Przywo(cid:239)ywanie w(cid:239)a(cid:258)ciwo(cid:258)ci w zasi(cid:218)gu instrukcji with 264 Przypisania w zasi(cid:218)gu instrukcji with 266 10.2. Rzeczywiste przyk(cid:239)ady 270 10.3. Importowanie kodu z przestrzeni(cid:200) nazw 272 10.4. Testowanie 272 10.5. Stosowanie szablonów z instrukcj(cid:200) with 273 10.6. Podsumowanie 276 Rozdzia(cid:239) 11. Opracowywanie strategii obs(cid:239)ugi wielu przegl(cid:200)darek 277 11.1. Wybór przegl(cid:200)darek do obs(cid:239)ugi 278 11.2. Pi(cid:218)(cid:202) podstawowych kwestii programistycznych 279 11.2.1. B(cid:239)(cid:218)dy i ró(cid:285)nice w przegl(cid:200)darkach 281 11.2.2. Poprawki b(cid:239)(cid:218)dów w przegl(cid:200)darce 281 11.2.3. Radzenie sobie z zewn(cid:218)trznym kodem i znacznikami 283 11.2.4. Brakuj(cid:200)ce funkcje 289 11.2.5. Regresje 290 11.3. Strategie implementowania 292 11.3.1. Bezpieczne poprawki dla ró(cid:285)nych przegl(cid:200)darek 292 11.3.2. Wykrywanie obiektu 294 11.3.3. Symulacja funkcji 295 11.4. Zmniejszanie liczby za(cid:239)o(cid:285)e(cid:241) 301 11.5. Podsumowanie 303 Kup książkęPoleć książkę Spis tre(cid:258)ci 7 Rozdzia(cid:239) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS 305 12.1. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM 307 12.1.1. Nazewnictwo w ró(cid:285)nych przegl(cid:200)darkach 308 12.1.2. Ograniczenia dotycz(cid:200)ce nazw 309 12.1.3. Ró(cid:285)nice mi(cid:218)dzy j(cid:218)zykami XML i HTML 310 12.1.4. Dzia(cid:239)anie atrybutów niestandardowych 310 12.1.5. Kwestie dotycz(cid:200)ce wydajno(cid:258)ci 311 12.2. Problemy z atrybutami w przypadku obs(cid:239)ugi wielu przegl(cid:200)darek 315 12.2.1. Rozszerzanie nazwy (identyfikatora) modelu DOM 315 12.2.2. Normalizacja adresu URL 317 12.2.3. Atrybut style 318 12.2.4. Atrybut type 319 12.2.5. 12.2.6. Nazwy w(cid:218)z(cid:239)ów 321 Problem z indeksem tabulacji 320 12.3. Problemy zwi(cid:200)zane z atrybutami stylów 321 12.3.1. Gdzie s(cid:200) moje style? 322 12.3.2. Okre(cid:258)lanie nazw w(cid:239)a(cid:258)ciwo(cid:258)ci stylów 324 12.3.3. W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) stylów float 326 12.3.4. Konwersja warto(cid:258)ci pikseli 326 12.3.5. Okre(cid:258)lanie wysoko(cid:258)ci i szeroko(cid:258)ci 327 12.3.6. 12.3.7. Przenikanie nieprzezroczysto(cid:258)ci 332 Poskromienie kolorowego ko(cid:239)a 335 12.4. Uzyskiwanie stylów obliczanych 338 12.5. Podsumowanie 341 CZ(cid:125)(cid:165)(cid:109) IV. TRENING MISTRZA 343 Rozdzia(cid:239) 13. Radzenie sobie ze zdarzeniami 345 13.1. Techniki wi(cid:200)zania zdarze(cid:241) i anulowania powi(cid:200)za(cid:241) 346 13.2. Obiekt Event 351 13.3. Zarz(cid:200)dzanie procedurami obs(cid:239)ugi 355 13.3.1. 13.3.2. Scentralizowane przechowywanie powi(cid:200)zanych informacji 355 Zarz(cid:200)dzanie procedurami obs(cid:239)ugi zdarze(cid:241) 358 13.4. Wyzwalanie zdarze(cid:241) 369 13.4.1. Zdarzenia niestandardowe 371 13.5. Propagacja i delegowanie 375 13.5.1. Delegowanie zdarze(cid:241) do elementu nadrz(cid:218)dnego 376 13.5.2. Radzenie sobie z mankamentami przegl(cid:200)darek 377 13.6. Zdarzenie gotowo(cid:258)ci dokumentu 387 13.7. Podsumowanie 389 Rozdzia(cid:239) 14. Modyfikowanie modelu DOM 393 14.1. Umieszczanie kodu HTML w modelu DOM 394 Przekszta(cid:239)canie kodu HTML w model DOM 396 14.1.1. 14.1.2. Wstawianie do dokumentu 399 14.1.3. Wykonywanie skryptu 401 Kup książkęPoleć książkę 8 Spis tre(cid:258)ci 14.2. Klonowanie elementów 403 14.3. Usuwanie elementów 405 14.4. Tre(cid:258)(cid:202) tekstowa 407 14.4.1. Ustawianie tekstu 408 Pobieranie tekstu 409 14.4.2. 14.5. Podsumowanie 410 Rozdzia(cid:239) 15. Mechanizmy selektorów CSS 411 15.1. Interfejs API selektorów organizacji W3C 413 15.2. U(cid:285)ycie j(cid:218)zyka XPath do znajdowania elementów 416 15.3. Implementacja czystego modelu DOM 418 15.3.1. Analizowanie selektora 421 15.3.2. Znajdowanie elementów 422 15.3.3. Filtrowanie zestawu 423 15.3.4. Rekurencja i scalanie 424 15.3.5. Wst(cid:218)puj(cid:200)cy mechanizm selektorów 425 15.4. Podsumowanie 427 Skorowidz 428 Kup książkęPoleć książkę Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS W tym rozdziale: (cid:81) Atrybuty i w(cid:225)a(cid:286)ciwo(cid:286)ci modelu DOM (cid:81) Radzenie sobie z atrybutami i stylami w wielu przegl(cid:261)darkach (cid:81) Obs(cid:225)uga w(cid:225)a(cid:286)ciwo(cid:286)ci wymiarów elementu (cid:81) Wykrywanie stylów obliczanych Z wyj(cid:200)tkiem poprzedniego rozdzia(cid:239)u spora cz(cid:218)(cid:258)(cid:202) ksi(cid:200)(cid:285)ki zosta(cid:239)a dotychczas po(cid:258)wi(cid:218)- cona j(cid:218)zykowi JavaScript. Cho(cid:202) z samym j(cid:218)zykiem JavaScript zwi(cid:200)zanych jest mnó- stwo niuansów, po po(cid:239)(cid:200)czeniu go z modelem DOM przegl(cid:200)darki wszystko stanie si(cid:218) naprawd(cid:218) zagmatwane. Zrozumienie poj(cid:218)(cid:202) zwi(cid:200)zanych z modelem DOM, a tak(cid:285)e tego, jaki ma to zwi(cid:200)- zek z j(cid:218)zykiem JavaScript, stanowi kluczowy element na drodze do zostania wojow- nikiem j(cid:218)zyka JavaScript. W szczególno(cid:258)ci trzeba wspomnie(cid:202) o zaskakuj(cid:200)cych spo- sobach, przy których u(cid:285)yciu pewne poj(cid:218)cia dotycz(cid:200)ce modelu DOM wydaj(cid:200) si(cid:218) przeczy(cid:202) logice. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM wywo(cid:239)a(cid:239)y u wielu twórców stron z kodem JavaScript poczucie zagubienia. W przypadku atrybutów i w(cid:239)a(cid:258)ciwo(cid:258)ci nie tylko wyst(cid:218)puje kilka bardzo specyficznych zachowa(cid:241), ale równie(cid:285) istniej(cid:200) kwe- stie, którym towarzyszy wi(cid:218)cej b(cid:239)(cid:218)dów i problemów z obs(cid:239)ug(cid:200) wielu przegl(cid:200)darek. Kup książkęPoleć książkę 306 ROZDZIA(cid:224) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS Jednak(cid:285)e atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci stanowi(cid:200) wa(cid:285)ne zagadnienia. Atrybuty s(cid:200) inte- graln(cid:200) cz(cid:218)(cid:258)ci(cid:200) procesu budowania modelu DOM, a w(cid:239)a(cid:258)ciwo(cid:258)ci zapewniaj(cid:200) pod- stawowe (cid:258)rodki przechowywania przez elementy informacji o (cid:258)rodowisku wyko- nawczym, a ponadto uzyskiwania do nich dost(cid:218)pu. Przyjrzyjmy si(cid:218) krótkiemu przyk(cid:239)adowi, który demonstruje mo(cid:285)liwo(cid:258)ci wprowa- dzania w stan konsternacji: img src= ../images/ninja-with-nunchuks.png script type= text/javascript var image = document.getElementsByTagName( img )[0]; var newSrc = ../images/ninja-with-pole.png ; image.src = newSrc; assert(image.src === newSrc, (cid:315)ród(cid:273)o obrazu to teraz + image.src); assert(image.getAttribute( src ) === ../images/ninja-with-nunchuks.png , Atrybut src obrazu to + image.getAttribute( src )); /script W tym fragmencie kodu tworzony jest znacznik obrazu image, uzyskiwane jest odwo- (cid:239)anie do niego i zmieniana jest warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci src na now(cid:200). Cho(cid:202) wydaje si(cid:218) to naprawd(cid:218) proste, dla pewno(cid:258)ci uruchamiane s(cid:200) nast(cid:218)puj(cid:200)ce dwa testy: (cid:81) Sprawdzane jest, czy w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) src uzyska(cid:239)a warto(cid:258)(cid:202), któr(cid:200) w(cid:239)a(cid:258)nie jej przekazano W ko(cid:241)cu, je(cid:258)li zostanie zdefiniowane przypisanie x = 213, z pewno(cid:258)ci(cid:200) b(cid:218)dzie mo(cid:285)na si(cid:218) spodziewa(cid:202), (cid:285)e warto(cid:258)ci(cid:200) zmiennej x b(cid:218)dzie 213. (cid:81) Nie zmodyfikowano atrybutu, dlatego powinien pozosta(cid:202) bez zmian. Czy to prawda? Jednak(cid:285)e po za(cid:239)adowaniu kodu w przegl(cid:200)darce oka(cid:285)e si(cid:218), (cid:285)e oba testy si(cid:218) nie powiod(cid:200). Stwierdzimy, (cid:285)e w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) src nie ma przypisanej warto(cid:258)ci, lecz raczej co(cid:258) podobnego do: http://localhost/ninja/images/ninja-with-pole.png Czy je(cid:258)li w(cid:239)a(cid:258)ciwo(cid:258)ci przypisano warto(cid:258)(cid:202), nie nale(cid:285)y spodziewa(cid:202) si(cid:218), (cid:285)e b(cid:218)dzie mie(cid:202) dok(cid:239)adnie tak(cid:200) warto(cid:258)(cid:202)? Co jeszcze dziwniejsze, cho(cid:202) nie zmodyfikowano atrybutu w elemencie, niepo- wodzenie testu pokazuje, (cid:285)e warto(cid:258)(cid:202) atrybutu src zmieni(cid:239)a si(cid:218) na: ../images/ninja-with-pole.png O co w tym chodzi? W rozdziale zostan(cid:200) omówione wszystkie zagadki stwarzane przez przegl(cid:200)darki w odniesieniu do w(cid:239)a(cid:258)ciwo(cid:258)ci i atrybutów elementów. Ponadto wyja(cid:258)nimy, dlaczego wyniki nie by(cid:239)y dok(cid:239)adnie takie, jakich oczekiwano. To samo dotyczy arkuszy stylów CSS i okre(cid:258)lania stylów elementów. Wiele trud- no(cid:258)ci, które pojawiaj(cid:200) si(cid:218) podczas tworzenia dynamicznej aplikacji internetowej, wynika ze z(cid:239)o(cid:285)ono(cid:258)ci ustawiania i pobierania stylów elementów. Cho(cid:202) w ksi(cid:200)(cid:285)ce nie Kup książkęPoleć książkę 12.1. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM 307 b(cid:218)dzie mo(cid:285)liwe pomieszczenie ca(cid:239)ej wiedzy na temat obs(cid:239)ugi stylów elementów (jest ona wystarczaj(cid:200)co obszerna, by mog(cid:239)a zape(cid:239)ni(cid:202) ca(cid:239)(cid:200) osobn(cid:200) ksi(cid:200)(cid:285)k(cid:218)), zostan(cid:200) omówione najwa(cid:285)niejsze rzeczy. Zacznijmy od dok(cid:239)adnego zrozumienia, czym s(cid:200) atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci elementów. 12.1. Atrybuty i w(cid:225)a(cid:286)ciwo(cid:286)ci modelu DOM W przypadku uzyskiwania dost(cid:218)pu do warto(cid:258)ci atrybutów elementów mo(cid:285)liwe s(cid:200) dwie nast(cid:218)puj(cid:200)ce opcje: u(cid:285)ycie tradycyjnych metod getAttribute i setAttribute modelu DOM lub zastosowanie w(cid:239)a(cid:258)ciwo(cid:258)ci obiektów modelu DOM, które odpo- wiadaj(cid:200) atrybutom. Aby na przyk(cid:239)ad uzyska(cid:202) atrybut id elementu, którego odwo(cid:239)anie jest przecho- wywane w zmiennej e, mo(cid:285)esz u(cid:285)y(cid:202) jednej z nast(cid:218)puj(cid:200)cych instrukcji: e.getAttribute( id ) e.id W ka(cid:285)dym przypadku zostanie uzyskana warto(cid:258)(cid:202) atrybutu id. Przeanalizujmy poni(cid:285)szy kod (listing 12.1), aby lepiej zrozumie(cid:202), jak zachowuj(cid:200) si(cid:218) warto(cid:258)ci atrybutów oraz odpowiadaj(cid:200)ce im w(cid:239)a(cid:258)ciwo(cid:258)ci. Listing 12.1. Uzyskiwanie dost(cid:266)pu do warto(cid:286)ci atrybutów za po(cid:286)rednictwem metod i w(cid:225)a(cid:286)ciwo(cid:286)ci modelu DOM div /div script type= text/javascript window.onload = function(){ var div = document.getElementsByTagName( div )[0]; div.setAttribute( id , ninja-1 ); assert(div.getAttribute( id ) === ninja-1 , Pomy(cid:295)lnie zmieniono atrybut. ); div.id = ninja-2 ; assert(div.id === ninja-2 , Pomy(cid:295)lnie zmieniono w(cid:273)a(cid:295)ciwo(cid:295)(cid:232). ); Uzyskuje odwo(cid:225)anie do elementu. Testuje metod(cid:266) modelu DOM. Testuje warto(cid:286)(cid:252) w(cid:225)a(cid:286)ciwo(cid:286)ci. div.id = ninja-3 ; assert(div.id === ninja-3 , Pomy(cid:295)lnie zmieniono w(cid:273)a(cid:295)ciwo(cid:295)(cid:232). ); assert(div.getAttribute( id ) === ninja-3 , Pomy(cid:295)lnie zmieniono atrybut za po(cid:295)rednictwem w(cid:273)a(cid:295)ciwo(cid:295)ci. ); Testuje zgodno(cid:286)(cid:252) w(cid:225)a(cid:286)ciwo(cid:286)ci (atrybutu). div.setAttribute( id , ninja-4 ); assert(div.id === ninja-4 , Pomy(cid:295)lnie zmieniono w(cid:273)a(cid:295)ciwo(cid:295)(cid:232) za po(cid:295)rednictwem atrybutu. ); assert(div.getAttribute( id ) === ninja-4 , Pomy(cid:295)lnie zmieniono atrybut. ); Dodatkowo testuje zgodno(cid:286)(cid:252) w(cid:225)a(cid:286)ciwo(cid:286)ci (atrybutu). }; /script Kup książkęPoleć książkę 308 ROZDZIA(cid:224) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS W przyk(cid:239)adzie zaprezentowano interesuj(cid:200)ce zachowanie dotycz(cid:200)ce atrybutów i w(cid:239)a- (cid:258)ciwo(cid:258)ci elementów. Najpierw definiowany jest prosty element div , który b(cid:218)dzie u(cid:285)ywany jako przedmiot testu. W obr(cid:218)bie procedury obs(cid:239)ugi (cid:239)adowania strony (zapewnia, (cid:285)e zosta(cid:239)o zako(cid:241)czone budowanie modelu DOM) uzyskiwane jest odwo- (cid:239)anie do jedynego elementu div , a nast(cid:218)pnie wykonywanych jest kilka testów. W pierwszym te(cid:258)cie dla atrybutu id ustawiono warto(cid:258)(cid:202) ninja-1 za po(cid:258)red- nictwem metody setAttribute(). Nast(cid:218)pnie potwierdzane jest, (cid:285)e metoda getAttri (cid:180)bute() zwraca t(cid:218) sam(cid:200) warto(cid:258)(cid:202) dla tego samego atrybutu. Nie powinno by(cid:202) zasko- czeniem stwierdzenie, (cid:285)e ten test zadzia(cid:239)a po prostu (cid:258)wietnie po za(cid:239)adowaniu strony. dla w(cid:239)a(cid:258)ciwo(cid:258)ci id ustawiana jest warto(cid:258)(cid:202) ninja-2 , a nast(cid:218)pnie sprawdzane jest, czy warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci faktycznie zosta(cid:239)a zmieniona. (cid:191)aden problem. Podobnie w nast(cid:218)pnym te(cid:258)cie Przy nast(cid:218)pnym te(cid:258)cie wszystko zaczyna si(cid:218) robi(cid:202) interesuj(cid:200)ce. Ponownie dla w(cid:239)a(cid:258)ciwo(cid:258)ci id ustawiana jest nowa warto(cid:258)(cid:202) (w tym przypadku ninja-3 ), po czym jeszcze raz sprawdzane jest, czy zmieni(cid:239)a si(cid:218) warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci. Tym razem jednak potwierdzane jest tak(cid:285)e, (cid:285)e nie tylko powinna zosta(cid:202) zmieniona warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci, ale równie(cid:285) warto(cid:258)(cid:202) atrybutu id. Obie asercje ko(cid:241)cz(cid:200) si(cid:218) powodzeniem. Na podstawie tego stwierdzamy, (cid:285)e w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) id i atrybut id s(cid:200) jako(cid:258) ze sob(cid:200) powi(cid:200)- zane. Zmiana w(cid:239)a(cid:258)ciwo(cid:258)ci id spowoduje te(cid:285) zmodyfikowanie warto(cid:258)ci atrybutu id. potwierdza, (cid:285)e sprawdza si(cid:218) tak(cid:285)e inne rozwi(cid:200)zanie: ustawienie Nast(cid:218)pny test warto(cid:258)ci atrybutu równie(cid:285) powoduje zmian(cid:218) odpowiedniej warto(cid:258)ci w(cid:239)a(cid:258)ciwo(cid:258)ci. Nie pozwól jednak wprowadzi(cid:202) si(cid:218) tym w b(cid:239)(cid:200)d, my(cid:258)l(cid:200)c, (cid:285)e w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) i atrybut u(cid:285)ywaj(cid:200) tej samej warto(cid:258)ci, poniewa(cid:285) tak nie jest. W dalszej cz(cid:218)(cid:258)ci rozdzia(cid:239)u oka(cid:285)e si(cid:218), (cid:285)e atrybut i odpowiadaj(cid:200)ca mu w(cid:239)a(cid:258)ciwo(cid:258)(cid:202), cho(cid:202) powi(cid:200)zane, nie zawsze s(cid:200) iden- tyczne. By(cid:239)a ju(cid:285) o tym mowa na pocz(cid:200)tku rozdzia(cid:239)u. W odniesieniu do atrybutów i w(cid:239)a(cid:258)ciwo(cid:258)ci istnieje pi(cid:218)(cid:202) nast(cid:218)puj(cid:200)cych wa(cid:285)nych kwestii do rozwa(cid:285)enia: (cid:81) nazewnictwo w przypadku wielu przegl(cid:200)darek, (cid:81) ograniczenia dotycz(cid:200)ce nazewnictwa, (cid:81) (cid:81) niestandardowe dzia(cid:239)anie atrybutów, (cid:81) wydajno(cid:258)(cid:202). ró(cid:285)nice mi(cid:218)dzy j(cid:218)zykami HTML i XML, Przyjrzyjmy si(cid:218) ka(cid:285)dej z tych kwestii. 12.1.1. Nazewnictwo w ró(cid:298)nych przegl(cid:261)darkach W przypadku okre(cid:258)lania nazw atrybutów i odpowiadaj(cid:200)cych im w(cid:239)a(cid:258)ciwo(cid:258)ci nazwy w(cid:239)a(cid:258)ciwo(cid:258)ci s(cid:200) generalnie bardziej spójne w poszczególnych przegl(cid:200)darkach. Je(cid:258)li mo(cid:285)liwe jest uzyskanie dost(cid:218)pu w jednej przegl(cid:200)darce do w(cid:239)a(cid:258)ciwo(cid:258)ci przy u(cid:285)yciu okre(cid:258)lonej nazwy, s(cid:200) spore szanse na to, (cid:285)e w innych przegl(cid:200)darkach b(cid:218)dzie stoso- wana taka sama nazwa. Cho(cid:202) istniej(cid:200) pewne ró(cid:285)nice, zwykle wi(cid:218)cej ró(cid:285)nic wyst(cid:218)- puje w przypadku nazewnictwa atrybutów ni(cid:285) w(cid:239)a(cid:258)ciwo(cid:258)ci. Kup książkęPoleć książkę 12.1. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM 309 Cho(cid:202) na przyk(cid:239)ad w wi(cid:218)kszo(cid:258)ci przegl(cid:200)darek atrybut class mo(cid:285)na uzyska(cid:202) jako class, przegl(cid:200)darka Internet Explorer wymaga nazwy className. Prawdopodobnie wynika to z tego (jak si(cid:218) wkrótce oka(cid:285)e), (cid:285)e nazwa w(cid:239)a(cid:258)ciwo(cid:258)ci to className. Ozna- cza to, (cid:285)e w przegl(cid:200)darce Internet Explorer nazwa atrybutu i nazwa w(cid:239)a(cid:258)ciwo(cid:258)ci s(cid:200) spójne. Cho(cid:202) spójno(cid:258)(cid:202) przewa(cid:285)nie jest czym(cid:258) dobrym, ró(cid:285)nice w nazewnictwie w przypadku poszczególnych przegl(cid:200)darek mog(cid:200) by(cid:202) do(cid:258)(cid:202) frustruj(cid:200)ce. Biblioteki, takie jak jQuery, u(cid:239)atwiaj(cid:200) normalizacj(cid:218) takich rozbie(cid:285)no(cid:258)ci nazew- niczych, umo(cid:285)liwiaj(cid:200)c okre(cid:258)lenie jednej nazwy niezale(cid:285)nie od platformy, a nast(cid:218)p- nie przeprowadzenie w tle wszelkich wymaganych translacji. Jednak(cid:285)e bez wsparcia biblioteki konieczne b(cid:218)dzie poznanie ró(cid:285)nic i odpowiednie napisanie w(cid:239)asnego kodu. 12.1.2. Ograniczenia dotycz(cid:261)ce nazw Nazwy atrybutów, które s(cid:200) reprezentowane przez (cid:239)a(cid:241)cuchy przekazywane do metod modelu DOM, mog(cid:200) by(cid:202) okre(cid:258)lane raczej do(cid:258)(cid:202) swobodnie. Z kolei nazwy w(cid:239)a(cid:258)ci- wo(cid:258)ci, które mog(cid:200) by(cid:202) przywo(cid:239)ywane jako identyfikatory z wykorzystaniem notacji z operatorem kropki, s(cid:200) bardziej ograniczone, poniewa(cid:285) musz(cid:200) by(cid:202) zgodne z regu- (cid:239)ami dotycz(cid:200)cymi identyfikatorów, a ponadto wyst(cid:218)puje kilka niedozwolonych s(cid:239)ów zastrze(cid:285)onych. W specyfikacji ECMAScript (dost(cid:218)pna pod adresem http://www.ecma-international. org/publications/standards/Ecma-262.htm) stwierdzono, (cid:285)e s(cid:239)owa kluczowe nie mog(cid:200) by(cid:202) u(cid:285)ywane jako nazwy w(cid:239)a(cid:258)ciwo(cid:258)ci, dlatego zosta(cid:239)y zdefiniowane alternatywy. Na przyk(cid:239)ad atrybut for elementów label jest reprezentowany przez w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) htmlFor, poniewa(cid:285) ten atrybut jest s(cid:239)owem zastrze(cid:285)onym, a atrybut class wszystkich elementów jest reprezentowany przez w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) className, gdy(cid:285) nazwa class rów- nie(cid:285) jest zastrze(cid:285)ona. Dodatkowo nazwy atrybutów z(cid:239)o(cid:285)one z wielu s(cid:239)ów, takie jak readonly, s(cid:200) reprezentowane przez nazwy w(cid:239)a(cid:258)ciwo(cid:258)ci z literami o zmiennej wielko(cid:258)ci (w tym przypadku readOnly). W tabeli 12.1 zebrano wi(cid:218)cej przyk(cid:239)adów takich ró(cid:285)nic. Tabela 12.1. Przypadki, w których nazwy w(cid:225)a(cid:286)ciwo(cid:286)ci i atrybutów mog(cid:261) si(cid:266) ró(cid:298)ni(cid:252) Nazwa atrybutu Nazwa w(cid:225)a(cid:286)ciwo(cid:286)ci for class readonly maxlength cellspacing rowspan colspan tabindex cellpadding usemap frameborder contenteditable htmlFor className readOnly maxLength cellSpacing rowSpan colSpan tabIndex cellPadding useMap frameBorder contentEditable Kup książkęPoleć książkę 310 ROZDZIA(cid:224) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS Zauwa(cid:285), (cid:285)e w standardzie HTML5 dodano nowe elementy i atrybuty, które po jakim(cid:258) czasie b(cid:218)d(cid:200) wymaga(cid:202) do(cid:239)(cid:200)czenia do tej listy. S(cid:200) to mi(cid:218)dzy innymi nast(cid:218)puj(cid:200)ce obiekty: accessKey, contextMenu, dropZone, spellCheck, hrefLang, dateTime, pubDate, isMap, srcDoc, mediaGroup, autoComplete, noValidate i radioGroup. 12.1.3. Ró(cid:298)nice mi(cid:266)dzy j(cid:266)zykami XML i HTML Ca(cid:239)y pomys(cid:239) na to, by w(cid:239)a(cid:258)ciwo(cid:258)ci automatycznie odpowiada(cid:239)y atrybutom, jest cha- rakterystyczny dla modelu DOM j(cid:218)zyka HTML. W przypadku korzystania z modelu DOM j(cid:218)zyka XML (cid:285)adna w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) nie jest automatycznie tworzona w elementach w celu reprezentowania warto(cid:258)ci atrybutów. A zatem do uzyskania warto(cid:258)ci atrybu- tów konieczne b(cid:218)dzie u(cid:285)ycie tradycyjnych metod atrybutów modelu DOM. Nie jest to zbyt przera(cid:285)aj(cid:200)ce ograniczenie, poniewa(cid:285) dokumenty XML zwykle nie wi(cid:200)(cid:285)(cid:200) si(cid:218) z normaln(cid:200) litani(cid:200) pomy(cid:239)ek nazewniczych, które s(cid:200) obecne w przypadku atrybu- tów modelu DOM w dokumentach HTML. UWAGA Termin model DOM j(cid:218)zyka XML oznacza jedynie struktur(cid:218) obiek- tow(cid:200) tworzon(cid:200) w pami(cid:218)ci do reprezentowania dokumentu XML w taki sam sposób, w jaki model DOM j(cid:218)zyka HTML reprezentuje dokument HTML. Dobrym pomys(cid:239)em jest zastosowanie w kodzie okre(cid:258)lonej formy sprawdzenia w celu okre(cid:258)lenia na potrzeby odpowiedniego kontynuowania dzia(cid:239)a(cid:241), czy element (lub dokument) to element XML (lub dokument). Nast(cid:218)puj(cid:200)ca funkcja stanowi przyk(cid:239)ad tego typu sprawdzenia: function isXML(elem) { return (elem.ownerDocument || elem.documentElement.nodeName.toLowerCase() !== html ; } Ta funkcja zwróci warto(cid:258)(cid:202) true, je(cid:258)li element to element XML. W przeciwnym razie zostanie zwrócona warto(cid:258)(cid:202) false. 12.1.4. Dzia(cid:225)anie atrybutów niestandardowych Nie wszystkie atrybuty s(cid:200) reprezentowane przez w(cid:239)a(cid:258)ciwo(cid:258)ci elementów. Cho(cid:202) prze- wa(cid:285)nie jest to prawd(cid:200) w przypadku atrybutów okre(cid:258)lanych przez model DOM j(cid:218)zyka HTML, atrybuty niestandardowe, które mog(cid:200) zosta(cid:202) umieszczone w elementach na utworzonych stronach, nie s(cid:200) automatycznie reprezentowane przez w(cid:239)a(cid:258)ciwo(cid:258)ci elementu. Aby uzyska(cid:202) dost(cid:218)p do warto(cid:258)ci atrybutu niestandardowego, konieczne jest u(cid:285)ycie metod getAttribute() i setAttribute() modelu DOM. Je(cid:258)li nie masz pewno(cid:258)ci, czy istnieje w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) dla atrybutu, zawsze mo(cid:285)esz wykona(cid:202) pod tym k(cid:200)tem test, a nast(cid:218)pnie skorzysta(cid:202) z metod modelu DOM, gdy w(cid:239)a(cid:258)ciwo(cid:258)ci nie ma. Oto przyk(cid:239)ad: var value = element.someValue ? element.someValue : element.getAttribute( someValue ); Kup książkęPoleć książkę 12.1. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM 311 WSKAZÓWKA W przypadku standardu HTML5 u(cid:285)ycie przedrostka data- dla wszystkich atrybutów niestandardowych powoduje, (cid:285)e pozostaj(cid:200) one zgodne ze specyfikacj(cid:200) HTML5. Zalecane jest post(cid:200)pienie w ten sposób nawet wtedy, gdy nadal u(cid:285)ywany jest standard HTML4, aby kod ze znacznikami przygo- towa(cid:202) z uwzgl(cid:218)dnieniem przysz(cid:239)ych rozwi(cid:200)za(cid:241). Poza tym jest to odpowied- nia konwencja, która pozwala wyra(cid:283)nie oddzieli(cid:202) atrybuty niestandardowe od wbudowanych. 12.1.5. Kwestie dotycz(cid:261)ce wydajno(cid:286)ci Ogólnie dost(cid:218)p do w(cid:239)a(cid:258)ciwo(cid:258)ci jest szybszy ni(cid:285) dost(cid:218)p do odpowiadaj(cid:200)cych im metodom atrybutów modelu DOM, zw(cid:239)aszcza w przegl(cid:200)darce Internet Explorer. Przekonajmy si(cid:218) o tym. Czy przypominasz sobie omówienie testowania wydajno(cid:258)ci z rozdzia(cid:239)u 2.? Polega to na pomiarze czasu, jaki zajmie wielokrotne powtórzenie operacji. Nie mo(cid:285)na zmie- rzy(cid:202) wydajno(cid:258)ci pojedynczej operacji, poniewa(cid:285) czas jej trwania jest zbyt krótki, aby uzyska(cid:202) dok(cid:239)adne wyniki (powró(cid:202) do omówienia liczników czasu z rozdzia(cid:239)u 8.). Je(cid:258)li jedna operacja trwa zbyt krótko, aby przeprowadzi(cid:202) dla niej pomiar, co b(cid:218)dzie w przypadku pi(cid:218)ciu milionów operacji? Dok(cid:239)adnie taki pomiar przeprowadza listing 12.2. Listing 12.2. Porównanie wydajno(cid:286)ci metod modelu DOM z w(cid:225)a(cid:286)ciwo(cid:286)ciami div id= testSubject /div script type= text/javascript var count = 5000000; var n; var begin = new Date(); var end; var testSubject = document.getElementById( testSubject ); var value; Definiuje wcze(cid:286)niej zmienne. for (n = 0; n count; n++) { value = testSubject.getAttribute( id ); } end = new Date(); assert(true, Czas odczytu metody modelu DOM: + (end.getTime() - begin.getTime())); begin = new Date(); for (n = 0; n count; n++) { value = testSubject.id; } end = new Date(); assert(true, Czas odczytu w(cid:273)a(cid:295)ciwo(cid:295)ci: + (end.getTime() - begin.getTime())); begin = new Date(); for (n = 0; n count; n++) { Testuje odczyt metody modelu DOM. Testuje odczyt w(cid:225)a(cid:286)ciwo(cid:286)ci. Testuje zapis metody modelu DOM. Kup książkęPoleć książkę 312 ROZDZIA(cid:224) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS testSubject.setAttribute( id , testSubject ); } end = new Date(); assert(true, Czas zapisu metody modelu DOM: + (end.getTime() - begin.getTime())); begin = new Date(); for (n = 0; n count; n++) { testSubject.id = testSubject ; } end = new Date(); assert(true, Czas zapisu w(cid:273)a(cid:295)ciwo(cid:295)ci: + (end.getTime() - begin.getTime())); /script Testuje zapis w(cid:225)a(cid:286)ciwo(cid:286)ci. Ten kod przeprowadza test wydajno(cid:258)ci metod getAttribute() i setAttribute() modelu DOM dla podobnych operacji odczytu i zapisu odpowiedniej w(cid:239)a(cid:258)ciwo(cid:258)ci. Test zosta(cid:239) uruchomiony w wielu przegl(cid:200)darkach, a zebrane wyniki zaprezento- wano w tabeli 12.2. Wszystkie czasy trwania podano w milisekundach. Jak wida(cid:202), operacje uzyskiwania i ustawiania w(cid:239)a(cid:258)ciwo(cid:258)ci s(cid:200) niemal zawsze szybsze ni(cid:285) metody getAttribute() i setAttribute(). UWAGA Wi(cid:218)kszo(cid:258)(cid:202) tych testów przeprowadzono na komputerze MacBook Pro z 2011 roku, który zawiera(cid:239) procesor i7 o cz(cid:218)stotliwo(cid:258)ci 2,8 GHz, 8 GB pami(cid:218)ci RAM i system OS X Lion. Testy w przegl(cid:200)darce Internet Explorer zosta(cid:239)y wykonane na komputerze PC z takim samym procesorem, 4 GB pa- mi(cid:218)ci RAM i systemem Windows 7 (64-bitowym). Tabela 12.2. Wyniki testu wydajno(cid:286)ci porównuj(cid:261)cego czas dost(cid:266)pu do metod modelu DOM i w(cid:225)a(cid:286)ciwo(cid:286)ci Przegl(cid:261)darka getAttribute() W(cid:225)a(cid:286)ciwo(cid:286)(cid:252) get setAttribute() W(cid:225)a(cid:286)ciwo(cid:286)(cid:252) set Internet Explorer 9 Firefox 14 Safari 5 Chrome 29 Opera 12 3970 827 268 1130 2109 940 434 142 476 1642 7667 1414 1055 2971 2370 956 1584 627 2118 1635 Wyniki przyk(cid:239)adowego uruchomienia tego testu pokazano na rysunku 12.1. Cho(cid:202) podane ró(cid:285)nice szybko(cid:258)ci mog(cid:200) nie robi(cid:202) wra(cid:285)enia w przypadku pojedyn- czych operacji, mog(cid:200) one si(cid:218) sumowa(cid:202) przy wielu uruchomieniach testu (na przyk(cid:239)ad w ramach intensywnej p(cid:218)tli). Aby zwi(cid:218)kszy(cid:202) wydajno(cid:258)(cid:202), mo(cid:285)na zaimplementowa(cid:202) metod(cid:218), która umo(cid:285)liwia uzyskanie dost(cid:218)pu do warto(cid:258)ci za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci (je(cid:258)li istnieje) lub metody modelu DOM (awaryjne rozwi(cid:200)zanie w przypadku braku w(cid:239)a(cid:258)ciwo(cid:258)ci). Przeanalizuj listing 12.3. Kup książkęPoleć książkę 12.1. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM 313 Rysunek 12.1. Wyniki uruchomienia testu wydajno(cid:286)ci w przegl(cid:261)darce Chrome Listing 12.3. Funkcja s(cid:225)u(cid:298)(cid:261)ca do ustawiania i pobierania warto(cid:286)ci atrybutów div id= testSubject /div script type= text/javascript (function(){ var translations = { for : htmlFor , class : className , readonly: readOnly , maxlength: maxLength , cellspacing: cellSpacing , rowspan: rowSpan , colspan: colSpan , tabindex: tabIndex , cellpadding: cellPadding , usemap: useMap , frameborder: frameBorder , contenteditable: contentEditable }; Tworzy zasi(cid:266)g prywatny. Tworzy map(cid:266) translacji. window.attr = function(element,name,value) { var property = translations[name] || name, propertyExists = typeof element[property] !== undefined ; Definiuje funkcj(cid:266) ustawiania (pobierania). if (typeof value !== undefined ) { if (propertyExists) { Kup książkęPoleć książkę 314 ROZDZIA(cid:224) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS element[property] = value; } else { element.setAttribute(name,value); } } return propertyExists ? element[property] : element.getAttribute(name); }; })(); var subject = document.getElementById( testSubject ); assert(attr(subject, id ) === testSubject , Pobrano warto(cid:295)(cid:232) atrybutu id. ); assert(attr(subject, id , other ) === other , Ustawiono now(cid:230) warto(cid:295)(cid:232) atrybutu id. ); assert(attr(subject, id ) === other , Pobrano now(cid:230) warto(cid:295)(cid:232) atrybutu. ); assert(attr(subject, data-custom , whatever ) === whatever , Ustawiono atrybut niestandardowy. ); assert(attr(subject, data-custom ) === whatever , Pobrano atrybut niestandardowy. ); /script Testuje now(cid:261) funkcj(cid:266). W tym przyk(cid:239)adzie nie tylko zdefiniowano funkcj(cid:218) ustawiaj(cid:200)c(cid:200) oraz pobieraj(cid:200)c(cid:200) dla warto(cid:258)ci atrybutów i w(cid:239)a(cid:258)ciwo(cid:258)ci, ale te(cid:285) zaprezentowano kilka wa(cid:285)nych poj(cid:218)(cid:202), które mog(cid:200) zosta(cid:202) wykorzystane w dowolnym miejscu kodu. W przyk(cid:239)adowej funkcji konieczne jest przeprowadzenie translacji mi(cid:218)dzy nazwami w(cid:239)a(cid:258)ciwo(cid:258)ci i atrybutów (zgodnie z opisem w tabeli 12.1), dlatego utwo- . Jednak(cid:285)e niewskazane jest zanieczyszczanie t(cid:200) map(cid:200) glo- rzono map(cid:218) translacji balnej przestrzeni nazw. Mapa ma by(cid:202) dost(cid:218)pna dla funkcji w jej zasi(cid:218)gu lokalnym, lecz nigdzie indziej. , która tworzy zasi(cid:218)g lokalny. Mapa translacji W tym celu definicja mapy i deklaracja funkcji s(cid:200) umieszczane w obr(cid:218)bie funkcji nie jest dost(cid:218)pna bezpo(cid:258)redniej poza obr(cid:218)bem funkcji bezpo(cid:258)redniej, ale funkcja ustawiaj(cid:200)ca (pobieraj(cid:200)ca), która równie(cid:285) zosta(cid:239)a zdefiniowana wewn(cid:200)trz funkcji bezpo(cid:258)redniej, ma dost(cid:218)p do mapy za po(cid:258)rednictwem swojego domkni(cid:218)cia. Sprytne, prawda? Kolejna wa(cid:285)na zasada jest prezentowana przez sam(cid:200) funkcj(cid:218) attr(), która mo(cid:285)e odgrywa(cid:202) zarówno rol(cid:218) ustawiaj(cid:200)cej, jak i pobieraj(cid:200)cej po prostu przez sprawdzanie w(cid:239)asnej listy argumentów. Je(cid:258)li funkcji przekazano argument value, b(cid:218)dzie ona odgry- wa(cid:202) rol(cid:218) ustawiaj(cid:200)cej, ustawiaj(cid:200)c przekazan(cid:200) warto(cid:258)(cid:202) jako warto(cid:258)(cid:202) atrybutu. Je(cid:258)li argument value zostanie pomini(cid:218)ty, a przekazane zostan(cid:200) tylko pierwsze dwa argu- menty, funkcja odgrywa rol(cid:218) pobieraj(cid:200)cej, uzyskuj(cid:200)c warto(cid:258)(cid:202) konkretnego atrybutu. W obu przypadkach zwracana jest warto(cid:258)(cid:202) atrybutu, co u(cid:239)atwia u(cid:285)ycie funkcji w dowolnym z jej trybów w (cid:239)a(cid:241)cuchu wywo(cid:239)a(cid:241) funkcji. Kup książkęPoleć książkę 12.1. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM 315 Godne uwagi jest to, (cid:285)e powy(cid:285)sza implementacja nie uwzgl(cid:218)dnia wielu proble- mów dotycz(cid:200)cych obs(cid:239)ugi wielu przegl(cid:200)darek, które towarzysz(cid:200) dost(cid:218)powi do atry- butów. Dowiedzmy si(cid:218), jakie dok(cid:239)adnie s(cid:200) to problemy. 12.2. Problemy z atrybutami w przypadku obs(cid:225)ugi wielu przegl(cid:261)darek Ogólnie problemy dotycz(cid:200)ce obs(cid:239)ugi wielu przegl(cid:200)darek mog(cid:200) by(cid:202) do(cid:258)(cid:202) przera(cid:285)aj(cid:200)ce. Liczba takich problemów, które dotycz(cid:200) warto(cid:258)ci atrybutów, nie jest ma(cid:239)a. Przeana- lizujmy kilka podstawowych i najcz(cid:218)(cid:258)ciej wyst(cid:218)puj(cid:200)cych problemów, rozpoczynaj(cid:200)c od rozszerzania nazwy modelu DOM. 12.2.1. Rozszerzanie nazwy (identyfikatora) modelu DOM Najgorszym b(cid:239)(cid:218)dem, z jakim trzeba si(cid:218) upora(cid:202), jest niew(cid:239)a(cid:258)ciwa implementacja kodu modelu DOM w przegl(cid:200)darkach. Jak wskazano w poprzednim rozdziale, problem polega na tym, (cid:285)e wszystkie przegl(cid:200)darki z Wielkiej Pi(cid:200)tki pobieraj(cid:200) warto(cid:258)ci atrybutów id lub name okre(cid:258)lone w elementach wej(cid:258)ciowych formularza i dodaj(cid:200) odwo(cid:239)ania do elementów jako w(cid:239)a- (cid:258)ciwo(cid:258)ci elementu nadrz(cid:218)dnego form . Takie wygenerowane w(cid:239)a(cid:258)ciwo(cid:258)ci aktywnie przes(cid:239)aniaj(cid:200) wszelkie istniej(cid:200)ce w(cid:239)a(cid:258)ciwo(cid:258)ci o tej samej nazwie, które mog(cid:200) znajdo- wa(cid:202) si(cid:218) ju(cid:285) w elemencie formularza. Ponadto przegl(cid:200)darka Internet Explorer zast(cid:218)puje nie tylko w(cid:239)a(cid:258)ciwo(cid:258)ci, lecz tak(cid:285)e warto(cid:258)ci atrybutów odwo(cid:239)aniami do elementów. Listing 12.4 demonstruje te problemy. Listing 12.4. Demonstracja sposobu wymuszania przez przegl(cid:261)darki swoich regu(cid:225) dla elementów formularza form id= testForm action= / input type= text id= id / input type= text name= action / /form script type= text/javascript window.onload = function(){ var form = document.getElementById( testForm ); assert(form.id === testForm , W(cid:273)a(cid:295)ciwo(cid:295)(cid:232) id pozostaje bez zmian. ); assert(form.action === / , W(cid:273)a(cid:295)ciwo(cid:295)(cid:232) action pozostaje bez zmian. ); assert(form.getAttribute( id ) === testForm , Atrybut id pozostaje bez zmian. ); assert(form.getAttribute( action ) === / , Atrybut action pozostaje bez zmian. ); }; /script Tworzy przedmiot testu. Testuje, czy w(cid:225)a(cid:286)ciwo(cid:286)ci zosta(cid:225)y pozostawione bez zmian. Testuje, czy atrybuty zosta(cid:225)y zmodyfikowane. Kup książkęPoleć książkę 316 ROZDZIA(cid:224) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS Ten zestaw testów pokazuje, jak ta niefortunna cecha mo(cid:285)e spowodowa(cid:202) utrat(cid:218) danych znaczników. Najpierw definiowany jest formularz HTML z dwoma pod- rz(cid:218)dnymi elementami wej(cid:258)ciowymi. Pierwszy z nich ma identyfikator id, a drugi nazw(cid:218) action. Pierwszy test potwierdza , (cid:285)e w(cid:239)a(cid:258)ciwo(cid:258)ci id i action elementu formularza powinny mie(cid:202) posta(cid:202) okre(cid:258)lon(cid:200) w znacznikach HTML. Z kolei drugi zestaw testów potwierdza, (cid:285)e warto(cid:258)ci atrybutów odzwierciedlaj(cid:200) znaczniki. Jednak(cid:285)e po uruchomieniu testu w przegl(cid:200)darce Chrome zostanie uzyskany wynik widoczny na rysunku 12.2. Rysunek 12.2. Wygl(cid:261)da na to, (cid:298)e warto(cid:286)ci znaczników zosta(cid:225)y zmodyfikowane! We wszystkich nowoczesnych przegl(cid:200)darkach w(cid:239)a(cid:258)ciwo(cid:258)ci id i action zosta(cid:239)y prze- s(cid:239)oni(cid:218)te odwo(cid:239)aniami do elementów wej(cid:258)ciowych zwyczajnie z powodu warto(cid:258)ci id i name wybranych dla tych elementów. Pierwotne warto(cid:258)ci w(cid:239)a(cid:258)ciwo(cid:258)ci odes(cid:239)ano ju(cid:285) do lamusa! W przegl(cid:200)darkach innych ni(cid:285) Internet Explorer oryginalne warto(cid:258)ci mo(cid:285)na uzyska(cid:202) za pomoc(cid:200) metod atrybutów modelu DOM, a w tej przegl(cid:200)darce zast(cid:218)powane s(cid:200) nawet te warto(cid:258)ci. Jeste(cid:258)my jednak wojownikami, którzy si(cid:218) nie poddadz(cid:200). Pomimo wszelkich sta- ra(cid:241) twórców przegl(cid:200)darek maj(cid:200)cych na celu niedopuszczenie programistów do war- to(cid:258)ci dysponujemy odpowiedni(cid:200) sztuczk(cid:200). Mo(cid:285)liwe jest uzyskanie dost(cid:218)pu do orygi- nalnego w(cid:218)z(cid:239)a modelu DOM, który reprezentuje sam atrybut elementu. Modyfikacje wprowadzane przez przegl(cid:200)dark(cid:218) nie dotycz(cid:200) tego w(cid:218)z(cid:239)a. Aby uzyska(cid:202) warto(cid:258)(cid:202) z w(cid:218)z(cid:239)a atrybutu modelu DOM (np. dla atrybutu action), nale(cid:285)y u(cid:285)y(cid:202) nast(cid:218)puj(cid:200)- cego kodu: var actionValue = element.getAttibuteNode( action ).nodeValue; Kup książkęPoleć książkę 12.1. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM 317 W ramach (cid:202)wiczenia sprawd(cid:283), czy mo(cid:285)liwe jest u(cid:285)ycie tego rozwi(cid:200)zania do rozsze- rzenia metody attr() zawartej w kodzie z listingu 12.3, aby ustali(cid:202), kiedy atrybut w(cid:218)z(cid:239)a elementu formularza zosta(cid:239) zast(cid:200)piony przez odwo(cid:239)anie do elementu, a nast(cid:218)p- nie okre(cid:258)l, czy mo(cid:285)liwe jest skorzystanie z opcji uzyskania warto(cid:258)ci z w(cid:218)z(cid:239)a modelu DOM, gdy zosta(cid:239)a ona zast(cid:200)piona. UWAGA Je(cid:258)li ciekawi(cid:200) Ci(cid:218) problemy wynikaj(cid:200)ce z takich rozszerze(cid:241) elemen- tów, polecamy sprawdzenie narz(cid:218)dzia DOMLint Juriya Zaytseva pod adresem http://kangax.github.com/domlint/, które umo(cid:285)liwia analizowanie strony pod k(cid:200)tem potencjalnych problemów. Ponadto warto zapozna(cid:202) si(cid:218) z omówieniem Garretta Smitha w artykule Unsafe Names for HTML Form Controls, dost(cid:218)p- nym pod adresem http://jibbering.com/faq/names/. Cho(cid:202) ten problem nie mo(cid:285)e by(cid:202) traktowany jako b(cid:239)(cid:200)d, poniewa(cid:285) stanowi zamie- rzone dzia(cid:239)anie przegl(cid:200)darek, ma charakter destrukcyjny. Niew(cid:200)tpliwie jest niepo- trzebny, bior(cid:200)c pod uwag(cid:218) to, (cid:285)e odwo(cid:239)ania do elementów mo(cid:285)na tak (cid:239)atwo uzyska(cid:202) za pomoc(cid:200) metod takich jak document.getElementById(). Nie jest to jednak jedyny problem dotycz(cid:200)cy sposobu obs(cid:239)ugi atrybutów przez przegl(cid:200)darki. Przyjrzyjmy si(cid:218) kolejnemu. 12.2.2. Normalizacja adresu URL We wszystkich nowoczesnych przegl(cid:200)darkach istnieje „funkcja” naruszaj(cid:200)ca zasad(cid:218) minimalnego zaskoczenia: podczas uzyskiwania dost(cid:218)pu do w(cid:239)a(cid:258)ciwo(cid:258)ci, która odwo- (cid:239)uje si(cid:218) do adresu URL (np. href, src lub action), warto(cid:258)(cid:202) tego adresu jest automa- tycznie przekszta(cid:239)cana z oryginalnej postaci w pe(cid:239)ny, kanoniczny adres URL (nawi(cid:200)- zano do tego na pocz(cid:200)tku rozdzia(cid:239)u). Cho(cid:202) ostrzegali(cid:258)my ju(cid:285) o automatycznej normalizacji, napiszemy test, który demonstruje ten problem na listingu 12.5. Listing 12.5. Demonstracja problemu z normalizacj(cid:261) adresu URL a href= listing-12.5.html id= testSubject Do samej siebie /a Sprawdza, czy warto(cid:286)(cid:252) atrybutu jest zgodna z oczeki- waniami. Tak jest, dlatego test ko(cid:276)czy si(cid:266) powo- dzeniem! script type= text/javascript var link = document.getElementById( testSubject ); var linkHref = link.getAttributeNode( href ).nodeValue; Pobiera oryginaln(cid:261) warto(cid:286)(cid:252) w(cid:266)z(cid:225)a bezpo(cid:286)rednio z pierwszej r(cid:266)ki (informacje o w(cid:266)(cid:296)le). assert(linkHref === listing-12.5.html , Warto(cid:295)(cid:232) w(cid:250)z(cid:273)a odsy(cid:273)acza jest poprawna. ); assert(link.href === listing-12.5.html , Warto(cid:295)(cid:232) w(cid:273)a(cid:295)ciwo(cid:295)ci odsy(cid:273)acza jest poprawna. ); assert(link.getAttribute( href ) === linkHref, Atrybut odsy(cid:273)acza nie zosta(cid:273) zmodyfikowany. ); /script Testuje, czy oryginalna warto(cid:286)(cid:252) w(cid:266)z(cid:225)a jest zgodna z okre(cid:286)lon(cid:261) w znacznikach elementu. Test ko(cid:276)czy si(cid:266) powodzeniem. Testuje, czy w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) href zawiera to, co jest oczekiwane, czyli t(cid:266) sam(cid:261) warto(cid:286)(cid:252). Tak jednak nie jest! Ten test ko(cid:276)czy si(cid:266) niepowodzeniem. Kup książkęPoleć książkę 318 ROZDZIA(cid:224) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS W tym te(cid:258)cie zdefiniowano znacznik kotwicy z atrybutem href, który odwo(cid:239)uje si(cid:218) do tej samej strony. Nast(cid:218)pnie uzyskiwane jest odwo(cid:239)anie do tego elementu w celu przeprowadzenia testu. W dalszej kolejno(cid:258)ci stosowana jest sztuczka z poprzedniego punktu, czyli przej- (cid:258)cie do oryginalnych w(cid:218)z(cid:239)ów modelu DOM w celu znalezienia oryginalnej warto(cid:258)ci przed przyj(cid:218)ciem „w ciemno”, (cid:285)e sztuczka znacznika zadzia(cid:239)a(cid:239)a. . Ta warto(cid:258)(cid:202) jest sprawdzana Testowana jest nast(cid:218)pnie w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) w celu sprawdzenia, czy jest zgodna . Test nie powiedzie si(cid:218) w (cid:285)adnej przegl(cid:200)darce, poniewa(cid:285) warto(cid:258)(cid:202) zosta(cid:239)a znormalizo- wana do postaci pe(cid:239)nego adresu URL. Na ko(cid:241)cu wykonywany jest test w celu ustalenia, czy zosta(cid:239)a zmodyfikowana . Test ko(cid:241)czy si(cid:218) pomy(cid:258)lnie we wszystkich przegl(cid:200)darkach warto(cid:258)(cid:202) atrybutu z wyj(cid:200)tkiem starszych wersji aplikacji Internet Explorer. Te testy nie tylko prezentuj(cid:200) charakter problemu, ale te(cid:285) zapewniaj(cid:200) rozwi(cid:200)- zanie. Mo(cid:285)liwe jest u(cid:285)ycie sztuczki z w(cid:218)z(cid:239)em modelu DOM, aby uzyska(cid:202) takie atry- buty, gdy wymagana jest pewno(cid:258)(cid:202), (cid:285)e zostanie pobrana niezmodyfikowana warto(cid:258)(cid:202). W przypadku wersji przegl(cid:200)darki Internet Explorer starszych ni(cid:285) 8. innym roz- wi(cid:200)zaniem jest niestandardowe rozszerzenie metody getAttribute(). Przekazanie magicznej liczby 2 jako drugiego parametru spowoduje, (cid:285)e wynikiem b(cid:218)dzie warto(cid:258)(cid:202) niepoddana normalizacji: var original = link.getAttribute( href ,2); W nowoczesnych przegl(cid:200)darkach mo(cid:285)na zastosowa(cid:202) dowolne z tych rozwi(cid:200)za(cid:241). Sztuczka z w(cid:218)z(cid:239)em modelu DOM zadzia(cid:239)a w ka(cid:285)dej przegl(cid:200)darce. Wszystkie prze- gl(cid:200)darki, z wyj(cid:200)tkiem aplikacji Internet Explorer, zignoruj(cid:200) drugi parametr przeka- zany metodzie getAttribute(). Po wykonaniu takiej operacji starsze wersje prze- gl(cid:200)darki Opera ulegn(cid:200) zawieszeniu bez (cid:285)adnego oczywistego powodu, dlatego nale(cid:285)y unika(cid:202) tego rozwi(cid:200)zania, je(cid:258)li w obs(cid:239)ugiwanym zestawie znajduj(cid:200) si(cid:218) takie wersje przegl(cid:200)darki Opera. Niewielkie jest prawdopodobie(cid:241)stwo tego, (cid:285)e problem z normalizacj(cid:200) adresu URL wyst(cid:200)pi dla utworzonego kodu, chyba (cid:285)e bezwzgl(cid:218)dnie wymagane jest uzyska- nie przez niego warto(cid:258)ci bez normalizacji. Przeanalizujmy teraz problem, który mo(cid:285)e mie(cid:202) znacznie powa(cid:285)niejsze konse- kwencje. 12.2.3. Atrybut style Atrybut style to wa(cid:285)ny atrybut elementu, w przypadku którego ustawianie i uzyski- wanie warto(cid:258)ci stanowi wyj(cid:200)tkowe wyzwanie. Elementy modelu DOM j(cid:218)zyka HTML oferuj(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) style, której mo(cid:285)na u(cid:285)y(cid:202) w celu uzyskania informacji o stylu elementu (na przyk(cid:239)ad element.style.color). Je(cid:258)li jednak wymagane b(cid:218)dzie uzyska- nie oryginalnego (cid:239)a(cid:241)cucha atrybutu style okre(cid:258)lonego w elemencie, oka(cid:285)e si(cid:218) to znacznie trudniejsze. Dla przyk(cid:239)adu rozwa(cid:285)my nast(cid:218)puj(cid:200)ce znaczniki: div style= color:red; /div Kup książkęPoleć książkę 12.1. Atrybuty i w(cid:239)a(cid:258)ciwo(cid:258)ci modelu DOM 319 Co b(cid:218)dzie, gdy po(cid:285)(cid:200)dane jest uzyskanie oryginalnego (cid:239)a(cid:241)cucha color:red;? W(cid:239)a(cid:258)ciwo(cid:258)(cid:202) style w ogóle nie oka(cid:285)e si(cid:218) pomocna, poniewa(cid:285) jest ustawiona na obiekt, który zawiera wyniki oryginalnego (cid:239)a(cid:241)cucha poddane analizie. Cho(cid:202) metoda getAttribute( style ) zadzia(cid:239)a w wi(cid:218)kszo(cid:258)ci przegl(cid:200)darek, nie b(cid:218)dzie tak w przy- padku przegl(cid:200)darki Internet Explorer. Przechowuje ona w obiekcie style w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) o nazwie cssText, której mo(cid:285)na u(cid:285)y(cid:202) do uzyskania oryginalnego (cid:239)a(cid:241)cucha stylu (na przyk(cid:239)ad element.style.cssText). Cho(cid:202) bezpo(cid:258)rednie uzyskiwanie oryginalnej warto(cid:258)ci atrybutu style mo(cid:285)e by(cid:202) stosunkowo rzadk(cid:200) operacj(cid:200) (w przeciwie(cid:241)stwie do uzyskiwania dost(cid:218)pu do wyni- kowego obiektu style), pojawia si(cid:218) inny problem z przegl(cid:200)dark(cid:200), który prawdo- podobnie b(cid:218)dzie mie(cid:202) wp(cid:239)yw na dowoln(cid:200) stron(cid:218) tworz(cid:200)c(cid:200) elementy modelu DOM podczas dzia(cid:239)ania. 12.2.4. Atrybut type Inna pu(cid:239)apka wyst(cid:218)puj(cid:200)ca w wersjach 8. i starszych przegl(cid:200)darki Internet Explorer dotyczy atrybutu type elementów input . W tym przypadku nie istnieje (cid:285)adne sen- sowne rozwi(cid:200)zanie. Po wstawieniu elementu input do dokumentu jego atrybut type nie mo(cid:285)e ju(cid:285) by(cid:202) modyfikowany. Okazuje si(cid:218), (cid:285)e przegl(cid:200)darka Internet Explorer zg(cid:239)asza wyj(cid:200)tek po podj(cid:218)ciu próby zmiany tego atrybutu. Dla przyk(cid:239)adu przeanalizujmy kod z listingu 12.6, w którym po fakcie podejmo- wana jest próba zmiany typu elementu wej(cid:258)ciowego. Listing 12.6. Zmienianie typu elementu wej(cid:286)ciowego po jego wstawieniu form id= testForm action= / /form script type= text/javascript window.onload = function(){ var input = document.createElement( input ); input.type = text ; assert(input.type == text , Typ elementu input to text. ); document.getElementById( testForm ) .appendChild(input); Tworzy nowy element, zezwalaj(cid:261)c na domy(cid:286)lny atrybut typu. Ustawia w(cid:225)a(cid:286)ciwo(cid:286)(cid:252) type i sprawdza j(cid:261). Wstawia nowy element input do modelu DOM. input.type = hidden ; assert(input.type == hidden , Typ elementu input zosta(cid:273) zmieniony na hidden. ); }; Zmienia typ po wstawieniu. /script W tym te(cid:258)cie tworzony jest nowy element input potwierdzane powodzenie przypisania DOM czy ta operacja faktycznie mia(cid:239)a miejsce , okre(cid:258)lany dla niego typ text, i wstawiany nowy element do modelu . Po wstawieniu typ jest zmieniany na hidden, po czym sprawdzane jest, . Kup książkęPoleć książkę 320 ROZDZIA(cid:224) 12. Atrybuty, w(cid:239)a(cid:258)ciwo(cid:258)ci i arkusze stylów CSS We wszystkich nowoczesnych przegl(cid:200)darkach, z wyj(cid:200)tkiem programu Internet Explorer, testy bez problemu ko(cid:241)cz(cid:200) si(cid:218) powodzeniem. Jednak(cid:285)e w wersjach 8. i star- szych przegl(cid:200)darki Internet Explorer przy próbie przypisania zg(cid:239)aszany jest wyj(cid:200)- tek, po czym drugi test nigdy nie jest wykonywany. Cho(cid:202) nie ma prostego rozwi(cid:200)zania, mo(cid:285)liwe jest skorzystanie z dwóch nast(cid:218)pu- j(cid:200)cych (cid:258)rodków tymczasowych: (cid:81) Zamiast próbowa(cid:202) zmienia(cid:202) atrybut type, utwórz nowy element input , skopiuj wszystkie w(cid:239)a(cid:258)ciwo(cid:258)ci i atrybuty, a nast(cid:218)pnie zast(cid:200)p oryginalny element nowo utworzonym. To rozwi(cid:200)zanie wydaje si(cid:218) do(cid:258)(cid:202) proste, ale zwi(cid:200)zane s(cid:200) z nim problemy. Po pierwsze, niemo(cid:285)liwe jest ustalenie, czy element zawiera(cid:239) jakiekolwiek procedury obs(cid:239)ugi zdarze(cid:241) zdefiniowane w nim przy u(cid:285)yciu metod drugiego poziomu modelu DOM, je(cid:258)li procedury nie by(cid:239)y przez nas (cid:258)ledzone. Po drugie, wszelkie odwo(cid:239)ania do oryginalnego elementu staj(cid:200) si(cid:218) niewa(cid:285)ne. (cid:81) W dowolnym interfejsie API tworzonym w celu uwzgl(cid:218)dniania zmian we w(cid:239)a(cid:258)ciwo(cid:258)ciach lub atrybutach po prostu odrzu(cid:202) wszelkie próby zmiany warto(cid:258)ci atrybutu type. (cid:191)adne z powy(cid:285)szych rozwi(cid:200)za(cid:241) nie jest ca(cid:239)kowicie satysfakcjonuj(cid:200)ce. W bibliotece jQuery stosowane jest drugie rozwi(cid:200)zanie, w przypadku którego zg(cid:239)aszany jest informacyjny wyj(cid:200)tek dla próby wprowadzenia zmiany w atrybucie type, je(cid:258)li element zosta(cid:239) ju(cid:285) wstawiony do dokumentu. Cho(cid:202) oczywi(cid:258)cie jest to „roz- wi(cid:200)zanie” kompromisowe, przynajmniej interfejs u(cid:285)ytkownika zachowuje spójno(cid:258)(cid:202) we wszystkich platformach. Na szcz(cid:218)(cid:258)cie ten problem zosta(cid:239) rozwi(cid:200)zany w wersji 9. przegl(cid:200)darki Internet Explorer. Przyjrzyjmy si(cid:218) jeszcze jednemu utrudnieniu, którym n(cid:218)kaj(cid:200) nas przegl(cid:200)darki. Ponownie ma to zwi(cid:200)zek z elementami formularza. 12.2.5. Problem z indeksem tabulacji Okre(cid:258)lanie indeksu tabulacji elementu to kolejny dziwny problem wyst(cid:218)puj(cid:200)cy w przegl(cid:200)darkach. W jego przypadku nie ma zbyt du(cid:285)ej zgodno(cid:258)ci w kwestii tego, jak to powinno dzia(cid:239)a(cid:202). Cho(cid:202) ca(cid:239)kowicie mo(cid:285)liwe jest uzyskanie indeksu tabulacji elementu za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci tabIndex lub atrybutu tabindex dla elementów, w których w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) lub atrybut zosta(cid:239)y jawnie zdefiniowane, przegl(cid:200)darka zwraca warto(cid:258)(cid:202) 0 dla w(cid:239)a(cid:258)ciwo(cid:258)ci tabIndex oraz warto(cid:258)(cid:202) null dla atrybutu tabindex elemen- tów bez jawnie podanej warto(cid:258)ci. Oczywi(cid:258)cie oznacza to, (cid:285)e nie ma mo(cid:285)liwo(cid:258)ci stwierdzenia, jaki indeks tabulacji zosta(cid:239) przypisany do elementów, dla których nie ustawiono jawnie warto(cid:258)ci indeksu tabulacji. Jest to z(cid:239)o(cid:285)ona kwestia o szczególnym znaczeniu w odniesieniu do u(cid:285)yteczno(cid:258)ci Ostatni problem dotycz(cid:200)cy atrybutów, którym si(cid:218) zajmiemy, w rzeczywisto(cid:258)ci i dost(cid:218)pno(cid:258)ci. wcale nim nie jest. Kup książkęPoleć książkę 12.3. Problemy zwi(cid:200)zane z atrybutami stylów 321 12.2.6. Nazwy w(cid:266)z(cid:225)ów Cho(cid:202) ten problem nie jest bezpo(cid:258)rednio powi(cid:200)zany z atrybutami jako takimi, kilka rozwi(cid:200)za(cid:241) zastosowanych w tym podrozdziale bazowa(cid:239)o na znajdowaniu w(cid:218)z(cid:239)ów. Okazuje si(cid:218), (cid:285)e okre(cid:258)lenie nazwy w(cid:218)z(cid:239)a mo(cid:285)e by(cid:202) troch(cid:218) k(cid:239)opotliwe. Dok(cid:239)adniej rzecz bior(cid:200)c, wielko(cid:258)(cid:202) liter w nazwie w(cid:218)z(cid:239)a zmienia si(cid:218) w zale(cid:285)no(cid:258)ci od tego, jaki typ dokumentu jest rozpatrywany. Je(cid:258)li jest to normalny dokument HTML, w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) nodeName zwróci nazw(cid:218) elementu zawieraj(cid:200)c(cid:200) wy(cid:239)(cid:200)cznie du(cid:285)e litery (na przyk(cid:239)ad HTML lub BODY). Je(cid:258)li jednak jest to dokument XML lub XHTML, w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) nodeName zwróci nazw(cid:218) podan(cid:200) przez u(cid:285)ytkownika. Oznacza to, (cid:285)e nazwa mo(cid:285)e by(cid:202) z(cid:239)o(cid:285)ona z ma(cid:239)ych lub du(cid:285)ych liter albo z ich kombinacji. W przypadku tego mankamentu wygodnym rozwi(cid:200)zaniem jest normalizowanie nazwy przed dokonaniem jakiegokolwiek porównania (zwykle w celu uzyskania ma(cid:239)ych liter). Za(cid:239)ó(cid:285)my, (cid:285)e ma zosta(cid:202) wykonana operacja wy(cid:239)(cid:200)cznie dla elementów div i ul . Poniewa(cid:285) nie wiadomo, czy uzyskiwane nazwy w(cid:218)z(cid:239)ów b(cid:218)d(cid:200) mie(cid:202) posta(cid:202) div, DIV czy nawet dIv, wskazana b(cid:218)dzie normalizacja nazw w sposób zapre- zentowany w nast(cid:218)puj(cid:200)cym kodzie: var all = document.getElementsByTagName( * )[0]; for (var i = 0; i all.length; i++) { var nodeName = all[i].nodeName.toLowerCase(); if (nodeName === div || nodeName === ul ) { all[i].className = found ; } } Gdy dok(cid:239)adnie wiadomo, w jakiego typu dokumencie b(cid:218)dzie wykonywany napi- sany kod, niekoniecznie trzeba przejmowa(cid:202) si(cid:218) wielko(cid:258)ci(cid:200) liter. Je(cid:258)li jednak two- rzony jest kod wielokrotnego u(cid:285)ycia, który powinien dzia(cid:239)a(cid:202) w dowolnym (cid:258)rodowi- sku, najlepszym rozwi(cid:200)zaniem b(cid:218)dzie rozwaga i przeprowadzenie normalizacji. W tym punkcie przedstawiono problemy dotycz(cid:200)ce atrybutów i w(cid:239)a(cid:258)ciwo(cid:258)ci ele- mentów, a nawet przeanalizowano drobny problem z w(cid:239)a(cid:258)ciwo(cid:258)ci(cid:200) style. Jest to jednak zaledwie niewielka cz(cid:218)(cid:258)(cid:202) tego, co przegl(cid:200)darki maj(cid:200) w zanadrzu, je(
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tajemnice JavaScriptu. Podręcznik ninja
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: