Rozdział 19. Tworzenie
skryptów JavaScript w
programie Dreamweaver
Dla większości z nas podstawowe doświadczenie z surfowania po Internecie kojarzy się przede
wszystkim z jednym  z interaktywnością. Jak wiesz, zawartość Internetu jest wytworem wielu
różnych technologii. Niektóre, jak na przykład Flash, pozwalają umieszczać na stronach WWW
animacje i dz
więki. Inne dają możliwość oglądania sekwencji filmowych, prezentacji
panoramicznych czy nawet korzystania z gier sieciowych. Od tych wszystkich elementów
multimedialnych razem ważniejsza jest możliwość zaangażowania użytkownika w prezentacje,
które udostępniasz w sieci. U podstaw tej interaktywności znajduje się JavaScript.
Jako taki, HTML należy do tych języków programowania, których możliwości tworzenia
zaawansowanej zawartości multimedialnej są raczej ograniczone. Wynika to z faktu, że HTML
opisuje głównie elementy statyczne. Tak więc, nie daje możliwości ich zmiany w czasie, nie
pozwala także, by zmiany takie wprowadzał klient czyli użytkownik. Te braki języka HTML
uzupełnia JavaScript. W tym rozdziale zajmiemy się następującymi tematami:
Podstawy języka JavaScript
Dreamweaver i JavaScript
Zmienne funkcji skryptowych
Gdzie szukać skryptów JavaScript
Wstawianie skryptu JavaScript
Edycja skryptów
Podstawy języka JavaScript
Ponieważ HTML to narzędzie statyczne (co znaczy, że coś raz wyświetlone, takie pozostaje),
tworzenie interaktywnych stron WWW wymaga sięgnięcia po inne języki programowania.
Niektóre z tych języków, na przykład Pearl czy PHP, działają na serwerach sieciowych, więc
należą do grupy języków do tworzenia aplikacji działających po stronie serwera. Języki te dają
bardzo szerokie możliwości, lecz wymagają jednego: pobrania od użytkownika danych, które
dopiero zostaną poddane obróbce. Pociąga to za sobą oczywistą negatywną konsekwencję 
spowolnienie pracy. Skorzystanie przez użytkownika z interaktywności wymaga tu wysłania
danych do serwera sieciowego, odczekania, pobrania odpowiedzi z serwera i, zazwyczaj,
wyświetlenia innej strony.
Inna grupa języków stosowanych szeroko w sieci to języki służące do tworzenia aplikacji
działających po stronie klienta. Znaczy to, że napisane w nich programy są wysyłane do
użytkownika, aby mogły być wykonywane w czasie, gdy oglądana jest strona. Daje to
zdecydowaną przewagę nad aplikacjami działającymi po stronie serwera, bowiem eliminuje
opóz
nienie. Musisz jednak zdawać sobie sprawę, że skrypty działające po stronie klienta nie są tak
odporne jak ich odpowiedniki działające po stronie serwera, a więc jak na razie oba elementy są
konieczne.
JavaScript działa głównie po stronie klienta. W swojej najpopularniejszej formie język ten
stosowany jest w połączeniu z językiem HTML w celu zwiększenia funkcjonalności strony
WWW. Ponieważ skrypty JavaScript można umieszczać bezpośrednio w kodzie HTML strony,
technologia ta jest najlepiej dostosowana do sieci  skrypty mogą powstać znacznie wcześniej niż
strona WWW. Dlatego jeśli widzisz stronę, oznacza to, że jest ona już działająca.
Podstawą technologii JavaScript jest technologia popularnie określania mianem programowania
zorientowanego obiektowo. Zastanów się nad określeniem:  zorientowany obiektowo . Obiekt, tak
jak osoba, miejsce lub rzecz to coś namacalnego, coś, co może wykonać działanie lub coś, co
można opisać. Zorientowanie kojarzy się natomiast z ukierunkowaniem. W przypadku języka
JavaScript obiekty, na które się ukierunkowujemy są elementami hierarchii, na szczycie której
znajduje się okno przeglądarki.
Być może brzmi to dla Ciebie jak rzecz oczywista lub wprost przeciwnie, wydaje się nieco zawiłe.
Niezależnie od wszystkiego, jesteś w odpowiednim miejscu, aby zanurzyć się w samo serce języka
JavaScript. Jako nowicjusz nie napiszesz na początku bardzo skomplikowanych programów, lecz
przy swojej znajomości języka HTML już umiesz więcej niż Ci się wydaje.
Elementy
W języku JavaScript można wydzielić dwa odrębne obszary. Pierwszy z nich obejmuje to, co
wbudowane, a więc to, co wiąże się z kwestiami programistycznymi i składnią języka. Na drugi
obszar składa się to, co tworzysz  są to na przykład funkcje użytkownika (pod tym określeniem
kryje się zestaw instrukcji, które wykonują cały szereg zadań) oraz dane, które chcesz zgromadzić
w pamięci.
W tym punkcie zajmiemy się elementami składowymi języka JavaScript. Jeśli wolno prześledzisz
ten materiał i spróbujesz wszystko sobie wyobrazić, złapiesz w lot o co chodzi.
Elementy: zmienne
W swej najprostszej postaci zmienne to środek przechowywania informacji w pamięci w celu
dalszego wykorzystania. Postać informacji może być różna: są to łańcuchy alfanumeryczne, dane
liczbowe lub wartości boolowskie. Zmienną definiuje wyraz var. Chyba najwięcej problemów
stwarza początkującym użytkownikom zrozumienie różnicy między łańcuchem znaków a zmienną
numeryczną. W uproszczeniu zmienna łańcuchowa przenosi dane, natomiast zmienna numeryczna
przechowuje wartości w celu dalszego ich zbadania za pomocą testu lub obliczenia.
Aby dokładniej to zrozumieć, oprzyjmy się na praktycznym przykładzie. Jeśli chcesz zapamiętać
czyjeś dane personalne i numer telefonu, zapisujesz wszystko na kawałku papieru. Póz
niej sięgasz
po niego, odczytujesz co napisałeś i postanawiasz umieścić dane w książce adresowej. Ten proces
odpowiada zapisywaniu łańcucha. Tworzą go dane, do których chcesz mieć dostęp póz
niej. Można
by to zapisać w postaci takiego oto wyrażenia:
var nameAddress =  Joe 555-5555 .
Jeśli jednak zapisałeś tylko numer, na przykład 25, numer ten może Ci póz
niej posłużyć do
określenia nowej wartości. Powiedzmy, że w każdej skrzynce masz 25 jabłek, a skrzynki są trzy.
Liczbę jabłek w skrzynce można wyrazić w następujący sposób:
var boxApples = 25
Liczbę skrzynek natomiast opisuje zmienna:
var boxTotal = 3
Wartość odkreślającą liczbę jabłek (25) i wielokrotność tej wartości (3) odpowiadającą liczbie
skrzynek można wykorzystać do obliczenia całkowitej liczby jabłek:
var totApples = boxApples*boxTotal
Jeśli zapytasz JavaScript, ile wynosi totApples, zwrócona Ci odpowiedz
wyniesie 75. Jest to
niewątpliwie wartość numeryczna.
Tworząc zmienną, określasz po prostu, że:
var nazwazmienej = wartość
W tym wyrażeniu var to deklaracja zmiennej, nazwazmiennej jest nazwą, którą nadajesz
zmiennej, a wartość to informacja, którą chcesz przechować w zmiennej i z nią stowarzyszyć.
Jeśli informacja ma być łańcuchem znaków  co oznacza, że nie chcesz, aby była ona
interpretowana  umieszczasz wartość w cudzysłowie:
var nazwa =  Blaine
Jeśli informacja jest liczbą i będzie póz
niej wykorzystana w obliczeniach, podajesz ją po prostu
bez cudzysłowu:
var total = 8
W końcu, jeśli informacja jest prawdziwa lub fałszywa, określasz wartość jako true lub false,
nie stosując cudzysłowu:
var customer = true
Podsumowując: jeśli chcesz tylko przechować informację, stosujesz cudzysłów, co zapobiega jej
interpretowaniu; natomiast jeśli chcesz, aby informacja została wykorzystana w obliczeniach lub
do określenia prawdziwości warunku, nie stosujesz cudzysłowu.
Elementy: obiekty i właściwości
JavaScript to język zorientowany obiektowo, co oznacza, że w swoich operacjach odwołuje się do
elementów zwanych obiektami. Sięgnąć tu możemy po analogię z rzeczywistymi obiektami
trójwymiarowymi, takimi jak na przykład pudło lub balon.
Co więcej, obiekty te można opisać i rozróżnić za pomocą właściwości. I tak na przykład można
zapisać box.color =  blue , gdzie box to obiekt, color to jego właściwość, a blue jest
wartością właściwości.
Elementy: metody
Metody pozwalają przypisać obiektowi behawior. Metoda to akcja, którą obiekt ma przeprowadzić
(ważne jest, aby zdać sobie sprawę, że to nie użytkownik, lecz obiekt jest tym, do którego akcje
należą). Wracając do wcześniejszej analogii, można napisać:
box.enclose()
Tutaj box jest obiektem, a enclose to metoda. Jak pewno zauważyłeś, za metodą pojawiają się
nawiasy. W tych nawiasach możesz umieścić argument. Argument to wiadomość, która ma być
przekazana obiektowi. Oto przykład:
box.enclose( stapler )
Nie wszystkie metody wymagają argumentów.
Elementy: funkcje
Funkcje pozwalają zapisać wyrażenie (lub zestaw wyrażeń), z którego potem można korzystać
wywołując tylko nazwę. Rzuć okiem na następujący przykład:
function Package(){
box.enclose( stapler )
};
Jeśli póz
niej wywołasz tę funkcję, wykonane zostanie wyrażenie box.enclose( zszywacz ).
Nie musisz więc przepisywać wyrażenia, ilekroć chcesz go użyć. Zauważ, że wyrażenie zawarte
jest w nawiasach klamrowych, {}. Wywołanie funkcji pociąga za sobą wykonanie wszystkich
wyrażeń umieszczonych w tych nawiasach.
Wreszcie, jeśli chcesz, aby funkcja była wykorzystywana w różnorodnych sytuacjach, zastosuj ją
ze zmienną:
var itemname =  stapler
function Package(itemname){
box.enclose(itemname)
};
Poprzez utworzenie zmiennej itemname, wszystko, do czego ją przyrównasz, zostanie przekazane
do funkcji i metody enclose.
Elementy: procedury obsługi zdarzeń
Procedury obsługi zdarzeń ułatwiają interakcję użytkownika i stworzonego przez Ciebie skryptu.
Gdy użytkownik na przykład przesuwa wskaz
nik myszki nad określonym elementem graficznym
lub klika, możesz za pomocą procedury obsługi zdarzenia uruchomić funkcję:
onclick =  Package()
Tutaj onClick to procedura obsługi zdarzenia, a  Package jest funkcją, która ma być
wykonana.
Dreamweaver i JavaScript
W programie Dreamweaver masz do dyspozycji wbudowane skrypty JavaScript  dostęp do nich
jest z poziomu palety Behaviors. Paleta ta wyposażona jest w proste narzędzia, które pozwalają
wstawiać JavaScript w dokumencie HTML (patrz rysunek 19.1).
Rys. 19.1.
Paleta Behaviors
Wśród skryptów tu dostępnych znajdziesz między innymi skrypty kontroli formularza, detekcji
przeglądarki i modułu dodatkowego, tworzenia menu rozwijanego i okien komunikatów.
Aby wyświetlić listę skryptów, kliknij po prostu przycisk ze znakiem plus (+), co spowoduje
rozwinięcie listy (patrz rysunek 19.2).
Jeśli chciałbyś poszerzyć tę listę o inne behawiory, wybierz pozycję Get More Behaviors.
Uzyskasz w ten sposób dostęp do pełnego zestawu skryptów witryny Macromedia Exchange
(www.macromedia.com). Wybranie tej pozycji spowoduje automatyczne otwarcie okna
przeglądarki i skierowanie jej do witryny firmy Macromedia.
Rys. 19.2.
Rozwijane menu
dostępne pod
przyciskiem ze
znakiem plus
Wstawianie behawiorów
Procedura wstawiania behawiorów nie mogłaby być prostsza. Aby wstawić skrypt, zaznaczasz po
prostu w dokumencie odpowiedni obiekt (formularz, obraz lub coś w tym rodzaju) lub
umieszczasz w wybranym miejscu punkt wstawiania. Następnie rozwijasz menu dostępne pod
przyciskiem ze znakiem plus i wybierasz właściwy behawior. Jeśli skrypt wymaga podania
dodatkowych informacji, wyświetlone zostanie okno dialogowe, w którym zostaniesz poproszony
o te informacje.
Ćwiczenie 19.1. Behawior Popup Message
Przećwiczmy wstawianie behawioru na konkretnym przykładzie. Wstawisz skrypt Popup
Message, który spowoduje wyświetlenie okna komunikatu, zawierającego tekst i przycisk OK
umożliwiający zamknięcie okna.
1. Otwórz nowy dokument i umieść punkt wstawiania na jego początku.
2. Następnie kliknij w oknie palety Behaviors przycisk + i rozwiń menu. Wybierz z niego
pozycję Popup Message. Wyświetlone zostanie okno dialogowe Popup Message,
które umożliwia wpisanie tekstu komunikatu.
3. Wpisz w polu Message tekst, który chcesz umieścić w tworzonym oknie komunikatu, a
następnie naciśnij OK. Dreamweaver wstawi odpowiedni skrypt i procedurę obsługi
zdarzenia, która będzie skrypt uruchamiać.
4. Wybierz nazwę_przeglądarki w menu podrzędnym Preview in Browser menu File,
aby zobaczyć rezultat (patrz rysunek 19.3).
Rys. 19.3.
Wstawianie skryptu
Popup Message
Zgodnie z nazwą, procedura onLoad obsługi zdarzenia powinna wykonać funkcję przy pierwszym
wejściu na stronę. Okno komunikatu to w rzeczywistości okno ostrzegawcze (patrz rysunek 19.4).
Rys. 19.4.
Okno dialogowe
Popup Message
Rzuć teraz okiem na paletę Behaviors. Pojawia się w niej pozycja, która odpowiada
wstawionemu właśnie skryptowi (patrz rysunek 19.5).
Rys. 19.5.
Paleta Behaviors, a w
niej nowy behawior
Jest ona rozdzielona między dwie kolumny. Pierwsza część wpisu znajduje się pod kolumną
Events. Tutaj umieszczane są procedury obsługi zdarzeń stowarzyszone ze skryptem. Procedury
obsługi zdarzeń to elementy, których zadaniem jest detekcja podejmowanych przez użytkownika
działań. Jeśli chciałbyś zmienić stowarzyszone ze skryptem zdarzenie, po prostu wskaż żądane
zdarzenie, kliknij przycisk ze strzałką, a następnie wybierz z listy rozwijanej nowe zdarzenie. Jeśli
zastąpisz procedurę onLoad procedurą onUnload, okno komunikatu pojawi się, gdy użytkownik
przystąpi do opuszczenia strony. Nagłówek drugiej kolumny to Actions. Tu mieści się
podstawowa część skryptu.
Po wstawieniu skryptu w dokumencie i sformułowaniu tekstu komunikatu, przetestuj swoją stronę
w przeglądarce. Wybierz pozycję Preview in Browser lub naciśnij F12  powinieneś zobaczyć
puste okno, a w jego centrum okno komunikatu prezentujące wprowadzony przez Ciebie tekst i
wyposażone w przycisk OK zamykania okna. (patrz rysunek 19.6).
Rys. 19.6.
Podgląd w
przeglądarce
Zamknij teraz okno przeglądarki i powróć do okna dokumentu programu Dreamweaver. Otwórz
inspektora Code lub wyświetl dokument w widoku kodu i projektu, o ile nie korzystasz z tego
widoku (wybierz pozycję Code and Design w menu View), i przeanalizuj kod, który
Dreamweaver wstawił (patrz rysunek 19.7).
W sekcji HEAD dokumentu powinieneś zauważyć wstawiony przez Dreamweavera znacznik
będziesz korzystał z innego niż HTML języka, i że będzie to
JavaScript. Chociaż JavaScript jest dla większości przeglądarek domyślnym językiem
skryptowym, może się to w przyszłości zmienić. Z tego względu nadal umieszczaj deklarację
języka, która tak czy inaczej poprawia klarowność kodu. Za znacznikiem . Tak oto dotarliśmy do końca skryptu.
Masz więc skrypt, lecz sam z siebie nie zostanie on wykonany. Potrzebny Ci kod, który go
uruchomi.
Rzuć teraz okiem na zawartość znacznika . Zobaczysz w nim procedurę obsługi zdarzenia
(patrz rysunek 19.8). Pojawia się ona po atrybutach BGCOLOR i TEXT i ma następującą postać:
onUnload="MM_popupMsg('Witajcie!')"
W tym wyrażeniu onUnload to procedura obsługi zdarzenia, a argument('Witajcie!') jest
podawany funkcji i metodzie alert.
Rys. 19.8.
Procedura obsługi
zdarzenia
Modyfikacja behawiorów
Umiesz już wstawiać behawiory, więc nieuchronnie będziesz potrzebował wiedzy na temat ich
usuwania i modyfikacji.
Usuwanie behawiorów jest dość prostą operacją, którą ułatwia dostępny w palecie Behaviors
przycisk ze znakiem minus (-). Zaznacz po prostu behawior, którego chcesz się pozbyć i naciśnij
ten przycisk.
Modyfikacja behawiora jest równie prosta i także można ją przeprowadzić w oknie palety
Behaviors. W programie Dreamweaver z określonymi behawiorami stowarzyszone są domyślne
procedury zdarzeń. Są one wstawiane automatycznie (i tak w naszym przykładzie wstawiona
została procedura onLoad). Jednak w większości sytuacji możliwych procedur obsługi zdarzenia
jest więcej i można wybrać inną niż domyślnie przypisana przez program.
Aby wybrać inną procedurę obsługi zdarzenia, kliknij przycisk ze strzałką, z prawej strony
kolumny Events, i wybierz ją z menu, które się ukaże. Jeśli behawior został stowarzyszony z
określonym obiektem na Twojej stronie, najpierw musisz ten obiekt zaznaczyć, aby móc zobaczyć
behawior.
Ćwiczenie 19.2. Zmiana behawiora Popup Window
Aby zastąpić behawior Popup Window innym:
1. Wykonaj całe ćwiczenie 19.1.
2. Wybierz z listy rozwijanej Events zdarzenie onLoad (patrz rysunek 19.9).
3. Kliknij dwukrotnie Popup Message w kolumnie Actions. W wyświetlonym ponownie
oknie dialogowym Popup Message zmień tekst komunikatu w polu Message.
4. Wyświetl rezultat w oknie przeglądarki.
Rys. 19.9.
Menu rozwijane
Events
Zwróć uwagę na ostatnią z pozycji menu Events  Show Events For. Gdy umieścisz nad nią
wskaz
nik myszki, po chwili ukaże się menu podrzędne, z którego można wybrać typy i wersje
przeglądarek  na przykład 3.0 and Later Browsers lub IE 5.0 (patrz rysunek 19.10).
To menu pozwala upewnić się, że przeglądarki, dla których przeznaczasz swoją stronę, obsługują
wybrane procedury obsługi zdarzeń.
Paleta Behaviors umożliwia także modyfikację akcji. Dwukrotne kliknięcie akcji w kolumnie
Actions powoduje wyświetlenie tego samego okna dialogowego, w którym akcja była
konfigurowana przy wstawianiu behawiora, z tą samą zawartością (patrz rysunek 19.11).
Rys. 19.10.
Menu podrzędne Show
Events For
Rys. 19.11.
Okno dialogowe
wstawiania behawiora
z tą samą co
poprzednio
zawartością
Musisz jedynie wprowadzić w tym oknie zmiany i kliknąć OK, gdy uznasz, że są zadawalające.
Podsumowanie
W tym rozdziale omówiono wszystkie etapy wstawiania, edycji i usuwania behawiorów na
stronach WWW. Niezależnie od tego, czy behawiory są mniej lub bardziej skomplikowane,
wszystkich używa się tak samo.