r04-01, ## Documents ##, XML Vademecum profesjonalisty

Rozdział --> 4[Author:T] .
Język programowania JavaScript

Wielu autorów stron sieciowych trafia do XML z HTML i zwykle nie mają oni zbyt wielkiego doświadczenia programistycznego poza kodowaniem HTML - a w tym języku umiejętność programowania nie jest potrzebna, gdyż kod ten jest po prostu interpretowany i wyświetlany przez przeglądarkę sieciową. W przypadku XML sytuacja wygląda już inaczej, gdyż ten język z kolei służy głównie do zapisu danych. Wprawdzie przeglądarka może te dane udostępnić, ale do autora należy już sięgnięcie do nich, a to już wymaga pewnych umiejętności programistycznych. W tym rozdziale skupimy się na opanowaniu podstawowej wiedzy, która umożliwi użycie XML w stosowanych obecnie przeglądarkach sieciowych. Jeśli chodzi jedynie o wyświetlenie dokumentu XML, żadna wiedza programistyczna nie jest potrzebna, gdyż przeglądarka sama potrafi zinterpretować dokument, można też zastosować arkusz stylów.

Obecnie istnieją --> dwie przeglądarki[Author:T] , które potrafią bezpośrednio zinterpretować XML: Internet Explorer Microsoftu (wersja 5 i wyższe) oraz Navigator Netscape'a (wersja 6 i wyższe). Niezależnie od tego, co sądzisz o Microsofcie, jednego nie można im odmówić: jako jedni z pierwszych udostępnili obsługę XML i zaangażowali się w rozwój tego języka, dzięki temu to Internet Explorer był pierwszą przeglądarką, w której można obsługiwać dokumenty XML stosując języki VBScript (język skryptowy Microsoftu oparty na ich Visual Basicu) i JavaScript. Jeśli chodzi o Netscape, obsługa XML pojawiła się po raz pierwszy w testowych edycjach ich przeglądarki w wersji 6 (udostępnianych jako Mozilla). W tej książce, aby prezentowany kod można było uruchamiać w możliwie wielu przeglądarkach, użyjemy języka JavaScript (później też omówimy programowanie w Javie). Jeśli jesteś już z JavaScriptem za pan brat, spokojnie możesz ten rozdział opuścić - ale być może warto, byś go przynajmniej przekartkował.

Czym jest JavaScript?

JavaScript jest najpowszechniej stosowanym obecnie językiem skryptowym. Stosując JavaScript możesz w witryny sieciowe wstawiać programy i je uruchamiać. W następnym rozdziale zobaczysz, jak można użyć tych programów do pobierania treści elementów XML i wartości ich atrybutów, a także jak wyszukiwać w dokumentach XML dane.

W Internet Explorerze doskonałym narzędziem do obsługi XML są wyspy XML, które umożliwiają wstawianie kodu XML bezpośrednio w strony HTML dzięki możliwości bezpośredniego odczytywania dokumentów XML. W tym rozdziale poznamy sam JavaScript, w następnym użyjemy tego języka do parsowania dokumentów XML. Z kolei --> w rozdziale 6[Author:T] użyjemy JavaScriptu do ładowania dokumentów XML do rekordów bazy danych, co umożliwia wyszukiwanie, porządkowanie i wyświetlanie danych na różne sposoby.

Programy JavaScriptu wpisuje się do dokumentów HTML stosując znacznik <SCRIPT>, który zwykle znajduje się w sekcji HEAD. Jeśli jednak programu używasz do wyświetlania tekstu bezpośrednio na stronie, odpowiedni znacznik <SCRIPT> umieścić należy w sekcji BODY, gdyż sekcja HEAD może zostać zinterpretowana jeszcze zanim dostępna będzie sekcja BODY.

Oto przykład, od którego zaczniemy. Języka JavaScript używamy do wypisania tekstu „Witaj w JavaScripcie!” na stronie przy jej pierwszym wyświetleniu:

<HTML>

<HEAD>

<TITLE>

Witaj w JavaScripcie!

</TITLE>

</HEAD>

<BODY>

<!--

document.writeln("Witaj w JavaScripcie!")

//-->

</SCRIPT>

<H1>

Witaj w JavaScripcie!

</H1>

</CENTER>

</BODY>

</HTML>

Wyniki interpretacji tego kodu HTML pokazano na rysunku 4.1. Kod JavaScriptu wypisał tekst powitalny w lewym górnym rogu strony.

Rysunek 4.1.

Użycie JavaScriptu w Internet Explorerze

0x01 graphic

Wprawdzie w tej chwili palmę pierwszeństwa dzierży Internet Explorer, ale prowadzący się stale zmienia i warto pamiętać o pewnych różnicach w implementacji JavaScriptu, szczególnie między Microsoftem a Netscape. Jeśli tę samą stronę chcesz obejrzeć w Netscape Navigatorze, przed pisaniem czegokolwiek w dokumencie musisz go otworzyć, a następnie trzeba go zamknąć:

<HTML>

<HEAD>

<TITLE>

Witaj w JavaScripcie!

</TITLE>

</HEAD>

<BODY>

<!--

document.open()

document.writeln("Witaj w JavaScripcie!")

document.close()

//-->

</SCRIPT>

<H1>

Witaj w JavaScripcie!

</H1>

</CENTER>

</BODY>

</HTML>

Teraz na chwilę nasz przykład odłóżmy i zastanówmy się w ogóle, jak kod JavaScript wstawia się do strony. Kod umieszczamy między znacznikami <SCRIPT> a </SCRIPT>, przy czym dodajemy jeszcze atrybut LANGUAGE o wartości JavaScript, aby przeglądarka wiedziała, jak skrypt ma interpretować:

<HTML>

<HEAD>

<TITLE>

Witaj w JavaScripcie!

</TITLE>

</HEAD>

<BODY>

</SCRIPT>

<H1>

Witaj w JavaScripcie!

</H1>

</CENTER>

</BODY>

</HTML>

Cały kod JavaScriptu zamykać będziemy w komentarzu HTML. Jest to bardzo dobry zwyczaj - przeglądarki HTML, w przeciwieństwie do przeglądarek XML, jeśli nie rozumieją znaczników, to je pomijają i po prostu wyświetlają tekst między nimi się znajdujący. Niektóre przeglądarki mogą nie rozumieć JavaScriptu ani znacznika <SCRIPT>, więc po prostu wyświetliłyby kod funkcji. Jeśli przeglądarka nie potrafi JavaScriptu zinterpretować, to po prostu cały kod pominie jako komentarz. Z kolei przeglądarki JavaScript obsługujące zignorują znaczniki komentarza - zwróć jednak uwagę na to, że na końcu zamiast zwykłego --> użyliśmy //-->. Jest to konieczne po to, żeby przeglądarka napisu --> nie próbowała zinterpretować jako kodu JavaScript (// to z kolei oznaczenie komentarza w JavaScripcie):

<HTML>

<HEAD>

<TITLE>

Witaj w JavaScripcie!

</TITLE>

</HEAD>

<BODY>

<!--

//-->

</SCRIPT>

<H1>

Witaj w JavaScripcie!

</H1>

</CENTER>

</BODY>

</HTML>

Przeglądarki nie obsługujące JavaScriptu

Istnieje też znacznik <NOSCRIPT>, który umożliwia wyświetlanie komunikatów w przeglądarkach nie obsługujących JavaScriptu - na przykład:

<NOSCRIPT>Właśnie przeszła Ci koło nosa świetna prezentacja w języku JavaScript!</NOSCRIPT>

Przeglądarki nie obsługujące JavaScriptu nie potrafią zinterpretować ani znacznika <SCRIPT>, ani <NOSCRIPT>, ale wyświetlą treść elementu NOSCRIPT. Z kolei treść elementu SCRIPT pominą, gdyż umieściliśmy ją w komentarzu. Przeglądarki obsługujące JavaScript znacznik <NOSCRIPT> pomijają.

Teraz możemy już zacząć wpisywać kod JavaScript. Tym razem jest to po prostu wyrażenie document.writeln("Witaj w JavaScripcie!"), które powoduje wypisanie podanego tekstu w oknie przeglądarki:

<HTML>

<HEAD>

<TITLE>

Witaj w JavaScripcie!

</TITLE>

</HEAD>

<BODY>

<!--

document.writeln("Witaj w JavaScripcie!")

//-->

</SCRIPT>

<H1>

Witaj w JavaScripcie!

</H1>

</CENTER>

</BODY>

</HTML>

Tak właśnie wygląda pierwszy nasz wiersz kodu JavaScript. Podczas ładowania strony kod ten jest odczytywany i wykonywany przez przeglądarkę.

Oficjalna specyfikacja JavaScriptu mówi, że każda instrukcja kończyć się powinna średnikiem. Zatem formalnie nasz pierwszy wiersz powinien wyglądać tak: document.writeln("Witaj w JavaScripcie!");, jednak obecnie przeglądarki już tego średnika nie wymagają - jest to wygodne, bo bardzo łatwo jest zapomnieć o nim. W przypadku typowego kodu JavaScript znajdowanego w Sieci średniki te są pomijane, więc i my będziemy tak samo postępowali.

Dwie istotne implementacje JavaScriptu to implementacje firm Netscape i Microsoft. Szczera i głęboka przyjaźń między tymi firmami ulega jednak pewnym wahaniom, szczególnie jeśli chodzi o przeglądarki, jeśli więc sądzisz, że obie implementacje JavaScriptu mogą być niezgodne, to masz rację.

JavaScript i Netscape

Dokumentację JavaScriptu jak go widzi Netscape znajdziesz pod adresem http://developer.netscape.com/tech/javascript/index.html (pamiętaj, że tego typu adresy mogą jednak się często zmieniać). Netscape stworzył też wersję JavaScriptu przeznaczoną do używania na serwerach, a nie w przeglądarkach - opis tej wersji znajdziesz pod adresem http://docs.iplanet.com/docs/manuals/ssjs.html.

JScript i Microsoft

Implementacja JavaScriptu zrobiona przez Microsoft różni się od implementacji Netscape, jest też od niej bogatsza. Wobec tego językowi zrealizowanemu w Internet Explorerze nadano nazwę JScript, jego oficjalną dokumentację znajdziesz pod adresem http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/techinfo/jsdocs.htm (pamiętaj, że strony Microsoftu zmieniają się średnio raz na 15 minut, więc kiedy to czytasz, strona ta może być całkiem gdzie indziej).

ECMAScript

Gdzie dwóch się bije, tam trzeci korzysta - nic zatem dziwnego, że znalazł się chętny do stworzenia ujednoliconej wersji języka. Europejskie Stowarzyszenie Producentów Komputerów ECMA z siedzibą w Genewie stworzyło standard JavaScriptu, którego bieżąca wersja dostępna jest pod adresami http://www.ecma.ch/ecma1/stand/ecma-262.htm i http://www.ecma.ch/ecma1/stand/ecma-290.htm (adresy te wyglądają nieco tymczasowo, zresztą raz się już zmieniły podczas robienia korekty technicznej naszej książki; jeśli adresy te nie będą działały, udaj się po prostu pod adres www.ecma.ch i wyszukaj słowa ECMAScript). Zresztą niektórzy nazywają JavaScript ECMAScriptem; wersja JavaScriptu oferowana przez Netscape jest z ECMAScriptem zgodna.

Istnieje mnóstwo darmowych zasobów, z których możesz skorzystać do nauki JavaScriptu - oto kilka adresów na początek:

http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html: przewodnik Netscape po JavaScripcie.
http://javascript.internet.com: gotowe do użycia darmowe skrypty.
www.infohiway.com/javascript/: gotowe do użycia darmowe skrypty.
www.jsworld.com: przykłady i archiwa JavaScriptu.
www.webteacher.com/javascript/: szczegółowy podręcznik JavaScriptu.

JavaScript jest obiektowy

JavaScript jest językiem obiektowym. Stwierdzenie to nie powinno wprawiać Cię w zakłopotanie, gdyż programowanie obiektowe w naszym przypadku będzie znacznie łatwiejsze. Oznacza to tyle, że JavaScript udostępni nam obiekty, które pozwolą manipulować przeglądarką lub dokumentem.

Użyliśmy już obiektu document, jednego z najbardziej wszechstronnych obiektów JavaScriptu. Obiekt ten wskazuje treść (BODY) dokumentu wyświetlanego w przeglądarce - za pośrednictwem tego obiektu możesz sięgać do pokazywanej strony. W poprzednim przykładzie użyliśmy metody writeln obiektu document, aby wypisał nam żądany tekst:

<!--

document.writeln("Witaj w JavaScripcie!")

//-->

</SCRIPT>

Metody umożliwiają wykonywanie różnych akcji - na przykład writeln wypisuje na stronie sieciowej tekst. Inne metody umożliwiają zmianę strony pokazywanej w przeglądarce lub przesyłanie danych zwrotnie na serwer i tak dalej.

Obiekty, do których dostęp umożliwia JavaScript, stanowią o sile tego języka - w następnym rozdziale przyjrzymy się na przykład, jak obiekt document umożliwia sięganie do dokumentów XML. Oto zestawienie najczęściej używanych obiektów JavaScriptu:

Obiekt	Opis
document	Reprezentuje treść strony sieciowej. Obiekt ten umożliwia sięganie do wszystkich elementów strony, takich jak łącza, obrazki, zakładki i tak dalej.
history	Obiekt zawierający listę stron odwiedzonych przed załadowaniem strony bieżącej. Za pomocą metod tego obiektu można poruszać się do przodu i wstecz po liście odwiedzonych stron (zwanej też listą historii).
location	Obiekt zawiera informacje o położeniu bieżącego dokumentu, w tym adres URL, nazwę domeny, ścieżkę, port serwera i inne.
navigator	Obiekt ten odnosi się do samej przeglądarki. Użycie go pozwala określić jej typ.
window	Obiekt ten odnosi się do bieżącego okna przeglądarki, zawiera wiele użytecznych metod. W Internet Explorerze do obsługi zdarzeń używa się podobiektu event obiektu window, czym zajmiemy się pod koniec tego rozdziału.

W JavaScripcie istnieje jeszcze wiele innych obiektów, możesz też tworzyć własne obiekty. W tym ostatnim wypadku definiuje się klasę, którą można uważać za typ obiektu. Za pomocą operatora new można tworzyć nowe obiekty danej klasy - klas wprawdzie tworzyć nie będziemy, ale omówimy w następnym rozdziale operator new.

Aby móc z obiektów skorzystać, musisz znać dwa ich aspekty: metody, o których już wspomniano, oraz właściwości.

Metody i właściwości w JavaScripcie

Programowanie w JavaScripcie opiera się przede wszystkim na obiektach. Widziałeś już obiekt document, znasz jeden sposób jego użycia za pośrednictwem metody writeln. Aby użyć jakiejś metody, podajesz nazwę obiektu, dopisujesz kropkę (.) i podajesz nazwę metody, na przykład document.writeln. Oto zestawienie niektórych metod:

Metoda	Opis
document.write	Dopisuje tekst do treści bieżącego dokumentu.
document.writeln	Dopisuje tekst do treści bieżącego dokumentu, na koniec dodaje znak końca wiersza.
history.go	Powoduje wyświetlenie w przeglądarce wybranej strony z listy odwiedzonych stron.
window.alert	Powoduje wyświetlenie w przeglądarce okienka dialogowego z ostrzeżeniem.
window.open	Powoduje otwarcie nowego okna przeglądarki, w którym może zostać wyświetlony nowy dokument.

JavaScript zawiera setki takich metod, umożliwiają one wykorzystanie uruchomionej przeglądarki. Użycie metod pozwala wymusić na przeglądarce wykonanie jakichś działań, na przykład odczytanie i zmianę właściwości obiektów JavaScriptu. Na przykład właściwość document.fgcolor zawiera kolor tekstu w bieżącej stronie sieciowej; zmiana tej właściwości powoduje zmianę koloru czcionki.

Oto wybrane właściwości wraz z obiektami, których one dotyczą:

Właściwość	Opis
document.bgcolor	Zawiera kolor tła bieżącej strony.
document.fgcolor	Zawiera kolor pierwszego planu (czyli domyślny kolor tekstu) bieżącej strony.
document.lastmodified	Zawiera datę ostatniej modyfikacji strony (jednak w przypadku wielu dokumentów ta informacja może być niedostępna).
document.title	Tytuł bieżącej strony, pojawia się w pasku tytułu przeglądarki.
navigator.appName	Nazwa przeglądarki - można jej użyć do określenia typu przeglądarki użytkownika. Pod koniec tego rozdziału użyjemy tej właściwości do odróżnienia Internet Explorera od Netscape Navigatora.

Używając metod i właściwości możesz zapanować nad tym, co się dzieje na pokazywanej stronie sieciowej, pod wieloma względami kontrolujesz działanie przeglądarki. W tym rozdziale i dwóch następnych używać będziemy właśnie różnych metod i właściwości.

Zapoznaliśmy się już nieco z metodami i właściwościami, ale zanim zajmiemy się programowaniem, konieczne jest poznanie jeszcze jednego pojęcia JavaScriptu: zdarzeń.

Zdarzenia w JavaScripcie

Kiedy ładujesz do przeglądarki dokument, przeglądarka rejestruje, czy ładowanie się powiodło, czy nie. Kiedy użytkownik kliknie przycisk umieszczony na stronie sieciowej lub użyje myszki, przeglądarka też to rejestruje. W jaki sposób przeglądarka informuje JavaScript, co się dzieje? Otóż używa do tego zdarzeń. Kiedy na przykład użytkownik kliknie myszką gdzieś na stronie, pojawia się zdarzenie mouseDown. Aby to zdarzenie obsłużyć w kodzie, trzeba je z tym kodem powiązać. Obecnie w większości znaczników HTML istnieje atrybut onMouseDown, który umożliwia powiązanie tego zdarzenia z kodem. Za pomocą tego atrybutu można JavaScriptowi nakazać wykonanie jakiegoś zadania, na przykład zmianę tła strony na zielone (poniższy przykład działa tylko w Internet Explorerze; uruchomienie go także w przeglądarce Netscape wymaga dopisania nieco kodu, zajmiemy się tym pod koniec tego rozdziału):

<HTML>

<HEAD>

<TITLE>

Użycie zdarzeń JavaScriptu

</TITLE>

</HEAD>

<H1>

Kliknij gdziekolwiek na stronie, aby ją zazielenić!

</H1>

</CENTER>

</BODY>

</HTML>

Jak widać, kiedy użytkownik kliknie tę stronę, uruchamiany jest kod document.bgColor='green', co powoduje przypisanie wartości green właściwości document.bgColor. Wynik pokazano na rysunku 4.2.

Rysunek 4.2.

Użycie zdarzeń w Internet Explorerze

0x01 graphic

