Technologie internetowe client-side na przykªadzie j zyka JavaScript. Andrzej Skowron

Transkrypt

1 Technologie internetowe client-side na przykªadzie j zyka JavaScript Andrzej Skowron

2 Spis tre±ci 1 Wprowadzenie 2 2 Co to jest JavaScript? 2 3 Do czego sªu»y JavaScript? 3 4 Podstawowe informacje 4 5 Typy danych 6 6 Przydatne funkcje 8 7 Praca z danymi 10 8 Podstawy skªadni j zyka 13 9 Funkcje u»ytkownika Predeniowane funkcje globalne JavaScript jako j zyk obiektowy Obiekt window Manipulowanie oknami Obiekt location Obiekt history Obiekt navigator Obiekt screen Obiekt document Model W3C DOM Zdarzenia i ich obsªuga Formularze HTML i obiekt String Obiekt String Wyra»enia regularne i obiekt RegExp Zasoby sieciowe zwi zane z j zykiem JavaScript 53

3 1 Wprowadzenie W 1995r. Brendan Eich rozpocz ª prac nad pierwsz wersj j zyka JavaScript (wtedy projekt ten nazywaª si LiveScript). Zostaª on zaimplementowany w przegl darce Netscape. Niedªugo potem doszªo do porozumienia mi dzy rmami Netscape i Sun Microsystems, w wyniku którego na pocz tku roku 1996 w przegl darce Netscape 2 pojawiª si JavaScript w wersji 1.0. Wkrótce rma Microsoft wyposa»yªa przegl dark Internet Explorer 3 w swoj implementacj tego j zyka, któr okre±lono jako JScript. W krótkim czasie, po stronie klienta, pomi dzy j zykami JavaScript a JScript istniaªo tak du»o ró»nic,»e pisanie skryptów przeznaczonych do wykorzystywania na wielu platformach nie byªo ªatwe. Powstaª pomysª stworzenia wspólnego standardu, specykacj j zyka Javascript przekazano do Europejskiego Stowarzyszenia Producentów Komputerów, tak powstaª j zyk ECMAScript. ECMAScript to de facto mi dzynarodowy standard j zyka JavaScript, stanowi on istotny krok na drodze do wi kszej jednolito±ci j zyka JavaScript. Jednak w j zyku JavaScript ci gle znajduj si elementy, które nie s cz ±ci specykacji ECMAScript, cz ±ciowo po to, aby zachowa zgodno± ze starszymi przegl darkami. Najnowsza specykacja j zyka EC- MAScript to "3r'd Edition - December 1999". Mo»emy j ±ci gn ze strony: ecma-international.org/publications/standards/stnindex.htm. Dost pna jest tam równie» specykacja j zyka ECMAScript dla j zyka XML (ECMAScript for XML Specication - 2nd Edition December 2005). 2 Co to jest JavaScript? J zyk JavaScript mo»emy okre±li jako wieloplatformowy, obiektowy j zyk skryptowy. J zyk wieloplatformowy. Mówi c,»e j zyk JavaScript jest wieloplatformowy mamy na my±li fakt,»e kod w nim zapisany b dzie w wi kszo±ci przypadków dziaªaª na ró»nych systemach operacyjnych (MS Windows, Linux, Mac OS i in.), daj c ten sam wynik. J zyk obiektowy. J zyk Javascript traktuje dane zapisane na stronie jako obiekty o hierarchicznej strukturze. Wykorzystywany jest standard W3C DOM (World Wide Web Consortium Document Object Model - Obiektowy Model Dokumentu Konsorcjum WWW). Standard ten okre±la w jaki sposób mo»na uzyska dost p do elementów dokumentów HTML z poziomu j zyka JavaScript i jak wykonywa na nich operacje, co umo»liwia ªatwiejsz organizacj stron WWW. J zyk skryptowy. J zyki skryptowe s interpretowane, oznacza to,»e poddawane s analizie za pomoc interpretera. Jest to narz dzie wbudowane w przegl dark WWW. In- 2

4 terpreter analizuje kod za ka»dym razem, kiedy go uruchamiamy. Tego typu j zyki dziaªaj zazwyczaj wewn trz innego programu lub aplikacji, np. przegl darki WWW. Typowy skrypt JavaScript jest zawarty wewn trz strony WWW napisanej w j zyku HTML lub XHTML. Cech wyró»niaj c j zyki skryptowe jest to,»e wymagaj one zapisania znacznie mniejszej ilo±ci kodu ni» w przypadku pisania niezale»nego programu. W przypadku JavaScript-u dzieje si tak dlatego,»e przegl darka WWW zawiera wiele u»ytecznych funkcji obsªuguj cych ten j zyk. Skrypty s wi c ªatwiejsze do napisania, ale s wykonywane wolniej ni» skompilowany kod. Java i JavaScript: ró»nice i podobie«stwa: JavaScript Interpretowany przez klienta oparty na predeniowanych obiektach kod programu zagnie»d»ony w kodzie HTML zmienne nie musz by deklarowane przed u»yciem nie ma mo»liwo±ci zapisu na dysk twardy Java kompilowany do tzw. b-kodu wykonywanego potem za pomoc wirtualnej maszyny Javy na komputerze klienta zorientowany obiektowo z obsªug wszystkich mechanizmów obiektowo±ci kod programu jest niezale»ny od kodu HTML i znajduje si w oddzielnych plikach zmienne musz by deklarowane przed u»yciem aplety (w przeciwie«stwie do aplikacji) nie maj mo»liwo±ci zapisu na dysk twardy 3 Do czego sªu»y JavaScript? J zyk JavaScript na wiele zastosowa«. Podstawowym jest ulepszanie wygl du i dziaªania stron WWW. Umo»liwia on wprowadzenie do statycznych stron efekt ruchu oraz elementów interaktywnych. Mo»emy równie» w ten sposób zaimplementowa obsªug bª dów dla danych wprowadzanych do formularzy HTML. Wykonywanie zada«po stronie klienta. Kiedy u»ywamy tylko technologii po stronie serwera (CGI - Common Gateway Interface, ASP - Active Server Pages, JSP - Java Server Pages czy te» PHP - PHP: Hypertext Preprocessor ), komputer-klient cz sto bezczynnie oczekuje na zaªadowanie strony, podczas gdy serwer po drugiej stronie ledwo nad»a obsªugiwa wszystkie» dania. Oczywistym rozwi zaniem problemu jest wykonywanie przynajmniej cz - ±ci zada«na komputerze-kliencie. Pierwsz korzy±ci, jak uzyskamy po przesuni ciu pewnej cz ±ci obci»enia na stron klienta jest zmniejszenie konieczno±ci cz stego ªadowania strony. Na przykªad, je±li sprawdzenie poprawno±ci danych wprowadzanych w formularzu HTML nast pi po stronie klienta, z wykorzystaniem skryptów JavaScript, unikniemy caªkowicie 3

5 opó¹nie«sieciowych przynajmniej do czasu, kiedy dane b d sprawdzone i przygotowane do przesªania na serwer w celu dalszego przetwarzania. Wa»n zalet wykorzystywania skryptów po stronie klienta jest uzyskanie mo»liwo±ci programowania w obr bie samej strony WWW. W efekcie, zyskujemy mo»liwo± tworzenia dynamicznych stron WWW odpowiadaj cych na dziaªania u»ytkowników, którzy przegl daj stron i wykonuj na niej jakie± dziaªania. Oczywi±cie, w rzeczywisto±ci komputer-klient nie mo»e wykonywa caªego przetwarzania. We wszystkich usªugach wykorzystuj cych technologi WWW konieczne jest przesªanie danych na serwer w celu ich przechowywania lub dalszego przetwarzania. W praktyce wi c wykorzystuje si zarówno technologie po stronie serwera, jak i po stronie klienta. Najlepsze efekty uzyskuje si poprzez równomierne rozªo»enie obci»enia pomi dzy serwer a komputery klienckie. 4 Podstawowe informacje Rozró»nianie maªych i wielkich liter. W j zyku JavaScript wielko± liter ma znaczenie. Stosuj c zatem wielkie i maªe litery w nazwach zmiennych, funkcji i staªych musimy by konsekwentni. redniki. Dobr praktyk jest zwyczajowe ko«czenie ka»dej instrukcji JavaScript ±rednikiem. Nie stanowi to wymogu, w rzeczywisto±ci potrzebne jest tylko wtedy, gdy chcemy umie±ci co najmniej dwie instrukcje w jednym wierszu. Gdzie umieszczamy kod JavaScript? Istniej trzy miejsca, gdzie mo»emy umie±ci skrypty JavaScript na naszych stronach WWW: w bloku wpisywanym wewn trz kodu HTML, w oddzielnym pliku zawieraj cym kod JavaScript, w obr bie znacznika HTML. Blok skryptu. Jest to fragment kodu JavaScript otoczony par znaczników HTML <script> oraz </script>. <html> <head> <title>mój pierwszy skrypt w JavaScript!</title> </head> <body> To jest normalny dokument HTML. <br> 4

6 <script language="javascript"> document.write("to jest JavaScript!") </script> I znowu dokument HTML. </body> </html> Zewn trzne pliki skryptów JavaScript. W celu zaª czenia skryptu z zewn trznego pliku nale»y do znacznika <script> doda atrybut src. <html> <head> <title>mój pierwszy skrypt w JavaScript!</title> </head> <body> To jest normalny dokument HTML. <br> <script src="±cie»ka/do/pliku/nazwapliku.js"></script> I znowu dokument HTML. </body> </html> W j zyku XHTML istnieje opcja pozwalaj ca na u»ycie pustego znacznika <script>. Ma on posta <script />. Niestety, w niektórych przegl darkach u»ycie pustego znacznika powoduje bª d, wi c bezpieczniej jest u»ywa pary znaczników <script></script>. W obr bie otwieraj cego znacznika HTML. Umieszczenie kodu JavaScript w obr bie otwieraj cego znacznika HTML, to przypadek specjalny. Jedynymi konstrukcjami j zyka JavaScript, które wykorzystujemy w ten sposób, s procedury obsªugi zdarze«(np. zdarzenie onmouseover). Do tego aspektu powrócimy przy omawianiu tych procedur. Okre±lenie j zyka skryptowego. Do niedawna atrybut language byª zatwierdzonym sposobem informowania przegl darki,»e skrypt napisano w j zyku JavaScript. W tym przypadku przyjmowaª on warto± "javascript". Atrybut ten niestety nie znajduje si w specy- kacji najnowszych wersji j zyków HTML i XHTML. W specykacji j zyków HTML 4.01 oraz XHTML 1.0 wewn trz otwieraj cego znacznika <script> wyst puje atrybut type. Je±li korzystamy z j zyka JavaScript atrybut ten powinien przyj warto± "text/javascript". Aby uzyska maksymaln zgodno±, najlepiej wykorzystywa zarówno atrybut language jak i type. Dzi ki temu nasz skrypt b dzie mo»na wykorzysta w starych przegl darkach jak równie» w przyszªo±ci nie trzeba b dzie zmienia kodu i dodawa atrybutu type. <script language="javascript" type="text/javascript"> // Tu znajduje si 5

7 // kod skryptu </script> Stare przegl darki. Ci gle istniej przegl darki, które nie rozpoznaj znacznika <script>. Aby zapobiec wy±wietlaniu w takim przypadku kodu w oknie przegl darki powinni±my u»ywa nast puj cej skªadni: <html> <head> <title>ukrywanie skryptów za pomoc komentarzy.</title> <script language="javascript" > <!-- komentarz w j zyku HTML Tu b dzie kod JavaScript... //--> zamykamy komentarz w j zyku HTML </script> </head> <body> </body> </html> Komentowanie kodu. Aby utworzy komentarz obejmuj cy pojedynczy wiersz, wystarczy na jego pocz tku wprowadzi dwa kolejne uko±niki (//). Wtedy interpreter JavaScript zignoruje wszystkie znaki w tym wierszu. Aby rozpocz komentarz, który obejmuje kilka wierszy, wprowadzamy znaki uko±nik i gwiazdka (/*) na jego pocz tku i znaki gwiazdka i uko±nik (*/) na jego ko«cu. Tego rodzaju komentarzy nie powinni±my zagnie»d»a. //Ten caªy wiersz jest komentarzem var x=10 //ten komentarz wprowadzono po fragmencie kodu /* Caªy tekst znajduj cy si w takim bloku jest komentarzem */ 5 Typy danych J zyk JavaScript jest j zykiem o dynamicznej i sªabej kontroli typów. Sªaba kontrola typów oznacza,»e podczas wprowadzania elementu w skrypcie nie musimy deklarowa jego typu. Dynamiczna kontrola typów pozwala na zmian typu elementów podczas wykonywania skryptu. 6

8 Nie oznacza to jednak,»e w przypadku j zyka JavaScript mo»emy zignorowa typy danych. Jest on po prostu bardziej elastyczny pod tym wzgl dem od niektórych innych j zyków. Musimy zdawa sobie spraw, w jaki sposób interpretowane s dane w tym j zyku. Na przykªad zapis b dzie zinterpretowany przez JavaScript jako liczba 10, natomiast 10 + "0" interpreter j zyka JavaScript przeksztaªci w ci g "100". Liczby - Numbers. W j zyku JavaScript ró»ne rodzaje liczb nie s rozró»niane, mog by one interpretowane jako caªkowite (np. liczba 7) lub rzeczywiste (staªoprzecinkowe np lub zmiennoprzecinkowe np. 1.5e-10). J zyk JavaScript obsªuguje dodatnie i ujemne liczby w zakresie od do , co w przybli»eniu odpowiada zakresowi do Oprócz liczb dziesi tnych, w j zyku JavaScript obsªuguje te» liczby ósemkowe i szesnastkowe. Liczby te mog si np. przyda do obsªugi kolorów obiektów, które jak wiemy w HTML-u czy XHTML-u przedstawia si powszechnie w formie szesnastkowej. Je±li nie okre±limy jawnie,»e wprowadzona liczba jest liczb ósemkow lub szesnastkow, to j zyk JavaScript b dzie j interpretowaª jako liczb dziesi tn. Aby oznaczy liczb jako ósemkow, wystarczy rozpocz j od cyfry 0. Aby oznaczy liczb jako szesnastkow zaczynamy j od znaków "0x". Warto zwróci uwag na fakt,»e wynikiem przetwarzania liczb ósemkowych i szesnastkowych b d liczby dziesi tne. Na przykªad alert( ); wy±wietli 16. Istniej trzy specjalne warto±ci liczbowe. S to: innity, -innity i NaN. Wynik równy niesko«czono±ci innity lub minus niesko«czono±ci -innity otrzymamy, je±li liczba przekroczy maksymaln warto± obsªugiwan przez JavaScript lub je±li spróbujemy podzieli liczb przez zero. Przy czym dostaniemy innity, je±li dzielnik byª liczb dodatni, a -innity je±li byª on liczb ujemn. Warto± NaN jest skrótem Not a Number - to nie liczba. Warto± t uzyskamy je±li wykonamy nieprawidªowe dziaªanie z liczb. Na przykªad alert(10/"kot"); zwróci wynik NaN. Typ Boolean. Dane typu Boolean przyjmuj jedn z dwóch warto±ci: true lub false. 7

9 Ci gi znaków - String Type. W j zyku JavaScript do oznaczania ci gów znaków mo»emy u»y zarówno cudzysªowów, jak i apostrofów. Ci gi "Jestem ci giem znaków" oraz 'Jestem ci giem znaków', to równowa»ne sposoby oznaczania danych typu string. Musimy pami ta o tym, by pocz tek ci gu byª oznaczony tym samym znakiem, co koniec. Np. "Jestem ci giem znaków' spowoduje powstanie bª du. Je±li chcemy w ci gu umie±ci znak, którym go oznaczamy, musimy ten znak poprzedzi znakiem backslash (\) Np. 'it\'s five o\'clock!' Znaki poprzedzone znakiem backslash s tzw. znakami steruj cymi. Oto niektóre z nich: \b znak backspace \n nowy wiersz \r powrót karetki \t tabulacja \' apostrof \" cudzysªów \\ znak backslash \xnn znak wedªug kodowania Latin 1 (NN - szesnastkowy kod znaku) \unnnn znak wedªug kodowania Unicode (NNNN - szesnastkowy kod znaku) Typ Niezdeniowany - Undened Type. Ten typ ma tylko jedn warto±, a mianowicie undefined. Ka»da zmienna, która nie ma przypisanej warto±ci ma tak warto±. var zmienna; alert(zmienna); Typ Null - Null Type. Ten typ ma równie» jedn warto± null, która oznacza pust lub nieistniej c referencj. Typ Obiektowy - Object Type. Obiekt jest nieuporz dkowan kolekcj wªa±ciwo- ±ci. Ka»da wªa±ciwo± skªada si z nazwy, warto±ci i zbioru wªa±ciwo±ci. Typ ten zostanie omówiony dokªadniej w kolejnych cz ±ciach skryptu. 6 Przydatne funkcje Funkcja alert(). Wy±wietla okno ostrze»enia na naszej stronie WWW, jako argument podajemy tekst, który b dzie wy±wietlonym komunikatem. 8

10 alert("witam wszystkich!"); Pami tajmy,»e argument jest ªa«cuchem znaków, wi c powinien by otoczony apostrofami lub cudzysªowami. Jednak w przypadku, gdy argument to liczba, znaki te mo»emy opu±ci. Funkcja conrm(). Jest to funkcja nieco bardziej zaawansowana ni» alert(). Wy±wietla okno z komunikatem i przyciskami Ok i Cancel. Po wybraniu Ok zwraca warto± true, a po wybraniu Cancel warto± false. alert(confirm("czy aby na pewno?")); Powy»szy przykªad wy±wietli false je±li wybierzemy Cancel i true je±li wybierzemy Ok. Funkcja prompt(). Dziaªanie tej funkcji polega na wy±wietleniu pro±by o wprowadzenie tekstu, który mo»e by dalej wykorzystany przez skrypt. Przyjmuje ona dwa argumenty typu ªa«cuchowego, pierwszy jest komunikatem wy±wietlonym w oknie, a drugi to domy±lna warto± wstawiona w polu edycji. Je±li wci±niemy Ok, to zwrócony b dzie wpisany tekst, a je±li wci±niemy Cancel, to funkcja zwróci warto± false. alert("witam Ci "+prompt("jak si nazywasz?","tu wpisz swoje imi ")); Powy»szy fragment kodu poprosi nas o podanie imienia, a nast pnie wy±wietli ci g znaków "Witam Ci podane imi ". 9

11 7 Praca z danymi Zmienne. Nazwy zmiennych mog skªada si z liter i cyfr oraz znaku podkre±lenia i znaku dolara. Pierwszym znakiem nazwy zmiennej nie mo»e by cyfra. Aby utworzy zmienna mojazmienna bez deniowania jej warto±ci, zapiszemy nast puj c instrukcj var mojazmienna; Natomiast, aby utworzy zmienn i nada jej od razu warto± u»ywamy nast puj cego kodu: var mojazmienna="ci g znaków zapisany w zmiennej"; Uwaga, mo»emy pomin sªowo kluczowe var je±li w tym samym wierszu, w którym wpisujemy nazw zmiennej, przypisujemy do niej równie» warto±. Staªe. Staªe pojawiªy si w wersji 1.5 j zyka JavaScript. Staªe deniujemy za pomoc sªowa kluczowego const i ich warto± nie mo»e by zmieniona. const STALA=10; alert(stala); Nazwy staªych musz speªnia te same warunki, co nazwy zmiennych, zwyczajowo nazwy staªych pisze si z du»ej litery. Operatory. Operatory arytmetyczne: Symbol Skªadnia Opis - x-y Wykonuje operacj odejmowania - -x Wykonuje negacj zmiennej % x%y Zwraca reszt z dzielenia pierwszej zmiennej przez drug (dzielenie modulo) * x*y Wykonuje operacj mno»enia / x/y Wykonuje operacj dzielenia?: x?:y Sprawdza prawdziwo± warunku + x+y Wykonuje operacj dodawania Operatory inkrementacji i dekrementacji: Symbol Skªadnia Opis ++ x++ Zwraca warto± x i zwi ksza x o x Zwi ksza x o 1 i zwraca warto± x -- x-- Zwraca warto± x i zmniejsza x o x Zmniejsza x o 1 i zwraca warto± x 10

12 Operatory porównania: Symbol Skªadnia Opis!= x!=y Zwraca true, je±li zmienne nie s równe < x<y Zwraca true, je±li pierwsza zmienna jest mniejsza ni» druga <= x<=y Zwraca true, je±li pierwsza zmienna jest mniejsza ni» druga lub jej równa == x==y Zwraca true, je±li zmienne s równe > x>y Zwraca true, je±li pierwsza zmienna jest wi ksza ni» druga >= x>=y Zwraca true, je±li pierwsza zmienna jest wi ksza ni» druga lub jej równa === x===y Zwraca true, je±li zmienne s równe i tych samych typów!== x!==y Zwraca true, je±li zmienne s ró»ne lub ró»nych typów Operatory logiczne: Symbol Skªadnia Opis!!x Ten operator logiczny neguje wyra»enie && x&&y Operator logiczny AND zwraca true, je±li obie zmienne s prawdziwe (true) x y Operator logiczny OR zwraca true, je±li co najmniej jedna ze zmiennych jest prawdziwa (true) Operatory przypisania: Symbol Skªadnia Opis %= x%=y Wykonuje przypisanie x=x%y *= x*=y Wykonuje przypisanie x=x*y /= x/=y Wykonuje przypisanie x=x/y += x+=y Wykonuje przypisanie x=x+y -= x-=y Wykonuje przypisanie x=x-y = x=y Przypisuje warto± y do zmiennej x Operatory bitowe: Symbol Skªadnia Opis < x<y bitowa operacja AND, która wy±wietla 1, je±li obie zmienne wynosz 1 ^ x^y bitowa operacja XOR, która wy±wietla 1, je±li jedna ze zmiennych (ale nie obie jednocze±nie) wynosi 1 x y bitowa operacja OR, która wy±wietla 1, je±li jedna ze zmiennych wynosi 1 << x<<y przesuni cie bitów w lewo o podan liczb miejsc >> x>>y przesuni cie bitów w prawo o podan liczb miejsc 11

13 Przypisania bitowe: Symbol Skªadnia Opis <= x<=y Wykonuje przypisanie x=x<y ^= x^=y Wykonuje przypisanie x=x^y = x =y Wykonuje przypisanie x=x y <<= x<<=y Wykonuje przypisanie x=x< >>= x>>=y Wykonuje przypisanie x=x>>y >>>= x>>>=y Wykonuje przypisanie x=x>>>y Operator ªa«cuchowy (konkatenacji): Symbol Skªadnia Opis + "text1"+"text2" Š czy dwa ci gi znaków w jeden Zakres zmiennych. W j zyku JavaScript mamy dwa rodzaje zasi gu: zasi g globalny i lokalny. Zmienna globalna jest dost pna w dowolnym miejscu skryptu w obr bie tego samego dokumentu HTML. Ponadto, zmiennych globalnych mo»na u»y w skryptach dziaªaj cych w innej ramce lub w innym oknie przegl darki. Wszystkie zmienne zadeklarowane w bloku skryptów, ale na zewn trz funkcji, maj zakres globalny. Je±li zmienna jest deklarowana w funkcji, to jej zakres zale»y od tego czy do jej zadeklarowania u»yli±my sªowa kluczowego var i tak, je±li wewn trz funkcji zadeklarujemy zmienn bez sªowa kluczowego var, jej zakres b dzie globalny, je±li za± deklarujemy zmienn ze sªowem kluczowym var, to jej zakres b dzie lokalny. Przeanalizuj nast puj cy kod: var zmiennatestowa="to jest zmienna Globalna!<br>"; function testowaniezakresu() { document.write(zmiennatestowa); var zmiennatestowa1="to jest zmienna Lokalna!<br>"; document.write(zmiennatestowa1); } function testowaniezakresu1() { document.write(zmiennatestowa); zmiennatestowa="to jest inna zmienna Globalna!<br>"; document.write(zmiennatestowa); } testowaniezakresu(); testowaniezakresu1(); 12

14 8 Podstawy skªadni j zyka Struktury warunkowe. Instrukcja if (je»eli) jest jednym z najwa»niejszych mechanizmów dost pnych w wielu j zykach z JavaScript wª cznie. Pozwala na wyodr bnienie fragmentu kodu, który zostanie wykonany pod okre±lonym warunkiem. Instrukcja if w JavaScript jest bardzo podobna do swojego odpowiednika z j zyka C: if (warunek) wyra»enie Je±li warunek jest równy true wyra»enie zostanie wykonane; w przeciwnym razie zostanie pomini te. Cz sto potrzeba, aby wi cej ni» jedna instrukcja byªa wykonana pod przyj tym warunkiem. Nie ma oczywi±cie potrzeby umieszcza ka»dej z tych instrukcji w osobnej strukturze if. Zamiast tego nale»y zgrupowa te instrukcje za pomoc instrukcji grupuj cej. Na przykªad poni»szy kod wy±wietli a jest wi ksze ni» b, je»eli a jest wi ksze ni» b, i przypisze warto± a do b: if (a > b) { alert("a jest wi ksze ni» b"); b = a;} Cz sto potrzeba wykona jedn instrukcj programu, gdy pewien warunek jest speªniony, lub inn, gdy ten sam warunek nie jest speªniony. Sªu»y do tego instrukcja else. else rozszerza mo»liwo±ci instrukcji if do sytuacji kiedy warunek opisany przy instrukcji if ma warto± false. Na przykªad poni»szy kod wy±wietli a jest wi ksze ni» b je»eli a jest wi ksze ni» b, lub a NIE jest wi ksze ni» b w przeciwnym przypadku: if (a > b) { alert("a jest wi ksze ni» b"); } else { alert("a NIE jest wi ksze ni» b"); } Kod zawarty w instrukcji else wykonywany jest tylko wówczas, kiedy wyra»enie logiczne przy instrukcji if ma warto± false. Instrukcja switch jest podobna do serii instrukcji if z warunkiem na to samo wyra»enie. W wielu przypadkach istnieje potrzeba porównania jednej zmiennej (lub wyra»enia) z wieloma ró»nymi warto±ciami i wykonania ró»nych fragmentów kodu, w zale»no±ci od wyniku porównania tej zmiennej z ró»nymi warto±ciami. Do tego wªa±nie sªu»y instrukcja switch. switch (i) { case 0: alert("i jest równe 0"); break; 13

15 } case 1: alert("i jest równe 1"); break; case 2: alert("i jest równe 2"); break; default: alert("nie wiem ile jest równe i"); Instrukcja switch jest wykonywana linia po linii (dokªadnie wyra»enie po wyra»eniu). Na pocz tku»aden fragment kodu nie jest wykonywany. Dopiero kiedy zostaje odnalezione wyra»enie case, którego warto± odpowiada wyra»eniu przy instrukcji switch, JavaScript rozpoczyna wykonywanie kodu od miejsca, gdzie znajduje si ta instrukcja case. JavaScript wykonuje instrukcje a» do momentu kiedy blok switch si sko«czy, lub do momentu znalezienia instrukcji break. Je±li nie napiszemy instrukcji break na ko«cu instrukcji w danym wyra»eniu case to JavaScript b dzie wykonywa dalej instrukcje z nast pnego wyra»enia case. W instrukcji switch warto± wyra»enia jest obliczana tylko raz, a nast pnie jest porównywana z ka»dym z wyra»e«przy etykiecie case. Dlatego, je±li wyra»enie jest bardziej skomplikowane od zwykªego porównania, switch mo»e by szybszy. Specjaln etykiet jest etykieta warunku domy±lnego - default. Etykieta ta dotyczy sytuacji, w której wyra»enie nie pasowaªo do warto±ci przy innych etykietach typu case. W instrukcji switch ta etykieta powinna by ostatnia z listy. Instrukcje iteracyjne. P tla while jest najprostszym typem p tli w JavaScript. Zachowuje si ona identycznie jak jej odpowiednik z j zyka C. Jej podstawowa forma wygl da nast puj co: while (wyra»enie) instrukcja Znaczenie instrukcji while jest bardzo proste. Wykonuje okre±lone instrukcje tak dªugo, jak dªugo wyra»enie przy sªowie while ma warto± true. Warto± tego wyra»enia jest sprawdzana za ka»dym razem na pocz tku wykonywania nowej iteracji p tli, wi c je±li jego warto± zmieni si w trakcie wykonywania instrukcji, wykonanie caªej p tli nie sko«czy si do momentu zako«czenia caªej iteracji. Jedna iteracja jest to jednokrotne wykonanie wszystkich instrukcji w p tli. Je±li wyra»enie logiczne ma warto± false ju» na samym pocz tku, instrukcje wewn trz p tli nie b d w ogóle wykonane. Podobnie jak w instrukcji if, w p tli while mo»na grupowa instrukcje za pomoc nawiasów klamrowych. Poni»sze przykªady s identyczne i obydwa wy±wietlaj liczby od 1 do 10: var i = 1; while (i <= 10){ alert(i++)} 14

16 P tla do...while zachowuje si bardzo podobnie do p tli while, z wyj tkiem tego,»e warto± wyra»enia logicznego sprawdzana jest na ko«cu iteracji, a nie na pocz tku. Wynikaj c z tego gªówn ró»nic jest to,»e pierwsza iteracja w p tli do...while na pewno zostanie wykonana (gdy» wyra»enie logiczne b dzie sprawdzone dopiero na koniec iteracji). Natomiast w p tli while, gdzie wyra»enie logiczne jest sprawdzane na pocz tku iteracji, mo»e doj± do sytuacji,»e p tla w ogóle nie zostanie wykonana, je±li to wyra»enie b dzie miaªo warto± false od pocz tku. var i = 0; do { alert(i)} while ($i>0); Powy»sza p tla zostanie wykonana tylko raz, gdy» po pierwszej iteracji, warto± wyra»enia logicznego wynosi b dzie false i p tla zostanie zako«czona. P tla for jest najbardziej skomplikowanym rodzajem p tli w JavaScript. Zachowuje si identycznie jak jej odpowiedniki z C. Jej skªadnia wygl da nast puj co: for (wyra»enie1; wyra»enie2; wyra»enie3) instrukcje wyra»enie1 jest wykonywane tylko raz, na pocz tku p tli. Na pocz tku ka»dej nowej iteracji, obliczana jest warto± logiczna wyra»enia wyra»enie2. Je±li wynikiem obliczenia jest true, to p tla kontynuuje i nast puje wykonanie instrukcji umieszczonych w p tli. Je±li jednak wyra»enie ma warto± false, to wykonanie p tli zostaje przerwane. Na ko«cu ka»dej iteracji zostaje wykonane wyra»enie3. Poni»szy przykªad wy±wietla liczby od 1 do 10: for (var i = 1; i <= 10; i++) { alert(i);} break ko«czy wykonywanie aktualnej instrukcji for, while, do...while lub switch. continue u»ywane jest wewn trz instrukcji p tli do przerwania wykonywania danej iteracji p tli i rozpocz cia nowej iteracji. 9 Funkcje u»ytkownika Funkcje w j zyka JavaScript tworzymy podobnie jak w innych j zykach programowania. U»ywamy sªowa kluczowego function, po którym wyst puje identykator funkcji. Identykator ten podlega tym samym reguªom, co identykator zmiennych. 15

17 function nazwafunkcji(lista_argumentow) { } kod Zwracanie warto±ci przez funkcje. Aby uzyska wyniki przetwarzania danych przez funkcje, u»ywamy instrukcji return. function obliczmodul(liczba) { } return (liczba>=0)?liczba:-liczba; var naszaliczba=prompt("podaj liczb ",""); alert("warto± bezwzgl dna z liczby "+naszaliczba+ " to:"+obliczmodul(naszaliczba)); 10 Predeniowane funkcje globalne Funkcje te mo»na wywoªywa w dowolnej cz ±ci skryptu, dokªadnie w ten sam sposób, w jaki wywoªuje si funkcje u»ytkownika. Do tej pory mieli±my ju» do czynienia z niektórymi predeniowanymi funkcjami, takimi jak alert(), confirm() oraz prompt(). Funkcje te s wykorzystywane od tak dawna,»e obsªuguje je wi kszo± przegl darek, cho w zasadzie nie nale» one do rdzenia j zyka JavaScript. Oznacza to,»e w innych ±rodowiskach ni» przegl darki WWW mog, lecz nie musz by dost pne. Oto lista predeniowanych funkcji JavaScript nale» cych do rdzenia j zyka: decodeuri() decodeuricomponent() encodeuri() encodeuricomponent() escape() unescape() eval() isfinite() isnan() 16

18 Number() parsefloat() tostring() watch() unwatch() Funkcje watch() oraz unwatch() wspomagaj uruchamianie diagnostyczne dla wªa±ciwo±ci obiektów. Funkcje te omówimy w dalszej cz ±ci wykªadu. Kodowanie i dekodowanie adresów URI. Jednolite identykatory zasobów (Uniform Resource Identier) - to najbardziej ogólna nazwa dla adresów wykorzystywanych w celu uzyskania dost pu do plików w sieci. "Zasób" okre±la jednostk informacji, mo»e to by np. strona WWW. Adresów URI u»ywamy równie» do przesyªania informacji, które maj by wykorzystane na tej stronie. Kiedy do przesyªania ci gu zapytania wykorzystujemy formularz, w którym stosujemy metod HTTP GET, przegl darka automatycznie przeksztaªci znaki niedozwolone w adresie URI na zakodowane warto±ci szesnastkowe. Aby tego dokona za pomoc j zyka JavaScript, nale»y wykorzysta funkcje wbudowane. Pocz tkowo do kodowania i dekodowania adresów URI w j zyku JavaScript stosowano funkcje escape() i unescape(). var ciagznakow="to kosztuje 5$"; var zakodowanyciag=escape(ciagznakow); var zdekodownayciag=unescape(zakodowanyciag); alert(zakodowanyciag); alert(zdekodownayciag); Funkcje escape() i unescape() koduj równie» znaki, które nie musz by kodowane i dla ró»nych przegl darek kodowane s ró»ne znaki. W zwi zku z tym w wydaniu 3 ECMAScript zdeniowano cztery nowe funkcje: decodeuri(), decodeuricomponent(), encodeuri(), encodeuricomponent(), które miaªy zast pi escape() i unescape(). Funkcja encodeuri() powoduje zakodowanie wszystkich znaków, za wyj tkiem znaków alfanumerycznych oraz nast puj cych:! # $ & ' ( ) * +, -. / : ; _ ~ Funkcja encodeuricomponent() dziaªa podobnie. Koduje wszystkie znaki kodowane przez encodeuri(), a oprócz nich: # $ & +, / : ; 17

19 Funkcja ta nie koduje znaków alfanumerycznych oraz znaków:! ' ( ) * -. _ ~ Powodem istnienia dwóch ró»nych funkcji sªu» cych do kodowania jest fakt,»e czasem trzeba zakodowa caªy adres URI, ª cznie z takimi elementami jak " ", natomiast innym razem wystarczy, je±li zakodujemy tylko ci g zapytania. Odpowiednikami tych funkcji, sªu» cymi do dekodowania, s funkcje decodeuri() oraz decodeuricomponent(). Dziaªanie funkcji decodeuricomponent() jest podobne do unescape(). Powoduje ona dekodowanie wszystkich wcze±niej zakodowanych znaków. Natomiast funkcja decodeuri() pozostawia bez zmian nast puj ce znaki: # $ & +, / : ; Zamiana ci gu znaków na kod. Do tego celu sªu»y funkcja eval(), wymusza ona zmian ci gu znaków na kod JavaScript i wykonanie go. var mojkod="alert(\"to byª ci g znaków\")"; //uwaga, mo»emy równie» zapisa // var mojkod="alert('to byª ci g znaków')"; eval(mojkod); Funkcje arytmetyczne. Funkcja isfinite() sprawdza, czy argument nie ma jednej ze specjalnych warto±ci Infinity lub -Infinity. Je»eli liczba jest sko«czona (i mo»na przeprowadzi obliczenia), funkcja zwraca warto± true, w przeciwnym razie zwraca warto± false. Funkcja isnan() pozwala na okre±lenie, czy wykorzystywana przez nas dana to liczba. Zwraca warto± false, je»eli podana warto± jest liczb oraz true w przeciwnym przypadku. Zaskakuj cym jest fakt,»e warto± NaN nie jest równowa»na sama sobie. Mamy wi c: NaN == NaN //przyjmuje warto± false NaN === NaN //przyjmuje warto± false Ale: isnan(nan) //przyjmuje warto± true Funkcja isnan() przydaje si wówczas, gdy pobieramy dane liczbowe od u»ytkownika korzystaj cego z naszej strony WWW. function obliczmodul() { do var liczba=prompt("prosz poda liczb ",""); while (isnan(liczba)); 18

20 } alert((liczba>=0)?liczba:-liczba); obliczmodul() Konwersja pomi dzy ci gami znaków a liczbami. Funkcje Number() i parsefloat() przyjmuj jeden argument i przetwarzaj go w podobny sposób. Je±li argument jest liczb zwracaj go w niezmienionej postaci, natomiast gdy jest to ci g znaków, wykonaj prób przeksztaªcenia go na liczbowy typ danych. Funkcja parsefloat() u»yta do warto±ci innych ni» liczba lub ci g znaków, w którym znajduj si znaki i cyfry, zawsze przyjmie warto± NaN. Z kolei funkcja Number() zamienia warto±ci false i null na warto± 0, warto± true na 1, jedynie warto± undefined b dzie przeksztaªcona na warto± NaN. Je»eli ci g znaków rozpoczyna si od cyfr, a po nich wyst puj inne znaki, to funkcja Number() zwróci warto± NaN. W takim przypadku funkcja parsefloat() usunie nienumeryczne znaki z ko«ca ci gu i zwraca znaki numeryczne jako liczb. alert(number(" tu nie jest liczb ")); alert(parsefloat(" tu jest liczb ")); Je±li chcemy pozby si cz ±ci uªamkowej, mo»emy u»y funkcji parseint(). Funkcja ta przeksztaªca argumenty na typ liczbowy, a ponadto zaokr gla je w dóª, do najbli»szej liczby caªkowitej. alert(parseint(" tu jest liczb ")); alert(parseint(" te» b dzie 3")); Funkcja parseint() ma jeszcze inn, przydatn czasem wªa±ciwo±. Za jej pomoc mo-»emy przeksztaªca liczby w systemach o podstawie pomi dzy 2 a 36 na liczby dziesi tne. W tym przypadku funkcja przyjmuje dwa argumenty, pierwszy to ªa«cuch znaków do przetworzenia, a drugi to podstawa. alert(parseint(" tu jest liczb ",4)); alert(parseint("1111","2 podstawa")); alert(parseint("ff.ff",16)); alert(parseint("0xf",16)); alert(parseint("010",8)); alert(parseint(100,3)); alert(parseint("100",3)); 19

