-
SPIS TRECIOD
REDAKCJI..................................................................................................................................9
WSTP..............................................................................................................................................10CO
POWINIENE WIEDZIE
..............................................................................................................10UYCIE
CZCIONEK...........................................................................................................................10UKAD
KSIKI
..............................................................................................................................11
Wymagania programu
...............................................................................................................11Struktura
programu
...................................................................................................................11Techniki
jzyka
JavaScript.........................................................................................................11Kierunki
rozwoju........................................................................................................................11
O KODZIE
........................................................................................................................................11PROGRAMOWANIE
I TESTOWANIE
...................................................................................................11PODZIKOWANIA
............................................................................................................................12
WPROWADZENIE.........................................................................................................................13ZALETY
JZYKA
JAVASCRIPT..........................................................................................................13
Prostota, szybko i efektywno
...............................................................................................13Wszechobecno.........................................................................................................................13Redukcja
obcienia serwera
....................................................................................................14JavaScript
rozwija si
................................................................................................................14By
moe nie ma
wyboru............................................................................................................14I
wiele innych
zalet.....................................................................................................................14
PODSTAWOWA STRATEGIA PROGRAMOWANIA W
JAVASCRIPT........................................................14Co
moe
aplikacja?....................................................................................................................15Kim
s nasi odbiorcy
.................................................................................................................15Jak
radzi sobie z przeszkodami?
..............................................................................................16
Uwzgldniaj wszelkie uywane przegldarki
........................................................................16Dyskretnie
obniaj jako
......................................................................................................16Mierz
nisko
............................................................................................................................16Mierz
wysoko.........................................................................................................................16Udostpniaj
wiele wersji jednej aplikacji
..............................................................................16
UYCIE JZYKA JAVASCRIPT W PREZENTOWANYCH
APLIKACJACH................................................16Wielokrotne
uycie kodu przyszoci narodu
...........................................................................17Wydzielanie
JavaScriptu
............................................................................................................17Deklarowanie
zmiennych globalnych i tablic na
pocztku........................................................17Deklarowanie
konstruktorw po zmiennych globalnych
...........................................................17Definiowanie
funkcji zgodnie z porzdkiem
chronologicznym..............................................17
-
2Kada funkcja realizuje jedno zadanie
......................................................................................17W
miar moliwoci uywaj zmiennych
lokalnych.....................................................................17
NASTPNY
KROK.............................................................................................................................18
1..................................................................................................................................................19WYSZUKIWANIE
DANYCH PO STRONIE
KLIENTA..........................................................19
WYMAGANIA
PROGRAMU................................................................................................................21STRUKTURA
PROGRAMU
.................................................................................................................22
Plik nav.html
..............................................................................................................................22Plik
records.js
............................................................................................................................25Zmienne
globalne.......................................................................................................................25Funkcje.......................................................................................................................................26
validate()
................................................................................................................................27convertString()
.......................................................................................................................27allowAny()
.............................................................................................................................28requireAll()
............................................................................................................................29verifyManage()
......................................................................................................................31noMatch()...............................................................................................................................31formatResults()
......................................................................................................................32Nagwek
i tytu dokumentu HTML
.....................................................................................32Wywietlanie
tytuw, opisw i adresw URL
dokumentw................................................33Dodanie
przyciskw Poprzedni i Nastpny
....................................................................34prevNextResults()
..................................................................................................................34Tylko
przycisk Nastpne
....................................................................................................34Przyciski
Nastpne i
Poprzednie.....................................................................................35Tylko
przycisk Poprzednie
.................................................................................................35
Kod HTML
.................................................................................................................................38TWORZENIE
BAZY DANYCH W JZYKU JAVASCRIPT
........................................................................38KIERUNKI
ROZWOJU........................................................................................................................39
Zgodno z jzykiem JavaScript
1.0...........................................................................................39NICTJDO
...................................................................................................................................39Odporno
na bdy
...................................................................................................................40Wywietlanie
reklam
..................................................................................................................40Rozszerzenie
moliwoci wyszukiwania
.....................................................................................40Zapytania
predefiniowane
.........................................................................................................41
2..................................................................................................................................................42TEST
SPRAWDZANY NA
BIECO.........................................................................................42
WYMAGANIA
PROGRAMU................................................................................................................45STRUKTURA
PROGRAMU
.................................................................................................................45
index.html ramki
.....................................................................................................................46
-
Spis treci3
question.js plik rdowy
JavaScript.......................................................................................47administer.html
..........................................................................................................................49
Tre HTML
..........................................................................................................................51Zmienne
globalne...................................................................................................................52Funkcje...................................................................................................................................53
itemReset()
.........................................................................................................................53shuffle()..............................................................................................................................53buildQuestion()
..................................................................................................................54gradeTest()
.........................................................................................................................56printResults()......................................................................................................................57chickenOut()
......................................................................................................................59
KIERUNKI
ROZWOJU........................................................................................................................59Uodpornienie
na
oszustwa.........................................................................................................59
Usuwanie odpowiedzi z tablicy
.............................................................................................59Usuwanie
gradeTest() i modyfikacja
buildQuestion()...........................................................60Modyfikacja
printResults()
....................................................................................................60
Przeksztacenie na ankiet
.........................................................................................................60
3..................................................................................................................................................61INTERAKTYWNA
PREZENTACJA SLAJDW
......................................................................61
WYMAGANIA
PROGRAMU................................................................................................................63STRUKTURA
PROGAMU....................................................................................................................63
Zmienne......................................................................................................................................66Ustawienia
domylne warstwy DHTML
...............................................................................67Zmienne
zwizane z
przegldarkami.....................................................................................67Zmienne
zwizane z
obrazkami.............................................................................................68Zmienne
automatycznego
pokazu..........................................................................................68
Funkcje
aplikacji........................................................................................................................68Funkcje
zwizane z
warstwami..............................................................................................69
genLayer()..........................................................................................................................69slide()
.................................................................................................................................69genScreen()
........................................................................................................................71Elementy
tablicy
slideShow...............................................................................................74
Funkcje zwizane z obsug
obrazkw..................................................................................75preLoadImages()
................................................................................................................75imageSwap()
......................................................................................................................75
Funkcje nawigacji
..................................................................................................................76refSlide(),
hideSlide(), showSlide(), menuManager()
.......................................................76changeSlide()
.....................................................................................................................77setSlide()
............................................................................................................................78autoPilot()
..........................................................................................................................78automate()
..........................................................................................................................79
KIERUNKI
ROZWOJU........................................................................................................................79Losowy
dobr slajdw w trybie automatycznym
.......................................................................79Animowane
GIF-y i suwaki slajdw
..........................................................................................80Animacja
samych
slajdw..........................................................................................................80
-
44..................................................................................................................................................81INTERFEJS
MULTIWYSZUKIWARKI
.....................................................................................81
WYMAGANIA
PROGRAMU................................................................................................................83STRUKTURA
PROGRAMU
.................................................................................................................83
Przechadzka Alej
Pamici........................................................................................................87Dynamiczne
adowanie
obrazkw..............................................................................................87Uruchamianie
wyszukiwarek
.....................................................................................................88engineLinks()..............................................................................................................................89
Zarzdzanie
warstwami..........................................................................................................89Wstpne
adowanie obrazkw
...............................................................................................91Tworzenie
cza
.....................................................................................................................91
imageSwap()...............................................................................................................................92callSearch()................................................................................................................................93
KIERUNKI ROZWOJU: ZWIKSZENIE MOLIWOCI DECYDOWANIA PRZEZ
UYTKOWNIKA...............94Krok 1.
...................................................................................................................................95Krok
2.
...................................................................................................................................95Krok
3.
...................................................................................................................................95Krok
4.
...................................................................................................................................95Krok
5.
...................................................................................................................................95
5..................................................................................................................................................97IMAGEMACHINE..........................................................................................................................97
WYMAGANIA
PROGRAMU................................................................................................................99STRUKTURA
PROGRAMU
...............................................................................................................100
Krok 1. Zaadowanie
strony.....................................................................................................107Krok
2. Okrelenie liczby par obrazkw i ustawie
domylnych.............................................107Krok 3.
Okrelenie nazw plikw, atrybutw HREF i tak dalej
................................................108
captureDefaultProfile()
........................................................................................................108generateEntryForm()............................................................................................................109genJavaScript()
....................................................................................................................110Czas
na
decyzje....................................................................................................................112Generowanie
kodu
...............................................................................................................113
Krok 4. Wybr Podgldu w celu obejrzenia dziaania kodu
...................................................114Krok 5. Wybr
Zmiany danych w celu zrobienia poprawek
....................................................114
KIERUNKI ROZWOJU: DODANIE ATRYBUTW DO SZABLONU
.........................................................114Krok 1.
Dodanie
pl.................................................................................................................115Krok
2. Tworzenie tablic w setArrays()
...................................................................................115Krok
3. Pobieranie nowych ustawie domylnych
..................................................................115Krok
4. Dodanie pl tekstowych w generateEntryForm()
.......................................................116Krok 5.
Odwoanie si do nowych wartoci w genJavaScript() i ich uycie
..........................116Krok 6. Generacja dodatkowego HTML w
genJavaScript()....................................................116
-
Spis treci5
6................................................................................................................................................118REALIZACJA
PLIKW RDOWYCH JAVASCRIPTU
.................................................118
ARRAYS.JS.....................................................................................................................................119COOKIES.JS
....................................................................................................................................122DHTML.JS
......................................................................................................................................125EVENTS.JS
.....................................................................................................................................126FRAMES.JS
.....................................................................................................................................130IMAGES.JS
.....................................................................................................................................132NAVBAR.JS
....................................................................................................................................133NUMBERS.JS
..................................................................................................................................135OBJECTS.JS
....................................................................................................................................136STRINGS.JS
....................................................................................................................................139KIERUNKI
ROZWOJU......................................................................................................................143
7................................................................................................................................................145USTAWIENIA
UYTKOWNIKA OPARTE NA
CIASTECZKACH.....................................145
WYMAGANIA
PROGRAMU..............................................................................................................146STRUKTURA
PROGRAMU
...............................................................................................................147
prefs.html
.................................................................................................................................148Formularz
ustawie uytkownika
........................................................................................154adowanie
zapisanych ustawie
..........................................................................................155Skadanie
obrazkw
.............................................................................................................157
Wprowadzanie zmian
...............................................................................................................158Krok
1. Iteracja
formObj......................................................................................................159Krok
2. Zapisanie danych do pliku
cookies.........................................................................160Krok
3. Pokazanie uytkownikowi nowych ustawie
.........................................................160
Zerowanie
formularza..............................................................................................................161dive.html...................................................................................................................................161
Analiza
ciasteczek................................................................................................................163Twarz
w twarz z
nieznanym...............................................................................................164
KIERUNKI
ROZWOJU......................................................................................................................167Wicej
ustawie
wygldu.........................................................................................................167Gotowe
schematy wygldu stron
.............................................................................................167Umoliwienie
uytkownikom tworzenia wasnych
cz............................................................167Marketing
bezporedni.............................................................................................................168
8................................................................................................................................................169
-
6SHOPPING BAG WZEK SKLEPOWY STWORZONY W JAVASCRIPCIE
..............169SHOPPING BAG W DWCH SOWACH
............................................................................................169
Etap 1. adowanie aplikacji
....................................................................................................170Etap
2. Przegldanie towarw i
wybr....................................................................................171Etap
3: Przegldanie zamwienia i zmiany w nim
..................................................................173Etap
4. Pacenie
.......................................................................................................................175
WYMAGANIA
PROGRAMU..............................................................................................................175STRUKTURA
PROGRAMU
...............................................................................................................176ETAP
1. ADOWANIE
APLIKACJI....................................................................................................178
Elementy najwyszego poziomu
...............................................................................................179inventory.js...............................................................................................................................180
Cechy produktw
.................................................................................................................183Cechy
kategorii
produktw..................................................................................................184Tworzenie
produktw i
kategorii.........................................................................................185Tworzenie
koszyka na zakupy
.............................................................................................186
ETAP 2. POKAZANIE TOWARW
....................................................................................................187manager.html
...........................................................................................................................187
Zmienne
...............................................................................................................................194display()
...............................................................................................................................195Wyjtki
od reguy
................................................................................................................195Tworzenie
wywietlanej strony
...........................................................................................196
ETAP 3. POKAZANIE WSZYSTKICH
KATEGORII...............................................................................197Wywietlenie
pierwszego produktu
..........................................................................................197
Gdzie tu jest DHTML?
........................................................................................................198ETAP
4. DODAWANIE PRODUKTW DO
KOSZYKA..........................................................................198
Wyszukiwanie
produktw.........................................................................................................199Odwzorowanie
produktw i
kategorii......................................................................................199Przeszukiwanie
istniejcej bazy danych
..................................................................................200Obsuga
nawigacji midzy produktami i kategoriami
.............................................................200Kod
w czach
..........................................................................................................................202
ETAP 5. ZMIANA ZAMWIENIA, PACENIE
....................................................................................202Tworzenie
list wyboru
..............................................................................................................205Zapisywanie
rachunku
.............................................................................................................206Opakowanie
showBag(): pokazywanie podsumowa
..............................................................207
Przycisk Do
kasy..................................................................................................................208Koniec
wywietlania
................................................................................................................209A
po stronie serwera?
..............................................................................................................210Przycisk
Wyzeruj iloci
............................................................................................................210Przycisk
Zmiana koszyka
.........................................................................................................210Zapomniane
funkcje
.................................................................................................................210
KIERUNKI
ROZWOJU......................................................................................................................211Inteligentniejsze
towary
...........................................................................................................211Zwikszenie
moliwoci wyszukiwania
....................................................................................211Obsuga
ciasteczek...................................................................................................................212
9................................................................................................................................................213
-
Spis treci7
SZYFRY W
JAVASCRIPCIE......................................................................................................213JAK
DZIAAJ SZYFRY
..................................................................................................................216
Kilka sw o amaniu kodw
....................................................................................................216Szyfr
Cezara
.............................................................................................................................217Szyfr
Vigenere
..........................................................................................................................217
WYMAGANIA
PROGRAMU..............................................................................................................218STRUKTURA
PROGRAMU
...............................................................................................................218
Definiowanie szyfru
.................................................................................................................222Tworzenie
szyfru z
podstawianiem...........................................................................................224Podstawowa
metoda
podstawiania..........................................................................................224Rne
podstawienia do rnych
szyfrw..................................................................................225
Algorytm szyfru Cezara
.......................................................................................................226Algorytm
szyfru Vigenere
...................................................................................................226
Jak dziaa shiftIdx
....................................................................................................................227Obiekty
SubstitutionCipher te s obiektami Cipher
...............................................................228Tworzenie
nowych obiektw SubstitutionCipher
.....................................................................228Dobr
odpowiedniego szyfru
...................................................................................................230Na
koniec
.................................................................................................................................230
KIERUNKI
ROZWOJU......................................................................................................................231
10......................................................................................................................................232ELEKTRONICZNE
YCZENIA: POCZTA ELEKTRONICZNA METOD PRZENIEI
UPU..........................................................................................................................................232
WYMAGANIA
PROGRAMU..............................................................................................................234STRUKTURA
PROGRAMU
...............................................................................................................234
Pozostae dwa dokumenty
........................................................................................................237Co
ju wiemy
............................................................................................................................239Prosz
zaj
miejsca!...............................................................................................................240ledzenie
pooenia myszy
.......................................................................................................242Wywoywanie
wszystkich
ikon..................................................................................................242Przenoszenie
ikon.....................................................................................................................242Kiedy
dokumenty ju si zaaduj
............................................................................................243Poznaj
zmienne
........................................................................................................................247Wywietlanie
ycze
.................................................................................................................248Obrazki
po kolei
.......................................................................................................................250Utrzymanie
ikon na
miejscu.....................................................................................................252Sprawdzanie,
co
otrzymalimy.................................................................................................254Ostateczne
tworzenie kartki
.....................................................................................................254Wysyanie
ycze......................................................................................................................256Uwaga
......................................................................................................................................257
PO STRONIE
SERWERA...................................................................................................................257KIERUNKI
ROZWOJU......................................................................................................................257
Dodanie cza wstecz
..........................................................................................................257Dodanie
obrazkw
tematycznych.............................................................................................258Banery
reklamowe....................................................................................................................258
-
8yczenia bardziej
interaktywne................................................................................................258
11......................................................................................................................................259POMOC
KONTEKSTOWA.........................................................................................................259
WYMAGANIA
PROGRAMU..............................................................................................................261STRUKTURA
PROGRAMU
...............................................................................................................261
Pomoc
kontekstowa..................................................................................................................262Pokazywanie
i ukrywanie dodatkowych informacji
.................................................................264Tworzenie
warstw
....................................................................................................................266
KIERUNKI
ROZWOJU......................................................................................................................268Spis
treci
.................................................................................................................................268Przeszukiwanie
plikw
pomocy................................................................................................269Pytanie
do specjalisty
..............................................................................................................269Pomoc
telefoniczna
..................................................................................................................269
-
9Od redakcji
Niniejsza ksika to gotowy zestaw receptur podobnie jak ksika
kucharska. O wirtualnym koszyku na zakupymona myle jako o
ciasteczkach cebulowych z past ososiow. W kadym rozdziale podano
kod i dokumentacjprzydatnej aplikacji zwykle napisanej cakowicie w
JavaScripcie. Mona wszystkie dania przygotowywa tak, jak topoda
autor ksiki, ale mona te sign do pewnych sugestii, aby wykorzysta
je w swoich pomysach. Na rynkuznajduj si ksiki zawierajce proste
przepisy, jak zrobi jakie drobiazgi i jak ozdobi JavaScriptem swoj
stronsieciow, natomiast w tej ksice znajdziemy cae aplikacje
sieciowe napisane w jedynym jzyku skryptowym,rozumianym przez
przegldarki.
Skoro tyle ju sobie wyjanilimy, zastanwmy si, co naley rozumie
przez ksik z recepturami? Jej zadaniem niejest na pewno podawanie
treci w mao elastycznej formie, ale pomoc w tworzeniu kodu. Zapewne
takie pozycjeksikowe, zawierajce receptury, bdzie mona spotka coraz
czciej.
Richard Koman, Redaktor
-
Wstp
Czego dotychczas brakowao. Zgbiaem stosy ksiek o JavaScripcie,
ogldaem kolejne witryny sieciowe wprostociekajce kodem i pomysami.
Jednak kiedy ju poznaem wszelakie nowe rodzaje skadni i genialne
techniki,nie wiedziaem, co z t wiedz mog zrobi poza pokazywaniem
przykadw. Czuem si tak, jakbym by w kuchnipenej wszelakich skadnikw
jada, ale bez adnego przepisu. Znaem rozmaite sztuczki jzyka
JavaScriptu i miaemrne kawaki kodu, ale nie potrafiem tego
zastosowa do rozwizania typowych problemw na stronach
sieciowych.Oczywicie niektre ksiki zawieray aplikacje JavaScript,
ale nie byy one odpowiednie do stosowania w Sieci.Oczko to wietna
gra, arkusz kalkulacyjny to ciekawa aplikacja, ale trudno je
zamieszcza na swoich stronachsieciowych.
W tej ksice znajduje si szereg przepisw. Nie tylko mona si
dowiedzie, jak sprawdzi uywan przegldark czyumoliwi przewijanie
obrazkw, ale mona rwnie znale tu kompletne aplikacje, ktrych
bdziesz mg uywana swoich stronach. Aplikacje te nie bd tworzone
krok po kroku, od razu zostan zaprezentowane w caoci. Mona
jekopiowa do katalogu serwera sieciowego (lub komputera lokalnego)
i natychmiast uruchamia. Rozdziay tej ksikinaszpikowane s kodem
JavaScript, ktry ma pomc uytkownikom w realizowaniu typowych zada,
takich jakprzeszukiwanie witryny, sporzdzenie spisw treci,
umoliwienie przewijania obrazkw, ogldanie prezentacji,robienie
zakupw i wiele innych. Oczywicie mona te przykady modyfikowa tak,
aby najlepiej pasoway do naszychpotrzeb, ale i tak s one mniej
wicej gotowe do uycia. Oprcz tego do kadej aplikacji doczono
dokadneobjanienie jej dziaania, wic mona sobie sprawdza, jak
zadziaa zmiana poszczeglnych fragmentw kodu.
Co powiniene wiedzieNie jest to ksika dla pocztkujcych, gdy nikt
nie bdzie tu nikogo uczy JavaScriptu, ale bdzie mona sidowiedzie
si, jak go uywa. Nie trzeba by wiarusem JavaScriptu z trzyletnim
staem, jeli jednakinfo.replace(/
-
Wstp11
Ukad ksikiWikszo rozdziaw ma podobny, czteroczciowy ukad.
Wymagania programuTa krtka cz okrela rodowisko wymagane do
uruchomienia aplikacji. Zwykle podawana jest potrzebna
wersjaprzegldarek Netscape Navigator i Microsoft Internet Explorer.
Tutaj take nakrela si to, omawiajc zagadnieniazwizane ze
skalowaniem i monitorowanie wydajnoci.
Struktura programuKiedy ju czytelnikowi znudzi si zabawa z
aplikacj i bdzie chcia zobaczy, co tam siedzi w rodku,
powinienprzeczyta t cz. Tutaj znajdzie omwienie kodu, zwykle wiersz
po wierszu. Jest to cz najdusza, wic wartousi sobie wygodnie, zanim
zacznie si j studiowa.
Techniki jzyka JavaScriptKiedy bdziemy przebija si przez skadni,
pojawi si miejsca, gdzie warto bdzie zatrzyma si na chwili wskaza
techniki, ktre mona doda do arsenau swoich rodkw.
Kierunki rozwojuW tej czci sugerowane s metody dalszego
rozwijania aplikacji. Czasami s to sugestie, a czasem gotowy kod.
Zdarzasi, e nie potrafi si powstrzyma i pisz za czytelnika kod
znajdujcy si w archiwum, ktre mona zaadowa z Sieci.Tak czy inaczej,
warto poczu powiew twrczej weny, a nie ogranicza si tylko do
upartego zapytywania: Nieze, jak towprowadzi na moj stron?.
O kodzieCaa ta ksika mwi o aplikacjach. Nie powinno by zatem
zaskoczeniem, e znajduje si tutaj mnstwo kodu.Niektre aplikacje maj
kilkaset wierszy, wikszo z nich to kolejne strony kodu. W niektrych
wypadkach kod jestnawet powtarzany, aby czytelnik nie musia co
chwil przerzuca kartek midzy kodem programu a jego omwieniem.
Jedn z wad umieszczania kodu w ksice jest... no c, wanie
umieszczenie go w ksice. Czsto strona jest zbytwska, aby umieci w
jednym wierszu tyle, ile by si chciao. Fragment kodu czsto
kontynuowany jest w nastpnymwierszu, i jeszcze w nastpnym... Aby
zwikszy czytelno, pominito komentarze, cho znajdziemy je w
plikach.Osoby odpowiedzialne za skad niele si napracoway, aby
sformatowa kod w miar czytelnie, ale i tak czasemwygodniej moe by
czyta tene kod w edytorze.
Jako e kod powinien by uywany, a nie tylko czytany, wszystkie
aplikacje dostpne s w pliku ZIP, ktry monazaadowa ze strony
sieciowej wydawnictwa OReilly. Warto uda si pod
adreshttp://www.oreilly.com/catalog/jscook/index.html i odnale cze
Download. W kadym rozdziale bdziemyodwoywa si do tego pliku.
Programowanie i testowaniePoniej bez jakiejkolwiek szczeglnej
kolejnoci podaem sprzt i programy uywane podczas tworzenia
koduprezentowanego w tej ksice. W wikszoci przypadkw wszystko
testowano w rodowisku Windows, alew rodowiskach Unix i Mac take nie
powinno by zbyt wielu problemw, a moe nie bdzie ich w ogle.
Sprzt: IBM ThinkPad 55/P75/16M, Compaq Presario/P233/100M, IBM
Aptiva C23/P120/128M, DELL OptiPlex/P2-266/128M, Sun SPARC 20.
Systemy operacyjne: Win95, WinNT Workstation 4.0, WinNT Server
4.0, Solaris 2.5.
Przegldarki: Netscape Navigator 3.0, 3.04 Gold, 4.0, 4.04, 4.07,
4.08, 4.5; Microsoft Internet Explorer 3.0, 3.02, 4.0,4.01,
5.00.
Rozdzielczoci: 640x480, 800x600, 1024x768, 1152x900,
1280x1024.
Oczywicie nie wszystkie aplikacje byy testowane we wszystkich
kombinacjach, jednak staraem si kodowa jaknajbardziej ostronie, aby
w wikszoci moliwych rodowisk wszystko dziaao poprawnie.
-
12
PodzikowaniaMoje nazwisko znajduje si na okadce, mam wic
obowizek i przyjemno podzikowa w tym miejscu wszystkim,ktrzy
przyczynili si do powstania tej ksiki.
Kwestie techniczne pomogli mi rozstrzygn: Steve Quint, James
Chan, Jim Esten, Bill Anderson, Roland Chow,Rodney Myers, Matthew
Mastracci, Giorgio Braga, Brock Beauchamp i inni dlatego im wanie
chciabym podzikowa,zwaszcza za wspomaganie mnie swoj znajomoci
JavaScriptu, a take innych zagadnie programowania.
Specjalnepodzikowania kieruj w stron Patricka Clarka, ktrego kod by
inspiracj aplikacji obsugi pomocy. Dzikuj redaktorowiRichardowi
Komanowi, ktry by otwarty na moje pomysy i umoliwi przelanie ich na
papier, a take TarzeMcGoldrick i Robowi Romano za ich prac wan, cho
niewidoczn.
Serdeczne sowa podzikowania skadam mojej onie, Rndine
Bradenbaugh, za to, e wytrzymaa ze mn, kiedyprzez miesice
wpatrywaem si w monitor i szaleczo stukaem w klawiatur, noc w noc.
Chciabym podzikowawreszcie moim rodzicom za ich wsparcie i
zachcanie mnie do rozwijania umiejtnoci pisarskich.
Chciabym te podzikowa komu, o kim czsto si zapomina czytelnikom.
To wanie czytelnicy zostawiajw ksigarni ciko zarobione pienidze,
aby powstanie ksiki byo w ogle moliwe. Mam nadziej, e wybr tej
ksikiokae si dla czytelnika inwestycj wart wydanych pienidzy.
-
Wprowadzenie
Ta ksika jest niezwyka, gdy mwi o pisaniu w JavaScripcie duych
aplikacji sieciowych. Wikszo ludzi inaczejwidzi zastosowania tego
jzyka. JavaScript zwykle jest (a przynajmniej bywa) stosowany do
dodawania do obrazkwsuwakw przewijania, realizacji licznikw goci,
okrelania stosowanej przegldarki i temu podobnych rzeczy.
Zalety jzyka JavaScriptaden jzyk i adna technologia nie uzyskay
statusu najlepszego rozwizania tworzenia aplikacji sieciowych.
Kadez tych rozwiza ma zalety i wady. Ostatnie postpy w jzyku
JavaScript i innych upowszechniajcych si technik, jakDHTML, Java, a
nawet Macromedia Flash, umoliwiaj JavaScriptowi korzystanie z tych
rozwiza i tworzenienaprawd zoonych systemw sieciowych. Oto jeszcze
kilka innych argumentw przemawiajcych za tworzeniem aplikacjiw
JavaScripcie.
Prostota, szybko i efektywnoJako e JavaScriptu do atwo jest si
nauczy, mona od razu zacz go uywa. Jest to idealne rozwizanie,
kiedychcemy doda swojej witrynie nieco dodatkowej funkcjonalnoci.
Kiedy masz ju za sob podstawy, do tworzenianaprawd interesujcych
aplikacji ju niedaleko.
JavaScript jest jzykiem wysokiego poziomu z duymi moliwociami.
Nie sposb zrobi w tym jzyku niczegona poziomie maszynowym, ale
dostpne s rne waciwoci przegldarki, stron, a czasami take systemu,
w ktrymprzegldarka dziaa. JavaScript nie musi by kompilowany, jak
Java czy C, a przegldarka nie wymaga adowaniamaszyny wirtualnej do
uruchomienia kodu. Po prostu aplikacj si koduje i uruchamia.
JavaScript dziaa take w architekturze obiektowej, podobnie jak
Java i C++. Cechy jzyka, takie jak konstruktoryi dziedziczenie
oparte na prototypach, dodaj nowy poziom abstrakcji. Dziki temu
moliwe jest wielokrotnewykorzystanie tego kodu w naprawd duym
stopniu.
WszechobecnoJavaScript jest zdecydowanie najbardziej popularnym
jzykiem skryptowym w Sieci. Nie tysice, ale miliony
witrynsieciowych zawieraj JavaScript. Jzyk ten jest obsugiwany
przez wikszo najpopularniejszych przegldarek (chotak naprawd mwimy
o JScript w Internet Explorerze). Zarwno Netscape, jak i Microsoft
zdaj si stale poszukiwa
-
14
sposobw rozbudowania tego jzyka. Takie wsparcie oznacza, e mamy
naprawd due szanse na to, e przegldarkanaszego gocia bdzie ten jzyk
obsugiwaa.1
Redukcja obcienia serweraTo wanie bya jedna z podstawowych
przyczyn tak powszechnego przyjcia JavaScriptu. Jzyk ten
pozwalazrealizowa po stronie klienta wiele funkcji, ktre inaczej
musiayby by wykonywane na serwerze. Jednymz najlepszych przykadw
jest sprawdzanie poprawnoci danych. Programici starej szkoy mog
pamita, jak kilka lattemu jedyn metod sprawdzania poprawnoci
danych, wprowadzonych w formularzu HTML, byo przesanie tychdanych
na serwer sieciowy i przekazanie ich skryptowi CGI w celu ich
sprawdzenia.
Jeli dane nie miay adnych bdw, skrypt CGI dziaa dalej normalnie.
Jeli znalezione zostay jakie bdy, skryptzwraca uytkownikowi
komunikat, opisujc problem. Zastanwmy si teraz, jakiego obcienia
zasobw to wymaga.Przesanie formularza wymaga dania HTTP z serwera.
Po podry danych przez Sie skrypt CGI powtrnie jesturuchamiany. Za
kadym razem, kiedy uytkownik si pomyli, cay proces si powtarza.
Uytkownik musi czekana przesanie komunikatu o bdzie, zanim dowie
si, gdzie si pomyli.
Teraz mamy do dyspozycji JavaScript, dlatego moemy sprawdza
zawarto poszczeglnych elementw formularzaprzed odesaniem ich na
serwer sieciowy. Dziki temu zmniejsza si liczba transakcji HTTP i
zdecydowanie zmniejszasi prawdopodobiestwo, e uytkownik pomyli si
przy wprowadzaniu danych. JavaScript moe te odczytywai zapisywa
ciasteczka (cookies), co dotd wymagao odpowiedniego uycia nagwkw w
serwerze sieciowym.
JavaScript rozwija siKiedy pojawi si JavaScript 1.1, nowe
waciwoci: obiekt Image oraz tablica document.images,
pozwalajceprzewija obrazki spowodoway szerokie poruszenie. Pniej
pojawi si JavaScript 1.2. Otworzyy si nowemoliwoci: obsuga DHTML,
warstwy i mnstwo innych udoskonale zdumiay wielu programistw.
Wszystko tobyo zbyt pikne, by mogo by prawdziwe.
Na tym jednak si nie skoczyo. JavaScript sta si standaryzowanym
jzykiem skryptowym powszechnegozastosowania, zgodnym z EMCA-262.
Przynajmniej jedna firma stworzya rodowisko mogce uruchamia
JavaScriptz wiersza polece. Firma Macromedia wstawia odwoania
JavaScript do technologii Flash. Do ColdFusion firmyAllaire wczono
JavaScript do technologii opartej na XML Web Distributed Data
Exchange (WDDX, WymianaDanych Rozproszonych przez Sie). JavaScript
ma coraz wicej waciwoci, coraz wicej opcji... i coraz
wicejpuapek.
By moe nie ma wyboruCzasami mamy przed sob tylko jedn moliw
drog. Zamy, e nasz dostawca usug internetowych nie pozwalauruchamia
skryptw CGI. Co teraz, jeli chcemy doda do swojej strony wysyanie
poczty elektronicznej z formularza lubpragniemy skorzysta z
ciasteczek? Musimy zaj si rozwizaniami dziaajcymi po stronie
klienta. JavaScript spord tegotypu rozwiza jest zdecydowanie
najlepszy.
I wiele innych zaletIstnieje jeszcze sporo innych zalet
stosowania JavaScriptu, a i czytelnik z pewnoci moe t list jeszcze
dalejrozszerzy. Najwaniejsze jest to, e mimo szeregu zalet
technologii realizowanych po stronie serwera aplikacjeJavaScript
maj swoje miejsce w Sieci.
Podstawowa strategia programowania w JavaScriptKiedy budujemy
jakkolwiek aplikacj, czy to w JavaScript, czy nie, w naszym dobrze
zrozumianym interesie jest mie jakstrategi dziaania. Dziki temu
atwiej bdzie uporzdkowa swoje pomysy, szybciej take uda si wszystko
zakodowai przetestowa. Istnieje mnstwo publikacji opisujcych
dokadnie tworzenie aplikacji. Czytelnik musi wybra strategidziaania
najlepiej mu odpowiadajc, nie sposb zatem tutaj zbytnio w ten temat
si zagbia. Jeli jednak bdziemy pisaco midzy znacznikami a , to
pamitanie o pewnych zasadach projektowych niejednokrotniezaoszczdzi
nam blu gowy. Jest to naprawd proste trzeba odpowiedzie sobie po
prostu na pytania: co? kto? jak?
1 Pamitajmy jednak, e czsto uytkownicy wyczaj obsug JavaScriptu.
Dobrze jest od razu sprawdzi, czy uytkownik obsug tego jzyka
wczy, a przynajmniej na pierwszej stronie witryny poinformowa o
koniecznoci wczenia JavaScriptu (przyp. tum.).
-
Wprowadzenie15
Co moe aplikacja?Najpierw musimy ustali, czym aplikacja ma si
zajmowa. Zamy, e chcemy wysya poczt elektronicznz formularza.
Odpowiedzmy na takie pytania:
Ile pl bdzie zawiera formularz? Czy uytkownicy bd sami podawali
adres, czy bd go wybierali z listy? Czy dane przed wysaniem maj by
sprawdzane? Jeli tak, co zamierzamy sprawdza? Wiadomo? Adres
e-mail? Jedno i drugie?
Co dzieje si po wysaniu listu? Czy nastpuje przekierowanie
uytkownika na inn stron, czy nic sinie zmienia?
Ta seria pyta z pewnoci bdzie dusza. Dobr nowin jest to, e jeli
na tyle pyta odpowiemy, bdziemy znacznielepiej wiedzie, co waciwie
chcemy osign.
Kim s nasi odbiorcyZidentyfikowanie adresatw informacji jest
ogromnie wane dla okrelenia wymaga wobec aplikacji. Upewnijmy si,e
dokadnie znamy odpowiedzi przynajmniej na pytania podane niej:
Jakich przegldarek bd uywali odbiorcy? Netscape Navigator? Jakie
wersje: 2.x, 3.x, 4.x czy wysze? Czy aplikacja bdzie uywana w
Internecie, intranecie, czy lokalnie na komputerze? Czy moemy
okreli rozdzielczo uywanych przez uytkownikw monitorw? W jaki sposb
uytkownicy bd przyczeni do Sieci? Modemem 56K, przez cze ISDN, czem
E1 lub E3?Mona by sdzi, e wszystkie pytania poza pytaniem o
przegldark nie maj nic wsplnego z JavaScriptem.czno? Kogo to
obchodzi? Nie musz konfigurowa routerw ani innych tego typu rzeczy.
Tak, to prawda.Nie trzeba by certyfikowanym inynierem Cisco.
Przejrzyjmy szybko te pytania, jedno po drugim, i zobaczmy, comoe
by szczeglnie wane.
Uywana przegldarka jest jedn z najwaniejszych rzeczy. W zasadzie
im nowsza przegldarka, tym nowsz wersjJavaScriptu obsuguje. Jeli na
przykad nasi odbiorcy s wyjtkowo przywizani do NN 2.x i MSIE 3.x
(cho nie maadnego po temu powodu), automatycznie moemy wykreli
przewijanie obrazkw wersje JavaScript i JScriptnie obsuguj obiektw
Image ani document.images.2
Jako e wikszo uytkownikw przesza na wersje 4.x tych przegldarek,
przewijanie obrazkw jest dopuszczalne.Teraz jednak musimy radzi
sobie z konkurujcymi modelami obiektw. Oznacza to, e Twoje
aplikacje musz byprzenone midzy przegldarkami lub musisz pisa
osobne aplikacje dla kadej przegldarki i jej wersji (co moe
bynadaremn nauk).
Gdzie bdzie znajdowaa si aplikacja? W Internecie, w intranecie,
czy te moe na pojedynczym komputerzeprzerobionym na stanowisko
informacyjne? Odpowied na to pytanie da take szereg innych
wytycznych. Jelina przykad aplikacja bdzie dziaaa w Internecie,
moemy by pewni, e do strony bd dobijay si wszelkieistniejce
przegldarki i bd uyway aplikacji (a przynajmniej bd prboway to
zrobi). Jeli aplikacja dziaa tylkow intranecie lub na pojedynczym
komputerze, przegldarki bd standardowe dla danego miejsca. Kiedy to
pisz,jestem konsultantem w firmie bdcej jednym z duych sklepw
Microsoftu. Jeli uywany przeze mnie kod okazujesi zbyt duym
wyzwaniem dla Netscape Navigatora i przegldarka ta sobie z nim nie
radzi, to nie musz si tymprzejmowa, gdy uytkownicy i tak korzystaj
z Internet Explorera.
Wan rzecz jest rozdzielczo monitora. Jeli na stron wstawilimy
tabel o szerokoci 900 pikseli, a uytkownicymaj do dyspozycji
rozdzielczo tylko 800x600, nie zauwa czci nasz cikiej pracy. Czy
mona liczy na to, ewszyscy uytkownicy bd uywali jakiej okrelonej
rozdzielczoci? W przypadku Internetu odpowied jestnegatywna. Jeli
chodzi o intranet, mona mie szczcie. Niektre firmy standaryzuj
komputery PC,oprogramowanie, przegldarki, monitory, a nawet
stosowan rozdzielczo.
Nie mona te pomin zagadnie zwizanych z cznoci. Zamy, e
stworzylimy sekwencj animowan, ktrazarobi tyle, co redni film
Stevena Spielberga (jeli to si uda, to moe powinnimy... hm...
wsppracowa). Dobrze,ale uytkownicy modemw 56K zapewne przed
cigniciem tego filmu zd pj do kina i ten film obejrze, zanimcign
nasz film. Wikszo uytkownikw jest w stanie pogodzi si z tym, e Sie
moe si na chwil zapcha, ale
2 Niektre przegldarki Internet Explorer 3.x dla Maca obsugiway
jednak przewijanie obrazkw (przyp. aut.).
-
16
po jakiej minucie wikszo z nich uda si na inne strony. Trzeba
wic w swoich planach bra pod uwag takeprzepustowo czy.
Jak radzi sobie z przeszkodami?onglowanie wszystkimi tymi
zagadnieniami moe wydawa si do proste, ale rzecz nie jest wcale
taka atwa. Moesi okaza, e nie bdzie si w stanie obsuy wszystkich
wersji przegldarek, rozdzielczoci ekranu lub szczegwzwizanych z
cznoci. Co teraz? Jak uszczliwi wszystkich i nadal zachwyca ich
obrazkiem o wielkoci 500 kB?
Warto rozway jedn lub wicej z poniszych propozycji. Przeczytaj
je wszystkie, aby mc podj decyzj, majckomplet informacji.
Uwzgldniaj wszelkie uywane przegldarkiTa szalenie demokratyczna
metoda polega na daniu moliwie najlepszych wynikw jak najwikszej
liczbie odbiorcw.Takie kodowanie jest zapewne najpowszechniej
stosowanym i najlepszym podejciem. Oznacza to, e starasz siprzede
wszystkim obsuy uytkownikw uywajcych Internet Explorera 4.x i 5.x
oraz Netscape Navigatora 4.x. Jelizrealizujesz wykrywanie
waniejszych przegldarek i zakodujesz aplikacj tak, aby korzystaa z
najlepszych cechwersji 4.x, uwzgldniajc przy tym rnice midzy
przegldarkami, bdziesz mg zrobi wraenie na naprawd duejczci
uytkownikw.
Dyskretnie obniaj jakoTo jest naturalny wniosek wynikajcy z
poprzedniej strategii. Jeli na przykad mj skrypt zostanie
zaadowanydo przegldarki nieobsugujcej nowych cech, otrzymam
paskudne bdy JavaScriptu. Warto uywa wykrywaniaprzegldarki, aby w
przypadku niektrych przegldarek wyczy nowe cechy. Analogicznie mona
adowa rnestrony stosownie do rnych rozdzielczoci monitora.
Mierz niskoTo podejcie polega na zaoeniu, e wszyscy uywaj
przegldarki Netscape Navigator 2.0, ekranu w rozdzielczoci640x480,
modemu 14,4K oraz procesora Pentium 33 MHz. Od razu za wiadomo: nie
mona zastosowa niczegopoza JavaScriptem 1.0. Nie ma mowy o
przewijaniu, o warstwach, wyraeniach regularnych czy
technologiachzewntrznych (pozostaje podzikowa za moliwo uycia
ramek). Teraz wiadomo dobra: nasza aplikacja zawdrujepod strzechy.
Jednak wobec ostatnich zmian samego JavaScriptu nawet to ostatnie
nie musi by prawd. Mierznaprawd nisko, ale rozsdnym zaoeniem wydaje
mi si zakadanie uycia NN 3.x i MSIE 3.x. Pozostawanie niecoz tyu ma
swoje zalety.
Mierz wysokoJeli odbiorca nie ma Internet Explorera 5.0, nie
zobaczy naszej aplikacji, a tym bardziej nie bdzie jej uywa.Dopiero
w tej wersji mona miao korzysta z obiektowego modelu dokumentw
Internet Explorera, modelu zdarze,wizania danych i tak dalej.
Nadmierne oczekiwania dotyczce wersji przegldarek odbiorcw mog
zdecydowanieokroi krg potencjalnej publicznoci.
Udostpniaj wiele wersji jednej aplikacjiMona napisa szereg
wersji swojej aplikacji, na przykad jedn dla Netscape Navigatora,
inn dla Internet Explorera.Taki sposb dziaania nadaje si jednak
tylko dla osb dobrze znoszcych monotoni, jednak moe on przynie
jednwyran korzy. Przypomnijmy sobie, co byo mwione o cznoci z
Sieci. Jako e czsto nie da si sprawdziszerokoci pasma uytkownikw,
mona pozwoli im dokona wyboru. Cz czy ze strony gwnej
umoliwiuytkownikom z poczeniem E1 adowa pen grafik, natomiast
uytkownicy modemw bd mogli skorzysta z wersjiokrojonej.
Uycie jzyka JavaScriptw prezentowanych aplikacjachOpisane
strategie s strategiami podstawowymi. W przykadach z tej ksiki uyto
rnych strategii. Warto jeszczewspomnie o konwencjach programowania
w JavaScripcie. W ten sposb lepiej zrozumiesz przyjte przeze
mnierozwizania oraz ustalisz, czy s one dobre w kadej sytuacji.
Pierwsze pytanie o aplikacj powinno dotyczy tego, czy przyda si
ona do czego gociom odwiedzajcym stron.Kada aplikacja rozwizuje
jeden lub wicej podstawowych problemw. Wyszukiwanie i wysyanie
wiadomoci,pomoc kontekstowa, sprawdzanie lub zbieranie informacji,
przewijanie obrazkw i tak dalej to s rzeczy, ktre lubi
-
Wprowadzenie17
sieciowi eglarze. Jeli planowana aplikacja nie znalaza
dostatecznego uzasadnienia swojego zaistnienia,nie powicaem jej
swojego czasu.
Nastpn kwesti jest to, czy JavaScript pozwala osign potrzebn mi
funkcjonalno. To byo do atwe. Jeliodpowied brzmiaa tak, stawaem do
walki. Jeli nie, to tym gorzej dla JavaScriptu.
Potem przychodzia kolej na edytor tekstowy. Oto niektre zasady
uywane w prezentowanych kodach.
Wielokrotne uycie kodu przyszoci naroduTo wanie tutaj do gosu
dochodz pliki rdowe JavaScriptu. W aplikacjach tych uywane s pliki
z kodem,adowane za pomoc nastpujcej skadni:
Plik jakisPlikJS.js zawiera kod, ktry bdzie uywany przez rne
skrypty. W wielu aplikacjach tej ksiki uywane spliki rdowe
JavaScriptu. To si sprawdza. Po co wymyla co od nowa? Mona take uy
plikw rdowychw celu ukrycia kodu rdowego przed reszt aplikacji.
Wygodne moe by umieszczenie bardzo duej tablicyJavaScriptu w pliku
rdowym. Uycie plikw rdowych jest tak wane, e powiciem im cay
rozdzia 6.
Niektre aplikacje zawieraj kod po prostu wycinany i wklejany z
jednego miejsca w inne. Kod taki moe by dobrymkandydatem na
wydzielenie w plik rdowy. Wklejanie stosowaem po to, aby zbyt czsto
nie powtarza zajrzyjdo kodu pliku bibliotecznego trzy rozdziay
wczeniej. W ten sposb cay czas masz kod przed oczami, pki gonie
zrozumiesz. Kiedy ju aplikacja na stronie bdzie dziaaa tak, jak
sobie tego yczysz, zastanw sinad wydzieleniem czci kodu do plikw
rdowych.
Wydzielanie JavaScriptuMidzy znacznikami i naley umieszcza
moliwie duo kodu w pojedynczym zestawie.
Deklarowanie zmiennych globalnych i tablic na pocztkuNawet jeli
globalne zmienne i tabele maj pocztkowo wartoci pustych cigw lub
wartoci nieokrelone,definiowanie ich blisko pocztku skryptu jest
dobrym sposobem poradzenia sobie z nimi, szczeglnie jeli uywane sw
rnych miejscach skryptu. W ten sposb nie musisz przeglda zbyt wiele
kodu, aby zmieni warto zmiennej:wiesz, e znajdziesz j gdzie na
pocztku.
Deklarowanie konstruktorw po zmiennych globalnychW zasadzie
funkcje tworzce obiekty definiowane przez uytkownika umieszczam
blisko pocztku skryptu. Robi takpo prostu dlatego, e wikszo obiektw
musi powsta na pocztku dziaania skryptu.
Definiowanie funkcji zgodnie z porzdkiem chronologicznymInnymi
sowy staram si definiowa funkcje w takiej kolejnoci, w jakiej bd
wywoywane. Pierwsza funkcjadefiniowana w skrypcie jest wywoywana na
pocztku, druga funkcja jest wywoywana jako nastpna, i tak
dalej.Czasem moe to by trudne lub wrcz niemoliwe, ale dziki temu
przynajmniej poprawia si sposb zorganizowaniaaplikacji i pojawia si
szansa, e funkcje wywoywane po sobie bd w kodzie obok siebie.
Kada funkcja realizuje jedno zadanieStaram si ograniczy
funkcjonalno poszczeglnych funkcji tak, aby kada z nich realizowaa
dokadnie jednozadanie: sprawdzaa dane od uytkownika, odczytywaa lub
ustawiaa ciasteczka, przeprowadzaa pokaz slajdw,pokazywaa lub
ukrywaa warstwy i tak dalej. Teoria jest doskonaa, ale czasem
trudno j wcieli w ycie.W rozdziale 5. zasad t bardzo mocno
naruszam. Funkcje tamtejsze realizuj pojedyncze zadania, ale s
naprawddugie.
W miar moliwoci uywaj zmiennych lokalnychStosuj t zasad w celu
zaoszczdzenia pamici. Jako e zmienne lokalne JavaScriptu znikaj
zaraz po zakoczeniurealizacji funkcji, w ktrej si znajduj,
zajmowana przez nie pami jest zwracana do puli systemu. Jeli
zmiennanie musi istnie przez cay czas dziaania aplikacji, nie tworz
jej jako globalnej, lecz jako lokaln.
-
18
Nastpny krokTeraz powiniene mie ju jakie pojcie o tym, jak
przygotowa si do tworzenia aplikacji JavaScript i jak tworzswoje
aplikacje. Bierzmy si wic do zabawy.
-
Cechy aplikacji: Wydajne wyszukiwanie po stronie klienta Wiele
algorytmw wyszukiwania Sortowanie i dzielenie wynikw
wyszukiwania Skalowalno atwe zapewnienie zgodnoci
z JavaScriptem 1.0Prezentowane techniki: Uycie separatorw
wewntrz
acuchowych do rozdzielania plrekordw
Zagniedanie ptli for Rozsdne uycie metody
document.write() Zastosowanie operatora
trjargumentowego
1
Wyszukiwaniedanychpo stronie klienta
Mechanizm wyszukiwawczy moe si przyda w kadej witrynie, czy
jednak trzeba zmusza serwer do przetwarzaniawszystkich zgaszanych w
ten sposb zapyta? Prezentowane tu rozwizanie umoliwia realizacj
przeszukiwania stronWWW cakowicie po stronie klienta. Zamiast
przesya zapytania do bazy danych lub do serwera aplikacji,
uytkownikpobiera baz danych wraz z danymi stronami. Baza ta jest
zwyk tablic JavaScriptu, zawierajc w kadymelemencie pojedynczy
rekord.
Takie podejcie daje kilka znaczcych korzyci gwnie redukcj
obcienia serwera i skrcenie czasu odpowiedzi.Nie naley zapomina, e
opisywana tu aplikacja jest ograniczona zasobami klienta,
szczeglnie szybkoci procesorai dostpn pamici. Mimo to w wielu
przypadkach moe ona okaza si doskonaym narzdziem. Kod
programuzamieszczono w katalogu ch01 archiwum przykadw, za na
rysunku 1.1 pokazano pierwszy ekran aplikacji.
Program udostpnia dwie metody wyszukiwania, nazwane umownie3 AND
i OR. Poszukiwanie informacji moeodbywa si wedug tytuu i opisu lub
wedug adresu URL dokumentu. Z punktu widzenia uytkownika
obsugaaplikacji jest cakiem prosta: wystarczy wpisa szukany termin
i nacisn Enter. Moliwoci wyszukiwania snastpujce:
Wprowadzenie sw rozdzielonych znakami spacji zwrci wszystkie
rekordy zawierajce dowolny z podanychterminw (logiczne lub OR).
Umieszczenie znaku plus (+) przed wyszukiwanym acuchem spowoduje
wybranie rekordw zawierajcychwszystkie podane hasa (logiczne i
AND).
Wpisanie przed czci lub caym adresem cigu url: spowoduje
wybranie rekordw odpowiadajcychfragmentowi lub caoci podanego
adresu URL.
3 Nazwy te pochodz od oznacze operatorw warunkowych (przyp.
tum.).
-
20
Rysunek 1.1. Rozpoczynamy wyszukiwanie
Pamitaj o archiwum przykadw! Jak napisano we wstpie, wszystkie
prezentowanew ksice programy mona pobra w postaci pliku ZIP z
witryny internetowejwydawcy; plik znajduje si pod adresem
http://www.helion.pl/catalog/jscook/index.html.
Na rysunku 1.2 pokazano wyniki wykonania prostego zapytania.
Wykorzystano tu domyln metod wyszukiwania(bez przedrostkw), a
szukanym sowem byo javascript. Kade przeszukanie powoduje
utworzenie na biecostrony zawierajcej wyniki, po ktrych znajduje si
cze pozwalajce odwoa si do strony z krtk instrukcjobsugi.
Przydatna byaby te moliwo wyszukiwania danych wedug adresw URL.
Na rysunku 1.3 pokazano stron wynikwwyszukiwania zrealizowanego
przy uyciu przedrostka url:, ktry nakazuje wyszukiwarce sprawdzanie
jedynie adreswURL. W tym przypadku szukanym acuchem by tekst html,
co spowodowao zwrcenie wszystkich rekordwzawierajcych w adresie ten
wanie cig. Krtki opis dokumentu poprzedzony jest tym razem jego
adresem URL.Metoda wyszukiwania adresw URL ograniczona jest do
pojedynczych dopasowa (tak jak przy wyszukiwaniudomylnym), nie
powinno to jednak by problemem niewielu uytkownikw ma ambicje
tworzenia zoonychwarunkw wyszukiwania adresw.
Opisywana tu aplikacja pozwala ograniczy liczb wynikw
prezentowanych na pojedynczej stronie i umieszcza na niejprzyciski
pozwalajce na wywietlenie strony nastpnej lub poprzedniej, co
chroni uytkownika przed zagubieniemw kilometrowym tasiemcu wynikw.
Liczba jednoczenie prezentowanych wynikw zaley od
programisty;ustawieniem domylnym jest 10.
-
Rozdzia 1 - Wyszukiwanie danych po stronie klienta21
Rysunek 1.2. Typowa strona z wynikami wyszukiwania
Rysunek 1.3. Strona z wynikami wyszukiwania wedug adresw URL
Wymagania programuNasza aplikacja wymaga przegldarki obsugujcej
jzyk JavaScript 1.1. Jest to dobra wiadomo dla osbuywajcych
przegldarek Netscape Navigator 3 i 4 oraz Internet Explorer 4 i 5,
za natomiast dla uytkownikw IE 3.Osoby, ktrym zaley na zgodnoci z
wczeniejszymi wersjami, nie musz si jednak martwi. Nieco dalej,
wpodrozdziale Kierunki rozwoju, pokaemy jak zadowoli take
uytkownikw Internet Explorera 3 (cho kosztemmoliwoci funkcjonalnych
programu).
Wszelkie programy uruchamiane po stronie klienta zalene s od
zasobw wykonujcego je komputera, co w naszymprzypadku jest
szczeglnie widoczne. O ile mona zaoy, e zasoby klienta cakowicie
wystarcz do uruchomieniasamego kodu, przekazanie mu duej bazy
danych (ponad 6-7 tysicy rekordw) spowoduje spadek wydajnoci, a
wskrajnym przypadku moe doprowadzi do zablokowania komputera.
-
22
Testujc baz danych zawierajc nieco mniej ni 10 tysicy rekordw w
przegldarkach Internet Explorer 4 i NetscapeNavigator 4, autor nie
dowiadczy adnych problemw. Plik rdowy z danymi mia jednak ponad 1
MB; uywanykomputer mia od 24 do 128 MB pamici RAM. Prba wykonania
tego samego zadania z uyciem przegldarkiNetscape Navigator 3.0 Gold
doprowadzia jednak do przepenienia stosu po prostu tablica zawieraa
zbyt wielerekordw. Z drugiej strony wersja zakodowana w jzyku
JavaScript 1.0 i wykonywana w przegldarce Internet Explo-rer 3.02
na komputerze IBM ThinkPad pozwalaa wykorzysta co najwyej 215
rekordw. Nie naley jednak przeraasi t liczb uywany do testowania
laptop by tak stary, e sycha byo, jak szczur biegajc w kko
napdzadynamo do zasilania procesora. Wikszo uytkownikw powinna
dysponowa sprztem umoliwiajcymprzetworzenie wikszej iloci
danych.
Struktura programuOmawiana aplikacja skada si z trzech plikw
HTML (index.html, nav.html oraz main.html) i pliku
rdowegozapisanego w JavaScripcie (records.js). Trzy dokumenty w
jzyku HTML zawieraj uproszczony zestaw ramek, stronpocztkow
pozwalajc wprowadza wyszukiwane hasa oraz stron z instrukcjami,
wywietlan domylnie wgwnej ramce.
Plik nav.htmlNajwaniejsza cz aplikacji znajduje si w pliku o
nazwie nav.html. Okazuje si zreszt, e jedynym miejscem,w ktrym
jeszcze mona znale kod w jzyku JavaScript, s generowane na bieco
strony wynikw. Przyjrzyjmy sitreci przykadu 1.1.
Przykad 1.1. Zawarto pliku nav.html 1 2 3 Wyszukiwanie 4 5 6
Przykad 1.1. Zawarto pliku nav.html (cig dalszy) 7
-
Rozdzia 1 - Wyszukiwanie danych po stronie klienta23
44 function convertString(reentry) { 45 var searchArray =
reentry.split(" "); 46 if (searchType == (SEARCHANY | SEARCHALL)) {
requireAll(searchArray); } 47 else { allowAny(searchArray); } 48 }
49 50 function allowAny(t) { 51 var findings = new Array(0); 52 for
(i = 0; i < profiles.length; i++) { 53 var compareElement =
profiles[i].toUpperCase(); 54 if(searchType == SEARCHANY) { 55 var
refineElement = 56
compareElement.substring(0,compareElement.indexOf('|HTTP')); 57 }
58 else { 59 var refineElement = 60
compareElement.substring(compareElement.indexOf('|HTTP'), 61
compareElement.length); 62 } 63 for (j = 0; j < t.length; j++) {
64 var compareString = t[j].toUpperCase(); 65 if
(refineElement.indexOf(compareString) != -1) { 66
findings[findings.length] = profiles[i]; 67 break; 68 } 69 } 70 }
71 verifyManage(findings);
Przykad 1.1. Zawarto pliku nav.html (cig dalszy) 72 } 73 74
function requireAll(t) { 75 var findings = new Array(); 76 for (i =
0; i < profiles.length; i++) { 77 var allConfirmation = true; 78
var allString = profiles[i].toUpperCase(); 79 var refineAllString =
allString.substring(0, 80 allString.indexOf('|HTTP')); 81 for (j =
0; j < t.length; j++) { 82 var allElement = t[j].toUpperCase();
83 if (refineAllString.indexOf(allElement) == -1) { 84
allConfirmation = false; 85 continue; 86 } 87 } 88 if
(allConfirmation) { 89 findings[findings.length] = profiles[i]; 90
} 91 } 92 verifyManage(findings); 93 } 94 95 function
verifyManage(resultSet) { 96 if (resultSet.length == 0) {
noMatch(); } 97 else { 98 copyArray = resultSet.sort(); 99
formatResults(copyArray, currentMatch, showMatches);100 }101
}102103 function noMatch() {104 docObj.open();105
docObj.writeln('Wyniki wyszukiwania' +106 '' +107 '' +108 '' +109
'"' + document.forms[0].query.value +110 '" - nic nie znaleziono.'
+111 '');112 docObj.close();113
document.forms[0].query.select();114 }115116 function
formatResults(results, reference, offset) {117 var currentRecord =
(results.length < reference + offset ?
-
24
118 results.length : reference + offset);119 docObj.open();120
docObj.writeln('\n\nWyniki wyszukiwania \n' +121 '' +122 '' +123 ''
+124 'Zapytanie: ' +125
parent.frames[0].document.forms[0].query.value + '\n' +126 'Wyniki
wyszukiwania: ' + (reference + 1) + ' - ' +127 currentRecord + ' z
' + results.length + '' +128 '' +129 '\n\n\n\n\t');130 if
(searchType == SEARCHURL) {131 for (var i = reference; i <
currentRecord; i++) {132 var divide = results[i].split("|");133
docObj.writeln('\t' + '' +134 divide[2] + '' + '\t' + '' +
divide[1] + '\n\n');135 }
Przykad 1.1. Zawarto pliku nav.html (dokoczenie)136 }137 else
{138 for (var i = reference; i < currentRecord; i++) {139 var
divide = results[i].split('|');140 docObj.writeln('\n\n\t' + ''
+141 divide[0] + '' + '\t' + '' + divide[1] + '');142 }143 }144
docObj.writeln('\n\t\n\n\n\n');145 prevNextResults(results.length,
reference, offset);146 docObj.writeln('' +147 '\n\n\n\n');148
docObj.close();149 document.forms[0].query.select();150 }151152
function prevNextResults(ceiling, reference, offset) {153
docObj.writeln('');154 if(reference > 0) {155
docObj.writeln('');159 }160 if(reference >= 0 &&
reference + offset < ceiling) {161 var trueTop = ((ceiling -
(offset + reference) < offset) ?162 ceiling - (reference +
offset) : offset);163 var howMany = (trueTop > 1 ? "w" : "");164
docObj.writeln('');168 }169 docObj.writeln('');170 }171172
//-->173 174 175 176 177 178 179 180 Wyszukiwarka pracujca po
stronie klienta181 182183 184 186 187 188 189 190191
-
Rozdzia 1 - Wyszukiwanie danych po stronie klienta25
192 193 Pomoc194 195 196 197 198
Tekst rdowy jest do obszerny. Aby zrozumie, co si tutaj dzieje,
najprociej bdzie rozpocz analiz od pocztkui stopniowo posuwa si
coraz dalej. Na szczcie kod zapisano tak, aby ukad poszczeglnych
funkcji by mniej wicejzgodny z kolejnoci ich uycia.
Analiz kodu rdowego przeprowadzimy w nastpujcej kolejnoci:
plik rdowy records.js, zmienne globalne, funkcje, kod w jzyku
HTML.
Plik records.jsNa pocztek zajmiemy si plikiem rdowym records.js.
Odwoanie do niego umieszczono w znaczniku w wierszu 5.
Plik ten zawiera do dug tablic o nazwie profiles. Ze wzgldu na
spore rozmiary, jego zawarto zostaaw ksice pominita. Po
rozpakowaniu pliku ZIP trzeba bdzie zatem uruchomi edytor tekstw i
otworzy plikch01/records.js (uwaga: to baza danych, z ktrej bdziemy
korzysta!). Kady element bazy jest trzyczciowymacuchem o postaci
np.:
"http://www.serve.com/hotsyte|HotSyte-Zasoby
JavaScriptu|Witryna" +"HotSyte zawiera cza, samouczki, darmowe
skrypty i inne"
Elementy rekordu rozdzielone s znakami kreski pionowej (|).
Znaki te zostan uyte w chwili wywietlaniaodszukanych rekordw bazy
na ekranie. Drug cz rekordu stanowi tytu dokumentu (nie majcy
jednak nicwsplnego z zawartoci znacznika TITLE), cz trzecia to opis
dokumentu, za pierwszy element rekordu to adresURL.
Na marginesie nie ma adnych przeciwwskaza odnonie rozdzielania
elementw rekordu znakami (lub cigamiznakw) innymi ni |. Naley tylko
zapewni, e nie bdzie to aden ze znakw, ktre uytkownik mgby wpisa
wtreci zapytania (mamy do dyspozycji choby cigi &^ czy ~[%).
Nie naley take stosowa lewego ukonika (\): znakten interpretowany
jest przez JavaScript jako pocztek sekwencji unikowej i jego uycie
moe spowodowa zwrceniedziwacznych wynikw wyszukiwania lub nawet
zawieszenie aplikacji.
Dlaczego wszystkie te dane umieszczono w pliku rdowym zapisanym
w JavaScripcie? S ku temu dwie przesanki:moduowo kodu i czysto
zapisu. W przypadku witryn zawierajcych wicej ni kilkaset
pojedynczych stron, plikrekordw najwygodniej bdzie generowa z
uyciem programu uruchamianego na serwerze; zapisanie danych
wpostaci pliku rdowego w JavaScripcie jest w tym przypadku
rozwizaniem nieco lepszym.
Opisanej tu bazy danych mona te uy w innych aplikacjach
wyszukujcych, po prostu wstawiajc w kodzieodwoanie do pliku
records.js. Co wicej, wczenie caego kodu w JavaScripcie do pliku
HTML i wywietlenie go wpostaci rdowej byoby wysoce niepodane.4
Zmienne globalneW wierszach 9 do 16 przykadu 1.1 deklarujemy i
inicjalizujemy zmienne globalne:
var SEARCHANY = 1;var SEARCHALL = 2;var SEARCHURL = 4;var
searchType = '';var showMatches = 10;var currentMatch = 0;var
copyArray = new Array();var docObj = parent.frames[1].document;
4 I jeszcze jedno: jeli uytkownik wyczy obsug JavaScriptu w
przegldarce, bdzie bardzo zdziwiony, kiedy pobierajc stron z
serwera
stwierdzi, e zawierajcy j plik ma ponad 1 MB. Mona sdzi, e
szybko opuci tak stron, aby ju na ni nie wraca (przyp. tum.).
-
26
Techniki jzyka JavaScript:uycie separatorw wewntrz
acuchowych
do rozdzielania pl rekordwOpisywana tu aplikacja bazuje na
wyszukiwaniu fragmentw informacji, podobnie jak ma tomiejsce w
bazie danych. Aby zrealizowa podobny schemat wyszukiwania, program
w Java-Scripcie moe analizowa (przeszukiwa) tablic jednolicie
sformatowanych danych.
Na pierwszy rzut oka mogoby si wydawa, e wystarczy umieci kady
element (adresURL lub tytu strony) w oddzielnym elemencie tablicy.
Rozwizanie takie bdziedziaao, ale moe sprawia sporo kopotw.
Liczb elementw tablicy globalnej mona znacznie zredukowa, czc
poszczeglne a-cuchy za pomoc separatora (na przykad |) w jeden
element. Podczas analizowania po-szczeglnych elementw tablicy uywa
si nastpnie metody split() obiektu String wcelu utworzenia
oddzielnej tablicy dla kadego z elementw. Innymi sowy,
zamiastglobalnej tablicy:var records = new Array("Czterej
pancerni", "pies", "i ich wehiku")
mona wewntrz funkcji zdefiniowa tablic lokaln, na przykadvar
records = "Czterej pancerni|pies|i ich wehiku".split('|');
Mona by pomyle: sze takich, p tuzina innych co za rnica?. Ot w
pierwszejwersji deklarujemy trzy elementy globalne, ktre zajmuj
pami, pki si ich nie poz-bdziemy. W drugim przypadku deklarujemy
tylko jeden element globalny. Trzyelementy tworzone przez funkcj
split('|') podczas przeszukiwania s tylkotymczasowe, gdy tworzone s
lokalnie. Interpreter JavaScriptu likwiduje zmiennrecords po
wykonaniu funkcji wyszukiwania, zwalniajc tym samym pami;
zmniejszasi take ilo kodu. Autor preferuje drug moliwo. Do
zagadnienia tego wrcimypo przyjrzeniu si fragmentowi kodu
odpowiedzialnemu za analiz danych.
Oto znaczenie poszczeglnych zmiennych:SEARCHANY
Nakazuje wyszukiwanie dowolnego z wprowadzonych sw.SEARCHALL
Nakazuje wyszukiwanie wszystkich wprowadzonych sw.SEARCHURL
Nakazuje wyszukiwanie wedug adresu URL (dowolnego z
wprowadzonych sw).searchType
Okrela sposb szukania (zmienna ta uzyskuje warto SEARCHANY,
SEARCHALL lub SEARCHURL).showMatches
Okrela liczb rekordw wywietlanych na jednej stronie
wynikw.currentMatch
Identyfikuje rekord wywietlany jako pierwszy na biecej stronie
wynikw.copyArray
Przechowuje kopi tymczasowej tablicy wynikw, uywan do
wywietlania nastpnej lub poprzedniej grupy.docObj
Identyfikuje dokument znajdujcy si w drugiej ramce. Nie jest to
zbyt istotne dla samej aplikacji, ale pomagautrzyma porzdek w
kodzie, gdy podczas wywietlania wynikw wyszukiwania trzeba
wielokrotnie odwoywasi do wspomnianego obiektu
(parent.frames[1].document). Zastpienie tego odwoania zmienn
docObjpozwala zmniejszy ilo kodu i tworzy centralny punkt, w ktrym
dokonuje si wszelkich zmian.
FunkcjePrzyjrzyjmy si teraz najwaniejszym funkcjom.
-
Rozdzia 1 - Wyszukiwanie danych po stronie klienta27
validate()Kiedy uytkownik nacinie klawisz Enter, funkcja
validate() z wiersza 18 ustala, czego i jak naley szuka.Pamitajmy
tu o trzech zdefiniowanych wczeniej moliwociach:
Wyszukiwanie tytuu i opisu dokumentu; wymagane jest dopasowanie
dowolnego hasa. Wyszukiwanie tytuu i opisu dokumentu; wymagane jest
dopasowanie wszystkich hase. Wyszukiwanie adresu URL lub cieki
dokumentu; wymagane jest dopasowanie dokadnie jednego hasa.Funkcja
validate()okrela przedmiot i sposb wyszukiwania na podstawie
pierwszych kilku przekazanych jejznakw. Metod wyszukiwania ustala
si za pomoc zmiennej searchType. Jeli uytkownik chce wyszukiwa
danewedug dowolnego z podanych hase, zmienna ta ma warto SEARCHANY.
W przypadku wyszukiwania wedug wszystkichpodanych wyrazw, przyjmuje
ona warto SEARCHALL (jest to zreszt ustawienie domylne). Jeli
wreszcie uytkownikwybierze wyszukiwanie wedug adresw, zmienna
searchType przyjmuje warto SEARCHURL. Cay proces
przebieganastpujco:
W wierszu 19 za pomoc metody charAt() obiektu String sprawdzamy,
czy pierwszym znakiem napisu jest plus(+). Jeli zostanie on
odnaleziony, naley uy drugiej metody wyszukiwania (iloczyn
logiczny).
if (entry.charAt(0) == "+") { entry =
entry.substring(1,entry.length); searchType = SEARCHALL; }
W wierszu 23 wykorzystujemy metod substring() obiektu String do
wyszukania cigu url:. W przypadku jegoodnalezienia ustawiana jest
odpowiednio zmienna searchType:
if (entry.substring(0,4) == "url:") { entry =
entry.substring(5,entry.length); searchType = SEARCHURL; }
A co robi metoda substring() w wierszach 20 i 24? Kiedy funkcja
validate() ustali ju, jak ma bywykonywane wyszukiwanie, odpowiednie
znaki (+ oraz url:) przestaj by potrzebne. Wobec tego
validate()usuwa odpowiedni liczb znakw z pocztku acucha i
kontynuuje dziaanie.
Jeli na pocztku napisu nie ma adnego z powyszych cigw, zmiennej
searchType nadawana jest wartoSEARCHANY. Przed wywoaniem funkcji
convertString() wykonywane jest jeszcze drobne czyszczenie
instrukcjewhile w wierszach 28 i 32 usuwaj zbdne odstpy (biae
znaki) z pocztku i koca acucha.Po okreleniu sposobu wyszukiwania i
usuniciu odstpw naley upewni si, e zostao jeszcze co do
wyszukiwania.W wierszu 36 sprawdzamy, czy poszukiwany acuch ma
przynajmniej trzy znaki. Wyniki wyszukiwania krtszegoacucha mog by
mao przydatne, ale ustawienie to mona w razie potrzeby zmieni:
if (entry.length < 3) { alert("Nie moesz wyszukiwa tak
krtkich acuchw. Wysil si troch."); document.forms[0].query.focus();
return;
Jeli wszystko poszo prawidowo, validate() wywouje funkcj
convertString(), przekazujc jej gotowyacuch zapytania (entry).
convertString()Funkcja convertString() realizuje dwie zwizane z
sob operacje: rozdziela acuch na elementy tablicy iwywouje
odpowiedni funkcj wyszukiwania. Metoda split() obiektu String
dzieli wprowadzonyprzez uytkownika napis w miejscach wystpienia
znakw spacji, a wynik wstawia do tablicy searchArray.Realizowane
jest to w pokazanym niej wierszu 45:
var searchArray = reentry.split(" ");
Jeli na przykad uytkownik wpisze w polu wyszukiwania tekst
aplikacje JavaScript klient, w tablicy searchArrayznajd si wartoci
aplikacje, JavaScript i klient (odpowiednio w elementach 0, 1 i 2).
Nastpnie, zalenieod wartoci searchType, funkcja convertString()
wywouje odpowiedni funkcj (wiersze 46 i 47):
if (searchType == (SEARCHALL)) { requireAll(searchArray); }else
{ allowAny(searchArray); }
Jak wida, wywoywana jest jedna z dwch funkcji allowAny() lub
requireAll(). Oba warianty zachowuj sipodobnie, ale te nieco si
rni. Omwimy je poniej.
-
28
allowAny()Jak sugeruje sama nazwa (ang. moe by dowolny), funkcja
ta jest wywoywana w przypadku, gdy aplikacja ma zwrcirekordy
pasujce do przynajmniej jednego sowa. Oto zawarto wierszy 5068:
function allowAny(t) { var findings = new Array(0); for (i = 0;
i < profiles.length; i++) { var compareElement =
profiles[i].toUpperCase(); if(searchType == SEARCHANY) { var
refineElement =
compareElement.substring(0,compareElement.indexOf('|HTTP')); } else
{ var refineElement =
compareElement.substring(compareElement.indexOf('|HTTP'),
compareElement.length); } for (j = 0; j < t.length; j++) { var
compareString = t[j].toUpperCase(); if
(refineElement.indexOf(compareString) != -1) {
findings[findings.length] = profiles[i]; break; }
Obydwie funkcje wyszukujce dziaaj w oparciu o porwnywanie napisw
w zagniedonych ptlach for. Wicejinformacji na ten temat
zamieszczono w ramce Zagniedanie ptli. Ptle for dochodz do gosu w
wierszach 52 i 63.Pierwsza z nich ma za zadanie przejrzenie
wszystkich elementw tablicy profiles (z pliku rdowego). Dla
kadegoelementu tej tablicy druga ptla sprawdza wszystkie elementy
zapytania przekazane przez funkcj convertString().Aby zabezpieczy
si przed pominiciem ktrego z wyszukiwanych rekordw na skutek
wpisania hase z uyciemrnej wielkoci liter, w wierszach 53 i 64
zadeklarowano zmienne lokalne compareElement i
compareString,przypisujc im nastpnie rekord i szukany acuch
zapisane wielkimi literami. Dziki temu nie bdzie miao znaczenia,czy
uytkownik wpisze sowo JavaScript, javascript, czy nawet
jAvasCRIpt.
W funkcji allowAny() nadal trzeba zdecydowa, czy przeszukiwa baz
wedug tytuu i opisu dokumentu, czy wedugadresu URL. Wobec tego
zmienn lokaln refineElement, zawierajc napis porwnywany z szukanymi
sowami,naley ustawi stosownie do wartoci searchType (wiersze 55 lub
59). Jeli searchType ma warto SEARCHANY,zmiennej refineElement
przypisywany jest fragment tekstu zawierajcy tytu i opis dokumentu
pobrany z rekordu.W przeciwnym przypadku searchType musi mie warto
SEARCHURL, wobec czego wartoci refineElementstaje si tekst
zawierajcy adres URL dokumentu.
Przypomnijmy sobie symbole kreski pionowej, pozwalajce
programowi na rozdzielenie poszczeglnych czcirekordw. Metoda
substring() zwraca acuch zaczynajcy si od pozycji zerowej i koczcy
si przed cigiem|HTTP lub napis zaczynajcy si od pierwszego |HTTP i
cigncy si a do koca elementu tablicy. Teraz monaporwnywa rekord z
danymi wpisanymi przez uytkownika (wiersz 65):
if (refineElement.indexOf(compareString) != -1) {
findings[findings.length] = profiles[i]; break; }
Znalezienie cigu compareString w acuchu refineElement oznacza
trafienie (najwyszy czas!). Pierwotnazawarto rekordu (zawierajca
adres URL) przepisywana jest do tablicy findings w wierszu 66. Przy
dopisywaniunowych elementw jako indeksu mona uy wartoci
findings.length.Po znalezieniu pasujcego elementu nie ma ju powodu
dalej sprawdza rekordu. W wierszu 67 znajduje si instrukcjabreak,
ktra przerywa dziaanie ptli porwnujcej for. Nie jest to konieczne,
ale zmniejsza ilo pracy, ktr trzebawykona.
Po przeszukaniu wszystkich rekordw i znalezieniu wszystkich
szukanych sw, w wierszach 95 do 101 funkcjasearchAny() przekazuje
znalezione rekordy z tablicy findings do funkcji
verifyManage().Sukces wyszukiwaniapowoduje wywoanie funkcji
formatResults() wywietlajcej dane. W przeciwnym przypadku
funkcjanoMatch()informuje uytkownika, e nie udao si znale danych
przez niego informacji. FunkcjeformatResults() oraz noMatch()
zostan omwione w dalszej czci rozdziau. Teraz zakoczmy badanie
metodwyszukiwania, omawiajc funkcj requireAll().
-
Rozdzia 1 - Wyszukiwanie danych po stronie klienta29
requireAll()Jeli na pocztku wyszukiwanego acucha znajdzie si
znak plus (+), wywoana zostanie funkcja requireAll(). Jestona
niemal identyczna, jak allowAny(), wyszukuje jednak wszystkie
wpisane przez uytkownika sowa. W przypadkuallowAny() rekord by
dodawany do zbioru wynikowego, gdy tylko dopasowano ktrykolwiek
wyraz; tym razemtrzeba poczeka na porwnanie z rekordem wszystkich
sw; dopiero wtedy mona (ewentualnie) doda go do zbioruwynikowego.
Cao zaczyna si w wierszu 74.
function requireAll(t) { var findings = new Array(); for (i = 0;
i < profiles.length; i++) { var allConfirmation = true; var
allString = profiles[i].toUpperCase(); var refineAllString =
allString.substring(0, allString.indexOf('|HTTP')); for (j = 0; j
< t.length; j++) { var allElement = t[j].toUpperCase(); if
(refineAllString.indexOf(allElement) == -1) { allConfirmation =
false; continue; } } if (allConfirmation) {
findings[findings.length] = profiles[i]; } }
verifyManage(findings); }
Na pierwszy rzut oka funkcja ta jest bardzo podobna do
allowAny(). Zagniedone ptle for, konwersja wielkociliter, zmienna
potwierdzajca to wszystko ju znamy. Rnica pojawia si w wierszach
7980:
var refineAllString = allString.substring(0,
allString.indexOf('|HTTP'));
Zwrmy uwag, e nie sprawdzamy zawartoci zmiennej searchType, jak
miao to miejsce w funkcji allowAny()w wierszu 50. Nie ma takiej
potrzeby requireAll() wywoywana jest tylko wtedy, gd