Professional Documents
Culture Documents
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
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
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
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
185
CzymjestobiektXMLHTTPRequest?.................................................................... 185
TworzenieinstancjiobiektuXMLHTTPRequest .............................................. 186
Podsumowanie................................................................................................................ 192
Rozdzia 11. Komunikacja z serwerem
193
Spis treci
Spis treci
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
95
107
131
149
171
73
Rozdzia 4
Tworzenie prostych skryptw
w jzyku JavaScript
W rozdziale:
X
testowanie skryptu,
Jakjuwspominalimy,jzykJavaScriptjestjednymzerodkwtworzenia
skryptwpostronieklientaWWW.InstrukcjeJavaScriptumogby
wbudowywanebezporedniowkodstronyWWWiwykonywanepodczas
wywietlaniatejstrony.
Wniniejszymrozdzialeprzedstawimytworzenieprostegoskryptuorazjego
edytowanieitestowaniezapomocprzegldarki.Przyokazjiomwimy
podstawowezadaniazwizaneztworzeniemiwykorzystywaniemskryptw.
74
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.
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.
Inicjujcnowyplikwulubionymedytorzetekstu,napiszmywicpierwszy
wierszkodu:
<script LANGUAGE="JavaScript" type="text/javascript"> </script>
PoniewaniebdziemywykorzystywaadnychnowychcechJavaScriptu1.1
iwersjipniejszych,nieokrelilimykonkretnejwersjiwznaczniku<script>.
Naszskryptpowinienbydzikitemupoprawnieinterpretowanynawetprzez
przegldarkitakarchaiczne,jakNetscape2.0czyInternetExplorer3.0.
75
76
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.
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.
77
78
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
80
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
Wniektrychprzegldarkach,naprzykadwOperze,moemyzadaperiodycznego
odwieaniastronywsposbautomatyczny(cosekundlubcominut),otrzymujc
namiastkdziaajcegozegarkaprzyp.tum.
82
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
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.
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
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.
skryptytypu<script>,nalecedosekcji<head>niezalenieodtego,
czywbudowanewkod,czyteimportowanezzewntrznychplikw
wykonywaneswpierwszejkolejnoci.Poniewaniemogone
produkowazawartociwywietlanejnastronie,stanowiidealnemiejsce
dodefiniowaniafunkcjiwykorzystywanychwinnychskryptach;
skryptytypu<script> znajdujcesiwcieledokumentu(sekcji<body>)
wykonywaneswdrugiejkolejnoci,podczaswczytywaniaiwywietlania
87
88
strony,wkolejnociidentycznejzkolejnociichzdefiniowaniawkodzie
tejstrony;
X
skryptypenicerolprocedurzdarzeniowychuruchamianesw
momenciewystpowaniaodnonychzdarze;przykadowo,skrypt
obsugujcyzdarzenieonLoadwykonywanyjestwmomencierozpoczcia
wczytywaniastrony.Jakoesekcja<head>zostajewczytanaprzed
wygenerowaniemjakiegokolwiekzdarzenia,funkcjezdefiniowane
wskryptachznajdujcychsiwtejsekcjimogbywykorzystywane
wprocedurachzdarzeniowych.
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.
literyniewaciwejwielkocikwitowanychjestprzezprzegldarkistosownymi
komunikatami.
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
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;
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
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
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.