Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00322 005850 13850414 na godz. na dobę w sumie
Po prostu JavaScript i Ajax. Wydanie VII - książka
Po prostu JavaScript i Ajax. Wydanie VII - książka
Autor: , Liczba stron: 544
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2204-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> javascript - programowanie
Porównaj ceny (książka, ebook, audiobook).

Poznaj język JavaScript i technologię Ajax,
aby twoje strony stały się jeszcze bardziej interaktywne

Jeśli chcesz, aby Twoje strony WWW były jeszcze bardziej dynamiczne, skorzystaj z możliwości JavaScriptu. Za pomocą tego łatwego do przyswojenia języka programowania uzupełnisz witryny internetowe o wspaniałe funkcje i sprawisz, że będą one znacznie bardziej przyjazne oraz atrakcyjne dla użytkownika. Wykorzystując JavaScript, możesz skonstruować jeszcze sprawniejszy interfejs, a także na bieżąco tworzyć formularze, strony HTML i całe aplikacje. Wykorzystanie Ajaksa (opierającego się właśnie na tym języku programowania) w połączeniu z innymi technologiami sprawi, że Twoje strony WWW będą naprawdę doskonałe.

Książka 'Po prostu JavaScript i Ajax. Wydanie VII' zawiera wszystkie potrzebne informacje, które pozwolą Ci natychmiast wprowadzić ciekawe efekty, poprawiające interaktywność i ergonomię Twojej strony WWW. Dzięki temu podręcznikowi z łatwością nauczysz się pisać i zagnieżdżać skrypty, obsługiwać błędy, pracować z obrazami, tablicami i formularzami. Poznasz także możliwości technologii Ajax, która wykorzystuje język JavaScript oraz inne technologie sieciowe do tworzenia interaktywnych stron WWW i poprawiania jakości interfejsu użytkownika witryn.

