IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

Po prostu Internet.

Techniki zaawansowane
Autor: Tomasz Trejderowski
ISBN: 83-7197-670-4
Format: B5, stron: 122

ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Doskonay podrcznik dla pocztkujcych uytkownikw Internetu, ktrzy chcieliby

pozna techniki stosowane przy tworzeniu stron WWW. Ju wkrtce Kaskadowe
arkusze stylw, JavaScript, dynamiczny HTML nie bd stanowiy tajemnicy. Dziki tej
ksice nauczysz si tworzy doskonae strony WWW, ktre podbij internetowe
rankingi popularnoci.
Ksika ta jest kontynuacj przewodnika Po prostu Internet. Rozszerza informacje
dotyczce tworzenia stron internetowych na komputerach klasy PC o zagadnienie
Kaskadowych Arkuszy Stylw (CSS), tworzenie skryptw w jzyku JavaScript
itworzenie formularzy na stronach WWW. Nie zabrako rwnie wprowadzenia do
DHTML.
Niniejsza pozycja przeznaczona jest gwnie dla osb, ktre pragn rozszerzy swoj
wiedz zdobyt podczas pracy z ksik Po prostu Internet, jednake nie wystpuj
w niej odwoania do tego przewodnika, wic pozycj t mona spokojnie poleci take
dla osb, ktre wiedz z zakresu podstaw Internetu i tworzenia stron internetowych
zdobyy z zupenie innego rda.
Ksika, ktr trzymasz w rku, jest wyjtkowa pod wieloma wzgldami:
Kade omawiane zagadnienie jest przedstawiane krok po kroku, tak by nikt nie
mia problemw z powtrzeniem danego rozwizania na wasnym komputerze.
Kade omawiane zagadnienie jest take bardzo bogato ilustrowane ksika
zwiera ponad dwiecie ilustracji!
Omawiane problemy s wzbogacane o zestawienia tabelaryczne najczciej
wykorzystywanych funkcji, obiektw czy stylw.
Autor skupia si na zgodnoci z obowizujcym od kilku lat standardem HTML
4.0 --czytelnik w trakcie lektury ju teraz nabywa wiedz z zakresu, ktry bdzie
obowizywa w przyszoci, od momentu, gdy wiodce przegldarki internetowe
wprowadz kolejne rozwizania zdefiniowane przez twrcw HTML 4.0
Autor ksiki udostpni swj prywatny adres e-mail. Moesz wykorzysta go do
wyraenia wasnych opinii na temat tej ksiki, ale przede wszystkim, by
uzyska odpowied, ktrej by moe nie udao Ci si odnale w ksice.

"
"
"

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

"

Spis treci

Wstp

Wprowadzenie do CSS
9
Wstp .......................................................................................................... 9
Podstawowe wady i zalety stosowania CSS ............................................. 11

Rozdzia 2.

Tworzenie arkuszy stylw

13
Wstp ........................................................................................................ 13
Style na trzy sposoby ................................................................................ 14
Anatomia stylu .......................................................................................... 16
O czym warto pamita... ......................................................................... 17
Odnoniki.................................................................................................. 19
Klasy ......................................................................................................... 20
Wasne znaczniki HTML .......................................................................... 21
Jednostki ................................................................................................... 22
Dziedziczenie stylw ................................................................................ 23
O czym warto pamita ............................................................................ 24

Rozdzia 3.

Przykadowe style
25
Waciwoci czcionki................................................................................ 26
Waciwoci tekstu (akapitu) .................................................................... 28
Kolor i to.................................................................................................. 30
Bloki.......................................................................................................... 31
Listy .......................................................................................................... 36
Tabele........................................................................................................ 38

Rozdzia 4.

Wprowadzenie do JavaScript
41
DawaSkrypt ......................................................................................... 41
Co to znaczy skryptowy? ...................................................................... 43
Ze nawyki ................................................................................................ 44
W czym pisa skrypty? ............................................................................. 46

Spis treci

Rozdzia 1.

Spis treci

Podstawy JavaScript
47
Zmienne .................................................................................................... 47
Deklarowanie zmiennych.......................................................................... 49
Umieszczanie skryptu JavaScript na stronie WWW................................. 50
Funkcje...................................................................................................... 52
Zdarzenia .................................................................................................. 54
Operatory .................................................................................................. 55
Instrukcje warunkowe............................................................................... 59
Ptle .......................................................................................................... 62
Dziedziczenie w JavaScript ...................................................................... 64

Rozdzia 6.

Obiekty w JavaScript
65
Zdarzenia, metody i waciwoci .............................................................. 66
Konstruktory ............................................................................................. 67
Obiekt document....................................................................................... 68
Obiekt history ........................................................................................... 71
Obiekt math............................................................................................... 72
Obiekt date ................................................................................................ 73
Obiekt string ............................................................................................. 75
Obiekt window.......................................................................................... 77
Obiekt window, a problematyka ramek w dokumencie............................ 81
Podsumowanie .......................................................................................... 81

Rozdzia 7.

Wprowadzenie do formularzy
83
Wprowadzenie .......................................................................................... 83
Ramy formularza ...................................................................................... 84
Typy formularzy ....................................................................................... 85
<FORM> </FORM>................................................................................. 86
Filozofia przesyania danych .................................................................... 87

Rozdzia 8.

Budowanie formularzy
89
<INPUT> .................................................................................................. 90
<TEXTAREA> Obszary tekstowe ...................................................... 94
Listy wyboru ............................................................................................. 95
Przesyanie plikw .................................................................................... 97
Pola ukryte ................................................................................................ 98
Klawisze sterujce formularza .................................................................. 99
Elementy nieaktywne.............................................................................. 102

Spis treci

Rozdzia 5.

Spis treci

Rozdzia 9.

Obsuga formularzy przed wysaniem

103
Dostp do formularza z poziomu JavaScript .......................................... 104
Przykady wykorzystania JavaScript w obsudze formularzy................. 105

Rozdzia 10. Obsuga formularzy po wysaniu

111
Wysyanie danych bezporednio na adres e-mail ................................... 112
Wysyanie danych poprzez skrypt na serwerze ...................................... 113
Rozdzia 11. Wprowadzenie do DHTML
115
DHTML, ktrego nie ma .................................................................... 116
DOM ....................................................................................................... 117
Jaka przegldarka.................................................................................... 119
Nowe zdarzenia....................................................................................... 119
Nowy JavaScript ..................................................................................... 120
Potga w Twoich rkach ..................................................................... 122
To ju jest koniec ................................................................................ 122
Skorowidz

123

Spis treci
5

Podstawy JavaScript

Zmienne
Najprociej mwic, zmienna to zasobnik (ang.
container), jednoznacznie okrelony unikaln nazw,
przechowujcy w sobie jak warto. Jzyk JavaScript
rozrnia cztery podstawowe typy zmiennych:
Rysunek 5.1. Rne rodzaje zmiennych

u liczby (rne formaty zapisu),

u acuchy tekstowe,
u wartoci logiczne,
u null.

Poniej pokrtce omwiona zostaa kady

z powyszych typw zmiennych.
Naley zwrci uwag na fakt, ktry nie wystpuje

dodawania do siebie zmiennych bez wzgldu na ich

typ. To znaczy moliwe jest dodanie do zmiennej typu,
np. acuch tekstowy innej zmiennej typu np. liczba,
bez koniecznoci zamiany ktrego z typw zmiennej
na ten sam jak druga zmienna (rysunki 5.1 5.3).

Liczby

Rysunek 5.3. Efekt dziaania powyszego

kodu w przegldarce

JavaScript nie rozrnia typu liczby zmienna

liczbowa moe przechowywa wszystkie liczby
zmiennoprzecinkowe i cakowite, bez wzgldu na to
czy s to liczby rzeczywiste, dodatnie, ujemne, a nawet
bez wzgldu na to czy s one zapisane w systemie
dziesitnym, semkowym czy szesnastkowym.
Dokadniej obrazuje to ponisza tabela.

Typ zapisu liczby:

Przykady:

Uwagi:

Liczby zmiennoprzecinkowe
(zapis standardowy)
Liczby zmiennoprzecinkowe
(zapis naukowy)
liczby cakowite
Liczby w systemie semkowym

3.1415

314e-2, 78E17

Jest to tak zwana eksponenta.

77
013

Liczb poprzedzamy cyfr
(zero), by odrni j

od tej samej zapisanej w systemie dziesitnym.
j.w. przy czym liczb poprzedza si kombinacj

(zero-iks); wielko znaku x nie ma znaczenia.

Liczby w systemie szesnastkowym 0xFF, 0XE3

47

Zmienne

Rysunek 5.2. Przykad mieszania rnych typw w wikszoci popularnych jzykw programowania.
zmiennych w jednym poleceniu jzyka JavaScript Ot, w JavaScript wprowadzone zostay operatory

Rozdzia 5.
Naley pamita, e JavaScript korzysta ze
standardw amerykaskich, gdzie do oddzielenia
czci uamkowej uywa si znaku kropki (),
a nie przecinka ()!
Jeeli nie znasz rnic ani metod przeliczania
liczb zapisanych w systemach dziesitnym,
szesnastkowym i semkowym poszukaj
w dowolnym podrczniku podstaw informatyki,
tam znajdziesz dokadne przedstawienie tego
zagadnienia.

Zmienne

acuchy tekstowe
Zmienne typu acuch tekstowy (zawierajce jeden
lub wicej znakw wprowadzonych z klawiatury)
odrnia od innych typw zmiennych znak
podwjnego cudzysowu () wystpujcy
na pocztku i kocu. Taka zmienna jest traktowana
jako tekst bez wzgldu na zawarto, czyli zarwno
  jaki i 
  s traktowane jako tekst
mimo, e drugi przykad mgby sugerowa co
innego. Kombinacja dwch cudzysoww ()
czyli tzw. acuch pusty, take jest traktowany
jako tekst. W szczeglnych przypadkach moliwe
jest zastpienie pary cudzysoww podwjnych
przez par cudzysoww pojedynczych (), ale
W3C zaleca niedopuszczanie do takich sytuacji.

Wartoci logiczne
Warto logiczna to typ pochodny od zmiennej
liczbowej, lecz moe on przyjmowa tylko dwie
wartoci: prawda () i fasz ().

Typ null
To specjalny typ pusty, rzadko wykorzystywany
w skryptach. Nie naley myli go ani z wartoci 0
(jest to zmienna typu liczba) ani z  (jest to zmienna
typu acuch tekstowy).

48

Podstawy JavaScript

Deklarowanie zmiennych
Jeeli wykorzystujesz zmienn w wicej
ni jednym miejscu w skrypcie, musisz j
zadeklarowa. Dziki temu bdzie ona
widoczna w caym kodzie, to znaczy
jej warto w danej chwili bdzie taka sama
w kadym miejscu skryptu.
Rysunek 5.4. Przykad deklarowania zmiennej
bez okrelania jej typu

Moesz take od razu nada zmiennej warto,

a tym samym poinstruowa interpreter JavaScript
z jakim typem zmiennej ma on do czynienia
w przypadku konkretnej nazwy. Aby dokona
takiej deklaracji, pomidzy nazw zmiennej,
a znakiem rednika wstaw znak rwnoci
(przypisania) oraz podaj warto zgodn z typem
zmiennej jaki chcesz zadeklarowa. Przykady
takich deklaracji znajduj si na rysunku 5.5.

49

Deklarowanie zmiennych

Rysunek 5.5. Deklarowanie zmiennej z jednoczesnym

okreleniem jej typu oraz nadaniem jej wartoci

Aby zadeklarowa zmienn, poprzed jej nazw

zastrzeonym sowem , a po jej nazwie wpisz
znak rednika (jest to uniwersalny znak, sucy
do rozdzielania kolejnych polece jzyka
JavaScript). Przykad takiej deklaracji jest
przedstawiony na rysunku 5.4.

Rozdzia 5.

Umieszczanie skryptu JavaScript

na stronie WWW
Mwimy teraz o skryptach wyzwalanych
automatycznie przez przegldark w czasie
adowania zawartoci strony. W odrnieniu
Rysunek 5.6. Sposb umieszczenia najprostszego
od nich, s jeszcze skrypty wyzwalane jako efekt skryptu w treci dokumentu HTML
zajcia jakiego zdarzenia (bo jak pamitasz
JavaScript jest jzykiem obiektowo-zdarzeniowym),
ale o nich bdzie mowa pniej.

Umieszczanie skryptu JavaScript na stronie

S dwa sposoby umieszczenia skryptu wyzwalanego

automatycznie, w dokumencie HTML.

Osadzanie skryptu bezporednio

w dokumencie HTML.
Pierwszym z nich jest wstawienie kolejnych polece
pomidzy znacznikami  i ! .
S dwie szkoy. Jedna z nich twierdzi, e polecenia
jzyka JavaScript wraz z powyszymi znacznikami
naley umieszcza pomidzy sekcjami "#$% oraz
Rysunek 5.7. oraz efekt takiego dziaania,
&'%( . Druga szkoa twierdzi, e skrypty naley
zaprezentowany w przegldarce
umieszcza w sekcji &'%( . Wybr naley do
Ciebie w obu przypadkach przegldarka powinna
wykona skrypt bez bdw (rysunki 5.6 i 5.7).
Moesz mie dowoln ilo skryptw osadzonych
w treci dokumentu HTML, zostan one wykonane
po kolei, tak jak kolejno ich umieszczania
w dokumencie (rysunki 5.8 i 5.9).
Rysunek 5.8. Moesz mie dowoln ilo
skryptw osadzonych w dokumencie HTML

Rysunek 5.9. Zostan one wykonane po kolei

tak jak byy umieszczone przez twrc

50

Podstawy JavaScript

Rysunek 5.10. Poprzednia metoda deklaracji

typu zastosowanego jzyka skryptowego

Jak wida na rysunkach 5.6 5.9 skrypty zostay

wykonane bezbdnie bez informowania
przegldarki z jakim jzykiem programowania
ma do czynienia (bo JavaScript nie jest jedynym
jzykiem, ktry mona umieszcza na stronach
WWW). Mimo to W3C zaleca by umieszcza
w znaczniku  informacj o tym. Moesz
to zrobi albo wedug starej metody, poprzez
uycie atrybutu )$*+,$+# tego znacznika (tak
jak na rysunku 5.10). Zalecane jest oczywicie
stosowanie nowej metody (wprowadzonej wraz
z HTML 4.0), ktra zostaa przedstawiona
na ilustracji 5.11.

