SPIS TRECIOD REDAKCJI.................................................................................................................................. 8 WSTP.............................................................................................................................................. 10 CO POWINIENE WIEDZIE.....................................................................................................................10 UYCIE CZCIONEK...............................................................................................................................10 UKAD KSIKI.................................................................................................................................. 11 Wymagania programu................................................................................................................11 Struktura programu....................................................................................................................11 Techniki jzyka JavaScript.........................................................................................................11 Kierunki rozwoju........................................................................................................................11 O KODZIE.......................................................................................................................................... 11 PROGRAMOWANIE I TESTOWANIE............................................................................................................11 PODZIKOWANIA.................................................................................................................................12 WPROWADZENIE......................................................................................................................... 13 ZALETY JZYKA JAVASCRIPT................................................................................................................ 13 Prostota, szybko i efektywno................................................................................................13 Wszechobecno.........................................................................................................................13 Redukcja obcienia serwera.....................................................................................................14 JavaScript rozwija si................................................................................................................ 14 By moe nie ma wyboru............................................................................................................14 I wiele innych zalet.....................................................................................................................14 PODSTAWOWA STRATEGIA PROGRAMOWANIA W JAVASCRIPT...................................................................... 14 Co moe aplikacja?....................................................................................................................14 Kim s nasi odbiorcy..................................................................................................................15 Jak radzi sobie z przeszkodami?.............................................................................................. 15 UYCIE JZYKA JAVASCRIPT W PREZENTOWANYCH APLIKACJACH........................................................................................................ 16 Wielokrotne uycie kodu przyszoci narodu........................................................................... 17 Wydzielanie JavaScriptu............................................................................................................ 17 Deklarowanie zmiennych globalnych i tablic na pocztku........................................................17 Deklarowanie konstruktorw po zmiennych globalnych........................................................... 17 Definiowanie funkcji zgodnie z porzdkiem chronologicznym..............................................17 Kada funkcja realizuje jedno zadanie...................................................................................... 17 W miar moliwoci uywaj zmiennych lokalnych.....................................................................17 NASTPNY KROK.................................................................................................................................17

2

1.......................................................................................................................................................... 18 WYSZUKIWANIE DANYCH PO STRONIE KLIENTA................................................................................................................ 18 WYMAGANIA PROGRAMU......................................................................................................................20 STRUKTURA PROGRAMU........................................................................................................................21 Plik nav.html.............................................................................................................................. 21 Plik records.js............................................................................................................................ 24 Zmienne globalne.......................................................................................................................24 Funkcje.......................................................................................................................................25 Kod HTML................................................................................................................................. 36 TWORZENIE BAZY DANYCH W JZYKU JAVASCRIPT................................................................................... 36 KIERUNKI ROZWOJU.............................................................................................................................37 Zgodno z jzykiem JavaScript 1.0...........................................................................................37 NICTJDO................................................................................................................................... 37 Odporno na bdy................................................................................................................... 38 Wywietlanie reklam.................................................................................................................. 38 Rozszerzenie moliwoci wyszukiwania..................................................................................... 38 Zapytania predefiniowane..........................................................................................................39 2.......................................................................................................................................................... 40 TEST SPRAWDZANY NA BIECO..................................................................................................................................40 WYMAGANIA PROGRAMU......................................................................................................................43 STRUKTURA PROGRAMU........................................................................................................................43 index.html ramki......................................................................................................................44 question.js plik rdowy JavaScript.......................................................................................45 administer.html...........................................................................................................................47 KIERUNKI ROZWOJU.............................................................................................................................57 Uodpornienie na oszustwa......................................................................................................... 57 Przeksztacenie na ankiet......................................................................................................... 58 3.......................................................................................................................................................... 59 INTERAKTYWNA PREZENTACJA SLAJDW..........................................................................................................59 WYMAGANIA PROGRAMU......................................................................................................................61 STRUKTURA PROGAMU......................................................................................................................... 61 Zmienne......................................................................................................................................64 Funkcje aplikacji........................................................................................................................66 KIERUNKI ROZWOJU.............................................................................................................................77 Losowy dobr slajdw w trybie automatycznym........................................................................77 Animowane GIF-y i suwaki slajdw.......................................................................................... 78 Animacja samych slajdw..........................................................................................................78 4.......................................................................................................................................................... 79 INTERFEJS MULTIWYSZUKIWARKI......................................................................................79 WYMAGANIA PROGRAMU......................................................................................................................81 STRUKTURA PROGRAMU........................................................................................................................81 Przechadzka Alej Pamici........................................................................................................85 Dynamiczne adowanie obrazkw..............................................................................................85

3

Spis treci

Uruchamianie wyszukiwarek..................................................................................................... 86 engineLinks()..............................................................................................................................87 imageSwap()...............................................................................................................................90 callSearch()................................................................................................................................91 KIERUNKI ROZWOJU: ZWIKSZENIE MOLIWOCI DECYDOWANIA PRZEZ UYTKOWNIKA.................................................................92 5.......................................................................................................................................................... 95 IMAGEMACHINE.......................................................................................................................... 95 WYMAGANIA PROGRAMU......................................................................................................................97 STRUKTURA PROGRAMU........................................................................................................................98 Krok 1. Zaadowanie strony.....................................................................................................105 Krok 2. Okrelenie liczby par obrazkw i ustawie domylnych.............................................105 Krok 3. Okrelenie nazw plikw, atrybutw HREF i tak dalej................................................ 106 Krok 4. Wybr Podgldu w celu obejrzenia dziaania kodu....................................................112 Krok 5. Wybr Zmiany danych w celu zrobienia poprawek.................................................... 112 KIERUNKI ROZWOJU: DODANIE ATRYBUTW DO SZABLONU.................................................................................................... 112 Krok 1. Dodanie pl.................................................................................................................113 Krok 2. Tworzenie tablic w setArrays()................................................................................... 113 Krok 3. Pobieranie nowych ustawie domylnych...................................................................113 Krok 4. Dodanie pl tekstowych w generateEntryForm()....................................................... 114 Krok 5. Odwoanie si do nowych wartoci w genJavaScript() i ich uycie...............................................................................................................................114 Krok 6. Generacja dodatkowego HTML w genJavaScript()....................................................114 6........................................................................................................................................................ 116 REALIZACJA PLIKW RDOWYCH JAVASCRIPTU...............................................................................................116ARRAYS.JS........................................................................................................................................ 117 COOKIES.JS....................................................................................................................................... 120 DHTML.JS......................................................................................................................................... 123 EVENTS.JS.........................................................................................................................................124 FRAMES.JS........................................................................................................................................ 128 IMAGES.JS.........................................................................................................................................130 NAVBAR.JS........................................................................................................................................131 NUMBERS.JS......................................................................................................................................133 OBJECTS.JS........................................................................................................................................134 STRINGS.JS........................................................................................................................................137

KIERUNKI ROZWOJU...........................................................................................................................142 7........................................................................................................................................................ 143 USTAWIENIA UYTKOWNIKA OPARTE NA CIASTECZKACH..................................... 143 WYMAGANIA PROGRAMU....................................................................................................................144 STRUKTURA PROGRAMU......................................................................................................................145 prefs.html..................................................................................................................................146 Wprowadzanie zmian............................................................................................................... 156 Zerowanie formularza..............................................................................................................159 dive.html...................................................................................................................................159 KIERUNKI ROZWOJU...........................................................................................................................165

4