Ten przykład jest bardzo prosty, cały kod JavaScriptu znajduje się znaczniku <BODY>. Jeśli kod jest dłuższy, zwykle umieszcza się go w znacznikach <SCRIPT> i w znaczniku <BODY> umieszcza się jedynie wywołanie tego kodu. Zagadnienie to będziemy omawiać dokładniej dalej w tym rozdziale.

Dostępnych jest wiele różnych zdarzeń, w tabeli 4.1 zestawiono te najczęściej używane (pamiętaj jednak, że to, jakie zdarzenia są obsługiwane, zależy od stosowanej przeglądarki i od znacznika).

Tabela 4.1.
Typowe zdarzenia

Zdarzenie	Opis
onBlur	Zachodzi, kiedy element traci kursor (do elementu z kursorem przesyłane są wciskane przez użytkownika klawisze).
onChange	Zachodzi, kiedy zmieniają się dane w kontrolce HTML (kontrolka HTML to pole tekstowe, przycisk, lista i tak dalej).
onClick	Zachodzi, kiedy element zostanie kliknięty.
onDblClick	Zachodzi, kiedy element zostanie dwukrotnie kliknięty.
onError	Zachodzi, kiedy podczas wykonywania kodu JavaScript pojawi się błąd.
onFocus	Zachodzi, kiedy element uzyskuje kursor (do elementu z kursorem przesyłane są wciskane przez użytkownika klawisze).
onKeyDown	Zachodzi podczas wciśnięcia klawisza.
onKeyPress	Zachodzi przy wciśnięciu klawisza, kiedy dostępny jest kod tego klawisza.
onKeyUp	Zachodzi podczas zwolnienia wciśniętego uprzednio klawisza.
onLoad	Zachodzi podczas załadowania dokumentu do przeglądarki.
onMouseDown	Zachodzi, kiedy wciśnięty zostanie przycisk myszki.
onMouseMove	Zachodzi, kiedy przesuwa się wskaźnik myszki.
onMouseOut	Zachodzi, kiedy wskaźnik myszki opuszcza widoczny na ekranie element HTML.
onMouseOver	Zachodzi, kiedy wskaźnik myszki przesuwa się nad elementem.
onMouseUp	Zachodzi, kiedy zwalniany jest przycisk myszki.
onMove	Zachodzi, kiedy przenoszony jest element - czy to z kodu, czy przez użytkownika.
onReset	Zachodzi, kiedy użytkownik kliknie przycisk RESET na formularzu HTML.
onResize	Zachodzi, kiedy użytkownik zmieni rozmiary elementu lub całej strony.
onSelect	Zachodzi, kiedy użytkownik zaznaczy część dokumentu.
onSubmit	Zachodzi, kiedy użytkownik kliknie przycisk SUBMIT na formularzu HTML.
onUnload	Zachodzi, kiedy strona jest usuwana z przeglądarki.

Zdarzeń używa się do obsługi działań użytkownika i przeglądarki, istnieje kilkadziesiąt różnych zdarzeń. Różne zdarzenia obsługiwane są w różnych znacznikach i w różnych przeglądarkach. W tabelach 4.3 i 4.4 znajdujących się dalej w tym rozdziale zestawiono zdarzenia obsługiwane odpowiednio przez przeglądarkę Internet Explorer i przez przeglądarkę Netscape Navigator.

Cały ten wstęp miał Ci uświadomić, jak silnym narzędziem jest JavaScript. Teraz czas dokładniej zająć się samym językiem, abyśmy mogli w następnych dwóch rozdziałach go szerzej wykorzystać.

Programowanie w JavaScripcie

W tym rozdziale zdobędziesz pierwsze szlify w używaniu JavaScriptu - zaczniemy od omówienia składni tego języka. Jeśli na przykład chcemy jakieś działania wykonać warunkowo, można użyć instrukcji if. W poniższym kodzie porównujemy wartości 719 i 143; jeśli pierwsza z nich jest większa od drugiej, wyświetlamy odpowiedni komunikat:

<HTML>

<HEAD>

<TITLE>

Użycie instrukcji if w JavaScripcie

</TITLE>

</HEAD>

<BODY>

if(719 > 143){

document.writeln(

"Pierwsza wartość jest większa od drugiej."

)

}

</SCRIPT>

<H1>

Użycie instrukcji if w JavaScripcie

</H1>

</CENTER>

</BODY>

</HTML>

Działanie tej strony w przeglądarce pokazano na rysunku 4.3 - wynika stąd, że 719 jednak jest większe od 143.

Rysunek 4.3.

Użycie instrukcji if w JavaScripcie

0x01 graphic

Wyszukiwanie błędów w kodzie

Kiedy tworzysz kod JavaScriptu w Internet Explorerze, przeglądarka ta wyświetla okienko dialogowe z zestawieniem znalezionych w kodzie błędów. Netscape Navigator z kolei po prostu odmawia wykonania kodu, który uważa za nieprawidłowy. Aby sprawdzić, o jakie błędy chodzi, w okienku adresowym wpisz javascript: i wciśnij Enter, a otworzy się nowe okienko z informacją o znalezionych błędach.

W dalszej części tego rozdziału będziemy właśnie omawiać przeróżne instrukcje takie, jak if, a w następnych dwóch rozdziałach ze zdobytej tu wiedzy będziemy korzystać.

Dane w JavaScripcie

Użycie danych jest podstawą działania niemalże wszystkich programów javascriptowych. W języku tym obsługiwanych jest wiele typów danych: liczby, wartości logiczne, łańcuchy tekstowe i inne. Dane przechowuje się w zmiennych.

Tak jak w innych językach programowania, zmienna to po prostu nazwane miejsce w pamięci, w którym można swoje dane umieścić. Zmienne w JavaScripcie tworzy się instrukcją var.

Oto przykład: tworzymy nową zmienną temperatura i za pomocą operatora przypisania (=) nadajemy jej wartość 72. Kiedy później w kodzie użyjemy tej zmiennej, JavaScript zastąpi ją jej wartością, czyli 72, co nam pozwoli wyświetlić temperaturę:

<HTML>

<HEAD>

<TITLE>

Zmienne w języku JavaScript

</TITLE>

</HEAD>

<BODY>

var temperatura

temperatura = 72

document.writeln("Woda ma " + temperatura + "stopni(e).")

</SCRIPT>

<H1>

Zmienne w języku JavaScript

</H1>

</CENTER>

</BODY>

</HTML>

Tym razem metodzie document.writeln jako parametr przekazujemy "Woda ma " + temperatura + "stopni(e)." - używamy operatora dodawania do połączenia trzech wyrażeń w jeden napis. Zmienna temperatura zastępowana jest swoją wartością, czyli w naszym wypadku jest to 72 - rysunek 4.4.

Rysunek 4.4.

Zmienne w JavaScripcie

0x01 graphic

Można też zmienną utworzyć i od razu w tej samej instrukcji var przypisać jej wartość. Nasz kod wyglądałby wtedy tak:

var temperatura = 72

document.writeln("Woda ma " + temperatura + "stopni(e).")

W zmiennych JavaScriptu można zapisywać nie tylko liczby, ale także tekst. W następnym przykładzie zapiszemy cały potrzebny nam napis w zmiennej stanWody, następnie go wyświetlimy:

<HTML>

<HEAD>

<TITLE>

Zmienne w języku JavaScript

</TITLE>

</HEAD>

<BODY>

<!--

var stanWody

stanWody = "Woda ma 72 stopni(e)."

document.writeln(stanWody)

//-->

</SCRIPT>

<H1>

Zmienne w języku JavaScript

</H1>

</CENTER>

</BODY>

</HTML>

Ten kod da dokładnie taki sam wynik, jaki pokazano na rysunku 4.4.

Zwróć uwagę na zmienną stanWody. W JavaScripcie jest zwyczaj nazywania zmiennych małymi literami. Jeśli jednak nazwa zmiennej składa się z kilku słów, to poszczególne słowa od drugiego poczynając zaczyna się wielkimi literami. Nazwy zmiennych JavaScriptu podlegają takim samym ograniczeniom, jak zmienne nazwy elementów XML - oto kilka przykładów:

licznik
liczbaLaczy
licznikJeszczeZostalo
jednaZTychBardzoBardzoDlugichNazwZmiennych

Komentarze w JavaScripcie