Rysunek 5.11. Metoda deklaracji wprowadzona

w HTML 4.0

Rysunek 5.12. Kod JavaScript zapisany

w osobnym pliku o rozszerzeniu *.js

Rysunek 5.13. Odwoanie do zewntrznego

skryptu w treci dokumentu HTML

Rysunek 5.14.
Efekt
powyszych
operacji
w przegldarce

Jeeli na jednej stronie WWW wykorzystujesz

wiksz ilo skryptw JavaScript, ich umieszczenie
bezporednio w treci dokumentu moe
spowodowa niezy baagan. Warto wtedy pomyle
o wyrzuceniu ich do zewntrznego pliku.
Rozwizanie takie jest rwnie bardzo dobre,
jeeli na kilku rnych stronach wykorzystujesz
te same skrypty. To dokadnie ta sama sytuacja
jak z omawianymi wczeniej stylami jeeli
bdziesz chcia zmieni fragment kodu, zmienisz
go w zewntrznym pliku, a wszystkie strony
odwoujce si do tego pliku automatycznie
uwzgldni te zmiany. Stosujc poprzedni
metod musiaby aktualizowa kady plik
zawierajcy kod JavaScript.
Aby skorzysta z tej metody, zapisz cay kod
w osobnym pliku. Nadaj mu dowoln nazw oraz
rozszerzenie *.js. Nastpnie w znaczniku 
dodaj nowy atrybut , a jako jego warto nazw
pliku, w ktrym przed chwil zapisae cay
kod JavaScript. Zostao to przedstawione
na rysunkach 5.12 5.14.
Problematyka cieek dostpu (dla przypadku,
kiedy plik zawierajcy skrypt nie znajduje si
w tym samym katalogu co dokument HTML)
zostaa omwiona w mojej poprzedniej ksice
zatytuowanej Po prostu Internet, ktra ukazaa
si nakadem wydawnictwa Helion w grudniu
2001 roku.

51

Umieszczanie skryptu JavaScript na stronie

Wywoywanie zewntrznego pliku

Rozdzia 5.

Funkcje
Deklarowanie funkcji
Jak kady jzyk programowania, take JavaScript
umoliwia programicie tworzenie funkcji. Funkcje
to wyranie ograniczone bloki kodu, ktre s
wywoywane w innych czciach tego kodu. Mog
one by wywoywane tak jak s lub z okrelon Rysunek 5.15. Przykad podstawowej deklaracji
list parametrw, ktrych warto mona odczyta funkcji jzyka JavaScript
wewntrz takiej funkcji. Sama funkcja moe te
zwrci jak warto.

Funkcje

Dzielenie kodu na funkcje jest niezbdne, jeeli

planujesz wywoywa rne jego elementy jako
reakcj na okrelone zdarzenia (patrz dalej).
Aby doda funkcj do kodu JavaScript,
w dowolnym jego miejscu uyj zastrzeonego
sowa -. -, po nim wstaw znak odstpu
Rysunek 5.16. Przykad funkcji z jednym
i podaj nazw funkcji (nie mone ona zawiera
parametrem, ktra zwraca okrelon warto
odstpw ani znakw specjalnych), a na koniec
kombinacj dwch nawiasw /0. Nastpnie w nowej
linijce wstaw nawias klamrowy lewy (1). Teraz
moesz (albo w jednej linijce, albo w kilku) wpisa
cay kod tej procedury. Definicj procedury
zakaczasz wstawiajc nawias klamrowy prawy
(2). Przykad takiej deklaracji znajduje si
na rysunku 5.15.
Zgodnie z tym co napisaem wczeniej, w JavaScript
moesz kadej funkcji przyporzdkowa jeden lub Rysunek 5.17. Funkcja korzystajca z dwch
argumentw
wicej argumentw, a nastpnie korzysta z nich
wewntrz tej funkcji tak jak korzysta si z kadej
innej zmiennej. Pamitaj, e jeeli nie zadeklarujesz
zmiennej na pocztku skryptu to jej warto
wewntrz funkcji bdzie inna ni poza funkcj.
Jeeli uywasz wicej ni jednego argumentu
i w deklaracji funkcji i w ewentualnym
odwoaniu do niej oddziel je znakiem przecinka ().
Uyj zastrzeonego sowa -, aby okreli jak
warto dana funkcja ma zwrci. Tak zwrcon
warto moesz pniej (traktujc j jak zwyk
zmienn) wykorzysta w innej czci skryptu
np. w innej funkcji (rysunki 5.16 5.18).

Rysunek 5.18. Efekt dziaania powyszego skryptu

52

Podstawy JavaScript

Wywoywanie zadeklarowanej funkcji

Rysunek 5.19. Przykad wywoania zadeklarowanej

wczeniej funkcji

To proste! Po prostu w miejscu, w ktrym tego

potrzebujesz napisz nazw funkcji, a w nawiasach
wartoci jakie chcesz nada jej konkretnym
parametrom (o ile dana funkcja posiada jakie
parametry). Najczciej wywoywanie
okrelonych funkcji stosuje si w przypadku
zdarze, o czym dalej (rysunek 5.19).

Funkcje
53

Rozdzia 5.

Zdarzenia
Podstawy

Zdarzenia

Pewna grupa znacznikw umoliwia obsug

zdarze. Zdarzenia to pewne procesy zachodzce
w zwizku z zachowaniem si uytkownika
na Twojej stronie internetowej ruchem myszki
po ekranie, klikaniem na rnych elementach czy Rysunek 5.20. Przykadowy skrypt obrazujcy
wypenianiem pl formularzy. Aby doda do swojej wykorzystanie zdarze
strony internetowej obsug jakiego zdarzenia,
po pierwsze zdecyduj si jaki obiekt (znacznik)
ma to zdarzenie obsugiwa. Nastpnie dodaj mu
atrybut, ktry bdzie nazywa si tak jak jedna
z wymienionych poniej, zastrzeonych nazw
funkcji, dodaj znak rwnoci, a nastpnie
w cudzysowie wpisz nazw zadeklarowanej
wczeniej funkcji wraz ze wszystkimi argumentami.
(rysunki 5.20 5.22)
A co zrobi w sytuacji, gdy parametr wywoywanej
funkcji musi by podany w cudzysowach, gdy
zmienna jest typu acuch tekstowy? Ot w tej
sytuacji moesz zastosowa cudzysowy pojedyncze
( i ), by poda wartoci zmiennych typu acuch Rysunek 5.21. Efekt dziaania powyszego
skryptu w przegldarce
tekstowy. Za samo wywoanie zdarzenia wraz
z nazw funkcji (warto okrelonego atrybutu) bez
zmian podajesz w cudzysowach podwjnych ( i ).
(rysunek 5.23)
Jeeli natomiast musisz uy znaku apostrofu
(cudzysowu pojedynczego) jako elementu
argumentu typu acuch tekstowy, poprzed go
znacznikiem odwrotnego ukonika. Dziki temu
unikniesz bdw przy wykonywaniu skryptu.
(rysunek 5.24)

Lista zdarze
W JavaScript moesz pisa skrypty, ktrych funkcje
bd reagoway na jedn spord 18 niej opisanych
funkcji.

Rysunek 5.24. Sposb radzenia sobie w przypadku,

gdy wewntrz acucha tekstowego niezbdne jest
uycie apostrofa

54

Rysunek 5.22. Znacznik z zadeklarowanym

zdarzeniem (kliknicie); w przypadku jego zajcia
zostanie wywoana funkcja JavaScript zadeklarowana
we wczeniejszym bloku <SCRIPT> </SCRIPT>

Rysunek 5.23. Wywoanie funkcji (jako reakcji

na zajcie zdarzenia) z argumentami typu acuch
tekstowy wykorzystano pojedyncze i podwjne
cudzysowy

Podstawy JavaScript

Operatory

Rysunek 5.25. Przykady operatorw w JavaScript,

pierwszy jest operatorem przypisania, drugi
operatorem matematycznym

Opisane wczeniej zmienne mog przyjmowa

okrelon warto, ale aby mona byo t
warto im przypisa lub zmodyfikowa,
niezbdne staje si wykorzystanie operatorw
sekwencji zastrzeonych znakw, ktrych
zaistnienie w dowolnym miejscu kodu
powoduje zmian wartoci zmiennej. Operatory
w JavaScript zostay podzielone na kilka grup
(rysunek 5.25).

Zdarzenie

Moment zajcia

Przykadowe znaczniki

'-.3

Uytkownik klikn klawiszem myszki na danym obiekcie.

&,'* , $ , +

'-%4.3

j.w. dwukrotne kliknicie.

j.w.

'- % 5- Uytkownik wskaza dany obiekt wskanikiem myszki

i nacisn klawisz, lecz nie zwolni go.

j.w.

'- ,6

j.w.

Wystpuje bezporednio po poprzednim zdarzeniu

uytkownik zwolni klawisz myszki.

j.w.

'-   Uytkownik przesuwa myszk nad danym obiektem.

j.w.

'- '

Wskanik myszki przemieci si poza obszar

danego obiektu.

j.w.

'-) 7

Zachodzi w momencie rozpoczynania rysowania

zawartoci strony na podstawie jej kodu HTML.

Tylko &'%( i 8$##

'-,-) 7

Zachodzi w momencie opuszczenia danej strony przez

przegldark celem udania si pod nowy adres.

j.w.

'-.

Zachodzi w momencie zaznaczenia przez uytkownika

jakiego fragmentu tekstu w obiekcie, w ktrym
mona pisa.

Tylko elementy formularza

znaczniki *,

'-8 .

Zachodzi w momencie uaktywnienia (poprzez uycie

klawisza Tab lub wykorzystanie myszki) jakiego
elementu formularza.

j.w.

'-&

Zachodzi, gdy dany aktywny element formularza przestaje Tylko wybrane elementy
by aktywny, a zaznaczenie (focus) przemieszcza si
formularza znaczniki *,
na inny obiekt.

'-9:

Uytkownik wpisuje co w elementach formularza, ktre

umoliwiaj wprowadzanie tekstu.

j.w.

'-9:% 5-

Uytkownik nacisn klawisz na klawiaturze, ale nie

zwolni go.

j.w.

'-9:,6

Wystpuje bezporednio po poprzednim zdarzeniu

wskutek zwolnienia nacinitego klawisza.

j.w.

'-;-<

Zmiana zawartoci elementu umoliwiajcego

wprowadzanie znakw.

j.w.

'-4=

Wysanie formularza

Tylko znacznik 8'

'-

Wyczyszczenie zawartoci formularza

j.w.

Operatory

'- ' Uytkownik wskaza myszk dany obiekt.

55

Rozdzia 5.

Operatory matematyczne
Przez niektrych bywaj nazywane operatorami
arytmetycznymi dziki nim dokonuje si
operacji na liczbach.

Operatory przypisania

Operatory

Jak nazwa wskazuje, s to operatory przypisujce

konkretn warto (podan jako argument po
prawej stronie operatora) zmiennej (znajdujcej
si po lewej stronie operatora) (rysunek 5.26).

Rysunek 5.26. Nawet zwyke zadeklarowanie

zmiennej z jednoczesnym okreleniem jej typu
i nadaniem pocztkowej wartoci, wie si
z wykorzystaniem operatora przypisania

Operator

Dziaanie

>

dodawanie dwch liczb

odejmowanie dwch liczb

AB

mnoenie dwch liczb

AC

dzielenie dwch liczb

A!

reszta z dzielenia

AD

>>

zwikszenie wartoci o jeden

>>

BB

zmniejszenie wartoci o jeden

BB

Operator

Dziaanie

standardowe przypisanie

>?

tak jak ?>4

>?4

tylko liczb

B?

tak jak ?B4

B?4

tylko liczb

C?

tak jak ?C4

C?4

tylko liczb

!?

tak jak ?!4

!?4

tylko liczb

D?

tak jak ?D4

D?4

tylko liczb

56

Przykady

>
?>4

Przykady
?
?E=3 E

Dotyczy
wszystkich typw zmiennych

Podstawy JavaScript

Operatory porwnania
Rni si one tym od pozostaych operatorw,
e porwnuj (w okrelony sposb) dwie wartoci
(podane z lewej i prawej strony operatora)
i zwracaj warto logiczn typu prawda ()
lub fasz () w zalenoci od tego, czy
zadany warunek porwnania jest speniony czy
nie. Operatory te najczciej wykorzystuje si
w instrukcjach warunkowych i ptlach, o czym
mowa w dalszej czci rozdziau.

Operatory logiczne
W odrnieniu od poprzednich, te operatory
powoduj nadanie argumentowi znajdujcemu
si po lewej stronie operatora konkretnej wartoci
logicznej typu prawda () lub fasz ().
Operatory porwnania
Opis

Wynik dziaania

negacja, zaprzeczenie

, jeli byo  lub odwrotnie.

GG

koniunkcja

Wynikiem jest , jeli oba argumenty s , w kadym

innym przypadku wynikiem jest .

HH

alternatywa

Wynikiem jest , jeeli oba argumenty s , w kadym

innym przypadku wynikiem jest .

Operatory logiczne
Operator

Sprawdzany warunek

Przykady

??

Czy oba wyraenia s rwne?

??4
??

F?

Czy oba wyraenia nie s rwne?

F?4

Czy lewe wyraenie jest mniejsze od prawego?

4

Czy lewe wyraenie jest wiksze od prawego?

 4

?

Czy lewe wyraenie jest mniejsze lub rwne prawemu?

?4

Czy lewe wyraenie jest wiksze lub rwne prawemu?

 ?4

57

Operatory

Operator

Rozdzia 5.

Operator konkatenacji
Konkatenacja to trudne sowo, przez ktre naley
rozumie po prostu czenie tekstw. Nie chodzi
tu o nowy operator, a jedynie o to, e jeeli
uyjesz operatora dodawania (>) dla dwch
zmiennych typu acuch tekstowy, to w efekcie
uzyskasz jedn zmienn typu acuch tekstowy,
ktrej warto bd stanowiy poczone dwa
acuchy poddane operacji konkatenacji
(rysunki 5.27 i 5.28).

Rysunek 5.27. Przykad uycia operatora

konkatenacji

Operatory

Tak jak wspominaem wczeniej, moesz

poczy przy uyciu operatora > dwie zmienne
rnych typw (np. acuch tekstowy i liczb)
i nie spowoduje to wygenerowania komunikatu
o bdzie, gdy JavaScript automatycznie
konwertuje typ zmiennej na podany.

Rysunek 5.28. Efekt dziaania powyszego skryptu

w przegldarce

58

Podstawy JavaScript

Instrukcje warunkowe

Rysunek 5.29. Fragment skryptu zawierajcego

instrukcj warunkow

Jest to jedna z podstaw programowania (pisania

skryptw), gdy umoliwia sterowanie
przepywem programu w zalenoci od tego
czy okrelony warunek jest speniony czy nie,
wykonywane s odpowiednie partie skryptu.
W JavaScript moesz korzysta z kilku typw
instrukcji warunkowych najwaniejsze z nich
zostay pokrtce opisane poniej.

if

Rysunek 5.31. Efekt dziaania skryptu w przypadku,

gdy warunek zadany w instrukcji warunkowej if
zosta speniony

Rysunek 5.32. Efekt dziaania skryptu w przypadku

niespenienia zadanego warunku

59

Instrukcje warunkowe

Rysunek 5.30. Uruchomienie skryptu

w przegldarce powoduje wywietlenie monitu
z prob o podanie imienia oczywicie moesz
wpisa co tylko ci si ywnie podoba

Najprostsza w uyciu i chyba przez to

najpopularniejsza instrukcja warunkowa. Przykad
wykorzystania tego rodzaju instrukcji warunkowej
w skrypcie, zosta przedstawiony na rysunkach
5.29 5.32. Interpreter JavaScript sprawdza, czy
warunek podany w nawiasach okrgych zwraca
warto  i jeli tak to wykonuje polecenia
zawarte w nawiasach klamrowych (1 i 2), po czym
kontynuuje wykonywanie skryptu od nastpnej
linii kodu. Jeeli zadany warunek zwraca warto
 wszystkie polecenia w nawiasach
klamrowych s ignorowane, a wykonywanie
skryptu jest kontynuowane od pierwszej linii
kodu po zamykajcym nawiasie klamrowym
(rysunki 5.29 5.32).

Rozdzia 5.

if else
Jest to rozbudowana wersja poprzedniej instrukcji
warunkowej. Jedyn rnic jest dodany element
, ktry oddziela (rwnie nawiasami
klamrowymi) instrukcje, ktre bd wykonane
wycznie w przypadku, gdy zadany warunek nie
jest speniony. Popatrz na rysunki 5.33 i 5.34.
Rysunek 5.33. Przykad skryptu wykorzystujcego
instrukcj warunkow if ... else

?
Uproszczona (skrcona) wersja poprzedniej
instrukcji warunkowej, przeznaczona dla
rozwiza w ktrych zarwno spenienie jaki
i niespenienie zadanego warunku spowoduje
wykonanie tylko jednej (za kadym razem)
instrukcji. Oglna konstrukcja:

Instrukcje warunkowe



  

   

Przykad uycia w skrypcie jest na ilustracji 5.35.

Rysunek 5.34. Niespenienie zadanego warunku

powoduje wykonanie polece, ktre w adnym
innym przypadku nie zostayby wykonane

Rysunek 5.35. Uproszczona wersja instrukcji

warunkowej if else

60

Podstawy JavaScript

switch

Rysunek 5.36. Wykorzystane instrukcji

warunkowej switch

To rozbudowana wersja instrukcji warunkowej,

ktra pozwala na analiz jednoczenie kilku
moliwych wartoci, zwracanych przez badanie
danego warunku. Jak pamitasz, poprzednie
instrukcje warunkowe baday tylko zwrcenie
 lub . W przypadku tej instrukcji
moesz bada np. rne wyniki liczbowe.
Przykad zastosowania tej instrukcji warunkowej
przedstawiono na ilustracji 5.36. Pamita
naley, e w przypadku napotkania sekwencji
. po ktrej zadany warunek jest speniony,
wykonywane s wszystkie nastpujce instrukcje.
Aby ograniczy takie dziaanie, naley przerywa
wykonywanie danego bloku skryptu dyrektyw
43, gdy w przeciwnym przypadku efekt
kocowy moe by inny ni podany przykad
na ilustracji 5.38.

Instrukcje warunkowe

Rysunek 5.37. Efekt dziaania powyszego skryptu

w przegldarce

Rysunek 5.38. Efekt dziaania tego samego skryptu

w przypadku niezastosowania polecenia break
przerywajcego dziaanie caego bloku switch

61

Rozdzia 5.

Ptle
Ptle bywaj czasami nazywane blokami polece
zaptlonych. Jest to element, bez ktrego
budowanie sprawnie dziaajcych skryptw
byoby niemoliwe lub bardzo trudne. Ptle
to blok polece, ktre s wykonywane okrelon
bd nieskoczon ilo razy. Stosowanie ptli
zwiksza czytelno i przejrzysto skryptu, nie
mwic o sytuacjach, w ktrych ich zastosowanie
jest wrcz niezbdne. Poznasz dwa rodzaje ptli.

