Dreamweaver 4 Dla Każdego, ROZDZ19, Szablon dla tlumaczy


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 dź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

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óź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óź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óź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óź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 odpowiedź 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óź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óź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 wskaź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).

  5. 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 <SCRIPT>. Atrybutem tego znacznika, także umieszczanym automatycznie, jest LANGUAGE, a jego wartością jest JavaScript. Jest to informacja dla przeglądarki, że dopóki nie pojawi się zamykający znacznik </SCRIPT> 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 <SCRIPT> pojawia się znacznik komentarza, <!--, który jest stosowany w celu powstrzymania przeglądarki od interpretowania skryptów JavaScript jako języka HTML.

    Rys. 19.7.

    Kod źródłowy

    Za tymi dwoma wierszami kodu Dreamweaver umieszcza właściwy skrypt. Okno komunikatu tworzone jest przez funkcję MM_popupMsg. Zauważ, że argumentem metody alert jest (msg). Jest to parametr podawany funkcji przy jej wywołaniu.

    Wreszcie pojawia się znacznik zamykający komentarz, //-->, oraz znacznik zamykający </SCRIPT>. 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 <BODY>. 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.

    5. Rys. 19.9.

      Menu rozwijane Events

      Zwróć uwagę na ostatnią z pozycji menu Events - Show Events For. Gdy umieścisz nad nią wskaź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.

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

      2 G:\DREAM_trans\rozdz19.doc



      Wyszukiwarka