Od zrozumienia zasad działania języka programowania do jego praktycznego wykorzystania prowadzi długa droga. Czasem jest ona zbyt długa -- wówczas sięgamy po gotowe przykłady i rozwiązania. Nie inaczej jest w przypadku języka JavaScript. Chociaż warto nauczyć się pisać samodzielnie skrypty w tym języku, w wielu przypadkach wyważanie otwartych drzwi jest stratą czasu.
Niniejsza książka stanowi wspaniałe uzupełnienie JavaScript. Biblia.
Książka -- autora bestsellera "JavaScript. Biblia" -- to dziesiątki gotowych przykładów kodu, których możesz użyć na swoich stronach internetowych. Nawet jeśli przedstawionych przykładów nie wykorzystasz bezpośrednio, to zaznajomienie się z nimi pomoże Ci poznać tajniki JavaScriptu. Możesz je porównać ze swoimi skryptami. Ogromna wiedza i umiejętności Danny"ego Goodmana mogą być dla Ciebie wspaniałym punktem odniesienia. Dodatkowo zapoznać się możesz z jego wartościowymi wskazówkami i uwagami towarzyszącymi fragmentom kodu.
Jeśli chcesz wzbogacić swoje strony o interaktywne elementy utworzone w JavaScripcie, powinieneś mieć tę książkę zawsze pod ręką. Oszczędzisz sobie w ten sposób wiele cennego czasu.
1. IDZ DO
PRZYK£ADOWY ROZDZIA£
SPIS TRE CI JavaScript – przyk³ady.
Biblia
KATALOG KSI¥¯EK Autor: Danny Goodman
T³umaczenie: Piotr Rajca
KATALOG ONLINE ISBN: 83-7197-671-2
Tytu³ orygina³u: JavaScript Examples Bible:
ZAMÓW DRUKOWANY KATALOG The Essential Companion to JavaScript Bible
Format: B5, stron: 522
TWÓJ KOSZYK
DODAJ DO KOSZYKA Niniejsza ksi¹¿ka stanowi wspania³e uzupe³nienie JavaScript. Biblia
Ksi¹¿ka — autora bestsellera „JavaScript. Biblia” — to dziesi¹tki gotowych przyk³adów
kodu, których mo¿esz u¿yæ na swoich stronach internetowych. Nawet je li
CENNIK I INFORMACJE przedstawionych przyk³adów nie wykorzystasz bezpo rednio, to zaznajomienie siê
z nimi pomo¿e Ci poznaæ tajniki JavaScriptu. Mo¿esz je porównaæ ze swoimi skryptami.
ZAMÓW INFORMACJE Ogromna wiedza i umiejêtno ci Danny'ego Goodmana mog¹ byæ dla Ciebie wspania³ym
O NOWO CIACH punktem odniesienia. Dodatkowo zapoznaæ siê mo¿esz z jego warto ciowymi
wskazówkami i uwagami towarzysz¹cymi fragmentom kodu.
ZAMÓW CENNIK Je li chcesz wzbogaciæ swoje strony o interaktywne elementy utworzone
w JavaScripcie, powiniene mieæ tê ksi¹¿kê zawsze pod rêk¹. Oszczêdzisz sobie
w ten sposób wiele cennego czasu.
CZYTELNIA
FRAGMENTY KSI¥¯EK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
2. 5RKU VTG EK
1 #WVQTG
9UVúR
4QFKC 1DKGMV[ QIÎNP[EJ GNGOGPVÎY *6/.
4QFKC
Najwa niejsze informacje o przykładach ..............................................................................................15
Obiekty ogólne ......................................................................................................................................17
Właściwości ....................................................................................................................................17
Metody ............................................................................................................................................63
Procedury obsługi zdarzeń ............................................................................................................107
4QFKC 1DKGMV[ YKPFQY QTC HTCOG
4QFKC
Informacje o przykładach ....................................................................................................................138
Obiekt window ....................................................................................................................................139
Właściwości ..................................................................................................................................139
Metody ..........................................................................................................................................162
Procedury obsługi zdarzeń ............................................................................................................196
Obiekt elementu FRAME....................................................................................................................198
Właściwości ..................................................................................................................................198
Obiekt elementu FRAMESET.............................................................................................................202
Właściwości ..................................................................................................................................202
Obiekt elementu IFRAME...................................................................................................................206
Właściwości ..................................................................................................................................206
Obiekt popup .......................................................................................................................................209
Właściwości ..................................................................................................................................209
Metody ..........................................................................................................................................210
4QFKC 1DKGMV[ NQECVKQP K JKUVQT[
4QFKC
Informacje o przykładach ....................................................................................................................213
Obiekt location ....................................................................................................................................214
Właściwości ..................................................................................................................................214
Metody ..........................................................................................................................................224
Obiekt history ......................................................................................................................................226
Właściwości ..................................................................................................................................226
Metody ..........................................................................................................................................226
4QFKC 1DKGMV[ FQEWOGPV QTC DQF[
4QFKC
Informacje o przykładach ....................................................................................................................232
Obiekt document..................................................................................................................................232
3. ,CXC5ETKRV RT[M CF[ $KDNKC
Właściwości ..................................................................................................................................232
Metody ..........................................................................................................................................249
Procedury obsługi zdarzeń ............................................................................................................262
Obiekt elementu BODY ......................................................................................................................263
Właściwości ..................................................................................................................................263
Metody ..........................................................................................................................................267
Procedury obsługi zdarzeń ............................................................................................................267
4QFKC 1DKGMV[ GNGOGPVÎY VGMUVQY[EJ
4QFKC
Informacje o przykładach ....................................................................................................................270
Obiekt elementu FONT .......................................................................................................................270
Właściwości ..................................................................................................................................270
Obiekt elementu HR ............................................................................................................................273
Właściwości ..................................................................................................................................273
Obiekt elementu MARQUEE..............................................................................................................277
Właściwości ..................................................................................................................................277
Metody ..........................................................................................................................................279
Obiekt Range .......................................................................................................................................280
Właściwości ..................................................................................................................................280
Metody ..........................................................................................................................................282
Obiekt selection ...................................................................................................................................295
Właściwości ..................................................................................................................................295
Metody ..........................................................................................................................................296
Obiekty Text oraz TextNode ...............................................................................................................297
Właściwości ..................................................................................................................................297
Metody ..........................................................................................................................................297
Obiekt TextRange................................................................................................................................301
Właściwości ..................................................................................................................................301
Metody ..........................................................................................................................................304
Obiekt TextRectangle ..........................................................................................................................319
Właściwości ..................................................................................................................................319
4QFKC 1DKGMV[ +OCIG #TGC QTC /CR
4QFKC
Informacje o przykładach ....................................................................................................................323
Obiekt Image oraz obiekt elementu IMG ............................................................................................324
Właściwości ..................................................................................................................................324
Procedury obsługi zdarzeń ............................................................................................................335
Obiekt elementu AREA.......................................................................................................................336
Właściwości ..................................................................................................................................336
Obiekt elementu MAP .........................................................................................................................337
Właściwość....................................................................................................................................337
4QFKC 1DKGMV HQTO QTC QDKGMV[ PKO YKæCPG
4QFKC
Informacje o przykładach ....................................................................................................................342
Obiekt FORM ......................................................................................................................................342
Właściwości ..................................................................................................................................342
Metody ..........................................................................................................................................345
Procedury obsługi zdarzeń ............................................................................................................346
Obiekt elementu LABEL.....................................................................................................................347
Właściwości ..................................................................................................................................347
4QFKC 1DKGMV DWVVQP
4QFKC
Informacje o przykładach ....................................................................................................................350
Obiekt elementu BUTTON oraz obiekty Button, Submit i Reset .......................................................350
4. 5RKU VTG EK
Właściwości ..................................................................................................................................350
Metody ..........................................................................................................................................351
Procedury obsługi zdarzeń ............................................................................................................352
Obiekt checkbox ..................................................................................................................................353
Właściwości ..................................................................................................................................353
Procedury obsługi zdarzeń ............................................................................................................355
Obiekt radio .........................................................................................................................................358
Właściwości ..................................................................................................................................358
Procedury obsługi zdarzeń ............................................................................................................360
4QFKC 1DKGMV[ VGMUVQY[EJ GNGOGPVÎY HQTOWNCT[
4QFKC
Informacje o przykładach ....................................................................................................................364
Obiekt pola tekstowego .......................................................................................................................364
Właściwości ..................................................................................................................................364
Metody ..........................................................................................................................................369
Procedury obsługi zdarzeń ............................................................................................................371
Obiekt elementu TEXTAREA.............................................................................................................374
Właściwości ..................................................................................................................................374
Metody ..........................................................................................................................................374
4QFKC 1DKGMV[ UGNGEV QRVKQP QTC (KNG7RNQCF
4QFKC
Informacje o przykładach ....................................................................................................................376
Obiekt elementu SELECT ...................................................................................................................376
Właściwości ..................................................................................................................................376
Metody ..........................................................................................................................................382
Procedury obsługi zdarzeń ............................................................................................................382
Obiekt elementu OPTION ...................................................................................................................384
Właściwości ..................................................................................................................................384
Obiekt elementu OPTGROUP.............................................................................................................384
Właściwości ..................................................................................................................................384
4QFKC 1DKGMV[ VCDGN K NKUV
4QFKC
Informacje o przykładach ....................................................................................................................388
Obiekt elementu TABLE.....................................................................................................................388
Właściwości ..................................................................................................................................388
Metody ..........................................................................................................................................396
Obiekty elementów TBODY, TFOOT oraz THEAD..........................................................................397
Właściwości ..................................................................................................................................397
Obiekty elementów COL oraz COLGROUP ......................................................................................397
Właściwości ..................................................................................................................................397
Obiekt elementu TR.............................................................................................................................398
Właściwości ..................................................................................................................................398
Obiekty elementów TD oraz TH .........................................................................................................399
Właściwości ..................................................................................................................................399
Obiekt elementu OL ............................................................................................................................401
Właściwości ..................................................................................................................................401
Obiekt elementu UL ............................................................................................................................402
Właściwości ..................................................................................................................................402
Obiekt elementu LI..............................................................................................................................402
Właściwości ..................................................................................................................................402
5. ,CXC5ETKRV RT[M CF[ $KDNKC
4QFKC 1DKGMV PCXKICVQT QTC KPPG QDKGMV[ TQFQYKUMQYG
4QFKC
Informacje o przykładach ....................................................................................................................404
Obiekt clientInformation (IE 4+) oraz navigator (wszystkie przeglądarki) ........................................404
Właściwości ..................................................................................................................................404
Metody ..........................................................................................................................................411
Obiekt screen .......................................................................................................................................412
Właściwości ..................................................................................................................................412
Obiekt userProfile................................................................................................................................413
Metody ..........................................................................................................................................413
4QFKC 1DKGMV[ FCTG
4QFKC
Informacje o przykładach ....................................................................................................................416
Obiekt event (NN 4) ............................................................................................................................417
Właściwości ..................................................................................................................................417
Obiekt event (IE 4+) ............................................................................................................................420
Właściwości ..................................................................................................................................420
Obiekt event (NN 6+) ..........................................................................................................................429
4QFKC 1DKGMV[ UV[NÎY K CTMWU[ UV[NÎY
4QFKC
Informacje o przykładach ....................................................................................................................441
Obiekt styleSheet.................................................................................................................................442
Właściwości ..................................................................................................................................442
Metody ..........................................................................................................................................444
Obiekty cssRule oraz rule....................................................................................................................446
Właściwości ..................................................................................................................................446
4QFKC 1DKGMV[ WOKGLUEQYKQPG
4QFKC
Informacje o przykładach ....................................................................................................................450
Obiekt layer stosowany w przeglądarce NN 4 ......................................................................................450
Właściwości ..................................................................................................................................450
Metody ..........................................................................................................................................469
4QFKC 1DKGMV[ 5VTKPI /CVJ 0WODGT K $QQNGCP
4QFKC [ K
Informacje o przykładach ....................................................................................................................476
Obiekt String........................................................................................................................................476
Właściwości ..................................................................................................................................476
Metody rozbioru łańcuchów..........................................................................................................477
Obiekt Number ....................................................................................................................................489
Właściwości ..................................................................................................................................489
Metody ..........................................................................................................................................490
4QFKC 1DKGMV #TTC[
4QFKC
Informacje o przykładach ....................................................................................................................492
Metody obiektu Array .........................................................................................................................492
5MQTQYKF
6. 4QFKC
1DKGMV[ +OCIG #TGC
QTC /CR
4QFKC
9 V[O TQFKCNG
Jak pobierać obrazy do pamięci podręcznej i zamieniać obrazy wyświetlane
na stronie
Wykonywanie czynności bezpośrednio po pobraniu obrazu
Tworzenie interaktywnych map odnośników obsługiwanych po stronie klienta
Obiekty elementów +/) są bardzo często wykorzystywane w skryptach, głównie dlatego,
i są one stosowane w rozwiązaniach polegających na zamienianiu obrazów wyświetla-
nych na stronie. Poza tym mo liwość wykorzystania tych obiektów w skryptach była
dostępna niemal ju w pierwszych wersjach przeglądarek obsługujących język Java-
Script. W rozwiązaniach obejmujących zamienianie obrazów pomocniczą rolę odgrywa
obiekt +OCIG, wykorzystywany w celu pobrania obrazu z serwera od pamięci podręcznej
przeglądarki (dzięki czemu obraz wyświetlony na stronie mo na błyskawicznie zamie-
nić na inny). Choć z punktu widzenia skryptów te obiekty są ró ne, mają wiele wspól-
nych właściwości i metod, dzięki czemu poznanie sposobów ich wykorzystania jest
znacznie prostsze.
Obiekty elementów #4'# oraz /#2 ściśle ze sobą współpracują. W praktyce element #4'#
przypomina nieco obiekt # u ywany do definiowania połączeń. Oba elementy tworzą
bowiem na stronie „miejsca”, które u ytkownik mo e kliknąć, co zazwyczaj powoduje
przejście na inną stronę witryny lub do dowolnego innego miejsca Sieci. Te obiekty
mają tak e wiele wspólnych właściwości związanych z adresami URL.
+PHQTOCELG Q RT[M CFCEJ
Większość wersji przeglądarki Internet Explorer jest w stanie wyświetlać elementy
+/) zawierające zarówno obrazy nieruchome, jak i „ruchome” (na przykład, klipy
wideo zapisane w formacie MPEG). Przykład przedstawiony na listingu 22.3
pokazuje w jaki sposób, przy u yciu właściwości F[PUTE, mo na zastąpić obraz
stały obrazem ruchomym.
7. ,CXC5ETKRV RT[M CF[ $KDNKC
Strona przedstawiona na listingu 22.4 pozwala na porównanie efektywności
zamieniania obrazów przechowywanych w pamięci podręcznej przeglądarki
i pobieranych bezpośrednio z serwera. Skrypt pokazuje tak e w jaki sposób mo na
cyklicznie zamieniać obrazy w określonych odstępach czasu.
Listing 22.5 pokazuje w jaki sposób mo na wykonywać czynności w odpowiedzi
na zdarzenie QP.QCF obrazu.
Na listingu 22.7 został przedstawiony skrypt o bardzo du ych mo liwościach,
pokazujący w jaki sposób, po zmianie obrazu wyświetlanego w elemencie +/),
mo na zastosować nową mapę odnośników obsługiwaną po stronie przeglądarki.
1DKGMV +OCIG QTC QDKGMV GNGOGPVW +/)
9 C EKYQ EK
CNKIP
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Strona przedstawiona na listingu 22.1 pozwala na przypisywanie ró nych wartości właści-
wości CNKIP, określającej poło enie wewnątrzwierszowego obrazu w stosunku do sąsia-
dującego z nim tekstu. Spróbuj zmieniać wielkość okna przeglądarki, aby tekst wyświe-
tlany na stronie był w ró ny sposób dzielony i przyjrzyj się, jaki wpływ na układ strony
mają wybierane wartości wyrównania obrazu. Nie wszystkie przeglądarki udostępniają
unikatowe mo liwości wyrównania odpowiadające wszystkim podanym opcjom, a zatem
spróbuj przetestować stronę w wielu ró nych przeglądarkach.
.KUVKPI Testowanie właściwości align obrazów
*6/.
*'#
6+6.' 9 C EKYQ è CNKIP QDKGMVW +/)6+6.'
5%4+26 .#0)7#)' ,CXC5ETKRV
HWPEVKQP UGV#NKIPOGPV
UGN ]
FQEWOGPVO[+/)CNKIP UGNQRVKQPU=UGNUGNGEVGF+PFGZ?VGZV
_
5%4+26
*'#
$1;
* 9 C EKYQ è CNKIP QDKGMVW +/)*
*4
(14/
9[DKGT URQUÎD Y[TÎYPCPKC
5'.'%6 QP%JCPIG UGV#NKIPOGPV
VJKU
8. 4QFKC 1DKGMV[ +OCIG #TGC QTC /CR
4QFKC
126+10 CDUDQVVQO
126+10 CDUOKFFNG
126+10 DCUGNKPG
126+10 5'.'%6' DQVVQO
126+10 NGHV
126+10 OKFFNG
126+10 TKIJV
126+10 VGZVVQR
126+10 VQR
5'.'%6
(14/
*4
2 .QTGO KRUWO FQNQT UKV COGV EQPUGEVGVCWT CFKRKUKEKPI GNKV
UGF FQ GKWUOQF VGORQT KPEKFKFWPV WV NCDQTG GV FQNQTG OCIPC
CNKSWC +/) 0#/' O[+/) 54% FGUMIKH *'+)*6 9+6*
7V GPKO CFOKPKO XGPKCO SWKU PQUVTWF GZGTEKVCVKQP
WNNCOEQ NCDQTKU PKUK WV CNKSWKR GZ GC EQOOQFQ EQPUGSWCV2
$1;
*6/.
CNV
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Określanie wartości właściwości CNV obrazów mo na wypróbować na stronie Tester (przed-
stawionej w rozdziale 13. ksią ki „JavaScript. Biblia”). Celem tego przykładu jest przypisa-
nie łańcucha znaków właściwości CNV obiektu FQEWOGPVO[+/). Rozpocznij od usunięcia
obrazu wyświetlonego na stronie; w tym celu właściwości UTE przypisz nazwę nieist-
niejącego pliku:
FQEWOGPVO[+/)UTE DTCMAVGIQARNKMWIKH
Jeśli przewiniesz stronę, zobaczysz na niej puste miejsce po obrazie. Teraz określ wartość
właściwości UTE:
FQEWOGPVO[+/)CNV $WKC (TGFC
Przewiń zawartość strony, aby przekonać się czy alternatywny tekst został wyświetlony.
Jeśli w łańcuchu znaków zapisywanym we właściwości CNV chcesz umieścić apostrof
bądź cudzysłów (lub jeden z kilku innych znaków, które w języku JavaScript mają spe-
cjalne znaczenie), to musisz poprzedzić go znakiem odwrotnego ukośnika.
DQTFGT
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
9. ,CXC5ETKRV RT[M CF[ $KDNKC
2T[M CF
Skutki określania wartości właściwości DQTFGT obrazów mo emy wypróbować na stronie
Tester (posługując się zdefiniowanym na niej obrazem FQEWOGPVO[+/)). Przeprowadzając
testy, przypisuj tej właściwości liczby całkowite o ró nej wartości.
EQORNGVG
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Przed otwarciem strony z listingu 22.2 prezentującej zastosowanie właściwości KOCIG
EQORNGVG, zamknij i ponownie otwórz przeglądarkę (w ten sposób będziesz miał pew-
ność, e adne obrazy nie znajdują się w jej pamięci podręcznej). Podczas pobierania
ka dego z obrazów sprawdzaj stan właściwości EQORNGVG obiektu KOCIG — klikaj w tym
celu przycisk Czy obraz ju pobrano. Do momentu zakończenia pobierania obrazu wła-
ściwość ta będzie mieć wartość HCNUG, potem przyjmie wartość VTWG. Na naszej przykła-
dowej stronie u ywane są dwa obrazy, przy czym obraz prezentujący łuk skalny jest
większy. Być mo e pomiędzy kolejnymi próbami będziesz musiał zamykać i ponownie
otwierać przeglądarkę, aby usunąć obraz z pamięci podręcznej (lub opró nić całą pamięć
podręczną przeglądarki). Jeśli wykorzystanie właściwości EQORNGVG we własnych skryptach
będzie Ci przysparzać problemów, to spróbuj zdefiniować procedurę obsługi zdarzeń
QP.QCF w znaczniku +/) (podobnie jak na listingu 22.2, mo e to być zupełnie pusta
procedura obsługi zdarzeń).
.KUVKPI Skrypt wykorzystujący właściwość image.complete
*6/.
*'#
5%4+26 .#0)7#)' ,CXC5ETKRV
HWPEVKQP NQCF+V
VJG+OCIGHQTO ]
HQTOTGUWNVXCNWG
FQEWOGPVKOCIGU=?UTE VJG+OCIG
_
HWPEVKQP EJGEM.QCF
HQTO ]
HQTOTGUWNVXCNWG FQEWOGPVKOCIGU=?EQORNGVG
_
5%4+26
*'#
$1;
+/) 54% ERWIKH 9+6* *'+)*6 QP.QCF
(14/
+0276 6;2' DWVVQP 8#.7' 9[ YKGVN MNCYKCVWTú
QP%NKEM NQCF+V
ERWIKH VJKUHQTO
+0276 6;2' DWVVQP 8#.7' 9[ YKGVN FLúEKG WMW UMCNPGIQ
QP%NKEM NQCF+V
CTEJIKH VJKUHQTO 2
+0276 6;2' DWVVQP 8#.7' %[ QDTC LW RQDTCPQ QP%NKEM EJGEM.QCF
VJKUHQTO
+0276 6;2' VGZV 0#/' TGUWNV
10. 4QFKC 1DKGMV[ +OCIG #TGC QTC /CR
4QFKC
(14/
$1;
*6/.
F[PUTE
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Aby w obiekcie +/) wyświetlać obrazy nieruchome bądź ruchome, wystarczy odpowiednio
określać wartości właściwości UTE oraz F[PUTE — zapisywać nazwę pliku obrazu w jednej
z nich, a pusty łańcuch znaków w drugiej. Bardzo prosty przykład, wyświetlający na
przemian jeden obraz stały oraz jeden klip wideo, został przedstawiony na listingu 22.3.
Przedstawiony przykład demonstruje poprawny sposób zamieniania obrazów nierucho-
mych na ruchome (i na odwrót), umo liwiający uniknięcie błędów najczęściej popeł-
nianych w takich sytuacjach (opisanych w tekście ksią ki).
.KUVKPI Naprzemienne wyświetlanie obrazu nieruchomego i ruchomego
*6/.
*'#
6+6.' 9 C EKYQ è F[PUTE QDKGMVW +/)6+6.'
5%4+26 .#0)7#)' ,CXC5ETKRV
XCT VTCKP+OI PGY +OCIG
VTCKP+OIUTE COVTCMLRI
VTCKP+OIF[PUTE COVTCMORI
HWPEVKQP UGV.QQR
]
XCT UGNGEVQT FQEWOGPVHQTOU=?NQQRGT
FQEWOGPVO[+/)NQQR UGNGEVQTQRVKQPU=UGNGEVQTUGNGEVGF+PFGZ?XCNWG
_
HWPEVKQP UGV+OCIG
V[RG ]
KH
V[RG LRI ]
FQEWOGPVO[+/)F[PUTE
FQEWOGPVO[+/)UTE VTCKP+OIUTE
_ GNUG ]
FQEWOGPVO[+/)UTE
FQEWOGPVO[+/)UVCTV HKNGQRGP
UGV.QQR
FQEWOGPVO[+/)F[PUTE VTCKP+OIF[PUTE
_
_
5%4+26
*'#
$1;
* 9 C EKYQ è F[PUTE QDKGMVW +/)*
*4
(14/
9[DKGT V[R QDTCW
11. ,CXC5ETKRV RT[M CF[ $KDNKC
+0276 6;2' TCFKQ 0#/' KOI)TQWR %*'%-' QP%NKEM UGV+OCIG
LRI 0KGTWEJQO[
+0276 6;2' TCFKQ 0#/' KOI)TQWR QP%NKEM UGV+OCIG
ORI 9KFGQ
2 +NG TC[ QFVYQT[è MNKR YKFGQ RQ RQDTCPKW 5'.'%6 0#/' NQQRGT
QP%JCPIG UGV.QQR
126+10 8#.7' 5'.'%6' TC
126+10 8#.7' FYC TC[
126+10 8#.7' Y PKGUMQ EQPQ è
5'.'%6 2
(14/
*4
+/) 0#/' O[+/) 54% COVTCMLRI *'+)*6 9+6*
$1;
*6/.
Jeśli skrypt jawnie nie przypisze właściwości UVCTV wartości HKNGQRGP (jak w powy -
szym przykładzie), to aby odtworzyć klip, u ytkownicy przeglądarek Internet Explorer
dla komputerów Macintosh będą musieli kliknąć go dwa razy (IE 4) lub raz (IE 5).
HKNG%TGCVGFCVG
HKNG/QFKHKGFCVG
HKNG5KG
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Wszystkie trzy omawiane tu właściwości są podobne od analogicznych właściwości
obiektu FQEWOGPV. Przykład ich wykorzystania został przedstawiony na listingu 18.4. Jeśli
chcesz wypróbować omawiane właściwości obiektu obrazu, to skopiuj stronę przedsta-
wioną na listingu 18.4, dodaj do niej element +/), a następnie zastąp odwołania do wła-
ściwości obiektu FQEWOGPV odwołaniami do odpowiedniego obiektu elementu +/).
JGKIJV
YKFVJ
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Właściwości JGKIJV oraz YKFVJ mo na wypróbować na stronie Tester (przedstawionej
w rozdziale 13. ksią ki „JavaScript. Biblia”). Zacznij od pobrania domyślnych wartości
tych właściwości. W tym celu w górnym polu tekstowym formularza wpisz następujące
wyra enia:
FQEWOGPVO[+/)JGKIJV
FQEWOGPVO[+/)YKFVJ
12. 4QFKC 1DKGMV[ +OCIG #TGC QTC /CR
4QFKC
Następnie zmień wysokość obrazu z 90 do 180 pikseli:
FQEWOGPVO[+/)JGKIJV
Gdy przewiniesz stronę i wyświetlisz obraz, oka e się, e został on przeskalowany (aby
zachować oryginalne proporcje). W końcu podaj nową szerokość obrazu:
FQEWOGPVO[+/)YKFVJ
i przyjrzyj się efektom wprowadzonych modyfikacji.
JURCEG
XURCEG
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Do sprawdzenia właściwości JURCEG i XURCEG mo na u yć strony Tester (opisanej w roz-
dziale 13. ksią ki „JavaScript. Biblia”). W pierwszej kolejności upewnij się, e obraz wy-
świetlony na samym końcu strony nie ma adnych marginesów i jest wyświetlony tu
przy lewej krawędzi okna przeglądarki. Następnie zmień szerokość poziomego margi-
nesu na 30 pikseli:
FQEWOGPVO[+/)JURCEG
Wykonanie powy szej instrukcji spowoduje odsunięcie obrazu od lewej krawędzi strony
na odległość 30 pikseli. Margines o tej samej szerokości został umieszczony tak e z prawej
strony obrazu, choć nie jest on widoczny na stronie.
KU/CR
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Obraz wyświetlony u dołu strony Tester nie został zdefiniowany jako mapa odnośników.
Z tego względu, jeśli w górnym polu tekstowym formularza wyświetlonego na tej stronie
wpiszesz poni sze wyra enie i klikniesz przycisk Oblicz, to w polu poni ej zostanie
wyświetlona wartość HCNUG:
FQEWOGPVO[+/)KU/CR
NQQR
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
13. ,CXC5ETKRV RT[M CF[ $KDNKC
2T[M CF
Przykład wykorzystania właściwości NQQR został przedstawiony na listingu 22.3, zamiesz-
czonym w opisie właściwości F[PUTE.
NQYUTE
NQY5TE
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Wpływ właściwości określających plik źródłowy obrazu na przetwarzanie zdarzeń został
przedstawiony na listingu 22.5, podanym w opisie procedury obsługi zdarzeń QP.QCF.
PCOG
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność ( )
2T[M CF
Do sprawdzenia wartości właściwości PCOG mo na wykorzystać stronę Tester (przedsta-
wioną w rozdziale 13. ksią ki „JavaScript. Biblia”). W górnym polu tekstowym formu-
larza wpisz następujące wyra enie:
FQEWOGPVO[+/)PCOG
Oczywiście, powy szy przykład jest nieco bezsensowny, gdy nazwa obrazu stanowi
fragment u ytego odwołania.
PCOG2TQR
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Do porównania wartości właściwości UTE i PCOG2TQR w przeglądarce IE 5+ dla systemu
Windows mo na u yć strony Tester (przedstawionej w rozdziale 13. ksią ki „JavaScript.
Biblia”). W górnym polu tekstowym formularza wpisz ka de z poni szych wyra eń:
FQEWOGPVO[+/)UTE
FQEWOGPVO[+/)PCOG2TQR
14. 4QFKC 1DKGMV[ +OCIG #TGC QTC /CR
4QFKC
RTQVQEQN
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Do sprawdzenia wartości właściwości RTQVQEQN obiektu reprezentującego obraz mo na
u yć strony Tester. W górnym polu tekstowym formularza wpisz poni sze wyra enie:
FQEWOGPVO[+/)RTQVQEQN
UTE
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność ( )
2T[M CF
W przykładzie przedstawionym na listingu 22.4 pokazanych zostało kilka ró nych zasto-
sowań obiektów reprezentujących obrazy. Podstawowym celem tego przykładu jest przed-
stawienie ró nic w efektywności zamieniania obrazów przechowywanych w pamięci
podręcznej przeglądarki oraz pobieranych bezpośrednio z serwera. Dodatkowo skrypt
pokazuje w jaki sposób automatycznie zamieniać wyświetlane obrazy w podanych odstę-
pach czasu. Rozwiązanie to jest bardzo często stosowane na witrynach wyświetlających
paski z reklamami.
W momencie pobierania strony, w zmiennej globalnej zapisywana jest tablica obiektów
+OCIG. Poszczególne komórki tej tablicy są indeksowane łańcuchami znaków reprezen-
tującymi nazwy obrazów (na przykład: FGUM , FGUM i tak dalej). Rozwiązanie to zo-
stało wykorzystane celowo, gdy skrypt będzie się odwoływał do poszczególnych komórek
tablicy właśnie przy u yciu tych nazw. Ka demu obiektowi +OCIG zapisanemu w tablicy
zostaje przypisany adres URL obrazu. Dzięki temu obrazy zostają pobrane i zapisane
w pamięci podręcznej przeglądarki.
Na stronie zostały zdefiniowane dwa elementy +/) (patrz rysunek 6.1). Pierwszy z nich
wyświetla obrazy pobierane bezpośrednio z serwera, a drugi — obrazy pobierane z pa-
mięci podręcznej. Poni ej ka dego z elementów +/) zostaje wyświetlona rozwijana lista
pozwalająca na wybranie jednego z czterech obrazów, który ma zostać wyświetlony
w danym elemencie +/). W procedurach obsługi zdarzeń QP%JCPIG elementów 5'.'%6
wywoływane są dwie ró ne funkcje — w przypadku obrazów pobieranych z serwera
wywoływana jest funkcja NQCF+PFKXKFWCN
, a w przypadku obrazów pobieranych z pa-
mięci podręcznej — funkcja NQCF%CEJGF
. W wywołaniach obu funkcji podawany jest
jeden argument — odwołanie do formularza zawierającego elementy 5'.'%6.
Za cykliczną zmianę obrazów co 5 sekund odpowiada funkcja EJGEM6KOGT
, która w pierw-
szej kolejności sprawdza czy jest zaznaczone odpowiednie pole wyboru. Jeśli pole zostało
18. 4QFKC 1DKGMV[ +OCIG #TGC QTC /CR
4QFKC
Z
[
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Aby przewinąć dokument w taki sposób, by obraz znalazł się o kilka pikseli poni ej górnej
krawędzi okna przeglądarki, mo na u yć następującego wywołania:
YKPFQYUETQNN6Q
FQEWOGPVKOCIGU=?Z
FQEWOGPVKOCIGU=?[
2TQEGFWT[ QDU WIK FCTG
QP#DQTV
QP'TTQT
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Na listingu 22.5 została zdefiniowana procedura obsługi zdarzeń QP#DQTV. Jeśli chcesz
zapobiec wyświetlaniu obrazu, który ju znajduje się w pamięci podręcznej przeglądarki,
będziesz musiał ją zamknąć i ponownie uruchomić. W przedstawionym przykładzie zapew-
niłem mo liwość odświe ania całej strony. Sposób obsługi zdarzenia w głównej mierze
zale y od projektu strony. Zawsze nale y jednak doło yć wszelkich starań, aby w jak
największym stopniu ułatwić u ytkownikowi rozwiązywanie problemów, które mo e
napotkać korzystając ze strony.
QP.QCF
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Przed wypróbowaniem przykładu przedstawionego na listingu 22.5 powinieneś zamknąć
i ponownie uruchomić przeglądarkę. Gdy dokument jest otwierany po raz pierwszy, po-
czątkowo zostaje wyświetlony obraz określony za pomocą atrybutu .1954% (przedsta-
wiający, w tym przypadku, gumki do ołówków), a dopiero później zdjęcie klawiatury.
Gdy zdjęcie gumek zostanie ju pobrane, procedura obsługi zdarzenia QP.QCF wyświetla
w polu tekstowym słowo FQPG . Dzieje się tak niezale nie od tego, e główny obraz
(określony przy u yciu atrybut 54%) nie został jeszcze pobrany. Kolejny eksperyment
19. ,CXC5ETKRV RT[M CF[ $KDNKC
mo e polegać na pobraniu zdjęcia przedstawiającego łuk skalny. Pobranie tego obrazu
zabiera znacznie więcej czasu, a zatem obraz tymczasowy określany dynamicznie za
pomocą atrybutu .1954% zostanie wyświetlony znacznie wcześniej.
.KUVKPI Procedura obsługi zdarzeń onLoad obrazów
*6/.
*'#
5%4+26 .#0)7#)' ,CXC5ETKRV
HWPEVKQP NQCF+V
VJG+OCIGHQTO ]
KH
FQEWOGPVKOCIGU ]
HQTOTGUWNVXCNWG
FQEWOGPVKOCIGU=?NQYUTE FGUMIKH
FQEWOGPVKOCIGU=?UTE VJG+OCIG
_
_
HWPEVKQP EJGEM.QCF
HQTO ]
KH
FQEWOGPVKOCIGU ]
HQTOTGUWNVXCNWG FQEWOGPVKOCIGU=?EQORNGVG
_
_
HWPEVKQP UKIPCN
]
KH
EQPHKTO
2TGTYC G RQDKGTCPKG QDTCW %[ EJEGU RQDTCè IQ LGUEG TC! ]
NQECVKQPTGNQCF
_
_
5%4+26
*'#
$1;
+/) 54% ERWIKH .1954% FGUMIKH 9+6* *'+)*6 QP.QCF KH
FQEWOGPVHQTOU=?TGUWNV FQEWOGPVHQTOU=?TGUWNVXCNWG FQPG QP#DQTV UKIPCN
(14/
+0276 6;2' DWVVQP 8#.7' 9[ YKGVN MNCYKCVWTú
QP%NKEM NQCF+V
ERWIKH VJKUHQTO
+0276 6;2' DWVVQP 8#.7' 9[ YKGVN WM UMCNP[
QP%NKEM NQCF+V
CTEJIKH VJKUHQTO 2
+0276 6;2' DWVVQP 8#.7' %[ QDTC LW RQDTCPQ! QP%NKEM EJGEM.QCF
VJKUHQTO
+0276 6;2' VGZV 0#/' TGUWNV
(14/
$1;
*6/.
1DKGMV GNGOGPVW #4'#
9 C EKYQ EK
EQQTFU
UJCRG
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
20. 4QFKC 1DKGMV[ +OCIG #TGC QTC /CR
4QFKC
2T[M CF
Sposób wykorzystania właściwości EQQTFU oraz UJCRG w skryptach obsługujących obiekty
elementów /#2 został przedstawiony na listingu 22.7.
1DKGMV GNGOGPVW /#2
9 C EKYQ è
CTGCU
NN 2 NN 3 NN 4 NN 6 IE 3/J1 IE 3/J2 IE 4 IE 5 IE 5.5
Zgodność
2T[M CF
Listing 22.7 demonstruje jak mo na zmieniać obiekty elementów #4'# umieszczone we-
wnątrz elementu /#2. Początkowo na stronie jest wyświetlany obraz przedstawiający kla-
wiaturę. Obraz ten jest skojarzony z mapą odnośników MG[DQCTF/CR obsługiwaną po
stronie klienta i definiującą trzy wybrane obszary na klawiaturze. Jeśli u ytkownik zamieni
obraz wyświetlany na stronie wewnątrz elementu +/), skrypt zmieni tak e wartość wła-
ściwości WUG/CR obiektu elementu +/), tak aby wskazywała na drugi element /#2, znacznie
lepiej dostosowany do nowego obrazu. Spróbuj przesuwać wskaźnik myszy w obszarze
obu obrazów i sprawdź adresy URL skojarzone z poszczególnymi obszarami mapy, wy-
świetlane na pasku stanu (w tym przykładzie, strony docelowe określane przez te adresy
nie istnieją).
Kliknięcie przycisku Wygeneruj mapę powoduje jednak wywołanie funkcji OCMG#TGCU
tworzącej cztery nowe obiekty elementów #4'# i dodającej je do mapy skojarzonej z ob-
razem (przy u yciu odwołań charakterystycznych dla DOM u ywanej przeglądarki).
(Nale y zauwa yć, e funkcja OCMG#TGCU
nie działa w przeglądarkach IE 5 dla kom-
puterów Macintosh). Przesuwając wskaźnik myszy w obszarze obrazu po wygenerowaniu
nowych obiektów elementów #4'#, mo emy zauwa yć, e wyświetlane są nowe adresy
URL. Warto tak e zwrócić uwagę na pojawienie się czterech nowych obszarów; komu-
nikaty o nich są wyświetlane na pasku stanu przeglądarki (patrz rysunek 6.2).
.KUVKPI Dynamiczne modyfikowanie elementów AREA
*6/.
*'#
6+6.' 1DKGMV GNGOGPVW /#26+6.'
5%4+26 .#0)7#)' ,CXC5ETKRV
F[PCOKEPKG IGPGTWLGO[ GNGOGPV[ #4'#
HWPEVKQP OCMG#TGCU
]
FQEWOGPVO[+/)UTE FGUMIKH
VYQT[O[ QDKGMV[ GNGOGPVÎY CTGC
XCT CTGC FQEWOGPVETGCVG'NGOGPV
#4'#