Scribd Logo
Upload

Welcome to Scribd!

  • Javascript Praktyczny Kurs

    Uploaded by

    x.pani.black
    33 views372 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    Download as pdf
    33 views372 pages

    Javascript Praktyczny Kurs

    Uploaded by

    x.pani.black

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    Download as pdf
    of 372
    Zostan specjalista w tworzeniu interaktywnych stron internetowych! ™ Jak zapewnié 1 , 1 ai on @ Jak korzystad 2e 2rnienr fl ; ® Jak stworzyé Marcin Lis Y.... Wszelkie prawa zastrzezone, Nieautoryzowane rozpowszechnianie catosci lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metoda kserograficana, fotograficzna, a takze kopiowanie ksiqzki na nosniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji Wszystkie znaki wystepujace w tekscie sq zastrzezonymi znakami firmowymi badz towarowymi ich wlascicieli Autor oraz Wydawnictwo HELION dotozyli wszelkich staran, by zawarte w tej ksigzce informacje byly kompleine i rzetelne, Nie biora jednak zadne} odpowiedzialnosci ani za ich wykorzystanie, ani za zwigzane z tym ewentualne naruszenie praw patentowych lub autorskich, Autor oraz Wydawnictwo HELION nile ponosza rownie2 Zadne} odpowiedzialnosci za ewentualne szkody wynikle z wykorzystania informacji zawartych w ksiazce Redakeja: Krzysztof Zemanek Projekt okladki: Maciej Pasek Fotografia na oktadce zostala wykorzystana za zgoda iStockPhoto Ine. Wydawnictwo HELION ul, Kosciuszki Ie, 44-100 GLIWICE tel, 032 231 22 19, 032 230 98 63 e-mail: helion@helion pl WWW: hip: helion pl (ksiggarnia internetowa, katalog ksigzek) Drogi Czytelniku! Tezeli chcesz. ocenié te ksiazke, zajrzyj pod adres Inip://helion.pliuser opinie?jscpk_ebook Mozesz tam wpisaé swoje uwagi, spostrzezenia, recenzje Pliki z praykladami omawianymi w ksiqzce mozna znaleZé pod adresem fip-’ fip.helion pl przyklady jsepk.zip. ISBN: 978-83-246-5428-4 Copyright © Helion 2009 Printed in Poland, # Poleé ksigake na Facebook.com + Ksiggarnia internetowa + Kup w wersji papierowe) © Lubie tol» Nasza spolecznosé © Oceriksiaéke Spis tresci Wstep .. 7 Rozdziat 1. Pierwsze kroki 9 Lekeja 1. Pierwszy skrypt 9 Pierwszy skrypt 9 HTML czy XHTML? u Umieszezanie skrypt6w w kodzie HTML i XHTML. in Standardy JavaScript 17 JavaScript i Java 7 Rozdziat 2. Instrukeje jezyka Lekeja 2. Instrukcje, zmienne i typy danych 19 Struktura kodéw HTML i XHTML w tym rozdziale 19 Czym sq instrukcje? 21 Co to jest zmienna? 22 Typy danych w JavaSeripcie 23 Znaczniki HTML 27 Komentarze 28 Uwagi dotyezace struktury leksykalne} 30 Instrukeja document.write 32 Lekcja 3. Operacje i operatory 33 Wykonywanie operagji 33 O wyswietlaniu danych raz jeszeze 35 Operatory arytmetyczne 36 Operatory inkrementacji i dekrementacji 38 Operatory porownywania (relacyjne) 4 Operatory logiczne 41 Operatory bitowe 4B Operatory przypisania 46 Operator warunkowy 48 Operator typeof 48 Pozostate operatory 49 Priorytety operatoréw 49 Operacje na ciagach znakow 50 Cwiczenia do samodzielnego wykonania sl 4 JavaScript. Praktyczny kurs Lekeja 4. Instrukcje warunkowe 31 Instrukeja if SI Instrukeja if...else 54 Instrukeja if...els 5 Zagniezdzanie instrukcji warunkowych 56 Zhozone wyrazenia warunkowe 58 Instrukeja wyboru switch 60 Operator warunkowy 62 Cwiczenia do samodzielnego wykonania 6 Lekcja 5. Petle 64 Petla for 64 Petla while 66 Petla do... while 67 Petla for...in 69 Jak nazywaé zmienne iteracyjne? 69 Zagniezdzanie petl 70 Przerywanie petli nR Kontynuowanie petli 4 Warianty petli for 15 Cwiczenia do samodzielnego wykonania 1 Lekeja 6. Funkcje i zasieg zmiennych 1 Jak tworzymy funkeje? B Argumenty funkeji 19 Zawracanie wartosci przez funkeje 81 Zasieg zmiennych 82 Jak przekazywane sq argumenty? 85 Pomijanie argumentow 86 Funkcje wewnetrzne 89 Cwiczenia do samodzielnego wykonania 90 Rozdziat 3. Obiekty, tablice i wyjatki 91 Lekeja 7. Standardowe obiekty i funkeje 91 Funkeje globalne ol Wlasciwosci globalne 100 Nieco matematyki (obiekt Math) 100 Cwiczenia do samodzielnego wykonania 106 Lekcja 8. Tworzenie obiektow 106 Czym jest obiekt? 107 ‘Tworzenie prostych obiektow (JSON) 107 Bezposrednie przypisywanie wlasciwosci i Odezyt i zapis danych za pomoca petli 114 Funkcje jako wlasciwosci obiektow 116 Cwiczenia do samodzielnego wykonania 120 Lekcja 9. Funkcje, konstruktory i prototypy 121 Czy funkcje to obiekty? 121 Wiasciwosei funkeji 125 Obiekt globalny 127 Konstruktory 129 Prototypy 132 Cwiczenia do samodzielnego wykonania 138 Lekeja 10. Tablice 138 Jak tworzymy tablice? 139 Jak zapisywa¢ i odezytywaé dane? 141 Indeksy i wlasciwosci tablic 144 Rozdziat 4. Wspétpraca z przegladarka .. Uzycie petli Operacje na tablicach Cwiczenia do samodzielnego wykonania Lekeja 11. Obstuga bledow i wyjatki Zglaszanie wyjatkow Przechwytywanie wyjatkow Obsluga biedéw w praktyce Blok finally Zagniezdzanie blokow try...catch Propagacja wyjatkow Predefiniowane obiekty wyjatkow Cwiczenia do samodzielnego wykonania Lekcja 12. DOM — wspélpraca z przegladarka Obiekty glowne przegladarki Obiekt window Obiekt document Obiekt history Obiekt location Obiekt navigator Lekcja 13. DOM — dostep do elementow witryny Struktura dokument. Dostep do elementow strony WWW Bezposrednia manipulacja wezlami dokumentu Tworzenie elementow strony przez skrypt Usuwanie elementow strony Cwiczenia do samodzielnego wykonania Lekcja 14. Zdarzenia Obsluga zdarzeit Ladowanie strony Reagowanie na kliknigcia Reagowanie na ruchy myszy Dynamiczne przypisywanie procedur obstugi Zdarzenia i dynamiczne elementy dokumentu Cwiezenia do samodzielnego wykonania Lekcja 15. Elementy witryny Elementy typu Prayciski Pola wyboru typu checkbox Pola wyboru typu radio Zwykle pola tekstowe Rozszerzone pola tekstowe Pola tekstowe typu password Listy wyboru Cwiczenia do samodzielnego wykonania Lekcja 16. Style CSS Dostep do atrybutow Obiekt style Wiasciwosé className Cwiczenia do samodzielnego wykonania 145 149 156 157 187 159 161 165 169 169 169 170 . 171 71 172 172 181 184 185 187 190 191 193 196 198, 199 204 204 204 207 2u1 213 215 218 219 220 220 222 224 227 229 232 233 235 239 240 240 244 249 251 JavaScript. Praktyczny kurs Rozdziat 5. Rozdziat 6. Przetwarzanie danych 253 Lekcja 17. Operacje na ciagach znakow 253 Jak sprawdzié dlugosé tekstu? 253 Metody formatujace ciagi znakow 256 Przetwarzanie ciagow 259 Uzycie metod operujacych na ciagach 265 Cwiczenia do samodzielnego wykonania 268 Lekcja 18. Wprowadzanie danych przez uzytkownika 269 Formularze 269 Sprawdzanie poprawnosci danych 273 Wprowadzanie danych 278 Przetwarzanie stylow 281 Cwiczenia do samodzielnego wykonania 285 Lekcja 19. Wyrazenia regularne 286 Obiekt RegExp 286 Jak korzystaé z wyrazei? 286 Budowanie wyrazen 290 Metody uzywajace wyrazen regularnych 299 Wyrazenia regularne i typ tatcuchowy 305 Wrazenia regularne w praktyce 307 Cwiczenia do samodzielnego wykonania 310 Lekcja 20. Cookies 311 Jak dziataja cookies? 312 Z czego sklada sig cookie? 312 Podgladanie cookies w przegladarkach 315 Cookies i JavaScript 315 Zliczanie liczby odwiedzin 323 Cwiczenia do samodzielnego wykonania 325 Data i czas 327 Lekcja 21. Obstuga daty i czasu 327 Obiekt Date 327 Pobieranie daty i czasu 331 Korzystanie z informagji o dacie i czasie 334 Formatowanie daty (metoda parse) 337 Data i czas w praktyce 338 Cwiczenia do samodzielnego wykonania 341 Lekcja 22. Korzystanie z timerow 342 Timery w JavaScripei 342 Wywolania cykliczne (interwaly) 346 Symulacja dzialania metody setInterval 349 Zegary 350 Animacje 352 Cwiczenia do samodzielnego wykonania 357 Skorowidz .. .. 359 Wstep Czym jest JavaScript? JavaScript to skryptowy jezyk programowania najczesciej uzywany do tworzenia in- teraktywnych stron WWW. To dzicki niemu mozna wyposazyé witryne w np. dyna- micznie rozwijane menu czy animowane clementy, a strony zaczynaja reagowaé na dzialania uzytkownika. JavaScript jest tez podstawa tak populamej ostatnimi czasy techniki AJAX, przy ktérej uzyciu strona WWW zaczyna sie zachowywaé jak zwykla aplikacja uruchamiana z poziomu systemu operacyjnego. Praktycznie zadna wspoleze- sna strona WWW nie obejdzie sig bez JavaScriptu. Jesli wigc cheesz tworzyé WWW, musisz — oprécz HTML ezy CSS — poznaé tez JavaScript. Dlatego wlasnie powstala ta ksiazka, Historia JavaScriptu sigga pierwszej polowy lat 90. ubieglego wieku. Jezyk ten po- wstal jako projekt Mocha w firmie Netscape, a jego glownym projektantem byt Brendan Eich. Po ukoriczeniu prac pierwsza dostepna wersja otrzymala nazwe LiveScript, kto~ ra nastepnie w roku 1995 — glownie ze wzgledaw marketingowych, a za porozumie- niem z firma Sun Microsystems — zostala zmieniona na JavaScript. To do dnia dzisiej- szego powoduje nieporozumienia i mylenie Javy z JavaScriptem. Kwestia ta zostanie wyjasniona w dalszej czesci ksiazki. Dia kogo jest ta ksiazka? Oczywiscie, ksigzka przeznaczona jest dla osob, ktére chea poznaé JavaScript oraz nauczyé sig tworzyé korzystajace z te} technologii interaktywne i atrakcyjne strony internetowe. Potrzebna jest znajomosé co najmniej solidnych podstaw jezykow HTML badz XHTML. Przydatna bedzie rowniez wiedza na temat stosowania stylow CSS. Czytelnik powinien umieé samodzielnie tworzyé przynajmniej proste strony WWW. 8 JavaScript. Praktyczny kurs z uzyciem jednego z tych jezykéw. Nie jest natomiast konieczna znajomosé zasad programowania (ani innych jezykow programowania) — zostang one przedstawione krok po kroku w trakcie nauki. Co bedzie potrzebne do nauki? Do nauki nie sq potrzebne zadne specjalne narzedzia. Nalezy, oczywiscie, mieé zain- stalowana przegladarke WWW — dowolna, wspélezesna, obslugujaca JavaScript, np. Firefox, Internet Explorer, Konqueror, Netscape, Opera itp. Nie musza to byé najnow- sze wersje, moga byé nawet produkty sprzed kilku lat, cho¢ im nowsze, tym lepiej Do pisania samego kodu skryptéw potrzebny tez bedzie dowolny, najprostszy edytor tekstowy. Najlepiej, aby miat mozliwosé zapisywania tekstu w kodowaniu UTF-8, a takze podswietlania skladni HTML i JavaScript. Mozna tu polecié takie produkty jak Notepad++ czy Notepad2. Moana tez skorzystaé z dowolnego oprogramowania do tworzenia witryn, np. Ist page 2000, HotDog, kED, Pajaczek itp. Bedzie to nasz warsztat pracy. Pliki i kody zrodtowe Wszystkie listingi oraz kody érédlowe przykladéw prezentowanych w ksiagce, a tak- ze rozwiazania éwiczeh ~=mozna_ pobrac-_—sze___— strony _internetowej hitp:/helion.plksiazkijscpk.him lub bezposrednio =z ~—sserwera—FTP: fip:/fip-helion.pl/przyklady jsepk.zip. Pliki tekstowe z listingami zawierajg fragmenty kodu w takiej postaci, w jakiej zostaly zaprezentowane na listingach w ksigzce (czasem sq to tylko fragmenty skryptéw). Oprécz tego, w osobnych katalogach znajduja sie pelne wersje kodéw (X)HTML i JavaScript, skladajace sig na gotowe do uruchomienia prayklady. Kazdy prayklad jest wige prezentowany zaréwno w postaci fragmentu omawianego w ksiazce (0 ile omawiany jest tylko fragment, a nie pelny kod), jak i w pelnej wersji gotowej do wezyta- nia do przegladarki Rozdziat 1. Pierwsze kroki Lekcja 1. Pierwszy skrypt Pierwsza lekcja rozpoczyna kurs. Zawarty w niej material to wprowadzenie w Swiat JavaScriptu; napiszemy pierwszy skrypt, pokazujacy, jak zmusié przegladarke do wy- konania pewnej czynnosci. Przyjrzymy sig rowniez réznicom migdzy kodami HTML i XHTML. Najwigcej miejsca poswigcimy jednak sposobom umieszczania skryptow JavaScript w kodzie HTML i XHTML. Poznamy znaczniki 10 Rozdziat 1. Pierwsze kroki

    Ta strona zawiera m6j pierwszy skrypt.

    To typowa strona HTML. Zawiera deklaracjg typu dokumentu (DOCTYPE), sekeje head, czyli naglowek, oraz sekeje body, ezyli wlasciwa tresé dokumentu. W naglowku znaj- duje sig znacznik okreslajacy tytul i znacznik <meta> definiujacy spos6b kodo- wania znakow (UTF-8). W tresci dokumentu widzimy natomiast znacznik <p> okre- slajacy akapit tekstowy, ktory sprawia, ze strona nie jest pusta, ale pojawia sig na niej napis. To wszystkie elementy HTML. Jednak w sekeji head znajdujemy znacznik <script>, ktéry definiuje skrypt JavaScript. Skrypt wykonuje tylko jedno zadanie — wyéwietla na ekranie okno dialogowe zawierajace tekst MOj pierwszy skrypt!. Jesli zatem wezytamy taka strong do przegladarki, zobaczymy widok przedstawiony na rysunku 1.1 Rysunek 2.4. ae ‘Nackramie pojawito TAN Ste inthis taieOl_ tweets Pom Tt sig okno dialogowe | Stee _tiok_etoie isles _Nredie_Fonos “ zawierajace €- zdefiniowany — 7, w skrypcie tekst Ms pirszy sheet ees] Zwrdémy uwage, 2 najpierw pojawilo sig okno dialogowe (przy pustej stronie), a dopiero po Kliknigciu znajdujacego sig w nim przycisku OK ukazal sie akapit teksto- wy zdefiniowany za pomoca znacznika <p>. Tq kwestia zajmiemy sig jednak w dalszej czesci lekeji, najpierw zobaczmy, jak wygladalaby taka strona w XHTML. Widaé to na listingu 1.2. Listing 4.2. Skrypr wyswietlajacy okno dialogowe w XHTML 1.0 <2xml_version="1.0" encoding="utf-8"2> <IDOCTYPE html PUBLIC *-//W9C//DTD XHTML 1.1//EN" “http: //www.w3.org/tr/ xhtml 11/Dtd/xhtml L1.dtd"> shtml xmins="http: //www.¥3.org/1999/xhtm)" xm) :1ang~ Lekeja 1. Pierwszy skrypt a4 <head> neta http-equ itent="text/htm]: charseteutf-8" /> <title-toja s <script type="text/javascrip alert("MOj pierwszy skrypt!" </script> <thead> <body> <p>Ta strona zawiera m6j pierwszy skry «</body> </html> Jak widaé, skrypt umieszezony jest dokladnie w taki sam spos6b jak w poprzednim przyktadzie. Rowniez jego dzialanie bedzie identyczne HTML czy XHTML? Na pytanie, czy strony WWW tworzyé w HTML, czy XHTML, kazdy twérca musi sobie odpowiedzieé sam. Ostatnia oficjalna specyfikacja HTML — 4.01 — ma juz ponad 10 lat i nie da sig ukryé, ze jest przestarzala. XHTML jest bardziej uporzadko- wany i nowoezesniejszy. Jednak juz niedlugo bedzie dostepny HTML 5 (w trakcie pisania ksiazki weigd trwaly prace nad tym standardem). To, w ktorym z jezykow wykonamy witryng, dla uzytkownika strony nie ma praktycznie zadnego znaczenia, wazne, by byla zgodna ze standardami. Przyktady skryptow w tej ksiazce zostaly napisane tak, aby dziataty prawidlowo zarow- no w witrynach napisanych w HTML, jak i XHTML. Umieszczanie skryptow w kodzie HTML i XHTML Znacznik <script> Dwa ostatnie przyklady pokazaly, ze nalezy uzyé znacznika <script», aby umiescié w kodzie HTML skrypt JavaScript. OgéIna struktura znacznika wyglada tak: <script type="typ"> tutaj tresé skryptu </serip Parametr type okresla tutaj typ jezyka skryptowego i jest obligatoryjny. Co prawda, jego pominigcie zwykle nie spowoduje usterki w dzialaniu strony (bowiem przegla- darki sq na takie sytuacje przygotowane i z reguly samodzielnie potrafiq okreslié typ skryptu), jednak jest to bardzo zla praktyka, a strona jest wtedy niezgodna ze standar- dami, Zatem zawsze stosujemy parametr type i w przypadku jezyka JavaScript jako jego wartosé uzywamy ciagu znakéw text/ javascript: <script type="text /Ja tutaj kod skryptu </scrip ascript"> 12 Rozdziat 1. ¢ Pierwsze kroki Uwaga: mozna réwniez. spotkaé inne okreslenia typu skryptu, w tym appl ication/ Siavascript, text/ecnascript i application/ecnascript, ktore rowniez sq zazwy- czaj poprawnie rozpoznawane przez przegladarki, Jednak konsekwentnie bedziemy korzystaé z najpopulamiejszego okreslenia — text/ javascript. Dawniej do okreslania typu skryptu stosowany by! parametr language, np.: ript language="Javascript Jest on przestarzaly i niezgodny z obecnymi wersjami HTML i XHTML. Nie nalezy go stosowaé, choé w sieci znajdziemy jeszcze skrypty, ktdre z tego parametru korzystaja, Oprécz wymienionych, mozna réwniez uzywaé parametrow charset oraz defer. Pierw- szy z nich pozwala okreslié typ kodowania znakéw w skrypcie. Drugi to wskazéwka dla przegladarki, ze skrypt nie modyfikuje tresci strony (nie generuje dynamicznie tresci strony). Znacznik <script> mglby wige mieé réwniez taka postaé! <script type~"text /java "utt-8" tutay kod skryptu </script> ript” charset Tych parametrow nie bedziemy jednak stosowaé, ograniczajac sig jedynie do type Skrypty osadzone Skrypty osadzone to takie, ktérych tres¢ jest wpleciona w kod HTML. Wygladaja one tak, jak na listingach 1.1 i 1.2. Nalezy je stosowaé, jesli kod skryptu nie jest zbyt dlugi i skomplikowany. Poniewaz w dzisiejszych czasach, ze wzgledu na stosowanie coraz to nowych i bardziej zaawansowanych technik (np. takich jak AJAX), rozmiar i skom- plikowanie skryptow weiaz rosna, coraz czesciej rozdzicla sig kody (X)HTML oraz JavaScript i umieszcza w réznych plikach. Mamy wtedy do czynienia ze skryptami zewnetrznymi. Skrypty zewnetrzne " W prypadku XHTML. “charset="utf-8' Jesli tresé skryptu JavaScript ma sig znalezé w innym pliku niz kod HTML witryny, nalezy réwniez zastosowaé znacznik <script>, ale wyposazyé go w parametr src wskazujacy adres URL pliku ze skryptem. Znacznik ten bedzie miat wtedy postaé: rest <script typi </script> ext/Javascript” sr Adres URL moze mieé postaé bezwzgledna, np.: http: //mojadonena .com/skrypty/skrypt..Js t/ javascript” parametru defer nalezatoby uayé ciggu <scriot type defer="defer">, Lekeja 4. ierwszy skrypt 13 Lub, jesli skrypt znajduje sig na tym samym serwerze, co kod witryny, wzgledna: éskrypty/skrypt js Jezeli plik ze skryptem znajduje sig w tym samym katalogu, co plik z kodem strony, wystarezy podaé sama nazwe, bez okreslania sciezki dostepu: skry Znacznik <script> moze wige prayiaé taka postaé: <script type=" </script> ‘text/Jjavascript” src="skrypt .js"> Przyjmuje sig przy tym, ze plik z kodem skryptu powinien mieé rozszerzenie .js, choé nie jest to obligatoryjne i mozna uzyé dowolnego innego. W ksiazce bedzie konse- kwentnie stosowane rozszerzenie ,js Oczywiscie, w takim przypadku cala zawartosé skryptu powinna znalezé sie w pliku o nazwie skryptjs, przy ezym, uwaga, w tresci tego pliku nie stosujemy juz znacznika <script», ale wpisujemy sam kod skryptu. W przykladzie z listingu 1.1 calq zawarto- Scig takiego pliku bylby tylko jeden wiersz 0 tresci alert("MOj pierwszy skrypt!") Nalezy rowniez pamigtac 0 wlasciwym kodowaniu znakéw w pliku ze skryptem. Powin- no ono byé zgodne z zadeklarowanym w znaczniku <script> lub zdefiniowanym w sekgji head dokumentu HTML. Jesli wige strong zapisujemy w kodowaniu ISO-8859-2, skrypt najlepie] rowniez zapisaé w tym kodowaniu. To samo dotyezy standardu UTF-8 czy Windows-1250, Gdzie umieszczaé skrypty? Skrypt mozna umiescié w sekeji head lub sckeji body. Jaka jest rézica? Jesli skrypt znajduje sig pomigdzy znacznikami <head> i </head>, zostanie wykonany jeszcze przed zaladowaniem wlasciwej tresci strony. Wlasnie z taka sytuagja mieligmy do czynienia w przykladach z listingdw 1.1 i 1.2. Najpierw pojawito sie wyswietlane przez skrypt okno dialogowe, a dopiero potem wlasciwa tresé witryny. Jeali jednak skrypt umiescimy w sekeji <body>, najpierw zostanie wyswietlona ozeéé strony znajdujgca sig przed skryptem, potem wykonany skrypt, a nastepnie wyswietlona czeé strony znajdujgca sig za skryptem. Rozwazmy skrypt widoczny na listingu 1.3. Listing 1.3. Skrypt w tresci strony w sekeji body CTYPE HINL PUBLIC "-//WW3C//OTD HTML 4.01//EN" p://waw.w3.org/TR/html4/strict .dtd"> <html> <head> <meta http-eal <titleMoja str </head> 1t="text/html: charset 14 Rozdziat 1. Pierwsze kroki <body> <peTo Jest czes¢ strony znajdujaca sie przed skryptem.</p> <script type="text /javascript"> alert("Noj pierwszy skrypt!") </script> <peTa czes¢ strony znajduje sie za skryptem.</p> </body> </html> Tym razem skrypt rozdziela dwa akapity tekstowe zdefiniowane za pomoca znaczni- kow <p>. Zgodnie z tym, co zostato napisane powyzej, na ekranie najpierw powinien pojawié sig tekst pierwszego akapitu, a nastgpnie okno dialogowe generowane przez skrypt. Ta faza jest widoczna na rysunku 1.2. Dopiero po zamknigciu okna dialogowego za pomoca przycisku OK na ekranie pojawi sig tresé drugiego akapitu. Ten etap jest widoczny na rysunku 1.3. Rysunek 1.2. Wyswietlanie strony zostalo zatrzymane | 8 _Eeve®_idok tstora _talad treetia Panos przez oko generowane | da ~ o> ~ @) GG (i tteteninestit za pomoca skrypiu oes "Moja strane WwW? a ‘To jest czedé strony majdujaca sie przed skryptem. risers cased ad (Dy Miser st Rysunek 1.3. Po zamknigciu = u lon dialogowego Bk Esc Whok Hsin Zalld Meis|Pooc pojawila sig €¢-5>-@ Q) [Ci erento dalsca czese witryny 5 Moja strona www a ‘To jest cxesé strony mnajdujaca sig przed skrypter ‘Ta cxgéé strony majduje sig za skryptem. Jakie to ma znaczenie praktyczne? Ot62, zaleca sig, aby — 0 ile to modliwe — umiesz- czaé skrypty w sekcji head. Dzigki temu sq one wezytywane i, ewentualnie, wykonywa- ne przed zaladowaniem strony. Zalézmy, Ze skrypt ma odpowiedzieé na jakies dzialanie uzytkownika, np. kliknigcie, jednak wezesniej potrzebuje przygotowaé pewne dane. Lekcja 4. Pierwszy skrypt 15 Jesli najpierw zostanie wezytana strona i uzytkownik zdazy wykonaé kliknigcie przed przygotowaniem danych przez skrypt, wystapi blad. Czesto tez korzystamy z bibliotek (zbiordw skryptow) dostarezanych przez innych programistow i one powinny byé wezytane przed przetworzeniem witryny. Odwolania do skryptow w sekeji body sq wig jak najbardziej na miejscu. Niejednokrotnie zdarza sig tez, 2e skrypt operuje na jakims elemencie witryny. Tu zkolei, jesli zostanie wykonany przed zaladowaniem i przetworzeniem przez prze- gladarke kodu HTML strony, tego elementu jeszcze nie bedzie i rowniez wystapi biad. W takiej sytuacji lepie| byloby umiescié kod skryptu za instrukejami HTML tworzacymi dany element. Obu opisanych probleméw mogna tez uniknaé, stosujac odpowiednie techniki pro- gramistyczne. Przyjmijmy jednak ogéIng zasade, ze — 0 ile to mozliwe — staramy sig umieszeza¢ odwolania do skryptéw w sekji head oraz korzystamy raczej ze skryptow zewnetrznych (chyba ze sa to tylko mate fragmenty kodu), Znacznik <noscript> Znacznik <noscript> pozwala zdefiniowaé tresé alternatywna dla przegladarek, ktore nie obstuguja skryptow. Powinien sig znalezé tuz za znacznikiem <script». Ogélnie taka konstrukeja ma postaé: </noscript> Jesli przegladarka rozpoznaje znacznik <script», ale nie wykonuje skryptow, pominie kod znajdujacy sie migdzy znacznikami <script> oraz </script> i wyswietli zawartosé umieszezona pomiedzy znacznikami <noscript> i </noscript>. W praktyce wygladatoby to tak, jak na listingu 1.4. Listing 1.4, Uzycie znacznika <noscript <IDOCTYPE HIML PUBLIC *-//W3C//DTD HTML 4.01//EN" "http: //waw.w3. org/TR/html4/strict.dtd"> <html> <head> meta http-equiv="Content-Type" content="text/html; charse stitleMoja strona Wwil To typowa strona, w ktérej w sekeji body za pomoca znacznika
    zostala zdefi- niowana warstwa o identyfikatorze dataDiv. Identyfikator pozwoli odwolywaé sie do warstwy w skryptach. Znacznik

    You might also like