JavaScript. Wprowadzony wraz z Netscape Navigator 2.0 w celu dodania interaktywności do statycznej strony HTML.

Transkrypt

1 JavaScript Wprowadzony wraz z Netscape Navigator 2.0 w celu dodania interaktywności do statycznej strony HTML. Składnia języka skryptowego została oparta na składni Javy, która swoją składnię zawdzięcza C++. Cel Javascript to polepszenie obsługi strony www. Wprowadzenie skryptu do strony. <SCRIPT LANGUAGE = JavaScript > <! - document.write( Hello World ) --> </SCRIPT>

2 Zmienne JavaScript Liczba całkowita - z przedrostkiem 0x20 hex. 32 dec Liczba zmiennopozycyjna. Ciąg znaków. (imie= Marceli lub imie= Tomasz ) Zmienne Boole owskie (PRAWDA, FAŁSZ - TRUE, FALSE) JavaScript jest tak jak i Java językiem obiektowym. Obiekt=zmienne/stałe+metody powiązane ze sobą. Wyrażenia x=7; str= Hello World ;

3 Operatory. operatory jednoargumentowe (++.--). operatory dwuargumentowe. (+,-,*,/). Operatory przypisania x=math.pi; document.write( x= +x); x=false; document.write( x= +x); x= Tekst ; document.write( x= +x); Możliwa jest zmiana typu zmiennej (on fly-, czyli w locie). +=, -=, *=, /= przypisanie i działania matematyczne w tym samym czasie.

4 Operatory matematyczne +, dodawanie -, odejmowanie *, mnożenie /, dzielenie %, moduł --, zmniejszenie ++, przyrost Operatory porównania ==, równość!=, różność <, mniejszy od <=, mniejszy lub równy >, większy od >=, większy lub równy

5 Operatory logiczne &&, i (AND), lub (OR)!, nie (NO)!PRAWDA zwraca FAŁSZ i!fałsz zwraca PRAWDA Operatory łańcuchowe +, str= Hello + World! ; ==, case-insensitive.

6 Instrukcje sterujące pracą skryptu. Warunek if...else If(document.lastModified.year<1995) document.write( Bardzo stary dokument. ) If(document.lastModified.year>=1995)&& (document.lastmodified.month>=10) document.write( Nowy dokument. ) else document.write( Stary dokument. )

7 Iteracja for for(count=0;count<10;count++) document.write( Licznik:,count); Iteracja warunkowa while Wykonuje instrukcje tak długo jak jej warunek pozostaje prawdziwy. count=0; while(count<100){ document.write( Licznik:,count); count++; }

8 Instrukcja break (przerwanie) count=0; while(count<100){ if(count==10) break; count++; } Instrukcja continue var i=0; while(i<100){i++ if((i%2)==0) continue; else document.write( Licznik:,i); }

9 Instrukcja function. Function TytulStrony(strNazwa){ return(document.title == strnazwa) } Pętla for...in (iteracja właściwości obiektu) for (i in obj) document.writeln( dla +i+ obj= +obj[i]+ <br> );

10 Instrukcja new (definiuje nowy obiekt). urodziny = new Date(1978,9,17); tablica = new Array(10); Instrukcja return (określa wartość zwracaną przez funkcję) Function square(x){ return x*x; }

11 Instrukcja this. (dostęp do właściwości i metod obiektu) function setsize(x,y){ this.horizsize=x; this.vertsize=y; } document.setsize(640,480); Instrukcja var (podaje nazwę zmiennej). var number=0, liczba=6;

12 Instrukcja with. with document { write Nie potrzeba określać obiektu ; bgcolor = green; }

13 Model obiektu przeglądarki sieciowej. Hierarchia obiektów. window navigator document history location anchor link image form

14 WINDOW Określa bieżące okno przeglądarki Właściwości (dane). closed -określa, czy okno zostało zamknięte. defaultstatus - wadliwa informacja (linia statusu przeglądarki). length - liczba ramek w bieżącym oknie. name - nazwa okna. opener - nazwa okna rodzica. parent - okno z układem ramowym self lub top - odnosi się do bieżącego okna. status - wiersz stanu przeglądarki.

15 Metody (funkcje). alert(string) -okienko dialogowe <OK>. blur() - strata focus, dezaktywacja okna. cleartimeout(timerid) - kasuje funkcję zegara. close() - zamyka wyszczególnione okno. confirm(string) - okno dialogowe <OK>,<CANCEL>. eval(string) - traktuje string jako kod JavaScript. focus() - uaktywnia okno. open() - otwiera nowe okno. prompt(string,[inputdefault]) - okienko podpowiadające. scroll(x,y) - przesuwa okno do podanych współrzędnych. settimeout(expression,msec) - podpięcie funkcji pod zegar.

16 Zdarzenia onblur -uruchamianie gdy nastąpi dezaktywacja okna. onerror - na błąd w oknie. onfocus - na aktywację okna. onload - na zakończenie ładowania strony. onunload - na wyjście użytkownika z obrębu okna.

17 LOCATION Informacje o aktualnie wyświetlonym URL. Właściwości (dane). href -zawiera cały URL. protocol - razem z dwukropkiem ( host - nazwa i numer portu hostname - tylko nazwa port - nr. Portu 80. path - scieżka do dokumentu. hash - zawiera wszelkie argumenty CGI po znaku # search - zawiera wszelkie argumenty CGI po znaku? Metody (funkcje). assign(string) -ustawia location.href.

18 HISTORY Informacje o historii odwiedzanych stron. Właściwości (dane). current -zawiera URL bieżącego wpisu historii. length - zawiera liczbę wejść na listę historii. previous - poprzedni wpis w historii. next - następny wpis w historii. Metody (funkcje). Back() -cofa się o jeden wpis na liście historii. Forward() - przeskakuje o jeden wpis. Go(num) - przeskakuje o num wpisów. go(string) - skacze do wpisu, który zawiera słowo w zmiennej string

19 DOCUMENT Obiekt definiuje dokument. Właściwości (dane). alinkcolor -kolor łącza aktywnego dokumentu. bgcolor - kolor tła dokumentu. cookie - cookie dokumentu. domain - nazwa domeny serwera. fgcolor - kolor pierwszego planu. lastmodified- data ostatniej modyfikacji dokumentu. linkcolor - kolor łączy dokumentu. referrer - URL dokumentu, z którego przywołano dokument. title- tytuł. URL- pełny URL dokumentu. vlinkcolor- kolor odwiedzonych łączy.

20 Metody (funkcje). close() -zamyka dany dokument. eval(string) - oblicza wyrażenie string jako kod JavaScript i zwraca wynik. open() - otwiera strumień dla nowego dokumentu. write(expression,[expression...]) - wypisuje wyrażenie HTML writeln (expression,[expression...]) - dodaje nowe połączenie. Przykład

21 Tablice obiektowe JavaScript Odwoływanie się do większej liczby obiektów w danym oknie lub dokumencie. Przywoływanie obiektów JavaScript 1. Odwoływanie się do hierarchii obiektów. document.flame.src Przykład 2. Tablica obiektów z indeksem numerycznym. document.images[0].src Przykład 3. Tablica skojarzeniowa obiektów. document.images[ FLAME ].src Przykład

22 Tablice objektów JavaScript anchors -dla znacznika <A> atrybut NAME. applets - <APPLET> arguments - jeden dla każdego argumentu funkcji JavaScript. elements - jeden dla każdego elementu w formie HTML embeds - <EMBED> forms - jeden dla każdej formy HTML frames - Jeden dla każdego znacznika <FRAME> history - jeden dla każdego wpisu na liste historii. images - jeden dla każdego znacznika <IMG> links - jeden dla każdego znacznika zawierającego href mimetypes - jeden dla każdego typu MIME,plug-ins, ActiveX options - <OPTIONS> plugins - jeden dla każdego plug-in na przeglądarce klienta

23 Obiekty LINK, AREA, ANCHOR Obiekt link korzysta z atrybutu href, a anchor name znacznika <A> Obiekt area powstaje dla każdego znacznika <AREA> Właściwości mają te same co obiekt location. Zdarzenia OnClick -uruchamianie po kliknięciu. OnMouseOver - uruchamianie przy najeżdżaniu na obiekt kursorem. OnMouseOut - uruchamianie przy zjeżdżaniu z obiektu kursorem.

24 Obiekt IMAGE Tworzone za pomocą znacznika <IMG> Właściwości (dane). border -wartość atrybutu BORDER. complete - Wskazuje, czy obraz został całkowicie załadowany. height - wysokość. hspace - atrybut HSPACE. lowsrc - atrybut LOWSRC. name- atrybut NAME. src - źródło danych obrazu. vspace - atrybut VSPACE. width- szerokość.

25 Zdarzenia OnAbort -gdy użytkownik przerywa ładowanie obrazu. OnError - gdy wystąpił błąd w trakcie ładowania obrazu. OnLoad - uruchamianie po całkowitym załadowaniu obrazu. Przykład (zmiana obrazków)

26 Navigator Informacje na temat przeglądarki Właściwości (dane). appcodename -nazwa kodowa przeglądarki. appname - nazwa przeglądarki. appversion - wersja przeglądarki. language - w jakim języku. mimetypes - tablica wszystkich typów MIME obsługiwanych. platform- typ systemu dla którego została skompilowana. plugins - info na temat zainstalowanych dodatków. useragent - http protocol user-agent: Mozilla/2.0 (Win32; I)

27 Metody javaenabled() - test czy obsługa języka java jest załączona plugins.refresh() - odświerza liste pluginów. preference() - ustawia przeglądarke. savepreferences() - nagrywa preferencje prefs.js. taintenabled()- pytania przed wysłaniem danych.

28 Obiekty JavaScript Obiekt DATE Newdate=new Date (rok,miesiąc, dzień, godzina, minuta, sekunda); Metody getyear() - Zwraca rok.. getmonth() - Zwraca miesiąc. getdate() - Zwraca dzień miesiąca. getday() - Zwraca dzień tygodnia. gethours()- Zwraca godzinę. getminutes()- Zwraca minuty. getseconds() - Zwraca sekundy.

29 gettime() - liczba msec od :00:00 gettimezoneoffset() - Różnica czasu lokalnego do czasu GMT. setyear(arg) - Ustawia rok. setmonth(arg) - Ustawia miesiąc. setdate(arg)- Ustawia dzień miesiąca. sethours(arg)- Ustawia godziny. setminutes(arg) - Ustawia minuty. setminutes(arg) - Ustawia sekundy. settime(arg) - liczba msec od :00:00 togmtstring(arg) - Reprezentacja łańcucha daty wg. GMT. tolocalstring(arg) - Reprezentacja łańcucha daty wg. czasu lokalnego.

30 Obiekt MATH Udostępnia funkcje matematyczne Właściwości (dane). E - stała e=2.73. LN2 - logarytm naturalny z 2. LN10 - z 10. LOG2E - podaje podstawę z 2 logarytmu z e. LOG10E - podaje podstawę z 10 logarytmu z e. PI - liczba pi=3.14 SQRT1_2 - pierwiastek kwadratowy z 1/2. SQRT2- pierwiastek kwadratowy z 2.

31 Metody abs(x) - bezwzględna acos(x) - arcus cosinus. asin(x) - arcus sinus atan(x) - arcus tangens x atan2(x,y)- arcus tangens x/y ceil(x)- zaokrąglenie w góre. cos(x) - cosinus x. exp(x) - exp(x) floor(x) - zaokrąglenie w dół. log(x) - logarytm z x. max(x,y) - maximum z x i y min(x,y)- minimum z x i y pow(x,y)- x do potęgi y random() - podaje liczbę losową round(x) - do liczby całkowitej sin(x) - sinus x sqrt(x) - pierwiastek kwadratowy. tan(x) - tangens.

32 event (JavaScript 1.2) Obiekt opisujący zdarzenia. Właściwości (dane). data -zwraca tablicę URLi. height - reprezentuje wysokość okna. layerx - pozycja X kursora w obszarze layer. layery - pozycja Y kursora w obszarze layer. modifiers - ALT_MASK, CONTROL_MASK, SHIFT_MASK i META_MASK. pagex- pozycja X w odniesieniu do strony pagey - pozycja Y w odniesieniu do strony screenx - pozycja X w odniesieniu do ekranu screeny - pozycja Y w odniesieniu do ekranu target - nazwa obiektu do którego odwołuje się zdarzenie. type - typ zdarzenia. which - numer naciśniętego guzika myszy.

33 width - reprezentuje szerokość okna. x - synonim dla layerx. y - synonim dla layery. screen Obiekt opisujący ekran. Właściwości (dane). availheight -wysokość dostępna dla przeglądarki. availleft - dostępność z prawej strony. availtop - dostępność z góry. availwidth - szerokość dostępna dla przeglądarki.. colordepth - głębokość bitowa kolorów.

34 height - wysokość ekranu. pixeldepth - bity na pixel. width - szerokość ekranu. string Obiekt opisujący działania na łańcuchach. s1 = JavaScript" // tworzy zmienną typu tekstowego s2 = new String( JavaScript") // tworzy obiekt string s1 = "2 + 2" // s2 = new String("2 + 2") eval(s1) // zwraca 4 eval(s2) // zwraca "2 + 2"