Po prostu -- szybki sposób na efektywną naukę!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Po prostu JavaScript i Ajax. Wydanie VII Autorzy: Tom Negrino, Dori Smith T³umaczenie: Wojciech Moch ISBN: 978-83-246-2204-7 Tytu³ orygina³u: JavaScript and Ajax for the Web: Visual QuickStart Guide (7th Edition) (Visual QuickStart Guide) Format: 170×230, stron: 544 Poznaj jêzyk JavaScript i technologiê Ajax, aby twoje strony sta³y siê jeszcze bardziej interaktywne (cid:129) Jak poprawiæ jakoœæ interfejsu u¿ytkownika? (cid:129) Jak tworzyæ interaktywne strony internetowe? (cid:129) Jak do maksimum wycisn¹æ Ajaksa? Jeœli chcesz, aby Twoje strony WWW by³y jeszcze bardziej dynamiczne, skorzystaj z mo¿liwoœci JavaScriptu. Za pomoc¹ tego ³atwego do przyswojenia jêzyka programowania uzupe³nisz witryny internetowe o wspania³e funkcje i sprawisz, ¿e bêd¹ one znacznie bardziej przyjazne oraz atrakcyjne dla u¿ytkownika. Wykorzystuj¹c JavaScript, mo¿esz skonstruowaæ jeszcze sprawniejszy interfejs, a tak¿e na bie¿¹co tworzyæ formularze, strony HTML i ca³e aplikacje. Wykorzystanie Ajaksa (opieraj¹cego siê w³aœnie na tym jêzyku programowania) w po³¹czeniu z innymi technologiami sprawi, ¿e Twoje strony WWW bêd¹ naprawdê doskona³e. Ksi¹¿ka „Po prostu JavaScript i Ajax. Wydanie VII” zawiera wszystkie potrzebne informacje, które pozwol¹ Ci natychmiast wprowadziæ ciekawe efekty, poprawiaj¹ce interaktywnoœæ i ergonomiê Twojej strony WWW. Dziêki temu podrêcznikowi z ³atwoœci¹ nauczysz siê pisaæ i zagnie¿d¿aæ skrypty, obs³ugiwaæ b³êdy, pracowaæ z obrazami, tablicami i formularzami. Poznasz tak¿e mo¿liwoœci technologii Ajax, która wykorzystuje jêzyk JavaScript oraz inne technologie sieciowe do tworzenia interaktywnych stron WWW i poprawiania jakoœci interfejsu u¿ytkownika witryn. (cid:129) Tworzenie HTML na potrzeby JavaScriptu (cid:129) Skrypty, tablice i funkcje (cid:129) Obs³uga b³êdów (cid:129) Praca z obrazami (cid:129) Okna przegl¹darki (cid:129) Obs³uga formularzy (cid:129) Wyra¿enia regularne (cid:129) Obiekty i model DOM (cid:129) Tworzenie dynamicznych stron WWW (cid:129) Technologia Ajax (cid:129) Skryptozak³adki Po prostu – szybki sposób na efektywn¹ naukê! Spis treĂci Rozdziaï 1. Rozdziaï 2. Rozdziaï 3. 11 Wprowadzenie 17 Pierwsze spotkanie z JavaScriptem Czym jest JavaScript? ........................................................................................... 18 JavaScript to nie Java ............................................................................................ 19 SkÈd siÚ wziÈï jÚzyk JavaScript ............................................................................ 21 Co potrafi JavaScript ............................................................................................. 22 Czego JavaScript nie zrobi ................................................................................... 23 Czym jest Ajax? ..................................................................................................... 24 JÚzyk obiektowy .................................................................................................... 27 Obsïuga zdarzeñ .................................................................................................... 30 WartoĂci i zmienne ............................................................................................... 31 Przypisania i porównania ...................................................................................... 32 Tworzenie HTML na potrzeby JavaScriptu ........................................................ 33 Potrzebne narzÚdzia .............................................................................................. 36 Zaczynamy! 37 Gdzie umieszczaÊ skrypty .................................................................................... 39 Kilka sïów o funkcjach .......................................................................................... 41 Stosowanie zewnÚtrznych skryptów .................................................................... 42 Wstawianie komentarzy do skryptów .................................................................. 45 Komunikaty dla uĝytkownika ............................................................................... 47 Potwierdzanie wyboru dokonanego przez uĝytkownika ..................................... 49 Pobieranie tekstu od uĝytkownika ....................................................................... 51 Przekierowanie uĝytkownika za pomocÈ ïÈcza .................................................... 53 Stosowanie JavaScriptu do rozbudowy ïÈczy ...................................................... 55 Uĝywanie wielopoziomowych instrukcji warunkowych ..................................... 60 Obsïuga bïÚdów .................................................................................................... 63 Podstawy jÚzyka 65 W kóïko, w pÚtli .................................................................................................... 66 Przekazywanie wartoĂci do funkcji ...................................................................... 71 Wykrywanie obiektów .......................................................................................... 73 Praca z tablicami ................................................................................................... 75 Praca z funkcjami zwracajÈcymi wartoĂÊ ............................................................. 77 5 S p i s t r e Ă c i Spis treĂci Rozdziaï 4. i c Ă e r t s i p S Rozdziaï 5. Rozdziaï 6. Rozdziaï 7. 6 Aktualizowanie tablic ............................................................................................ 78 Stosowanie pÚtli do/while ..................................................................................... 80 Wywoïywanie skryptu na kilka róĝnych sposobów ............................................. 82 ’Èczenie JavaScriptu i CSS .................................................................................. 84 Sprawdzanie stanu ................................................................................................ 87 Praca z tablicami ciÈgów znaków ......................................................................... 93 Praca z obrazami 97 Podmieniane obrazki ............................................................................................ 99 Lepsza technika podmiany obrazków ................................................................ 101 Tworzenie przycisków trójstanowych ................................................................ 109 Podmiana obrazków poprzez ïÈcze .................................................................... 111 Podmienianie obrazka z róĝnych ïÈczy .............................................................. 114 Podmienianie wielu obrazków z jednego ïÈcza ................................................. 116 Tworzenie animowanych banerów .................................................................... 120 Dodawanie ïÈczy do animowanych banerów .................................................... 122 Prezentacje .......................................................................................................... 124 Losowe wyĂwietlanie obrazków ......................................................................... 127 Cykliczna zmiana obrazów z losowym obrazem poczÈtkowym ........................ 129 Ramki, ramki i jeszcze raz ramki 131 Zapobieganie wyĂwietleniu strony w ramce ..................................................... 133 Umieszczenie strony w ramce ............................................................................ 135 Umieszczenie strony w ramce — rozwiÈzanie dla duĝych witryn ................... 136 Zaïadowanie ramki .............................................................................................. 141 Tworzenie i ïadowanie ramek dynamicznych ................................................... 142 Funkcje wspólne dla kilku ramek ...................................................................... 145 ’adowanie kilku ramek na raz ........................................................................... 149 Praca z elementami iframe ................................................................................. 151 ’adowanie ramek iframe za pomocÈ JavaScriptu ............................................. 154 Praca z oknami przeglÈdarki 155 Otwieranie nowego okna .................................................................................... 156 Zmiana zawartoĂci nowego okna ........................................................................ 160 Otwieranie wielu okien ....................................................................................... 162 Aktualizowanie okna z poziomu innego okna .................................................... 164 Zamykanie okna .................................................................................................. 167 OkreĂlanie pozycji okna na ekranie ................................................................... 170 Obsïuga formularzy 173 Nawigacja „wybierz i przejdě” ........................................................................... 175 Dynamiczne modyfikowanie menu ................................................................... 180 Rozdziaï 8. Rozdziaï 9. Rozdziaï 10. Rozdziaï 11. Obiekty i model DOM Spis treĂci Tworzenie pól wymaganych ............................................................................... 183 Wzajemne sprawdzanie wartoĂci pól ................................................................. 188 Wyróĝnianie problematycznych pól .................................................................. 190 Praktyczne wykorzystanie kontroli formularzy ................................................. 193 Praca z przyciskami opcji ................................................................................... 197 Wzajemne ustawianie wartoĂci pól .................................................................... 200 Sprawdzanie kodów pocztowych ....................................................................... 203 Sprawdzanie adresów e-mail .............................................................................. 207 Formularze i wyraĝenia regularne 213 Sprawdzanie adresów e-mail za pomocÈ wyraĝeñ regularnych ....................... 215 Sprawdzanie nazwy pliku ................................................................................... 220 Wydobywanie ciÈgów znaków ............................................................................ 222 Formatowanie ciÈgów znaków ........................................................................... 225 Formatowanie i sortowanie ciÈgów znaków ...................................................... 229 Formatowanie i sprawdzanie poprawnoĂci ciÈgów znaków ............................. 231 Podmiana elementów za pomocÈ wyraĝenia regularnego ................................ 234 Obsïuga zdarzeñ 237 Obsïuga zdarzeñ okien ....................................................................................... 238 Obsïuga zdarzeñ myszy ...................................................................................... 246 Obsïuga zdarzeñ formularzy ............................................................................... 254 Obsïuga zdarzeñ klawiatury ............................................................................... 258 JavaScript i ciasteczka 261 Pieczemy pierwsze ciasteczko ............................................................................ 263 Odczytywanie ciasteczka .................................................................................... 267 WyĂwietlanie ciasteczek ..................................................................................... 268 Wykorzystanie ciasteczek jako liczników .......................................................... 270 Usuwanie ciasteczek ........................................................................................... 273 Obsïuga wielu ciasteczek .................................................................................... 275 Informowanie o nowoĂciach na stronie ............................................................. 277 283 Kilka sïów o manipulacji wÚzïami ...................................................................... 284 Dodawanie wÚzïów ............................................................................................. 286 Usuwanie wÚzïów ............................................................................................... 288 Usuwanie okreĂlonego wÚzïa ............................................................................. 290 Wstawianie wÚzïów ............................................................................................. 294 Podmiana wÚzïów ............................................................................................... 297 Tworzenie kodu za pomocÈ literaïów obiektów ................................................ 301 S p i s t r e Ă c i 7 Rozdziaï 13. Wprowadzenie do technologii Ajax i c Ă e r t s i p S Rozdziaï 14. Zestawy narzÚdziowe AJAX 307 Wpisywanie aktualnej daty na stronie WWW .................................................. 308 Manipulowanie dniami ....................................................................................... 310 Dostosowywanie wiadomoĂci do pory dnia ....................................................... 311 WyĂwietlanie dat wedïug strefy czasowej ......................................................... 312 Konwersja czasu 24-godzinnego na 12-godzinny ............................................. 318 Odliczanie ............................................................................................................ 320 WyĂwietlanie i ukrywanie warstw ...................................................................... 324 Przenoszenie obiektu w dokumencie ................................................................ 327 Metody obiektu Date .......................................................................................... 329 331 Ajax: o co tu chodzi? ........................................................................................... 333 Odczytywanie danych z serwera ........................................................................ 337 Analizowanie danych z serwera ......................................................................... 345 OdĂwieĝanie danych z serwera .......................................................................... 352 Pobieranie danych z serwera .............................................................................. 355 PodglÈd ïÈczy w technologii Ajax ....................................................................... 359 Automatyczne uzupeïnienie pól formularza ...................................................... 363 369 PrzeciÈganie i upuszczanie elementów strony .................................................. 371 Wstawianie kalendarza ....................................................................................... 377 Wstawianie na strony podwójnego kalendarza ................................................. 381 Stosowanie kontenerów ...................................................................................... 387 Dodawanie efektów animacji ............................................................................. 392 Implementowanie kontrolki dziennika dla celów debugowania ...................... 395 JavaScript w akcji 399 Stosowanie wysuwanych menu .......................................................................... 400 Dodawanie menu rozwijanych ........................................................................... 403 Rozbudowa menu rozwijanych .......................................................................... 407 Pokaz slajdów z podpisami ................................................................................. 411 Generator dziwnych imion ................................................................................. 415 Generator wykresów sïupkowych ...................................................................... 421 Podmiany arkuszy stylów .................................................................................... 429 439 Wyróĝnianie nowych elementów ....................................................................... 440 Tworzenie menu harmonijkowych .................................................................... 445 Tworzenie sprytnych okien dialogowych .......................................................... 448 Spis treĂci Rozdziaï 12. Tworzenie dynamicznych stron Rozdziaï 15. 8 Rozdziaï 16. Tworzenie stron w Ajaksie Rozdziaï 17. Skryptozakïadki Dodatek A Dodatek B Dodatek C Dodatek D Spis treĂci Pasiaste tabele ..................................................................................................... 450 Sortowanie tabel .................................................................................................. 453 459 Pierwsza skryptozakïadka ................................................................................... 460 Zmiana koloru tïa strony ..................................................................................... 466 Zmiana stylów strony .......................................................................................... 467 Wyszukiwanie sïów ............................................................................................. 470 PrzeglÈdanie obrazków ....................................................................................... 473 WyĂwietlanie znaków z zestawu ISO Latin ...................................................... 475 Konwersja wartoĂci RGB do postaci szesnastkowej ......................................... 478 Konwersja wartoĂci ............................................................................................. 480 Kalkulator skryptozakïadkowy ........................................................................... 481 Skracanie adresów URL ..................................................................................... 483 Sprawdzanie poprawnoĂci stron ........................................................................ 484 Wysyïanie stron e-mailem .................................................................................. 485 Zmiana wielkoĂci stron ....................................................................................... 486 JavaScript — genealogia i kompendium 487 Wersje JavaScriptu ............................................................................................. 488 ECMAScript ........................................................................................................ 491 Diagram obiektów ............................................................................................... 493 Wielka tabela obiektów ....................................................................................... 499 Sïowa kluczowe jÚzyka JavaScript 511 Kaskadowe arkusze stylów 515 Gdzie moĝna dowiedzieÊ siÚ wiÚcej 523 Znajdowanie pomocy w sieci .............................................................................. 524 KsiÈĝki .................................................................................................................. 530 Skorowidz 531 S p i s t r e Ă c i 9 Praca z obrazami 4 Rozdziaá 4. Praca z obrazami Jednym z najciekawszych zastosowañ JavaScriptu jest oĝywianie stron poprzez uĝycie animowanej grafiki. Temu wïaĂnie poĂwiÚcimy ten rozdziaï. Obrazek na stronie zmieniajÈcy siÚ w chwili wskazania go myszkÈ — co sprawia, ĝe strona niejako reaguje na czynnoĂci podejmowane przez uĝytkownika — to jedna z najbardziej popularnych i efektywnych metod wykorzystania JavaScriptu. Podmieniany obrazek (ang. rollover) jest ïatwy do utworzenia, a przy tym, jak siÚ za chwilÚ przekonamy, moĝna go wykorzystaÊ na wiele sposobów. Podmieniane obrazki to bardzo przydatne narzÚdzie, ale jak siÚ zaraz okaĝe, JavaScriptu moĝna takĝe uĝyÊ do tworzenia obrazków zmieniajÈcych siÚ automatycznie lub do opracowania animowanych banerów reklamowych, tworzenia pokazów slajdów, a nawet wyĂwietlania na stronie losowo wybieranych obrazków. W tym rozdziale dowiemy siÚ, jak moĝna wprowadziÊ na strony róĝne sztuczki z obrazami, wykonywane za pomocÈ jÚzyka JavaScript. Zabierajmy siÚ do pracy! P r a c a z o b r a z a m i 97 Rozdziaï 4. Tabela 4.1. Podstawy HTML — obrazy Znacznik img Atrybut Znaczenie Gromadzi atrybuty opisujÈce obrazek, jaki ma zostaÊ wyĂwietlony w przeglÈdarce. src Zawiera adres URL obrazka, wzglÚdny w stosunku do adresu URL strony. width Opisuje szerokoĂÊ (w pikselach), jakÈ obrazek ma mieÊ po wyĂwietleniu w przeglÈdarce. height Opisuje wysokoĂÊ (w pikselach), jakÈ obrazek ma mieÊ po wyĂwietleniu w przeglÈdarce. border OkreĂla szerokoĂÊ obramowania obrazka. name Nazwa, której JavaScript uĝywa przy odwoïaniach do obrazków. Podobnie jak w nazwach innych obiektów, nie moĝna w niej stosowaÊ spacji ani znaków przestankowych. Nie moĝe siÚ teĝ zaczynaÊ od cyfry. Tekst stosowany w przeglÈdarkach niewizualnych, który zastÚpuje sam obrazek. Poziomy obszar bufora otaczajÈcego obrazek. Pionowy obszar bufora otaczajÈcego obrazek. Opisuje sposób pionowego i poziomego uïoĝenia obrazka na stronie. Jednoznaczny identyfikator pozwalajÈcy skryptom JavaScript na wprowadzanie modyfikacji do obrazka. alt hspace vspace align id i m a z a r b o z a c a r P 98 Praca z obrazami Skrypt 4.1. Najprostszy sposób utworzenia animowanego przycisku menu w znaczniku ïÈcza !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 ´Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ ´xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head title Prosta podmiana obrazków /title /head body bgcolor= #FFFFFF a href= next.html onmouseover= document. ´arrow.src= images/arrow_on.gif ´onmouseout= document.arrow.src= images/ ´arrow_off.gif img src= images/ ´arrow_off.gif width= 147 height= 82 ´border= 0 name= arrow alt= arrow ´/ /a /body /html Podmieniane obrazki Technika podmieniania obrazków jest bardzo prosta. Potrzebne sÈ dwa obrazki. Pierwszy (oryginalny) z nich pobierany jest i wyĂwietlany wraz z caïÈ stronÈ. Kiedy uĝytkownik wskazuje myszkÈ pierwszy obrazek, przeglÈdarka szybko podmienia wyĂwietlany obrazek na obrazek-zmiennik, tworzÈc zïudzenie ruchu lub animacji. Skrypt 4.1 prezentuje podstawy techniki podmieniania obrazków. CaïoĂÊ oparta jest na standardowych odsyïaczach do obrazków. Najpierw ïadowana jest niebieska strzaïka (rysunek 4.1), która w chwili wskazania jej myszÈ podmieniana jest na strzaïkÚ czerwonÈ (rysunek 4.2). Po odsuniÚciu kursora myszy ponownie wyĂwietlona zostaje niebieska strzaïka. Rysunek 4.1. Pierwszy obrazek przed wskazaniem go myszÈ Rysunek 4.2. Po wskazaniu obrazka myszÈ skrypt podmienia obrazki 99 P o d m i e n i a n e o b r a z k i Rozdziaï 4. Aby utworzyÊ podmieniane obrazki: 1. a href= next.html ’Ècze rozpoczyna siÚ od okreĂlenia adresu, do którego ma siÚ udaÊ przeglÈdarka w chwili, gdy uĝytkownik kliknie obrazek. W tym przypadku jest to strona next.html. 2. onmouseover= document.arrow.src= ´ images/arrow_on.gif W chwili wskazania strzaïki myszkÈ w dokumencie zostaje wyĂwietlony obrazek-zmiennik arrow_on.gif, który znajduje siÚ w katalogu images. 3. onmouseout= document.arrow.src= ´ images/arrow_off.gif Po odsuniÚciu wskaěnika myszy ponownie wyĂwietlany jest obrazek arrow_off.gif. 4. img src= images/arrow_off.gif ´width= 147 height= 82 border= 0 ´name= arrow alt= arrow / Pozostaïa czÚĂÊ ïÈcza definiuje ěródïo oryginalnego obrazka na stronie. Znacznik obrazka uzupeïniliĂmy atrybutem alt (definiuje on opis obrazka wykorzystywany przez niegraficzne przeglÈdarki), poniewaĝ jest on wymagany przez najnowszy standard HTML, a poza tym uïatwia odczytywanie naszej strony uĝytkownikom niepeïnosprawnym, takim jak niewidomi, którzy muszÈ stosowaÊ tak zwane czytniki ekranowe. i k z a r b o e n a i n e i m d o P 100 Wady przedstawionej techniki podmieniania obrazków Przedstawiona technika podmieniania obrazków jest bardzo prosta, ale trzeba mieÊ ĂwiadomoĂÊ kilku zwiÈzanych z niÈ problemów.  Drugi obrazek pobierany jest z serwera dopiero w chwili wskazania myszÈ pierwszego obrazka. Z tego powodu bardzo prawdopodobne jest zaistnienie zauwaĝalnego opóěnienia, zanim obrazki zostanÈ zamienione miejscami, szczególnie jeĝeli uĝytkownik korzysta z modelu, a nie z ïÈcza szerokopasmowego.  Wykorzystanie tej metody powoduje komunikaty o bïÚdach w starszych przeglÈdarkach, takich jak Netscape 2.0, Internet Explorer 3.0 lub America Online 2.7. Na szczÚĂcie dzisiaj juĝ praktycznie nikt nie korzysta z tak starych przeglÈdarek, wiÚc tego ograniczenia nie naleĝy traktowaÊ jako powaĝnego problemu. Zamiast przedstawionej tu techniki polecamy sposób z nastÚpnego podrozdziaïu, który rozwiÈzuje obydwa wymienione powyĝej problemy. Praca z obrazami Lepsza technika podmiany obrazków Aby sprawiÊ rzeczywiste wraĝenie animacji, musimy zadbaÊ o to, aby obrazek-zmiennik pojawiï siÚ natychmiast, bez zwïoki spowodowanej pobieraniem go z serwera. W tym celu wykorzystamy JavaScript do zaïadowania wszystkich obrazków do bufora przeglÈdarki (tak aby w razie potrzeby znajdowaïy siÚ juĝ na dysku twardym komputera) i umieĂcimy je w zmiennych skryptu. DziÚki temu w chwili wskazania obrazka skrypt podmieni szybko jednÈ zmiennÈ zawierajÈcÈ obrazek na drugÈ. Przykïad przedstawiony jest w skrypcie 4.2. Widoczny efekt jest taki sam jak na rysunkach 4.1 i 4.2, jednak animacja przebiega sprawniej. L e p s z a t e c h n i k a p o d m i a n y o b r a z k ó w 101 Skrypt 4.2. Jedynym kodem JavaScript na tej stronie HTML jest wskazanie na zewnÚtrzny plik .js !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 ´Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ ´xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head title Lepsza podmiana obrazków /title script src= script02.js ´language= javascript /script /head body bgcolor= #FFFFFF a href= next1.html img src= images/ ´button1_off.gif width= 113 height= 33 ´border= 0 alt= button1 id= button1 ´/ /a nbsp; nbsp; a href= next2.html img src= images/ ´button2_off.gif width= 113 height= 33 ´border= 0 alt= button2 id= button2 ´/ /a /body /html Rozdziaï 4. W celu uïatwienia obsïugi kodu JavaScript wydzieliliĂmy go z dokumentu HTML i umieĂciliĂmy w zewnÚtrznym pliku .js, który zostaï przedstawiony w skrypcie 4.3 (wiÚcej informacji o plikach .js podawaliĂmy w rozdziale 3.). Aby skuteczniej podmieniaÊ obrazki: 1. script src= script02.js language= ´ javascript type= text/ ´javascript /script Ten znacznik pochodzi ze skryptu 4.2, czyli ze strony HTML. Atrybut src informuje przeglÈdarkÚ, gdzie moĝe znaleěÊ plik .js, w którym zapisany jest kod JavaScript. 2. a href= next1.html img ´src= images/button1_off.gif ´width= 113 height= 33 ´border= 0 alt= button1 ´id= button1 / /a nbsp; nbsp; ´ a href= next2.html img ´src= images/button2_off.gif ´width= 113 height= 33 border= 0 ´alt= button2 id= button2 / /a CiÈg dalszy skryptu 4.2. zawiera typowe znaczniki ïÈczy z obrazkowymi przyciskami. Atrybut href opisuje adres strony, która zostanie wyĂwietlona po tym, jak uĝytkownik kliknie przycisk. W znaczniku img atrybut src definiuje ĂcieĝkÚ do obrazka wyĂwietlanego przed dokonaniem podmiany. Pozostaïe atrybuty majÈ znaczenie opisowe i powinny byÊ wszystkim dobrze znane: szerokoĂÊ (width), wysokoĂÊ (height), obramowanie (border) oraz tekst alternatywny (alt). ProszÚ zauwaĝyÊ, ĝe kaĝdy z tych dwóch przycisków ma teĝ swój unikalny identyfikator (mówiliĂmy o nich w rozdziale 1.). Identyfikatory te pozwolÈ skryptowi JavaScript na dokonanie podmiany obrazków. w ó k z a r b o y n a i m d o p a k i n h c e t a z s p e L 102 Skrypt 4.3. Oto lepszy sposób tworzenia podmienianych obrazków. Jest duĝo elastyczniejszy od sposobu ze skryptu 4.1 window.onload = rolloverInit; function rolloverInit() { for (var i=0; i document.images.length; ´i++) { if (document.images[i].parentNode. ´tagName == A ) { setupRollover(document.images[i]); } } } function setupRollover(thisImage) { thisImage.outImage = new Image(); thisImage.outImage.src = thisImage.src; thisImage.onmouseout = function() { this.src = this.outImage.src; } thisImage.overImage = new Image(); thisImage.overImage.src = images/ + ´thisImage.id + _on.gif ; thisImage.onmouseover = function() { this.src = this.overImage.src; } Praca z obrazami 3. window.onload = rolloverInit; Przechodzimy do skryptu 4.3. Funkcja obsïugi zdarzenia window.onload wywoïywana jest zaraz po zakoñczeniu ïadowania strony. W ramach obsïugi zdarzenia wywoïywana jest funkcja rolloverInit(). Zdarzenie to sïuĝy do upewnienia siÚ, ĝe funkcja nie zostanie uruchomiona przed zakoñczeniem ïadowania strony. Po prostu próby odwoïywania siÚ do elementów niezaïadowanej w caïoĂci strony mogÈ spowodowaÊ bïÚdy, jeĝeli ĝÈdany element nie zostanie jeszcze zaïadowany. 4. function rolloverInit() { for (var i=0; i document.images. ´length; i++) { Funkcja rolloverInit() przeglÈda wszystkie obrazki na stronie i sprawdza, czy sÈ one otoczone znacznikami a , co wskazuje na to, ĝe sÈ one ïÈczami. Funkcja zaczyna siÚ od pierwszego z podanych wierszy kodu. W drugim wierszu tworzona jest pÚtla for, przeglÈdajÈca wszystkie obrazki ze strony. Na poczÈtku zmiennej i przypisywana jest wartoĂÊ 0, a nastÚpnie pÚtla kontynuuje swoje obiegi tak dïugo, jak dïugo wartoĂÊ zmiennej i jest mniejsza od liczby obrazków na stronie. Przy kaĝdym obiegu wartoĂÊ zmiennej i jest inkrementowana. 5. if (document.images[i].parentNode. ´tagName == A ) { To wïaĂnie w tym wierszu sprawdzane jest, czy dany obrazek otoczony jest znacznikiem ïÈcza. Wykonywane jest to poprzez pobranie odpowiedniego obiektu i sprawdzenie, czy jego nazwÈ jest znak A (nazwa znacznika ïÈcza). Spróbujmy rozïoĝyÊ taki obiekt na czÚĂci. Zapis document.images[i] oznacza aktualny obrazek. WïaĂciwoĂÊ parentNode wskazuje na znacznik otaczajÈcy ten obrazek. Z kolei wïaĂciwoĂÊ tagName podaje nam nazwÚ tego znacznika. Oznacza to, ĝe zapis w nawiasach moĝna by przetïumaczyÊ na jÚzyk polski tak: „Czy znacznik otaczajÈcy bieĝÈcy obrazek nazywa siÚ »A«?”. 103 L e p s z a t e c h n i k a p o d m i a n y o b r a z k ó w w ó k z a r b o y n a i m d o p a k i n h c e t a z s p e L Rozdziaï 4. 6. setupRollover(document.images[i]); Jeĝeli wynik testu z kroku 5. bÚdzie pozytywny, to wywoïywana jest funkcja setupRollover(), której w parametrze przekazywany jest bieĝÈcy obrazek. 7. function setupRollover(thisImage) { ProszÚ poĂwiÚciÊ chwilkÚ i przyjrzeÊ siÚ caïej funkcji, zanim zaczniemy analizowaÊ jÈ wiersz po wierszu. Oto krótki przeglÈd: funkcja do kaĝdego przekazanego jej obrazka dodaje dwie wïaĂciwoĂci. SÈ to wïaĂciwoĂci outImage (domyĂlna wersja obrazka) oraz overImage (wersja obrazka pojawiajÈca siÚ po wskazaniu go myszÈ), które same w sobie sÈ równieĝ obiektami obrazków. DziÚki temu po ich utworzeniu moĝemy dodaÊ do nich atrybuty src. Atrybut src z obiektu outImage bÚdzie kopiÈ atrybutu src bieĝÈcego obrazka, z kolei dla obiektu overImage wartoĂÊ atrybutu jest wyliczana na podstawie wartoĂci identyfikatora oryginalnego obrazka. Ten wiersz rozpoczyna funkcjÚ rolloverInit(), pobierajÈcÈ w parametrze obiekt obrazka. 8. thisImage.outImage = new Image(); W tym wierszu do przekazanego funkcji obrazka dodawana jest nowa wïaĂciwoĂÊ outImage, do której przypisywany jest obiekt nowego obrazka. DziÚki temu, ĝe wïaĂciwoĂci moĝna dodawaÊ do dowolnych obiektów, a dodatkowo sÈ one kolejnymi obiektami, moĝemy po prostu przypisaÊ do nowej wïaĂciwoĂci nowo utworzony obiekt. Nawiasy za nazwÈ tworzonego obiektu obrazka sÈ opcjonalne, ale ich stosowanie naleĝy do dobrych praktyk programistycznych. W razie potrzeby moĝna w nie wpisaÊ wïaĂciwoĂci nowo tworzonego obiektu. 9. thisImage.outImage.src = thisImage.src; Teraz definiowane jest ěródïo nowego obrazka. Jak widaÊ, jest ono toĝsame ze ěródïem obrazka oryginalnego. DomyĂlna postaÊ obrazka umieszczanego na stronie widoczna bÚdzie zawsze wtedy, gdy kursor myszy znajduje siÚ poza nim. 104 Rysunek 4.3. Na jednej stronie moĝna mieÊ wiele podmienianych obrazków Rysunek 4.4. Wskazujemy drugi obrazek Praca z obrazami 10. thisImage.onmouseout = function() { this.src = this.outImage.src; } W tym wierszu definiowana jest tak zwana funkcja anonimowa, czyli funkcja nieposiadajÈca nazwy. MoglibyĂmy nazwaÊ jÈ na przykïad rollOut(), ale ze wzglÚdu na to, ĝe skïada siÚ ona tylko z jednego wiersza, moĝemy pominÈÊ jej nazwÚ. W tym miejscu informujemy przeglÈdarkÚ, co powinna zrobiÊ w momencie, gdy uĝytkownik przesunie wskaěnik myszy poza obrazek. W takiej sytuacji chcemy, ĝeby przywrócona zostaïa poczÈtkowa wersja obrazka, zapisana w zmiennej outImage. 11. thisImage.overImage = new Image(); thisImage.overImage.src = images/ ´+ thisImage.id + _on.gif ; W pierwszym wierszu tworzymy nowy obiekt obrazu, który bÚdzie zawieraÊ wersjÚ obrazka wyĂwietlanÈ po wskazaniu go myszÈ. Drugi wiersz definiuje ěródïo obrazka dla obiektu overImage. Nazwa pliku budowana jest na bieĝÈco przez zïoĝenie nazwy katalogu images/, identyfikatora obrazka podstawowego (pamiÚtamy, ĝe w skrypcie 4.2 przyciskom nadaliĂmy identyfikatory button1 i button2) i uzupeïnienie caïoĂci o przyrostek _on.gif . 12. thisImage.onmouseover = = function() { this.src = this.overImage.src; } Tutaj mamy kolejnÈ funkcjÚ anonimowÈ. Nakazuje ona przeglÈdarce wyĂwietliÊ obrazek zapisany w zmiennej overImage w momencie, gdy uĝytkownik przesunie nad niego wskaěnik myszy (proszÚ spojrzeÊ na rysunki 4.3 i 4.4). L e p s z a t e c h n i k a p o d m i a n y o b r a z k ó w 105 Rozdziaï 4. Wskazówki „ W czasie przygotowywania pary podmienianych obrazków trzeba przypilnowaÊ, ĝeby obrazki GIF nie byïy przezroczyste. Spod przezroczystych obrazków widaÊ bÚdzie obrazki, które miaïy byÊ przez nie zasïoniÚte, a w koñcu nie o to nam chodzi. „ Oba rysunki muszÈ mieÊ takie same rozmiary. JeĂli tego nie dopilnujemy, to przeglÈdarka rozszerzy mniejszy obrazek do rozmiarów wiÚkszego — rzadko kiedy wyglÈda to dobrze. „ W poprzednim przykïadzie podmiana wykonywana byïa po wskazaniu kursorem myszy samego ïÈcza. Tym razem nastÚpuje po wskazaniu obrazka, czyli w ramach zdarzeñ onmouseover i onmouseout, powiÈzanych ze znacznikiem img , a nie ze znacznikiem a . Obie metody zazwyczaj dajÈ te same rezultaty, ale niektóre starsze przeglÈdarki (Netscape 4 i wczeĂniejsze, IE 3 i wczeĂniejsze) nie obsïugujÈ zdarzeñ onmouseover i onmouseout w znaczniku img . „ Moĝna sobie pomyĂleÊ, ĝe ze wzglÚdu na to, iĝ wszystkie znaczniki HTML na stronie zapisane sÈ maïymi literami (tak wymaga standard XHTML), to wïaĂciwoĂÊ tagName powinna byÊ porównywana do maïej litery „a”. Trzeba jednak pamiÚtaÊ, ĝe wïaĂciwoĂÊ ta zawsze zwraca tekst zapisany wielkimi literami. w ó k z a r b o y n a i m d o p a k i n h c e t a z s p e L 106 Praca z obrazami To wyglÈda zupeïnie inaczej… Jeĝeli ktoĂ myĂli sobie teraz, ĝe przecieĝ nie tak wyglÈdaï kod JavaScript, z jakim stykaï siÚ do tej pory, to proszÚ nie panikowaÊ. Z czasem kod zmienia siÚ w sposób naturalny, o czym z pewnoĂciÈ przekonali siÚ czytelnicy poprzednich wydañ naszej ksiÈĝki. Style zmieniajÈ siÚ przez caïe lata (mówiliĂmy o tym w rozdziale 1.), a zatem musiaï siÚ zmieniÊ teĝ rekomendowany styl tworzenia skryptów JavaScript. Jeĝeli ktoĂ dobrze sobie radziï w starym stylu, to z pewnoĂciÈ nie powinien mieÊ kïopotów z „przesiadkÈ”. Co wiÚcej, bardzo szybko bÚdzie zdziwiony, dlaczego przez tyle czasu mieszaï ze sobÈ kod HTML i JavaScript. Na przykïad skrypty przedstawiane na nastÚpnej stronie sÈ przykïadem tego, jak kod z podrozdziaïu „Lepsza technika podmiany obrazków” wyglÈdaï w poprzednim wydaniu ksiÈĝki, a jak wyglÈda teraz. W poprzednim wydaniu skrypt zostaï umieszczony w podrozdziale „Umieszczanie na stronie wielu podmienianych obrazków”, który zostaï usuniÚty z tego wydania, poniewaĝ „Lepsza technika podmiany obrazków” jest duĝo elastyczniejszym rozwiÈzaniem. Jak moĝna ïatwo zauwaĝyÊ, oba prezentowane skrypty majÈ mniej wiÚcej tÚ samÈ dïugoĂÊ. Jest to jednak zïudne wraĝenie, poniewaĝ na obu stronach znajdujÈ siÚ tylko dwa przyciski. Po dodaniu trzeciego przycisku w obu przypadkach trzeba by dopisaÊ po jednym wierszu kodu HTML. Z kolei w starym skrypcie JavaScript konieczne byïoby dodanie siedmiu wierszy kodu. A co z nowÈ wersjÈ skryptu? Tutaj nie trzeba juĝ nic dodawaÊ. Co wiÚcej, w starej metodzie musimy pamiÚtaÊ o rÚcznym zdefiniowaniu funkcji obsïugi zdarzeñ onmouseover i onmouseout, a takĝe samodzielnym przypisaniu ich do nowego przycisku. Bez takich zabiegów obrazki nie bÚdÈ podmieniane, niezaleĝnie od tego, ile kodu JavaScript zapiszemy na stronie. Nowa metoda nie wymaga w ogóle stosowania dodatkowego kodu JavaScript. Jest to szczególnie wygodne wtedy, gdy pracujemy w wiÚkszej grupie, w której czÚĂÊ osób zajmuje siÚ wyïÈcznie kodem HTML, a inni tworzÈ kod JavaScript. Poza tym nowa metoda polecana jest równieĝ dlatego, ĝe kodu JavaScript nie musimy powtarzaÊ na kaĝdej stronie po kolei! Jeĝeli na stronach znajdujÈ siÚ podmieniane obrazki przycisków, to caïa witryna na pewno skïada siÚ z wielu stron. Jeĝeli kaĝda z tych stron musiaïaby ïadowaÊ swój wïasny kod JavaScript, to caïa witryna dziaïaïaby bardzo wolno. Jeĝeli jednak strony bÚdÈ siÚ odwoïywaïy do jednego, zewnÚtrznego pliku z kodem JavaScript, to plik ten zostanie pobrany tylko raz i bÚdzie od razu dostÚpny dla kaĝdej odwoïujÈcej siÚ do niego strony bez ponownego pobierania. Oznacza to zmniejszenie liczby przesyïanych danych i szybsze dziaïanie witryny — w odczuciu jej uĝytkowników. Najlepsze jest jednak to, ĝe ewentualne zmiany w kodzie JavaScript moĝna wprowadzaÊ tylko w jednym pliku, a bÚdÈ one natychmiast obowiÈzywaïy na wszystkich stronach w caïej witrynie. T o w y g l È d a z u p e ï n i e i n a c z e j … 107 Rozdziaï 4. Poprzednie wydanie Aktualne wydanie !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head title Lepsza podmiana obrazków /title script type= text/javascript ´src= script02.js /script /head body bgcolor= #FFFFFF a href= next1.html img src= images/ ´button1_off.gif width= 113 height= 33 ´border= 0 alt= button1 id= button1 ´/ /a nbsp; nbsp; a href= next2.html img src= images/ ´button2_off.gif width= 113 height= 33 ´border= 0 alt= button2 id= button2 ´/ /a /body /html - - - - - - - - - - - - - - - - - - - - - - window.onload = rolloverInit; function rolloverInit() { for (var i=0; i document.images.length; ´i++) { if (document.images[i].parentNode. ´tagName == A ) { setupRollover(document.images[i]); } } } function setupRollover(thisImage) { thisImage.outImage = new Image(); thisImage.outImage.src = thisImage.src; thisImage.onmouseout = function() { this.src = this.outImage.src; } thisImage.overImage = new Image(); thisImage.overImage.src = images/ + ´thisImage.id + _on.gif ; thisImage.onmouseover = function() { this.src = this.overImage.src; } … j e z c a n i e i n ï e p u z a d È l g y w o T !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 ´Transitional//EN html xmlns= http://www.w3.org/1999/xhtml head title Prosta podmiana obrazków /title script language= javascript ´type= text/javascript !--ukrycie skryptu przed starszymi przeglądarkami if (document.images) { button1Red = new Image; button1Blue= new Image; button2Red= new Image; button2Blue= new Image; button1Red.src = ´ images/redbutton1_on.gif button1Blue.src = ´ images/bluebutton1_off.gif button2Red.src = ´ images/redbutton2_on.gif button2Blue.src = ´ images/bluebutton2_off.gif } else { button1Red = button1Blue = button2Red = button2Blue = document.button1 = document.button2 = } // koniec ukrywania skryptu przed starszymi przeglądarkami -- /script /head body bgcolor= #FFFFFF a href= next1.html onmouseover= ´ document.button1.src=button1Red.src ´onmouseout= document.button1.src= ´button1Blue.src img src= images/ ´bluebutton1_off.gif width= 113 ´height= 33 ´border= 0 name= button1 alt= button1 / /a nbsp; nbsp; a href= next2.html onmouseover= ´ document.button2.src=button2Red.src ´onmouseout= document.button2 ´.src=button2Blue.src img src= images/ ´button2_off.gif width= 113 height= 33 ´border= 0 name= button2 alt= button2 ´/ /a /body /html 108 Praca z obrazami Tworzenie przycisków trójstanowych Przycisk trójstanowy jest podmienianym obrazkiem, który ma trzy róĝne wersje. Oprócz oryginalnego obrazka oraz wersji pojawiajÈcej siÚ po wskazaniu przycisku kursorem myszy, tworzona jest jeszcze trzecia wersja, która wyĂwietla siÚ po klikniÚciu przycisku, tak jak na rysunku 4.5. Skrypt 4.4 to plik HTML wyglÈdajÈcy niemal tak samo jak plik ze skryptu 4.2. Róĝnica miÚdzy nimi polega na róĝnych tytuïach i nazwach zewnÚtrznych plików JavaScript stosowanych na stronie. To wszystko. Jest to doskonaïy przykïad tego, ĝe umieszczenie caïego kodu JavaScript w zewnÚtrznym pliku jest bardzo potÚĝnÈ technikÈ pozwalajÈcÈ na dodawanie do stron nowych funkcji bez koniecznoĂci modyfikowania samego kodu HTML. T w o r z e n i e p r z y c i s k ó w t r ó j s t a n o w y c h Rysunek 4.5. Po klikniÚciu przycisku pojawia siÚ trzeci obrazek (na czarno-biaïych stronach ksiÈĝki bÚdzie to maïo widoczne, lepiej bÚdzie uruchomiÊ przykïad w przeglÈdarce) Skrypt 4.4. Umieszczenie kodu JavaScript w zewnÚtrznym pliku pozwala zastosowaÊ na stronie przyciski trójstanowe bez jakiejkolwiek modyfikacji kodu HTML !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ ´xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head title Przyciski trójstanowe /title script type= text/javascript ´src= script03.js /script /head body bgcolor= #FFFFFF a href= next1.html img src= images/ ´button1_off.gif width= 113 height= 33 ´border= 0 alt= button1 id= button1 ´/ /a nbsp; nbsp; a href= next2.html img src= images/ ´button2_off.gif width= 113 height= 33 ´border= 0 alt= button2 id= button2 ´/ /a /body /html 109 Rozdziaï 4. W skrypcie 4.5 moĝna zobaczyÊ zawartoĂÊ zewnÚtrznego pliku JavaScript. Znajdziemy w nim zaledwie kilka zmian w stosunku do kodu ze skryptu 4.3. Nie bÚdziemy zatem od poczÈtku analizowaÊ caïoĂci, ale skoncentrujemy siÚ na wprowadzonych zmianach. Omawiane czÚĂci skryptu wyróĝnione zostaïy kolorem czerwonym. Aby przygotowaÊ przycisk trójstanowy: 1. thisImage.clickImage = new Image(); thisImage.clickImage.src = images/ + thisImage.id + _click.gif ; W funkcji setupRollover() musimy dodaÊ trzeciÈ wïaĂciwoĂÊ obiektu obrazka, opisujÈcÈ stan po klikniÚciu. W pierwszym wierszu tworzony jest nowy obiekt obrazka, który bÚdzie przechowywaï dodatkowy obraz. W drugim wierszu definiowane jest ěródïo obrazu clickImage. Nazwa pliku obrazka tworzona jest przez zïoĝenie nazwy katalogu images/ z identyfikatorem oryginalnego obrazka i dopiskiem _click.gif. 2. thisImage.onclick = function() { this.src = this.clickImage.src; } Ten wiersz informuje przeglÈdarkÚ co naleĝy zrobiÊ, gdy uĝytkownik kliknie obrazek. W tym przypadku chodzi o podmianÚ obrazka na wersjÚ wskazywanÈ przez obiekt clickImage. h c y w o n a t s j ó r t w ó k s i c y z r p e i n e z r o w T Skrypt 4.5. Skrypt obsïugujÈcy przyciski trójstanowe window.onload = rolloverInit; function rolloverInit() { for (var i=0; i document.images.length; ´i++) { if (document.images[i].parentNode. ´tagName == A ) { setupRollover(document.images[i]); } } } function setupRollover(thisImage) { thisImage.outImage = new Image(); thisImage.outImage.src = thisImage.src; thisImage.onmouseout = function() { this.src = this.outImage.src; } thisImage.clickImage = new Image(); thisImage.clickImage.src = images/ + ´thisImage.id + _click.gif ; thisImage.onclick = function() { this.src = this.clickImage.src; } thisImage.overImage = new Image(); thisImage.overImage.src = images/ ´+ thisImage.id + _on.gif ; thisImage.onmouseover = function() { this.src = this.overImage.src; } 110 Praca z obrazami Podmiana obrazków poprzez ïÈcze We wczeĂniejszych przykïadach uĝytkownik powodowaï zamianÚ rysunków, wskazujÈc rysunek kursorem myszy. Moĝna takĝe sprawiÊ, aby zamiana rysunków dokonywaïa siÚ w chwili umieszczenia kursora nad ïÈczem, tak jak pokazano to na rysunkach 4.6 i 4.7. Kod HTML uĝyty w tym przykïadzie tworzy maïo ciekawÈ stronÚ z jednym ïÈczem i jednym obrazkiem (skrypt 4.6). Podmiany obrazków dokonamy przez zmodyfikowanie skryptu z poprzednich przykïadów (skrypt 4.7). P o d m i a n a o b r a z k ó w p o p r z e z ï È c z e 111 Rysunek 4.6. W tekstowym ïÈczu zawarty jest mechanizm powodujÈcy podmienianie obrazków Rysunek 4.7. W chwili wskazania ïÈcza zmienia siÚ obrazek Skrypt 4.6. Podany kod tworzy stronÚ HTML do podmiany obrazków za pomocÈ ïÈcza !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 ´Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ ´xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head title Podmiana obrazka przez ´ïÈcze /title script type= text/javascript ´src= script04.js /script /head body bgcolor= #FFFFFF h1 a href= next.html id= arrow ´NastÚpna strona /a /h1 img src= images/arrow_off.gif ´width= 147 height= 82 id= arrowImg ´alt= arrow / /body /html Rozdziaï 4. Aby podmieniÊ obrazek przez ïÈcze: 1. function rolloverInit() { for (var i=0; i document.links. length; i++) { Na poczÈtku funkcji rolloverInit() rozpoczynana jest pÚtla, podobna do tej z poprzednich przykïadów. Tym razem jednak nie szukamy obrazków (document.images. ´length), ale ïÈczy, jakie znajdujÈ siÚ w dokumencie (document.links.length). PÚtla rozpoczyna siÚ od przypisania zera do zmiennej i. Po kaĝdym obiegu, jeĝeli wartoĂÊ tej zmiennej jest mniejsza od liczby ïÈczy w dokumencie, to jest ona inkrementowana. 2. var linkObj = document.links[i]; Tutaj tworzona jest zmienna linkObj, do której wpisujemy aktualne ïÈcze. 3. if (linkObj.id) { var imgObj = document. ´getElementById(linkObj.id + Img ); Jeĝeli element linkObj ma identyfikator, to sprawdzamy, czy na stronie dostÚpny jest inny element o takim samym identyfikatorze uzupeïnionym o dopisek Img. Jeĝeli taki siÚ znajdzie, to umieszczamy go w nowo utworzonej zmiennej imgObj. 4. if (imgObj) { setupRollover(linkObj,imgObj); Jeĝeli istnieje obiekt imgObj, to wywoïywana jest funkcja setupRollover(), której w parametrach sÈ przekazywane obiekt obrazka i ïÈcza. e z c È ï z e z r p o p w ó k z a r b o a n a i m d o P Skrypt 4.7. Oto kod JavaScript powodujÈcy podmianÚ obrazków przez ïÈcze window.onload = rolloverInit; function rolloverInit() { for (var i=0; i document.links.length; ´i++) { var linkObj = document.links[i]; if (linkObj.id) { var imgObj = document.getElementById ´(linkObj.id + Img ); if (imgObj) { setupRollover(linkObj,imgObj); } } } } function setupRollover(thisLink,thisImage) { thisLink.imgToChange = thisImage; thisLink.onmouseout = function() { this.imgToChange.src = ´this.outImage.src; } thisLink.onmouseover = function() { this.imgToChange.src = this.overImage.src; } thisLink.outImage = new Image(); thisLink.outImage.src = thisImage.src; thisLink.overImage = new Image(); thisLink.overImage.src = images/ + thisLink.id + _on.gif ; } 112 Praca z obrazami 5. function setupRollover(thisLink, ´thisImage) { thisLink.imgToChange = thisImage; Funkcja setupRollover() zaczyna siÚ od pobrania parametrów opisujÈcych ïÈcze i obrazek, które przekazywane sÈ jej w kroku 4. NastÚpnie do obiektu ïÈcza dodawana jest nowa wïaĂciwoĂÊ o nazwie imgToChange. Skrypt musi w jakiĂ sposób „dowiedzieÊ” siÚ, jaki obrazek ma zostaÊ zmieniony po wskazaniu ïÈcza kursorem myszy. Informacja ta zapisywana jest wïaĂnie w tej wïaĂciwoĂci. 6. thisLink.onmouseout = function() { this.imgToChange.src = this. outImage.src; } thisLink.onmouseover = function() { this.imgToChange.src = this. ´overImage.src; } W momencie wywoïania zdarzenia mouseover lub mouseout obserwujemy dziaïanie nieco inne od prezentowanego w poprzednich przykïadach. Tym razem modyfikowana jest wïaĂciwoĂÊ this.imgToChange.src, a nie wïaĂciwoĂÊ this.src, tak jak to byïo robione poprzednio. Wskazówka „ Technika ta przydaje siÚ, gdy chcemy poinformowaÊ uĝytkownika, co zobaczy, gdy kliknie wskazywane w tej chwili ïÈcze. Zaïóĝmy, ĝe prowadzimy stronÚ biura podróĝy opisujÈcÈ wycieczki do Szkocji, na Hawaje i do Cleveland. Po lewej stronie moĝna by umieĂciÊ kolumnÚ z tekstowymi ïÈczami do wybranych miejsc, a z prawej — obszar podglÈdu, w którym pojawiaïyby siÚ odpowiednie zdjÚcia. W momencie wskazania ïÈcza do danego miejsca po prawej stronie pojawiaïby siÚ jego podglÈd. KlikniÚcie ïÈcza prowadziïoby uĝytkownika do strony ze szczegóïami dotyczÈcymi miejsca wycieczki. 113 P o d m i a n a o b r a z k ó w p o p r z e z ï È c z e Rozdziaï 4. Podmienianie obrazka z róĝnych ïÈczy Do tej pory efekt zmiany rysunku wywoïywany byï po wskazaniu myszÈ pojedynczego obrazka bÈdě ïÈcza tekstowego. Moĝna jednak równieĝ utworzyÊ stronÚ, w której efekt ten bÚdzie wywoïywany z wielu róĝnych miejsc — takie rozwiÈzanie jest idealne do opisywania treĂci rysunków na stronie. W naszym przykïadzie opisaliĂmy w ten sposób trzy obrazy projektów Leonarda da Vinci. Po wskazaniu któregoĂ z nich w polu tekstowym po prawej stronie pojawia siÚ opis obiektu na rysunku. W rzeczywistoĂci opis ten równieĝ jest rysunkiem, a dokïadniej — jednym z trzech róĝnych rysunków (po jednym dla kaĝdego wynalazku). Dziaïanie skryptów 4.8 i 4.9 przedstawiono na rysunku 4.8. Podobnie jak inne skrypty w ksiÈĝce, jest on tworzony na bazie poprzednich, w zwiÈzku z czym skupimy siÚ tylko na nowych rozwiÈzaniach. Skrypty 4.7 i 4.9 róĝniÈ siÚ tylko kilkoma wierszami kodu. y z c È ï h c y n ĝ ó r z a k z a r b o e i n a i n e i m d o P Skrypt 4.8. ProszÚ zauwaĝyÊ, ĝe ïÈcza i obrazki na tej stronie majÈ swoje identyfikatory !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ ´xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head title Wiele ïÈczy, jeden podmieniany ´obrazek /title script type= text/javascript ´src= script05.js /script /head body bgcolor= #EECC99 img src= images/DaVinci.jpg width= 144 ´height= 219 alt= DaVinci align= right ´hspace= 50 / img src= images/leoText.gif width= 375 ´height= 26 alt= Wynalazki Leonarda / a href= flyPage.html class= textField ´id= flyer img src= images/flyer.gif ´width= 293 height= 165 border= 0 ´alt= Maszyna latajÈca vspace= 10 ´id= flyerImg / /a br clear= right / img src= images/bg.gif width= 208 ´height= 27 id= textField alt= Pole ´tekstowe align= right vspace= 20 / a href= tankPage.html class= textField ´id= tank img src= images/tank.gif ´width= 325 height= 92 border= 0 ´alt= Czoïg id= tankImg / /a br / a href= heliPage.html class= textField ´id= helicopter img src= images/ ´helicopter.gif width= 224 height= 160 ´border= 0 alt= Helikopter ´id= helicopterImg / /a /body /html Rysunek 4.8. Na stronie znajdujÈ siÚ trzy rysunki przedstawiajÈce projekty wynalazków — samolotu, czoïgu oraz helikoptera. Po wskazaniu któregokolwiek z nich w polu tekstowym pojawia siÚ opis 114 Skrypt 4.9. Ten skrypt pozwala podmieniaÊ jeden obrazek poprzez wiele ïÈczy window.onload = rolloverInit; function rolloverInit() { for (var i=0; i document.links.length; ´i++) { var linkObj = document.links[i]; if (linkObj.className) { var imgObj = document.getElementById ´(linkObj.className); if (imgObj) { setupRollover(linkObj,imgObj); } } } } function setupRollover(thisLink,textImage) { thisLink.imgToChange = textImage; thisLink.onmouseout = function() { this.imgToChange.src = ´this.outImage.src; } thisLink.outImage = new Image(); thisLink.outImage.src = textImage.src; thisLink.overImage = new Image(); thisLink.overImage.src = images/ + ´thisLink.id + Text.gif ; } Praca z obrazami Aby wiele ïÈczy mogïo podmieniaÊ jeden obrazek: 1. if (linkObj.className) { var imgObj = document. ´getElementById(linkObj.className); Nie moĝemy skorzystaÊ z identyfikatorów obrazków w celu wyznaczenia identyfikatora obrazka podmienianego. Po prostu identyfikatory muszÈ byÊ unikalne. Z tego powodu kaĝdy z obrazków musi mieÊ jakÈĂ wartoĂÊ opisujÈcÈ umiejscowienie podmienianego obrazka, a zatem musimy skorzystaÊ z atrybutu class (na stronie moĝe znajdowaÊ siÚ wiele elementów o takiej samej wartoĂci tego atrybutu). W tym wierszu kodu przeszukujemy wïaĂciwoĂci className obiektów ïÈczy. 2. function setupRollover(thisLink, ´textImage) { thisLink.imgToChange = textImage; Funkcja setupRollover() otrzymuje w parametrach obiekt aktualnego ïÈcza (thisLink) oraz obiekt obrazka, który tutaj nazywany jest textImage. ProszÚ zauwaĝyÊ, ĝe w czasie wywoïywania tej funkcji przekazywane jej obiekty (moĝna o nich myĂleÊ jak o zmiennych) miaïy nazwy linkObj i imgObj. Pozostaïa czÚĂÊ skryptu dziaïa dokïadnie tak samo jak w poprzednich przykïadach z tego rozdziaïu. P o d m i e n i a n i e o b r a z k a z r ó ĝ n y c h ï È c z y 115 Rysunek 4.9. Po wskazaniu jednego z rysunków w polu tekstowym pojawia siÚ jego opis, a sam rysunek otrzymuje obramowanie Rozdziaï 4. Podmienianie wielu obrazków z jednego ïÈcza Co naleĝy zrobiÊ, by ïÈcze podmieniajÈce jeden z rysunków na stronie samo w sobie równieĝ byïo rysunkiem zmieniajÈcym swój wyglÈd po wskazaniu myszkÈ? Jak moĝna zobaczyÊ na rysunku 4.9, dodaliĂmy tÚ funkcjÚ do skryptu przedstawionego w poprzednim przykïadzie. Podobnie jak poprzednio, po wskazaniu myszÈ jednego z rysunków w polu tekstowym pojawia siÚ jego opis, a dodatkowo rysunek zostaje zastÈpiony innym, w którym dodano obramowanie. DziÚki temu uĝytkownik otrzymuje dodatkowÈ informacjÚ na temat tego, co wïaĂnie wskazuje (w przypadku gdyby kursor myszy nie byï wystarczajÈcy). W skrypcie 4.10 zostaï przedstawiony kod HTML strony (praktycznie bez ĝadnych zmian, z wyjÈtkiem tytuïu nazwy zewnÚtrznego pliku z kodem JavaScript), natomiast w skrypcie 4.11 moĝna zobaczyÊ niewielkie modyfikacje, jakie zostaïy wprowadzone do kodu z poprzedniego przykïadu. a z c È ï z w ó k z a r b o u l e i w e i n a i n e i m d o P 116 Praca z obrazami Skrypt 4.10. Ten skrypt HTML jest dokïadnie taki sam jak skrypt 4.8, jedyne róĝnice to inny tytuï i odwoïanie do innego pliku JavaScript !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 ´Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ ´xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head title Wiele ïÈczy, wiele podmienianych ´obrazków /title script type= text/javascript ´src= script06.js /script /head body bgcolor= #EECC99 img src= images/DaVinci.jpg width= 144 ´height= 219 alt= DaVinci align= right ´hspace= 50 / img src= images/leoText.gif width= 375 ´height= 26 alt= Wynalazki Leonarda / a href= flyPage.html class= textField ´id= flyer img src= images/flyer.gif ´width= 293 height= 165 border= 0 ´alt= Maszyna latajÈca vspace= 10 ´id= flyerImg / /a br clear= right / img src= images/bg.gif width= 208 ´height= 27 id= textField alt= Pole ´Tekstowe align= right vspace= 20 / a href= tankPage.html class= textField ´id= tank img src= images/tank.gif ´width= 325 height= 92 border= 0 ´alt= Czoïg id= tankImg / /a br / a href= heliPage.html class= textField ´id= helicopter img src= images/ ´helicopter.gif width= 224 height= 160 ´border= 0 alt= Helikopter ´id= helicopterImg / /a /body /html Aby podmieniaÊ wiele obrazków jednoczeĂnie: 1. thisLink.imgToChange = new Array; thisLink.outImage = new Array; thisLink.overImage = new Array; Te wiersze zostaïy dopisane dlatego, ĝe teraz skrypt musi dziaïaÊ z wiÚkszÈ liczbÈ obrazków (dwa na kaĝdy podmieniany obrazek). W poszczególnych wierszach tworzone sÈ nowe wïaĂciwoĂci obiektu thisLink. Kaĝda z tych wïaĂciwoĂci jest osobnym obiektem nazywanym tablicÈ (ang. array). 2. thisLink.imgToChange[0] = textImage; W poprzednim zadaniu wïaĂciwoĂÊ imgToChange byïa obrazkiem, ale tym razem jest tablicÈ przechowujÈcÈ obrazki. Jak widaÊ, wartoĂÊ zmiennej textImage zapisywana jest jako pierwszy element tablicy imgToChange. 3. thisLink.outImage[0] = new Image(); thisLink.outImage[0].src = textImage.src; Podobnie jak poprzednio, musimy zachowaÊ teĝ nieaktywnÈ wersjÚ obrazka, ale tym razem zapisujemy go jako pierwszy element tablicy outImage. 4. thisLink.overImage[0] = new Image(); thisLink.overImage[0].src = images/ + ´thisLink.id + Text.gif ; Aktywna wersja obrazka wyliczana jest tak jak w poprzednich przykïadach i zapisywana jako pierwszy element tablicy overImage. P o d m i e n i a n i e w i e l u o b r a z k ó w z ï È c z a 117 Skrypt 4.11. Ten skrypt obsïuguje wiele podmienianych obrazków window.onload = rolloverInit; function rolloverInit() { for (var i=0; i document.links.length; ´i++) { var linkObj = document.links[i]; if (linkObj.className) { var imgObj = document.getElementById ´(linkObj.className); if (imgObj) { setupRollover(linkObj,imgObj); } } } } function setupRollover(thisLink,textImage) { thisLink.imgToChange = new Array; thisLink.outImage = new Array; thisLink.overImage = new Array; thisLink.imgToChange[0] = textImage; thisLink.onmouseout = rollOut; thisLink.onmouseover = rollOver; thisLink.outImage[0] = new Image(); thisLink.outImage[0].src = textImage.src; thisLink.overImage[0] = new Image(); thisLink.overImage[0].src = images/ + ´thisLink.id + Text.gif ; var rolloverObj = document.getElementById ´(thisLink.id + Img ); if (rolloverObj) { thisLink.imgToChange[1] = rolloverObj; thisLink.outImage[1] = new Image(); thisLink.outImage[1].src = ´rolloverObj.src; thisLink.overImage[1] = new Image(); Rozdziaï 4. 5. var rolloverObj = document. getElementById(thisLink.id + Img ); if (rolloverObj) { Teraz musimy sprawdziÊ, czy podmiana dotyczyÊ bÚdzie wielu obrazków, czy teĝ tylko pojedynczego. W takim przypadku na stronie bÚdzie znajdowaÊ siÚ element o takim samym identyfikatorze jak ten, ale uzupeïnionym o dopisek Img. Oznacza to, ĝe w przypadku, gdy aktualny element ma identyfikator flyer, to na stronie powinien znajdowaÊ siÚ element o identyfikatorze flyerImg. Jeĝeli tak jest, to jest on zapisywany do zmiennej rolloverObj i wykonywane sÈ trzy kolejne kroki. 6. thisLink.imgToChange[1] = rolloverObj; Przedstawiony wyĝej sposób pracy z elementem imgToChange[0] powtarzamy teraz dla elementu imgToChange[1], czyli przypisujemy mu wartoĂÊ zmiennej rolloverObj. W momencie wywoïania funkcji obsïugujÈcych zdarzenia onmouseover lub onmouseout oba rysunki zostanÈ zastÈpione wïaĂciwymi zastÚpnikami. 7. thisLink.outImage[1] = new Image(); thisLink.outImage[1].src = ´rolloverObj.src; Te instrukcje definiujÈ drugi element tablicy outImage, przechowujÈcej nieaktywne wersje obrazka. 8. thisLink.overImage[1] = new Image(); thisLink.overImage[1].src = images/ + ´thisLink.id + _on.gif ; W tym miejscu wyznaczana jest aktywna wersja obrazka, a nastÚpnie wpisywana jest jako drugi element tablicy overImage. Jeĝeli chcielibyĂmy jednoczeĂnie podmieniaÊ jeszcze trzeci obrazek, to naleĝaïoby powtórzyÊ kroki 6.–8., wprowadzajÈc do nich odpowiednie modyfikacje. a z c È ï z w ó k z a r b o u l e i w e i n a i n e i m d o P 118 Skrypt 4.11. ciÈg dalszy thisLink.overImage[1].src = images/ + ´thisLink.id + _on.gif ; } } function rollOver() { for (var i=0;i this.imgToChange.length; ´i++) { this.imgToChange[i].src = ´this.overImage[i].src; } } function rollOut() { for (var i=0;i this.imgToChange.length; ´i++) { this.imgToChange[i].src = ´this.outImage[i].src; } } Praca z obrazami 9. for (var i=0;i this.imgToChange. ´length; i++) { this.imgToChange[i].src = ´this.overImage[i].src; } WewnÈtrz funkcji rollOver() wykonywana jest zamiana obrazków. Podmiany wymagaÊ moĝe jeden lub wiÚcej obrazków, a zatem musimy sprawdziÊ, ile z nich zostaïo zapisanych w tablicy. Ta informacja zapisana jest we wïaĂciwoĂci this.imgToChange.length. W tym przypadku otrzymamy wartoĂÊ 2, poniewaĝ musimy zmieniÊ tylko dwa obrazki. PÚtla bÚdzie miaïa zatem dwa obiegi, w których najpierw wykorzystamy wartoĂci zapisane w elemencie imgToChange[0], a nastÚpnie w elemencie imgToChange[1]. 10. for (var i=0;i this.imgToChange. ´length; i++) { this.imgToChange[i].src = ´this.outImage[i].src; } Funkcja rollOut() dziaïa niemal dokïadnie tak samo jak funkcja z poprzedniego kroku. Róĝnica polega na tym, ĝe tym razem przywracane sÈ oryginalne obrazki. Wskazówki „ Naleĝy bardzo uwaĝaÊ, by nazwy podmienianych rysunków nie powtarzaïy siÚ — kaĝdy z nich musi posiadaÊ wïasnÈ, unikalnÈ nazwÚ. „ Co zrobiÊ, jeĝeli chcemy, ĝeby pewne ïÈcza przeïÈczaïy jednoczeĂnie wiele obrazków, a pozostaïe zwiÈzane byïy z pojedynczym obrazkiem? To ĝaden problem. Nie trzeba zmieniaÊ nawet jednego wiersza kodu JavaScript. Wystarczy, ĝe instrukcja w kroku 5. nie znajdzie na stronie odpowiedniego identyfikatora. W takiej sytuacji funkcja nie zapisze drugiego elementu do tablicy, a funkcje rollOver() i rollOut() bÚdÈ przeïÈczaïy wyïÈcznie podstawowy obrazek. 119 P o d m i e n i a n i e w i e l u o b r a z k ó w z ï È c z a Skrypt 4.12. Kod HTML ïaduje pierwszy obrazek banera, a resztÈ dziaïañ zajmuje siÚ JavaScript !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 ´Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ ´xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head title Animowane banery /title script type= text/javascript ´src= script07.js /script /head body bgcolor= #FFFFFF div align= center img src= images/reading1.gif ´width= 400 height= 75 id= adBanner ´alt= Reklama / /div /body /html Skrypt 4.13. Kod JavaScript sïuĝy nam do cyklicznego podmieniania banerów window.onload = rotate; var thisAd = 0; function rotate() { var adImages = new Array( images/ ´reading1. ´gif , images/reading2.gif , images/ ´reading3.gif ); thisAd++; if (thisAd == adImages.length) { thisAd = 0; } document.getElementById( adBanner ).src = ´adImages[thisAd]; setTimeout(rotate, 3 * 1000); } w ó r e n a b h c y n a w o m i n a e i n e z r o w T Rozdziaï 4. Tworzenie animowanych banerów Podczas oglÈdania stron WWW czÚsto moĝna natknÈÊ siÚ na reklamowe banery,
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Po prostu JavaScript i Ajax. Wydanie VII
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: