Instrukcja if..else Składnia if (warunek) { instrukcje; } [else { instrukcje;}]

Transkrypt

1 Wykład 7 Język JavaScript opis języka (punkt 1), umieszczanie kodu JavaScript w plikach HTML i XHTML (2), przykłady skryptów (punkt 3), przydatne linki (Dodatek) 1. Podstawowe elementy języka ECMAScript v3 (JavaScript 1.5) 1.1. Komentarze Komentarz blokowy:miedzy znakami /* */ /* to jest treść komentarza */ Komnetarz liniowy: od znaku // do znaku końca linii; // to jest komentarz liniowy 1.2. Instrukcje Instrukcja with Umożliwia dostęp do właściwości i metod obiektów bez podawania przy każdym odwołaniu nazwy obiektu. Instrukcja ta spowalnia wykonanie skryptu. Składnia with (object) { instrukcje Przykład var a, b; with (Math) { a =random(); b = SQRT2; Instrukcja if..else Składnia if (warunek) { instrukcje; [else { instrukcje;] Instrukcja pętli while Składnia while (warunek) { instrukcje; Zofia Kruczkiewicz, Wykład 7, HTML 1

2 Instrukcja pętli do...while Składnia do { instrukcje while (warunek); Przykład do { i+=1; document.write(i); while (i<5); Instrukcja pętli for Składnia for ([instrukcja-początkowe]; [warunek]; [instrukcja-inkrementacji]) { instrukcje; Przykład for (var i = 0; i < 5; i++) { document.write("i= "+ i +" "); Instrukcja pętli for..in Pętla ta przechodzi przez wszystkie pola danego obiektu (np. elementy tablicy) Składnia for (zmienna in obiekt) { instrukcje; Przykład function pokaz_obiekt(obiekt, NazwaObiektu) { var rezultat = ""; for (var i in obiekt) { rezultat += NazwaObiektu+ "." + i + " = " + obiekt[i] + "\n"; document.write(rezultat); Instrukcja label Blok instrukcji, które mogą być wykonane podczas instrukcji break lub continue Składnia label: instrukcja Przykład Miejsce1: document.writeln(("to jest instrukcja wskazana przez instrukcję label"); Zofia Kruczkiewicz, Wykład 7, HTML 2

3 Instrukcja break Używana do przerwania pętli, instrukcji switch lub etykiety. Składnia break [etykieta] Przykład function testbreak() { var i = 0; while (i < 6) { if (i == 3) break; i++; Instrukcja continue Wznawia dowolną instrukcję pętli oraz etykiety Składnia continue [label] Przykłady: 1) i = 0; while (i <= 9) { i++; if ((i % 2) == 0) continue; i += 2; //po zakończeniu pętli i jest równe 11=3;4;7;8;11 2) i = 0; poczatek: i+=1; while (i <= 9) { i++; if ((i % 5) == 0) continue poczatek; i +=2; //po zakończeniu pętli n jest równe 11=1;4;6;9;11 Zofia Kruczkiewicz, Wykład 7, HTML 3

4 Instrukcja switch Składnia switch (wyrażenie) { case etykieta1 : instrukcje; break; case etykieta2 : instrukcje; break;... default : instrukcje; Przykład: switch (i) { case "Ksiazki" : document.writeln("wybrano ksiazki."); break; case "Czasopisma" : document.writeln("wybrano czasopisma."); break; default : document.writeln("taki wybór nie istnieje " + i + "."); document.writeln(" Czy dokonałeś właściwego wyboru?"); Definiowanie zmiennych instrukcja var var nazwazmiennej1 [= wartosc] [..., nazwazmiennej2 [= wartosc] ] Zmienne definiowane wewnątrz funkcji są lokalne, natromiast definiowane poza funkcją są globalne Przykład var num_1 = 0, num_2 = Definiowanie stałej Deklarowanie stałej bez mozliwości zmiany jej wartości const nazwa1 [= wartosc] [..., nazwa2 [= wartosc] ] const a = 7; document.writeln("a jest równa " + a ); // a jest równa 7 Zofia Kruczkiewicz, Wykład 7, HTML 4

5 Instrukcja export Eksportuje właściowści, funkcje i obiekty z jednego skryptu do innego skryptu Składnia export name1, name2,..., namen export * Instrukcja import Pozwala importować w skrypcie własności na rzecz obiektu Obiekt, funkcje oraz obiekty (nazwa1, nazwa2) ze skryptu, który eksportuje tę informację. Składnia import Obiekt.nazwa1, Obiekt.nazwa2,...,Obiekt.nazwaN import Obiekt.* function Definiowanie funkcji ze specyfikacją parametrów typu łańcuchowego, liczbowego oraz obiektowego. Składnia function nazwa([param] [, param] [..., param]) { instrukcje Przykład 1 deklarowanie funkcji function cena_brutto(cena, podatek) { return cena*(1+podatek/100); Przykład 2 warunkowe deklarowanie funkcji warunek <script type="text/javascript"> // <![CDATA[ function zawsze() { document.writeln(" Funcja ta zawsze jest deklarowana."); if (1) function warunek() { document.writeln("funkcja jest deklarowana tylko dla if(1)."); // ]]> </script> Przykład 3 W JavaScript operuje się na referencjach do funkcji: function f1(a,b) { return a+b; function f2(a,b) { return a-b; switch(i) { case " +" : g=f1; break; case " - " : g=f2; break; document.writeln(g(1,4)); Zofia Kruczkiewicz, Wykład 7, HTML 5

6 Instrukcja return Specyfikuje wartość zwracaną przez funkcję. Składnia return expression; Przykład function sqr(x) { return x*x; Instrukcja throw Definiowanie wyjątków użytkownika Składnia throw wyrażenie; throw "Blad1"; // generowanie wyjątku z wartością łańcuchową throw 42; // generowanie wyjątku z wartością 42 throw true; // generowanie wyjątkuz wartością true Przykład: Generowanie wyjątku z generowaniem obiektu. Należy zdefiniować obiekt, zanim zostanie przekazany do generowanego wyjatku. W bloku catch można odwoływać się do właściwości przekazanego obiektu. W przykładzie generowany jest obiekt moj_wyjatek typu Wyjatek_uzytkownika i przekazany w instrukcji generowania wyjątku. function Wyjatek_uzytkownika(wiadomosc) { this.message=wiadomosc; this.name=" Wyjatek_uzytkownika "; function Podziel (dzielnik) { if (dzielnik!= 0) { return 1/dzielnik; else { moj_wyjatek = new Wyjatek_uzytkownika ("Dzielenie przez zero"); throw moj_wyjatek; try { odwrotnosc=podziel(liczba); catch (e) { odwrotnosc=-1; logmyerrors(e.message, e.name); // przekazanie obiektu wyjątku do obsługi błędu Zofia Kruczkiewicz, Wykład 7, HTML 6

7 Instrukcja try..catch Składnia try { instrukcje [catch (wyjatek_var if wyrazenie) {instrukcje]... [catch (wyjatek_var) {instrukcje] [finally {instrukcje] Przykład 1 try { throw "moj_wyjatek" // generowanie wyjatku catch (e) {//obsługa wyjątku logmyerrors(e) // przekazanie obiektu wyjątku do osługi błędu Przykład 2 try { jakasfunkcja(); // może wygenerować dwa wyjątki catch (e if e instanceof Type) {/* instrukcje obsługujące błędy typu wyjątku*/ catch (e if e instanceof Format) { /* instrukcje obsługujące błędy Format wyjątku*/ catch (e) { /* instrukcje obsługujące dowolny typ wyjątku*/ logmyerrors(e) // przekazanie obiektu wyjatku do obsługi błędu Przykład 3 instrukcje w bloku finally zawsze są wykonywane, również wtedy, gdy wystąpi wyjątek-przed błędnym zakończeniem skryptu (po stronie serwera). Przykład ze strony openmyfile() try { // tie up a resource writemyfile(thedata) finally { closemyfile() // always close the resource Zofia Kruczkiewicz, Wykład 7, HTML 7

8 1.3. Obiekty Podstawowym typem obiektowym jest typ Object wszystkie obiekty dziedziczą po typie Object. Standard ECMA opisuje także : Chapter 1 Objects, Methods, and Properties Array Boolean Date Function java JavaArray JavaClass JavaObject JavaPackage Math netscape Number Object Packages RegExp String sun 1) Obiekty JavaScriptu są tablicami asocjacyjnymi. Dostęp do pól obiektów jest możliwy przy użyciu równoważnych notacji: obiekt.pole obiekt["pole"] obiekt[nr]. Obie notacje z nawiasami kwadratowymi zwyczajowo stosuje się jednak przy korzystaniu z tablic powstałych jako obiekt Array. 2) Definiowanie typu obiektu Aby zdefiniować własny typ obiektu, należy utworzyć funkcję konstruktora: function Obiekt1(wlasciwosc_1) { this.wlasciwosc_1 = wlasciwosc_1; function metoda_1() { alert("obiekt1::metoda_1()"); this.metoda_1 = metoda_1; Zofia Kruczkiewicz, Wykład 7, HTML 8

9 3) Aby utworzyć obiekt typu Obiekt1, należy skorzystać z operatora new: var obiekt1 = new Obiekt1(2); Nowe obiekty w JavaScripcie tworzone są na stercie. W przypadku, kiedy do danego obiektu nie istnieje już żadna referencja, mechanizm garbage collectora usuwa dany obiekt z pamięci. 4) Ponieważ metody obiektu (funkcje) są jego skladowymi, dostęp do nich jest możliwy przy użyciu notacji z kropką i notacji z nawiasami kwadratowymi. Poniższe dwie linie kodu są równoważne: obiekt1.metoda_1(); obiekt1["metoda_1"](); 1.4. Typ Function Funkcje są jednocześnie obiektami typu Function. Obiekt ten ma konstruktor przyjmujący jako argument ciąg znaków, stąd pewną funkcję f_1 można zdefiniować w sposób następujący: f_1= new Function("wlasciwosc_1","return wlasciwosc_1"); Ostatni argument Function() jest treścią kodu funkcji, pozostałe to nazwy parametrów. Ten sposób tworzenia funkcji może być mało wydajny Dziedziczenie W implementacjach ECMAScript V3 dziedziczenie realizowane jest przez prototypy. Zofia Kruczkiewicz, Wykład 7, HTML 9

10 1.5.1.Pierwszy sposób tworzenia dziedziczenia: Aby utworzyć klasę Pochodna dziedziczącą po klasie Bazowa, należy ustawić pole Pochodna.prototype na nowy obiekt klasy Bazowa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <title>pokazy slajdów, skrypty JavaScript</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="styl10.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> // <![CDATA[ function Bazowa() { this.a = function() {document.write("bazowa::a() "); this.b = function() {document.write("bazowa::b() "); function Pochodna() {// B przeciąża odpowiednią metodę B z klasy Bazowa: this.b = function () { document.write("pochodna::b() "); function Logo() { document.write("to jest początek pokazu: "); function proby() { Logo(); Pochodna.prototype = new Bazowa(); bazowy = new Bazowa(); pochodny = new Pochodna(); bazowy.a(); pochodny.a(); bazowy.b(); pochodny.b(); // ]]> </script> </head> <body onload= "proby()"> </body> </html> // wyświetla: "Bazowa::A()" // wyświetla: "Bazowa::A()" // wyświetla: "Bazowa::B()" // wyświetla: "Pochodna::B()" Zofia Kruczkiewicz, Wykład 7, HTML 10

11 Drugi sposób tworzenia dziedziczenia w JavaScripcie. Należy zmodyfikować metodę extending w prototypie klasy Object i w funkcjach konstruktora klasy dziedziczącej należy korzystać z metody extending(), wywoływanej jako pierwsza. <script type="text/javascript"> // <![CDATA[ Object.prototype.extending = function (supclass) { tempobj = new supclass(); for (property in tempobj) { this[property] = tempobj[property]; function Bazowa() { this.a = function () { document.write("bazowa::a() "); this.b = function () { document.write("bazowa::b() "); function Pochodna() { this.extending(bazowa); this.b = function () { document.write("pochodna::b() "); function Logo() { document.write("to jest początek pokazu: "); function proby() { Logo(); bazowy = new Bazowa(); pochodny = new Pochodna(); bazowy.a(); pochodny.a(); bazowy.b(); pochodny.b(); // ]]> </script> // wyświetla: "Bazowa::A()" // wyświetla: "Bazowa::A()" // wyświetla: "Bazowa::B()" // wyświetla: "Pochodna::B()" Zofia Kruczkiewicz, Wykład 7, HTML 11

12 Chapter 5 Operators Assignment Operators Comparison Operators Using the Equality Operators Arithmetic Operators % (Modulus) ++ (Increment) -- (Decrement) - (Unary Negation) Bitwise Operators Bitwise Logical Operators Bitwise Shift Operators Logical Operators String Operators Special Operators?: (Conditional operator), (Comma operator) delete function in instanceof new this typeof void 1.6.Operatory 1.7. Ważne własciwości i funkcje niektórych typów obiektów Chapter 2 Top-Level Properties and Functions decodeuri decodeuricomponent encodeuri encodeuricomponent eval Infinity isfinite isnan NaN Number parsefloat parseint String undefined Zofia Kruczkiewicz, Wykład 7, HTML 12

13 2. Umieszczanie kodu JavaScript w plikach HTML i XHTML wg encykopedii Wikipedia 2.1. W kodzie HTML 4.x <script type="text/javascript" language="javascript1.5"> // Ten skrypt wymaga JS 1.5. // Zostanie zignorowany przez przeglądarki // nie obsługujące tej wersji języka function fun() { try {... catch (e) {... </script> 2.2. W przypadku XHTML 1.x nie występuje parametr language. Ponadto specyfikacja XML wymaga, by umieścić treść skryptu wewnątrz sekcji CDATA, jeśli używamy znaków takich jak "<" czy ">". Tak więc dla XHTML: <script type="text/javascript"> // <![CDATA[ function fun() {... // ]]> </script> Znaki komentarza "//" przy początku i końcu sekcji CDATA zapobiegają błędnemu zinterpretowaniu tej sekcji przez starsze przeglądarki Zewnętrzne skrypty dodajemy także przy użyciu w/w znacznika, dodając tylko parametr src z nazwą pliku zawierającego kod skryptu: <script type="text/javascript" src="plik.js"></script> Typem MIME dla samodzielnych plików z kodem w JavaScripcie jest "text/javascript" lub "application/x-javascript". Zofia Kruczkiewicz, Wykład 7, HTML 13

14 3. Skrypty po stronie klienta kontynuacja wykładu 6 Skrót do materiałów dotyczących mozliwości budowy skryptów typu JvaScript po stronie klienta. Zastosowanie obiektów Navigatora Hierarchia typów obiektów. Appendix A, "Object summary." Kazda strona zawiera następujące obiekty: navigator: posiada typ i nazwę używanego Navigatora, typ MIME wspierany oraz plug-iny zainstalowane po stronie klienta. window: obiekt stojący najwyżej w hierarchii; posiada właściwości bieżącego okna przeglądarki; istnieje także obiekt typu window dla każdego okna dziecka w dokumentach typu ramki. document: zawiera właściwości reprezentujące zawartość dokumentu: tytuł, kolor tła, linki oraz formularze (Chapter 3, "Using windows and frames.") location: posiada właściwości reprezentujące bieżący URL. history: zawiera właściwości reprezentujące adresy URL klientów, z którymi poprzednio połączono się. Zofia Kruczkiewicz, Wykład 7, HTML 14

15 3.1. Właściwosci dokumentu Przykład 1. Zofia Kruczkiewicz, Wykład 7, HTML 15

16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <title>pokazy slajdów, skrypty JavaScript</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="styl10.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> // <![CDATA[ function update(form) { form.imie.value=""; form.przycisk.value="nacisnij, aby uaktualnić"; alert("modyfikacja danych formularza"); // ]]> </script> </head> <body> <h2>ankieta</h2> <form name="ankieta1" method="post" action=" <i>podaj nazwisko: </i> <input type ="text" name="imie" value="" class="poletekstowe" onclick="update(ankieta1)"></input> <br/> <p><input type="button" name="przycisk" value="nacisnij, aby uaktualnić" onclick="document.ankieta1.przycisk.value += '...Zmieniono!', document.ankieta1.imie.value += '...Zmieniono!'"/> </p> <input type="submit" value="prześlij dane operacji"/><br/> </form> </body> </html> Zofia Kruczkiewicz, Wykład 7, HTML 16

17 3.2. Ramki Przyklad 2 - Strona ramka1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></head> <frameset rows="200,*"> <frameset cols="200,*"> <frame src="b1.html" name="b1"></frame> <frame src="b2.html" name="b2"></frame> </frameset> <frame src="b3.html" name="b3"></frame> </frameset> </html> b1 jest top.frames[0] b2 jest top.frames[1] b3 jest top.frames[2] Zofia Kruczkiewicz, Wykład 7, HTML 17

18 Przykład 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Pierwsze ramki</title> </head> <frameset cols="200,*"> <frame src="ramka3.html" name="br1"></frame> <frame src="b3.html" name="br3"></frame> </frameset> </html> Strona ramka.2html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Pierwsze ramki</title> </head> <frameset rows="200,*"> <frame src="b1.html" name="b1"></frame> <frame src="b2.html" name="b2"></frame> </frameset> </html> Strona ramka3.html br1 jest top.frames[0] br3 jest top.frames[1] b1 jest top.frames[0] [0] lub br1.frames[0] b2 jest top.frames[0][1] lub br1.frames[1] Zofia Kruczkiewicz, Wykład 7, HTML 18

19 Przykład 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Ramki</title> </head> <frameset cols="200,*"> <frame src="ramka4_1.html" name="ramka1"></frame> <frame src="ramka4_2.html" name="ramka2"></frame> </frameset> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Pierwsza ramka</title> <script type="text/javascript"> // <![CDATA[ tablica=new Array("b1.html","b2.html") function tresc(nr) { if( nr==0) parent.ramka2.document.location.href=tablica[nr]; else parent.ramka1.document.location.href=tablica[nr]; // ]]> </script> </head> <body> <h1>nawigacja</h1> <a href="javascript:tresc(0)">strona 1</a> <a href="javascript:tresc(1)">strona 2</a> </body> </html> Plik ramka4_1.html Zofia Kruczkiewicz, Wykład 7, HTML 19

20 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Druga ramka</title> <script type="text/javascript"> // <![CDATA[ var Fot1=new Image(); Fot1.src="Clouds.wmf"; var Fot2=new Image(); Fot2.src="kwiatek.gif"; var p=0; function tresc_na_ekran() { if(p==0) {parent.ramka2.document.obraz.src=fot1.src; p=1; else {parent.ramka2.document.obraz.src=fot2.src; p=0; // ]]> </script> </head> <body> <h1>strona w ramce</h1> <img src="kwiatek.gif" name="obraz" id="obraz" alt="obrazek, który można zmieniać" onclick="tresc_na_ekran()"></img> </body> </html> Plik ramka4_2.html Zofia Kruczkiewicz, Wykład 7, HTML 20

21 Zofia Kruczkiewicz, Wykład 7, HTML 21

22 3.3. Okna Tworzenie zamykanie nowego okna Przykład 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <title>pokazy slajdów, skrypty JavaScript</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="styl10.css" rel="stylesheet" type="text/css" /> </head> <body> <form name="ankieta1" method="post" action=" <p> <input type="button" value="otworz okno 2" onclick="msgwindow=window.open('','okno2', 'resizable=no,width=200,height=200')"/></p> <p><a href="b1.html" target="okno2">ładuj plik do okna 2</a></p> <p><input type="button" value="zamknij okno 2" onclick="msgwindow.close()"/></p> </form> </body> </html> Przewijanie otwieranego okna Przykład 6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head><title>pokazy slajdów, skrypty JavaScript</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="styl10.css" rel="stylesheet" type="text/css" /> Zofia Kruczkiewicz, Wykład 7, HTML 22

23 <script type="text/javascript"> // <![CDATA[ function okno() { msgwindow=window.open('b1.html','okno2','resizable=no,width=300, height=300, toolbars=yes, location=yes, scrollbars=yes'); settimeout('msgwindow.scroll(0,100)',1000); msgwindow.focus(); // ]]> </script> </head> <body> <form name="ankieta1" method="post" action=" <p><input type="button" value="otworz okno 2" onclick="okno()"/></p> <p><a href="b2.html" target="okno2">ładuj plik do okna 2</a></p> <p><input type="button" value="zamknij okno 2" onclick="msgwindow.close()"/></p> </form> </body> </html> Zofia Kruczkiewicz, Wykład 7, HTML 23

24 Liczba odwiedzeń okna, zastosowanie URL, zmiana rozmiarów i położenia głównego okna oraz okna potomnego Przykład 7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <title>pokazy slajdów, skrypty JavaScript</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="styl10.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> // <![CDATA[ var p1=0; function okno() { msgwindow=window.open('b1.html','okno2', 'resizable=no,width=300,height=300,toolbars=yes,location=yes, scrollbars=yes'); msgwindow.moveto(300,100); settimeout('msgwindow.scroll(0,100)',1000); msgwindow.focus(); ++p1; function okno1() {msgwindow.location="b2.html"; msgwindow.moveto(300,100); msgwindow.focus(); ++p1; // ]]> </script> </head> <body onload="self.resizeto(350,250), self.moveto(0,0)"> <form name="ankieta1" method="post" action=" <p><input type="button" value="otworz okno 2" onclick="okno()"/></p> <p><a href="javascript:okno1()" >Ładuj plik do okna 2</a> </p> <p> <input type="button" value="zamknij okno 2" onclick="msgwindow.close(), alert('liczba odwiedzeń: '+p1)"/></p> </form> </body> </html> Okienko to pokazuje się po naciśnięciu przycisku Zamknij okno 2, jeśli naciśnięto raz przycisk Otwórz okno 2 oraz link Ładuj plik do okna 2 (verte) Zofia Kruczkiewicz, Wykład 7, HTML 24

25 Okno to pokazuje się po naciśnięciu przycisku Otwórz okno 2 Okno to pokazuje się po naciśnięciu linku Ładuj plik do okna 2 Zofia Kruczkiewicz, Wykład 7, HTML 25

26 3.4. Uzupełnienia do skryptów Advanced topics This chapter describes some special concepts and applications that extend the power and flexibility of Navigator JavaScript. The chapter covers the following topics: Using JavaScript URLs Using client-side image maps Using cookies Using data tainting for security Using server-side image maps Determining installed plug-ins Using the status bar 3.4. Podsumowanie obiektów zarządzanych w skryptach po stronie klienta Tablica zawiera listę obiektówwraz z ich właściwościami, metodami oraz funkcje obsługi zdarzeń. Każdy obiekt posiada metody: eval, tostring oraz valueof. Obiekt Właściwości Metody Funkcje obsługi zdarzeń Anchor none none none anchors array length none none Applet none All public methods of the applet none applets array length none none Area Array Button Checkbox hash host hostname href pathname port protocol search target length prototype form name type value none join reverse sort blur click focus checked blur defaultchecked click form focus name type value onmouseout onmouseover none onblur onclick onfocus onblur onclick onfocus Zofia Kruczkiewicz, Wykład 7, HTML 26

27 Zofia Kruczkiewicz, Wykład 7, HTML 27 Date prototype getdate getday gethours getminutes getmonth getseconds gettime gettimezoneoffset getyear parse setdate sethours setminutes setmonth setseconds settime setyear togmtstring tolocalestring tostring UTC valueof none document alinkcolor Anchor anchors Applet applets Area bgcolor cookie domain embeds fgcolor Form forms Image images lastmodified linkcolor Link links referrer title URL vlinkcolor close open write writeln none FileUpload form name type value blur focus onblur onchange onfocus Form action Button reset submit onreset onsubmit

28 Checkbox elements encoding FileUpload Hidden length method name Password Radio Reset Select Submit target Text Textarea forms array length none none Frame frames name length parent self window blur cleartimeout focus settimeout onblur onfocus frames array length none none Hidden name type value none none history current length next previous back forward go Zofia Kruczkiewicz, Wykład 7, HTML 28 none history array length none none Image border complete height hspace lowsrc name prototype src vspace width none onabort onerror onload images array length none none Link and Area hash host hostname href pathname port none onclick onmouseout onmouseover

29 protocol search target links array length none none location Math MimeType hash host hostname href pathname port protocol search E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 description enabledplugin type suffixes reload replace abs acos asin atan atan2 ceil cos exp floor log max min pow random round sin sqrt tan none none none none mimetypes array length none none navigator appcodename appname appversion mimetypes plugins useragent javaenabled taintenabled none options array length none none options array elements defaultselected index length selected selectedindex text value none none Zofia Kruczkiewicz, Wykład 7, HTML 29

30 Password Plugin defaultvalue form name type value description filename length name blur focus select none onblur onfocus none plugins array length refresh none Radio Reset Select String checked blur defaultchecked click form focus length name type value form name type value form length name options selectedindex text type length prototype blur click focus blur focus anchor big blink bold charat fixed fontcolor fontsize indexof italics lastindexof link small split strike sub substring sup tolowercase touppercase onblur onclick onfocus onblur onclick onfocus onblur onchange onfocus none Submit form blur onblur Zofia Kruczkiewicz, Wykład 7, HTML 30

31 Zofia Kruczkiewicz, Wykład 7, HTML 31 name type value click focus onclick onfocus Text defaultvalue form name type value blur focus select onblur onchange onfocus onselect Textarea defaultvalue form name type value blur focus select onblur onchange onfocus onselect window closed defaultstatus document Frame frames history length location name opener parent self status top window alert blur cleartimeout close confirm focus open prompt settimeout onblur onerror onfocus onload onunload

32 Dodatek Z Wikipedii, wolnej encyklopedii. JScript - język skryptowy, który jest opracowaną przez firmę Microsoft, rozszerzoną implementacją języka ECMAScript (ECMA262), międzynarodowego standardu opartego na JavaScript, firmy Netscape. Jest interpretowany przez przeglądarkę Internet Explorer i Windows Scripting Host. Najnowszą wersją języka jest JScript.NET. JavaScript ("JS") to stworzony przez firmę Netscape zorientowany obiektowo skryptowy język programowania, najczęściej stosowany na stronach WWW. Implementacja JavaScriptu stworzona przez firmę Microsoft nosi nazwę JScript. Głównym autorem języka JavaScript jest Brendan Eich. Pod koniec lat 90. ubiegłego wieku organizacja ECMA wydała ustandaryzowaną specyfikację tego języka pod nazwą ECMAScript. 1. Wersje języka JavaScript 1.0 Pierwotna wersja języka, zaimplementowana w wersji 2.0 przeglądarki Netscape Navigator. Odpowiada jej JScript 1.0, zaimplementowany w Internet Explorerze 3.0 JavaScript 1.1 W tym wydaniu rozbudowano obsługę tablic (obiekt Array) i poprawiono większość błędów wersji 1.0. Ta wersja została zaimplementowana w Netscape Navigatorze 3.0 oraz jako JScript 2.0 w późniejszych wydaniach Internet Explorera 3.0. ECMAScript v1 Pierwsza specyfikacja języka stworzona przez ECMA, bliska JavaScriptowi 1.1, choć występują pewne różnice. Zaimplementowana jako JavaScript 1.3 w Netscape Navigatorze 4.5 i JScript 3.0 w Internet Explorerze. JavaScript 1.2 Od tej wersji dostępne są m. in. wyrażenia regularne i instrukcja switch. Wersja 1.2 wydana została, zanim ECMA ukończyła pierwszą specyfikację, stąd JavaScript 1.2 nie jest zgodny z ECMA v1. Niektóre operatory i metody obiektów Array i String zachowują się inaczej niż w specyfikacji ECMA oraz inaczej niż w późniejszych wersjach języka, dlatego wersji tej należy unikać. JavaScript 1.2 został zaimplementowany w Netscape Navigatorze 4.0. JavaScript 1.3 Wersja ta nie wprowadziła nowych możliwości, zostały w niej poprawione jedynie niezgodności wersji 1.2 ze specyfikacją ECMAScript v1. Dostępna w Netscape Navigatorze 4.5 oraz jako JScript 3.0 w Internet Explorerze. ECMAScript v2 Poprawiono błędy i niejasności w specyfikacji ECMAScript v1. JavaScript 1.4 Wersja ta dostępna była tylko jako język programowania po stronie serwera, używana np. w Netscape Enterprise Server. Wg dokumentacji Opery 6, jej implementacja jest najbliższa tej wersji. Zofia Kruczkiewicz, Wykład 7, HTML 32

33 ECMAScript v3 Do specyfikacji dołączono instrukcję switch, wyrażenia regularne oraz obsługę wyjątków. Standard w całości zaimplementowany w Operze 7. JScript 5.0 Częściowa implementaca ECMAScriptu v3 (obsługuje wyjątki), dostępna w Internet Explorerze 5.0. JavaScript 1.5 Pełna implementacja ECMAScriptu v3 w przeglądarkach bazujących na Mozilli (w tym Netscape 6.x i 7.x). JScript 5.5 i 5.6 Pełna implementacja ECMAScriptu v3 dostępna w Internet Explorerze 5.5 i 6.0. ECMAScript v4, JavaScript 2.0 i JScript.NET W chwili pisania tego artykułu prace nad kolejną wersją specyfikacji trwały. Microsoft na bazie wstępnej wersji specyfikacji stworzył tzw. JScript.NET, jednakże język ten nie został włączony do Internet Explorera. Firma Netscape wraz z Fundacją Mozilla opracowały eksperymentalną implementację tej specyfikacji pod nazwą "JavaScript 2.0". Wersja ta wprowadza rewolucyjne zmiany, takie jak statyczna obsługa typów, definiowanie klas oraz prostsze dziedziczenie. Żadna przeglądarka internetowa w chwili obecnej nie obsługuje ECMAScript v4. Podsumowanie JavaScript w przeglądarkach Netscape Navigator, Mozilla i Mozilla Firefox Wersja JavaScriptu Wersja przeglądarki JavaScript 1.0 Navigator 2.0 JavaScript 1.1 Navigator 3.0 JavaScript 1.2 Navigator JavaScript 1.3 Navigator x JavaScript 1.4 n/d JavaScript 1.5 Navigator 6.0 Mozilla 0.x, 1.x Mozilla Firefox 0.x, 1.x JavaScript w Netscape Enterprise Server Każda wersja serwera Netscape Enterprise Server także obsługuje inną wersję JavaScriptu. Aby ułatwić pisanie skryptów zgodnych z różnymi wersjami Enterprise Servera, w każdym rozdziale poświęconym danej możliwości języka podajemy wersję NES/FES, w której zaimplementowano daną funkcjonalność. Skrót Wersja Enterprise Servera NES 2.0 Netscape Enterprise Server 2.0 NES 3.0 Netscape Enterprise Server 3.0 Zofia Kruczkiewicz, Wykład 7, HTML 33

34 2. Zastosowania Najczęściej spotykanym zastosowaniem klienckiej wersji języka JavaScript są strony WWW. Skrypty pisane w JS służą najczęściej do zapewnienia interaktywności oraz sprawdzania poprawności formularzy HTML oraz budowania elementów nawigacyjnych (np. rozwijane menu). Tak uruchomiony skrypt JavaScriptu ma ograniczony dostęp do komputera, na którym jest wykonywany (ma wysoce ograniczony dostępu do zasobów systemu), o ile nie zostanie podpisany cyfrowo. Niektóre strony www zbudowane są z wykorzystaniem JavaScriptu (lub JScriptu) po stronie serwera, jednakże znacznie częściej korzysta się w tym przypadku z innych języków. W języku JavaScript można także pisać pełnoprawne aplikacje. Istnieje kilka środowisk, które to umożliwiają. Pierwszego z nich dostarcza Mozilla. Dzięki technologiom takim jak XUL, XBL, XPCOM oraz JSLib można szybko tworzyć aplikacje korzystające z zasobów systemowych, z graficznym interfejsem użytkownika dopasowującym się do danej platformy. Przykładem aplikacji JS+XUL może być klient IRC o nazwie ChatZilla, domyślnie dołączony do pakietu Mozilla. Znacznie więcej programów korzystających z tych technologii można znaleźć na stronie MozDev.org. Microsoft udostępnia także biblioteki umożliwiające tworzenie aplikacji w JavaScript (JScript) jako część środowiska Windows Scripting Host. Ponadto, JScript.NET jest jednym z podstawowych języków środowiska.net. Warto także wspomnieć o stworzonym przez IBM środowisku SashXB dla systemu Linux, które umożliwia tworzenie w języku JavaScript aplikacji korzystających z GTK+, GNOME i OpenLDAP. 3. Java i JavaScript wg encyklopedii Wikipedia Początkowo Netscape nazwała ten język "LiveScript", lecz szybko nazwa ta została zmieniona na "JavaScript" wskutek biznesowych porozumień między Netscape a firmą Sun Microsystems. Nazwa ta powoduje wiele nieporozumień wśród początkujących programistów. Mimo odrębności tych języków, skrypty JavaScriptu mogą mieć dostęp do publicznych metod klas Javy (głównie apletów) dzięki tzw. technologii LiveConnect. Programiści Javy mogą także stosować klasę netscape.javascript.jsobject jako "opakowanie" obiektów JavaScriptu, jednakże możliwość ta dostępna jest jedynie, jeśli aplet Javy i skrypt JavaScriptu uruchamiane są przez przeglądarki Mozilla, Opera i Netscape. 4. JavaScript w przeglądarkach internetowych Wg encyklopedii Wikipedia Implementacje JavaScriptu w przeglądarkach internetowych dostarczają obiektów pozwalających na modyfikowanie zawartości dokumentu oraz tworzenie i odczyt tzw. cookies (obiekt document), manipulowanie oknami i wyświetlanie prostych okien dialogowych (obiekt window), pobieraniem informacji o przeglądarce (obiekt navigator), sterowaniem pluginami przeglądarek oraz obsługą zdarzeń. Problem z manipulowaniem zawartością dokumentu stanowił brak standaryzacji obiektowego modelu dokumentu (DOM) - poczatkowo w wersjach 4.x przeglądarek Netscape dostęp do niektórych elementów dokumentu możliwy był przy użyciu kolekcji document.layers, a w Internet Explorerze 4.x - document.all. Organizacja W3C opracowała jednak jednolity DOM, obsługiwany przez wszystkie współczesne przeglądarki (Netscape od wersji 6, IE od wersji 5, Opera od wersji 6, Konqueror od wersji 3, Mozilla i Safari w dowolnej wersji). Aby uzyskać referencje do obiektu wewnątrz dokumentu HTML, należy skorzystać z metody document.getelementbyid(identyfikator), tym samym wymienione wcześniej kolekcje all i layers uważa się za przestarzałe. Zofia Kruczkiewicz, Wykład 7, HTML 34

35 5. Gdzie szukać informacji o JavaScripcie 5.1. Wg Wikipedia: specyfikacja języka ECMAScript jest dostępna pod adresem Propozycja języka JavaScript 2.0 (Mozilla.org) Przewodnik po JavaScripcie 1.5 Przewodnik po JavaScripcie 1.4 Przewodnik po JavaScripcie 1.3 w/w strony Netscape aktualnie nie działają, dokumentację do JavaScript można znaleźć na stronach Mozilli, np. dla wersji 1.3: dokumenty: Guide i Reference Zasoby MSDN na temat Microsoft JScript Kurs i skrypty JavaScript JavaScript: kursy, artykuły, skrypty XUL Planet jsconcise sourceforge.net Zobacz też: AJAX vascript_1.5 Przewodnik po języku JavaScript dostarcza informacji na temat samego języka JavaScript i jego obiektów. Dokumentacja języka JavaScript 1.5 (ten dokument) - dostarcza informacji na temat języka JavaScript w formie encyklopedycznej Core JavaScript Reference This book is a reference manual for the core JavaScript language for version 1.5. JavaScript is Netscape's cross-platform, object-based scripting language. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects. About this Book New Features in this Release What You Should Already Know JavaScript Versions Where to Find JavaScript Information Document Conventions Part 1 Chapter 1 Objects, Methods, and Properties Array Boolean Date Zofia Kruczkiewicz, Wykład 7, HTML 35

36 Function java JavaArray JavaClass JavaObject JavaPackage Math netscape Number Object Packages RegExp String sun Chapter 2 Top-Level Properties and Functions decodeuri decodeuricomponent encodeuri encodeuricomponent eval Infinity isfinite isnan NaN Number parsefloat parseint String undefined Part 2 Chapter 3 Statements break const continue do...while export for for...in function if...else import label return switch throw try...catch var while with Zofia Kruczkiewicz, Wykład 7, HTML 36

37 Chapter 4 Comments comment Chapter 5 Operators Assignment Operators Comparison Operators Using the Equality Operators Arithmetic Operators % (Modulus) ++ (Increment) -- (Decrement) - (Unary Negation) Bitwise Operators Bitwise Logical Operators Bitwise Shift Operators Logical Operators String Operators Special Operators?: (Conditional operator), (Comma operator) delete function in instanceof new this typeof void Part 3 LiveConn Chapter 6 Java Classes, Constructors, and Methods JSException JSObject Part 4 Appendix A Reserved Words Appendix B Deprecated Features Index Index Next Copyright 2000 Netscape Communications Corp. All rights reserved. Last Updated September 28, 2000 Zofia Kruczkiewicz, Wykład 7, HTML 37

38 5.4. Introduction What's new in Navigator 3.0 What you should already know How to use this book Document conventions Part 1. Using JavaScript in Navigator 1. Getting started What is JavaScript? Embedding JavaScript in HTML Defining and calling functions Using the write method Scripting event handlers Validating form input 2. Using Navigator objects Navigator object hierarchy document properties: an example JavaScript reflection and HTML layout Key Navigator objects Navigator's object arrays 3. Using windows and frames Opening and closing windows Using frames Referring to windows and frames Navigating among windows and frames 4. LiveConnect Enabling LiveConnect The Java Console About the Netscape packages JavaScript to Java communication Java to JavaScript communication 5. Advanced topics Using JavaScript URLs Using client-side image maps Using server-side image maps Using the status bar Using cookies Using data tainting for security Determining installed plug-ins Part 2. The JavaScript Language 6. Values, variables, and literals Values Variables Literals 7. Expressions and operators Expressions Operators 8. Object model Objects and properties Functions Creating new objects 9. Built-in objects and functions Built-in objects Built-in functions Zofia Kruczkiewicz, Wykład 7, HTML 38

39 10. Overview of JavaScript statements Conditional statement Loop statements Object manipulation statements and operators Comments Part 3. Reference 11. Statements break comment continue for for...in function if...else new return this var while with 12. The Netscape packages netscape.javascript.jsobject netscape.javascript.jsexception netscape.plugin.plugin 13. Navigator JavaScript reference abs acos action alert alinkcolor anchor method Anchor object anchors appcodename Applet applets appname appversion Area arguments array arguments property Array asin atan atan2 back bgcolor big blink blur bold Boolean border Button caller ceil charat Checkbox checked cleartimeout click close (document object) close (window object) closed complete confirm constructor cookie cos current Date defaultchecked defaultselected defaultstatus defaultvalue description document Zofia Kruczkiewicz, Wykład 7, HTML 39

40 domain E elements array elements property embeds array enabledplugin encoding escape eval exp fgcolor filename FileUpload fixed floor focus fontcolor fontsize Form object form property forms forward Frame frames Function getdate getday gethours getminutes getmonth getseconds gettime gettimezoneoffset getyear go hash height Hidden history array history object host hostname href hspace Image images index indexof isnan italics javaenabled join lastindexof lastmodified length link method Link object linkcolor links LN2 LN10 location log LOG2E LOG10E lowsrc Math max MAX_VALUE method MimeType mimetypes min MIN_VALUE name NaN navigator NEGATIVE_INFINITY next Number onabort onblur onchange onclick onerror onfocus onload onmouseout Zofia Kruczkiewicz, Wykład 7, HTML 40

41 onmouseover onreset onselect onsubmit onunload open (document object) open (window object) opener Option options parent parse parsefloat parseint Password pathname PI Plugin plugins port POSITIVE_INFINITY pow previous prompt protocol prototype Radio random referrer refresh reload replace reset method Reset object reverse round scroll search select method Select object selected selectedindex self setdate sethours setminutes setmonth setseconds settime settimeout setyear sin small sort split sqrt SQRT1_2 SQRT2 src status strike String sub submit method Submit object substring suffixes sup taint taintenabled tan target Text object text property Textarea title togmtstring tolocalestring tolowercase top tostring touppercase type unescape untaint URL useragent UTC Zofia Kruczkiewicz, Wykład 7, HTML 41

42 value valueof vlinkcolor vspace width window object window property write writeln A. Object summary B. Reserved words C. Color values D. Netscape cookies E. LiveAudio and LiveConnect F. Features added after version 1 Index Copyright Netscape Communications Corporation Last modified 01/08/ :22:04 Zofia Kruczkiewicz, Wykład 7, HTML 42