R_20_07.PDF

Rozdział 20.

Praca z JavaScript

Teraz, kiedy dysponujesz już podstawową wiedzą o języku JavaScript, będziesz mógł

przeanalizować kilka przykładów praktycznych zastosowań tego języka.

W tym rozdziale wykonasz następujące zadania:

stworzysz generator połączeń losowych,

stworzysz weryfikator poprawności danych formularzy,

stworzysz podmieniane obrazki.

Tworzenie generatora losowych połączeń

Generator losowych połączeń jest, najprościej mówiąc, hiperłączem, które za każdym

razem przenosi użytkownika w inne miejsce. Dawniej jedyną możliwością stworzenia

tego typu narzędzia było zastosowanie skryptów CGI, jednakże teraz, dzięki użyciu

JavaScriptu, wszystkie czynności mogą być wykonywane w przeglądarce, a nie na

serwerze.

W kolejnych sekcjach przedstawione zostaną trzy różne sposoby tworzenia generatora

połączeń losowych. Pierwszy z nich wykorzystywać będzie pojedynczą funkcję oraz

włączony znacznik <SCRIPT> , drugi — procedurę obsługi zdarzeń, a trzeci — tablice.

Włączone znaczniki <SCRIPT> to znaczniki umieszczone wewnątrz znaczników <BOD

Znacznie częstszym roz

Y> .

wiązaniem jest umieszczanie znacznika <SCRIPT> wewnątrz

znaczników <HAEAD> .

Ćwiczenie 20.1 : „Włączony” generator połączeń losowych

Ten generator będzie umieszczony wewnątrz standardowego dokumentu HTML.

Dlatego też uruchom teraz edytor, którego norma

W tym dokumencie stwórz standardową strukturę strony WWW, przedstawioną na poniż-

szym przykładzie. Bez trudu powinieneś rozpoznać wszystkie użyte w niej elementy,

lnie używasz do kreowania stron

WWW i stwórz w nim nowy plik o nazwie random0.htm .

568

Część 7. JavaScript i Dynamiczny HTML

włącznie ze znacznikiem <A>, </A>, poznałeś je już w poprzednich rozdziałach. Jeśli wy-

świetlisz ten dokument w przeglądarce, to otrzymasz wyniki przedstawione na rysunku 20.1.

<HTML>

<HEAD>

<TITLE>Generator Losowych Połączeń</TITLE>

</HEAD>

<BODY>

<H1>Generator Losowych Połączeń</H1>

<P>Odwiedź <A HREF="dummy.htm">losowo wybraną</A>

stronę z listy moich ulubionych.</P>

</BODY>

</HTML>

Rysunek 20.1.

Generator

losowych połączeń

Teraz nadszedł czas dodania do strony kodu JavaScript, który zamieni umieszczone na

niej hiperłącze w generator losowych połączeń. W pierwszej kolejności umieść

znacznik <SCRIPT> wewnątrz znacznika <HEAD> , bezpośrednio za blokiem znaczników

<TITLE> :

<TITLE>Generator Losowych Połączeń</TITLE>

<!-- zawartość skryptu musi być ukryta przed innymi przeglądarkami

Tu wstaw kod JavaScript

// Koniec skryptu -->

</SCRIPT>

</HEAD>

Kolejna czynność będzie polegała na dodaniu do strony kodu, który będzie losowo

wybierał stronę docelową hiperłącza, na podstawie listy Twoich ulubionych stron.

Wewnątrz 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 został kod, który umożliwia poprawne działanie funkcji (w tym

przypadku użyte zostały cztery adresy docelowe).

Listing 20.1 Funkcja picklink()

function picklink() {

var linknumber = 4 ;

var linktext = "nolink.htm" ;

Rozdział 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ógł dokładnie zrozumieć, w jaki sposób działa ta funkcja, omówię ją linia po li-

nii. Pierwsze dwie linie, umieszczone tuż za definicją funkcji, deklarują zmienne po-

mocnicze, wykorzystywane wewnątrz funkcji: linknumber , która określa ilość do-

stępnych adresów, spośród nich zostanie losowo wybrany adres docelowy hiperłącza

oraz zmienna linktext , w której przechowywany jest adres URL losowego hiperłą-

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 zakończeniu tworzenia funkcji picklink() .) Następna linia funkcji wykorzystuje

wartość zmiennej randomnumber do określenia wartości kolejnej zmiennej; zmienna ta

nosi nazwę linkselect . Wartość tej zmiennej będzie należała do przedziału pomiędzy 1

a linknumber .

Cztery instrukcje if , znajdujące 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 pamiętaj, że będziesz musiał odpowiednio

zmodyfikować wartość zmiennej linknumber , tak aby odpowiadała ona ilości podanych

adresów.

Po przypisaniu adresu URL do zmiennej linktext kolejnym krokiem będzie stworze-

nie fizycznego hiperłącza. Użyta zostanie do tego celu metoda document.write() :

document.write('<A HREF="' + linktext + '">losowo wybraną</A>') ;

Wartość podana wewnątrz nawiasów korzysta z możliwości dodawania do siebie łańcu-

chów znaków. W tym przypadku dodane do siebie zostają następujące łańcuchy:

‘<A HREF="’ , wartość zmiennej linktext oraz ‘">losowo wybraną</A>’ .

Wszystkie te łańcuchy znaków tworzą poprawnie sformułowany znacznik <A> definiu-

jący hiperłącze.

Tak właśnie działa funkcja picklink() . Teraz, gdy skończyliś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;

}

Język JavaScript udostępnia znacznie lepszy generator liczb losowych, metodę

Math.random() . Jednakże, w przeglądarce Netscape Navigator 2.0 metoda ta jest dostępna

jedynie w Uniksowej wersji programu. Ograniczenie to zostało usunięte w Navigatorze 3.0. Z

tego powodu, jeśli korzystasz z Navigatora 3.0, będziesz mógł zastąpić wywołanie funkcji

random() w funkcji picklink() , wywołaniem metody Math.random() . Co więcej,

będziesz mógł usunąć z kodu źródłowego strony całą definicję funkcji random() . Pamiętaj

jednak, iż, jeśli wprowadzisz te zmiany, utracisz możliwość wykonywania skryptu

w przeglądarkach Netscape Navigator 2.0, działających w systemie Windows.

Po zdefiniowaniu obu funkcji, nadszedł czas na stworzenie włączonego znacznika

<SCRIPT> wewnątrz kodu strony. Będzie to ostatnia czynność, jaką będziesz musiał

wykonać, aby zamienić znacznik <A> podany w początkowej postaci strony, na losowe

hiperłącze wygenerowane za pomocą metody picklink() . Najprostszym sposobem

wykonania tego zadania jest wywołanie funkcji picklink() wewnątrz znacznika

<BODY> :

<P>Odwiedź <SCRIPT LANGUAGE="JavaScript">picklink()</SCRIPT>

stronę z listy moich ulubionych.</P>

Niektórzy pedantyczni twórcy JavaScriptów mogą się oburzyć, twierdząc, iż skrypty powinny

być umieszczane jedynie wewnątrz znacznika <HEAD> . W większości wypadków będą mieli

rację. Jednakże, dla celów demonstracyjnych, czasami można złamać tę regułę. W następnym

przykładzie poznasz jednak rozwiązanie, które umożliwi Ci uniknięcie użycia włączonego

znacznika <SCRIPT> .

Końcowa wersja strony

Poniżej podana została ostateczna, pełna postać pierwszego generatora losowych połączeń.

Możesz ją także znaleźć na CD-ROM-ie dołączonym do książki.

Listing 20.2. JavaScript

<HTML>

<HEAD>

<TITLE>Generator Losowych Połączeń</TITLE>

<!-- zawartość skryptu musi być ukryta przed innymi przeglądarkami

function picklink() {

// Pamiętaj 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 )

Rozdział 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 Połączeń</H1>

<P>Odwiedź <SCRIPT LANGUAGE="JavaScript">picklink()</SCRIPT>

stronę z listy moich ulubionych.</P>

</BODY>

</HTML>

Ćwiczenie 20.2 : Generator połączeń losowych

wykorzystujący procedurę obsługi zdarzenia

Oprócz złego stylu, przedstawione powyżej rozwiązanie losowego generatora połączeń,

niesie ze sobą jeszcze jeden poważniejszy problem. Otóż może ono czasami dawać nie-

przewidziane wyniki w momencie, gdy na stronie będą umieszczone obrazki. Z tego

względu najbezpieczniejszym sposobem stworzenia generatora będzie umieszczenie ca-

łego kodu JavaScript wewnątrz znaczników <HEAD> .

Takie rozwiązanie przysparza jednak kłopotów naszemu generatorowi losowych połą-

czeń. W jaki sposób adres hiperłącza może być losowo wybrany, jeśli nie można użyć

znacznika <SCRIPT> wewnątrz znacznika <BODY> ?

Za każdym razem, gdy klikasz na hiperłączu lub na dowolnym elemencie formularza,

Netscape Navigator generuje specjalne zdarzenie, które może być obsłużone za pomocą

procedur obsługi zdarzeń opisanych w poprzednim rozdziale — „Tworzenie skryptów

w języku JavaScript”. Dzięki temu oraz dzięki faktowi, iż wszystkie hiperłącza umiesz-

czone na stronie są właściwościami obiektu document , zobaczysz, jak prosto można

zmodyfikować stronę docelową hiperłącza, bez konieczności używania włączonego

znacznika <SCRIPT> .

W pierwszej kolejności przyjrzyjmy się modyfikacjom, jakie będziesz musiał wprowa-

dzić w ciele dokumentu (wewnątrz znacznika <BODY> ), aby umożliwić wykorzystanie

procedury obsługi zdarzenia. W poniższym przykładzie, w miejscu znacznika

<SCRIPT> , użyjemy normalnego znacznika <A> :

<P>Odwiedź <A HREF="dummy.htm">losowo wybraną</A>

stronę z listy moich ulubionych.</P>

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: