IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

JavaScript.

wiczenia praktyczne
Autor: Marcin Lis
ISBN: 83-7197-725-5
Format: B5, stron: 106

Zapraszamy do lektury kolejnej ksiki z serii wiczenia praktyczne dotyczcych

technologii tworzenia internetowych stron WWW. Tym razem prezentujemy JavaScript,
czyli jzyk skryptowy wzbogacajcy moliwoci oferowane przez HTML.
Ksika nie jest suchym omwieniem wszystkich konstrukcji i obiektw
udostpnianych przez jzyk, jest natomiast praktycznym wprowadzeniem do
programowania w JavaScript. Skada si z szeregu wicze, ktre przedstawione s
w postaci gotowej do uruchomienia w dowolnej przegldarce obsugujcej jzyki
skryptowe.
JavaScript to ju obecnie obowizujcy standard, jest to rwnie jeden ze skadnikw
DHTML. Pozwala na tworzenie efektw niedostpnych w standardowym HTML,
efektw ktre niegdy trzeba byo tworzy pomocy technologii takich jak np. skrypty
CGI. Przy czym rwnoczenie jest to prosty jzyk skryptowy, ktrego zrozumienie
i nauka nie powinna sprawi nikomu adnego problemu. Niewtpliwie jest to wic
technologia warta poznania.
Ksika przeznaczona jest dla osb pocztkujcych, dopiero zaczynajcych swoj
przygod z jzykami skryptowymi. Autor zakada jednak, e czytelnik zna przynajmniej
podstawy jzyka HTML i jest w stanie samodzielnie utworzy proste strony. Nie jest
natomiast potrzebna znajomo klasycznych jzykw programowania takich jak C,
C++ czy Java.

Rozdzia 1. Podstawy............................................................................................................................................... 5
Czym jest JavaScript?................................................................................................... 5
JavaScript a Java........................................................................................................... 5
Co nam bdzie potrzebne?............................................................................................ 6

Rozdzia 2. Pierwsze skrypty................................................................................................................................ 7

Znacznik <SCRIPT> .................................................................................................... 7
Instrukcja document.write ............................................................................................ 8
Komentarze................................................................................................................... 9
Komentarz HTML ................................................................................................................9
Komentarz typu // ...............................................................................................................10
Komentarz blokowy............................................................................................................11
Znacznik <NOSCRIPT>.....................................................................................................11

Formatowanie tekstu................................................................................................... 13
Okno dialogowe.......................................................................................................... 15

Rozdzia 3. Elementy jzyka JavaScript........................................................................................................17

Typy danych JavaScript.............................................................................................. 17
Typ liczbowy ......................................................................................................................17
Wartoci logiczne ...............................................................................................................18
acuchy znakw ...............................................................................................................19
Warto NULL ...................................................................................................................19

Zmienne ...................................................................................................................... 19
Wprowadzanie danych................................................................................................ 21
Instrukcje warunkowe................................................................................................. 23
Operacje na zmiennych .............................................................................................. 24
Operacje arytmetyczne .......................................................................................................25
Operacje na bitach ..............................................................................................................27
Operacje przypisania ..........................................................................................................28
Operacje logiczne i porwnania .........................................................................................28
Operacje na acuchach znakw.........................................................................................29

Instrukcja przetwarzania warunkowego ..................................................................... 31

Ptle ............................................................................................................................ 35
Ptla for...............................................................................................................................35
Ptla while ..........................................................................................................................39

Rozdzia 4. Obiekty i funkcje ............................................................................................................................. 41

Funkcje ....................................................................................................................... 41
Rekurencja .................................................................................................................. 43
Obiekty ....................................................................................................................... 47
acuchy znakw (obiekt string) .......................................................................................50

JavaScript. wiczenia praktyczne

Obiekt Math ........................................................................................................................53
Obiekt Date .........................................................................................................................55
Obiekt document.................................................................................................................57
Obiekt window....................................................................................................................62

Rozdzia 5. Zdarzenia i formularze ................................................................................................................ 65

