Ajax, JavaScript i PHP.

Intensywny trening
Autor: Phil Ballard, Michael Moncur
Tumaczenie: Andrzej Grayski
ISBN: 978-83-246-2072-2
Tytu oryginau: Sams Teach Yourself Ajax,
JavaScript, and PHP All in One (Sams Teach Yourself)
Format: 170x230, stron: 432
Zawiera CD-ROM

Naucz si czy najwiksze zalety jzykw oraz technik programowania

i twrz interaktywne strony internetowe
Jak unika typowych bdw i sprawnie rozwizywa problemy
programistyczne?
Jak poczy zalety HTML, XML i PHP dla uzyskania podanych efektw?
Jak tworzy aplikacje wyposaone w aktywny interfejs uytkownika?
Statyczne strony WWW to dzi ju przeszo. Powszechnie dostpne narzdzia daj
programistom prawie nieograniczone moliwoci w zakresie tworzenia interaktywnych
witryn internetowych, wzbogaconych o najrniejsze efekty wizualne, animacje oraz
wbudowane narzdzia pomocnicze. Najwiksz popularno zdobyy sobie narzdzia
z kategorii open source z powodu ich minimalnego kosztu oraz niezwykle duych
zasobw, dostpnych za porednictwem Internetu. Z tej ksiki dowiesz si, jak tworzy
bogate i interaktywne strony WWW, czc rozmaite techniki i korzystajc z rnych
jzykw.
Ksika Ajax, JavaScript i PHP. Intensywny trening poprowadzi Ci krok po kroku
po podstawowych zasadach programowania w jzykach JavaScript, PHP i HTML
oraz technologiach programowania. Dziki temu podrcznikowi dowiesz si
m.in., jak wykorzystywa dostpne biblioteki ajaksowe do implementowania
i ulepszania podstawowych mechanizmw aplikacji. Szybko nauczysz si tworzy
interaktywne strony WWW, zarwno za pomoc technologii serwerowych, jak i technik
oraz narzdzi umiejscowionych po stronie klienckiej, a take ich kombinacji.
Tworzenie stron WWW w jzyku HTML
Stylizacja stron za pomoc arkuszy CSS
Tworzenie skryptw w jzyku JavaScript
Wbudowanie skryptu w stron WWW
Obiektowy model dokumentu (DOM)
Obiekty String
Instrukcje warunkowe i ptle
Funkcje wbudowane i biblioteki
Konstruowanie aplikacji ajaksowych
Zmienne w jzyku PHP
Funkcje liczbowe, acuchy i tabele
Kontrola przepywu sterowania
Usugi webowe oraz protokoy REST i SOAP
cz, kompiluj, dobieraj niech Twoje strony WWW zrobi wraenie!

Spis treci
Wstp

13

Cz I Dla przypomnienia
Rozdzia 1. Funkcjonowanie sieci WWW
21
Powstanieinternetu ........................................................................................................21
SieWWW............................................................................................................................22
PodstawyprotokouHTTP ...........................................................................................27
daniaiodpowiedziprotokouHTTP ...................................................................28
FormularzeHTML ............................................................................................................31
Podsumowanie...................................................................................................................34
Rozdzia 2. Tworzenie stron WWW w jzyku HTML i ich stylizacja
za pomoc arkuszy CSS
35
PodstawyjzykaHTML..................................................................................................35
ElementystronyWWWtworzonejwjzykuHTML..........................................38
BardziejskomplikowanastronaWWW..................................................................44
UyteczneznacznikiHTML...........................................................................................45
Definiowaniewasnegostyludokumentu .............................................................46
Definiowanieregustylistycznych ............................................................................48
Stylizacjaelementwgrupowanychwklasy ........................................................48
Wizanieregustylistycznychzdokumentami...................................................50
Stylizowanietekstu..........................................................................................................53
Krelenieliniipoziomych..............................................................................................58
Podsumowanie...................................................................................................................60
Rozdzia 3. Anatomia aplikacji ajaksowej
61
ZapotrzebowanienaAjax..............................................................................................61
Ajaxiinterakcja .................................................................................................................64
ZczegoskadasiAjax? .................................................................................................65
Jaktowszystkorazemfunkcjonuje? ........................................................................68
Podsumowanie...................................................................................................................69

Ajax, JavaScript i PHP. Intensywny trening

Cz II Wprowadzenie do programowania
w jzyku JavaScript
Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript
73
Narzdziadotworzeniaskryptw............................................................................ 73
WywietlaniebiecegoczasuzapomocJavaScriptu ................................... 74
Zaczynamytworzenieskryptu ................................................................................... 75
DodawanieinstrukcjiJavaScriptu............................................................................. 75
Wywietlanieinformacji ............................................................................................... 77
WbudowywanieskryptuwstronWWW............................................................. 77
Testowanieskryptu......................................................................................................... 78
ReguyskadniowejzykaJavaScript...................................................................... 88
Komentarze......................................................................................................................... 90
Sprawdzoneizalecanepraktykiprogramistyczne............................................ 91
Podsumowanie .................................................................................................................. 93
Rozdzia 5. Obiektowy model dokumentu (DOM)
95
Obiekty .................................................................................................................................. 95
PodstawymodeluDOM ................................................................................................. 97
Programowanieobsugidokumentw ................................................................... 99
Dostpdohistoriiprzegldanychstron ...............................................................102
Obiektlocation.................................................................................................................103
Podsumowanie ................................................................................................................106
Rozdzia 6. Zmienne, acuchy i tablice JavaScriptu
107
Wykorzystywaniezmiennych...................................................................................107
Operatoryiwyraenia..................................................................................................111
TypydanychJavaScriptu.............................................................................................113
Konwersjetypwdanych ...........................................................................................114
ObiektyString ..................................................................................................................115
Wykorzystywaniepodacuchw...........................................................................119
Tabliceliczbowe..............................................................................................................123
Tabliceacuchw .........................................................................................................124
Sortowanietablicliczbowych ...................................................................................126
Podsumowanie ................................................................................................................129
Rozdzia 7. Funkcje i obiekty JavaScriptu
131
Wykorzystywaniefunkcji ...........................................................................................131
Obiekty ................................................................................................................................137

Spis treci

Obiektyjakonarzdziaupraszczajcekodowanie ......................................... 139

Rozszerzaniedefinicjiobiektwwbudowanych.............................................. 142
Podsumowanie................................................................................................................ 146
Rozdzia 8. Instrukcje warunkowe i ptle

149

Instrukcjaif....................................................................................................................... 150
Wyraeniauwarunkowane ....................................................................................... 154
Testowaniewieluwarunkw ................................................................................... 155
Badaniewieluwarunkwzapomocinstrukcjiswitch ............................... 158
Ptlefor .............................................................................................................................. 160
Ptlawhile......................................................................................................................... 162
Ptlado...while ................................................................................................................ 163
Wykorzystywanieptli................................................................................................ 163
Iterowaniepozestawiewaciwociobiektu.................................................... 165
Podsumowanie................................................................................................................ 170
Rozdzia 9. Funkcje wbudowane i biblioteki

171

ObiektMath ...................................................................................................................... 171

Przykadzastosowaniagenerowanieliczbpseudolosowych .............. 173
Instrukcjawicasowokluczowewith...................................................... 176
Obsugadatyiczasu ..................................................................................................... 177
Wykorzystywaniebibliotekniezalenychproducentw............................. 180
Innebiblioteki ................................................................................................................. 182
Podsumowanie................................................................................................................ 182

Cz III Wprowadzenie do Ajaksa

Rozdzia 10. Serce Ajaksa obiekt XMLHTTPRequest

185

CzymjestobiektXMLHTTPRequest?.................................................................... 185
TworzenieinstancjiobiektuXMLHTTPRequest .............................................. 186
Podsumowanie................................................................................................................ 192
Rozdzia 11. Komunikacja z serwerem

193

Wysyaniedaniadoserwera ................................................................................ 193

Monitorowaniestatusudania.............................................................................. 198
Funkcjazwrotna............................................................................................................. 199
Podsumowanie................................................................................................................ 202

Ajax, JavaScript i PHP. Intensywny trening

Rozdzia 12. Przetwarzanie otrzymanych danych

203
WaciwociresponseTextiresponseXML.........................................................203
ParsowaniewaciwociresponseXML................................................................207
Sprzeniezwrotne .......................................................................................................208
Podsumowanie ................................................................................................................211
Rozdzia 13. Pierwsza aplikacja ajaksowa
213
Konstruowanieaplikacjiajaksowych....................................................................213
DokumentHTML ............................................................................................................214
Skrypt...................................................................................................................................215
Wszystkorazem ..........................................................................................................219
Podsumowanie ................................................................................................................223

Cz IV Programowanie skryptw serwera

w jzyku PHP
Rozdzia 14. Poznajemy PHP
227
PodstawyPHP..................................................................................................................227
PierwszyskryptwPHP................................................................................................230
Podsumowanie ................................................................................................................235
Rozdzia 15. Zmienne
237
ZmiennewjzykuPHP ................................................................................................237
Typydanych......................................................................................................................239
Liczby...................................................................................................................................242
Typydanychliczbowych .............................................................................................244
Funkcjeliczbowe ............................................................................................................244
acuchy ............................................................................................................................246
Formatowanieacuchw..........................................................................................248
Funkcjeacuchowe......................................................................................................250
Tablice .................................................................................................................................252
Funkcjetablicowe ..........................................................................................................255
Obliczenianadatach .....................................................................................................256
Formatowaniedat..........................................................................................................258
Podsumowanie ................................................................................................................261
Rozdzia 16. Kontrola przepywu sterowania
263
Instrukcjewarunkowe .................................................................................................263
Ptle......................................................................................................................................270
Podsumowanie ................................................................................................................272

Spis treci

Rozdzia 17. Funkcje

273
Wykorzystywaniefunkcji........................................................................................... 273
Argumentywywoaniaizwracanawarto....................................................... 275
Bibliotekifunkcji ............................................................................................................ 279
Podsumowanie................................................................................................................ 281
Rozdzia 18. Klasy
283
ProgramowaniezorientowaneobiektowonagrunciePHP........................ 283
Czymjestklasa?.............................................................................................................. 284
Tworzenieiwykorzystywanieobiektw ............................................................ 285
Podsumowanie................................................................................................................ 290

Cz V Zaawansowane technologie ajaksowe

Rozdzia 19. Wykorzystywanie waciwoci responseText
293
responseTexttylkotekstiatekst................................................................... 293
Podsumowanie................................................................................................................ 300
Rozdzia 20. AHAH asynchroniczny HTML i HTTP
301
CotojestAHAH?............................................................................................................. 301
BibliotekidlaAHAH ...................................................................................................... 302
WykorzystywaniebibliotekimyAHAHlib.js......................................................... 305
Podsumowanie................................................................................................................ 312
Rozdzia 21. Wykorzystywanie waciwoci responseXML
313
Ajaxtotakex .............................................................................................................. 313
WaciworesponseXML.......................................................................................... 314
PrzykadzastosowaniaczytnikRSSnagwkwwiadomoci............. 317
Podsumowanie................................................................................................................ 326
Rozdzia 22. Usugi webowe oraz protokoy REST i SOAP
327
Koncepcjausugiwebowej ........................................................................................ 327
RESTRepresentationalStateTransfer........................................................... 328
PrzykadusugiRESTimplementacja............................................................. 330
Podstawyprotokou ..................................................................................................... 336
SOAPiaplikacjeajaksowe.......................................................................................... 338
SOAPiRESTporwnanie ..................................................................................... 339
Podsumowanie................................................................................................................ 340

Ajax, JavaScript i PHP. Intensywny trening

Rozdzia 23. Biblioteka JavaScriptu dla aplikacji ajaksowych

341
Bibliotekadlaaplikacjiajaksowych .......................................................................341
DlaprzypomnieniamyAHAHlib.js ....................................................................342
Implementowaniebiblioteki .....................................................................................343
Korzystaniezbiblioteki...............................................................................................347
Podsumowanie ................................................................................................................351
Rozdzia 24. Puapki Ajaksa
353
Nawigowaniepohistoriistron.................................................................................354
Zakadkiihipercza.....................................................................................................355
Komunikacjazuytkownikiem ................................................................................356
Mikkieldowanie.........................................................................................................356
Widocznodlawyszukiwarek ................................................................................357
Wyrnianieelementwaktywnych .....................................................................358
Ajaxniekonieczniedobrynawszystko...........................................................358
Bezpieczestwo...............................................................................................................359
Kodowaniemidzyplatformowe .............................................................................360
Ajaxniepoprawizegoprojektu..............................................................................360
Kilkapuapekprogramistycznych ..........................................................................361
Podsumowanie ................................................................................................................362

Cz VI Narzdzia i zasoby Ajaksa

Rozdzia 25. Biblioteka prototype.js
365
prototype.jspierwszespotkanie .......................................................................365
ObiektAjaxotoczkaobiektuXMLHTTPRequest.........................................368
Przykadzastosowaniaczytniknotowagiedowych .............................371
Podsumowanie ................................................................................................................374
Rozdzia 26. Rico
375
BibliotekaRico.................................................................................................................375
Budowanieinterfejsuuytkownika .......................................................................380
Podsumowanie ................................................................................................................385
Rozdzia 27. Script.aculo.us
387
Pobieraniebiblioteki.....................................................................................................387
Doczanieplikw..........................................................................................................388
Wywoywanieefektwspecjalnych.......................................................................388
Tworzenieskryptu.........................................................................................................388
Podsumowanie ................................................................................................................391

Spis treci

Rozdzia 28. XOAD

393
ObiblioteceXOAD.......................................................................................................... 393
XOAD_HTML..................................................................................................................... 397
ZaawansowaneprogramowaniezuyciembibliotekiXOAD..................... 400
Podsumowanie................................................................................................................ 401

Cz VII Dodatki
A JavaScript, PHP i Ajax w internecie

405

B Sownik

409

Skorowidz

415

Cz II
Wprowadzenie
do programowania
w jzyku JavaScript
Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

73

Rozdzia 5. Obiektowy model dokumentu (DOM)

95

Rozdzia 6. Zmienne, acuchy i tablice JavaScriptu

107

Rozdzia 7. Funkcje i obiekty JavaScriptu

131

Rozdzia 8. Instrukcje warunkowe i ptle

149

Rozdzia 9. Funkcje wbudowane i biblioteki

171

Narzdzia do tworzenia skryptw

73

Rozdzia 4
Tworzenie prostych skryptw
w jzyku JavaScript
W rozdziale:
X

narzdzia do tworzenia skryptw,

wywietlanie aktualnego czasu za pomoc JavaScriptu,

rozpoczynanie tworzenia skryptu,

dodawanie instrukcji JavaScriptu,

wywietlanie informacji w ramach skryptu,

integrowanie skryptu ze stron WWW,

testowanie skryptu,

reguy skadniowe jzyka JavaScript,

znaczenie i wykorzystywanie komentarzy,

uyteczne wskazwki dla programistw.

Jakjuwspominalimy,jzykJavaScriptjestjednymzerodkwtworzenia
skryptwpostronieklientaWWW.InstrukcjeJavaScriptumogby
wbudowywanebezporedniowkodstronyWWWiwykonywanepodczas
wywietlaniatejstrony.
Wniniejszymrozdzialeprzedstawimytworzenieprostegoskryptuorazjego
edytowanieitestowaniezapomocprzegldarki.Przyokazjiomwimy
podstawowezadaniazwizaneztworzeniemiwykorzystywaniemskryptw.

Narzdzia do tworzenia skryptw

Wprzeciwiestwiedowielujzykwprogramowania,tworzenieskryptw
wjzykuJavaScriptniewymagaspecjalnegooprogramowaniawystarczajce
okazujsinarzdziaoferowaneprzezsystemoperacyjny.

74

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

Edytory tekstu
Pierwszymnarzdziemniezbdnymdotworzeniaskryptwjestedytor
tekstu.Poniewakodskryptujestdefactokawakiemtekstu,zazwyczaj
wbudowywanymwkoddokumentwHTML,wystarczajcymdotegocelu
moebykadyedytorzdolnydotworzeniaczystychplikwASCII,naprzykad
popularnywindowsowyNotatnik.Przydatnynieoznaczajednaknajbardziej
odpowiedninaszeuwagizrozdziau2.natematedytorwprogramisty
stosujsiwcaejpenidoJavaScriptu(atakedojzykaPHP,ktrymzajmiemy
siwdalszejczciksiki).
Na CD-ROM-ie doczonym do niniejszej ksiki znajduje si edytor jEdit w wersjach
dla Javy, Macintosha i Windows. Edytor ten znakomicie nadaje si do tworzenia
kodu w jzyku JavaScript.

Przegldarki
Dwienastpnerzeczy,jakiepotrzebnesdoposugiwaniasiJavaScriptem,
toprzegldarkaWWWikomputer,naktrymmonajuruchomi.
ZalecanymiprzeznasprzegldarkamisFirefoxiInternetExplorer
(moliwiewnajnowszychwersjach),ktremonapobrazestron,odpowiednio:
http://www.mozillaeurope.org/pl/firefox/ihttp://www.microsoft.com.
Jakoabsolutneminimumwymagamyjednejzprzegldarek:Firefox1.0,
Netscape7lubInternetExplorera6;zalecamyjednaktestowanieskryptw
wrodowiskujednejzostatnichwersjiFirefoksaiInternetExplorera,jako
uywanychnajczciej.
Do opublikowania stworzonego skryptu w internecie potrzebujemy jeszcze
jednej rzeczy dostpu do serwera WWW. Wikszo skryptw, ktre
prezentujemy w niniejszej ksice, mona jednak uruchomi bezporednio
z dysku w lokalnym komputerze.

Wywietlanie biecego czasu

za pomoc JavaScriptu
NajczciejprezentowaneprzykadywykorzystywaniaJavaScriptuzwizanes
zwywietlaniemdatyiczasu.PoniewaskryptyJavaScriptuwykonywanes
wrodowiskuprzegldarkiWWW,wywietlanesdataiczasobowizujce

Zaczynamy tworzenie skryptu

wstrefieczasowejuytkownika,jednakenietrudnoprzeliczyje(oczywicie
zpomocJavaScriptu)naczasuniwersalny(UTC).
Czas uniwersalny (UTC Universal Time, Coordinated) to wzorcowy czas mierzony
za pomoc zegarw atomowych, wzorowany na czasie GMT (Greenwich Mean
Time) obowizujcym w strefie poudnika zerowego, przechodzcego przez
przedmiecie Londynu, Greenwich.

WcharakterzeprzykaduwprowadzajcegoCzytelnikawprogramowanie
wjzykuJavaScriptzaprezentujemywywietlaniedatyiczasujakoelementu
stronyWWW.

Zaczynamy tworzenie skryptu

Podobniejakwszystkieinneskrypty,naszprzykadowyskryptograniczony
bdzieznacznikami<script></script>.
Midzy znacznikami <script></script> mog pojawi si wycznie poprawne
instrukcje JavaScriptu. W przypadku napotkania konstrukcji nie bdcej poprawn
instrukcj skryptu przegldarka wywietla odpowiedni komunikat.

Inicjujcnowyplikwulubionymedytorzetekstu,napiszmywicpierwszy
wierszkodu:
<script LANGUAGE="JavaScript" type="text/javascript"> </script>

PoniewaniebdziemywykorzystywaadnychnowychcechJavaScriptu1.1
iwersjipniejszych,nieokrelilimykonkretnejwersjiwznaczniku<script>.
Naszskryptpowinienbydzikitemupoprawnieinterpretowanynawetprzez
przegldarkitakarchaiczne,jakNetscape2.0czyInternetExplorer3.0.

Dodawanie instrukcji JavaScriptu

Zadaniemnaszegoskryptujestokrelenieiwywietleniebiecejdatyiczasu
lokalnegoiuniwersalnego.Naszczciewikszopotrzebnychdotego
mechanizmwwszczeglnocikonwersjamidzyformatamidat
wbudowaneswinterpreterJavaScriptu.

75

76

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

Zmienne jako magazyny danych

Abywywietlibiecdaticzas,musimynajpierwniezbdndotegoinformacj,
pojejodczytaniu,przechowapodpostacizmiennej.Ozmiennychbdziemyszerzej
pisawrozdziale6.,wtejchwilipotraktujemyjejakomediadoprzechowywania
wartociliczb,tekstuczy(jakwobecnymprzykadzie)datyiczasu.
Dodajmywicdonaszegokodupierwszinstrukcj;zwrmyuwagnawielko
literwjzykuJavaScriptjestonaistotnawpoleceniachinazwachzmiennych.
now = new Date();

Wskutekwykonaniapowyszejinstrukcjiutworzonazostanienowazmienna
onazwienow,azmiennejtejprzypisanazostaniewartoreprezentujcabiece
wskazaniedatyiczasu.Wskazanietoudostpnianejestprzezwbudowanyobiekt
JavaScriptuDate,oferujcywielewygodnychmechanizmwdoobsugidaty
iczasu.Powrcimydoniegowrozdziale9.
Zwr uwag na rednik, stanowicy dla interpretera informacj, e skoczya
si instrukcja. redniki s w jzyku JavaScript opcjonalne, jednake ich stosowanie
pozwala unikn pewnych pospolitych bdw. Dla przejrzystoci bdziemy je
wic stosowa konsekwentnie we wszystkich przykadach niniejszej ksiki.

Obliczanie danych wielkoci

ZmienneJavaScriptuwewntrznieprzechowujwskazaniedatyiczasujako
liczbmilisekund,ktreupynyodpnocyrozpoczynajcejdzie1stycznia
1970roku.Tmaowygodnwpraktycewartomonajednakatwo
przekonwertowanakilkabardziejuytecznychformatwcowykonywane
jestwewntrznieprzezJavaScriptiwszczegyczegoniebdziemytutajwnika.
Dodajmywzwizkuztymdonaszegoskryptudwieponiszeinstrukcje:
localtime = now.toString();
utctime = now.toGMTString();

Wwynikuichwykonaniautworzonezostandwiekolejnezmiennelocaltime
iutctimezawierajcetekstowepostaciczasu,odpowiednio:lokalnego
iuniwersalnego,odpowiadajcegowartociprzechowywanejwzmiennejnow.
Zmienne localtime i utctime przechowuj tekst (na przykad Wed, 12 Nov 2008
20:23:21 UTC) i w terminologii programistycznej nazywane s acuchami
(ang. strings). acuchami tekstowymi zajmiemy si bardziej szczegowo
w rozdziale 6.

Wywietlanie informacji

Wywietlanie informacji
Zawartoprzechowywanawzmiennychlocaltimeiutctimeniebyabywiele
warta,gdybyuytkownikniemgzobaczyjejwzrozumiaejdlasiebiepostaci.
JavaScriptoferujewielerodkwsucychwywietlaniuinformacjijednym
znajprostszychjestinstrukcjadocument.write.
Zapomoctejinstrukcjimonawywietlatekst,liczbyiwoglewszelk
zawartozmiennych.PoniewaskryptstanowiczstronyWWW,owo
wywietleniedokonywasibdziewramachtejestrony.Abyjezrealizowa,
dodajmynastpujceinstrukcjebezporednioprzezzamykajcymznacznikiem
</script>:
document.write("<b>Czas lokalny:</b> " + localtime + "<br>");
document.write("<b>Czas uniwersalny:</b> " + utctime);

Wrezultacieujrzymynaekraniewartoczasulokalnegoiuniwersalnego,
wrazzodpowiednimkomentarzem.
ZwrmyuwagnaznacznikiHTMLwszczeglnocinaznacznik<b>
pojawiajcesiwtekcieprzeznaczonymdowywietlenia.Poniewa,
jakwspominalimy,JavaScriptwywietliwtekstwramachstronyWWW,
przetomusimieonapostazgodnzjzykiemHTML.Itak,znacznik<br>
wpierwszejinstrukcjispowoduje,edrugainstrukcjawywietlabdzie
zawartoodnowegowiersza,zaznaczniki<b>i</b> spowodujpogrubienie
tekstu,ktryograniczaj.
Zwrmy uwag na operatory + w prezentowanych instrukcjach. Realizuj
one dodawanie do siebie fragmentw tekstu, czyli skadanie (konkatenowanie)
kilku acuchw w pojedynczy acuch przeznaczony do wywietlenia. Gdyby
operator + pojawi si midzy liczbami, oznaczaby ich arytmetyczne dodawanie.

Wbudowywanie skryptu w stron WWW

Skompletowalimyjuskryptobliczajcydanewartociiwywietlajcyje
wczytelnejformie.Jegotrewidocznajestnalistingu4.1.
Listing 4.1. Skrypt wywietlajcy biec dat i czas
<script language="JavaScript" type="text/javascript">
now = new Date();

77

78

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

localtime = now.toString();
utctime = now.toGMTString();
document.write("<b>Czas lokalny:</b> " + localtime + "<BR>");
document.write("<b>Czas uniwersalny:</b> " + utctime);
</script>

Abyzrobizpowyszegoskryptuuytek,musimygoterazwbudowawkod
stronyWWW.Najprociejmonatozrobi,uywajcjedynieniezbdnych
znacznikw<html>,<head> i<body>(wrazzichzamykajcymiodpowiednikami)
i(dlaelegancji)nagwka<h1>.Otrzymanywtensposbkodprostejstrony
WWWwidocznyjestnalistingu4.2.
Listing 4.2. Prosta strona WWW, zawierajca skrypt wywietlajcy
biec dat i czas
<html>
<head><title>Wywietlanie daty i czasu</title></head>
<body>
<h1>Bieca data i czas</h1>
<p>
<script language="JavaScript" type="text/javascript">
now = new Date();
localtime = now.toString();
utctime = now.toGMTString();
document.write("<b>Czas lokalny:</b> " + localtime + "<BR>");
document.write("<b>Czas uniwersalny:</b> " + utctime);
</script>
</p>
</body>
</html>

Takskonstruowanykodmoemyterazzapisawplikuzrozszerzeniem.htm
lub.html.
Notatnik jak i kilka innych edytorw tekstu dostpnych w systemie Windows
opatruje tworzone pliki domylnym rozszerzeniem .txt, naley wic w ich
przypadku poda rozszerzenie (.htm lub .html) w sposb jawny.

Testowanie skryptu
Abyprzetestowadziaanieutworzonegoskryptu,naleyuruchomiprzegldark
WWWInternetExplorer,Firefox,Operlubinnwybranprzezuytkownika
izaadowadoniejplikzawierajcykodwidocznynalistingu4.2.

Testowanie skryptu

79

Klikajcbezporednioplikzrozszerzeniem.htmlub.htmlreprezentowany
woknieEksploratoraWindows,spowodujemywczytaniejegozawartoci
do(uruchomionejautomatycznie)przegldarkidomylnej.Monatezaadowa
plikdouruchomionejjuprzegldarki,wybierajcodpowiedniopcjzjej
menugwnego(naprzykadPlik/Otwrz).
Jeeliprzytworzeniuskryptuniepopenilimybdw,powinnimyujrzestron
podobndowidocznejnarysunku4.1,oczywiciezaktualnymwskazaniemczasu.
RYSUNEK 4.1.
Wywietlenie
biecej daty
i czasu w oknie
Firefoksa

W przypadku Internet Explorera w wersji 6.0 lub nowszej moemy spotka si

z odmow wykonania skryptu, zalenie od obowizujcych ustawie zabezpieczenia
zamiast oczekiwanej zawartoci ujrzymy wwczas ostrzegawczy komunikat:

Internet Explorer domylnie zezwala bowiem na wykonywanie skryptw

zawartych w dokumentach pobieranych ze zdalnych serwerw, lecz blokuje
tak moliwo w odniesieniu do plikw lokalnych.
Klikajc w komunikat, spowodujemy wywietlenie menu kontekstowego,
z ktrego naley wybra opcj Zezwalaj na zablokowan zawarto
po czym w wywietlonym oknie komunikatu klikn przycisk Tak.

W efekcie powinnimy ujrze oczekiwan stron.

80

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

Modyfikowanie skryptu
Wzasadzieotrzymalimyto,czegooczekiwalimy,mimojednaknienagannej
merytorycznietrecijejformawydajesimaoelegancka,chociabywporwnaniu
ztym,cozobaczymoemynazwykymzegarku.Rozbudujmyzatemnasz
skrypttak,bygodziny,minutyisekundywywietlanebyyosobno,oddzielone
odsiebiedwukropkami.Bdnamdotegopotrzebnetrzydodatkowezmienne:
hours,minsisecs,przechowujcewartoci,kolejno:godzin,minutisekund,
orazmechanizmpozwalajcywyodrbnitewartocizbiecegowskazania
czasu.PonownieJavaScriptoferujenamwszystko,coniezbdne:
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();

Jakatwosidomyli,metodygetHours(),getMinutes()igetSeconds(),
traktujczawartozmiennejnowjakowskazanieczasu,wyodrbniajzniej
danekomponenty.
Zegarowewywietleniebiecegoczasuujmiemydlanaleytejwyrazistoci
wramynagwka<h1>ioczywicieniezapomnimyorozdzielajcych
dwukropkach:
document.write("<h1>");
document.write(hours + ":" + mins + ":" + secs);
document.write("</h1>");

Wpierwszejzpowyszychinstrukcjigenerowanyjestznacznikotwierajcy
wspomnianynagwek.Wdrugiejposzczeglneskadnikiwskazaniaczasu
godziny,minuty,sekundyirozdzielajcedwukropkikonkatenowanes
dopostacipojedynczegoacucha;trzeciainstrukcjagenerujezamykajcy
znacznik</h1>.
Uzupeniajcaktualnpostaskryptuwopisanysposb,nadamymunow
postawidocznnalistingu4.3.
Listing 4.3. Wywietlenie biecej daty i czasu w formie tekstowej
i zegarowej
<html>
<head><title>Wywietlanie daty i czasu</title></head>
<body>
<h1>Bieca data i czas</h1>
<p>
<script language="JavaScript">
now = new Date();

Testowanie skryptu

81

localtime = now.toString();
utctime = now.toGMTString();
document.write("<b>Czas lokalny:</b> " + localtime + "<BR>");
document.write("<b>Czas uniwersalny:</b> " + utctime);
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();
document.write("<h1>");
document.write(hours + ":" + mins + ":" + secs);
document.write("</h1>");
</script>
</p>
</body>
</html>

Pozapisaniupowyszejzawartociwplikuzrozszerzeniem.htmlub.html
izaadowaniutegoplikudoprzegldarki(wsposbuprzednioopisany)ujrzymy
stronpodobndotejzrysunku4.2.Odwieajctstron(np.zapomoc
klawiszaF5),powodowabdziemykadorazowowykonanieskryptuitym
samymwywietlenieaktualnegoczasu1.
RYSUNEK 4.2.
Zmodyfikowane
wywietlanie
daty i czasu,
tym razem
w oknie Internet
Explorera

Mimo wszystko naszemu skryptowi brakuje jeszcze troch do penej elegancji,

gownie za spraw uomnego formatowania liczb jednocyfrowe godziny
i (lub) minuty nie s poprzedzane zerem. Ponadto zegar dziaa w trybie
24-godzinnym, z czego mog by niezadowoleni uytkownicy preferujcy
wskazania 12-godzinne. W rozdziale 9. pokaemy, jak poradzi sobie z tymi
problemami.

Wniektrychprzegldarkach,naprzykadwOperze,moemyzadaperiodycznego
odwieaniastronywsposbautomatyczny(cosekundlubcominut),otrzymujc
namiastkdziaajcegozegarkaprzyp.tum.

82

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

