Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00389 006565 13232079 na godz. na dobę w sumie
Nowoczesny język JavaScript - książka
Nowoczesny język JavaScript - książka
Autor: Liczba stron: 432
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-5148-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).

Wykorzystaj JavaScript w najlepszy sposób!

Najwyższy czas na aktualną i przystępną książkę na temat JavaScriptu. Za pośrednictwem tej znakomitej pozycji dla początkujących autor bestsellerów Larry Ullman nauczy Cię zasad korzystania z tego języka i zaprezentuje najlepsze współczesne praktyki.

To książka, dzięki której przekonasz się, że nie musisz być programistą, by swobodnie poruszać się w świecie JavaScriptu. Liczne rysunki, czytelne przykłady oraz instrukcje krok po kroku sprawią, że nauka stanie się przyjemnością. W trakcie lektury poznasz fantastyczne narzędzia dla programistów, typy zmiennych oraz składnię języka. Ponadto nauczysz się obsługiwać zdarzenia, konstruować funkcje, komunikować się z przeglądarką oraz korzystać z techniki AJAX. Znajdziesz tu również omówienie najlepszych bibliotek na rynku, a wśród nich informacje na temat jQuery. Książka ta jest idealną pozycją dla każdego pasjonata stron WWW, który chce wykorzystać potencjał języka JavaScript.

Dzięki tej książce:

JavaScript - prosty do opanowania i najlepszy do wykorzystania w zaawansowanych projektach internetowych!



Larry Ullman - pisarz, programista, trener, instruktor, prelegent i konsultant. Napisał dwadzieścia dwie książki i dziesiątki artykułów. Wielu jego czytelników potwierdza, że jego mocną stroną jest tłumaczenie skomplikowanych zagadnień w przystępny sposób, zrozumiały nawet dla osób, które dopiero rozpoczynają przygodę z programowaniem lub projektowaniem.

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

Darmowy fragment publikacji:

Tytuł oryginału: Modern JavaScript: Develop and Design Tłumaczenie: Rafał Jońca ISBN: 978-83-246-5148-1 Authorized translation from the English language edition, entitled: MODERN JAVASCRIPT: DEVELOP AND DESIGN; ISBN 0321812522; by Larry Ullman; published by Pearson Education, Inc, publishing as Peachpit Press. Copyright © 2012 by Larry Ullman. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. Polish language edition published by HELION S.A., Copyright © 2013. 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. Wydawnictwo HELION dołożyło 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. 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/nojejs.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/nojejs Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność SPIS TREĻCI Wprowadzenie ..............................................................................................................9 Witamy w jýzyku JavaScript ....................................................................................... 13 1. (Ponowne) wprowadzenie do jýzyka JavaScript ....................................................... 15 Czym jest JavaScript? ......................................................................................................................16 Historia języka JavaScript ...............................................................................................................17 Czym JavaScript nie jest? ................................................................................................................25 Porównanie JavaScript z… .............................................................................................................26 Dlaczego JavaScript to dobra rzecz? .............................................................................................28 Wersje języka JavaScript i ich obsługa w przeglądarkach ..........................................................29 Cele programowania w języku JavaScript ....................................................................................30 Podsumowanie ................................................................................................................................31 2. JavaScript w akcji ........................................................................................................33 Wybór typu dokumentu .................................................................................................................34 Wprowadzenie do HTML5 ............................................................................................................36 Dodanie kodu JavaScript do kodu HTML ...................................................................................40 Podstawowe podejścia do programowania ..................................................................................42 Łączymy kod ....................................................................................................................................45 Podkradnij ten kod JavaScript .......................................................................................................52 Podsumowanie ................................................................................................................................53 3. Narzýdzia dla programistów ......................................................................................55 Wielka debata — edytor tekstu czy IDE? .....................................................................................56 Przeglądarka internetowa — Twój przyjaciel i Twój wróg ........................................................62 Testowanie na wielu przeglądarkach ............................................................................................68 Testowanie kodu JavaScript ...........................................................................................................69 Błędy i testowanie ............................................................................................................................71 Zasoby dostępne online ..................................................................................................................79 Podsumowanie ................................................................................................................................80 4. Proste typy zmiennych ................................................................................................ 81 Podstawy działania zmiennych .....................................................................................................82 Liczby ................................................................................................................................................86 Praca z ciągami znaków ..................................................................................................................96 Przeprowadzanie konwersji typów .............................................................................................103 Powtórka i dodatkowa nauka ......................................................................................................106 Podsumowanie ..............................................................................................................................107 5. Struktury sterujéce .................................................................................................... 109 Podstawy instrukcji warunkowych .............................................................................................110 Dodatkowe elementy instrukcji warunkowych .........................................................................117 Bardziej wyrafinowane warunki ..................................................................................................125 Podstawy pętli ................................................................................................................................131 Powtórka i dodatkowa nauka ......................................................................................................135 Podsumowanie ..............................................................................................................................136 6. ZĥoŜone typy zmiennych ............................................................................................137 Generowanie dat i czasu ...............................................................................................................138 Korzystanie z tablic .......................................................................................................................151 Korzystanie z obiektów .................................................................................................................163 Tablice czy obiekty? ......................................................................................................................168 Powtórka i dodatkowa nauka ......................................................................................................169 Podsumowanie ..............................................................................................................................170 7. Tworzenie funkcji .......................................................................................................171 Podstawy .........................................................................................................................................172 Funkcje jako obiekty .....................................................................................................................186 Tematy zaawansowane .................................................................................................................192 Powtórka i dodatkowa nauka ......................................................................................................198 Podsumowanie ..............................................................................................................................199 6 NOWOCZESNY JüZYK JAVASCRIPT 8. Obsĥuga zdarzeħ ........................................................................................................ 201 Obsługa zdarzeń — przypomnienie ...........................................................................................202 Tworzenie procedur obsługi zdarzeń .........................................................................................202 Tworzenie biblioteki z funkcjami pomocniczymi ....................................................................206 Rodzaje zdarzeń .............................................................................................................................208 Zdarzenia a dostępność witryny ..................................................................................................215 Zdarzenia i stopniowe ulepszanie ...............................................................................................215 Zaawansowana obsługa zdarzeń .................................................................................................217 Powtórka i dodatkowa nauka ......................................................................................................226 Podsumowanie ..............................................................................................................................228 9. JavaScript i przeglédarka internetowa ....................................................................229 Okna dialogowe .............................................................................................................................230 Korzystanie z okien i obiektu window .......................................................................................232 Modyfikacja DOM ........................................................................................................................247 JavaScript i CSS ..............................................................................................................................256 Korzystanie z ciasteczek ...............................................................................................................262 Wykorzystanie funkcji czasowych ..............................................................................................269 Powtórka i dodatkowa nauka ......................................................................................................271 Podsumowanie ..............................................................................................................................273 10. Korzystanie z formularzy ..........................................................................................275 Ogólne uwagi dotyczące formularzy ..........................................................................................276 Pola i obszary tekstowe .................................................................................................................281 Listy wyboru ...................................................................................................................................283 Opcje wyboru .................................................................................................................................287 Przyciski opcji ................................................................................................................................289 Obsługa przesyłu plików ..............................................................................................................290 Wyrażenia regularne .....................................................................................................................292 Łączymy wszystko razem .............................................................................................................301 Powtórka i dodatkowa nauka ......................................................................................................304 Podsumowanie ..............................................................................................................................306 11. Ajax ............................................................................................................................307 Podstawy Ajax ................................................................................................................................308 Korzystanie z innych rodzajów danych .....................................................................................319 Skrypt po stronie serwera .............................................................................................................322 Przykłady użycia technologii Ajax ..............................................................................................324 Powtórka i dodatkowa nauka ......................................................................................................336 Podsumowanie ..............................................................................................................................337 SPIS TREĻCI 7 12. Zarzédzanie bĥýdami .................................................................................................339 Zgłaszanie i przechwytywanie błędów .......................................................................................340 Wykorzystanie asercji ...................................................................................................................343 Testy jednostkowe .........................................................................................................................344 Powtórka i dodatkowa nauka ......................................................................................................349 Podsumowanie ..............................................................................................................................350 13. Frameworki ................................................................................................................ 351 Wybór odpowiedniego frameworka ...........................................................................................352 Wprowadzenie do jQuery ............................................................................................................353 Wprowadzenie do YUI .................................................................................................................363 Biblioteki .........................................................................................................................................373 Powtórka i dodatkowa nauka ......................................................................................................374 Podsumowanie ..............................................................................................................................375 14. Zaawansowany kod JavaScript ................................................................................ 377 Definiowanie przestrzeni nazw ...................................................................................................378 Tworzenie własnych obiektów ....................................................................................................379 Prototypy i sposób ich działania .................................................................................................384 Korzystanie z domknięć ...............................................................................................................386 Inne sposoby rozpoznawania typu .............................................................................................389 Minifikacja kodu ...........................................................................................................................390 Powtórka i dodatkowa nauka ......................................................................................................392 Podsumowanie ..............................................................................................................................393 15. Przykĥadowy projekt — JavaScript i PHP razem ......................................................395 Określenie celu ...............................................................................................................................396 Tworzenie bazy danych ................................................................................................................397 Konstrukcja witryny .....................................................................................................................398 Tworzenie wersji bez użycia kodu JavaScript ............................................................................399 Tworzenie skryptów dla żądań Ajax ...........................................................................................406 Dodanie kodu JavaScript ..............................................................................................................409 Dokończenie przykładu ................................................................................................................419 Powtórka i dodatkowa nauka ......................................................................................................420 Podsumowanie ..............................................................................................................................421 Skorowidz .................................................................................................................423 8 NOWOCZESNY JüZYK JAVASCRIPT ROZDZIAĤ 2. JAVASCRIPT W AKCJI JavaScript, podobnie jak inne obiektowe jÚzyki programowania, jest czymĂ, co leniwy programista moĝe wykorzystywaÊ bez peïnego zrozumienia zasad jego dziaïania. Ta cecha to zarówno zaleta, jak i powaĝne brzemiÚ. ChoÊ niniejsza ksiÈĝka uczy wïaĂciwego uĝywania jÚzyka JavaScript, w tym rozdziale pojawiÈ siÚ przykïady wziÚte z ĝycia bez przeprowadzania nudnego, formalnego szkolenia. Z pewnoĂciÈ nie jest to ortodoksyjny sposób nauki, ale zakïadam, iĝ Czytelnik miaï wczeĂniej przynajmniej minimalny kontakt z jÚzykiem JavaScript. Co wiÚcej, ten poczÈtkowy rozdziaï okreĂla cele, które bÚdÈ realizowane w kilku kolejnych rozdziaïach. Dodatkowo w rozdziale tym poruszÚ podstawowe tematy zwiÈzane z projektowaniem i tworzeniem witryn internetowych, w szczególnoĂci zwiÈzane z wpïywem DOCTYPE na niemal wszystko, co robisz. WYBÓR TYPU DOKUMENTU Gdy zaczynałem pracę nad witrynami internetowymi, nie zdawałem sobie sprawy z istotności de- klaracji typu dokumentu, czyli tak zwanego DOCTYPE. W tamtym czasie wierzyłem, że stosowałem HTML 3.2, więc musiałem rozpoczynać strony WWW od następującego wpisu: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2 Final//EN Wpis DOCTYPE do deklaracja wersji języka HTML wykorzystywanego przez stronę WWW, a każ- da nowa wersja języka wprowadza nowe funkcjonalności (na przykład nowe elementy formularzy). HTML 2.0 nie obsługiwał jeszcze tabel, a HTML 3.2 miał ograniczone wsparcie dla arkuszy stylów. Przez ostatnie lata najpopularniejszymi wpisami DOCTYPE były te, które dotyczyły HTML 4.01 i XHTML 1.0. XHTML to w zasadzie HTML, ale z bardziej restrykcyjnymi regułami zapewniającymi zgod- ność ze składnią XML (więcej na ten temat w następnym podrozdziale). Zarówno HTML 4.01, jak i XHTML 1.0 występują w trzech odmianach: Strict, Transitional i Frameset. Pierwszy jest najbardziej restrykcyjny i zapewnia obsługę mniejszej liczby elementów. Wersja Transitional to wersja Strict z dodatkową obsługą elementów wycofywanych z użycia. Wersja Frameset to Transitional z obsługą tak zwanych ramek. Jeśli myślisz podobnie jak ja, wybierzesz HTML lub XHTML, a następnie prawdopodobnie wersję Transitional, ponieważ jest mniej restrykcyjna: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd Być może masz nawyk sprawdzania utworzonych stron WWW i korzystasz przy tym z narzę- dzia W3C Markup Validator (http://validator.w3.org/). Jeśli tak, to wiesz, że narzędzia tego typu przeprowadzają walidację na podstawie rodzaju wpisu DOCTYPE. Jeżeli w kodzie strony pojawi się wycofany element lub ramka, a używa się trybu Strict, zostanie to wychwycone. To samo dotyczy nie- zastosowania się do składni XML w przypadku dokumentów XHTML (rysunek 2.1). RYSUNEK 2.1. NarzÚdzie do walidacji sprawdza, czy dokument zostaï sporzÈdzony zgodnie z deklarowanym standardem „ UWAGA: Wpis DOCTYPE musi byÊ pierwszym elementem na stronie WWW. Przed nim nie moĝe wystÈpiÊ nawet znak spacji. Zapewne doskonale znasz wszystkie przedstawione tutaj informacje, ale jeśli nie lub nie intere- sowałeś się zbytnio samą walidacją, można to zrozumieć. Rzeczywistym celem nie jest zapewnienie, by walidator nie zgłosił błędów, ale by strony WWW prawidłowo funkcjonowały w przeglądarce internetowej. Tutaj wpis DOCTYPE również odgrywa istotną rolę: przeglądarka internetowa wybierze jeden z dwóch trybów działania na podstawie wpisu DOCTYPE. Jeśli wpis istnieje, przeglądarka włączy tak zwany tryb zgodności ze standardami (nazywany po prostu trybem standardów), czyli będzie obsługiwała kod HTML, CSS i JavaScript w sposób przewidziany w standardzie. Jeśli doku- ment nie zawiera wpisu DOCTYPE lub jest on nieprawidłowy, przeglądarka włączy tak zwany tryb quirks, który będzie traktował kod HTML, CSS i JavaScript podobnie jak starsze przeglądarki interne- 34 ROZDZIAĤ 2. JavaScript w akcji towe. Na przykład przełączenie przeglądarki Internet Explorer 8 w tryb quirks spowoduje wyświe- tlanie przez nią stron WWW w taki sam sposób, jak robiła to przeglądarka Internet Explorer 5.5 (IE 5.5 ma już grubo ponad 10 lat, więc wyobraź sobie, jak będzie w takiej sytuacji wyglądała no- woczesna, lśniąca witryna). CZYM JEST DOM? DOM, wspomniany w rozdziale 1. (skrót od Document Object Model — obiektowy model doku- mentu), to sposób reprezentacji danych XML i poruszania siÚ po nich, który obejmuje równieĝ HTML i XHTML. Standardem DOM zarzÈdza World Wide Web Consortium (W3C). Obecnie obowiÈ- zujÈcym standardem jest DOM Level 3, wydany w 2004 roku. ChoÊ standard ten zostaï wydany wiele lat temu, nadal nie jest w peïni lub jednolicie obsïugiwany przez wszystkie przeglÈdarki interne- towe. Trzeba mocno podkreĂliÊ, ĝe DOM nie stanowi czÚĂci jÚzyka JavaScript, ale kod JavaScript najczÚĂciej uĝywa DOM, by modyfikowaÊ elementy strony WWW lub otrzymywaÊ od niej zdarzenia (tak zwana modyfikacja DOM). POTWIERDZENIE TRYBU PRZEGLkDARKI Niektóre przeglÈdarki uïatwiajÈ poznanie trybu, w którym wyĂwietlajÈ wczytanÈ stronÚ WWW. PrzeglÈdarka Firefox wyĂwietla tÚ informacjÚ w oknie Informacje o stronie otwieranym z poziomu menu NarzÚdzia (poszukaj wiersza Tryb wyĂwietlania). PrzeglÈdarka Opera wyĂwietli stosownÈ informacjÚ po wybraniu Widok/NarzÚdzia deweloperskie/Informacje o stronie (poszukaj wiersza Tryb wyĂwietlania). Pozostaïe przeglÈdarki nie wyĂwietlajÈ tej informacji w tak przystÚpny sposób, ale w rozdziale 9. pokaĝÚ, jak jÈ uzyskaÊ przy uĝyciu kodu JavaScript. Jakby brakowało innych problemów, okazuje się, że w niektórych przeglądarkach nawet po- prawny wpis DOCTYPE może powodować włączenie trybu quirks. Podobna sytuacja może wystąpić, gdy przeglądarka znajdzie na stronie niepoprawne elementy, choć wpis i pozostała część kodu są prawi- dłowe. Oznacza to, że poprawność wpisu DOCTYPE ma duży wpływ na jednolity wygląd i zachowa- nie stron WWW we wszystkich przeglądarkach. W książce, podobnie jak w życiu, trzeba podjąć de- cyzję dotyczącą wykorzystywanego wpisu DOCTYPE. Wybrałem następujący: !DOCTYPE html Ma on kilka zalet: x łatwiej go napisać, więc istnieje niewielkie prawdopodobieństwo błędu; x ma mniej znaków, więc przesyłane pliki HTML będą mniejsze i szybciej trafią do przeglądarki; x jest obsługiwany przez wszystkie główne przeglądarki internetowe; x powoduje automatyczne włączenie trybu standardów. Jeśli jeszcze nie natknąłeś się na ten wpis DOCTYPE, wynika to zapewne z faktu, iż to nowy oficjalny wpis dla języka HTML5. Skoro jednak HTML5 nie jest jeszcze oficjalnym standardem i nadal trwają nad nim prace, to czy można z niego bezpiecznie skorzystać? Przyjrzyjmy się temu zagadnieniu dokładniej. „ UWAGA: Nie wszystkie przeglÈdarki internetowe przeïÈczajÈ siÚ miÚdzy trybami w ten sam sposób. Prze- glÈdarka Opera od lat domyĂlnie stosuje tryb standardów, a przeglÈdarki z rodziny Mozilla wykorzystujÈ wïasny tryb „standardu z wyjÈtkami”. Wybór typu dokumentu 35 WPROWADZENIE DO HTML5 Gdy powstawała ta książka, był rok 2012 i HTML5 wydawał się ogromnym przedsięwzięciem. W takiej lub innej postaci tak naprawdę funkcjonuje on od wielu lat, ale dopiero oficjalne wstrzy- manie prac nad XHTML 2.0 spowodowało, że HTML5 stał się de facto nowym standardem. Nie został jeszcze w pełni sformalizowany czy uznany za oficjalny standard, co oznacza, że przyszła wersja oficjalna może różnić się od omawianej tutaj. W tak rozproszonym środowisku, jakim jest internet, mądrze byłoby unikać korzystania z tej nowinki. Obecnie jednak najczęściej wybiera się model po- średni, czyli stosuje się niektóre funkcje HTML5, zapewniając w razie potrzeby wersje alternatywne. Przyjrzymy się ogólnemu szablonowi strony WWW w HTML5, a następnie omówię kilka nowych elementów formularzy HTML5. „ WSKAZÓWKA: HTML5 nie jest jednym standardem. To raczej nazwa oznaczajÈca nowy standard HTML i zbiór towarzyszÈcych mu technologii. SZABLON HTML5 Poniższy blok kodu przedstawia szablon HTML5, z którego będę korzystał we wszystkich przykładach prezentowanych w książce. Przyjrzyj się mu — nieco dalej omówię jego poszczególne części. !doctype html html lang= pl head meta charset= utf-8 title Szablon HTML5 /title !--[if lt IE 9] script src= http://html5shiv.googlecode.com/svn/trunk/html5.js /script ![endif]-- /head body !-- szablon.html -- /body /html Jak wcześniej wspomniałem, użycie pierwszego wiersza w takiej postaci spowoduje włączenie trybu standardów, który jest pierwszym pożądanym celem. Następnie pojawia się element html zawierający elementy head oraz body. Co ciekawe, HTML5 nie wymusza użycia elementu head, ale dla mnie takie wymuszenie byłoby bardzo dziwne. HTML5 nadal wymaga znacznika title, nawet jeśli zabraknie elementu head. Warto również wyrobić w sobie nawyk podawania sposobu kodo- wania znaków. Jak można zauważyć, również znacznik meta dotyczący kodowania znaków uległ uproszczeniu (wiersz 4.). Jeżeli zagadnienie kodowania znaków nie jest Ci znane, poszukaj infor- macji na ten temat. Na razie wystarczy wiedzieć, że utf-8 spowoduje użycie kodowania UTF-8 ob- sługującego znaki większości języków świata. Dodałem również informację o języku strony WWW (wiersz 2.) jako atrybut lang znacznika html, choć nie jest to wymóg. „ UWAGA: Poniewaĝ informacja o kodowaniu znaków musi pojawiÊ siÚ moĝliwie jak najwczeĂniej, zawsze umieszczaj jÈ tuĝ poniĝej znacznika otwierajÈcego head i przed znacznikiem title. To podstawowa składnia dokumentu HTML5. W następnym podrozdziale omówię główny powód, dla którego używam HTML5 w niniejszej książce — znacznie rozbudowany zestaw ele- mentów formularzy. Wróćmy jednak do dwóch dodatkowych elementów dotyczących szablonu 36 ROZDZIAĤ 2. JavaScript w akcji HTML5. W wielu przykładach będzie wykorzystywany zewnętrzny arkusz stylów; poprawna składnia jego osadzania wygląda następująco: link rel= stylesheet href= css/styles.css Zauważ, że element link nie używa atrybutu type, ponieważ automatycznie zakłada się, iż w momencie ustawienia wartości atrybutu rel na stylesheet przyjmie on wartość text/css. Ponadto HTML5 definiuje wiele nowych elementów semantycznych, takich jak article, footer, header, nav i section. Ich powstanie wiąże się z wynikami badań nad najczęściej stosowanymi na stronach WWW identyfikatorami i nazwami klas. Na przykład w HTML4 wielu projektantów uży- wało elementu div z identyfikatorem header, by wskazać nagłówek strony WWW. Dzięki temu łatwiej było nadać mu odpowiedni styl CSS. W HTML5 wystarczy utworzyć element header i jemu przypisać odpowiedni styl. Większość starszych przeglądarek, które powstały przed HTML5, ob- służy nowe elementy i pozwoli nadać im style bez najmniejszych problemów. Niestety, przeglądarki Internet Explorer starsze niż wersja 9. nie potrafią nadawać stylów nieznanym elementom, co oznacza, że użytkownik IE8 (lub starszej wersji) domyślnie nie zobaczy odpowiedniego stylu. Rozwiązaniem jest funkcjonalny kawałek kodu JavaScript, nazywany HTML5 shiv, napisany przez bardzo sprytne osoby. Kod ten generuje nowe elementy za pomocą kodu JavaScript, co powoduje rozpoczęcie roz- poznawania ich przez przeglądarkę, a co za tym idzie, nadawanie im odpowiednich stylów. Biblio- teka HTML5 shiv jest udostępniana na zasadzie otwartego kodu i znajduje się na serwerach Google Code. Jej użycie wymaga dodania następującego fragmentu kodu: !--[if lt IE 9] script src= http://html5shiv.googlecode.com/svn/trunk/html5.js /script ![endif]-- Blok ten zaczyna się i kończy komentarzem warunkowym obsługiwanym tylko i wyłącznie przez przeglądarkę Internet Explorer. Warunek sprawdza, czy aktualna przeglądarka jest starsza niż IE9 (lt). Jeśli tak, do strony zostanie dołączony element script. Ten komentarz warunkowy jest odczytywany tylko i wyłącznie przez przeglądarkę IE; pozostałe przeglądarki nie podejmą nawet próby wczytywania skryptu. Zauważ, że znacznik script, podobnie jak wcześniejszy znacznik link, nie używa atrybutu type, ponieważ text/javascript jest wartością domyślną. W rozdziale 3. wymienię kilka narzędzi do walidacji kodu HTML. Na razie wspomnę, że poza standardowym walidatorem W3C można również korzystać z walidatora HTML5, dostępnego pod adresem http://html5.validator.nu/. Gdy powstawała ta książka, oba były uznawane za narzędzia eksperymentalne, ale wynikało to głównie z faktu, iż sam HTML5 nie był jeszcze oficjalnym stan- dardem! „ UWAGA: W niektórych prezentowanych przykïadach sÈ wykorzystane nowe znaczniki, przykïady te wy- magajÈ zatem doïÈczenia HTML5 shiv. Niemniej przedstawiony szablon stosujÚ konsekwentnie w caïej ksiÈĝce. ELEMENTY FORMULARZY HTML5 Istnieją dwa powody, dla których zdecydowałem się w niniejszej książce zastosować HTML5 po- mimo tego, że nie stanowi on jeszcze oficjalnego standardu. Pierwszy powód jest oczywisty — HTML5 to z pewnością przyszłość witryn internetowych. Drugi dotyczy nowych elementów formula- rzy oferowanych przez HTML5, które czynią strony WWW znacznie przyjemniejszymi. W szczególno- ści myślę o następujących typach pól tekstowych: Wprowadzenie do HTML5 37 x adres e-mail, x liczba, x zakres liczb, x wyszukiwanie, x numer telefonu, x adres URL. Dzięki tym elementom łatwiej wprowadzać adresy e-mail, liczby (za pomocą przycisków zmia- ny lub suwaka — rysunek 2.2), numery telefonów i adresy URL. W przeglądarkach, które obsługują te elementy, nastąpi ich automatyczne sprawdzenie i wyświetlenie stosownej informacji o błędzie. Na przykład pole wprowadzania adresu URL umożliwi wpisanie jedynie poprawnych adresów (gdy ten typ pola jest obsługiwany przez przeglądarkę; rysunek 2.3). Kilka typów pól ma dodatkowe za- lety. Gdy użytkownik wprowadza wartość w pole adresu e-mail na urządzeniu przenośnym, takim jak iPhone, telefon automatycznie użyje wersji klawiatury przystosowanej do adresów e-mail. Pole tekstowe wyszukiwania (typ search) może mieć kilka dodatkowych efektów i funkcjonalności, a nawet inny wygląd (rysunek 2.4; tekst Szukaj… nie jest częścią domyślnego zachowania). RYSUNEK 2.2. Nowe pole tekstowe do wpisania liczb z HTML5 RYSUNEK 2.3. Elementy formularzy HTML5 mogÈ zawieraÊ automatyczne sprawdzanie poprawnoĂci danych, na przykïad podanego adresu URL RYSUNEK 2.4. W przeglÈdarce Safari nowe pole tekstowe wyszukiwania przyjmuje inny wyglÈd Co istotne, gdy przeglądarka nie obsługuje nowych typów pól tekstowych, wyświetli użytkow- nikowi standardowe pole tekstowe. Przeglądarki domyślnie wyświetlają nieznane im elementy w trybie inline, co oznacza, że nowe pola nie spowodują katastrofy w układzie graficznym witryny! Formularze HTML5 otrzymały również kilka nowych atrybutów wartych rozważenia. Pierwszym z nich jest autofocus, oznaczający element, który powinien być domyślnie wybrany po włączeniu formularza: input type= text name= nazwa autofocus „ UWAGA: Gdy powstawaïa ta ksiÈĝka, nowe rodzaje pól formularzy w najszerszym zakresie obsïugiwaïa przeglÈdarka Opera. 38 ROZDZIAĤ 2. JavaScript w akcji Drugim jest atrybut placeholder, który określa domyślny tekst pola, jeśli nie wprowadzono nowej wartości (rysunek 2.4): input type= search placeholder= Szukaj... HTML5 wprowadza również atrybut required powiązany z automatycznym sprawdzaniem poprawności formularzy. Gdy zostanie zastosowany do pola tekstowego, użytkownik musi wpro- wadzić w tym polu wartość, aby proces walidacji mógł się zakończyć sukcesem. Jeżeli formularz wymaga adresu e-mail, użytkownik musi wprowadzić poprawny adres e-mail. Jeśli element nie jest wymagany, brak danych uznawany jest za sytuację prawidłową i tylko podanie błędnego adresu e-mail spowoduje zgłoszenie błędu (rysunki 2.5 i 2.6): Gïówny adres e-mail: input type= email name= email1 required Dodatkowy adres e-mail: input type= email name= email2 RYSUNEK 2.5. WïÈczenie wymagania wartoĂci powoduje zgïoszenie bïÚdu. Podana wartoĂÊ musi byÊ zgodna z typem pola (rysunek 2.6) RYSUNEK 2.6. Jeĝeli w polu opcjonalnym wprowadzono wartoĂÊ, musi byÊ ona poprawna By ograniczyć długość tekstu wprowadzanego w polu tekstowym, użyj atrybutu maxlength. Sam atrybut istnieje od wielu lat, ale teraz możliwe jest wyświetlenie użytkownikowi dodatkowej informacji (w sposób zależny od przeglądarki), a nawet zastosowanie tego atrybutu do obszarów tekstu (znaczników textarea): textarea name= komentarz rows= 8 cols= 40 maxlength= 300 /textarea Aby wyłączyć automatyczne sprawdzanie formularza, dodaj atrybut novalidate w znaczniku otwierającym form: form action= strona.php method= get novalidate Warto w tym momencie ostrzec o możliwych komplikacjach, jeśli niektóre z przykładów z dal- szych rozdziałów będą testowane w przeglądarkach obsługujących walidację formularzy z HTML5. Ponieważ w testowanych przykładach jest stosowana walidacja po stronie kodu JavaScript, musisz dodać atrybut novalidate. W przeciwnym razie przeglądarka nigdy nie prześle do kodu JavaScript błędnej wartości. Znasz już podstawy HTML5, zatem możemy nareszcie powrócić do języka JavaScript! „ WSKAZÓWKA: HTML5 wprowadziï równieĝ nowy atrybut pattern, który sprawdza poprawnoĂÊ wartoĂci elementu przy uĝyciu wyraĝenia regularnego. Wprowadzenie do HTML5 39 HTML5 KONTRA XHTML XHTML wymaga bardzo restrykcyjnej skïadni wynikajÈcej z XML, wiÚc osobiĂcie zawsze prefero- waïem tÚ wersjÚ zamiast zwykïego HTML-u (dodatkowe restrykcje pomagajÈ uniknÈÊ bïÚdów lub szybciej je wykryÊ). XHTML ma kilka reguï, które nie dotyczÈ zwykïego kodu HTML. W szczególnoĂci: 9 elementy bez znacznika zamykajÈcego, takie jak img, input lub br, muszÈ zostaÊ zamkniÚte znakiem ukoĂnika w znaczniku otwierajÈcym, na przykïad: img src= plik.png alt= obraz / 9 atrybuty muszÈ byÊ umieszczone w cudzysïowach, jak w przykïadzie powyĝej; 9 atrybuty zawsze muszÈ posiadaÊ wartoĂÊ, na przykïad: option value= tak selected= selected Tak /option HTML5, podobnie jak wczeĂniejsze wersje HTML, nie wymaga stosowania restrykcyjnej skïadni XML. Ma to kilka implikacji, wïÈcznie z tÈ, iĝ nie trzeba stosowaÊ ĝadnej z powyĝszych zasad. Dwa powyĝsze fragmenty w HTML5 moĝna zapisaÊ nastÚpujÈco i nadal bÚdÈ poprawne: img src=plik.png alt=obraz / option value=tak selected Tak /option Jestem w stanie opuĂciÊ ukoĂniki i wartoĂci atrybutów (jeĂli to moĝliwe), bo taka skïadnia jest czytel- niejsza. Nadal jednak zalecam stosowanie cudzysïowów dla wartoĂci atrybutów. DziÚki temu ïa- twiej okreĂliÊ, co jest wartoĂciÈ, a co juĝ nowym atrybutem. Co wiÚcej, istniejÈ sytuacje, w których uĝycie cudzysïowów jest obowiÈzkowe, na przykïad gdy wartoĂÊ zawiera znak spacji: img src= plik.png alt= Moje wakacje Poniewaĝ niektóre atrybuty bÚdÈ musiaïy mieÊ cudzysïowy z powodu stosowanych wartoĂci, naj- lepiej zapewniÊ jednolitoĂÊ kodu i stosowaÊ cudzysïowy w kaĝdej sytuacji. DODANIE KODU JAVASCRIPT DO KODU HTML W tym rozdziale pojawi się kilka przykładów praktycznego kodu JavaScript, który zostanie wyja- śniony dopiero w drugiej części, dotyczącej podstaw języka JavaScript. Pewne elementarne informacje muszą jednak pojawić się już w tym rozdziale, na przykład sposób wstawiania kodu JavaScript na stronie WWW, aczkolwiek podejrzewam, że doskonale znasz te informacje. Do osadzania kodu JavaScript na stronie HTML służy znacznik script: script /script We wcześniejszych wersjach języka HTML wymagano atrybutu type, który musiał mieć war- tość text/javascript. W HTML5 wprowadzono drobną zmianę i brak atrybutu oznacza użycie wspomnianej wartości jako domyślnej. Jeżeli wykorzystujesz starszą wersję HTML, stosuj atrybut. Kod JavaScript powinien znajdować się między znacznikami otwierającym i zamykającym. Przeglądarka internetowa w trakcie wczytywania strony WWW wykona znajdujący się tam kod. Alternatywne rozwiązanie polega na użyciu zewnętrznego pliku zawierającego kod JavaScript i poinformowaniu przeglądarki o jego lokalizacji za pomocą atrybutu src znacznika script: script src= Ăcieĝka/do/pliku.js /script Ścieżka musi być poprawna, ale można podawać ją w wersji względnej (czyli względem adresu strony WWW) lub pełnej (patrz ramka). 40 ROZDZIAĤ 2. JavaScript w akcji Nadal bardzo popularne jest tworzenie małych fragmentów kodu bezpośrednio na stronie HTML, a nie w osobnym pliku. Gdy kod zacznie być bardziej złożony lub będzie stosowany na wielu stro- nach, wykorzystanie osobnych plików dla kodu zaczyna mieć większy sens, ponieważ takim kodem łatwiej zarządzać. W zewnętrznym pliku kod nie zawiera znacznika script, ponieważ kod ten nie znajduje się w kodzie HTML. Ponadto pliki z zewnętrznym kodem JavaScript używają rozszerzenia pliku .js. Dodatkową zaletą zewnętrznych plików JavaScript jest to, iż mogą być łatwo umieszczone w pamięci podręcznej przeglądarki i użyte ponownie. Oznacza to, że jeśli kilka stron WWW korzysta z tego samego zewnętrznego pliku JavaScript, zostanie on pobrany przez przeglądarkę tylko raz. Istnieje jeszcze pięć kwestii dotyczących znacznika script, o których warto pamiętać. Po pierwsze, podobnie jak w przypadku wielu innych elementów HTML, znacznik ten może pojawić się w kodzie strony WWW wielokrotnie. Do takiej sytuacji dochodzi w większości przypadków. Po drugie, pojedynczy element script może zawierać kod JavaScript w sobie lub stosować ze- wnętrzny kod JavaScript, ale nie jednocześnie. Jeśli strona WWW korzysta z obu rozwiązań, mu- sisz użyć dwóch niezależnych elementów. Gdy jest stosowana wersja XHTML, cały kod JavaScript trzeba dodatkowo otoczyć znacznikami CTAGS, co prowadzi do powstania nieco dziwnej i mało przyjaznej składni: script // ![CDATA[ // WáaĞciwy kod JavaScript! //]] /script ¥CIE¿KI PE’NE I WZGL}DNE Typowym ěródïem frustracji, szczególnie dla poczÈtkujÈcych projektantów i programistów witryn internetowych, jest odpowiedni sposób odnoszenia siÚ do innych plików lub folderów. IstniejÈ dwa gïówne rozwiÈzania: Ăcieĝki peïne lub wzglÚdne. ¥cieĝka peïna rozpoczyna siÚ od ĂciĂle okreĂlonego i niezmiennego punktu, na przykïad gïównego adresu URL witryny. W HTML Ăcieĝki peïne zawsze rozpoczynajÈ siÚ od http://domena lub samego / (zastÈp ciÈg domena rzeczywistÈ nazwÈ domeny, czyli na przykïad www.przyklad.pl). W takiej sytuacji peïna Ăcieĝka do pliku indeksu w korzeniu witryny ma postaÊ http://domena/index.html lub po prostu /index.html. ¥cieĝka peïna do pliku plik.js w folderze js, w korzeniu witryny, bÚdzie miaïa postaÊ http://domena/js/plik.js lub /js/plik.js. ZaletÈ Ăcieĝki peïnej jest to, ĝe zawsze bÚdzie prawidïowa, niezaleĝnie od miejsca jej uĝycia w kodzie, poniewaĝ dziaïa ona identycznie w pliku index.html w gïównym folderze witryny i w pliku strona.html w jednym z podkatalogów. ¥cieĝka wzglÚdna jest zawsze wyliczana wzglÚdem strony HTML przeprowadzajÈcej wyliczenie i nie zaczyna siÚ od http:// czy /. ¥cieĝkÚ tÚ najczÚĂciej rozpoczyna siÚ od nazwy pliku lub folderu. Na przykïad inna.html jest ĂcieĝkÈ relatywnÈ do pliku inna.html znajdujÈcego siÚ w tym samym folderze co aktualny plik. Aby utworzyÊ ĂcieĝkÚ wzglÚdnÈ do pliku znajdujÈcego siÚ w podkatalogu, najpierw wpisuje siÚ nazwÚ podkatalogu, a nastÚpnie nazwÚ pliku (lub innych podkatalogów), na przykïad js/plik.js. Niektórzy preferujÈ oznaczanie Ăcieĝek wzglÚdnych przez rozpoczynanie ich od znaków kropki i ukoĂnika, które oznaczajÈ aktualny katalog. Innymi sïowy, ./inny.html jest równoznaczne z inny.html, a ./js/plik.js jest równoznaczne z js/plik.js. Aby przejĂÊ do katalogu powyĝej, uĝyj dwóch znaków kropki. JeĂli strona.html znajduje siÚ w podkatalogu i ma odnieĂÊ siÚ do pliku plik.js w folderze js, poprawna Ăcieĝka wzglÚdna bÚdzie miaïa postaÊ ../js/plik.js, czyli najpierw przejdzie jeden folder wyĝej, a nastÚpnie przejdzie do folderu js. ¥cieĝki wzglÚdne trudno jest zapisaÊ poprawnie, ale najczÚĂciej dziaïajÈ one prawidïowo równieĝ po przeniesieniu witryny w inne miejsce, a nawet do innej domeny (o ile tylko zostanÈ zachowane wzajemne relacje plików). Dodanie kodu JavaScript do kodu HTML 41 Techniczny powód jest dosyć złożony, ale wynika ze sposobu przetwarzania danych umiesz- czonych w elemencie script przez XHTML. Ponieważ jednak [CDATA[]] jest identyfikatorem dla parsera, a nie kodem JavaScript, zarówno znacznik otwierający ![CDATA[, jak i zamykający ]] muszą zostać poprzedzone komentarzem JavaScript (//). Przedstawione rozwiązanie dotyczy tylko i wyłącznie sytuacji, w których korzysta się z wersji XHTML i umieszcza kod JavaScript wewnątrz elementów script. Jest to rozwiązanie niezalecane dla HTML (włączając HTML5), a także w sytuacji, gdy kod JavaScript znajduje się w zewnętrznym pliku. Wspominam o tym, byś nie był zdziwiony, gdy zobaczysz tego rodzaju fragment w kodzie innych osób. Po trzecie, element script bardzo często umieszcza się w elemencie head HTML, ale nie jest to wymóg. Co więcej, obecnie wielu programistów zaleca wstawianie elementów script pod koniec kodu strony HTML. Yahoo! zaleca umieszczanie ich tuż przed znacznikiem zamykającym body. Głównym argumentem jest chęć wywołania wrażenia szybszego wczytywania strony WWW. Wynika to z tego, iż przeglądarka internetowa po napotkaniu znacznika script od razu przystępuje do pobierania kodu (jeśli nie znajduje się on w jej pamięci podręcznej). Przeglądarka zawiesi dalsze przetwarzanie kodu HTML aż do momentu pobrania i wykonania wskazanego skryptu. Po czwarte, staraj się nie używać na jednej stronie WWW zbyt wielu zewnętrznie wczytywanych skryptów, bo zaszkodzi to wydajności witryny. PODSTAWOWE PODEJĻCIA DO PROGRAMOWANIA Zanim przejdziemy do właściwego kodu, warto przyjrzeć się w szczegółach trzem podejściom do programowania witryn internetowych. To, które podejście wybierzesz — a można wybrać więcej niż jedno — wpływa nie tylko na sposób pisania kodu, ale także na komfort internautów odwie- dzających witrynę. PRZYJAZNA DEGRADACJA Poza znacznikiem script, który dodaje kod JavaScript do strony HTML, istnieje znacznik stano- wiący jego przeciwieństwo — noscript. Służy on do przedstawienia stosownego komunikatu lub użycia alternatywnej treści, jeśli przeglądarka nie obsługuje kodu JavaScript: noscript Twoja przeglÈdarka nie obsïuguje kodu JavaScript! /noscript Wszystko, co zostanie umieszczone między znacznikami, nie powinno stosować kodu JavaScript, czyli dopuszczalny jest jedynie tekst lub kod HTML. Poszczególne statystyki różnią się pod tym względem, ale mniej więcej 1 – 3 procent wszystkich użytkowników korzystających z witryn internetowych nie ma włączonej z takich lub innych powo- dów obsługi języka JavaScript. Dotyczy to osób, które: x celowo wyłączyły obsługę języka JavaScript w przeglądarce internetowej, x korzystają z rozszerzeń typu NoScript (http://noscript.net/), które domyślnie wyłączają obsługę JavaScriptu na witrynie, chyba że użytkownik dołączy witrynę do tak zwanej białej listy, x korzystają z odczytywania tekstu stron WWW na głos (osoby niedowidzące), x korzystają ze starszych przeglądarek w urządzeniach przenośnych lub konsolach do gier, x używają narzędzi wiersza poleceń — narzędzia te nie analizują pobranego kodu JavaScript (użytkownicy ci wpisują w wierszu poleceń na przykład polecenia wget lub curl), Ponadto możemy mieć do czynienia nie z ludźmi, ale z robotami, na przykład robotami wyszu- kiwarek. To niewielki odsetek całego rynku, ale sam musisz się zastanowić, w jaki sposób najlepiej rozwiązać problem. Istnieją trzy podejścia. 42 ROZDZIAĤ 2. JavaScript w akcji 1. Można przyjąć, że nie istnieją użytkownicy mający wyłączoną obsługę JavaScriptu. 2. Można zastosować przyjazną degradację. 3. Można wprowadzić stopniowe ulepszanie. Choć oczywiście sam będziesz wybierał podejście, to jednak pierwsze rozwiązanie, w szczegól- ności przy sporym wzroście liczby użytkowników korzystających z urządzeń przenośnych, może nie być najszczęśliwsze. Mimo to istnieje spora grupa programistów, którym nie mieści się w głowie, że ktoś mógłby nie posiadać włączonej obsługi języka JavaScript. W efekcie witryny tego typu nie działają prawidłowo, a odwiedzający nie wie nawet, co jest tego przyczyną. Oczywiście istnieją słuszne powody, dla których witryna może wymagać obsługi języka JavaScript, ale odwiedzający powinni zostać o tym fakcie poinformowani. Brak tego rodzaju informacji zniechęca odwiedzają- cych do witryny i źle świadczy o programiście (lub firmie, do której należy witryna). Przez lata najpopularniejszym rozwiązaniem było podejście drugie i nadal pojawia się stosun- kowo często. Przyjazna degradacja to taktyka, w której wykonuje się wersję z pełną funkcjonalnością, a następnie zapewnia się alternatywny interfejs lub tylko komunikat informujący o potrzebie uży- cia kodu JavaScript w przypadku wykrycia urządzenia, które nie może skorzystać z pełnej wersji witryny. Brzmi to znajomo? Tak, to efekt użycia znacznika noscript. Przyjazna degradacja to zna- czący postęp w stosunku do sytuacji, w której po prostu ignoruje się problem. Główna różnica polega na tym, że informuje się odwiedzającego o istnieniu problemu i wskazuje sposób jego rozwiązania (na przykład włączenie obsługi języka JavaScript lub użycie innej przeglądarki). Jeszcze lepszym rozwiązaniem okazuje się stopniowe ulepszanie. STOPNIOWE ULEPSZANIE Stopniowe ulepszanie to termin, który został wprowadzony w 2003 roku, ale jego upowszechnianie trwa do dnia dzisiejszego. Stopniowe ulepszanie to podejście będące odwrotnością przyjaznej de- gradacji. Przyjazna degradacja zaczyna od pełnej funkcjonalności witryny i oferuje alternatywę, je- śli pełna wersja nie jest obsługiwana, natomiast stopniowe ulepszanie rozpoczyna od podstawowej funkcjonalności, a następnie rozbudowuje ją, dodając wygodniejsze sposoby obsługi do tych sys- temów, które je obsługują (rysunek 2.7). Stopniowe ulepszanie nie tylko zapewnia, że wszyscy klienci będą w stanie korzystać z witryny — osobiście uważam nawet, że takie podejście ułatwia programowanie. RYSUNEK 2.7. Stopniowe ulepszanie dodaje dynamiczne elementy do podstawowej funkcjonalnoĂci Stopniowe ulepszanie dotyczy nie tylko kodu JavaScript, ale również stylów CSS. Tematowi temu poświęcono nawet całe książki (Tworzenie stron metodą stopniowego ulepszania. Witryny dostępne dla każdego, Helion 2010) i nie mogę poświęcić mu tutaj zbyt dużo miejsca, ale cały proces jest znacznie prostszy, niż mogłoby się wydawać. Zacznijmy od tego, że należy napisać zgodny ze standardami, dobrze ustrukturyzowany i po- prawny semantycznie kod HTML. Semantyczny HTML wykorzystuje znaczniki HTML, by jawnie wskazać znaczenie treści, a nie sposób, w jaki ma zostać ona przedstawiona. Prosty przykład — za- miast znacznika i oznaczającego kursywę używaj znacznika em wskazującego na istotny element tekstu. Choć różnica wydaje się minimalna, w przypadku em przeglądarka internetowa nie musi Podstawowe podejļcia do programowania 43 stosować dodatkowych stylów (choć domyślnie tak właśnie jest). Skoro już jesteśmy przy semantycz- nym HTML, cała definicja warstwy prezentacyjnej trafia do CSS, gdzie powinna się znaleźć. W sy- tuacji, gdy nie istnieją znaczniki wskazujące znaczenie elementu, używa się klas. Trzeba powie- dzieć, że właśnie z powodu semantycznych klas w HTML5 wprowadzono nowe elementy, takie jak footer, header i nav. Wykonaną poprawnie semantycznie stronę HTML warto poddać walidacji, by sprawdzić, czy nie zawiera błędów i czy nie spowoduje włączenia przez przeglądarkę trybu quirks. Upewnij się również, że kod HTML i podstawowe style CSS zapewniają poprawny wygląd strony we wszystkich docelowych przeglądarkach. Dopiero teraz można rozpocząć dodawanie ulepszeń, które mogą nie być dostępne dla wszystkich odwiedzających witrynę. Przykład takiego podejścia został zaprezen- towany w formularzu rejestracyjnym z rozdziału 1. Podstawowa funkcjonalność tego formularza, a także wszystkich innych, wykorzystuje przesy- łanie danych bezpośrednio do skryptu na serwerze. Serwer dokonuje sprawdzenia danych i odpo- wiednio reaguje. W przypadku formularza rejestracyjnego brak błędów oznacza dodanie użytkow- nika do bazy danych, a wystąpienie błędów — ponowne wyświetlenie formularza z prośbą o ich poprawienie (rysunek 1.3). Pierwszym krokiem stopniowego ulepszania byłoby wprowadzenie do- datkowych stylów CSS i rozbudowanie formularza o semantyczne pola tekstowe bez użycia kodu JavaScript. Wydaje mi się, że to podejście jest prostsze i wygodniejsze — przed przystąpieniem do bardziej rozbudowanych rozwiązań (Ajax), które trudniej testować, najpierw wykorzystujemy i spraw- dzamy rozwiązanie podstawowe. Ostatni krok polega na dodaniu kodu JavaScript i CSS, który wprowadzi dodatkowe funkcjo- nalności, ale tylko wtedy, gdy obsługuje je przeglądarka użytkownika. Oczywiście niniejsza książka obejmuje przede wszystkim kod JavaScript. Do sprawdzenia obsługi niezbędnych funkcji progra- mista kodu JavaScript wykorzystuje wykrywanie obiektów omówione w rozdziale 1. Dzięki temu powstaje kod JavaScript działający prawidłowo niezależnie od wersji i typu przeglądarki internetowej. Wykrywanie obiektów jest wyjątkowo proste — jeśli przeglądarka zawiera metodę lub obiekt X, zakładamy, że możemy skorzystać z funkcjonalności X. Przykład takiej detekcji pojawi się kilka stron dalej. Dzięki uważnie przygotowanemu procesowi rozbudowy lepsze przeglądarki uzyskają lepszą funk- cjonalność. To rozwiązanie typu „zjeść ciastko i mieć ciastko”! NIEINWAZYJNY JAVASCRIPT Zanim przejdziemy do właściwego kodu (najwyższy czas, prawda?), wprowadzę jeszcze jedną kon- cepcję — nieinwazyjny JavaScript. Dawniej JavaScript bardzo często pojawiał się w wielu miejscach w kodzie HTML. Przykładem może być chociażby wywołanie funkcji w momencie kliknięcia łącza: a href= javascript:createWindow(); ’Ècze /a Bardzo podobne rozwiązanie było stosowane także w przypadku wysyłania formularza: form action= strona.php method= post onsubmit= return validateForm(); Oba przykłady działają prawidłowo również dziś, ale nie jest to zalecane podejście. Po pierwsze, osadzanie kodu JavaScript na stronie HTML czyni ją znacznie trudniejszą w analizie, nie wspomi- nając nawet o przyszłej konserwacji. Przebijanie się przez wiele wierszy kodu HTML, by zmienić jeden wiersz kodu JavaScript, nie jest praktyczne. Po drugie, przedstawione rozwiązanie na trzy spo- soby łamie zasadę stopniowego ulepszania: x kod HTML z dołączonym kodem JavaScript nie jest już czystą semantyką, x zakłada, iż przeglądarka potrafi wykonać kod JavaScript, x bardzo trudno zastosować w tym przypadku technikę wykrywania obiektów i dostosowywania kodu do możliwości przeglądarki. 44 ROZDZIAĤ 2. JavaScript w akcji Zasada jest prosta — umieszczaj cały kod JavaScript w znacznikach script lub w osobnych plikach. „ UWAGA: Unikaj stosowania w HTML-u ïÈczy bez ĝadnego znaczenia (zawierajÈcych jako adres # lub wy- woïanie funkcji JavaScript), bo nie bÚdÈ dziaïaïy w przeglÈdarce bez obsïugi jÚzyka JavaScript. ĤèCZYMY KOD Po omówieniu kilku podstawowych tematów najwyższy czas rozpocząć tworzenie kodu JavaScript. Zakładam, że nie znasz tego języka (przecież czytasz niniejszą książkę po to, by go poznać); posłu- gując się krótkim przykładem, postaram się wykazać, że JavaScript nie jest niczym trudnym, a do- datkowo zapewnię sensowny kontekst dla treści z drugiej części książki. WYKONANIE PODSTAWOWEJ FUNKCJONALNOĻCI Jako prosty i praktyczny przykład wykonamy formularz logowania, który zostanie sprawdzony przy użyciu kodu JavaScript. Z dalszych rozdziałów dowiesz się, jak dodać do formularza obsługę technologii Ajax. Na razie pominiemy tę technologię, bo jest zbyt złożona jak na jeden z pierwszych rozdziałów książki. Na początek utwórz formularz HTML, który będzie składał się z trzech elementów: adresu e-mail, hasła i przycisku wysyłania. Najważniejszy fragment kodu HTML znajduje się poniżej. Znajdziesz go w pliku logowanie.html (rysunek 2.8): form action= logowanie.php method= post id= loginForm fieldset legend Logowanie /legend div label for= email Adres e-mail /label input type= email name= email ´id= email required /div div label for= password Hasïo /label input type= password name= password ´= password required /div div label for= submit /label input type= submit value= Zaloguj rarr; ´id= submit /div /fieldset /form script src= js/login.js /script RYSUNEK 2.8. Formularz logowania z dodanymi kilkoma stylami CSS Ĥéczymy kod 45 „ WSKAZÓWKA: Kod wszystkich przykïadów prezentowanych w ksiÈĝce znajdziesz pod adresem ftp://ftp. helion.pl/przyklady/troyaid.zip. Dla uproszczenia strona WWW zawiera tylko i wyłącznie formularz. By używanie formularza było nieco uprzyjemnione, strona korzysta z pliku CSS z kilkoma prostymi stylami. Cały kod możesz pobrać pod adresem podanym we wskazówce (plik CSS znajdziesz w plikach w folderze Rozdzial02). W obecnej postaci dane z formularza trafią do skryptu logowanie.php. Skrypt ten: x sprawdziłby poprawność podanego adresu e-mail, x sprawdziłby podanie hasła, x sprawdziłby, czy przekazane wartości zgadzają się z wcześniej umieszczonymi w bazie danych, x w przypadku poprawności danych rozpocząłby nową sesję dla zalogowanego użytkownika, x przekierowałby użytkownika do strony powitalnej. W dalszych rozdziałach wykonamy również takie sprawdzenia (być może nie wiesz, jak wyko- nać odpowiedni kod PHP i MySQL). To podstawowa funkcjonalność, która będzie działała we wszystkich przeglądarkach internetowych niezależnie od tego, czy obsługa kodu JavaScript jest w nich włączona, czy wyłączona. Jeśli przeglądarka obsługuje formularze, wszystko zadziała prawidłowo. W następnym kroku zajmiemy się stopniową rozbudową. DODANIE WARSTWY KODU JAVASCRIPT W tym konkretnym przypadku stopniowe ulepszanie będzie polegało na wykorzystaniu kodu Java- Script do sprawdzenia poprawności formularza przed jego wysłaniem, dzięki czemu do serwera będzie trafiała najprawdopodobniej prawidłowa postać danych, a sam użytkownik będzie natych- miast informowany o zauważonych błędach (patrz przykład rejestracji z rysunku 1.4). Zauważ, że jedyną różnicą w samym formularzu w porównaniu z wersją, która nie używa kodu JavaScript, jest to, że poza wymaganymi atrybutami name pojawiły się jeszcze atrybuty id. Wartości name służą jako nazwy poszczególnych danych i są przesyłane do serwera. Wartości id będą wyko- rzystywane tylko i wyłącznie przez kod JavaScript. W prezentowanym kodzie oba atrybuty mają tę samą wartość, co nie było trudne do uzyskania, ponieważ strona zawiera tylko jeden prosty for- mularz (na stronie HTML nie mogą wystąpić dwa elementy o takiej samej wartości atrybutu id). Strona WWW ze stopniowym ulepszeniem korzysta z zewnętrznego pliku JavaScript o nazwie login.js. Został on dołączony do strony HTML tuż przed znacznikiem zamykającym body: script src= js/login.js /script Teraz nadchodzi moment, w którym sprawy zaczynają się nieco komplikować, w szczególności na tak wczesnym etapie książki. Aby wiedzieć, jaki kod powinien znaleźć się w pliku, trzeba posiadać przynajmniej podstawową wiedzę na temat obsługi zdarzeń. OBSĤUGA ZDARZEĦ Jak wspomniałem w rozdziale 1., JavaScript jest językiem sterowanym zdarzeniami, czyli wykonuje operacje dopiero po zajściu określonego zdarzenia. Przykładami zdarzeń są: x wczytanie strony WWW, x kliknięcie elementu, na przykład łącza lub przycisku, x wpisanie tekstu w polu tekstowym formularza, 46 ROZDZIAĤ 2. JavaScript w akcji x przejście kursorem myszy nad element (zdarzenie mouseover), x przejście kursorem myszy poza element (zdarzenie mouseout). Aby kod JavaScript przeprowadził walidację formularza, musimy najpierw zdecydować, na które zdarzenie będziemy reagowali. Zdarzeniami najczęściej wykorzystywanymi do walidacji formularzy są: x zdarzenie wysyłania formularza, x kliknięcie przycisku wysyłania (który również wywoła zdarzenie wysyłania), x zmiana wartości elementu formularza, x sytuacja, gdy element formularza utraci aktywność (element wywoływany niezależnie od tego, czy jego wartość uległa zmianie, czy też nie). Rozdział 8. znacznie dokładniej omawia istniejące rodzaje zdarzeń. Na razie wybierzmy jedno z prostszych rozwiązań, czyli walidację w momencie próby wysłania formularza. W tym celu musimy dodać do formularza procedurę obsługi zdarzenia. Procedura obsługi zdarzenia wskazuje, że w momencie zajścia określonego zdarzenia na konkretnym elemencie należy wywołać wskazaną funkcję. Każdy obiekt, niezależnie od tego, czy jest to całe okno przeglądarki, czy tylko niewielki ele- ment strony (niekoniecznie pole formularza), może zgłosić zdarzenie. Najczęściej samodzielnie defi- niuje się funkcję, która zostanie wywołana. Połączenie „obiekt –typ zdarzenia – funkcja” daje na- prawdę sporo możliwości. Aby móc podłączyć się pod zdarzenie wysyłania formularza, musimy najpierw uzyskać referen- cję do formularza. Najprostszym rozwiązaniem okazuje się użycie metody getElementById() obiektu document. Obiekt document dotyczy całego dokumentu HTML — od znacznika otwierają- cego html, poprzez znaczniki head i body. Obiekt document zawiera metodę getElementById(), która jako argument przyjmuje nazwę identyfikatora, a w zamian zwraca referencję do elementu (o ile istnieje). Uzyskaną wartość można przechować w zmiennej w celu późniejszego użycia: var loginForm = document.getElementById( loginForm ); W tym momencie, o ile tylko istnieje jeden element (dowolnego typu) o atrybucie id z warto- ścią loginForm, zmienna loginForm będzie zawierała referencję do tego elementu. Rozdział 9. znacznie dokładniej omawia obsługę DOM, ale metoda getElementById() jest tak ważna i prosta w użyciu, że można ją wprowadzić już w rozdziale 2. Po uzyskaniu referencji do formularza procedurę obsługi zdarzenia ustalimy w następujący sposób: element.onzdarzenie = funkcja; W naszym przypadku będzie to: loginForm.onsubmit = validateForm; Ramka w dalszej części dokładniej przedstawia szczegóły techniczne składni. Wystarczy powie- dzieć, że gdy element loginForm będzie zamierzał wysłać dane formularza do serwera, wcześniej wywoła funkcję validateForm(). Zauważ, że po prawej stronie przypisania została użyta tylko i wy- łącznie nazwa funkcji, bez nawiasów klamrowych lub cudzysłowów. Żadna z poniższych składni nie jest prawidłowa: loginForm.onsubmit = validateForm ; // NIE! loginForm.onsubmit = validateForm(); // NIE! W teorii następny krok polegałby na zdefiniowaniu funkcji validateForm(), która przeprowa- dziłaby sprawdzenie wartości elementów formularza. Niestety, konieczny jest jeszcze jeden krok. Już wyjaśniam… Ĥéczymy kod 47 Gdy klient pobiera dokument z serwera, uzyskuje dane w odpowiedniej kolejności. W przypad- ku strony HTML oznacza to, że przeglądarka dosłownie najpierw otrzyma DOCTYPE, następnie na- wias otwierający html, znacznik head i treść nagłówka, a dopiero później element body i jego zawartość, i tak aż do samego końca dokumentu. Gdy przeglądarka znajdzie odnośnik do innych materiałów, które muszą zostać pobrane — plików CSS, obrazów, materiałów Flash, kodu JavaScript itp. — je również musi pobrać. W kwestii dostępu do dokumentu DOM proces ten jest niezwykle istotny, ponieważ przeglądarka nie zna pełnej reprezentacji DOM, dopóki nie przetworzy całej zawartości strony HTML (rysunek 2.9). Oznacza to, że w języku JavaScript nie można bezpiecznie użyć metody document.getElementById() do momentu pełnego wczytania strony. RYSUNEK 2.9. PrzeglÈdarka wczytuje dokument HTML i tworzy obiekt DOM Tym, co pozwala upewnić się, że można bezpiecznie korzystać z elementów DOM, jest przede wszystkim pojawienie się zdarzenia ukończenia wczytywania strony WWW. Ponieważ jest to zda- rzenie, możemy dodać procedurę jego obsługi: window.onload = init; „ WSKAZÓWKA: Powodem, dla którego witryny wydajÈ siÚ wczytywaÊ szybciej, gdy kod JavaScript umieĂci siÚ na koñcu dokumentu, jest to, ĝe przeglÈdarka n
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Nowoczesny język JavaScript
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ą: