Po prostu JavaScript i Ajax. Wydanie VI

Wydawnictwo Helionul. Koœciuszki 1c44-100 Gliwicetel. 032 230 98 63e-mail: [email protected]

Po prostu JavaScripti Ajax. Wydanie VI

Bezproblemowe wprowadzenie do jêzyka JavaScript

• Chcesz budowaæ bardziej interaktywne witryny internetowe?• Chcesz zobaczyæ, jak dynamicznie manipulowaæ elementami stron?• Chcesz dowiedzieæ siê, jak ulepszyæ interfejs u¿ytkownika za pomoc¹ technologii Ajax?

W ¿yciu ka¿dego webmastera nadchodzi moment, w którym zwyk³y kod HTML oraz arkusze CSS ju¿ nie wystarczaj¹ i pora poszukaæ bardziej zaawansowanych narzêdzi. Jeœli siêgn¹³eœ po tê ksi¹¿kê, prawdopodobnie pragniesz te¿ tchn¹æ w swe witryny wiêcej ¿ycia i dynamiki. Naturaln¹ drog¹ rozwoju jest nauka jêzyka JavaScript, który umo¿liwia budowanie bardziej interaktywnych i efektownych stron internetowych. A skoro ju¿ zaczniesz poznawaæ ten jêzyk, dlaczego nie wypróbowaæ bazuj¹cej na nim technologii Ajax, która pozwala tworzyæ jeszcze ciekawsze i bardziej wygodne interfejsy u¿ytkownika.

Dziêki ksi¹¿ce „o prostu JavaScript i Ajax. Wydanie VI” b³yskawicznie nauczysz siê wykorzystywaæ JavaScript do poprawy jakoœci w³asnych witryn internetowych. Poznasz podstawy sk³adni tego jêzyka, sposoby zagnie¿d¿ania skryptów w kodzie HTML, techniki dynamicznego manipulowania rozmaitymi elementami stron internetowych oraz reagowania na zdarzenia zachodz¹ce w przegl¹darce. Dowiesz siê te¿, do czego s³u¿y technologia Ajax oraz jak wykorzystaæ jej mo¿liwoœci do tworzenia efektownych i szybkich interfejsów u¿ytkownika.

• Podstawy jêzyka JavaScript• Dodawanie rysunków i animacji• Korzystanie z ramek• Sterowanie oknami przegl¹darki• Stosowanie formularzy• Obs³uga zdarzeñ• U¿ywanie ciasteczek• Stosowanie arkuszy CSS• Manipulowanie modelem DOM• Korzystanie z technologii Ajax• Tworzenie skryptozak³adek

Poznaj praktyczne zastosowania jêzyka JavaScript i twórz lepsze witryny internetowe

Autorzy: Tom Negrino, Dori SmithT³umaczenie: Wojciech Moch, £ukasz OrzechowskiISBN: 978-83-246-0839-3Tytu³ orygina³u: JavaScript and Ajax for the Web,Sixth Edition: Visual QuickStart Guide (6th Edition)Format: B5, stron: 524

http://helion.pl/view/2547w



http://helion.pl/add/2547w/ppjsaj




mailto:[email protected]

http://helion.pl/view/2547w/ppjsaj.htm

http://www.amazon.com/exec/obidos/ASIN/0321430328/eboinf-20

http://www.amazon.com/exec/obidos/ASIN/0321430328/eboinf-20

5

Spis treści

Spis treści

Wprowadzenie 11

Rozdział 1. Pierwsze spotkanie z JavaScriptem 15Czym jest JavaScript? .......................................................................................... 16JavaScript to nie Java ........................................................................................... 17Skąd się wziął język JavaScript ............................................................................ 19Co potrafi JavaScript ............................................................................................ 20Czego JavaScript nie zrobi .................................................................................. 21Czym jest Ajax? .................................................................................................... 22Język obiektowy ................................................................................................... 25Obsługa zdarzeń ................................................................................................... 28Wartości i zmienne .............................................................................................. 29Przypisania i porównania ..................................................................................... 30Tworzenie kodu HTML na potrzeby JavaScriptu .............................................. 31Potrzebne narzędzia ............................................................................................. 34

Rozdział 2. Zaczynamy! 35Gdzie umieszczać skrypty .................................................................................... 37Kilka słów o funkcjach ......................................................................................... 39Stosowanie zewnętrznych skryptów .................................................................... 40Wstawianie komentarzy do skryptów .................................................................. 43Komunikaty dla użytkownika .............................................................................. 45Potwierdzanie wyboru dokonanego przez użytkownika .................................... 47Pobieranie tekstu od użytkownika ....................................................................... 49Przekierowanie użytkownika za pomocą łącza ................................................... 51Stosowanie JavaScriptu do rozbudowy łączy ...................................................... 53Praca ze stronami kierującymi ............................................................................. 56

Rozdział 3. Podstawy języka 59W kółko, w pętli ................................................................................................... 60Przekazywanie wartości do funkcji ...................................................................... 65Wykrywanie obiektów ......................................................................................... 67Praca z tablicami .................................................................................................. 69Praca z funkcjami zwracającymi wartość ............................................................ 71

Spis treści

Spis treści

6

Spis

treśc

i

Aktualizowanie tablic ........................................................................................... 72Stosowanie pętli do/while .................................................................................... 74Wywoływanie skryptu na kilka różnych sposobów ............................................ 76Tworzenie wielopoziomowych instrukcji warunkowych ................................... 78Obsługa błędów ................................................................................................... 81

Rozdział 4. Praca z obrazami 83Podmieniane obrazki ............................................................................................ 85Lepsza technika podmiany obrazków ................................................................. 87Tworzenie przycisków trójstanowych ................................................................. 95Podmiana obrazków poprzez łącze ...................................................................... 97Podmienianie obrazka z różnych łączy ............................................................. 100Podmienianie wielu obrazków z jednego łącza ................................................ 102Tworzenie animowanych banerów .................................................................... 106Dodawanie łączy do animowanych banerów .................................................... 108Prezentacje ......................................................................................................... 110Losowe wyświetlanie obrazków ........................................................................ 113Cykliczna zmiana obrazów z losowym obrazem początkowym ....................... 115

Rozdział 5. Ramki, ramki i jeszcze raz ramki 117Zapobieganie wyświetleniu strony w ramce ..................................................... 119Umieszczenie strony w ramce ........................................................................... 121Umieszczenie strony w ramce — rozwiązanie dla dużych witryn ................... 122Załadowanie ramki ............................................................................................. 126Tworzenie i ładowanie ramek dynamicznych ................................................... 127Funkcje wspólne dla kilku ramek ...................................................................... 130Przechowywanie informacji w ramkach ............................................................ 133Ładowanie kilku ramek na raz ........................................................................... 136Praca z elementami iframe ................................................................................ 138Ładowanie ramek iframe za pomocą JavaScriptu ............................................. 141

Rozdział 6. Praca z oknami przeglądarki 143Otwieranie nowego okna ................................................................................... 144Zmiana zawartości nowego okna ....................................................................... 148Otwieranie wielu okien ...................................................................................... 150Jednoczesne otwieranie wielu okien ................................................................. 152Aktualizowanie okna z poziomu innego okna ................................................... 154Tworzenie nowych stron przy użyciu JavaScriptu ........................................... 157Zamykanie okna ................................................................................................. 160Określanie pozycji okna na ekranie ................................................................... 163Przesuwanie okna w wybrane miejsce .............................................................. 166

Spis treści

7

Spis treści

Rozdział 7. Obsługa formularzy 169Nawigacja „wybierz i przejdź” .......................................................................... 171Dynamiczne modyfikowanie menu ................................................................... 176Tworzenie pól wymaganych .............................................................................. 179Wzajemne sprawdzanie wartości pól ................................................................ 184Wyróżnianie problematycznych pól .................................................................. 186Praktyczne wykorzystanie kontroli formularzy ................................................. 189Praca z przyciskami opcji ................................................................................... 193Wzajemne ustawianie wartości pól ................................................................... 196Sprawdzanie kodów pocztowych ....................................................................... 199Sprawdzanie adresów e-mail ............................................................................. 203

Rozdział 8. Formularze i wyrażenia regularne 209Sprawdzanie adresów e-mail za pomocą wyrażeń regularnych ....................... 211Sprawdzanie nazwy pliku .................................................................................. 216Wydobywanie ciągów znaków ........................................................................... 218Formatowanie ciągów znaków ........................................................................... 221Formatowanie i sortowanie ciągów znaków ..................................................... 225Formatowanie i sprawdzanie poprawności ciągów znaków ............................. 227Podmiana elementów za pomocą wyrażenia regularnego ................................ 230

Rozdział 9. Obsługa zdarzeń 233Obsługa zdarzeń okien ....................................................................................... 234Obsługa zdarzeń myszy ..................................................................................... 242Obsługa zdarzeń formularzy .............................................................................. 250Obsługa zdarzeń klawiatury .............................................................................. 254

Rozdział 10. JavaScript i ciasteczka 257Pieczemy pierwsze ciasteczko ........................................................................... 259Odczytywanie ciasteczka ................................................................................... 262Wyświetlanie ciasteczek .................................................................................... 263Wykorzystanie ciasteczek jako liczników .......................................................... 265Usuwanie ciasteczek .......................................................................................... 268Obsługa wielu ciasteczek ................................................................................... 270Informowanie o nowościach na stronie ............................................................. 272

Rozdział 11. Wprowadzenie do CSS 277Powiedz to ze stylem .......................................................................................... 279Style z klasą ........................................................................................................ 282Zmiana czcionek za pomocą stylów CSS .......................................................... 284

Spis treści

8

Spis

treśc

i

Kontrola identyfikatorów ................................................................................... 285Rozróżnianie łączy ............................................................................................. 287Osadzanie styli w stylach ................................................................................... 289Umieszczanie obrazków w tle ........................................................................... 291Pozycjonowanie bezwzględne ........................................................................... 293

Rozdział 12. Obiekty i model DOM 295Kilka słów o manipulacji węzłami ..................................................................... 296Dodawanie węzłów ............................................................................................ 298Usuwanie węzłów .............................................................................................. 300Usuwanie określonego węzła ............................................................................. 302Wstawianie węzłów ............................................................................................ 306Podmiana węzłów .............................................................................................. 309

Rozdział 13. Tworzenie dynamicznych stron 313Wpisywanie aktualnej daty na stronie WWW .................................................. 314Manipulowanie dniami ...................................................................................... 316Dostosowywanie wiadomości do pory dnia ...................................................... 317Wyświetlanie dat według strefy czasowej ......................................................... 318Konwersja czasu 24-godzinnego na 12-godzinny ............................................. 324Odliczanie ........................................................................................................... 326Przenoszenie obiektu w dokumencie ................................................................ 330Metody obiektu Date ......................................................................................... 333

Rozdział 14. JavaScript w akcji 335Stosowanie wysuwanych menu ......................................................................... 336Dodawanie menu rozwijanych .......................................................................... 339Pokaz slajdów z podpisami ................................................................................ 344Generator dziwnych imion ................................................................................ 348Generator wykresów słupkowych ..................................................................... 354Podmiany arkuszy stylów ................................................................................... 362

Rozdział 15. Wprowadzenie do technologii Ajax 371Ajax: o co tu chodzi? ........................................................................................... 373Odczytywanie danych z serwera ....................................................................... 377Analizowanie danych z serwera ......................................................................... 385Odświeżanie danych z serwera .......................................................................... 389Podgląd łączy w technologii Ajax ...................................................................... 392Automatyczne uzupełnienie pól formularza ..................................................... 396

Spis treści

9

Spis treści

Rozdział 16. Zestawy narzędziowe AJAX 403Przeciąganie i upuszczanie elementów strony .................................................. 405Wstawianie kalendarza ...................................................................................... 411Wstawianie na strony podwójnego kalendarza ................................................. 415Stosowanie kontenerów ..................................................................................... 421Dodawanie efektów animacji ............................................................................. 426Implementowanie kontrolki dziennika dla celów debugowania ...................... 429

Rozdział 17. Skryptozakładki 433Pierwsza skryptozakładka .................................................................................. 434Zmiana koloru tła strony .................................................................................... 439Zmiana stylów strony ......................................................................................... 440Bezpieczne kolory stron WWW ........................................................................ 442Wyszukiwanie słów ............................................................................................ 444Przeglądanie obrazków ...................................................................................... 447Wyświetlanie znaków z zestawu ISO Latin ...................................................... 449Konwersja wartości RGB do postaci szesnastkowej ......................................... 450Konwersja wartości ............................................................................................ 452Kalkulator skryptozakładkowy ........................................................................... 453Sprawdzanie poprawności stron ........................................................................ 455

Dodatek A JavaScript — genealogia i kompendium 457Wersje JavaScriptu ............................................................................................ 458ECMAScript ....................................................................................................... 461Przeglądarki i JavaScript .................................................................................... 463Diagram obiektów .............................................................................................. 464Wielka tabela obiektów ...................................................................................... 469

Dodatek B Słowa kluczowe języka JavaScript 487

Dodatek C Kaskadowe arkusze stylów 491

Dodatek D Gdzie można dowiedzieć się więcej 499Znajdowanie pomocy w sieci ............................................................................. 500Książki ................................................................................................................ 506

Skorowidz 509

117

Rozdział 5. Ramki, ramki i jeszcze raz ramki

Rysunek 5.1. Układ zestawu ramek składającegosię z dwóch ramek: lewej ramki oraz ramki treści

Ramki to jeden z najbardziej efektywnychelementów HTML, choć w ostatnich latach dośćmocno wypadły z łask twórców stron WWW.W tym rozdziale opisujemy, jak ujarzmić jeza pomocą JavaScriptu i jeszcze bardziejrozszerzyć ich możliwości.

Zestaw ramek składa się z co najmniej trzechdokumentów HTML. Pierwszy z nich nazwanyframeset, czyli właśnie zestaw ramek, zawieraustawienia wszystkich ramek potomnych. W kodzieJavaScriptu, odwołując się do niego, korzystamyz nazwy top lub parent. Pozostałe strony, nazywanestronami potomnymi, dostosowują się do układustworzonego przez zestaw ramek. Stronom tymmożna przypisywać dowolne nazwy. Rysunek 5.1przedstawia zestaw ramek z dwoma ramkamipotomnymi o nazwie menu i treść.

Ramki, ramkii jeszcze raz ramki

Ramki, ram

ki i jeszcze raz ramki

Rozdział 5.

118

Pods

taw

y H

TML

— R

amki

Tabela 5.1. Podstawy HTML — Ramki

Znacznik Atrybut Znaczenie

frameset Określa, że strona składa się z dwóch lub więcej stron umieszczonych w ramkach. Zawieraznaczniki <frame>, które definiują poszczególne strony.

cols Wymiary kolumn poszczególnych ramek (proporcjonalne lub stałe) podawane w pikselach.

frame Opisuje położenie i atrybuty strony w ramce.

id Stosowany w języku JavaScript do odwoływania się do jednej ze stron w zestawie ramek.

name Inna metoda pozwalająca językowi JavaScript odwoływać się do jednej ze stron w zestawieramek.

src Adres URL strony, która ma się pojawić w tej ramce.

iframe Ramka wewnętrzna, wyświetlana wewnątrz wywołującej ją strony HTML.

id Stosowany w języku JavaScript do odwoływania się do stron w ramkach.

name Inna metoda pozwalająca językowi JavaScript odwoływać się do stron w ramkach.

src Adres URL strony, która ma się pojawić w ramce.

width Szerokość ramki określana w pikselach lub w procentach.

height Wysokość ramki określana w pikselach lub w procentach.

align Wyrównuje ramkę do lewej lub do prawej strony.

framebodrer Wyświetla obramowanie wokół ramki.

Ramki, ramki i jeszcze raz ramki

119

Rysunek 5.2. Nasza strona jako część stronyinnej osoby

Skrypt 5.1. Oto kod HTML strony, którą chcemyzabezpieczyć

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

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Nie może znaleźć się

w ramce</title> <script language="javascript"

type="text/javascript"src="script01.js"></script>

</head><body bgcolor="#FFFFFF"> <h1>Bardzo ważna strona, którą każdy

chciałby mieć dla siebie.</h1></body></html>

Skrypt 5.2. Kod JavaScript wymuszającywyświetlanie naszej strony w osobnym oknie

if (top.location != self.location) { top.location.replace(self.location);}

Zapobieganie wyświetleniu stronyw ramceInne osoby mogą umieścić naszą stronę w ramcebędącej częścią ich witryny, stwarzając wrażenie,że stanowi ona część ich serwisu WWW.W JavaScripcie okna są ułożone w strukturzehierarchicznej, na szczycie której znajduje się oknoparent. Jeśli ktoś próbuje „uprowadzić” naszą stronę,oznacza to, że wyświetla ją w ramce potomnejw stosunku do swojego okna parent. Na rysunku5.2 można zobaczyć, jak wyglądałaby nasza stronajako część czyjejś witryny. Za pomocą skryptu 5.1i 5.2 można zapobiec takiej sytuacji i zmusićprzeglądarkę do tego, aby nasza strona zawsze byławyświetlana w osobnym oknie. Skrypt 5.1 zawierakod strony HTML, którą chcemy w ten sposóbzabezpieczyć (proszę zwrócić uwagę na znacznik<script>). Z kolei skrypt 5.2 zawiera kod JavaScript,którym zajmiemy się za chwilę.

Zapobieganie wyśw

ietleniu strony w ram

ce

Rozdział 5.

120

Aby odizolować stronę WWW: 1. if (top.location != self.location) {

Najpierw sprawdzamy, czy aktualna strona(self) znajduje się na szczycie hierarchii okienprzeglądarki. Jeśli tak, to nie ma potrzeby,aby cokolwiek robić.

2. top.location.replace(self.location);

Jeśli aktualna strona nie znajduje się na szczyciehierarchii, to przypisujemy aktualną stronędo szczytu. Sprawi to, że nasza strona zostaniewyświetlona samodzielnie. Na rysunku 5.3zobaczyć można stronę, tak jak planowaliśmy— w osobnym oknie.

Wskazówka

Moglibyśmy po prostu przypisać wartośćtop.location do właściwości self.location,ale takie postępowanie miałoby pewien niemiłyefekt uboczny: użytkownik nie mógłbyskorzystać w przeglądarce z przycisku Wstecz.Naciśnięcie tego przycisku powodowałobyautomatyczny powrót do bieżącej strony. Dziękizastosowaniu metody replace() podmieniamypo prostu aktualną stronę w historii, dziękiczemu przycisk Wstecz może działać bezżadnych komplikacji.

Rysunek 5.3. Nasza strona po udanej „ucieczce”z innej strony

Zapo

bieg

anie

wyś

wie

tleni

u st

rony

w r

amce


121

Skrypt 5.3. Strona z zestawem ramek

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

<html xmlns="http://www.w3.org/1999/xhtml"><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>

Skrypt 5.4. Kod JavaScript wymuszającywyświetlenie strony w ramkach

if (top.location == self.location) { self.location.replace("frameset2.html");}

Rysunek 5.4. Samotna strona w oknie przeglądarki

Rysunek 5.5. Nasza strona połączona z rodzicemi rodzeństwem

Umieszczenie strony w ramceAutomatyczne programy katalogujące stronyinternetowe nie wiedzą, że strony te stanowią częśćzestawu ramek. Gdy użytkownik odnajdzie jednąz naszych stron za pośrednictwem wyszukiwarkiinternetowej, to kliknięcie łącza zaprowadzi go dopojedynczej strony, a nie do strony będącej częściązestawu ramek, tak jak to sobie zaplanowaliśmy.Skrypt 5.3 zawiera kod HTML strony z zestawemramek. Strona, którą użytkownik otrzymał odprzeglądarki, zawiera wywołanie skryptu JavaScript(podobnie jak w skrypcie 5.1). Skrypt 5.4demonstruje, jak wyświetlić stronę w ramce, nawetjeśli o ramkach nie „wie” Google czy też innawyszukiwarka internetowa. Na rysunku 5.4 możnazobaczyć stronę wyświetloną nieprawidłowo, a narysunku 5.6 — stronę poprawnie umieszczonąw ramkach.

Aby wymusić wyświetlanie strony w ramce: 1. if (top.location == self.location) {

Sprawdzamy, czy aktualna strona (self)znajduje się na szczycie hierarchii. Jeżeli nie,to znaczy, że jest wyświetlana w zestawie ramek.

2. top.location.replace("frameset2.html");

Jeżeli aktualna strona znajduje się na szczyciehierarchii, to zastępujemy ją adresem URLzestawu ramek. Wówczas wyświetlone zostanąramki, a w nich nasza strona, tak jakzaplanowaliśmy.

Wskazówka

Sposób ten jest użyteczny tylko wówczas,gdy stosuje się go w niewielkich witrynachinternetowych, ponieważ wymaga on, by każdaumieszczana w ramkach strona posiadała swójwłasny plik z zestawem ramek. Rozwiązanieprzydatne w przypadku większych witrynprzedstawimy w następnym przykładzie.

Um

ieszczenie strony w ram

ce

Rozdział 5.

122

Umieszczenie strony w ramce— rozwiązanie dla dużych witrynJeżeli posiadamy dużą witrynę internetowązawierającą wiele stron, które powinny znajdowaćsię w ramce, to stosowanie opisanego wcześniejsposobu szybko stałoby się bardzo niewygodne.Istnieje inne rozwiązanie, przydatne dla większychwitryn. W skrypcie 5.5 przedstawiliśmy definicjęramek używaną w tym rozwiązaniu, a w skrypcie 5.6— wywoływany przez niego kod JavaScript. Narysunku 5.6 można zobaczyć samą stronę, natomiastna rysunku 5.7 został przedstawiony oczekiwanywygląd wyświetlanej strony. Nie prezentujemytu kodu HTML lewej części strony widocznej narysunku 5.7 (pasek nawigacyjny) ani równie prostejstrony, stanowiącej treść całej strony. Samowywołanie kodu JavaScript wygląda dokładnietak samo jak w skrypcie 5.5.

Aby wymusić wyświetlanie ramekdla całej witryny internetowej:

1. var framesetPage = "frameset3.html";var currPage = justTheFilename(self.location.pathname);

Zaczynamy od utworzenia dwóch zmiennych:framesetPage i currPage. Pierwsza z nich opisujestronę układu ramek, którą chcemy narzucićodgórnie w całej witrynie, i dlatego otrzymujeona wartość frameset3.html. Druga zmiennazawiera nazwę strony HTML, która wywołałaten zewnętrzny plik JavaScript. Nazwa ta musizostać wymieniona, ponieważ język JavaScriptnie obejmuje funkcji, która byłaby w staniezwrócić taką wartość. W tym celu wykorzystamyfunkcję justTheFilename(), która będzieopisywana w kroku 10.

Skrypt 5.5. Strona z zestawem ramek wywołującazewnętrzny kod JavaScript


<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Zestaw ramek witryny</title> <script language="javascript"


</head><frameset cols="30%,70%"> <frame src="left3.html" name="left"

id="left" /> <frame src="frame3a.html" name="content"


Rysunek 5.6. Nasza strona bez towarzyszącychramek

Rysunek 5.7. Planowany przez nas wygląd witryny

Um

iesz

czen

ie s

tron

y w

ram

ce


123

Skrypt 5.6. Kod JavaScript wymuszającyumieszczenie stron witryny w wybranychprzez 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;

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);

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;}

W tym kroku funkcji przekazujemywartość self.location.pahtname (właściwośćprzechowującą część adresu URL znajdującąsię za nazwą domeny). Na przykład jeżelioglądalibyśmy stronę http://www.helion.pl/index.html, to właściwość self.location.pathname miałaby wartość /index.html. Jeżelioglądalibyśmy stronę http://www.helion.pl/ksiazki/index.html, to właściwość ta miałabywartość /ksiazki/index.html. W obuprzypadkach chodzi nam wyłącznie o nazwępliku index.html, wyliczaną i zwracaną przezfunkcję justTheFilename().

2. if (top.location == self.location &&framesetPage != currPage) {

self.location.replace(framesetPage + "?" + currPage);}

Teraz wykonywana jest typowa czynnośćsprawdzająca, czy top.location ma taką samąwartość jak self.location. Taką kontrolęwykonywaliśmy już wcześniej, ale tym razemuzupełniliśmy ją o dodatkowy waruneksprawdzający: czy znajdujemy się na stroniezestawu ramek. Jeżeli tak, to świetnie, bo niemusimy ponownie niczego ładować. Jeżelijednak zmienna currPage nie jest stroną zestawuramek, to znaczy, że coś nie działa jak należy.Musimy zatem ponownie załadować stronęzestawu ramek, przekazując jej stronę currPage,tak żeby trafiła ona we właściwe miejsce.

3. window.onload = chgFrame;

Funkcja obsługi zdarzenia onload definiowanajest dopiero tutaj, ponieważ chcemy, żebyfunkcja chgFrame() wywoływana była przezwszystkie strony korzystające z zewnętrznegoskryptu JavaScript.

4. function chgFrame() {

Ta funkcja sprawdza, czy (a) znajdujemy sięwe właściwym zestawie ramek, (b) w adresieURL znalazł się znak zapytania poprzedzającynazwę pliku. Jeżeli tak, to znaczy, że plik tenmusi zostać załadowany do ramki treści.

Um


ce

Rozdział 5.

124

5. if (top.location == self.location &&document.location.search) {

Ponownie wykonywane są typowe czynnościsprawdzające, czy top.location ma wartośćidentyczną z self.location. Jeżeli tak, to znaczy,że jesteśmy w zestawie ramek. Następniesprawdzana jest zawartość właściwościdocument.location.search. Jest to kolejnewbudowane w język pole, zawierające częśćadresu URL zaczynającą się od znaku zapytania(o ile taka istnieje). Jeżeli takiego znaku nie ma,to pole document.location.search będzie puste,co spowoduje zakończenie funkcji.

6. var linkURL = justTheFilename(document.location.search);

Oto pierwsza z trzech zmiennych, które musimyprzygotować przed załadowaniem nowych treścido ramki. Najpierw zmiennej linkURLprzypisujemy nazwę pliku, który ma zostaćzaładowany do ramki. Pomocna jest tutajfunkcja justTheFilename(), której przekazujemywartość pola document.location.search.

7. var contentWin = document.getElementById("content").contentWindow;

Zmienna contentWin musi przechowywaćinformacje na temat docelowej ramki. Szukamyzatem elementu o identyfikatorze contenti pobieramy z niego wartość właściwościcontentWindow. Opisuje on stronę załadowanądo ramki.

8. var currURL = justTheFilename(contentWin.location.pathname);

Zmiennej currURL przypisujemy stronęHTML aktualnie załadowaną do ramkiz treścią. Tutaj również wykorzystywanajest funkcja justTheFilename(), której tymrazem przekazujemy wartość właściwościcontentWin.location.pathname.

Um

iesz

czen

ie s

tron

y w

ram

ce


125

9. if (currURL != linkURL) { contentWin.location.replace(linkURL);}

W tym miejscu mamy już wszystkie potrzebneinformacje i moglibyśmy ponownie załadowaćramkę z treścią, ale dopisując jeszcze jednąinstrukcję, możemy wprowadzić bardzo sprytnerozwiązanie. Po co zajmować się ładowaniemtej samej strony, która aktualnie znajduje sięw ramce z treścią? Wystarczy, że porównamyze sobą zawartość zmiennych currURL i linkURL.Jeżeli są identyczne, to nie musimy nic robići pozostawiamy stronę bez zmian. Jeżelijednak wartości tych zmiennych są różne, towywołujemy znaną nam już metodę replace().

10. function justTheFilename(thisFile) { if (thisFile.indexOf("/") > -1) { thisFile = thisFile.substring (thisFile.lastIndexOf("/")+1); } if (thisFile.indexOf("?") == 0) { thisFile = thisFile.substring(1); } return thisFile;}

Do omówienia pozostała nam już tylko funkcjajustTheFilename(). Funkcja ta pobiera ciągznaków i próbuje wyodrębnić z niego nazwępliku. Najpierw sprawdzamy, czy w ciąguznaków znajduje się znak ukośnika (/). Jeżeli jest,to szukamy ostatniego ukośnika w ciągu (metodalastIndexOf()) i za nazwę pliku przyjmujemywszystko to, co znajduje się za nim. Następnieszukamy znaku zapytania. Jeżeli będzie topierwszy znak nazwy pliku (na pozycji zerowej),to za nazwę pliku uznajemy cały tekst od pozycjipierwszej aż do końca. Tak wyodrębniona nazwapliku jest zwracana do funkcji wywołującej.

Um


ce

Rozdział 5.

126

Załadowanie ramkiCzęsto jednej z ramek używa się jako paskanawigacyjnego, za pomocą którego różne stronysą ładowane do głównej ramki. Główna ramka stajesię elementem docelowym dla łączy znajdującychsię w ramce nawigacyjnej. W celu załadowania strondo tej ramki za pomocą kodu HTML stosuje sięatrybuty target umieszczane w znacznikach <a>.Jeżeli jednak chcielibyśmy używać języka XHTMLw wersji Strict, to jedyną metodą ładowania strondo ramek jest wykorzystanie języka JavaScript.Po prostu język XHTML Strict nie pozwala nastosowanie atrybutów target, a zatem trzeba w innysposób podać element docelowy ładowania strony.

W skrypcie 5.9 pokazujemy kod zestawu ramekw języku XHTML Strict, w skrypcie 5.7 dostępnyjest kod strony menu nawigacyjnego, a kodJavaScript, wywoływany po kliknięciu dowolnegołącza, został przedstawiony w skrypcie 5.8. Samąstronę można zobaczyć na rysunku 5.8.

Aby wyznaczyć element docelowyładowanej strony:

1. window.onload = initLinks;

Po załadowaniu strony wywoływana jest funkcjainitLinks().

2. function initLinks() { for (var i=0; i<document.links. length; i++) { document.links[i].target = "content"; }}

Ta funkcja przegląda wszystkie łącza na stronie.Dla każdego znalezionego łącza definiowanajest właściwość target, której przypisywany jestciąg znaków content.

Skrypt 5.7. Jeżeli w zestawie ramek używamy językaXHTML Strict, to do zdefiniowania docelowychramek dla łączy trzeba wykorzystać język JavaScript

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

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Pasek nawigacyjny</title> <script type="text/javascript"

src="script04.js"></script></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 całkowiciewystarczy do wykonania tego zadania

window.onload = initLinks;

function initLinks() { for (var i=0; i<document.links. length; i++) { document.links[i].target = "content"; }}

Rysunek 5.8. Oto ramka służąca za paseknawigacyjny oraz strona z treścią wyświetlanaw osobnej ramce

Zała

dow

anie

ram

ki

Wskazówka

Jeżeli język JavaScript zostanie wyłączony,to użytkownicy klikający dowolne łącze zostanązaskoczeni. Strona docelowa zostanie załadowanado ramki paska nawigacyjnego, a nie do ramki treści.Niestety, tak działają ramki w języku XHTML Strict.


127

Skrypt 5.9. Ten zestaw ramek ładuje podstawowąstronę, która zostanie zastąpiona przez stronęwygenerowaną w JavaScripcie


<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Ładowanie jednej ramki z poziomu

drugiej</title></head><frameset cols="30%,70%"> <frame src="left5.html" name="left"

id="left" /> <frame src="frame5.html" name="content"


Skrypt 5.10. A oto nasza podstawowa strona


<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Ramka z treścią</title></head><body bgcolor="#FFFFFF"></body></html>

Rysunek 5.9. Oto wynik działania skryptu 5.8— strona WWW przygotowana w języku JavaScript.Zawartość prawej ramki została wygenerowanaprzez skrypt JavaScriptu

Tworzenie i ładowanieramek dynamicznychZa pomocą JavaScriptu można dynamiczniegenerować zawartość strony. Okazuje się toprzydatne przy ładowaniu do ramek dynamicznychdanych uzależnionych od wyboru dokonanegow innej ramce. Skrypt 5.9 tworzy zestaw rameki ładuje do głównej ramki podstawową stronęz treścią (skrypt 5.10), natomiast opisywanyza chwilę skrypt 5.11 umożliwia dynamiczneprzygotowanie różnych treści i załadowanie ichdo głównej ramki. Powstaje w ten sposób stronaprzedstawiona 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>Oglądasz właśnie stronę nr " + this.thisPage + ".<\/h1>";

var contentWin = parent.document.getElementById("content").contentWindow;

contentWin.document.body.innerHTML = newText; return false;}

Tworzenie i ładow

anie ramek dynam

icznych

Rozdział 5.

128

Aby dynamicznie załadować stronę do ramkiz innej ramki:

1. function initLinks() { for (var i=0; i<document.links. length; i++) { document.links[i].onclick =

writeContent; document.links[i].thisPage = i+1; }

Funkcja initLinks() zaczyna się tak samo jakw skrypcie 5.8 — od przejrzenia wszystkichłączy znajdujących się na stronie. Następniedo każdego łącza dodawane są dwie rzeczy:funkcja obsługująca zdarzenie onclick oraznowa właściwość thisPage. We właściwościtej zapisywany jest numer strony, która mazostać wyświetlona po kliknięciu łącza.I tak, łącze numer 0 wyświetla stronę 1, łączenumer 1 — stronę 2 itd. Funkcją obsługującązdarzenie onclick wszystkich łączy jest funkcjawriteContent().

2. var newText = "<h1>Oglądasz właśnie stronęnr " + this.thisPage + ".<\/h1>";

var contentWin = parent.document.getElementById("content").contentWindow;

contentWin.document.body.innerHTML =newText;

Oto najważniejsza część funkcji writeContent().Najpierw deklarowana jest zmienna newTexti przypisywany jest jej jakiś tekst. Następniedefiniujemy zmienną contentWin, postępującdokładnie tak samo jak w skrypcie 5.6,a na koniec właściwości contentWin.document.body.innerHTML przypisujemy wartość zmiennejnewText. W ramach wyjaśnienia: w zmiennejcontentWin zapisujemy dokument zapisanyw ramce, wybieramy z niego element body,a następnie modyfikujemy właściwość innerHTMLtego elementu.

Twor

zeni

e i ł

adow

anie

ram

ek d

ynam

iczn

ych


129

3. return false;

Na koniec funkcja writeContent() zwracawartość fałszu, która zakazuje przeglądarceładowania dokumentu wskazywanego przezatrybut href klikniętego łącza. Bez tej instrukcjiprzeglądarka zastąpiłaby wygenerowaną właśnietreść stroną wskazywaną przez łącze, a to nie jestjuż potrzebne.

Wskazówki

Dlaczego w kroku drugim przed znakiemukośnika (/) został umieszczony znak lewegoukośnika (\)? Zgodnie ze specyfikacją językaHTML przeglądarka może zinterpretowaćpoczątek znacznika zamykającego (</) jakoznak końca wiersza. Lewy ukośnik powodujewyróżnienie ukośnika, dzięki czemu kod HTMLmoże zostać prawidłowo zinterpretowany.

Korzystamy tu z metody parent.document.getElement…, a nie document.getElement…, którejużyliśmy w skrypcie 5.6. Po prostu w tamtymskrypcie kod JavaScript był wywoływany przezstronę zestawu ramek, a tutaj wywoływany jestprzez jedną ze stron umieszczonych w ramkach.W takiej sytuacji musimy przejść w hierarchiio jeden poziom wyżej (do strony zestawu ramek)i dopiero tam zainteresować się stroną z treścią(strona potomna strony zestawu ramek).

Tworzenie i ładow

anie ramek dynam

icznych

Rozdział 5.

130

Funkcje wspólne dla kilku ramekCzęsto stosowany jest układ ramek, w którym jednaz nich służy do nawigacji, a druga zawiera właściwątreść, która może być podzielona na wiele stron. Jeśliwszystkie strony z treścią korzystają z identycznegokodu JavaScriptu, rozsądne będzie przeniesieniewywołania pliku z kodem JavaScriptu na stronę,która jest zawsze wyświetlana, zamiast przepisywaniago na wszystkich możliwych stronach z treścią.Na rysunku 5.10 widać, jak wykorzystaliśmy tęopcję do udostępnienia wielu stronom funkcji,która zwraca losowo wybrany baner. Definicjęukładu ramek przedstawiliśmy w skrypcie 5.12.

Aby skorzystać z funkcji znajdującej sięna innej stronie:

1. var bannerArray = new Array("images/redBanner.gif", "images/greenBanner.gif","images/blueBanner.gif");

Zaczynamy od utworzenia tablicy zawierającejnazwy wszystkich banerów i zapisania jejdo zmiennej bannerArray.

2. window.onload = initFrames;

Po załadowaniu strony zostanie wywołanafunkcja initFrames().

3. var leftWin = document.getElementById("left").contentWindow.document;

Teraz zaczynamy analizować kod funkcjiinitFrames(). Na początku tworzona jestzmienna leftWin, której przypisujemy wartośćw ten sam sposób co w poprzednich przykładach:pobieramy element na podstawie nazwy ramki(document.getElementbyId(left)), wybieramyz niego właściwość contentWindow, a z niejz kolei pobieramy obiekt document.

Rysunek 5.10. Informacje po prawej stronietworzone są przez kod wywoływany z zestawuramek

Funk

cje

wsp

ólne

dla

kilk

u ra

mek


131

Skrypt 5.12. Ten skrypt pozwala na współdzieleniefunkcji 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

("left").contentWindow.document;

for (var i=0; i<leftWin.links.length; i++){ leftWin.links[i].target = "content"; leftWin.links[i].onclick = resetBanner; }

setBanner();}

function setBanner() { var contentWin = document.getElementById

("content").contentWindow.document; var randomNum = Math.floor(Math.random()

* bannerArray.length);

contentWin.getElementById("adBanner").src = bannerArray[randomNum];

}

function resetBanner() { setTimeout("setBanner()",1000);}

4. for (var i=0; i<leftWin.links.length;i++) {

leftWin.links[i].target = "content"; leftWin.links[i].onclick = resetBanner;

Funkcja jest wywoływana w kontekściezestawu ramek, dlatego konfigurowanie łączyze strony nawigacyjnej wygląda nieco inaczejniż w poprzednich przykładach. Tym razemdla każdego łącza modyfikujemy zarównowłaściwość target (przypisujemy jej wartośćcontent), jak i funkcję obsługi zdarzeniaonclick (będzie ono obsługiwane przezfunkcję resetBanner()).

5. setBanner();

Ostatni krok inicjacji, czyli wywołanie funkcjisetBanner().

6. var contentWin = document.getElementById("content").contentWindow.document;

Funkcja setBanner() ładuje zawartość oknaz treścią i generuje liczbę losową. Następnieznajdujący się na stronie baner reklamowyzastępowany jest banerem losowo wybranymz tablicy. Zaczynamy od tworzenia zmiennejcontentWin i przypisania jej wartości w dokładnietaki sam sposób jak w poprzednich przykładach:na podstawie nazwy ramki (content) pobieramyodpowiedni element (document.getElementById("content")), z elementu pobieramy właściwośćcontentWindow, a z niej — interesującyna dokument.

Funkcje wspólne dla kilku ram

ek

Rozdział 5.

132

7. var randomNum = Math.floor(Math.random() *bannerArray.length);

W tym wierszu wykorzystujemy funkcjęMath.random() i jej wynik mnożymy przez liczbęelementów zapisanych w tablicy bannerArray.W ten sposób otrzymujemy liczbę losowąz zakresu od 0 do liczby elementów w tablicy.Następnie wynik jest umieszczany w zmiennejrandomNum.

8. contentWin.getElementById("adBanner").src =bannerArray[randomNum];

Właściwości src elementu adBannerprzypisujemy wartość wylosowanego elementutablicy. Jest to nazwa nowego obrazka,który zostanie teraz wyświetlony na stronie.

9. function resetBanner() { setTimeout("setBanner()",1000);}

Funkcja resetBanner() ma tylko jeden wierszkodu, mimo to jej działanie może nie być dokońca jasne. Funkcja czeka na załadowaniecałej treści w ramce content (jedna sekundapowinna wystarczyć), a następnie wywołujefunkcje setBanner() w celu wybrania nowegobanera.

Jeżeli funkcja setBanner() zostałaby wywołanaod razu, to mogłoby się okazać, że nowa treśćramki z content nie została jeszcze załadowana.W takiej sytuacji na pewno pojawiłyby sięproblemy polegające albo na wystąpieniu błędu(nie znaleziono elementu adBanner), albo nadokonaniu podmiany banera na stronie, którajest właśnie usuwana z ramki.

Wskazówka

Proszę zauważyć, że funkcja resetBanner()nie zwraca wartości fałszu. Oznacza to,że przeglądarka wykona zapisane w funkcjizadania i załaduje stronę wskazywaną przezatrybut href. To właśnie dlatego w skrypciedefiniowana jest funkcja obsługi zdarzeniaonclick i wartość właściwości target.

Funk

cje

wsp

ólne

dla

kilk

u ra

mek


133

Rysunek 5.11. Kod JavaScript informuje nas,że stronę 2 odwiedziliśmy już kilka razy

Skrypt 5.13. Zawartość znacznika <span>zmieniana jest przez kod JavaScript


<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Ramka z treścią</title><body bgcolor="#FFFFFF"> <h1>Oglądasz właśnie stronę nr 1.</h1> <h2>Ta strona była już wyświetlana

<span id="pageCt"> </span> razy.</h2></body></html>

Przechowywanie informacjiw ramkachW sytuacjach podobnych do opisywanego wcześniejprzykładu można też w wyświetlanej na stałe ramceprzechowywać informacje wykorzystywane przezinne ramki. Strona z rysunku 5.11 pokazuje, ile razyużytkownik odwiedzał daną stronę w ramach jednejsesji. Kod jednej z trzech (niemal identycznych)stron z treścią prezentujemy w skrypcie 5.13. Tutajrównież zewnętrzny kod JavaScript (przedstawionyw skrypcie 5.14) jest wywoływany przez stronęzestawu ramek.

Przechowyw

anie informacji w

ramkach

Rozdział 5.

134

Aby zliczać wyświetlenia strony: 1. <h2>Ta strona była już wyświetlana

<span id="pageCt"> </span> razy.</h2>

W skrypcie 5.13 znajduje się znacznik <span>oznaczony specjalnym identyfikatorem. Jakwidać w samym znaczniku nie ma żadnej treści,ale możemy ją dopisać za pomocą JavaScriptu.Musieliśmy umieścić w nim choć jedną spację,ponieważ niektóre przeglądarki stwierdzają,że znacznik jest pusty, i w związku z tymw ogóle go nie tworzą. Jeżeli coś ma się staćelementem dokumentu, to musi zawieraćchoćby minimalny tekst.

2. var pageCount = new Array(0,0,0);var pageArray = new Array("frame7a.html","frame7b.html","frame7c.html");

Na początku skryptu 5.14 deklarujemy dwietablice i wpisujemy do nich wartościpoczątkowe.

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 jakw poprzednich przykładach, ale tym razemzdarzenie onclick będzie obsługiwać funkcjaresetPageCt(), natomiast właściwości thisPagenadajemy wartość zmiennej i. W ten sposóbwłaściwość ta otrzyma wartości 0, 1 lub2 w zależności od łącza.

4. bumpPageCt(0);

Funkcja kończy się wywołaniem funkcjibumpPageCt() i przekazaniem jej wartościzerowej. Podnosi ona liczbę odwiedzin dlastrony pierwszej.

Skrypt 5.14. W tym skrypcie modyfikowana jestwartość 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]++;

var contentWin = document.getElementById("content").contentWindow.document;

contentWin.getElementById("pageCt").innerHTML = pageCount[currPage] + " ";

}

function resetPageCt() { document.getElementById("content").

contentWindow.location.href =pageArray[this.thisPage];

setTimeout("bumpPageCt("+this.thisPage+")",1000);

return false;}

Prze

chow

ywan

ie in

form

acji

w r

amka

ch


135

5. function bumpPageCt(currPage) { pageCount[currPage]++;

var contentWin = document.getElementById("content").contentWindow.document;

contentWin.getElementById("pageCt").innerHTML = pageCount[currPage] + " ";

}

Funkcja bumpPageCt() pobiera numer stronyi zwiększa przypisany do niej licznik(przechowywany w tablicy pageCount).Ponownie pobieramy tutaj element contentWin(czyli główny dokument z treścią umieszczonyw ramce). Następnie korzystamy z niego,aby zmienić zawartość właściwości innerHTMLelementu pageCt na liczbę wyświetleń danejstrony.

6. function resetPageCt() { document.getElementById("content").

contentWindow.location.href =pageArray[this.thisPage];

setTimeout("bumpPageCt("+this.thisPage+")",1000);

return false;}

Funkcja resetPageCt() jest połączeniemopisywanych wcześniej funkcji resetBanner()i bumpPageCt() uzupełnionych nowymielementami. Nie chcemy, żeby przeglądarkasama zmieniała zawartość ramki z treścią,dlatego przypisujemy jej stronę na podstawietablicy pageArray. Po zmianie zawartości ramkichcemy, żeby funkcja bumpPageCt()zostaławywołana dopiero po zakończeniu ładowanianowej strony, a to oznacza, że musimy skorzystaćz metody setTimeout(). Na koniec zwracamywartość fałszu, ponieważ ładowaniem stronyzajmuje się skrypt JavaScript.

Przechowyw

anie informacji w

ramkach

Rozdział 5.

136

Ładowanie kilku ramek na razZmienić zawartość ramki można za pomocązwykłego łącza z atrybutem target — tak działajęzyk HTML. Jednak aby zmienić jednymkliknięciem treść wielu ramek, potrzeba jużJavaScriptu. Kod HTML przykładowych stron jestbardzo prosty, a wszystkie operacje wykonywanesą w skrypcie 5.15. Dwa stany, jakie możeprzyjmować okno przeglądarki, przedstawionezostały na rysunkach 5.12 i 5.13.

Aby załadować wiele ramek na raz: 1. function initFrames() { var leftWin = document.getElementById ("left").contentWindow.document;

for (var i=0; i<leftWin.links.length;i++) {

leftWin.links[i].onclick = setFrames; }}

Funkcja initFrames() jest bardzo podobnado tych, które widzieliśmy w poprzednichprzykładach. Wywoływana jest w ramachzdarzenia onload i p rzegląda wszystkie łączaz ramki nawigacyjnej (tej z lewej strony). Tymrazem do obsługi zdarzeń onclick wybranazostała funkcja setFrames().

Skrypt 5.15. Kod JavaScript pozwala na załadowaniewielu ramek po jednym kliknięciu użytkownika




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";

document.getElementById("content").contentWindow.document.location.href =this.href;

setTimeout("initFrames();",1000); return false;}

Łado

wan

ie k

ilku

ram

ek n

a ra

z


137

Rysunek 5.12. Początkowo strona wygląda tak

Rysunek 5.13. Po kliknięciu jednego z łączyzmianie ulegają obie ramki

2. document.getElementById("left").contentWindow.document.location.href =this.id + ".html";

document.getElementById("content").contentWindow.document.location.href =this.href;

setTimeout("initFrames();",1000);

Funkcja setFrames() na początku zmieniazawartość lewej ramki, korzystając przy tymz identyfikatora klikniętego łącza. Następniefunkcja zmienia zawartość ramki z treścią, tymrazem korzystając z atrybutu href klikniętegołącza. Mamy dostęp do tych danych z poziomuskryptu JavaScript, więc dlaczego mielibyśmyz nich nie skorzystać?

Następnie funkcja odczekuje sekundę(ponownie korzystamy z metody setTimeout()),po czym wywołuje funkcję initFrames().Jest to konieczne, ponieważ to właśnie w niejfunkcje obsługi zdarzenia onclick przypisywanesą do poszczególnych łączy. Niestety,po ponownym załadowaniu strony do ramkinawigacyjnej wszystkie wcześniejszeprzypisania przestają obowiązywać. Jeżelicałość ma działać tak samo jak na początku,to operacje związane z inicjacją trzeba wykonaćpo każdym załadowaniu strony ramkinawigacyjnej.

3. return false;

Na koniec zwracamy wartość fałszu, tak żebyprzeglądarka nie musiała się zajmowaćładowaniem nowej strony.

Wskazówka

Jeżeli będziemy szybko klikać łącza z paskanawigacyjnego, to natkniemy się na dośćnieoczekiwane zachowanie: strona z treściązostanie załadowana do ramki paskanawigacyjnego. Po prostu strona nawigacyjnamusi załadować się w całości i dopiero wtedymoże przyjmować kliknięcia.

Ładowanie kilku ram

ek na raz

Rozdział 5.

138