Rysunek 5.39. Przykad prostej ptli typu for

for
Jest ptl skoczon. Oglna posta:

Ptle





 




gdzie w miejscu I=-- naley poda nazw

zmiennej wraz z jej pocztkow wartoci, jako
5-3J6I5- naley okreli warunek,
ktrego spenienie bdzie oznaczao przerwanie
wykonywania ptli i przejcie do pierwszego
polecenia poza nawiasami klamrowymi
zamykajcymi ptl, za I=-J5 .J
I=--K to okrelenie, jak ma by zmieniana
I=-- w kadym kolejnym przejciu ptli.
Na rysunku 5.39 przedstawiono przykad
najprostszej ptli skoczonej typu  .

Rysunek 5.40. Efekt dziaania powyszego kodu,

w przegldarce

continue

Rysunek 5.41. Modyfikacja skryptu: ominicie

dwch przebiegw ptli

Nie jest to osobny typ ptli, a jedynie polecenie

uzupeniajce dziaanie ptli  . Jego wystpienie
w dowolnym miejscu bloku wyznaczonego
nawiasami klamrowymi (wewntrz ptli  ),
zmusi interpreter JavaScript do zachowania si
tak, jakby dany krok przebieg ju si skoczy
to znaczy do zignorowania wszystkich polece
nastpujcych po . -- oraz do rozpoczcia
nowego przebiegu ptli, oczywicie wraz
ze zwikszeniem wartoci I=-- w sposb
okrelony przez I=-J5 .JI=--K (patrz
definicja ptli  , powyej). Przykadem takiego
ominicia jednego lub kilku przebiegw ptli
jest zmodyfikowana wersja poprzedniego skryptu
przedstawiona na rysunku 5.41.

Rysunek 5.42. Efekt powyszego ominicia,

zaprezentowany w przegldarce

62

Podstawy JavaScript

while
Oglna konstrukcja:







Rysunek 5.43. Prosty przykad wykorzystania

ptli while

gdzie 5-3J6I5- maj identyczne

znaczenie jak to podane przy omawianiu ptli for.
Na rysunku 5.43 przedstawiono skrypt wykonujcy
dokadnie to samo zadanie, ktre realizuje skrypt
z rysunku 5.39, lecz tym razem z wykorzystaniem
ptli 5;.
Ptla 5;, ze wzgldu na swoj konstrukcj
pozwala w prosty sposb tworzy ptle
nieskoczone (rysunek 5.45), ale poniewa
JavaScript ma w zaoeniu by uzupenieniem
HTML, a nie celem samym w sobie, wic
stosowanie na stronach WWW ptli nieskoczonych
nie ma chyba wikszego sensu.

Ptle

Rysunek 5.44. Efekt dziaania skryptu adnych

rnic w stosunku do rysunku 5.40 mimo, e
do uzyskania obu efektw wykorzystano dwie
rne ptle

Rysunek 5.45. Przykad skryptu wykorzystujcego

ptl nieskoczon; ze wzgldu na optymalizacje,
w przegldarce nie ujrzysz adnego efektu
dziaania tego skryptu

63

Rozdzia 5.

Dziedziczenie w JavaScript

Dziedziczenie w JavaScript

W przypadku jzyka skryptowego JavaScript

problem dziedziczenia jest znacznie bardziej
rozbudowany ni w przypadku arkuszy stylw
CSS. Bez zmian, obiekty (wraz z waciwociami
i metodami) s uoone w sposb hierarchiczny.
Jednake w tym przypadku, aby operowa na
jakim obiekcie podrzdnym lub jego metodzie
czy waciwoci, trzeba w poleceniu wskaza
wszystkie jego obiekty nadrzdne. Do rozdzielenia
kolejnych obiektw oraz ich metod i waciwoci
suy znak kropki (). Przykad zosta
przedstawiony na rysunku 5.46.
Trzy obiekty JavaScript (patrz nastpny rozdzia):
-< , ; : oraz 5-7 5 nie maj nad sob
obiektw nadrzdnych, wszystkie pozostae
posiadaj swojego rodzica i to od niego naley
rozpoczyna wywoanie okrelonej metody czy
waciwoci obiektw podrzdnych.

64

Rysunek 5.46. Przykad dziedziczenia obiektw.

Aby wypisa tekst w ramce o nazwie ramka_gorna
(zdefiniowanej gdzie indziej) naley najpierw
odwoa si do obiektu nadrzdnego window,
nastpnie do podrzdnego mu obiektu ramki, dalej
do podrzdnego tej ramce obiektu document
i dopiero ostatecznie wywoa jej metod write.
Kady kolejny poziom dziedziczenia zosta
oddzielony kropk.