Tak jak w HTML czy XML, tak i w JavaScripcie możesz wstawiać komentarze - używa się do tego podwójnego ukośnika (//). Interpreter pomija wszystko, co znajduje się za podwójnym ukośnikiem aż do końca wiersza:

<HTML>

<HEAD>

<TITLE>

Zmienne w języku JavaScript

</TITLE>

</HEAD>

<BODY>

<!--

// Tworzymy zmienną stanWody

var stanWody

// Nadajemy naszej zmiennej wartość

stanWody = "Woda ma 72 stopni(e)."

// i w końcu wyświetlamy jej wartość

document.writeln(stanWody)

//-->

</SCRIPT>

<H1>

Zmienne w języku JavaScript

</H1>

</CENTER>

</BODY>

</HTML>

Użycie operatorów JavaScriptu

A co, jeśli chcemy nasze dane jakoś przetwarzać? Załóżmy, że chcemy na przykład przemnożyć 219 przez 45 - w JavaScripcie istnieje operator mnożenia, *. Oto przykład:

<HTML>

<HEAD>

<TITLE>

Użycie operatorów JavaScriptu

</TITLE>

</HEAD>

<BODY>

var wynik

wynik = 219 * 45

document.writeln("219 * 45 = " + wynik)

</SCRIPT>

<H1>

Użycie operatorów JavaScriptu

</H1>

</CENTER>

</BODY>

</HTML>

Na rysunku 4.5 pokazano wynik działania powyższego kodu.

Rysunek 4.5.

Użycie operatorów w JavaScripcie

0x01 graphic

W JavaScripcie do dyspozycji programisty jest wiele operatorów. Przykłady to operator inkrementacji, ++, powodujący powiększenie wartości o 1; jeśli licznik ma wartość 400, to zapis ++licznik spowoduje zmianę jego wartości na 401.

Operatory prefiksowane a operatory wstawiane po wartości

Jak doskonale wiedzą o tym doświadczeni programiści języków C, C++, Perl, Java i JavaScript, operatory inkrementacji (++) i dekrementacji (--) mogą mieć postać przedrostka i przyrostka: ++licznik lub licznik++. Operatory w postaci przedrostka są wykonywane przed ewaluacją reszty wyrażenia, operatory w postaci przyrostka wykonywane są na końcu, po określeniu wartości wyrażenia.

W tabeli 4.2 zestawiono operatory JavaScriptu (jak zwykle dalsze szczegóły znajdziesz w dokumentacji języka).

--> Tabela 4.2.[Author:T]
Operatory JavaScriptu

Operator	Opis
Operatory arytmetyczne
-	Jednoargumentowy operator podający liczbę przeciwną.
+	Dodaje dwie liczby lub łączy dwa napisy w całość.
-	Odejmuje od siebie dwie liczby.
*	Mnoży przez siebie dwie liczby.
/	Dzieli dwie liczby przez siebie.
++	Inkrementacja - zwiększa wartość o 1.
--	Dekrementacja - zmniejsza wartość o 1.
%	Modulo - zwraca resztę z dzielenia przez siebie dwóch liczb.
Operatory bitowe
~	Bitowa negacja.
&	Bitowa koniunkcja (AND).
\|	Bitowa alternatywa (OR).
^	Bitowa alternatywa z wyłączaniem (XOR).
<<	Bitowe przesunięcie w lewo.
>>	Bitowe przesunięcie w prawo.
>>>	Bitowe przesunięcie w prawo bez zachowania znaku.
Operatory logiczne
!	Zaprzeczenie logiczne (NOT).
&&	Logiczna koniunkcja (AND).
\|\|	Logiczna alternatywa (OR).
Operatory porównania
==	Sprawdza, czy dwa podane wyrażenia są sobie równe.
===	Tożsamość - sprawdza, czy dwa wyrażenia są sobie równe i czy są tego samego typu.
!=	Nierówność - sprawdza, czy podane wyrażenia są różne co do wartości.
!==	Sprawdza, czy podane dwa wyrażenia są różne co do wartości lub co do typu.
>	Sprawdza, czy pierwsze wyrażenie jest większe od drugiego.
>=	Sprawdza, czy pierwsze wyrażenie jest większe od drugiego bądź mu równe.
<	Sprawdza, czy pierwsze wyrażenie jest mniejsze od drugiego.
<=	Sprawdza, czy pierwsze wyrażenie jest mniejsze od drugiego bądź mu równe.
Inne
=	Przypisanie - przypisuje wartość lub obiekt zmiennej.
,	Przecinek powoduje sekwencyjne określenie wartości wyrażeń.
?:	Operator warunkowy trójargumentowy - jeśli podany jako pierwszy argument warunek jest prawdziwy, wykonuje wyrażenie z drugiego argumentu. W przeciwnym wypadku wykonuje wyrażenie z trzeciego argumentu.
new	Tworzy nowy obiekt.
typeof	Określa typ danych zawartych w wyrażeniu.

Oprócz operatorów zestawionych w tabeli istnieją jeszcze kombinacje składające się z dwóch operatorów, na przykład licznik += 101 powoduje dodanie do zmiennej licznik wartości 101. W JavaScripcie dopuszczalne są następujące kombinacje operatorów: +=, -=, *=, /=, %=, &=, |=, ^=, <<=, >>= i >>>= .

Warto też zauważyć, że wiele z tych operatorów związanych jest z porównywaniem wartości i podejmowaniem decyzji o dalszym przetwarzaniu - używaliśmy już operatora większości, >:

if(719 > 143){

document.writeln(

"Pierwsza wartość jest większa od drugiej."

)

}

O co tu naprawdę chodzi? Instrukcji if używamy do porównania dwóch wartości - i instrukcja ta jest podstawą przetwarzania w JavaScripcie, jest ona następnym krokiem po użyciu operatorów.

Tworzenie instrukcji warunkowych if w JavaScripcie

Instrukcji if w JavaScripcie używa się do sprawdzania warunku i uruchamiania jakiegoś kodu, kiedy warunek jest spełniony. Oto podstawowa postać instrukcji if:

if (warunek) {

kod

}

warunek jest sprawdzany i jeśli okaże się prawdziwy, wykonywany jest kod. Pamiętaj zawsze o ujęciu tego kodu w nawiasy klamrowe.

Teraz pojawia się pytanie, jak wyglądać mogą warunki. Tworzy się je używając jednego z operatorów porównania: == (równość), < (mniejszość), <= (mniejszość bądź równość), > (większość) oraz >= (większość bądź równość).

Oto przykład - tym razem sprawdzamy, czy nie ma mrozu:

<HTML>

<HEAD>

<TITLE>

Instrukcja if w JavaScripcie

</TITLE>

</HEAD>

<BODY>

var temperatura

temperatura = 15

if (temperatura > 0) {

document.writeln("Dzisiaj nie ma mrozu.")

}

</SCRIPT>

<H1>

Instrukcja if w JavaScripcie

</H1>

</CENTER>

</BODY>

</HTML>

Wynik działania tego kodu pokazano na rysunku 4.6.

Rysunek 4.6.

Użycie instrukcji if do sprawdzania temperatury

0x01 graphic

Oto kilka innych przykładów instrukcji if:

if (rok == 2001) {

document.writeln("Jest rok 2001.")

}

if (kolor == "czerwony") {

document.writeln("Zatrzymaj samochód.")

}

if (cena < 2000.00) {

document.writeln("Uważaj, cena jest podejrzanie niska.")

}

Oprócz operatorów porównania możesz też użyć operatorów logicznych koniunkcji (&&) i alternatywy (||) do łączenia warunków ze sobą - oto przykład użycia operatora &&:

if (temperatura < 25 && temperatura > 19) {

document.writeln("Pogoda jest wprost idealna.")

}

Żądamy, aby temperatura była niższa od 25 oraz wyższa od 19 stopni. Jeśli temperatura mieści się w podanym zakresie, wyświetlany jest pełen zadowolenia komunikat.

W poprzednim przykładzie aby cały warunek był prawdziwy, prawdziwe musiały być warunki składowe. Za pomocą operatora || można z kolei łączyć warunki w ten sposób, żeby wystarczyło spełnienie jednego warunku:

if (temperatura < 19 || temperatura > 25) {

document.writeln("Nie jest dobrze!")

}

W tym wypadku komunikat wyświetlany jest wtedy, gdy temperatura jest niższa niż 19 stopni lub wyższa niż 25 stopni.

Tworzenie instrukcji if...else

Ogólniejsza postać instrukcji if ma jeszcze frazę else, która także zawiera kod. Fraza else jest opcjonalna. Jeśli jej użyjesz, to zawarty w niej kod będzie uruchamiany wtedy, gdy nie zachodzi warunek instrukcji if. Ogólnie rzecz biorą instrukcja if...else wygląda tak:

if (warunek) {

kod wykonywany, kiedy warunek jest spełniony

}

else {

kod wykonywany, kiedy warunek nie jest spełniony

}

Poniżej pokazano kod będący rozwinięciem przykładu poprzedniego. Dodaliśmy tym razem frazę else, która jest uruchamiana, jeśli temperatura jest --> mniejsza bądź równa[Author:T] zeru.

<HTML>

<HEAD>

<TITLE>

Użycie frazy else w JavaScripcie

</TITLE>

</HEAD>

<BODY>

var temperatura

temperatura = -3

if (temperatura > 0) {

document.writeln("Dzisiaj nie ma mrozu.")

}

else {

document.writeln("Czas już spuścić wodę z basenu.")

}

</SCRIPT>

<H1>

Użycie frazy else w JavaScripcie

</H1>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 4.7.

Rysunek 4.7.

Użycie frazy else

0x01 graphic

Użycie instrukcji switch

Instrukcja switch dostępna w JavaScripcie jest następną instrukcją umożliwiającą warunkową realizację kodu. Używa się jej, kiedy istnieje wiele różnych przypadków, które trzeba kolejno sprawdzać i gdzie normalnie konieczne byłoby tworzenie całego ciągu zagnieżdżonych w sobie instrukcji if...else.

Oto jak opisywana instrukcja działa: wyrażenie testowe porównuje się z szeregiem kolejnych wartości. Jeśli któraś wartość da się dopasować do badanego wyrażenia, wykonywany jest kod z nią związany - póki nie pojawi się słowo kluczowe break. Instrukcja switch z grubsza wygląda następująco:

switch(wyrażenie){

case wartość1:

kod wykonywany, jeśli wyrażenie pasuje do wartości1

break;

case wartość2:

kod wykonywany, jeśli wyrażenie pasuje do wartości2

break;

case wartość3:

kod wykonywany, jeśli wyrażenie pasuje do wartości3

break;

...

default:

kod wykonywany, jeśli wyrażenie nie pasuje do żadnej

z podanych wyżej wartości

break;

}

Kolejno podaje się wszystkie uwzględniane wartości i zawsze wykonywany jest kod znajdujący się zaraz za frazą case z dopasowaną wartości, aż do słowa kluczowego break.

Na końcu znajduje się słowo kluczowe default - jest to jakby kolejna fraza case, tyle że jej kod jest wykonywany wtedy, kiedy nie uda się dopasować żadnej frazy case. Użycie frazy default jest opcjonalne.

Oto przykład użycia instrukcji switch - sprawdzamy, czego żąda użytkownik, jego żądanie zapisujemy w zmiennej userInput i potem wartość tej zmiennej sprawdzamy. W końcu wyświetlamy odpowiedni komunikat:

switch(userInput){

case "EDIT":

document.writeln("")

break;

case "HELP":

document.writeln("")

break;

case "QUIT":

document.writeln("")

break;

default:

document.writeln("")

break;

}

Tworzenie w JavaScripcie pętli for

Zastosowanie pętli pozwala wielokrotnie wykonać ten sam kod - a w tym komputery są najlepsze. Podstawowa postać pętli for wygląda następująco:

for (inicjalizacja; warunek; inkrementacja) {

kod

}

Działa to tak: w miejsce inicjalizacji wstawia się wyrażenie początkowe (często jest to po prostu inicjalizacja wartości zmiennej indeksu pętli na 0), warunek to wyrażenie, którego wartość jest sprawdzana po każdej iteracji pętli - jeśli warunek jest fałszywy, pętla się kończy (często jest to sprawdzenie, czy zmienna indeksu pętli nie przekroczyła wartości maksymalnej). Jeśli warunek jest prawdziwy, wykonywane jest wyrażenie inkrementacja (najczęściej jest to po prostu powiększenie zmiennej indeksu pętli) i wykonywana jest następna iteracja pętli.

Oto przykład, który powinien nieco wyjaśnić. Wykonujemy pętlę 10 razy, za każdym razem drukujemy wartość zmiennej jej indeksu. Początkowo zmiennej indeksPetli uzyskuje wartość 1, za każdym razem powiększamy ją (operatorem ++) i sprawdzamy, czy wartość tej zmiennej nie przekracza 10 - jeśli przekracza, kończymy wykonywanie pętli. Oto odpowiedni kod (używamy znacznika <BR> do wstawiania znaków nowego wiersza):

<HTML>

<HEAD>

<TITLE>

Użycie instrukcji for

</TITLE>

</HEAD>

<BODY>

for(var indeksPetli = 1; indeksPetli <= 10; indeksPetli++){

document.writeln("Indeks pętli ma wartość " +

indeksPetli + ".<BR>")

}

</SCRIPT>

<H1>

Użycie instrukcji for

</H1>

</CENTER>

</BODY>

</HTML>

Warto zwrócić na jeszcze jedną rzecz w powyższym przykładzie: w kodzie używamy zmiennej indeksPetli, więc trzeba ją zadeklarować. W JavaScripcie istnieje skrót pozwalający zadeklarować zmienną bezpośrednio w pętli for. Jest to często stosowana praktyka, dlatego ją tutaj zaprezentowano.

Kiedy otworzysz tę stronę w przeglądarce, zobaczysz komunikat wyświetlony przy wartości zmiennej pętli kolejno od 1 do 10 - rysunek 6.8.

Rysunek 4.8.

Użycie pętli for w JavaScripcie

0x01 graphic

Tworzenie w JavaScripcie pętli while

JavaScript oferuje także inne pętle, nie tylko for. W pętli typu while warunek jest sprawdzany przed każdym wykonaniem iteracji. Jeśli warunek jest prawdziwy, kod pętli zostanie wykonany. Pętla ta wygląda tak:

while (warunek){

kod

}

Oto jak poprzedni przykład z pętlą for należałoby zapisać w postaci pętli while:

<HTML>

<HEAD>

<TITLE>

Użycie instrukcji while

</TITLE>

</HEAD>

<BODY>

var indeksPetli = 0

while(indeksPetli < 10){

indeksPetli++

document.writeln("Indeks pętli ma wartość " +

indeksPetli + ".<BR>")

}

</SCRIPT>

<H1>

Użycie instrukcji while

</H1>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 6.9.

Rysunek 4.9.

Użycie pętli while w JavaScripcie

0x01 graphic

Tworzenie pętli do...while

Istnieje jeszcze jedna postać pętli while: pętla do...while. Taka pętla działa bardzo podobnie jak zwykła pętla while, tyle tylko że warunek pętli jest sprawdzany na koniec, już po wykonaniu kodu pętli, a nie na początku. Oto obowiązująca składnia opisywanej pętli:

do {

kod

}while (warunek)

Z punktu widzenia programisty istnieje jedna zasadnicza różnica między pętlami while i do...while: ta druga zawsze wykonuje się przynajmniej raz, nawet jeśli warunek pętli nie jest spełniony. Przyjrzyj się takiemu przykładowi:

var liczba = 25

do {

document.writeln("Odwrotnością liczby "

+ liczba + " jest "

+ 1/liczba + ".<BR>")

--liczba

} while (liczba > 0)

Wyświetlone zostaną odwrotności liczb naturalnych od 25 do 1. Jeśli jednak zmienna liczba początkowo otrzyma wartość 0, to pojawi się problem, gdyż wystąpi dzielenie przez zero, 1/0:

var liczba = 0

do {

document.writeln("Odwrotnością liczby "

+ liczba + " jest "

+ 1/liczba + ".<BR>")

--liczba

} while (liczba > 0)

Lepszym pomysłem byłoby tu użycie pętli while, w której wartość zmiennej liczba zwracamy najpierw i dopiero wtedy, jeśli wartość ta nie jest zerem, liczymy odwrotność:

var liczba = 25

while (liczba > 0 {

document.writeln("Odwrotnością liczby "

+ liczba + " jest "

+ 1/liczba + ".<BR>")

--liczba

}

Obie postacie pętli while mają swoje zastosowania - po prostu każda z nich jest przydatna w innych sytuacjach.

Tworzenie w JavaScripcie funkcji

Funkcja to jeden z najważniejszych elementów programowania w JavaScripcie. W funkcji można zamknąć logiczny fragment kodu i później go wywoływać (uruchamiać).

Do tworzenia funkcji używa się instrukcji function o następującej składni:

function nazwafunkcji([parametr1 [, parametr2 [, ...parametrN]]])

{

kod

}

Przekazujemy funkcji wartości parametr1, parametr2 i tak dalej. Funkcja może też jakąś wartość zwrócić - służy do tego instrukcja return.

Oto przykład: tworzymy funkcję getTime, która zwrócić ma bieżącą godzinę. Zwróć uwagę na to, że mimo braku parametrów i tak używamy pustych nawiasów. Nawiasy te są obowiązkowe; jeśli przekazujemy jakieś wartości, między te nawiasy wstawiamy je. Funkcja getTime nie przewiduje przekazywania żadnych wartości, więc nawiasy są puste:

function getTime()

{

var teraz = new Date

var wynik = teraz.getHours() + ":"

+ teraz.getMinutes()

return(wynik)

}

Użyliśmy klasy Date, stworzyliśmy nowy obiekt tej klasy nazywając go teraz. Następnie za pomocą jego metod getHours i getMinutes pobraliśmy bieżący czas.

Zresztą tak naprawdę metody to właśnie funkcje wbudowane w obiekty. Jeśli będziesz tworzyć w JavaScripcie własne klasy i obiekty, tworzone przez Ciebie funkcje dołączane do klas będą to metody.

W poniższym przykładzie wstawiamy bieżący czas do zmiennej wynik , której wartość funkcja ma zwrócić za pomocą instrukcji return. Kiedy funkcję już utworzymy, możemy ją używać w kodzie dowolnie wiele razy. Pamiętaj, że funkcja nie jest uruchamiana automatycznie po załadowaniu strony, ale dopiero wtedy, gdy zostanie wywołana:

<HTML>

<HEAD>

<TITLE>

Użycie funkcji w JavaScripcie

</TITLE>

</HEAD>

<BODY>

document.writeln("Teraz jest godzina " + getTime() + ".")

function getTime()

{

var teraz = new Date

var wynik = teraz.getHours() + ":"

+ teraz.getMinutes()

return(wynik)

}

</SCRIPT>

<H1>

Użycie funkcji w JavaScripcie

</H1>

</CENTER>

</BODY>

</HTML>

Wynik działania tego kodu w Internet Explorerze pokazano na rysunku 4.10. Jak widać, wszystko działa zgodnie z oczekiwaniami - kiedy ładowany jest dokument, uruchamiana jest metoda document.writeln, która z kolei wywołuje funkcję getTime(). Funkcja ta zwraca bieżący czas w postaci tekstu, który to tekst wklejamy w dłuższy napis wyświetlany na ekranie.

Rysunek 4.10.

Funkcje w JavaScripcie

0x01 graphic

Zobaczyłeś już funkcję zwracającą wartości, teraz warto byłoby poznać sposób przekazywania wartości do funkcji.

Przekazywanie funkcji parametrów

Wartości przekazywane do funkcji to parametry (zwane też argumentami). Kiedy przekazujesz funkcji wartości jako parametry, stają się one dostępne dla kodu funkcji jako zmienne o odpowiednich nazwach. Z kolei podczas tworzenia samej funkcji wskazujesz listę parametrów funkcji, czyli mówisz, jakie parametry trzeba tej funkcji przekazać.

Oto stosowny przykład: utworzymy funkcję dodawacz, która będzie pobierała dwie wartości i zwracała ich sumę. Zaczniemy od zapisania szkieletu naszej funkcji:

function dodawacz()

{

}

Tym razem będziemy naszej funkcji przekazywać parametry, więc zestawimy je w postaci listy parametrów znajdującej się w nawiasach za nazwą funkcji, każdemu z nich nadamy nazwę. Tym razem argumenty będą dwa: wartosc1 i wartosc2:

function dodawacz(wartosc1, wartosc2)

{

}

Pamiętaj, że w JavaScripcie domyślnie do funkcji nie są przekazywane same parametry, ale ich kopie - jest to przekazywanie parametrów przez wartość.

Teraz można z przekazanymi parametrami robić wszystko, co tylko trzeba. Chodzi nam o dodanie dwóch liczb i zwrócenie wyniku, zatem wystarczy parametry dodać w samej instrukcji return:

function dodawacz(wartosc1, wartosc2)

{

return(wartosc1 + wartosc2)

}

Aby teraz tej funkcji użyć, wystarczy przekazać jej w nawiasach parametry - dodamy do siebie 47 i 99:

<HTML>

<HEAD>

<TITLE>

Przekazywanie funkcji parametrów w JavaScripcie

</TITLE>

</HEAD>

<BODY>

document.writeln("47 + 99 = " + dodawacz(47, 99))

function dodawacz(wartosc1, wartosc2)

{

return(wartosc1 + wartosc2)

}

</SCRIPT>

<H1>

Przekazywanie funkcji parametrów w JavaScripcie

</H1>

</CENTER>

</BODY>

</HTML>

I to już wszystko: przekazaliśmy funkcji dodawacz dwa parametry, a wyniki możesz obserwować na rysunku 4.11. Jak widać, wszystko działa tak jak powinno (być może zorientowałeś się też, że choć wartość zwracana przez naszą funkcję to liczba, to JavaScript jest dostatecznie domyślny, aby przed pokazaniem tej wartości na ekranie zamienić ją na tekst).

Rysunek 4.11.

Przekazywanie funkcjom parametrów

0x01 graphic

Użycie funkcji o zmiennej liczbie parametrów

Funkcję można wywołać podając mniej parametrów niż ich podano na liście parametrów formalnych (czyli niż ich podano po prostu w definicji funkcji). Nie jest to problemem tak długo, jak długo nie będziesz próbował odwoływać się do nazwy parametru, którego wartości nie podano. Można też podać więcej parametrów niż podano ich na liście, wtedy te dodatkowe parametry dostępne będą w tablicy arguments (o tablicach więcej powiemy dalej). Jeśli na przykład wywołamy z dodatkowymi parametrami naszą funkcję dodawacz, to te parametry będą dostępne jako dodawacz.arguments[0], dodawacz.arguments[1] i tak dalej.

Tworzenie w JavaScripcie obiektów

Jak już wiesz, JavaScript posiada wiele wbudowanych obiektów gotowych do użycia, na przykład document, location, navigator czy history. JavaScript zawiera też wiele wbudowanych klas, w tym klasy Date do obsługi daty i czasu, Math zawierająca wiele wbudowanych metod takich jak min i max. Klas wbudowanych (a także klas tworzonych przez użytkownika) można użyć tworząc obiekty za pomocą operatora new.

O klasie możesz myśleć jako o typie obiektu, gdyż operator new tworzy obiekt właśnie na podstawie jakiejś klasy. Obiekty mogą mieć wbudowane metody i właściwości - i większość ma. W następnym rozdziale będziemy używać operatora new do tworzenia obiektów, które umożliwią nam obsługę dokumentów XML. Zresztą operatora new używaliśmy już w jednym z wcześniejszych przykładów:

<HTML>

<HEAD>

<TITLE>

Użycie funkcji w JavaScripcie

</TITLE>

</HEAD>

<BODY>

document.writeln("Teraz jest godzina " + getTime() + ".")

function getTime()

{

var teraz = new Date

var wynik = teraz.getHours() + ":"

+ teraz.getMinutes()

return(wynik)

}

</SCRIPT>

<H1>

Użycie funkcji w JavaScripcie

</H1>

</CENTER>

</BODY>

</HTML>

Operator new używa konstruktora klasy Date - specjalnej metody, która tworzy i zwraca obiekt. W tym wypadku nie przekazaliśmy temu konstruktorowi żadnych parametrów, zatem utworzony obiekt zwróci datę bieżącą. Można jednak konstruktorowi klasy Date przekazać datę, a zwrócony obiekt klasy Date będzie takiej właśnie dacie odpowiadał. Mogłoby to wyglądać tak:

var potem = new Date("10/15/2001")

Skąd wiadomo, jakie wartości należy przekazywać konstruktorom poszczególnych klas? Cóż, zajrzeć musisz do dokumentacji JavaScriptu - tam znajdziesz wyszczególnienie, jakie klasy wymagają jakich parametrów i w jakiej kolejności.

Jedną z najważniejszych klas wbudowanych w JavaScript jest klasa String, której używa się do obsługi łańcuchów tekstowych. Aby lepiej zorientować się, jak działają klasy, obiekty i konstruktory, przyjrzymy się teraz tej właśnie klasie.

Użycie obiektów String w JavaScripcie

Teksty w JavaScripcie obsługiwane są przez klasę String. Klasa ta umożliwia tworzenie obiektów zawierających napisy, daje też mnóstwo metod do operowania na tych napisach. Oto metody tej klasy:

anchor	replace
big	search
blink	slice
bold	small
charAt	split
charCodeAt	strike
concat	sub
fixed	substr
fontcolor	substring
fontsize	sup
indexOf	toLowerCase
italics	toSource
lastIndexOf	toUpperCase
link	toString
match	valueOf

W języku JScript metody klasy String są niemalże takie same, brak tylko toSource, a dodatkowo jest fromCharCode --> .[Author:T]

Oto przykład użycia klasy String. Tworzymy obiekt tej klasy, następnie stosując metodę italics wyświetlamy go kursywą, a korzystając z właściwości length określamy długość:

<HTML>

<HEAD>

<TITLE>

Użycie klasy String

</TITLE>

</HEAD>

<BODY>

var napis1 = new String("JavaScript i XML to dobre połączenie")

document.writeln("Napis " + napis1.italics() + " ma " +

napis1.length + " znaków.")

</SCRIPT>

<H1>

Użycie klasy String

</H1>

</CENTER>

</BODY>

</HTML>

Tym razem konstruktorowi klasy String przekazaliśmy napis JavaScript i XML to dobre połączenie. Konstruktor utworzył nowy obiekt tej klasy zawierający podany tekst i go zwrócił. Teraz można użyć metody italics tego obiektu, aby wyświetlić nasz napis kursywą, można też użyć właściwości length, aby sprawdzić, jaką długość ma ten napis. Wyniki pokazano na rysunku 6.12.

Rysunek 4.12.

Użycie klasy String w Internet Explorerze

0x01 graphic

Klasa String ma jeszcze jedną ważną cechę: JavaScript traktuje ją szczególnie, a przejawia się to w tym, że można tworzyć jej obiekty bez operatora new. Obiekt klasy String można zadeklarować jak zwykłą zmienną (bez operatora i bez wspominania czegokolwiek o klasie String), a już sam JavaScript do klasy tej odwoła się niejawnie:

<HTML>

<HEAD>

<TITLE>

Użycie klasy String

</TITLE>

</HEAD>

<BODY>

var napis1 = "JavaScript i XML to dobre połączenie"

document.writeln("Napis " + napis1.italics() + " ma " +

napis1.length + " znaków.")

</SCRIPT>

<H1>

Użycie klasy String

</H1>

</CENTER>

</BODY>

</HTML>

Użycie klasy Array do tworzenia tablic

Tablice to obiekty programistyczne pozwalające przechowywać zestaw danych, do których można odwoływać się przez indeks. Tablice są doskonałym narzędziem programistycznym, gdyż za pomocą indeksów można odwoływać się do poszczególnych wartości, dzięki czemu łatwo jest wartości te przetwarzać w pętli.

Do tworzenia tablic w JavaScripcie używa się klasy Array. Oto lista metod tej klasy w JavaScripcie:

concat	splice
join	sort
pop	toSource
push	toString
reverse	unshift
shift	valueOf
slice

W języku JScript dostępne są następujące metody:

concat	sort
join	toString
reverse	valueOf
slice

Teraz warto przyjrzeć się konkretnemu przykładowi. Utworzymy tablicę zawierającą wyniki egzaminu studentów. Do wyliczenia średniej będziemy potrzebowali pętli for.

Zaczniemy od utworzenia nowej tablicy wyniki, która będzie zawierała wyniki poszczególnych studentów oraz zmiennej sumaBiezaca, która będzie zawierała sumę wszystkich wyników:

var wyniki = new Array()

var sumaBiezaca = 0

Do wyniku pierwszego studenta odwołujemy się pisząc wyniki[0], do drugiego wyniki[1] i tak dalej. Poszczególne wartości przypiszemy komórkom tablicy, by można było je też przekazać konstruktorowi klasy Array:

var wyniki = new Array()

var sumaBiezaca = 0

wyniki[0] = 43

wyniki[1] = 87

wyniki[2] = 92

wyniki[3] = 70

wyniki[4] = 55

wyniki[5] = 61

Teraz wszystkie wyniki możemy dodać w pętli for:

var wyniki = new Array()

var sumaBiezaca = 0

wyniki[0] = 43

wyniki[1] = 87

wyniki[2] = 92

wyniki[3] = 70

wyniki[4] = 55

wyniki[5] = 61

for(var indeksPetli=0; indeksPetli < wyniki.length; indeksPetli++){

sumaBiezaca += wyniki[indeksPetli]

}

Teraz pozostało już tylko podzielić sumę wyników przez liczbę elementów tablicy, a tę ostatnią można uzyskać z właściwości length tablicy:

var wyniki = new Array()

var sumaBiezaca = 0

wyniki[0] = 43

wyniki[1] = 87

wyniki[2] = 92

wyniki[3] = 70

wyniki[4] = 55

wyniki[5] = 61

for(var indeksPetli=0; indeksPetli < wyniki.length; indeksPetli++){

sumaBiezaca += wyniki[indeksPetli]

}

document.write("Średnia wyników studentów to " +

sumaBiezaca / wyniki.length)

Oto ostateczna postać kodu wpisanego w stronę HTML:

<HTML>

<HEAD>

<TITLE>

Tablice w JavaScripcie

</TITLE>

</HEAD>

<BODY>

var wyniki = new Array()

var sumaBiezaca = 0

wyniki[0] = 43

wyniki[1] = 87

wyniki[2] = 92

wyniki[3] = 70

wyniki[4] = 55

wyniki[5] = 61

for(var indeksPetli=0; indeksPetli < wyniki.length; indeksPetli++){

sumaBiezaca += wyniki[indeksPetli]

}

document.write("Średnia wyników studentów to " +

sumaBiezaca / wyniki.length)

</SCRIPT>

<H1>

Tablice w JavaScripcie

</H1>

</CENTER>

</BODY>

</HTML>

Wyniki pokazano na rysunku 6.13 - średnia wynosi 68 punktów.

Rysunek 4.13.

Użycie tablic w języku JavaScript

0x01 graphic

Wykorzystanie zdarzeń

Ważną cechą JavaScriptu jest możliwość interakcji z użytkownikiem realizowana za pośrednictwem zdarzeń. Jak już wcześniej wspomniano, kiedy użytkownik coś robi, na przykład klika przycisk, przesuwa wskaźnik myszki czy wciska klawisze, zachodzą zdarzenia. W następnym rozdziale zajmiemy się obsługą nie tylko zwykłych zdarzeń, ale też obsługą zdarzeń, które mogą wystąpić podczas ładowania i parsowania dokumentu XML.

Zdarzenia obsługiwane są różnie w różnych znacznikach i różnych przeglądarkach, natomiast do wiązania zdarzeń z kodem - na przykład kodem JavaScriptu - używa się specjalnych atrybutów obsługi znaczników. Kiedy na przykład użytkownik wciśnie przycisk myszki na stronie, uruchamiany jest kod wskazany w atrybucie onMouseDown znacznika <BODY>. W tablicy 6.1 wcześniej w tym rozdziale zestawiono najpopularniejsze zdarzenia obsługiwane w JavaScripcie.

Pełną listę zdarzeń obsługiwanych w poszczególnych znacznikach HTML dla Internet Explorera zestawiono w tabeli 4.3, a dla Netscape Navigatora - w tabeli 4.4.

--> Tabela 4.3.[Author:T]
Zdarzenia obsługiwane w Internet Explorerze

Element	Atrybuty zdarzeń
A	onbeforecopy, onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart
BODY	onafterprint, onbeforecut, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onbeforeprint, onbeforeunload, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop
BUTTON	onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart
DIV	onbeforecopy, onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlayoutcomplete, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onscroll, onselectstart
FORM	onbeforecopy, onbeforecut, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onreset, onresize, onresizeend, onresizestart, onselectstart, onsubmit
FRAME	onbeforefocusenter, onbeforefocusleave, onblur, oncontrolselect, onfocus, onfocusenter, onfocusleave, onresize, onresizeend, onresizestart
IFRAME	onbeforefocusenter, onbeforefocusleave, onblur, oncontrolselect, onfocus, onfocusenter, onfocusleave, onresizeend, onresizestart
IMG	onabort, onbeforecopy, onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onload, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart
INPUT (przycisk)	onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresizeend, onresizestart, onselectstart
INPUT (pole opcji)	onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresizeend, onresizestart, onselectstart
INPUT (przycisk radio)	onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresizeend, onresizestart, onselectstart
INPUT (przycisk SUBMIT)	onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresizeend, onresizestart, onselectstart
INPUT (pole tekstowe)	onafterupdate, onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onbeforeupdate, onblur, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerrorupdate, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresizeend, onresizestart, onselectstart
LI	onbeforecopy, onbeforecut, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlayoutcomplete, onlosecapture, onmousedown, onmouseenter, --> object, [Author:T] onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart
MARQUEE	onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onbounce, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfinish, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onscroll, onselectstart, onselect
OBJECT	onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onblur, oncellchange, onclick, oncontrolselect, ondataavailable, ondatasetchanged, ondatasetcomplete, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlayoutcomplete, onlosecapture, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onrowenter, onrowexit, onrowsdelete, onrowsinserted, onscroll, onselectstart
P	onbeforecopy, onbeforecut, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart --> , ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlayoutcomplete, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onscroll, onselectstart[Author:T]
PRE	onbeforecopy, onbeforecut, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart
SELECT	onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onchange, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondragenter, ondragleave, ondragover, ondrop, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart
SPAN	onbeforecopy, onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout --> , onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onscroll, onselectstart[Author:T]
TABLE	onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onscroll, onselectstart
TD	onbeforecopy, onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresizeend, onresizestart, onselectstart
TEXTAREA	onafterupdate, onbeforecopy, onbeforecut, onbeforeeditfocus, onbeforefocusenter, onbeforefocusleave, onbeforepaste, onblur, onchange, onclick, oncontextmenu, oncontrolselect, oncut, ondblclick, ondrag, --> operation,[Author:T] ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerrorupdate, onfilterchange, onfocus, onfocusenter, onfocusleave, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onscroll, onselect, onselectstart

Tabela 4.4.
Zdarzenia obsługiwane w Netscape Navigatorze

Element	Atrybuty zdarzeń
A	onclick, onmouseout, onmouseover
BODY	onload, onunload, onblur, onfocus
DIV	(brak)
EMBED	(brak)
FORM	onreset, onsubmit
FRAME	(brak)
ILAYER	(brak)
IMG	onabort, onerror, onload
INPUT (przycisk)	onclick
INPUT (pole opcji)	onclick
INPUT (przyciski radio)	onclick
INPUT (przycisk SUBMIT)	onclick
INPUT (pole tekstowe)	onblur, onchange, onfocus, onselect
LAYER	onmouseover, onmouseout, onfocus, onblur, onload
LI	(brak)
OBJECT	(brak)
P	(brak)
PRE	(brak)
SELECT	onblur, onchange, onclick, onfocus
SPAN	(brak)
TABLE	(brak)
TD	(brak)
TEXTAREA	onblur, onchange, onfocus, onselect

Teraz możemy zacząć opisywane techniki wykorzystywać. Użyjemy zdarzeń dwóch kontrolek HTML: przycisków i pól tekstowych. Kiedy użytkownik kliknie przycisk, JavaScript wyświetli w polu tekstowym komunikat „Zapraszamy do testowania obsługi zdarzeń.”

Zarówno przycisk, jak i pole tekstowe tworzy się za pomocą znacznika <INPUT>, przy czym dla pola tekstowego ustawia się atrybut TYPE na text, w przypadku przycisku na button. Atrybut VALUE pozwala określić napis pojawiający się na przycisku, atrybut LENGTH umożliwia określenie długości pola tekstowego w znakach, nazwę elementów określa się w atrybutach NAME. Nadanie nazw kontrolkom umożliwia późniejsze odwoływanie się do nich w kodzie.

Aby móc kontrolek użyć, trzeba je umieścić w formularzu HTML, czyli między znacznikami <FORM> a </FORM> (sam formularz jest konstrukcją logiczną i na stronie się nie pokazuje; kiedy klikniesz przycisk SUBMIT - o ile taki istnieje - dane z całego formularza są wysyłane na serwer sieciowy. Zaczynamy zatem od zdefiniowania dokumentu HTML z formularzem i kontrolkami:

<HTML>

<HEAD>

<TITLE>

Obsługa zdarzeń w JavaScripcie

</TITLE>

</HEAD>

<BODY>

<H1>

Osługa zdarzeń w JavaScripcie

</H1>

<BR>

<H2>

Kliknij przycisk!

</H2>

<BR>

<BR>

</FORM>

</CENTER>

</BODY>

</HTML>

Następnym krokiem jest połączenie przycisku z kodem JavaScript uruchamianym przy kliknięciu tego przycisku, aby wywoływana była wtedy funkcja pokazKomunikat. Funkcja ta będzie wyświetlała w polu tekstowym nasz komunikat. W celu powiązania wywołania funkcji z kliknięciem przycisku ustawia się atrybut onclick przycisku na pokazKomunikat():

<HTML>

<HEAD>

<TITLE>

Obsługa zdarzeń w JavaScripcie

</TITLE>

</HEAD>

<BODY>

<H1>

Osługa zdarzeń w JavaScripcie

</H1>

<BR>

<H2>

Kliknij przycisk!

</H2>

<BR>

<BR>

<INPUT TYPE="button" VALUE="Kliknij tutaj"

onClick="pokazKomunikat()">

</FORM>

</CENTER>

</BODY>

</HTML>

Pozostało nam jeszcze tylko stworzyć funkcję pokazKomunikat, która wyświetli nasz komunikat. Jak się do pola tekstowego „dobrać”? Z punktu widzenia strony można kontrolki traktować jako podobiekty obiektu document; nasze pole nazwaliśmy Text (NAME="Text") i należy ono do formularza form1. Wobec tego do pola tekstowego możesz odwoływać się stosując zapis document.form1.Text. Wartość tego pola jest we właściwości value, więc pełne wywołanie przybierze postać document.form1.Text.value:

<HTML>

<HEAD>

<TITLE>

Obsługa zdarzeń w JavaScripcie

</TITLE>

</HEAD>

<BODY>

function pokazKomunikat(e)

{

document.form1.Text.value = "Zapraszamy do testowania obsługi zdarzeń."

}

</SCRIPT>

<H1>

Osługa zdarzeń w JavaScripcie

</H1>

<BR>

<H2>

Kliknij przycisk!

</H2>

<BR>

<BR>

<INPUT TYPE="button" VALUE="Kliknij tutaj"

onClick="pokazKomunikat()">

</FORM>

</CENTER>

</BODY>

</HTML>

I to już wszystko - kiedy użytkownik kliknie przycisk, w polu tekstowym pojawi się komunikat, co pokazano na rysunku 4.14.

Rysunek 4.14.

Użycie przycisku i pola tekstowego w Internet Explorerze

0x01 graphic

Pobieranie informacji o zdarzeniu

Być może zauważyłeś, że funkcję naszą zadeklarowaliśmy jako pokazKomunikat(e). Po co zasugerowaliśmy, że funkcji tej będzie przekazywany jakiś argument? Odpowiedź brzmi: bo w przeglądarce Netscape taki argument jest przekazywany. Argument ten jest obiektem klasy event, pozwala on uzyskać informacje o zdarzeniu (na przykład gdzie kliknięto myszką). Właściwości obiektu event dostępne w przeglądarce Netscape zestawiono w tabeli 4.5.

Tabela 4.5.
Właściwości obiektu event w przeglądarce Netscape Navigator

Właściwość	Opis
data	Tablica napisów zawierających adresy URL upuszczanych obiektów (metoda „przeciągnij-i-upuść”) używana ze zdarzeniem dragdrop.
height	Wysokość związana ze zdarzeniem.
layerX	Poziome położenie kursora podawane w pikselach względem warstwy, której wydarzenie dotyczy.
layerY	Pionowe położenie kursora podawane w pikselach względem warstwy, której wydarzenie dotyczy.
modifiers	Przyciski modyfikujące związane ze zdarzeniem myszki lub klawiatury. Dopuszczalne wartości to ALT_MASK, CONTROL_MASK, SHIFT_MASK i META_MASK.
pageX	Poziome położenie kursora na stronie podawane w pikselach.
pageY	Pionowe położenie kursora na stronie podawane w pikselach.
screenX	Poziome położenie kursora na ekranie podawane w pikselach.
screenY	Pionowe położenie kursora na ekranie podawane w pikselach.
type	Rodzaj zdarzenia.
which	Wciśnięty przycisk myszy lub wartość ASCII wciśniętego klawisza.
width	Szerokość związana ze zdarzeniem.

W Internet Explorerze wygląda to inaczej. Funkcja obsługi zdarzenia nie otrzymuje zdarzenia w postaci parametru (JavaScript jest dość elastyczny, aby zapisać funkcję tak, jakby obie przeglądarki taki argument przekazywały), ale obiekt event dostępny jest jako podobiekt obiektu window, czyli window.event. Obiekt ten jest dostępny globalnie i nie trzeba go żadnej funkcji przekazywać. Właściwości obiektu window.event dostępne w Internet Explorerze zestawiono w tabeli 4.6.

Tabela 4.6.
Właściwości obiektu window.event w przeglądarce Internet Explorer

Właściwość	Zdarzenie
altKey	Ma wartość true, jeśli wciśnięto klawisz Alt.
altLeft	Ma wartość true, jeśli wciśnięto lewy klawisz Alt.
button	Jeśli wciśnięto przycisk myszy, wskazuje, który.
cancelBubble	Wskazuje, czy zdarzenie powinno zostać przesłane wyżej w hierarchii zdarzeń.
clientX	Zawiera współrzędną x względem obszaru klienta.
clientY	Zawiera współrzędną y względem obszaru klienta.
ctrlKey	Ma wartość true, jeśli wciśnięto klawisz Ctrl.
ctrlLeft	Ma wartość true, jeśli wciśnięto lewy klawisz Ctrl.
fromElement	Wskazuje przesuwany element.
keyCode	Kod wciśniętego klawisza.
offsetX	Położenie względem obiektu rodzica w kierunku x.
offsetY	Położenie względem obiektu rodzica w kierunku y.
reason	Informacje o przekazie danych.
returnValue	Wartość zwrócona przez zdarzenie.
screenX	Współrzędna x względem ekranu.
screenY	Współrzędna y względem ekranu.
shiftKey	Ma wartość true, jeśli wciśnięto klawisz Shift.
shiftLeft	Ma wartość true, jeśli wciśnięto lewy klawisz Shift.
srcElement	Element, który spowodował wystąpienie zdarzenia.
srcFilter	--> Zdarzenie filtra, jeśli wystąpiło zdarzenie filterChange.[Author:T]
toElement	Element, do którego występuje przeniesienie; odpowiednik właściwości fromElement.
type	Typ zdarzenia jako napis.
x	Położenie x w kontekście zdarzenia.
y	Położenie y w kontekście zdarzenia.

W ostatniej części tego rozdziału pokażemy wykorzystanie informacji z tabel 4.5 i 4.6.

Obsługa zdarzeń związanych z myszką

Rozdział ten zakończymy większym przykładem użycia myszki. Przykład ten będzie działał zarówno w Internet Explorerze, jak i Netscape Navigatorze. Do określenia typu stosowanej przeglądarki użyjemy właściwości appName obiektu navigator; dopuszczalne wartości to Microsoft Internet Explorer lub Netscape. Użyjemy następujących zdarzeń:

onMouseDown - zachodzi, kiedy na stronie wciśnięty zostanie przycisk myszy.
onMouseUp - zachodzi, kiedy na stronie zostanie zwolniony przycisk myszy.

Kiedy w obrębie strony wciskasz lub zwalniasz klawisz myszki, zwracane jest położenie wskaźnika myszki. Do określenia tego położenia używamy właściwości window.event.x i window.event.y w Internet Explorerze oraz e.pageX i e.pageY w Netscape Navigatorze (e to obiekt klasy event przekazywany procedurze obsługi zdarzenia).

Jeszcze o jednej rzeczy trzeba wspomnieć: w Internet Explorerze zdarzenia mouseDown i mouseUp łączy się z kodem w znaczniku <BODY>:

Jednak w Netscape Navigatorze znacznik <BODY> nie obsługuje atrybutów związanych ze zdarzeniami onMouseDown ani onMouseUp, więc połączenia zdarzeń z kodem dokonuje się w elemencie <SCRIPT>:

document.onMouseDown = mouseDownHandler

document.onMouseUp = mouseUpHandler

Oto kompletny kod przykładu:

<HTML>

<HEAD>

<TITLE>

JavaScript i myszka

</TITLE>

document.onMouseDown = mouseDownHandler

document.onMouseUp = mouseUpHandler

function mouseDownHandler(e)

{

if (navigator.appName == "Microsoft Internet Explorer") {

document.form1.Text.value = "Przycisk myszki wciśnięty " +

"na pozycji " + window.event.x + ", " + window.event.y

}

if (navigator.appName == "Netscape") {

document.form1.Text.value = "Przycisk myszki wciśnięty " +

"na pozycji " + e.pageX + ", " + e.pageY

}

function mouseUpHandler(e)

{

if (navigator.appName == "Microsoft Internet Explorer") {

document.form1.Text.value = "Przycisk myszki zwolniono " +

"na pozycji " + window.event.x + ", " + window.event.y

}

if (navigator.appName == "Netscape") {

document.form1.Text.value = "Przycisk myszki zwolniono " +

"na pozycji " + e.pageX + ", " + e.pageY

}

</SCRIPT>

</HEAD>

<BODY onMouseDown="mouseDownHandler()"

onMouseUp="mouseUpHandler()">

<H1>

JavaScript i myszka

</H1>

<BR>

Kliknij przycisk myszki

<BR>

</FORM>

</CENTER>

</BODY>

</HTML>

Działanie przykładu pokazano na rysunku 4.15. Jeśli klawisz myszki wciśniesz lub zwolnisz, JavaScript pokaże, co się stało i gdzie.

Rysunek 4.15.

Obsługa myszki w JavaScripcie

0x01 graphic

W ten sposób mamy już za sobą skrócony kurs JavaScriptu i możemy zacząć z tego języka praktycznie korzystać. Użycie języka skryptowego, jak właśnie JavaScript, umożliwia obsługę dokumentów XML bezpośrednio w przeglądarce, czym się teraz zajmiemy.

W przeglądarce NN 6.0 działa poprawnie (przyp. tłum.)

Jest tu pewna pułapka (tak samo jak w języku C): wykonywany jest kod aż do słowa break lub do końca całej instrukcji, jeśli zatem pominiesz słowa break, to jeśli uda się dopasować wartość1, wykonany zostanie kod wartości1, potem kod wartości2 i tak dalej - z kodem frazy default włącznie. Jeśli uda się dopasować wartość2, wykonany zostanie kod wartości2, wartości3 i wszystkich następnych - aż do końca instrukcji switch lub do pierwszego wystąpienia break. Taka składnia jest jednak czasami bardzo wygodna. (przyp. tłum.)

38 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

Rozdział 1 ♦ Pierwsze kroki (Nagłówek strony)

38 C:\Moje dokumenty\Wojtek Romowicz\Książki\XML Vademecum profesjonalisty\r04-01.doc

C:\Moje dokumenty\Wojtek Romowicz\Książki\XML Vademecum profesjonalisty\r04-01.doc 1