Zdarzenia onLoad i onUnload .................................................................................... 65
Zdarzenia zwizane z mysz ...................................................................................... 68
Formularze.................................................................................................................. 70
Elementy formularzy .................................................................................................. 77
Element button....................................................................................................................78
Element checkbox...............................................................................................................78
Element hidden ...................................................................................................................80
Element radio......................................................................................................................81
Element reset ......................................................................................................................82
Element select.....................................................................................................................84
Element text ........................................................................................................................86
Element textarea .................................................................................................................87

Wykorzystanie formularzy i zdarze.......................................................................... 88

Rozdzia 6. Okna, ramki i ciasteczka ............................................................................................................ 95

Okna............................................................................................................................ 95
Ramki........................................................................................................................ 100
Ciasteczka, czyli cookies .......................................................................................... 103

Na pocztku zajmijmy si klasycznym przykadem, od ktrego zaczyna si wikszo

kursw programowania. Postarajmy si wywietli na ekranie dowolny napis np.

 
 . Aby tego dokona, wpierw musimy dowiedzie si, w jaki sposb
umieszcza skrypty JavaScript w kodzie HTML oraz jaka instrukcja JavaScript pozwala
pisa na ekranie.

Kod JavaScript musi by umieszczony pomidzy znacznikami HTML 

i . Znaczniki te mona umieszcza w dowolnym miejscu dokumentu, jednak
przyjmuje si, e jeeli jest to tylko moliwe, naley umieci je na pocztku pliku
HTML przed znacznikiem .
Znacznik ten powinien zawiera parametr  , ktry moe przyjmowa dwie
wartoci: !"#$% lub
!"#$%. Warto !"#$% jest pozostaoci po wczesnych wersjach jzyka i suy zachowaniu kompatybilnoci. Powinnimy uy wartoci

!"#$%.
wiczenie 2.1.

Umie w standardowym kodzie HTML znacznik .



 


 

 

  


 

 


 




JavaScript. wiczenia praktyczne

Na listingu znajduje si poprawny kod HTML z zawartym znacznikiem . Jednak
po wczytaniu tego pliku do przegldarki otrzymamy pust stron. Brakuje nam instrukcji
pozwalajcej wywietla tekst.

Instrukcja &"'(%)*#%+, pozwala na wyprowadzenie tekstu na ekran przegldarki.

Tekst, ktry chcemy wywietli, naley uj w nawiasy i cudzysowy i poda zaraz za
&"'(%)*#%+, np.
 !"#$%&#&'()!*

wiczenie 2.2.

Napisz skrypt wywietlajcy tekst -


!- na ekranie przegldarki.



 

+,-./0!-&,!0!1
+23+#404-5567-8!


 

 2#9#90!"#/#,!
 !"#$%&#&'()!*


 

 


 




Tak przygotowany kod spowoduje, e na ekranie pojawi si podany napis (rysunek 2.1).
Warto zwrci uwag, e w celu poprawnej interpretacji polskich liter przez przegldark
dodalimy w sekcji .  znacznik /  0%%$12'!3-&(%(%1$- "&(%(%3-%4%
0%56"0#7%37&1889:1;-
Rysunek 2.1.
Efekt dziaania
instrukcji
document.write()

Przeanalizujmy nieco dokadniej fragment kodu odpowiedzialny za wywietlanie tekstu

na ekranie. Wszystkim, ktrzy mieli ju wczeniej do czynienia z jzykiem C bd C++,
skadnia wydaje si z pewnoci znajoma:
 !"#$%&#&'(!*

&"'(% to obiekt, ktry reprezentuje aktualn stron. *#% to tzw. metoda, czyli pewna funkcja dziaajca na obiekcie &"'(% i, w tym przypadku, wywietlajca na ekranie
tekst. Tekst ten podajemy jako argument w nawiasach. Oglnie mona zapisa:
:$# #9&&*

Rozdzia 2. L Pierwsze skrypty

Taki cig jest instrukcj i powinien zosta zakoczony rednikiem. W JavaScript nie
jest to jednak obligatoryjne, chyba e chcemy zapisa kilka instrukcji w jednej linii np.:
2 !;#&!*3 !##4'<4!*3

Wymieniona tutaj, nowa funkcja *#%5(+, dziaa tak samo jak *#%+,, z tym e na
kocu wywietlanego cigu znakw dodaje znak przejcia do nowego wiersza. Niestety,
nie zobaczymy tego efektu, jeeli cao nie znajdzie si w bloku tekstu preformatowanego,
tzn. pomidzy znacznikami   i  .
wiczenie 2.3.

