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 wszyst­kich implementacji.

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 <SCRIPT>,

• podstawowe polecenia oraz konstrukcje języka,

• przykłady prostych programów napisanych w języku JavaScript.

Przedstawienie języka JavaScript

Zgodnie z oświadczeniem prasowym, opublikowanym wspólnie przez firmę Netscape Communications oraz Sun Microsystems, JavaScript jest „łatwym do użycia obiektowym językiem skryptowym, zaprojektowanym do tworzenia aplikacji łączących obiekty i zasoby zarówno w przeglądarce użytkownika, jak i na serwerze WWW. JavaScript stworzony zos­tał z myślą o autorach stron WWW oraz twórcach aplikacji firmowych, w celu umożliwie­nia im dynamicznego opisu zachowania obiektów uruchamianych w przeglądarkach oraz na serwerach WWW”.

Mówiąc najprościej jak można, powyższy opis oznacza, że za pomocą języka JavaScript możesz dodać do tworzonych stron WWW nowe możliwości funkcjonalne, które w prze­szłości wymagały zastosowania skomplikowanych programów CGI uruchamianych na ser­werze. Pod wieloma względami JavaScript przypomina język Visual Basic, przyjazny dla użytkownika język programowania opracowany przez firmę Microsoft. Nawet, jeśli nie posiadasz żadnego doświadczenia programistycznego, będziesz mógł wykorzystywać JavaScript do tworzenia skomplikowanych aplikacji działających na stronach WWW.

Czynnikiem, który powoduje, że JavaScript to wyjątkowy język, jest sposób, w jaki został zintegrowany ze stronami WWW. Programy w nim pisane nie są przechowywane w odrębnych plikach, tak jak programy CGI, lecz zapisywane bezpośrednio wewnątrz stron WWW, podobnie jak znaczniki i obiekty HTML. Innymi słowy, programy JavaScript osadzane są wewnątrz dokumentów HTML. Ponadto, w odróżnieniu od programów CGI, które są wykonywane przez serwer WWW, programy napisane w języku JavaScript wykonywane są bezpośrednio przez samą przeglądarkę. Dzięki temu są one łatwe do przenoszenia i mogą być wykonywane przez wszystkie przeglądarki, które są w stanie obsługiwać programy napisane w tym języku, niezależnie od typu komputera oraz systemu operacyjnego.

Firma Netscape stworzyła także wersję języka JavaScript, która umożliwia tworzenie programów wykonywanych na serwerze WWW, jako zastąpienie lub rozszerzenie uprzednich możliwości programów CGI. Język JavaScript, umożliwiający tworzenie tego typu programów zaimplementowany został jako część środowiska LiveWire, działającego w połączeniu z serwerami Fast Track lub Enterprise Web Serwer firmy Netscape. Serwer WWW firmy Microsoft, Internet Information Server, także udostępnia język JavaScript pozwalający na tworzenie aplikacji wykonywanych przez serwer.

Dlaczego miałbyś używać języka JavaScript?

Odpowiedź na to pytanie zależy w pewnym stopniu od możliwości, jakich dostarcza język JavaScript. Wraz z rozwojem JavaScript oraz technologii pokrewnych, skrypty pisane w tym języku uzyskują możliwość kontroli wszelkich aspektów stron WWW i formularzy oraz bezpośredniej komunikacji z wyświetlanymi pluginami i apletami.

Podstawowe, najprostsze, możliwości JavaScriptu pozwalają na wykonywanie w przeglądarce wielu prostych (oraz całkiem skomplikowanych) programistycznych zadań, które wcześniej można było rozwiązać tylko i wyłącznie za pomocą programów CGI wykonywanych na serwerze. Prócz tego, JavaScript umożliwia weryfikację poprawności danych wprowadzanych przez użytkowników w formularzach. W końcu, w połączeniu z zastosowaniem ramek, JavaScript daje bardzo szerokie możliwości tworzenia nowych metod prezentacji dokumentów na WWW.

Łatwość użytkowania

W odróżnieniu od języka Java, JavaScript został zaprojektowany z myślą o osobach, które nie miały wcześniej nic wspólnego z programowaniem. Jako taki, JavaScript jest względnie łatwy w użyciu i o wiele mniej wymagający, jeśli chodzi o precyzyjne stosowanie typów zmiennych. Co więcej, nie musisz kompilować kodu programów pisanych w języku JavaScript przed ich użyciem; jest to cecha, której nie posiada bardzo wiele innych języków programowania, włącznie z Javą. Pomimo to, JavaScript wciąż jest językiem trudniejszym do opanowania od języka HTML (choć z drugiej strony, jest on znacznie prostszy od Javy). Osoba bez żadnego przygotowania programistycznego może używać języka JavaScript do tworzenia bardzo prostych programów, takich jak przedstawione w tym rozdziale. Bardziej skomplikowane zastosowania będą wymagały poznania głównych pojęć i technik programistycznych.

