JavaScript [PDF]

Zitiervorschau

---

Arman Danesh

:

program

w JavaScripcie

Etykieta SCRIPT może posiadać dwa opcjonalne parametry, decydujące o tym, w jaki sposób skrypt dołączany jest do pliku HTML. Parametry te opisane zostały w tabeli 2.1.

Tabela 2.1. Parametry etykiety

SCRI PT

Parametry

Opis

SRC

URL pliku zawierającego kod źródłowy skryptu. Plik ten powinien posiadać rozszerzenie . j s. Więcej informacji na temat etykiety SCRI PT znajdziesz na stronie firmy Netscape.

LANGUAGE

Określa język w jakim stworzony został skrypt. W aktualnej wersji Netscape Navigatora parametr ten może przyjąć jedynie dwie wartości: JavaScript oraz LiveScript. Parametr LiveScript dostępny jest w celu zapewnienia kompatybilności z wcześniejszymi skryptami, tworzonymi w czasie gdy język posiadał jeszcze swą pierwotną nazwę - LiveScirpt. W swoich skryptach powinieneś przypisywać temu parametrowi wartość JavaScript.

Użycie etykiety SCRI PT oraz jej parametrów pozwala na dołączanie skryptów do stron WWW na dwa sposoby. W Netscape Navigatorze programiści mają de facto tylko jedną możliwość: muszą oni urnieszczać skrypty bezpośrednio w plikach HTML.

Twój pierwszy skrypt

47

Choć Navigator pozwala na użycie parametru LANGUAGE="Li veScript" celem zapewnienia kompatybilności z poprzednią wersją języka, to jednak w kolejnej wersji przeglądarki możliwości tej już nie będzie. Dlatego też najlepiej jest używać parametru LANGUAGE="JavaScript". Parametr LANGUAGE="Li veScript" nie jest dostępny w programie Microsoft Internet Explorer 3.0

Umieszczanie skryptów JavaScriptu w plikach HTML Poniżej przedstawiłem pierwszy skryptów w plikach HTML:

naj prostszy sposób umieszczania kodu źródłowego

Ukrywanie skryptów przed innymi przeglądarkami Oczywiście, użycie etykiety

FROM OTHER BORWSERS -->

Przedstawione wyżej komentarze «! --HIDE FROM OTHER BROWSERS oraz I I STOP HIDING FROM OTHER BROWSERS--» zapewnią, że przeglądarki, które nie są w stanie obsługiwać JavaScriptów, zignorują cały kod skryptu i nie wyświetlą go. Stanie się tak dlatego, gdyż wszystko co znajduje się pomiędzy powinno być przez standardową przeglądarkę WWW zignorowane. Oczywiście, jeśli użytkownik wyświetli kod źródłowy dokumentu, będzie mógł także zobaczyć kod skryptu.

Problemy z używaniem etykiety SCRIPT Przedstawiona powyżej technika łączenia etykiety SCRIPT z komentarzami nie jest pozbawiona wad. W chwili pisania niniejszej książki etykieta SCRIPT nie została jeszcze zaakceptowana w standardzie HTML 2.0, a standard HTML 3.0 nie jest jeszcze dokończony. Z tego powodu rywalizujący ze sobą twórcy przeglądarek, mogą używać tej etykiety do innych celów.

48

JavaScript Podobny problem przydarzył się wcześniej; dotyczył on ramek, wprowadzonych w Netscape Navigatorze 2.0 - Netscape użył do tworzenia ramek etykiety FRAME, która w programie Web Browser firmy IBM, używana była do zupełnie innych celów. Kolejną niedogodnością jest to, iż przy zastosowaniu komentarzy, użytkownicy dysponujący przeglądarkami nie obsługującymi etykiety SCRI PT, nie będą świadomi istnienia skryptów. Problem ten da się jednak rozwiązać w sposób przedstawiony poniżej:

FROM OTHER

BROWSERS

-->

W odróżnieniu od standardu HTML, w którym komentarze tworzone są przy pomocy kombinacji znaków: , w JavaScripcie komentarze rozpoczyna się od podwójnego znaku ukośnika (1/). Komentarz rozpocząć można w dowolnym miejscu linii, a rozciąga się on aż do jej końca. Jeśli komentarz JavaScriptu nie zostanie umieszczony wewnątrz komentarza HTML, to zostanie on wyświetlony przez przeglądarki nie obsługujące JavaScriptu. W dalszej części tego rozdziału dowiesz się jak w JavaScripcie tworzyć komentarze obejmujące większą ilość linii. W programie Navigator 3.0, wprowadzi ono dodatkową etykietę NONSCRIPT, dzięki której na przeglądarkach nie obsługujących skryptów może zostać wyświetlony alternatywny tekst. Dowolny tekst umieszczony pomiędzy etykietami NONSCRIPT zostanie wyświetlony przez wszystkie przeglądarki prócz Navigatora, który tekst ten zignoruje. Poniżej przedstawiłem przykład zastosowania etykiety NONSCRI PT:

FROM OTHER BROWSERS

-->

II II

Tutaj umieszczono kod JavaScript
Możesz go uruchomić korzystając z Netscape

Navigatora.

Gdzie umieszczać kod JavaScriptu Programy oraz skrypty tworzone w języku JavaScript mogą być umieszczane zarówno w nagłówku, jak i w głównej części pliku HTML. Wiele przykładowych skryptów znaj-

Twój pierwszy skrypt dujących się na stronach firmy Netscape, sposób postępowania jest ogólnie zalecany.

49

umieszczanych

jest w nagłówku

-

taki

Z drugiej strony, wielu programistów woli umieszczać skrypty JavaScript zaraz za elementami strony WWW, do których skrypty te się odwołują; na przykład za formularzem. Ze względu na to, iż w pliku HTML można wpisać większą ilość etykiet SCRIPT, funkcje JavaScriptu mogą być umieszczone w odpowiednich miejscach, dzięki czemu ich tworzenie i testowanie będzie prostsze. Jak zobaczysz w rozdziale 4: Funkcje i obiekty - części składowe programów, istnieją konkretne powody po temu, by określone fragmenty skryptów umieszczane były w nagłówku pliku HTML, dzięki czemu zostaną one przetworzone wcześniej niż użytkownik będzie mógł generować jakiekolwiek zdarzenia.

Umieszczanie programów JavaScript w osobnych plikach Umieszczanie skryptów w plikach HTML może być wygodne w przypadku nieskomplikowanych skryptów i niedużych stron WWW. Jednakże jeśli strona wymaga dużego, złożonego skryptu, to tworzenie go w tym samym pliku może się stać uciążliwe. Aby ułatwić tworzenie i pielęgnację plików HTML oraz skryptów JavaScript, specyfikacja JavaScriptu daje możliwość umieszczenia kodu skryptu w oddzielnym pliku i użycia atrybutu SRC (w etykiecie SCRIPT) w celu dołączenia go do konkretnego pliku HTML. Najprostszy przykład użycia parametru SRC w etykiecie SCRIPT w następujący sposób:

mógłby wyglądać

. j s">

Aby atrybut SRC zadziałał poprawnie, plik, w którym umieszczono posiadać rozszerzenie . j s. Co więcej, Twój serwer WWW musi wiedni sposób skonfigurowany i powinien posiadać informacje na JavaScriptu - więcej informacji na ten temat znajdziesz na stronach Netscape

skrypt, musi być w odpotemat plików WWW firmy

Jedną z korzyści płynących z umieszczania skryptów w oddzielnych plikach jest fakt, iż są one automatycznie ukrywane przed przeglądarkami, które nie potrafią obsługiwać etykiety SCRIPT. Z drugiej jednak strony, metoda ta wymaga dodatkowego dostępu do serwera, co może spowodować pewne trudności na wolnych lub przeciążonych serwerach oraz w przypadku dysponowania wolnym połączeniem z Internetem. Obie techniki (umieszczanie kodu źródłowego skryptów JavaScript bezpośrednio w pliku HTML lub w oddzielnym pliku) mogą być stosowane równocześnie. Możesz w tym celu wykorzystać jedną lub większą ilość etykiet SCRI PT:

50

JavaScript

FROM OTHER

BROWSERS

-->

lub

FROM OTHER

BROWSERS

-->

Listing2.1 przedstawia prosty skrypt umieszczony w pliku HTML. Kod

Listing 2.1. Umieszczanie skryptu w pliku HTML

Listing

2.1

Oto wyniki:

FROM OTHER

BROWSERS

-->



Wyniki

Powyższy przykład realizuje wyświetlenie strony WWW, podobnej do tej przedsta. wionej na ilustracji 2.1. Próba wyświetlenia tego pliku przy pomocy przeglądarki nie obsługującej JavaScriptu spowoduje wyświetlenie strony przedstawionej na ilustracji 2~2.

Analiza

Skrypt przedstawiony w listingu 2.1 ilustruje kilka istotnych elementów tworzenia skryptów, które zostaną przedstawione w kolejnych rozdziałach.

Twój pierwszy skrypt Ilustracja 2. 1.

rl< Nelscape

W Netscape Navigatorze poszczególne elementy zostają wyświetlone II' kolejności ich występowania w kodzie źródłowym

,-

,

51 "

Il!!łlil Im

Oto W)''lliki: To działa!

Ilustracja 2.2. W przeglądarkach nie obsługujących JavcScriptu nie pojawią się wyniki działania skryptu

Po pierwsze, dzięki skryptom JavaScript istnieje możliwość dynamicznego generowania strony WWW podczas ładowania dokumentu HTML. Po drugie, na innych przeglądarkach skrypt nie będzie widoczny, nawet jeśli reszta strony zostanie wyświetlona beż żadnych trudności. Aby to sprawdzić usuń z pliku HTML komentarze, pomiędzy którymi został umieszczony skrypt - wygląd przykładowej strony WWW przedstawiony został na ilustracji 2.3. Zauważ, że całe polecenie JavaScriptu document. writeln ("To działa I
") ; zostało wyświetlone, a etykieta
- odpowiednio zinterpretowana i także wyświetlona. W powyższym przykładzie możesz także prześledzić, w jaki sposób działają komentarze w języku JavaScript. Linia kodu rozpoczynająca się dwoma ukośnikami (I l): II Wyświetlenie

"To działa"

jest właśnie komentarzem. Działa on identycznie jak komentarze w C++, tzn. zajmuje obszar od znaków ukośnika do końca linii

52

JavaScript

Ilustracja 2.3.

>«

Bez komentarzy otaczających skrypt jego kod zostanie potraktowany jak zwyczajna zawartość strony

Nelscape

I!I~Ei

,-

Oto Wl'-niki: I/output" To dziala" docwnent.wńteJn("

To dzialal");

WWW

W języku JavaScript można także tworzyć komentarze zajmujące więcej niż jedną linię; są one wzorowane na komentarzach języka C - rozpoczynają się od kombinacji znaków / * , a kończą * /: /* oto jest komentarz

*/

Komentarze używane są w celu ułatwienia innym osobom analizowania kodu programu i wyjaśnienia do czego używane są poszczególne polecenia. Komentarze mogą się przydać nawet twórcom programów - kiedy będziesz tworzyć duży i skomplikowany program używanie komentarzy opisujących jego poszczególne części logiczne, ułatwi Ci późniejsze jego poprawienie lub modyfikację.

Podstawowa składnia poleceń Składnia oraz struktura JavaScriptu będzie bliska dla tych wszystkich osób, które miały cokolwiek wspólnego z C, C++ lub Javą. Na programy tworzone w JavaScripcie składają się funkcje (omówione w rozdziale 4.), instrukcje, operatory oraz wyrażenia. Najprostsza postać instrukcji to pojedyncza linia, w której umieszczona została jedna instrukcja lub wyrażenie, opcjonalnie zakończona średnikiem. Na przykład instrukcja: document.writeln("To

działa'
");

powoduje wykonanie metody wri t e Ln () , która jest częścią obiektu document. Średnik oznacza koniec instrukcji .

• Instrukcje w JavaScripcie nie muszą być umieszczane w odrębnych liniach mogą zajmować kilka linii pod warunkiem, iż będą od siebie oddzielone średnikami. W rzeczywistości średniki nie są konieczne, za wyjątkiem sytuacji gdy trzeba oddzielić od siebie dwie instrukcje. W tej książce używałem jednak średników, aby ułatwić analizę i czytanie kodu żródłowego skryptów.

Twój pierwszy skrypt

53

Bloki instrukcji t'

Przy pomocy nawiasów klamrowych ({ oraz }) można grupować większe ilości instrukcji w tak zwane bloki. Bloki instrukcji używane są w JavaScripcie do łączenia instrukcji w logiczne jednostki, które następnie mogą być wykorzystywane do wielu celów, w tym do tworzenia pętli oraz funkcji. (Zagadnienia te zostaną przedstawione w kolejnych rozdziałach.) Blok komend ma następującą postać: document.writeln( document.writeln(

"Czy to działa?" "To działal
"

); };

Bloki komend mogą być zagnieżdżone, jak to pokazano na poniższym przykładzie: kod programu {

dalsza

część kodu programu

Jeśli zagnieżdżasz bloki instrukcji w powyższy sposób, pamiętaj o tym, że wszystkie otworzone nawiasy klamrowe muszą zostać zamknięte, oraz że pierwszy zamykający nawias klamrowy zamyka tę część kodu, która jest umieszczona po ostatnim nawiasie otwierającym. Ilustruje to poniższy przykład: kod programu {

I dalsza

część

kodu programu

}

Podczas zagnieżdżania bloków poleceń przyjęto stosować odpowiednie wcięcia, dzięki czemu już na pierwszy rzut oka można się zorientować gdzie się dany blok rozpoczyna, a gdzie kończy. Dodatkowe znaki spacji lub tabulacji nie mają żadnego wpływu na działanie programów w JavaScripcie.

W JavaScripcie w nazwach obiektów, metod, właściwości, jak również identyfikatorów oraz nazw zmiennych uwzględniana jest wielkość liter. O zmiennych oraz operatorach JavaScriptu dowiesz się w rozdziale 3.: Operowanie na danych i informacjach. Ze względu na to, iż uwzględniana jest wielkość liter, wszystkie przedstawione poniżej wyrażenia różnią się od siebie (i część z nich jest niepoprawna): document.writeln("Tekst"); Document.Writeln("Tekst"); document.WriteLN("Tekst");

54

JavaScript

Wyświetlanie tekstu W większości języków programowania jedną z podstawowych możliwości jest wyświetlanie (pokazywanie) tekstu. JavaScripcie może wyświetlić tekst w kilku miejscach, w tym między innymi w oknie aktualnego dokumentu lub w oknie dialogowym.

Wyświetlanie tekstu w oknie przeglądarki W JavaScripcie programista może umieścić wyświetlany tekst w oknie przeglądarki, wraz z aktualną stroną WWW. Jak to zostało opisane w poprzedniej sekcji, skrypt powodujący wyświetlenie tekstu wykonywany jest w tym miejscu strony, w którym jest umieszczony; wyniki działania skryptu traktowane są jako część pliku HTML i w podobny sposób są przetwarzane i wyświetlane. Co więcej, JavaScript pozwala programistom na wyświetlanie różnego typu okienek dialogowych, zawierających pole do wprowadzania tekstu oraz jeden lub dwa przyciski. Liczby oraz dowolne teksty mogą być również wyświetlane w polach TEXT oraz TEXTAREA umieszczanych w formularzach. W kolejnych sekcjach przedstawię metody wyświetlania tekstu w oknie przeglądarki.

Metody document.write() oraz document.writelnO W języku JavaScript istnieje obiekt document, który posiada dwie metody - wri te () i writeln () - przeznaczone do wyświetlania tekstu w oknie przeglądarki. W JavaScripcie metody są wywoływane poprzez podanie nazwy obiektu oraz nazwy metody, tak jak pokazano w poniższym przykładzie: nazwa-obiektu.

nazwa-metody

Dane, jakich metody potrzebują, aby mogły zostać poprawnie wykonane, podawane są w nawiasach, na przykład: document.write("Tekst"); document.writeln("Tekst"}

Nowy termin

;

Argumenty są to dane, których metody lub funkcje potrzebują, aby mogły zostać poprawnie wykonane. Argumenty są dostarczane (lub przekazywane) poprzez podanie ich wewnątrz nawiasów umieszczanych zaraz za nazwą metody lub funkcji. Jeśli funkcja lub metoda wymaga większej ilości 'argumentów, to są one oddzielane przecinkami. Rzut oka na przykłady umieszczone w tekście pozwoli Ci się zorientować, że łańcuchy znaków zapisywane są w JavaScripcie pomiędzy znakami cudzysłowu (") lub apostrofami (') oraz że obie metody (document. write () oraz document. writeln (}) wywoływane są w ten sam sposób. Znak użyty do rozpoczęcia łańcucha znaków musi być identyczny ze znakiem, który ten łańcuch zakończy nie możesz rozpocząć łańcucha znaków cudzysłowem, a zakończyć apostrofem

Twój pierwszy skrypt

55

Użycie metody write () powoduje wyświetlenie tekstu oraz etykiet HTML, przekazanych jako parametry, w oknie przeglądarki i przedstawienie ich jako części prezentowanej strony WWW. Ze względu na to, iż etykieta SCRIPT nie ma żadnego wpływu na postać dokumentu HTML, w którym jest umieszczona, wszelkie etykiety oraz inne elementy umieszczone w pliku HTML będą miały wpływ na postać tekstu wyświetlonego za pomocą metody wr i te (). Skrypt przedstawiony na listingu 2.2 powoduje wyświetlenie strony pokazanej na ilustracji 2.4.

Kod

Listing 2.2. Wyświetlanie etykiet HTML za pomocą skryptów JavaScriptu

Outputting

text

To jest normalny tekst.


FROM OTHER

BROWSERS

-->



Wyniki

Efekt działania skryptu przedstawiony został na ilustracji 2.4.

Ilustracja 2.4. Etykiety HTML umieszczone w skrypcie języka JavaScript mają wpływ na wynikową postać strony

Analiza

Skrypt pokazany w listingu 2.2 pokazuje, że przy pomocy metody wri te ()mogą być wyświetlane również etykiety HTML a nie tylko normalny tekst. Możesz zauważyć, że etykiety oraz mogą być umieszczone poza skryptem lub wyświetlone przy pomocy metody wr i te ().

56

JavaScript W obu przypadkach, tekst oraz etykiety HTML, przetwarzane są w kolejności w jakiej występują w dokumencie HTML oraz kodzie źródłowym skryptu. Metoda wri teln (l działa identycznie jak wri te (), z tą drobną różnicą, iż na końcu wyświetlanego łańcucha znaków dodaje znak nowej linii. Ma to w zasadzie znaczenie, jedynie wewnątrz etykiet PRE oraz XMP, gdzie znaki nowej linii są interpretowane i mają wpływ na postać wyświetlanego tekstu. Na listingu 2.3 przedstawiony jest przykład użycia metody writeln () .

Kod

Listing 2.3. Użycie metody writelnQ wraz z etykietą PRE



Wyniki

Rezultaty działania powyższego skryptu przedstawione zostały na ilustracji 2.5.

Ilustracja 2.5. Wyświetlanie tekstu przy pomocy metody writelnt)

W JavaScripcie łańcuchy znaków, na przykład te używane do modyfikowania wyglądu strony za pomocą metod wri te () i wri teln (l, mogą zawierać specjalne kombinacje liter odpowiadające znakom, których w normalny sposób podać się nie da; jak na przykład znak powrotu do początku linii (ang.: carriage return). Zestawienie znaków specjalnych przedstawione zostało w tabeli 2.2. Dla przykładu, poniższe polecenie powoduje wyświetlenie napisu" To działa którym umieszczony zostanie znak nowej linii: document.write("To

działa!\n"l;

I", po

Twój pierwszy skrypt

57

Tabela 2.2. Znaki specjalne Znak

Opis

\n

nowa linia

\t

tabulacja

\r

powrót do początku linii

\f

wysunięcie kartki

\b

backspace

Wszystkie znaki specjalne rozpoczynają się od odwrotnego ukośnika (\). Znak ten nazywany jest początkiem sekwencji sterującej. Jest on używany w wielu językach programowania oraz językach skryptowych do wprowadzania znaków, które w normalny sposób nie mogłyby zostać zapisane lub które mają specjalne znaczenie i przy innym sposobie zapisu zostałyby zinterpretowane niepoprawnie. Najlepszym przykładem stosowania znaków specjalnych jest sam odwrotny ukośnik. Aby w JavaScripcie wyświetlić odwrotny ukośnik, należy umieścić go w sekwencji sterującej: document.write("Odwrotny

ukośnik:

\\"};

W powyższym przykładzie pierwszy odwrotny ukośnik informuje program, iż następny znak jest znakiem specjalnym i nie należy traktować go w standardowy sposób. W tym przypadku drugi odwrotny ukośnik jest po prostu wyświetlany, a nie traktowany jako początek sekwencji sterującej. W listingu 2.4 przedstawiony został skrypt będący odpowiednikiem tradycyjnych programów "Hello World", które są pierwszymi programami jakie większość uczących się osób tworzy w nowym języku programowania. Zamiast standardowego .Hello World", w skrypcie tym stworzysz kompletną stronę, zawierającą prócz napisu "Witamy w Netscape Navigatorze" także i odpowiedni obrazek. Obrazek ten znaleźć możesz na dyskietce dołączonej do książki.

Kod

Listing 2.4. Witamy w Netscape Navigatorze

Example

2.4



FROM OTHER

BROWSERS

-->

Wyniki

Wykonanie skryptu powoduje wyświetlenie strony przestawionej na ilustracji 2.6.

Ilustracja 2.6. Skrypty JavaScript mogą być użyte do stworzenia pełnej strony WWW

,;t, Netseepe

New?

I!lIiIEi

. Wh..t's CooI?

D. y) && (x < y),przybrałobywartośćfalse,jużwchwiliobliczeniawartości pierwszej jego części (x > y). Podobnie (x < y) I I (x > y) od razu przybrałaby wartość true, dlatego że wyrażenie (x < y) ma wartość true. Przedstawione

82

JavaScript powyżej przykłady w następnej sekcji.

używają

operatorów

porównania,

które zostaną

przedstawione

Ponieważ operator logicznej negacji (!) wymaga podania tylko jednego operandu, to nie ma jak skrócić cyklu jego obliczania.

Operatory porównania Podobnie jak operatory logiczne, także operatory porównania zwracają wartości logiczne; jednakże w odróżnieniu od operatorów logicznych nie wymagają one, aby ich operandy były typu logicznego. Operatory te używane są w JavaScripcie do testowania równości operandów oraz sprawdzania kilku innych warunków logicznych. Wszystkie operatory porównania dostępne w JavaScripcie przedstawione zostały w tabeli 3.5.

Tabela 3.5. Operatory porównania dostępne w JavaScripcie Operator

Opis Zwraca t rue jeśli operandy są równe.

!=

Zwraca true jeśli operandy nie są równe.

>

Zwraca true jeśli operand lewostronny jest większy od operandu prawostronnego.


=

Zwraca true jeśli operand lewostronny jest większy lub równy operandowi prawostronnemu.

= 4 zwraca wartość true.

•

"ten"

•

4 == "4"zwracawartośćtrue.

!=

"on" zwraca wartość true.

dwuargumen-

zarówno wartości liczbo-

Operowanie na danych i informacjach

83

Jeśli przy porównywaniu łańcuchów znaków oraz wartości liczbowych znaków nie zaczyna się od cyfry, zostanie wygenerowany błąd

łańcuch

Operator warunkowy Wyrażenia warunkowe różnią się nieco od wszystkich typów wyrażeń jakie do tej pory poznałeś, gdyż mogą one zwrócić dwie różne wartości w zależności od warunku. Poniżej przedstawiona została struktura wyrażenia warunkowego: {warunek}

? wartość

l

: wartość2

Wyrażenie warunkowe działa na tej zasadzie, iż w pierwszej kolejności wartość wyrażenia podanego jako warunek (jest to wyrażenie, które wartość logiczną); a następnie, w zależności od wartości warunku, wartość całego wyrażenia - jeśli warunek jest spełniony (true) to wartośćl, w przeciwnym wypadku wartość2.

obliczana jest musi zwrócić obliczana jest zwracana jest

Wyrażenie: (dzień

== "Niedziela")

? "Weekend'"

: "Dzień

roboczy'"

powoduje zwrócenie wartości "Weekend'" tylko wtedy, gdy zmienna dzień będzie miała wartość "Niedziela", w przeciwnym razie wyrażenie zwróci wartość "Dzień r cboc z y ' ".

Operatory łańcuchowe W rozdziale 2. nauczyłeś się używać operatora konkatenacji (+). Użycie tego operatora powoduje połączenie dwóch łańcuchów znaków w jeden. Tak więc: "Witamy

w " + "Netscape

Navigatorze"

powoduje

stworzenie jednego łańcucha znaków o wartości "Witamy w Netscape Łańcuchy znaków można także łączyć za pomocą opisanego już operatora przypisania połączonego z operatorem dodawania (+=). I tak, jeśli zmienna powi tanie miałaby wartość "Witamy w", to wyrażenie Navigatorze".

powitanie

spowodowałoby

+= "Netscape

Navigatorze"

przypisanie zmiennej pawi tanie

wartości. ::Witamy w Netscape

Navigatorze".

Hierarchia operatorów Ze względu na to, że wyrażenia mogą być operandami w innych wyrażeniach niezbędna jest znajomość hierarchii operatorów. Hierarchia ta jest zbiorem reguł określających kolejność, w jakiej obliczane są wyrażenia złożone.

84

JavaScript Operatory, które poznałeś wykonywane są w następującej kolejności: •

Nawiasy (()

•

Operator mnożenia, dzielenia, dzielenie modulo (* / %)

•

Operator dodawania/odejmowania

•

Operatory porównania

•

Operatory równości (==

•

Operator logicznej koniunkcji (s s)

•

Operator logicznej alternatywy (I I)

•

Operator warunkowy (? : )

•

Operatory przypisania (= += -= *= /= %=)

«

Bazując na przedstawionych

(+ -)

= » ! =)

powyżej zasadach wyrażenie:

5 + 3 * 2

traktowane będzie jako 5 + 6

co daje 11. Bez hierarchii operatorów dodawanie zostałoby wykonane przed mnożeniem, co dałoby w rezultacie wynik 16. Podobnie wyrażenie: false

I I true

&&

false

daje wynik false

gdyż najpierw obliczane jest wyrażenie z operatorem & &, dając wynik false; obliczane jest alternatywa (false I I false) co w efekcie daje false.

następnie

Reguły hierarchii operatorów mogą być zmienione poprzez użycie nawiasów. Wyrażenia zapisane wewnątrz nawiasów są obliczane przed wyrażeniami zapisanym poza nawiasami; tak więc wyrażenie: (5

+ 3)

*

2

da wynik 16, a nie jak w przykładzie przedstawionym powyżej -

11.

Testowanie odpowiedzi użytkownika W poniższym przykładzie posuniesz się o krok naprzód, modyfikując skrypt "Wi tamy w Netscape Navigatorze". Kolejny skrypt przedstawiony jest na listingu 3.3. Skrypt ten najpierw zadaje użytkownikowi pytanie, następnie sprawdza poprawność odpowiedzi i w zależności od niej, wyświetla jeden z dwóch obrazków.

Operowanie na danych i informacjach

85

Pytanie zostanie zadane w okienku dialogowym wyświetlanym prompt () , a rezultaty zostaną wyświetlone w oknie przeglądarki.

Kod

za pomocą metody

Listing 3.3. Używanie operatora warunkowego do testowania wprowadzonych informacji

Example

3.3





Wyniki

Wyniki działania skryptu przedstawione zostały na ilustracjach 3.5 oraz 3.6

Analiza

W powyższym przykładzie przedstawione omawianych w poprzednich sekcjach.

zostało użycie kilku elementów JavaScriptu

Pierwsza część skryptu, zgodnie z zalecanym stylem programowania, umieszczona została w nagłówku dokumentu HTML - powinieneś postępować tak zawsze, za wyjątkiem tych sytuacji, kiedy końcowa postać strony określana jest zarówno przez skrypt, jak i przez informacje umieszczone w dokumencie. Dlatego też wszelkie definicje zmiennych - tych używanych do zadawania pytań, jak i tych służących do testowania odpowiedzi podanych przez użytkownika - umieszczane są w nagłówku. Skrypt umieszczony w głównej części dokumentu HTML używany jest jedynie do wyświetlania rezultatów.

86

JavaScript

Ilustracja 3.5.

x

Odpowiedź użytkownika podawana jest w okienku dialogowym wyświetlonym za pomocą metody

Wncel

prompu)

Ilustracja 3.6.

\of< Nehcape·

(Exemple 3 3(

II!!ISE!

Ostateczny wygląd strony określany jest za pomocą operatora warunkowego

Zwróć uwagę na ilość i sposób użycia zmiennych - jest ich dużo i wszystkie zdefiniowane zostały przy użyciu polecenia var. Każda istotna informacja w skrypcie zapisana została w jakiejś zmiennej. Dzięki temu skrypt łatwiej jest przeanalizować. Poprzez zmodyfikowanie wartości zmiennych question oraz answer zmienić możesz pytanie zadawane użytkownikowi, a zmieniając zmienne correct oraz incorrect - sposób przedstawienia rezultatów testu. Prócz tego, w powyższym skrypcie znaleźć możesz przykład użycia wyrażenia warunkowego «(response == answer) ? correct incorrect) oraz przypisania wartości zwróconej takiemu wyrażeniu do zmiennej.

Stosowanie porównań: konstrukcja if-else Teraz, kiedy już potrafisz tworzyć wyrażenia, a w szczególności wyrażenia porównywania oraz wyrażenia logiczne, jesteś w stanie użyć ich w skrypcie. W poprzedniej sekcji zobaczyłeś w jaki sposób wyrażenie, na przykład wyrażenie porównania, może zostać użyte jako warunek w wyrażeniu warunkowym. Operator warunkowy udostępnia Ci prostą metodę podejmowania decyzji: zwraca on jedną wartość gdy warunek jest spełniony, a drugą - kiedy nie jest spełniony.

Operowanie na danych i informacjach

87

Wciąż jednak przy użyciu operatora warunkowego nie jesteś w stanie zmienić liniowego sposobu wykonywania programu. Oznacza to, że wszystkie linie programu zostają wykonane po kolei, a Ty nie jesteś w stanie tego zmienić. Jednakże kolejność wykonywania poleceń programu możesz zmienić stosując instrukcję warunkową if-else - dzięki której, w zależności od warunku, mogą zostać wykonane dwa różne bloki instrukcji. Najprostsza struktura instrukcji if ma następującą postać: if warunek polecenie;

Powyższa instrukcja mówi programowi, że polecenie ma zostać wykonane, jeśli warunek będzie posiadał wartość true. Z rozdziału drugiego pamiętasz zapewne, że przy pomocy nawiasów klamrowych można grupować polecenia w bloki. Instrukcja i f może zostać użyta także w przypadku zastosowania boków poleceń: if warunek kilka

{ linii

kodu JavaScript

Dla przykładu, poniższe linie kodu źródłowego: if

(day == "Sobota") ( document.write("To jest dzień alert("To jest dzień wolny!")

wolny''')

spowodują wypisanie tekstu: "To jest dzień wolny" w oknie przeglądarki oraz w okienku dialogowym tylko wtedy, gdy zmienna day przyjmie wartość sobota. W przeciwnym wypadku żadna linia programu nie zostanie wykonana. Przy użyciu instrukcji if możesz generować wszystkich innych dni tygodnia: if }

if

(day == "Sobota") ( document.write("To

osobne komunikaty

jest dzień

dla soboty oraz

wolny''');

,=

(day "Sobota") ( document.write("To

nie weekend!");

Konstrukcja if-else pozwala Ci zapisać przedstawiony w prostszej postaci: (day == "Sobota") ( document.write("To }else ( document.write("To

powyżej fragment programu

if

jest dzień

wolny''');

nie weekend!");

88

JavaScript Instrukcja else pozwala na wykonanie bloku poleceń w przypadku, w instrukcji if nie zostanie spełniony (będzie posiadał wartość false).

gdy warunek

Zwróć także uwagę na to, iż konstrukcje if-else mogą być zagnieżdżane: if warunek { polecenia JavaScriptu i f warunek2 { polecenia JavaScriptu else { inne polecenia }

kolejne polecenia else { inne polecenia

Używanie instrukcji ił do powtórzeń Dzięki zastosowaniu instrukcji if będziesz mógł usprawnić nieco skrypt przedstawiony na listingu 3.3 - pozwalając użytkownikowi na określenie, czy chce jeszcze raz spróbować odpowiedzieć na pytanie. Zmodyfikowany skrypt przedstawiony został na listingu 3.4. Oto co chcesz zrobić: zadać użytkownikowi pytanie, i sprawdzić jak na nie odpowiedział. Jeśli rezultat nie jest poprawny, to zapytasz użytkownika czy chce spróbować jeszcze raz. Jeśli chce, to pytanie zostanie mu zadane powtórnie. Aby ułatwić sobie zadanie skorzystasz z metody eon firm (),która jest bardzo podobna do metod alert () oraz prompt (),które już poznałeś. Metoda confirm () wymaga podania jednego argumentu - łańcucha znaków. Podany tekst wyświetlany jest w oknie dialogowym wraz z dwoma przyciskami: OK oraz Cance1. Metoda zwraca wartość true, jeśli użytkownik kliknął na przycisku OK lub w przypadku kliknięcia na przycisku CanceJ- wartość false. Kod

Listing 3.4. Użycie metody confirmO

w instrukcji i(

Example

3.4





Analiza

Aby dać użytkownikowi możliwość poprawienia odpowiedzi, musisz dodać tylko dwie zagnieżdżone instrukcje if. W celu dokładnego zrozumienia, jak działa powyższy skrypt, przyjrzyjmy mu się linia po linii, rozpoczynając od pierwszego wywołania metody prompt (). var response

= prompt(question,

"O");

W tej linii deklarujesz zmienną response, prosisz użytkownika o podanie odpowiedzi na pytanie, a następnie przypisujesz zmiennej response odpowiedź podaną przez użytkownika. if

(response

1= answer)

Tutaj porównujesz odpowiedź podaną przez użytkownika z poprawną odpowiedzią na pytanie. Jeśli odpowiedź podana przez użytkownika nie jest poprawna, to wykonywana jest kolejna linia skryptu. Jeśli odpowiedź jest poprawna, wówczas program przeskakuje do miejsca, gdzie wyświetlane są wyniki. if

(confirm("Źlel

Kliknij

OK aby spróbować

jeszcze

raz."))

90

JavaScript Załóżmy, że użytkownik podał nieprawidłową odpowiedź. Teraz, przy pomocy metody confirm (), sprawdzasz czy użytkownik chce odpowiadać jeszcze raz. Metoda conf i rm () zwraca wartość logiczną, która jest analizowana przez instrukcję i f. response

=

prompt(question,

"O");

Jeśli użytkownik kliknął na przycisku OK w okienku dialogowym wygenerowanym przy użyciu metody confirm (), to metoda ta zwróci wartość true i wykonane zostanie powyższe polecenie. Powoduje ono, że użytkownikowi ponownie zadawane jest pytanie, a odpowiedź na nie zapisywana jest w zmiennej response (uprzednia wartość zapisana w tej zmiennej jest bezpowrotnie tracona).

Podsumowanie JavaScript posiada cztery podstawowe typy danych: numeryczny (mogący reprezentować zarówno liczby całkowite, jak i zmiennoprzecinkowe), łańcuchowy, logiczny oraz wartość nu I L. Literały służą do podawania konkretnych wartości; mogą one być typu numerycznego, łańcuchowego lub logicznego, a ich nazwy określane są według ustalonych zasad. Zmienne są "pojemnikami" w których można zapisać jakąś daną lub informację. Wszystkie zmienne posiadają nazwę, i są definiowane za pomocą polecenia var. Ze względu na to, że JavaScript jest językiem o luźnej kontroli typów, to typy zmiennych i literałów zmieniają się dynamicznie w zależności od operacji jakie są na nich wykonywane. Za pomocą wyrażeń można modyfikować zmienne i literały. Istnieje kilka typów wyrażeń, są to: wyrażenia przypisania, wyrażenia arytmetyczne, logiczne, wyrażenia porównania, wyrażenia łańcuchowe oraz warunkowe. Wyrażenia budowane są z operandów oraz operatorów, a w wyniku ich przetworzenia generowana jest jedna wartość. Kolejność obliczania wyrażeń złożonych określana jest dzięki hierarchii operatorów; hierarchia ta może być jednak zmieniana przy użyciu nawiasów. Instrukcja warunkowa i f-else pozwala na określenia, przy pomocy warunku logicznego, który fragment kodu będzie wykonywany. W rozdziale 4 przyjrzymy się bliżej funkcjom i obiektom, które są głównymi elementami konstrukcyjnymi programów.

Operowanie na danych i informacjach

,

Cwiczenia l. Podaj wartość poniższych wyrażeń: a. 7 + 5 b. + 11711

115"

c.

7

7

d.

7

>= 5

e. 7 = 5) && (5 > 5)

h.

(7

>= 5) II

(5 > 5)

2. Napisz fragment skryptu pytający użytkownika czy chce wyświetlić wiadomość powitalną. Jeśli chce, to w oknie przeglądarki wyświetl obrazek zapisany w pliku OlF o nazwie welcome. gif, a poniżej wyświetl napis "Witamy w Netscape Navigatorze".

3. Rozszerz skrypt przedstawiony w listingu 3.4 w ten sposób, aby użytkownicy, którzy odpowiedzą poprawnie, mogli odpowiedzieć na drugi pytanie, lecz w ten sposób, aby na drugie pytanie mogli odpowiedzieć tylko raz.

Przegląd poleceń oraz wiadomości dodatkowych Polecenia! wiadomości dodatkowe

Rodzaj

Opis

var

Polecenie JavaScriptu

Deklaruje zmienną.

Operator przypisania

Przypisuje lewemu operandowi wartość prawego operandu.

Operator przypisania

Dodaje wartości lewego i prawego operandu i wynik przypisuje lewemu operandowi.

Operator przypisania

Odejmuje wartość prawego operandu od wartości lewego operandu i wynik przypisuje do lewego operandu.

+=

91

92

JavaScript

Polecenia! wiadomości dodatkowe

Rodzaj

Opis

*=

Operator przypisania

Mnoży wartości obu operandów i wynik przypisuje lewemu operandowi.

/=

Operator przypisania

Dzieli wartość lewego operandu przez wartość prawego operandu i wynik przypisuje lewemu operandowi.

%=

Operator przypisania

Dzieli wartość lewego operandu przez wartość prawego operandu i przypisuje lewemu operandowi ułamkową część wyniku dzielenia.

+

Operator arytmetyczny

Dodaje operandy.

Operator arytmetyczny

Odejmuje wartość prawego operandu od wartości lewego operandu.

*

Operator arytmetyczny

Mnoży operandy.

/

Operator arytmetyczny

Dzieli wartość lewego operandu przez wartość prawego operandu.

%

Operator arytmetyczny

Oblicza resztę z dzielenia.

&&

Operator logiczny

Zwraca wartość true, jeśli oba operandy mają wartość true.

II

Operator logiczny

Zwraca wartość true, jeśli przynajmniej jeden z operandów ma wartość true.

Operator logiczny

Zwraca wartość true, jeśli operand ma wartość false lub wartość false,jeśli operand ma wartość true.

Operator porównania

Zwraca wartość true, jeśli oba operandy są sobie równe.

!=

Operator porównania

Zwraca wartość true, równe.

>

Operator porównania

Zwraca true, jeśli wartość lewego operandu jest większa od wartości prawego operandu.


=

Operator porównania

Zwraca true, jeśli wartość lewego operandu jest większa lub równa wartości prawego operandu.





;

FROM OTHER

BROWSERS

-->

raz."))

incorrect;

Funkcje i obiekty - części składowe programów

95

Rozdzi ~4.·· Funkcje i obiekty - części składowe programów Kiedy już zaczniesz tworzyć bardziej zaawansowane programy, szybko odczujesz potrzebę wielokrotnego wykonywania pewnych czynności i akcji w czasie działania programu. Potrzeba ta może zostać zaspokojona dzięki użyciu funkcji, które są podobne do metod, lecz w odróżnieniu od nich nie są związane z żadnym konkretnym obiektem. Jako programista możesz w swoim programie tworzyć wiele różnorodnych funkcji - pomaga to w zapewnieniu poprawnej logicznej struktury programu oraz ułatwia późniejsze jego modyfikacje. Funkcje są szczególnie przydatne przy pracy ze zdarzeniami oraz przy tworzeniu procedur obsługi zdarzeń - zagadnienia te zostaną przedstawione w rozdziale 5. Zdarzenia w Javascripcie. Możesz także użyć funkcji jako podstawy przy tworzeniu swoich własnych obiektów, rozszerzających możliwości obiektów dostępnych w JavaScripcie. W rozdziale tym poruszymy następujące zagadnienia: •

Istota funkcji.

•

Funkcje wbudowane a funkcje tworzone przez programistów.

•

W jaki sposób definiować i używać funkcji.

•

W jaki sposób tworzyć nowe obiekty, metody oraz właściwości.

~

W jaki sposób używać tabel asocjacyjnych.

96

JvaScript

Czym są funkcje Funkcje dają programiście możliwość grupowania kodu służącego do wykonywania określonych zadań - funkcji - stworzony w ten sposób blok kodu może być następnie wielokrotnie wykonywany w całym programie. Podobnie jak przedstawione już wcześniej metody, także funkcje definiowane pomocą nazwy, która następnie używana jest w celu wywołania danej funkcji.

są za

Kolejnym podobieństwem funkcji do metod - na przykład do takich metod jak prompt () lub eon f i rm () - jest to, że mogą one pobierać dane w formie argumentów oraz zwracać wypracowane wyniki. Oprócz wbudowanych obiektów i metod, JavaScript zawiera także kilka wbudowanych funkcji - widziałeś je już na przykładach takich metod jak: alert (), document. wri te (), parseInt () ; oraz wszystkich inny metod i funkcji, których do tej pory używałeś. Elastyczność JavaScriptu polega jednak na tym, iż daje on programiście możliwości tworzenia własnych funkcji, które uzupełniają i rozszerzają możliwości wbudowanych funkcji języka.

Używanie funkcji Aby móc użyć funkcji, będziesz musiał wiedzieć w jaki sposób je zdefiniować, przekazać do nich argumenty oraz zwrócić wyniki obliczeń wykonanych w funkcji. Ważna jest także znajomość pojęcia zakresu zmiennych, dzięki któremu określane jest czy dana zmienna dostępna jest w całym programie, czy jedynie wewnątrz funkcji.

Definiowanie funkcji Funkcje definiowane są przy pomocy instrukcji function. Instrukcja ta wymaga podania nazwy funkcji, listy parametrów (lub argumentów) które zostaną przekazane do funkcji oraz bloku poleceń definiujących zadania jakie dana funkcja ma wykonać: function

nazwa

blok poleceń

funkcji

(parametry,

argumenty)

(

-

}

Oczywiście reguły nazywania funkcji są takie same jak reguły dotyczące tworzenia nazw zmiennych: rozróżniane są małe i wielkie litery, nazwy muszą zaczynać się od litery, a także mogą zawierać znak podkreślenia (_). Lista argumentów przekazywanych do funkcji podana zostaje w nawiasach, a poszczególne argumenty oddzielone są od siebie przecinkami.

Funkcje i obiekty - części składowe programów

97

Ważne jest, aby uświadomić sobie, że zdefiniowanie funkcji nie powoduje wykonania poleceń, które tę funkcję tworzą. Funkcja wykonywana jest jedynie wtedy, gdy jej nazwa zostanie wywołana w dowolnym innym miejscu skryptu.

Przekazywanie argumentów W poniższym przykładzie funkcja printName () pobiera jeden parametr function printName(name) { document.write("Oto Twoje document.write(name); document.write("");

imie:

name:

");

}

Wewnątrz funkcji odwołania do name odnoszą się do wartości przekazanej do funkcji. W tym miejscu należy zwrócić uwagę na kilka istotnych zagadnień: •

Zarówno zmienne jak i literały mogą być przekazywane jako argumenty wywołania funkcji.

•

Jeśli jako argument funkcji została przekazana zmienna, to zmiana wartości argumentu wewnątrz funkcji nie powoduje zmiany wartości zmiennej użytej jako parametr jej wywołania.

•

Argumenty istnieją tylko w czasie wykonywania funkcji - jeśli kilka razy wywołujesz funkcje, to za każdym razem jej argumenty tworzone są od nowa, a wartości jakie były w nich zapisane w jednym wywołaniu funkcji nie są odtwarzane w czasie następnego jej wywołania.

Dla przykładu, jeśli wywołasz funkcję printName przy pomocy poniższego polecenia: printName("Jan")

;

to wartość argumentu name będzie wynosić" Jan". Jeśli wywołasz tę funkcję przekazując jej jako argument wartość zmiennej: var osoba = "Waldemar"; printName(osoba) ;

to wartość argumentu name wynosić będzie tym razem "Waldemar". Jeśli teraz wewnątrz funkcji, chciałbyś zmienić wartość argumentu name: name

=

"Pan(i)"

+ name

to zmieni się jedynie wartość tego argumentu wewnątrz funkcji osoba pozostanie niezmieniona.

wartość zmiennej

Przy przekazywaniu argumentów do funkcji przydać się mogą dwie właściwości: . arguments oraz nazwafunkcji . argument .length. Nazwafunkcj i. arguments jest tablicą, w której zapisane są argumenty funkcji, natomiast nazwafunkcji . argument .length jest zmienną całkowitą, określającą ilość przekazanych argumentów. nazwafunkcji

JvaScript

98

Zakres zmiennych Powyższe zagadnienia prowadzą do rozważań na temat zakresu zmiennych. zmiennych określa miejsca programu, w których dana zmienna istnieje.

Zakres

Na przykład, w podanym wcześniej przykładzie zmienna (a właściwie - argument) name istnieje jedynie wewnątrz funkcji printName () - nie można się do niego odwołać w innych miejscach programu. Zostaje ona stworzona w momencie wywołania funkcji, a przestaje istnieć gdy funkcja się kończy. Gdy funkcja ta wywołana jest powtórnie, zmienna name znowu jest tworzona. Poza tym każda zmienna zdefiniowana wewnątrz funkcji przy użyciu polecenia var także będzie istniała jedynie wewnątrz tej funkcji. Jeśli zmienna zostanie zdefiniowana poza funkcją, to będzie ona widoczna można się do niej odwoływać w każdym miejscu programu. Nowy termin

Zmienne definiowane wewnątrz funkcji zwane są zmiennymi zmienne definiowane poza funkcjami - zmiennymi globalnymi.

lokalnymi,

będzie

natomiast

Jeśli wewnątrz funkcji zdefiniujesz zmienną lokalną o takiej samej nazwie jak istniejąca już zmienna globalna, to wewnątrz tej funkcji ta nazwa zmiennej odnosić się będzie do zmiennej lokalnej, a nie do zmiennej globalnej. Jeśli wewnątrz funkcji zmienisz wartość tej zmiennej, to wartość zmiennej globalnej nie ulegnie zmianie.

Zwracanie wyników Zgodnie z wiadomościami podanymi w poprzedniej sekcji, funkcje mogą zwracać wartości. Wyniki pracy funkcji zwracane są przy pomocy instrukcji return. Instrukcja ta może zostać użyta do zwrócenia dowolnego, poprawnie sformułowanego wyrażenia, którego przetworzenie powoduje zwrócenie pojedynczej wartości. Na przykład, w przedstawionej poniżej funkcji szescian (), function szescian (liczba) { var szescian = liczba * liczba return szescian;

* liczba;

wyrażenie użyte w instrukcji return spowoduje zwrócenie wartości zmiennej szescian. Powyższa funkcja mogłaby zostać również zapisana w poniższej postaci: function szescian (liczba) ( return liczba * liczba * liczba;

Druga wersja funkcji szescian () będzie poprawna dlatego, że wyrażenie liczba liczba * liczba powoduje zwrócenie pojedynczej wartości.

*

Funkcje i obiekty - części składowe programów

99

Umieszczanie funkcji w nagłówku pliku HTML Jak już wspomniałem w rozdziale 3. Operowanie na danych i informacjach, istnieją ważkie powody, aby umieszczać funkcje w nagłówku pliku HTML - pomiędzy etykietami . Dzięki temu wszystkie funkcje zostaną zinterpretowane zanim będzie można je wykonać. Stanie się to szczególnie istotne gdy zaczniesz pracować z procedurami obsługi zdarzeń; kiedy to niepoprawne umiejscowienie kodu funkcji spowodować może wywołanie nieistniejącej procedury obsługi zdarzenia, o której Navigator nic nie wie. W takiej sytuacji na ekranie zostanie wyświetlony odpowiedni komunikat. Nowy termin

Termin interpretacja odnosi się do procesu, za pomocą którego JavaScript analizuje każdą linię kodu skryptu i transformuje ją do postaci kodów bajtowych (podobnie jak Java). Proces ten odbywa się zanim kod skryptu zostanie wykonany. To właśnie w czasie interpretacji zostają wychwycone i przedstawione programiście błędy składniowe oraz wszystkie inne usterki, które mogłyby spowodować wstrzymanie wykonywania skryptu.

Operator typeof JavaScript udostępnia jeszcze jeden operator, o którym nie wspomnieliśmy w poprzednim rozdziale podczas omawiania zagadnień związanych ze zmiennymi, wyrażeniami oraz operatorami. Operator typeof używany jest w JavaScripcie do identyfikowania typu podanego elementu skryptu. Podając w wywołaniu tego operatora dowolny nieprzetworzony operand (taki jak nazwa zmiennej lub funkcji), możemy otrzymać łańcuch znaków zawierający nazwę typu podanego operandu. Dla przykładu, załóżmy, że mamy poniższy skrypt: var question = "Ile var answer = la; var correct = false; function result(res) document.write(res)

wynosi

la

x la?";

)

W powyższym przykładzie typeof pytanie zwróci wartość string, typeof answer zwróci wartość number, typeof correct zwróci wartość boolean, a typeof resul t zwróci function. Pozostałe wartości, które mogą zostać zwrócone przez operator typeof to: object oraz undefined. Operator typeof może zostać użyty do sprawdzenia czy funkcja została zinterpretowana, i czy jest gotowa do wywołania. Jest on szczególnie użyteczny w przypadku operowania na stronach zawierających kilka ramek lub wyświetlanych w różnych ramkach, kiedy to skrypt umieszczony w jednej ramce próbuje wykonać funkcję umieszczoną w innej ramce. (Zagadnienia związane z ramkami przedstawione zostaną w rozdziale 8.)

JvaScript

100

Używanie funkcji Aby poznać działanie oraz użycie funkcji w praktyce, zmodyfikujesz teraz skrypt przedstawiony w poprzednim rozdziale w listingu 3.3. Modyfikacja polegać będzie na tym, że stworzysz funkcję, która jako argument otrzymywać będzie pytanie, następnie będzie to pytanie wyświetlać, sprawdzać poprawność odpowiedzi użytkownika i, w zależności od niej, będzie zwracać odpowiedni łańcuch znaków. Zmodyfikowany skrypt przedstawiony został na listingu 4.1. Zanim zaczniesz modyfikować skrypt, będziesz musiał poznać funkcję eva1, która oblicza numeryczną wartość łańcucha znaków przekazanego do funkcji jako argument. Na przykład polecenie: eva1 ("10*10");

powoduje zwrócenie liczbowej wartości 100.

Kod

Listing 4.1. Obliczanie wartości wyrażeń za pomocqfonkcji

Examp1e

evalQ

4.1

FROM OTHER

BROWSERS



Wyniki

Wykonanie powyższego skryptu daje wyniki przedstawione na Ilustracjach 4.2 oraz 4.3.

Ilustracja 4.2. Program prosi użytkownika o podanie informacji o pracowniku

Ilustracja 4.3. Zdefiniowana przez Ciebie metoda powoduje wyświetlenie odpowiednio sformatowanych danych

Dane pracownika: Joe Person

Numer prAcovn~ka! 123-456 Nwner legi!;yroacji 'Ubezplec%.e,n,iovej pracownika:. Roczne

Analiza

zarobki

prelcovn1ka:

123-45-:6789

12000

Najważniejszą modyfikacją wprowadzoną w powyższym skrypcie jest to, że do konstruktora obiektu (funkcji emploee ()) nie są przekazywane żadne argumenty. Zamiast tego, gdy tworzony jest nowy egzemplarz obiektu, użytkownik zostaje poproszony o podanie wszystkich koniecznych danych, które zapisane zostaną w odpowiednich właściwościach tworzonego obiektu.

Właściwości jako indeksy W programie Netscape Navigator 2.0 możliwe było odwoływanie się do właściwości obiektów na dwa dodatkowe sposoby, oprócz nazwaobiektu . nazwawlaści wości. Kontynuując przykład dotyczący obiektu student, odwołania do właściwości obiektu student2 można zapisać także w postaci: student2["name") student2 ["age" )

i tak dalej lub też za pomocą numerów, rozpoczynając od zera:

112

JvaScript student2[0] student2[1]

Nowy termin

"Asia"; 9;

Liczby oraz łańcuchy znaków użyte w powyższy sposób nazywane są indeksami. W Navigatorze 3.0 nie jest już możliwe równoczesne odwoływanie się do właściwości poprzez indeksy liczbowe i nazwy. Zamiast tego właściwości mogą być tworzone jako indeksy liczbowe albo jako nazwy, jednakże wszystkie dalsze odwołania do właściwości muszą konsekwentnie stosować tę samą metodę. Liczby oraz nazwy nie mogą już być stosowane zamiennie.

Tablice Każdy, kto miał już okazję programować w innych językach strukturalnych, zapewne z tablicami, a teraz zastanawia się jak tworzyć je w JavaScripcie.

zetknął się

Tablice są uporządkowanymi zbiorami wartości, do których można się odwoływać przy pomocy pojedynczej nazwy. Na przykład, jeśli dysponujesz tablicą o nazwie student, to możesz w niej zapisać następujące wartości: "Jan" 10 75

student[O] student[l] student[2]

Do elementów tablicy możesz odwoływać się poprzez podanie ich indeksów - liczb zapisanych w nawiasach klamrowych. W JavaScripcie pierwszy element tablicy zawsze posiada indeks zero. Tablice w języku JavaScript tworzone są za pomocą konstruktora Array (). Używając słowa kluczowego new możesz stworzyć tablice o niezdefiniowanej długości: arrayName

=

new Array();

Długość tablicy zmienia się dynamicznie, w zależności od przypisywania wartości kolejnym komórkom tablicy. Długość tablicy określona jest przez największą wartość użytego indeksu. Dla przykładu, podany poniżej kod: var sampleArray sampleArray[49]

=

new Array(); "50-ty element";

powoduje stworzenie tablicy o pięćdziesięciu elementach (pamiętaj, że indeksy rozpoczynają się od zera). Można także zdefiniować początkową długość tablicy podając jąjako łania konstruktora Array ():

argument wywo-

Funkcje i obiekty - części składowe programów var sampleArray

113

= new Array(lOO);

Co więcej, podczas tworzenia tablicy możesz równocześnie przypisać wartości wszystkim jej elementom. Można to zrobić, podając wartości wszystkich elementów tablicy jako argumenty wywołania jej konstruktora: var sampleArray

= new Array("element

l", 2, "element

3");

powoduje stworzenie tabeli o trzech komórkach i przypisanie im wartości: sampleArray[O] sampleArray[l] sampleArray[2]

"element 2; "element

l"; 3";

Tablice są obiektami, i jako takie posiadają kilka metod, w tym: •

•

join () - metoda ta zwraca wartości wszystkich komórek tablicy w postaci jednego łańcucha znaków. Metoda ta pobiera jeden argument - łańcuch znaków, który będzie używany do oddzielenia poszczególnych elementów tablicy w łańcuchu wynikowym. Jeśli nie zostanie podany żaden argument, to jako separator zostanie użyta kombinacja znaków przecinka i spacji. reverse () -

za pomocą tej metody można odwrócić kolejność

komórek

w tablicy. Celem przedstawienia sposobów używania tabel, zmodyfikujemy skrypt z listingu 4.3. W nowym przykładzie użytkownik nie będzie musiał wprowadzać informacji o nowym pracowniku w ściśle określonej. kolejności. Zamiast tego przedstawisz mu listę informacji jakie ma on wprowadzić; użytkownik następnie wybierze numer wprowadzanej informacji i poda ją; po podaniu wszystkich informacji użytkownik powinien wybrać wartość O. Po wprowadzeniu niezbędnych informacji, skrypt wyświetli je w oknie przeglądarki. Kod źródłowy zmodyfikowanego

Kod

skryptu przedstawiony został na listingu 4.4.

Listing 4.4. Tworzenie menu

Listing

4.4

employee(); FROM OTHER BROWSERS

-->



FROM OTHER BROWSERS

-->



Wyniki

Po wykonaniu skryptuotrzymamy rezultatyzbliżonedo przedstawionychna ilustracjach4.4,4.5 oraz4.6.

Analiza

Powyższy skryptjestprzykładem użyciakilkuzagadnieńprzedstawionychwe wcześniejszej częścirozdziału- w tym takżefunkcjirekurencyjnych. Dokładniejszegowyjaśnieniawymaga działanie funkcjigetIn fo ().

Funkcje i obiekty - części składowe programów

115

Ilustracja 4.4. Menu, z którego użytkownik dokonuje wyboru wprowadzanych informacji wyświetlane jest przy pomocy metody promptt)

Ilustracja 4.5. Podawanie informacji odbywa się w okienku dialogowym wyświetlonym za pomocą metody promptt)

Ilustracja 4.6. Ostateczne wyniki zostają wyświetlone w oknie przeglądarki

var menu="0-Koniec/l-Nazwisko/2-Numr q /4-Płaca";

/3-Nr

leg. ubezp

Zmienna menu zawiera łańcuch znaków przedstawiający możliwości wyboru. Zwróć uwagę na to, iż stworzenie menu, którego poszczególne opcje zostałyby wyświetlone w kilku wierszach, wymagałoby użycia znaków sterujących \n. var choice

= prompt(menu,

"O");

Powyższa linia powoduje wyświetlenie menu w okienku dialogowym, pobranie odpowiedzi użytkownika, i zapisanie jej w zmiennej choice.

116

JvaScript if if

(choice 1= null) { ((choice < O) II (choice >4)) alert ("Nieprawidlowa opcja"); this . getInfo () ; else { if (choice != "O") { this.data[choice-l]=prompt("Podaj this. getInfo () ;

dane","");

Powyższy blok kodu jest rruejscem w którym wykonywana jest większość pracy metody getInfo(). Pierwsza instrukcja if sprawdza, czy użytkownik kliknął na przycisku Cancel. Jeśli nie, to sprawdzany jest zakres odpowiedzi podanej przez użytkownika (powinien on być z zakresu od do 4). Jeśli wybór dokonany przez użytkownika nie jest poprawny, to wyświetlony zostaje specjalny komunikat, a funkcja getInfo () zostanie wywołana jeszcze raz. Jeśli odpowiedź użytkownika jest poprawna, to skrypt sprawdza, czy użytkownik wybrał wartość (zakończenie wprowadzania danych). Jeśli użytkownik nie wybrał opcji 0, to zostaje on poproszony o wprowadzenie danych. Następnie metoda getInfo () jest wywoływana powtórnie, w celu ponownego wyświetlenia menu.

°

°

Zwróciłeś zapewne uwagę na fakt użycia słowa kluczowego this w celu odwołania się do aktualnego obiektu oraz na zastosowanie konstrukcji this . da ta [choice-l] przy zapisywaniu danych do wybranego przez użytkownika elementu tablicy (właściwości). Wyrażenie choice-l użyte jest dlatego, że odpowiednie opcje w menu mają wartości od l do 4, podczas gdy indeksy tablicy rozpoczynają się od wartości 0, a kończą na wartości 3.

Funkcje jako obiekty W języku JavaScript funkcje mogą być także tworzone za pomocą słowa kluczowego new jako egzemplarze specjalnego obiektu Function: functionName

= new Function(

arglist,

functionDefinition

);

W powyższym przykładzie arglist jest listą nazw argumentów funkcji oddzielonych od siebie przecinkami; natomiast functionDefini tion jest kodem JavaScriptu, który wykonywany będzie za każdym razem, gdy funkcja zostanie wywołana. Każdy element zapisany na liście argumentów funkcji powinien być literałem łańcuchowym. Funkcje zdefiniowane przy użyciu obiektu Function, mogą być używane w ten sam sposób, jak funkcje definiowane za pomocą słowa kluczowego function, i mogą być używane bezpośrednio we wszelkiego typu wyrażeniach.

Funkcje i obiekty - części składowe programów Obiekt Function

117

posiada dwie właściwości:

•

arguments - jest to tablica odpowiadająca w kolejności ich definicji.

•

prototype

argumentom

funkcji, ułożonym

- jest to właściwość, za pomocą której jak się już dowiedziałeś w poprzedniej części rozdziału, można dodawać do obiektów nowe właściwości i metody.

Zgodnie z dokumentacją Netscape'a tworzenie funkcji za pomocą obiektu Function jest mniej efektywne niż tworzenie ich przy użyciu słowa kluczowego function.

Podsumowanie Funkcje pozwalają na tworzenie bloków kodu skryptu, które mogą być wykonywane wielokrotnie. Podobnie jak metody, będące częścią obiektów, również funkcje definiowane są za pomocą nazwy; co więcej, można do nich przekazywać argumenty oraz zwracać wyniki ich wykonania. Ważnym pojęciem, nierozerwalnie związanym z funkcjami, jest zakres zmiennych określa on czy zmienne istnieją lokalnie wewnątrz funkcji, czy globalnie w całym programie. Funkcje rekurencyjne to takie funkcje, które wywołują same siebie. Rekurencja jest narzędziem dającym duże możliwości, lecz musi ono być używane bardzo ostrożnie, aby nie doprowadzić do wystąpienia tak zwanej nieskończonej rekurencji. Zjawisko to polega na nieskończonym wywoływaniu funkcji przez samą siebie. W aktualnej implementacji języka JavaScript zjawisko to w rzeczywistości nie zajdzie, gdyż zbyt głęboka rekurencja spowoduje zakłócenie w pracy Netscape Navigatora. Funkcje są także używane do tworzenia obiektów definiowanych przez użytkownika. Za pomocą słowa kluczowego new można stworzyć wiele całkowicie niezależnych egzemplarzy tego samego obiektu. Tablice dają możliwość grupowania danych w ściśle określonym porządku. Dostęp do poszczególnych elementów (komórek) tablicy zapewniony jest dzięki indeksom, będących liczbami całkowitymi. W rozdziale 5 zaczniesz pracować ze zdarzeniami oraz procedurami obsługi zdarzeń, co pozwoli Ci na tworzenie programów prowadzących skomplikowaną wymianę informacji z użytkownikiem.

118

JvaScript

,

Cwiczenia 1. Napisz definicję obiektu o nazwie model, make, year oraz price.

car,

posiadającego

cztery właściwości:

2. Zakładając, że dysponujesz obiektem zdefiniowanym w poniższy sposób: function house(address, rooms, this.address = address; this.rooms rooms; this.owner = owner;

owner)

(

oraz że stworzyłeś dwa egzemplarza obiektu house: housel house2

= =

new house("ul. new house("ul.

Kosciuszki Wroclawska

9", 10, 22/98a",

"Jan"); 12, "Maria");

określ wartości poniższych wyrażeń: a. housel.rooms b. house2.owner c. housel["address"] 3. Napisz funkcję obliczającą wartość x do potęgi y. Na przykład funkcja o nazwie power, użyta w poniższy sposób: value

=

power(lO,

4);

powinna zwrócić wartość 10 do potęgi 4, czyli 10*10*10*10. Jeśli zapis x"y określa wartość x podniesioną do potęgi y, to warto zauważyć, = x * x"(y-l).

że xy

Przegląd poleceń oraz wiadomości dodatkowych Polecenia! Wiadomości dodatkowe

Rodzaj

Opis

function

Słowo kluczowe JavaScriptu

Deklaruje funkcję.

new

Słowo kluczowe JavaScriptu

Tworzy nowy egzemplarz obiektu.

Funkcje i obiekty - części składowe programów Polecenia! Wiadomości dodatkowe

Rodzaj

Opis

eval ()

Słowo kluczowe JavaScriptu

Oblicza numeryczną wartość wyrażenia zapisanego w formie łańcucha znaków.

this

Słowo kluczowe JavaScriptu

Odwołanie do aktualnego obiektu.

typeof

Operator JavaScriptu

Zwraca łańcuch znaków odpowiadający typowi operandu.

119

Odpowiedzi 1. Definicja obiektu powinna wyglądać w poniższy sposób: function car (model, make, this.model = model; this.make = make; this.year = year; this.price = price;

hear,

proce)

{

2. Poniżej podano wartości wyrażeń: a. 10 b. "Maria" c. "ul. Kosciuszki

9"

3. Funkcje power () można napisać jako funkcję rekurencyjną: function power(number, exponent) if (exponent > l) { return number * power(number, else { return 1;

{ exponent-l);

Funkcja ta działa na podobnych zasadach, jak przedstawiona w tym rozdziale funkcja factorial (). Rekurencyjne działanie tej funkcji opiera się na spostrzeżeniu, że x do potęgi y jest równe x razy x do potęgi y-l. Funkcja ta działa poprawnie, jednakże nie jest ona doskonała - będzie zwracać nieprawidłowe wyniki w momencie obliczania potęg o wykładnikach ujemnych. Wiadomo, że x do potęgi -y ma wartość 1podzielone przez x do potęgi y. Możesz napisać w pełni nową wersję funkcji c potrafiącą obliczać potęgo o ujemnych wykładnikach:

120

JvaScript function

power(number,

exponent)

//CHECK IF WE HAVE A NEGATIVE EXPONENT var negative = (exponent < O) ? true : false; //DECLARE var value

WORKING

VARIABLE

= O;

//CALCULATE number TO THE POWER OF exponent if (exponent > 1) ( value = number * power(number, exponent-1); else { value = 1; //IF THE EXPONENT WAS NEGATIVE if (negative) value = 1 / value; return

TAKE THE RECIPROCAL

value;

JavaScript zawiera metodę wykonującą tę samą czynność jaką wykonuje stworzona właśnie przez Ciebie metoda powe r - jest to metoda Ma th .pow (), będąca częścią obiektu Ma th. Obiekt ten oraz jego metody omówione są w rozdziale 10: String, Math oraz Lista Historyczna.

Kalendarz Oave'a Eisenberga

121

Przykład z WWW Kalendarz Dave'a Eisenberga Kalendarz Dave'a Eisenberga (znajdujący się pod adresem http://www.best.com/ -nessus/j s-today. h t.ml) jest doskonałym przykładem użycia wszystkich poznanych już do tej pory elementów JavaScriptu - wyrażeń, zmiennych, funkcji oraz obiektów. Program ten generuje dynamiczną stronę WWW, na której zostaje wypisane przywitanie zależne do godziny, o której strona została wyświetlona (jak na przykład: "Dobry wieczór"), aktualny czas, oraz kalendarz na aktualny miesiąc, w którym wyróżniona zostaje aktualna data. Dodatkowo, generowana strona zawiera rysunek dopasowany do aktualnego czasu. Przy osiągnięciu zamierzonego efektu, Dave posługuje się kilkoma technikami, których jeszcze nie poznaliśmy. Jego skrypt używa obiektów Date, oraz kilku innych metod (jak na przykład Math. floor) będących częściami obiektów Math oraz Date. Kod źródłowy skryptu przedstawiony jest na listingu WI.I.

Kod

Listing Wf.f. Kalendarz Dave 'a Eisenberga

Greetings

from Dave Eisenberg



contents

from old browsers

-->



Wyniki

Wykonanie powyższego skryptu, spowoduje tych, przedstawionych na ilustracji W!.!.

wyświetlenie

wyników

podobnych

do

Ilustracja W1.1. Podczas dnia. na tworzonej stronie wyswietlony zostaje jeden z obrazków zależnych od aktualnego czasu

Ilustracja W1.2. Dzięki użyciu obiektu Date program tworzy kalendarz na aktualny miesiąc

Analiza

Pierwszą rzecząjaka zapewne rzuci Ci się w oczy jest to, że skrypt nie jest umieszczony w nagłówku dokumentu HTML. Autor stosuje takie rozwiązanie ze względu na to, iż w skrypcie nie ma żadnych procedur obsługi zdarzeń, które mogłyby zostać wywołane przed zdefiniowaniem i zinterpretowaniem wywoływanych funkcji. Oprócz tego, kod źródłowy strony zostaje dynamicznie wygenerowany przez skrypt

Kalendarz Oave'a Eisenberga

125

Program kalendarza używa trzech funkcji. Wywołania ich występują po kolei i umieszczone są w głównym bloku skryptu: document.write(greeting()) ; document.write(""); document.write(calendar()); document.write(""); document.write(""); document.write("Back to Dave Eisenberg's resume");

Na samym początku skryptu umieszczone są dwie globalne deklaracje: today oraz hrs. Polecenie var today = new Date (); tworzy nowy egzemplarz systemowego obiektu Da te. Autor stosuje taką samą metodę, jakiej używałeś do tworzenia swoich własnych obiektów. Obiekt Da te daje programiście możliwość tworzenia obiektu zawierającego informacje dotyczące konkretnej daty, oraz udostępnia zbiór metod pozwalających na prace z tymi informacjami. W celu stworzenia nowego egzemplarza obiektu Date należy użyć polecenia varia= new Date (parameters), gdzie jako paremeters możesz podać dowolne z poniższych informacji:

ble

•

Nic -

w celu stworzenia obiektu zawierającego aktualną datę i czas

•

Łańcuch znaków o postaci "Miesiąc kundy" (na przykład "May 11,1996

•

Liczby całkowite określające Date(81,

•

dzień, rok 8:00:00")

godziny:minuty:

se-

aktualny rok, miesiąc oraz dzień (na przykład

12, 13))

Liczby całkowite określające aktualny rok, miesiąc, dzień, oraz aktualny czas (jak na przykład Date ( 96, 11, 28, O, O)) W języku JavaSkrypt nie jest możliwe tworzenie dat wcześniejszych nia 1970 roku. Data 1 Stycznia 1970, nazywana jest epoką.

niż 1 stycz-

Obiekt typu Date zawiera metody przedstawione w tabeli Wi.l.

Tabela W1.1. Metody obiektu Date Nazwa

Opis

getDate

Zwraca dzień miesiąca jako liczbę całkowitą z zakresu od i do 3i

getDay

Zwraca dzień tygodnia w postaci liczby całkowitej, gdzie zera określa Niedzielę, a jeden Poniedziałek

getHours

Zwraca godzinę jako liczbę całkowitą z zakresu od O do 23

126

JavaScript

Tabela W1.1. c.d. Metody obiektu Date Nazwa

Opis

getMinutes

Zwraca minutę jako liczbę całkowitą z zakresu od O do 59

getMonth

Zwraca miesiąc jako liczbę całkowitą z zakresu od O do II, gdzie O odnosi się do Stycznia, a 11 do Grudnia

getSeconds

Zwraca ilość sekund jako liczbę całkowitą z zakresu do O do 59

getTime

Zwraca ilość milisekund, które upłynęły począwszy od godziny 00:00:00 dnia l Stycznia 1970 roku

getTimezoneOffset

Zwraca różnicę czasu pomiędzy czasem lokalnym i czasem Greanwich, różnica ta wyrażona jest w minutach

qe t Ye a r

Zwraca rok w postaci dwucyfrowej liczby całkowitej

parse

Zwraca ilość milisekund jakie upłynęły od godziny 00:00:00 d~ l Stycznia 1970 a datą podanąjako łańcuch znaków w wywołaniu funkcji

setDa te

Ustawia dzień miesiąca na podstawie argumentu będącego liczbą całkowitą z zakresu od l do 3 l

setHours

Ustawia godzinę na podstawie liczby całkowitej z zakresu od O do 23

setMinutes

Ustawia minuty na podstawie liczby całkowitej z zakresu od O do 59

setMonth

Ustawia miesiąc na podstawie liczby całkowitej z zakresu od O do 11

setSeconds

Ustawia sekundy na podstawie liczby całkowitej z zakresu od O do 59

setTime

Ustawia datę oraz godzinę na podstawie argumentu określającego ilość milisekund jakie upłynęły od godziny 00:00:00 dania l Stycznia 1970 roku

s e t.Ye a r

Ustawia rok na podstawie cztero-cyfrowej całkowitej większej od 1900

toString

Zwraca aktualną datę w postaci łańcucha znaków

toGMTString

Zwraca aktualną datę i czas w postaci łańcucha znaków zapisanego w konwencji GMT (na przykład: "Mon, 10 Dec 1996 17:49:09")

toLoca1eString

Zwraca aktualną datę i godzinę jako łańcuch znaków zapisanych w formie "MM/DD/RR GG:MM:SS"

liczby

Kalendarz Dave'a Eisenberga

127

Tabela W1.1. c.d. Metody obiektu Date Nazwa

Opis

UTC

Zwraca ilość milisekund jakie upłynęły od godziny 00:00:00 dnia 1 Stycznia 1970 roku do daty podanej jako argument o postaci łańcucha znaków, w którym poszczególne elementy daty i czasu zostały oddzielone przecinkami

Na podstawie przedstawionych powyżej informacji możesz się zorientować, że polecenie var hrs = today. getHours (),powoduje zapisanie w zmiennej hrs godziny, o której użytkownik załadował stronę. Pierwsza funkcja skryptu - greetings () - wyświetla odpowiedni obrazek, wiadomość powitalną, oraz aktualny czas: function

greeting()

(

var today= new Date(); var hrs = today.getHours(); document.writeln("") ; if «hrs >=6) && (hrs

var var var var 31,

monthNames .= "JanFebMarAprMayJunJuIAugSepOctNovDec"; today = new Date(); . thisDay; monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 30, 31, 30, 31);

year = today.getYear() + 1900; thisDay = today.getDate();

II do the classie if c:>

==

leap year calculation ( (year % 4 == O) && (year % 100 != O))

II

(year % 400

O))

monthDays[ll

=

29;

II figure out how many days this month nDays = monthDays[today.setMonth() l;

will have ...

II and go back to the first day of the month ... firstDay = today; firstDay.setDate(l);

Kalendarz Oave'a Eisenberga II and figure out which day of the week startDay = firstDay.getDay();

129 it hits ...

document.writeln(""); document.write("

") ; document.write("") ; column = O; for (i=O; i



W powyższym przykładzie możesz także użyć funkcji, co poprawi jego przejrzystość:

Example

5.1

Zdarzenia w JavaScripcie

139

FROM OTHER

BROWSERS

-->





Wędrówka po stronach WWW za pomocą metody window.open() W poniższym przykładzie wykorzystamy skomplikowanego zadania. Twoim celem - co oznacza, że gdy użytkownik będzie darki pojawi się komunikat "Proszę chwilę później zostanie wyświetlona W przedstawionym przykładzie program stron.

procedurę obsługi onLoad do nieco bardziej będzie stworzenie strony generowanej losowo chciał wyświetlić stronę, to w oknie przeglączekać... Wybieranie st rony"; a w przypadkowo wybrana strona WWW. losowo wyświetla jedną z pięciu podanych

Aby stworzyć tak działający skrypt, będziesz musiał użyć metody window. open (). Wymaga ona podania dwóch argumentów: window. open ("URL",

"na zwa

okna")

Wszelkie szczegóły działania tej metody znaleźć można w rozdziale 8, gdzie podany zostanie także trzeci argument jaki można podać w jej wywołaniu. W prezentowanym przykładzie musisz zagwarantować, aby okno w jakim zostanie wyświetlona wylosowana strona, było tym samym oknem, w którym pojawił się komunikat. Ze względu na to, iż nie wiesz ile okien będzie otwartych w chwili gdy użytkownik wyświetli Twoją stronę, komunikat jak i wylosowana strona WWW wyświetlone zostaną (za pomocą metody window. open ())w nowym oknie.

140 Kod

JavaScript Listing 5.2. Wyświetlanie losowej strony

Example

5.2

FROM OTHER

BROWSERS

-->

"selectPage(choices)

;">





Prosze podac wyra zenie matematyczne zapisane q JavaScript:


Wyniki:

w jezyku

VALUE=""



Wyniki

Wykonanie skryptu powoduje wyświetlenie wyników przedstawionych

na ilustracji 5.2.

Analiza

W tym skrypcie użyto kilku technik, którym warto się bliżej przyjrzeć. W formularzu HTML umieszczone zostały dwa pola, każde z nich posiada jedną procedurę obsługi zdarzenia. Pole tekstowe służące-do wprowadzania danych posiada procedurę onFocus, wywołującą funkcję getExprsion (). Funkcja ta służy do pobierania wyrażenia matematycznego, którego wartość będzie obliczana w kalkulatorze.

Zdarzenia w JavaScripcie

145

Ilustracja 5.2. Po podaniu wyrażenia matematycznego. jego wartość zostaje obliczona i wyświetlona

Zwróć uwagę na to, iżjako argument tej funkcji przekazane jest wyrażenie this. form. This odnosi się do obiektu aktualnego pola formularza, z kolei this . form odnosi się do obiektu formularza zawierającego to pole. Procedura obsługi onFocus (), umieszczona w drugim polu formularza, wywołuje metodę this . blur () , która to powoduje natychmiastowe usunięcie miejsca wprowadzania z aktualnego pola. Dzięki temu, użytkownik nie jest w stanie zmodyfikować zawartość drugiego pola formularza. Pamiętaj, że w niektórych systemach operacyjnych, kursor cały czas pozostanie w tym polu; jednakże użytkownik nie będzie miał możliwości wprowadzenie w nim żadnych danych. Funkcja getExpression () pobiera jeden argument - obiekt formularza. Pierwszą rzeczą, jaką funkcja ta wykonuje, jest usunięcie miejsca wprowadzania z pierwszego pola formularza. Jest to konieczne, aby nie wpaść w nieskończoną pętlę wywołań okienka dialogowego, w którym podawane będzie wyrażenie do obliczenia. Jeśli byś tego nie zrobił, to po zamknięciu okienka dialogowego ponownie zostałoby wygenerowane zdarzenie focus, co z kolei spowodowałoby ponowne wywołanie funkcji getExpression () - w ten sposób powstałaby pętla nieskończona. Po usunięciu miejsca wprowadzania z pierwszego pola formularza, użytkownik zostaje poproszony o podanie wyrażenia matematycznego; po czym zostaje ono wyświetlone w pierwszym polu formularza. Kolejnym krokiem jest wywołanie funkcji calcula te () i przekazanie obiektu form jako parametru jej wywołania. Funkcja calculate () oblicza wartość podanego wyrażenia matematycznego cą funkcji eval (), a następnie wyświetlają w drugim polu formularza.

za pomo-

W kodzie obu funkcji możesz zauważyć, że do pól formularzy można odwoływać się jako do właściwości obiektu form: nazwaObiektuFormularza.nazwaPola

146

JavaScript Jak widzisz, możesz bezpośrednio zmienić wartość pola, przypisując wartość jego właściwości value (pamiętaj, że chociaż pola są właściwościami obiektu formularz, to jednak same również są obiektami posiadającymi własne właściwości i metody): nazwaObiektuFormularza.nazwaPola.value

Warto zauważyć, że przy pomocy JavaScriptu można tworzyć formularze, które w rzeczywistości nie wysyłają żadnych danych do serwera. Na przykład za pomocą JavaScriptu można na stronie WWW stworzyć prosty kalkulator służący do przeliczania kursów walut; można do tego celu użyć formularza. Wszelkie obliczenia oraz czynności związane z pobieraniem i wyświetlaniem danych wykonywane są przez skrypt, tak więc żadne dane z formularza nie muszą być wysyłane do serwera. Aby w taki sposób używać formularzy, możemy pominąć wszystkie parametry etykiety FORM; wystarczy jednak pominąć parametr ACTION.

Podsumowanie W rozdziale tym zrobiłeś duży krok w kierunku zdobycia umiejętności tworzenia interaktywnych stron WWW przy użyciu JavaScriptu,. Dowiedziałeś się o zdarzeniach i procedurach obsługi zdarzeń. Procedury obsługi zdarzeń pozwalają na podanie sposobu reakcji programu na czynności wykonywane przez użytkownika lub zdarzenia generowane przez przeglądarkę. W skryptach można także emulować kilka podstawowych zdarzeń, jak na przykład submit - służą do tego odpowiednie metody (w przypadku zdarzenia submi t będzie to metoda submi t ()). Dowiedziałeś się także w jaki sposób, za pomocą procedur obsługi onLoad oraz onUnload, można reagować na wyświetlenie strony w przeglądarce użytkownika oraz na wyświetlenie w niej nowego URL. Rozpocząłeś także pracę ze zdarzeniami w aspekcie obsługi formularzy oraz przyjrzałeś się procedurom obsługi onFocus, onBlur oraz onChange.

W następnym rozdziale przyjrzymy się bardziej dokładnie obiektowi form, i będziemy dalej pracować nad użyciem zdarzeń i procedur obsługi zdarzeń w formularzach.

,

Cwiczenia l. Wskaż prawidłowe przykłady użycia procedur obsługi zdarzeń: a.

onFocus="zróbCoś();">

Zda.rzenia w JavaScripcie c.

e.

f.

onSubmit="zróbCoś

();">

Etykieta ta tworzy przycisk o nazwie nazwa. Parametr VALUEokreśla tekst, jaki zostanie wyświetlony na przycisku w oknie przeglądarki. Element ten posiada dwie właściwości: name oraz value; trom podawanym w etykiecie INPUT (NAMEoraz VALUE).

obie odpowiadają parame-

Element ten posiada także jedną procedurę obsługi zdarzeń, o nazwie: Z procedurą tą związana jest metoda onClick () .

onClick.

Elementy tego typu pozwalają programistom na tworzenie skryptów, które będą wykonywane po kliknięciu na dodatkowych przyciskach umieszczonych na formularzu. Aby zilustrować zastosowanie przycisków, zmienimy skrypt przedstawiony na listingu 5.3. w ten sposób, aby podane wyrażenie obliczane było w momencie kliknięcia na przycisku. Zmodyfikowany skrypt przedstawiony został na listingu 6.1. Kod

Listing 6.1. Przetwarzanie danych formularza przy użyciu elementu button

button

Example



Podaj wyra zenie matematyczne zapisane w jezyku q


JavaScript:

162

JavaScript Oto wartosc


3

Tworzenie interaktywnych formularzy

171

możesz zmienić tekst wyświetlany w drugim elemencie listy, przy pomocy polecenia: example.options[l].text

=

"dwa".

Co więcej, przy pomocy konstruktora Option () można dodawać do listy nowe elementy: nazwaNowejOpcji = new Option( opcjaText, opcjaValue, ~ domyślnieWybrana, wybrana); nazwaListy.options[indeks] = nazwaNowejOpcji

Powyższe polecenia powodują stworzenie nowego obiektu option, którego atrybutom zostaną przypisane wartości podane w konstruktorze. Następnie obiekt ten zapisywany jest do komórki tablicy określonej przy pomocy indeksu. Opcję można usunąć z listy, przypisując odpowiedniej komórce tablicy wartość null: nazwaListy.options[indeks]

=

null;

Element submit Przycisk Submit pełni na formularzach specjalną funkcję - umożliwia on przesłanie informacji podanych we wszystkich polach formularza pod adres URL podany jako parametr ACTION etykiety FORM.Informacje przesyłane są metodą określoną za pomocą parametru METHODetykiety FORM. W odróżnieniu od innych dostępnych typów przycisków - button oraz reset element submit może posiadać unikalną nazwę oraz wartość; są one przechowywane we właściwościach name oraz value. Oprócz tego dostępna jest metoda click () oraz procedura obsługi zdarzeń - cne l i ck: .

Pole tekstowe - element text Pola tekstowe są najczęściej spotykanymi polami używanymi w formularzach HTML. Elementy tego typu pozwalają na wprowadzanie łańcucha znaków. Są one nieco podobne do elementu password, lecz różnią się od nich tym, iż wprowadzane znaki wyświetlane są w normalny sposób, a nie jak to było w przypadku elementów password - w postaci gwiazdek. Obiekty te posiadają trzy właściwości: defaul tValue, name oraz value. Dostępne są także trzy metody emulowania zdarzeń: focus (l, blur (li select (l (ostatnia z nich powoduje zaznaczenie tekstu wpisanego w polu). Udostępniają one także cztery procedury obsługi zdarzeń: onBlur, onFocus, onChange oraz onSelect (generowaną w chwili, gdy użytkownik zaznaczy tekst podany w polu). Właściwości oraz metody obiektów typu text,

przedstawione zostały w tabeli 6.5.

172

JavłScript

Tabela 6.5. Właściwości oraz metody obiektu text Właściwość lub metoda

Opis

defaultValue

Określa domyślną wartość, elementu podaną w etykiecie INPUT (właściwość).

name

Określa nazwę elementu podaną w etykiecie INPUT (właściwość).

value

Określa aktualną wartość elementu (właściwość).

focus

()

blur

()

select

Emuluje ustawienie miejsca wprowadzania na polu tekstowym (metoda). Emuluje usunięcie miejsca wprowadzania z pola tekstowego (metoda).

()

Emuluje zaznaczenie tekstu w polu (metoda).

Powinieneś wiedzieć, że wartość pola tekstowego można zmienić przypisując nową wartość właściwości value. W poniższym skrypcie informacja ta została wykorzystana do kopiowania łańcucha znaków podanego w jednym polu, do pola drugiego. Możliwość dostępu do informacji zapisanych w polach tekstowych oraz dynamicznego ich modyfikowania, jest jedną z mocnych stron JavaScript. Przykład zastosowania tych możliwości pokazano na Iistingu 6.5.

Kod

Listing 6.5. Dynamiczne modyfikowanie pól lexl

text

Example







7 II

8 II

9 II

+ II











Tworzenie interaktywnych formularzy

197

Author: Ashley. Cheng «A HREF="mailto:[email protected]"> ~ [email protected]) ( form.my_comment.value="You consul t your physician I" ;

are grossly

obese,

)

q

else if (yourbmi >30 && yourbmi 27 && yourbmi 22 && yourbmi =21 && yourbmi =18 && yourbmi =16 && yourbmi ;">

218

JavaScript isNum

return

Analiza

false;

isNum;

Sposób użycia pętli for W powyższym przykładzie jest bardzo prosty. Na samym początku funkcji przyjmujesz, że podana informacja jest liczbą (var isNum = true;). Następnie sprawdzasz czy wartość przekazana jako argument funkcji nie jest pustym łańcuchem znaków lub wartością null. Kolejnym krokiem jest sprawdzenie za pomocą pętli for czy poszczególne znaki podane w polu są cyframi. Jeśli którykolwiek z nich nie spełnia tego warunku, to zmiennej isNum przypisywana jest wartość false. Po zakończeniu pętli wartość zmiennej inNum zwracana jest jako rezultat działania funkcji. Do sprawdzenia czy podany znak jest cyfrą, używana jest złożona instrukcja warunkowa if. W instrukcji tej, za pomocą operatorów "&&", zadajemy pytanie czy badany znak jest jedną z cyfr od O do 9, znakiem lub kropką Jeśli badany znak nie spełnia tych kryteriów, wnioskujemy, że podana w polu informacja nie jest liczbą. II -

II

II • ".

Innym sposobem sprawdzenia czy znak jest cyfrą jest użycie wyrażenia warunkowego (toCheck.substring(j,j+l) >= "0" && toCheck.substring(j,j+l) = "0")

JavaScript

222 Ilustracja 7.3. Pętla while pozwala Ci na zadawanie tego samego pytania, aż do momentu otrzymania prawidłowej odpowiedzi

Analiza

W powyższym przykładzie używasz pętli kilka razy. W funkcji checkFormNum () używasz pętli do wykonywania trzech pierwszych polach formularza: for (field = O; field

TYPE=text SIZE=3 NAME="12" onFocus="if (this.value 1= ") {blur();}" onChange="play(this.form,this) ;">

TYPE=text SIZE=3 NAME="13" onFocus="if (this.value != ") {blur();}" onChange="play(this.form,this) ;">

Kolo

Pole:
Srednica:


399

400

JavaScript Obwod:



VALUE=O

"); document.write (monthNames.substring(today.getMonth () * 3, q (today.getMonth() + l) * 3)); document.write(". "); document.write(year); document.write("
Sun	Mon	Tue	Wed	Thu q	Fri	Sat"); II now write the blanks at the beginning document.write("
			;"> Wyniki Rezultaty działania skryptu przedstawione zostały na ilustracji 6.4. Ilustracja 6.4. Wszystkie pola formularza zostają w odpowiedniej kolejności zapisane w tablicy elements{} Analiza Zwróć uwagę, iż w powyższym skrypcie do poszczególnych pól formularza odwołujesz się przy pomocy liczb. Ponieważ pierwsza komórka tablicy elements [l posiada indeks zero, dlatego też pierwszym polem formularza jest pole służące do podawania liczby; komórki tablicy elements [l, odpowiadające polom tablicy wielokrotności, posiadają indeksy od jeden do dziesięć W funkcji calculate (),jako licznik komórek w tabeli elements [l, zostaje użyta zmienna num; jej początkowa wartość wynosi jeden. Do obliczenia wartości poszczególnych pól tablicy wielokrotności zostaje użyte dziesięciokrotnie to samo wyrażenie: 182 JavaScript form.elements[num) .value = numer * num++; Instrukcja ta powoduje przypisanie aktualnemu elementowi iloczynu wartości zmiennych number oraz num; a następnie inkrementuje wartość zmiennej num. Powyższa instrukcja jest doskonałym przykładem na to, w jaki sposób można zwrócić wartość zmiennej, a następnie zwiększyć ją o jeden. Zazwyczaj jednak nie napisałbyś zastosowałbyś w niej pętlę for: funkcji calculate ()w przedstawiony sposób - function calculate{form) { var number=form.number.value; for (num = l; num Tworzenie interaktywnych formularzy 183 Oczywiście, oprócz odwoływania się do formularzy jako do elementów tablicy forms [],możesz odwoływać się do nich za pomocą nazw. Nazwy formularzy określa się za pomocą parametru NAME podawanego w etykiecie FORM: formularza możesz się odwoływać na dwa sposoby: stosując document.forms["nazwa"] lub document.name. Pobieranie informacji za pomocą pól tekstowych Teraz użyjesz wszystkich informacji poznanych w tym rozdziale do stworzenia interaktywnego formularza odrębnego typu. Na formularzach służących do wprowadzania danych umieszczane są zazwyczaj pól, a zaraz za nimi same pola. W formularzu, który za chwilę stworzysz, nazwy znaczy opisy określające ich przeznaczenie) podane zostanąjako ich początkowe ści. Stworzony formularz będzie wyglądał podobnie do tego przedstawionego stracji 6.5. nazwy pól (to wartona ilu- Ilustracja 6.5. Stworzenie opisów jako domyślnych Wartości pól, pozwala na zbudowanie zupełnie inaczej wyglądającego formularza Kiedy użytkownik kliknie na polu, jego zawartość zostanie wyczyszczona, a on sam będzie mógł wprowadzić informacje. Jeśli użytkownik uaktywni nowe pole nie podając w poprzednim polu żadnej wartości, to w polu tym pojawi się jego wartość domyślna. Jednocześnie, jeśli użytkownik kliknie na polu, w którym już uprzednio podał jakąś wartość, to wartość ta nie zostanie usunięta. JavaScript 184 Formularze działające na przedstawionych powyżej zasadach, mogą być tworzone za pomocą kilku prostych funkcji; zostały one przedstawione na listingu 6.9. Kod Listing 6.9. Formularz służący do wprowadzania danych Listing 6.9 FROM OTHER BROWSERS --> E-mail" telefonu" Tworzenie interaktywnych formularzy Wyniki 185 Powyższy skrypt powoduje stworzenie formularza zawierającego trzy pola tekstowe; wygląd formularza przedstawiony został na ilustracji 6.6. Po kliknięciu na dowolnym polu, jego wartość zostaje wyczyszczona; pokazano to na ilustracji 6.7. Ilustracja 6.6. Formularz, w którym opisy pól umieszczone zostały jako ich domyślne wartości Ilustracja 6.7. Gdy zajdzie taka potrzeba, zawartosć pola jest usuwana za pomocąfunkcji clearliieldt) Analiza Najistotniejszym elementem powyższego skryptu, jest użycie właściwości defaultValue; dzięki niej cały problem może zostać rozwiązany za pomocą dwóch prostych funkcji. 186 JavaScript Kiedy użytkownik uaktywnia pole, wywoływana jest funkcja clearField () . Funkcja ta porównuje aktualną zawartość pola z jego wartością domyślną i na tej podstawie określa czy pole powinno zostać wyczyszczone, czy też nie. Gdy miejsce wprowadzania zostaje usunięte z aktualnego pola, wywoływana jest funkcja checkField () . Jeśli pole jest puste, to wpisana w nim zostaje domyślna wartość. Podsumowanie W rozdziale tym zdobyłeś kolejne informacje, dzięki którym możesz wzbogacać interakcję z użytkownikiem na tworzonych przez siebie stronach WWW. Dzięki wykorzystaniu formularzy oraz procedur obsługi zdarzeń, możesz teraz tworzyć skrypty pozwalające na prowadzenie skomplikowanej wymiany danych z użytkownikiem. Na przykład możesz tworzyć proste arkusze kalkulacyjne, kalkulatory, możesz także sprawdzać poprawność danych wprowadzonych w formularzu przed ich wysłaniem na serwer. Procedury obsługi zdarzeń definiowane są za pomocą odpowiednich etykiet HTML, a ich wartościami są bloki kodu JavaScriptu zapisane zazwyczaj w formie funkcji. Aby wzbogacić poznane do tej pory możliwości przetwarzania danych w skryptach, w następnym rozdziale przedstawimy pętle, dzięki którym dysponować będziesz większymi możliwościami sterowania przebiegiem wykonywania skryptu. Pytania i odpowiedzi Czy mogę dynamicznie zmieniać tekst wyświetlany na przycisku kład poprzez modyfikowanie właściwości value? lub liście, na przy- Tak i nie. Poszczególne opcje listy mogą być dynamicznie zmieniane poprzez przypisywanie nowych wartości właściwościom text. Jednakże w Netscape Navigatorze 2.0, kiedy przyciski zostaną już raz wyświetlone, to ich wygląd jest stały i nie może zostać zmieniony. W Navigatorze 3.0 napisy wyświetlane na przyciskach mogą być zmieniane poprzez modyfikowanie właściwości value obiektów button. Czy istnieje procedura obsługi zdarzeń, na przykład onChange, wywoływana każdym razem gdy użytkownik wprowadza znak w polu tekstowym? za Tworzenie interaktywnych formularzy 187 Nie, procedura obsługi onChange wywoływana jest tylko wtedy, gdy miejsce wprowadzania zostaje usunięte z pola. W obecnej chwili nie ma żadnej możliwości przechwytywania i reagowania na pojedyncze naciśnięcia klawiszy. Możliwość taka przewidziana została w przyszłych wersjach Navigatora. Ćwiczenia 1. Które z poniższych etykiet HTML są poprawne? a. onUnload=" TYPE=text onChange=" idź() ;"> onChange=" idź() ;"> idź ();"> onClik=" 2. Zmodyfikuj skrypt przedstawiony on następujące nowe możliwości: idź() ;"> w listingu 6.7 (kalkulator), tak aby zawierał • Przycisk przełączający znak liczby. • Przycisk kropki dziesiętnej, dzięki któremu użytkownik będzie mógł wprowadzać liczby zmiennoprzecinkowe. • Sprawdzaj poprawność wprowadzanych danych w momencie żądania wykonania operacji - w szczególności zwróć uwagę na to czy użytkownik nie zażądał wykonania dzielenia przez zero oraz czy wprowadzona liczba nie zawiera dwóch kropek dziesiętnych. (Jeśli użytkownik zażąda wykonania dzielenia przez zero, wyświetl odpowiedni komunikat i nie wykonuj działania; jeśli natomiast użytkownik podał dwie kropki dziesiętne, to zignoruj drugą kropkę.) 3. Do skryptu przedstawionego na listingu 6.9 dodaj opcjonalną możliwość sprawdzania czy podana wartość mieści się w określonym zakresie. Jeśli wartość nie mieści się w zakresie - ostrzeż o tym użytkownika. 188 JavaScript Przegląd poleceń oraz wiadomości dodatkowych Polecenia! Wiadomości dodatkowe Rodzaj Opis b l u r () Metoda JavaScriptu Emuluje usunięcie miejsca wprowadzania z danego elementu formularza. form.action Właściwość JavaScriptu Łańcuch znaków zawierający wartość parametru ACTION podawanego w etykiecie FORM. form.elements Właściwość JavaScriptu Tablica zawierająca komórki odpowiadające wszystkim elementom umieszczonym na formularzu (takim jak: pola tekstowe, pola wyboru, listy). form.encoding Właściwość JavaScriptu Łańcuch znaków określający sposób kodowania MIME, używany przy przesyłaniu informacji podanych w formularzu do serwera. form.name Właściwość JavaScriptu Łańcuch znaków zawierający wartość parametru NAME etykiety FORM. form.target Właściwość JavaScriptu Łańcuch znaków określający okno, w którym wyświetlone zostaną wyniki przesłania informacji z formularza do serwera. form. submi t () Metoda JavaScriptu Emuluje przesłanie informacji podanych w formularzu do serwera. type Właściwość JavaScriptu Łańcuch znaków określający typ elementu formularza. onSubmit Procedura obsługi zdarzeń Procedura obsługi zdarzeń wywoływana w chwili wysyłania formularza. Tworzenie interaktywnych formularzy Polecenia! Wiadomości dodatkowe but ton Rodzaj Parametr HTML 189 Opis Parametr określający typ elementów umieszczanych na formularzach HTML, powoduje stworzenie przycisku «INPUT TYPE=but ton». checkbox Parametr HTML Parametr określający typ elementów umieszczanych na formularzach HTML, powoduje stworzenie pola wyboru «INPUT password Parametr HTML Parametr określający typ elementów umieszczanych na formularzach HTML, powoduje stworzenie pola hasła «INPUT radio Parametr HTML Parametr HTML TYPE=password». Parametr określający typ elementów umieszczanych na formularzach HTML, powoduje stworzenie pola typu radio «INPUT Reset TYPE=checkbox». TYPE=radio». Parametr określający typ elementów umieszczanych na formularzach HTML, powoduje stworzenie przycisku Reset «INPUT TYPE=checkbox». SELECT Etykieta HTML Etykieta służąca do definiowania list. OPTION Etykieta HTML Etykieta służąca do definiowania poszczególnych opcji wyświetlanych na listach. submit Parametr HTML Parametr określający typ elementów umieszczanych na formularzach HTML, powoduje stworzenie przycisku Submit «INPUT text Parametr HTML TYPE.=checkbox». Parametr określający typ elementów umieszczanych na formularzach HTML, powoduje stworzenie pola tekstowego «INPUT TYPE=text». 190 JavaScript Polecenia! Wiadomości dodatkowe TEXTAREA Rodzaj Etykieta HTML Opis Etykieta służąca do definiowania pól tekstowych o określonej ilości wierszy «TEXTAREA>domyślny ~ tekst
Pętle	11) ? index - 9 : index+18))) ( win = true; II RETURN THE RESULTS return win; Sposób działania funkcji win () wymaga dokładniejszego omówienia. Zadaniem tej funkcji jest przeanalizowanie wierszy, kolumn oraz przekątnych planszy określonych za pomocą parametru index, i stwierdzenie czy nie ma w nich trzech pionków - co byłoby równoznaczne z końcem partii. Na przykład: aby sprawdzić wiersz, w którym znajduje się pole o podanym indeksie, musisz porównać komórkę tablicy board [index) z komórką znajdującą się po jej lewej oraz prawej stronie. Mogłoby się wydawać, że można w tym celu użyć poniższego wyrażenia: if ((board[index) q board[index-10))) == board[index+10)) && (board[index) == JavaScript 232 Problem polega jednak na tym, że gdyby jako indeks przekazano trzecie pole planszy, to w pierwszym wyrażeniu starałbyś się sprawdzić wartość czwartego - nie istniejącego pola. Podobnie, gdyby jako indeks przekazano pierwsze pole wiersza, to z kolei drugi warunek starałby się sprawdzić wartość nieistniejącego pola. Problem ten da się jednak dosyć łatwo rozwiązać za pomocą wyrażenia warunkowego. Naprzykład board[ (index < 30) ? index+lO ; index-20] powodujezwrócenie komórki board [31] jeśli index wynosi 21 oraz pola board [12] jeśli index wynosi 32. Wyjaśnienia wymaga także sprawdzanie przekątnych. Zaczynasz je od sprawdzenia czy index reprezentuje pole znajdujące się na przekątnej zaczynającej się w lewym górnym rogu, a kończącej w prawym dolnym rogu. Jeśli tak, to sprawdzasz tę przekątną. Przy okazji, jeśli inedx reprezentuje centralne pole planszy, to sprawdzasz także drugą przekątną - zaczynającą się w prawym górnym rogu, a kończącą w lewym dolnym. Ostatnim krokiem jest sprawdzenie czy index nie reprezentuje lewego dolnego lub prawego górnego pola, a jeśli tak, to sprawdzasz drugą przekątną. Kolejna funkcja śnienia. function play () - również jest skomplikowana play (form, field) i wymaga dłuższego wyja- { var index = eval(field.name); var playIndex = O; var winIndex = O; var done = false; field.value = playerSymbol; board[index] = playerSymbol; Funkcja ta zaczyna się od deklaracji zmiennych oraz od przypisania odpowiedniego symbolu komórce tablicy board oraz polu formularza. Robisz to w taki sposób, że użytkownik może wpisać dowolny symbol w komórce, w której chce umieścić swój pionek. Następnie sprawdzasz czy ruch wykonany przez użytkownika nie był ruchem wygrywającym - w tym celu używasz funkcji win () : IICHECK FOR PLAYER WIN if (win (index) ) { II PLAYER WON alert ("Dobra gra' Wygraies!") clearBoard(form) ; else { ; Jeśli użytkownik nie wygrał, to starasz się znaleźć najkorzystniejszy ruch jaki może wykonać komputer. Pierwszą czynnością jest sprawdzenie czy komputer nie ma możliwości wygrania. Aby to sprawdzić korzystasz z dwóch zagnieżdżonych pętli for. Pętle 233 Pętle te pozwalają na przeanalizowanie każdego pola planszy. Jeśli aktualnie analizowane pole jest puste (czyli że w polu tym nie ma żadnego pionka), to umieszczasz w nim pion komputera, a następnie sprawdzasz, czy dostawienie tego pionka nie spowodowało wygrania partii. Jeśli był to ruch wygrywający, to odpowiednio modyfikujesz wartości zmiennych i kończysz wykonywanie pętli za pomocą instrukcji break. Jednakże instrukcja ta powoduje zakończenie tylko .majgłębszej", najbardziej "wewnętrznej" pętli; dlatego też będziesz musiał osobno zakończyć także pętlę zewnętrzną. Użyjesz do tego instrukcji warunkowej oraz kolejnej instrukcji break. Na samym końcu wykonywania wewnętrznej pętli for zapisujesz pusty łańcuch znaków w polu, które aktualnie analizowałeś - robisz tak, gdyż ustawienie piona w polu nie powoduje wygranej, więc pole to nie jest dla Ciebie interesujące. // PLAYER LOST, CHECK FOR WINNING POSITION for (row = 1; row Sposób nazywania elementów można rozwinąć jesze bardziej - mógłbyś nadać nazwy formularzom. Na przykład, jeślibyś nazwał formularze: outputForm oraz inputForm, to pliki input. html oraz output. html wyglądałyby w następujący sposób: NAME="input"> 256 JavaScript Ilustracja 8.5. Przy użyciu zagnieżdżonych etykiet FRAMESET, można tworzyć skomplikowane układy ramek Jeśli oba formularze będą wciąż umieszczone w plikach input. html oraz output. html (pozostałe pliki logo. html i about. html - nie są istotne), to nie będziesz mógł używać funkcji update () w jej oryginalnej postaci. Jest to spowodowane tym, że wyrażenie parent. frame [l] będzie się tym razem odnosić do ramki zawierającej logo. html - obiektem parent dla ramki input jest pierwsza zagnieżdżona etykieta FRAMESET. Zgodnie z definicją, chcesz się odwołać do ramki zawierającej plik output. html, która znajduje się w drugiej zagnieżdżonej etykiecie FRAMESET. Aby odwołać się do tego dokumentu, musisz odwołać się do najwyżej w hierarchii etykiety FRAMESET, a następnie "zejść dwie ramki w dół": parent.parent.frame[l] .frame[l] Przy zastosowaniu nazw ramek,wyrażenie to przybrałoby następującą postać: parent.parent.frame[l] .output Oprócz możliwości odwoływania się do zmiennych i obiektów umieszczonych w innych ramkach, tę samą technikę można wykorzystać do wywoływania funkcji. Na przykład, do pliku outpu t.html, mógłbyś dodać funkcję, która obsługiwałaby wyświetlanie rezultatów obliczeń w odpowiednim polu. Dysponując taką funkcją, mógłbyś wywołać ją z pliku input. html i wyświetlić wyniki,· przekazując jako argument, wartość zmiennej output: hldaho Frameset Billa Dortcha Oczywiste jest, że każdy program, który musi operować na skomplikowanej strukturze ramek wymieniających między sobą informacje, szybko stanie się bardzo skomplikowanym i nieczytelnym. Niewątpliwie, wcześniej czy później pojawią się w nim odwołania podobne do tych przedstawionych poniżej: parent.parent.frameA.frameB.frameC.forml.fieldA.value lub parent.parent.frameD.frameE.functionA() JavaScript 258 Aby uprościć operowanie na zagnieżdżonych ramkach, Bill Dortch stworzył zbiór funkcji o nazwie hIdaho Frameset. Jest to zbiór funkcji ułatwiających operowanie na funkcjach zapisanych w skomplikowanej strukturze ramek. hIdaho Farmeset jest dostępny dla wszystkich osób, które chcą z niego skorzystać; można go znaleźć pod adresem: http://www.hidaho.eorn/frarneset/ Dzięki funkcjom wchodzącym w skład hIdaho Frameset możliwe jest zarejestrowanie funkcji w specjalnej tabeli, a następnie korzystanie z nich bez konieczności opanowania wiedzy, gdzie funkcje te zostały zdefiniowane oraz bez podawania długiej i niewygodnej sekwencji obiektów koniecznych do uzyskania dostępu do nich. Co więcej, ramki oraz zbiory ramek mogą być przesuwane pomiędzy dokumentami, a zmiany te nie będą miały wpływu na sposób odwoływania się do funkcji zdefiniowanych w tych dokumentach. hldaho Frameset dostarcza także narzędzi, dzięki którym można zapewnić, że nie zostanie podjęta próba wykonania funkcji przed jej załadowaniem do pamięci i zinterpretowaniem. Jest to szczególnie istotne podczas odświeżania ramek i okien, kiedy to dokumenty są ponownie przetwarzane. Poniższy kod źródłowy umieszczony jest także na dyskietce dołączonej do książki: FROM OTHER BROWSERS ; --> Tutaj wpisz odpowiedz: Ilosc poprawnych odpowiedzi: Plik level. htm (przedstawiony na listingu 8.6) definiuje trzy przyciski, dające użytkownikowi możliwość wyboru stopnia trudności testu. Plik ten definiuje zawartość dolnego wiersza układu ramek. Kod Listing 8.6. Przyciski służące do wyboru stopnia trudności testu FROM OTHER BROWSERS --> Ostatni używany plik - title .h tm (przedstawiony wyglądu górnego wiersza układu ramek. Kod na listingu 8.8) - zawiera opis Listing 8.8. Ramka tytułowa Wyniki Wykonanie skryptu powoduje wyświetlenie następującej strony: Ilustracja 8.7. Dzięki językowi JavaScript możesz dynamicznie testować różne kombinacje kolorów To jest test 281 282 Analiza JavaScript Jak możesz zobaczyć, naj istotniejszą częścią tej aplikacji jest plik pick. htm, w którym wykonywane są wszystkie czynności związane z wymianą danych z użytkownikiem oraz modyfikacją kolorów. Plik ten posiada dwa główne elementy: funkcję JavaScriptu oraz główną część dokumentu, która jest w całości, dynamicznie tworzona przez kolejny fragment skryptu. Interfejs użytkownika składa się z pięciu pól tekstowych, w których podawane będą kolory poszczególnych elementów strony oraz z przycisku, którego kliknięcie powoduje wywołanie funkcji display (). function display(form) { doc = open("","output"); doc.document.write (' Tworzenie procedury obsługującej pasek statusu W przedstawionym poniżej przykładzie stworzysz prostą funkcję, dzięki której będziesz mógł wyświetlać komunikaty na pasku statusu. Funkcja ta, będzie mogła być wywołana z dowolnej procedury obsługi zdarzeń, i będzie powodować wyświetlenie podanego komunikatu na pasku statusu. function help(message) { self.status = message; return true; Dzięki tej funkcji możesz stworzyć pełny system pomocy na swoich stronach. Na przykład, możesz jej użyć w teście, który został przedstawiony na listingach 8.3 do 8.8. Stworzenie systemu pomocy w teście, wymaga jedynie kilku niewielkich modyfikacji w plikach form. htm oraz level. htm; nowe wersje tych plików zostały przedstawione na listingach 8.12 i 8.13. 290 Kod JavaScript Listing 8.12. Nowa wersja testu matematycznego na stronie ulubionego koloru i ulubionych dan. Cookies - sposób na zapamiętanie odwiedzonych miejsc 361 Sposób działania tego skryptu jest dosyć prosty. Pokazuje on sposób na odtworzenie cookies po wygaśnięciu ich daty ważności lub przedłużenie tej daty, jeśli jest to konieczne. Sposób działania funkcji createArray() oraz listArray() powinien być oczywisty. Funkcja listArray () zwraca łańcuch znaków zawierający wszystkie elementy tablicy ułożone w kolejności ich indeksów. Jest ona używana do zapytania użytkownika o jego ulubione danie. Funkcja initialize () jest miejscem, w którym wykonywane są główne czynności skryptu. Funkcja ta sprawdza czy istnieje cookie o nazwie color. Jeśli cookie nie istnieje, użytkownik zostaje poproszony o podanie swojego ulubionego koloru oraz dania; dane te zostają zapisane w odpowiednich cookies oraz w zmiennych globalnych color oraz favFood. Jeśli cookies istnieją, to pobrane z nich informacje zapisane zostają do zmiennych color oraz favFood, a następnie cookies zostają zaktualizowane - ich daty ważności są przedłużane o kolejne 30 dni. W głównej części dokumentu zostaje użyty skrypt, który na podstawie zmiennych color i favFood modyfikuje wartości parametru SRC etykiety IMG oraz parametru BGCOLOR etykiety BODY. Terminarz James'a Thiele 363 Przykład z WWW Terminarz James'a Thiele James Thiele stworzył prosty terminarz będący przykładem wykorzystania w JavaScripcie. Terminarz można znaleźć na WWW pod adresem: http://www.eskimo.com/-jet/javascript/calendar cookies js.html Nie jest to pełna aplikacja, jednakże strona ta jest doskonałym przykładem tego, w jaki sposób cookies mogą rozszerzyć możliwości skryptów, 'i dać możliwość przechowywania informacji pomiędzy sesjami. Program ten (patrz listing W4.1) wyświetla kalendarz na aktualny miesiąc; podobnie jak robi to kalendarz Dave'a Eisenberga. Gdy użytkownik kliknie na dowolny dniu w kalendarzu, to może on wprowadzić nową informację, lub zobaczyć informację dotyczącą tego dania, zapisaną wcześniej. Kiedy użytkownik ponownie wyświetli stronę, lub powróci do me] pózmej samym miesiącu, dni zawierające informacje wyświetlane są innymi kolorami. Kod w tym Listing W4.1 Kod źródłowy terminarza James 'a Thiele James Thiele's Calendar reminders 24 Jan 96 Wyniki Wyniki działania skryptu przedstawione zostały na ilustracjach W4.1 oraz W4.2. Analiza Pierwsza rzeczą jaką warto zauważyć jest to, iż Thiele używa wczesnej wersji pakietu funkcji Billa Dotch'a służących do obsługi cookies. Funkcje te zostały napisane zanim JavaScript udostępnił funkcje escape () oraz unsecape (), przez co Dotch został zmuszony do napisania swoich własnych funkcji do kodowania i dekodowania; są to funkcje encode () ideeode () .Niezależnie od tego, nowsze wersje pakietu funkcji Bill'a Dortha są kompatybilne z wersjami wcześniejszymi, i mogą je zastąpić bez konieczności jakichkolwiek modyfikacji skryptu. W swoim programie Thiele wykorzystał pięć funkcji: intro (), InMonth () , days InMonth (), ealendar () , oraz dayCliek () . arrayOfDays- Co więcej, znaczna część dokumentu HTML budowana jest za pomocą skryptu: --> 370 Java~cript Ilustracja W4.1. Gdy użytkownik kliknie datę po raz pierwszy, to zostaje wyświetlone okienko dialogowe, w którym może podać dowolną informację Ilustracja W4.2. Przy powtórnym wyświetleniu tej strony, dni zawierające jakieś informacje zostaną wyświetlone w innych kolorach Powyższy skrypt jest bardzo prosty: wywołuje on funkcję calendar () w celu wyświetlenia kalendarza, rysuje poziomą linię, a następnie wywołuje funkcję intro () , która wyświetla resztę dokumentu. Funkcja intro() Ta funkcja nie wymaga szerszego wyjaśnienia. Jest to zbiór wywołań poleceń document. wri te (), które wyświetlają informacje dotyczące aplikacji. Funkcja arrayOfDayslnMonth() Funkcja ta tworzy dwunastoelementową tablicę zawierającą ilość dni każdego z miesięcy. Wymaga ona podania wartości logicznej, jako argumentu wywołania. Dzięki niemu funkcja może określić prawidłową ilość dni w Lutym. Terminarz James'a Thiele 371 Funkcja dayslnMonth() Funkcja ta wymaga podania dwóch argumentów - miesiąca oraz roku - i używa ich do określeniaczy aktualny rok jestprzestępny.Następnie tworzy ona tablicęzawierającą ilośćdni każdego z miesięcy aktualnego roku, po czym zwraca ilośćdni we wskazanym miesiącu. Funkcja calendar() W tejfunkcjiwykonywane var var var var var monthNames today day month year są najbardziejskomplikowane operacje. "JanFebMarAprMayJunJulAugSepOctNovDec"; new Date (); today.getDate() ; today.getMonth() ; today.getYear() + 1900; II figure out how many days this month will var numDays = dayslnMonth(month, year); have ... II and go back to the first day of the month ... var firstDay = today; firstDay.setDate(l); II and figure out which day of the week var startDay = firstDay.getDay(); var column it hits ... = O; Jak można było oczekiwać, funkcja rozpoczyna działanie od ustawienia wartości zmiennych. Między innymi jestto łańcuch znaków zawierający nazwy miesięcy - podobne rozwiązanie widzieliśmy już w przypadku kalendarza Bill'aDortch'a. Zmienna firstDay będąca obiektem typu Date, używana jest do określeniaktórym dniem tygodnia był pierwszy dzień danego miesiąca; wynik obliczeń zapisywany jest w zmiennej startDay. ~ II Start the ca1endar table document.write(""); document.write(" "); document.write("") ; for (i=l; i < startDay; i++) { document.write(" "); document.write(monthNames.substring(3*month, 3* (month + 1)) + " " + year); document.write(" Sun Mon Tue Wed Thu ~ Fri Sat"); II put blank table entries for days ~ beginning of the month document.write(" "); column++; of week before 372 JavaScript Po skonstruowaniu nagłówka tablicy, w której umieszczony zostanie kalendarz na aktualny miesiąc, zostaje użyta pętla for, która umieszcza wolne komórki tabeli odpowiadające dniom poprzedniego miesiąca, należącym do tygodnia, w którym rozpoczyna się aktualny miesiąc. for (i=l; i Wyniki Wykonanie skryptu powoduje wyświetlenie strony przedstawionej na ilustracji 10.1. Analiza W powyższym skrypcie wyświetlasz łańcuchy znaków stworzone za pomocą różnych metod obiektu string. Przykłady prezentowane przez skrypt połączone są w pary. Pierwsze polecenie każdej pary wyświetla wynik wywołania jednej z metod obiektu string, umieszczony pomiędzy etykietami XMP. Etykiety te powodują, że umieszczony pomiędzy nimi kod HTML nie jest interpretowany przy wyświetlaniu - jest on wyświetlany jako zwykły tekst. Drugie polecenie wyświetla wyniki wywołania tej samej metody obiektu string, jednakże nie umieszcza ich pomiędzy etykietami XMP, dzięki czemu są one interpretowane jako kod HTML. Metoda substringO Z metodą substring () spotkałeś się już kilka razy w poprzednich rozdziałach. Pierwszy raz zobaczyłeś ją w skrypcie w ćwiczeniu 6.3, gdzie została ona użyta do kontroli poprawności danych w formularzu. 380 JavaScript Ilustracja 10.1. "'" Nebcape . [HTML melhod exemple] i!!I(iJ lE3 MetodyHTLM obiektu string powodują zwrócenie nowego łańcucha znaków, zawierającego odpowiednie etykiety HTML czołem Metoda ta pobiera dwa argumenty będące liczbami całkowitymi, a w wyniku działania zwraca łańcuch znaków, którego początek określany jest za pomocą pierwszego argumentu, a koniec za pomocą argumentu drugiego. Jeśli wartość pierwszego argumentu będzie większa od wartości argumentu drugiego, to początek wynikowego łańcucha znaków zostanie określony na podstawie wartości drugiego argumentu, a koniec na podstawie argumentu pierwszego. Gdyby wartości obu argumentów były sobie równe, to metoda zwróci pusty łańcuch znaków. Na przykład, jeśli w zmiennej typu string o nazwie sample zostanie zapisany łańcuch znaków "Hello", to polecenie sample. substring (O, 3) zwróci łańcuch znaków "Hel", podobnie jak polecenie sample. substring (3, O), natomiast polecenie sample.substring(2,4) zwróci łańcuch znaków "11". Metody określające wielkość liter Obiekt string posiada dwie metody, które mogą zostać użyte do określania wielkości liter łańcucha znaków. Metoda toLowerCase () powoduje zwrócenie nowego łańcucha znaków, w którym wszystkie litery zapisane będą jako litery małe. Podobnie metoda toUpperCase () tworzy nowy łańcuch znaków, jednakże wchodzące w jego skład litery zapisane będąjako wielkie. Na przykład, jeśli w zmiennej sample zostanie zapisany łańcuch znaków "tEsT", to wynik działania metody sample. toLowerCase () wynosić będzie "test", natomiast wynik działania metody sample. toUpperCase () "TEST". String, Math oraz Lista Historyczna 381 Stosując obie te metody w połączeniu z metodą substring () możesz osiągnąć bardzo interesujące wyniki. Na przykład, jeśli chciałbyś zapisać pierwszy znak łańcucha wielką literą, a całą resztę literami małymi, to mógłbyś się w tym celu posłużyć następującymi poleceniami: var sample = "tEsT"; var newSample = sample.substring(O,l) ~ sample.substring(l,sample.length) .toUpperCase() .toLowerCase(); + Pozostałe metody Obiekt string ma jeszcze metody: indexOf (), lastIndexOf () oraz cha rAt (). Z pierwszą z tych metod spotkałeś się już w rozdziale 9. Metoda ta, na podstawie dwóch argumentów - łańcucha znaków i indeksu - przeszukuje obiekt string i odnajduje w nim pierwsze wystąpienie łańcucha znaków podanego jako argument wywołania. Indeks odnalezionego łańcucha zostaje zwrócony jako wynik działania metody. Zasadę działania tej metody najłatwiej zrozumieć na przykładzie: Jeśli w zmiennej sample zostanie zapisany łańcuch znaków "Cześć! Witaj cie w Netscape Navigatorze ł Powodzenia! ", to wynik sample. indexOf ("Wit" , 3) wynosić będzie 9, a wynik sample. las t IndexOf (" ! " , "ample .length- 3) wynosić będzie 38. W pierwszym przypadku metoda rozpoczyna poszukiwanie od znaku o indeksie 3 (jest to . litera "ś ,,); następnie sprawdza, czy od tego znaku może rozpoczynać się poszukiwany łańcuch znaków, jeśli nie, to przechodzi do kolejnego znaku (o indeksie 4). Metoda postępuje w ten sposób aż do znaku o indeksie 9, gdzie odnaleziony zostaje poszukiwany łańcuch znaków. Drugi podany przykład jest podobny, z tą różnicą, że metoda lastIndexOf () poszukuje podanego łańcucha znaków poruszając się w przeciwnym kierunku - od końca ku początkowi. W naszym przypadku rozpoczyna ona poszukiwania od trzeciego znaku przed końcem łańcucha (będzie to litera" i ,,)i poszukuje znaku "!" poruszając się ku początkowi łańcucha znaków. Metoda cha rAt () jest dokładnym przeciwieństwem dwóch poprzednich metod. Na podstawie indeksu przekazanego jako jej argument, zwraca ona znak o podanym indeksie. Metoda ta bardzo dobrze nadaje się do pobierania pojedynczej litery z łańcucha; jest ona łatwiejsze w użyciu od metody substring () . Kontynuując ostatni przykład, wywołanie metody sample. charAt (3) spowoduje zwrócenie litery "ś", podobnie jak sample. substring (3, 4). Za pomocą tych metod możesz stworzyć narzędzia pozwalające użytkownikowi na modyfikowanie kodu HTML i oglądanie jego postaci. Używając dwóch ramek stworzysz aplikację, która pozwoli użytkownikowi wprowadzić w lewej ramce tekst i wybrać 382 JavaScript określone parametry HTML. Podany tekst, wraz z zaznaczonymi parametrami, zostanie wyświetlony w prawej ramce; oprócz tego zostanie także wyświetlony kod HTML odpowiadający wyświetlonemu napisowi. Pliki zawierające kod źródłowy programu zostały zaprezentowane na listingach 10.2, 10.3 oraz 10.4. Kod Listing 10.2. Główny układ ramek Listing lO.2 Kod Listing 10.3. Główny skrypt (html[orm.html) BGCOLOR="aquamarine"> Testowanie atrybutow tekstu. Pros ze podac dowolny tekst, wybrac atrybuty, 9 okreslic wielkosc tekstu (do l do 7) . Strona zostanie automatycznie odswiezona. kolory oraz Enter Text Here COLS=35 WRAP=SOFT Duzy Migoczacy Pogrubiony Czcionka o stalej szero~osci Italik Maly Przekreslony Indeks dolny Indeks 9gorny Kolor: Wielkosc (l to 7): --> ; 384 Kod JavaScript Listing 10.4. Pusty dokument HTML początkowo wyświetlany w ramce (sample.html) Wyniki Wyniki wykonania skryptu przedstawione zostały na ilustracji 10.2. Ilustracja 10.2. Użycie metod obiektu string w celu dynamicznego wyświetlenia różnych kombinacji parametrów HTML osze podac dowolny tekst. Wybrac . my. kolory, oraz okreslic wielkosc (do l do 7). Strona zostanie automatycznie odswiezona. wprowadz t:ekst:. Dw:y . J;l ;Migocucy Mi Pogrubiony Ii!lCzcionka o stalej szerokości Italik y~9!~~ Analiza Program ten demonstruje działanie metod obiektu string poznanych w poprzednich rozdziałach. oraz kilku metod i technik Główny skrypt umieszczony został w pliku htmlform. html przedstawionym na listingu 10.3. W rzeczywistości program ma tylko jedno zadanie - wyświetlić informacje na podstawie danych wprowadzonych przez użytkownika w formularzu. Do wykonania tego zadania będzie nam potrzebna tylko jedna funkcja - display () . function display(form) { var format = form.toDisplay.value; var doc = parent.output; W pierwszej kolejności funkcja określa wartość zmiennej globalnej format. Zmienna ta używana jest do przechowywania tekstu oraz etykiet HTML, które mają zostać prze- String, Math oraz Lista Historyczna 385 testowane. Na początku w tej zmiennej zostaje umieszczona zawartość pola TEXTAREA, w którym użytkownik podaje dowolny tekst. Definiujesz także zmienną doc, w której zapisany zostaje obiekt typu window określony za pomoca wyrażenia parent. output. Obiekt ten odpowiada prawej ramce, w której wyświetlane będą wyniki działania skryptu. W ten sposób możesz używać zmiennej doc zamiast wyrażenia parent. outptit polecenie doc.document.write () odpowiada poleceniu parent.output.document.write - (). format (form. big. checked) ? format .big () : format; format (form.blink. checked) ? format .blink () : format; format (form.bold.checked)? format.bold() : format; format (form. fixed. checked) ? format. fixed () : format; format (form.italics.checked)? format.italics() : format; format (form.small.checked)? format.small () : format; format (form. strike. checked) ? format. strike () : format; format (form.sup.checked)? format.sup() format; format (form.sub.checked)? format.sub() : format; format (form.color.value == "") ? q format. fontcolor ("black") :q format.fontcolor(form.color.value) ; format = (form.size.value == ''''l ? format.fontsize(3) q format.fontsize(form.size.value); Powyższy fragment kodu może, na pierwszy rzut oka, wydawać się dosyć skomplikowany; w rzeczywistości jednak jest on całkiem prosty. Zaczynasz do sprawdzenia, czy któreś z pól wyboru zostało zaznaczone. Ze względu na to, że właściwość checked obiektu checkbox posiada wartość logiczną, możesz jej użyć jako warunku w operatorze warunkowym, który wywołuje odpowiednią metodę obiektu string, a wyniki zapisuje w zmiennej format. Następnie stosujesz metody fontcolor () oraz fontsize (), aby określić kolor oraz wielkość czcionki zgodnie z informacjami podanymi przez użytkownika. Jeśli któreś z pól jest puste, to używasz wartości domyślnych. var result result += result += result += result += = "Kod HTML: "; format; " wyglada w nastepujacy sposob: " format; ""; doc.document.open("text/html"); doc.document.write(result) doc.document.close() ; ; Ostatnią czynnością wykonywaną przez skrypt jest wyświetlenie wyników. W zmiennej result przechowywany jest łańcuch znaków definiujący całą zawartość prawej ramki. Za pomocą polecenia doc. document. open otwierasz strumień wyjściowy w prawej ramce i deklarujesz, że zawierać on będzie dokument HTML. Następnie zapisujesz wyniki i zamykasz strumień poleceniem doc. documen t . close () . JavaScript 386 Enter Text Here Duzy Migoczacy Pogrubiony Czcionka o stalej szerokosci Italik Maly Przekreslony Indeks dolny Indeks gorny Kolor: Wielkosc (1 to 7): Powyższy formularzjestbardzo prosty.W chwili,gdy zmieni sięzawartość któregokolwiek z pól tekstowych,wykonywana jestfunkcjadisplay () - nie ma więc konieczności stosowaniajakichkolwiekprzycisków. Tworząc formularzebez przyciskówmusisz pamiętać o tym, że w aktualnejwersji Netscape Navigatora,procedura obsługionChange zostaniewykonana po usunięciumiejscawprowadzania z polatekstowego. ; --> Główna część dokumentu HTML zostajezakończona skryptem, który powoduje wykonanie funkcjidi sp la y ().Dzięki temu wyświetlana jestprzykładowa zawartość prawej ramki. Funkcja tamogłaby zostaćwywołana takżew procedurze obsługionLoad. String, Math oraz Lista Historyczna 387 Tworzenie narzędzi wyszukiwania i zamiany Każdemu z użytkowników systemu UNIX brakować będzie narzędzi do przeszukiwania i porównywania tekstów, takich jak Perl, Awk lub sed. Chociaż JavaScript udostępnia metody indexOf (),lastIndexOf (),cha rAt () oraz substring (),pozwalające na pracę z łańcuchami znaków, to nie daje on jednak żadnych naprawdę potężnych narzędzi do wyszukiwania i zastępowania łańcuchów znaków. W tym przykładzie rozszerzysz podstawowe możliwości języka JavaScript tworząc proste funkcje do wyszukiwania i zastępowania łańcuchów znaków - search () oraz replace (). Funkcja search () powinna przeszukiwać łańcuchy znaków zwracając uwagę na wielkość liter lub też nie biorąc jej pod uwagę; powinna także umieć wyszukiwać całe słowa lub tylko ich części. Funkcja replace () powinna mieć podobne możliwości. Funkcja search () powinna zwracać wartość true lub false, a funkcja - nowy, zmodyfikowany łańcuch znaków. replace () Kod źródłowy funkcji przedstawiony został na Iistingu 10.5. Kod Listing 10.5. Wyszukiwanie oraz zastępowanie łańcuchów znaków w JavaScripcie --> Aby zademonstrować sposób użycia tych funkcji, stworzysz teraz aplikację, która wykorzysta obie funkcje. Kod źródłowy tej aplikacji przedstawiony został na listingu 10.6. Kod Listing 10.6. Sposób użycia funkcji searchQ i replaceQ Listing lO.6 --> Search --> Przeszukiwany ~ tekst Szukaj: Uwzgledniac wielkosc ~ liter Szukac calych wyrazow Replace Przeszukiwany ~ tekst Tekst ~ zamieniony Szukaj: Zamien: Uwzgledniaj wielkosc ~ liter Szukaj calych wyrazow Wyniki Wyniki wykonania skryptu przedstawione zostały na ilustracji 10.3. Ilustracja 10.3. Funkcje search oraz replace mogą zostać użyte w dowolnej aplikacji stworzonej w JavaScripcie String, Math oraz Lista Historyczna Analiza 393 W powyższej aplikacji użyte zostały funkcje: search (), replace ()oraz space (). Funkcje search () i replace () działają w podobny sposób, jednak różnią się czynnościami, jakie zostają wykonane w momencie odnalezienia poszukiwanego tekstu. Funkcja replace{) Funkcja replace () pobiera pięć argumentów: łańcuch znaków, na którym będzie operować, łańcuch znaków, którego będzie szukać, łańcuch znaków, który zostanie użyty do zamiany oraz dwie wartości logiczne. Pierwsza wartość logiczna określa czy funkcja powinna zwracać uwagę na wielkość liter, natomiast druga - czy zamieniane będą całe słowa, czy dowolne łańcuchy znaków. var work = target; var ind = O; var next = O; Zgodnie z tym czego można było się spodziewać, funkcja zaczyna się od określenia wartości używanych zmiennych. if (! caseSens) ( oldTerm = oldTerm.toLowerCase(); work = target.toLowerCase(); Następnie sprawdzasz czy należy zwracać uwagę na wielkość liter. Jeśli nie, to modyfikujesz poszukiwany łańcuch znaków, a także łańcuch znaków w którym będzie się odbywać wyszukiwanie, zapisując je małymi literami - robisz to za pomocą metody toLowerCase ().Dzięki temu jakiekolwiek różnice w wielkości liter w obu łańcuchach znaków zostają usunięte. q while ((ind = work.indexOf(oldTerm,next)) if (wordOnly) { var before = ind - l; var after = ind + oldTerm.length; if (! (space(work.charAt(before)) && space (work.charAt (after)))) { next = ind + oldTerm.length; continue; >= O) { W zasadzie cała praca funkcji wykonywana jest w przedstawionej powyżej pętli while. W warunku tej pętli przeglądasz łańcuch znaków, szukując w nim kolejnego wystąpienia podanego wyrażenia; jeśli zostanie ono odnalezione to zapisujesz jego indeks w zmiennej ind, po czym sprawdzasz czy jest on większy od zera. Jeśli wyrażenie zostało odnalezione, wówczas sprawdzasz, czy poszukujesz całych wyrazów czy też dowolnych łańcuchów znaków. Jeśli szukasz całych słów, to wywołujesz funkcję space (), aby sprawdzić czy odnaleziony łańcuch znaków jest wyrazem - 394 JavaScript sprawdzasz to badając znaki, pomiędzy którymi został on umieszczony. Jeśli nie jest to wyraz, to modyfikujesz wartość zmiennej next, przypisując jej indeks pierwszej litery za odnalezionym łańcuchem znaków, po czym ponownie rozpoczynasz pętlę. target = target.substring(O,ind} + newTerm + ~ target.substring(ind+o1dTerm.1ength,target.1ength}~ work = work.substring(O,ind} + newTerm + ~ work.substring(ind+o1dTerm.1ength,work.1ength}; next = ind + newTerm.1ength; if (next >= work.1ength) { break; I Kiedy dojdziesz do tego miejsca pętli, oznaczać to będzie, że odnalazłeś łańcuch znaków, którego szukałeś. Teraz używasz metody substring (I w celu zmodyfikowania samego łańcucha znaków oraz zapisania w zmiennej next indeksu znaku za dodanym łańcuchem. W końcu sprawdzasz czy dotarłeś już do końca przeszukiwanego łańcucha znaków. Jeśli nie, to ponownie rozpoczynasz pętlę, poszukując kolejnego wystąpienia zastępowanego łańcucha znaków. Funkcja searchO Budowa i działanie tej funkcji przypominają w znacznym stopniu funkcję replace Główna różnica pomiędzy obiema tymi funkcjami leży w pętli while: whi1e ((ind = target.indexOf(term,nextl) if (wordOn1yl { var before = ind - l; var after = ind + term.1ength; if (! (space(target.charAt(before}) ~ space (target.charAt (after) l)} { next = ind + term.1ength; continue; I return return (I . >= Ol { && true; fa1se; W funkcji tej, podobnie jak w poprzednim wypadku, szukasz podanego wyrażenia za pomocą metody indexOf (I, której wywołanie umieszczone jest w warunku pętli whi1e. Rozpoczynasz od sprawdzenia czy należy szukać całych wyrazów, czy też dowolnych łańcuchów znaków. Jeśli szukasz całych wyrazów, to sprawdzasz znaki pomiędzy którymi umieszczony został odnaleziony łańcuch. Jeśli nie znalazłeś słowa, to przygotowujesz się do dalszego przeszukiwania i rozpoczynasz kolejny przebieg pętli za pomocą instrukcji continue. Przejście poza instrukcje warunkowe i f oznaczać to będzie, że odnalazłeś poszukiwane wyrażenie - zatem kończysz funkcję i zwracasz wartość true. Jeśli zakończysz pętlę String, Math oraz Lista Historyczna 395 i nie zwrócisz wartości true, to oznaczać to będzie, że niczego nie znalazłeś skończysz więc funkcję zwracając wartość false. while Funkcja spaceO Funkcja space () pełni pomocniczą rolę i wykorzystywana jest w funkcjach search () oraz rep lace () . Funkcja ta określa, czy znak przekazany jako argument jej wywołania należy do grupy znaków używanych do oddzielania wyrazów lub będących znakami przestankowymi. Jeśli tak, to funkcja zwraca wartość logiczną true, w przeciwnym razie zwrócona zostanie wartość false. Sposób działania funkcji jest bardzo prosty. Wszystkie znaki przestankowe jak znaki używane do oddzielania wyrazów, zapisane zostają w zmiennej space. mocą pętli for wszystkie znaki tej zmiennej zostają porównane z argumentem Jeśli w łańcuchu znajdzie się znak identyczny z podanym, to zwrócona zostanie również Za pofunkcji. wartość true. Za pętlą umieszczone zostają instrukcje porównujące argument funkcji z pustym łańcuchem znaków oraz z wartością null. Jeśli któryś z warunków zostanie spełniony, to zwrócona będzie wartość true. .. Jeśli żaden z powyższych warunków nie będzie spełniony, oznaczać że argument funkcji nie może zostać użyty do oddzielania wyrazów działania funkcji zwrócona zostanie wartość false. to będzie, w wyniku Jeśli w programie zajdzie potrzeba zmiany definicji znaków mogących oddzielać wyrazy, jedyną rzeczą, jaką należy wykonać, jest zmodyfikowanie wartości zmiennej space. Obiekt Math Obiekt Math dostarcza metod oraz właściwości, dzięki którym będziesz mógł wykonywać znacznie bardziej skomplikowane obliczenia matematyczne od tych, na które pozwalają Ci poznane do tej pory operatory matematyczne. Obiekt ten dostarcza między innymi kilku specjalnych wartości, takich jak liczba TI lub wartości kilku najczęściej stosowanych logarytmów i pierwiastków. Oprócz tego jego metody pozwalają na obliczanie dowolnych funkcji trygonometrycznych, logarytmów, potęg oraz zaokrągleń. Wszystkie właściwości oraz metody udostępniane przez obiekt Math przedstawione zostały w tabeli 10.2. 396 JavaScript T~bela 10.2. Właściwości oraz metody obiektu Math Nazwa Opis E Stała Eulera 2.718). LN10 Logarytm naturalny z 10 (w przybliżeniu 2.302). LN2 Logarytm naturalny z 2 (w przybliżeniu 0.693). PI Liczba n - stosunek obwodu koła do jego średnicy (w przybliżeniu 3.1415). podstawa logarytmu naturalnego (w przybliżeniu Pierwiastek kwadratowy podanej liczby 0.5 (w przybliżeniu 0.707). SQRT2 Pierwiastek kwadratowy podanej liczby 2 (w przybliżeniu abs () Oblicza wartość absolutną podanej liczby. acos () Oblicza arcus cosinus podanej liczby. asin Oblicza arcus sinus podanej liczby. () 1.414). atan () Oblicza arcus tangens podanej liczby. atan2 Oblicza kąt współrzędnych polarnych, odpowiadających współrzędnym kartezjańskim (x, y) podanym jako argumenty funkcji. ceil () () Określa najmniejszą liczbę całkowitą większą lub równą podanemu argumentowi. cos () Oblicza cosinus podanej liczby. exp () Oblicza wartość liczby e podniesionej do podanej potęgi. f100r () Określa największą liczbę całkowitą mniejszą lub równą podanemu argumentowi. log () Oblicza logarytm naturalny podanej liczby. max () Określa większą z dwóch liczb podanych jako argumenty. min () Określa mniejszą z dwóch liczb podanych jako argumenty. pow() Oblicza wartość liczby określonej pierwszym argumentem, podniesionej do potęgi określonej drugim argumentem. random () Generuje liczbę pseudolosową z zakresu od zera do jeden. round () Zaokrągla podaną liczbę do najbliższej liczby całkowitej. sin () Oblicza sinus podanej liczby. sqrt Oblicza pierwiastek kwadratowy podanej liczby. () tan () Oblicza tangens podanej liczby. Niektóre z powyższych metod wymagają dalszego wyjaśnienia. String, Math oraz Lista Historyczna 397 Metody trygonometryczne Metody trygonometryczne, takie jak w radianach, a nie w stopniach. sin () lub acos (), wymagają podawania kąta Szczerze mówiąc, nie jest to specjalny problem. Okrąg ma 360 stopni, co odpowiada 2*PI radionom. Na przykład, arc tangens 1 wynosi 45 stopni, co odpowiada około 0.785398 radianom. Metody logO oraz expO Obie te metody powiązane są użyciem stałej Eulera. Występująca pomiędzy nimi relacje są następujące: log (a) exp(b} = b a Metoda abs() Ta metoda zwraca dodatnią wartość podanego argumentu. Oznacza to, że usuwa ona znak liczby, przez co zawsze będzie ona dodatnia; na' przykład abs ( - 4) wynosi 4, podobnie jak abs (4) ,który również wynosi 4. Obliczenia geometryczne Aby pokazać sposób użycia niektórych z przedstawionych powyżej funkcji matematycznych, stworzysz teraz skrypt obliczający kąty oraz długości boków trójkąta prostokątnego, a także pole, średnicę oraz obwód okręgu. W obliczeniach użyjesz funkcji trygonometrycznych oraz liczby Il. Oto przypomnienie właściwości trójkąta prostokątnego: pamiętać należy, że do obliczenia sinusa, cosinusa oraz tangensa dwóch pozostałych kątów trójkąta prostokątnego użyć można następujących wzorów: = przeciwległa krawędź / przeciwprostokątną • sinus • cosinus = przyległa krawędź / przeciwprostokątną • tangens = przeciwległa krawędź / przyległą krawędź 398 JavaScript Skrypt powinien obliczyć i wyświetlić wszystkie dane o podanej figurze zaraz po podaniu wystarczającej ilości informacji. Wyniki działania skryptu przedstawionego na listingu 10.7, pokazane zostały na ilustracji 10.4. Kod Listing 10.7. Zastosowanie funkcji trygonometrycznych Exarnple lO.7 FROM OTHER BROWSERS -->
Trojkat Kat A: Kat B: Bok A: Bok B: Przeciwprostokatna:

Wyniki

Wyniki działania skryptu przedstawione zostały na ilustracji 10.4.

Ilustracja 1004. Dzięki użyciu obiektu Math wykonywać można bardziej skomplikowane operacje matematyczne

Analiza

Przedstawiony skrypt jest prosty, ajego celem było zademonstrowanie rzystania obiektu Ma th .

sposobów wyko-

Okrąg jest prostszą z dwóch figur, których dotyczą obliczenia. Dzieje się tak dlatego, że operować trzeba na mniejszej ilości danych. Dwie kolejne sekcje poświęcone są dwóm funkcjom używanym w skrypcie.

String, Math oraz Lista Historyczna

401

Funkcja circle() Funkcja ta pobiera dwa argumenty: obiekt form oraz nazwę pola, którego wartość właśnie została zmodyfikowana. Operacje przeprowadzane są w oparciu o nazwę zmodyfikowanego pola. with var var var

(Math) { area = form.area.value; diameter = form.diameter.value; circumfrence = form.circumfrence.value;

Funkcję rozpoczynasz od pobrania danych z pól formularza i zapamiętania ich w odpowiednich zmiennych lokalnych. Zwróć uwagę na instrukcję with (Math). Dzięki niej wszystkie odwołania do metody oraz właściwości obiektu Ma th mogą być zapisywane bez nazwy tego obiektu. Instrukcja wi th ułatwia zapisywanie bloku poleceń odwołujących się do właściwości oraz metod tego samego obiektu. Na przykład jeśli użyjesz instrukcji wi th (nazwaObiektu) ( blok poleceń), to wewnątrz bloku poleceń wszystkie odwołania do metod oraz właściwości obiektu nazwaObiektu mogą być zapisywane w postaci nazwaMetody, nazwaWlaściwości. if

(changed == "area") ( var radius = sqrt(area / PI); diameter = 2 * radius; circumfrence = PI * diameter;

if

(changed == "diameter") { area = PI * (diameter / 2) * (diameter circumfrence = PI * diameter;

if

(changed == "circumfrence") { diameter = circumfrence / PI; area = PI * (diameter / 2) * (diameter

/ 2);

/ 2);

Trzy powyższe instrukcje warunkowe if, obliczają wartości pozostałych dwóch pól formularza na podstawie zmienionej wartości trzeciego pola. Wszystkie używają dwóch prostych wzorów: •

Pole koła = fl*promień*promień

•

Obwód koła

=

fl*średnica

Zwróć uwagę na użycie metody sqrt () bez podawania nazwy obiektu Ma th, co jest możliwe dzięki użyciu instrukcji wi th. form.area.value = area; form.diameter.value = diameter; form.circumfrence.value = circumfrence;

402

JavaScript Kiedy obliczenia zostaną zakończone, możesz wyświetlić ich wyniki polach formularza.

iN

odpowiednich

Obliczenia dotyczące trójkąta W obliczeniach tych zakładamy, że dotyczą one trójkąta prostokątnego. Oznacza to, że jeden z kątów trójkąta ma zawsze 90 stopni. Bok znajdujący się naprzeciwko tego kąta nazywamy przeciwprostokątną. Pomiędzy pozostałymi bokami trójkąta oraz jego kątami zachodzą następujące relacje: bokA znajduje się przy kącieA, natomiast bokB znajduje się przy kącieB. Zanim przejdziesz do wykonywania obliczeń, będziesz musiał umieć przeliczyć stopnie na radiany. Wszystkie funkcje trygonometryczne wymagają podawania argumentów w radianach; wyniki ich działania także zwracane są w radianach. Z drugiej strony jednak, użytkownicy będą zapewne woleli wprowadzać i otrzymywać wartości podawane w stopniach. Przeliczenia pomiędzy radianami a stopniami i vice versa dokonujesz za pomocą dwóch zmiennych: toDegrees oraz toRadians, które określają ilość stopni w radianie oraz ilość radianów na stopień: var toDegrees var toRadians

=

360 / (Math.PI * 2); (Math.PI * 2) / 360;

Funkcja angle () wywoływana jest zawsze, gdy zmienisz wartość któregokolwiek z kątów. Wielkość drugiego kąta obliczana jest na podstawie założenia, że suma wszystkich kątów w trójkącie jest równa 180 stopni. Następnie, za pomocą metod sin (), cos ()oraz wzorów na sinus i cosinus, obliczane są długości boków przyległych do obu kątów. W końcu wyniki obliczeń zostają wyświetlone w odpowiednich polach formularza. Funkcja side () wykorzystywana jest w momencie modyfikowania długości boków trójkąta. Funkcja ta, na podstawie nowej długości boku oraz długości przeciwprostokątnej, oblicza długość trzeciego boku trójkąta. W obliczeniach tych wykorzystywana jest zależność; bokA*bokA

+ bokB*bokB

=

przeciwprostokątna*przeciwprostokątna

Dysponując obliczonymi długościami boków, metodą acos () oraz definicją cosinusa, możesz obliczyć wartość kąta pomiędzy danym bokiem trójkąta oraz przeciwprostokątną,

String, Math oraz Lista Historyczna

403

Funkcja hypotenuse oblicza długości boków trójkąta (bo kua i bokuB), na podstawie podanych kątów oraz długości przeciwprostokątnej. Funkcja ta wymaga podania dwóch argumentów - obiektu form oraz nazwy kąta, przy którym znajduje się bok, którego długość chcesz obliczyć; na przykład: hypotenuse (form, "angleA"). Formularze umieszczone w głównej części pliku HTML także nie są skomplikowane. Każde z umieszczonych na nich pól posiada procedurę obsługi onChange, w której wywoływana jest odpowiednia funkcja.

Praca z Listą Historyczną Podczas pracy z Netscape Navigatorem zauważysz zapewne, że pod opcją Go menu głównego umieszczona została lista historyczna. Lista ta dostępna jest dla skryptów za pomocą obiektu history. Wcześniejsze wersje języka JavaScript udostępniały także poszczególne adresy URL zapisane na liście historycznej; jednakże była to duża luka w systemie zabezpieczeń, która mogła być użyta do zdobycia informacji dotyczących chronionych miejsc WWW. Co więcej, mogła ona naruszyć prywatność, pozwalając twórcy skryptów na pobieranie informacji dotyczących miejsc odwiedzonych przez użytkownika. Obiekt his tory pozwala na korzystanie z listy historycznej bez odwoływania umieszczonych na niej adresów URL.

się do

Właściwości oraz metody obiektu history Wszystkie właściwości oraz metody obiektu history 10.3.

przedstawione

zostały w tabeli

Tabela 10.3. Właściwości i metody obiektu history Nazwa

Opis

length

Długość listy historycznej

back()

Ładuje poprzedni adres URL umieszczony na liście historycznej

forward go ()

()

"

Ładuje następny adres URL umieszczony na liście historycznej Ładuje adres URL określony jako przesunięcie względem aktualnej pozycji na liście

404

JavaScript Na przykład, polecenie history .back () powoduje wyświetlenie poprzednio odwiedzonej strony WWW, podczas gdy polecenie history.go(-3) powoduje wyświetlenie trzeciej od końca, ostatnio odwiedzonej strony (byłoby to równoznaczne z trzykrotnym kliknięciem na klawiszu Back). Metoda his tory . go () pozwala także na podanie argumentu, nie w postaci liczby, lecz łańcucha znaków. W takiej sytuacji metoda powoduje załadowanie najbliższego adresu URL umieszczonego na liście, który posiada podany łańcuch znaków. Przy porównywaniu adresów URL nie jest brana pod uwagę wielkość liter. Jednym z najczęściej spotykanych sposobów użycia obiektu history jest tworzenie przycisków Naprzód oraz Wstecz w poszczególnych ramkach; lub dynamicznych przycisków Wstecz, cofających użytkownika do ostatnio odwiedzonej strony.

Podsumowanie Głównym zagadnieniem tego rozdziału były możliwości manipulowania danymi. Dowiedziałeś się, jak za pomocą metod obiektu string dodawać etykiety HTML do łańcucha znaków, jak zmieniać wielkość liter, przeszukiwać łańcuchy znaków oraz jak stworzyć proste narzędzia do wyszukiwania i zamiany fragmentów tekstu. Obiekt Ma th pozwala Ci na dodanie do skryptów obliczeń trygonometrycznych, logarytmicznych oraz wykładniczych. Udostępnia on także kilka stałych, takich jak: 0, E, czy też LN2. Obiekt his tory jest nieco odmienny od innych poznanych do tej pory obiektów. Obiekt ten, dzięki udostępnieniu funkcji pozwalających na przejście do adresu URL wybranego z listy historycznej, umożliwia stworzenie na stronie dynamicznych przycisków Naprzód i Wstecz. Jednak nie łamie on prywatności użytkownika, gdyż nie daje bezpośredniego dostępu do adresów URL zapisanych na liście historycznej. W kolejnym rozdziale połączymy wszystkie elementy języka JavaScript, które do tej pory poznałeś i stworzymy aplikację służącą do rysowania portretów.

Ćwiczenia l. Jak będzie wyglądał łańcuch znaków stworzony za pomocą poniższych poleceń, zakładając, że w pliku HTML nie ma żadnych innych etykiet, które mogłyby zmodyfikować wygląd pliku wynikowego?

String, Math oraz Lista Historyczna var sample = "test."; sample.big(); sample. blink () ; sample. bold () ; sample. strike () ; sample.fontsize(7); document.write(sample.italics()); 2. W funkcjach przeszukujących oraz zamieniających łańcuchy znaków (listingi 10.5 oraz 10.6) nie udostępniliśmy najważniejszej możliwości: znaków zastępujących. Rozbuduj skrypt, dodając do funkcji search () możliwości obsługi prostych znaków zastępujących. Użyj następujących kryteriów: a. Użyj gwiazdki jako znaku zastępującego. b. Znak zastępujący reprezentuje zero lub dowolną liczbę dowolnych liter. c. W szukanym wyrażeniu można podać tylko jeden znak zastępujący. d. Znak zastępujący można podać tylko i wyłącznie wewnątrz wyrażenia szukanego, nie na jego brzegach - wyrażenia" *te s t" lub" te s t *" są nieprawidłowe, sprawdzaj to i ewentualnie informuj użytkownika o błędach. Tak więc, jeśli będziesz szukał wyrażenia "lo*e" lub "H*lo"w łańcuchu znaków "Hello there", to funkcja powinna zwrócić wartość true; natomiast w przypadku poszukiwania wyrażenia "the*h" powinna zostać zwrócona wartość false. 3. Podaj kod, za pomocą którego można stworzyć dynamiczne przyciski Naprzód i Wstecz w dokumencie HTML. Przyciski te powinny działać dokładnie tak samo jak przyciski umieszczone na pasku narzędziowym Navigatora (będziesz potrzebował jednego formularza zawierającego dwa przyciski).

Przegląd poleceń oraz wiadomości dodatkowych Polecenia! Wiadomości dodatkowe

Rodzaj

Opis

anchor

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety A.

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML BIG.

bi q t )

()

405

JavaScript

406 Polecenia/ Wiadomości dodatkowe

Rodzaj

Opis

blink

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML BLINK.

bold()

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML B.

cha rAt ()

Metoda JavaScriptu

Zwraca znak o podanym indeksie, określonym za pomocą podanego argumentu.

fixed

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML TT, przez co łańcuch ten zostanie wyświetlony za pomocą czcionki o stałej szerokości liter.

Metoda JavaScriptu

Umieszcza łańcuch znaków pomiędzy etykietami HTML oraz , co powoduje wyświetlenie tekstu w podanym kolorze.

Metoda JavaScriptu

Umieszcza łańcuch znaków pomiędzy etykietami HTML oraz , co powoduje wyświetlenie tekstu za pomocą czcionki o określonej wielkości.

()

()

fontcolor()

fontsize

()

indexOf

()

Metoda JavaScriptu

Na podstawie podanego łańcucha znaków oraz indeksu początkowego, zwraca indeks pierwszego wystąpienia podanego łańcucha znaków za podanym indeksem.

italics

()

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML 1.

Metoda JavaScriptu

Na podstawie podanego łańcucha znaków oraz indeksu, metoda określa indeks ostatniego wystąpienia podanego łańcucha, zaczynając poszukiwania od litery o podanym indeksie i postępując w kierunku początku łańcucha.

lastIndexOf

()

String, Math oraz Lista Historyczna

407

Polecenia/ Wiadomości dodatkowe

Rodzaj

Opis

link()

Metoda JavaScriptu

Na podstawie podanego adresu URL, metoda ta umieszcza łańcuch znaków wewnątrz etykiety A, tworząc połączenie.

small ()

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML SMALL.

split

Metoda JavaScriptu

Zwraca tablicę łańcuchów powstałych poprzez podzielenie oryginalnego łańcucha znaków; jako separator używana jest litera podana jako argument wywołania metody.

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML STRIKE.

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML SUB.

Metoda JavaScriptu

Metoda ta, na podstawie dwóch podanych indeksów, zwraca łańcuch rozpoczynający się od znaku określonego przez pierwszy podany indeks, a kończący się na znaku określonym drugim indeksem; jeśli podane indeksy są sobie równe, to zwracany jest pusty łańcuch znaków.

sub ()

Metoda JavaScriptu

Umieszcza łańcuch znaków wewnątrz etykiety HTML SUP.

ToLowerCase ()

Metoda JavaScriptu

Zamienia wszystkie znaki łańcucha na małe litery.

toUpperCase()

Metoda JavaScriptu

Zamienia wszystkie znaki łańcucha na wielkie litery.

E

Właściwość JavaScriptu

Stała Eulera - podstawa logarytmu naturalnego (w pzybliżeniu 2.718).

LNI0

Właściwość JavaScriptu

Logarytm naturalny z 10 (w pzybliżeniu 2.302).

LN2

Właściwość JavaScriptu

Logarytm naturalny z 2 (w pzybliżeniu 0.693).

n

Właściwość JavaScriptu

Liczba rr - stosunek obwodu koła do jego średnicy (w pzybliżeniu 3.1415).

Strike

()

()

sub ()

Substring

()

"Java$cript

408 Polecenia/ Wiadomości dodatkowe

Rodzaj

Opis

SQRT1_2

Właściwość JavaScriptu

P.ierwiastek kwadratowy podanej liczby 0.5 (w pzybliżeniu 0.707).

SQRT2

Właściwość JavaScriptu

Pierwiastek kwadratowy podanej liczby 2 (około 1.414).

abs ()

Metoda JavaScriptu

Oblicza wartość absolutną podanej liczby.

acos ()

Metoda JavaScriptu

Oblicza arcus cosinus podanej liczby.

asin

()

Metoda JavaScriptu

Oblicza arcus sinus podanej liczby.

atan

()

Metoda JavaScriptu

Oblicza arcus tangens podanej liczby.

Metoda JavaScriptu

Oblicza kąt współrzędnych polarnych, odpowiadających współrzędnym kartezjańskim (x, y) podanym jako argumenty funkcji.

Metoda JavaScriptu

Określa najmniejszą liczbę całkowitą większą lub równą podanemu argumentowi.

cos ()

Metoda JavaScriptu

Oblicza cosinus podanej liczby.

exp ()

Metoda JavaScriptu

Oblicza wartość liczby e podniesionej do podanej potęgi.

Metoda JavaScriptu

Określa największą liczbę całkowitą mniejszą lub równą podanemu argumentowi.

log ()

Metoda JavaScriptu

Oblicza logarytm naturalny podanej liczby.

max ()

Metoda JavaScriptu

Określa większą z dwóch liczb podanych jako argumenty.

min ()

Metoda JavaScriptu

Określa mniejszą z dwóch liczb podanych jako argumenty.

pow()

Metoda JavaScriptu

Oblicza wartość liczby określonej pierwszym argumentem, podniesionej do potęgi określonej drugim argumentem.

random()

Metoda JavaScriptu

Generuje liczbę pseudolosową z zakresu od zera do jeden.

atan2

ceil

()

()

floor

()

String, Math oraz Lista Historyczna Polecenia/ Wiadomości dodatkowe

Rodzaj

Opis

round ()

Metoda JavaScriptu

Zaokrągla podaną liczbę do najbliższej liczby całkowitej.

sin ()

Metoda JavaScriptu

Oblicza sinus podanej liczby.

sqrt ()

Metoda JavaScriptu

Oblicza pierwiastek kwadratowy podanej liczby.

tan ()

Metoda JavaScriptu

Oblicza tangens podanej liczby.

length

Właściwość JavaScriptu

Długość listy historycznej

back ()

Metoda JavaScriptu

Ładuje poprzedni adres URL umieszczony na liście historycznej.

forward ()

Metoda JavaScriptu

Ładuje następny adres URL umieszczony na liście historycznej.

go ()

Metoda JavaScriptu

Ładuje adres URL określony jako przesunięcie względem aktualnej pozycji na liście.

Odpowiedzi 1. Wyrażenie "test." zostanie wypisane kursywą. Wszystkie pozostałe metody (oprócz ostatniej) nie dadzą żadnego rezultatu. Pamiętaj, że metody te powodują zwrócenie nowego łańcucha znaków - nie powodują one modyfikacji łańcucha zapisanego w obiekcie. Dlatego też wyniki działania wszystkich metod nie zostaną nigdzie zapamiętane i będą utracone. Żeby kod ten działał poprawnie, należy go zmienić w następujący sposób: var sample = "test."; sample sample.big(}; sample sample.blink(}; sample sample.bold(}; sample sample.strike(}; sample sample.fontsize(7}; document.write(sample.italics(}}

;

2. Nowa funkcja search () powinna wyglądać tak jak poniżej: function var var var var var

search (target, term,caseSens,wordOnly}

ind = O; ind2 = O; next = O; wildcard = -1; firstTerm = "";

409

410

JavaScript var secondTerm if

=

""I

(! caseSens) ( term = term.toLowerCase(); target = target.toLowerCase();

if

((wildcard if

= term.indexOf("*",O))

>= O) (

(!checkeWildCards(term)) ( alert("Nieprawidłowe utycie znaku return false;

zastępującego.");

firstTerm = term.substring(O,wildcard); secondTerm = term.substring (widlcard+1, term.length) while ((ind = target.indexOf(firstTerm,next)) var afterFirst = ind + firstTerm.length;

;

>= O) (

ind2 = target.indexOf(secondTerm,afterFirs~); if (ind2 < O) ( break; ) if

~

(wordOnly) ( for (var i = ind+firstTerm.length; if (space(target.charAt(i))) ( next = i + 1; continue;

i = target.length) ( break; 90ntinue; )

return

true;

)

return

true;

while ((ind = target.indexOf(term,next)) if (wordOnly) ( var before = ind - 1; var after = ind + term.length; if (! (space (target. cha rAt (before)) ~ (space(target.charAt(after)))) ( next = ind + term.length; continue; )

return

return

true;

false;

>= O) (

&&

i++)

String, Math oraz Lista Historyczna Będziesz musiał dodać także funkcję checkWildCards function if if

addWildCards(term)

411 ():

(

(term.charAt(O) == "*") { return false; } (term.charAt (term.length-l) == "*") ( return

var first = term.indexOf("*",O); if (term. indexOf ("*", first+l) >= O) { return return

false;

false;

}

true;

W przypadku funkcji search (), nie zmieniłeś podstawowych zasad jej działania. Raczej dodałeś do niej nowy blok instrukcji, który obsługuje poszukiwanie znaków zastępujących. Jeśli w wyszukiwanym wyrażeniu nie ma żadnych znaków zastępujących, funkcja działa dokładnie tak samo jak działała wcześniej, pomijając zupełnie dodany fragment kodu. Jednakże, kiedy znajdziesz znak zastępujący, wykonywane będzie dodatkowe wyszukiwanie, którego zasada działania wzorowana jest na wyszukiwaniu wykonywanym gdy nie ma znaków zastępujących. Rozpoczynasz od sprawdzenia czy użycie znaków zastępujących jest poprawne; w tym celu korzystasz z funkcji checkWidlCards ().Jeśli wszystko jest w porządku, to dzielisz poszukiwany łańcuch znaków na dwa wyrażenia: część oryginalnego łańcucha znajdującą się przed znakiem zastępującym oraz część znajdującą się za nim. Następnie, w warunku pętli while, próbujesz odnaleźć pierwsze wyrażenie. Jeśli je . znajdziesz, to szukasz drugiego wyrażenia. Jeśli drugiego wyrażenia nie znalazłeś, oznaczać to będzie, że nie udało Ci się znaleźć poszukiwanego łańcucha znaków; w związku z czym przerywasz działanie pętli. W przeciwnym wypadku sprawdzasz, czy wyszukujesz całych wyrazów. Jeśli tak, to za pomocą funkcji space () sprawdzasz znaki znajdujące się przed początkiem wyrażenia pierwszego oraz za końcem wyrażenia drugiego. Sprawdzasz także, czy nie ma znaków oddzielających wyrazy pomiędzy oboma poszukiwanymi wyrażeniami. Jeśli żaden z tych warunków nie będzie spełniony, to przechodzisz do początku pętli i kontynuujesz dalsze przeszukiwanie łańcucha znaków. W przeciwnym razie, jeśli nie będzie spełniony warunek w instrukcji warunkowej if (wordOnIy), będzie to oznaczać, że odnalazłeś poszukiwany łańcuch znaków, i że możesz zakończyć działanie funkcji zwracając wartość true. 3. Poniższy kod tworzy formularz zawierający przyciski Naprzód i Wstecz:

JavaScript a rozrywka

413

Rozdział 11. JavaScript a rozrywka W rozdziale tym wykorzystasz nabyte do tej pory wiadomości do stworzenia prostej aplikacji, która pokaże jak za pomocą prostego skryptu stworzyć wrażenie bardzo skomplikowanej interaktywnej aplikacji. Masz zamiar stworzyć aplikację, która umożliwi użytkownikom narysowanie twarzy, wybierając jej elementy z przygotowanej biblioteki ---.:dzięki czemu użytkownik nie będzie musiał posiadać absolutnie żadnych zdolności plastycznych.

S!pecyfikacja Aplikacja musi spełniać kilka prostych wymagań: •

Podczas tworzenia twarzy, grupy poszczególnych będą w odrębnych ramkach.

jej elementó.w wyświetlane

•

Twarz "wynikowa" powinna zostać zbudowana w odrębnym oknie, po naciśnięciu odpowiedniego przycisku. Zawartość tego okna użytkownik będzie mógł następnie listingować lub zapisać jako plik HTML.

•

Aplikacja powinna zawierać przycisk pozwalający twarzy.

na losowe wygenerowanie

414

JavaScript

Tworzenie aplikacji Aby napisać program rysujący twarze, będziesz musiał zdefiniować układ ramek, w którym zostaną umieszczone elementy interfejsu wymiany danych z użytkownikiem oraz inne elementy aplikacji. Do tego celu używany jest układ ramek przedstawiony na listingu 11.1.

Kod

Listing 11.1. Główny układ ramek











W powyższym układzie zdefiniowane zostały cztery ramki, ułożone jedna nad drugą. Trzy górne ramki zostały następnie podzielone na dwie kolumny. Lewa kolumna służyć będzie do wyświetlania wybranych oczu, nosa, ust.; natomiast w prawej przedstawione będą wszystkie dostępne elementy danego rodzaju. W dolnym wierszu całego układu ramek umieszczone będą przyciski służące do tworzenia twarzy "wynikowej" oraz do losowego generowania twarzy. Teraz będziesz musiał stworzyć cztery dokumenty HTML (przedstawione w listingach 11.2, 11.3, 11.4 oraz 11.5), które będą się składać na całość aplikacji. Są to pliki: eyes. htm, noses. htm, mouths. htm oraz build. htm.

JavaScript a rozrywka Kod

Listing 11.2. Kod źródłowy pliku eyes.htm















415

416

JavaScript



Kod

Listing 11.4. Kod źródlowypliku



-->





są przez procedury obsługi

twarz" losowa twarz"

Funkcja buildFace() Funkcja ta pobiera trzy elementy twarzy z odpowiednich ramek i wyświetla je w jednym oknie. Funkcja ta musi wiedzieć, które pliki zostały wyświetlone w trzech ramkach umieszczonych z lewej strony każdego z wierszy; a następnie buduje plik HTML, który wyświetla wszystkie wybrane rysunki w jednym oknie. function buildFace () ( var eye = parent.eye.location; var nos e = parent.nose.location; var mouth = parent.mouth.location; , "builtFace", "width=400, var face = window.open( •••• ~ height=450") ; face.document.open("text/html") ; face.document.write(''); face.document.write(''); face.document.write(''); face.document.close();

Funkcja ta rozpoczyna działanie od pobrania adresów URL plików zawierających wybrane części twarzy. Adres ten pobierany jest za pomocą właściwości location obiektu frame,jak na przykładzie eye = parent. eye .location;. Przy odwoływaniu się do każdej z ramek wykorzystujesz zasadę, że do właściwości obiektów można się odwoływać za pomocą nazw. Kiedy określisz już nazwy wybranych elementów twarzy, otwierasz nowe okno przeglądarki o określonych rozmiarach: var face = window( •••• ,•• buildFace ••,"widht=400,height=400); W powyższym poleceniu wielkość tworzonego okna określana jest za pomocą dodatkowych parametrów. Obiekt odpowiadający stworzonemu oknu zapisywany jest w zmiennej face. Dzięki temu później będziesz mógł modyfikować zawartość tego okna za pomocą poleceń face. document. wri te ().

JavaScrlpt

420 Po otworzeniu

okna,

otwierany

jest

strumień wyjsetowy (za pomocą polecenia face. document. open ("text/html"), a następnie zapisane zostają etykiety IMAGE odpowiadające pobranym adresom URL. Wreszcie, na samym końcu, strumień wyjściowy zostaje zamknięty.

Funkcja randomFace() Funkcja ta w losowy sposób wybiera trzy elementy twarzy, a następnie wyświetla je w odpowiednich ramkach. Do tego celu używana jest funkcja getRandom (), zwracająca liczbę z zakresu od jeden do cztery; a następnie na jej podstawie budowana jest nazwapliku,takajak: var eye = "eye" + getRandom() + ".gif". function

randomFace()

(

var eye = "eye" + getRandom() + ".gif"; var nose = "nose" + getRandom() + ".gif"; var mouth = "mouth" + getRandom() + ".gif"; parent.eye.location parent.nose.location parent.mouth.location

=

eye; = nose; =

mouth;

Kiedy nazwy plików zostaną już stworzone, wówczas pliki te otwierane są za pomocą wywołania metody window. open ().

.Funkcja getRando~() Funkcja ta została zaprojektowana do generowania liczb losowych z zakresu od jeden do cztery. Liczba losowa generowana jest poprzez stworzenie nowego obiektu typu Da te zawierającego aktualną datę i czas, obliczanie nowej wartości poprzez pomnożenie różnych elementów obiektu Da te, a następnie przez podzielenie tej liczby modulo cztery i dodanie do niej liczby jeden: function

getRandom()

(

today = new Date(); var bigNumber = today.getSeconds() * today.getTime() ~ Math.sqrt(today.getMinutes()); var randomNum = (bigNumber % 4) + l; return

*

Math.floor(randomNum);

Wynik działania funkcji jest liczbą pseudolosową z zakresu od jeden do cztery (gdyż dzielenie modulo powoduje zwrócenie liczby większej lub równej zero, lecz mniejszej od czterech). Użycie metody Ma th. floor gwarantuje, że zwracany wynik będzie liczbą całkowitą.

JavaScript a rozrywka

421

W Netscape Navigatorze 3.0 dostępna jest metoda Math. random (), która zwraca liczbę losową. Jednakże metoda ta nie jest dostępna w Navigatorze 2.0.

Rozszerzanie skryptu Przedstawiona powyżej wersja skryptu posiada kilka o:raniczeń: •

Dysponujesz ograniczoną ilością nosów, oczu oraz ust. Program powinien udostępniać możliwość łatwego rozszerzania biblioteki dostępnych elementów.

•

Za każdym razem, gdy tworzysz twarz, jest ona wyświetlana w tym samym oknie. Program powinien wyświetlać każdą twarz w nowym oknie.

•

Użytkownik powinien mieć możliwość zapamiętania aktualnej twarzy, a kiedy powróci na tę stronę, to zapamiętana twarz powinna zostać wyświetlona.

Zwiększanie ilości dostępnych elementów Aby rozszerzyć skrypt tak, by pozwalał na zwiększenie ilości dostępnych elementów danego rodzaju, będziesz musiał wprowadzić zmiany we wszystkich plikach HTML, włącznie z plikiem zawierającym definicję głównego układu ramek. Modyfikacje rozpoczynasz (patrz listing 11.1.):

od dodania małego skryptu do głównego

układu ramek

-->

W tym skrypcie definiujesz zmienne, w których zapisywane są ilości poszczególnych elementów twarzy. W ten sposób, jeśli będziesz chciał dodać lub usunąć elementy twarzy, będziesz musiał zmodyfikować wartości tych zmiennych, żadne inne modyfikacje programu nie będą konieczne. Następnie

będziesz musiał zmodyfikować trzy pliki: eyes. htm, noses. htm oraz (patrz listing 11.2). W plikach tych, użyjesz skryptu do dynamicznego tworzenia dwuelementowej tablicy niezależnie od ilości dostępnych opcji. mouths . htm

Poniżej przedstawiony został zmodyfikowany plik

eyes . htm:

422

JavaScript





-->



-->





twarz"







,

Cwiczenie Możemy wprowadzić jeszcze jedno unowocześnienie: możliwość zapamiętania twarzy i automatycznego jej wyświetlenia przy powrocie do naszej strony. Rozbuduj aplikację w ten sposób, aby zawierała ona w najniższej ramce dodatkowy, trzeci przycisk umożliwiający zapamiętanie aktualnej twarzy oraz zmodyfikuj procedurę wykonywaną zaraz po załadowaniu strony tak, aby zapamiętana twarz była wyświetlana za każdym razem, gdy użytkownik powróci na stronę.

Odpowiedź Rozwiązaniem problemu są cookies. W pliku buildFace () będziesz musiał dodać nową funkcję - saveFace ();która zapamięta trzy nazwy plików w trzech odrębnych cookies. Zdefiniuj ścieżkę dostępu do cookies jako" /", aby wszystkie pliki w aplikacji miały do nich dostęp. Do zapisywania i pobierania cookies posłużysz się funkcjami stworzonymi przezBilla Dortcha. .

JavaScript a rozrywka

427

W następnym kroku rozbudujesz główny układ ramek tak, aby na początku, w lewych ramkach wszystkich trzech wierszy, wyświetlany był pusty plik; po czym zdefiniujesz procedurę obsługi onLoad, w której wywoływana będzie funkcja loadFaee (). Funkcja ta będzie pobierać nazwę pliku z cookie i wyświetlać ten plik w odpowiedniej ramce. Kod źródłowy zmodyfikowanego 11.7.

Kod

dokumentu HTML przedstawiony

został na listingu

Listing 11.7. Ostateczna wersja głównego układu ramek



-->







433

Gra w zapałki Michala Sramka

435

Przykład z WWW Gra w zapałki Michała Sramka Michal Sramka użył języka JavaScript do stworzenia aplikacji pozwalającej użytkownikowi na granie z komputerem, w tradycyjną grę w zapałki. Aplikację tą można znaleźć w WWW pod adresem: http://www.sanet.sk/-ms/js/matches.html

Zasady gry są bardzo proste. Jest kupka zapałek, których ilość określa użytkownik. Zarówno użytkownik, jak i komputer wykonują ruchy na przemian. W każdym ruchu należy wziąć jedną, dwie, lub trzy zapałki; celem gry jest zmuszenie przeciwnika do wzięcia ostatniej zapałki. Ten z graczy, który weźmie ostatnią zapałkę przegrywa. W zademonstrowanym przykładzie, Michal stworzył dosyć skomplikowany interfejs użytkownika bazujący na tablicach, a w całej aplikacji bardzo szeroko wykorzystał język JavaScript. Kod

Listing W5.1. Kod źródłowy aplikacji

JavaScript



Safety Matches Game This is a very easy game. It's avaliable as JavaScript and as Java Applet
At first choose the number of matches. Then you have to take 1, 2 or 3 matches by clicking on the appropriate button. The Master will do the same. Who takes the las t match - LOSE !

} }

!";

Gra w zapałki Michala Sramka

437

How many matches ?

Drugi formularz, używany do tworzenia, modyfikowania oraz usuwania wyrażeń, stworzony jest także za pomocą tablicy. Zawiera on dwa pola tekstowe umożliwiające wprowadzanie danych - jedno, w którym będzie podawana nazwa komórki oraz drugie, w którym będzie zapisywane wyrażenie. Dodatkowo na formularzu umieszczono dwa przyciski - Zastosuj i Usuń, których kliknięcie powoduje wywołanie odpowiednich funkcji saveExp () oraz deleteExp () (spójrz na ilustrację 12.2). Co więcej, kiedy zmieniona zostaje zawartość pola expField, skrypt sprawdza czy istnieje jakieś cookie dla danego pola, jeśli tak, to zawartość tego cookie wyświetlona zostaje w polu expression. W przeciwnym razie, w polu tym zostaje wyświetlony pusty łańcuch znaków.





452

JavaScript

Wyrazenie

Określanie wartości zmiennych globalnych Oprócz funkcji, w skrypcie umieszczonych zostało kilka zmiennych globalnych, które używane są do przechowywania informacji potrzebnych do działania aplikacji: var width = 8; var height = 12; var 1etters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

II Set up Expiry II

Date for cookies

var expiryDate = new Date(); expiryDate.setTime (expiryDate.getTime () + 365*24*60*60*1000); var deleteExpiry = new Date(); deleteExpiry.setTime(deleteExpiry.getTime() - 1);

Zmienne width oraz height określają szerokość oraz wysokość arkusza. Jego osiem kolumn oraz dwanaście wierszy doskonale mieści się w oknie o rozmiarach 800x600 pikseli. Jedynie użytkownicy komputerów typu notebook, korzystający z rozdzielczości 640x480, będą potrzebowali mniejszego arkusza. Łańcuch znaków przechowywany w zmiennej let ters zawiera litery alfabetu, które używane będą do nazywania kolumn arkusza. Każda litera jest pobierana z łańcucha za pomocą indeksu (numer kolumny minus jeden). W zmiennej tej zostały umieszczone wszystkie litery alfabetu, dzięki czemu w łatwy sposób będziesz mógł zwiększyć rozmiary arkusza - wystarczy w tym celu zmienić wartość zmiennej width. Zmienne expiryDate oraz deleteExpiry są obiektami typu Date; w skrypcie używasz ich podczas tworzenia i usuwania cookies. W zmiennej expiryDate zapisana zostaje data wskazująca na dzień dokładnie za rok, od chwili obecnej; natomiast zmienna deleteExpiry ustawiana jest najednąmilisekundę przed aktualną godziną.

Funkcja calculate(} Funkcja caluculate () jest w zasadzie główną funkcją skryptu. Funkcja ta jest wywoływana za każdym razem kiedy chcesz ponownie obliczyć wartości komórek arkusza kalkulacyjnego, czyli w sytuacjach gdy zmieniona zostanie wartość komórki lub gdy jakieś wyrażenie zostanie dodane, usunięte, czy też zmodyfikowane. Funkcja ta wymaga podania jednego argumentu - obiektu form, w którym umieszczony jest arkusz kalkulacyjny.

Tworzenie arkusza kalkulacyjnego w JavaScripcie

453

Struktura tej funkcji jest całkiem prosta. Zostały w niej umieszczone dwie zagnieżdżone pętle for: jedna dla kolumn (korzystająca ze zmiennej x) i druga dla wierszy (korzystająca ze zmiennej y). Dla każdej kombinacji wiersza i kolumny tworzysz nazwę komórki; używasz do tego wyrażenia letters. charAt (x) + y. Zwróć uwagę na to, że licznik pierwszej pętli for posiada początkową wartość zero, co zapewnia, że zmienna x jest prawidłowym indeksem znaków zmiennej letters. II Function to calculate the spreadsheet II function calcul~te(form) var expField = ""; var expression = ""; II Check each field for an expression and if q evaluate it for (var x = O; x < width; X ++) { for (var y 1; y

477

478

JavaScript



,

Cwiczenia 1. W części rozdziału sygnalizowaliśmy możliwości rozbudowy aplikacji, którymi są: przycisk Wyczyść oraz możliwość operacji na szeregach. Dodaj do aplikacji przycisk Wyczyść. 2. Rozszerz skrypt, który stworzyłeś w ćwiczeniu 1 tak, aby pozwalał on na następujące operacje na zakresach: kiedy użytkownik zdefiniuje zakres, po prostu dodaj wartości wszystkich jego komórek. Aby rozwiązać to zadanie będziesz musiał określić składnię zakresów i odpowiednio zmodyfikować cały skrypt. Spróbuj zdefiniować składnię tak, aby nie spowodowało to problemów w funkcji checkExp ().

Odpowiedzi 1. Aby rozwiązać zadanie, będziesz musiał zdefiniować jeden przycisk w drugim formularzu aplikacji:

Expression

= O) ( next = expression.indexOf(">",index+l); nextExpField = expression.substring(index,next+l); firstField = expression.substrig(index+l, q expression. indexOf (";",index+ l) ); lastField = expression.substring(expression.indexOf(";", q index+l) + l, next - l); if (firstField.charAt(O) == lastField.chartAt(O)) var start = parselnt(firstField.substring(l, q fistField.length)); , var end = parselnt(lastField.substring(l, q lastField.length)); nextResult = firstField.charAt(O) + start + ";"; for (var i = start + l; i = expressin .length - l) { break; index = expression.indexOf ("",index+l); nextExpField = expression.substring(index,next+l); firstField = expression.substrig(index+l, q expression. indexOf (";",index+ l) ); lastField = expression.substring(expression.indexOf(";", q index+l) + l, qnext - l); Rozpoczynasz od odnalezienia końca definicji zakresu, czyli od odszukania znaku >. Po odnalezieniu tego zanku, jesteś w stanie określić nazwę pierwszego i ostatniego pola zakresu. if q q (firstField.charAt(O) == lastField.chartAt(O)) var start = parseInt(firstField.substring(l, fistField.length)); var end = parseInt(lastField.substring(l, lastField.length)); nextResult = firstField.charAt(O) + start + n;"; for (var i = start + l; i tut3j< '!I.bv zdobyc: wiecej intorroaCj L - . . A;- .( Dokument możesz także wyświetlić w oknie przeglądarki - wystarczy w tym celu kliknąć na przycisku View in Browser, umieszczonym na pasku narzędzi File/Edit. 512 JavaScript Tworzenie aplikacji w języku JavaScript za pomocą Navigatora Golda W aktualnie dostępnej wersji Netscape Navigatora Golda dostępna jest ograniczona wersja JavaScriptu. Jednakże wciąż jest to pierwsze zintegrowane narzędzie przeznaczone do tworzenia zarówno dokumentów HTML, jak i skryptów w języku JavaScript; i jako takie udostępnia kilka prostych narzędzi zaprojektowanych specjalnie do edycji skryptów. Na przykład, kiedy określasz wcięcie paragrafu za pomocą klawisza Tab, edytor pamięta pozycję paragrafu i kolejny paragraf będzie wcięty tak samo. Za pomocą kombinacji klawiszy Shift+ Tab można zmniejszyć wcięcie paragrafu. Opcja ta jest bardzo pożyteczna przy tworzeniu skomplikowanych programów, kiedy warto zadbać o formę kodu źródłowego. Co więcej, żesz pisać JavaScript tego stylu świetlona), kod źródłowy JavaScriptu traktowany jest jako osobny styl; dzięki temu moskrypt bez podawania etykiety SCRI PT, następnie zaznaczyć go i wybrać styl (c1ient) z podmenu Character dostępnego w menu Properties. Po wybraniu etykieta SCRI PT zostanie dodana automatycznie (nie będzie ona jednak wya zaznaczony tekst zostanie wyświetlony innym kolorem. Jedną z wad edytora jest to, że na końcu każdej linii musisz naciskać kombinację klawiszy Shift+Retum. W przeciwnym wypadku każda linia skryptu zostanie umieszczona w osobnej etykiecie SCRIPT. Jednakże, nawet pomimo tego wspomagania, praktycznie rzecz biorąc nie opłaca się tworzyć skryptów w oknie edycyjnym avigatora Golda. Nie tylko nie ma żadnej praktycznej metody umieszczenia skryptu w nagłówku dokumentu HTML, ale, co gorsza, nie ma także żadnej możliwości definiowania procedur obsługi zdarzeń dla wszelkiego typu pól i przycisków. Możesz natomiast używać okna edycyjnego do edycji istniejących już skryptów. W tym celu należy wyświetlić stronę zawierającą skrypt w oknie przeglądarki, a następnie kliknąć na przycisku Edit, umieszczonym na pasku narzędziowym Navigatora. W takim wypadku, wszystkie etykiety seRI PT zostaną poprawnie wyświetlone i zawierać będą odpowiednie skrypty. Netscape Navigator Gold - narzędzie do tworzenia skryptów w języku JavaScript 513 Zaawansowane możliwości Navigatora Gold Oprócz opcji, które Navigator Gold już posiada lub których wprowadzenie zapowiada firma Netscape, program ten udostępnia jeszcze kilka innych zaawansowanych narzędzi ułatwiających tworzenie stron WWW. Jednym z takich narzędzi jest przycisk Publish, który umożliwia przesłanie całej grupy tworzonych stron na wskazany serwer WWW. Zapowiedziana jest także możliwość tworzenia w Navigatorze Gold tak zwanych map graficznych, obsługiwanych przez przeglądarkę użytkownika (a nie przez serwer, jak bywało do tej pory), wszelkiego typu plików multimedialnych oraz prostych możliwości zarządzania plikami. Podsumowanie W rozdziale tym przedstawiliśmy podstawowe informacje dotyczące sposobów używania Navigatora Golda do tworzenia dokumentów HTML, a także omówiliśmy planowane unowocześnienia tego programu, które mają wspomóc proces tworzenia i publikowania stron WWW.NavigatorGoldudostępnianoweoknoedycyjne.działające na zasadzie WYSIWYG, które służy do edycji dokumentów HTML. Okno to pozwala na stosowanie metody drag-and-drop oraz' na bardzo łatwe modyfikowanie wyglądu tworzonej strony. W rozdziale 14. zapoznamy się z powiązaniami jakie występują pomiędzy JavaScriptem a Javą oraz sposobami integrowania w dokumentach apletów Javy i skryptów w języku JavaScript. Przedstawimy także dalsze perspektywy rozwoju języka JavaScript. Pytania i odpowiedzi Spotkałem się już z produktami, które wspomagają zarządzanie całymi miejscami WWW - a nie tylko pojedynczymi stronami. Czy Navigator Gold ma takie możliwości? Nie. Navigator Gold nie jest narzędziem przeznaczonym do zarządzania stronami. Jest to przeglądarka dysponująca wbudowanymi możliwościami edycji i tworzenia dokumentów HTML. Natomiast Navigator zawiera opcje pozwalające na zarządzanie stronami WWW oraz wchodzącymi w ich skład plikami graficznymi, umożliwia on także konwersję połączeń relatywnych na absolutne. JavaScript 514 Jeśli posiadam Navigatora wersji Navigatora? Golda, to czy celowe jest posiadanie także zwykłej Raczej nie. Navigator Gold zawiera, oprócz edytora, także kompletną wersję przeglądarki, posiadającą wszystkie standardowe możliwości. Nie ma więc powodu, byś dodatkowo posiadał inną wersję Netscape Navigatora. Od JavaScriptu do Javy - rzut oka na przyszłość 515 Rozdział 14. Od JavaScriptu do Javy - rzut oka na przyszłość Kiedy już poznałeś wszystkie naj istotniejsze elementy JavaScriptu, powinno być dla Ciebie oczywistym, że jest to język dysponujący potężnymi możliwościami pozwalającymi na rozszerzanie standardu HTML t tworzenie złożonych interaktywnych aplikacji. Niezależnie od tego, pozostaje jednak pytanie: Czy można zrobić coś więcej? Czy można pójść jeszcze dalej i rozszerzyć możliwości JavaScriptu? W tym rozdziale przyjrzymy się bliżej powiązaniom między JavaScriptem i Javą oraz sposobom umieszczania apletów Javy na stronach WWW. Zobaczymy także jak JavaScript potrafi współpracować z dodatkami Navigatora. Ta współpraca JavaScriptu, Javy oraz dodatków, zwana jest LiveConnect i jest jedną z najbardziej interesujących możliwości Navigatora 3.0. W Navigatorze 2.0, bezpośrednia komunikacja pomiędzy JavaScriptem i Javą, nie była możliwa. W Navigatorze 3.0 firma Netscape dodała tablicę applets, która dostarcza mechanizmów zapewniających wzajemną komunikację pomiędzy Javą i JavaScriptem. W rozdziale tym przedstawimy najpierw ograniczone możliwości obsługi apletów w Navigatorze 2.0, a następnie przyjrzymy się tablicy applets, dostępnej w Navigatorze 3.0. Później omówimy metody współpracy z dodatkami. W rozdziale tym przedstawimy następujące zagadnienia: • Java - pojęcia podstawowe. • Użycie etykiety • Podobieństwa pomiędzy Javą i JavaScriptem. APPLET do umieszczania na stronach WWWapletów Javy. 516 JavaScript • Tablica applets. • Tablica plugins oraz obiekt plugin. Integrowanie Javy i JavaScriptu - obiekt applet Kiedy firmy Netscape i Sun ogłosiły pod koniec roku 1995 powstanie języka JavaScript, zrobiły wówczas wiele hałasu na temat roli jaką JavaScript miał pełnić przy integrowaniu apletów Javy ze stronami WWW. Aplety Javy istnieją poza kontekstem stron WWW, nie są one w stanie współpracować obiektami dokumentów, formularzy, czy okien. Z kolei JavaScript posiada taką możliwość. Aplety Javy, podobnie jak obrazki, umieszczane sąjedynie w konkretnym miejscu strony i po swojemu wykorzystują przyznany im obszar. Jakakolwiek próba prowadzenia interakcji z użytkownikiem wymaga, aby aplety dostarczały swoich własnych odpowiedników formularzy HTML oraz połączeń. JavaScript współpracuje z tymi elementami stron WWW bez najmniej szych problemów. Dlatego też JavaScript ma się stać swego rodzaju połączeniem. Dzięki temu, iż język ten zapewnia dostęp do wszystkich obiektów związanych z wyświetlanym dokumentem oraz z przeglądarką, może pełnić rolę pośrednika i przekazywać do apletów informacje wprowadzane przez użytkownika lub też generowane przez niego zdarzenia. Są to ogromnie ważne zadania. Wersja JavaScriptu wbudowana w Netscape Navigatorze 2.0 nie udostępnia tablicy applets; jest ona dostępna dopiero w Navigatorze 3.0. Nie przeszkadza to wcale, nawet w Navigatorze 2.0, w wykorzystywaniu apletów na stronach zawierających skrypty napisane w JavaScripcie lub wykonywaniu pewnych nieskomplikowanych manipulacji, które mogłyby wydawać się użytkownikowi interakcją z apletami. Java - pojęcia podstawowe Zanim będziesz mógł używać na swoich stronach WWW apletów Javy napisanych przez inne osoby, będziesz musiał przyswoić sobie kilka podstawowych pojęć dotyczących Javy. Po pierwsze, Java jest językiem wymagającym kompilacji. Aby stworzyć aplet lub aby skompilować kod źródłowy udostępniony przez jakiegoś przyjaznego użytkownika WWW, konieczne jest posiadanie odpowiedniego kompilatora. Od JavaScriptu do Javy - rzut oka na przyszłość 517 Java Development Kit, dostępny początkowo w wersjach działających na maszynach SPARC z systemem Solaris lub na komputerach z systemem Windows 95 lub Windows NT, został przełożony również na inne platformy, takie jak Linux czy Mac OS. Kompilator, wszystkie pliki dodatkowe oraz kompletna dokumentacja znajduje się w WWW, pod adresem: http://www.javasoft.com/ Kiedy kod źródłowy apletu zostanie skompilowany, staje się on plikiem klasowym. Pliki klasowe nie są kodem źródłowym i zawierają obiekty, które mogą zostać użyte w innych programach lub apletach. To właśnie pliki klasowe są ładowane przez przeglądarkę i wykonywane, kiedy użytkownik wyświetli stronę zawierającą aplety. Aktualnie w Internecie jest kilka archiwów zawierających ogólnie dostępne aplety; wiele z nich często zawiera także kody źródłowe lub nawet pliki klasowe. Jeśli chcesz użyć takiego apletu, wystarczy skopiować jego kod źródłowy i skompilować go lub skopiować pliki klasowe. Informacje dotyczące używania kompilatora Javy, dostępne są w dokumentacji umieszczonej na stronie poświęconej Javie. Jedno z najlepszych archiwów zawierających aplety Javy znajdziesz pod adresem: http://www.gamelan.com/ archiwum takie dostępne jest także na stronie Javy. Aby w pełni zrozumieć zasady używania istniejących już apletów, umieścisz teraz na swojej stronie aplet (zakładam, że dysponujesz poprawnie zainstalowanym programem Java Development Kit w którym znajduje się kompilator Javy). Tekst przykładowego apletu Rosnący Tekst, stworzony przez Jimrniego Halla, będziemy używać do końca rozdziału. Aplet animuje dowolny tekst, wyświetlając go najpierw bardzo małą, a następnie coraz większą czcionką. Autor strony WWW może kontrolować kilka czynników pracy apletu, w tym także kolor tekstu, czciomkę oraz szybkość animacji. Przeglądając archiwa w Internecie zauważysz zarówno wersje alfa jak i beta apletów (w Navigatorze mogą być wykonywane tylko wersje beta). Wersje te powstały ze względu na wystąpienie dwóch podstawowych faz tworzenia języka Java. Wersje alfa apletów przeznaczone są dla przeglądarki HotJava, działającej w systemach Solaris, Windows 95 oraz Windows NT. Netscape Navigator pozwala na wykonywanie apletów beta. Firma Sun gorąco zachęca wszystkich twórców apletów, do tworzenia apletów w tej właśnie wersji. Ten właśnie rodzaj apletów omawiać będziemy w niniejszym rozdziale. Aplet Rosnący Tekst znaleźć można w Internecie pod adresem: http://wwwl.mhv.net/-jamihall/java/GrowingText/GrowingText.html Powinieneś skopiować kod źródłowy apletu, który został przedstawiony na listingu 14.1 (pamiętaj, że jest to kod Javy a nie JavaScriptu). 518 JavaScript Kiedy już zdobędzieszkod źródłowy apletu,to kolejnym krokiem będzieskompilowanie go. W przypadku systemów Windows 95 oraz Windows NT będzieto wymagało uruchomieniaprogramu javac (będącegokompilatoremJavy).Na przykład,polecenie javac GrowingText. java spowoduje skompilowanie kodu źródłowego naszego przykładowego apletu.W wyniku kompilacjikodu źródłowego,powinien powstać plik klasowy o nazwie GrowingText. class. Plikiz rozszerzeniem.class są binarnymi plikamiJavy,któremogą być wykonywane przezprzeglądarkę. Kod Listing 14.1. Kod źródłowy apletu Rosnący Tekst /* GrowingText * Feel free to re-use any part of this code. * Jamie Hall, [email protected] 1/9/96 * Jamie Hall 2/2/96 - Added bIur parameter */ /* Takes text, delay, fontName, fontBold, fontltalic, bgColor, q and fgColor as parameters. The following are the defaults: text String displayed in applet Growing Text delay Milliseconds between updates 500 fontName Font style TimesRoman fontBold Font boldness true fontltalic Font italics false bgColor Background color (hex. number) light Gray fgColor Foreground color (hex. number) black b Lu r BIurring effect false Note: 'random' can be used as the background or foreground q color to generate a random color on each update. */ import java.awt.*; import java.applet.*; public class GrowingText ~xtends Applet implements Runnable String fontName = "TimesRoman", text = "Growing Text", q bgColor, fgColor; Thread killme = null; boolean threadSuspended = false, bIur = false; int fonts [l = { 8, 12, 14, 18, 24, 36 }; int delay = 500, numFonts = 6, fontlndex = O, fontStyle; Font appFont; public void init() String param; boolean fontBold true, fontltalic = false; param = getParameter("text"); if (param != null) ( text = param; param = getParameter("delay"); if (param != null) ( delay = Integer.parselnt(param); param = getParameter("fontName"); Od JavaScriptu do Javy - rzut oka na przyszłość if q (param != null) ( fontName = param; 519 I param = getParameter{"fontBold"); if (param != null) ( fontBold = param.equals ("true"); param = getParameter{"fontltalic"); if (param != null) ( fontltalic = param.equals{"true"); fontStyle = (fontBold ? Font.BOLD : Font.PLAIN) + (fontltalic ? Font.ITALIC : Font.PLAIN); bgColor = getParameter{"bgColor"); if (bgColor == null) ( bgColor = "Color .lightGray"; I setBackground{colorFromString{bgColor, Color.lightGray)); fgColor = getParameter{"fgColor"); if (fgColor == null) ( fgColor = "Color.black"; I setForeground{colorFromString{fgColor, Color.black)); param = getParameter{"blur"); if (param != null) ( b Lu r = param.equals ("true"); I /* Resize applet to fit string with largest font. Only works in JDK appletviewer, Netscape ignores it */ /* FontMetrics fm = [ic:ccc)getFontMetrics{new q fonts[numFonts-I))); resize{fm.stringWidth{s) Font{fontName, fontStyle, + 20, appFont.getSize{) + 20); */ public void start{) { if (killme == null) ( killme = new Thread{this); killme.start{); public void stop{) { if (killme 1= null) killme. stop II; killme = null; public void run{) { while (killme 1= null) repaint() ; try ( Thread.sleep(delay); q I catch (InterruptedException (I; I killme = null; public void update(Graphics g) if (bLu r ) { if (fontIndex > numFonts - l ) ( g.clearRect(O, O, size() .width, size() .height); I paint(g) ; I else ( g.clearRect(O, O, size() .width, size() .height); e) 520 JavaScript paint(g); public void paint(Graphics g) { if (bgColor.equalsIgnoreCase ("random") ) ( setBackground(colorFromString(bgColor, Color.lightGray)) ; ) if (fgColor. equalsIgnoreCase ("random" )) ( setForeground(colorFromString(fgColor, Color.black)); if (fontlndex > numFonts fontlndex = O; - l ) } g.setFont(appFont = new Font(fontName, fontStyle, ~ fonts[fontlndex++])); FontMetrics fm = getFontMetrics(appFont); g. drawString (text, (size ().width ~ fm.stringWidth(text))/2, (size() .height!2)+10); ) public boolean mouseDown(Event if (threadSuspended) ( killme.resume() ; else ( killme.suspend() ; evt, int x, int y) } threadSuspended return true; public Color = 'threadSuspended; colorFromString(String str, Color defaultColor) if ~ ~ (str.equalsIgnoreCase("random"}) { return new Color ((int) (Math. random () * 256), [ic:ccc] (int) (Math.random() * 256), (int) (Math.random() * 256)); ) else { try ( Integer i = Integer.valueOf(str, 16); return new Color(i.intValue()); catch (NumberFormatException e) ( return defaultColor; public String getAppletlnfo() return "GrowingText effect Wyniki { by Jamie M. Hall, 1996"; Strona demonstrująca działanie tego apletu została przedstawiona na ilustracji 14.1. Od JavaScriptu do Javy - rzut oka na przyszłość 521 Ilustracja 14. 1. Ap/et Rosnący Tekst Jamie's Growing Text Effect Umieszczanie apletów w dokumentach HTML za pomocą etykiety APPLET Aby umieścić aplety w dokumentach HTML, należy posłużyć się etykietą APPLET. Etykieta ta, określa adres URL pliku klasowego apletu oraz wielkość prostokątnego obszaru przyznanego apletowi na stronie. Wszystkie parametry etykiety APPLET przedstawione zostały w tabeli 14.1. Jeśli pomiędzy etykietami oraz zostanie podany jakiś tekst, to w przeglądarkach, które nie potrafią wykonywać apletów Javy, będzie on wyświetlony zamiast apletu. Oprócz określenia miejsca, w którym aplet będzie mógł być wykonany, możesz także przekazać do niego dowolne parametry. Służy do tego etykieta PARAM. W etykiecie tej podaje się parę informacji: nazwa-wartość. Wewnątrz każdej etykiety APPLET możesz umieścić dowolną ilość etykiet PARAM, z których każda powinna mieć następującą postać: 522 JavaScript Tabela 14.1. Parametry etykiety APPLET Nazwa Opis CODE Określa adres URL binarnego pliku klasowego apletu (może to być adres względny, podany względem punktu odniesienia określonego za pomocą parametru CODEBASE). CODEBASE Określa bazowy adres URL apletu (czyli kartotekę, w której umieszczony jest kod apletu). WIDTH Określa szerokość prostokątnego obszaru przeznaczonego dla apletu. HEIGHT Określa wysokość prostokątnego obszaru przeznaczonego dla apletu. Teraz, używając przykładowego apletu Rosnący Tekst, który skompilowałeś w poprzednim przykładzie, stworzysz prostą stronę WWW, która wyświetlać będzie aplety w prostokącie 500x500 pikseli. Będziemy animować tekst: "Java naprawdę działa". Jak wynika z kodu źródłowego (patrz listing 14.1), masz możliwość ustawienia kilku parametrów pracy apletu: Takes text, delay, fontName, fontBold, fontltalic, bgColor, and fgColor as parameters. The following are the defaults: text delay fontName fontBold fontltalic bgColor fgColor biur Note: color - String displayed in applet Milliseconds between updates Font style Font boldness Font italics Background color (hex. number) Foreground color (hex. number) Biurring effect - Growing Text 500 TimesRoman true false light Gray black false 'random' can be used as the background or foreground to generate a random color on e&Ch update. W naszym wypadku powinieneś zastosować opóźnienie czasowe (parametr delay) wynoszące 250 milisekund oraz pogrubioną czcionkę. Sposób umieszczenia apletu na stronie WWW przedstawiony został na Iistingu 14.2. Kod Listing 14.2. Umieszczanie aptetu Rosnqcy Tekst na stronie WWW Example 14.2 Java Applet Example Od JavaScriptu do Javy - rzut oka na przyszłość Wyniki Powyższy kod powoduje wyświetlenie strony przedstawionej na ilustracji 14.2. Ilustracja 14.2. ..+, Nelscape . IE.ample H.21 II!I~Eł Za pomocą etykiety APPLET możesz okreslić wielkość obszaru, w którym umieszczony zostanie aplet Analiza W powyższym przykładzie jest kilka rzeczy, które należy omówić. Po pierwsze, wszystkie parametry posiadają wartości domyślne, dzięki czemu nie ich podawać w etykiecie APPLET. Parametry te są opcjonalne - możesz podać dowolną ich ilość lub nie podawać żadnego. Aplety Javy wykonywane są aż do chwili przejścia na inną stronę WWW lub zamknięcia Navigatora. Praca z Javą w Netscape Navigatorze 2.0 Chociaż obiekt applet nie jest dostępny w JavaScripcie zaimplementowanym w Navigatorze 2.0, to jednak program ten pozwala na prowadzenie wymiany danych pomiędzy apletem i przeglądarką za pomocą JavaScriptu. Na przykład, dysponując możliwością dynamicznego generowania kodu HTML, jaką daje JavaScript, możesz stworzyć dwie ramki, w jednej z nich umieścić formularz, a podawanych w nim informacji użyć do ponownego wyświetlania apletu w drugiej ramce. Mimo, że nie jest to prawdziwa wymiana informacji z apletem, to jednak można w ten sposób stworzyć wrażenie lepszej integracji apletu z aplikacją umieszczoną na stronie WWW. , I 524 JavaScript Aby pokazać w jaki sposób można zmieniać stan apletu za pomocą dynamicznie rzonego dokumentu HTML, zbudujesz teraz aplikację testującą możliwości apletu. two- W programie tym użytkownik powinien mieć możliwość wprowadzenia łańcucha znaków, wybierania różnych opcji za pomocą pól wyboru oraz zwykłych pól tekstowych. Aplikacja powinna zawierać także przycisk Test, którego kliknięcie powodować będzie ponowne uruchomienie apletu w drugiej ramce; przy czym użyte zostaną nowe parametry. Kod źródłowy aplikacji przedstawiony został na listingach 14.3, 14.4 oraz 14.5. Listingi 14.4 oraz 14.5 zawierają kod źródłowy pliku javatest. html, który zawiera formularz pozwalający na podawanie różnych opcji pracy apletu; jak również kod używany do jego wyświetlania. Kod Listing 14.3. Główny układ ramek Kod Listing 14.4. Kod źródłowy formularza Example 14.3 --> Test apletu Rosnacy Tekst Tekst do wyswietlenie: Opoznienie: Czcionka: Pogrubiona Migoczaca Kod Listing 14.5. Kod źródłowy używany do wyświetlania apletu Wyniki Wyniki działania skryptu przedstawione zostały na ilustracji 14.3. Ilustracja 14.3. Za pomocą JavaScriptu możesz ponownie wyświetlić aplet w innej ramce, określając przy tym nowe parametry jego pracy Test apletu Growing Text Wyswietl tekst 1~~~~T:}~""""_,, .. __" ... _". Okres czasu pomedzy kolejnymi uaktualnieniami apletu; 11(0) I"". Czcionka: R: Pogrubiona r ,,,..,.....",.... . Migoczaca ~ iW ~~~r~.~~~~l.~tu~.~======================================~:~ Analiza W górnej ramce tworzony jest formularz służący do podawania informacji, które następnie zostaną użyte jako parametry apletu. W dolnej ramce wyświetlasz zawartość pliku applet. html, W którym umieszczony jest skrypt zawierający etykiety APPLET oraz PARAMS. W pliku tym wartości podawane w poszczególnych etykietach PARAM określane są na podstawie odpowiednich pól formularza (przy odwołaniach do pól formularza używane jest wyrażenie parent ["form"]). W pliku j avatest. html JavaScript jest wykorzystany tylko do jednego celu - zdefiniowania procedury obsługi onClick. Procedura ta definiowana jest dla przycisku Test, którego kliknięcie powodować będzie ponowne wyświetlenie pliku applet. html W dolnej ramce, a co za tym idzie ponowne uruchomienie apletu i określenie nowych wartości jego parametrów. 526 JavaScript Tablica applets W Navigatorze 3.0 firma Netscape udostępniła możliwość dwustronnej wymiany informacji pomiędzy Javą i JavaScriptem. JavaScript 1.1 może wywoływać publiczne metody apletów Javy oraz operować na obiektach i ich właściwościach; natomiast aplety mogą wywoływać funkcje napisane w języku JavaScript. W tej sekcji poznamy metody, za pomocą których skrypty mogą manipulować apletami - jedno z głównych i najważniejszych zastosowań języka JavaScript. W JavaScripcie dostęp do apletów umożliwia tablica applets, w której umieszczone są obiekty typu aplet. Każdemu apletowi odpowiada jeden obiekt applet, umieszczony w jednej z komórek tablicy; kolejność ułożenia obiektów w tablicy odpowiada kolejności występowania apletów w kodzie dokumentu HTML. Tablica applets jest jednąz właściwości obiektu document. Na przykład, drugi aplet umieszczony w dokumencie dostępny będzie za pomocą wyrażenia document. applets [l] . Aplety mogą posiadać swoje nazwy - służy do tego parametr NAME etykiety APPLET. Do apletu zdefiniowanego poniższą etykietą: WIDTH=szerokość HEIGHT=wysokość będzie można odwoływać się za pomocą wyrażenia document. nazwaApletu. Właściwości oraz metody apletu dostępne są w JavaScripcie jako właściwości i metody odpowiedniego obiektu applet. Poniżej przedstawiony został kod definiujący stronę, na której umieszczono nasz przykładowy aplet Rosnący Tekst oraz dwa przyciski: Start i Stop, za pomocą których użytkownik może rozpocząć i zatrzymać działanie apletu: applet Example FORM> Od JavaScriptu do Javy - rzut oka na przyszłość 527 W powyższym przykładzie procedury obsługi onClick, zdefiniowane w etykietach INPUT, zostały użyte do wywołania dwóch metod apletu: start () oraz stop (). Środowisko Javy Oprócz możliwości używania metod i właściwości apletów istnieje także możliwość dostępu do dowolnych klas oraz pakietów Javy. Wymaga to jednak znajomości środowiska Javy oraz sposobów użycia jej klas i pakietów. Więcej informacji na ten temat możesz znaleźć na stronie domowej firmy Netscape. Od JavaScriptu do Javy Dla wielu z Was kolejnym krokiem po przeczytaniu niniejszej książki będzie rozpoczęcie nauki Javy. Nie jest to pozbawione sensu. Ucząc się JavaScriptu poznałeś podstawy składni używanej w Javie, zaznajomiłeś także ze sposobami tworzenia poleceń, pętli oraz wszelkiego typu wyrażeń. się Oczywiście, Java to nie to samo co JavaScript. Oprócz tego, iż jest to język kompilowany i że pozwala on na dostęp do tych samych obiektów co JavaScript, oba te języki mają wiele znaczących różnic: • Statyczne łączenie. W JavaScripcie istnieje możliwość odwołania się do obiektów, które nie istnieją w chwili załadowania skryptu i jego analizy. W Javie program nie zostanie skompilowany, jeśli wszystkie obiekty, do których program się odwołuje, nie istnieją podczas kompilacji. • Zorientowanie obiektowe. JavaScript daje ograniczone możliwości korzystania z obiektów. Java posuwa się znacznie dalej, dając możliwość korzystania z klas i mechanizmu dziedziczenia - dwóch istotnych elementów programowania obiektowego. • Grafika i możliwości tworzenia graficznego interfejsu komunikacji z użytkownikiem. Java posiada możliwości rysowania oraz tworzenia elementów graficznego interfejsu wymiany danych z użytkownikiem; czego nie posiada JavaScript. Po przejrzeniu tych oraz innych drobnych różnic pomiędzy Javą a JavaScriptem okazuje się, że Java jest językiem znacznie bardziej złożonym i wymagającym dokładniejszego testowania niż JavaScript. 528 JavaScript Jednak, za pomocą Javy możesz tworzyć samodzielne aplikacje problemy, z którymi nie mógłbyś sobie poradzić w JavaScripcie. oraz rozwiązywać Typy aplikacji oraz apletów, które można tworzyć za pomocą Javy, są bardzo różnorodne. Pobieżny rzut oka na aplety dostępne w Internetowych archiwach (takich jak Gamalan), pozwala określić główne typy zastosowań Javy: • Sztuka i rozrywka. Spora grupa apletów zawierająca począwszy od interaktywnych narzędzi wspomagających tworzenie poezji za pomocą metody drag-and-drop, a skończywszy na prostych narzędziach do rysowania. • Business i finanse. Na potrzeby biznesu zostało stworzonych wiele apletów począwszy od wykresów giełdowych, a skończywszy na wysyłkowych sklepach i arkuszach kalkulacyjnych. • Edukacja. Przykłady wykorzystania apletów Javy w edukacji to: interaktywne abecadła, trójwymiarowe modele cząsteczek chemicznych, animowane żonglowanie oraz wielojęzyczne gry słowne. • Multimedia. Multimedia to jedne z tych zastosowań Javy, o których najwięcej się mówi. Aplety tego rodzaju to: narzędzia do tworzenia animacji, rysowania fraktali, rysowania schematów elektronicznych, odtwarzacze muzyki i midi. • Sieci. Aplety tego rodzaju to: emulatory terminali, a także aplikacje do internetowych pogawędek. • Inne zastosowania. Mogą to być aplety służące do przeglądania też specjalistyczne kalkulatory. fontów, czy W chwili obecnej JavaScript zaimplementowany został tylko w produktach firmy Netscape oraz w nowszych wersjach przeglądarki Internet Explorer firmy Microsoft, przeznaczonej do pracy w systemach Windows NT oraz Windows 95. Najpopularniejszym zastosowaniem JavaScriptu, jest tworzenie interaktywnych aplikacji umieszczanych na stronach WWW.którewykonywanesąwprzeglądarceużytkownika.anie na serwerze. Istnieje także wersja JavaScriptu przeznaczona do programowania serwerów, odpowiadająca tradycyjnym programom COL Za pomocą LiveWire - pakietu programowego służącego do rozszerzania możliwości serwerów i tworzenia skomplikowanych aplikacji WWW - można tworzyć w JavaScripcie skrypty działające na serwerze. W dużym stopniu upraszcza to programowanie aplikacji działających na WWW, gdyż zarówno oprogramowanie serwera, jak i skrypty uruchamiane w przeglądarce użytkownika mogą być tworzone w tym samym języku. Do tej pory aplikacje działające na serwerach tworzone były w takich językach jak C lub Perl. Wymiana informacji z dodatkami Oprócz wymiany danych pomiędzy JavaScriptem i apletami Javy, LiveConnect pozwala także na komunikację pomiędzy JavaScriptem i specjalnymi dodatkami do Netscape Navigatora. Od JavaScriptu do Javy - rzut oka na przyszłość 529 Netscape Navigator 3.0 zawiera kilka dodatków, takich jak: LiveVideo, czy LiveAudio, które wykorzystują technologię LiveConnect i mogą zostać wykorzystane w skryptach JavaScriptu. Lista aktualnie dostępnych scape pod adresem: dodatków znajduje się na stronie domowej firmy Net- http://home.netscape.com/comprod/products/navigator/ ~ version_2.0/plugins/index.html Etykieta EMBED Dodatki umieszczane są na stronach WWW za pomocą etykiety EMBED. Etykieta ta podobna jest do etykiety IMG oraz APPLET. Pozwala ona na skopiowanie, w czasie analizy strony pliku, w którym znajduje się dodatek i poprawne jego wyświetlenie. Etykieta EMBED posiada następujące parametry: • HEIGHT. Określa wysokość obszaru wydzielonego dla dodatku. Wartość tego parametru podaje się w jednostkach określonych za pomocą parametru UNITS. • SRC. • WIDTH. • HIDDEN. Określa, czy dodatek powinien być widoczny. Parametr ten powinien posiadać wartość true lub false; jeśli jego wartość wynosi true, to unieważnia on parametry HEIGHT oraz WIDTH. • PALETTE. Określa tryb pracy palety kolorów dodatku. Parametr ten może przyjąć wartości: foreground lub background. Parametr ten używany jest jedynie w wersjach Navigatora działających w systemie Windows. • PLUGINSPAGE. Określa adres URL strony zawierającej instrukcję dotyczącą dołączanego dodatku. Informacja ta używana jest przez narzędzia instalacyjne Navigatora. • TYPE. Określa typ MIME definiowanej etykiety nia jednego z parametrów SRC lub TYPE. • NAME. • UNITS. Podaje jednostkę użytą do określenia wartości WIDTH i HEIGHT. Dopuszczalne wartości tego parametru to: pixels lub en (czyli 0.5 wielkości punktu). Domyślną wartością tego parametru jest pixels. Określa adres URL obiektu, który ma zostać dołączony. Określa szerokość obszaru wydzielonego dla dodatku. Wartość tego parametru podaje się w jednostkach określonych za pomocą parametru UNITS. EMBED. Etykieta ta wymaga poda- Podaje nazwę obiektu dodatku. Podobnie jak w przypadku ramek, gdzie etykieta pozwalała określić alternatywny kod, który będzie wyświetlany w przeglądarkach nie potrafiących ich obsługiwać, tutaj dostępna jest etykieta . Dzięki niej w przeglądarkach nie potrafiących obsługiwać dodatków można zamiast nich wyświetlić alternatywny kod HTML. / 530 JavaScript Dla przykładu, poniższy kod spowoduje wyświetlenie tekstu: "Przykro mi, ale potrzebujesz przeglądarki pozwalającej na wyświetlanie dodatków!" w przeglądarkach które nie obsługują etykiety : Oto film QuickTime: Przykro mi, ale potrzebujesz przeglądarki pozwalającej q na wyświetlanie dodatków I Obiekt plugins Obiekt plugins jest tablicą zawierającą obiekty plugin, które odpowiadają wszystkim dodatkom zainstalowanym w przeglądarce. Każda komórka tablicy plugins posiada pięć właściwości: • • name. Nazwa dodatku. filename. Nazwa pliku, w którym umieszczony jest dodatek (w lokalnym komputerze). • description. Opis dostarczony przez dodatek. • lenght. Ilość dodatków. • mimeTypes. Tablica określająca typy MIME udostępniane przez dodatek - tablica ta posiada te same właściwości co obiekt mimeTypes omówiony w dalszej części rozdziału. Możesz dowiedzieć się czy dany dodatek jest zainstalowany sprawdzając odpowiadający mu obiekt. Poniższy przykład dynamicznie buduje stronę, której postać zależy od tego czy dodatek Shockwave jest zainstalowany: if (navigator.plugins["Shockwave"]l document.writeln(''); else document.writeln('Zainstaluj dodatek Shockwave! '); Obiekt mimeTypes Obiekt mimeTypes jest tablicą wszystkich typów MIME, które udostępniane są przez przeglądarkę, dodatki, czy też aplikacje wspomagające. Każdy typ MIME w tej tablicy reprezentowany jest poprzez obiekt mimeType. Tablica indeksowana jest numerami lub też nazwami typów MIME. Od JavaScriptu do Javy - rzut oka na przyszłość 531 Obiekt mimeType posiada trzy właściwości: • name. Nazwa typu MIME,jak na przykład: image/jpeg lub v i.de o z av i.. • description. • suffixes. Łańcuch znaków zawierający rozszerzenia plików danego typu MIME, poszczególne rozszerzenia oddzielone są od siebie za pomocą przecinków. Opis typu MIME. Na przykład dla obrazków TIFF poszczególne wartości mogą wynosić: • navigator. mimeTypes [" image/tiff"] • navigator.mimeTypes["image/tiff"] . suffixes .description - "tiff, - tif" "TIFF Image". Tablica embeds Tablica plugins dostarcza informacji o dodatkach zainstalowanych w przeglądarce, natomiast tablica embeds zawiera obiekty reprezentujące wszystkie dodatki umieszczone w aktualnym dokumencie HTML za pomocą etykiety . Komórki tablicy odpowiadają poszczególnym etykietom ,a ich kolejność odpowiada kolejności występowania tych etykiet w kodzie źródłowym dokumentu. Tablica ta jest właściwością obiektu document. Komórki tej tablicy nie mają żadnych właściwości ani metod, pozwalająjednak na wywoływanie metod dodatków z poziomu języka JavaScriptu. Wywoływanie metod dodatków z poziomu języka JavaScript Wszystkie dodatki, które zostały stworzone tak, aby współpracować z JavaScriptem za pomocą technologii LiveConnect, udostępniają tak zwane metody rodzime (ang.: native methods). Metody te mogą być wywołane przez skrypt napisany w języku JavaScript, tak jakby były one metodami obiektów zapisanych w tablicy embeds. Na przykład, większość wersji Navigatora 3.0 dostarczana jest z dodatkiem LiveVideo. Obiekt reprezentujący ten dodatek może być wykorzystywany przez program w języku Java oraz JavaScript. Dokumentacja tego dodatku podaje, że udostępnia on cztery metody rodzime: • play () . Rozpoczyna odtwarzanie pliku począwszy od aktualnej pozycji. • s top ( ) . Zatrzymuje odtwarzanie. • seek (pozycja). Określa aktualną pozycję w pliku za pomocą przy czym podaje on numer ramki. pozycja, • rewind () . Ustawia aktualną pozycję na początek pliku. argumentu 532 JavaScript Za pomocą tych metod możesz stworzyć prosty panel sterowania, pozwalający giwać dołączony do strony plik multimedialny: obsłu- W powyższym przykładzie JavaScript został wykorzystany do zdefiniowania procedur obsługi zdarzeń, zapewniających odpowiednie funkcjonowanie przycisków sterujących odtwarzaniem pliku video. Zwróć uwagę na to, iż do dodatku można się odwoływać zarówno za pomocą nazwy, jak i indeksu w tablicy embeds. Podsumowanie W rozdziale tym poznałeś powiązania pomiędzy JavaScriptem Scriptem i dodatkami. i Javą pomiędzy Java- Omówiliśmy w jaki sposób, za pomocą obiektu applet, aplikacje napisane w języku JavaScript mogą współpracować z apletami Javy. Zobaczyłeś także, jak można umieszczać istniejące aplety w dokumentach HTML, jak użyć JavaScriptu do przekazywania apletom różnych parametrów. Omówiliśmy także zagadnienia związane z rozpoczęciem runki rozwoju JavaScriptu. nauki Javy oraz dalsze kie- Przedstawiliśmy także obiekty mimeTypes, plugins uraz tablicę embeds, dzięki którym możliwa jest współpraca dodatków ze skryptami napisanymi w języku JavaScript. Pytania i odpowiedzi Chciałbym stworzyć animowane logo. Czy powinienem użyć Javy, czy JavaScriptu? Chociaż istnieją przykłady prostej animacji tworzonej to nie jest on idealnym narzędziem do rozwiązywania cja tworzona za pomocą tego języka jest niedoskonała nią szybkość, niedokładne określanie odstępów czasu za pomocą języka JavaScript, tego typu problemów. Animaze względu na nieodpowiedoraz problemy z migotaniem. Od JavaScriptu do Javy - rzut oka na przyszłość 533 Istniejąjednak bardzo dobre aplety pozwalające na animowanie serii plików GlF. Są one bardziej odpowiednie do stworzenia animowanego logo. Apletów tych możesz poszukać w archiwum Gamelan: http://www.gamelan.com/. W Navigatorze 3.0, dzięki udostępnieniu tabeli images, istnieje możliwość robienia znacznie lepszych animacji za pomocąjęzyka JavaScript. Dlaczego moje aplety nie są w stanie zobaczyć danych umieszczonych larzach? w formu- Jest to miejsce, gdzie możliwości Javy są nieco ograniczone. Dzieje się tak dlatego, że aplety nie są w stanie "zobaczyć" takich elementów dokumentów jak formularze, połączenia, czy też kolory. Główna rola JavaScriptu w przyszłości będzie polegać właśnie na przekazywaniu apletom tego typu informacji. Zasoby dotyczące JavaScriptu dostępne w Internecie 535 Dodatek A Zasoby dotyczące JavaScriptu dostępne w Internecie Przedstawiona poniżej lista pokazuje zasoby dotyczące Javy oraz JavaScriptu dostępne na Internecie. Zasoby te podzielone zostały ze względy na ich typ. Strony WWW Przegląd JavaScriptu Krótkie wprowadzenie do JavaScriptu dostarczone przez firmę Netscape. Zawiera ono odnośniki do kilku interesujących przykładów oraz dokumentacji JavaScriptu. http://home.netscape.com/comprod/products/version_2.0/script c:> /index.html Dokumentacja JavaScriptu Oficjalna dokumentacja JavaScriptu oraz inne informacje dotyczące tego języka. http://home.netscape.com/eng/mozilla/Gold/hańdbook/javascript c:> /index.html JavaScript 536 Biblioteka JavaScriptu Wciąż uaktualniana biblioteka przykładów zastosowań JavaScriptu. http://www.c2.org/-andreww/javascript/lib/ Dokumentacja JavaScriptu w formacie PDF Oficjalna dokumentacja JavaScriptu zapisana w formacie Adobe Acrobat. http://www.ipst.como/docs.html Morphic Molecules Zbiór zaawansowanych informacji i mini-podręczników programowania w JavaSkrypcie. dotyczących różnych aspektów http://www.txdirect.net/user/everett/ Windwsowy plik pomocy do nauki JavaScriptu Plik pomocy systemu Windows pomagający w nauce języka JavaScript. http://www.jchelp.com/javahelp/javahelp.htm Podręcznik JavaScriptu Wciąż uaktualniany podręcznik omawiający wiele aspektów programowania Scripcie. w Java- http://www.webconn.com/java/javascript/intro Gamelan Największe archiwum apletów Javy, zawierające jednak także przykłady zastosowań JavaScriptu. http://www.gamelan.com/ Strona domowa Javy Prowadzona przez firmę Sun, strona zawierająca oficjalne informacje dotyczące Javy. http://www.javasoft.com Zasoby dotyczące JavaScriptu dostępne w Internecie 537 Listy korespondencyjne JavaHouse Głównym tematem jest tutaj Java, jednakże czasami poruszane są także tematy związane z JavaScriptem. http://www.center.nitech.ac.jp/ml/java-house/hypermail/0000 Lista korespondencyjna dotycząca JavaScriptu Jak sama nazwa wskazuje, głównym tematem tej listy korespondencyjnej JavaScript (lista ta może być bardzo obciążona). Do tej listy, można się zapisać wysyłając wiadomość e-mail na adres: [email protected] podając w treści listu informację "subscribe JavaScript". Listy dyskusyjne comp .lang. java. misc (Javy, czasami JavaScript) news:comp.lang.java.misc comp .lang. javascript (JavaScriptu). news:comp.lang.javascript news ://news .livesoft. com/ (programowanie w technologii LiveConnect) jest język Informacje o języku JavaScript 539 Dodatek B Informacje o języku JavaScript W pierwszej części tego rozdziału umieszczone zostały informacje dotyczące obiektów dostępnych w języku JavaScript, ich właściwości oraz metod. W drugiej opisano funkcje języka niezwiązane z żadnym konkretnym obiektem, oraz operatory. Przedstawione poniżej oznaczenia zostały użyte do określenie przeglądarek, w których obiekty, metody, właściwości oraz procedury obsługi zdarzeń zostały zaimplementowane: • C - wersja języka JavaScript przeznaczona do tworzenia aplikacji wykonywanych w przeglądarce (wersja języka umożliwiająca tworzenie skryptów działających na serwerze, nie jest przedstawiona w tym rozdziale) • 2- Netscape Navigator 2 • 3- Netscape Navigator 3 • I- Microsoft Internet Explorer 3 Obiekt anchor [CI21311] Obiekt anchor jest odpowiednikiem pomocą etykiety . kotwic, umieszczanych w dokumentach HTML za Właściwości • name - łańcuch znaków określający nazwę kotwicy. [Brak 213] 540 JavaScript Obiekt applet [C13] Obiekt applet jest odpowiednikiem mocą etykiety APPLET. apletu umieszczonego na stronie WWW za po- Właściwości • łańcuch znaków określający wartość parametru name - NAME etykiety APPLET. Obiekt area [C13] Obiekt area odpowiada zdefiniowanemu obszarowi mapy graficznej. Obiekty te występująjako elementy komórek tablicy links będącej właściwością obiektu document. Właściwości • hash - łańcuch znaków określający nazwę kotwicy podaną w adresie URL. • host łańcuch znaków określający nazwę hosta oraz domeny podane w adre- - sie URL. • hostname - łańcuch znaków określający nazwę hosta, domeny, oraz numer portu podany w adresie URL. • href • pathname • port • protocol • search - łańcuch znaków zawierający zapytanie umieszczone w adresie URL (część po znaku ,,="). • łańcuch znaków zawierający pełny adres URL. - - łańcuch znaków zawierający ścieżkę dostępu do pliku podanego w adresie URL (bez nazwy hosta, domeny, oraz numeru portu). - łańcuch znaków określający numer portu podany w adresie URL. - łańcuch znaków zawierający nazwę protokołu podanego w adresie URL (włącznie ze znakiem dwukropka). tarqet - łańcuch znaków zawierający wartość parametru TARGET etykiety AREA. Procedury obsługi zdarzeń • onMo101seOutdefiniuje kod JavaScriptu, który ma zostać wykonany wskaźnik myszy opuści obszar zdefiniowany za pomocą etykiety AREA. gdy • onMouseOver - definiuje kod JavaScriptu, który będzie wykonany gdy wskaźnik myszy zostanie umieszczony wewnątrz obszaru zdefiniowanego za pomocą etykiety AREA. Informacje o języku JavaScript 541 Obiekt Array [CI311] Obiekt ten udostępnia metody pozwalające na tworzenie tablic, oraz na pracę z nimi. Nowa tablica tworzona jest za pomocą poleceń: nazwa Tablicy = new Array () lub nazwaTablicy = new Array(długośćTablicy) Właściwości • length • prototype liczba całkowita określająca ilość komórek w tablicy. - - pozwala na dodawanie nowych właściwości do obiektu Array. Metody • join (łańcuch_znaków) z zawartości łańcucha wszystkich - metoda zwracająca łańcuch znaków składający się komórek tablicy, oddzielonych od siebie za pomocą znaków. () - odwraca kolejność komórek w tablicy. [Brak I] • reverse • sort (funkcja) - metoda sortuje wszystkie komórki tabeli. Przy sortowaniu używana jest funkcja podana jako parametr funkcj a. Jeśli parametr ten zostanie pominięty elementy tablicy sortowane są w kolejności leksykograficznej. Obiekt button [CI21311] Obiekt but ton odpowiada przyciskom umieszczanym na formularzach. Właściwości wartość logiczna określająca czy przycisk jest aktywny. [Brak 213] • enabled - • form - odwołanie do obiektu form, w którym umieszczony jest przycisk. [Brak 213] łańcuch znaków zawierający nazwę przycisku. • name - • type - • value - • click • focus () - łańcuch znaków zawierający wartość parametru TYPEetykiety INPUT. [Brak 21I] łańcuch znaków zawierający wartość przycisku. Metody () - emuluje kliknięcie przycisku przez użytkownika. umieszcza miejsce wprowadzania na przycisku. [Brak 213] JavaScript 542 Procedury obsługi zdarzeń określa kod JavaScriptu, który ma zostać wykonany gdy użytkownik kliknie na przycisku. • onClick - • onFocus - określa kod JavaScriptu, który ma zostać wykonany gdy miejsce wprowadzania zostanie umieszczone na przycisku. [Brak 213] Obiekt checkbox [CI21311] Obiekt checkbox pozwala na umieszczenie pola wyboru na formularzach HTML. Właściwości wartość logiczna określająca czy pole wyboru jest zaznaczone. • checked - • defaul tChecked - • enabled - • form - wartość logiczna określająca czy dany element jest domyślnie zaznaczony (odpowiada wartości parametru CHECKED). wartość logiczna określająca czy przycisk jest aktywny. [Brak 213] odwołanie do obiektu form, w którym umieszczony jest przycisk. [Brak 213] • name- łańcuch znaków zawierający nazwę przycisku. • type - łańcuch znaków zawierający wartość parametru TYPE etykiety INPUT. [Brak 211] łańcuch znaków zawierający wartość przycisku. • value - • click • focus () - Metody () - emuluje kliknięcie przycisku przez użytkownika. umieszcza miejsce wprowadzania na przycisku. [Brak 213] Procedury obsługi zdarzeń • onClick - określa kod JavaScriptu, który ma zostać wykonany gdy użytkownik kliknie na przycisku. • onFocus - określa kod JavaScriptu, który ma zostać wykonany gdy miejsce wprowadzania zostanie umieszczone na przycisku. [Brak 213] Informacje o języku JavaScript 543 Obiekt combo [CI21311] Obiekt combo odpowiada HTML. polom typu combobox, umieszczanym na formularzach Właściwości wartość logiczna określająca czy pole jest uaktywnione. [Brak 213] • enabled - • form odwołanie do umieszczone. [Brak 213] • listCount -liczba • listlndex - • multiSeleet • name- • value - • addltem(indeks) • eliek () - emuluje kliknięcie na polu. • elear () - czyści zawartość pola combo. • foeus () - umieszcza miejsce wprowadzania na przycisku. • removeltem (indeks) - obiektu form, w którym pole combo zostało całkowita określająca ilość elementów listy. liczba całkowita określająca indeks wybranego elementu listy. - wartość logiczna określająca czy w polu combo można wybrać więcej niż jeden element. łańcuch znaków określający nazwę pola combo. łańcuch znaków określający wartość pola combo. Metody - umieszcza nowy element w polu combo, przed elementem o indeksie podanym za pomocą parametru indeks. [Brak 213] usuwa element o podanym indeksie z pola combo. Procedury obsługi zdarzeń • onCliek - określa kod JavaScriptu, który ma zostać wykonany gdy użytkownik kliknie na przycisku. • onFoeus - określa kod JavaScriptu, który ma zostać wykonany gdy miejsce wprowadzania zostanie umieszczone na przycisku. [Brak 213] JavaScript 544 Obiekt Date [CI21311] Obiekt Date udostępnia metody pracy z datami oraz z czasem, w skryptach napisanych w języku JavaScript. Egzemplarze obiektów tego typu mogą być tworzone za pomocą polecenia o postaci: nowyObiekt = new Date(daneODacie) Gdzie daneODacie są opcjonalnym parametrem określającym konkretną datę, i mogą mieć jedną z poniższych postaci: "miesiąc dzień, rok godziny:minuty:sekundy" rok, miesiąc, dzień rok, miesiąc, dzień, godziny, minuty, sekundy przy czym w przypadku dwóch ostatnich opcji, należy podać wartości całkowite. Jeśli parametr daneODacie nie zostanie podany, to utworzony obiekt będzie zawierać aktualną datę i czas. Właściwości • daje możliwość prototype Date. dodawania nowych właściwości do obiektu [Brak 2] Metody zwraca dzień miesiąca jako liczbę całkowitą z zakresu od 1 do 31. • getDate () - • getDay () - • getHours () - • getMinutes • getMonth () - zwraca miesiąc jako liczbę całkowitą z zakresu od O do 11, gdzie O odnosi się do Stycznia, a 11 do Grudnia. • getSeconds zwraca dzień tygodnia w postaci liczby całkowitej, gdzie zera określa Niedzielę, a jeden Poniedziałek. zwraca godzinę jako liczbę całkowitą z zakresu od O do 23. () - () - zwraca minutę jako liczbę całkowitą z zakresu od O do 59. zwraca ilość sekund jako liczbę całkowitą z zakresu do O do 59. zwraca ilość milisekund, które upłynęły począwszy od godziny 00:00:00 dnia 1 Stycznia 1970 roku. • getTime () - • getTimezoneOffset • getYear () - () - zwraca różnicę czasu pomiędzy czasem lokalnym i czasem Greanwich, różnica ta wyrażona jest w minutach. zwraca rok w postaci dwu-cyfrowej liczby całkowitej. Informacje o języku JavaScript • 545 - zwraca ilość milisekund jakie upłynęły od godziny 00:00:00 dnia 1 Stycznia 1970 a datą podaną jako łańcuch znaków w wywołaniu funkcji. [Brak I] parse (data) • setDate (wartośćDaty) Date, parametr • setHours setMinutes ilośćMinut • ustawia dzień miesiąca dla aktualnego obiektu ty jest liczbą całkowitą z zakresu od l do 31. ustawia godzinę dla aktualnego obiektu Date, jest liczbą całkowitą z zakresu od O do 23. (i~ośćGodzin) ilośćGodzin • - wartośćDa (ilośćMinut) - ustawia minuty dla aktualnego obiektu Date, jest liczbą całkowitą z zakresu od O do 59. - ustawia miesiąc dla aktualnego obiektu Date, jest liczbą całkowitą z zakresu od O do 11 (gdzie O to Styczeń, setMonth (ilośćMiesięcy) ilośćMiesięcy l• Luty, itd.). setSeconds Date, - ustawia ilość sekund dla aktualnego obiektu liczbą całkowitą z zakresu od O do 59. (ilośćSekund) ilośćSekundjest • - ustawia datę oraz godzinę dla aktualnego obiektu Date, wartośćCzasu określa ilość milisekund jakie upłynęły od godziny 00:00:00 dania l Stycznia 1970 roku. • seYear (rok) - określa rok dla aktualnego obiektu Date, parametr nien być liczbą całkowitą większą od 1900. • toGMTString () - zwraca aktualną datę i czas w postaci łańcucha znaków zapisanegowkonwencjiGMT("Mon, 10 Dec 1996 17:49:09"). setTime (wartośćCzasu) • toLocalString () - zapisanych w formie • rok powi- zwraca aktualną datę i godzinę jako łańcuch znaków "MM/DD/RR GG:MM:SS". zwraca ilość milisekund jakie upłynęły od godziny 00:00:00 dnia l Stycznia 1970 roku do daty podanej jako argument o postaci łańcucha znaków, w którym poszczególne elementy daty i czasu zostały oddzielone przecinkami. UTC(rok,miesiąc,dzień,godziny,minuty,sekundy) Obiekt document [CI21311] Obiekt document odpowiada aktualnie wyświetlanemu dokumentowi HTML. Właściwości - kolor aktywnego połączenia wyrażony za pomocą nazwy lub szesnastkowej wartości RGB. J • alinkColor • anchors - tablica obiektów typu anchor, komórki tablicy ułożone są w kolejności występowania kotwic w dokumencie HTML. Ilość kotwic możesz określić za pomocą właściwości anchors .length. JavaScript 546 • applets tablica obiektów typu applet, komórki tablicy ułożone są w kolejności występowania apletów w dokumencie HTML. Ilość apletów możesz określić za pomocą właściwości applets . length. [Brak 2] • bqColor - kolor tła dokumentu. eookie - łańcuch znaków zawierający • wartości cookies dla danego doku- mentu. • embeds - tablica obiektów typu plugin, komórki tablicy ułożone są w kolejności występowania dodatków w dokumencie HTML. Ilość dodatków możesz określić za pomocą właściwości embeds . length. [Brak 211] • fqColor - • forms - tablica obiektów typu form, komórki tablicy ułożone są w kolejności występowania formularzy w dokumencie HTML. Ilość formularzy określić możesz za pomocą właściwości forms. length. • images - tablica obiektów typu image, komórki tablicy ułożone są w kolejności występowania obrazków w dokumencie HTML. Ilość obrazków możesz określić za pomocą właściwości images .length. [Brak 211] • kolor tekstu dokumentu. laatModified - łańcuch znaków określający datę ostatniej modyfikacji doku- mentu. • linkColor - kolor połączeń wyrażony za pomocą nazwy lub szesnastkowej wartości RGB. • links - tablica obiektów typu link, komórki tablicy ułożone są w kolejności występowania połączeń w dokumencie HTML. Ilość połączeń określić możesz za pomocą właściwości links. length. • loea tion - łańcuch znaków zawierający adres URL aktualnego dokumentu HTML. Właściwość ta zostanie w przyszłości usunięta, więc zamiast niej używaj właściwości document. URL. • referrer • ti tle - • URL - • vlinkColor • elear () - czyści okno dokumentu. [Brak I] • elose () - zamyka strumień wyjściowy. - łańcuch znaków zawierający adres strony WWW, z której użytkownik przeszedł do aktualnej strony. łańcuch znaków zawierający tytuł aktualnego dokumentu HTML. łańcuch znaków zawierający adres aktualnego dokumentu HTML. [Brak I] - kolor odwiedzonych połączeń wyrażony za pomocą nazwy lub szesnastkowej wartości RGB. Metody Informacje o języku JavaScript • open (typMIME) - otwiera strumień wyjściowy, za pomocą którego można użyć metod writeln () i write () do dynamicznego stworzenia dokumentu. typMIME jest opcjonalnym parametrem określającym typ MIME dokumentu (na przykład: text/html, image/gif, itp.). • wri te () - • wri teIn () - umieszcza tekst oraz etykiety HTML w określonym dokumencie, na końcu podanego łańcucha znaków umieszcza znak nowej linii. 547 umieszcza tekst oraz etykiety HTML w określonym dokumencie. Obiekt FileUpload [CI3] Odpowiada elementom FileUpload umieszczanym w formularzach HTML. Właściwości • name - • vaIue - łańcuch znaków określający nazwę elementu. łańcuch znaków określający wartość pola. Obiekt form [CI21311] Obiekt f o rm odpowiada formularzom HTML. Każdy formularz umieszczony w dokumencie HTML posiada odpowiadający mu obiekt form. Właściwości • action - łańcuch znaków zawierający adres URL miejsca, gdzie zostaną wysłane dane z formularza. • - tablica obiektów odpowiadających wszystkim elementom umieszczonym na formularzu. Obiekty te ułożone są w kolejności ich występowania w formularzu. • encodinq • method - eIements - łańcuch znaków zawierający typ kodowania MIME, który użyty zostanie do przesyłania danych umieszczonych w formularzu. Odpowiada on wartości parametru ENCTYPE etykiety FORM. łańcuch znaków określający metodę przesyłu danych z formularza do serwera. • tarqet - łańcuch znaków zawierający nazwę okna, w którym zostaną wyświetlone wyniki przesłania danych do serwera. JavaScript 548 Metody o- czyści wszystkie pola formularza. [Brak 211] • reset • submi t () - powoduje przesłanie danych do serwera. Procedury obsługi zdarzeń • onReset - określa kod JavaScriptu, czyszczenia formularza. [Brak 211] który zostanie wykonany w przypadku • onSubmi t - określa kod JavaScriptu, który zostanie wykonany przy okazji przesyłania danych z formularza do serwera. Kod ten powinien zwrócić wartość true, aby pozwolić na przesłanie danych; lub wartość false, aby zapobiec wysyłaniu danych do serwera. Obiekt frame [CI21311] Obiekt frame odpowiada zawartości konkretnej ramki. Właściwości • frames - tablica obiektów reprezentujących wszystkie ramki w oknie. Obiekty w tablicy ułożone są w kolejności, w jakiej pojawiają się one w kodzie źródłowym dokumentu HTML. • onblur - łańcuch znaków odpowiadający, zdefiniowanej dla ramki, procedurze obsługi onBlur. Właściwości tej można przypisać nową wartość, co spowoduje zmienienie procedury obsługi zdarzenia. [Brak 2] • onfocus - łańcuch znaków odpowiadający, zdefiniowanej dla ramki, procedurze obsługi onFocus. Właściwości tej można przypisać nową wartość, co spowoduje zmienienie procedury obsługi zdarzenia. [Brak 2] • parent • self - łańcuch znaków określający nazwę okna zawierającego układ ramek. alternatywna metoda dostępu do obiektu reprezentującego aktualne okno. • top alternatywna okno w hierarchii. • window - okno. metoda dostępu do obiektu reprezentującego alternatywna metoda dostępu do obiektu reprezentującego najwyższe aktualne Informacje o języku JavaScript 549 Metody (wiadomość) - wyświetla wiadomość w okienku dialogowym. • alert • bIur () - • close () - • confirm (wiadomość) - wyświetla wiadomość w okienku dialogowym zawierającym przyciski OK, oraz CANCEL. Jako wynik zwraca wartości true lub false, w zależności od przycisku klikniętego przez użytkownika. • focus () - • open (url,nazwa, opcje) powoduje wyświetlenie strony o adresie podanym za pomocą parametru ulr w oknie o nazwie nazwa. Jeśli okno nie istnieje, to tworzone jest nowe okno. Parametr opcje zawiera łańcuch znaków w którym można podać dodatkowe informacje na temat nowego okna. W tym łańcuchu znaków podać można dowolne w poniższych par nazwa-wartość; poszczególne pary powinny być oddzielone przecinkami, a w całym łańcuchu znaków nie powinny występować żadne spacje: usuwa miejsce wprowadzania z aktualnej ramki. [Brak 2] zamyka okno. umieszcza miejsce wprowadzania w aktualnej ramce. [Brak 2] • toolbar= (yes, no, narzędziowy • location=(yes,no, 1, O] - określa czy okno powinno posiadać pole służące do wprowadzania adresu • directories=(yes,no,l,O] - określa czy okno powinno posiadać przyciski ułatwiające poruszanie się pomiędzy stronami WWW • status=(yes,no,l,O] statusu • menubar= (yes, no, 1, O] menu • scrollbars=(yes,no,l,O] paski przewijania • resizable=(yes,no,l,O] - określa czy użytkownik możliwość zmieniania wielkości okna • width=piksele • height=piksele 1, O] - - - określa czy okno powinno posiadać pasek określa czy okno powinno posiadać pasek określa czy okno powinno posiadać pasek - określa czy okno powinno posiadać będzie miał określa szerokość okna w pikselach - określa wysokość okna w pikselach odpowiedź) - wyświetla wiadomość w oknie dialogowym zawierającym dodatkowo pole tekstowe; domyśla wartość tego pola określona jest za pomocą argumentu odpowi edź. • prompt (wiadomość, • setTimeout (wyrażenie, czas) powoduje wykonanie polecenia podanego za pomocą argumentu vlyrażenie, po upłynięciu podanej ilości milisekund; długość odcinka czasu określona jest za pomocą argumentu czas. Czynności odmierzania czasu i wykonania polecenia można nadać nazwę: nazwa = setTimeout(wyrażenie,czas) 550 JavaScript • clearTimeout (nazwa) - przerywa wykonywanie odliczania o podanej na- zwie. Procedury obsługi zdarzeń określa kod JavaScriptu, który ma zostać wykonany w chwili, gdy miejsce wprowadzania zostanie usunięte z ramki. [Brak 2] • onBlur - • onFocus - określa kod JavaScriptu, który ma zostać wykonany kiedy miejsce wprowadzania zostanie ustawione w danej ramce. [Brak 2] Obiekt Fuction [CI3] Obiekt Function pozwala na zdefiniowanie kodu JavaScriptu, który zostanie zinterpretowany jako funkcja. Składnia polecenia definiującego nową funkcję wygląda w następujący sposób: nazwaFunkeji = new Function (argl ,arg2, ... , kodFunkej i l. Odpowiada to definicji w kodzie źródłowym: function nazwaFunkeji(argl, kodFunkcji arg2, ... l { Różnica pomiędzy oboma sposobami definicji funkcji jest taka, że w przypadku zdefiniowania jej jako obiektu Function, kod funkcji będzie interpretowany przy każdym odwołaniu do zmiennej. Właściwości • arguments - tablica zawierająca argumenty wywołania funkcji, w kolejności w jakiej zostały one zdefiniowane. Ilość argumentów wywołania określić można za pomocą właściwości arguments .length. • prototype - pozwala na dodawanie właściwości do obiektu Function. Obiekt hidden [CI21311] Obiekt hidden odpowiada ukrytym polom umieszczanym na formularzach HTML. Właściwości • name - • type - INPUT. • value - łańcuch znaków określający nazwę pola. łańcuch znaków odpowiadający [Brak 211] wartości parametru łańcuch znaków zawierający wartość pola. TYPE etykiety Informacje o języku JavaScript 551 Obiekt history [CI21311] Obiekt his tory pozwala skryptom na operowanie listą historyczną przeglądarki. Ze względów bezpieczeństwa, oraz w celu zachowania prywatności, adresy zapisane na liście nie są dostępne dla skryptów. Właściwości' • length - liczba całkowita określająca ilość elementów na liście historycznej. [Brak I] Metody o - cofa się, powodując wyświetlenie mentu. [Brak I] odwiedzonego wcześniej doku- • back • forward () - idzie do przodu, powodując wyświetlenie dokumentu odwiedzonego przed cofnięciem się. [Brak I] • go (numer) - powoduje wyświetlenie dokumentu znajdującego się na podanym miejscu listy historycznej. Miejsce to zostaje określone za pomocą numeru, który może być liczbą całkowitą lub łańcuchem znaków. Jeśli jest to liczba całkowita, to określa ona pozycję elementu na liście historycznej, względem aktualnie wyświetlonej strony. Może to być liczba dodatnia, lub ujemna. Jeśli argument numer jest łańcuchem znaków, to określa on całość, lub część, adresu URL strony, którą należy wyświetlić. [Brak I] Obiekt Image [CI21311] Obiekt Image odpowiada obrazkom umieszczanym na stronach www. Właściwości • border - liczba całkowita określająca szerokość ramki wokół rysunku (w pik- selach). • complete - wartość logiczna określająca czy kopiowanie obrazka zostało zakończone. • height - liczba całkowita określająca wysokość obrazka w pikselach. • hspace - liczba całkowita odpowiadająca wartości parametru HSPACEetykiety IMAGE. • lowsrc łańcuch znaków określający o niskiej rozdzielczości. nazwę alternatywnej wersji obrazka 552 JavaScript łańcuch znaków określający nazwę obiektu Image. • name- • prototype • src - • vspace -liczba pozwala na dodawanie właściwości do obiektu Image. - łańcuch znaków definiujący adres URL obrazka. całkowita odpowiadająca wartości parametru VSPACE etykiety IMAGE. • width - liczba całkowita określająca szerokość obrazka w pikselach. Procedury obsługi zdarzeń • onAbort - określa kod JavaScriptu, który ma zostać wykonany w przypadku przerwania kopiowania obrazka. [Brak 2] • onError - określa kod JavaScriptu, który ma zostać wykonany w przypadku wystąpienia błędu kopiowania obrazka. Zwrócenie wartości false jako wyniku działania tej procedury obsługi powoduje, iż nie będą wyświetlane komunikaty o ewentualnych błędach w kopiowaniu obrazków. [Brak 2] • onLoad - określa kod JavaScriptu, który ma zostać wykonany w chwili zakończenia ładowania obrazka. [Brak 2] Obiekt łlnk [CI21311] Obiekt link odpowiada tekstowemu hiperpołączeniu kiety BODY dokumentu HTML. zdefiniowanemu wewnątrz ety- Właściwości łańcuch znaków zawierający nazwę kotwicy podaną w adresie URL. • hash - • host • hostname - • href - • pathname - - łańcuch znaków zawierający nazwę hosta oraz numer portu podany w adresie URL. łańcuch znaków zawierający nazwę hosta podaną w adresie URL. łańcuch znaków zawierający cały adres URL. łańcuch znaków zawierający ścieżkę dostępu do pliku podaną w adresie URL. • port - • protocol łańcuch znaków zawierający numer portu podany w adresie URL. - łańcuch znaków zawierający nazwę protokołu podaną w adresie URL (włącznie ze znakiem dwukropka). Informacje o języku JavaScript 553 • search - łańcuch znaków zawierający zapytanie podane w adresie URL (fragment po znaku ,,1"). • tarqet - łańcuch znaków zawierający nazwę okna, lub ramki, określoną za pomocą parametru TARGET. Procedury obsługi zdarzeń określa kod JavaScriptu, który ma zostać wykonany wskaźnik myszy będzie przesuwany nad tekstem połączenia. [Brak 213] kiedy • moveMouse - • onClick - określa kod JavaScriptu, który ma zostać wykonany w przypadku kliknięcia na połączeniu. • onMouseOver - określa kod JavaScriptu, który ma zostać wykonany wskaźnik myszy będzie przesuwany nad tekstem połączenia. kiedy Obiekt location [C121311] Obiekt location pozwala na dostęp do informacji dotyczących adresu aktualnie wyświetlonej strony. Właściwości łańcuch znaków zawierający nazwę kotwicy podaną w adresie URL. • hash - • host • hostname - • href - • pathname - łańcuch znaków zawierający nazwę hosta oraz numer portu podany w adresie URL. łańcuch znaków zawierający nazwę hosta podaną w adresie URL. łańcuch znaków zawierający cały adres URL. - łańcuch znaków zawierający ścieżkę dostępu do pliku podaną w adresie URL. łańcuch znaków zawierający numer portu podany w adresie URL. • port - • protocol • search - łańcuch znaków zawierający zapytanie podane w adresie URL (fragment po znaku ,,1"). • tarqet łańcuch znaków zawierający za pomocą parametru TARGET. łańcuch znaków zawierający nazwę protokołu podaną w adresie URL (włącznie ze znakiem dwukropka). - nazwę okna, lub ramki, określoną JavaScript 554 Metody • reload () - powoduje ponowne skopiowanie i wyświetlenie aktualnego dokumentu. [Brak 211] • replace (url) ładuje dokument o podanym adresie ur l i zapisuje go w miejscu aktualnego dokumentu na liście historycznej, przez co staje się niemożliwe ponowne wyświetlenie odwiedzonej poprzednio strony, za pomocą przycisku Back. Obiekt Math [CI21311] Obiekt Math dostarcza właściwości i metod, pozwalających sowanych obliczeń matematycznych. na dokonywanie zaawan- Właściwości wartość stałej Eulera (około 2.118), jest to podstawa logarytmu naturalnego. • E- • LN10 - • LN2 - • LOG10E - • LOG2E - • PI - • SQRT1_ 2 - • SQRT2 - • abs (liczba) - zwraca wartość absolutną liczb. Wartość absolutna to wartość liczby, w której został zignorowany znak, tak więc abs (-4) wynosi 4, podobnie jak abs (4) . • acos (liczba) - oblicza arcus cosinus • asin (liczba) - oblicza arcus sinus • atan (liczba) - oblicza arcus tangens • oblicza kont współrzędnych polarnych, odpowiadających współrzędnym kartezjańskim (liczbal , liczba2). [Brak I] • ceil (liczba) zwraca najmniejszą podanemu argumentowi. wartość logarytmu naturalnego z dziesięciu (około 2.302). wartość logarytmu naturalnego z dwóch (około 0.693). wartość logarytmu dziesiętnego z liczby E (około 0.434). wartość logarytmu o podstawie dwa z liczby E (około 1.442). wartość liczby I1 (około 3.1415). wartość pierwiastka kwadratowego z liczby 0.5 (około 0.707). wartość pierwiastka kwadratowego z liczby 2 (około 1.414). Metody atan2 (liczbal,liczba2) podanej w radianach. liczby liczby podanej w radianach. liczby podanej w radianach. - liczbę całkowitą większą lub równą Informacje o języku JavaScript • • 555 cos (~ic:zba) - oblicza cosinus exp (Hc:zba) - oblicza wartość liczby E podniesionej do potęgi określonej za l i c zba. pomocą argumentu li czby podanej w radianach. • floor (~iczba) zwraca największą podanemu argumentowi. liczbę całkowita mniejszą lub równą • log (~iczba) • max (Hc:zbal, Hc:zba2) - zwraca większą z dwóch podanych liczb. • min (Hc:zbal, ~ic:zba2) - zwraca mniejszą z dwóch podanych liczb. • pow(Hc:zbal,Hc:zba2) - oblicza wartość oblicza logarytm naturalny z podanego argumentu. - określonej za pomocą liczby1 podniesionej do potęgo liczby2. zwraca liczbę pseudolosową z zakresu od zero do jeden. • random () - • round(Hc:zba) - • sin(~ic:zba) - oblicza sinus • sqrt (~iczba) • tan (~ic:zba) - zaokrągla liczbę do najbliższej liczby całkowitej. liczby podanej w radianach. oblicza pierwiastek kwadratowy liczby. - oblicza tangens liczby podanej w radianach. Obiekt mimeType [C121311] Obiekt rnirneType określa typy kodowania MIME, które mogą być obsłużone prze używaną przeglądarkę. Właściwości łańcuch znaków odpowiadający typowi MIME. • type - • description • enabledPluqin • suffixes - łańcuch znaków zawierający rozszerzenia plików używających danego typu kodowania MIME; poszczególne rozszerzenia oddzielone są od siebie za pomocą przecinków. - łańcuch znaków zawierający opis typu MIME. odwołanie do obiektu typu pl ugin, który obsługuje dany typ kodowania MIME. - Obiekt navigator [C121311] Obiekt navigator gatora. udostępnia informacje dotyczące używanej wersji Netscape Navi- 556 JavaScript Właściwości • appCodeName łańcuch znaków zawierający ("Mozilla w przypadku Netscape Navigatora). nazwę kodową przeglądarki II • appName łańcuch znaków zawierający w przypadku Netscape Navigatora). • appVersion - łańcuch znaków zawierający numer wersji przeglądarki; postać łańcucha jest następująca: numerVersji nazwę przeglądarki ("Netscape" (system; kraj) Dla przykładu, Netscape Navigator 2.0, wersja beta numer 6, międzynarodowa, będzie posiadał następujące informacje dotyczące wersji: 2. Ob6 (Win32; I). tablica obiektów typu mimeType, odpowiadających kodowani MIME obsługiwanym przez przeglądarkę. [Brak 211] • mimeTypes - • pluqins • userAqent sposobom - tablica obiektów typu plugin odpowiadających wszystkim dodatkom umieszczonym w aktualnym dokumencie, ułożonym w kolejności ich występowania w kodzie źródłowym. [Brak 21I] - łańcuch znaków zawierający pełną nazwę oraz numer wersji przeglądarki. Łańcuch ten zawiera informacje umieszczone we właściwościach appCodeName oraz appVersion: Mozilla/2.0b6 (Win32; I) Metody • javaEnabled () Zwraca wartość logiczną, określającą czy w przeglądarce włączonajest obsług apletów Javy. [Brak 211] Obiekt Option [Cl3] Obiekt Option używany jest do tworzenia elementów wyświetlanych w listach. W celu dodania nowego elementu listy należy posłużyć się następującymi poleceniami: nazwaOpcji = new Option(tekstOpcji,wartośćOpcji, ~ domyślnieZaznaczony, zaznaczony); nazwaListy.options[indeks) = nazwaOpcji; Właściwości • defaultSelected - wartość-logiczna, wskazująca czy dana opcja jest do- myślnie zaznaczona. • index - liczba całkowita określająca indeks elementu w liście. • prototype • selected • text - • value - - Informacje o języku JavaScript 557 daje możliwość dodawania właściwości do obiektu Option. wartość logiczna, określająca czy dana opcja jest wybrana. - łańcuch znaków zawierający tekst wyświetlany na liście. łańcuch znaków zawierający tekst, który zostanie wysłany do serwera przy przesyłaniu formularza, jeśli na liście wybrana będzie dana opcja. Obiekt password [C121311] Obiekt password odpowiada polom tekstowym typu password. Właściwości • defaul tValue - tość parametru łańcuch znaków zawierający domyślną wartość pola (waretykiety INPUT). VALUE wartość logiczna wskazująca czy pole jest uaktywnione. [Brak 213] • enabled - • form - odwołanie do obiektu formularza, w którym umieszczone jest dane pole. [Brak 213] • name- • value - • focus () - • blur () - • select łańcuch znaków zawierający nazwę pola. łańcuch znaków zawierający wartość pola. Metody emuluje ustawienie miejsca wprowadzania na polu. emuluje usunięcie miejsca wprowadzania z pola. () - emuluje zaznaczenie zawartości pola. Procedury obsługi zdarzeń • onBlur - określa kod JavaScriptu, który zostanie wykonany w momencie usunięcia miejsca wprowadzania z pola. • onFocus - określa kod JavaScriptu, który zostanie wykonany ustawienia miejsca wprowadzania w polu. w momencie Obiekt plugin Obiekt plugin odpowiada jednemu z dodatków zainstalowanych w przeglądarce. 558 JavaScript Właściwości łańcuch znaków zawierający nazwę dodatku. • name- • filenaae - łańcuch znaków zawierający nazwę pliku, w którym dodatek przechowywany jest na dysku lokalnym. • descl!"iptiol'l - łańcuch znaków zawierający opis dodatku. Obiekt radio [Cf21311] Obiekt radio odpowiada grupie przycisków typu radio, które można umieszczać na formularzach HTML. W celu odwołania się do poszczególnych przycisków, należy użyć indeksów, których wartości rozpoczynają się od zera. Na przykład, odwołania do przycisków znajdujących się w grupie przycisków typu radio o nazwie testRadio, mogą mieć następującą postać: testRadio [O), testRadio [l), itp. Właściwości • checked - wartość logiczna określająca czy dany przycisk jest zaznaczony. Można jej użyć do zaznaczenia przycisku, lub usunięcia z niego znaku zaznaczema. • defaul tChecked - wartość logiczna określająca czy dany przycisk jest domyślnie zaznaczony (odpowiada wartości parametru CHECKED). [Brak I] • enabled - • form - odwołanie do obiektu formularza, w którym umieszczone jest dane pole. [Brak 213] • length - • name- • value - • click • focus () - wartość logiczna wskazująca czy pole jest uaktywnione. [Brak 213] liczba całkowita określająca ilość przycisków w grupie. [Brak I] łańcuch znaków zawierający nazwę pola. łańcuch znaków zawierający wartość pola. Metody () - emuluje kliknięcie na przycisku. ustawia miejsce wprowadzania na danym przycisku. [Brak 213] Procedury obsługi zdarzeń • onClick - określa kod JavaScriptu, kliknięcia na przycisku. który zostanie wykonany w momencie Informacje o języku Ja~aScńpt • • 559' - określa kod JavaScriptu, który zostanie wykonany w momencie ustawienia miejsca wprowadzania na danym przycisku. [Brak 213] onFocus Obiekt reset [CI21311] Obiekt reset odpowiada przyciskom Reset umieszczanym na formularzach HTML Właściwości - wartość logiczna wskazująca czy pole jest uaktywnione. [Brak 213] • enabled • form - odwołanie do obiektu formularza, w którym umieszczone jest dane pole. [Brak 213] c name - c value - • click c focus () - łańcuch znaków zawierający nazwę pola. łańcuch znaków zawierający wartość pola. Metody () - emuluje kliknięcie na przycisku. ustawia miejsce wprowadzania na danym przycisku. [Brak 213] Procedury obsługi zdarzeń c onClick - określa kod JavaScriptu, kliknięcia na przycisku. c onFocus - który zostanie wykonany w momencie określa kod JavaScriptu, który zostanie wykonany w momencie ustawienia miejsca wprowadzania na danym przycisku. [Brak 213] Obi,ekt select [CI213] Obiekt select HTML odpowiada listom wyboru, które można umieszczać na formularzach Właściwości liczba całkowita określająca ilość opcji znajdujących się w liście. c length - c name - łańcuch znaków zawierający nazwę listy. 560 JavaScript options - tablica obiektów odpowiadających wszystkim opcjom występującym na liście. Kolejność elementów tablicy określona jest ułożeniem opcji w definicji listy. Właściwość options jest obiektem, który posiada swoje własne właściwości: • • defaultSelected - wartość logiczna określająca, czy dana opcja jest domyślnie wybrana (odpowiada parametrowi SELECTED). • index - • length - • name - łańcuch znaków zawierający nazwę opcji. • selected - wartość logiczna określająca czy dana opcja jest wybrana. Właściwość ta może zostać użyta do zaznaczenia opcji lub usunięcia jej zaznaczema • liczba całkowita odpowiadająca indeksowi opcji. liczba całkowita odpowiadająca ilości opcji w liście. selectedlndex - liczba całkowita określająca indeks aktualnie wybra- nej opcji. '.. • - łańcuch znaków, który wyświetlany jest na liście dla danej opcji. • text • value łańcuch znaków zawierający wartość danej opcji (zawiera wartość parametru VALUE etykiety OPTION). selectedIndex - liczba całkowita określająca indeks aktualnie wybranej opcji. Metody • blur () - • focus () - usuwa miejsca wprowadzania z listy. [Brak 213] ustawia miejsca wprowadzania na liście. [Brak 213] Procedury obsługi zdarzeń • onBlur - określa kod JavaScriptu, który zostanie wykonany w momencie usunięcia miejsca wprowadzania z pola. • onFocus - określa kod JavaScriptu, który zostanie wykonany ustawienia miejsca wprowadzania na pola. • określa kod JavaScriptu, który zostanie wykonany kiedy zmieni się opcja wybrana na liście. w momencie onChaqe - Obiekt String [CI21311] Obiekt String dostarcza właściwości zmiennych i literałów tekstowych. oraz metod pozwalających na przetwarzanie Informacje o języku JavaScript 561 Właściwości • length liczba całkowita określająca znaków zapisanych w łańcuchu. • prototype • anchor (nazwa) - zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety A, przy czym parametrowi NAMEzostaje przypisane wartość argumentu nazwa. • big () - • blink () - • bold () - • charAt (indeks) • fixed() - zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety TT. • fontColor (kolor) zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety FONT, przy czym parametrowi COLORzostaje przypisana wartość argumentu kolor, który może zostać podany jako nazwa - łańcuch znaków, lub też jako szesnastkowa wartość RGB. [Brak I] • zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety FONTSIZE, przy czym wielkość fontu zostaje określona za pomocą argumentu size. [Brak I] • indexOf (łańcuch, indeks) metoda ta przeszukuje łańcuch znaków zapisany w obiekcie, szukając w nim łańcucha podanego jako parametr łańcuch; przeszukiwanie rozpoczyna się od znaku o podanym indeksie. Jeśli łańcuch znaków zostanie odnaleziony, to metoda zwraca jego indeks. • i talics - długość łańcucha znaków - ilość daje możliwość dodawania właściwości do obiektu String. Metody zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety BIG zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety BLINK. zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety B. fontSize String • - zwraca znak o podanym indeksie. (wielkość) - () zwraca łańcuch znaków składający umieszczonej wewnątrz etykiety I się z wartości obiektu las tIndexOf (łańcuch, indeks) na podstawie podanego łańcucha znaków, oraz indeksu, metoda określa indeks ostatniego wystąpienia podanego łańcucha, zaczynając poszukiwania od litery o podanym indeksie i postępując w kierunku początku łańcucha. 562 JavaScript link (href) zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety A, przy czym adres docelowy połą- • czenie określany jest na podstawie argumentu href. • sma1l () - zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety SMALL. • spli t (separa tor) - metoda zwraca tablicę łańcuchów powstałych poprzez podzielenie oryginalnego łańcucha znaków; jako separator używana jest litera podana jako argument wywołania metody. • strike () - zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety STRIKE. • sub () - zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety SUB. • metoda ta, na podstawie dwóch podanych indeksów, zwraca łańcuch rozpoczynający się od znaku określonego przez indeksPoczątku, a kończąc na znaku określonym poprzez indeksKońca; jeśli oba podane indeksy są sobie równe, to zwracany jest pusty łańcuch znaków. • sup () - zwraca łańcuch znaków składający się z wartości obiektu String umieszczonej wewnątrz etykiety sUP. • toLowerCase () - zwraca łańcuch znaków zapisany przy pomocy małych liter. • toUpperCase () - zwraca łańcuch znaków zapisany przy pomocy wielkich liter. substring (indeksPoczątku, indeksKońca) - Obiekt submit [CI21311] Obiekt submi t odpowiada przyciskom Submit umieszczanym na formularzach HTML. Właściwości wartość logiczna wskazująca czy pole jest uaktywnione. [Brak 213J • enabled - • form - odwołanie do obiektu formularza, w którym umieszczone pole. [Brak 213J • name - • type - INPUT. • value - jest dane łańcuch znaków zawierający nazwę pola. łańcuch znaków odpowiadający [Brak 21IJ wartości parametru łańcuch znaków zawierający wartość pola. TYPE etykiety Informacje o języku JavaScript 563 Metody • click • focus () - emuluje kliknięcie na przycisku. () - ustawia miejsce wprowadzania na danym przycisku. [Brak 213] Procedury obsługi zdarzeń • onClick - określa kod JavaScriptu, kliknięcia na przycisku. który zostanie wykonany w momencie • onFocus - określa kod JavaScriptu, który zostanie wykonany w momencie ustawienia miejsca wprowadzania na danym przycisku. [Brak 213] Obiekt text [CI21311] Obiekt text odpowiada polom tekstowym umieszczanym na formularzach HTML. Właściwości • defaul tVaIue - tość parametru łańcuch znaków zawierający domyślną wartość pola (waretykiety INPUT). VALUE wartość logiczna wskazująca czy pole jest uaktywnione. [Brak 213] • enabIed - • form - odwołanie do obiektu formularza, w którym umieszczone jest dane pole. [Brak 213] • name- • type INPUT. łańcuch znaków zawierający nazwę pola. łańcuch znaków odpowiadający [Brak 211] wartości parametru TYPE etykiety łańcuch znaków zawierający wartość pola. • vaIue - • focus () - • bIur () - • seIect Metody emuluje ustawienie miejsca wprowadzania na polu. emuluje usunięcie miejsca wprowadzania z pola. () - emuluje zaznaczenie zawartości pola. Procedury obsługi zdarzeń • onBlur - określa kod JavaScriptu, który zostanie wykonany w momencie usunięcia miejsca wprowadzania z pola. 564 JavaScript • określa kod JavaScriptu, który zostanie kiedy zmieniona zostanie onChange - zawartość pola. • onFocus - określa kod JavaScriptu, który zostanie wykonany ustawienia miejsca wprowadzania na pola. w momencie • onSelect - określa kod JavaScriptu, który zostanie wykonany kiedy użytkownik zaznaczy część, lub całą zawartość pola. Obiekt textarea [C121311] Obiekt textarea odpowiada polom tekstowym umieszczanym HTML, w których można wprowadzać wiele linii tekstu. na formularzach Właściwości • defaul tValue - tość parametru łańcuch znaków zawierający domyślną wartość pola (waretykiety INPUT). VALUE wartość logiczna wskazująca czy pole jest uaktywnione. [Brak 213] • enabIed - • form - odwołanie do obiektu formularza, w którym umieszczone jest dane pole. [Brak 213] • name - • type - INPUT. łańcuch znaków zawierający nazwę pola. łańcuch znaków odpowiadający [Brak 211] wartości parametru TYPE etykiety łańcuch znaków zawierający wartość pola. • value - • focus () - • bIur () - • select Metody emuluje ustawienie miejsca wprowadzania na polu. emuluje usunięcie miejsca wprowadzania z pola. () - emuluje zaznaczenie zawartości pola. Procedury obsługi zdarzeń • onBlur - określa kod JavaScriptu, który zostanie wykonany w momencie usunięcia miejsca wprowadzania z pola. • onChange - określa kod JavaScriptu, który zostanie kiedy zmieniona zostanie zawartość pola. • określa kod JavaScriptu, który zostanie wykonany ustawienia miejsca wprowadzania na pola. onFocus - w momencie Informacje o języku JavaScript • 565 onSelect - określa kod JavaScriptu, który zostanie wykonany kiedy użytkownik zaznaczy część, lub całą zawartość pola. Obiekt window [CI21311] Obiekt window jest najwyższym obiektem w hierarchii obiektów każdej ramki lub okna; zawiera on obiekty dokumentu, lokalizacji, oraz listy historycznej. Właściwości • defaul tStatus - łańcuch znaków zawierający świetlane na pasku statusu. informacje domyślnie wy- • frames tablica obiektów odpowiadających wszystkim ramkom w oknie. Obiekty występują w tablicy w kolejności, w jakiej zostały zdefiniowane w kodzie źródłowym dokumentu. • length -liczba • name - łańcuch znaków zawierający nazwę okna lub ramki. • opener - odwołanie do obiektu windows, w którym została wywołana metoda open () , za pomocą które zostało otworzone aktualne okno. [Brak 211] • parent • self • status - właściwość używana do wyświetlania wiadomości na pasku statusu. W celu wyświetlenia wiadomości należy przypisać łańcuch znaków tej właściwości. • top - • window - • alert • biur • close • confirm(wiadomość) wyświetla wiadomość w okienku dialogowym zawierającym przyciski OK, i CANCEL. Metoda zwraca wartość true lub false, w zależności od klikniętego przycisku. całkowita określająca ilość ramek w oknie. [Brak I] - łańcuch znaków określający nazwę okna, w którym umieszczony jest zbiór ramek. - alternatywny sposób odwołania do aktualnego okna. alternatywny sposób dostępu do głównego okna przeglądarki. alternatywny sposób odwoływania się do aktualnego okna. Metody (wiadomość) - wyświetla wiadomość w okienku dialogowym. () usuwa miejsce wprowadzania z aktualnego okna. W niektórych spowodować systemach operacyjnych, wywołanie tej metody może uaktywnienie innego okna, i ukrycie aktualnego. [Brak 211] () - zamyka okno. [Brak I] 566 JavaScript • focus () - ustawia miejsce wprowadzania w aktualnym oknie. W niektórych systemach operacyjnych spowoduje to wyświetlenie ukrytego do tej pory okna. [Brak 211] • navigator • open (url,nazwa, opcje) wyświetla stronę O podanym ur l, w oknie o nazwie na zwa. Jeśli okno O podanej nazwie nie istnieje, to tworzone jest nowe okno. opcje, to opcjonalny argument zawierający listę opcji określających parametry pracy nowego okna. Lista ta, będąca łańcuchem znaków, może zawierać dowolną ilość poniższych par nazwa-wartość, oddzielonych od siebie przecinkami: • (url) toolbar= wyświetla stronę Opodanym adresie - [yes, no, 1, O) - ur l. [Brak 213] określa czy okno powinno posiadać pasek narzędziowy • location= określa czy okno powinno posiadać pole [yes, no, 1, O) - służące do wprowadzania adresu • • directories=[yes,no,1,O) - określa czy okno powinno posiadać przyciski ułatwiające poruszanie się pomiędzy stronami WWW status=[yes,no,1,O) - określa czy okno powinno posiadać pasek statusu • menubar= [yes, no, 1, O) - określa czy okno powinno posiadać pasek menu • scrollbars=[yes,no,1,O) - określa czy okno powmno posiadać paski przewijania • • resizable= [yes, no, 1, O) określa czy użytkownik możliwość zmieniania wielkości okna • width=piksele • height=piksele będzie miał określa szerokość okna w pikselach - określa wysokość okna w pikselach odpowiedź) - wyświetla wiadomość w oknie dialogowym zawierającym dodatkowo pole tekstowe; domyśla wartość tego pola określona jest za pomocą argumentu odpow i ed prompt (wiadomość, ź, • setTimeout (wyrażenie, czas) - powoduje wykonanie polecenia podanego za pomocą argumentu wyrażenie, po upłynięciu podanej ilości milisekund; długość odcinka czasu określona jest za pomocą argumentu czas. Czynności odmierzania czasu i wykonania polecenia można nadać nazwę: nazwa = setTimeout(wyrażenie,czas) • scroll • clearTimeout zwie. (x, y) - przewija okno do podanych koordynat. [Brak 211] (nazwa) - przerywa wykonywanie odliczania o podanej na- Informacje o języku JavaScript 567 Procedury obsługi zdarzeń • onBlur - określa kod JavaScriptu, który zostanie wykonany w momencie usunięcia miejsca wprowadzania z pola. [Brak 211] • onError - określa kod JavaScriptu, który zostanie wykonany w momencie zaistnienia błędów w ładowaniu pliku. Procedura ta może zostać użyta do obsługi błędów JavaScriptu. Zwrócenie wartości false jako wyniku działania tej procedury, spowoduje przerwanie wyświetlania komunikatów o błędach JavaScriptu. [Brak 211] • onFocus - określa kod JavaScriptu, który zostanie wykonany ustawienia miejsca w oknie. [Brak 211] w momencie • onLoad określa kod JavaScriptu, zakończenia ładowania strony. w momencie • określa kod JavaScriptu, który zostanie wykonany w momencie zmienienia wyświetlanej strony. który zostanie wykonany onUnload - Funkcje niezależne, operatory, zmienne i literały Funkcje zwraca łańcuch znaków zawierający zakodowane znaki znak. Kodowanie odbywa się w ten sposób, że znak zamieniany jest na %xx gdzie xx jest liczbowym odpowiednikiem znaku. [q21311] • escape (znak) • eval (wyrażenie) • isNaN (wartość) - przetwarza wartość, i sprawdza czy jest to wartość Funkcja zwraca wartość logiczną. [q21311] [w systemie UNIX, Brak 2] • parseFloat • parselnt • taint - oblicza wartość wyrażenia arytmetycznego. [q21311] NaN. (łańcuch) przetwarza łańcuch znaków na liczbę zmiennoprzecinkową, i zwraca otrzymaną wartość. Łańcuch znaków konwertowany jest aż do momentu odnalezienia znaku, który nie jest liczbą; w przypadku odnalezienia takiego znaku zwracany jest dotychczasowy wynik. Jeśli pierwszy znak łańcucha nie może być poprawnie skonwertowany, to zwracana jest wartość NaN (a w systemie Windows wartość zero). [q21311] (łańcuch) przetwarza łańcuch znaków na liczbę całkowitą, i zwraca otrzymaną wartość. Łańcuch znaków konwertowa'hy jest aż do momentu odnalezienia znaku, który nie jest liczbą; w przypadku odnalezienia takiego znaku zwracany jest dotychczasowy wynik. Jeśli pierwszy znak łańcucha nie może być poprawnie skonwertowany, to zwracana jest wartość NaN (a w systemie Windows wartość zero). [q21311] (nazwaWłaściwości) [q21311] - dodaje znaczniki do nazwyWlaści waści. JavaScript 568 • toString () - jest to metoda, którą posiadają wszystkie obiekty. Powoduje ona zwrócenie obiektu w postaci łańcucha znaków, lub łańcucha" [obj ect typu l" jeśli nie jest dostępna żadna łańcuchowa reprezentacja obiektu. [q213] • unescape (łańcuch) metody escape • - odkodowuje łańcuch znaków zakodowany za pomocą () .[q213II] untaint (nazwaWłaściwości) - usuwa znacznik z nazwyWłaści wości. [q3] Operatory • Operatory przypisania - tabela B.l zawiera wszystkie operatory przypisania dostępne w języku JavaScript. [q2131I] • Operatory arytmetyczne - tabela B.2 zawiera wszystkie operatory arytmetyczne dostępne w języku JavaScript. [q2131I] • Operatory bitowe - tabela B.3 zawiera operatory bitowe dostępne w języku JavaScript. Operatory tego typu traktują operandy jako liczby zapisane w kodzie binarnym (o podstawie 2), jednakże zwracają normalne wartości liczbowe. [q2131I] • Operatory logiczne JavaScript. [q2131I] tabela BA zawiera operatory logiczne dostępne w języku • • Operatory porównania - tabela B.S zawiera wszystkie operatory porównania dostępne w języku JavaScript. [q2131I] • Operator warunkowy (warunek) operator warunkowy ma następującą postać: ? wartośćl : wartość2 Jeśli warunek jest spełniony, to zwracana jest wartość wartośćl, nym wypadku zwracana jest wartość2. [q2131I] w przeciw- • Operatory łańcuchowe - istnieją dwa operatory łańcuchowe. Pierwszym jest operator konkatenacji (połączenia) +. Powoduje on powstanie łańcucha znaków zawierającego wartości operandu lewostronnego i prawostronnego. Dostępny jest także operator przypisania i konkatenacji (+= ).[q213II] • typeof - jest to operator jednoargumentowy, który powoduje zwrócenie typu jego operandu. Możliwe wartości zwrócone przez ten operator to: obj ect, string, • number, boolean, function, undefined. [q31I] jest to operator jednoargumentowy, którego operandem jest wyrażenie. Operator nie powoduje zwrócenia jakiejkolwiek wartości. [q3] void - Informacje o Języku JavaScript 569 Tabela B.1. Operatory przypisania Operator Opis Przypisuje lewemu operandowi wartość prawego operandu += Dodaje wartości lewego i prawego operandu i wynik przypisuje lewemu operandowi Odejmuje wartość prawego operandu od wartości lewego operandu i wynik przypisuje do lewego operandu *= Mnoży wartości obu operandów i wynik przypisuje lewemu operandowi /= Dzieli wartość lewego operandu przez wartość prawego operandu i wynik przypisuje lewemu operandowi %= Dzieli wartość lewego operandu przez wartość prawego operandu i przypisuje lewemu operandowi ułamkową część wyniku dzielenia TabelaB.2. Operatory arytmetyczne Operator Opis + Dodaje operandy Odejmuje wartość prawego operandu od wartości lewego operandu * Mnoży operandy / Dzieli wartość lewego operandu przez wartość prawego operandu % Oblicza resztę z dzielenia ++ Dodaje do wartości operandu wartość jeden (może zostać użyty przed lub za operandem) Odejmuje wartość jeden od wartości operandu (może zostać użyty przed lub za operandem) Zmienia znak operandu Tabela 8.3. Operatory bitowe Operator Opis AND Konwertuje operandy do 32-u bitowych liczb bez znaku, porównuje odpowiadające sobie bity, i zwraca jedynkę dla każdej pary jedynek, oraz zero dla dowolnej innej kombinacji bitów. lub & OR lub I Konwertuje operandy do 32-u bitowych liczb bez znaku, porównuje odpowiadające sobie bity, i zwraca zero dla każdej pary zer, oraz jedynkę dla dowolnej innej kombinacji bitów. 570 JavaScript Tabela B.3. c.d. Operatory bitowe Operator Opis XOR Konwertuje operandy do 32-u bitowych liczb bez znaku, porównuje odpowiadające sobie bity, i zwraca jedynkę dla każdej pary w której jeden bity jest równy zero, a drugi jeden. Dla wszystkich par, w których wartości obu bitów są takie same, zwraca wartość O. lub" « Konwertuje operand lewostronny do 32-u bitowej liczb bez znaku, a następnie przesuwa jej bity w lewo o ilość bitów określoną za pomocą operandu prawostronnego. Bity, które zostaną "usunięte" z liczby przy przesuwaniu, są tracona; natomiast z prawej strony pojawiają się bity o wartości zero. » Konwertuje operand lewostronny do 32-u bitowej liczb bez znaku, a następnie przesuwa jej bity w prawo o ilość bitów określoną za pomocą operandu prawostronnego. Bity, które zostaną "usunięte" z liczby przy przesuwaniu, są tracona; natomiast z lewej strony pojawiają się bity o wartości odpowiadającej wartości naj starszego bitu oryginalnej liczby. Tabela BA. Operatory logiczne Operator Opis && Zwraca wartość true jeśli oba operandy mają wartość true II Zwraca wartość true jeśli przynajmniej jeden z operandów ma wartość true Zwraca wartość true jeśh operand ma wartość false, false jeśli operand ma wartość true lub wartość Tabela B.5. Operatory porównania Operator Opis Zwraca wartość t rue jeśli oba operandy są sobie równe != Zwraca wartość true jeśli operandy nie są równe > Zwraca true jeśli wartość lewego operandu jest większa od prawego = Zwraca true jeśli wartość lewego operandu jest większa lub równa wartości prawego Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree Cookies