21 Je»eli podstawa jest wi ksza ni» 10, to pierwszy argument powinien by ci giem znaków, wynika to z faktu,»e w systemach o podstawie wi kszej ni» 10 liczby mog zawiera znaki alfabetu. Ostatni funkcj do konwersji jest tostring(). Dziaªa ona dokªadnie odwrotnie do wy»ej opisanych. Przeksztaªca liczby na ci gi znaków. Skªadnia tej funkcji jest nieco inna od funkcji poznanych do tej pory. Funkcja ta na ogóª nie przyjmuje argumentów, aby j wywoªa musimy u»y notacji z kropk (poniewa» jest to wªa±ciwie metoda obiektu Number). var jakaszmienna= ; alert(52+jakaszmienna.tostring());//wy±wietli a nie Funkcja tostring() ma jeszcze jedno zastosowanie, mo»e ona przeksztaªca liczby w systemie dziesi tnym na liczb w systemie o podanej podstawie od 2 do 36 (a wi c dziaªa odwrotnie do funkcji parseint()). var x=10,y=0.5; alert(x.tostring(8));//wy±wietli 12 alert(y.tostring(16));//wy±wietli 0.8 Dzi ki funkcjom parseint() oraz tostring() mo»emy przeksztaªca liczby z jednego systemu (o podstawie od 2 do 36) na drugi (te» o podstawie od 2 do 36). Przy czym powinni±my pami ta,»e parseint() usuwa kropk dziesi tn, dlatego dla liczb, które nie s caªkowite dostaniemy wynik przybli»ony. function zamianapodstawy(liczba,podstawa1,podstawa2) { } var liczba10=parseint(liczba,podstawa1); alert(liczba10.tostring(podstawa2)); zamianapodstawy("0xff",16,2); 11 JavaScript jako j zyk obiektowy W j zyku JavaScript wszystkie elementy dokumentu HTML oraz niektóre elementy przegl - darki s udost pniane w postaci obiektów. W praktyce umo»liwia to ªatwy dost p i zmian wªa±ciwo±ci dokumentu. Na przykªad mo»emy w ten sposób pobiera informacje na temat rysunków na stronie WWW, na przykªad odczytywa ich szeroko±ci. W ten sam sposób mo»emy zmienia zawarto± paska statusu. Wszystkie obiekty JavaScript nale» do obiektu Global. Kiedy dokument zawieraj cy kod JavaScript jest ªadowany lub pobierany do ±rodowiska obsªuguj cego ten j zyk, wszystkie 20

22 obiekty, wªa±ciwo±ci i metody budowane s na podstawie obiektu Global. W ±rodowisku przegl darki, po stronie klienta, obiektem Global jest obiekt window. Tym samym, kiedy korzystamy z dowolnego innego obiektu JavaScript, robimy to za po±rednictwem obiektu window. window.status=prompt("wprowad¹ nowy tekst na pasek stanu",""); Obiekt window posiada kilka obiektów potomnych (czyli jest dla nich obiektem macierzystym). Mo»na je podzieli na trzy grupy: obiekt document, obiekty ±rodowiskowe, obiekty rdzenia j zyka JavaScript. Dzi ki obiektowi document mo»liwe jest uzyskanie dost pu do dokumentów zaªadowanych w przegl darce WWW. Obiekt ten zawiera wªa±ciwie wszystko to, co znajduje si pomi dzy znacznikami <html> i </html>. Standard ustanowiony przez model obiektowy dokumentu (Document Object Model) organizacji W3C (WWW Consortium) - w skrócie DOM - opisuje logiczne przypisanie wªa±ciwo±ci i metod do obiektów. Standard ten zostanie omówiony w dalszym ci gu. Obiekty ±rodowiskowe dostarczaj nam informacji o przegl darce oraz ±rodowisku w jakim ona pracuje. Mamy tu cztery obiekty potomne obiektu window, które umo»liwiaj uzyskanie tych wiadomo±ci. Oto ich lista: obiekt location, obiekt history, obiekt navigator, obiekt screen. Obiekty location i history umo»liwiaj uzyskanie dost pu odpowiednio do bie» cego adresu URI oraz historii przegl darki. Obiekty navigator i screen dostarczaj informacji o przegl darce oraz o pozycji okna przegl darki na ekranie u»ytkownika. Rdze«JavaScript, to cz ± j zyka, która jest dost pna w ka»dym ±rodowisku, w którym j zyk jest wykorzystywany. Istnieje 11 obiektów rdzenia j zyka JavaScript. Oto one: obiekt Array, 21

23 obiekt Boolean, obiekt Date, obiekt Error, obiekt Function, obiekt Global, obiekt Math, obiekt Number, obiekt Object, obiekt RegExp, obiekt String. W ±rodowisku przegl darki obiektem Global jest oczywi±cie obiekt window. Eksploracja obiektu. Do tego celu przydatne s operatory in i typeof. Pierwszy pozwala stwierdzi, czy okre±lona wªa±ciwo± lub obiekt potomny istniej, natomiast drugi pozwala okre±li typ danych lub obiektu, z którym mamy do czynienia. alert("document" in window); //zwróci warto± true Operator in mo»e wyst powa w poª czeniu z operatorem p tli for for (var property in object){ kod } W ka»dej iteracji p tli do zmiennej property przypisane b d kolejne nazwy wªa±ciwo±ci obiektu object pocz wszy od pierwszej, a sko«czywszy na ostatniej. Operator typeof, w odniesieniu do fragmentu danych, przyjmuje nast puj ce warto±ci: boolean, function, number, object, string, undefined. alert(typeof window.document); //zwróci warto± object alert(typeof 5); //zwróci warto± number alert(typeof document.write); //zwróci warto± function Nast puj cy przykªad wy±wietla wszystkie wªa±ciwo±ci i ich typy obiektu window.navigator. 22

24 var objekt=window.navigator; document.write("<table border=1> \ for(var wlasc in objekt){ <tr><th>nazwa wªa±ciwo±ci</th> \ <th>typ wªa±ciwo±ci</th> \ <th>warto± </th></tr>"); document.write("<tr><td>"+wlasc+"</td>"); document.write("<td>"+(typeof objekt[wlasc])+"</td>"); document.write("<td>"+objekt[wlasc]+"</td>"); document.write("</tr>"); } document.write("</table>"); Tworzenie wªasnych obiektów. Nowy obiekt tworzymy w j zyku JavaScript przy pomocy funkcji, która nazywa si konstruktorem. Funkcja ta wygl da wªa±ciwie tak samo jak ka»da inna funkcja. Nazw tej funkcji jest nazwa obiektu, który mamy zamiar utworzy. function obiektkilent(parametry){ kod konstruktora } Aby utworzy wªa±ciwo±ci obiektu, stosujemy sªowo kluczowe this. Oznacza ono,»e tworzone wªa±ciwo±ci odnosz si do obiektu, który jest tworzony w momencie wywoªania konstruktora. function obiektkilent(nazwisko, adres, nr_telefonu, ){ this.nazwisko=nazwisko; this.adres=adres; this.telefon=nr_telefonu; this.adres_ = ; } Do tworzenia nowego egzemplarza naszego obiektu u»ywamy sªowa kluczowego new. var nowyklient=new obiektklient("jan Kowalski", "Zakopane,Polska", alert("witaj "+nowyklient.nazwisko+"!"); " ","kowal@kowalski.com"); Mo»emy równie» najpierw utworzy egzemplarz obiektu, a nast pnie przypisa warto±ci poszczególnym wªa±ciwo±ciom. 23

25 var innyklient=new obiektklient(); innyklient.nazwisko="ada± Nowak"; innyklient.adres="rawa Maz., Polska"; innyklient.telefon=" "; alert("witaj "+innyklient.nazwisko+"!"); Tworzenie metod obiektu. Metody obiektów tworzymy jak zwyczajne funkcje. Jedyna ró»nica polega na tym,»e mo»emy korzysta z wªa±ciwo±ci obiektu za pomoc operatora this. function wyswietlklienta(){ document.write("<b>imi i nazwisko klienta: </b>"+this.nazwisko+"<br>"); document.write("<b>adres:</b>"+this.adres+"<br>"); document.write("<b>numer telefonu:</b>"+this.telefon+"<br>"); document.write("<b>adres </b>"+this.adres_ +"<br>"); } Funkcja ta nie musi by zdeniowana przed konstruktorem. Nast pnie musimy wstawi t funkcj jako metod do denicji obiektu, robimy to podobnie, jak w przypadku deniowania wªa±ciwo±ci: function obiektkilent(nazwisko, adres, nr_telefonu, ){ this.nazwisko=nazwisko; this.adres=adres; this.telefon=nr_telefonu; this.adres_ = ; this.wyswietlklienta=wyswietlklienta; } Metoda nie musi mie tej samej nazwy, co nazwa funkcji. Metody mog przyjmowa argumenty. function nowenazwisko(nazwisko){ } this.nazwisko=nazwisko; Š czenie obiektów. Wªa±ciwo±ci obiektów mog by innymi obiektami. Zaªó»my,»e mamy dwa obiekty, ten który utworzyli±my poprzednio obiektklient oraz obiektfirma, zdeniowany nast puj co: 24

26 function obiektfirma(nazwa,adres,nr_telefonu){ this.nazwa=nazwa; this.adres=adres; this.telefon=nr_telefonu; this.wyswietlfirma=wyswietlfirma; } function wyswietlfirma(){ document.write("<b>nazwa firmy: </b>"+this.nazwa+"<br>"); document.write("<b>adres: </b>"+this.adres+"<br>"); document.write("<b>numer telefonu: </b>"+this.telefon+"<br>"); } Teraz tworzymy egzemplarz obiektu objektfirma i mo»emy doda ten egzemplarz do wªa±ciwo±ci obiektu obiektklient: var jakasfirma=new obiektfirma("artkomp","piotrków Tryb."," "); function obiektkilent(nazwisko, adres,nr_telefonu, ){ this.nazwisko=nazwisko; this.adres=adres; this.telefon=nr_telefonu; this.adres_ = ; this.wyswietlklienta=wyswietlklienta; this.obiektfirma=jakasfirma; } Mo»emy wówczas w egzemplarzach obiektu obiektklient u»ywa metod i wªa±ciwo±ci obiektu objektfirma: var nowyklient=new obiektklient("jan Kowalski", "Zakopane,Polska", nowyklient.obiektfirma.wyswietlfirma(); " ","kowal@kowalski.com", jakasfirma); 12 Obiekt window Obiekt window znajduje si najwy»ej w hierarchii obiektów i reprezentuje on okno przegl - darki. Aby otworzy nowe okno, u»ywamy metody open(), trzeba przy tym okre±li adres URL i nazw okna: 25

27 window.open(" Jako nazwy mo»na u»y jednej ze specjalnych warto±ci: Atrybut _blank _parent _self _top Opis Otwarcie strony w nowym dokumencie Otwarcie strony w ramce macierzystej Otwarcie strony w bie» cym oknie lub ramce Otwarcie strony w bie» cym oknie i nadpisanie istniej cych ramek Wygodniej jest warto± zwracan przez metod open() przypisa do zmiennej, wtedy b dziemy mogli odwoªywa si do tego okna za pomoc tej zmiennej: var okno=window.open(" Podczas otwierania nowego okna mo»emy okre±li dokªadniej jego wygl d. To tego celu sªu» atrybuty zebrane w trzecim argumencie metody. Oto lista atrybutów: Atrybut height width left top directories location menubar resizable scrollbars status toolbar Opis Okre±la w pikselach wysoko± nowego okna Okre±la w pikselach szeroko± nowego okna Liczba pikseli od lewej kraw dzi ekranu do lewej kraw dzi okna Liczba pikseli od górnej kraw dzi ekranu do górnej kraw dzi okna Wy±wietla pasek Š cza w IE i pasek Personal w Netscape Wy±wietla pole adresu Wy±wietla pasek menu Wskazuje, czy u»ytkownik mo»e zmieni rozmiar okna Wy±wietla paski przewijania Wy±wietla pasek statusu Wy±wietla pasek narz dzi var okno=window.open(" "height=300,width=200,directories=0,location=0,status=1,toolbar=0,menubar=0"); Aby zamkn okno u»ywamy metody window.close(): okno.close(); Aby zmieni tekst w pasku statusu okna, ustawiamy wªa±ciwo± status: okno.status="to jest nowy tekst w pasku stanu"; 26

28 12.1 Manipulowanie oknami Obiekt window przydaje si do manipulowania oknami przegl darki. Za jego pomoc mo»na zmienia rozmiary okien i przemieszcza je. moveby(dx, dy) - przemieszcza okno przegl darki w poziomie o dx pikseli i o dy w pionie. Mo»na stosowa warto±ci ujemne. moveto(dx, dy) - ustawia okno przegl darki tak,»e jego lewy górny róg jest w punkcie (x,y) ekranu u»ytkownika. resizeby(dw, dh) - zmienia rozmiar okna przegl darki o dw pikseli w poziomie i dh pikseli w pionie. Mo»na podawa warto±ci ujemne. resizety(w, h) - ustawia rozmiar okna przegl darki na dw pikseli w poziomie i dh pikseli w pionie. Nie mo»na podawa warto±ci ujemnych Obiekt location Obiekt location zawiera informacje dotycz ce adresu URL, z którego zaªadowano stron. Je±li chcemy zmieni ten adres dla danego dokumentu mo»emy wywoªa kod: window.location.href= " Poni»ej zostaªy zestawione wªa±ciwo±ci obiektu location z przykªadowymi warto±ciami dla wy»ej zdeniowanego adresu: Wªa±ciwo± Warto± protocol http: hostname port 80 host pathname hash href search /sciezka/docs.html #kotwica Oto lista metod obiektu location: assign("url") - metoda ta przypisuje do wªa±ciwo±ci href podany adres URL. Jest to sposób przestarzaªy i nie zaleca si u»ywania tej metody. 27

29 reload() - powoduje od±wie»enie strony, je±li strona ma zosta bezwarunkowo jeszcze raz pobrana ze zdalnego w zªa (a nie wczytana z pami ci cache) to jako argument podajemy warto± true. replace("url") - powoduje zamian adresu na podany URL, dzi ki temu strona nie jest przechowywana w historii przegl darki. Oznacza to,»e je±li klikniemy przycisk Wstecz, strona, na której znajdowaªo si wywoªanie metody replace() w rzeczywisto±ci nie jest zapisana w historii i ªadowana jest strona poprzednia Obiekt history Obiekt ten daje nam dost p do stron, które w danym oknie odwiedzili±my. Obiekt ten ma jedn wªa±ciwo± length, która przechowuje ilo± elementów w historii. Obiekt history ma nast puj ce metody: back() - powoduje zaªadowanie w oknie poprzednio odwiedzonej strony. forward() - powoduje zaªadowanie w oknie nast pnej strony w historii. go() - umo»liwia przej±cie do strony zapisanej w historii, za pomoc liczbowego argumentu specykujemy pozycj w historii wzgl dem bie» cego adresu, np. window.history.go(-2) oznacza przej±cie o dwie pozycje wstecz, window.history.go(1) oznacza przej±cie o jedn pozycj do przodu, a window.history.go(0) oznacza "mi kkie" od±wie»enie strony Obiekt navigator Obiekt navigator jest mechanizmem pozwalaj cym uzyska informacje na temat przegl - darki. Obiekt ten ma wiele wªa±ciwo±ci, wi kszo± z nich jest specyczna dla konkretnej przegl darki. Oto ich peªna lista: appcodename appminorversion appname appversion browserlanguage cookieenabled 28

30 cpuclass language mimetypes online oscpu platform plugins product productsub securitypolicy systemlanguage useragent userlanguage userprofile vendor vendorsub Peªna lista wªa±ciwo±ci obiektu navigator dla przegl darki Mozilla: 29

31 Peªna lista wªa±ciwo±ci obiektu navigator dla przegl darki Internet Explorer: 30

32 12.5 Obiekt screen Obiekt screen umo»liwia dost p do informacji na temat rozdzielczo±ci i innych opcji wy- ±wietlania monitora, z których korzysta u»ytkownik. Oto lista wªa±ciwo±ci obiektu: availheight, height - dost pna wysoko± ekranu w pikselach. availwidth, width - dost pna szeroko± ekranu w pikselach. colordepth, pixeldepth - liczba kolorów z jak pracuje monitor. fontsmoothingenabled - zawiera warto± true je±li wª czony jest antyaliazing czcionek ekranowych. 13 Obiekt document Oto lista wªa±ciwo±ci obiektu document wedªug standardu W3C DOM: charset - specyczna dla Internet Explorer, zawiera nazw strony kodowej dokumentu. 31

33 characterset - specyczna dla Netscape, zawiera nazw strony kodowej dokumentu. cookie - umo»liwia ustawienie cookie z poziomu JavaScript. domain - pozwala na uzyskanie dost pu do dokumentów wy±wietlanych w innych ramkach lub oknach, które zaªadowano z tej samej domeny, co dokument, w którym znajduje si skrypt, ale na innym serwerze. Domy±lnie nie jest to mo»liwe ze wzgl dów bezpiecze«stwa. height i width - specyczne dla Netscape, zawieraj wysoko± i szeroko± okna w pikselach w momencie, w którym s sprawdzane. Przegl darka IE te» ma te wªa±ciwo±ci, ale nale» one do obiektu body. lastmodied - data i godzina ostatniej modykacji dokumentu. referrer - adres URL strony, na której znajdowaªo si ª cze do dokumentu (o ile u»ytkownik u»yª takiego sposobu, by dosta si na stron ). title - zawiera tytuª dokumentu. URL - adres, którego u»yto do pobrania dokumentu. Obiekt document zawiera wiele metod, my omówimy te najbardziej u»yteczne dla nas. Oto ich lista: close() getelementbyid() getelementsbyname() getelementsbytagname() open() write() writeln() Metody open(), write(), writeln() i close() umo»liwiaj tworzenie nowych dokumentów za pomoc j zyka JavaScript. Nie mo»na natomiast za ich pomoc dodawa elementów do dokumentu, który zostaª ju» zaªadowany w oknie przegl darki. Metoda open() pozwala na otwarcie nowego strumienia danych w oknie przegl darki lub ramce. Jako argument podajemy typ MIME nowego dokumentu (np. text/html, image/jpeg i. in.). Aby utworzy 32

34 dokument u»ywamy metody write() writeln() (ró»ni si one tym,»e ta druga dodaje na ko«cu znak nowego wiersza). Konstruowanie dokumentu ko«czymy poprzez u»ycie metody close(), która powoduje zamkni cie strumienia danych. document.open("text/html"); document.write("<html><head>"); document.write("<meta http-equiv=\"content-type\" content=\"text/html; charset=iso \" >"); document.write(" <title>tytuª dokumentu</title></head><body>"); document.write("zawarto± strony</body></html>"); document.close(); 13.1 Model W3C DOM Model DOM opisuje relacje pomi dzy wszystkimi obiektami na stronie HTML. Relacje te przypominaj struktur drzewa. Ka»dy obiekt w modelu DOM jest tzw. w zªem (ang. node). Pierwszym elementem drzewa jest obiekt document - od niego rozchodz si poszczególne gaª zie drzewa. I tak, znacznik <HTML> jest w zªem obiektu document, a znaczniki <body> i <title> s w zªami potomnymi znacznika <HTML>. Obiekt document, mimo i» nie znajduje si w kodzie HTML, jest traktowany jako pierwszy element na stronie. Ka»dy element na stronie jest w zªem. Jest nim równie» zwykªy tekst. W zeª zawieraj cy inne w zªy, nazywa si w zªem rodzicem (parent node). W zeª zawarty w innym w ¹le okre±la si mianem w zeª dziecko lub w zeª potomny (child node). Np., nast puj cy kod HTML tworzy dwa ró»ne w zªy: <b>to jest pogrubiony tekst<b> Mamy tu w zeª b oraz w zeª potomny typu Text o zawarto±ci To jest pogrubiony tekst. Typy w zªów. Poni»ej zestawiona zostaªa tabela typów w zªów wedªug standardu W3C DOM: Typ Numer nodename nodevalue Opis Element 1 nazwa znacznika null dowolny znacznik HTML Attribute 2 nazwa atrybutu warto± atrybutu para atrybut-warto± Text 3 #text tekst fragment tekstu Comment 8 #comment komentarz komentarz HTML Document 9 #document null gªówny obiekt document DocumentType 10 DOCTYPE null specykacja DTD Wªa±ciwo±ci w zªów. Ka»dy w zeª ma wiele wªa±ciwo±ci, wi kszo± z nich to opis zale»no±ci pomi dzy innymi w zªami. Oto lista niektórych wªa±ciwo±ci typów w zªów: 33

35 Wªa±ciwo± Typ warto±ci Opis nodename String Zale»y od typu w zªa nodevalue String Zale»y od typu w zªa nodetype Integer Staªa reprezentuj ca typ w zªa parentnode Object Referencja do w zªa macierzystego childnodes Array Wszystkie w zªy potomne rstchild Object Referencja do pierwszego w zªa potomnego lastchild Object Referencja do ostatniego w zªa potomnego previoussibling Object Referencja do poprzedniego w zªa na danym poziomie nextsibling Object Referencja do nast pnego w zªa na danym poziomie attributes NodeMap Tablica atrybutów w zªa Dost p do elementów HTML za pomoc w zªów. Rozwa»my bardzo prosty dokument HTML: <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> </html> <head> </head> <body> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta name="description" content="[ Opis dokumentu ]" /> <meta name="author" content="[ Autor dokumentu ]" /> <meta name="generator" content="edhtml" /> <title>to jest tytuª dokumentu</title> <!-- A to jest komentarz --> <p name="ala" id="akapit" title="cos"> </p> </body> A to akapit <em> </em> i co± jeszcze Aby uzyska dost p do akapitu mo»emy wykorzysta nast puj c struktur w zªów: document.childnodes[1].childnodes[1].childnodes[1] \\ <html> <body> <p> 34