Polepszanie efektywności serwera

Wraz ze wzrostem liczby użytkowników WWW, coraz więcej najpopularniejszych serwe­rów zbliża się do granicy swoich możliwości przetwarzania. W związku z tym, większość operatorów WWW szuka nowych sposobów zredukowania obciążenia ich systemów oraz uniknięcia kosztownego unowocześniania posiadanych komputerów. Takie właśnie były powody stworzenia map graficznych obsługiwanych przez przeglądarki (omówionych w rozdziale 16. — „Tworzenie i stosowanie map odsyłaczy”).

Wraz z pojawieniem się języka JavaScript twórcy stron WWW zyskali nowe możliwości. Załóżmy, że stworzyłeś formularz do wprowadzania szczegółowych informacji potrzebnych do działania Twojego systemu zamówień. Gdy formularz zostaje wysłany, program CGI musi w pierwszej kolejności sprawdzić otrzymane informacje i upewnić się, czy wszystkie pola formularza zostały poprawie wypełnione. Między innymi skrypt będzie musiał sprawdzić, czy zostało podane nazwisko osoby zamawiającej, wybrana została metoda płatności, czy podano numer karty kredytowej, itp.

Co się stanie, gdy Twój program CGI odkryje, iż brakuje bardzo istotnych informacji? W takim wypadku będziesz musiał poinformować użytkownika o zaistniałych problemach oraz poprosić go o ponowne wypełnienie i przesłanie formularza. Taki proces wymaga użycia wielu zasobów po stronie serwera (wykonanie każdego programu CGI wymaga wolnej pamięci operacyjnej oraz czasu procesora), jak również czasochłonnego nawiązywania połączeń sieciowych między klientem a serwerem.

Dzięki przeniesieniu wykonania wszystkich czynności sprawdzających poprawność przesyłanych danych na stronę przeglądarki, co jest możliwe w skryptach pisanych w języku JavaScript, można uniknąć konieczności wielokrotnego przesyłania danych do serwera (gdyż tylko jeden komplet poprawnych danych zostanie przesłany). To rozwiązanie ma także korzystny wpływ na efektywność pracy serwera, ponieważ program CGI nie musi już sprawdzać poprawności danych, co umożliwia zmniejszenie zasobów systemowych potrzebnych do wykonania programu.

JavaScript a dostawcy usług internetowych

Wielu dostarczycieli usług internetowych, z powodu konieczności zapewnienia odpowied­niego poziomu bezpieczeństwa systemu, wprowadza bardzo poważne ograniczenia możli­wości skryptów CGI. Dzięki zastosowaniu skryptów JavaScript da się odzyskać wiele z utraconych w ten sposób możliwości. Zastosowanie skryptów umożliwia bowiem wykonanie w przeglądarce wielu czynności wykonywanych uprzednio na serwerze.

Znaczna większość dostarczycieli usług internetowych umożliwia stosowanie prostych skryptów CGI, na przykład skryptów, które pobierają dane przesyłane z formularza i zapi­sują je w pliku dyskowym lub przesyłają do właściciela węzła. Jednakże, w przypadku ko­nieczności zastosowania bardziej skomplikowanego przetwarzania danych, niejed­nokrotnie trzeba było zmieniać dostawcę usług internetowych lub nawet „stawiać” własny serwer. Teraz jednak, dzięki użyciu skryptów JavaScript, nie będzie już mowy o takich problemach.

Posłużenie się skryptami służącymi do obsługi danych z formularzy, dostarczanych przez Twojego dostawcę usług internetowych wraz z procedurami JavaScript w stronach WWW, umożliwi pełną obsługę formularzy nawet na najbardziej zabezpieczanych serwerach WWW. Co więcej, po wprowadzeniu pełnej integracji pomiędzy Javą, JavaScriptem oraz dodatkami rozszerzającymi możliwości przeglądarek, będziesz mógł wykonywać w stro­nach WWW czynności, o których nigdy Ci się nie śniło i których nawet najlepsze progra­my CGI nie były w stanie wykonać.

Znacznik <SCRIPT>