Uyj funkcji *#%+, i *#%5(+, do wywietlenia tekstu w dwch wierszach.



+,-./0!-&,!0!1
+23+#404-5567-8!

 

 

 
2 !;#&!*3 !##4'<4!*3


 


 


 

 


 




Jak wida na rysunku 2.2, zadanie udao nam si wykona znakomicie.

Rysunek 2.2.
Uycie
instrukcji writeln()
i znacznika <PRE>

Znacznik , niezbdny do umieszczania kodu JavaScript, niestety nie jest czci specyfikacji HTML 2.0, ani wczeniejszych, wic niektre przegldarki mog go
nie rozpozna. W takiej sytuacji mog one wywietli tekst skryptu na stronie. Chcielibymy oczywicie tego unikn. Z pomoc przyjd komentarze, ktre mona umieszcza w kodzie HTML. Konstrukcja wyglda nastpujco:

)-$4$#'#
--

Jeeli zatem chcemy ukry kod przed przegldarkami nieobsugujcymi JavaScript,

powinnimy uj go w znaki komentarza, ktre s czci standardu HTML.

10

JavaScript. wiczenia praktyczne

Znacznik , niezbdny do umieszczania kodu JavaScript, niestety nie jest czci specyfikacji HTML 2.0, ani wczeniejszych, wic niektre przegldarki mog go
nie rozpozna. Co si stanie w takiej sytuacji? Ot sam znacznik zostanie zignorowany,
natomiast cay tekst skryptu znajdujcy si midzy  a  zostanie wywietlony na ekranie, zmieniajc nam tre i struktur strony. Chcielibymy oczywicie
tego unikn. Z pomoc przyjdzie nam komentarz HTML, ktrego struktura wyglda
nastpujco:

)-$4$#'#
--

Jeeli ujmiemy tekst skryptu w tak struktur, przegldarka nieobsugujca JavaScriptu

pominie go, traktujc wanie jako zwyky komentarz.
wiczenie 2.4.

Ukryj kod skryptu przed przegldarkami nieobsugujcymi JavaScript.



+,-./0!-&,!0!1
+23+#404-5567-8!

 

 =>?>0!"#/#,!

)--?$&,','92@#$#:4%9<@&"#/#,
 !"#$%&#&'()!*

A$"#/#,--


 


 

 


 




Powysze wiczenie obrazuje uycie komentarzy znanych z jzyka HTML. W JavaScript mamy natomiast dwie nowe moliwoci zastosowania komentarza. Obie s zapoyczone z jzykw programowania takich C, C++ czy Java. Pierwszy typ komentarza
skada si z dwch ukonikw:  (komentarz ten zosta zastosowany w poprzednim
przykadzie, bowiem wczesne wersje przegldarki Netscape Navigator nie rozpoznaway poprawnie sekwencji 11 umieszczonej midzy etykietami ). Zaczyna si
on wtedy od miejsca wystpienia tych dwch znakw i obowizuje do koca danego
wiersza.

wiczenie 2.5.

Uyj komentarza skadajcego si z dwch ukonikw do opisania kodu skryptu.



+,-./0!-&,!0!1
+23+#404-5567-8!

 

 =>?>0!"#/#,!

)--?$&,','92@#$#:4%9<@&"#/#,

;&B2#,4$,'92@#$
 !22C"#$%&#&'()!*

Rozdzia 2. L Pierwsze skrypty

11

A$"#/#,--


 


 

 


 




Komentarz moe si rwnie zaczyna od sekwencji < i koczy <. W takim przypadku
wszystko, co znajduje si pomidzy tymi znakami, uznane zostanie za komentarz.
wiczenie 2.6.

Uyj komentarza blokowego do opisania kodu skryptu.



+,-./0!-&,!0!1
+23+#404-5567-8!

 

 =>?>0!"#/#,!

)--?$&,','92@#$#4:%9<@&"#/#,

D
A#':2$&
;&B2#,4$,'92@#$
D

 !22C"#$%&#&'()!*

A$"#/#,--


 


 

 


 




W jaki sposb jednak poinformowa uytkownika przegldarki nieobsugujcej JavaScriptu, e strona taki skrypt zawiera, tylko nie zosta wykonany? Z pomoc przyjd
nam rwnie komentarze.
wiczenie 2.7.

Napisz kod, ktry po wczytaniu do przegldarki nieobsugujcej JavaScript wywietli

stosowny komunikat.



+,-./0!-&,!0!1
+23+#404-5567-8!

 

 =>?>0!"#/#,!

<#,'92@#$#:4%9<"#/#,

9<&E&,'92@#$=4#,=#/9#

2:4F1,2)

)--?$&,','92@#$#:4%9<@&"#/#,

12

JavaScript. wiczenia praktyczne

 !"#$%&#&'()!*

A$"#/#,--


 

 


 




Przegldarka nieobsugujca skryptw po napotkaniu nieznanej sobie etykiety 

ignoruje j, nastpnie wywietla dwa kolejne wiersze, traktujc je jako zwyky HTML.
Nastpne wiersze s dla niej komentarzem, wic je pomija. Z kolei dla przegldarki obsugujcej skrypty komentarzem s dwa wiersze nastpujce po etykiecie  i to
one s pomijane, natomiast kod z pitego wiersza skryptu ( &"'(%)*#%+-


 -,) jest interpretowany i wykonywany.
Jest te jeszcze inny sposb na wykonanie tego zadania. Przegldarki Netscape Navigator
oraz Internet Explorer, obie od wersji 3.0, akceptuj dodatkowy znacznik .
Dziki niemu moemy osign podobny efekt. W tym przypadku tekst, ktry ma by
wywietlony, gdy wyczymy skrypty w danej przegldarce, umieszczamy pomidzy
znacznikami  i .
wiczenie 2.8.

Uyj znacznika  do poinformowania uytkownika, e jego przegldarka nie

obsuguje JavaScriptu.



+,-./0!-&,!0!1
+23+#404-5567-8!

 

 =>?>0!"#/#,!

)--?$&,','92@#$#:4%9<@&"#/#,
 !"#$%&#&'()!*

A$"#/#,--


 

= 
<#,'92@#$#4&:4%9<"#/#,G
 
9<&E&,'92@#$=4#,=#/9#2:4F1,2)


= 

 


 




Na rysunku 2.3 widoczny jest efekt dziaania powyszego kodu w przegldarce Netscape
Navigator po wyczeniu dziaania skryptw.
Rysunek 2.3.
Zastosowanie znacznika
<NOSCRIPT>
do poinformowania
uytkownika, e jego
przegldarka nie
obsuguje JavaScriptu

Rozdzia 2. L Pierwsze skrypty

13

Argumenty poznanych wyej funkcji *#%+, i *#%5(+, s traktowane przez przegldark jak tekst w HTML-u. Oznacza to, e moemy w acuchach wywietlanych znakw wstawi praktycznie dowolne znaczniki formatujce tekst.
wiczenie 2.9.

Uyj znacznikw HTML formatujcych tekst w argumentach funkcji *#%+, i *#%5(+,,
tak by osign efekt jak na rysunku 2.4.
Rysunek 2.4.
Efekt uycia
znacznikw HTML
w argumentach
funkcji write()
i writeln()



 

#+,-./0!-&,!0!1
+23+#404-5567-8!


 

 =>?>0!"#/#,!

)--?$&,','92@#$#:4%9<@&"#/#,G
 !
H=I0J8;#&!*3
 !##4'<4!*3
2 !
 ;#&!*3
 !##4'<4

 

H=!*3

A$"#/#,--


 

 


 




Oprcz znacznikw HTML w wywietlanych acuchach znakowych mog te pojawi

si znaki specjalne, takie jak np. rozpoczcie nowego wiersza. Jeli chcemy wywietli
znak specjalny, musimy zastosowa sekwencj ukonik (backslash) plus litera symbolizujca dany znak. Sekwencje te przedstawione s w tabeli 2.1.
Tabela 2.1. Sekwencje znakw specjalnych
Sekwencja znakw specjalnych

Znaczenie

K:

backspace

KF

wysunicie kartki (ang. form feed)

K

nowy wiersz (ang. new line character)

K

enter (ang. carriage return)

K

tabulator (ang. tab character)

14

JavaScript. wiczenia praktyczne

Podobnie, jeeli chcemy wywietli cudzysw lub sam ukonik (backslash =), musimy
go poprzedzi znakiem backslash.

wiczenie 2.10.

Uywajc funkcji *#%+, wyprowad na ekran tekst zawierajcy znak cudzysowu oraz
ukonik (rysunek 2.5).
Rysunek 2.5.
Wyprowadzenie
na ekran znakw
specjalnych



 

#+,-./0!-&,!0!1
+23+#404-5567-8!


 

 =>?>0!"#/#,!

)--?$&,','92@#$#:4%9<@&"#/#,
 !
H=I0J8;#&!*3 !##4'<4
 
 !*3
 !'#$:#$42#4+KK!*3 !C#&#LK!&#4
H4H4>,K!!*3
 !

H=!*3

A$"#/#,--


 

 


 




W ten sam sposb moemy rwnie pokusi si o wywietlenie grafiki. Jeeli argumentem funkcji *#%+, bdzie znacznik / z odpowiednim URL-em jako parametrem, przegldarka wywietli na stronie wskazany w ten sposb obrazek np.
 !
> 0
<#/#4
9F1
9#F$#M9F!*3

Oczywicie, plik o lokalizacji /javasc/gfx/grafika1.gif musi istnie, abymy mogli zobaczy efekt w oknie przegldarki. Formalnie rzecz biorc, powinnimy warto argumentu  uj w cudzysw, zatem zgodnie z tym, co wiemy ju o znakach specjalnych,
konstrukcja powinna wyglda nastpujco:
 !
> 0K!
<#/#4
9F1
9#F$#M9FK!!*3

wiczenie 2.11.

Uyj funkcji *#%+, do wywietlenia na ekranie pliku graficznego (rysunek 2.6).



 

#+,-./0!-&,!0!1
+23+#404-5567-8!

Rozdzia 2. L Pierwsze skrypty

15

Rysunek 2.6.
Przykad uycia
funkcji write()
do wywietlenia
pliku graficznego

 

 =>?>0!"#/#,!

)--?$&,','92@#$#:4%9<@&"#/#,
 !
> 0K!
<#/#4
9F1
9#F$#M9FK!!*3

A$"#/#,--


 

 


 




Nauczymy si teraz, jak wywietli na ekranie najprostsze okienko dialogowe. Okno takie
suy zwykle do poinformowania uytkownika o wystpieniu jakiego zdarzenia. Najczciej chodzi o sytuacje, w ktrej wystpi bd. Na taki charakter prezentowanej
metody wskazuje ju sama nazwa: 5#%+,. Moe ona przyjmowa jako parametr cig
znakw, ktry zostanie wywietlony na ekranie.
wiczenie 2.12.

Wywietl na ekranie okno dialogowe z dowolnym napisem.



 

#+,-./0!-&,!0!1
+23+#404-5567-8!


 

 =>?>0!"#/#,!

)--?$&,','92@#$#:4%9<@&"#/#,
#2 !<4$#29!*3

A$"#/#,--


 

 


 




Nasze okno wyglda jak na rysunku 2.7. Wykonywanie kodu jest wstrzymane do czasu,
kiedy uytkownik kliknie przycisk OK. Dokadniej rzecz biorc, w taki sposb powinna
si zachowa wikszo wspczesnych przegldarek. Tekst wywietlany w oknie dialogowym moemy formatowa, uywajc do tego celu znakw specjalnych (tabela 2.1),
podobnie jak w przypadku funkcji *#%+,.

16

JavaScript. wiczenia praktyczne

Rysunek 2.7.
Uycie funkcji alert()
do wywietlenia okna
dialogowego

wiczenie 2.13.

Wywietl na ekranie okno dialogowe z tekstem w dwch wierszach (jak na rysunku 2.8).
Rysunek 2.8.
Uycie znakw
specjalnych
formatujcych tekst
w oknie dialogowym

Spowoduj, aby po klikniciu przez uytkownika przycisku OK na ekranie pojawi si plik

graficzny.



 

#+,-./0!-&,!0!1
+23+#404-5567-8!


 

 =>?>0!"#/#,!

)--?$&,','92@#$#:4%9<@&"#/#,G
#2 !K#'$#E4N'<N)KKA2$<#,'&4$A)!*
 !
> 0K!:#'$M9FK!!*3

A$"#/#,--