Bdy w skrypcie
Kadyprogramistadoskonalewieboprzekonasiosobicie
eprogramowanienieuchronniezwizanejestzpopenianiembdw.
Nawetwprzypadkutakprostychskryptwjakdotychczasprezentowane
monasizwyczajniepomylipodczaswpisywaniainstrukcji.
Abyzobaczy,jakzachowasiprzegldarkapodczasnapotkaniabdu
wwykonywanymskrypcie,zmodyfikujmyjednzinstrukcjiwidocznych
nalistingu4.3,celowousuwajcnawiaszamykajcyparametrwywoania
metodydocument.write:
document.write("<h1>";

Zapiszmytakzmodyfikowanykoddoplikuiwczytajmywplikdoprzegldarki.
Zalenieodkonkretnejprzegldarki,moewydarzysijednazdwchrzeczy:
wywietlonyzostaniekomunikatobdziealbowykonaniebdnegoskryptu
zostanieprzerwane.
Jeliwywietlonyzostaniekomunikatobdzie,bdziemynadobrejdrodze
dojegopoprawienia,wtymprzypadkudouzupenieniabrakujcegonawiasu.
Jeelijednakwspomnianykomunikatniepojawisi,bdziemyzmuszeni
samodzielnieznalerdobdu.Wtymcelu:
X

WFirefoksielubNetscapemusimywpisajavascript:wpoleadresowe,
wwynikuczegouruchomionazostaniekonsolaJavaScriptu(moemytake
zmenuNarzdziawybraopcjKonsolabdw).Narysunku4.3widoczny
jestkomunikatobrakujcymnawiasiewywietlanywokniekonsoli.

WInternetExplorerzemusimynatomiastwybrazmenuNarzdziaopcj
Opcjeinternetowe,wwywietlonymokniedialogowymprzejnastron
ZaawansowaneiwlicieopcjiusunzaznaczenieopcjiWyczdebugowanie
skryptu(InternetExplorer)orazzaznaczyopcjWywietlpowiadomenie
okadymbdzieskryptu.

Zwrmy uwag na pole Kod w oknie konsoli bdw na rysunku 4.3. Moemy
wpisa we dowoln instrukcj JavaScriptu i klikn przycisk Analizuj, w wyniku
czego wspomniana instrukcja poddana zostanie natychmiastowemu wykonaniu
analizie przez interpreter JavaScriptu. Daje to doskona okazj do przetestowania
rozmaitych moliwoci oferowanych przez JavaScript.

Testowanie skryptu

83

RYSUNEK 4.3.
Komunikat
o bdzie
JavaScriptu
wywietlany
w oknie konsoli

Komunikatwokniekonsolinarysunku4.3jednoznaczniewskazujeprzyczyn
bdubrakujcynawiasniejesttojednakreguainaleybywiadomym,
e(zwaszczawprzypadkurozbudowanychskryptwibdwobardziej
subtelnymcharakterze)miejsce,wktrymbdjestsygnalizowany,moe
znajdowasidalekoodmiejscaskrywajcegofaktycznprzyczyntegobdu.
PodczasgdyInternetExplorerreagujenatychmiastowymwywietleniemokna
dialogowegowprzypadkuwystpieniabduwwykonywanymskrypcie,konsola
bdwFirefoksawywietlalistnapotkanychbdw,dajctymsamymokazj
dozidentyfikowaniapodejrzanychinstrukcji;cowicej,konsolatadaje
moliwonatychmiastowejanalizydowolnejinstrukcji(oczymwspominalimy
przedchwil).Stdpraktycznywniosek,byzainstalowaFirefoxnawetna
komputerze,ktregouytkownicyposugujsiInternetExploreremprzyda
sijakonarzdziedotestowaniaidebugowaniaJavaScriptu.

Instrukcje
Instrukcjestanowipodstawowejednostkiprogramuwwikszocijzykw
programowania,takewJavaScripcie.Oglnierzeczbiorc,instrukcjajest
sekcjkodu,odpowiedzialnzawykonaniepewnejjednostkowejakcji.
Przykadowo,kadazponiszychinstrukcjipowodujewyodrbnienie

84

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

pojedynczegokomponentu(godzin,minutlubsekund)zewskazaniaczasu
przechowywanegowzmiennejnow:
hours = now.getHours();
mins = now.getMinutes();
secs = now.getSeconds();

ChociakadainstrukcjaJavaScriptuzapisywanajestwpojedynczymwierszu,
niejesttobezwzgldniewymagane(przynajmniejprzezskadnijzyka)mona
rozcignpojedynczinstrukcjnakilkawierszylubupakowakilkainstrukcji
wjednym.
Zwyczajoworednikpenirologranicznikainstrukcji,niejestjednakwymagany,
jelipoinstrukcjiwystpujeznaknowegowiersza.Jeliupakowujemykilka
instrukcjiwjednymwierszu,muszbyonebezwzgldnierozdzielonerednikami.

Wizanie funkcji z zadaniami

Wnaszymprzykadowymskrypciewielokrotniewykorzystywalimyinstrukcje
zawierajcefragmentyujtewnawiasy,naprzykad
document.write("Testowanie.");

Takainstrukcjastanowiprzykadwywoaniafunkcji.Kadafunkcjadostarcza
prostegosposobunawykonaniepewnegozadania,naprzykadwywietlenia
tekstunastronieWWW.JavaScriptoferujeuytkownikowiszerokgam
gotowych,czyliwbudowanychfunkcji,czegoprzykadyprzytoczylimy
(iprzytaczabdziemyjeszczeniejednokrotnie)wniniejszejksice.
Wywoaniefunkcjiwiesizprzekazaniemparametru(wyraeniawystpujcego
wnawiasach,poprzedzonychnazwfunkcji)orazzezwrceniemwartoci,
ktraprzypisywanajest(jakiej)zmiennej.Przykadowo,poniszainstrukcja
wywietlauytkownikowizaproszeniedowprowadzeniapewnegotekstu,
ktrynastpnieprzypisanyzostajezmiennejonazwietext:
text = prompt("Wprowad jaki tekst:");

Uytkownikmoetakedefiniowawasnefunkcje,cookazujesiuyteczne
zconajmniejdwchpowodw.Popierwsze,funkcjestanowinaturalny
sposbmodularyzacjikodu,czylijegologicznegopodziaunadobrzeokrelone
jednostkifunkcjonalne,wskutekczegowkodstajesiczytelniejszyibardziej
zrozumiay.Podrugieiwaniejszerazzaprogramowana,wpostacifunkcji,

Testowanie skryptu

realizacjaokrelonegozadaniamoebywielokrotniewykorzystywanawkodzie
programuprzezwielokrotnewywoaniatejfunkcji.Dzikitemuuytkownik
zostajeuwolnionyodkonstruowaniaidentycznychfragmentwkodu.
Definiowaniem funkcji, ich wywoywaniem i programowaniem zwracanych
wartoci zajmiemy si dokadniej w rozdziale 7.

Zmienne
Zmiennestanowirodzajkontenerwdoprzechowywaniawartocirozmaitych
typw:tekstu,liczb,datiinnychdanych.Wykonanieponiszejinstrukcjipowoduje
utworzeniezmiennejonazwiefrediprzypisaniejejwartociliczbowej27:
var fred = 27;

ZmiennymiJavaScriptuzajmiemysidokadniejwrozdziale6.

Instrukcje warunkowe
Mimoiproceduryzdarzeniowe(eventhandlers)odpowiedzialnes
zaprawidowereagowanieskryptunaposzczeglnezdarzenia,uytkownik
czstosammusibadaspenieniepewnychwarunkw,naprzykadpoprawnoci
wprowadzonegoprzezuytkownikaadresuemail.
WJavaScripcietemucelowisuinstrukcjewarunkowe(conditionalstatements),
ktrychprzykademjestinstrukcjaif,naprzykadtaka:
if (count==1) alert ("Licznik osign warto 1.");

Wpowyszejinstrukcjinastpujeporwnaniewartocizmiennejcountzliczb
1ijeliokasionerwne,wywietlanyjeststosownykomunikat.Podobne
instrukcjewarunkowespotykabdziemywwikszociskryptw
prezentowanychwniniejszejksice.
Instrukcje warunkowe opiszemy dokadniej w rozdziale 8., powiconym kontroli
przepywu sterowania w skryptach JavaScriptu.

Ptle
InnymuytecznymmechanizmemJavaScriptuobecnymzresztwwikszoci
jzykwprogramowaniasptle(loops),grupujceblokiinstrukcji

85

86

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

wykonywanewsposbpowtarzalny.Wykonanieponiszejptlispowoduje
dziesiciokrotnewywietleniealertu:
for (i=1; i<=10; i++) {
alert("Tak, to jest kolejny alert!");
}

Instrukcjafortotylkojedenzprzykadwptli.Generalnieptleprzeznaczone
sdorealizacjitego,wczymkomputeryokazujsinajlepszekonsekwentnego,
kontrolowanegopowtarzaniatychsamychczynnoci.Wtypowychskryptach
monanapotkawieleptlirealizujcychzadaniaznaczniemniejbanalneni
ptlaprezentowanapowyej.
Ptle opiszemy dokadniej w rozdziale 8.

Obsuga zdarze
NiewszystkieskryptywbudowywaneswkodstronyWWWprzezumieszczenie
ichmidzyogranicznikami<script></script>.Skryptmoebowiempeni
takerolproceduryobsugizdarzenia(eventhandler).Mimoskomplikowanej
nazwy,jegorolajestoczywistajestniwaciwereagowanienaokrelone
typyzdarzezachodzcychwsystemie.
Samakoncepcjazdarzenianiejestobcanikomuwcodziennymyciu,niekoniecznie
majcymzwizekzkomputerami.Zdarzeniamogbyoczekiwane,zwizane
zkalendarzem,jakWizytaudentystyczyImieninyKarola,bdnieoczekiwane
czegoprzykademmoebyawariakanalizacji,poar,niespodziewanawizyta
krewnychczykontrolazurzduskarbowego.
Wikszocizdarzeoczekiwanychlubniepotrafimystawiczoo,
uruchamiajcprzygotowanyaprioriscenariusz,naprzykadGdynadejd
imieninyKarola,wylijmuprezentalboGdyzobaczysz(usyszysz),ezbliaj
siTwoikrewni,wyczwszystkiewiataiudawaj,eniemaCiwdomu.
NagruncieJavaScriptuobsugazdarzeodbywasinapodobnejzasadzie
kadazprocedurzdarzeniowychokrelazachowaniesiprzegldarki
wprzypadkuwystpieniaokrelonegozdarzenia.Coprawdazdarzeniatego
rodzajukliknicieprawymprzyciskiemmyszylubzakoczeniewczytywania
stronysmoemniejekscytujcenitezachodzcewcodziennymyciu,
niemniejjednakichobsugajestniezbdnymelementemfunkcjonowania
wspczesnychprzegldarekijednoczenieintegralnymelementemJavaScriptu.

Testowanie skryptu

Wikszozdarze,oktrychmowa,wywoywanychjestprzezdziaania
uytkownika(czegoprzykademmoebynacinicieklawiszaczykliknicie),
wskutekktrychprzegldarkaporzucanachwilnormalnpraciprzechodzi
dowykonywaniawaciwejproceduryzdarzeniowej.Niektrezdarzenia
jakzakoczeniewczytywaniastronyzserweraWWWniesinicjowane
przezuytkownikawsposbbezporedni.
Kadaprocedurazdarzeniowaskojarzonajestzokrelonymobiektemstrony
WWWispecyfikowanajestwznacznikuHTMLotwierajcymwobiekt.
Przykadowo,obrazkiihiperczatekstowepowizaneszezdarzeniem
onMouseOverzachodzcymwwczas,gdywskanikmyszypojawisinad
obiektem.Zdarzeniutemumonaprzypisaprocedurobsugiwnastpujcy
sposb:
<img src="button.gif" onMuseOver="highlight();">

Jakwida,scenariuszobsugizdarzeniaspecyfikowanyjestjakowartoatrybutu,
ktregonazwjestnazwazdarzenia.Jeeliobsugatazaprogramowanajest
wpostacifunkcji,wspomnianyscenariuszsprowadzasidowywoaniateje
(jakwpowyszymprzykadzie)tokolejnaprzesankaprzemawiajca
zastosowaniemfunkcji.
WpunkciePrzekonajsisamprzykocuniniejszegorozdziauznajdzie
Czytelnikkonkretnyprzykaddziaajcejproceduryzdarzeniowej.

Kolejno wykonywania skryptw

WnikliwyCzytelnikzorientowasijuzapewne,ewdanstronWWWmoe
bywbudowanychwielernychskryptwtychograniczonychznacznikami
<script></script>,tychpochodzcychzzewntrznychplikwitychpenicych
rolprocedurzdarzeniowych.Interesujcestajesiwtymmomenciepytanie
oto,wjakiejkolejnociskryptytebdwykonywane.Takwestianaszczcie
rozwizanazostaazgodniezpewnymilogicznymizasadami,mianowicie:
X

skryptytypu<script>,nalecedosekcji<head>niezalenieodtego,
czywbudowanewkod,czyteimportowanezzewntrznychplikw
wykonywaneswpierwszejkolejnoci.Poniewaniemogone
produkowazawartociwywietlanejnastronie,stanowiidealnemiejsce
dodefiniowaniafunkcjiwykorzystywanychwinnychskryptach;

skryptytypu<script> znajdujcesiwcieledokumentu(sekcji<body>)
wykonywaneswdrugiejkolejnoci,podczaswczytywaniaiwywietlania

87

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

88

strony,wkolejnociidentycznejzkolejnociichzdefiniowaniawkodzie
tejstrony;
X

skryptypenicerolprocedurzdarzeniowychuruchamianesw
momenciewystpowaniaodnonychzdarze;przykadowo,skrypt
obsugujcyzdarzenieonLoadwykonywanyjestwmomencierozpoczcia
wczytywaniastrony.Jakoesekcja<head>zostajewczytanaprzed
wygenerowaniemjakiegokolwiekzdarzenia,funkcjezdefiniowane
wskryptachznajdujcychsiwtejsekcjimogbywykorzystywane
wprocedurachzdarzeniowych.

Reguy skadniowe jzyka JavaScript

JavaScriptjestjzykiemstosunkowonieskomplikowanym,coniezmieniafaktu,
ezdefiniowanyjestonnabaziecisychregusyntaktycznych.Doregutych
odwoywasibdziemynieustanniewcaejniniejszejksice,obecnie
ograniczymysijednakdoprzedstawieniatychnajwaniejszych,ktrych
przestrzeganiepozwoliuniknwielupowszechniepopenianychbdw.

Wielko liter
NiemalwewszystkichelementachJavaScriptuwielkolitermaznaczenie
wielkieliteryodrnianesodswychmaychodpowiednikw.Naleyzatem
pamitaokilkuzasadachwynikajcychbezporednioztegofaktu:
X

sowakluczoweJavaScriptu,jakforczyif,zawszepisaneswcaoci
maymiliterami;

nazwyobiektwwbudowanych,jakMathczyDate,skapitalizowane
rozpoczynaneswielkliter,resztapisanajestwcaocimaymi;

nazwyobiektwDOMzwyklepisanesmaymiliterami,leczwnazwach
metodtychobiektwmonamieszaliterymaezwielkimi,najczciej
wcelurozrnieniafrazsowotwrczych2(zwyjtkiempierwszej),
jakwprzypadkutoLowerCaseczygetElementById.

Wprzypadkuwtpliwocizwizanychzestosowaniemmaychiwielkichliter
najlepiejwzorowasinapoprawnychrozwizaniach,naprzykadskryptach
prezentowanychwniniejszejksice.Wikszobdwwynikajcychzuycia
2

Nazywasitopotocznienotacjwielbdzi(ang.camelnotation)przyp.tum.

Reguy skadniowe jzyka JavaScript

literyniewaciwejwielkocikwitowanychjestprzezprzegldarkistosownymi
komunikatami.

Nazwy zmiennych, obiektw i funkcji

Nadajcnazwydefiniowanymzmiennym,obiektomifunkcjom,monauywa
litermaychiwielkichcyfriznakupodkrelenia.Kadaztychnazwmoe
zaczynasiliterlubznakiempodkrelenia.
Wybrkonkretnejkonwencjiwzakresiestosowaniamaychiwielkichliterjest
sprawuytkownika,ktryniepowinienjednakzapominaotym,eJavaScript
jestwraliwynawielkoliter:score,ScoreiSCOREtozpunktuwidzenia
JavaScriptutrzyrnenazwy.Odwoujcsidozdefiniowanejnazwy,naley
zatemczynitozwiernymzachowaniemwielkociliter.

Sowa zarezerwowane
Dowolnowzakresiewyborunazwdefiniowanychprzezuytkownika
ograniczonajestreguzabraniajcuywaniawtymceluswzarezerwowanych.
Naledonichm.in.sowakluczowetworzceosnowskadniowjzyka
(jakifczyfor),nazwyobiektwDOM(jakwindowidocument)oraznazwy
obiektwwbudowanych(naprzykadMathiDate).

Spacjowanie
Znakiniewidocznespacje,tabulatory,znakikocawierszazwaneprzez
programistwbiaymiznakami(ang.whitespaces)szpunktuwidzeniaskadni
JavaScriptunieistotne.Monazatemdowolnieumieszczabiaeznakimidzy
kolejnymielementamiskadniowymi3,amainstrukcjemidzykilkawierszy
itp.Stwarzatodoskonaokazjdonadawaniatworzonymskryptompodanej
czytelnoci.
3

Niesobojtnespacjewystpujcewewntrzstaychtekstowych.Oilewinstrukcji
text = prompt("Wprowad jaki tekst:");
spacjeitabulatorywystpujceprzedotwierajcymcudzysowem(ipozamykajcym
cudzysowie)snieistotne,toumieszczonemidzycudzysowamizostanliteralnie
wypisanenaekranienapisWprowadjakitekstrnisiprzecieodnapisu
Wprowadjakitekstprzyp.tum.

89

90

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

Komentarze
Komentarzeumoliwiajumieszczaniewkodzieskryptutekstuignorowanego
wzupenociprzezinterpreter,leczzawierajcegoinformacjistotndlaczowieka
analizujcegokod;swickomentarzenaturalnymrodkiemprzydawania
tworzonymskryptomcechsamodokumentacji.Jakpokazaowieloletnie
dowiadczenie,nieskomentowanykodmoebyniezrozumiaynawet
dlajegoautorw,ktrzypowracajdoniegopokilkumiesicachniewidzenia.
WjzykuJavaScriptkomentarzemjestkadywierszrozpoczynajcysiodpary
ukonikw(//),naprzykad
// To jest komentarz

Komentarzrozpoczynajcysiodparyukonikwmonatakeumieszcza
poinstrukcji,zwyklewceluwyjanieniajejsensu,naprzykad
a = a + 1;

// Zwikszamy licznik w celu uwzgldnienia pocztkowego

// ogranicznika

WJavaScripciemonatakeuywakomentarzywstyluzapoyczonym
zjzykaC.Komentarztakirozpoczynasisekwencj/*,koczysekwencj*/
imoezajmowawielewierszy,naprzykad
/*
Ponisza funkcja realizuje pojedynczy krok permutacji
metod przestawiania ssiadujcych elementw. Jest ona
efektywniejsza od metody obrotw elementarnych, w ktrej
pojedynczy krok moe wymaga liczby przestawie proporcjonalnej
do kwadratu dugoci obracanej porcji.
*/

Wielowierszowekomentarzewykorzystywanebywajzwykle
dowykomentowywania,czylitymczasowegoukrywaniaprzedinterpreterem
tychfragmentwkodu,ktrenieskompletnelubtektrychdziaanie
zakcaobypoprawnpracpozostaegokodu.
Poniewa opisywane komentarze s czci JavaScriptu, nie jzyka HTML,
dopuszczalne s jedynie midzy znacznikami <script></script> oraz
w zewntrznych, doczanych plikach skryptw.

Sprawdzone i zalecane praktyki programistyczne

Sprawdzone i zalecane
praktyki programistyczne
Oprczformalnychregu,bezwzgldniestanowicychotym,cowJavaScripcie
poprawne,aconie,dokanonuzasadprogramistywartowpisatakeponisze
zalecenia,ktrychprzestrzeganiechoformalnieniewymaganepozwoli
zaoszczdziwielu(niepotrzebnych)kopotwzarwnotwrcyskryptu,
jakitym,ktrymprzyjdziewprzyszociwskryptwykorzystywa
lubmodyfikowa.
X

Nieaujkomentarzy.Otym,jaktrudnoczytasinieskomentowanykod,
moeprzekonasinietylkoprzypadkowyjegoczytelnik,lecztakeautor,
ktremupokilkumiesicachczylatachprzychodzipoprawialub
unowoczeniawasnykod.Trekomentarzy,jakozupenieignorowana
przezinterpreter,niepodlegaadnymreguom,programistamoewic
bezskrpowaniaopisywaswojeintencjewobecposzczeglnych
fragmentwskryptu,czynawetposzczeglnychinstrukcji.

Umieszczajrednikinakocuinstrukcji,akadinstrukcjzapisuj
wosobnymwierszu.Przyczynisitodoatwiejszegodebugowaniaskryptu.

Jeelitomoliwe,umieszczajskryptywoddzielnychplikach.Oddzielenie
JavaScriptuodkoduHTMLnietylkouatwidebugowanie,lecztakeumoliwi
wielokrotnewykorzystywanierazstworzonegoskryptu.

Unikajkonstrukcjispecyficznychdlakonkretnychprzegldarek.
NiektrezmechanizmwJavaScriptuhonorowanestylkoprzezniektre
przegldarki.Naleykonsekwentnieunikastosowaniatakichmechanizmw,
chybaeichuycieokaesibezwzgldniekonieczne.

PotraktujJavaScriptjakonarzdziedrugorzdne.Niewykorzystuj
JavaScriptudowykonywaniawszelkichzadazwizanychzwywietlaniem
stronyWWW,wszczeglnocidozadatakpodstawowych,jaknp.realizacja
hiperczy.Niezapominaj,euytkownikmoezablokowaobsug
JavaScriptuprzezprzegldarkiwtedyfunkcjonalnostronyograniczona
zostaniedoelementwzrealizowanychprzyuyciuczystegoHTMLu.
Zadbajwicoto,byelementwtakichbyojaknajwicej,aJavaScript
wykorzystajtylkodouzupenieniaichrepertuaru(filozofiatakanazywa
siprogresywnymulepszaniem).

91

92

Rozdzia 4. Tworzenie prostych skryptw w jzyku JavaScript

Przekonaj si sam
Implementowanie obsugi zdarze
Nazakoczenierozdziauzaprezentujemyprostyprzykadobsugizdarzenia
pokaemy,jakdoprowadzidowystpieniazdarzeniaijakzaprogramowa
wjzykuJavaScriptjegoobsug.Nalistingu4.4pokazujemykodilustrujcejto
przykadowejstronyWWW.
Listing 4.4. Dokument HTML z zaprogramowan obsug zdarzenia
<html>
<head>
<title>Przykad obsugi zdarzenia</title>
</head>
<body>
<h1>Przykad obsugi zdarzenia</h1>
<p>
<a href="http://helion.pl/"
onClick="alert('O! Wystpio zdarzenie!');">Kliknij to hipercze</a>
w celu przetestowania obsugi zdarzenia.
</p>
</body>
</html>

Zgodnieztym,cowczeniejpisalimy,scenariuszobsugizdarzenia,ktrechcemy
obsuyonClickjestwartociatrybutuotejenazwie,welemencie<a>,
ktregoklikniciemawspomnianezdarzeniewygenerowa:
onClick="alert('O! Wystpio zdarzenie!');

Wscenariuszuobsugizdarzeniawykorzystalimywbudowanfunkcj
alert(),powodujcwywietleniekomunikatuotrecipodanejjakoparametr.
Wskryptachmniejbanalnychnizaprezentowanyobsugazdarzeodbywasi
zwyklewramachfunkcjidefiniowanychprzezuytkownikw.Narysunku4.4
widzimyoknozewspomnianymkomunikatem,wywietlanewskutekkliknicia
jedynegowidocznegohipercza.
Wnastpnymrozdzialezaprezentujemykolejneprzykadypodobnejobsugi
zdarze.

Podsumowanie

93

RYSUNEK 4.4.
Komunikat
wywietlany
w ramach
obsugi zdarzenia
onClick
generowanego
w wyniku
kliknicia
hipercza

Podsumowanie
Wzakoczonymwanierozdzialeprzedstawilimyprostyprogramwjzyku
JavaScriptiprzetestowalimyjegodziaanie,wbudowujcgowstronWWW
iwywietlajcjwprzegldarce.Zwrcilimyteuwagnaniezbdnenarzdzia,
jakimidysponowamusitwrcaskryptw:edytortekstuiprzegldarkWWW.
Pokazalimyponadto,costaniesi,gdyinterpreternapotkabdwwykonywanym
kodzieskryptu.
Wprocesietworzeniaprzykadowegoskryptuwykorzystalimykilka
podstawowychelementwJavaScriptuzmienne,instrukcjdocument.write
ikilkafunkcjizwizanychzdaticzasem.
OpisalimykilkanajwaniejszychelementwskadniowychJavaScriptu:funkcji,
obiektw,procedurzdarzeniowych,instrukcjiwarunkowychiptli.Zwrcilimy
takeuwagnadueznaczeniekomentarzydlaprzejrzystocikodu,jego
czytelnociiatwociwutrzymaniu.Nazakoczeniezaprezentowalimy
przykadprostejobsugizdarzenia.
Wnastpnymrozdzialezajmiemysimodelemobiektudokumentu
(DOMDocumentObjectModel)iopiszemysposobydostpudoposzczeglnych
elementwstronyzapomocobiektwwpisujcychsiwtenmodel.