Aby umożliwić umieszczanie programów napisanych w języku JavaScript na stronach WWW, firma Netscape zaproponowała wprowadzenie nowego znacznika — <SCRIPT>. Umieszczając ten znacznik wewnątrz dokumentu HTML, instruujesz przeglądarkę, aby kolejne linie dokumentu traktowała jako skrypt, a nie jak normalny kod HTML. Kod dokumentu traktowany jest jako skrypt aż do momentu napotkania znacznika </SCRIPT>; zawartość dokumentu umieszczona po tej etykiecie będzie traktowana jako kod źródłowy strony.

Jeśli znacznik <SCRIPT> użyty jest wewnątrz dokumentu HTML, to musi on posiadać atry­but LANGUAGE, deklarujący użyty język skryptowy. Aktualnie można stosować jedynie dwie wartości tego atrybutu: LANGUAGE="LiveScript" lub LANGUAGE="JavaScript". Nazwa „LiveScript” pochodzi z czasów, gdy firma Netscape rozpoczynała tworzenie języka JavaScript. Wraz z pojawieniem się przeglądarki Netscape Navigator 2.0, pierwszej wersji umożliwiającej wykonywanie skryptów, nazwa języka została oficjalnie zmieniona na JavaScript. Dlatego też aktualnie używanie atrybutu LANGUAGE="LiveScript" nie jest zalecane.

Do tej pory język JavaScript pojawił się już w trzech wersjach w przeglądarkach Netscape Navigator oraz w dwóch wersjach w przeglądarkach Microsoft Internet Explorer. Oznacza to, że dostępnych jest już kilka wartości atrybutu LANGUAGE. W przeglądarce Netscape Navigator 3 język JavaScript został rozszerzony do wersji 1.1. W przeglądarce Netscape Navigator 4 pojawiła się kolejna, rozbudowana wersja języka — JavaScript 1.2 . W Navigatorze 4.5 dostępna jest natomiast wersja JavaScript 1.3.

Struktura skryptów pisanych w języku JavaScript

Umieszczając skrypty JavaScript w kodzie dokumentów HTML, oprócz użycia znacznika <SCRIPT>, powinieneś przestrzegać także kilku dodatkowych zasad:

• pamiętaj, aby znacznik <SCRIPT> umieszczać pomiędzy znacznikami <HEAD> i </HEAD> na początku dokumentu, a nie pomiędzy znacznikami <BODY> i </BODY>. Nie jest to wymóg obowiązkowy, lecz raczej udogodnienie wynikające z tego, iż kod skryptów nie powinien być widoczny jako treść strony WWW, a tak byłby on traktowany w przypadku umieszczenia znacznika <SCRIPT> wewnątrz znaczników <BODY>. Kod skryptów powinien być umieszczany w nagłówku dokumentu wraz ze wszelkimi innymi znacznikami informacyjnymi i kontrolnymi, takimi jak <META> i <TITLE>;

• starsze przeglądarki, które nie potrafią wykonywać skryptów JavaScript, będą próbowały traktować ich kod jako normalny kod HTML. Dlatego też umieszczaj cały kod skryptów wewnątrz komentarzy: <!-- i -->. Jest to niesłychanie istotne. Takie postępowanie zagwarantuje, iż kod skryptu nigdy i w żadnej przeglądarce nie będzie wyświetlany jako treść strony;

• w odróżnieniu od języka HTML, w którym komentarze umieszczane są wewnątrz znaków: <!-- oraz -->, wewnątrz skryptów JavaScript komentarze rozpoczynają się od znaków: //. Wszystkie linie skryptu, które rozpoczynają się od tych znaków, będą traktowane jako komentarz i pomijane.

Uwzględniając wszystkie powyższe reguły, struktura strony WWW zawierającej skrypty JavaScript, powinna mieć następującą postać:

<HTML>

<HEAD>

<TITLE>Przykładowy skrypt w Javie</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Użyj znacznika początku komentarza, by ukryć kod JavaScript

// Tutaj rozpoczyna się kod JavaScript

// zamknij znacznik komentarza w linii bezpośrednio przed znacznikiem </SCRIPT> -->

</SCRIPT>

</HEAD>

<BODY>

Tu wstaw swój dokument

</BODY>

</HTML>

Atrybut SRC

Oprócz atrybutu LANGUAGE znacznik <SCRIPT> może posiadać jeszcze jeden atrybut — SRC. Użycie go pozwala na zastosowanie wewnątrz strony WWW skryptu zapisanego w zupełnie innym, niezależnym pliku. Ta możliwość jest bardzo przydatna, gdy kilka stron WWW korzysta z tego samego skryptu JavaScript oraz, gdy nie chcesz umieszczać kodu tego skryptu we wszystkich stronach.

Gdy będziesz chciał użyć tego atrybutu, znacznik <SCRIPT> przyjmie następującą postać:

<SCRIPT LANGUAGE="JavaScript" SRC="http://www.serwer.com/script.js">

W powyższej etykiecie skrypt może być dowolnym relatywnym lub absolutnym adresem URL; .js jest rozszerzeniem plików zawierających kod źródłowy skryptów napisanych w ję­zyku JavaScript.

Podstawowe polecenia i struktura języka

Jedną z podstaw języka JavaScript jest obiektowe podejście do programowania. Oznacza to, że wszystkie elementy stron WWW są traktowane jako obiekty, które są grupowane i wspólnie tworzą strukturę odpowiadającą zawartości całej strony.

W tej strukturze wszystkie elementy jednej strony WWW umieszczone są w jednym, pod­stawowym obiekcie (kontenerze) zwanym oknem (ang. window). Wewnątrz tego obiektu znajdują się kolejne obiekty (i kontenery), w których przechowywane są informacje o róż­nych elementach strony. Poniżej przedstawione zostały główne obiekty.

Location

Wewnątrz obiektu location przechowywane są informacje o położeniu aktualnej strony WWW, w tym pełny adres URL oraz poszczególne jego elementy, takie jak: domena, port, ścieżka czy też protokół.

History	W tym obiekcie zapamiętane są adresy wszystkich witryn WWW, które zostały odwiedzone w podczas aktualnej sesji. Obiekt history udostępnia również metody zmiany aktualnie wyświetlanej strony.
Document	Obiekt ten zawiera komplet informacji dotyczących aktualnej strony WWW. Informacje te dotyczą wszystkich formularzy i ich elementów, hiperłączy oraz kotwic. Co więcej, obiekt ten udostępnia wiele metod, pozwalających na programistyczną modyfikację zawartości takich elementów strony, jak pola tekstowe, pola wyboru czy inne elementy formularzy.
form	Obiekt form zawiera informacje o formularzu umieszczonym w aktu­alnej stronie. Informacje te dają dostęp do programu obsługi formularza (atrybutu ACTION) oraz metody przesyłania danych formularza (atrybutu METHOD). Obiekt ten zawiera także inne obiekty odpowiadające wszystkim elementom umieszczony na formularzu (polom, listom, przyciskom, itp.).

Kompletną listę obiektów dostępnych w języku JavaScript możesz znaleźć w witrynie internetowej firmy Netscape, pod adresem:

http://developer.netscape.com/docs/manuals/index.html.

Właściwości i metody

We wszystkich obiektach dostępne są dwa rodzaje zasobów: właściwości oraz metody.

Właściwości są zmiennymi przechowującymi wartości opisujące obiekt, którym jesteś zain­te­resowany. Dla przykładu, w obiekcie document dostępna jest właściwość title zawiera­jąca tytuł dokumentu określony za pomocą znacznika <TITLE>.

W kodzie skryptu JavaScript dostęp do tej właściwości możesz zdobyć za pomocą polecenia: document.title. Lewa strona tego polecenia określa obiekt, z którym chcesz pracować, a prawa, znajdująca się z prawej strony znaku kropki (.), interesującą Cię właściwość.

Właściwości są zmiennymi przechowującymi różne atrybuty obiektów stosowanych w języku JavaScript. Dostęp do wartości właściwości możliwy jest za pomocą polecenia o postaci: obiekt.właściwość.

Poniżej podane zostały przykłady kilku właściwości.

document.bgcolor	Kolor tła strony.
document.fgcolor	Kolor tekstu strony.
document.lastModified	Data ostatniej modyfikacji strony.
document.title	Tytuł aktualnie wyświetlanej strony WWW.

form.action	Adres URL skryptu CGI, służącego do obsługi danych wpisywanych do formularza.
location.hostname	Nazwa serwera, na którym umieszczona jest aktualna strona WWW.

Pełną listę właściwości wszystkich obiektów dostępnych w języku JavaScript możesz znaleźć w dokumentacji języka pod adresem:

http://developer.netscape.com/docs/manuals/index.html.

Metody są programistycznymi poleceniami skojarzonymi bezpośrednio z konkretnym obiektem. Dla przykładu, obiekt document udostępnia metodę o nazwie write, umożliwiającej wyświetlanie podanego tekstu bezpośrednio na stronie WWW. Metoda ta ma następującą postać:

document.write("Pokój światu");

