Projektowanie i implementacja aplikacji internetowych Dr inż. Stanisław Polak 1 Akademia Górniczo - Hutnicza w Krakowie, Katedra Informatyki 2 Wyższa Szkoła Zarządzania i Bankowości w Krakowie http://artemis.wszib.edu.pl/~polak/ Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 1 Egzamin W systemie SAKE Test wielokrotnego wyboru 10-15 pytań 4 odpowiedzi Typ zliczania punktów zwykły Wskazanie, co najmniej, jednej prawidłowej odpowiedzi zdający otrzymuje punkty (częściowe) za prawidłowe odpowiedzi Wskazanie, co najmniej, jednej prawidłowej odpowiedzi i chociaż jednej błędnej zdający otrzymuje 0 punktów za całe pytanie Przykład 2 2 wynosi: a) 4 b) 5 Dr inż. Stanisław Polak 2 c) Tyle co 2 + 2 Przyjmijmy, że każda prawidłowa odpowiedź to 5 punktów Przykłady udzielenia odpowiedzi Zaznaczenie odpowiedzi a oraz c 10 punktów Zaznaczenie odpowiedzi a 5 punktów Zaznaczenie odpowiedzi a oraz b 0 punktów Plan wykładu Podstawy JavaScript DOM, AJAX Cz eść I Dr inż. Stanisław Polak 3 Dr inż. Stanisław Polak 4
Plan prezentacji Ogólna charakterystyka Wstęp Wstęp Typy danych Operatory Instrukcje Funkcje JavaScript (JS) skryptowy język programowania, stworzony przez firmę Netscape, początkowo stosowany na stronach internetowych po stronie klienta. ECMAScript rdzeń dla: JavaScript JScript ActionScript TypeScript Zastosowania Strony WWW (po stronie klienta) Samodzielne aplikacje Aplikacje internetowe (po stronie serwera) Dr inż. Stanisław Polak 5 Dr inż. Stanisław Polak 6 Wstęp Wstęp JavaScript a Java Ważniejsze różnice Pierwszy skrypt JS Java Kompilowany przed wykonaniem Oparty na klasach Kod niezależny od HTML Deklaracja typu zmiennej obligatoryjna dla każdej zmiennej przed jej użyciem Odwołania do obiektów i funkcji sprawdzane na etapie kompilacji JavaScript Interpretowany na komputerze klienta Oparty na prototypach Kod zagnieżdżony w HTML Deklaracja typu zmiennej nie występuje Odwołania do obiektów i funkcji sprawdzane w czasie wykonania skryptu 1 <! DOCTYPE html> 2 <html> 3 <head> 4 <title>pierwszy skrypt JS</ title> 5 </ head> 6 <body> 7 <h1>pierwszy skrypt JS</h1> 8 <script> 9 document. write ( "Witaj w dokumencie " ) ; 10 console. log ( "Witaj w konsoli " ) ; 11 </ script> 12 </ body> 13 </ html> Dokument HTML z treścią skryptu JS Rysunek: Wynik wykonania skryptu JS po zakończeniu renderowania strony WWW Rysunek: Korzystanie z konsoli JS Dr inż. Stanisław Polak 7 Dr inż. Stanisław Polak 8
Wstęp Wstęp Osadzanie kodu JS 1 <! <script type=" text / javascript ; version =x.x"> > 2 <script type=" text / javascript "> 3 <! 4 Tre ść skryptu JavaScript 5 > 6 </ script> 7 <noscript>twoja przeglądarka nie obs ł uguje JavaScript!</ noscript> Skrypt wewnętrzny osadzony w HTML 1 <script type=" text / javascript " src=" URL "></ script> 2 <noscript>twoja przeglądarka nie posiada interpretera JavaScript lub masz wy ł ączoną jego obs ł ugę!</ noscript> Odwołanie do skryptu zewnętrznego Dr inż. Stanisław Polak 9 Kolejność wykonywania skryptów 1 <! DOCTYPE html> 2 <html> 3 <head> 4 <meta http e q u i v=" Content - Type " content=" text / html ; charset =UTF -8"> 5 <script> 6 function info ( arg ){ 7 var img = document. getelementsbytagname ( " img " ) ; 8 var nazwy = ; 9 var img_msg = \ nelement " img " jest niedost ę pny\n 10 if ( img. length!= 0) 11 img_msg = \ nelement " img " jest dost ę pny\n ; 12 if ( document. body ){ 13 x=document. body. childnodes 14 for (i=0;i<x. length ; i++){ 15 i f ( x [ i ]. nodetype == 1) 16 nazwy+=x [ i ]. nodename+", " ; 17 } 18 c o n s o l e. l o g ( a r g+img msg+" document.body zawiera elementy : "+ nazwy ) ; 19 } 20 e l s e 21 c o n s o l e. l o g ( arg+img msg+" document.body = NULL " ) ; 22 } 23 </script> 24 <script type=" text / javascript ">info ( " Skrypt 1" ) ;</ script> 25 <script type=" text / javascript " src="a.js"></ script> 26 </ head> 27 <body onload=" info ( Skrypt 4 );"> 28 <script type=" text / javascript ">info ( " Skrypt 2" ) ;</ script> 29 <script type=" text / javascript " src="b.js"></ script> 30 <img src=" obrazek. gif "> 31 <script type=" text / javascript ">info ( " Skrypt 3" ) ;</ script> 32 <script type=" text / javascript " src="c.js"></ script> 33 </ body> 34 </ html> 1 info ( <nazwa p l i k u> ) ; a.js, b.js, c.js Dr inż. Stanisław Polak 10 Wypisze: 1. Skrypt 1 Element "img"jest niedostępny document.body =NULL 2. a.js Element "img"jest niedostępny document.body =NULL 3. Skrypt 2 Element "img"jest niedostępny document.body zawiera elementy: SCRIPT, 4. b.js Element "img"jest niedostępny. document.body zawiera elementy: SCRIPT, SCRIPT, 5. <Wyświetlenie obrazka obrazek.jpg > 6. Skrypt 3 Element "img"jest dostępny. document.body zawiera elementy: SCRIPT, SCRIPT, IMG, SCRIPT, 7. c.js Element "img"jest dostępny. document.body zawiera elementy: SCRIPT, SCRIPT, IMG, SCRIPT, SCRIPT, 8. Skrypt 4 Element "img"jest dostępny document.body zawiera elementy: SCRIPT, SCRIPT, IMG, SCRIPT, SCRIPT, Materiały dla studentów Informatyki WSZiB w Krakowie Wstęp Typy danych Asynchroniczne lub odroczone wykonywanie skryptów zewnętrznych Definiowanie zmiennych Źródło: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ 1 var x =42; 2 // a l b o 3 y = 4 2 ; // N i e z a l e c a n e 4 var _y = 4 2 ; 5 var $if =42; 6 var ró ż a = 4 2 ; 7 var 1a = 4 2 ; // i d e n t i f i e r s t a r t s i m m e d i a t e l y a f t e r numeric l i t e r a l 8 console. log ( y ) ; // Wypisze : 42 9 console. log ( Y ) ; //Y i s not d e f i n e d 10 if =42; // m i s s i n g v a r i a b l e name 11 var y=42 12 console. log ( typeof ( y ) ) ; // Wypisze : number 13 y="42" ; 14 console. log ( typeof ( y ) ) ; // Wypisze : s t r i n g Dr inż. Stanisław Polak 11 Dr inż. Stanisław Polak 12
Typy danych Typy danych Definiowanie stałych Typy danych 1 const PI = 3. 1 4 1 5 9 2 6 ; 2 console. log ( PI ) ; // Wypisze : 3.1415926 3 console. log ( typeof ( PI ) ) ; // Wypisze : number 4 const PI = 3. 1 4 ; // r e d e c l a r a t i o n o f c o n s t PI 5 PI=" 3.24 " // Próba nadpisania warto ś c i sta ł e j 6 console. log ( PI ) ; // Wypisze : 3.1415926 c z y l i pr ó ba n a d p i s a n i a n i e uda ł a s i ę 7 console. log ( typeof ( PI ) ) ; // Wypisze : number 8 9 var PI = 3. 1 4 // r e d e c l a r a t i o n o f c o n s t PI 10 var zmienna =1; 11 const zmienna =1; // r e d e c l a r a t i o n o f v a r zmienna Specjalne null undefined Proste boolean number string symbol Złożony Obiektowy Dr inż. Stanisław Polak 13 Dr inż. Stanisław Polak 14 Typy specjalne Typy danych Typy danych Typy proste Typy proste i ich obiektowe odpowiedniki Typ null 1 var pusta=null ; 2 console. log ( typeof ( pusta ) ) ; // Wypisze : o b j e c t 3 4 var pusta1 = NULL ; //NULL i s not d e f i n e d 5 6 if ( pusta ) 7 console. log ( " true " ) ; 8 else 9 console. log ( " false " ) ; 10 // Wypisze : f a l s e 11 12 console. log ( pusta 1) ; // Wypisze : 1 Typ undefined 1 console. log ( typeof ( abc ) ) ; // Wypisze : u n d e f i n e d 2 3 var def ; 4 console. log ( typeof ( def ) ) ; // Wypisze : u n d e f i n e d 5 6 function f ( arg ){ 7 console. log ( " arg ="+arg ) 8 } 9 10 var wynik = f ( ) // Wypisze : arg=u n d e f i n e d 11 console. log ( wynik ) // Wypisze : u n d e f i n e d 12 13 14 if ( def === undefined ) 15 console. log ( "Niezdefiniowana " ) ; 16 else 17 console. log ( "Zdefiniowana " ) ; 18 // Wypisze : N i e z d e f i n i o w a n a 19 20 if ( def ) 21 console. log ( " true " ) ; 22 else 23 console. log ( " false " ) ; 24 // Wypisze : f a l s e 25 26 console. log ( def 1) ; // Wypisze : NaN Typ prosty boolean number string Obiektowy odpowiednik (Prototyp) Boolean Number String 1 console. log ( " 2+2 " ) ; // 2+2 j e s t typu ( p r o s t e g o ) s t r i n g => w y p i s z e : 2+2 2 console. log ( "2+2 ". length ) ; // Niejawna k o n w e r s j a do typu ( p r o t o t y p u ) S t r i n g => wypisze : 3 3 / 4 Powyż s z a l i n i a j e s t r ównoważ na : 5 v a r o b i e k t S t r i n g = new S t r i n g ( 2+2 ) 6 c o n s o l e. l o g ( o b i e k t S t r i n g. l e n g t h ) 7 / 8 var lancuch = "2+2 " ; 9 console. log ( lancuch. charat (1) ) ; // Wypisze : + 10 console. log ( lancuch [ 1 ] ) ; // Wypisze : + 11 console. log ( lancuch. charcodeat (1) ) ; // Wypisze : 43 12 13 var liczba = 1.987654 14 console. log ( liczba. toprecision (3) ) // Niejawna k o n w e r s j a do typu ( p r o t o t y p u ) Number => w y p i s z e : 1. 9 9 Dr inż. Stanisław Polak 15 Dr inż. Stanisław Polak 16
Typy danych Typy proste Typ boolean Typy danych Typy proste Konwersja do typu boolean 1 var martwy=false ; 2 var zonaty=true ; 3 console. log ( typeof ( martwy ) ) ; // Wypisze : b o o l e a n 4 zonaty=false ; //FALSE i s not d e f i n e d 1 console. log ( Boolean ( " abc " ) ) ; // Wypisze : t r u e 2 console. log ( Boolean ( "" ) ) ; // Wypisze : f a l s e 3 console. log ( Boolean (10) ) ; // Wypisze : t r u e 4 console. log ( Boolean ( 0 ) ) ; // Wypisze : f a l s e 5 console. log ( Boolean ( null ) ) ; // Wypisze : f a l s e 6 console. log ( Boolean ( undefined ) ) ; // Wypisze : f a l s e Dr inż. Stanisław Polak 17 Dr inż. Stanisław Polak 18 Typy danych Typy proste Typ number 1 var cena = 1 0. 5 ; 2 var ilosc1 = 2 ; 3 var ilosc2 = 2. 0 ; 4 var binarna = 0 b101 ; //0B101 ; 5 var oktalna = 0 o77 ; //0O77 6 var szesnastkowa = 0 xff ; //0XFF 7 8 console. log ( typeof ( cena ) ) ; // Wypisze : number 9 console. log ( typeof ( ilosc1 ) ) ; // Wypisze : number 10 console. log ( typeof ( ilosc2 ) ) ; // Wypisze : number 11 console. log ( ilosc2 ) ; // Wypisze : 2 12 console. log ( typeof ( binarna ) ) ; // Wypisze : number 13 console. log ( binarna ) ; // Wypisze : 5 14 console. log ( typeof ( oktalna ) ) ; // Wypisze : number 15 console. log ( oktalna ) ; // Wypisze : 63 16 console. log ( typeof ( szesnastkowa ) ) ; // Wypisze : number 17 console. log ( szesnastkowa ) ; // Wypisze : 255 1 var ilosc = Number. MAX_VALUE 2 console. log ( ilosc ) // Wypisze : 1.7976931348623157 e +308 3 console. log ( isfinite ( ilosc ) ) // Wypisze : t r u e 4 ilosc = 2 5 console. log ( isfinite ( ilosc ) ) // Wypisze : f a l s e 6 console. log ( ilosc ) // Wypisze : I n f i n i t y 7 console. log ( Number. NEGATIVE_INFINITY ) ; // Wypisze : I n f i n i t y 8 9 ilosc = Number. MAX_VALUE 10 console. log ( ilosc ) // Wypisze : 1.7976931348623157 e+308 11 console. log ( isfinite ( ilosc ) ) // Wypisze : t r u e 12 ilosc = 2 13 console. log ( isfinite ( ilosc ) ) // Wypisze : f a l s e Dr 14inż. console Stanisław. log Polak ( ilosc ) // Wypisze : I n f i n i t y 19 15 console. log ( Number. POSITIVE_INFINITY ) ; // Wypisze : I n f i n i t y 16 31 ilosc = Number. MAX_SAFE_INTEGER ; //Math. pow ( 2, 53) 1; 32 console. log ( ilosc ) ; // Wypisze : 9007199254740991 33 console. log ( Number. issafeinteger ( ilosc ) ) ; // Wypisze : t r u e 34 ilosc1 = Number. MAX_SAFE_INTEGER + 1 35 console. log ( ilosc1 ) ; // Wypisze : 9007199254740992 36 console. log ( Number. issafeinteger ( ilosc1 ) ) ; // Wypisze : f a l s e 37 ilosc2 = Number. MAX_SAFE_INTEGER + 2 38 console. log ( ilosc2 ) ; // Wypisze : 9007199254740992 Typy danych Typy proste Konwersja do typu number 1 console. log ( parseint ( " 3.14 " ) ) ; // Wypisze : 3 2 console. log ( parseint ( " 3.94 " ) ) ; // Wypisze : 3 3 console. log ( parseint ( " 3.94.1 " ) ) ; // Wypisze : 3 4 console. log ( parseint ( " 3.94a" ) ) ; // Wypisze : 3 5 console. log ( parseint ( "a3.94 " ) ) ; // Wypisze : NaN 6 console. log ( parsefloat ( " 3.14 " ) ) ; // Wypisze : 3.14 7 console. log ( parsefloat ( " 3.14.1 " ) ) ; // Wypisze : 3.14 8 console. log ( parsefloat ( 0x10 ) ) ; // Wypisze : 0 9 console. log ( parsefloat ( ) ) ; // Wypisze : NaN 10 console. log ( parsefloat ( \r\n\t ) ) ; // Wypisze : NaN 11 12 13 console. log ( parseint ( "101 ",2) ) ; // Wypisze : 5 14 console. log ( parseint ( "FF" ) ) ; // Wypisze : NaN 15 console. log ( parseint ( "FF",16) ) ; // Wypisze : 255 16 17 console. log ( parseint ( "FF - Firefox " ) ) ; // Wypisze : NaN 18 console. log ( parseint ( "FF - Firefox ",16) ) ; // Wypisze : 255 19 console. log ( parseint ( " false " ) ) ; // Wypisze : NaN 20 console. log ( parseint ( "false ",16) ) ; // Wypisze : 250 fa zamieniono na liczb ę! 21 22 console. log ( Number ( null ) ) ; // Wypisze : 0 23 console. log ( Number ( undefined ) ) ; // Wypisze : NaN 24 console. log ( Number ( false ) ) ; // Wypisze : 0 25 console. log ( Number ( true ) ) ; // Wypisze : 1 26 console. log ( Number ( " 3.14 " ) ) ; // Wypisze : 3.14 27 console. log ( Number ( " 3.14.1 " ) ) ; // Wypisze : NaN 28 console. log ( Number ( "3" ) ) ; // Wypisze : 3 29 console. log ( Number ( "3a" ) ) ; // Wypisze : NaN 30 console. log ( Number ( 0x10 ) ) ; // Wypisze : 16 31 console. log ( Number ( ) ) ; // Wypisze : 0 32 console. log ( Number ( \r\n\t ) ; // Wypisze : 0 Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 20
Typy danych Typy proste Typ string Typy danych Typy proste Typ string Szablony napisów 1 var nazwisko = "Polak " ; 2 var imie = Stanis ław ; 3 4 console. log ( typeof ( nazwisko ) ) ; // Wypisze : s t r i n g 5 console. log ( typeof ( imie ) ) ; // Wypisze : s t r i n g 6 7 console. log ( "Imi ę=${imie } Nazwisko =${nazwisko }" ) ; // Wypisze : Imi ę=${imie} Nazwisko=${nazwisko} 8 console. log ( Imi ę=${ imie } Nazwisko =${ nazwisko } ) ; // Wypisze : Imi ę=${imie} Nazwisko=${nazwisko} 9 10 var a = 11 "1" ; 11 console. log ( a ) ; // Wypisze : 10 12 var b = 11 + "1" ; 13 console. log ( b ) ; // Wypisze : 111 14 15 console. log ( typeof (a) ) ; // Wypisze : number 16 console. log ( typeof (b) ) ; // Wypisze : s t r i n g 17 18 nazwisko [0]= W ; 19 console. log ( nazwisko ) ; // Wypisze Polak, a nie Wolak 20 21 nazwisko = W + nazwisko. substr ( 1 ) ; 22 console. log ( nazwisko ) ; // Teraz w y p i s z e Wolak Nieoznakowane 1 var a = 2 ; 2 var napis = Zmienna a ma warto ś ć ${a}, 2+2= ${2+2}\n 3 console. log ( napis ) ; 4 / / 5 var napis = Linia 1 6 Linia 2 ; 7 console. log ( napis ) ; Na wyjściu Zmienna a ma wartość 2, 2+2=4 Linia 1 Linia 2 Oznakowane (otagowane) 1 function znacznik(napisy,wart1,wart2){ 2 wynik = "Napis 1:\t\t "+napisy [0]+ " \n" ; 3 wynik += " Surowy napis 1:\t "+napisy. raw[0]+ " \n" ; 4 wynik += "Warto ść 1:\t\t"+wart1+"\n" ; 5 wynik += "Napis 2:\t\t "+napisy [1]+ " \n" ; 6 wynik += " Surowy napis 2:\t "+napisy. raw[1]+ " \n" ; 7 wynik += "Warto ść 2:\t\t"+wart2+"\n" ; 8 return wynik ; 9 } 10 / / 11 var a = 2 ; 12 var b = 3 ; 13 napis = znacznik a+b=\t${a+b}\n, a*b=${a*b} ; 14 console. log ( napis ) ; Na wyjściu Napis 1: a+b= Surowy napis 1: a+b=\t Wartość 1: 5 Napis 2:, a*b= Surowy napis 2: \n, a*b= Wartość 2: 6 Dr inż. Stanisław Polak 21 Dr inż. Stanisław Polak 22 Typy danych Typy proste Typ string Sekwencje specjalne \b \f \n \r \t \v \ \" \\ \xxx \uxxxx 1 console. log ( "a \"\ x63 \ \ u0105 " ) // Wypisze : a c ą Przykład użycia Typy danych Typy proste Konwersja do typu string 1 var zywy = true ; 2 console. log ( typeof ( zywy ) ) ; // Wypisze : b o o l e a n 3 var lancuch=zywy. tostring ( ) ; 4 console. log ( typeof ( lancuch ) ) ; // Wypisze : s t r i n g 5 console. log ( lancuch ) ; // Wypisze : t r u e 6 var liczba = 0 xff ; 7 console. log (0 xff. tostring ( ) ) ; // Wypisze ł ańcuch 255 8 liczba = 1 1 ; 9 console. log ( liczba. tostring ( ) ) ; // Wypisze ł ańcuch 11 10 liczba = 1 1. 9 ; 11 console. log ( liczba. tostring ( ) ) ; // Wypisze ł ańcuch 11.9 12 13 var liczba =255; 14 console. log ( liczba. tostring (2) ) ; // Wypisze : 11111111 15 console. log ( liczba. tostring (4) ) ; // Wypisze : 3333 16 console. log ( liczba. tostring (8) ) ; // Wypisze : 377 17 console. log ( liczba. tostring ( 1 6 ) ) ; // Wypisze : f f 18 19 console. log ( String ( null ) ) ; // Wypisze ł ań cuch n u l l 20 console. log ( String ( undefined ) ) ; // Wypisze ł ań cuch u n d e f i n e d 21 console. log ( String ( false ) ) ; // Wypisze ł ań cuch f a l s e 22 console. log ( String ( true ) ) ; // Wypisze ł ań cuch t r u e 23 console. log ( String (255) ) ; // Wypisze ł ańcuch 255 24 console. log ( String ( 3. 1 4 ) ) ; // Wypisze ł ańcuch 3.14 Dr inż. Stanisław Polak 23 Dr inż. Stanisław Polak 24
Typy danych Typy proste Typ symbol Typy danych Typ złożony Obiekty 1 symbol1 = Symbol ( ) ; 2 symbol2 = Symbol ( ) ; 3 console. log ( typeof ( symbol1 ) ) ; // symbol 4 console. log ( symbol1 == symbol2 ) // f a l s e 5 6 symbol3 = Symbol ( Opis symbolu ) ; 7 symbol4 = Symbol ( Opis symbolu ) ; 8 console. log ( symbol3 ) ; // Symbol ( Opis symbolu ) 9 console. log ( symbol4 ) ; // Symbol ( Opis symbolu ) 10 console. log ( symbol3 == symbol4 ) ; // f a l s e 11 12 symbol5 = Symbol. for ( " symbol3 " ) ; 13 symbol6 = Symbol. for ( " symbol3 " ) ; 14 console. log ( symbol5 ) ; // Symbol ( symbol3 ) 15 console. log ( symbol6 ) ; // Symbol ( symbol3 ) 16 console. log ( symbol5 == symbol6 ) ; // t r u e 17 18 var symbol7 = Symbol. for ( "uid " ) ; 19 console. log ( Symbol. keyfor ( symbol7 ) ) ; // u i d 20 var symbol8 = Symbol. for ( "uid " ) ; 21 console. log ( Symbol. keyfor ( symbol8 ) ) ; // u i d 22 var symbol9 = Symbol ( "uid " ) ; 23 console. log ( Symbol. keyfor ( symbol9 ) ) ; // u n d e f i n e d 1 // U t w o r z e n i e i n s t a n c j i typu ( wbudowanego ) Object 2 var obiekt1 = new Object ( ) ; 3 var obiekt2 = {a : 1, b : 1 0 } ; 4 console. log ( typeof ( obiekt1 ) ) ; // Wypisze : o b j e c t 5 console. log ( typeof ( obiekt2 ) ) ; // Wypisze : o b j e c t 6 7 // Dost ęp do wł asno ś c i obiektu 8 console. log ( obiekt1. constructor ) ; // Wypisze : f u n c t i o n Object ( ) { [ n a t i v e code ] } 9 console. log ( obiekt1 [ constructor ] ) ; // Wypisze to co powyż e j 10 console. log ( obiekt2 [ constructor ] ) ; // Wypisze to co powyż e j 11 console. log ( obiekt2. a ) ; // Wypisze : 1 12 console. log ( obiekt2 [ b ] ) ; // Wypisze : 10 13 14 //Uż y c i e symbolu jako wł asno ś c i obiektu 15 a = Symbol ( ) ; 16 var obiekt3 = {[ a ] : 1, b :10} 17 console. log ( obiekt3 [ a ] ) ; // 1 18 console. log ( obiekt3. a ) ; // undefined 19 console. log ( obiekt3 [ a ] ) ; // undefined 20 console. log ( obiekt3 [ b ] ) ; // 10 21 console. log ( obiekt3. b ) ; // 10 Dr inż. Stanisław Polak 25 Dr inż. Stanisław Polak 26 Typy danych Przykładowe obiekty wbudowane Hierarchia obiektów wbudowanych Typy danych Przykładowe obiekty wbudowane Obiekt Array Object Źródło: http://www.visualtech.ca/javascript/javascript_object_model.php 1 var tab1 = new Array (1,2,3) ; // r ównoważ ne : v a r tab1=array (1,2,3) 2 var tab2a = new Array (10) ; // równoważne : var tab2a = [ ] ; tab2a. length =10; 3 var tab2b = new Array ( "10" ) ; 4 var tab3 = [ 4, abc, 6 ] ; 5 6 console. log ( tab1. length ) ; // Wypisze : 3 7 console. log ( tab2a. length ) ; // Wypisze : 10 8 console. log ( tab2b. length ) ; // Wypisze : 1 9 console. log ( tab3. length ) ; // Wypisze : 3 10 console. log ( tab1 [ 0 ] ) ; // Wypisze : 1 11 console. log ( tab1. 0 ) ; // m i s s i n g ) a f t e r argument l i s t 12 console. log ( tab2a [ 0 ] ) ; // Wypisze : u n d e f i n e d 13 console. log ( tab2b [ 0 ] ) ; // Wypisze : 10 14 console. log ( tab3 [ 1 ] ) ; // Wypisze : abc 15 console. log ( tab3 [ 5 ] ) ; // Wypisze : u n d e f i n e d 16 17 var tab4 = new Array ( new Array ( 1, null, undefined ), new Array ( A, B, C ), new Array ( x, y, z ) ) ; 18 console. log ( tab4. length ) ; // Wypisze : 3 19 console. log ( tab4 [ 0 ] ) ; // Wypisze : 1,, 20 console. log ( tab4 [ 0 ] [ 1 ] ) ; // Wypisze : n u l l 21 var tab1 = new Array (1,2,3) ; 22 var tab2 = [ 4, 5, 6 ] ; 23 console. log ( tab1 ) ; // Wypisze : 1, 2 3 24 console. log ( tab1. reverse ( ) ) ; // Wypisze : 3, 2, 1 25 26 var tab3 = tab1. concat ( tab2 ) ; 27 console. log ( tab3 ) ; // Wypisze : 1, 2, 3, 4, 5, 6 28 console. log ( tab3. splice (1,2) ) ; // Wypisze : 2, 3 Dr inż. Stanisław Polak 27 Dr inż. Stanisław Polak 28
Typy danych Przykładowe obiekty wbudowane Obiekt Map 1 var mapa = new Map ( ) ; 2 pustyobiekt = {}; 3 mapa. set ( " napis ", " Wartość związana z napisem " ) ; 4 mapa. set (1,{ a : 1 0 } ) ; 5 mapa. set ( pustyobiekt, 1 ) ; 6 7 console. log ( mapa ) ; //Map { napis : Warto ś ć zwi ązana z napisem, 1 : Object, Object : 1 } 8 console. log ( mapa. get ( 1 ) ) ; // O b j e ct { a : 10 } 9 console. log ( mapa. get ( 2 ) ) ; // u n d e f i n e d 10 console. log ( mapa. get ( " napis " ) ) ; // Warto ś ć zwi ą zana z napisem 11 console. log ( mapa. get ({}) ) ; // u n d e f i n e d 12 console. log ( mapa. get ( pustyobiekt ) ) ; //1 13 console. log ( mapa. size ) ; //3 14 mapa. delete ( " napis " ) ; 15 console. log ( mapa. size ) ; //2 16 17 // I t e r o w a n i e hasza 18 mapa. foreach ( ( wartosc, klucz, mapa ) => {console. log ( " mapa ["+klucz+"]="+wartosc ) }) ; 19 / Wypisze : 20 mapa [ 1 ] = [ o b j e c t O b j ect ] 21 mapa [ [ o b j e c t O b j e ct ]]=1 22 / 23 // Konwersja t a b l i c y na hasza 24 var kwtab = [ [ " klucz1 ", " Napis " ], [ " klucz2 ", 5 ] ] ; 25 mapa = new Map ( kwtab ) ; 26 console. log ( mapa ) ; //Map { k l u c z 1 : Napis, k l u c z 2 : 5 } Dr inż. Stanisław Polak 29 Typy danych Przykładowe obiekty wbudowane Obiekt WeakMap Różnice w stosunku do Map Przechowuje słabe odniesienia do klucza Kluczami mogą być tylko i wyłącznie obiekty Klucze nie są przeliczalne Nie można iterować tego obiektu patrz linia 11 1 //Ź r ód ł o : h t t p : / / i l i k e k i l l n e r d s. com/2015/02/ what are weakmaps in e s 6/ > 2 var mapa = new WeakMap ( ) ; 3 var element1 = window ; 4 var element2 = document. queryselector ( body ) ; 5 6 // Przechowujemy dwa o b i e k t y w naszym Weakmap 7 mapa. set ( element1, window ) ; 8 mapa. set ( element2, myelement ) ; 9 10 console. log ( mapa. size ) ; // Wypisze : u n d e f i n e d 11 //mapa. foreach ( ( wartosc, klucz, mapa ) => { console. log ( mapa[ + klucz+ ]= +wartosc ) }) ; 12 13 // Je ś l i usuniemy jeden z element ów, w tym przypadku element2, z o s t a n i e on r ó wnie ż usuni ę ty z naszej Weakmap 14 element2. parentnode. removechild ( element2 ) ; 15 16 // Usuń l o k a l n e odwo ł a n i e 17 element2 = null ; 18 19 console. log ( mapa. get ( element2 ) ) ; // Wypisze : u n d e f i n e d Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 30 Typy danych Przykładowe obiekty wbudowane Obiekty Set oraz WeakSet Set Typy danych Przykładowe obiekty wbudowane Obiekt window Metody prompt() oraz alert() 1 var zbior = new Set ( ) ; 2 pustyobiekt = {}; 3 zbior. add ( " napis " ) ; 4 zbior. add ( " napis " ) ; 5 zbior. add({a :10}) ; 6 console. log ( zbior. size ) ; //2 7 zbior. foreach ( ( wartosc, klucz, zbior ) => {console. log ( " zbior ["+klucz+"]="+wartosc ) }) ; 8 / 9 Wypisze : 10 zbior [ napis ]=napis 11 z b i o r [ [ o b j e c t Object ] ]=[ o b j e c t Object ] 12 / 13 zbior. delete ( " napis " ) 14 console. log ( zbior. size ) ; //1 15 zbior. foreach ( ( wartosc, klucz, zbior ) => {console. log ( " zbior ["+klucz+"]="+wartosc ) }) ; 16 / 17 Wypisze : 18 z b i o r [ [ o b j e c t Object ] ]=[ o b j e c t Object ] 19 / 20 / / 21 zbior = new WeakSet ( ) ; 22 obj1 = {}; 23 obj2 = obj ; 24 zbior. add ( obj1 ) ; 25 zbior. add ( obj2 ) ; 26 console. log ( zbior. has ( obj1 ) ) ; 27 console. log ( zbior. has ( obj2 ) ) ; WeakSet 1 var zbior = new WeakSet ( ) ; 2 var element = document. queryselector ( body ) ; 3 zbior. add ( element ) ; 4 console. log ( zbior. has ( element ) ) ; // Wypisze : t r u e 5 6 // Je ś l i usuniemy element element, to zostanie on również usuni ę ty z naszej Weakset 7 element. parentnode. removechild ( element ) ; 8 9 // Usuń l o k a l n e odwo ł a n i e 10 element = null ; 11 12 console. log ( zbior. has ( element ) ) ; // Wypisze : f a l s e 3 <meta http equiv=" Content - Type " content=" text / html ; charset=utf -8"> 4 <title>przyk ł ad</title> 5 <script> 6 function wczytajiwyswietlimie ( ) { 7 var imie=window. prompt( Podaj swoje imię, ) ; 8 window. alert( " Witaj "+imie ) ; 9 } 10 </script> 11 </head> 12 <body> 13 <form> 14 <button type=" button " onclick=" wczytajiwyswietlimie ();">Wy ś wietl alert</ button><br> 15 </form> 16 </body> 17 </html> Dr inż. Stanisław Polak 31 Otwieranie okna wprowadzania / wyprowadzania danych Dr inż. Stanisław Polak 37
Typy danych Przykładowe obiekty wbudowane Obiekt window Metody settimeout() oraz cleartimeout() 3 <meta http equiv="content -Type " content="text /html ; charset=utf -8"> 4 <title>przyk ł ad</title> 5 <script> 6 function opoznionyalert ( time ){ 7 timeoutid = window. settimeout( wyswietl, 2000) ; 8 } 9 10 function wyswietl ( ) { 11 window. alert ( " Witaj świecie!" ) ; 12 // timeoutid = window. settimeout( wyswietl, 2000) ; 13 } 14 15 function zatrzymajwykonanie ( ) { 16 window. cleartimeout( timeoutid ) ; 17 } 18 </script> 19 </head> 20 <body> 21 <form> 22 <button type=" button " onclick=" opoznionyalert ();">Wy ś wietl alert</button><br> 23 <button type=" button " onclick=" zatrzymajwykonanie ();">Anuluj</button> 24 </form> 25 </body> 26 </html> Po upływie 2 sekund wyświetla się okienko alertu Typy danych Przykładowe obiekty wbudowane Obiekt window Metody setinterval() oraz clearinterval() 3 <meta http equiv="content -Type " content="text /html ; charset=utf -8"> 4 <title>przyk ł ad</title> 5 <script> 6 function uruchomcyklicznewykonanie ( ) { 7 timeoutid = window. setinterval( wyswietl, 1000) ; 8 } 9 10 function wyswietl ( ) { 11 console. log ( " Witaj świecie!" ) ; 12 } 13 14 function zatrzymajcyklicznewykonanie ( ) { 15 window. clearinterval( timeoutid ) ; 16 } 17 </script> 18 </head> 19 <body> 20 <form> 21 <button type=" button " onclick=" uruchomcyklicznewykonanie ()">Uruchom</button><br> 22 <button type=" button " onclick=" zatrzymajcyklicznewykonanie ();">Anuluj</button> 23 </form> 24 </body> 25 </html> Co sekundę wypisywany jest komunikat na konsoli Dr inż. Stanisław Polak 38 Dr inż. Stanisław Polak 39 Typy danych Przykładowe obiekty wbudowane Obiekt window Metody requestanimationframe() oraz cancelanimationframe() 3 <meta http equiv="content -Type " content="text /html ; charset=utf -8"> 4 <title>przyk ł ad</title> 5 <script> 6 function uruchomcyklicznewykonanie ( ) { 7 requestid=window. requestanimationframe( wyswietl ) ; 8 } 9 10 function wyswietl ( ) { 11 console. log ( " Witaj świecie!" ) ; 12 requestid=window. requestanimationframe( wyswietl ) ; 13 } 14 15 function zatrzymajcyklicznewykonanie ( ) { 16 window. cancelanimationframe( requestid ) ; 17 } 18 </script> 19 </head> 20 <body> 21 <form> 22 <button type=" button " onclick=" uruchomcyklicznewykonanie ()">Uruchom</button><br> 23 <button type=" button " onclick=" zatrzymajcyklicznewykonanie ();">Anuluj</button> 24 </form> 25 </body> 26 </html> Cyklicznie, podczas odświeżania ekranu, wypisywany jest komunikat Typy danych Przykładowe obiekty wbudowane Obiekt document 3 <meta http equiv=" Content - Type " content= "text /html ; charset=utf -8"> 4 <title>przyk ł ad</title> 5 </head> 6 <body> 7 Witaj 8 <script type="text / javascript "> 9 var noweokno=window. open (,, toolbar = no, scrollbars =no, width =200, height =150 ) ; 10 noweokno. document. open( "text /html ", " replace " ) ; 11 noweokno. document. writeln( " Witaj ś wiecie!" ) ; 12 noweokno. document. write( "To jest test." ) ; 13 noweokno. document. close ( ) ; 14 document. write( " w bieżącym oknie." ) ; 15 16 </script> 17 </body> 18 </html> Wypisanie tekstu w nowym oknie Dr inż. Stanisław Polak 40 Dr inż. Stanisław Polak 41
Operatory Operatory Specjalne Operatory odziedziczone z języka Java Przecinkowy Dokładnie takie same jak w Java Arytmetyczne (+, -, *, /, ++, --, %) Warunkowy (?:) Bitowe (&,, ^, ~, <<, >>, >>>) Logiczne (&&,,!) Łańcuchowy (+) Przypisania (=, *=,/=, %=, +=, -=, <<=, >>=, >>>=, &=, ^=, =) Typu (instanceof) new oraz this Prawie takie same jak w Java Porównania dodatkowe: === oraz!== 1 document. write ( true == 1) ; // Wypisze : true, gdy ż true j e s t konwertowane do 1 a nast ę pnie por ównywane 2 document. write ( "1" == 1) ; // Wypisze : true, gdy ż 1 j e s t konwertowane do 1 a nast ę pnie por ównywane 3 document. write ( "1" === 1) ; // Wypisze : f a l s e 4 document. write ( "1"!== 1) ; // Wypisze : t r u e 5 document. write (1 === 1) ; // Wypisze : t r u e Dodatkowe operatory porównania 1 a=1, b=2; 2 document. write ( a ) ; // Wypisze : 1 3 document. write ( b ) ; // Wypisze : 2 4 for ( var i = 0, j = 9 ; i <= 9 ; i++, j ) 5 document. writeln ( "a[" + i + "][" + j + "]" ) ; / Wypisze : 6 a [ 0 ] [ 9 ] 7 a [ 1 ] [ 8 ] 8 a [ 2 ] [ 7 ] 9 a [ 3 ] [ 6 ] 10 a [ 4 ] [ 5 ] 11 a [ 5 ] [ 4 ] 12 a [ 6 ] [ 3 ] 13 a [ 7 ] [ 2 ] 14 a [ 8 ] [ 1 ] 15 a [ 9 ] [ 0 ] 16 / Dr inż. Stanisław Polak 47 Dr inż. Stanisław Polak 48 Operatory Specjalne Operator in 1 var drzewa = new Array ( " sekwoja ", "cedr ", "dąb", "klon " ) ; 2 0 in drzewa ; // zwraca t r u e 3 3 in drzewa ; // zwraca t r u e 4 6 in drzewa ; // zwraca f a l s e 5 " klon " in drzewa ; // zwraca f a l s e ( nale ży podać numer indeksu, 6 // a nie warto ś ć znajduj ącą s i ę po podanym indeksem ) 7 " length " in drzewa ; // zwraca true ( length j e s t wł asno ś c i ą Array ) 8 9 // O b i e k t y p r e d e f i n i o w a n e 10 "PI" in Math ; // zwraca t r u e 11 var mojstring = new String ( " koral " ) ; 12 " length " in mojstring ; // zwraca t r u e 13 14 // Obiekty uż ytkownika 15 var auto = {marka : " Honda ", model : " Accord ", rok : 1998}; 16 " marka " in auto ; // zwraca t r u e 17 " model " in auto ; // zwraca t r u e Dr inż. Stanisław Polak 49 Operatory Specjalne Operator delete 1 x = 4 2 ; 2 var y = 4 3 ; 3 obj = new Number ( ) ; 4 obj. h = 4 ; 5 delete x ; // zwraca true (można usunąć zmienną j e ż e l i zdefiniowano j ą n i e j a w n i e ) 6 delete y ; // zwraca f a l s e ( n i e moż na usun ą ć z m i e n n e j j e ż e l i z d e f i n i o w a n o j ą przy uż yciu var ) 7 delete Math. PI ; // zwraca f a l s e ( nie można usunąć predefiniowanych wł asno ś c i ) 8 delete obj. h ; // zwraca true (można usunąć wł a ś ciwo ś c i zdefiniowane przez uż y tkownika ) 9 delete obj ; // zwraca true (można usunąć zmienną j e ż e l i zdefiniowano j ą n i e j a w n i e ) 10 11 var drzewa = new Array ( " sekwoja ", "cedr ", "dąb", "klon " ) ; 12 document. write ( drzewa. length ) ; // Wypisze : 4 13 document. write ( drzewa [ 2 ] ) ; // Wypisze : dąb 14 delete drzewa [ 2 ] ; 15 document. write ( drzewa. length ) ; // Wypisze : 4 16 document. write ( drzewa [ 2 ] ) ; // Wypisze : u n d e f i n e d 17 18 drzewa [ 3 ] = undefined ; 19 if (2 in drzewa ) 20 document. write ( " Element o indeksie 2 istnieje w tablicy " ) ; 21 if (3 in drzewa ) 22 document. write ( " Element o indeksie 3 istnieje w tablicy " ) ; 23 // Wypisze : Element o i n d e k s i e 3 i s t n i e j e w t a b l i c y Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 50
Operatory Specjalne Operator typeof Operatory Specjalne Operator void 1 var mojafun = new Function ( "5 + 2" ) ; 2 var ksztalt = "okr ągły" ; 3 var rozmiar = 1 ; 4 var dzis = new Date ( ) ; 5 6 typeof mojafun ; // zwraca function 7 typeof ( ksztalt ) ; // zwraca s t r i n g 8 typeof rozmiar ; // zwraca number 9 typeof dzis ; // zwraca object 10 typeof nieistnieje ; // zwraca undefined 11 typeof true ; // zwraca boolean 12 typeof null ; // zwraca object 13 typeof 6 2 ; // zwraca number 14 typeof Hello world ; // zwraca s t r i n g 15 typeof Math ; // zwraca object 16 typeof Array ; // zwraca function 1 <A HREF=" javascript :void (0) ">Kliknij tutaj, aby nic się nie wykona ł o</a> 2 <A HREF=" javascript :void ( document.form. submit ())">Kliknij tutaj aby formularz zosta ł zatwierdzony</a> Dr inż. Stanisław Polak 51 Dr inż. Stanisław Polak 52 Instrukcje Instrukcje Instrukcje odziedziczone z języka Java Instrukcja for... in Blokowa ({}) Warunkowa (if) break oraz continue Wyboru (switch) Pętle (while, do oraz for) 1 var auto = {marka : " Ferrari ", kolor : " czerwony ", ilosc_drzwi : 2 } ; 2 for ( licznik in auto ) 3 console. log ( auto [ licznik ] ) ; Na wyjściu Ferrari czerwony 2 Iterowanie obiektu 1 var tab = new Array ( 1, 2, 3 ) ; 2 tab. nowawlasnosc = 1 2 3 ; 3 for ( licznik in tab ) 4 console. log ( " tab ["+licznik+"]="+tab [ licznik ] ) ; Iterowanie tablicy niewskazane Na wyjściu tab[0]=1 tab[1]=2 tab[2]=3 tab[nowawlasnosc]=123 Dr inż. Stanisław Polak 53 Dr inż. Stanisław Polak 54
Instrukcje Instrukcje Instrukcja for... of Instrukcja with 1 var tab = new Array ( a,2,3) ; 2 tab. nowawlasnosc = b ; 3 for ( licznik of tab ) 4 console. log ( licznik ) ; Na wyjściu a 2 3 1 var mapa = new Map ( ) ; 2 pustyobiekt = {}; 3 mapa. set ( " napis ", "coś" ) ; 4 mapa. set (1,{ a : 1 0 } ) ; 5 mapa. set ( pustyobiekt, 1 ) ; 6 for ( var [ klucz, wartosc ] of mapa ) { 7 console. log ( klucz + " = " + wartosc ) ; 8 } Na wyjściu "napis = coś" "1 = [object Object]" "[object Object] = 1" 1 var auto = {marka : " Ferrari ", kolor : " czerwony ", ilosc_drzwi : 2 } ; 2 marka = "Fiat " ; 3 4 with ( auto ){ 5 console. log ( marka ) ; // Wypisze : F e r r a r i 6 console. log ( kolor ) ; // Wypisze : czerwony 7 console. log ( ilosc_drzwi ) ; // Wypisze : 2 8 } Dr inż. Stanisław Polak 55 Dr inż. Stanisław Polak 56 Instrukcje Funkcje Obsługa wyjątków Instrukcje throw, try, catch oraz finally 1 // U t w o r z e n i e o b i e k t u r e p r e z e n t u j ą cego wyj ą t e k 2 function Wyjatek ( komunikat ) { 3 this. komunikat=komunikat ; 4 this. nazwa=" Ujemna " ; 5 } 6 7 try{ 8 var wiek = 1; 9 if ( wiek <0){ 10 var wyjatek=new Wyjatek ( "Wiek nie może być liczbą ujemną" ) ; 11 throw wyjatek ; 12 } 13 console. log ( "To już się nie wypisze " ) ; 14 } 15 catch ( e if e. nazwa ==" Ujemna " ) { console. log ( e. komunikat ) ; } 16 catch ( e ) {/ obs ł uga wyją tk ów, kt ó rych wcze ś n i e j nie przechwycono /} 17 finally{/ i n s t r u k c j e, kt ó r e maj ą by ć zawsze wykonane /} Na wyjściu Wiek nie może być liczbą ujemną Dr inż. Stanisław Polak 57 Funkcje Definiowanie (inaczej niż w Java) za pomocą słowa kluczowego function; wywoływanie funkcji oraz zwracanie wartości przez funkcję tak samo jak w Java Pozwalają definiować obiekty 1 function mnoz ( a, b=1){ 2 var c = a b ; 3 a = 0 ; 4 b = 0 ; 5 return c ; 6 } 7 function f ( ) { return [ 1, 2, 3 ] } 8 9 a = 2 ; 10 b = 2 ; 11 var wynik = mnoz (a, b ) ; 12 console. log ( wynik ) ; // w y p i s z e 4 13 var wynik = mnoz ( a ) ; 14 console. log ( wynik ) ; // w y p i s z e 2 15 16 var x, y, z ; 17 [ x, y, z ] = f ( ) ; //Zwró c e n i e w i e l u warto ś c i 18 [ x, y, z ] = ( function f ( ) { return [ 1, 2, 3 ] }) ( ) ; // Jednoczesne d e f i n i o w a n i e i wywo ł a n i e f u n k c j i 19 console. log ( x ) ; // Wypisze : 1 20 / / 21 const sta ł a = 1 ; 22 var zmienna = 2 ; 23 function sta ł a ( ){} // R e d e c l a r a t i o n of const s t a ł a 24 function zmienna ( ){} 25 zmienna ( ) ; // zmienna i s not a f u n c t i o n Przykładowe funkcje Dr inż. Stanisław Polak 58 1 function zmien ( x, obiekt1, obiekt2 ){ 2 x = 2 ; 3 obiekt1. marka = "Fiat " ; 4 obiekt2 = {marka : " Skoda " }; 5 } 6 7 var auto1 = {marka : " Ferrari " }; 8 var auto2 = {marka : " Ferrari " }; 9 var zmienna = 1 ; 10 console. log ( zmienna ) ; // Wypisze : 1 11 console. log ( auto1. marka ) ; // Wypisze : F e r r a r i 12 console. log ( auto2. marka ) ; // Wypisze : F e r r a r i 13 zmien ( zmienna, auto1, auto2 ) ; 14 console. log ( zmienna ) ; // Wypisze : 1 15 console. log ( auto1. marka ) ; // Wypisze : F i a t 16 console. log ( auto2. marka ) ; // Wypisze : F e r r a r i Przekazywanie typów prostych oraz złożonych
Funkcje Funkcje Funkcje anonimowe 1 // Funkcja p r o c e d u r a l n a 2 function hello1 ( kto ) { 3 return Hello +kto ; 4 } 5 / / 6 console. log ( hello1 ( world ) ) ; // Wypisze : H e l l o world 7 / / 8 / / 9 // Funkcja j a k o zmienna 10 var hello2 = function ( kto ) {return Hello +kto }; 11 // l u b 12 var hello2 = ( kto ) => {return Hello +kto }; 13 // l u b 14 var hello2 = ( kto ) => Hello +kto ; 15 / / 16 var hello3 = function ( ) { 17 console. log ( Witaj ) ; 18 console. log ( Ś wiecie ) ; 19 } 20 // l u b 21 var hello3 = ( ) => { 22 console. log ( Witaj ) ; 23 console. log ( Ś wiecie ) ; 24 } 25 console. log ( hello2 ( world ) ) ; // Wypisze : H e l l o world 26 hello3 ( ) ; // Wypisze : Witaj 27 // Ś w i e c i e Dr inż. Stanisław Polak 59 1 function Osoba ( ) { 2 // K o n s t r u k t o r Osoba ( ) d e f i n i u j e t h i s jako instancj ę samego s ie bi e 3 this. wiek = 0 ; 4 this. placa = 0 ; 5 setinterval ( function ( ) { 6 // Tutaj t h i s o b i e k t window, c z y l i j e s t r ó ż ne od t h i s z d e f i n i o w a n e g o w k o n s t r u k t o r z e Osoba 7 this. wiek++; 8 console. log ( " Wiek ="+this. wiek ) ; 9 }, 1000) ; 10 setinterval ( ( ) => { 11 this. placa++;// Tutaj t h i s j e s t obiektem Osoba 12 console. log ( "Pł aca ="+this. placa ) ; 13 }, 1000) ; 14 } 15 var osoba = new Osoba ( ) ; Na wyjściu Wiek=NaN Płaca=1 Wiek=NaN Płaca=2... Leksykalne this Domknięcia 1 function init ( ) { 2 var nazwa = " Polak " ; 3 4 function wyswietlnazwe ( ) { 5 console. log ( nazwa ) ; 6 } 7 wyswietlnazwe ( ) ; 8 } 9 init ( ) ; //Wyś w i e t l i : Polak 1 function utworzfunkcje ( ) { 2 var nazwa = " Polak " ; 3 4 function wyswietlnazwe ( ) { 5 console. log ( nazwa ) ; 6 } 7 return wyswietlnazwe ; 8 } 9 10 var mojafunkcja = utworzfunkcje ( ) ; 11 mojafunkcja ( ) ; // Wypisze : Polak 1 function mnozenie_przez ( x ) { 2 return function ( y ) { 3 / f u n k c j a w y k o r z y s t u j e dwie zmienne : 4 y dost ępną dla uż ytkownika 5 x z d e f i n i o w a n ą t y l k o wewną t r z f u n k c j i m n o z e n i e p r z e z ( ) 6 / 7 return x y ; 8 }; 9 } 10 11 var iloczyn_5_przez = mnozenie_przez (5) ; // parametrowi x j e s t przypisywana warto ś ć 5 12 13 print ( iloczyn_5_przez ( 1 2 ) ) ; // z o s t a n i e w y p i s a n e 5 12, c z y l i 60 Przykład użycia domknięcia Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 60 Funkcje Funkcje Łańcuch zasięgu Zmienne w funkcji 1 function one ( ) { 2 var a = 1 ; 3 two ( ) ; 4 5 function two ( ) { 6 var b = 2 ; 7 three ( ) ; 8 9 function three ( ) { 10 var c = 3 ; 11 alert ( a + b + c ) ; //6 12 } 13 } 14 } 15 one ( ) ; // Wypisze : 6 1 function fun ( x ){ 2 a = ++x ; 3 b = 1 0 ; 4 } 5 / / 6 a = 0 ; // <=> v a r a = 0 ; 7 console. log ( a ) ; // Wypisze : 0 8 console. log ( b ) ; //b i s not defined 9 fun ( a ) ; 10 console. log ( a ) ; // Wypisze : 1 11 console. log ( b ) ; // Wypisze : 10 1 let a=1; 2 console. log ( a ) ; // Wypisze : 1 3 / / 4 for ( let i = 0 ; i<10; i++) { 5 console. log ( i ) ; 6 // Wypisze : 1, 2, 3, 4... 9 7 } 8 console. log ( i ) ; // i i s not defined Wyrażenie let 1 function fun ( x ){ 2 var a = ++x ; 3 var b = 1 0 ; 4 } 5 / / 6 a = 0 ; // <=> v a r a = 0 ; 7 console. log ( a ) ; // Wypisze : 0 8 console. log ( b ) ; //b i s not defined 9 fun ( a ) ; 10 console. log ( a ) ; // Wypisze : 0 11 console. log ( b ) ; //b i s not defined 1 function fun ( ) 2 { 3 var a = 3 ; 4 var b = 4 ; 5 if ( a === 3) { 6 let a = 1 0 ; // i n n a zmienna a. Z a k r e s wnę t r z e b l o k u i f 7 var b = 1 1 ; // ta sama zmienna b co wyż ej. Zakres wnę t r z e f u n k c j i fun 8 console. log ( a ) ; // Wypisze : 10 9 console. log ( b ) ; // Wypisze : 11 10 } 11 console. log ( a ) ; // Wypisze : 3 12 console. log ( b ) ; // Wypisze : 11 13 } 14 fun ( ) ; Źródło: http://davidshariff.com/blog/javascript-scope-chain-and-closures/ let kontra var Dr inż. Stanisław Polak 61 Dr inż. Stanisław Polak 62
Funkcje Funkcje Funkcje ze zmienną liczbą argumentów Document Object Model Ogólna charakterystyka 1 function wypisz ( ) { 2 // p r z e j d ź po w s z y s t k i c h argumentach 3 for ( var i=0; i<arguments.length ; i++) 4 console. log (arguments [ i ] ) ; 5 } 6 7 wypisz ( "A", "B", "C" ) ; Na wyjściu A B C 1 function wypisz ( a,...pozostale) { 2 console. log ( a ) ; 3 console. log ( Array. isarray ( pozostale ) ) ; 4 for ( licznik in pozostale ) 5 console. log ( " pozostale ["+licznik+"]= "+pozostale [ licznik ] ) ; 6 7 console. log ( arguments. length ) ; // SyntaxError : arguments o b j e c t may not be used i n c o n j u n c t i o n w i t h a r e s t p a r a m e t e r 8 } 9 10 wypisz ( "A", "B", "C" ) ; Na wyjściu A true pozostale[0]=b pozostale[1]=c Document Object Model (DOM) obiektowy model dokumentu. Dokument drzewo obiektów Interfejs programowy (API) dla dokumentów HTML i XML Zbiór własności i metod do manipulacji w/w dokumentami </ head> 3 <body> 4 <br> 5 <div> 6 <pre>zwyk ł y tekst</ pre> 7 <p align = l e f t > 8 <hr/> 9 </p> 10 </ div> 11 <! Komentarz > 12 </ body> 13 </ html> Drzewo DOM / html head body br div pre Komentarz p Zwykły tekst align= left hr Dokument HTML Dr inż. Stanisław Polak 63 Dr inż. Stanisław Polak 64 Podstawowe własności węzłów Funkcje Funkcje Przykłady Wyświetlenie informacji o pojedynczym węźle element Metody getelementbyid() / queryselector() Typ węzła nodetype nodename nodevalue Element Node.ELEMENT NODE (1) Nazwa null znacznika dużymi literami Atrybut Node.ATTRIBUTE NODE (2) Nazwa atrybutbutu Wartość atry- Text Node.TEXT NODE (3) #text Tekst stanowiący jego treść Komentarz Node.COMMENT NODE (8) #comment Treść komentarza Dokument Node.DOCUMENT NODE (9) #document null 3 <title>przyk ł ad</ title> 4 <script type="text / javascript "> 5 function start ( ) { 6 var element = document. getelementbyid( " elem1 " ) ; 7 #lub 8 var element = document. queryselector( "# elem1 " ) ; 9 10 window. alert ( element ) ; // Wypisze : [ object HTMLBodyElement ] 11 12 window. alert ( element. nodetype ) ; // Wypisze : 1 13 window. alert ( element. nodename ) ; // Wypisze : BODY 14 window. alert ( element. nodevalue ) ; // Wypisze : null 15 } 16 </ script> 17 </ head> 18 <body id=" elem1 " onload=" start ();"> 19 </ body> 20 </ html> Dr inż. Stanisław Polak 65 Dr inż. Stanisław Polak 66
Funkcje Przykłady Wyświetlenie informacji o kilku węzłach element Metody getelementsbytagname() / queryselectorall() 3 <title>przyk ł ad</ title> 4 <script type="text / javascript "> 5 function start ( ) { 6 var elementy = document. getelementsbytagname( "td" ) ; 7 #lub 8 var elementy = document. queryselectorall( "tr td" ) ; 9 window. alert ( elementy ) ; // Wypisze : [ object HTMLCollection ] 10 window. alert ( elementy. length ) ; // Wypisze : 4 11 window. alert ( elementy [ 0 ] ) ; // Wypisze : [ object HTMLTableCellElement ] 12 window. alert ( elementy [ 0 ]. nodetype ) ; // Wypisze : 1 13 window. alert ( elementy [ 0 ]. nodename ) ; // Wypisze : TD 14 window. alert ( elementy [ 0 ]. nodevalue ) ; // Wypisze : null 15 window. alert ( elementy [ 1 ] ) ; // Wypisze : [ object HTMLTableCellElement ] 16 window. alert ( elementy [ 1 ]. nodetype ) ; // Wypisze : 1 17 window. alert ( elementy [ 1 ]. nodename ) ; // Wypisze : TD 18 window. alert ( elementy [ 1 ]. nodevalue ) ; // Wypisze : null 19 } 20 </ script> 21 </ head> 22 <body onload=" start ();"> 23 <table> 24 <tr><td>a</td><td>b</td></tr> 25 <tr><td>c</td><td>d</td></tr> 26 </ table> 27 </ body> 28 </ html> Funkcje Przykłady Pobieranie potomków węzłów element oraz tekst Własność childnodes 3 <title>przyk ł ad</ title> 4 <script type=" text / javascript "> 5 function start ( ){ 6 var elementy = document. getelementsbytagname ( "tr" ) ; 7 for ( var i=0 ; i<elementy. l e n g t h ; i++){ 8 var potomkowie = elementy [ i ]. childnodes ; // o b i e k t potomkowie j e s t typu,, NodeList 9 for ( var j =0; j<potomkowie. length ; j++){ 10 var lancuch = potomkowie [ j ]. nodename + ": " + potomkowie [ j ]. childnodes [ 0 ]. nodevalue ; 11 window. a l e r t ( l a n c u c h ) ; 12 } 13 } 14 } 15 / Wypisze : 16 TD: a 17 TD: b 18 TD: c 19 TD: d 20 / 21 </s c r i p t> 22 </ head> 23 <body onload=" start ();"> 24 <table border="1"> 25 <tr><td>a</td><td>b</td></tr> 26 <tr><td>c</td><td>d</td></tr> 27 </ table> 28 </ body> 29 </ html> Dr inż. Stanisław Polak 67 Dr inż. Stanisław Polak 68 Funkcje Przykłady Funkcje Przykłady Obsługa atrybutów Własność attributes oraz metody setattribute() oraz removeattribute() 3 <meta http e q u i v=" Content - Type " content=" text / html ; charset=utf -8"> 4 <title>przyk ł ad</ title> 5 <script type=" text / javascript "> 6 function zmien ( grubosc ){ 7 var element = document. getelementbyid ( " elem1 " ) ; //obiekt typu,, HTMLTableElement 8 window. alert ( element. getattribute ( border ) ) ; //Wypisze : 1 9 window. alert ( element. getattribute ( id ) ) ; //Wypisze : elem1 10 element. setattribute ( border, grubosc ) ; 11 12 // Mo ż na i tak 13 var atrybuty = element. attributes ; //obiekt typu,, NamedNodeMap 14 window. alert ( atrybuty. border. value ) ; //Wypisze : 1 15 window. alert ( atrybuty. id. value ) ; //Wypisze : elem1 16 atrybuty. border. value = grubosc ; 17 } 18 19 function usun ( ){ 20 var element = document. getelementbyid ( " elem1 " ) ; 21 element. removeattribute ( border ) ; 22 } 23 </ script> 24 </ head> 25 <body> 26 <table border="1" id=" elem1 "> 27 <tr><td>a</td><td>b</td></tr> 28 <tr><td>c</td><td>d</td></tr> 29 </ table> 30 <form> 31 <input type=" button " value=" Zmie ń grubo ść" onclick=" zmien (2) ;"> 32 <input type=" button " value=" Usu ń" onclick=" usun ();"> 33 </ form> 34 </ body> 35 </ html> Dr inż. Stanisław Polak 69 Wstawienie nowej komórki tabeli na końcu wiersza Metody createelement(), createtextnode() oraz appendchild() 3 <title>przyk ł ad</ title> 4 <script type="text / javascript "> 5 function wstaw ( ) { 6 var nowytd = document. createelement( "td" ) ; 7 var nowytekst = document. createtextnode( "b1" ) ; 8 nowytd. appendchild ( nowytekst ) ; 9 var element = document. getelementbyid ( " wiersz1 " ) ; 10 element. appendchild( nowytd ) ; 11 } 12 </ script> 13 </ head> 14 <body> 15 <table border="1"> 16 <tr id=" wiersz1 "><td>a</td><td>b</td></tr> 17 <tr><td>c</td><td>d</td></tr> 18 </ table> 19 <form> 20 <input type=" button " value=" Wstaw " onclick=" wstaw ();"> 21 </ form> 22 </ body> 23 </ html> id= wiersz1 a c b d a b b1 c d Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 70 td a... tr td b td b1
Funkcje Przykłady Wstawienie nowej komórki tabeli na początku wiersza Metoda insertbefore() Funkcje Przykłady Zastąpienie komórki tabeli Metoda replacechild() 3 <title>przyk ł ad</ title> 4 <script type="text / javascript "> 5 function wstaw ( ) { 6 var nowytd = document. createelement ( "td" ) ; 7 var nowytekst = document. createtextnode ( "b1" ) ; 8 nowytd. appendchild ( nowytekst ) ; 9 var element = document. getelementbyid ( wiersz1 ) ; 10 var reftd = element. getelementsbytagname ( "td" ). item ( 0 ) ; 11 element. insertbefore( nowytd, reftd ) ; 12 } 13 </ script> 14 </ head> 15 <body> 16 <table border="1"> 17 <tr id= wiersz1 ><td>a</td><td>b</td></tr> 18 <tr><td>c</td><td>d</td></tr> 19 </ table> 20 <form> 21 <input type=" button " value=" Wstaw " onclick=" wstaw ();"> 22 </ form> 23 </ body> 24 </ html> id= wiersz1 a c b d b1 a b c d td b1... tr td a td b 2 <meta http e q u i v=" Content - Type " content=" text / html ; charset=utf -8"> 3 <head> 4 <title>przyk ł ad</ title> 5 <script type="text / javascript "> 6 function zastap ( ) { 7 var nowytd = document. createelement ( "td" ) ; 8 var nowytekst = document. createtextnode ( "b1" ) ; 9 nowytd. appendchild ( nowytekst ) ; 10 var element = document. getelementbyid ( wiersz1 ) ; 11 var reftd = element. getelementsbytagname ( "td" ). item ( 0 ) ; 12 element. replacechild( nowytd, reftd ) ; 13 } 14 </ script> 15 </ head> 16 <body> 17 <table border="1"> 18 <tr id= wiersz1 ><td>a</td><td>b</td></tr> 19 <tr><td>c</td><td>d</td></tr> 20 </ table> 21 <form> 22 <input type=" button " value="zast ąp" onclick=" zastap ();"> 23 </ form> 24 </ body> 25 </ html> id= wiersz1 a c... tr td b1 b d td b Dr inż. Stanisław Polak 71 Dr inż. Stanisław Polak 72 Funkcje Przykłady Dostęp do stylów CSS Obiekt style Funkcje Przykłady Zmiana koloru tła po kliknięciu komórki tabeli Obsługa zdarzeń Cecha CSS własność obiektu style background-color style.backgroundcolor border-top-width style.bordertopwidth Wyjątki: float style.cssfloat class style.classname for style.htmlfor a b c d 3 <meta http e q u i v=" Content - Type " content= " text / html ; charset=utf -8" /> 4 <title>przyk ł ad</ title> 5 <script type="text / javascript "> 6 function kolor ( wartosc ){ 7 var element = document. getelementbyid ( " komorka1 " ) ; 8 element. style. backgroundcolor = wartosc ; 9 } 10 </ script> 11 </ head> 12 <body> 13 <table border="1"> 14 <tr><td id=" komorka1 ">a</td><td>b</td></ tr> 15 <tr><td>c</td><td>d</td></tr> 16 </ table> 17 <form> 18 <input type=" button " value=" Czerwony " onclick="kolor( #FF0000 );"> 19 <input type=" button " value=" Zielony " onclick="kolor( #00FF00 );"> 20 </ form> 21 </ body> 22 </ html> 1 <!DOCTYPE html> 2 <meta charset="utf -8"> 3 <script type="text / javascript "> 4 function zmienkolor ( ) { 5 var komorka = document. getelementbyid ( " komorka " ) ; 6 komorka. style. backgroundcolor= red ; 7 } 8 / / 9 function wyswietlalert ( ) { 10 alert ( " wyswietlalert ()" ) ; 11 } 12 / / 13 function load ( ) { 14 var el = document. getelementbyid ( " tabela " ) ; 15 el. addeventlistener( " click ", wyswietlalert, false ) ; // Najpierw wykona s i ę z m i e n K o l o r ( ), a potem w y s w i e t l A l e r t ( ). Je ż e l i t r z e c i parametr b ę d z i e t r u e to n a j p i e r w wykona s i ę w y s w i e t l A l e r t ( ), a potem z m i e n K o l o r ( ) 16 var el = document. getelementbyid ( " komorka " ) ; 17 el. addeventlistener( " click ", zmienkolor, false ) ; 18 } 19 </script> 20 <body onload=" load ();"> 21 <table id=" tabela " border="1"> 22 <tr><td id=" komorka ">Jeden</td></tr> 23 <tr><td>dwa</td></tr> 24 </table> 25 </body> 26 </html> Dr inż. Stanisław Polak 73 Dr inż. Stanisław Polak 74
Funkcje Przykłady AJAX AJAX (ang. Asynchronous JavaScript and XML), Asynchroniczny JavaScript i XML AJAX = HTML + CSS + DOM + XMLHttpRequest + XML + JavaScript Możliwości: Wysyłanie zapytania do serwera bez przeładowywania strony, Aplikacja może dokonywać szybkich, przyrostowych aktualizacji w interfejsie użytkownika bez potrzeby przeładowywania całej strony w przeglądarce Parsowanie i praca z dokumentami XML Czy warto go zawsze stosować? Dr inż. Stanisław Polak 75 Rysunek: Schemat działania typowej witryny internetowej Rysunek: Schemat działania witryny internetowej opartej o AJAX Funkcje Przykłady Zapytanie 1 var http_request ; 2 if (window.activexobject) { // IE 6 3 try { http_request = new ActiveXObject( Msxml2.XMLHTTP ) ; } 4 catch ( e ) { 5 try { http_request = new ActiveXObject( Microsoft.XMLHTTP ) ; } 6 catch ( e ) {} 7 } 8 } 9 else if (window.xmlhttprequest) { // M o z i l l a, S a f a r i, IE 7,... 10 http_request = new XMLHttpRequest ( ) ; 11 if ( http_request. overridemimetype ) { 12 http request.overridemimetype( text/xml ) ; } 13 } 14 if (! http_request ) 15 alert ( Nie mogę stworzyć instancji obiektu XMLHTTP ) ; 16 http request.onreadystatechange = function ( ) { alertcontents ( http_request ) ; }; 17 http request.open( GET, "/ zadany_plik.html ", true ) ; 18 http request.send( null ) ; 19 //http request.open ( POST, / s k r y p t. c g i, t r u e ) ; 20 //http request.setrequestheader ( Content Type, a p p l i c a t i o n /x www form u r l e n c o d e d ) ; 21 //http request.send ( pole1=wartosc1&pole2=wartosc2 &... ) ; 1 <table> 2 <tr><td>hello</td></tr> 3 </ table> zadany plik.html Dr inż. Stanisław Polak 76 Funkcje Przykłady Obsługa odpowiedzi 1 function alertcontents ( http_request ) { 2 try { 3 if (http request.readystate == 4) { 4 if (http request.status == 200) { 5 alert (http request.responsetext) ; 6 var xmldoc = http request.responsexml ; 7 var root_node = xmldoc. getelementsbytagname ( td ). item ( 0 ) ; 8 alert ( root_node. firstchild. data ) ; 9 } 10 else { 11 alert ( Wystąpił problem z tym zadaniem. ) ; 12 } 13 } 14 } catch( e ) { alert ( Zlapany wyjatek : + e. description ) ; } 15 } Cz eść II Podstawowe pojęcia związane z tworzeniem aplikacji internetowych Dr inż. Stanisław Polak 77 Dr inż. Stanisław Polak 78
Framework Dostarcza szkieletu do tworzenia aplikacji lub jej wybranych części Dostarcza zbioru ogólnych funkcjonalności Gotowe komponenty do budowy aplikacji WWW Ułatwia proces wdrożania nowego pracownika Nie jest gotową aplikacją jest zbiorem kodu i pewnych metod postępowania, dzięki którym można efektywnie budować aplikacje Typowe cechy: Odwrócenie sterowania Domyślne zachowanie Rozszerzalność Zamknięta struktura wewnętrzna Typowe elementy: Mechanizm uruchamiania i przetwarzania akcji Mechanizm tworzenia logiki biznesowej aplikacji Zarządzanie konfiguracją Zarządzanie komunikacją z bazą danych Obsługa formularzy System szablonów Obsługa błędów Mechanizmy bezpieczeństwa, uwierzytelniania i kontroli dostępu Generatory kodu Dr inż. Stanisław Polak 79 Wzorzec projektowy MVC Środowisko WWW MVC (ang. Model-View-Controller) Model-Widok-Kontroler Podstawowe komponenty aplikacji: Model logika biznesowa Widok logika prezentacji Kontroler logika sterowania Bazuje na klasycznym wzorcu MVC Zalety: Standaryzacja Niezależność Łatwość modyfikacji Szybkość Wada: Złożoność Kiedy stosować? Złożone aplikacje Potrzeba utrzymywania i dostosowywania do nowych potrzeb Wyznaczenie obszarów kompetencji Wielokrotna używalność Dr inż. Stanisław Polak 80 żądanie HTTP Serwer Klient Kontroler Model odpowiedź HTTP Materiały dla studentów Informatyki WSZiB w Krakowie Widok Wzorzec Active record CRUD 1 product = Product. new 2 product. name = " Komputer " 3 product. price = 123.45 4 product. save ( ) Dodanie nowego wiersza w tabeli 1 INSERT INTO products ( name, price ) VALUES ( Komputer, 1 2 3.45) ; SQL-owy odpowiednik powyższego kodu 1 b = Product. find ( 1 ) Wyszukiwanie w bazie danych 1 SELECT FROM products WHERE ( products. id = 1) LIMIT 1 ; MySQL l u b PostgreSQL SQL-owy odpowiednik powyższego kodu Działanie Create Read Update Delete Instrukcja SQL INSERT SELECT UPDATE DELETE Dr inż. Stanisław Polak 81 Dr inż. Stanisław Polak 82
System szablonów 1 require " erb " 2 3 class Page 4 attr_accessor : title 5 attr_accessor : products 6 7 def render path 8 content = File. read ( File. expand_path ( path ) ) 9 t = ERB. new ( content ) 10 t. result ( binding ) 11 end 12 end 13 14 page = Page. new ( ) 15 page. title=" Tytu ł strony " 16 page. products = [ "Produk1 ", "Produkt2 " ] 17 puts page. render ( " szablon. html. erb " ) skrypt.rb 3 <title><%= @ t i t l e %></title> 4 </ head> 5 <body> 6 <ul> 7 <% for p r o d u c t i n @products %> 8 <li><%= p r o d u c t %></li> 9 <% end %> 10 </ul> 11 </ body> 12 </ html> szablon.html.erb 3 <title>tytu ł strony</ title> 4 </ head> 5 <body> 6 <ul> 7 <li>produk1</li> 8 <li>produkt2</li> 9 </ul> 10 </ body> 11 </ html> Wynikowy dokument HTML REST Representational State Transfer Zasób GET PUT POST DELETE Kolekcja Listuj URI Zastąp całą Utwórz nowy Usuń całą kolekcję. URI takich i być może kolekcję inną wpis w kolekcji. jak http:// inne szczegóły kolekcją. Nowy przyklad.pl/ członków URL jest au- uzytkownik/ kolekcji. tomatycznie przydzielany wpisowi i zwykle jest zwracany przez operację. Elementy Pobierz re- Zastąp poda- Traktuj poda- Usuń poda- URI takie jak http:// przyklad.pl/ uzytkownik/ 13 prezentację podanego członka kolekcji, wyrażoną w określonym typie mediów internetowych. nego członka kolekcji lub jeśli nie istnieje, utwórz go. nego członka jako kolekcję samą w sobie i utwórz w niej nowy wpis. nego członka kolekcji. Dr inż. Stanisław Polak 83 Dr inż. Stanisław Polak 84 Umiędzynarodowienie i lokalizacja Umiędzynarodowienie polega na dodaniu do aplikacji możliwości wpisywania, przetwarzania i wyświetlania (generowania) tekstu w różnych językach. Lokalizacja jest procesem polegającym na dostosowaniu aplikacji do określonych ustawień regionalnych (przetłumaczenie tekstów na odpowiedni język, dostosowanie formatu waluty, formatu liczb, formatu dat, itp.). Cz eść III Dr inż. Stanisław Polak 86 Dr inż. Stanisław Polak 87
Wprowadzenie Podstawy Node.js Ogólna charakterystyka Udostępnia JavaScript po stronie serwera Używa V8 JavaScript Engine System do tworzenia serwisów sieciowych z asynchronicznym WE/WY Wykorzystuje paradygmat programowania sterowanego zdarzeniami Nadaje się dobrze do pisania aplikacji, które wymagają komunikacji w czasie rzeczywistym pomiędzy przeglądarką a serwerem Pojedyncza instancja Node.js działa jako pojedynczy wątek Pętla zdarzeń podmiot, który obsługuje / przetwarza zdarzenia zewnętrzne i konwertuje je na wywołania funkcji zwrotnych. Przykład Hello World 1 #!/usr / bin / node 2 console. log ( " Hello World " ) ; Uruchamianie skryptu $ node hello.js Hello World $ node hello Hello World hello.js Uruchamianie skryptu $ chmod 755 hello.js $./hello.js Hello World Uruchamianie trybu interaktywnego Rysunek: Schemat działania pętli zdarzeń w Node.js Źródło: http://www.aaronstannard.com/post/2011/12/14/intro-to-nodejs-for-net-developers.aspx Dr inż. Stanisław Polak 88 $ node > console.log("hello World") Hello World undefined > 2+2 4 > ^D $ Dr inż. Stanisław Polak 89 Podstawy Podstawy Wprowadzanie i wyprowadzanie danych 1 process. stdout. write ( 1 ) ; 2 process. stdout. write ( 2 ) ; 3 console. log ( 3 ) 4 5 / 6 c o n s o l e. l o g = f u n c t i o n (d) { 7 p r o c e s s. s t d o u t. w r i t e ( d + \n ) ; 8 }; 9 / 10 11 process. stdin. setencoding ( utf8 ) ; 12 process. stdout. write ( Wprowad ź dane - naci śnięcie ^D koń czy ich wprowadzanie \n ) ; 13 process. stdin. on ( readable, function ( ) { 14 var chunk = process. stdin. read ( ) ; 15 if ( chunk!== null ) { 16 process. stdout. write ( Wczytano : + chunk ) ; 17 } 18 }) ; 19 console.log( Osiągnięto koniec skryptu ) ; Uruchamianie $ node skrypt.js 123 Wprowadź dane - naciśnięcie ^D kończy ich wprowadzanie Osiągnięto koniec skryptu abc Wczytano: abc def Wczytano: def skrypt.js Dr inż. Stanisław Polak 90 Dostęp do zmiennych środowiskowych, obsługa linii komend 1 // Odczyt warto ś c i zmiennej ś rodowiskowej HOME 2 console. log ( "Twój katalog domowy to: "+process. env [ HOME ] ) ; 3 4 //Wyś w i e t l e n i e warto ś c i argument ów l i n i i komend 5 console. log ( " Argumenty linii komend to:" ) ; 6 process. argv. foreach ( function ( wartosc, indeks, tablica ) { 7 console. log ( \t +indeks + : + wartosc ) ; 8 }) ; Uruchamianie $ node skrypt.js 1 b=2 Twój katalog domowy to: /home/polak Argumenty linii komend to: 0: node 1: /home/polak/skrypt.js 2: 1 3: b=2 skrypt.js Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 91
Podstawy Podstawy Moduł Tworzenie Moduł Korzystanie 1 var mojmodul = require( mojmodul ) ; 2 // mojmodul = require(./mojmodul ) ; 3 / / 4 console. log ( mojmodul. zmienna1 ) ; // u n d e f i n e d 5 console. log ( mojmodul. zmienna2 ) ; //2 6 console. log ( mojmodul. zmienna3 ) ; // u n d e f i n e d 7 console. log ( mojmodul. zmienna4 ) ; //4 8 console. log ( mojmodul. fun1 ( ) ) ; // fun1 9 console. log ( mojmodul. fun2 ( ) ) ; //Bł ąd 10 / / 11 console. log (mojmodul) ; //{ zmienna2: 2, zmienna4: 4, fun1: [Function] } 12 console. log (mojmodul ( ) ) ; //Błąd 13 skrypt.js 1 $ export NODE_PATH = kat 1 :kat 2 :... :kat N 1 zmienna1 = 1 ; 2 exports. zmienna2 = 2 ; 3 var zmienna3 = 3 ; 4 var zmienna4 ; 5 module.exports. zmienna4 = 4 ; 6 var exports. zmienna5 = 5 ; // SyntaxError : Unexpected token. 7 exports. fun1 = function ( ) { 8 return "fun1 " ; 9 }; 10 fun2 = function ( ) { 11 return "fun2 " ; 12 }; 13 console. log (module) ; 14 / Module { 15..., 16 exports : { zmienna2 : 2, zmienna4 : 4, fun1 : [ F u n c t i o n ] }, 17... } / 18 exports = function ( ) { 19 return "fun3 " ; 20 } 21 module. exports = function ( ) { 22 return "fun4 " ; 23 } 24 console. log (module.exports) ; //{ zmienna2: 2, zmienna4: 4, fun1: [Function] } 25 console. log (exports) ; //{ zmienna2: 2, zmienna4: 4, fun1: [Function] } 26 console. log (module.exports == exports) ; //true node modules/mojmodul.js Obsługa pakietów $ npm install nazwa_pakietu # Moduły ->./node modules/ # Pliki wykonywalne ->./node modules/.bin/ # Manuale -> nie są instalowane $ npm install -g nazwa_pakietu # Moduły -> {prefix}/lib/node modules/ # Pliki wykonywalne -> {prefix}/bin/ # Manuale -> {prefix}/share/man/ # {prefix} = np. /usr $ npm link nazwa pakietu # Wykonuje: ln -s {prefix}/lib/node modules/nazwa pakietu/./node modules/ Dr inż. Stanisław Polak 92 Dr inż. Stanisław Polak 93 Podstawy Podstawy Obsługa plików Obsługa bazy danych SQLite 3 1 var fs = require ( "fs" ) ; 2 // Sprawd ź czy p l i k i s t n i e j e 3 try{ fs. accesssync( plik.txt ) ; } 4 catch ( err ){ fs. writefilesync( plik.txt, 1 ) ; } 5 fs. readfile( plik. txt, utf -8, function ( error, data ) { 6 if ( error ) throw error ; 7 console. log ( " Odczytana wartość: "+ data ) ; 8 }) ; 9 10 fs. writefile( plik. txt, 2, function ( error ) { 11 if ( error ) throw error ; 12 console. log ( Zapisano wartość 2 ) ; 13 }) ; Uruchamianie $ node skrypt1.js Zapisano wartość 2 Odczytana wartość: 2 Wersja nieprawidłowa 1 var fs = require ( "fs" ) ; 2 try{ fs. accesssync ( plik.txt ) } 3 catch ( err ){ fs. writefilesync ( plik.txt, 1 ) ; } 4 5 fs. readfile ( plik. txt, utf -8, function ( error, data ) { 6 if ( error ) throw error ; 7 console. log ( " Odczytana wartość: "+data ) ; 8 9 fs. writefile ( plik. txt, 2, function ( error ) { 10 if ( error ) throw error ; 11 console. log ( Zapisano wartość 2 ) ; 12 }) ; 13 }) ; Uruchamianie $ node skrypt2.js Odczytana wartość: 1 Zapisano wartość 2 Wersja prawidłowa 1 var sqlite3 = require ( sqlite3 ) ; 2 3 var db = new sqlite3. Database ( : memory : ) ; //Zwraca obiekt Database 4 5 db. serialize( function ( ) { 6 db. run( "CREATE TABLE products (info TEXT )" ) ; 7 var stmt = db. prepare( "INSERT INTO products VALUES (?) " ) ; //Zwraca obiekt Statement 8 for ( var i = 0 ; i < 2 ; i++) { 9 stmt. run( " Produkt " + i ) ; 10 } 11 stmt. finalize ( ) ; 12 13 jsondata = { products : [ ] }; 14 db. each( "SELECT rowid AS id, info FROM products ", function ( err, row ) { 15 jsondata. products. push ({ id : row. id, info : row. info }) ; 16 }, function ( ) { 17 console. log ( JSON. stringify ( jsondata ) ) ; //JSON. s t r i n g i f y wbudowana f u n k c j a JS 18 } 19 ) ; 20 }) ; 21 db. close ( ) ; Instalacja i uruchamianie bd.js $ npm install sqlite3 $ node bd.js {"products":[{"id":1,"info":"produkt 0"},{"id":2,"info":"Produkt 1"}]} Dr inż. Stanisław Polak 94 Dr inż. Stanisław Polak 95
Podstawy Obsługa protokołu HTTP Tworzenie dodatków (addons) w C++ Przykład Hello World Obsługa protokołu HTTP Szkielet skryptu 1 / 2 Poniż szy program jest odpowiednikiem nast ę pującego kodu JS : 3 e x p o r t s. h e l l o = f u n c t i o n ( ) { r e t u r n world ; }; 4 / 5 6 #include <node. h> 7 8 using namespace v8 ; 9 10 void Method ( const FunctionCallbackInfo<Value>& args ) { 11 Isolate isolate = Isolate : : GetCurrent ( ) ; 12 HandleScope scope ( isolate ) ; 13 args. GetReturnValue ( ). Set ( String : : NewFromUtf8 ( isolate, " world " ) ) ; 14 } 15 16 void init ( Handle<Object> exports ) { 17 NODE_SET_METHOD ( exports, " hello ", Method ) ; 18 } 19 20 NODE_MODULE ( hello, init ) // t u t a j n i e ma ś r e d n i k a hello.cc Instalacja programu node-gyp $ node-gyp configure $ npm install -g node-gyp $ node-gyp build $ node hello.js world Dr inż. Stanisław Polak 96 1 { 2 " targets " : [ 3 { 4 "target_name " : "hello ", 5 " sources " : [ " hello.cc" ] 6 } 7 ] 8 } binding.gyp 1 var addon = require (./ build / Release / hello ) ; 2 console. log ( addon. hello ( ) ) ; hello.js Kompilacja i uruchomienie 1 var http = require ( " http " ) ; 2 3 function requestlistener (request, response) { 4 console. log ( "Pojawi ło się żą danie od klienta " ) ; 5 response. writehead (200, {"Content -Type " : "text / plain "}) ; 6 response. write ( " Hello World " ) ; 7 response. end ( ) ; 8 } 9 var serwer = http. createserver ( requestlistener ) ; 10 serwer. listen (8080) ; 11 console. log ( "Uruchomiono serwer " ) ; serwer.js Sprawdzenie działania Z poziomu terminala $ node serwer.js & Uruchomiono serwer $ curl http://localhost:8080 Pojawiło się żądanie od klienta Hello World Dr inż. Stanisław Polak 97 1 var http = require ( " http " ) ; 2 3 http. createserver ( function ( request, response ) { 4 console. log ( "Pojawi ło się żą danie od klienta " ) ; 5 response. writehead (2 00, {"Content -Type " : "text / plain "}) ; 6 response. write ( " Hello World " ) ; 7 response. end ( ) ; 8 }). listen (8080) ; 9 console. log ( "Uruchomiono serwer " ) ; Wersja alternatywna Rysunek: Z poziomu przeglądarki WWW Obsługa protokołu HTTP Obsługa protokołu HTTP Obsługa parametrów URL 1 var url = require ( " url " ) ; 2... 3 function requestlistener ( request, response ) { 4 console. log ( "Pojawi ło się żą danie od klienta " ) ; 5 var url_parts = url. parse ( request. url, true ) ; // Pass t r u e as t h e second argument to a l s o p a r s e the query string using the querystring module. Defaults to f a l s e. 6 console. log ( url_parts ) ; 7 8 response. writehead (2 00, {"Content -Type " : "text /plain "}) ; 9 response. write ( \n ) ; 10 response. write ( url_parts. pathname+ \n ) ; 11 response. write ( Login : +url_parts. query [ login ]+ \n ) ; 12 response. write ( Has ło: +url_parts. query [ haslo ]+ \n ) ; 13 response. end ( ) ; 14 } 15... Na wyjściu Terminal 1 $ node serwer.js Uruchomiono serwer Pojawiło się żądanie od klienta {... search:?login=jan&haslo=kowalski+%28nowak%29, query: { login: Jan, haslo: Kowalski (Nowak) }, pathname: /abc, path: /abc?login=jan&haslo=kowalski+%28nowak%29, href: /abc?login=jan&haslo=kowalski+%28nowak%29 } serwer.js Dr inż. Stanisław Polak 98 Terminal 2 $ curl http://localhost:8080/abc?login=jan&haslo= Kowalski+%28Nowak%29 /abc Jan Kowalski (Nowak) Obsługa formularzy Kodowanie application/x-www-form-urlencoded 1 var qs = require ( querystring ) ; 2... 3 function requestlistener ( request, response ) { 4 var url_parts = url. parse ( request. url, true ) ; 5 if ( url_parts. pathname == /form ){ // g e n e r o w a n i e f o r m u l a r z a 6 response. writehead (200, {"Content -Type " : "text /html "}) ; 7 response. write ( <form method ="POST " action ="/ submit "> ) ; 8 response. write ( <input name =" login " value =" Jan "> ) ; 9 response. write ( <input name =" haslo " value =" Kowalski ( Nowak ) ąę"> ) ; 10 response. write ( <input type =" submit "> ) ; 11 response. write ( </form > ) ; 12 response. end ( ) ; 13 } 14 if ( url_parts. pathname == /submit ) { // przetwarzanie zawarto ś ci formularza 15 if ( request. method== GET ) { 16 response. writehead (2 00, {"Content -Type " : "text /plain "}) ; 17 response. write ( url_parts. query [ login ]+ \n ) ; // przegl ądarka wypisze : Jan\n 18 response. write ( url_parts. query [ haslo ]+ \n ) ; // przegl ądarka wypisze : Kowalski (Nowak ) ąę \n 19 response. end ( ) ; 20 } 21 else if ( request. method== POST ) { 22 var body= ; 23 request. on( data, function ( data ) { 24 body +=data ; 25 }) ; 26 request. on( end, function ( ){ 27 var data = qs. parse( body ) ; //body z a w i e r a l o g i n=jan&h a s l o=k o w a l s k i+%28nowak%29+%c4%85% C4%99 28 response. writehead (2 00, {"Content -Type " : "text /plain "}) ; 29 response. write ( data [ login ]+ \n ) ; // przegl ądarka wypisze : Jan\n 30 response. write ( data [ haslo ]+ \n ) ; // przegl ądarka wypisze : Kowalski (Nowak ) ąę\n 31 response. end ( ) ; 32 }) ; 33 } 34 } 35 } Dr inż. 36 Stanisław... Polak 99
Obsługa protokołu HTTP Podstawy Wolnostojący serwer WWW Instalacja i uruchamianie $ npm install http-server -g $ http-server -h usage: http-server [path] [options] options: -p Port to use [8080] -a Address to use [0.0.0.0] -d Show directory listings [true] -i Display autoindex [true] -e --ext Default file extension if none supplied [none] -s --silent Suppress log messages from output -h --help Print this list and exit. -c Set cache time (in seconds). e.g. -c10 for 10 seconds. To disable caching, use -c-1. $ http-server Starting up http-server, serving./ on port: 8080 Hit CTRL-C to stop the server Dr inż. Stanisław Polak 100 Express Ogólna charakterystyka Najpopularniejszy framework do tworzenia aplikacji WWW Inspirowany projektem Ruby Sinatra Moduł node.js instalacja npm install -g express API oparte na JSON Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 101 Aplikacja Hello World 1 Użyte narzędzia oraz języki Aplikacja Hello World 1 Tworzenie szkieletu aplikacji Pug System szablonów Treść szablonu jest tłumaczona na HTML CSS 1 $ mkdir MySite 2 $ cd MySite 3 $ vi package. json 4 $ npm install #i n s t a l o w a n i e z a l e ż no ś c i 1 { 2 " name " : " MySite ", 3 " version " : " 0.0.1 ", 4 " private " : " true ", 5 " dependencies " : { 6 " express " : "*", 7 " pug " : "*", 8 " morgan " : "*" 9 } 10 } package.json Dr inż. Stanisław Polak 102 Dr inż. Stanisław Polak 103
Aplikacja Hello World 1 Główny plik aplikacji Aplikacja Hello World 1 Pliki Pug 1 var express = require ( express ), 2 logger = require ( morgan ) ; 3 4 var app = express ( ) ; 5 var router = express. Router ( ) ; 6 app. set ( views, dirname + / views ) ; 7 app. set ( view engine, pug ) ; 8 app. use ( logger ( dev ) ) ; 9 app. use ( express. static ( dirname + / public ) ) ; 10 router. get ( /, function ( req, res ) { 11 res. render ( index, 12 { title : Przyk ład } 13 ) 14 }) ; 15 app. use ( /, router ) ; 16 app. listen (3000) ; app.js 1 extends layout. pug 2 3 block content 4 p 5 Witaj Świecie 6 Witaj Świecie 7 p 8 Witaj Świecie 9 10 block sidebar 11 h1 Nag ł ówek 12 p 13 Tre ś ć ramki views/index.pug 1 doctype html 2 html 3 head 4 title #{title} 5 link ( rel= stylesheet, href= / stylesheets / style.css ) 6 body 7 header 8 h1 Moja strona 9 main 10 block content 11 aside 12 block sidebar 13 footer 14 p Aplikacja stworzona w oparciu o framework Express views/layout.pug Dr inż. Stanisław Polak 104 Dr inż. Stanisław Polak 105 Aplikacja Hello World 1 Plik CSS Aplikacja Hello World 1 Uruchamianie aplikacji 1 aside { 2 float : right ; 3 border : 5px solid blue ; 4 padding : 1px ; 5 margin bottom : 14 px ; 6 width : 20%; 7 } 8 main { 9 float : left ; 10 background color : #44f ; 11 padding : 5px ; 12 width : 75%; 13 } 14 footer { 15 clear : both ; 16 border style : dotted ; 17 } 18 header { 19 text align : center ; 20 } 1 $ node app 2 GET / 304 847.588 ms 3 GET / stylesheets / style. css 304 4.478 ms public/stylesheets/style.css Dr inż. Stanisław Polak 106 Dr inż. Stanisław Polak 107
Aplikacja Hello World 2 Polecenie express Aplikacja Hello World 2 Generowanie aplikacji Hello World Użycie polecenia express 1 $ npm install g express generator 2 $ express help 3 Usage : express [ options ] [ dir ] 4 5 Options : 6 7 h, help output usage information 8 version output the version number 9 e, ejs add ejs engine support 10 pug add pug engine support 11 hbs add handlebars engine support 12 H, hogan add hogan. js engine support 13 v, view <engine> add view <engine> support ( ejs hbs hjs jade pug twig vash ) ( defaults to jade ) 14 c, css <engine> add stylesheet <engine> support ( less stylus compass sass ) ( defaults to plain css ) 15 git add. gitignore 16 f, force force on non empty directory 1 $ express view=pug MySite 2 create : MySite 3 create : MySite / package. json 4 create : MySite / app. js 5 create : MySite / public 6 create : MySite / routes 7 create : MySite / routes / index. js 8 create : MySite / routes / users. js 9 create : MySite / views 10 create : MySite / views / index. pug 11 create : MySite / views / layout. pug 12 create : MySite / views / error. pug 13 create : MySite / bin 14 create : MySite / bin / www 15 create : MySite / public / javascripts 16 create : MySite / public / images 17 create : MySite / public / stylesheets 18 create : MySite / public / stylesheets / style. css 19 20 install dependencies : 21 $ cd MySite && npm install 22 23 run the app : 24 $ DEBUG=mysite : npm start Dr inż. Stanisław Polak 108 Dr inż. Stanisław Polak 109 Aplikacja Hello World 2 Plik package.json 1 { 2 " name " : " mysite ", 3 " version " : " 0.0.0 ", 4 " private " : true, 5 " scripts " : { 6 " start " : " node./ bin / www " 7 }, 8 " dependencies " : { 9 "body - parser " : " ~1.16.0 ", 10 " cookie - parser " : " ~1.4.3 ", 11 " debug " : " ~2.6.0 ", 12 " express " : " ~4.14.1 ", 13 " morgan " : " ~1.7.0 ", 14 "pug " : "~2.0.0 - beta10 ", 15 "serve - favicon " : " ~2.3.2 " 16 } 17 } Dr inż. Stanisław Polak 110 Aplikacja Hello World 2 Główny plik aplikacji app.js 1... 2 var index = require (./ routes / index ) ; 3 var users = require (./ routes / users ) ; 4 5 var app = express ( ) ; 6... 7 app. use ( /, index ) ; 8 app. use ( / users, users ) ; 9... Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 111
Aplikacja Hello World 2 Pliki z definicją tras Aplikacja Hello World 2 Pozostałe (wygenerowane) pliki 1 var express = require ( express ) ; 2 var router = express. Router ( ) ; 3 4 / GET home page. / 5 router. get ( /, function ( req, res, next ) { 6 res. render ( index, { title : Express }) ; 7 }) ; 8 9 module. exports = router ; 1 extends layout. pug 2 3 block content 4 h1= title 5 p Welcome to #{title} views/index.pug 1 doctype html 2 html 3 head 4 title= title 5 link ( rel= stylesheet, href= / stylesheets / style.css ) 6 body 7 block content views/layout.pug routes/index.js 1 var express = require ( express ) ; 2 var router = express. Router ( ) ; 3 4 / GET u s e r s l i s t i n g. / 5 router. get ( /, function ( req, res, next ) { 6 res. send ( respond with a resource ) ; 7 }) ; 8 9 module. exports = router ; routes/user.js 1 body { 2 padding : 50 px ; 3 font : 14 px " Lucida Grande ", Helvetica, Arial, sans serif ; 4 } 5 6 a { 7 color : #00B7FF ; 8 } 1 $ cd MySite && npm install 2 $ npm start public/stylesheets/style.css Instalowanie zależności i uruchamianie aplikacji Dr inż. Stanisław Polak 112 Dr inż. Stanisław Polak 113 Aplikacja Hello World 3 Aplikacja Hello World 3 MongoDB Ogólna charakterystyka Nierelacyjna baza danych zorientowana dokumentowo Dobrze skalowana Szybka Nie posiada sztywnych schematów danych Podstawowe pojęcia Kolekcja odpowiednik tabeli w relacyjnej bazie danych Dokument odpowiednik wiersza w relacyjnej bazie danych Model danych w MongoDB Referencje Osadzane dokumenty Rysunek: Przykładowy dokument Dr inż. Stanisław Polak 114 Dr inż. Stanisław Polak 115