677
24
Praca z JavaScript
Rozdział 20.
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:
n stworzysz generator połączeń losowych,
n stworzysz weryfikator poprawności danych formularzy,
n stworzysz podmieniane obrazki.
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 <BODY>. Znacznie częstszym rozwią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 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 przykładzie. Bez trudu powinieneś rozpoznać wszystkie użyte w niej elementy, 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 rys. 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>:
<SCRIPT LANGUAGE="JavaScript">
<!-- zawartość skryptu musi być ukryta przed innymi przeglądarkami
Tu wstaw kod JavaScript
// Koniec skryptu -->
</SCRIPT>
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() {
}
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().
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/" }
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 linii. Pierwsze dwie linie, umieszczone tuż za definicją funkcji, deklarują zmienne pomocnicze, wykorzystywane wewnątrz funkcji: linknumber, która określa ilość dostę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 randomnumber 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ć dowolną 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 stworzenie fizycznego hiperłącza. Użyta zostanie do tego celu metoda document.write():
Wartość podana wewnątrz nawiasów korzysta z możliwości dodawania do siebie łańcuchó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> definiują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:
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 UNIX-owej 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>
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>.
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.
// Pamiętaj o zmiennej linknumber, która odzwierciedla ilość adresów
// Możesz tutaj dodać dowolną ilość adresów
document.write('<A HREF="' + linktext + '">losowo wybraną</A>') ;}
var today = new Date()
var seed = today.getTime() + today.getDate()
seed=(seed * 29 + 1) % 1024
return seed/1024
Ć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ć nieprzewidziane 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 umieszczone 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ł wprowadzić 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>:
Teraz skojarz procedurę obsługi zdarzenia onClick z hiperłączem, podając ją jako atrybut znacznika <A>. Gdy procedura obsługi zdarzenia onClick jest używana jako atrybut znacznika, jej wartość musi być poprawną instrukcją języka JavaScript, bądź wywołaniem funkcji. W naszym przypadku, będziemy chcieli wywołać metodę picklink() stworzoną w poprzednim ćwiczeniu i zastąpić oryginalny adres hiperłącza (HREF="dummy.htm") adresem zwróconym przez tę funkcję.
Wykonanie tego zadania jest całkiem proste, gdyż każde hiperłącze jest przechowywane w obiekcie document jako obiekt typu link, a każdy obiekt tego typu ma właściwości określające adres docelowy, jak, na przykład, właściwość location, którą poznałeś w poprzed&#...
PabloPCK