R 20 07, HTML
[ Pobierz całość w formacie 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>
<SCRIPT LANGUAGE="JavaScript">
<!-- 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 )
if ( linkselect == 2 )
if ( linkselect == 3 )
if ( linkselect == 4 )
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>
<SCRIPT LANGUAGE="JavaScript">
<!-- 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 )
if ( linkselect == 2 )
Rozdział 20.
Praca z JavaScript
571
if ( linkselect == 3 )
if ( linkselect == 4 )
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>
[ Pobierz całość w formacie PDF ]