Rozdział 19.
Tworzenie skryptów
w języku JavaScript
W kilku poprzednich rozdziałach poznałeś sposoby wzbogacania tworzonych stron
WWW o dodatkowe metody interakcji, takie jak mapy graficzne, formularze oraz
skrypty CGI. Wszystkie te narzędzia, z wyjątkiem map graficznych, są dostępne
w najnowszych przeglądarkach, dzięki czemu będziesz mógł ich spokojnie używać, bez
zbytniego przejmowania się o zachowanie kompatybilności. Jednakże stosowanie ich
ma także swoją cenę: wymagają one bowiem kontaktu z serwerem WWW, na przykład,
do przetworzenia skryptu, i jako takie nie są najlepszym rozwiązaniem przy tworzeniu
wielu typów prezentacji.
W tym oraz w kilku następnych rozdziałach poznasz nowe narzędzia wzbogacające
możliwości samej przeglądarki i pozwalające na tworzenie interesujących
interaktywnych prezentacji, które nie bazują na programach CGI wykonywanych na
serwerze. Pierwsze z tych narzędzi zostanie przedstawione w tym rozdziale; są to
skrypty pisane w języku JavaScript.
Język JavaScript, wcześniej nazywany także LiveScirpt, jest językiem programowania
służącym do dodawania nowych możliwości funkcjonalnych do dokumentów HTML.
Skrypty napisane w tym języku umieszczane są bezpośrednio w dokumentach HTML
i wykonywane przez przeglądarkę. JavaScript jest nowością wprowadzoną przez firmę
Netscape; zyskała ona już aprobatę i poparcie wielu innych organizacji oraz firm.
W różny sposób, język ten dostępny jest aktualnie w kilku różnych przeglądarkach,
między innymi, w Netscape Navigator oraz Microsoft Internet Explorer.
Podobnie jak znaczna większość technologii używanych na Internecie, a w
szczególności na WWW, także i język JavaScript jest cały czas modernizowany i
rozszerzany. Przeszedł on błyskawicznie od wersji 1.0, dostępnej w przeglądarce
Netscape Navigator 2, poprzez wersję 1.1 w Nawigator 3 i wersję 1.2 w Navigator 4, aż
do wersji 1.3 w Navigator 4.5. W tym samym czasie firma Microsoft stworzyła swoją
własną wersję języka JScript, która dostępna jest w przeglądarce Microsoft Internet
Explorer 3 i 4. Wszystkie wersje różnią się od siebie drobnymi szczegółami. W
rozdziale tym nie będziemy zajmowali się różnicami między poszczególnymi
implementacjami i wersjami języka; zamiast tego skupimy się na jego podstawowych
cechach, wspólnych dla wszystkich implementacji.
548 Część 7. JavaScript i Dynamiczny HTML
Język JavaScript, stworzony przez firmę Netscape, jest językiem skryptowym
i nie ma wiele wspólnego z językiem Java opracowanym przez firmę Sun Microsystems.
Jednakże ze względu na podobieństwo nazwy, oba te języki są często ze sobą mylone.
JavaScript jest prostym językiem, a programy napisane w nim mogą być wykonywane tylko
i wyłącznie w przeglądarkach WWW. Java jest językiem programowania
o nieporównywalnie większych możliwościach, który może być wykorzystywany praktycznie
wszędzie.
W tym rozdziale poznasz podstawowe zagadnienia dotyczące języka JavaScript, takie jak:
czym jest JavaScript,
dlaczego miałbyś używać tego języka,
znacznik ; zawartość dokumentu umieszczona po tej etykiecie będzie
traktowana jako kod z
ródłowy strony.
Jeśli znacznik -->



Tu wstaw swój dokument


Atrybut SRC
Oprócz atrybutu LANGUAGE znacznik


Rysunek 19.1.
Wyniki wykonania
Twojego pierwszego
skryptu w języku
JavaScript
W nazwach metod, właściwości oraz zmiennych w języku JavaScript uwzględniane są
wielkości liter. Litery duże i małe są traktowane jako zupełnie różne. Jeśli masz jakiekolwiek
problemy z uruchomieniem powyższego przykładu, to sprawdz
, czy poprawnie napisałeś
nazwy metod location.toString() oraz document.write().
Zdarzenia i JavaScript
Choć użycie metod, takich jak document.write(), do tworzenia stron WWW może
mieć jakieś praktyczne zastosowania, to jednak prawdziwa potęga języka JavaScript le-
ży w jego umiejętności odpowiadania na zdarzenia.
Zdarzenia są czynnościami zachodzącymi w stronach WWW, gdy użytkownik prowa-
dzi interakcję ze stroną. Dla przykładu, gdy użytkownik wpisuje tekst w polu formula-
rza lub używa przycisku, generowana jest określona sekwencja zdarzeń, które mogą być
wyzwolone w przeglądarce, przechwycone (zazwyczaj pod postacią funkcji) i obsłużo-
ne w programie napisanym w języku JavaScript.
556 Część 7. JavaScript i Dynamiczny HTML
Zdarzenia są specjalnymi akcjami wyzwalanymi pod wpływem czynności zachodzących w
systemie (na przykład, otwarcia okna, załadowania strony, wysłania formularza)
lub czynności wykonywanych przez użytkownika (wpisanie tekstu w polu, kliknięcie
przycisku, zaznaczenie pola wyboru). Dzięki użyciu języka JavaScript, możesz wykonywać
różnego typu czynności w odpowiedzi na zgłaszane zdarzenia.
Funkcje
Funkcje są podobne do metod, różnica polega na tym, iż metody są skojarzone
z obiektami, natomiast funkcje są zupełnie niezależne i mogą być wykonywane poza
kontekstem obiektów. Aby zdefiniować metodę w stronie WWW, będziesz musiał po-
służyć się następującą konstrukcją:

W powyższym przykładzie nazwaFunkcji jest dowolną nazwą, jaką możesz nadać
tworzonej funkcji, a argumenty to lista wartości, które chcesz do niej przekazywać. Za
definicją funkcji, wewnątrz pary nawiasów klamrowych umieścić należy instrukcje,
które funkcja ma wykonywać. Instrukcje te mogą być dowolnymi obliczeniami, spraw-
dzeniem poprawności danych w formularzu lub czymkolwiek innym.
JavaScript dostarcza także grupę wbudowanych obiektów oraz funkcji, pozwalających na
wykonywanie operacji matematycznych, manipulowanie łańcuchami znaków, datami oraz
czasem. Pełną listę dostępnych funkcji możesz znalez
ć w dokumentacji języka.
Przypisywanie funkcji zdarzeniom
Po zdefiniowaniu funkcji, kolejnym krokiem będzie przypisanie ich do zdarzeń, które
chcesz przechwytywać i obsługiwać. Przechwytywanie zdarzeń możliwe jest poprzez
przypisywanie procedur obsługi zdarzeń różnym obiektom stron WWW i formularzy.
Aktualnie dostępne procedury obsługi zdarzeń przedstawione zostały w tabeli 19.1.
Tabela 19.1.
Procedury obsługi zdarzeń dostępne w języku JavaScript
Procedura obsługi Kiedy jest wywoływana
onBlur
Zawsze, gdy użytkownik opuszcza aktywne pole.
onChange
Zawsze, gdy użytkownik zmieni zawartość aktywnego pola.
onClick
Gdy użytkownik kliknie określony przycisk.
onFocus
Gdy użytkownik uaktywni określone pole.
onLoad
Za każdym razem, gdy załadowana zostanie strona WWW.
onMouseOver
Zawsze, gdy użytkownik umieści wskaz
nik myszy na określonym polu.
Rozdział 19. Tworzenie skryptów w języku JavaScript 557
onSelect
Zawsze, gdy użytkownik zaznaczy zawartość pola.
onSubmit
Za każdym razem, gdy przesłana zostanie zawartość formularza.
onUnload
Za każdym razem, gdy zmieniana jest aktualnie wyświetlana strona WWW.
Aby określić funkcje, które mają zostać skojarzone z dowolnymi zdarzeniami przedsta-
wionymi powyżej, będziesz musiał podać nazwę odpowiedniej procedury obsługi zda-
rzenia, jako atrybut pola, którego działanie chcesz kontrolować. Dla przykładu rozpa-
trzmy standardowy formularz zawierający kilka pól tekstowych oraz przycisk do
wysyłania danych:

Jeśli do znacznika

dodasz atrybut onSubmit="return checkform( this
)", to przed przesłaniem danych z formularza wykonana zostanie funkcja check-
form(). Wewnątrz tej funkcji możesz wykonać, na przykład, sprawdzenie poprawności
danych wpisanych w formularzu, jeśli pojawią się jakiekolwiek problemy, będziesz
mógł przerwać wysyłanie danych i poprosić użytkownika o poprawę wpisanych infor-
macji. Parametr this przekazywany jako argument wywołania funkcji, umożliwia
określenie obiektu skojarzonego ze znacznikiem .
Sprawdzenia poprawności pól formularza możesz także dokonać poprzez określanie
procedur obsługi zdarzeń onBlur oraz onChange w poszczególnych znacznikach PUT>. Bardzo dobrze nadaje się do tego celu procedura onBlur, gdyż jest wykonywana
za każdym razem, gdy użytkownik opuszcza pole.
W przypadku przycisków możesz także definiować procedury obsługi zdarzenia onC-
lick, które wykonywane będą za każdym razem, gdy użytkownik kliknie odpowiedni
przycisk. Na przykład, umieszczenie w formularzu znacznika onClick= "processclick()"> spowoduje wykonanie funkcji obslugaClick() za
każdym razem, gdy kliknięty zostanie przycisk do wysyłania danych wpisanych w for-
mularzu.
W języku JavaScript wprowadzony został nowy typ przycisku 
 powoduje on umieszczenie na stronie normalnego przycisku.
Zmienne
Oprócz właściwości język JavaScript pozwala także na przypisywanie i pobieranie war-
tości zmiennych. Zmienne są definiowanymi przez użytkownika pojemnikami,
w którym można przechowywać liczby, łańcuchy znaków lub obiekty. Jednakże, w od-
różnieniu od większości innych języków programowania wysokiego poziomu, narzuca-
jących konieczność precyzyjnego określenia typu zmiennych, w JavaScript typ zmien-
nych nie jest określany. Dlatego mówi się, iż JavaScript jest językiem o łagodnej
558 Część 7. JavaScript i Dynamiczny HTML
kontroli typów. Oznacza to, iż w JavaScript, podczas definiowania zmiennych, nie trze-
ba określać typu informacji, które będą w nich przechowywane. Ta sama zmienna może
służyć do przechowywania informacji dowolnych typów, w zależności od Twoich aktu-
alnych potrzeb.
Poniżej podana została postać deklaracji zmiennej w języku JavaScript:
var nazwaZmiennej = wartość;
W powyższym przykładzie nazwaZmiennej jest unikalną nazwą, którą chcesz nadać
zmiennej. Znak równości umieszczony z prawej strony nazwy zmiennej zwany jest ope-
ratorem przypisania. Informuje on, że cokolwiek znajduje się z prawej strony operatora
powinno zostać zapisane jako wartość zmiennej. Wartość ta może być czymkolwiek,
łańcuchem znaków, liczbą, właściwością lub wynikiem wykonania funkcji. Poniżej
podanych zostało kilka przykładów:
var nazwisko = "Laura Lemay";
var wiek = 28;
var tytul = document.title;
var dokumenturl = location.toString();
var mojatablica = new Array(10);
var dzisiejszadata = new Date();
var mojenazwisko = anothername;
Nazwy zmiennych i funkcji mogą zawierać litery (od a do z), cyfry oraz znak podkreślenia
(_) ,nie mogą jednak zaczynać się od cyfry.
Jeśli deklarujesz zmienną wewnątrz funkcji, to będziesz miał do niej dostęp jedynie wewnątrz
tej funkcji. Zjawisko to określane jest mianem zakresu widzialności zmiennych. Jeśli jednak
zadeklarujesz zmienną wewnątrz znacznika
Jednakże rzadko będziesz chciał, aby program był wykonywany w taki prosty sposób,
od początku do końca, zwłaszcza w JavaScripcie, wypisanie komunikatu na stronie
WWW jest znacznie prostsze w HTML-u niż w skryptach JavaScript. Z tego powodu
większość języków programowania udostępnia grupę instrukcji umożliwiających mody-
fikowanie sposobu wykonywania programu.
Instrukcja if
Pierwsza instrukcja, która pozwala na modyfikowanie sposobu wykonywania programu
nazywana jest instrukcją if. Umożliwia ona stworzenie bloków kodu, które zostaną
wykonane wyłącznie w przypadku, gdy zostanie spełniony konkretny warunek. Załóżmy,
że dysponujesz formularzem, w którym użytkownik powinien podać swoją płeć. W takim
wypadku możesz powitać użytkownika w odpowiedni sposób, zależny od jego płci:
if ( form.theSex.value == "male" ) {
document.write("Dziękujemy Panu za odpowiedz
");
}
if ( form.theSex.value == "female" ) {
document.write("Dziękujemy Pani za odpowiedz
");
}
Jeśli powyższy fragment kodu zostałby uruchomiony oraz właściwość form.theSex.value
przyjęłaby wartość "male", to wykonana byłaby pierwsza metoda document.write().
Jeśli jednak właściwość ta przyjęłaby wartość "female", to zostałaby wykonana druga
metoda document.write().
Blok kodu umieszczony z prawej strony instrukcji if powoduje porównanie wartości
właściwości form.theSex.value z łańcuchem znaków "male". Porównanie to kon-
trolowane jest przez operator porównania. W naszym przypadku operator == określa,
czy obie wartości są równe. Wszystkie operatory porównania dostępne w języku Java-
Script zostały przedstawione w tabeli 19.4.
Tabela 19.4.
Operatory porównania dostępne w języku JavaScript
Rozdział 19. Tworzenie skryptów w języku JavaScript 561
Operator Opis operatora Uwagi
== Równy a == b: sprawdza, czy a jest równe b.
!= Różny a != b: sprawdza, czy a jest różne od b.
< Mniejszy a < b: sprawdza, czy a jest mniejsze od b.
<= Mniejszy lub równy a<= b: sprawdza, czy a jest mniejsze lub równe b.
>= Większy lub równy a >= b: sprawdza, czy a jest większe lub równe b.
> Większy a > b: sprawdza, czy a jest większe od b.
Instrukcja if & else
Poprzedni przykład możesz także zapisać w nieco odmienny sposób, używając postaci
instrukcji if, zawierającej instrukcję else:
if ( form.theSex.value == "male" ) {
document.write("Dziękujemy Panu za odpowiedz
");
}
else {
document.write("Dziękujemy Pani za odpowiedz
");
}
W tym przykładzie nie potrzebujesz sprawdzenia drugiego warunku, w końcu jeden
użytkownik jest tylko mężczyzną lub tylko kobietą. Dlatego też możesz użyć instrukcji
else, która informuje program o tym, aby w przypadku, gdy test wypadnie niepomyśl-
nie, wykonana została druga metoda document.write.
W obu powyższych przykładach, w miejscu wywołania metod document.write() mogłaby
zostać podana dowolna ilość instrukcji, jedynym warunkiem jest to, że musiałyby one zostać
umieszczone wewnątrz odpowiedniej pary nawiasów klamrowych.
Pętle
Czasami będziesz chciał, aby określona grupa instrukcji była wykonywana ściśle poda-
ną ilość razy. Język JavaScript dostarcza dwóch rodzajów tak zwanych  pętli , czyli in-
strukcji pozwalających na kilkukrotne wykonanie tej samej grupy instrukcji. Pierwsza
z nich, zwana  pętlą for , jest idealna w sytuacjach, gdy chcesz, aby grupa instrukcji
wykonana została ściśle określoną ilość razy. Druga pętla,  while , lepiej nadaje się w sy-
tuacjach, gdy ilość powtórzeń zależna jest od jakiegoś zewnętrznego warunku.
Pętla for
Podstawowa struktura pętli for wygląda następująco:
for (var ilosc = 1; ilosc <= 10; ++ilosc) {
tu wstaw wyrażenia
}
562 Część 7. JavaScript i Dynamiczny HTML
W powyższym przykładzie zmienna ilosc jest deklarowana i od razu przypisana jej
zostaje wartość 1. Następnie wykonane jest sprawdzenie, czy wartość zmiennej ilosc
jest mniejsza od 10. Jeśli tak jest, wykonywane są wszystkie instrukcje wewnątrz pętli
for (umieszczone w nawiasach klamrowych {}). Następnie wartość zmiennej ilosc
jest inkrementowana (zgodnie z instrukcją ++ilosc), po czym ponownie sprawdzana
jest wartość tej zmiennej (warunek ilosc <= 10). Jeśli warunek wciąż jest prawdzi-
wy, to instrukcje wewnątrz pętli zostaną ponownie wykonane. W powyższym przykła-
dzie instrukcje wewnątrz pętli będą wykonywane aż do momentu, gdy wartość zmien-
nej ilosc będzie większa od 10, w tym momencie pętla zostanie zakończona.
Pętla while
Postać pętli while została podana poniżej:
while (warunek) {
tu wstaw wyrażenia
}
W odróżnieniu od pętli for pętla while nie posiada żadnego wbudowanego mechani-
zmu modyfikacji zmiennych sterujących pętli, określających moment zakończenia wy-
konywania pętli. Jedynym czynnikiem określającym koniec pętli while jest warunek
logiczny, umieszczony w nawiasach z prawej strony instrukcji. Test ten może być do-
wolnym wyrażeniem zwracającym wartość logiczną i wykorzystującym którykolwiek z
operatorów logicznych, przedstawionych w tabeli 19.4.
Instrukcje umieszczone w pętli (wewnątrz nawiasów klamrowych {}) wykonywane są
dopóty, dopóki warunek jest prawdziwy. Jeśli warunek będzie prawdziwy zawsze, to
pętla będzie wykonywana w nieskończoność, a przynajmniej do momentu zamknięcia
przeglądarki.
Używając pętli while będziesz musiał zwracać szczególną uwagę na to, aby nie stworzyć
pętli nieskończonych. Jeśli jednak uda Ci się taką pętlę stworzyć, to jedyną metodą jej
zatrzymania jest zamknięcie przeglądarki.
Dowiedz się więcej o programowaniu w JavaScript
Lista instrukcji, funkcji, właściwości i operatorów jest jedynie fragmentem wszystkich
możliwości języka JavaScript. W rzeczywistości, język ten jest cały czas rozwijany
i zmienia się w każdej nowej wersji przeglądarki Netscape Navigator.
Z tego powodu nie można przecenić znaczenia dokumentacji JavaScriptu umieszczonej
w witrynie internetowej firmy Netscape (patrz rysunek 19.2). Wszystkie modyfikacje
i zmiany języka będą w pierwszej kolejności opisane w tej dokumentacji. Możesz ją zna-
lez
ć pod adresem http://developer.netscape.com/docs/manuals/index.html. Dokumenta-
cja ta, oprócz opisu wszystkich elementów języka, zawiera wiele informacji ogólnych,
takich jak przykłady i podręczniki.
Rozdział 19. Tworzenie skryptów w języku JavaScript 563
Podsumowanie
JavaScript pozwala osobom tworzącym strony WWW na umieszczanie w tworzonych
dokumentach prostych programów, umożliwiając jednocześnie uniknięcie kontaktu z bar-
dziej skomplikowanymi językami programowania wysokiego poziomu, takimi jak Java
lub C++.
W tym rozdziale poznałeś funkcje znacznika