Praca z elementami iframeElement iframe jest elementem wierszowym, czyliramką, która może zostać włączona do zwykłej stronyHTML, i nie musi być częścią zestawu ramek.Podobnie jak w przypadku zwyczajnej ramki,element iframe jest całkowicie niezależnymdokumentem HTML. Na elemencie tym mogąpracować powiązane ze stroną skrypty, a zatemmożna za ich pomocą dynamicznie generowaćzawartość takiej ramki, bez konieczności stosowaniacałego zestawu ramek.

W tym przykładzie jedną ze stron HTMLumieścimy w części wydzielonej dla treści, którazostanie zamknięta w elemencie iframe. Zawartośćtego elementu będzie generowana za pomocąJavaScriptu. Skrypt 5.16 tworzy główną stronęwyświetlaną w przeglądarce. Skrypt 5.17 jest tylkotymczasowym dokumentem HTML ładowanymdo elementu iframe. Wyświetla on tylko komunikat„Proszę załadować stronę”, który można zobaczyćna rysunku 5.14. Zawartość strony przygotowywanajest przez kod zaprezentowany w skrypcie 5.18.W momencie gdy użytkownik kliknie jedno z łączy,kod JavaScript wpisze do elementu iframe nowątreść strony. W tym przypadku wyświetlana jesttylko nazwa strony oraz liczba odwiedzin stronyw ramach jednej sesji. Jak widać, większa częśćtego skryptu została zbudowana z kodu, którywykorzystywaliśmy już w poprzednichprzykładach.

Skrypt 5.16. Ta strona tworzy ramkę typu iframei wywołuje zewnętrzny kod JavaScript


<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Ramki iframe</title> <script language="javascript"


</head><body bgcolor="#FFFFFF"> <iframe src="frame9b.html" width="550"

height="300" name="content" id="content"align="right" frameborder="1">Twojaprzeglądarka nie obsługuje 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. Początkowa strona umieszczanaw ramce iframe


<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Ramka z treścią</title></head><body bgcolor="#FFFFFF"> Proszę załadować stronę</body></html>

Prac

a z

elem

enta

mi i

fram

e


139

Skrypt 5.18. Ten skrypt generuje zawartość ramkiiframe i zapisuje ją do odpowiedniego okna

var pageCount = new Array(0,0,0,0);


function initFrames() { for (var i=0; i<document.links.length;

i++) { document.links[i].onclick =

writeContent; document.links[i].thisPage = i+1; }}

function writeContent() { pageCount[this.thisPage]++;

var newText = "<h1>Oglądasz właśnie stronęnr " + this.thisPage;

newText += ".<br \/>Strona ta zostaławyświetlona już ";

newText += pageCount[this.thisPage]+ " razy.<\/h1>";

var contentWin =document.getElementById("content").contentWindow.document;

contentWin.body.innerHTML = newText; return false;}

Rysunek 5.14. W znajdującej się po prawej stronieramce iframe początkowo wyświetlana jest tylkoprośba o kliknięcie jednego z łączy

Aby przygotować zawartość ramki iframe: 1. <iframe src="frame9b.html" width="550"

height="300" name="content" id="content"align="right" frameborder="1">Twojaprzeglądarka nie obsługuje ramek Iframe</iframe>

W skrypcie 5.16 znacznik <iframe> informujeprzeglądarkę, że początkowo dokumentemwyświetlanym w ramce będzie plikframe9b.html. Wewnątrz znacznika zapisanyjest też komunikat, który będzie wyświetlanyprzez przeglądarki nieobsługujące ramek iframe.

2. function writeContent() {

Tworzymy funkcję o nazwie writeContent,której używać będziemy do tworzenia treściumieszczanych w elemencie iframe.

3. pageCount[this.thisPage]++;

Ten wiersz zwiększa licznik w tablicy pageCount,dzięki czemu wiadomo, ile razy odwiedziliśmyposzczególne strony.

4. var newText = "<h1>Oglądasz właśnie stronęnr " + this.thisPage;

newText += ".<br \/>Strona ta zostaławyświetlona już ";

newText += pageCount[this.thisPage]+ " razy.<\/h1>";

Te wiersze tworzą treść, która jest wpisywanado ramki iframe.

Praca z elementam

i iframe

Rozdział 5.

140

5. var contentWin = document.getElementById("content").contentWindow.document;

contentWin.body.innerHTML = newText;return false;

Podobnie jak w poprzednich przykładach,pobieramy element contentWin i modyfikujemywłaściwość innerHTML znajdującego się w nimznacznika body. W ramach tej zmiany wpisujemydwa wiersze tekstu, które można zobaczyć narysunku 5.15. To wszystko, co chcemy wykonaćw tej funkcji, więc na koniec zwracamy wartośćfałszu, żeby zwolnić przeglądarkę z obowiązkuładowania strony.

Wskazówka

Proszę zauważyć, że tym razem do ramkizapisujemy dane z poziomu strony niebędącejw zestawie ramek i dlatego możemy skorzystaćz instrukcji document.getElementById("content"),a nie parent.document.getElementById("content"), tak jak w poprzednich przykładach.Po prostu ramka iframe jest elementempotomnym głównej strony, dzięki czemumożemy się do niego odwoływać bezpośrednio.

Rysunek 5.15. Przy każdym kliknięciu łącza napasku nawigacyjnym zmieniana jest zawartośćramki iframe

Prac

a z

elem

enta

mi i

fram

e


141

Skrypt 5.19. Ten skrypt ładuje strony HTMLdo ramki iframe

window.onload = initiFrame;

function initiFrame() { for (var i=0; i<document.links.length;

i++) { document.links[i].target = "content"; document.links[i].onclick = setiFrame; }}

function setiFrame() { document.getElementById("content").

contentWindow.document.location.href =this.href;

return false;}

Rysunek 5.16. Zawartość ramki iframe jest ładowanapo kliknięciu łącza z paska nawigacyjnego.

Ładowanie ramek iframeza pomocą JavaScriptuOczywiście, nie mamy obowiązku wypełnianiaramek iframe za pomocą skryptów JavaScript.Równie dobrze możemy ładować do nich osobnedokumenty HTML. W tym przykładzie pokażemysposób takiego postępowania. Ponownie tworzymystronę główną zawierającą ramkę iframe (praktyczniedokładnie taką samą jak ta ze skryptu 5.16).Oczywiście, przygotować sobie musimy też stronęz początkową zawartością ramki, podobną do tejze skryptu 5.17. Oprócz tego tworzymy też trzyniezależne strony HTML (ich kod nie będzieprezentowany), które będą ładowane do ramkiiframe za pomocą skryptu 5.19.

Aby załadować ramkę iframeza pomocą JavaScriptu:

1. function setiFrame() { document.getElementById("content"). contentWindow.document.location.href = this.href; return false;}

Podobnie jak w skrypcie 5.12 definiujemy wewszystkich łączach właściwość target orazfunkcje obsługi zdarzenia onclick. W tymprzykładzie kliknięcie dowolnego łączawywołuje funkcję setiFrame(), która ładujenową stronę do ramki iframe (rysunek 5.16).

Ładowanie ram

ek iframe

Po prostu JavaScript i Ajax. Wydanie VI

Technology

Transcript of Po prostu JavaScript i Ajax. Wydanie VI