144 40 226MB
Polish Pages [585] Year 1997
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 (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:
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: |
} }
!";
Gra w zapałki Michala Sramka
437
How many matches ? | |
Wyrazenie | |||
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 |