plik


ÿþRozdziaB 20. Praca z JavaScript Teraz, kiedy dysponujesz ju| podstawow wiedz o jzyku JavaScript, bdziesz mógB przeanalizowa kilka przykBadów praktycznych zastosowaD tego jzyka. W tym rozdziale wykonasz nastpujce zadania: stworzysz generator poBczeD losowych, stworzysz weryfikator poprawno[ci danych formularzy, stworzysz podmieniane obrazki. Tworzenie generatora losowych poBczeD Generator losowych poBczeD jest, najpro[ciej mówic, hiperBczem, które za ka|dym razem przenosi u|ytkownika w inne miejsce. Dawniej jedyn mo|liwo[ci stworzenia tego typu narzdzia byBo zastosowanie skryptów CGI, jednak|e teraz, dziki u|yciu JavaScriptu, wszystkie czynno[ci mog by wykonywane w przegldarce, a nie na serwerze. W kolejnych sekcjach przedstawione zostan trzy ró|ne sposoby tworzenia generatora poBczeD losowych. Pierwszy z nich wykorzystywa bdzie pojedyncz funkcj oraz wBczony znacznik <SCRIPT>, drugi  procedur obsBugi zdarzeD, a trzeci  tablice. WBczone znaczniki <SCRIPT> to znaczniki umieszczone wewntrz znaczników <BODY>. Znacznie czstszym rozwizaniem jest umieszczanie znacznika <SCRIPT> wewntrz znaczników <HAEAD>. wiczenie 20.1:  WBczony generator poBczeD losowych Ten generator bdzie umieszczony wewntrz standardowego dokumentu HTML. Dlatego te| uruchom teraz edytor, którego normalnie u|ywasz do kreowania stron WWW i stwórz w nim nowy plik o nazwie random0.htm. W tym dokumencie stwórz standardow struktur strony WWW, przedstawion na poni|- szym przykBadzie. Bez trudu powiniene[ rozpozna wszystkie u|yte w niej elementy, 568 Cz[ 7. JavaScript i Dynamiczny HTML wBcznie ze znacznikiem <A>, </A>, poznaBe[ je ju| w poprzednich rozdziaBach. Je[li wy- [wietlisz ten dokument w przegldarce, to otrzymasz wyniki przedstawione na rysunku 20.1. <HTML> <HEAD> <TITLE>Generator Losowych PoBczeD</TITLE> </HEAD> <BODY> <H1>Generator Losowych PoBczeD</H1> <P>Odwiedz <A HREF="dummy.htm">losowo wybran</A> stron z listy moich ulubionych.</P> </BODY> </HTML> Rysunek 20.1. Generator losowych poBczeD Teraz nadszedB czas dodania do strony kodu JavaScript, który zamieni umieszczone na niej hiperBcze w generator losowych poBczeD. W pierwszej kolejno[ci umie[ znacznik <SCRIPT> wewntrz znacznika <HEAD>, bezpo[rednio za blokiem znaczników <TITLE>: <TITLE>Generator Losowych PoBczeD</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- zawarto[ skryptu musi by ukryta przed innymi przegldarkami Tu wstaw kod JavaScript // Koniec skryptu --> </SCRIPT> </HEAD> Kolejna czynno[ bdzie polegaBa na dodaniu do strony kodu, który bdzie losowo wybieraB stron docelow hiperBcza, na podstawie listy Twoich ulubionych stron. Wewntrz znacznika <SCRIPT> oraz komentarzy stworzysz dwie funkcje: jedn o nazwie picklink() oraz drug  random(). Zacznijmy od funkcji picklink(). Aby stworzy t funkcj, w pierwszej kolejno[ci zbudujesz jej szkielet: function picklink() { Tu wstaw kod JavaScript } Poni|ej przedstawiony zostaB kod, który umo|liwia poprawne dziaBanie funkcji (w tym przypadku u|yte zostaBy cztery adresy docelowe). Listing 20.1 Funkcja picklink() function picklink() { var linknumber = 4 ; var linktext = "nolink.htm" ; RozdziaB 20. Praca z JavaScript 569 var randomnumber = random() ; var linkselect = Math.round( (linknumber-1) * randomnumber) + 1 ; if ( linkselect == 1 ) { linktext="http://www.netscape.com/" } if ( linkselect == 2 ) { linktext="http://www.lne.com/Web/" } if ( linkselect == 3 ) { linktext="http://java.sun.com/" } if ( linkselect == 4 ) { linktext="http://www.realaudio.com/" } document.write('<A HREF="' + linktext + '">losowo wybran</A>') ; } Aby[ mógB dokBadnie zrozumie, w jaki sposób dziaBa ta funkcja, omówi j linia po li- nii. Pierwsze dwie linie, umieszczone tu| za definicj funkcji, deklaruj zmienne po- mocnicze, wykorzystywane wewntrz funkcji: linknumber, która okre[la ilo[ do- stpnych adresów, spo[ród nich zostanie losowo wybrany adres docelowy hiperBcza oraz zmienna linktext, w której przechowywany jest adres URL losowego hiperB- cza. Kolejna linia, var randomnumber = random();, deklaruje zmienn o nazwie ran- domnumber i przypisuje do niej losowo wygenerowan warto[ z zakresu do 0 do 1, zwrócon jako wynik wykonania funkcji random(). (Funkcj random() zdefiniujemy po zakoDczeniu tworzenia funkcji picklink().) Nastpna linia funkcji wykorzystuje warto[ zmiennej randomnumber do okre[lenia warto[ci kolejnej zmiennej; zmienna ta nosi nazw linkselect. Warto[ tej zmiennej bdzie nale|aBa do przedziaBu pomidzy 1 a linknumber. Cztery instrukcje if, znajdujce si w dalszej cz[ci kodu funkcji, sprawdzaj warto[ zmiennej linkselect i na jej podstawie przypisuj zmiennej linktext jeden z czterech podanych adresów URL. W tym miejscu funkcji mo|esz w analogiczny sposób dopisa do- woln ilo[ kolejnych adresów URL, jednak pamitaj, |e bdziesz musiaB odpowiednio zmodyfikowa warto[ zmiennej linknumber, tak aby odpowiadaBa ona ilo[ci podanych adresów. Po przypisaniu adresu URL do zmiennej linktext kolejnym krokiem bdzie stworze- nie fizycznego hiperBcza. U|yta zostanie do tego celu metoda document.write(): document.write('<A HREF="' + linktext + '">losowo wybran</A>') ; Warto[ podana wewntrz nawiasów korzysta z mo|liwo[ci dodawania do siebie BaDcu- chów znaków. W tym przypadku dodane do siebie zostaj nastpujce BaDcuchy:  <A HREF=" , warto[ zmiennej linktext oraz  ">losowo wybran</A> . Wszystkie te BaDcuchy znaków tworz poprawnie sformuBowany znacznik <A> definiu- jcy hiperBcze. Tak wBa[nie dziaBa funkcja picklink(). Teraz, gdy skoDczyli[my jej omawianie, mo|emy przej[ do kolejnej funkcji  random(). Jej zadaniem jest zwrócenie losowo wygenerowanej liczby z zakresu od 0 do 1. Funkcja random() do okre[lenia losowej liczby wykorzystuje obiekt Date. U|ycie obiektu Date w sposób przedstawiony poni- |ej, pozwala na okre[lenie aktualnego czasu i daty: 570 Cz[ 7. JavaScript i Dynamiczny HTML function random() { var today = new Date(); var seed = today.getTime() + today.getDate(); return (seed * 29 + 1) % 1 - 24 ) / 1024; } Jzyk JavaScript udostpnia znacznie lepszy generator liczb losowych, metod Math.random(). Jednak|e, w przegldarce Netscape Navigator 2.0 metoda ta jest dostpna jedynie w Uniksowej wersji programu. Ograniczenie to zostaBo usunite w Navigatorze 3.0. Z tego powodu, je[li korzystasz z Navigatora 3.0, bdziesz mógB zastpi wywoBanie funkcji random() w funkcji picklink(), wywoBaniem metody Math.random(). Co wicej, bdziesz mógB usun z kodu zródBowego strony caB definicj funkcji random(). Pamitaj jednak, i|, je[li wprowadzisz te zmiany, utracisz mo|liwo[ wykonywania skryptu w przegldarkach Netscape Navigator 2.0, dziaBajcych w systemie Windows. Po zdefiniowaniu obu funkcji, nadszedB czas na stworzenie wBczonego znacznika <SCRIPT> wewntrz kodu strony. Bdzie to ostatnia czynno[, jak bdziesz musiaB wykona, aby zamieni znacznik <A> podany w pocztkowej postaci strony, na losowe hiperBcze wygenerowane za pomoc metody picklink(). Najprostszym sposobem wykonania tego zadania jest wywoBanie funkcji picklink() wewntrz znacznika <BODY>: <P>Odwiedz <SCRIPT LANGUAGE="JavaScript">picklink()</SCRIPT> stron z listy moich ulubionych.</P> Niektórzy pedantyczni twórcy JavaScriptów mog si oburzy, twierdzc, i| skrypty powinny by umieszczane jedynie wewntrz znacznika <HEAD>. W wikszo[ci wypadków bd mieli racj. Jednak|e, dla celów demonstracyjnych, czasami mo|na zBama t reguB. W nastpnym przykBadzie poznasz jednak rozwizanie, które umo|liwi Ci uniknicie u|ycia wBczonego znacznika <SCRIPT>. KoDcowa wersja strony Poni|ej podana zostaBa ostateczna, peBna posta pierwszego generatora losowych poBczeD. Mo|esz j tak|e znalez na CD-ROM-ie doBczonym do ksi|ki. Listing 20.2. JavaScript <HTML> <HEAD> <TITLE>Generator Losowych PoBczeD</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- zawarto[ skryptu musi by ukryta przed innymi przegldarkami function picklink() { // Pamitaj o zmiennej linknumber, która odzwierciedla ilo[ adresów var linknumber = 4 ; var linktext = "nolink.htm" ; var randomnumber = random() ; var linkselect = Math.round( (linknumber-1) * randomnumber) + 1 ; // Mo|esz tutaj doda dowoln ilo[ adresów if ( linkselect == 1 ) { linktext="http://www.netscape.com/" } if ( linkselect == 2 ) RozdziaB 20. Praca z JavaScript 571 { linktext="http://www.lne.com/Web/" } if ( linkselect == 3 ) { linktext="http://java.sun.com/" } if ( linkselect == 4 ) { linktext="http://www.realaudio.com/" } document.write('<A HREF="' + linktext + '">losowo wybran</A>') ;} function random() { var today = new Date() var seed = today.getTime() + today.getDate() seed=(seed * 29 + 1) % 1024 return seed/1024 } // Koniec skryptu --> </SCRIPT> </HEAD> <BODY> <H1>Generator Losowych PoBczeD</H1> <P>Odwiedz <SCRIPT LANGUAGE="JavaScript">picklink()</SCRIPT> stron z listy moich ulubionych.</P> </BODY> </HTML> wiczenie 20.2: Generator poBczeD losowych wykorzystujcy procedur obsBugi zdarzenia Oprócz zBego stylu, przedstawione powy|ej rozwizanie losowego generatora poBczeD, niesie ze sob jeszcze jeden powa|niejszy problem. Otó| mo|e ono czasami dawa nie- przewidziane wyniki w momencie, gdy na stronie bd umieszczone obrazki. Z tego wzgldu najbezpieczniejszym sposobem stworzenia generatora bdzie umieszczenie ca- Bego kodu JavaScript wewntrz znaczników <HEAD>. Takie rozwizanie przysparza jednak kBopotów naszemu generatorowi losowych poB- czeD. W jaki sposób adres hiperBcza mo|e by losowo wybrany, je[li nie mo|na u|y znacznika <SCRIPT> wewntrz znacznika <BODY>? Za ka|dym razem, gdy klikasz na hiperBczu lub na dowolnym elemencie formularza, Netscape Navigator generuje specjalne zdarzenie, które mo|e by obsBu|one za pomoc procedur obsBugi zdarzeD opisanych w poprzednim rozdziale   Tworzenie skryptów w jzyku JavaScript . Dziki temu oraz dziki faktowi, i| wszystkie hiperBcza umiesz- czone na stronie s wBa[ciwo[ciami obiektu document, zobaczysz, jak prosto mo|na zmodyfikowa stron docelow hiperBcza, bez konieczno[ci u|ywania wBczonego znacznika <SCRIPT>. W pierwszej kolejno[ci przyjrzyjmy si modyfikacjom, jakie bdziesz musiaB wprowa- dzi w ciele dokumentu (wewntrz znacznika <BODY>), aby umo|liwi wykorzystanie procedury obsBugi zdarzenia. W poni|szym przykBadzie, w miejscu znacznika <SCRIPT>, u|yjemy normalnego znacznika <A>: <P>Odwiedz <A HREF="dummy.htm">losowo wybran</A> stron z listy moich ulubionych.</P> 572 Cz[ 7. JavaScript i Dynamiczny HTML Teraz skojarz procedur obsBugi zdarzenia onClick z hiperBczem, podajc j jako atrybut znacznika <A>. Gdy procedura obsBugi zdarzenia onClick jest u|ywana jako atrybut znacznika, jej warto[ musi by poprawn instrukcj jzyka JavaScript, bdz wywoBaniem funkcji. W naszym przypadku, bdziemy chcieli wywoBa metod picklink() stworzon w poprzednim wiczeniu i zastpi oryginalny adres hiperBcza (HREF="dummy.htm") adresem zwróconym przez t funkcj. Wykonanie tego zadania jest caBkiem proste, gdy| ka|de hiperBcze jest przechowywane w obiekcie document jako obiekt typu link, a ka|dy obiekt tego typu ma wBa[ciwo[ci okre[lajce adres docelowy, jak, na przykBad, wBa[ciwo[ location, któr poznaBe[ w poprzednim rozdziale. W efekcie, wszystko, co musisz zrobi, to przypisa nowy ad- res hiperBcza wBa[ciwo[ci href obiektu link; musisz to oczywi[cie wykona we- wntrz procedury obsBugi zdarzenia onClick: <P>Odwiedz <A HREF="dummy.htm" onClick="this.href=picklink()">losowo wybran</A> stron z listy moich ulubionych.</P> SBowo kluczowe this ka|e skryptowi w jzyku JavaScript odwoBa si do aktualnego obiektu, bez zwracania uwagi na jego poBo|enie oraz nazw. W tym przykBadzie this wskazuje na obiekt typu link, skojarzony z kliknitym hiperBczem; natomiast wyra|enie this.href umo|liwia dostp do warto[ci wBa[ciwo[ci href tego obiektu. W ten sposób, przypisujc now warto[ wBa[ciwo[ci this.href, zmieniasz jednocze[nie adres docelowy hiperBcza. Kolejnym krokiem po zdefiniowaniu procedury obsBugi zdarzenia onClick bdzie zmodyfikowanie funkcji picklink(). Z funkcji tej mo|esz usun koDcow instruk- cj document.write(), gdy| nie ma ju| potrzeby fizycznego wpisywania czegokol- wiek do strony WWW. Zamiast tego, bdziesz musiaB przekaza warto[ zmiennej linktext jako wynik wykonania funkcji, który zapisywany bdzie we wBa[ciwo[ci this.href. Mo|esz to osign dziki instrukcji return, która powoduje zwrócenie podanej war- to[ci jako wyniku dziaBania funkcji: return linktext; Powy|sza instrukcja ka|e zwróci warto[ zmiennej linktext, okre[lajcej adres URL losowo wybrany przez funkcj picklink(). A wic caBa modyfikacja funkcji pic- klink() bdzie polegaBa na usuniciu wywoBania metody document.write() z ostatniego wiersza funkcji i umieszczeniu na jego miejscu instrukcji return link- text;. KoDcowy kod wiczenia Jak mogBe[ zauwa|y, zmiany wprowadzone w tej wersji generatora losowych poBczeD nie s zbyt du|e, ten przykBad ró|ni si od poprzedniego jedynie usuniciem znacznika <SCRIPT> z wntrza znacznika <BODY> oraz zmian ostatniej instrukcji funkcji pic- klink(). RozdziaB 20. Praca z JavaScript 573 Poni|ej podany zostaB peBny kod strony: Listing 20.3. Dokument HTML <HTML> <HEAD> <TITLE>Generator Losowych PoBczeD</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- zawarto[ skryptu musi by ukryta przed innymi przegldarkami function picklink() { var linknumber = 4 ; var linktext = "nolink.htm" ; var randomnumber = random() ; var linkselect = Math.round( (linknumber-1) * randomnumber) + 1 ; if ( linkselect == 1 ) { linktext="http://www.netscape.com/" } if ( linkselect == 2 ) { linktext="http://www.lne.com/Web/" } if ( linkselect == 3 ) { linktext="http://java.sun.com/" } if ( linkselect == 4 ) { linktext="http://www.realaudio.com/" } return linktext; } function random() { var today = new Date() var seed = today.getTime() + today.getDate() seed=(seed * 29 + 1) % 1024 return seed/1024 } // Koniec skryptu --> </SCRIPT> </HEAD> <BODY> <H1>Generator Losowych PoBczeD</H1> <P>Odwiedz <A HREF="dummy.htm" onClick="this.href=picklink()">losowo wybran </A> stron z listy moich ulubionych.</P> </BODY> </HTML> wiczenie 20.3: Generator poBczeD losowych u|ywajcy tablicy Jedyny problem, jaki pojawia si w ostatnim przykBadzie, polega na konieczno[ci wpi- sywania kolejnych instrukcji if za ka|dym razem, gdy chcesz doda nowe hiperBcze, które mo|e by losowo wybrane. Aby omin ten problem i upro[ci kod skryptów mo- |esz u|y mechanizmu jzyka JavaScript, który pozwala na tworzenie grup warto[ci, tak zwanych tablic. Tablica jest list zmiennych, do których mo|na odwoBywa si za pomoc jednej na- zwy. Dla przykBadu, tablica o nazwie mylinks[] mogBaby zosta u|yta do przecho- wywania listy adresów URL u|ywanych w funkcji picklink(). Dostp do warto[ci ka|dego elementu tablicy mo|na uzyska poprzez umieszczenie odpowiedniej liczby wewntrz nawiasów klamrowych, zapisywanych z prawej strony nazwy tablicy. Liczby 574 Cz[ 7. JavaScript i Dynamiczny HTML te nazywane s indeksami tablicy, a ich warto[ci w JavaScripcie rozpoczynaj si od 1; aby odwoBa si do pierwszego elementu tablicy mylinks nale|y zapisa: my- links[1], a do drugiego, mylinks[2]. Tablica jest uporzdkowanym zbiorem warto[ci. Dostp do jej elementów nastpuje poprzez podanie jej nazwy oraz pozycji warto[ci w tablicy. Tak wic, dla przykBadu, je[li dysponujesz tablic imion swoich znajomych (o nazwie friends) i je[li tablica ta zawiera nastpujce informacje: "Bob", "Susan", "Tom", "Pierre", to odwoBanie friends[1] zwróci warto[ "Bob", odwoBanie friends[2] warto[ "Susan" i tak dalej. Tablice w jzyku JavaScript dziaBaj nieco inaczej ni| tablice, z którymi mogBe[ si spotka w innych jzykach programowania wysokiego poziomu (na przykBad, w jzyku C++). W rzeczywisto[ci tablice u|yte w powy|szym przykBadzie s obiektami, jednak|e JavaScript pozwala na u|ywanie ich jako tablic. Zwró tak|e uwag na to, i| w odró|nieniu od tablic w innych jzykach programowania, tablice w JavaScripcie s indeksowane od 1, a nie od 0. Aby wykorzysta mo|liwo[ci oferowane przez tablice, w pierwszej kolejno[ci powinie- ne[ stworzy maB funkcj zwan konstruktorem. Ta funkcja jest konieczna dlatego, i| tak naprawd tablice s obiektami. Konstruktor MakeArray() ma nastpujc posta: function MakeArray(n) { this.length = n; for (var i = 1; i <= n; i++) { this[i] = 0 } return this ; } Powy|sza funkcja tworzy tablic o n elementach, zapisujc jej dBugo[ w elemencie o indeksie 0. Bdziesz musiaB doBczy t funkcj do wszystkich stron WWW, w któ- rych chcesz tworzy skrypty JavaScript korzystajce z tablic. Po zdefiniowaniu funkcji MakeArray(), bdziesz mógB stworzy tablic mylinks[], o której mówili[my ju| wcze[niej. Tablic t stworzymy za pomoc nastpujcej instrukcji (gdzie warto[ jest ilo[ci elementów tablicy): mylinks = new MakeArray(warto[); Sposób u|ycia tablic przedstawiony w tych przykBadach mo|e Ci nieco namiesza w gBowie. Technicznie rzecz biorc, indeksy tablic w JavaScripcie rozpoczynaj si od 0, tak jak w innych jzykach programowania. Jednak|e, je[li bdziesz u|ywaB metody MakeArray(), to pierwszy element tablicy zapisywany bdzie w komórce o indeksie 1, gdy| komórka o indeksie 0 jest u|ywana do przechowywania dBugo[ci tablicy. W przegldarce Netscape Navigator 2.0 musiaBe[ pisa swoje wBasne konstruktory, sBu|ce do tworzenia tablic. Jednak|e poczwszy od Navigatora 3.0 JavaScript udostpnia specjalny konstruktor o nazwie Array(). Dlatego te| mo|esz, a nawet powiniene[, u|ywa tego wBa[nie konstruktora (oczywi[cie, tworzenie i u|ywanie wBasnych konstruktorów jest wci| dozwolone). Aby u|y tego konstruktora zamiast funkcji MakeArray(), bdziesz musiaB posBu|y si nastpujc instrukcj: mylinks = new Array(warto[); Powy|sza instrukcja tworzy tablic, której komórka o indeksie 0 zawiera warto[ 0. Równie| i w tym wypadku warto[ pierwszego elementu tablicy nie jest zapisywana w komórce o indeksie 0, lecz w komórce o indeksie 1. W naszym przykBadzie bdziemy u|ywali RozdziaB 20. Praca z JavaScript 575 konstruktora MakeArray(). Teraz mo|esz wypeBni tablic mylinks[], przypisujc jej poszczególnym komórkom odpowiednie adresy URL, podobnie jak to robiBe[ z normalnymi zmiennymi. W naszym przykBadzie generatora losowych poBczeD bdziesz mógB doda na pocztku skryptu in- strukcje, tworzce tablic o piciu komórkach i wypeBniajce te komórki odpowiednimi adresami URL. <SCRIPT LANGUAGE="JavaScript"> <!-- zawarto[ skryptu musi by ukryta przed innymi przegldarkami mylinks = new MakeArray(5); mylinks[1] = "http://www.netscape.com/" ; mylinks[2] = "http://www.lne.com/Web/" ; mylinks[3] = "http://java.sun.com/" ; mylinks[4] = "http://www.realaudio.com/" ; mylinks[5] = "http://www.worlds.net/" ; Po zdefiniowaniu tablicy adresów, nadeszBa kolej na zmodyfikowanie kodu funkcji picklink(), tak aby wybieraBa ona adres hiperBcza z losowo wskazanej komórki ta- blicy. Dziki temu u|ycie instrukcji if stanie si niepotrzebne. Poni|ej podana zostaBa nowa wersja kodu funkcji picklink(): function picklink() { linknumber = mylinks[0]; randomnumber = random(); linkselect = Math.round((linknumber-1) * randomnumber) + 1; return mylinks[linkselect]; Co si wBa[ciwie zmieniBo w tej funkcji? Po pierwsze, zwró uwag na warto[ przypi- sywan zmiennej linknumber. W poprzednich przykBadach okre[laBe[ warto[ tej zmien-nej rcznie (np.: linknumber = 5). Jednak|e teraz jej warto[ musi odpowia- da ilo[ci adresów zapisanych w komórkach tablicy mylinks[]. Ilo[ adresów mo|esz bardzo szybko zdoby dziki odwoBaniu si do elementu tablicy mylinks[] o indeksie 0. Zwró tak|e uwag na to, i| ta wersja metody picklink() jest znacznie krótsza od dwóch poprzednich. Skrócenie kodu funkcji byBo mo|liwe dziki usuniciu wszystkich niepotrzebnych ju| instrukcji if i zastpieniu ich pojedyncz instrukcj return my- links [linkselect]. Instrukcja ta powoduje zwrócenie warto[ci znajdujcej si w elemencie tablicy mylinks[linkselect] jako wyniku dziaBania funkcji picklink(). Przy czym linkselect jest losow liczb z zakresu od 1 do linknumber. Mo|esz jednak skróci funkcj picklink() jeszcze bardziej, usuwajc wszystkie zmienne robocze i wykonujc wszystkie operacje w instrukcji return: function picklink() { return mylinks[(Math.round((mylinks[0] - 1) * random()) + 1)]; } KoDcowa posta kodu generatora losowych poBczeD 576 Cz[ 7. JavaScript i Dynamiczny HTML u|ywajcego tablic Kod przedstawiony poni|ej uwzgldnia wszystkie modyfikacje, których dokonaBe[ w tym wiczeniu, wBczenie z doBczeniem konstruktora MakeArray(), stworzeniem i zainicjalizowaniem tablicy adresów oraz ze zmodyfikowaniem kodu funkcji pic- klink(). <HTML> <HEAD> <TITLE>Generator Losowych PoBczeD z wykorzystaniem tablicy</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- zawarto[ skryptu musi by ukryta przed innymi przegldarkami mylinks = new MakeArray(5); mylinks[1] = "http://www.netscape.com/" ; mylinks[2] = "http://www.lne.com/Web/" ; mylinks[3] = "http://java.sun.com/" ; mylinks[4] = "http://www.realaudio.com/" ; mylinks[5] = "http://www.worlds.net/" ; function picklink() { return mylinks[ ( Math.round( ( mylinks[0] - 1) * random() ) + 1 ) ] } function MakeArray(n) { this.length = n; for (var i = 1; i <= n; i++) { this[i] = 0 } return this ; } function random() { var today = new Date() var seed = today.getTime() + today.getDate() return ( (seed * 29 + 1) % 1024 ) / 1024 } // Koniec skryptu --> </SCRIPT> </HEAD> <BODY> <H1>Generator Losowych PoBczeD</H1> <P>Odwiedz <A HREF="dummy.htm" onClick="this.href=picklink()">losowo wybran</A> stron z listy moich ulubionych.</P> </BODY> </HTML> Aby doda nowe hiperBcza do tablicy, bdziesz musiaB wykona jedynie dwie proste czynno[ci. Po pierwsze, zwikszy warto[ podan w instrukcji new MakeArray(warto[), a po drugie, zainicjalizowa now komórk tablicy, wpisujc do niej adres URL. Weryfikacja danych w formularzach W tym rozdziale przedstawimy formularz  Surrealistyczna ankieta widoczny na ry- sunku 20.2. Ten formularz prosi u|ytkowników o podanie kilku, ró|nego typu informa- cji, takich jak imi oraz pBe. Co si dzieje, gdy dane z tego formularza zostaj przesBane na serwer? Przypuszczalnie jaki[ skrypt CGI przeanalizuje je, sprawdzajc, czy zostaBy poprawnie podane, zapisze RozdziaB 20. Praca z JavaScript 577 w odpowiednim pliku lub bazie danych, a nastpnie podzikuje u|ytkownikowi za po- [wicony czas. Jednak|e co si stanie w sytuacji, gdy dane w formularzu nie zostan podane popraw- nie, je[li, dla przykBadu, u|ytkownik zapomni wpisa swoje imi lub wybra warto[ci Rysunek 20.2. Surrealistyczna ankieta w polu okre[lajcym pBe? Skrypt CGI mo|e sprawdzi wszystkie przesBane dane i wy- [wietli odpowiedni informacj o bBdzie. Jednak|e sprawdzenie to musi by wykona- ne na innym komputerze za pomoc skryptu CGI, a zarówno dane, jak i komunikaty o bBdach bd musiaBy by przesBane jeszcze raz pomidzy serwerem i przegldark; proces ten mo|e by wolny i wymaga du|ej ilo[ci ró|nego typu zasobów. Jzyk JavaScript pozwala na przeprowadzenie sprawdzenia poprawno[ci danych, wpi- sanych przez u|ytkownika w formularzu, jeszcze przed ich przesBaniem na serwer  w przegldarce. Mo|liwo[ ta pozwala na zaoszczdzenie czasu zarówno Twojego, jak i u|ytkownika, gdy| wszystkie dane zostan sprawdzone w przegldarce, a na serwer przesBane jedynie poprawne informacje. 578 Cz[ 7. JavaScript i Dynamiczny HTML wiczenie 20.4: Sprawdzanie poprawno[ci danych wpisanych w formularzu Teraz przyjrzyjmy si, w jaki sposób mo|na sprawdzi poprawno[ danych wpisanych w naszym przykBadowym formularzu. Za ka|dym razem, gdy klikasz przycisk wysyBa- jcy dane z formularza, w przegldarce generowane s dwa zdarzenia: onClick oraz onSubmit. Tym razem zainteresowani jeste[my zdarzeniem onSubmit, z którym sko- jarzymy funkcj JavaScript sprawdzajc poprawno[ danych. Aby skojarzy funkcj JavaScriptu ze zdarzeniem onSubmit, bdziesz musiaB zdefi- niowa procedur obsBugi zdarzenia onSubmit jako atrybut znacznika <FORM>: <FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query" onSubmit="return checkform( this )" > W tym przykBadzie warto[ skojarzona z procedur obsBugi zdarzenia onSubmit jest wywoBaniem funkcji o nazwie checkform(). Funkcj t zdefiniujemy za chwil. Naj- pierw jednak przyjrzymy si bli|ej instrukcji return zwracajcej warto[ wykonania funk- cji checkform(). Znaczenie tej instrukcji wymaga bowiem dokBadniejszego wyja[nienia. W pierwszej kolejno[ci zwró uwag na sBowo kluczowe this. Za ka|dym razem, gdy wywoBujesz funkcj, mo|esz przekaza do niej list parametrów, takich jak liczby, BaD- cuchy znaków lub inne obiekty. Parametry te przekazywane s poprzez umieszczenie ich wewntrz pary nawiasów z prawej strony nazwy funkcji. W naszym przypadku, sBowo kluczowe this powoduje przekazanie do funkcji odwoBania obiektu skojarzone- go z aktualnym formularzem. Teraz przyjrzyj si instrukcji return. Jest ona u|ywana w celu przekazania warto[ci do wewntrznej procedury przegldarki, która wywoBaBa procedur obsBugi zdarzenia onSubmit. Dla przykBadu, je[li funkcja checkform() po przeanalizowaniu zawarto[ci formularza zwróci warto[ false, to przekazanie tej warto[ci do wewntrznej procedu- ry przegldarki spowoduje wstrzymanie wysyBania danych z formularza na serwer. Je[li by nie byBo instrukcji return, to warto[ false nie mogBaby zosta przekazana do przegldarki, co umo|liwiBoby przesBanie na serwer niepoprawnych danych. Skrypt sprawdzajcy poprawno[ informacji Teraz zdefiniuj znacznik <SCRIPT> wewntrz znacznika <HEAD>, a nastpnie zadekla- ruj w nim funkcj checkform(). Tym razem bdziesz jednak musiaB zdefiniowa do- datkowo zmienn, w której przechowany zostanie obiekt formularza przekazywany do funkcji. Sposób deklaracji funkcji zostaB przedstawiony w poni|szym przykBadzie: <SCRIPT> <!-- Pocztek skryptu function checkform( thisform ) { RozdziaB 20. Praca z JavaScript 579 W tym przykBadzie, obiektowi reprezentujcemu aktualny formularz zostaBa nadana nazwa thisform. Za pomoc odwoBaD do warto[ci tej zmiennej bdziesz mógB uzyska dostp do wszystkich pól tekstowych, pól wyboru, list i przycisków umieszczonych na formularzu. W pierwszej kolejno[ci bdziesz chciaB sprawdzi, czy u|ytkownik podaB jaki[ BaDcuch znaków w polu Imi. W kodzie HTML, opisujcym ten formularz, w etykiecie <IN- PUT> definiujcej to pole tekstowe, zostaB u|yty atrybut NAME, przypisujcy polu nazw theName. <INPUT TYPE="TEXT" NAME="theName"> Mo|esz u|y tej nazwy w swoich skryptach, odwoBujc si do pola tekstowego jako do  podobiektu formularza. W wyniku tego, do pola tekstowego o nazwie theName bdziesz mógB odwoBywa si za pomoc konstrukcji thisform.theName; warto[ te- go pola bdzie dostpna za pomoc wyra|enia thisform.theName.value. U|ywajc powy|szych informacji oraz stosujc instrukcj if, mo|esz w prosty sposób sprawdzi warto[ pola tekstowego i upewni si, |e zostaBy w nim podane jakie[ in- formacje. Sprawdzenie to mo|e wyglda w nastpujco: if (thisform.theName.value == null || thisform.theName.value == "" ) { alert ("Wpisz nazwisko") ; thisform.theName.focus() ; return false ; } Symbol ||, umieszczony w warunku instrukcji if, informuje JavaScript o tym, i| instrukcje podane w nawiasach klamrowych maj zosta wykonane, je[li którykolwiek lub oba warunki bd speBnione. Dlatego te| symbol || nazywany jest operatorem OR. W pierwszej linii sprawdzane s dwa warunki: czy warto[ this- form.theName.value jest równa warto[ci null oraz czy warto[ this- form.theName.value jest pustym BaDcuchem znaków (""). Gdy pole zostaje stwo- rzone i nie ma w nim jeszcze |adnych informacji, to mówi si, i| posiada ono warto[ null. Warto[ ta jest ró|na od spacji lub umieszczenia w polu pustego BaDcucha zna- ków. Je[li zajdzie którakolwiek z tych sytuacji, na ekranie wy[wietlony zostanie odpo- wiedni komunikat (za pomoc metody alert()), nastpnie kursor zostanie umieszczo- ny w polu (za pomoc wywoBania metody thisform.theName.focus()), zawarto[ pola zostanie zaznaczona (za pomoc metody thisform.theName.select()), a caBa funkcja zwróci warto[ false, uniemo|liwiajc w ten sposób przesBanie formularza. Je[li u|ytkownik podaB imi, to kolejnym krokiem bdzie sprawdzenie, czy okre[liB on swoj pBe. Mo|esz to sprawdzi, testujc warto[ pola theSex. Jednak|e ze wzgldu na to, i| wszystkie przyciski opcji w grupie maj t sam warto[, bdziesz musiaB potraktowa je jako tablic, czyli mo|esz sprawdzi stan pierwszego przycisku w grupie za pomoc wyra|enia thisform.theSex[0].status, drugiego przycisku za pomoc wyra|enia thisform.theSex[1].status, i tak dalej. Je[li przycisk opcji jest zazna- czony, to wBa[ciwo[ status bdzie posiadaBa warto[ true, w przeciwnym razie umieszczona w niej bdzie warto[ false. 580 Cz[ 7. JavaScript i Dynamiczny HTML W odró|nieniu od tablic tworzonych za pomoc konstruktora MakeArray, tablice w formularzach zawsze s indeksowane od 0. Aby przeprowadzi sprawdzenie, czy jedno z pól opcji okre[lajcych pBe u|ytkownika zostaBo wybrane, bdziesz musiaB stworzy zmienn pomocnicz o nazwie selected i przypisa jej warto[ false. Nastpnie bdziesz musiaB przeanalizowa stany wszyst- kich przycisków za pomoc ptli for; je[li wBa[ciwo[ status któregokolwiek z pól bdzie posiadaBa warto[ true, oznacza to bdzie, |e pBe zostaBa wybrana. W takim wypadku bdziesz mógB przypisa warto[ true zmiennej selected (selected = true). W koDcu, je[li po zakoDczeniu ptli for warto[ zmiennej selected wci| b- dzie wynosi false, to funkcja wy[wietli odpowiedni komunikat o bBdzie i zakoDczy si, zwracajc warto[ false. Kod wykonujcy opisane powy|ej czynno[ci ma nastpu- jc posta: var selected = false ; for ( var i = 0; i <= 2 ; ++i ) { if ( thisform.theSex[i].status == true ) { selected = true } } if ( selected == false ) { alert ("Wybierz pBe") ; return false ; } Je[li oba sprawdzenia zakoDczyBy si pomy[lnie (zwracajc warto[ true), to wyni- kiem wykonania funkcji checkform() równie| bdzie warto[ true. Bdzie ona oznaczaBa, i| dane w formularzu zostaBy podane poprawnie i mog zosta przesBane na serwer. Aby zakoDczy funkcj, wpisz nastpujcy kod: return true } Kompletny kod przykBadu skryptu sprawdzajcego poprawno[ danych w formularzu Poni|ej przedstawiony zostaB peBny kod strony powstaBej z poBczenia przedstawionych powy|ej skryptów z kodem HTML, tworzcym formularz. Dziki u|ytym skryptom, na serwer bd przesyBane jedynie poprawne dane. Je[li u|ytkownik popeBni jaki[ bBd pod- czas wprowadzania informacji, przegldarka poinformuje go o tym (patrz rysunek 20.3). RozdziaB 20. Praca z JavaScript 581 Rysunek 20.3. Komunikat informujcy o bBdzie Poni|ej podany zostaB peBny kod przykBadu: Listing 20.4. Kod JavaScript <HTML> <HEAD> <TITLE>Surrealistyczna ankieta - z zastosowaniem JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Pocztek skryptu function checkform( thisform ) { if (thisform.theName.value == null || thisform.theName.value == "" ) { alert ("Wpisz nazwisko") ; thisform.theName.focus() ; return false ; } var selected = false ; for ( var i = 0; i <= 2 ; ++i ) { if ( thisform.theSex[i].status == true ) { selected = true } } if ( selected == false ) { alert ("Wybierz pBe") ; return false ; } return true } // Koniec skryptu --> 582 Cz[ 7. JavaScript i Dynamiczny HTML </SCRIPT> </HEAD> <BODY> <H1>Surrealistyczna ankieta statystyczna</H1> <P>Zapraszamy do wypeBnienia surrealistycznej ankiety statystycznej. WypeBnij j najlepiej jak potrafisz.</P> <P>U|yj przycisku <STRONG>Prze[lij</STRONG> do wysBania swoich odpowiedzi. <HR> <FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query" onSubmit="return checkform( this )" > <P> <STRONG>Nazwisko: </STRONG> <INPUT TYPE="TEXT" NAME="theName"> </P> <P> <STRONG>PBe: </STRONG> <INPUT TYPE="radio" NAME="theSex" VALUE="male">M|czyzna <INPUT TYPE="radio" NAME="theSex" VALUE="female">Kobieta <INPUT TYPE="radio" NAME="theSex" VALUE="null">Obojtniak </P> <P> <STRONG>Mo|liwo[ci (zaznacz wszystkie wBa[ciwe odpowiedzi):</STRONG><BR> <INPUT TYPE="checkbox" NAME="humor">Wisielczy humor<BR> <INPUT TYPE="checkbox" NAME="fish">Ryba<BR> <INPUT TYPE="checkbox" NAME="glycol">Propylen glikolu<BR> <INPUT TYPE="checkbox" NAME="svga">Karta SVGA<BR> <INPUT TYPE="checkbox" NAME="angst">Zmartwienia<BR> <INPUT TYPE="checkbox" NAME="catcon">Katalizator<BR> <INPUT TYPE="checkbox" NAME="vitamin">Niezbdne witaminy i sole mineralne<BR> </P> <P> <INPUT TYPE="SUBMIT" VALUE="Prze[lij wyniki" > <INPUT TYPE="RESET" VALUE="Wyczy[ formularz" onClick="0" ></P> </FORM> <HR> </BODY> </HTML> Tworzenie podmienianych obrazków Podmienianie obrazków to najcz[ciej spotykane zastosowanie skryptów pisanych w j- zyku JavaScript. Skrypty tego typu, po umieszczeniu na obrazku wskaznika myszy, za- stpuj go innym obrazkiem. Takie rozwizania s bardzo czsto wykorzystywane przy tworzeniu elementów nawigacyjnych, gdy| pozwalaj na wizualne poinformowanie u|ytkownika, co si stanie po klikniciu obrazka. Technika ta jest szczególnie przydatna w sytuacjach, gdy tu| obok siebie jest wy[wietlonych kilka elementów nawigacyjnych i chcesz pokaza, który z nich mo|e by aktualnie kliknity. RozdziaB 20. Praca z JavaScript 583 wiczenie 20.5: Podmienianie obrazków przy u|yciu jzyka JavaScript W tym przykBadzie mam zamiar stworzy stron zawierajc obrazek, który zostanie zastpiony innym, po umieszczeniu na nim wskaznika myszy. Stworzenie takiego skryptu wymaga u|ycia trzech komponentów: procedury obsBugi zdarzeD skojarzonej z obrazkiem, skryptu pobierajcego obrazek, który nie jest wy[wietlany w momencie zaBadowania strony oraz funkcji, która zamieni oba obrazki. Przyjrzyjmy si teraz ka|- demu z tych trzech komponentów. Okre[lanie przegldarki Jedn z najwikszych wad jzyka JavaScript, jest to, i| niemal w ka|dej przegldarce dziaBa on nieco inaczej. Mo|liwo[ci, jakimi dysponuje ten jzyk w przegldarce Netsca- pe Communicator 4.6, mog by niedostpne w przegldarce Internet Explorer 3.0. Pro- blem ten jest dodatkowo potgowany faktem, i| mo|liwo[ci jzyka zmieniaj si nawet w ró|nych wersjach tej samej przegldarki. Zazwyczaj programi[ci rozwizywali ten problem, okre[lajc, jaka przegldarka przesBaBa |danie i wykorzystujc te mo|liwo[ci jzyka, które s dostpne w danej przegldarce. Niestety, ten sposób rozwizania pro- blemu jest zbyt skomplikowany, aby mo|na go byBo wykorzysta w jzyku JavaScript. Za ka|dym razem, gdy zostanie udostpniona nowa wersja przegldarki, nale|y zmody- fikowa caBy kod odpowiedzialny za okre[lanie typu programu oraz jego mo|liwo[ci. Na szcz[cie mo|na znalez lepszy sposób rozwizania tego problemu. Zamiast posBu- giwa si niedokBadn technik, polegajc na okre[laniu typu przegldarki, mo|na sprawdzi, czy jest dostpny konkretny obiekt, którym trzeba bdzie si posBu|y i na tej podstawie okre[li sposób dziaBania skryptu. W naszym przypadku bd musiaB po- sBu|y si obiektem document.images, zawierajcym informacje o wszystkich obraz- kach umieszczonych na stronie. A zatem, kod sBu|cy do sprawdzenia mo|liwo[ci prze- gldarki bdzie w tym przypadku bardzo prosty, skBada si on z jednej instrukcji warunkowej: if (document.images) { // tutaj mo|na operowa na obiekcie image } Za ka|dym razem, gdy chc operowa na obrazkach umieszczonych na stronie WWW, umieszczam kod w takiej instrukcji warunkowej. Je[li przegldarka potwierdzi istnienie obiektu document.images, bdzie mo|na go wykorzysta. Skrypt pobierajcy obrazki Umieszczajc na stronie podmieniane obrazki, powiniene[ od razu pobra wszystkie ob- razki, jakich bdziesz u|ywaB. W ten sposób, gdy po raz pierwszy umie[cisz wskaznik myszy na wy[wietlonym obrazku, przegldarka nie bdzie musiaBa pobiera z serwera drugiego, pocztkowo niewidocznego obrazka. Skrypt, pobierajcy obrazki, kopiuje je z serwera i umieszcza w pamici, dziki czemu mo|na je wy[wietli bez zbdnych opóznieD, zaraz po umieszczeniu wskaznika myszy na obrazku, który ma by zastpio- 584 Cz[ 7. JavaScript i Dynamiczny HTML ny. Skrypt ten umieszczany jest w nagBówku strony WWW i tworzy nowy obiekt dla ka|dego obrazka biorcego udziaB w procesie podmieniania. Nasza przykBadowa strona zawiera tylko jeden obrazek, a zatem skrypt pobierajcy bdzie bardzo prosty: if (document.images) { buttonOn = new Image(); buttonOn.src = "przyciskOn.gif"; buttonOff = new Image(); buttonOff.src = "przyciskOff.gif"; } Jak wida, skrypt Badujcy zostaB umieszczony wewntrz kodu sprawdzajcego, czy przegldarka dysponuje wymaganymi mo|liwo[ciami. Skrypt tworzy obiekty reprezen- tujce dwa obrazki,  wBczony oraz  wyBczony . Podczas Badowania strony pliki gra- ficzne, przypisane atrybutowi src obu obiektów Image, zostan pobrane z serwera. Funkcje podmieniajce obrazki Zamiana obrazków wy[wietlonych na stronie WWW wymaga u|ycia dwóch funkcji. Pierwsza z nich zamienia obrazek  wyBczony na  wBczony , a druga odwrotnie, ob- razek  wBczony na  wyBczony . W naszym przykBadzie, funkcje te nosz odpowiednio nazwy: activate oraz deactivate. Poni|ej podaBam ich kod: function activate(nazwa_obrazka) { if (document.images) { document[nazwa_obrazka].src = eval(nazwa_obrazka + "On.src"); } } function deactivate(nazwa_obrazka) { if (document.images) { document[nazwa_obrazka].src = eval(nazwa_obrazka +"Off.src"); } } Zwró uwag, i| tak|e w tym przypadku wykorzystany zostaB kod okre[lajcy mo|li- wo[ci przegldarki, ma on za zadanie ochron u|ytkowników, których przegldarki nie pozwalaj na manipulowanie obrazkami. Obie funkcje oczekuj podania jednego argu- mentu, nazwy obrazka, który ma by zastpiony innym. W naszym przypadku mógB- bym poda nazw podmienianego obrazka, gdy| jest on jedynym podmienianym obraz- kiem na caBej stronie. Jednak przekazanie nazwy obrazka jest znacznie wygodniejszym rozwizaniem, gdy| bdziesz mógB wykorzysta ten sam skrypt na ka|dej stronie WWW, niezale|nie od ilo[ci obrazków, jakie chcesz na niej podmienia. Poni|ej podaBem najwa|niejszy fragment kodu umieszczony w funkcji activate: document[nazwa_obrazka].src = eval(nazwa_obrazka + "On.src"); Wyra|enie document[nazwa_obrazka] stanowi odwoBanie do obiektu strony, które- go nazwa odpowiada nazwie podanej w wywoBaniu funkcji. Powy|sza linia kodu po- woduje zapisanie we wBa[ciwo[ci src tego obiektu nazwy  wBczonej wersji obrazka. RozdziaB 20. Praca z JavaScript 585 WywoBanie funkcji eval() Bczy (tekstowo) argument wywoBania funkcji oraz BaDcuch znaków On.src. A zatem, je[li w wywoBaniu funkcji podamy sBowo  button , to funk- cja eval() zwróci warto[ buttonOn.src (czyli warto[ wBa[ciwo[ci src obiektu buttonOn). Je[li spojrzysz do poprzedniego podrozdziaBu, przekonasz si, i| w skryp- cie pobierajcym obrazki, wBa[ciwo[ci buttonOn.src przypisali[my BaDcuch znaków przyciskOn.gif. A zatem, ta linia kodu przypisuje wBa[ciwo[ci src wskazanego obiektu BaDcuch znaków przyciskOn.gif. Aby caBy ten skrypt zadziaBaB, w skrypcie pobierajcym nale|y stworzy obiekty, któ- rych nazwy odpowiadaj nazwie obrazka umieszczonego na stronie. Dziki temu, po- sBugujc si jednym argumentem, mo|na odwoBa si do obu obiektów obrazków stwo- rzonych w skrypcie pobierajcym oraz do obiektu obrazka wy[wietlonego na stronie. Kod umieszczony w drugiej funkcji, deactivate(), dziaBa wedBug tej samej zasady; jedyn ró|nic jest to, i| powoduje on wy[wietlenie  wyBczonej wersji obrazka. WywoBywanie funkcji Po stworzeniu kodu funkcji odpowiedzialnych za podmienianie obrazków, nastpnym etapem bdzie umieszczenie na stronie samego obrazka oraz procedur obsBugi zdarzeD. Przy podmienianiu obrazków konieczne bdzie stworzenie procedur obsBugi zdarzeD onMouseOver oraz onMouseOut skojarzonych z odpowiednim znacznikiem poBcze- nia. W naszym przykBadzie umieszcz obrazek bezpo[rednio wewntrz poBczenia, jed- nak równie dobrze mogBabym skojarzy podmieniany obrazek z dowolnym innym B- czem umieszczonym na stronie. Jedyn szczególn cech wyró|niajc znacznik obrazka u|yty w tym przykBadzie, jest fakt zastosowania atrybutu name, dziki któremu mog skojarzy z obrazkiem nazwy obiektów u|ytych w skrypcie pobierajcym. Poni|ej podaBam kod sBu|cy do wy[wietlenia obrazka na stronie oraz wywoBywania funkcji zamieniajcych obrazki: <a href="docelowa.html" onMouseOver="activate('button')" onMouseOut="deactivate('button')"> <img name="button" border=0 height=100 width=100 src="przyciskOff.gif"></a> Jak wida, znacznik hiperpoBczenia zawiera atrybuty onMouseOver oraz onMouseOut okre[lajce funkcje, jakie nale|y wykona po zgBoszeniu zdarzeD. Argument przekazany w wywoBaniu funkcji odpowiada nazwie obrazka. PoBczenie wszystkich elementów strony Kiedy ju| stworzysz wszystkie konieczne obrazki i zapiszesz je w odpowiednim folde- rze, bdziesz mógB poBczy wszystkie powy|sze fragmenty skryptów i kodu HTML w jedn, kompletn, dynamiczn stron WWW. Jej peBny kod zródBowy przedstawiBam w listingu 20.5. 586 Cz[ 7. JavaScript i Dynamiczny HTML Listing 20.5. PeBny kod zródBowy <html> <head> <title>PrzykBad podmieniania obrazków w JavaScript</title> <script language="JavaScript"> <!-- //-- zaBaduj obrazki u|ywane w skrypcie if (document.images) { buttonOn = new Image(); buttonOn.src = "przyciskOn.gif"; buttonOff = new Image(); buttonOff.src = " przyciskOff.gif"; } //-- funkcje podmieniajce obrazki function activate(nazwa_obrazka) { if (document.images) { document[nazwa_obrazka].src = eval(nazwa_obrazka + "On.src"); } } function deactivate(nazwa_obrazka) { if (document.images) { document[nazwa_obrazka].src = eval(nazwa_obrazka +"Off.src"); } } // --> </script> </head> <body> <a href="docelowa.html" onMouseOver="activate('button')" onMouseOut="deactivate('button')"> <img name="button" border=0 height=100 width=100 src="przyciskOff.gif"></a> </body> </html> Podsumowanie Jzyk JavaScript dostarcza twórcom stron WWW wielu nowych, fascynujcych mo|li- wo[ci. W tym rozdziale miaBe[ okazj przeanalizowania kilku przykBadowych aplikacji napisanych w tym jzyku. JavaScript nie jest jednak jedynym jzykiem umo|liwiajcym pisanie programów wy- konywanych na stronach WWW. Java, starszy brat JavaScriptu, dostarcza jeszcze wik- szych i bardziej fascynujcych mo|liwo[ci. W kolejnym rozdziale poznasz grup tech- nologii okre[lanych wspólnie jako Dynamiczny HTML, którego podstaw tworzy jzyk JavaScript. RozdziaB 20. Praca z JavaScript 587 Warsztat W tej cz[ci rozdziaBu znajdziesz pytania i odpowiedzi, quiz oraz wiczenia zwizane z wykorzystaniem JavaScriptu. Pytania i odpowiedzi P. Szczerze mówic, sam ju| nie wiem co mam my[le! Jak to w koDcu jest, czy tablice w JavaScripcie rozpoczynaj si od elementu o indeksie 0 czy 1? O. Tablice w JavaScripcie indeksowane s od 0, podobnie jak w innych jzykach pro- gra-mowania. Jednak|e, je[li do tworzenia tablic w Navigatorze 2.0 u|yjesz reko- mendo-wanej przez firm Netscape funkcji MakeArray(), to w efekcie bdziesz u|ywaB tablic, w których elementy umieszczane s, poczwszy od komórki o indek- sie 1. Jest to niesBychanie mylce. Od Navigatora 3.0 mo|esz u|ywa wbudowanej funkcji Array() tworzcej tablice indeksowane od 0. P. Podoba mi si pisanie programów w JavaScripcie; jest ono proste i Batwe do zrozumienia. Wydaje si, |e JavaScript jest doskonaBym jzykiem tak|e do tworzenia aplikacji dziaBajcych na serwerze i zastpujcych dotychczasowe skrypty CGI. Czy faktycznie mog co[ takiego zrobi? O. Firma Netscape te| wpadBa na ten sam pomysB! Skrypty JavaScript uruchamiane na serwerze s jedn z nowych mo|liwo[ci udostpnionych w [rodowisku serwera WWW firmy Netscape. Zrodowisko to zawiera komponent o nazwie LiveWire, któ- ry umo|liwia tworzenie programów JavaScript wykonywanych na serwerze. Kom- ponent ten udostpnia wiele narzdzi pozwalajcych na stosowanie JavaScriptu jako jzyka tworzenia skryptów CGI oraz przetwarzania stron WWW przed ich przesBa- niem do przegldarki u|ytkownika. Komponent LiveWire zostaB opisany w rozdzia- le 27.   Porady i wskazówki na temat serwera WWW . Quiz 1. Czym jest wpisany znacznik <SCRIPT>? 2. Co si dzieje za ka|dym razem, gdy u|ytkownik przegldarki Nestscape Navigator kliknie hiperpoBczenie, przycisk lub element formularza wy[wietlonego na stronie WWW? 3. Czym jest sBowo kluczowe this? 4. W jaki sposób u|ycie tablic mo|e upro[ci skrypty? 5. Dlaczego sprawdzanie poprawno[ci danych przy u|yciu skryptów pisanych w jzyku JavaScript jest bardziej efektywne od sprawdzania poprawno[ci danych w skryptach CGI? 588 Cz[ 7. JavaScript i Dynamiczny HTML Odpowiedzi 1. Wpisany znacznik <SCIRPT> jest znacznikiem umieszczanym wewntrz znacznika <BODY>, a nie wewntrz znacznika <HEAD>. Przewa|nie znacznik <SCRIPT> umieszczany jest wewntrz znacznika <HEAD>. 2. Ka|de kliknicie hiperpoBczenia, przycisku lub elementu formularza powoduje wygenerowanie przez przegldark Netscape Navigator zdarzenia, które mo|na przechwyci i obsBu|y. Informacje na ten temat podaBam w rozdziale 19. 3. SBowo kluczowe this jest specjaln warto[ci informujc JavaScript, |e nale|y odwoBa si od aktualnego obiektu, bez przykBadania wagi do jego nazwy ani poBo|enia. 4. Dziki tablicom mo|na stworzy list zmiennych, do których mo|na si odwoBywa przy u|yciu jednej nazwy. 5. Skrypty pisane w jzyku JavaScript pozwalaj na sprawdzanie poprawno[ci danych po stronie przegldarki, jeszcze zanim formularz zostanie przesBany na serwer WWW. Skrypty CGI s natomiast wykonywane na serwerze, co wymaga przesBania danych z formularza na serwer, a nastpnie wyników dziaBania skryptu z serwera do przegldarki. wiczenia 1. Do listy losowych Bczy stworzonej w wiczeniu 20.3 dodaj nowe Bcza. Zrób to, powikszajc wartosc, u|yt w instrukcji new MakeArray( wartosc ) i dodajc do tablicy nowe elementy. 2. Przyjrzyj si kodowi zródBowemu wiczenia 20.4 i sprawdz, czy byBby[ w stanie zmieni jego posta i wykorzysta go na wBasnej witrynie WWW. 3.

Wyszukiwarka

Podobne podstrony:
r 20 07
ustawa z 20 07 2000 r o ogłaszaniu
07 EDC Revised 1 20 03
Lista licencji trenerskich nr 20 z dnia 26 07 2012 (2)
20 Skazenie sal operacyjnych anestetykami lotnymi Mragowo 07 Palaszkiewicz Pid!452
CNC 07 30 206 00 kolo zebate 12 5M 20
Ling Ling Duo instr 09 07 20
20 złotych 15 07 1947

więcej podobnych podstron