Postać wywołania (wykonania) metody jest bardzo podobna do postaci odwołania do właś­ciwości: w pierwszej kolejności należy podać nazwę obiektu, następnie kropkę (.) i  nazwę wywoływanej metody. Dodatkowo, po nazwie metody należy umieścić parę nawiasów (). W nawiasach tych można umieścić argumenty przekazywane do metody, na przykład, jeśli metoda operuje na liczbach, liczby te można umieścić właśnie wewnątrz nawiasów. W powyższym przykładzie argumentem metody write() jest łańcuch znaków, który zostanie wyświetlony na stronie.

Metoda jest specjalną funkcją, która wykonuje czynności związane z obiek­tem. Wykonać (lub wywołać) metodę możesz, podając nazwę obiektu i nazwę metody, oddzielonych od siebie za pomocą kropki (.). Po nazwie metody należy umieścić parę nawiasów, w której mogą zostać podane argumenty wywołania metody.

Pamiętaj, iż nawet jeśli metoda nie pobiera żadnych argumentów, musisz dodać za jej naz­wą parę nawiasów. Dla przykładu, metoda toString() obiektu location, używana do zwrócenia adresu URL aktualnie wyświetlonej strony WWW w postaci łańcucha znaków, nie wymaga podania żadnych argumentów, pomimo to, w jej wywołaniu muszą zostać użyte nawiasy: location.toString().

Oprócz właściwości, wszystkie obiekty posiadają metody, których możesz używać w swo­ich programach JavaScript. Pełną listę dostępnych metod znajdziesz na WWW wraz z listą właściwości, poniżej podałam kilka przykładowych metod.

document.write(string)	Metoda wpisuje kod HTML lub tekst do aktualnej strony WWW, argument string określa tekst, który ma zostać wyświetlony.
form.submit()	Wywołanie tej metody powoduje wysłanie formularza.
window.alert(string)	Powoduje wyświetlenie okienka dialogoweg, argu­ment string jest łańcuchem znaków, który zostanie wyświetlony w okienku.
window.open(URL, nazwa)	Metoda powoduje otworzenie nowego okna przeglądarki. Argument URL jest adresem strony, która zostanie wyświetlona w nowym oknie, a argument nazwa jest naz­wą nowego okna przeglądarki.

Dzięki połączeniu metod document.write() i location.toString() oraz właściwości document.title, można stworzyć prosty skrypt przedstawiony poniżej. Wyniki jego wy-kona­nia pokazane zostały na rysunku 19.1.

	<HTML> <HEAD> <TITLE>Przykładowy skrypt Javy</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!—ukryj przed starszymi przeglądarkami document.write(document.title + "<BR>"); document.write(location.toString()); // zakończenie ukrycia --> </SCRIPT> </HEAD> </HTML>
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 sprawdź, 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 prowadzi interakcję ze stroną. Dla przykładu, gdy użytkownik wpisuje tekst w polu formularza lub używa przycisku, generowana jest określona sekwencja zdarzeń, które mogą być wyzwolo­ne w przeglądarce, przechwycone (zazwyczaj pod postacią funkcji) i obsłużone w progra­mie napisanym w języku JavaScript.

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ł posłużyć się następującą konstrukcją:

<SCRIPT LANGUAGE="JavaScript">

function nazwafunkcji (argumenty) {

Tutaj znajdują się operacje wykonywane przez funkcję

}

</SCRIPT>

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ą fun­kcji, wewnątrz pary nawiasów klamrowych umieścić należy instrukcje, które funkcja ma wykony­wać. Instrukcje te mogą być dowolnymi obliczeniami, sprawdzeniem 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 znaleźć 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 przy­pisywanie 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 wskaźnik myszy na określonym polu.
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 przedstawio­nymi powyżej, będziesz musiał podać nazwę odpowiedniej procedury obsługi zdarzenia, jako atrybut pola, którego działanie chcesz kontrolować. Dla przykładu rozpatrzmy standardowy formularz zawierający kilka pól tekstowych oraz przycisk do wysyłania danych:

<FORM METHOD="POST" SRC="../cgi-bin/form">

<INPUT TYPE="TEXT NAME="username">

<INPUT TYPE="TEXT NAME="emailAddress">

<INPUT TYPE="SUBMIT">

</FORM>

Jeśli do znacznika <FORM> dodasz atrybut onSubmit="return checkform( this )", to przed przesłaniem danych z formularza wykonana zostanie funkcja checkform(). 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 informacji. Parametr this przekazywany jako argument wywołania funkcji, umożliwia określenie obiektu skojarzonego ze znacznikiem <FORM>.

Sprawdzenia poprawności pól formularza możesz także dokonać poprzez określanie proce­dur obsługi zdarzeń onBlur oraz onChange w poszczególnych znacznikach <INPUT>. Bardzo dobrze nadaje się do tego celu procedura onBlur, gdyż jest wykonywana za każdym ra­zem, gdy użytkownik opuszcza pole.

W przypadku przycisków możesz także definiować procedury obsługi zdarzenia onClick, które wykonywane będą za każdym razem, gdy użytkownik kliknie odpowiedni przycisk. Na przykład, umieszczenie w formularzu znacznika <FORM TYPE="SUBMIT" onClick= "processclick()"> spowoduje wykonanie funkcji obslugaClick() za każdym razem, gdy kliknięty zostanie przycisk do wysyłania danych wpisanych w formula­rzu.

W języku JavaScript wprowadzony został nowy typ przycisku — <INPUT TYPE="BUTTON"> — powoduje on umieszczenie na stronie normalnego przycisku.

Zmienne

Oprócz właściwości język JavaScript pozwala także na przypisywanie i pobieranie wartoś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 odróżnieniu od większoś­ci innych języków programowania wysokiego poziomu, narzucających konieczność precy­zyjnego określenia typu zmiennych, w JavaScript typ zmiennych nie jest określany. Dlatego mówi się, iż JavaScript jest językiem o łagodnej kontroli typów. Oznacza to, iż w JavaScript, podczas definiowania zmiennych, nie trzeba 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 aktualnych 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 operatorem 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 <SCRIPT> poza jakąkolwiek funkcją, to będziesz miał do niej dostęp w dowolnym miejscu programu.

Operatory i wyrażenia

Po zdefiniowaniu zmiennej będziesz mógł używać jej zawartości lub modyfikować ją za pomocą operatorów. W tabeli 19.2 przedstawione zostały niektóre, najczęściej wykorzysty­wane operatory oraz przykłady ich zastosowania. (Podobnie jak w przypadku metod i właściwości, także i teraz pełną listę dostępnych operatorów możesz znaleźć w dokumentacji języka).

Tabela 19.2.

Operatory i wyrażenia dostępne w języku JavaScript

Operator	Przykład		Opis
+	a = b + c		Dodaje wartości zmiennych b i c oraz zapisuje wynik w zmiennej a.
-	a = b - c		Odejmuje wartość zmiennej c od wartości zmiennej b i wynik zapisuje w zmiennej a.
*	a = b * c		Mnoży wartości zmiennych b i c, a wynik zapisuje w zmiennej a.
/	a = b / c		Dzieli wartość zmiennej b przez wartość zmiennej c i wynik zapisuje w zmiennej a.
%	a = b % c		Oblicza resztę z dzielenia wartości zmiennej b przez wartość zmiennej c i wynik zapisuje w zmiennej a.
++	a = ++b		Inkrementuje wartość zmiennej b (zwiększa ją o 1) i wynik zapisuje w zmiennej a.
--	a = --b		Dekrementuje wartość zmiennej b (zmniejsza ją o 1) i wynik zapisuje w zmiennej a.
		Równania przedstawione w drugiej kolumnie tabeli 19.2 nazywane są wyrażeniami. Mówiąc jak najprościej, wyrażenie jest poprawnie sformułowaną grupą zmiennych, operatorów oraz innych wyrażeń, której wykonanie powoduje zwrócenie wartości. Dla przykładu, b+c powoduje zwrócenie wartości, która może być następnie zapisana w zmiennej a.

W języku JavaScript dostępne są także specjalne operatory powstałe poprzez połączenie operatora przypisania (=) oraz innego operatora. Operatory powstałe z takiego połączenia nazywane są operatorami przypisania. Zostały one przedstawione w tabeli 19.3.

Tabela 19.3.

Operatory przypisania dostępne w języku JavaScript

Operator	Przykład		Opis
+=	a += b		Ten przykład równoważny jest poleceniu a = a + b.
-=	a -= b		Ten przykład równoważny jest poleceniu a = a - b.
*=	a *= b		Ten przykład równoważny jest poleceniu a = a * b.
/=	a /= b		Ten przykład równoważny jest poleceniu a = a / b.
%=	a %= b		Ten przykład równoważny jest poleceniu a = a % b.
		Operatory + oraz += mogą być używane zarówno do operowania na liczbach, jak i na łańcuchach znaków. W przypadku użycia ich na łańcuchach znaków powodują połączenie dwóch łańcuchów w jeden, na przykład, "łańcuch 1" + "łańcuch 2" daje w wyniku "łańcuch 1 łańcuch 2".

Podstawy programowania w języku JavaScript

Aby połączyć wszystkie procedury obsługi zdarzeń, tj. metody, parametry, funkcje, zmienne oraz operatory, JavaScript wprowadza prosty zbiór instrukcji przypominających instrukcje dostępne w BASIC-u lub Javie.

Jeśli masz jakiekolwiek doświadczenie programistyczne, to poświęcenie kilku minut na przeglądnięcie dokumentacji firmy Netscape dotyczącej instrukcji w JavaScripcie pozwoli Ci na rozpoczęcie pisania swoich własnych programów w tym języku. Jeśli jednak nie masz żadnego doświadczenia programistycznego, to w dalszej części tego rozdziału znajdziesz podstawowe informacje, które będą niezbędne w dalszej pracy.

Czym jest program?

Niezależnie do używanego języka programowania, program jest zawsze zbiorem instrukcji opisujących, w postaci zrozumiałej dla komputera, czynności, które chcesz wykonać. W najprostszym przypadku wykonywanie programu rozpoczyna się na samym początku listy instrukcji, po czym kolejno wykonywane są wszystkie, aż do samego końca prog­ramu. Tak dzieje się w poniższym przykładzie:

<SCRIPT LANGUAGE="JavaScript">

// początek programu - UWAGA: linie rozoczynające się symbolem '//'
// traktowane są, jako komentarz

document.write(document.title + "<BR>");

document.write(location.toString());

// koniec programu

</SCRIPT>

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 stro­nie 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 modyfiko­wanie 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 odpowiedź");

}

if ( form.theSex.value == "female" ) {

document.write("Dziękujemy Pani za odpowiedź");

}

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 kontrolowane 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 JavaScript zostały przedstawione w tabeli 19.4.

Tabela 19.4.

Operatory porównania dostępne w języku JavaScript

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 odpowiedź");

}

else {

document.write("Dziękujemy Pani za odpowiedź");

}

W tym przykładzie nie potrzebujesz sprawdzenia drugiego warunku, w końcu jeden użyt­kownik 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ślnie, 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 podaną ilość razy. Język JavaScript dostarcza dwóch rodzajów tak zwanych „pętli”, czyli instrukcji 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

}

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 prawdziwy, to instrukcje wewnątrz pętli zostaną ponownie wykonane. W powyższym przykładzie instrukcje wewnątrz pętli będą wykonywane aż do momentu, gdy wartość zmiennej 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 mechanizmu modyfikacji zmiennych sterujących pętli, określających moment zakończenia wykonywania 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ć dowolnym 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ą do­pó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 zmie­nia 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ą znaleźć pod adresem http://developer.netscape.com/docs/manuals/index.html. Dokumentacja ta, oprócz opisu wszystkich elementów języka, zawiera wiele informacji ogólnych, takich jak przykłady i podręczniki.

Podsumowanie

JavaScript pozwala osobom tworzącym strony WWW na umieszczanie w tworzonych doku­mentach 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 <SCRIPT> oraz sposób użycia go do umie-szczania skryptów na stronach WWW. Dodatkowo przedstawione zostały podstawy języka JavaScript, podstawowe operatory, instrukcje oraz funkcje.

Rysunek 19.2. Dokumentacja JavaScriptu znajdująca się na witrynie internetowej firmy Internet Explorer

Dysponując tą podstawową wiedzą, będziesz mógł zapoznać się z prawdziwymi przykłada­mi zastosowania skryptów JavaScript oraz poznać bardziej zaawansowane zagadnienia związane z programowaniem w tym języku.

Warsztat

W tej części rozdziału znajdziesz pytania i odpowiedzi, quiz oraz ćwiczenia związane z językiem JavaScript.

Pytania i odpowiedzi

P. Czy nie potrzebuję jakiegoś środowiska programistycznego, aby móc pisać programy w JavaScripcie?

O. Nie. Jedyną rzeczą jakiej potrzebujesz, aby pisać programy w JavaScriptcie jest edytor tekstowy. Może myli Ci się JavaScript z Javą, językiem programowania o znacznie większych możliwościach, gdyż faktycznie, w przypadku Javy, do pisania programów będziesz potrzebował przynajmniej kompilatora.

P. Czy Java i JavaScript są językami kompatybilnymi?

O. Odpowiedź na to pytanie zależy od tego, co rozumiesz pod pojęciem „kompatybilne”. Większość składni obu tych języków jest bardzo podobna, jednakże podobieństwo pomię­dzy nimi praktycznie na tym się kończy. Nie da się skompilować programów napisanych w języku JavaScript za pomocą kompilatora Javy. Podobnie, programów Javy nie można umieszczać w kodzie dokumentów HTML, tak jak skryp­tów JavaScript. Programy napisa­ne w języku Java muszą najpierw zostać skompilowane, a następnie dołączone do strony WWW jako specjalne wykonywalne pliki. Natomiast, jak wiesz, kod programów pisanych w języku JavaScript umieszczany jest bezpośrednio w kodzie dokumentów HTML.

W przeglądarce Netscape Navigator 3 wprowadzona została technologia LiveConnect, umożliwiająca wzajemną wyminę informacji pomiędzy Javą, JavaScriptem oraz plug-inami. Dla przykładu, funkcja skryptu JavaScript może wywoływać metodę apletu napisanego w Javie i dołączonego do strony WWW lub metoda apletu może wywoły­wać funkcję skryptu w celu zmodyfikowania zawartości strony. Więcej informacji na temat technologii LiveScript możesz znaleźć w książce pod tytułem „JavaScript” wyda­nej przez wydawnictwo Helion.

P. W Javie oraz języku C++ zmienne definiowane są za pomocą takich słów kluczo­wych (określających typy) jak: int, char lub String. Dlaczego nie mogę postępować podobnie w języku JavaScript?

O. Bo nie możesz. Jak zostało powiedziane wcześniej, JavaScript jest językiem o łagodnej kontroli typów. Oznacza to, że zmienne mogą przyjmować dowolną postać i mogą być zmieniane podczas wykonywania programu; w konsekwencji, typ zmiennej określany jest na podstawie wartości zapisywanej w tej zmiennej.

Quiz

1. Czym język JavaScript różni się od języka Java?

2. Jakie są podobieństwa języków JavaScript i Java (oczywiście, oprócz nazwy)?

3. Jaki znacznik HTML został wprowadzony przez firmę Netscape w celu identyfikacji skryptów?

4. Czym są zdarzenia oraz w jaki sposób można je obsługiwać w języku JavaScript?

5. Jakie są różnice pomiędzy funkcjami i metodami?

Odpowiedzi

1. JavaScript to prosty język wykorzystywany wyłącznie w przeglądarkach WWW; Java to znacznie bardziej rozbudowany język programowania, którego można używać w dowolnych celach.

6. Skrypty pisane w języku JavaScript są wykonywane przez samą przeglądarkę WWW (oczywiście, jeśli dysponuje ona odpowiednimi możliwościami). Dzięki temu skrypty te można wykonywać na dowolnym komputerze oraz w dowolnym systemie operacyjnym, podobnie jak programy napisane w języku Java.

7. Aby umożliwić umieszczanie skryptów w dokumentach HTML, firma Netscape wprowadziła znacznik <SCRIPT>. Znacznik ten informuje przeglądarkę, iż umieszczone za nim linie kodu mają być traktowane jako skrypt, a nie jako zawartość strony WWW.

8. Zdarzenia to specjalne akcje wyzwalane w efekcie zmian stanu systemu operacyjnego lub programu (otworzenie okna, załadowanie strony, przesłanie formularza) albo w rezultacie czynności wykonywanych przez użytkownika (wpisanie tekstu, użycie łącza, zaznaczenie pola wyboru). Dzięki użyciu języka JavaScript można wykonywać czynności w odpowiedzi na pojawienie się konkretnych zdarzeń.

9. Metody są skojarzone z obiektami, natomiast funkcje nie są zależne od jakichkolwiek obiektów i działają poza ich zasięgiem.

Ćwiczenia

1. Jeśli jeszcze tego nie zrobiłeś, to poświęć kilka minut na przejrzenie dokumentacji języka JavaScript dostępnej na witrynie firmy Netscape pod adresem: http://developer.netscape.com/docs/manuals/index.html. Przekonaj się, czy będziesz w stanie odszukać informacje o nowych możliwościach języka JavaScript 1.3, które nie były dostępne w jego poprzedniej wersji 1.2.

2. Odszukaj dowolny skrypt napisany w języku JavaScript, nieważne czy będzie on używany na przeglądanej stronie, czy znajdziesz go w internetowym archiwum, przejrzyj jego kod źródłowy i spróbuj określić jego logikę działania oraz przeznaczenie.

566 Część 7. JavaScript i Dynamiczny HTML

Rozdział 19. Tworzenie skryptów w języku JavaScript 565

---