Cyfroteka.pl

klikaj i czytaj online

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

Potencjał JavaScriptu w zasięgu ręki!

Język JavaScript po paru latach banicji wrócił do łask - jeszcze silniejszy, jeszcze lepszy, wręcz niezbędny! To dzięki niemu współczesne aplikacje internetowe nie przypominają tych tradycyjnych, które znaliśmy do tej pory, ale są od nich o wiele lepsze! Dostępne z każdego miejsca na świecie, odporne na awarie oraz kuszące atrakcyjnym interfejsem użytkownika...

Dzięki tej książce błyskawicznie poznasz możliwości JavaScriptu oraz zaczniesz stosować go w codziennej pracy. Znajdziesz tu wszystkie niezbędne informacje, począwszy od podstaw tworzenia interaktywnej witryny internetowej, a skończywszy między innymi na dodawaniu zaawansowanych funkcji, oferowanych przez bibliotekę jQuery. Już po krótkiej lekturze tchniesz życie w swoje strony internetowe, a jeśli poświęcisz trochę więcej czasu, bez problemu stworzysz efektowną aplikację internetową!

W trakcie lektury poznasz:

Przygotuj swoją pierwszą aplikację internetową!


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

Darmowy fragment publikacji:

Tytuł oryginału: JavaScript: Visual QuickStart Guide (8th Edition) Tłumaczenie: Piotr Pilch na podstawie „Po prostu JavaScript i Ajax. Wydanie VII” w tłumaczeniu Wojciecha Mocha Projekt okładki: Maciej Pasek Materiały graficzne na okładce zostały wykorzystane za zgodą Shutterstock Images LLC. ISBN: 978-83-246-4271-7 Authorized translation from the English language edition, entitled: JAVASCRIPT: VISUAL QUICKSTART GUIDE, Eighth Edition; ISBN 0321772970; by Tom Negrino, and Dori Smith; published by Pearson Education, Inc, publishing as Peachpit Press. Copyright © 2012 by Tom Negrino and Dori Smith. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education Inc. Polish language edition published by Helion S.A. Copyright © 2012. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/ppjsc8 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/ppjsc8.zip Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treĂci Spis treĞci Rozdziaä 1. Rozdziaä 2. Rozdziaä 3. Wprowadzenie 11 Pierwsze spotkanie z JavaScriptem 17 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 Tworzenie kodu HTML dla 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 ..................................... 59 Obsïuga bïÚdów .................................................................................................... 62 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 S p i s t r e Ă c i 5 Spis treĂci Rozdziaä 4. i c Ă e r t s i p S Rozdziaä 5. Rozdziaä 6. 6 Praca z funkcjami zwracajÈcymi wartoĂÊ ............................................................. 77 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 ................................................................ 107 Podmiana obrazków poprzez ïÈcze .................................................................... 109 Podmienianie obrazka z róĝnych ïÈczy .............................................................. 112 Podmienianie wielu obrazków z jednego ïÈcza ................................................. 115 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 Okna i ramki 131 Zapobieganie wyĂwietleniu strony w ramce ..................................................... 133 Konfigurowanie elementu docelowego ............................................................. 134 ’adowanie ramek iframe za pomocÈ JavaScriptu ............................................. 136 Praca z ramkami iframe ...................................................................................... 137 Tworzenie dynamicznych elementów iframe .................................................... 139 Funkcje wspólne dla kilku dokumentów ........................................................... 141 Otwieranie nowego okna .................................................................................... 143 Zmiana zawartoĂci nowego okna ........................................................................ 147 Obsïuga formularzy 149 Nawigacja „wybierz i przejdě” ........................................................................... 151 Dynamiczne modyfikowanie menu ................................................................... 156 Tworzenie pól wymaganych ............................................................................... 158 Wzajemne sprawdzanie wartoĂci pól ................................................................. 163 Wyróĝnianie problematycznych pól .................................................................... 165 Praktyczne wykorzystanie kontroli formularzy ................................................. 167 Praca z przyciskami opcji ................................................................................... 171 Wzajemne ustawianie wartoĂci pól .................................................................... 174 Sprawdzanie kodów pocztowych ....................................................................... 177 Sprawdzanie adresów e-mail .............................................................................. 181 Rozdziaä 7. Rozdziaä 8. Rozdziaä 9. Rozdziaä 10. Obiekty i model DOM Rozdziaä 11. Tworzenie dynamicznych stron Spis treĂci Formularze i wyraĝenia regularne 187 Sprawdzanie adresów e-mail za pomocÈ wyraĝeñ regularnych ....................... 189 Sprawdzanie nazwy pliku ................................................................................... 194 Wydobywanie ciÈgów znaków ............................................................................ 196 Formatowanie ciÈgów znaków ........................................................................... 199 Formatowanie i sortowanie ciÈgów znaków ...................................................... 203 Formatowanie i sprawdzanie poprawnoĂci ciÈgów znaków ............................. 205 Podmiana elementów za pomocÈ wyraĝenia regularnego ................................ 208 Obsïuga zdarzeñ 211 Obsïuga zdarzeñ okien ....................................................................................... 212 Obsïuga zdarzeñ myszy ...................................................................................... 220 Obsïuga zdarzeñ formularzy ............................................................................... 228 Obsïuga zdarzeñ klawiatury ............................................................................... 232 JavaScript i ciasteczka 235 Pieczemy pierwsze ciasteczko ............................................................................ 237 Odczytywanie ciasteczka .................................................................................... 241 WyĂwietlanie ciasteczek ..................................................................................... 242 Wykorzystanie ciasteczek jako liczników .......................................................... 244 Usuwanie ciasteczek ........................................................................................... 247 Obsïuga wielu ciasteczek .................................................................................... 249 Informowanie o nowoĂciach na stronie ............................................................. 251 257 Kilka sïów o manipulacji wÚzïami ...................................................................... 258 Dodawanie wÚzïów ............................................................................................. 260 Usuwanie wÚzïów ............................................................................................... 262 Usuwanie okreĂlonego wÚzïa ............................................................................. 264 Wstawianie wÚzïów ............................................................................................. 267 Podmiana wÚzïów ............................................................................................... 270 Tworzenie kodu za pomocÈ literaïów obiektów ................................................ 273 279 Wpisywanie aktualnej daty na stronie WWW .................................................. 280 Manipulowanie dniami ....................................................................................... 282 Dostosowywanie wiadomoĂci do pory dnia ....................................................... 283 WyĂwietlanie dat wedïug strefy czasowej ......................................................... 284 Konwersja czasu 24-godzinnego na 12-godzinny ............................................. 290 Odliczanie ............................................................................................................ 292 WyĂwietlanie i ukrywanie warstw ...................................................................... 296 Przenoszenie obiektu w dokumencie ................................................................ 299 Metody obiektu Date .......................................................................................... 301 S p i s t r e Ă c i 7 Spis treĂci Rozdziaä 12. Rozdziaä 13. Wprowadzenie do technologii Ajax Rozdziaä 14. Zestawy narzÚdziowe, szkielety i biblioteki JavaScript w akcji 303 Stosowanie wysuwanych menu .......................................................................... 304 Dodawanie menu rozwijanych ........................................................................... 307 Rozbudowa menu rozwijanych .......................................................................... 311 Pokaz slajdów z podpisami ................................................................................. 315 Generator dziwnych imion ................................................................................. 319 Generator wykresów sïupkowych ...................................................................... 324 Podmiany arkuszy stylów .................................................................................... 333 343 Ajax: o co tu chodzi ............................................................................................. 345 Odczytywanie danych z serwera ........................................................................ 349 Analizowanie danych z serwera ......................................................................... 357 OdĂwieĝanie danych z serwera .......................................................................... 364 Pobieranie danych z serwera .............................................................................. 367 PodglÈd ïÈczy w technologii Ajax ....................................................................... 371 Automatyczne uzupeïnienie pól formularza ...................................................... 375 381 Dodawanie biblioteki jQuery ............................................................................. 383 Aktualizowanie strony przy uĝyciu kodu jQuery .............................................. 386 Interakcja z bibliotekÈ jQuery ............................................................................ 387 Interakcja i aktualizowanie ................................................................................. 389 Automatycznie uzupeïniane pola ....................................................................... 392 395 Wyróĝnianie nowych elementów ....................................................................... 396 Budowanie menu harmonijkowych ................................................................... 400 Tworzenie sprytnych okien dialogowych .......................................................... 404 Pasiaste tabele ..................................................................................................... 408 Sortowanie tabel .................................................................................................. 411 415 Zastosowanie biblioteki jQuery w roli fundamentu .......................................... 416 Uĝycie narzÚdzia ThemeRoller do dostosowywania wyglÈdu witryny ................ 418 Dodawanie kalendarza do strony ....................................................................... 421 PrzeciÈganie i upuszczanie elementów ............................................................. 426 Uĝycie biblioteki jQuery z danymi zewnÚtrznymi ........................................... 429 Zastosowanie dodatków biblioteki jQuery ........................................................ 438 Rozdziaä 15. Tworzenie stron przy uĝyciu biblioteki jQuery Rozdziaä 16. Tworzenie stron przy uĝyciu biblioteki jQuery i c Ă e r t s i p S 8 Spis treĂci Rozdziaä 17. Skryptozakïadki 445 Pierwsza skryptozakïadka ................................................................................... 446 Zmiana koloru tïa strony ..................................................................................... 452 Zmiana stylów strony .......................................................................................... 453 Wyszukiwanie sïów ............................................................................................. 456 PrzeglÈdanie obrazków ....................................................................................... 459 WyĂwietlanie znaków z zestawu ISO Latin ...................................................... 461 Konwersja wartoĂci RGB do postaci szesnastkowej ......................................... 464 Konwersja wartoĂci ............................................................................................. 466 Kalkulator skryptozakïadkowy ........................................................................... 467 Skracanie adresów URL ..................................................................................... 469 Sprawdzanie poprawnoĂci stron ........................................................................ 470 Wysyïanie stron e-mailem .................................................................................. 471 Zmiana wielkoĂci stron ....................................................................................... 472 JavaScript — genealogia i kompendium 473 Wersje JavaScriptu ............................................................................................. 474 ECMAScript ........................................................................................................ 477 Diagram obiektów ............................................................................................... 479 Wielka tabela obiektów ....................................................................................... 485 497 Sïowa kluczowe jÚzyka JavaScript Kaskadowe arkusze stylów 501 Gdzie moĝna dowiedzieÊ siÚ wiÚcej 509 Znajdowanie pomocy w sieci .............................................................................. 510 Tradycyjne ěródïa informacji ............................................................................. 513 Wskazówki dotyczÈce rozwiÈzywania problemów ............................................ 514 517 Skorowidz Dodatek A Dodatek B Dodatek C Dodatek D S p i s t r e Ă c i 9 Spis treĂci i c Ă e r t s i p S 10 Praca z obrazami 4 Rozdziaá 4. Praca z obrazami W tym rozdziale: Podmieniane obrazki Lepsza technika podmiany obrazków Tworzenie przycisków trójstanowych Podmiana obrazków poprzez ïÈcze Podmienianie obrazka z róĝnych ïÈczy Podmienianie wielu obrazków z jednego ïÈcza Tworzenie animowanych banerów Dodawanie ïÈczy do animowanych banerów Prezentacje Losowe wyĂwietlanie obrazków Cykliczna zmiana obrazów z losowym obrazem poczÈtkowym Jednym z najciekawszych zastosowañ JavaScriptu jest oĝywianie stron przy uĝyciu animowanej grafiki. Temu wïaĂnie poĂwiÚcimy ten rozdziaï. Obrazek na stronie zmieniajÈcy siÚ w chwili wskazania go myszÈ — 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, co za chwilÚ zademonstrujemy, moĝna go wykorzystaÊ na wiele sposobów. Podmieniane obrazki to bardzo przydatne narzÚdzie, ale JavaScriptu moĝna takĝe uĝyÊ do tworzenia obrazków zmieniajÈcych siÚ automatycznie lub do opracowania animowanych banerów reklamowych, pokazów slajdów, a nawet wyĂwietlania na stronie losowo wybieranych obrazków. W tym rozdziale napiszemy, jak moĝna wprowadziÊ na strony róĝne sztuczki z obrazami, wykonywane za pomocÈ jÚzyka JavaScript. Zabieramy siÚ do pracy! 99 101 107 109 112 115 120 122 124 127 129 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. Zawiera adres URL obrazka, wzglÚdny w stosunku do adresu URL strony. src Opisuje szerokoĂÊ (w pikselach), jakÈ obrazek ma mieÊ po wyĂwietleniu w przeglÈdarce. width height Opisuje wysokoĂÊ (w pikselach), jakÈ obrazek ma mieÊ po wyĂwietleniu w przeglÈdarce. alt id Tekst stosowany w przeglÈdarkach niewizualnych, który zastÚpuje sam obrazek. Jednoznaczny identyfikator pozwalajÈcy skryptom JavaScript na wprowadzanie modyfikacji do obrazka. i m a z a r b o z a c a r P 98 Skrypt 4.1. Najprostszy sposób utworzenia animowanego przycisku menu w znaczniku ïÈcza !DOCTYPE html html head title Prosta podmiana obrazków /title link rel= stylesheet href= script01.css /head body a href= next.html onmouseover= document.images[ arrow ].src= i mages/arrow_on.gif onmouseout= document.images[ arrow ].src= im ages/arrow_off.gif img src= images/arrow_off.gif id= arrow alt= arrow /a /body /html Praca z obrazami 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 myszÈ pierwszy obrazek, przeglÈdarka szybko podmienia wyĂwietlany obrazek na obrazek zmiennik, tworzÈc zïudzenie ruchu lub animacji. W skrypcie 4.1 prezentujemy 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. W elementach na stronie zastosowano kilka stylów. Style te umieszczono w osobnym pliku CSS (skrypt 4.2). Skrypt 4.2. Ten plik CSS definiuje style elementów w wielu przykïadach zamieszczonych w rozdziale Rysunek 4.1. Pierwszy obrazek przed wskazaniem go myszÈ Rysunek 4.2. Po wskazaniu obrazka myszÈ skrypt powoduje podmianÚ obrazków body { background-color: #FFF; } img { border-width: 0; } img#arrow, img#arrowImg { width: 147px; height: 82px; } #button1, #button2 { width: 113px; height: 33px; } .centered { text-align: center; } #adBanner { width: 400px; height: 75px; } 99 P o d m i e n i a n e o b r a z k i Rozdziaï 4. Oto tworzenie podmienianych obrazków: 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. onmouseover= document.images[ arrow ].src= ´ images/arrow_on.gif W chwili wskazania strzaïki myszÈ (atrybut src identyfikatora arrow) w dokumencie zostaje wyĂwietlony obrazek zmiennik arrow_on.gif, który znajduje siÚ w katalogu images. onmouseout= document.images[ arrow ].src= ´ images/arrow_off.gif Po odsuniÚciu wskaěnika myszy ponownie wyĂwietlany jest obrazek arrow_off.gif. img src= images/arrow_off.gif id= arrow ´alt= strzaïka Pozostaïa czÚĂÊ ïÈcza definiuje ěródïo oryginalnego obrazka na stronie. Znacznik obrazka uzupeïniliĂmy atrybutem alt (okreĂla on opis obrazka wykorzystywany przez niegraficzne przeglÈdarki), poniewaĝ jest 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 Opisana 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, zanim obrazki zostanÈ zamienione miejscami, bardzo prawdopodobne jest zaistnienie zauwaĝalnego opóěnienia szczególnie wtedy, kiedy uĝytkownik korzysta z modemu, a nie ïÈ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 uwaĝaÊ za powaĝny problem. Zamiast przedstawionej tu techniki polecamy sposób z nastÚpnego podrozdziaïu, który rozwiÈzuje obydwa opisane wyĝej problemy. Praca z obrazami Lepsza technika podmiany obrazków Aby uzyskaÊ rzeczywiste wraĝenie animacji, musimy zadbaÊ o to, aby obrazek zmiennik pojawiï siÚ natychmiast, bez zwïoki spowodowanej pobieraniem z serwera. W tym celu wykorzystamy JavaScript do zaïadowania do bufora przeglÈdarki wszystkich obrazków (tak aby znajdowaïy siÚ juĝ na dysku twardym komputera, kiedy bÚdÈ potrzebne), które umieĂcimy w zmiennych skryptu. DziÚki temu w chwili wskazania obrazka skrypt szybko podmieni jednÈ zmiennÈ zawierajÈcÈ obrazek na drugÈ. Przykïad przedstawiony jest w skrypcie 4.3. Widoczny efekt jest taki sam jak na rysunkach 4.1 i 4.2, jednak animacja przebiega sprawniej. 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.4 (wiÚcej informacji o plikach .js podawaliĂmy w rozdziale 3.). 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 Skrypt 4.3. Jedynym kodem JavaScript na tej stronie HTML jest wskazanie zewnÚtrznego pliku .js !DOCTYPE html html head title Lepsza podmiana obrazków /title script src= script02.js /script link rel= stylesheet href= script01.css /head body a href= next1.html img src= ´ images/button1_off.gif alt= button1 ´id= button1 /a nbsp; nbsp; a href= next2.html img src= ´ images/button2_off.gif alt= button2 ´id= button2 /a /body /html Skrypt 4.4. Oto lepszy sposób tworzenia podmienianych obrazków. Jest duĝo elastyczniejszy od sposobu ze skryptu 4.2 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; } 101 Rozdziaï 4. Oto skuteczniejsza podmiana obrazków: 1. script src= script02.js /script Ten znacznik pochodzi ze skryptu 4.3, czyli ze strony HTML. Atrybut src to informacja dla przeglÈdarki, gdzie moĝe znaleěÊ plik .js, w którym zapisany jest kod JavaScript. 2. a href= next1.html img src= ´ images/button1_off.gif alt= button1 ´id= button1 /a nbsp; nbsp; a href= next2.html img src= ´ images/button2_off.gif alt= button2 ´id= button2 /a CiÈg dalszy skryptu 4.3 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. Naleĝy zauwaĝyÊ, ĝe kaĝdy z tych dwóch przycisków ma teĝ swój unikalny identyfikator (o którym mowa byïa w rozdziale 1.). Identyfikatory te pozwolÈ skryptowi JavaScript na dokonanie podmiany obrazków. 3. window.onload = rolloverInit; Przechodzimy do skryptu 4.4. 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. 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 Praca z obrazami 4. function rolloverInit() { for (var i=0; i document.images. ´length; i++) { Funkcja rolloverInit() przeglÈda wszystkie obrazki na stronie i sprawdza, czy sÈ otoczone znacznikami a , co wskazuje na to, ĝe sÈ ïÈ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ĂÊ zero, 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 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«?”. 6. setupRollover(document.images[i]); Jeĝeli wynik testu z kroku 5. bÚdzie pozytywny, wywoïywana jest funkcja setupRollover(), której w parametrze przekazywany jest bieĝÈcy obrazek. 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 103 Rozdziaï 4. 7. function setupRollover(thisImage) { Warto 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. JeĂli trzeba, moĝna w nie wpisaÊ wïaĂciwoĂci nowo tworzonego obiektu. 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 104 Praca z obrazami 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. 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Ú z tylko 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.3 przyciskom nadaliĂmy identyfikatory button1 i button2) i uzupeïnienie caïoĂci o przyrostek _on.gif . 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 Rysunek 4.3. Na jednej stronie moĝna mieÊ wiele podmienianych obrazków Rysunek 4.4. Wskazujemy drugi obrazek 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. 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 chwili, gdy uĝytkownik przesunie nad niego wskaěnik myszy (rysunki 4.3 i 4.4). Wskazówki „ W czasie przygotowywania pary podmienianych obrazków trzeba przypilnowaÊ, ĝeby obrazki GIF lub PNG 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 chodzi. „ Oba rysunki muszÈ mieÊ takie same rozmiary. JeĂli tego nie dopilnujemy, przeglÈdarka rozszerzy mniejszy obrazek do rozmiarów wiÚkszego — rzadko 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, 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. 106 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.5 to plik HTML wyglÈdajÈcy niemal tak samo jak plik ze skryptu 4.3. 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. W skrypcie 4.6 moĝna zobaczyÊ zawartoĂÊ zewnÚtrznego pliku JavaScript. Znajduje siÚ w nim zaledwie kilka zmian w stosunku do kodu ze skryptu 4.4. 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 pogrubieniem. T w o T r o z e w n y i g e l È p d r z a y z c u i s p k e ó ï w n i e t r i ó n j a s c t a z n e j 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 uruchomiÊ przykïad w przeglÈdarce) Skrypt 4.5. Umieszczenie kodu JavaScript w zewnÚtrznym pliku pozwala zastosowaÊ na stronie przyciski trójstanowe bez jakiejkolwiek modyfikacji kodu HTML !DOCTYPE html html head title Przyciski trójstanowe /title script src= script03.js /script link rel= stylesheet href= script01.css /head body a href= next1.html img src= images/button1_off.gif alt= button1 id= button1 /a nbsp; nbsp; a href= next2.html img src= images/button2_off.gif alt= button2 id= button2 /a /body /html 107 Rozdziaï 4. Oto przygotowanie przycisku trójstanowego: 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 to informacja dla przeglÈdarki, co naleĝy zrobiÊ, gdy uĝytkownik kliknie obrazek. W tym przypadku chodzi o podmianÚ obrazka na wersjÚ wskazywanÈ przez obiekt clickImage. Skrypt 4.6. 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; } 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 108 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.7. Podany kod tworzy stronÚ HTML do podmiany obrazków za pomocÈ ïÈcza !DOCTYPE html html head title Podmiana obrazka przy uĝyciu ´ïÈcza /title script src= script04.js /script link rel= stylesheet href= script01.css /head body h1 a href= next.html ´id= arrow NastÚpna strona /a /h1 img src= images/arrow_off.gif ´id= arrowImg alt= arrow /body /html 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, co pokazano 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.7). Podmiany obrazków dokonamy przez zmodyfikowanie skryptu z poprzednich przykïadów (skrypt 4.8). 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 109 Rozdziaï 4. Oto podmiana obrazka przy uĝyciu ïÈcza: 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, 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, sprawdzamy, czy na stronie dostÚpny jest inny element o takim samym identyfikatorze uzupeïnionym o dopisek Img. Jeĝeli taki siÚ znajdzie, umieszczamy go w nowo utworzonej zmiennej imgObj. 4. if (imgObj) { setupRollover(linkObj,imgObj); Jeĝeli istnieje obiekt imgObj, 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.8. 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 ; } 110 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, kiedy 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. 111 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.9 (HTML), 4.10 (CSS) i 4.11 (JavaScript) przedstawiono na rysunku 4.8. Podobnie jak inne skrypty w ksiÈĝce, sÈ one tworzone na bazie poprzednich, w zwiÈzku z czym skupimy siÚ tylko na nowych rozwiÈzaniach. Skrypty 4.8 i 4.11 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.9. Naleĝy zauwaĝyÊ, ĝe ïÈcza i obrazki na tej stronie majÈ swoje identyfikatory !DOCTYPE html html head title Wiele ïÈczy, jeden podmieniany obrazek /title script src= script05.js /script link rel= stylesheet href= script02.css /head body div id= captionDiv img src= images/DaVinci.jpg width= 144 height= 219 alt= DaVinci img src= images/bg.gif id= captionField alt= Pole tekstowe /div div id= inventionDiv img src= images/leoText.gif id= heading alt= Wynalazki Leonarda a href= flyPage.html class= captionField id= flyer img src= images/flyer.gif width= 293 height= 165 alt= Maszyna latajÈca id= flyerImg /a a href= tankPage.html class= captionField id= tank img src= images/tank.gif width= 325 height= 92 alt= Czoïg id= tankImg /a a href= heliPage.html class= captionField id= helicopter img src= images/helicopter.gif width= 224 height= 160 alt= Helikopter id= helicopterImg /a /div /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 112 Skrypt 4.10. Ten skrypt pozwala podmieniaÊ jeden obrazek poprzez wiele ïÈczy Skrypt 4.11. Ten skrypt pozwala podmieniaÊ jeden obrazek poprzez wiele ïÈczy Praca z obrazami body { background-color: #EC9; } img { border-width: 0; } #captionDiv { float: right; width: 210px; margin: auto 50px; } #captionField { margin: 20px auto; width: 208px; height: 27px; } #inventionDiv { width: 375px; margin-left: 20px; } #heading { margin-bottom: 20px; width: 375px; height: 26px; } 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 ; } 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 113 Rozdziaï 4. Oto sposób, by 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. Warto 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. 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 114 Praca z obrazami 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 myszÈ? 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.12 zostaï przedstawiony kod HTML strony (praktycznie bez ĝadnych zmian, z wyjÈtkiem nazwy zewnÚtrznego pliku z kodem JavaScript), natomiast w skrypcie 4.13 moĝna zobaczyÊ niewielkie modyfikacje, jakie zostaïy wprowadzone do kodu z poprzedniego przykïadu. Rysunek 4.9. Po wskazaniu jednego z rysunków w polu tekstowym pojawia siÚ jego opis, a sam rysunek otrzymuje obramowanie Skrypt 4.12. Ten skrypt HTML jest dokïadnie taki sam jak skrypt 4.9, jedyne róĝnice to inny tytuï i odwoïanie do innego pliku JavaScript !DOCTYPE html html head title Wiele ïÈczy, wiele podmienianych obrazków /title script src= script06.js /script link rel= stylesheet href= script02.css /head body div id= captionDiv img src= images/DaVinci.jpg width= 144 height= 219 alt= DaVinci img src= images/bg.gif id= captionField alt= Pole tekstowe /div div id= inventionDiv img src= images/leoText.gif id= heading alt= Wynalazki Leonarda a href= flyPage.html class= captionField id= flyer img src= images/flyer.gif width= 293 height= 165 alt= Maszyna latajÈca id= flyerImg /a a href= tankPage.html class= captionField id= tank img src= images/tank.gif width= 325 height= 92 alt= Czoïg id= tankImg /a a href= heliPage.html class= captionField id= helicopter img src= images/helicopter.gif width= 224 height= 160 alt= Helikopter id= helicopterImg /a /div /body /html 115 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 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 Rozdziaï 4. Skrypt 4.13. 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(); 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; } } 116 Praca z obrazami Oto podmiana wielu obrazków jednoczeĂnie: 1. thisLink.imgToChange = new Array; thisLink.outImage = new Array; thisLink.overImage = new Array; Wiersze te 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 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, na stronie powinien znajdowaÊ siÚ element o identyfikatorze flyerImg. Jeĝeli tak jest, 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 jako drugi element tablicy overImage. GdybyĂmy chcieli jednoczeĂnie podmieniaÊ jeszcze trzeci obrazek, naleĝaïoby powtórzyÊ kroki od 6. do 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 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 Rozdziaï 4. Tworzenie animowanych banerów Podczas oglÈdania stron WWW czÚsto moĝna natknÈÊ siÚ na reklamowe banery, w których co chwila zmieniajÈ siÚ wyĂwietlane obrazki. WiÚkszoĂÊ z nich to animowane pliki GIF, w których znajduje siÚ kilka kolejno wyĂwietlanych obrazków. GdybyĂmy chcieli zbudowaÊ stronÚ, na której wyĂwietla siÚ kilka takich obrazków — animowanych bÈdě nie — moĝemy uĝyÊ jÚzyka JavaScript. Przykïad przedstawiamy w skrypcie 4.15. Wykorzystano w nim trzy kolejno wyĂwietlane obrazki GIF (moĝna je zobaczyÊ na rysunkach 4.10, 4.11 oraz 4.12). Kod prostej strony HTML przedstawiony zostaï w skrypcie 4.14. Oto tworzenie cyklicznie wyĂwietlanych banerów: 1. var thisAd = 0; Skrypt 4.14. Kod HTML ïaduje pierwszy obrazek banera, a resztÈ dziaïañ zajmuje siÚ JavaScript !DOCTYPE html html head title Animowane banery /title script src= script07.js /script link rel= stylesheet ´href= script01.css /head body div class= centered img src= images/reading1.gif ´id= adBanner alt= Reklama /div /body /html Skrypt 4.15. Kod JavaScript sïuĝy do cyklicznego podmieniania banerów Nasz skrypt zaczyna siÚ od utworzenia zmiennej thisAd i nadania jej wartoĂci poczÈtkowej. window.onload = rotate; var thisAd = 0; 2. function rotate() { var adImages = new Array( images/ ´reading1.gif , images/reading2.gif , ´ images/reading3.gif ); Ten wiersz rozpoczyna nowÈ funkcjÚ o nazwie rotate(). W kolejnym wierszu tworzona jest tablica o nazwie adImages, która bÚdzie przechowywaïa nazwy trzech plików GIF tworzÈcych cyklicznie zmieniajÈcy siÚ baner. 3. thisAd++; 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]; Pobiera wartoĂÊ zmiennej thisAd i powiÚksza jÈ o 1. 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 4. if (thisAd == adImages.length) { thisAd = 0; Ten kod sprawdza, czy licznik banerów (zmienna thisAd) osiÈgnÈï ogólnÈ liczbÚ elementów w tablicy, a jeĝeli tak, wpisuje do zmiennej wartoĂÊ zero. 120 Rysunek 4.10. Pierwszy obrazek, od którego rozpoczyna siÚ animowany baner Rysunek 4.11. Drugi obrazek… Rysunek 4.12. …ostatni obrazek. Po zaïadowaniu strony rozpoczynajÈ siÚ podmiany banerów, które nie wymagajÈ ĝadnej interwencji ze strony uĝytkownika Praca z obrazami 5. document.getElementById( adBanner ) ´.src = adImages[thisAd]; ZnajdujÈcy siÚ na stronie obrazek, który bÚdzie poddawany podmianom, ma identyfikator adBanner. Odpowiednia nazwa zostaïa zdefiniowana w znaczniku img , o czym moĝna siÚ przekonaÊ w skrypcie 4.14. Ten wiersz kodu przepisuje adres ěródïa obrazka z tablicy adImages z pozycji wyznaczanej przez zmiennÈ thisAd. 6. setTimeout(rotate, 3 * 1000); Ten wiersz skryptu wyznacza czÚstotliwoĂÊ zmian obrazków w banerze reklamowym. Wbudowane polecenie setTimeout() pozwala okreĂliÊ, ĝe po pewnym czasie ma zostaÊ wykonana instrukcja wpisana w poleceniu. W tym przypadku jest to funkcja rotate(), która bÚdzie wywoïywana co 3000 milisekund, czyli co trzy sekundy. Wskazówki „ Moĝna siÚ tu zastanawiaÊ, po co konstruowaÊ animowane banery za pomocÈ JavaScriptu, zamiast wykorzystaÊ po prostu animowane obrazki GIF. JavaScript pozwala na zastosowanie w animowanych banerach plików w formacie JPG lub PNG, które umoĝliwiajÈ tworzenie obrazków o duĝo lepszej jakoĂci. DziÚki temu banery mogÈ mieÊ niemal fotograficznÈ jakoĂÊ. „ W przeciwieñstwie do przedstawianych wczeĂniej przykïadów, obrazki banerów nie sÈ ïadowane wczeĂniej do bufora. Kaĝdy z nich ïadowany jest dopiero wtedy, gdy ma zostaÊ wyĂwietlony. Po prostu w tablicy banerów moĝe znajdowaÊ siÚ dowolna liczba obrazów, a zmuszanie przeglÈdarki do pobierania od razu na przykïad stu obrazów spowodowaïoby spadek prÚdkoĂci wyĂwietlania strony. Poza tym nie miaïoby to wiÚkszego sensu, jeĝeli uĝytkownik zobaczyïby najwyĝej dwa lub trzy obrazki, po czym przeszedï na innÈ stronÚ. 121 T w o r z e n i e a n i m o w a n y c h b a n e r ó w w ó r e n a b h c y n a w o m i n a o d y z c È ï e i n a w a d o D Rozdziaï 4. Dodawanie ïÈczy do animowanych banerów Animowane banery sÈ bardzo czÚsto wykorzystywane w reklamie — z pewnoĂciÈ warto wiedzieÊ, w jaki sposób moĝna utworzyÊ baner bÚdÈcy ïÈczem, które po klikniÚciu przeniesie oglÈdajÈcego na innÈ stronÚ. Sposób rozwiÈzania tego problemu przedstawiliĂmy w skrypcie 4.16, bazujÈcym na poprzednim przykïadzie (wokóï znacznika img dodaliĂmy znacznik a ). W skrypcie 4.17 moĝna zobaczyÊ lekkÈ wariacjÚ na temat skryptu z poprzedniego przykïadu. Jak widaÊ, dodaliĂmy teĝ nowÈ tablicÚ. ZnajdujÈ siÚ w niej adresy stron docelowych, na które uĝytkownik ma trafiÊ po klikniÚciu danego banera. W naszym przykïadzie uĝytkownik po klikniÚciu banera „Darmowe obiadki” trafi na stronÚ http://helion.pl/, po klikniÚciu „Java na gorÈco” — na http://java.pl/, a po klikniÚciu „Uniwersalny eliksir na zgagÚ” — na http://microsoft.com/poland (proszÚ spojrzeÊ na rysunek 4.13). Rzecz jasna, adresy nie sÈ z naszej strony ĝadnym komentarzem. Aby dodaÊ ïÈcza do cyklicznie podmienianych banerów: 1. window.onload = initBannerLink; Skrypt 4.16. Kod HTML wymagany do wyĂwietlania banerów !DOCTYPE html html head title Cyklicznie zmieniane banery ´z ïÈczami /title script src= script08.js /script link rel= stylesheet href= script01.css /head body div class= centered a href= linkPage.html img src= images/banner1.gif id= adBanner alt= reklama /a /div /body /html Skrypt 4.17. Ten skrypt jest przykïadem tego, jak moĝna zmieniÊ zwykïe cyklicznie podmieniane banery w prawdziwe reklamy window.onload = initBannerLink; var thisAd = 0; function initBannerLink() { if (document.getElementById( adBanner ). ´parentNode.tagName == A ) { document.getElementById( adBanner ) ´.parentNode.onclick = newLocation; } Po zakoñczeniu ïadowania strony wywoïywana jest funkcja initBannerLink(). rotate(); } 2. if (document.getElementById( adBanner ). ´parentNode.tagName == A ) { document.getElementById( adBanner ). ´parentNode.onclick = newLocation; } rotate(); Ten kod, znajdujÈcy siÚ w funkcji initBannerLink(), sprawdza najpierw, czy element adBanner znajduje siÚ wewnÈtrz znacznika ïÈcza. Jeĝeli tak jest, po jego klikniÚciu wywoïywana bÚdzie funkcja newLocation(). Na koniec wywoïywana jest funkcja rotate(). function newLocation() { var adURL = new Array( negrino.com , ´ sun.com , microsoft.com ); document.location.href = http://www. ´+ adURL[thisAd]; return false; } function rotate() { var adImages = new Array( images/ ´banner1.gif , images/ ´banner2.gif , images/banner3.gif ); ´thisAd++; if (thisAd == adImages. length) { thisAd = 0; } document.getElementById( adBanner ) ´.src = adImages[thisAd]; setTimeout(rotate, 3 * 1000); } 122 Rysunek 4.13. Kaĝdy z tych trzech rysunków jest ïÈczem, po klikniÚciu którego zostaniemy skierowani do róĝnych stron WWW Praca z obrazami 3. function newLocation() { var adURL = new Array( negrino.com , sun.com , microsoft.com ); W nowej funkcji newLocation() do zmiennej adURL przypisujemy tablicÚ zawierajÈcÈ trzy elementy. Zna
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Po prostu JavaScript. Wydanie VIII
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ą: