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 <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>:
<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" ;
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():
document.write('<A HREF="' + linktext + '">losowo wybraną</A>') ;
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>
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 )
{ 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>') ;}
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ć 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>:
<P>Odwiedź <A HREF="dummy.htm">losowo wybraną</A>
stronę z listy moich ulubionych.</P>
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 poprzednim rozdziale. W efekcie, wszystko, co musisz zrobić, to przypisać nowy adres hiperłącza właściwości href obiektu link; musisz to oczywiście wykonać wewnątrz procedury obsługi zdarzenia onClick:
<P>Odwiedź <A HREF="dummy.htm"
onClick="this.href=picklink()">losowo wybraną</A>
stronę z listy moich ulubionych.</P>
|
|
|
Słowo kluczowe this każe skryptowi w języku JavaScript odwołać się do aktualnego obiektu, bez zwracania uwagi na jego położenie oraz nazwę. W tym przykładzie this wskazuje na obiekt typu link, skojarzony z klikniętym hiperłączem; natomiast wyrażenie this.href umożliwia dostęp do wartości właściwości href tego obiektu. W ten sposób, przypisując nową wartość właściwości this.href, zmieniasz jednocześnie adres docelowy hiperłącza. |
|
|
Kolejnym krokiem po zdefiniowaniu procedury obsługi zdarzenia onClick będzie zmodyfikowanie funkcji picklink(). Z funkcji tej możesz usunąć końcową instrukcję document.write(), gdyż nie ma już potrzeby fizycznego wpisywania czegokolwiek do strony WWW. Zamiast tego, będziesz musiał przekazać wartość zmiennej linktext jako wynik wykonania funkcji, który zapisywany będzie we właściwości this.href.
Możesz to osiągnąć dzięki instrukcji return, która powoduje zwrócenie podanej wartości jako wyniku działania funkcji:
return linktext;
Powyższa instrukcja każe zwrócić wartość zmiennej linktext, określającej adres URL losowo wybrany przez funkcję picklink(). A więc cała modyfikacja funkcji picklink() będzie polegała na usunięciu wywołania metody document.write() z ostatniego wiersza funkcji i umieszczeniu na jego miejscu instrukcji return linktext;.
Końcowy kod ćwiczenia
Jak mogłeś zauważyć, zmiany wprowadzone w tej wersji generatora losowych połączeń nie są zbyt duże, ten przykład różni się od poprzedniego jedynie usunięciem znacznika <SCRIPT> z wnętrza znacznika <BODY> oraz zmianą ostatniej instrukcji funkcji picklink(). Poniżej podany został pełny kod strony:
Listing 20.3: Dokument HTML.
<HTML>
<HEAD>
<TITLE>Generator Losowych Połączeń</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- zawartość skryptu musi być ukryta przed innymi przeglądarkami
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 Połączeń</H1>
<P>Odwiedź <A HREF="dummy.htm"
onClick="this.href=picklink()">losowo wybraną </A>
stronę z listy moich ulubionych.</P>
</BODY>
</HTML>
Ćwiczenie 20.3: Generator połączeń losowych używający tablicy
Jedyny problem, jaki pojawia się w ostatnim przykładzie, polega na konieczności wpisywania kolejnych instrukcji if za każdym razem, gdy chcesz dodać nowe hiperłącze, które może być losowo wybrane. Aby ominąć ten problem i uprościć kod skryptów możesz użyć mechanizmu języka JavaScript, który pozwala na tworzenie grup wartości, tak zwanych tablic.
Tablica jest listą zmiennych, do których można odwoływać się za pomocą jednej nazwy. Dla przykładu, tablica o nazwie mylinks[] mogłaby zostać użyta do przechowywania listy adresów URL używanych w funkcji picklink(). Dostęp do wartości każdego elementu tablicy można uzyskać poprzez umieszczenie odpowiedniej liczby wewnątrz nawiasów klamrowych, zapisywanych z prawej strony nazwy tablicy. Liczby te nazywane są indeksami tablicy, a ich wartości w JavaScripcie rozpoczynają się od 1; aby odwołać się do pierwszego elementu tablicy mylinks należy zapisać: mylinks[1], a do drugiego, mylinks[2].
|
Tablica jest uporządkowanym zbiorem wartości. Dostęp do jej elementów następuje poprzez podanie jej nazwy oraz pozycji wartości w tablicy. Tak więc, dla przykładu, jeśli dysponujesz tablicą imion swoich znajomych (o nazwie friends) i jeśli tablica ta zawiera następujące informacje: "Bob", "Susan", "Tom", "Pierre", to odwołanie friends[1] zwróci wartość "Bob", odwołanie friends[2] wartość "Susan" i tak dalej. |
||
|
|
||
|
Tablice w języku JavaScript działają nieco inaczej niż tablice, z którymi mogłeś się spotkać w innych językach programowania wysokiego poziomu (na przykład, w języku C++). W rzeczywistości tablice użyte w powyższym przykładzie 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 językach programowania, tablice w JavaScripcie są indeksowane od 1, a nie od 0. |
||
|
|
Aby wykorzystać możliwości oferowane przez tablice, w pierwszej kolejności powinieneś stworzyć małą funkcję zwaną konstruktorem. Ta funkcja jest konieczna dlatego, iż tak naprawdę tablice są obiektami. Konstruktor MakeArray() ma następującą 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, zapisując jej długość w elemencie o indeksie 0. Będziesz musiał dołączyć tę funkcję do wszystkich stron WWW, w których chcesz tworzyć skrypty JavaScript korzystające z tablic. Po zdefiniowaniu funkcji MakeArray(), będziesz mógł stworzyć tablicę mylinks[], o której mówiliśmy już wcześniej. Tablicę tę stworzymy za pomocą następującej instrukcji (gdzie wartość jest ilością elementów tablicy):
mylinks = new MakeArray(wartość);
|
Sposób użycia tablic przedstawiony w tych przykładach może Ci nieco namieszać w głowie. Technicznie rzecz biorąc, indeksy tablic w JavaScripcie rozpoczynają się od 0, tak jak w innych językach programowania. Jednakże, jeśli będziesz używał metody MakeArray(), to pierwszy element tablicy zapisywany będzie w komórce o indeksie 1, gdyż komórka o indeksie 0 jest używana do przechowywania długości tablicy. W przeglądarce Netscape Navigator 2.0 musiałeś pisać swoje własne konstruktory, służące do tworzenia tablic. Jednakże począwszy od Navigatora 3.0 JavaScript udostępnia specjalny konstruktor o nazwie Array(). Dlatego też możesz, a nawet powinieneś, używać tego właśnie konstruktora (oczywiście, tworzenie i używanie własnych konstruktorów jest wciąż dozwolone). Aby użyć tego konstruktora zamiast funkcji MakeArray(), będziesz musiał posłużyć się następującą 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 przykładzie będziemy używali konstruktora MakeArray(). |
|
|
Teraz możesz wypełnić tablicę mylinks[], przypisując jej poszczególnym komórkom odpowiednie adresy URL, podobnie jak to robiłeś z normalnymi zmiennymi. W naszym przykładzie generatora losowych połączeń będziesz mógł dodać na początku skryptu instrukcje, tworzące tablicę o pięciu komórkach i wypełniające te komórki odpowiednimi adresami URL.
<SCRIPT LANGUAGE="JavaScript">
<!-- zawartość skryptu musi być ukryta przed innymi przeglądarkami
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, nadeszła kolej na zmodyfikowanie kodu funkcji picklink(), tak aby wybierała ona adres hiperłącza z losowo wskazanej komórki tablicy. Dzięki temu użycie instrukcji if stanie się niepotrzebne.
Poniżej podana została nowa wersja kodu funkcji picklink():
function picklink() {
linknumber = mylinks[0];
randomnumber = random();
linkselect = Math.round((linknumber-1) * randomnumber) + 1;
return mylinks[linkselect];
Co się właściwie zmieniło w tej funkcji? Po pierwsze, zwróć uwagę na wartość przypisywaną zmiennej linknumber. W poprzednich przykładach określałeś wartość tej zmiennej ręcznie (np.: linknumber = 5). Jednakże teraz jej wartość musi odpowiadać ilości adresów zapisanych w komórkach tablicy mylinks[]. Ilość adresów możesz bardzo szybko zdobyć dzięki odwołaniu 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 było możliwe dzięki usunięciu wszystkich niepotrzebnych już instrukcji if i zastąpieniu ich pojedynczą instrukcją return mylinks[linkselect]. Instrukcja ta powoduje zwrócenie wartości znajdującej się w elemencie tablicy mylinks[linkselect] jako wyniku działania funkcji picklink(). Przy czym linkselect jest losową liczbą z zakresu od 1 do linknumber.
Możesz jednak skrócić funkcję picklink() jeszcze bardziej, usuwając wszystkie zmienne robocze i wykonując wszystkie operacje w instrukcji return:
function picklink() {
return mylinks[(Math.round((mylinks[0] - 1) * random()) + 1)];
}
Końcowa postać kodu generatora losowych połączeń używającego tablic
Kod przedstawiony poniżej uwzględnia wszystkie modyfikacje, których dokonałeś w tym ćwiczeniu, włączenie z dołączeniem konstruktora MakeArray(), stworzeniem i zainicjalizowaniem tablicy adresów oraz ze zmodyfikowaniem kodu funkcji picklink().
<HTML>
<HEAD>
<TITLE>Generator Losowych Połączeń z wykorzystaniem tablicy</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- zawartość skryptu musi być ukryta przed innymi przeglądarkami
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 Połączeń</H1>
<P>Odwiedź <A HREF="dummy.htm"
onClick="this.href=picklink()">losowo wybraną</A>
stronę z listy moich ulubionych.</P>
</BODY>
</HTML>
|
|
|
Aby dodać nowe hiperłącza do tablicy, będziesz musiał wykonać jedynie dwie proste czynności. Po pierwsze, zwiększyć wartość podaną w instrukcji new MakeArray( wartość ), a po drugie, zainicjalizować nową komórkę tablicy, wpisując do niej adres URL. |
|
|
Weryfikacja danych w formularzach
W tym rozdziale przedstawimy formularz „Surrealistyczna ankieta” widoczny na rys. 20.2. Ten formularz prosi użytkowników o podanie kilku, różnego typu informacji, takich jak imię oraz płeć.
Rysunek 20.2 Surrealistyczna ankieta |
|
Co się dzieje, gdy dane z tego formularza zostają przesłane na serwer? Przypuszczalnie jakiś skrypt CGI przeanalizuje je, sprawdzając, czy zostały poprawnie podane, zapisze w odpowiednim pliku lub bazie danych, a następnie podziękuje użytkownikowi za poświęcony czas.
Jednakże co się stanie w sytuacji, gdy dane w formularzu nie zostaną podane poprawnie, jeśli, dla przykładu, użytkownik zapomni wpisać swoje imię lub wybrać wartości w polu określającym płeć? Skrypt CGI może sprawdzić wszystkie przesłane dane i wyświetlić odpowiednią informację o błędzie. Jednakże sprawdzenie to musi być wykonane na innym komputerze za pomocą skryptu CGI, a zarówno dane, jak i komunikaty o błędach będą musiały być przesłane jeszcze raz pomiędzy serwerem i przeglądarką; proces ten może być wolny i wymagać dużej ilości różnego typu zasobów.
Język JavaScript pozwala na przeprowadzenie sprawdzenia poprawności danych, wpisanych przez użytkownika w formularzu, jeszcze przed ich przesłaniem na serwer — w przeglądarce. Możliwość ta pozwala na zaoszczędzenie czasu zarówno Twojego, jak i użytkownika, gdyż wszystkie dane zostaną sprawdzone w przeglądarce, a na serwer przesłane jedynie poprawne informacje.
Ć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 przykładowym formularzu. Za każdym razem, gdy klikasz przycisk wysyłający dane z formularza, w przeglądarce generowane są dwa zdarzenia: onClick oraz onSubmit. Tym razem zainteresowani jesteśmy zdarzeniem onSubmit, z którym skojarzymy funkcję JavaScript sprawdzającą poprawność danych.
Aby skojarzyć funkcję JavaScriptu ze zdarzeniem onSubmit, będziesz musiał zdefiniować procedurę obsługi zdarzenia onSubmit jako atrybut znacznika <FORM>:
<FORM METHOD="POST"
ACTION="http://www.mcp.com/cgi-bin/post-query"
onSubmit="return checkform( this )" >
W tym przykładzie wartość skojarzona z procedurą obsługi zdarzenia onSubmit jest wywołaniem funkcji o nazwie checkform(). Funkcję tę zdefiniujemy za chwilę. Najpierw jednak przyjrzymy się bliżej instrukcji return zwracającej wartość wykonania funkcji checkform(). Znaczenie tej instrukcji wymaga bowiem dokładniejszego wyjaśnienia.
W pierwszej kolejności zwróć uwagę na słowo kluczowe this. Za każdym razem, gdy wywołujesz funkcję, możesz przekazać do niej listę parametrów, takich jak liczby, łańcuchy znaków lub inne obiekty. Parametry te przekazywane są poprzez umieszczenie ich wewnątrz pary nawiasów z prawej strony nazwy funkcji. W naszym przypadku, słowo kluczowe this powoduje przekazanie do funkcji odwołania obiektu skojarzonego z aktualnym formularzem.
Teraz przyjrzyj się instrukcji return. Jest ona używana w celu przekazania wartości do wewnętrznej procedury przeglądarki, która wywołała procedurę obsługi zdarzenia onSubmit. Dla przykładu, jeśli funkcja checkform() po przeanalizowaniu zawartości formularza zwróci wartość false, to przekazanie tej wartości do wewnętrznej procedury przeglądarki spowoduje wstrzymanie wysyłania danych z formularza na serwer. Jeśli by nie było instrukcji return, to wartość false nie mogłaby zostać przekazana do przeglądarki, co umożliwiłoby przesłanie na serwer niepoprawnych danych.
Skrypt sprawdzający poprawność informacji
Teraz zdefiniuj znacznik <SCRIPT> wewnątrz znacznika <HEAD>, a następnie zadeklaruj w nim funkcję checkform(). Tym razem będziesz jednak musiał zdefiniować dodatkowo zmienną, w której przechowany zostanie obiekt formularza przekazywany do funkcji. Sposób deklaracji funkcji został przedstawiony w poniższym przykładzie:
<SCRIPT>
<!-- Początek skryptu
function checkform( thisform ) {
W tym przykładzie, obiektowi reprezentującemu aktualny formularz została nadana nazwa thisform. Za pomocą odwołań do wartości tej zmiennej będziesz mógł uzyskać dostęp do wszystkich pól tekstowych, pól wyboru, list i przycisków umieszczonych na formularzu.
W pierwszej kolejności będziesz chciał sprawdzić, czy użytkownik podał jakiś łańcuch znaków w polu Imię. W kodzie HTML, opisującym ten formularz, w etykiecie <INPUT> definiującej to pole tekstowe, został użyty atrybut NAME, przypisujący polu nazwę theName.
<INPUT TYPE="TEXT" NAME="theName">
Możesz użyć tej nazwy w swoich skryptach, odwołując się do pola tekstowego jako do „pod-obiektu” formularza. W wyniku tego, do pola tekstowego o nazwie theName będziesz mógł odwoływać się za pomocą konstrukcji thisform.theName; wartość tego pola będzie dostępna za pomocą wyrażenia thisform.theName.value.
Używając powyższych informacji oraz stosując instrukcję if, możesz w prosty sposób sprawdzić wartość pola tekstowego i upewnić się, że zostały w nim podane jakieś informacje. Sprawdzenie to może wyglądać w następująco:
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 będą spełnione. Dlatego też symbol || nazywany jest operatorem OR. |
|
|
W pierwszej linii sprawdzane są dwa warunki: czy wartość thisform.theName.value jest równa wartości null oraz czy wartość thisform.theName.value jest pustym łańcuchem znaków (""). Gdy pole zostaje stworzone 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 łańcucha znaków. Jeśli zajdzie którakolwiek z tych sytuacji, na ekranie wyświetlony zostanie odpowiedni komunikat (za pomocą metody alert()), następnie kursor zostanie umieszczony w polu (za pomocą wywołania metody thisform.theName.focus()), zawartość pola zostanie zaznaczona (za pomocą metody thisform.theName.select()), a cała funkcja zwróci wartość false, uniemożliwiając w ten sposób przesłanie formularza.
Jeśli użytkownik podał imię, to kolejnym krokiem będzie sprawdzenie, czy określił on swoją płeć. Możesz to sprawdzić, testując wartość pola theSex. Jednakże ze względu na to, iż wszystkie przyciski opcji w grupie mają tę samą wartość, będziesz musiał 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 zaznaczony, to właściwość status będzie posiadała wartość true, w przeciwnym razie umieszczona w niej będzie wartość false.
|
|
|
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ślających płeć użytkownika zostało wybrane, będziesz musiał stworzyć zmienną pomocniczą o nazwie selected i przypisać jej wartość false. Następnie będziesz musiał przeanalizować stany wszystkich przycisków za pomocą pętli for; jeśli właściwość status któregokolwiek z pól będzie posiadała wartość true, oznaczać to będzie, że płeć została wybrana. W takim wypadku będziesz mógł przypisać wartość true zmiennej selected (selected = true). W końcu, jeśli po zakończeniu pętli for wartość zmiennej selected wciąż będzie wynosić false, to funkcja wyświetli odpowiedni komunikat o błędzie i zakończy się, zwracając wartość false. Kod wykonujący opisane powyżej czynności ma następującą postać:
var selected = false ;
for ( var i = 0; i <= 2 ; ++i ) {
if ( thisform.theSex[i].status == true )
{ selected = true }
}
if ( selected == false ) {
alert ("Wybierz płeć") ;
return false ;
}
Jeśli oba sprawdzenia zakończyły się pomyślnie (zwracając wartość true), to wynikiem wykonania funkcji checkform() również będzie wartość true. Będzie ona oznaczała, iż dane w formularzu zostały podane poprawnie i mogą zostać przesłane na serwer. Aby zakończyć funkcję, wpisz następujący kod:
return true
}
Kompletny kod przykładu skryptu sprawdzającego poprawność danych w formularzu
Poniżej przedstawiony został pełny kod strony powstałej z połączenia przedstawionych powyżej skryptów z kodem HTML, tworzącym formularz. Dzięki użytym skryptom, na serwer będą przesyłane jedynie poprawne dane. Jeśli użytkownik popełni jakiś błąd podczas wprowadzania informacji, przeglądarka poinformuje go o tym (patrz rys. 20.3).
Rysunek 20.3 Komunikat informujący o błędzie |
|
Poniżej podany został pełny kod przykładu:
Listing 20.4: Kod JavaScript
<HTML>
<HEAD>
<TITLE>Surrealistyczna ankieta - z zastosowaniem JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Początek 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 płeć") ;
return false ;
}
return true
}
// Koniec skryptu -->
</SCRIPT>
</HEAD>
<BODY>
<H1>Surrealistyczna ankieta statystyczna</H1>
<P>Zapraszamy do wypełnienia surrealistycznej ankiety statystycznej.
Wypełnij ją najlepiej jak potrafisz.</P>
<P>Użyj przycisku <STRONG>Prześlij</STRONG> do wysłania 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>Płeć: </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">Obojętniak
</P>
<P>
<STRONG>Możliwości (zaznacz wszystkie właś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">Niezbędne 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 wskaźnika myszy, zastępują go innym obrazkiem. Takie rozwiązania są bardzo często wykorzystywane przy tworzeniu elementów nawigacyjnych, gdyż pozwalają na wizualne poinformowanie użytkownika, co się stanie po kliknięciu 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 kliknięty.
Przykład 20.5: Podmienianie obrazków przy użyciu języka JavaScript
Do zrobienia
W tym przykładzie mam zamiar stworzyć stronę zawierającą obrazek, który zostanie zastąpiony innym, po umieszczeniu na nim wskaźnika myszy. Stworzenie takiego skryptu wymaga użycia trzech komponentów: procedury obsługi zdarzeń skojarzonej z obrazkiem, skryptu pobierającego obrazek, który nie jest wyświetlany w momencie załadowania strony oraz funkcji, która zamieni oba obrazki. Przyjrzyjmy się teraz każdemu z tych trzech komponentów.
Określanie przeglądarki
Jedną z największych wad języka JavaScript, jest to, iż niemal w każdej przeglądarce działa on nieco inaczej. Możliwości, jakimi dysponuje ten język w przeglądarce Netscape Communicator 4.6, mogą być niedostępne w przeglądarce Internet Explorer 3.0. Problem ten jest dodatkowo potęgowany faktem, iż możliwości języka zmieniają się nawet w różnych wersjach tej samej przeglądarki. Zazwyczaj programiści rozwiązywali ten problem, określając, jaka przeglądarka przesłała żądanie i wykorzystując te możliwości języka, które są dostępne w danej przeglądarce. Niestety, ten sposób rozwiązania problemu jest zbyt skomplikowany, aby można go było wykorzystać w języku JavaScript. Za każdym razem, gdy zostanie udostępniona nowa wersja przeglądarki, należy zmodyfikować cały kod odpowiedzialny za określanie typu programu oraz jego możliwości.
Na szczęście można znaleźć lepszy sposób rozwiązania tego problemu. Zamiast posługiwać się niedokładną techniką, polegającą na określaniu typu przeglądarki, można sprawdzić, czy jest dostępny konkretny obiekt, którym trzeba będzie się posłużyć i na tej podstawie określić sposób działania skryptu. W naszym przypadku będę musiał posłużyć się obiektem document.images, zawierającym informacje o wszystkich obrazkach umieszczonych na stronie. A zatem, kod służący do sprawdzenia możliwości przeglądarki będzie w tym przypadku bardzo prosty, składa 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 przeglądarka potwierdzi istnienie obiektu document.images, będzie można go wykorzystać.
Skrypt pobierający obrazki
Umieszczając na stronie podmieniane obrazki, powinieneś od razu pobrać wszystkie obrazki, jakich będziesz używał. W ten sposób, gdy po raz pierwszy umieścisz wskaźnik myszy na wyświetlonym obrazku, przeglądarka nie będzie musiała pobierać z serwera drugiego, początkowo niewidocznego obrazka. Skrypt, pobierający obrazki, kopiuje je z serwera i umieszcza w pamięci, dzięki czemu można je wyświetlić bez zbędnych opóźnień, zaraz po umieszczeniu wskaźnika myszy na obrazku, który ma być zastąpiony. Skrypt ten umieszczany jest w nagłówku strony WWW i tworzy nowy obiekt dla każdego obrazka biorącego udział w procesie podmieniania. Nasza przykładowa strona zawiera tylko jeden obrazek, a zatem skrypt pobierający będzie bardzo prosty:
if (document.images) {
buttonOn = new Image();
buttonOn.src = "przyciskOn.gif";
buttonOff = new Image();
buttonOff.src = "przyciskOff.gif";
}
Jak widać, skrypt ładujący został umieszczony wewnątrz kodu sprawdzającego, czy przeglądarka dysponuje wymaganymi możliwościami. Skrypt tworzy obiekty reprezentujące dwa obrazki, „włączony” oraz „wyłączony”. Podczas ładowania strony pliki graficzne, przypisane atrybutowi src obu obiektów Image, zostaną pobrane z serwera.
Funkcje podmieniające obrazki
Zamiana obrazków wyświetlonych na stronie WWW wymaga użycia dwóch funkcji. Pierwsza z nich zamienia obrazek „wyłączony” na „włączony”, a druga odwrotnie, obrazek „włączony” na „wyłączony”.
W naszym przykładzie, funkcje te noszą odpowiednio nazwy: activate oraz deactivate. Poniżej podałam 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 został kod określający możliwości przeglądarki, ma on za zadanie ochronę użytkowników, których przeglądarki nie pozwalają na manipulowanie obrazkami. Obie funkcje oczekują podania jednego argumentu, nazwy obrazka, który ma być zastąpiony innym. W naszym przypadku mógłbym podać nazwę podmienianego obrazka, gdyż jest on jedynym podmienianym obrazkiem na całej stronie. Jednak przekazanie nazwy obrazka jest znacznie wygodniejszym rozwiązaniem, gdyż będziesz mógł wykorzystać ten sam skrypt na każdej stronie WWW, niezależnie od ilości obrazków, jakie chcesz na niej podmieniać.
Poniżej podałem najważniejszy fragment kodu umieszczony w funkcji activate:
document[nazwa_obrazka].src = eval(nazwa_obrazka + "On.src");
Wyrażenie document[nazwa_obrazka] stanowi odwołanie do obiektu strony, którego nazwa odpowiada nazwie podanej w wywołaniu funkcji. Powyższa linia kodu powoduje zapisanie we właściwości src tego obiektu nazwy „włączonej” wersji obrazka. Wywołanie funkcji eval() łączy (tekstowo) argument wywołania funkcji oraz łańcuch znaków On.src. A zatem, jeśli w wywołaniu funkcji podamy słowo „button”, to funkcja eval() zwróci wartość buttonOn.src (czyli wartość właściwości src obiektu buttonOn). Jeśli spojrzysz do poprzedniego podrozdziału, przekonasz się, iż w skrypcie pobierającym obrazki, właściwości buttonOn.src przypisaliśmy łańcuch znaków przyciskOn.gif. A zatem, ta linia kodu przypisuje właściwości src wskazanego obiektu łańcuch znaków przyciskOn.gif.
Aby cały ten skrypt zadziałał, w skrypcie pobierającym należy stworzyć obiekty, których nazwy odpowiadają nazwie obrazka umieszczonego na stronie. Dzięki temu, posługując się jednym argumentem, można odwołać się do obu obiektów obrazków stworzonych w skrypcie pobierającym oraz do obiektu obrazka wyświetlonego na stronie. Kod umieszczony w drugiej funkcji, deactivate(), działa według tej samej zasady; jedyną różnicą jest to, iż powoduje on wyświetlenie „wyłączonej” wersji obrazka.
Wywoływanie funkcji
Po stworzeniu kodu funkcji odpowiedzialnych za podmienianie obrazków, następnym etapem będzie umieszczenie na stronie samego obrazka oraz procedur obsługi zdarzeń. Przy podmienianiu obrazków konieczne będzie stworzenie procedur obsługi zdarzeń onMouseOver oraz onMouseOut skojarzonych z odpowiednim znacznikiem połączenia. W naszym przykładzie umieszczę obrazek bezpośrednio wewnątrz połączenia, jednak równie dobrze mógłabym skojarzyć podmieniany obrazek z dowolnym innym łączem umieszczonym na stronie. Jedyną szczególną cechą wyróżniającą znacznik obrazka użyty w tym przykładzie, jest fakt zastosowania atrybutu name, dzięki któremu mogę skojarzyć z obrazkiem nazwy obiektów użytych w skrypcie pobierającym.
Poniżej podałam kod służący do wyświetlenia obrazka na stronie oraz wywoływania funkcji zamieniających 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 hiperpołączenia zawiera atrybuty onMouseOver oraz onMouseOut określające funkcje, jakie należy wykonać po zgłoszeniu zdarzeń. Argument przekazany w wywołaniu funkcji odpowiada nazwie obrazka.
Połączenie wszystkich elementów strony
Kiedy już stworzysz wszystkie konieczne obrazki i zapiszesz je w odpowiednim folderze, będziesz mógł połączyć wszystkie powyższe fragmenty skryptów i kodu HTML w jedną, kompletną, dynamiczną stronę WWW.
Jej pełny kod źródłowy przedstawiłam w listingu 20.5.
Listing 20.5. Pełny kod źródłowy.
<html>
<head>
<title>Przykład podmieniania obrazków w JavaScript</title>
<script language="JavaScript">
<!--
//-- załaduj obrazki używane w skrypcie
if (document.images) {
buttonOn = new Image();
buttonOn.src = "przyciskOn.gif";
buttonOff = new Image();
buttonOff.src = " przyciskOff.gif";
}
//-- funkcje podmieniające 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
Język JavaScript dostarcza twórcom stron WWW wielu nowych, fascynujących możliwości. W tym rozdziale miałeś okazję przeanalizowania kilku przykładowych aplikacji napisanych w tym języku.
JavaScript nie jest jednak jedynym językiem umożliwiającym pisanie programów wykonywanych na stronach WWW. Java, starszy brat JavaScriptu, dostarcza jeszcze większych i bardziej fascynujących możliwości. W kolejnym rozdziale poznasz grupę technologii określanych wspólnie jako Dynamiczny HTML, którego podstawę tworzy język JavaScript.
Warsztat
W tej części rozdziału znajdziesz pytania i odpowiedzi, quiz oraz ćwiczenia związane z wykorzystaniem JavaScriptu.
Pytania i odpowiedzi
P. Szczerze mówiąc, sam już nie wiem co mam myśleć! Jak to w końcu 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 językach programowania. Jednakże, jeśli do tworzenia tablic w Navigatorze 2.0 użyjesz rekomendowanej przez firmę Netscape funkcji MakeArray(), to w efekcie będziesz używał tablic, w których elementy umieszczane są, począwszy od komórki o indeksie 1. Jest to niesłychanie mylące. Od Navigatora 3.0 możesz używać wbudowanej funkcji Array() tworzącej tablice indeksowane od 0.
P. Podoba mi się pisanie programów w JavaScripcie; jest ono proste i łatwe do zrozumienia. Wydaje się, że JavaScript jest doskonałym językiem także do tworzenia aplikacji działających na serwerze i zastępujących dotychczasowe skrypty CGI. Czy faktycznie mogę coś takiego zrobić?
O. Firma Netscape też wpadła na ten sam pomysł! Skrypty JavaScript uruchamiane na serwerze są jedną z nowych możliwości udostępnionych w środowisku serwera WWW firmy Netscape. Środowisko to zawiera komponent o nazwie LiveWire, który umożliwia tworzenie programów JavaScript wykonywanych na serwerze. Komponent ten udostępnia wiele narzędzi pozwalających na stosowanie JavaScriptu jako języka tworzenia skryptów CGI oraz przetwarzania stron WWW przed ich przesłaniem do przeglądarki użytkownika. Komponent LiveWire został opisany w rozdziale 27. „Porady i wskazówki na temat serwera WWW”.
Quiz
Czym jest wpisany znacznik <SCRIPT>?
Co się dzieje za każdym razem, gdy użytkownik przeglądarki Nestscape Navigator kliknie hiperpołączenie, przycisk lub element formularza wyświetlonego na stronie WWW?
Czym jest słowo kluczowe this?
W jaki sposób użycie tablic może uprościć skrypty?
Dlaczego sprawdzanie poprawności danych przy użyciu skryptów pisanych w języku JavaScript jest bardziej efektywne od sprawdzania poprawności danych w skryptach CGI?
Odpowiedzi
Wpisany znacznik <SCIRPT> jest znacznikiem umieszczanym wewnątrz znacznika <BODY>, a nie wewnątrz znacznika <HEAD>. Przeważnie znacznik <SCRIPT> umieszczany jest wewnątrz znacznika <HEAD>.
Każde kliknięcie hiperpołączenia, przycisku lub elementu formularza powoduje wygenerowanie przez przeglądarkę Netscape Navigator zdarzenia, które można przechwycić i obsłużyć. Informacje na ten temat podałam w rozdziale 19.
Słowo kluczowe this jest specjalną wartością informującą JavaScript, że należy odwołać się od aktualnego obiektu, bez przykładania wagi do jego nazwy ani położenia.
Dzięki tablicom można stworzyć listę zmiennych, do których można się odwoływać przy użyciu jednej nazwy.
Skrypty pisane w języku JavaScript pozwalają na sprawdzanie poprawności danych po stronie przeglądarki, jeszcze zanim formularz zostanie przesłany na serwer WWW. Skrypty CGI są natomiast wykonywane na serwerze, co wymaga przesłania danych z formularza na serwer, a następnie wyników działania skryptu z serwera do przeglądarki.
Ćwiczenia
Do listy losowych łączy stworzonej w ćwiczeniu 20.3 dodaj nowe łącza. Zrób to, powiększając wartosc, użytą w instrukcji new MakeArray( wartosc ) i dodając do tablicy nowe elementy.
Przyjrzyj się kodowi źródłowemu ćwiczenia 20.4 i sprawdź, czy byłbyś w stanie zmienić jego postać i wykorzystać go na własnej witrynie WWW.
676
HTML 4 - Vademecum profesjonalisty
677
Praca z JavaScript
24
Wyszukiwarka