Wicej ustawie wygldu......................................................................................................... 165 Gotowe schematy wygldu stron..............................................................................................165 Umoliwienie uytkownikom tworzenia wasnych cz............................................................166 Marketing bezporedni.............................................................................................................166 8........................................................................................................................................................ 167 SHOPPING BAG WZEK SKLEPOWY STWORZONY W JAVASCRIPCIE............................................................................................167 SHOPPING BAG W DWCH SOWACH.....................................................................................................167 Etap 1. adowanie aplikacji.................................................................................................... 168 Etap 2. Przegldanie towarw i wybr....................................................................................169 Etap 3: Przegldanie zamwienia i zmiany w nim.................................................................. 171 Etap 4. Pacenie....................................................................................................................... 173 WYMAGANIA PROGRAMU....................................................................................................................173 STRUKTURA PROGRAMU......................................................................................................................174 ETAP 1. ADOWANIE APLIKACJI.......................................................................................................... 176 Elementy najwyszego poziomu............................................................................................... 177 inventory.js...............................................................................................................................178 ETAP 2. POKAZANIE TOWARW...........................................................................................................185 manager.html........................................................................................................................... 185 ETAP 3. POKAZANIE WSZYSTKICH KATEGORII.........................................................................................195 Wywietlenie pierwszego produktu.......................................................................................... 195 ETAP 4. DODAWANIE PRODUKTW DO KOSZYKA....................................................................................196 Wyszukiwanie produktw.........................................................................................................197 Odwzorowanie produktw i kategorii......................................................................................197 Przeszukiwanie istniejcej bazy danych...................................................................................198 Obsuga nawigacji midzy produktami i kategoriami............................................................. 198 Kod w czach.......................................................................................................................... 200 ETAP 5. ZMIANA ZAMWIENIA, PACENIE............................................................................................. 200 Tworzenie list wyboru.............................................................................................................. 203 Zapisywanie rachunku............................................................................................................. 204 Opakowanie showBag(): pokazywanie podsumowa.............................................................. 205 Koniec wywietlania.................................................................................................................207 A po stronie serwera?.............................................................................................................. 207 Przycisk Wyzeruj iloci............................................................................................................ 208 Przycisk Zmiana koszyka..........................................................................................................208 Zapomniane funkcje................................................................................................................. 208 KIERUNKI ROZWOJU...........................................................................................................................209 Inteligentniejsze towary........................................................................................................... 209 Zwikszenie moliwoci wyszukiwania.................................................................................... 209 Obsuga ciasteczek...................................................................................................................210 9........................................................................................................................................................ 211 SZYFRY W JAVASCRIPCIE...................................................................................................... 211 JAK DZIAAJ SZYFRY........................................................................................................................214 Kilka sw o amaniu kodw.................................................................................................... 214 Szyfr Cezara............................................................................................................................. 215 Szyfr Vigenere.......................................................................................................................... 215 WYMAGANIA PROGRAMU....................................................................................................................215

5

Spis treci

STRUKTURA PROGRAMU......................................................................................................................216 Definiowanie szyfru..................................................................................................................220 Tworzenie szyfru z podstawianiem...........................................................................................222 Podstawowa metoda podstawiania..........................................................................................222 Rne podstawienia do rnych szyfrw..................................................................................223 Jak dziaa shiftIdx.................................................................................................................... 225 Obiekty SubstitutionCipher te s obiektami Cipher............................................................... 226 Tworzenie nowych obiektw SubstitutionCipher..................................................................... 226 Dobr odpowiedniego szyfru................................................................................................... 228 Na koniec..................................................................................................................................228 KIERUNKI ROZWOJU...........................................................................................................................229 10...................................................................................................................................................... 230 ELEKTRONICZNE YCZENIA: POCZTA ELEKTRONICZNA METOD PRZENIE I UPU.................................................................................................. 230 WYMAGANIA PROGRAMU....................................................................................................................232 STRUKTURA PROGRAMU......................................................................................................................232 Pozostae dwa dokumenty........................................................................................................ 235 Co ju wiemy............................................................................................................................ 237 Prosz zaj miejsca!...............................................................................................................238 ledzenie pooenia myszy........................................................................................................240 Wywoywanie wszystkich ikon..................................................................................................240 Przenoszenie ikon.....................................................................................................................240 Kiedy dokumenty ju si zaaduj............................................................................................ 241 Poznaj zmienne.........................................................................................................................245 Wywietlanie ycze.................................................................................................................246 Obrazki po kolei....................................................................................................................... 248 Utrzymanie ikon na miejscu.....................................................................................................250 Sprawdzanie, co otrzymalimy.................................................................................................252 Ostateczne tworzenie kartki..................................................................................................... 252 Wysyanie ycze......................................................................................................................254 Uwaga...................................................................................................................................... 255 PO STRONIE SERWERA........................................................................................................................ 255 KIERUNKI ROZWOJU...........................................................................................................................255 Dodanie cza wstecz...........................................................................................................255 Dodanie obrazkw tematycznych.............................................................................................256 Banery reklamowe....................................................................................................................256 yczenia bardziej interaktywne................................................................................................256 11...................................................................................................................................................... 257 POMOC KONTEKSTOWA......................................................................................................... 257 WYMAGANIA PROGRAMU....................................................................................................................259 STRUKTURA PROGRAMU......................................................................................................................259 Pomoc kontekstowa..................................................................................................................260 Pokazywanie i ukrywanie dodatkowych informacji................................................................. 262 Tworzenie warstw.....................................................................................................................264 KIERUNKI ROZWOJU...........................................................................................................................266 Spis treci................................................................................................................................. 267 Przeszukiwanie plikw pomocy................................................................................................267

6

Pytanie do specjalisty...............................................................................................................267 Pomoc telefoniczna.................................................................................................................. 267

Od redakcjiNiniejsza ksika to gotowy zestaw receptur podobnie jak ksika kucharska. O wirtualnym koszyku na zakupy mona myle jako o ciasteczkach cebulowych z past ososiow. W kadym rozdziale podano kod i dokumentacj przydatnej aplikacji zwykle napisanej cakowicie w JavaScripcie. Mona wszystkie dania przygotowywa tak, jak to poda autor ksiki, ale mona te sign do pewnych sugestii, aby wykorzysta je w swoich pomysach. Na rynku znajduj si ksiki zawierajce proste przepisy, jak zrobi jakie drobiazgi i jak ozdobi JavaScriptem swoj stron sieciow, 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 nie jest na pewno podawanie treci w mao elastycznej formie, ale pomoc w tworzeniu kodu. Zapewne takie pozycje ksikowe, zawierajce receptury, bdzie mona spotka coraz czciej. Richard Koman, Redaktor

WstpCzego dotychczas brakowao. Zgbiaem stosy ksiek o JavaScripcie, ogldaem kolejne witryny sieciowe wprost ociekajce 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 kuchni penej wszelakich skadnikw jada, ale bez adnego przepisu. Znaem rozmaite sztuczki jzyka JavaScriptu i miaem rne 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 stronach sieciowych. W tej ksice znajduje si szereg przepisw. Nie tylko mona si dowiedzie, jak sprawdzi uywan przegldark czy umoliwi przewijanie obrazkw, ale mona rwnie znale tu kompletne aplikacje, ktrych bdziesz mg uywa na swoich stronach. Aplikacje te nie bd tworzone krok po kroku, od razu zostan zaprezentowane w caoci. Mona je kopiowa do katalogu serwera sieciowego (lub komputera lokalnego) i natychmiast uruchamia. Rozdziay tej ksiki naszpikowane s kodem JavaScript, ktry ma pomc uytkownikom w realizowaniu typowych zada, takich jak przeszukiwanie witryny, sporzdzenie spisw treci, umoliwienie przewijania obrazkw, ogldanie prezentacji, robienie zakupw i wiele innych. Oczywicie mona te przykady modyfikowa tak, aby najlepiej pasoway do naszych potrzeb, ale i tak s one mniej wicej gotowe do uycia. Oprcz tego do kadej aplikacji doczono dokadne objanienie 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 si dowiedzie si, jak go uywa. Nie trzeba by wiarusem JavaScriptu z trzyletnim staem, jeli jednak info.replace(/