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

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.

W tym rozdziale poznasz podstawowe zagadnienia dotyczące języka JavaScript, takie jak:

n   czym jest JavaScript,

n   dlaczego miałbyś używać tego języka,

n   znacznik <SCRIPT>,

n   podstawowe polecenia oraz konstrukcje języka,

n   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.

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.

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:

n   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>;

n   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;

n   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.