35 Właściwości (dane). constructor -zmiana konstruktora obiektu. length - zwraca długość łańcucha. prototype - dodawanie metod do objektów. var s1 = new String("a") var s2 = new String("b") var s3 = new String("c") function str_rep(n) { var s = "", t = this.tostring() while (--n >= 0) s += t return s } String.prototype.rep = str_rep s1a=s1.rep(3) // returns "aaa" s2a=s2.rep(5) // returns "bbbbb" s3a=s3.rep(2) // returns "cc"

36 Metody anchor() - tworzy znacznik HTML anchor <a name= > big() - jak znacznik <BIG>. blink() - jak znacznik <BLINK>. bold() - jak znacznik <B>. charat()- zwraca znak dla określonego indeksu. charcodeat() - zwraca kod numeryczny dla określonego indeksu. concat() - łączy obiekty string. fixed() - czcionka monotypiczna <TT>. fontcolor() - kolor czcionki. fontsize()- rozmiar czcionki. fromcharcode() - łańcuch z kodów numerycznych indexof() - zwraca index dla wartości znakowej. italics() - <I>. link() - tworzy link match() - porównanie ciągów. replace() - odszukanie i zamiana.

37 search() - odszukiwanie. slice() - wyciąga kawałek tekstu z ciągu. small() - jak <SMALL>. split() - dzieli ciąg znakowy. strike()- jak <STRIKE>. sub() - jak <SUB> substr() - zwraca ciąg z podanego indeksu z ilością znaków. substring() - zwraca ciąg pomiędzy dwoma indeksami. sup() - jak <SUP> tolowercase()- konwersja do małych znaków. tosource() - tworzy źródło. tostring() - zwraca ciąg reprezentujący dany objekt. touppercase() - konwersja do dużych znaków. valueof() - zwraca wartość obiektu

38 Form Właściwości (dane). Formularze a JavaScript Obiekt opisujący znacznik HTML <FORM>. name - wartość atrybutu NAME obiektu form. method - wartość atrybutu METHOD. action - wartość atrybutu ACTION. elements - Tablica elementów obiektu form. length - liczba elementów obiektu form. encoding - wartość atrybutu ENCODING target - okno docelowe po wysłaniu odpowiedzi.

39 Metody reset() - przywraca wartości początkowe formy. submit() - przekazuje formę. handleevent() - przekazuje uchwyt dla zdarzenia (event). Zdarzenia onreset - Po kliknięciu reset lub po wywołaniu metody reset. onsubmit - Po kliknięciu submit lub po wywołaniu metody submit.

40 Użycie obiektów do manipulowania elementami form Dotyczy wszelkich obiektów związanych ze znacznikiem <INPUT> Właściwości (dane). name - wartość atrybutu NAME elementu. value - zawartość pola. type - typ kontrolki. form - określa formularz zawierający kontrolkę. defaultvalue - początkowa wartość pola. Metody Focus() - uaktywnienie danego obiektu. Blur() - dezaktywowanie danego obiektu. Select() - wybiera dany obiekt. Submit() - przekazuje formę zgodnie z atrybutami ACTION i METHOD.

41 Zdarzenia onfocus - klawisz tab lub kliknięcie myszą. onblur - uruchamianie gdy użytkownik deaktywuje okno. onselect - uruchamianie, gdy zmiana tekstu w oknie. onsubmit - uruchamianie po przekazaniu formy. onchange - uruchamianie po zmianie tekstu. Właściwości oraz zdarzenia obiektów radio oraz checkbox Właściwości (dane). name - wartość atrybutu NAME elementu. value - zawartość pola. type - typ kontrolki. form - określa formularz zawierający kontrolkę. checked - stan pola wyboru. defaultchecked - początkowy stan pola wyboru.

42 Metody focus() - uaktywnienie danego obiektu. blur() - dezaktywowanie danego obiektu. click() - klika przycisk i uruchamia dla niego czynność. submit() - przekazuje formę zgodnie z atrybutami ACTION i METHOD. Zdarzenia onfocus - klawisz tab lub kliknięcie myszą. onblur - uruchamianie gdy użytkownik deaktywuje okno. onclick - uruchamianie, po naciśnięciu przycisku. onsubmit - uruchamianie po przekazaniu formy. onchange - uruchamianie po zmianie tekstu.

43 Właściwości oraz zdarzenia obiektów select Właściwości (dane). name - wartość atrybutu NAME elementu. length - wartość atrybutu NAME elementu. type - typ kontrolki. form - określa formularz zawierający kontrolkę. selectedindex - wybrany indeks z pola wyboru. options - odpowiada znacznikowi OPTION.

44 Metody focus() - uaktywnienie danego obiektu. blur() - dezaktywowanie danego obiektu. handleevent() - wywołuje uchwyt tego specyficznego zdarzenia. Zdarzenia onfocus - klawisz tab lub kliknięcie myszą. onblur - uruchamianie gdy użytkownik deaktywuje okno. onclick - uruchamianie, po naciśnięciu przycisku. onchange - uruchamianie po zmianie tekstu.

45 Właściwości oraz zdarzenia obiektów options Właściwości (dane). length - ilość elementów options. text- tekst w znaczniku OPTION. value - wartość zwracana do serwera po wybraniu opcji. index - indeks określający numer wyboru. selected - definiuje stan opcji. defaultselected - określa początkowy stan opcji.

46 Przykłady JavaScript Zmiana wielkości liter Objekty select i option Przechwytywanie zdarzeń