Javascript - Receptury

269
SPIS TREŚCI OD REDAKCJI .................................................................................................................................. 9 WSTĘP.............................................................................................................................................. 10 CO POWINIENEŚ WIEDZIEĆ .............................................................................................................. 10 UŻYCIE CZCIONEK........................................................................................................................... 10 UKŁAD KSIĄŻKI .............................................................................................................................. 11 Wymagania programu ............................................................................................................... 11 Struktura programu ................................................................................................................... 11 Techniki języka JavaScript ......................................................................................................... 11 Kierunki rozwoju ........................................................................................................................ 11 O KODZIE ........................................................................................................................................ 11 PROGRAMOWANIE I TESTOWANIE ................................................................................................... 11 PODZIĘKOWANIA ............................................................................................................................ 12 WPROWADZENIE ......................................................................................................................... 13 ZALETY JĘZYKA JAVASCRIPT.......................................................................................................... 13 Prostota, szybkość i efektywność ............................................................................................... 13 Wszechobecność ......................................................................................................................... 13 Redukcja obciążenia serwera .................................................................................................... 14 JavaScript rozwija się ................................................................................................................ 14 Być może nie ma wyboru............................................................................................................ 14 I wiele innych zalet ..................................................................................................................... 14 PODSTAWOWA STRATEGIA PROGRAMOWANIA W JAVASCRIPT ........................................................ 14 Co może aplikacja? .................................................................................................................... 15 Kim są nasi odbiorcy ................................................................................................................. 15 Jak radzić sobie z przeszkodami? .............................................................................................. 16 Uwzględniaj wszelkie używane przeglądarki ........................................................................ 16 Dyskretnie obniżaj jakość ...................................................................................................... 16 Mierz nisko ............................................................................................................................ 16 Mierz wysoko......................................................................................................................... 16 Udostępniaj wiele wersji jednej aplikacji .............................................................................. 16 UŻYCIE JĘZYKA JAVASCRIPT W PREZENTOWANYCH APLIKACJACH ................................................ 16 Wielokrotne użycie kodu przyszłością narodu ........................................................................... 17 Wydzielanie JavaScriptu ............................................................................................................ 17 Deklarowanie zmiennych globalnych i tablic na początku ........................................................ 17 Deklarowanie konstruktorów po zmiennych globalnych ........................................................... 17 Definiowanie funkcji zgodnie z porządkiem „chronologicznym”.............................................. 17

Transcript of Javascript - Receptury

  • 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