Po Prostu JavaScript I Ajax. Wydanie VI

Po prostu JavaScript
i Ajax. Wydanie VI
Autorzy: Tom Negrino, Dori Smith
Tumaczenie: Wojciech Moch, ukasz Orzechowski
ISBN: 978-83-246-0839-3
Tytu oryginau: JavaScript and Ajax for the Web,
Sixth Edition: Visual QuickStart Guide (6th Edition)
Format: B5, stron: 524
Bezproblemowe wprowadzenie do jzyka JavaScript

Chcesz budowa bardziej interaktywne witryny internetowe?
Chcesz zobaczy, jak dynamicznie manipulowa elementami stron?
Chcesz dowiedzie si, jak ulepszy interfejs uytkownika za pomoc
technologii Ajax?
W yciu kadego webmastera nadchodzi moment, w ktrym zwyky kod HTML oraz
arkusze CSS ju nie wystarczaj i pora poszuka bardziej zaawansowanych narzdzi.
Jeli signe po t ksik, prawdopodobnie pragniesz te tchn w swe witryny wicej
ycia i dynamiki. Naturaln drog rozwoju jest nauka jzyka JavaScript, ktry umoliwia
budowanie bardziej interaktywnych i efektownych stron internetowych. A skoro ju zaczniesz
poznawa ten jzyk, dlaczego nie wyprbowa bazujcej na nim technologii Ajax, ktra
pozwala tworzy jeszcze ciekawsze i bardziej wygodne interfejsy uytkownika.
Dziki ksice o prostu JavaScript i Ajax. Wydanie VI byskawicznie nauczysz si
wykorzystywa JavaScript do poprawy jakoci wasnych witryn internetowych. Poznasz
podstawy skadni tego jzyka, sposoby zagniedania skryptw w kodzie HTML, techniki
dynamicznego manipulowania rozmaitymi elementami stron internetowych oraz reagowania
na zdarzenia zachodzce w przegldarce. Dowiesz si te, do czego suy technologia
Ajax oraz jak wykorzysta jej moliwoci do tworzenia efektownych i szybkich
interfejsw uytkownika.
Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl
Podstawy jzyka JavaScript

Dodawanie rysunkw i animacji
Korzystanie z ramek
Sterowanie oknami przegldarki
Stosowanie formularzy
Obsuga zdarze
Uywanie ciasteczek
Stosowanie arkuszy CSS
Manipulowanie modelem DOM
Korzystanie z technologii Ajax
Tworzenie skryptozakadek
Poznaj praktyczne zastosowania jzyka JavaScript i twrz lepsze witryny internetowe
Spis treci
Spis treci
Rozdzia 1.
Wprowadzenie
11
Pierwsze spotkanie z JavaScriptem
15
Rozdzia 2.
Zaczynamy!
Spis treci
Czym jest JavaScript? .......................................................................................... 16

JavaScript to nie Java ........................................................................................... 17
Skd si wzi jzyk JavaScript ............................................................................ 19
Co potrafi JavaScript ............................................................................................ 20
Czego JavaScript nie zrobi .................................................................................. 21
Czym jest Ajax? .................................................................................................... 22
Jzyk obiektowy ................................................................................................... 25
Obsuga zdarze ................................................................................................... 28
Wartoci i zmienne .............................................................................................. 29
Przypisania i porwnania ..................................................................................... 30
Tworzenie kodu HTML na potrzeby JavaScriptu .............................................. 31
Potrzebne narzdzia ............................................................................................. 34
35
Gdzie umieszcza skrypty .................................................................................... 37

Kilka sw o funkcjach ......................................................................................... 39
Stosowanie zewntrznych skryptw .................................................................... 40
Wstawianie komentarzy do skryptw .................................................................. 43
Komunikaty dla uytkownika .............................................................................. 45
Potwierdzanie wyboru dokonanego przez uytkownika .................................... 47
Pobieranie tekstu od uytkownika ....................................................................... 49
Przekierowanie uytkownika za pomoc cza ................................................... 51
Stosowanie JavaScriptu do rozbudowy czy ...................................................... 53
Praca ze stronami kierujcymi ............................................................................. 56
Rozdzia 3.
Podstawy jzyka
59
W kko, w ptli ................................................................................................... 60

Przekazywanie wartoci do funkcji ...................................................................... 65
Wykrywanie obiektw ......................................................................................... 67
Praca z tablicami .................................................................................................. 69
Praca z funkcjami zwracajcymi warto ............................................................ 71
Spis treci
Aktualizowanie tablic ........................................................................................... 72
Stosowanie ptli do/while .................................................................................... 74
Wywoywanie skryptu na kilka rnych sposobw ............................................ 76
Tworzenie wielopoziomowych instrukcji warunkowych ................................... 78
Obsuga bdw ................................................................................................... 81
Rozdzia 4.
Praca z obrazami
83
Spis treci
Podmieniane obrazki ............................................................................................ 85

Lepsza technika podmiany obrazkw ................................................................. 87
Tworzenie przyciskw trjstanowych ................................................................. 95
Podmiana obrazkw poprzez cze ...................................................................... 97
Podmienianie obrazka z rnych czy ............................................................. 100
Podmienianie wielu obrazkw z jednego cza ................................................ 102
Tworzenie animowanych banerw .................................................................... 106
Dodawanie czy do animowanych banerw .................................................... 108
Prezentacje ......................................................................................................... 110
Losowe wywietlanie obrazkw ........................................................................ 113
Cykliczna zmiana obrazw z losowym obrazem pocztkowym ....................... 115
Rozdzia 5.
Ramki, ramki i jeszcze raz ramki
117
Zapobieganie wywietleniu strony w ramce ..................................................... 119

Umieszczenie strony w ramce ........................................................................... 121
Umieszczenie strony w ramce rozwizanie dla duych witryn ................... 122
Zaadowanie ramki ............................................................................................. 126
Tworzenie i adowanie ramek dynamicznych ................................................... 127
Funkcje wsplne dla kilku ramek ...................................................................... 130
Przechowywanie informacji w ramkach ............................................................ 133
adowanie kilku ramek na raz ........................................................................... 136
Praca z elementami iframe ................................................................................ 138
adowanie ramek iframe za pomoc JavaScriptu ............................................. 141
Rozdzia 6.
Praca z oknami przegldarki
143
Otwieranie nowego okna ................................................................................... 144

Zmiana zawartoci nowego okna ....................................................................... 148
Otwieranie wielu okien ...................................................................................... 150
Jednoczesne otwieranie wielu okien ................................................................. 152
Aktualizowanie okna z poziomu innego okna ................................................... 154
Tworzenie nowych stron przy uyciu JavaScriptu ........................................... 157
Zamykanie okna ................................................................................................. 160
Okrelanie pozycji okna na ekranie ................................................................... 163
Przesuwanie okna w wybrane miejsce .............................................................. 166
Spis treci
Rozdzia 7.
Obsuga formularzy
169
Nawigacja wybierz i przejd .......................................................................... 171

Dynamiczne modyfikowanie menu ................................................................... 176
Tworzenie pl wymaganych .............................................................................. 179
Wzajemne sprawdzanie wartoci pl ................................................................ 184
Wyrnianie problematycznych pl .................................................................. 186
Praktyczne wykorzystanie kontroli formularzy ................................................. 189
Praca z przyciskami opcji ................................................................................... 193
Wzajemne ustawianie wartoci pl ................................................................... 196
Sprawdzanie kodw pocztowych ....................................................................... 199
Sprawdzanie adresw e-mail ............................................................................. 203
Rozdzia 8.
Formularze i wyraenia regularne
209
Rozdzia 9.
Obsuga zdarze
Spis treci
Sprawdzanie adresw e-mail za pomoc wyrae regularnych ....................... 211

Sprawdzanie nazwy pliku .................................................................................. 216
Wydobywanie cigw znakw ........................................................................... 218
Formatowanie cigw znakw ........................................................................... 221
Formatowanie i sortowanie cigw znakw ..................................................... 225
Formatowanie i sprawdzanie poprawnoci cigw znakw ............................. 227
Podmiana elementw za pomoc wyraenia regularnego ................................ 230
233
Obsuga zdarze okien ....................................................................................... 234

Obsuga zdarze myszy ..................................................................................... 242
Obsuga zdarze formularzy .............................................................................. 250
Obsuga zdarze klawiatury .............................................................................. 254
Rozdzia 10.
JavaScript i ciasteczka
257
Pieczemy pierwsze ciasteczko ........................................................................... 259

Odczytywanie ciasteczka ................................................................................... 262
Wywietlanie ciasteczek .................................................................................... 263
Wykorzystanie ciasteczek jako licznikw .......................................................... 265
Usuwanie ciasteczek .......................................................................................... 268
Obsuga wielu ciasteczek ................................................................................... 270
Informowanie o nowociach na stronie ............................................................. 272
Rozdzia 11.
Wprowadzenie do CSS
277
Powiedz to ze stylem .......................................................................................... 279

Style z klas ........................................................................................................ 282
Zmiana czcionek za pomoc stylw CSS .......................................................... 284
Spis treci
Kontrola identyfikatorw ................................................................................... 285
Rozrnianie czy ............................................................................................. 287
Osadzanie styli w stylach ................................................................................... 289
Umieszczanie obrazkw w tle ........................................................................... 291
Pozycjonowanie bezwzgldne ........................................................................... 293
Rozdzia 12.
Obiekty i model DOM
295
Kilka sw o manipulacji wzami ..................................................................... 296

Dodawanie wzw ............................................................................................ 298
Usuwanie wzw .............................................................................................. 300
Usuwanie okrelonego wza ............................................................................. 302
Wstawianie wzw ............................................................................................ 306
Podmiana wzw .............................................................................................. 309
Rozdzia 13.
Tworzenie dynamicznych stron
313
Spis treci
Wpisywanie aktualnej daty na stronie WWW .................................................. 314

Manipulowanie dniami ...................................................................................... 316
Dostosowywanie wiadomoci do pory dnia ...................................................... 317
Wywietlanie dat wedug strefy czasowej ......................................................... 318
Konwersja czasu 24-godzinnego na 12-godzinny ............................................. 324
Odliczanie ........................................................................................................... 326
Przenoszenie obiektu w dokumencie ................................................................ 330
Metody obiektu Date ......................................................................................... 333
Rozdzia 14.
JavaScript w akcji
335
Stosowanie wysuwanych menu ......................................................................... 336

Dodawanie menu rozwijanych .......................................................................... 339
Pokaz slajdw z podpisami ................................................................................ 344
Generator dziwnych imion ................................................................................ 348
Generator wykresw supkowych ..................................................................... 354
Podmiany arkuszy stylw ................................................................................... 362
Rozdzia 15.
Wprowadzenie do technologii Ajax
371
Ajax: o co tu chodzi? ........................................................................................... 373

Odczytywanie danych z serwera ....................................................................... 377
Analizowanie danych z serwera ......................................................................... 385
Odwieanie danych z serwera .......................................................................... 389
Podgld czy w technologii Ajax ...................................................................... 392
Automatyczne uzupenienie pl formularza ..................................................... 396
Spis treci
Rozdzia 16.
Zestawy narzdziowe AJAX
403
Przeciganie i upuszczanie elementw strony .................................................. 405

Wstawianie kalendarza ...................................................................................... 411
Wstawianie na strony podwjnego kalendarza ................................................. 415
Stosowanie kontenerw ..................................................................................... 421
Dodawanie efektw animacji ............................................................................. 426
Implementowanie kontrolki dziennika dla celw debugowania ...................... 429
Rozdzia 17.
Skryptozakadki
433
Dodatek A
JavaScript genealogia i kompendium
457
Wersje JavaScriptu ............................................................................................ 458

ECMAScript ....................................................................................................... 461
Przegldarki i JavaScript .................................................................................... 463
Diagram obiektw .............................................................................................. 464
Wielka tabela obiektw ...................................................................................... 469
Dodatek B
Sowa kluczowe jzyka JavaScript
487
Dodatek C
Kaskadowe arkusze stylw
491
Dodatek D
Gdzie mona dowiedzie si wicej
499
Znajdowanie pomocy w sieci ............................................................................. 500

Ksiki ................................................................................................................ 506
Skorowidz
509
Spis treci
Pierwsza skryptozakadka .................................................................................. 434

Zmiana koloru ta strony .................................................................................... 439
Zmiana stylw strony ......................................................................................... 440
Bezpieczne kolory stron WWW ........................................................................ 442
Wyszukiwanie sw ............................................................................................ 444
Przegldanie obrazkw ...................................................................................... 447
Wywietlanie znakw z zestawu ISO Latin ...................................................... 449
Konwersja wartoci RGB do postaci szesnastkowej ......................................... 450
Konwersja wartoci ............................................................................................ 452
Kalkulator skryptozakadkowy ........................................................................... 453
Sprawdzanie poprawnoci stron ........................................................................ 455
Ramki, ramki
i jeszcze raz ramki
Rozdzia 5. Ramki, ramki i jeszcze raz ramki
Ramki to jeden z najbardziej efektywnych
elementw HTML, cho w ostatnich latach do
mocno wypady z ask twrcw stron WWW.
W tym rozdziale opisujemy, jak ujarzmi je
za pomoc JavaScriptu i jeszcze bardziej
rozszerzy ich moliwoci.
117
Rysunek 5.1. Ukad zestawu ramek skadajcego

si z dwch ramek: lewej ramki oraz ramki treci
Zestaw ramek skada si z co najmniej trzech

dokumentw HTML. Pierwszy z nich nazwany
frameset, czyli wanie zestaw ramek, zawiera
ustawienia wszystkich ramek potomnych. W kodzie
JavaScriptu, odwoujc si do niego, korzystamy
z nazwy top lub parent. Pozostae strony, nazywane
stronami potomnymi, dostosowuj si do ukadu
stworzonego przez zestaw ramek. Stronom tym
mona przypisywa dowolne nazwy. Rysunek 5.1
przedstawia zestaw ramek z dwoma ramkami
potomnymi o nazwie menu i tre.
Rozdzia 5.
Tabela 5.1. Podstawy HTML Ramki
Znacznik
Atrybut
frameset
Okrela, e strona skada si z dwch lub wicej stron umieszczonych w ramkach. Zawiera
znaczniki <frame>, ktre definiuj poszczeglne strony.
cols
frame
Podstawy HTML Ramki
Wymiary kolumn poszczeglnych ramek (proporcjonalne lub stae) podawane w pikselach.

Opisuje pooenie i atrybuty strony w ramce.
id
Stosowany w jzyku JavaScript do odwoywania si do jednej ze stron w zestawie ramek.
name
Inna metoda pozwalajca jzykowi JavaScript odwoywa si do jednej ze stron w zestawie

ramek.
src
Adres URL strony, ktra ma si pojawi w tej ramce.
iframe
118
Znaczenie
Ramka wewntrzna, wywietlana wewntrz wywoujcej j strony HTML.

id
Stosowany w jzyku JavaScript do odwoywania si do stron w ramkach.
name
Inna metoda pozwalajca jzykowi JavaScript odwoywa si do stron w ramkach.
src
Adres URL strony, ktra ma si pojawi w ramce.
width
Szeroko ramki okrelana w pikselach lub w procentach.
height
Wysoko ramki okrelana w pikselach lub w procentach.
align
Wyrwnuje ramk do lewej lub do prawej strony.
framebodrer
Wywietla obramowanie wok ramki.
Zapobieganie wywietleniu strony

w ramce
Rysunek 5.2. Nasza strona jako cz strony

innej osoby
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nie moe znale si
w ramce</title>
<script language="javascript"
type="text/javascript"
src="script01.js"></script>
</head>
<body bgcolor="#FFFFFF">
<h1>Bardzo wana strona, ktr kady
chciaby mie dla siebie.</h1>
</body>
</html>
Skrypt 5.2. Kod JavaScript wymuszajcy

wywietlanie naszej strony w osobnym oknie
if (top.location != self.location) {
top.location.replace(self.location);
}
119
Zapobieganie wywietleniu strony w ramce
Skrypt 5.1. Oto kod HTML strony, ktr chcemy

zabezpieczy
Inne osoby mog umieci nasz stron w ramce

bdcej czci ich witryny, stwarzajc wraenie,
e stanowi ona cz ich serwisu WWW.
W JavaScripcie okna s uoone w strukturze
hierarchicznej, na szczycie ktrej znajduje si okno
parent. Jeli kto prbuje uprowadzi nasz stron,
oznacza to, e wywietla j w ramce potomnej
w stosunku do swojego okna parent. Na rysunku
5.2 mona zobaczy, jak wygldaaby nasza strona
jako cz czyjej witryny. Za pomoc skryptu 5.1
i 5.2 mona zapobiec takiej sytuacji i zmusi
przegldark do tego, aby nasza strona zawsze bya
wywietlana w osobnym oknie. Skrypt 5.1 zawiera
kod strony HTML, ktr chcemy w ten sposb
zabezpieczy (prosz zwrci uwag na znacznik
<script>). Z kolei skrypt 5.2 zawiera kod JavaScript,
ktrym zajmiemy si za chwil.
Rozdzia 5.
Aby odizolowa stron WWW:
1. if (top.location != self.location) {
Najpierw sprawdzamy, czy aktualna strona

(self) znajduje si na szczycie hierarchii okien
przegldarki. Jeli tak, to nie ma potrzeby,
aby cokolwiek robi.
Zapobieganie wywietleniu strony w ramce
2. top.location.replace(self.location);
Jeli aktualna strona nie znajduje si na szczycie

hierarchii, to przypisujemy aktualn stron
do szczytu. Sprawi to, e nasza strona zostanie
wywietlona samodzielnie. Na rysunku 5.3
zobaczy mona stron, tak jak planowalimy
w osobnym oknie.
Wskazwka
Moglibymy po prostu przypisa warto
top.location do waciwoci self.location,
ale takie postpowanie miaoby pewien niemiy

efekt uboczny: uytkownik nie mgby
skorzysta w przegldarce z przycisku Wstecz.
Nacinicie tego przycisku powodowaoby
automatyczny powrt do biecej strony. Dziki
zastosowaniu metody replace() podmieniamy
po prostu aktualn stron w historii, dziki
czemu przycisk Wstecz moe dziaa bez
adnych komplikacji.
120
Rysunek 5.3. Nasza strona po udanej ucieczce

z innej strony

Skrypt 5.3. Strona z zestawem ramek
Frameset//EN">
<head>
<title>Strona pokazowa</title>
</head>
<frameset cols="30%,70%">
<frame src="left2.html" name="left"
id="left" />
<frame src="frame2.html" name="content"
id="content" />
</frameset>
</html>

wywietlenie strony w ramkach
Automatyczne programy katalogujce strony

internetowe nie wiedz, e strony te stanowi cz
zestawu ramek. Gdy uytkownik odnajdzie jedn
z naszych stron za porednictwem wyszukiwarki
internetowej, to kliknicie cza zaprowadzi go do
pojedynczej strony, a nie do strony bdcej czci
zestawu ramek, tak jak to sobie zaplanowalimy.
Skrypt 5.3 zawiera kod HTML strony z zestawem
ramek. Strona, ktr uytkownik otrzyma od
przegldarki, zawiera wywoanie skryptu JavaScript
(podobnie jak w skrypcie 5.1). Skrypt 5.4
demonstruje, jak wywietli stron w ramce, nawet
jeli o ramkach nie wie Google czy te inna
wyszukiwarka internetowa. Na rysunku 5.4 mona
zobaczy stron wywietlon nieprawidowo, a na
rysunku 5.6 stron poprawnie umieszczon
w ramkach.
Aby wymusi wywietlanie strony w ramce:

1. if (top.location == self.location) {
Sprawdzamy, czy aktualna strona (self)

znajduje si na szczycie hierarchii. Jeeli nie,
to znaczy, e jest wywietlana w zestawie ramek.
2. top.location.replace("frameset2.html");
Rysunek 5.4. Samotna strona w oknie przegldarki
Jeeli aktualna strona znajduje si na szczycie

hierarchii, to zastpujemy j adresem URL
zestawu ramek. Wwczas wywietlone zostan
ramki, a w nich nasza strona, tak jak
zaplanowalimy.
Wskazwka
Sposb ten jest uyteczny tylko wwczas,
Rysunek 5.5. Nasza strona poczona z rodzicem

i rodzestwem
gdy stosuje si go w niewielkich witrynach

internetowych, poniewa wymaga on, by kada
umieszczana w ramkach strona posiadaa swj
wasny plik z zestawem ramek. Rozwizanie
przydatne w przypadku wikszych witryn
przedstawimy w nastpnym przykadzie.
121
Umieszczenie strony w ramce
if (top.location == self.location) {
self.location.replace("frameset2.html");
}
Rozdzia 5.

rozwizanie dla duych witryn
Jeeli posiadamy du witryn internetow
zawierajc wiele stron, ktre powinny znajdowa
si w ramce, to stosowanie opisanego wczeniej
sposobu szybko staoby si bardzo niewygodne.
Istnieje inne rozwizanie, przydatne dla wikszych
witryn. W skrypcie 5.5 przedstawilimy definicj
ramek uywan w tym rozwizaniu, a w skrypcie 5.6
wywoywany przez niego kod JavaScript. Na
rysunku 5.6 mona zobaczy sam stron, natomiast
na rysunku 5.7 zosta przedstawiony oczekiwany
wygld wywietlanej strony. Nie prezentujemy
tu kodu HTML lewej czci strony widocznej na
rysunku 5.7 (pasek nawigacyjny) ani rwnie prostej
strony, stanowicej tre caej strony. Samo
wywoanie kodu JavaScript wyglda dokadnie
tak samo jak w skrypcie 5.5.
Skrypt 5.5. Strona z zestawem ramek wywoujca

zewntrzny kod JavaScript
Frameset//EN">
<head>
<title>Zestaw ramek witryny</title>
</head>
id="left" />
<frame src="frame3a.html" name="content"
id="content" />
</frameset>
</html>
Aby wymusi wywietlanie ramek

dla caej witryny internetowej:
1. var framesetPage = "frameset3.html";
var currPage = justTheFilename
(self.location.pathname);
Rysunek 5.6. Nasza strona bez towarzyszcych
Zaczynamy od utworzenia dwch zmiennych: ramek

framesetPage i currPage. Pierwsza z nich opisuje
stron ukadu ramek, ktr chcemy narzuci
odgrnie w caej witrynie, i dlatego otrzymuje
ona warto frameset3.html. Druga zmienna
zawiera nazw strony HTML, ktra wywoaa
ten zewntrzny plik JavaScript. Nazwa ta musi
zosta wymieniona, poniewa jzyk JavaScript
nie obejmuje funkcji, ktra byaby w stanie
zwrci tak warto. W tym celu wykorzystamy
funkcj justTheFilename(), ktra bdzie
opisywana w kroku 10.
Rysunek 5.7. Planowany przez nas wygld witryny
122

umieszczenie stron witryny w wybranych
przez nas ramkach
var framesetPage = "frameset3.html";
var currPage = justTheFilename
(self.location.pathname);
if (top.location == self.location &&
framesetPage != currPage) {
self.location.replace(framesetPage + "?" +
currPage);
}
window.onload = chgFrame;
if (currURL != linkURL) {
contentWin.location.replace(linkURL);
}
}
}
function justTheFilename(thisFile) {
if (thisFile.indexOf("/") > -1) {
thisFile = thisFile.substring
(thisFile.lastIndexOf("/")+1);
}
if (thisFile.indexOf("?") == 0) {
thisFile = thisFile.substring(1);
}
return thisFile;
}
2. if (top.location == self.location &&

framesetPage != currPage) {
self.location.replace(framesetPage +
"?" + currPage);
}
Teraz wykonywana jest typowa czynno

sprawdzajca, czy top.location ma tak sam
warto jak self.location. Tak kontrol
wykonywalimy ju wczeniej, ale tym razem
uzupenilimy j o dodatkowy warunek
sprawdzajcy: czy znajdujemy si na stronie
zestawu ramek. Jeeli tak, to wietnie, bo nie
musimy ponownie niczego adowa. Jeeli
jednak zmienna currPage nie jest stron zestawu
ramek, to znaczy, e co nie dziaa jak naley.
Musimy zatem ponownie zaadowa stron
zestawu ramek, przekazujc jej stron currPage,
tak eby trafia ona we waciwe miejsce.
3. window.onload = chgFrame;
Funkcja obsugi zdarzenia onload definiowana

jest dopiero tutaj, poniewa chcemy, eby
funkcja chgFrame() wywoywana bya przez
wszystkie strony korzystajce z zewntrznego
skryptu JavaScript.
4. function chgFrame() {
Ta funkcja sprawdza, czy (a) znajdujemy si

we waciwym zestawie ramek, (b) w adresie
URL znalaz si znak zapytania poprzedzajcy
nazw pliku. Jeeli tak, to znaczy, e plik ten
musi zosta zaadowany do ramki treci.
123
function chgFrame() {
if (top.location == self.location &&
document.location.search) {
var linkURL = justTheFilename
(document.location.search);
var contentWin = document.getElementById
("content").contentWindow;
var currURL = justTheFilename
(contentWin.location.pathname);
W tym kroku funkcji przekazujemy

warto self.location.pahtname (waciwo
przechowujc cz adresu URL znajdujc
si za nazw domeny). Na przykad jeeli
ogldalibymy stron http://www.helion.pl/
index.html, to waciwo self.location.
pathname miaaby warto /index.html. Jeeli
ogldalibymy stron http://www.helion.pl/
ksiazki/index.html, to waciwo ta miaaby
warto /ksiazki/index.html. W obu
przypadkach chodzi nam wycznie o nazw
pliku index.html, wyliczan i zwracan przez
funkcj justTheFilename().
Rozdzia 5.
5. if (top.location == self.location &&
document.location.search) {
Ponownie wykonywane s typowe czynnoci

sprawdzajce, czy top.location ma warto
identyczn z self.location. Jeeli tak, to znaczy,
e jestemy w zestawie ramek. Nastpnie
sprawdzana jest zawarto waciwoci
document.location.search. Jest to kolejne
wbudowane w jzyk pole, zawierajce cz
adresu URL zaczynajc si od znaku zapytania
(o ile taka istnieje). Jeeli takiego znaku nie ma,
to pole document.location.search bdzie puste,
co spowoduje zakoczenie funkcji.
6. var linkURL = justTheFilename

(document.location.search);
Oto pierwsza z trzech zmiennych, ktre musimy

przygotowa przed zaadowaniem nowych treci
do ramki. Najpierw zmiennej linkURL
przypisujemy nazw pliku, ktry ma zosta
zaadowany do ramki. Pomocna jest tutaj
funkcja justTheFilename(), ktrej przekazujemy
warto pola document.location.search.
7. var contentWin = document.getElementById
Zmienna contentWin musi przechowywa

informacje na temat docelowej ramki. Szukamy
zatem elementu o identyfikatorze content
i pobieramy z niego warto waciwoci
contentWindow. Opisuje on stron zaadowan
do ramki.
8. var currURL = justTheFilename
(contentWin.location.pathname);
Zmiennej currURL przypisujemy stron

HTML aktualnie zaadowan do ramki
z treci. Tutaj rwnie wykorzystywana
jest funkcja justTheFilename(), ktrej tym
razem przekazujemy warto waciwoci
contentWin.location.pathname.
124

9. if (currURL != linkURL) {
contentWin.location.replace(linkURL);
}
W tym miejscu mamy ju wszystkie potrzebne

informacje i moglibymy ponownie zaadowa
ramk z treci, ale dopisujc jeszcze jedn
instrukcj, moemy wprowadzi bardzo sprytne
rozwizanie. Po co zajmowa si adowaniem
tej samej strony, ktra aktualnie znajduje si
w ramce z treci? Wystarczy, e porwnamy
ze sob zawarto zmiennych currURL i linkURL.
Jeeli s identyczne, to nie musimy nic robi
i pozostawiamy stron bez zmian. Jeeli
jednak wartoci tych zmiennych s rne, to
wywoujemy znan nam ju metod replace().
Do omwienia pozostaa nam ju tylko funkcja

justTheFilename(). Funkcja ta pobiera cig
znakw i prbuje wyodrbni z niego nazw
pliku. Najpierw sprawdzamy, czy w cigu
znakw znajduje si znak ukonika (/). Jeeli jest,
to szukamy ostatniego ukonika w cigu (metoda
lastIndexOf()) i za nazw pliku przyjmujemy
wszystko to, co znajduje si za nim. Nastpnie
szukamy znaku zapytania. Jeeli bdzie to
pierwszy znak nazwy pliku (na pozycji zerowej),
to za nazw pliku uznajemy cay tekst od pozycji
pierwszej a do koca. Tak wyodrbniona nazwa
pliku jest zwracana do funkcji wywoujcej.
125
10. function justTheFilename(thisFile) {

if (thisFile.indexOf("/") > -1) {
thisFile = thisFile.substring
(thisFile.lastIndexOf("/")+1);
}
if (thisFile.indexOf("?") == 0) {
thisFile = thisFile.substring(1);
}
return thisFile;
}
Rozdzia 5.
Zaadowanie ramki
Zaadowanie ramki
Czsto jednej z ramek uywa si jako paska

nawigacyjnego, za pomoc ktrego rne strony
s adowane do gwnej ramki. Gwna ramka staje
si elementem docelowym dla czy znajdujcych
si w ramce nawigacyjnej. W celu zaadowania stron
do tej ramki za pomoc kodu HTML stosuje si
atrybuty target umieszczane w znacznikach <a>.
Jeeli jednak chcielibymy uywa jzyka XHTML
w wersji Strict, to jedyn metod adowania stron
do ramek jest wykorzystanie jzyka JavaScript.
Po prostu jzyk XHTML Strict nie pozwala na
stosowanie atrybutw target, a zatem trzeba w inny
sposb poda element docelowy adowania strony.
W skrypcie 5.9 pokazujemy kod zestawu ramek
w jzyku XHTML Strict, w skrypcie 5.7 dostpny
jest kod strony menu nawigacyjnego, a kod
JavaScript, wywoywany po klikniciu dowolnego
cza, zosta przedstawiony w skrypcie 5.8. Sam
stron mona zobaczy na rysunku 5.8.
Aby wyznaczy element docelowy

adowanej strony:
1. window.onload = initLinks;
Po zaadowaniu strony wywoywana jest funkcja

initLinks().
Skrypt 5.7. Jeeli w zestawie ramek uywamy jzyka

XHTML Strict, to do zdefiniowania docelowych
ramek dla czy trzeba wykorzysta jzyk JavaScript
Strict//EN">
<head>
<title>Pasek nawigacyjny</title>
<script type="text/javascript"
</head>
<body>
<h1>Pasek nawigacyjny</h1>
<h2>
<a href="frame4a.html">Strona 1</a><br />
<a href="frame4b.html">Strona 2</a><br />
<a href="frame4c.html">Strona 3</a>
</h2>
</body>
</html>
Skrypt 5.8. Ten prosty kod JavaScript cakowicie

wystarczy do wykonania tego zadania
window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.
length; i++) {
document.links[i].target = "content";
}
}
2. function initLinks() {
length; i++) {
}
}
Ta funkcja przeglda wszystkie cza na stronie.

Dla kadego znalezionego cza definiowana
jest waciwo target, ktrej przypisywany jest
cig znakw content.
Wskazwka
Jeeli jzyk JavaScript zostanie wyczony,
Rysunek 5.8. Oto ramka suca za pasek

nawigacyjny oraz strona z treci wywietlana
w osobnej ramce
to uytkownicy klikajcy dowolne cze zostan

zaskoczeni. Strona docelowa zostanie zaadowana
do ramki paska nawigacyjnego, a nie do ramki treci.
Niestety, tak dziaaj ramki w jzyku XHTML Strict.
126

Skrypt 5.9. Ten zestaw ramek aduje podstawow
stron, ktra zostanie zastpiona przez stron
wygenerowan w JavaScripcie
Skrypt 5.10. A oto nasza podstawowa strona

Transitional//EN">
<head>
<title>Ramka z treci</title>
</head>
</body>
</html>
Za pomoc JavaScriptu mona dynamicznie

generowa zawarto strony. Okazuje si to
przydatne przy adowaniu do ramek dynamicznych
danych uzalenionych od wyboru dokonanego
w innej ramce. Skrypt 5.9 tworzy zestaw ramek
i aduje do gwnej ramki podstawow stron
z treci (skrypt 5.10), natomiast opisywany
za chwil skrypt 5.11 umoliwia dynamiczne
przygotowanie rnych treci i zaadowanie ich
do gwnej ramki. Powstaje w ten sposb strona
przedstawiona na rysunku 5.9.
Skrypt 5.11. Ten skrypt tworzy stron i aduje j
do ramki przeznaczonej na tre
window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].onclick = writeContent;
document.links[i].thisPage = i+1;
}
}
function writeContent() {
var newText = "<h1>Ogldasz wanie stron
nr " + this.thisPage + ".<\/h1>";
var contentWin = parent.document.getElementById
contentWin.document.body.innerHTML = newText;
return false;
}
Rysunek 5.9. Oto wynik dziaania skryptu 5.8

strona WWW przygotowana w jzyku JavaScript.
Zawarto prawej ramki zostaa wygenerowana
przez skrypt JavaScriptu
127
Tworzenie i adowanie ramek dynamicznych

Frameset//EN">
<head>
<title>adowanie jednej ramki z poziomu
drugiej</title>
</head>
id="left" />
<frame src="frame5.html" name="content"
id="content" />
</frameset>
</html>
Tworzenie i adowanie
ramek dynamicznych
Rozdzia 5.
Aby dynamicznie zaadowa stron do ramki
z innej ramki:
1. function initLinks() {
length; i++) {
document.links[i].onclick =
writeContent;
}
Funkcja initLinks() zaczyna si tak samo jak

w skrypcie 5.8 od przejrzenia wszystkich
czy znajdujcych si na stronie. Nastpnie
do kadego cza dodawane s dwie rzeczy:
funkcja obsugujca zdarzenie onclick oraz
nowa waciwo thisPage. We waciwoci
tej zapisywany jest numer strony, ktra ma
zosta wywietlona po klikniciu cza.
I tak, cze numer 0 wywietla stron 1, cze
numer 1 stron 2 itd. Funkcj obsugujc
zdarzenie onclick wszystkich czy jest funkcja
writeContent().
2. var newText = "<h1>Ogldasz wanie stron
nr " + this.thisPage + ".<\/h1>";
var contentWin = parent.document.
getElementById("content").contentWindow;
contentWin.document.body.innerHTML =
newText;
Oto najwaniejsza cz funkcji writeContent().

Najpierw deklarowana jest zmienna newText
i przypisywany jest jej jaki tekst. Nastpnie
definiujemy zmienn contentWin, postpujc
dokadnie tak samo jak w skrypcie 5.6,
a na koniec waciwoci contentWin.document.
body.innerHTML przypisujemy warto zmiennej
newText. W ramach wyjanienia: w zmiennej
contentWin zapisujemy dokument zapisany
w ramce, wybieramy z niego element body,
a nastpnie modyfikujemy waciwo innerHTML
tego elementu.
128

3. return false;
Na koniec funkcja writeContent() zwraca

warto faszu, ktra zakazuje przegldarce
adowania dokumentu wskazywanego przez
atrybut href kliknitego cza. Bez tej instrukcji
przegldarka zastpiaby wygenerowan wanie
tre stron wskazywan przez cze, a to nie jest
ju potrzebne.
Wskazwki
HTML przegldarka moe zinterpretowa

pocztek znacznika zamykajcego (</) jako
znak koca wiersza. Lewy ukonik powoduje
wyrnienie ukonika, dziki czemu kod HTML
moe zosta prawidowo zinterpretowany.
Korzystamy tu z metody parent.document.
getElement, a nie document.getElement, ktrej
uylimy w skrypcie 5.6. Po prostu w tamtym

skrypcie kod JavaScript by wywoywany przez
stron zestawu ramek, a tutaj wywoywany jest
przez jedn ze stron umieszczonych w ramkach.
W takiej sytuacji musimy przej w hierarchii
o jeden poziom wyej (do strony zestawu ramek)
i dopiero tam zainteresowa si stron z treci
(strona potomna strony zestawu ramek).
129
Dlaczego w kroku drugim przed znakiem

ukonika (/) zosta umieszczony znak lewego
ukonika (\)? Zgodnie ze specyfikacj jzyka
Rozdzia 5.
Funkcje wsplne dla kilku ramek
Czsto stosowany jest ukad ramek, w ktrym jedna

z nich suy do nawigacji, a druga zawiera waciw
tre, ktra moe by podzielona na wiele stron. Jeli
wszystkie strony z treci korzystaj z identycznego
kodu JavaScriptu, rozsdne bdzie przeniesienie
wywoania pliku z kodem JavaScriptu na stron,
ktra jest zawsze wywietlana, zamiast przepisywania
go na wszystkich moliwych stronach z treci.
Na rysunku 5.10 wida, jak wykorzystalimy t Rysunek 5.10. Informacje po prawej stronie
tworzone s przez kod wywoywany z zestawu
opcj do udostpnienia wielu stronom funkcji,
ramek
ktra zwraca losowo wybrany baner. Definicj
ukadu ramek przedstawilimy w skrypcie 5.12.
Aby skorzysta z funkcji znajdujcej si

na innej stronie:
1. var bannerArray = new Array("images/
redBanner.gif", "images/greenBanner.gif",
"images/blueBanner.gif");
Zaczynamy od utworzenia tablicy zawierajcej

nazwy wszystkich banerw i zapisania jej
do zmiennej bannerArray.
2. window.onload = initFrames;
Po zaadowaniu strony zostanie wywoana

funkcja initFrames().
3. var leftWin = document.getElementById
("left").contentWindow.document;
Teraz zaczynamy analizowa kod funkcji

initFrames(). Na pocztku tworzona jest
zmienna leftWin, ktrej przypisujemy warto
w ten sam sposb co w poprzednich przykadach:
pobieramy element na podstawie nazwy ramki
(document.getElementbyId(left)), wybieramy
z niego waciwo contentWindow, a z niej
z kolei pobieramy obiekt document.
130

Skrypt 5.12. Ten skrypt pozwala na wspdzielenie
funkcji przez kilka ramek
var bannerArray = new Array("images/
redBanner.gif", "images/greenBanner.gif",
"images/blueBanner.gif");
window.onload = initFrames;
function initFrames() {
var leftWin = document.getElementById
for (var i=0; i<leftWin.links.length; i++)
{
leftWin.links[i].target = "content";
leftWin.links[i].onclick = resetBanner;
}
}
function setBanner() {
("content").contentWindow.document;
var randomNum = Math.floor(Math.random()
* bannerArray.length);
contentWin.getElementById("adBanner").
src = bannerArray[randomNum];
}
function resetBanner() {
setTimeout("setBanner()",1000);
}
Funkcja jest wywoywana w kontekcie

zestawu ramek, dlatego konfigurowanie czy
ze strony nawigacyjnej wyglda nieco inaczej
ni w poprzednich przykadach. Tym razem
dla kadego cza modyfikujemy zarwno
waciwo target (przypisujemy jej warto
content), jak i funkcj obsugi zdarzenia
onclick (bdzie ono obsugiwane przez
funkcj resetBanner()).
5. setBanner();
Ostatni krok inicjacji, czyli wywoanie funkcji

setBanner().
Funkcja setBanner() aduje zawarto okna

z treci i generuje liczb losow. Nastpnie
znajdujcy si na stronie baner reklamowy
zastpowany jest banerem losowo wybranym
z tablicy. Zaczynamy od tworzenia zmiennej
contentWin i przypisania jej wartoci w dokadnie
taki sam sposb jak w poprzednich przykadach:
na podstawie nazwy ramki (content) pobieramy
odpowiedni element (document.getElementById
("content")), z elementu pobieramy waciwo
contentWindow, a z niej interesujcy
na dokument.
131
setBanner();
4. for (var i=0; i<leftWin.links.length;

i++) {
leftWin.links[i].target = "content";
leftWin.links[i].onclick = resetBanner;
Rozdzia 5.
7. var randomNum = Math.floor(Math.random() *
bannerArray.length);
W tym wierszu wykorzystujemy funkcj

Math.random() i jej wynik mnoymy przez liczb
elementw zapisanych w tablicy bannerArray.
W ten sposb otrzymujemy liczb losow
z zakresu od 0 do liczby elementw w tablicy.
Nastpnie wynik jest umieszczany w zmiennej
randomNum.
8. contentWin.getElementById("adBanner").src =
bannerArray[randomNum];
Waciwoci src elementu adBanner

przypisujemy warto wylosowanego elementu
tablicy. Jest to nazwa nowego obrazka,
ktry zostanie teraz wywietlony na stronie.
9. function resetBanner() {
setTimeout("setBanner()",1000);
}
Funkcja resetBanner() ma tylko jeden wiersz

kodu, mimo to jej dziaanie moe nie by do
koca jasne. Funkcja czeka na zaadowanie
caej treci w ramce content (jedna sekunda
powinna wystarczy), a nastpnie wywouje
funkcje setBanner() w celu wybrania nowego
banera.
Jeeli funkcja setBanner() zostaaby wywoana
od razu, to mogoby si okaza, e nowa tre
ramki z content nie zostaa jeszcze zaadowana.
W takiej sytuacji na pewno pojawiyby si
problemy polegajce albo na wystpieniu bdu
(nie znaleziono elementu adBanner), albo na
dokonaniu podmiany banera na stronie, ktra
jest wanie usuwana z ramki.
Wskazwka
Prosz zauway, e funkcja resetBanner()
nie zwraca wartoci faszu. Oznacza to,

e przegldarka wykona zapisane w funkcji
zadania i zaaduje stron wskazywan przez
atrybut href. To wanie dlatego w skrypcie
definiowana jest funkcja obsugi zdarzenia
onclick i warto waciwoci target.
132
Przechowywanie informacji
w ramkach
Rysunek 5.11. Kod JavaScript informuje nas,

e stron 2 odwiedzilimy ju kilka razy
Przechowywanie informacji w ramkach
Skrypt 5.13. Zawarto znacznika <span>

zmieniana jest przez kod JavaScript
W sytuacjach podobnych do opisywanego wczeniej

przykadu mona te w wywietlanej na stae ramce
przechowywa informacje wykorzystywane przez
inne ramki. Strona z rysunku 5.11 pokazuje, ile razy
uytkownik odwiedza dan stron w ramach jednej
sesji. Kod jednej z trzech (niemal identycznych)
stron z treci prezentujemy w skrypcie 5.13. Tutaj
rwnie zewntrzny kod JavaScript (przedstawiony
w skrypcie 5.14) jest wywoywany przez stron
zestawu ramek.

Transitional//EN">
<head>
<h1>Ogldasz wanie stron nr 1.</h1>
<h2>Ta strona bya ju wywietlana
<span id="pageCt"> </span> razy.</h2>
</body>
</html>
133
Rozdzia 5.
Aby zlicza wywietlenia strony:
1. <h2>Ta strona bya ju wywietlana
<span id="pageCt"> </span> razy.</h2>
W skrypcie 5.13 znajduje si znacznik <span>

oznaczony specjalnym identyfikatorem. Jak
wida w samym znaczniku nie ma adnej treci,
ale moemy j dopisa za pomoc JavaScriptu.
Musielimy umieci w nim cho jedn spacj,
poniewa niektre przegldarki stwierdzaj,
e znacznik jest pusty, i w zwizku z tym
w ogle go nie tworz. Jeeli co ma si sta
elementem dokumentu, to musi zawiera
choby minimalny tekst.
2. var pageCount = new Array(0,0,0);
var pageArray = new Array("frame7a.html",
"frame7b.html","frame7c.html");
Na pocztku skryptu 5.14 deklarujemy dwie

tablice i wpisujemy do nich wartoci
pocztkowe.
3. for (var i=0; i<leftWin.links.length;
i++) {
leftWin.links[i].onclick = resetPageCt;
leftWin.links[i].thisPage = i;
Funkcja initFrames() zaczyna si tak samo jak

w poprzednich przykadach, ale tym razem
zdarzenie onclick bdzie obsugiwa funkcja
resetPageCt(), natomiast waciwoci thisPage
nadajemy warto zmiennej i. W ten sposb
waciwo ta otrzyma wartoci 0, 1 lub
2 w zalenoci od cza.
4. bumpPageCt(0);
Funkcja koczy si wywoaniem funkcji

bumpPageCt() i przekazaniem jej wartoci
zerowej. Podnosi ona liczb odwiedzin dla
strony pierwszej.
134
Skrypt 5.14. W tym skrypcie modyfikowana jest

warto znacznika <span> o identyfikatorze pageCt
var pageCount = new Array(0,0,0);
var pageArray = new Array("frame7a.html",
"frame7b.html","frame7c.html");
for (var i=0; i<leftWin.links.length; i++)
{
leftWin.links[i].onclick = resetPageCt;
leftWin.links[i].thisPage = i;
}
bumpPageCt(0);
}
function bumpPageCt(currPage) {
pageCount[currPage]++;
contentWin.getElementById("pageCt").
innerHTML = pageCount[currPage] + " ";
}
function resetPageCt() {
document.getElementById("content").
contentWindow.location.href =
pageArray[this.thisPage];
setTimeout("bumpPageCt
("+this.thisPage+")",1000);
return false;
}

5. function bumpPageCt(currPage) {
pageCount[currPage]++;
contentWin.getElementById("pageCt")
.innerHTML = pageCount[currPage] + " ";
}
6. function resetPageCt() {
contentWindow.location.href =
pageArray[this.thisPage];
setTimeout("bumpPageCt("+this.
thisPage+")",1000);
return false;
}
Funkcja resetPageCt() jest poczeniem

opisywanych wczeniej funkcji resetBanner()
i bumpPageCt() uzupenionych nowymi
elementami. Nie chcemy, eby przegldarka
sama zmieniaa zawarto ramki z treci,
dlatego przypisujemy jej stron na podstawie
tablicy pageArray. Po zmianie zawartoci ramki
chcemy, eby funkcja bumpPageCt()zostaa
wywoana dopiero po zakoczeniu adowania
nowej strony, a to oznacza, e musimy skorzysta
z metody setTimeout(). Na koniec zwracamy
warto faszu, poniewa adowaniem strony
zajmuje si skrypt JavaScript.
135
Funkcja bumpPageCt() pobiera numer strony

i zwiksza przypisany do niej licznik
(przechowywany w tablicy pageCount).
Ponownie pobieramy tutaj element contentWin
(czyli gwny dokument z treci umieszczony
w ramce). Nastpnie korzystamy z niego,
aby zmieni zawarto waciwoci innerHTML
elementu pageCt na liczb wywietle danej
strony.
Rozdzia 5.
adowanie kilku ramek na raz

Zmieni zawarto ramki mona za pomoc
zwykego cza z atrybutem target tak dziaa
jzyk HTML. Jednak aby zmieni jednym
klikniciem tre wielu ramek, potrzeba ju
JavaScriptu. Kod HTML przykadowych stron jest
bardzo prosty, a wszystkie operacje wykonywane
s w skrypcie 5.15. Dwa stany, jakie moe
przyjmowa okno przegldarki, przedstawione
zostay na rysunkach 5.12 i 5.13.
Aby zaadowa wiele ramek na raz:
1. function initFrames() {
for (var i=0; i<leftWin.links.length;
i++) {
leftWin.links[i].onclick = setFrames;
}
}
Funkcja initFrames() jest bardzo podobna

do tych, ktre widzielimy w poprzednich
przykadach. Wywoywana jest w ramach
zdarzenia onload i p rzeglda wszystkie cza
z ramki nawigacyjnej (tej z lewej strony). Tym
razem do obsugi zdarze onclick wybrana
zostaa funkcja setFrames().
136
Skrypt 5.15. Kod JavaScript pozwala na zaadowanie

wielu ramek po jednym klikniciu uytkownika
for (var i=0; i<leftWin.links.length;
i++) {
leftWin.links[i].onclick = setFrames;
}
}
function setFrames() {
document.getElementById("left").
contentWindow.document.location.href =
this.id + ".html";
this.href;
setTimeout("initFrames();",1000);
return false;
}

2. document.getElementById("left").
this.id + ".html";
this.href;
setTimeout("initFrames();",1000);
Rysunek 5.12. Pocztkowo strona wyglda tak
Nastpnie funkcja odczekuje sekund

(ponownie korzystamy z metody setTimeout()),
po czym wywouje funkcj initFrames().
Jest to konieczne, poniewa to wanie w niej
funkcje obsugi zdarzenia onclick przypisywane
s do poszczeglnych czy. Niestety,
po ponownym zaadowaniu strony do ramki
nawigacyjnej wszystkie wczeniejsze
przypisania przestaj obowizywa. Jeeli
cao ma dziaa tak samo jak na pocztku,
to operacje zwizane z inicjacj trzeba wykona
po kadym zaadowaniu strony ramki
nawigacyjnej.
3. return false;
Na koniec zwracamy warto faszu, tak eby

przegldarka nie musiaa si zajmowa
adowaniem nowej strony.
Wskazwka
Jeeli bdziemy szybko klika cza z paska
nawigacyjnego, to natkniemy si na do
nieoczekiwane zachowanie: strona z treci
zostanie zaadowana do ramki paska
nawigacyjnego. Po prostu strona nawigacyjna
musi zaadowa si w caoci i dopiero wtedy
moe przyjmowa kliknicia.
137
Rysunek 5.13. Po klikniciu jednego z czy

zmianie ulegaj obie ramki
Funkcja setFrames() na pocztku zmienia

zawarto lewej ramki, korzystajc przy tym
z identyfikatora kliknitego cza. Nastpnie
funkcja zmienia zawarto ramki z treci, tym
razem korzystajc z atrybutu href kliknitego
cza. Mamy dostp do tych danych z poziomu
skryptu JavaScript, wic dlaczego mielibymy
z nich nie skorzysta?
Rozdzia 5.
Praca z elementami iframe
Element iframe jest elementem wierszowym, czyli

ramk, ktra moe zosta wczona do zwykej strony
HTML, i nie musi by czci zestawu ramek.
Podobnie jak w przypadku zwyczajnej ramki,
element iframe jest cakowicie niezalenym
dokumentem HTML. Na elemencie tym mog
pracowa powizane ze stron skrypty, a zatem
mona za ich pomoc dynamicznie generowa
zawarto takiej ramki, bez koniecznoci stosowania
caego zestawu ramek.
W tym przykadzie jedn ze stron HTML
umiecimy w czci wydzielonej dla treci, ktra
zostanie zamknita w elemencie iframe. Zawarto
tego elementu bdzie generowana za pomoc
JavaScriptu. Skrypt 5.16 tworzy gwn stron
wywietlan w przegldarce. Skrypt 5.17 jest tylko
tymczasowym dokumentem HTML adowanym
do elementu iframe. Wywietla on tylko komunikat
Prosz zaadowa stron, ktry mona zobaczy
na rysunku 5.14. Zawarto strony przygotowywana
jest przez kod zaprezentowany w skrypcie 5.18.
W momencie gdy uytkownik kliknie jedno z czy,
kod JavaScript wpisze do elementu iframe now
tre strony. W tym przypadku wywietlana jest
tylko nazwa strony oraz liczba odwiedzin strony
w ramach jednej sesji. Jak wida, wiksza cz
tego skryptu zostaa zbudowana z kodu, ktry
wykorzystywalimy ju w poprzednich
przykadach.
138
Skrypt 5.16. Ta strona tworzy ramk typu iframe

i wywouje zewntrzny kod JavaScript
Transitional//EN">
<head>
<title>Ramki iframe</title>
</head>
<iframe src="frame9b.html" width="550"
height="300" name="content" id="content"
align="right" frameborder="1">Twoja
przegldarka nie obsuguje ramek Iframe
</iframe>
<h1>pasek nawigacyjny</h1>
<h2>
<a href="page1.html">Strona 1</a><br />
<a href="page2.html">Strona 2</a><br />
<a href="page3.html">Strona 3</a>
</h2>
</body>
</html>
Skrypt 5.17. Pocztkowa strona umieszczana

w ramce iframe
Transitional//EN">
<head>
</head>
Prosz zaadowa stron
</body>
</html>

Skrypt 5.18. Ten skrypt generuje zawarto ramki
iframe i zapisuje j do odpowiedniego okna
var pageCount = new Array(0,0,0,0);
for (var i=0; i<document.links.length;
i++) {
document.links[i].onclick =
writeContent;
}
}
function writeContent() {
pageCount[this.thisPage]++;
var contentWin =
contentWindow.document;
contentWin.body.innerHTML = newText;
return false;
}
1. <iframe src="frame9b.html" width="550"

height="300" name="content" id="content"
align="right" frameborder="1">Twoja
przegldarka nie obsuguje ramek Iframe
</iframe>
W skrypcie 5.16 znacznik <iframe> informuje

przegldark, e pocztkowo dokumentem
wywietlanym w ramce bdzie plik
frame9b.html. Wewntrz znacznika zapisany
jest te komunikat, ktry bdzie wywietlany
przez przegldarki nieobsugujce ramek iframe.
2. function writeContent() {
Tworzymy funkcj o nazwie writeContent,

ktrej uywa bdziemy do tworzenia treci
umieszczanych w elemencie iframe.
3. pageCount[this.thisPage]++;
Ten wiersz zwiksza licznik w tablicy pageCount,

dziki czemu wiadomo, ile razy odwiedzilimy
poszczeglne strony.
4. var newText = "<h1>Ogldasz wanie stron
nr " + this.thisPage;
newText += ".<br \/>Strona ta zostaa
wywietlona ju ";
newText += pageCount[this.thisPage]
+ " razy.<\/h1>";
Te wiersze tworz tre, ktra jest wpisywana

do ramki iframe.
Rysunek 5.14. W znajdujcej si po prawej stronie

ramce iframe pocztkowo wywietlana jest tylko
proba o kliknicie jednego z czy
139
var newText = "<h1>Ogldasz wanie stron

nr " + this.thisPage;
newText += ".<br \/>Strona ta zostaa
wywietlona ju ";
newText += pageCount[this.thisPage]
+ " razy.<\/h1>";
Aby przygotowa zawarto ramki iframe:
Rozdzia 5.
contentWin.body.innerHTML = newText;
return false;
Podobnie jak w poprzednich przykadach,

pobieramy element contentWin i modyfikujemy
waciwo innerHTML znajdujcego si w nim
znacznika body. W ramach tej zmiany wpisujemy
dwa wiersze tekstu, ktre mona zobaczy na
rysunku 5.15. To wszystko, co chcemy wykona Rysunek 5.15. Przy kadym klikniciu cza na
w tej funkcji, wic na koniec zwracamy warto pasku nawigacyjnym zmieniana jest zawarto
faszu, eby zwolni przegldark z obowizku ramki iframe
adowania strony.
Wskazwka
Prosz zauway, e tym razem do ramki
zapisujemy dane z poziomu strony niebdcej

w zestawie ramek i dlatego moemy skorzysta
z instrukcji document.getElementById("content"),
a nie parent.document.getElementById
("content"), tak jak w poprzednich przykadach.
Po prostu ramka iframe jest elementem
potomnym gwnej strony, dziki czemu
moemy si do niego odwoywa bezporednio.
140

Skrypt 5.19. Ten skrypt aduje strony HTML
do ramki iframe
window.onload = initiFrame;
function initiFrame() {
for (var i=0; i<document.links.length;
i++) {
document.links[i].onclick = setiFrame;
}
}
function setiFrame() {
this.href;
return false;
}
adowanie ramek iframe

za pomoc JavaScriptu
Oczywicie, nie mamy obowizku wypeniania
ramek iframe za pomoc skryptw JavaScript.
Rwnie dobrze moemy adowa do nich osobne
dokumenty HTML. W tym przykadzie pokaemy
sposb takiego postpowania. Ponownie tworzymy
stron gwn zawierajc ramk iframe (praktycznie
dokadnie tak sam jak ta ze skryptu 5.16).
Oczywicie, przygotowa sobie musimy te stron
z pocztkow zawartoci ramki, podobn do tej
ze skryptu 5.17. Oprcz tego tworzymy te trzy
niezalene strony HTML (ich kod nie bdzie
prezentowany), ktre bd adowane do ramki
iframe za pomoc skryptu 5.19.
1. function setiFrame() {
this.href;
return false;
}
Rysunek 5.16. Zawarto ramki iframe jest adowana
po klikniciu cza z paska nawigacyjnego.
Podobnie jak w skrypcie 5.12 definiujemy we

wszystkich czach waciwo target oraz
funkcje obsugi zdarzenia onclick. W tym
przykadzie kliknicie dowolnego cza
wywouje funkcj setiFrame(), ktra aduje
now stron do ramki iframe (rysunek 5.16).
141
adowanie ramek iframe
Aby zaadowa ramk iframe

za pomoc JavaScriptu:

Po Prostu JavaScript I Ajax. Wydanie VI

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Po Prostu JavaScript I Ajax. Wydanie VI

Uploaded by

Copyright:

Available Formats

Po prostu JavaScript

Bezproblemowe wprowadzenie do jzyka JavaScript

Podstawy jzyka JavaScript

Pierwsze spotkanie z JavaScriptem

Czym jest JavaScript? .......................................................................................... 16

Gdzie umieszcza skrypty .................................................................................... 37

W kko, w ptli ................................................................................................... 60

Podmieniane obrazki ............................................................................................ 85

Ramki, ramki i jeszcze raz ramki

Zapobieganie wywietleniu strony w ramce ..................................................... 119

Praca z oknami przegldarki

Otwieranie nowego okna ................................................................................... 144

Nawigacja wybierz i przejd .......................................................................... 171

Formularze i wyraenia regularne

Sprawdzanie adresw e-mail za pomoc wyrae regularnych ....................... 211

Obsuga zdarze okien ....................................................................................... 234

Pieczemy pierwsze ciasteczko ........................................................................... 259

Powiedz to ze stylem .......................................................................................... 279

Obiekty i model DOM

Kilka sw o manipulacji wzami ..................................................................... 296

Tworzenie dynamicznych stron

Wpisywanie aktualnej daty na stronie WWW .................................................. 314

Stosowanie wysuwanych menu ......................................................................... 336

Wprowadzenie do technologii Ajax

Ajax: o co tu chodzi? ........................................................................................... 373

Zestawy narzdziowe AJAX

Przeciganie i upuszczanie elementw strony .................................................. 405

JavaScript genealogia i kompendium

Wersje JavaScriptu ............................................................................................ 458

Sowa kluczowe jzyka JavaScript

Kaskadowe arkusze stylw

Gdzie mona dowiedzie si wicej

Znajdowanie pomocy w sieci ............................................................................. 500

Pierwsza skryptozakadka .................................................................................. 434

Ramki, ramki i jeszcze raz ramki

Rysunek 5.1. Ukad zestawu ramek skadajcego

Zestaw ramek skada si z co najmniej trzech

Podstawy HTML Ramki

Wymiary kolumn poszczeglnych ramek (proporcjonalne lub stae) podawane w pikselach.

Stosowany w jzyku JavaScript do odwoywania si do jednej ze stron w zestawie ramek.

Inna metoda pozwalajca jzykowi JavaScript odwoywa si do jednej ze stron w zestawie

Adres URL strony, ktra ma si pojawi w tej ramce.

Ramka wewntrzna, wywietlana wewntrz wywoujcej j strony HTML.

Stosowany w jzyku JavaScript do odwoywania si do stron w ramkach.

Inna metoda pozwalajca jzykowi JavaScript odwoywa si do stron w ramkach.

Adres URL strony, ktra ma si pojawi w ramce.

Szeroko ramki okrelana w pikselach lub w procentach.

Wysoko ramki okrelana w pikselach lub w procentach.

Wyrwnuje ramk do lewej lub do prawej strony.

Wywietla obramowanie wok ramki.

Ramki, ramki i jeszcze raz ramki

Zapobieganie wywietleniu strony

Rysunek 5.2. Nasza strona jako cz strony

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Skrypt 5.2. Kod JavaScript wymuszajcy

Zapobieganie wywietleniu strony w ramce

Skrypt 5.1. Oto kod HTML strony, ktr chcemy

Inne osoby mog umieci nasz stron w ramce

Najpierw sprawdzamy, czy aktualna strona

Zapobieganie wywietleniu strony w ramce

Jeli aktualna strona nie znajduje si na szczycie

ale takie postpowanie miaoby pewien niemiy

Rysunek 5.3. Nasza strona po udanej ucieczce