Slajdy z wykładu

Transkrypt

Slajdy z wykładu

ra
ko
wi
e
IE
T
I
Wykłady — co tydzień, przez
pierwsze 7 tygodni semestru
I
Ćwiczenia laboratoryjne — co dwa
tygodnie, przez cały semestr
Ocena końcowa obliczana na
podstawie ilości punktów za
wykonanie:
I
at
yk
iw
yd
zia
łu
Język JavaScript
AG
H
w
K
Organizacja przedmiotu
Dr inż. Stanisław Polak
I
Grupa Systemów Komputerowych
fo
rm
http://www.icsr.agh.edu.pl/~polak/
en
tó
w
In
I
Strona przedmiotu:
http://www.icsr.agh.edu.pl/
~polak/jezyki/js/
1. HTML5, CSS3 oraz framework
Bootstrap
2. JavaScript — typy danych,
tworzenie grafik 2D
3. Standard DOM
4. Serwer „Node.js”
5. Framework Express – podstawy
6. Technologia AJAX
7. Biblioteka programistyczna jQuery
er
ia
ły
dl
a
st
ud
I
Zestawu zadań
programistycznych,
przeznaczonych do wykonania
na zajęciach
Zestawu zadań domowych (dla
chętnych) — termin oddania:
następne zajęcia
Plan ćwiczeń
1
2
M
at
Zagadnienia wstępne
Zagadnienia wstępne
Model klient-serwer
Ogólne zasady tworzenia poprawnych stron WWW
I
I
Formatowanie 6∈ informacja
Najprostsze środki
I
I
Serwer
Klient
Protokół
Port
Adres IP
HTML + CSS
HTML + CSS + JavaScript
1 <! DOCTYPE html>
2 <html lang=" pl ">
3
<head>
4
<meta charset=" utf -8 ">
5
<title>Witaj Ś wiecie</ title>
6
<link rel=" stylesheet " href=" main . css " />
7
</ head>
8
<body>
9
<main>
10
<h1>Witaj Ś wiecie</ h1>
11
<span class=" name ">SP</ span> tutaj by ł .
12
</ main>
13
<f o o t e r>Stanis ł aw Polak</ f o o t e r>
14
</ body>
15 </ html>
1 main ,
footer {
2
display : block ;
3
background : gray ;
4
padding : 10 px ;
5
margin : 1 px ;
6 }
7 . name {font−family : arial , verdana , sans−serif ;}
main.css
HTML
3
4
Podstawy języka JavaScript
Wstęp
Ogólna charakterystyka
Wstęp
JavaScript a Java
Ważniejsze różnice
I
I
JavaScript (JS) — skryptowy język programowania, stworzony przez firmę
Netscape, początkowo stosowany na stronach internetowych po stronie
klienta.
ECMAScript — rdzeń dla:
I
I
I
I
I
JavaScript
JScript
ActionScript
TypeScript
I
Kompilowany przed wykonaniem
I
Oparty na klasach
I
Kod niezależny od HTML
I
Deklaracja typu zmiennej —
obligatoryjna dla każdej zmiennej
przed jej użyciem
I
Odwołania do obiektów i funkcji
sprawdzane na etapie kompilacji
Zastosowania
I
I
I
JavaScript
Java
Strony WWW (po stronie klienta)
Samodzielne aplikacje
Aplikacje internetowe (po stronie serwera)
I
Interpretowany na komputerze
klienta
I
Oparty na prototypach
I
Kod zagnieżdżony w HTML
I
Deklaracja typu zmiennej — nie
występuje
I
Odwołania do obiektów i funkcji
sprawdzane w czasie wykonania
skryptu
5
6
Wstęp
Wstęp
Pierwszy skrypt JS
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>
Osadzanie kodu JS
Rysunek: Wynik wykonania skryptu JS po
zakończeniu renderowania strony WWW
1
2
3
4
5
6
7
<!−− <script type=" text / javascript ; version = x . x "> −−>
<script type=" text / javascript ">
<!−−
Tre ś ć s k r y p t u J a v a S c r i p t
−−>
</ script>
<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>
Dokument HTML z treścią skryptu JS
Odwołanie do skryptu zewnętrznego
Rysunek: Korzystanie z konsoli JS
7
8
Wstęp
Kolejność wykonywania skryptów
K
w
AG
H
Wypisze:
at
yk
iw
yd
zia
łu
IE
T
1. Skrypt 1
Element "img"jest niedostępny
’document.body’=NULL
2. a.js
’document.body’=NULL
3. Skrypt 2
’document.body’ zawiera elementy: SCRIPT,
4. b.js
Element "img"jest niedostępny.
SCRIPT,
5. <Wyświetlenie obrazka ’obrazek.jpg’>
6. Skrypt 3
Element "img"jest dostępny.
SCRIPT, IMG, SCRIPT,
7. c.js
Element "img"jest dostępny.
SCRIPT, IMG, SCRIPT, SCRIPT,
8. Skrypt 4
Element "img"jest dostępny
SCRIPT, IMG, SCRIPT, SCRIPT,
In
fo
rm
Źródło: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
info ( ’<nazwa p l i k u> ’ ) ;
dl
a
1
st
ud
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Asynchroniczne lub odroczone wykonywanie skryptów zewnętrznych
<! DOCTYPE html>
<html>
<head>
<meta h t t p−e q u i v=" Content - Type " content=" text / html ; charset = UTF -8 ">
<script>
function info ( arg ){
var img = document . g e t E l e m e n t s B y T a g N a m e ( " img " ) ;
var nazwy = ’ ’ ;
var img_msg = ’\ nElement " img " jest niedost ę pny\n ’
if ( img . length != 0 )
img_msg = ’\ nElement " img " jest dost ę pny\n ’ ;
if ( document . body ){
x=document . body . childNodes
for ( i =0; i<x . l e n g t h ; i++){
i f ( x [ i ] . nodeType == 1 )
nazwy+=x [ i ] . nodeName+" , " ;
}
c o n s o l e . l o g ( a r g+img msg+" ’ document . body ’ zawiera elementy : "+
nazwy ) ;
}
else
c o n s o l e . l o g ( a r g+img msg+" ’ document . body ’ = NULL " ) ;
}
</script>
<script type=" text / javascript ">info ( " Skrypt 1 " ) ;</ script>
<script type=" text / javascript " src=" a . js "></ script>
</ head>
<body onLoad=" info ( ’ Skrypt 4 ’) ; ">
<script type=" text / javascript " src=" b . js "></ script>
<img src=" obrazek . gif ">
<script type=" text / javascript " src=" c . js "></ script>
</ body>
</ html>
en
tó
w
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Wstęp
ra
ko
wi
e
9
10
M
at
er
ia
ły
a.js, b.js, c.js
Typy danych
Definiowanie zmiennych
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Definiowanie stałych
var x =42;
// a l b o
y = 4 2 ; // N i e z a l e c a n e
var _y = 4 2 ;
var $if =42;
var r ó ż a = 4 2 ;
var 1 a = 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 n u m e r i c
console . log ( y ) ; // W y p i s z e : 42
console . log ( Y ) ; //Y i s n o t d e f i n e d
if =42; // m i s s i n g v a r i a b l e name
var y=42
console . log ( typeof ( y ) ) ; // W y p i s z e : number
y=" 42 " ;
console . log ( typeof ( y ) ) ; // W y p i s z e : s t r i n g
Typy danych
11
literal
1
2
3
4
5
6
7
8
9
10
11
const PI = 3 . 1 4 1 5 9 2 6 ;
console . log ( PI ) ; // W y p i s z e : 3 . 1 4 1 5 9 2 6
console . log ( typeof ( PI ) ) ; // W y p i s z e : number
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 P I
PI=" 3.24 " // Pr ó ba n a d p i s a n i a w a r t o ś c i s t a ł e j
console . log ( PI ) ; // W y p i s z e : 3 . 1 4 1 5 9 2 6 c z y l i p r ó ba n a d p i s a n i a n i e uda ł a s i ę
console . log ( typeof ( PI ) ) ; // W y p i s z e : number
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 P I
var zmienna =1;
const zmienna =1; // r e d e c l a r a t i o n o f v a r z m i e n n a
12
Typy danych
Typy danych
Typy danych
Typy specjalne
Typ „undefined”
I
Specjalne
I
I
I
1
2
3
4
5
6
7
8
9
10
11
12
Proste
I
I
I
I
I
Typ „null”
„null”
„undefined”
„boolean”
„number”
„string”
„symbol”
Złożony
I
Obiektowy
Typy danych
Typy proste
Typy proste i ich obiektowe odpowiedniki
console . log ( pusta −1) ; // W y p i s z e : −1
14
Typy danych
Typ „boolean”
Typ prosty
Obiektowy odpowiednik (Prototyp)
boolean
number
string
Boolean
Number
String
1 console . log ( " 2+2 " ) ; // ”2+2” j e s t t y p u ( 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 ) ; // N i e j a w n a k o n w e r s j a do t y p u ( 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
console . log ( obiektString . length )
7 ∗/
8 var lancuch = " 2+2 " ;
9 console . log ( lancuch . charAt ( 1 ) ) ; // W y p i s z e : +
10 console . log ( lancuch [ 1 ] ) ; // W y p i s z e : +
11 console . log ( lancuch . charCodeAt ( 1 ) ) ; // W y p i s z e : 43
12
13 var liczba = 1 . 9 8 7 6 5 4
14 console . log ( liczba . toPrecision ( 3 ) ) // N i e j a w n a k o n w e r s j a do t y p u ( p r o t o t y p u ) ’
Number ’ => w y p i s z e : 1 . 9 9
var pusta1 = NULL ; //NULL i s n o t d e f i n e d
if ( pusta )
console . log ( " true " ) ;
else
console . log ( " false " ) ;
// W y p i s z e : f a l s e
13
var pusta=null ;
console . log ( typeof ( pusta ) ) ; // W y p i s z e : o b j e c t
1 console . log ( typeof ( abc ) ) ; // W y p i s z e : u n d e f i n e d
2
3 var def ;
4 console . log ( typeof ( def ) ) ; // W y p i s z e : 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 ( )
// W y p i s z e : a r g=u n d e f i n e d
11 console . log ( wynik ) // W y p i s z e : u n d e f i n e d
12
13
14 if ( def === undefined )
15
console . log ( " Ni ez d ef in iowana " ) ;
16 else
17
console . log ( " Zdefiniowana " ) ;
18 // W y p i s z e : 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 // W y p i s z e : f a l s e
25
26 console . log ( def−1) ; // W y p i s z e : NaN
15
1
2
3
4
var martwy=false ;
var zonaty=true ;
console . log ( typeof ( martwy ) ) ; // W y p i s z e : b o o l e a n
zonaty=FALSE ; //FALSE i s n o t d e f i n e d
16
Typy proste
Typy danych
Typy proste
Konwersja do typu „boolean”
1
2
3
4
5
6
Typy proste
Typ „number”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
console . log ( Boolean ( " abc " ) ) ; // W y p i s z e : t r u e
console . log ( Boolean ( " " ) ) ; // W y p i s z e : f a l s e
console . log ( Boolean ( 1 0 ) ) ; // W y p i s z e : t r u e
console . log ( Boolean ( 0 ) ) ; // W y p i s z e : f a l s e
console . log ( Boolean ( null ) ) ; // W y p i s z e : f a l s e
console . log ( Boolean ( undefined ) ) ; // W y p i s z e : f a l s e
1
2
3
4
5
6
7
17
Typy danych
Typy proste
var
var
var
var
var
var
cena = 1 0 . 5 ;
ilosc1 = 2 ;
ilosc2 = 2 . 0 ;
binarna = 0 b101 ; // 0 B101 ;
oktalna = 0 o77 ; // 0O77
szesnastkowa = 0 xFF ; // 0XFF
console . log ( typeof ( cena ) ) ; // W y p i s z e : number
console . log ( typeof ( ilosc1 ) ) ; // W y p i s z e : number
console . log ( typeof ( ilosc2 ) ) ; // W y p i s z e : number
console . log ( ilosc2 ) ; // W y p i s z e : 2
console . log ( typeof ( binarna ) ) ; // W y p i s z e : number
console . log ( binarna ) ; // W y p i s z e : 5
console . log ( typeof ( oktalna ) ) ; // W y p i s z e : number
console . log ( oktalna ) ; // W y p i s z e : 63
console . log ( typeof ( szesnastkowa ) ) ; // W y p i s z e : number
console . log ( szesnastkowa ) ; // W y p i s z e : 255
var ilosc = −Number . MAX_VALUE
console . log ( ilosc ) // W y p i s z e : −1.7976931348623157 e
+308
console . log ( isFinite ( ilosc ) ) // W y p i s z e : t r u e
ilosc ∗= 2
console . log ( isFinite ( ilosc ) ) // W y p i s z e : f a l s e
console . log ( ilosc ) // W y p i s z e : −I n f i n i t y
console . log ( Number . N E G A T I VE _ I N F I N I T Y ) ; // W y p i s z e : −
Infinity
31
ilosc = Number . M AX _ S A FE _I N TE GE R ; // Math . pow
( 2 , 5 3 ) −1;
console . log ( ilosc ) ; // W y p i s z e :
9 0 07 19 9 2 5 47 4 0 9 91
33 console . log ( Number . isSafeInteger ( ilosc ) ) ;
8
// W y p i s z e : t r u e
9 ilosc = Number . MAX_VALUE
34 ilosc1 = Number . M A X_ SA F E_ IN T E G ER + 1
10 console . log ( ilosc ) // W y p i s z e : 1 . 7 9 7 6 9 3 1 3 4 8 6 2 3 1 5 7 e +308
35 console . log ( ilosc1 ) ; // W y p i s z e :
11 console . log ( isFinite ( ilosc ) ) // W y p i s z e : t r u e
9 0 07 19 9 2 5 47 4 0 9 92
12 ilosc ∗= 2
36 console . log ( Number . isSafeInteger ( ilosc1 ) ) ;
13 console . log ( isFinite ( ilosc ) ) // W y p i s z e : f a l s e
14
console
.
log
(
ilosc
)
//
W
y
p
i
s
z
e
:
I
n
f
i
n
i
t
y
37 18ilosc2 = Number . M AX _ S A FE _ I N TE GE R + 2
15 console . log ( Number . P O S I T I VE _ I N F I N I T Y ) ; // W y p i s z e :
38 console . log ( ilosc2 ) ; // W y p i s z e :
Infinity
9 0 07 19 9 2 5 47 4 0 9 92
16
39 console . log ( ilosc1 == ilosc2 ) ; // W y p i s z e :
17 var cena=Number . MIN_VALUE
true , c z y l i okazuje s i ę , ż e ’ i l o s c 1 ’
18 console . log ( cena ) // W y p i s z e : 5 e−324
o r a z ’ i l o s c 2 ’ s ą s o b i e r ówne ! !
19 console . log ( isFinite ( cena ) ) // W y p i s z e : t r u e
40 console . log ( Number . isSafeInteger ( ilosc2
) ) ; proste
Typy danych
Typy
20 cena = cena / 2 ;
21 console . log ( cena ) // W y p i s z e : 0
41
22 console . log ( isFinite ( cena ) ) // W y p i s z e : t r u e
42 ilosc = Number . M IN _ S A FE _I N TE GE R ; //−Number .
23
MAX SAFE INTEGER ;
24 console . log ( Number . NaN ) ; // W y p i s z e : NaN
43 console . log ( ilosc ) ; // W y p i s z e :
25 console . log ( isNaN ( 1 2 3 ) ) ; // W y p i s z e : f a l s e
−9007199254740991
26 console . log ( isNaN ( −1.23) ) ; // W y p i s z e : f a l s e
27 console . log ( isNaN (5−2) ) ; // W y p i s z e : f a l s e
28 console . log ( isNaN ( 0 ) ) ; // W y p i s z e : f a l s e
29 console . log ( isNaN ( " Hello " ) ) ; // W y p i s z e : t r u e
30 document . writln ( isNaN ( " 2005/12/12 " ) ) ; // W y p i s z e : t r u e
1 var nazwisko = " Polak " ;
2 var imie = ’ Stanis ł aw ’ ;
3
4 console . log ( typeof ( nazwisko ) ) ; // W y p i s z e : s t r i n g
5 console . log ( typeof ( imie ) ) ;
// W y p i s z e : s t r i n g
6
7 console . log ( " Imi ę = $ { imie } Nazwisko = $ { nazwisko } " ) ; // W y p i s z e : I m i ę=${i m i e} N a z w i s k o=${n a z w i s k o}
8 console . log ( ’ Imi ę = $ { imie } Nazwisko = $ { nazwisko } ’ ) ; // W y p i s z e : I m i ę=${i m i e} N a z w i s k o=${n a z w i s k o}
9
10 var a = 11 − " 1 " ;
11 console . log ( a ) ; // W y p i s z e : 10
12 var b = 11 + " 1 " ;
13 console . log ( b ) ; // W y p i s z e : 111
14
15 console . log ( typeof ( a ) ) ; // W y p i s z e : number
16 console . log ( typeof ( b ) ) ; // W y p i s z e : s t r i n g
17
18 nazwisko [ 0 ] = ’W ’ ;
19 console . log ( nazwisko ) ; // W y p i s z e ” P o l a k ” , a n i e ” Wolak ”
20
21 nazwisko = ’W ’ + nazwisko . substr ( 1 ) ;
22 console . log ( nazwisko ) ; // T e r a z w y p i s z e ” Wolak ”
32
st
ud
en
tó
w
In
console . log ( Number ( null ) ) ; // W y p i s z e : 0
console . log ( Number ( undefined ) ) ; // W y p i s z e : NaN
console . log ( Number ( false ) ) ; // W y p i s z e : 0
console . log ( Number ( true ) ) ; // W y p i s z e : 1
console . log ( Number ( " 3.14 " ) ) ; // W y p i s z e : 3 . 1 4
console . log ( Number ( " 3.14.1 " ) ) ; // W y p i s z e : NaN
console . log ( Number ( " 3 " ) ) ; // W y p i s z e : 3
console . log ( Number ( " 3 a " ) ) ; // W y p i s z e : NaN
console . log ( Number ( ’0 x10 ’ ) ) ; // W y p i s z e : 16
console . log ( Number ( ’ ’ ) ) ; // W y p i s z e : 0
console . log ( Number ( ’ \ r \ n \ t ’ ) ; // W y p i s z e : 0
at
yk
console . log ( parseInt ( " FF - Firefox " ) ) ; // W y p i s z e : NaN
console . log ( parseInt ( " FF - Firefox " , 1 6 ) ) ; // W y p i s z e : 255
console . log ( parseInt ( " false " ) ) ; // W y p i s z e : NaN
console . log ( parseInt ( " false " , 1 6 ) ) ; // W y p i s z e : 250 − ” f a ” z a m i e n i o n o na l i c z b ę !
fo
rm
console . log ( parseInt ( " 101 " , 2 ) ) ; // W y p i s z e : 5
console . log ( parseInt ( " FF " ) ) ; // W y p i s z e : NaN
console . log ( parseInt ( " FF " , 1 6 ) ) ; // W y p i s z e : 255
iw
yd
zia
łu
IE
T
AG
H
w
console . log ( parseInt ( " 3.14 " ) ) ; // W y p i s z e : 3
console . log ( parseInt ( " 3.94 " ) ) ; // W y p i s z e : 3
console . log ( parseInt ( " 3.94.1 " ) ) ; // W y p i s z e : 3
console . log ( parseInt ( " 3.94 a " ) ) ; // W y p i s z e : 3
console . log ( parseInt ( " a3 .94 " ) ) ; // W y p i s z e : NaN
console . log ( parseFloat ( " 3.14 " ) ) ; // W y p i s z e : 3 . 1 4
console . log ( parseFloat ( " 3.14.1 " ) ) ; // W y p i s z e : 3 . 1 4
console . log ( parseFloat ( ’0 x10 ’ ) ) ; // W y p i s z e : 0
console . log ( parseFloat ( ’ ’ ) ) ; // W y p i s z e : NaN
console . log ( parseFloat ( ’ \ r \ n \ t ’ ) ) ; // W y p i s z e : NaN
er
19
at
ia
ł
y
dl
a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Typ „string”
K
Konwersja do typu „number”
ra
ko
wi
e
Typy danych
20
Typy danych
Typy proste
Typ „string”
Typ „string”
Szablony napisów
Sekwencje specjalne
Oznakowane (otagowane)
1
2
3
Nieoznakowane
1
2
3
4
5
6
7
var a = 2 ;
var napis = ‘ Zmienna ’a ’ ma warto ś ć ${a} , 2+2=
${2+2}\n ‘
console . log ( napis ) ;
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
var napis = ‘ Linia 1
Linia 2 ‘ ;
4
5
6
7
8
9
10
11
12
13
14
function znacznik ( napisy , wart1 , wart2 ){
wynik = " Napis 1:\ t \t ’ "+napisy [ 0 ] + " ’\ n " ;
wynik += " Surowy napis 1:\ t ’ "+napisy . raw [ 0 ] + "
’\ n " ;
wynik += " Warto ś ć 1:\ t \ t "+wart1+" \ n " ;
wynik += " Napis 2:\ t \t ’ "+napisy [ 1 ] + " ’\ n " ;
wynik += " Surowy napis 2:\ t ’ "+napisy . raw [ 1 ] + "
’\ n " ;
wynik += " Warto ś ć 2:\ t \ t "+wart2+" \ n " ;
return wynik ;
}
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
var a = 2 ;
var b = 3 ;
napis = znacznik ‘ a+b=\t${a+b}\n, a*b=${a*b } ‘ ;
Na wyjściu
Zmienna ’a’ ma wartość 2, 2+2=4
Linia 1
Linia 2
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
Konwersja do typu „string”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
\f
I
\n
I
\r
I
\t
I
\v
I
\’
I
\"
I
\\
I
\xXX
I
\uXXXX
Przykład użycia
Typy proste
22
Typy danych
Typ „symbol”
var zywy = true ;
console . log ( typeof ( zywy ) ) ; // W y p i s z e : b o o l e a n
var lancuch=zywy . toString ( ) ;
console . log ( typeof ( lancuch ) ) ; // W y p i s z e : s t r i n g
console . log ( lancuch ) ; // W y p i s z e : t r u e
var liczba = 0 xFF ;
console . log ( 0 xFF . toString ( ) ) ; // W y p i s z e ł a ń c u c h ”255”
liczba = 1 1 ;
console . log ( liczba . toString ( ) ) ; // W y p i s z e ł a ń c u c h ”11”
liczba = 1 1 . 9 ;
console . log ( liczba . toString ( ) ) ; // W y p i s z e ł a ń c u c h ” 1 1 . 9 ”
var liczba =255;
console . log ( liczba . toString ( 2 ) ) ; // W y p i s z e : 11111111
console . log ( liczba . toString ( 1 6 ) ) ; // W y p i s z e : f f
console . log ( String ( null ) ) ; // W y p i s z e ł a ń c u c h ” n u l l ”
console . log ( String ( undefined ) ) ; // W y p i s z e ł a ń c u c h ” u n d e f i n e d ”
console . log ( String ( false ) ) ; // W y p i s z e ł a ń c u c h ” f a l s e ”
console . log ( String ( true ) ) ; // W y p i s z e ł a ń c u c h ” t r u e ”
console . log ( String ( 2 5 5 ) ) ; // W y p i s z e ł a ń c u c h ”255”
console . log ( String ( 3 . 1 4 ) ) ; // W y p i s z e ł a ń c u c h ” 3 . 1 4 ”
\b
I
23
Typy proste
1 console . log ( "a ’\"\ x63 \ ’\ u0105 " ) // W y p i s z e : a ’ ” c ’ ą
21
Typy danych
I
Typy danych
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
symbol1 = Symbol ( ) ;
symbol2 = Symbol ( ) ;
console . log ( typeof ( symbol1 ) ) ;
// s y m b o l
console . log ( symbol1 == symbol2 ) // f a l s e
symbol3 = Symbol ( ’ Opis symbolu ’ ) ;
symbol4 = Symbol ( ’ Opis symbolu ’ ) ;
console . log ( symbol3 ) ; // Symbol ( O p i s s y m b o l u )
console . log ( symbol4 ) ; // Symbol ( O p i s s y m b o l u )
console . log ( symbol3 == symbol4 ) ; // f a l s e
symbol5 = Symbol . for ( " symbol3 " ) ;
symbol6 = Symbol . for ( " symbol3 " ) ;
console . log ( symbol5 ) ; // Symbol ( s y m b o l 3 )
console . log ( symbol6 ) ; // Symbol ( s y m b o l 3 )
console . log ( symbol5 == symbol6 ) ; // t r u e
var symbol7 = Symbol . for ( " uid " ) ;
console . log ( Symbol . keyFor ( symbol7 ) ) ; // ” u i d ”
var symbol8 = Symbol . for ( " uid " ) ;
console . log ( Symbol . keyFor ( symbol8 ) ) ; // ” u i d ”
var symbol9 = Symbol ( " uid " ) ;
console . log ( Symbol . keyFor ( symbol9 ) ) ; // u n d e f i n e d
24
Typy proste
Typy danych
Typ złożony
Obiekty
Typy danych
Przykładowe obiekty wbudowane
Hierarchia obiektów wbudowanych
Object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// U t w o r z e n i e i n s t a n c j i t y p u ( wbudowanego ) ’ O b j e c t ’
var obiekt1 = new Object ( ) ;
var obiekt2 = {a : 1 , b : 1 0 } ;
console . log ( typeof ( obiekt1 ) ) ; // W y p i s z e : o b j e c t
console . log ( typeof ( obiekt2 ) ) ; // W y p i s z e : o b j e c t
// Dost ę p do w ł a s n o ś c i o b i e k t u
console . log ( obiekt1 . constructor ) ; // W y p i s z e : f u n c t i o n O b j e c t ( ) { [ n a t i v e c o d e ] }
console . log ( obiekt1 [ ’ constructor ’ ] ) ; // W y p i s z e t o co powy ż e j
console . log ( obiekt2 [ ’ constructor ’ ] ) ; // W y p i s z e t o co powy ż e j
console . log ( obiekt2 . a ) ; // W y p i s z e : 1
console . log ( obiekt2 [ ’b ’ ] ) ; // W y p i s z e : 10
//Uż y c i e s y m b o l u j a k o w ł a s n o ś c i o b i e k t u
a = Symbol ( ) ;
var obiekt3 = { [ a ] : 1 , b : 1 0 }
console . log ( obiekt3 [ a ] ) ;
// 1
console . log ( obiekt3 . a ) ;
// undefined
console . log ( obiekt3 [ ’a ’ ] ) ; // undefined
console . log ( obiekt3 [ ’b ’ ] ) ; // 10
console . log ( obiekt3 . b ) ; // 10
Źródło:
http://www.visualtech.ca/javascript/javascript_object_model.php
25
Typy danych
Obiekt „Array”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var
var
var
var
Typy danych
Obiekt „Map”
tab1 = new Array ( 1 , 2 , 3 ) ; // r ównowa ż ne : v a r t a b 1=A r r a y ( 1 , 2 , 3 )
tab2a = new Array ( 1 0 ) ;
// r ównowa ż ne : v a r t a b 2 a = [ ] ; t a b 2 a . l e n g t h =10;
tab2b = new Array ( " 10 " ) ;
tab3 = [ 4 , ’ abc ’ , 6 ] ;
console . log ( tab1 . length ) ; // W y p i s z e : 3
console . log ( tab2a . length ) ; // W y p i s z e : 10
console . log ( tab2b . length ) ; // W y p i s z e : 1
console . log ( tab1 [ 0 ] ) ; // W y p i s z e : 1
console . log ( tab1 . 0 ) ; // m i s s i n g ) a f t e r a rgu men t l i s t
console . log ( tab2a [ 0 ] ) ; // W y p i s z e : u n d e f i n e d
console . log ( tab2b [ 0 ] ) ; // W y p i s z e : 10
console . log ( tab3 [ 1 ] ) ; // W y p i s z e : abc
console . log ( tab3 [ 5 ] ) ; // W y p i s z e : u n d e f i n e d
var tab4 = new Array ( new Array ( 1 , null , undefined ) , new Array ( ’A ’ , ’B ’ , ’C ’ ) , new Array ( ’x ’ , ’y ’ , ’z ’ ) ) ;
console . log ( tab4 [ 0 ] ) ; // W y p i s z e : 1 , ,
console . log ( tab4 [ 0 ] [ 1 ] ) ; // W y p i s z e : n u l l
var tab1 = new Array ( 1 , 2 , 3 ) ;
var tab2 = [ 4 , 5 , 6 ] ;
console . log ( tab1 ) ; // W y p i s z e : 1 , 2 3
console . log ( tab1 . reverse ( ) ) ; // W y p i s z e : 3 , 2 , 1
var tab3 = tab1 . concat ( tab2 ) ;
console . log ( tab3 ) ; // W y p i s z e : 1 , 2 , 3 , 4 , 5 , 6
console . log ( tab3 . splice ( 1 , 2 ) ) ; // W y p i s z e : 2 , 3
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var mapa = new Map ( ) ;
pustyObiekt = {};
mapa . set ( " napis " , " Warto ś ć zwi ą zana z napisem " ) ;
mapa . set ( 1 , { a : 1 0 } ) ;
mapa . set ( pustyObiekt , 1 ) ;
console . log ( mapa ) ; //Map { n a p i s : ” Warto ś ć z w i ą z a n a z n a p i s e m ” , 1 : O b j e c t ,
Object : 1 }
console . log ( mapa . get ( 1 ) ) ; // O b j e c t { a : 10 }
console . log ( mapa . get ( 2 ) ) ; // u n d e f i n e d
console . log ( mapa . get ( " napis " ) ) ; // ” Warto ś ć z w i ą z a n a z n a p i s e m ”
console . log ( mapa . get ({}) ) ; // u n d e f i n e d
console . log ( mapa . get ( pustyObiekt ) ) ; // 1
console . log ( mapa . size ) ; // 3
mapa . delete ( " napis " ) ;
console . log ( mapa . size ) ; // 2
// I t e r o w a n i e h a s z a
mapa . forEach ( ( wartosc , klucz , mapa ) => {console . log ( " mapa [ "+klucz+" ]= "+wartosc ) }) ;
/∗ W y p i s z e :
”mapa [ 1 ] = [ o b j e c t O b j e c t ] ”
”mapa [ [ o b j e c t O b j e c t ] ] = 1 ”
∗/
// K o n w e r s j a t a b l i c y na h a s z a
var kwTab = [ [ " klucz1 " , " Napis " ] , [ " klucz2 " , 5 ] ] ;
mapa = new Map ( kwTab ) ;
console . log ( mapa ) ; //Map { k l u c z 1 : ” N a p i s ” , k l u c z 2 : 5 }
28
Obiekt „ WeakMap”
Typy danych
Obiekty „Set” oraz „WeakSet”
Różnice w stosunku do „Map”
I Przechowuje słabe odniesienia do klucza
I Kluczami mogą być tylko i wyłącznie obiekty
I Klucze nie są przeliczalne
I Nie można iterować tego obiektu — patrz linia 11
w
AG
H
IE
T
at
yk
iw
yd
zia
łu
7
8
9
10
11
12
fo
rm
In
var zbior = new WeakSet ( ) ;
var element = document . querySelector ( ’ body ’ ) ;
zbior . add ( element ) ;
console . log ( zbior . has ( element ) ) ; // W y p i s z e : t r u e
// J e ś l i u s u n i e m y
element ’ element ’ , to
z o s t a n i e on r ó w n i e ż u s u n i ę t y z n a s z e j
Weakset
element . parentNode . removeChild ( element ) ;
// Usu ń l o k a l n e odwo ł a n i e
element = null ;
console . log ( zbior . has ( element ) ) ; // W y p i s z e :
false
30
er
29
M
at
ia
ły
12
13 // J e ś l i u s u n i e m y j e d e n z e l e m e n t ów , w tym p r z y p a d k u e l e m e n t 2 , z o s t a n i e on r ó
w n i e ż u s u n i ę t y z n a s z e j 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 ) ) ; // W y p i s z e : u n d e f i n e d
1
2
3
4
5
6
en
tó
w
console . log ( mapa . size ) ; // W y p i s z e : u n d e f i n e d
//mapa . f o r E a c h ( ( w a r t o s c , k l u c z , mapa ) => { c o n s o l e . l o g ( ” mapa[”+ k l u c z +”]=”+ w a r t o s c )
}) ;
16
17
18
19
20
21
22
23
24
25
26
27
WeakSet
ud
// Prze chowujemy dwa o b i e k t y w naszym Weakmap
mapa . set ( element1 , ’ window ’ ) ;
mapa . set ( element2 , ’ myelement ’ ) ;
8
9
10
11
12
13
14
15
var zbior = new Set ( ) ;
pustyObiekt = {};
zbior . add ( " napis " ) ;
zbior . add ( " napis " ) ;
zbior . add ({a : 1 0 } ) ;
console . log ( zbior . size ) ; // 2
zbior . forEach ( ( wartosc , klucz , zbior ) => {console .
log ( " zbior [ "+klucz+" ]= "+wartosc ) }) ;
/∗
Wypisze :
” z b i o r [ n a p i s ]= n a p i s ”
” z b i o r [ [ object Object ]]=[ object Object ]”
∗/
zbior . delete ( " napis " )
console . log ( zbior . size ) ; // 1
zbior . forEach ( ( wartosc , klucz , zbior ) => {console .
log ( " zbior [ "+klucz+" ]= "+wartosc ) }) ;
/∗
Wypisze :
” z b i o r [ [ object Object ]]=[ object Object ]”
∗/
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
zbior = new WeakSet ( ) ;
obj1 = {};
obj2 = obj ;
zbior . add ( obj1 ) ;
zbior . add ( obj2 ) ;
console . log ( zbior . has ( obj1 ) ) ;
console . log ( zbior . has ( obj2 ) ) ;
st
//Ź 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−a r e−weakmaps−i n−e s 6/−−>
var mapa = new WeakMap ( ) ;
var element1 = window ;
var element2 = document . querySelector ( ’ body ’ ) ;
K
Set
1
2
3
4
5
6
7
a
1
2
3
4
5
6
7
8
9
10
11
ra
ko
wi
e
Typy danych
dl
Typy danych
Obiekt „RegExp”
Typy danych
Obiekt „Function”
1 function sprawdz ( numer ) {
2
var re = /\d{7}/g ; // ’ g ’ − zwr ó ć w s z y s t k i e p a s u j ą c e f r a g m e n t y , a n i e t y l k o
pierwszy
3
// l u b
4
var re=new RegExp ( " \\ d {7} " , " g " ) ;
5
6
if ( re . test ( numer ) )
7
console . log ( " Prawid ł owy numer telefonu " ) ;
8
else
9
console . log ( " Numer telefonu powinien sk ł ada ć si ę z 7 - u cyfr " ) ;
10 }
11
12 var numer1=" 1234567 " ;
13 var numer2=" 12 -34 " ;
14
15 sprawdz ( numer1 ) ; // W y p i s z e : P r a w i d ł owy numer t e l e f o n u
16 sprawdz ( numer2 ) ; // W y p i s z e : Numer t e l e f o n u p o w i n i e n s k ł ada ć s i ę z 7−u c y f r
1
2
3
4
5
6
var dodawacz = new Function ( " a " , " b " , " return a + b " ) ;
var wynik = dodawacz ( 1 , 2 ) ;
console . log ( wynik ) ; // W y p i s z e : 3
console . log ( dodawacz . length ) ; // W y p i s z e : 2
var obj = {x : 1 , y : 2 } ;
dodawacz = new Function ( " komunikat " , " console . log ( komunikat + ’ ’) ; return this . x
+ this . y " ) ;
7 console . log ( dodawacz . call ( obj ) ) ; // W y p i s z e : u n d e f i n e d 3
8 console . log ( dodawacz . call ( obj , ’ Wartosc = ’ ) ) ; // W y p i s z e : Wartosc=3
Sprawdzanie poprawności formatu numeru telefonu
31
32
Typy danych
Obiekt „Math”
Typy danych
Obiekt „Date”
1 ...
2 <canvas id=" canvas " width=" 400 " height=" 100 ">
3 Twoja przegl ą darka nie obs ł uguje elementu "
canvas "
4 </canvas>
5
6 <script type=" text / javascript ">
7 var canvas = document . getElementById ( " canvas " ) ;
8 if ( canvas . getContext ) {
9
var ctx = canvas . getContext ( ’2 d ’ ) ;
10
var ox = 0 , oy = 5 0 ;
11
var t_min = 0 , t_max = 10∗Math . PI ;
12
var scale = 2 0 , step = 2 0 0 , inc = t_max / step ;
13
14
ctx . beginPath ( ) ;
15
for ( var t=t_min ; t<=t_max ; t+=inc ) {
16
y = scale ∗ Math . sin ( t ) ;
17
x = ( t / t_max ) ∗ canvas . width ;
18
ctx . lineTo ( ox+x , oy−y ) ;
19
}
20
ctx . stroke ( ) ;
21 </script>
22 . . .
1 function JSClock ( ) {
2
var time = new Date ( )
3
var hour = time . getHours ( )
4
var minute = time . getMinutes ( )
5
var second = time . getSeconds ( )
6
var temp = " " + ( ( hour > 1 2 ) ? hour − 12 : hour )
7
if ( hour == 0 )
8
temp = " 12 " ;
9
temp += ( ( minute < 1 0 ) ? " :0 " : " : " ) + minute
10
temp += ( ( second < 1 0 ) ? " :0 " : " : " ) + second
11
temp += ( hour >= 1 2 ) ? " P . M . " : " A . M . "
12
return temp
13 }
14 document . write ( JSClock ( ) ) ; // W y p i s z e : 2 : 2 1 : 4 7 P .M.
Wypisanie aktualnego czasu w formacie 12-godzinnym
Rysowanie wykresu funkcji y = sin(x), dla
x ∈ [0, 10π]
33
Typy danych
Obiekt „navigator”
34
Typy danych
Obiekt „window”
Metody prompt() oraz alert()
1 // Zak ł adamy , ż e ’ n a v i g a t o r . u s e r A g e n t ’ z a w i e r a n a p i s ” M o z i l l a / 4 . 0 ( c o m p a t i b l e ;
MSIE 7 . 0 ; Windows NT 5 . 1 ; . NET CLR 2 . 0 . 5 0 7 2 7 ) ”
2
3 if ( / MSIE (\ d+\.\d+) ; / . test ( navigator . userAgent ) ) { // s p r a w d ź c z y p r z e g l ą d a r k a t o
MSIE x . x ;
4
var ieversion=new Number ( RegExp . $1 ) // $1 z a w i e r a numer w e r s j i , t u : 7 . 0
5
if ( ieversion >=8)
6
document . write ( " You ’ re using IE8 or above " )
7
else if ( ieversion >=7)
8
document . write ( " You ’ re using IE7 . x " )
9
10
11
12
13 }
14 else
15
document . write ( " n / a " )
Rozpoznawanie wersji przeglądarki IE
35
1 <html>
2 <head>
3 <meta http−equiv=" Content - Type " content=" text /
html ; charset = UTF -8 ">
4 <title>Przyk ł ad</title>
5 <script>
6 function w c z y t a j I w y s w i e t l I m i e ( ) {
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="
w c z y t a j I w y s w i e t l I m i e () ; ">Wy ś wietl alert</
button><br>
15 </form>
16 </body>
17 </html>
Otwieranie okna wprowadzania / wyprowadzania
danych
36
Typy danych
Typy danych
Obiekt „window”
Obiekt „window”
Metody setTimeout() oraz clearTimeout()
Metody setInterval() oraz clearInterval()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<meta http−equiv=" Content - Type " content=" text / html ; charset = UTF -8 ">
<title>Przyk ł ad</title>
<script>
function opozn ionyAlert ( time ) {
timeoutID = window . setTimeout ( wyswietl , 2 0 0 0 ) ;
}
function wyswietl ( ) {
window . alert ( " Witaj ś wiecie ! " ) ;
// t i m e o u t I D = window . setTimeout ( w y s w i e t l , 2 0 0 0 ) ;
}
function z a t r z y m aj W yk o n a ni e ( ) {
window . clearTimeout ( timeoutID ) ;
}
</script>
</head>
<body>
<form>
<button type=" button " onClick=" opoznionyAlert () ; ">Wy ś wietl alert</button><br>
<button type=" button " onClick=" z a t rz ym a jW y ko n a n ie () ; ">Anuluj</button>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<script>
function u r u c h o m C y k l i c z n e W y k o n a n i e ( ) {
timeoutID = window . setInterval ( wyswietl , 1 0 0 0 ) ;
}
console . log ( " Witaj ś wiecie ! " ) ;
}
function z a t r z y m a j C y k l i c z n e W y k o n a n i e ( ) {
window . clearInterval ( timeoutID ) ;
}
</script>
</head>
<body>
<form>
<button type=" button " onClick=" u r u c h o m C y k l i c z n e W y k o n a n i e () ">Uruchom</button><br>
<button type=" button " onClick=" z a t r z y m a j C y k l i c z n e W y k o n a n i e () ; ">Anuluj</button>
</form>
</body>
</html>
Co sekundę wypisywany jest komunikat na konsoli
Po upływie 2 sekund wyświetla się okienko alertu
37
Typy danych
38
Typy danych
Obiekt „window”
ra
ko
wi
e
Obiekt „document”
w
AG
H
T
IE
łu
yd
zia
iw
at
yk
fo
rm
In
tó
w
en
function z a t r z y m a j C y k l i c z n e W y k o n a n i e ( ) {
window . cancelAnimationFrame ( requestID ) ;
}
</script>
</head>
<body>
<form>
<button type=" button " onClick=" u r u c h o m C y k l i c z n e W y k o n a n i e () ">Uruchom</button><br>
<button type=" button " onClick=" z a t r z y m a j C y k l i c z n e W y k o n a n i e () ; ">Anuluj</button>
</form>
</body>
</html>
ud
console . log ( " Witaj ś wiecie ! " ) ;
requestID=window . requestAnimationFrame ( wyswietl ) ;
}
1 <html>
2 <head>
3 <meta http−equiv=" Content - Type " content=
" text / html ; charset = UTF -8 ">
4 <title>Przyk ł ad</title>
5 </head>
6 <body>
7 Witaj
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
st
<html>
<head>
<script>
function u r u c h o m C y k l i c z n e W y k o n a n i e ( ) {
requestID=window . requestAnimationFrame ( wyswietl ) ;
}
dl
a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
K
Metody requestAnimationFrame() oraz cancelAnimationFrame()
er
39
at
ia
ł
y
Cyklicznie, podczas odświeżania ekranu, wypisywany jest komunikat
40
Typy danych
Obiekt„form”
Typy danych
Obiekt „Image”
1 <html>
2 <head>
3 <meta http−equiv=" Content - Type " content=" text / html ;
charset = UTF -8 ">
4 <title> document . forms example</title>
6 function sprawdz ( ) {
7 var form = document . forms [ 0 ] ;
8 // v a r form = document . f o r m s . form1 ;
9 // v a r form = document . f o r m s [ ’ form1 ’ ] ;
10 var element = form . elements [ 0 ] ;
11 // v a r element = form . e l e m e n t s . w i e k ;
12 // v a r element = form . e l e m e n t s [ ’ wiek ’ ] ;
13 if ( element . value == " " ){
14
window . alert ( " Pole wiek musi zosta ć wype ł nione " ) ;
15
return false ;
16 }
17 else
18
return true ;
19 }
20 </script>
21 </head>
22 <body>
23 <!−− <form . . .
onSubmit=" return false ; "> −−>
24 <form id=" form1 " action=" " onSubmit=" return sprawdz () ; ">
25 <input name=’ wiek ’ type=’ text ’>
26 <input type=’ submit ’>
27 </form>
28 </body>
29 </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<script language = " JavaScript ">
function preloader ( ) {
duzyObrazek = new Image ( ) ;
duzyObrazek . src = " duzyObrazek . jpg " ;
}
</script>
</head>
<body onLoad=" javascript : preloader () ">
<a href=" # " onMouseOver=" javascript : document .images[0]. src = ’ duzyObrazek . jpg ’ ">
<!−−
lub tak :
<a href=" # " onMouseOver=" javascript : document . img01 . src = ’ duzyObrazek . jpg ’ ">
−−>
<img name=" img01 " src=" innyObrazek . jpg "></a>
</body>
</html>
Wstępne ładowanie dużego obrazka
Wstrzymanie wysyłki formularza
Typy danych
Obiekt „location”
1
2
3
4
5
6
41
42
Typy danych
Obiekt „history”
if ( window . location . protocol == " http : " ) {
var resztaUrl = window . location . href . substr ( 5 ) ;
location . href = " https : " + resztaUrl ;
}
</script>
1 history . back ( ) ; // r ównowa ż ne k l i k n i ę c i u p r z y c i s k u
2 history . go (−1) ; // r ównowa ż ne h i s t o r y . b ac k ( ) ;
Przekierowanie do bezpiecznego protokołu HTTPS
43
44
’ Wstecz ’
Typy danych
Obiekt „screen”
Operatory
Operatory „odziedziczone” z języka Java
Dokładnie takie same jak w
Java
1 if ( screen . pixelDepth < 8 ) {
2
// u ż y c i e , , n i s k o −k o l o r o w e j ’ ’ w e r s j i s t r o n y
3 } else {
4
// u ż y c i e , , pe ł no−k o l o r o w e j ’ ’ w e r s j i s t r o n y
5 }
Przecinkowy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
I
Warunkowy (?:)
I
Bitowe (&, |, ^, ~, <<, >>,
>>>)
I
Logiczne (&&, ||, !)
I
Łańcuchowy (+)
I
Przypisania (=, *=,/=, %=,
+=, -=, <<=, >>=, >>>=,
&=, ^=, |=)
I
Typu (instanceof)
I
new oraz this
Prawie takie same jak w Java
I
Specjalne
Porównania — dodatkowe: === oraz !==
1 document . write ( true == 1 ) ; // W y p i s z e : t r u e , gdy ż
’ t r u e ’ j e s t k o n w e r t o w a n e do 1 a n a s t ę p n i e
p o r ó wnywane
2 document . write ( " 1 " == 1 ) ; // W y p i s z e : t r u e , gdy ż
1 j e s t k o n w e r t o w a n e do ”1” a n a s t ę p n i e
p o r ó wnywane
3 document . write ( " 1 " === 1 ) ; // W y p i s z e : f a l s e
4 document . write ( " 1 " !== 1 ) ; // W y p i s z e : t r u e
5 document . write ( 1 === 1 ) ; // W y p i s z e : t r u e
Dodatkowe operatory porównania
46
Operatory
Operator in
a=1 , b =2;
document . write ( a ) ; // W y p i s z e : 1
document . write ( b ) ; // W y p i s z e : 2
for ( var i = 0 , j = 9 ; i <= 9 ; i++, j−−)
document . writeln ( " a [ " + i + " ][ " + j + " ] " ) ; /∗ W y p i s z e :
a[0][9]
a[1][8]
a[2][7]
a[3][6]
a[4][5]
a[5][4]
a[6][3]
a[7][2]
a[8][1]
a[9][0]
∗/
Arytmetyczne (+, -, *, /,
++, --, %)
45
Operatory
I
47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var drzewa = new Array ( " sekwoja " , " cedr " , " d ą b " , " klon " ) ;
0 in drzewa ;
// z w r a c a t r u e
3 in drzewa ;
6 in drzewa ;
// z w r a c a f a l s e
" klon " in drzewa ;
// z w r a c a f a l s e ( n a l e ż y poda ć numer i n d e k s u ,
// a n i e w a r t o ś ć z n a j d u j ą c ą s i ę po podanym i n d e k s e m )
" length " in drzewa ; // z w r a c a t r u e ( l e n g t h j e s t w ł a s n o ś c i ą A r r a y )
// O b i e k t y p r e d e f i n i o w a n e
" PI " in Math ;
var mojString = new String ( " koral " ) ;
" length " in mojString ;
// O b i e k t y
var auto =
" marka " in
" model " in
uż ytkownika
{marka : " Honda " , model : " Accord " , rok : 1 9 9 8 } ;
auto ;
auto ; // z w r a c a t r u e
48
Specjalne
Specjalne
var drzewa = new Array ( " sekwoja " , " cedr " , " d ą b " , " klon " ) ;
document . write ( drzewa . length ) ; // W y p i s z e : 4
document . write ( drzewa [ 2 ] ) ; // W y p i s z e : d ą b
delete drzewa [ 2 ] ;
document . write ( drzewa . length ) ; // W y p i s z e : 4
document . write ( drzewa [ 2 ] ) ; // W y p i s z e : u n d e f i n e d
K
w
AG
H
IE
T
mojaFun = new Function ( " 5 + 2 " ) ;
ksztalt = " okr ą g ł y " ;
rozmiar = 1 ;
dzis = new Date ( ) ;
typeof mojaFun ;
// z w r a c a ” f u n c t i o n ”
typeof ( ksztalt ) ;
// z w r a c a ” s t r i n g ”
typeof rozmiar ;
// z w r a c a ” number ”
typeof dzis ;
// z w r a c a ” o b j e c t ”
typeof nieIstnieje ; // z w r a c a ” u n d e f i n e d ”
typeof true ; // z w r a c a ” b o o l e a n ”
typeof null ; // z w r a c a ” o b j e c t ”
typeof 6 2 ;
// z w r a c a ” number ”
typeof ’ Hello world ’ ; // z w r a c a ” s t r i n g ”
typeof Math ;
// z w r a c a ” o b j e c t ”
typeof Array ;
// z w r a c a ” f u n c t i o n ”
drzewa [ 3 ] = undefined ;
if ( 2 in drzewa )
document . write ( " Element o indeksie 2 istnieje w tablicy " ) ;
if ( 3 in drzewa )
document . write ( " Element o indeksie 3 istnieje w tablicy " ) ;
// W y p i s z e : E l e m e n t 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
49
50
M
at
er
ia
ły
dl
a
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var
var
var
var
at
yk
iw
yd
zia
łu
9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
en
tó
w
7
8
x = 42;
var y = 4 3 ;
obj = new Number ( ) ;
obj . h = 4 ;
delete x ;
// z w r a c a t r u e (moż na u sun ą ć z mien n ą j e ż e l i z d e f i n i o w a n o j ą
niejawnie )
delete y ;
// z w r a c a f a l s e ( n i e moż na us un ą ć 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ż y c i u ’ var ’ )
delete Math . PI ; // z w r a c a f a l s e ( n i e moż na us un ą ć p r e d e f i n i o w a n y c h w ł a s n o ś c i )
delete obj . h ; // z w r a c a t r u e (moż na u su n ą ć w ł a ś c i w o ś c i z d e f i n i o w a n e p r z e z u ż
ytkownika )
delete obj ;
// z w r a c a t r u e (moż na u su n ą ć z mien n ą j e ż e l i z d e f i n i o w a n o j ą
niejawnie )
ud
6
Operatory
Operator void
Specjalne
Instrukcje
Instrukcje „odziedziczone” z języka Java
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>
Specjalne
Operator typeof
st
1
2
3
4
5
Operatory
fo
rm
Operator delete
ra
ko
wi
e
Operatory
In
51
I
Blokowa ({})
I
Warunkowa (if)
I
break oraz continue
I
Wyboru (switch)
I
Pętle (while, do oraz for)
52
Instrukcje
Instrukcja for ... in
1 var auto = {marka : " Ferrari " , kolor : "
czerwony " , ilosc_drzwi : 2 } ;
2 for ( licznik in auto )
3
console . log ( auto [ licznik ] ) ;
Instrukcje
Instrukcja for ... of
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
Iterowanie obiektu
Na wyjściu
Ferrari
czerwony
2
Na wyjściu
tab[0]=1
tab[1]=2
tab[2]=3
tab[nowaWlasnosc]=123
53
Instrukcje
Instrukcja with
1 var tab = new Array ( ’a ’ , 2 , 3 ) ;
2 tab . nowaWlasnosc = ’b ’ ;
3 for ( licznik of tab )
4
console . log ( licznik ) ;
1
2
3
4
5
6
7
8
var mapa = new Map ( ) ;
pustyObiekt = {};
mapa . set ( " napis " , " co ś " ) ;
mapa . set ( 1 , { a : 1 0 } ) ;
mapa . set ( pustyObiekt , 1 ) ;
for ( var [ klucz , wartosc ] of mapa ) {
console . log ( klucz + " = " + wartosc ) ;
}
Na wyjściu
Na wyjściu
a
2
3
"napis = coś"
"1 = [object Object]"
"[object Object] = 1"
54
Instrukcje
Obsługa wyjątków
Instrukcje throw, try, catch oraz finally
1
2
3
4
5
6
7
8
var auto = {marka : " Ferrari " , kolor : " czerwony " , ilosc_drzwi : 2 } ;
marka = " Fiat " ;
with ( auto ) {
console . log ( marka ) ; // W y p i s z e : F e r r a r i
console . log ( kolor ) ; // W y p i s z e : c z e r w o n y
console . log ( ilosc_drzwi ) ; // W y p i s z e : 2
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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 ą c e g o w y j ą t e k
function Wyjatek ( komunikat ) {
this . komunikat=komunikat ;
this . nazwa=" Ujemna " ;
}
try{
var wiek = −1;
if ( wiek <0){
var wyjatek=new Wyjatek ( " Wiek nie mo ż e by ć liczb ą ujemn ą " ) ;
throw wyjatek ;
}
console . log ( " To ju ż si ę nie wypisze " ) ;
}
catch ( e if e . nazwa ==" Ujemna " ) { console . log ( e . komunikat ) ; }
catch ( e ) {/∗ o b s ł uga w y j ą t k ów , k t ó r y c h wcze ś n i e j n i e p r z e c h w y c o n o ∗/}
finally{/∗ i n s t r u k c j e , k t ó r e maj ą by ć z a w s z e wykonane ∗/}
Na wyjściu
Wiek nie może być liczbą ujemną
55
56
Funkcje
Funkcje
I
I
Funkcje
Funkcje anonimowe
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 w a r t o ś c i
18 [ x , y , z ] = ( function f ( ) { return [ 1 , 2 , 3 ] }) ( ) ;
// J e d n o c z e s n e d e f i n i o w a n i e i wywo ł a n i e
funkcji
19 console . log ( x ) ; // W y p i s z e : 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 o f c o n s t s t a ł a
24 function zmienna ( ){}
25 zmienna ( ) ; // z m i e n n a i s n o t a f u n c t i o n
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 ) ; // W y p i s z e : 1
11 console . log ( auto1 . marka ) ; // W y p i s z e : F e r r a r i
13 zmien ( zmienna , auto1 , auto2 ) ;
14 console . log ( zmienna ) ; // W y p i s z e : 1
15 console . log ( auto1 . marka ) ; // W y p i s z e : F i a t
Przekazywanie typów prostych oraz złożonych
function Osoba ( ) {
// 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 ’
j a k o i n s t a n c j ę samego s i e b i e
this . wiek = 0 ;
this . placa = 0 ;
setInterval ( function ( ) {
// T u t a j ’ 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 ’
zdefiniowanego w konstruktorze
Osoba
this . wiek++;
console . log ( " Wiek = "+this . wiek ) ;
}, 1000) ;
setInterval ( ( ) => {
this . placa++;// T u t a j ’ t h i s ’ j e s t
o b i e k t e m Osoba
console . log ( " P ł aca = "+this . placa ) ;
}, 1000) ;
}
var osoba = new Osoba ( ) ;
1
2
1 // F u n k c j a 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 ’ ) ) ; // W y p i s z e : ” H e l l o w o r l d ”
7 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
8 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
9 // F u n k c j a j a k o z m i e n n a
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 ’ ) ) ; // W y p i s z e : ” H e l l o w o r l d ”
26 hello3 ( ) ; // W y p i s z e : ” W i t a j ”
27
//
”Ś w i e c i e
3
4
5
6
7
8
9
10
11
12
13
14
15
Leksykalne this
Na wyjściu
Wiek=NaN
Płaca=1
Wiek=NaN
Płaca=2
...
Przykładowe funkcje
57
58
Funkcje
Funkcje
K
w
AG
H
T
IE
łu
yd
zia
iw
Źródło: http://davidshariff.com/blog/javascript-scope-chain-and-closures/
er
59
at
ia
ł
y
Przykład użycia domknięcia
at
yk
1 function mnoze nie_prze z ( 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 d w i e z m i e n n e :
4
y − d o s t ę pn ą d l a u ż y t k o w n i k a
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_prz ez ( 5 ) ; // p a r a m e t r o w i ’ x ’ j e s t p r z y p i s y w a n a
warto ś ć 5
12
13 print ( i loczyn _5_prze z ( 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
fo
rm
var mojaFunkcja = utworzFunkcje ( ) ;
mojaFunkcja ( ) ; // W y p i s z e : P o l a k
In
}
tó
w
function wyswietlNazwe ( ) {
console . log ( nazwa ) ;
}
return wyswietlNazwe ;
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 ( ) ; // W y p i s z e : 6
en
function utworzFunkcje ( ) {
var nazwa = " Polak " ;
ud
1
2
3
4
5
6
7
8
9
10
11
st
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 : P o l a k
Łańcuch zasięgu
dl
a
Domknięcia
ra
ko
wi
e
60
Funkcje
Zmienne w funkcji
Funkcje ze zmienną liczbą argumentów
1 function fun ( x ){
2
a = ++x ;
3
b = 10;
4 }
5 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
6 a = 0 ; // <=> v a r a = 0 ;
8 console . log ( b ) ; // b i s n o t d e f i n e d
9 fun ( a ) ;
11 console . log ( b ) ; // W y p i s z e : 10
1 let a =1;
3 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
4 for ( let i = 0 ; i<10; i++) {
5
console . log ( i ) ;
6 // W y p i s z e : 1 , 2 , 3 , 4 . . . 9
7 }
8 console . log ( i ) ; // i i s n o t d e f i n e d
Wyrażenie ’let’
Funkcje
1 function fun ( x ){
2
var a = ++x ;
3
var b = 1 0 ;
4 }
5 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
6 a = 0 ; // <=> v a r a = 0 ;
9 fun ( a ) ;
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 z m i e n n a ’ a ’ . Z a k r e s − wnę t r z e
bloku ’ i f ’
7
var b = 1 1 ; // t a sama z m i e n n a
’ b ’ co wy ż e j . Z a k r e s
− wnę t r z e f u n k c j i ’ fun ’
8
console . log ( a ) ;
// W y p i s z e : 10
9
console . log ( b ) ;
// W y p i s z e : 11
10
}
11
console . log ( a ) ; // W y p i s z e : 3
12
console . log ( b ) ; // W y p i s z e : 11
13 }
14 fun ( ) ;
1 function wypisz ( ) {
2
// p r z e j d ź po w s z y s t k i c h a r g u m e n t a c h
3
for ( var i =0; i<arguments.length ; i++)
4
console . log ( arguments [ i ] ) ;
5 }
6
7 wypisz ( " A " , " B " , " C " ) ;
Na wyjściu
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 ) ; //
S y n t a x E r r o r : ’ arguments ’ o b j e c t
may n o t be u s e d i n c o n j u n c t i o n
with a r e s t parameter
8 }
9
10 wypisz ( " A " , " B " , " C " ) ;
Na wyjściu
A
B
C
A
true
pozostale[0]=B
pozostale[1]=C
’let’ kontra ’var’
61
Obiektowy model dokumentu HTML
62
Document Object Model
Podstawowe własności węzłów
I
Document Object Model
(DOM) — obiektowy model
dokumentu.
Drzewo DOM
/
I
Dokument — drzewo obiektów
I
Interfejs programowy (API) dla
dokumentów HTML i XML
I
1
2
3
4
5
6
7
8
9
10
11
12
13
nodeType
Node.ELEMENT NODE (1)
Atrybut
Node.ATTRIBUTE NODE (2)
Text
Node.TEXT NODE (3)
nodeName
Nazwa
znacznika
dużymi
literami
Nazwa atrybutu
#text
Komentarz
Node.COMMENT NODE (8)
#comment
Dokument
Node.DOCUMENT NODE (9)
#document
html
Zbiór własności i metod do
manipulacji w/w dokumentami
<html>
<head></ head>
<body>
<br>
<div>
<pre>Zwyk ł y tekst</ pre>
<p align =’ l e f t ’>
<hr />
</ p>
</ div>
<!−− Komentarz −−>
</ body>
</ html>
Typ węzła
Element
head
br
body
div
Komentarz
pre
Zwykły tekst
p
align=’left’
hr
Dokument HTML
63
64
nodeValue
null
Wartość atrybutu
Tekst
stanowiący
jego
treść
Treść komentarza
null
Przykłady
Przykłady
Wyświetlenie informacji o pojedynczym węźle element
Wyświetlenie informacji o kilku węzłach element
Metody getElementById() / querySelector()
Metody getElementsByTagName() / querySelectorAll()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<title>Przyk ł ad</ title>
function start ( ) {
var element = document . getElementById ( " elem1 " ) ;
#lub
var element = document . querySelector ( " # elem1 " ) ;
window . alert ( element ) ; // Wypisze : [ object HTML BodyEle ment ]
window . alert ( element . nodeType ) ; // Wypisze : 1
window . alert ( element . nodeName ) ; // Wypisze : BODY
window . alert ( element . nodeValue ) ; // Wypisze : null
}
</ script>
</ head>
<body id=" elem1 " onLoad=" start () ; ">
</ body>
</ html>
65
<html>
<head>
var elementy = document . getElementsByTagName ( " td " ) ;
#lub
var elementy = document . querySelectorAll ( " tr td " ) ;
window . alert ( elementy ) ; // Wypisze : [ object HTMLCollectio n ]
window . alert ( elementy . length ) ; // Wypisze : 4
window . alert ( elementy [ 0 ] ) ; // Wypisze : [ object H T M L T a b l e C e l l E l e m e n t ]
window . alert ( elementy [ 0 ] . nodeType ) ; // Wypisze : 1
window . alert ( elementy [ 0 ] . nodeName ) ; // Wypisze : TD
window . alert ( elementy [ 0 ] . nodeValue ) ; // Wypisze : null
window . alert ( elementy [ 1 ] ) ; // Wypisze : [ object H T M L T a b l e C e l l E l e m e n t ]
window . alert ( elementy [ 1 ] . nodeType ) ; // Wypisze : 1
window . alert ( elementy [ 1 ] . nodeName ) ; // Wypisze : TD
window . alert ( elementy [ 1 ] . nodeValue ) ; // Wypisze : null
}
</ script>
</ head>
<body onLoad=" start () ; ">
<table>
<tr><td>a</ td><td>b</ td></ tr>
<tr><td>c</ td><td>d</ td></ tr>
</ table>
</ body>
</ html>
Przykłady
66
Przykłady
Pobieranie potomków węzłów element oraz tekst
Obsługa atrybutów
Własność childNodes
Własność attributes oraz metody setAttribute() oraz removeAttribute()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
var elementy = document . g e t E l e m e n t s B y T a g N a m e ( " tr " ) ;
for ( var i=0 ; i<e l e m e n t y . l e n g t h ; i++){
var potomkowie = e l e m e n t y [ i ] . childNodes ; // o b i e k t ’ potomkowie ’ j e s t t y p u , , N o d e L i s t ’ ’
f o r ( v a r j =0; j<potomkowie . l e n g t h ; j ++){
v a r l a n c u c h = potomkowie [ j ] . nodeName + " : " + potomkowie [ j ] . childNodes [ 0 ] . n o d e V a l u e ;
window . a l e r t ( l a n c u c h ) ;
}
}
}
/∗ W y p i s z e :
TD: a
TD: b
TD: c
TD: d
∗/
</ s c r i p t>
</ head>
<body onLoad=" start () ; ">
<table border=" 1 ">
</ table>
</ body>
</ html>
67
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<meta h t t p−e q u i v=" Content - Type " content=" text / html ; charset = UTF -8 ">
function zmien ( grubosc ){
var element = document . getE lementB yId ( " elem1 " ) ; // obiekt typu , , HTMLTableElement ’ ’
window . alert ( element . getAttribute ( ’ border ’ ) ) ; // Wypisze : 1
window . alert ( element . getAttribute ( ’ id ’ ) ) ; // Wypisze : elem1
element . setAttribute ( ’ border ’ , grubosc ) ;
// Mo ż na i tak
var atrybuty = element . attributes ; // obiekt typu , , NamedNodeMap ’ ’
window . alert ( atrybuty . border . value ) ; // Wypisze : 1
window . alert ( atrybuty . id . value ) ; // Wypisze : elem1
atrybuty . border . value = grubosc ;
}
function usun ( ){
var element = document . getE lementB yId ( " elem1 " ) ;
element . removeAttribute ( ’ border ’ ) ;
}
</ script>
</ head>
<body>
<table border=" 1 " id=" elem1 ">
</ table>
<form>
<input type=" button " value=" Zmie ń grubo ś ć " onClick=" zmien (2) ; ">
<input type=" button " value=" Usu ń " onClick=" usun () ; ">
</ form>
</ body>
</ html>
68
Przykłady
Przykłady
Wstawienie nowej komórki tabeli na początku wiersza
Metody createElement() , createTextNode() oraz appendChild()
Metoda insertBefore()
id=’wiersz1’
td
td
a
b1
22
23
24
AG
H
IE
T
at
yk
iw
yd
zia
łu
a
d
b
...
tr
id=’wiersz1’
td
td
td
b1
a
b
70
er
69
M
at
ia
ły
b
td
b1
c
fo
rm
tr
11
12
13
14
15
16
17
18
19
20
21
b
d
In
10
...
en
tó
w
b1
a
c
ud
b
d
<html>
<head>
function wstaw ( ) {
var nowyTD = document . createElement ( " td " ) ;
var nowyTekst = document . createTextNode ( " b1 " ) ;
nowyTD . appendChild ( nowyTekst ) ;
var element = document . getElementById ( ’ wiersz1
’) ;
var refTD = element . g e t E l e m e n t s B y T a g N a m e ( " td " )
. item ( 0 ) ;
element . insertBefore ( nowyTD , refTD ) ;
}
</ script>
</ head>
<body>
<tr id =’ w i e r s z 1 ’><td>a</ td><td>b</ td></ tr>
</ table>
<form>
<input type=" button " value=" Wstaw " onClick="
wstaw () ; ">
</ form>
</ body>
</ html>
st
21
22
23
a
c
1
2
3
4
5
6
7
8
9
b
d
a
10
11
12
13
14
15
16
17
18
19
20
a
c
<html>
<head>
function wstaw ( ) {
var element = document . getElementById ( " wiersz1
") ;
element . appendChild ( nowyTD ) ;
}
</ script>
</ head>
<body>
<tr id=" wiersz1 "><td>a</ td><td>b</ td></ tr>
</ table>
<form>
<input type=" button " value=" Wstaw " onClick="
wstaw () ; ">
</ form>
</ body>
</ html>
dl
1
2
3
4
5
6
7
8
9
w
K
Wstawienie nowej komórki tabeli na końcu wiersza
ra
ko
wi
e
Przykłady
Przykłady
Zastąpienie komórki tabeli
Dostęp do stylów CSS
Metoda replaceChild()
Obiekt „style”
1 <html>
2 <meta h t t p−e q u i v=" Content - Type " content=" text /
html ; charset = UTF -8 ">
3 <head>
4 <title>Przyk ł ad</ title>
6 function zastap ( ) {
7
8
9
10
var element = document . getE lementById ( ’ wiersz1
’) ;
11
var refTD = element . g e t E l e m e n t s B y T a g N a m e ( " td " )
. item ( 0 ) ;
12
element . replaceChild ( nowyTD , refTD ) ;
13 }
14 </ script>
15 </ head>
16 <body>
17 <table border=" 1 ">
18 <tr id =’ w i e r s z 1 ’><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>
a
c
b
d
I
Cecha CSS 7−→ własność obiektu
„style”
I
...
I
I
background-color 7−→
style.backgroundColor
border-top-width 7−→
style.borderTopWidth
Wyjątki:
I
tr
I
I
id=’wiersz1’
71
td
td
b1
b
float 7−→ style.cssFloat
class 7−→ style.className
for 7−→ style.htmlFor
a
c
b
d
1 <html>
2 <head>
3 <meta h t t p−e q u i v=" Content - Type " content=
" text / html ; charset = UTF -8 " />
6 function kolor ( wartosc ) {
7
var element = document . getElementBy Id (
" komorka1 " ) ;
8
element . style . b ackgro undCo lor = wartosc ;
9 }
10 </ script>
11 </ head>
12 <body>
14 <tr><td id=" komorka1 ">a</ td><td>b</ 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>
72
Przykłady
Podstawowe zagadnienia związane z usługą WWW
Zmiana koloru tła po kliknięciu komórki tabeli
Model klient-serwer
Obsługa zdarzeń
Usługa WWW
1 <!DOCTYPE html>
2 <meta charset=" UTF -8 ">
4
function zmienKolor ( ) {
5
var komorka = document . getElementById ( " komorka " ) ;
6
komorka . style . b ackgro undColo r=’ red ’ ;
7
}
8
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
9
function wyswietlAlert ( ) {
10
alert ( " wyswietlAlert () " ) ;
11
}
12
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
13
function load ( ) {
14
var el = document . getElementBy Id ( " tabela " ) ;
15
el . addEventListener ( " click " , wyswietlAlert , false ) ; // N a j p i e r w 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 p a r a m e t r b ę d z i e
’ t r u e ’ t o 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 . getElementBy Id ( " 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>
73
Serwer WWW
Port
Adres IP
Przeglądarka WWW
Protokół
74
Wybrane komendy (metody) protokołu HTTP
Wysyłanie danych z formularza HTML
Komenda „POST”
Komenda „GET”
1 GET / index . html HTTP / 1 . 1
2 Host : www . icsr . agh . edu . pl
3
1
2
3
4
5
POST / cgi−bin / search . cgi HTTP / 1 . 1
Host : www . icsr . agh . edu . pl
Content−Length : 46
query=alpha+complex&casesens=false&cmd=
submit
Żądanie
1
2
3
4
5
6
7
8
9
10
HTTP / 1 . 1 200 OK
Date : Mon , 09 Aug 2013 1 7 : 0 2 : 0 8 GMT
Server : Apache / 2 . 4 . 4 ( UNIX )
Content−Type : text / html ; charset=utf−8
<! DOCTYPE html>
<html>
...
</ html>
Odpowiedź
Żądanie
1
2
3
4
5
6
7
8
9
10
11
HTTP / 1 . 1 200 OK
Date : Mon , 09 Aug 2013 1 7 : 0 2 : 2 0 GMT
Server : Apache / 2 . 4 . 4 ( UNIX )
Content−Type : text / html ; charset=utf−8
Connection : close
Zatwierdzanie danych 7−→ kodowanie 7−→ wysyłanie do serwera WWW
1 <form method =" ... "
2
...
3 </ form>
I
GET
I
POST
enctype =" ... " a c t i o n=" ... ">
I
application/x-www-formurlencoded
I
multipart/form-data
<! DOCTYPE html>
<html>
...
</ html>
Odpowiedź
75
76
Kodowanie „application/x-www-form-urlencoded”
Kodowanie „multipart/form-data”
Przykład
Przykład
1
2
3
4
1
2
3
4
5
<form action=" http :// www . serwer . com / skrypt ">
Login : <input name=" login " type=" TEXT "><br>
Has ł o : <input name=" haslo " type=" PASSWORD ">
</ form>
Dokument HTML
Login:
Hasło:
Jan
Kowalski (Nowak)
1 login=Jan&haslo=Kowalski+%28Nowak%29
Zakodowane dane
Jan
Kowalski (Nowak)
<form action=" ... " method=" POST " e n c t y p e=" multipart / form - data ">
<input name=" login " type=" TEXT ">
<input name=" haslo " type=" PASSWORD ">
<input name=" plik " type=" FILE " a c c e p t=" image / jpeg , image / gif ">
</ form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
obraz.jpg
POST / skrypt HTTP / 1 . 0
Content−Type : multipart / form−data ; boundary=−−−−−−−−−−−−−−−−−−−−−−−−8152765018186645991017906692
−−−−−−−−−−−−−−−−−−−−−−−−−−8152765018186645991017906692
Content−Disposition : form−data ; name=" login "
Jan
−−−−−−−−−−−−−−−−−−−−−−−−−−8152765018186645991017906692
Content−Disposition : form−data ; name=" haslo "
Kowalski ( Nowak )
−−−−−−−−−−−−−−−−−−−−−−−−−−8152765018186645991017906692
Content−Disposition : form−data ; name=" plik " ; filename=" obraz . jpg "
Content−Type : image / jpeg
Content−Transfer−Encoding : binary
Zawarto ś ć pliku obraz . jpg
−−−−−−−−−−−−−−−−−−−−−−−−−−8152765018186645991017906692
77
Środowisko uruchomieniowe NodeJS
Wprowadzenie
78
Przykład „Hello World”
w
K
1 #!/ usr / bin / node
2 console . log ( " Hello World " ) ;
T
Uruchamianie skryptu
AG
H
hello.js
łu
IE
Uruchamianie skryptu
$ node hello.js
Hello World
$ node hello
Hello World
$ chmod 755 hello.js
$ ./hello.js
Hello World
yd
zia
Udostępnia JavaScript po stronie serwera
I Używa V8 JavaScript Engine
I System do tworzenia serwisów sieciowych z asynchronicznym WE/WY
I Wykorzystuje paradygmat programowania sterowanego zdarzeniami
I Nadaje się dobrze do pisania aplikacji, które wymagają komunikacji w
czasie rzeczywistym pomiędzy przeglądarką a serwerem
I 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.
I
iw
fo
rm
Uruchamianie trybu interaktywnego
at
yk
Node.js
ra
ko
wi
e
Podstawy
er
at
Źródło: http://www.aaronstannard.com/post/2011/12/14/Intro- to-NodeJS- for-NET- Developers.aspx
79
ia
ł
y
dl
a
Rysunek: Schemat działania pętli zdarzeń w Node.js
st
ud
en
tó
w
In
$ node
> console.log("Hello World")
Hello World
undefined
> 2+2
4
> ^D
$
80
Podstawy
Wprowadzanie i wyprowadzanie danych
Podstawy
Dostęp do zmiennych środowiskowych, obsługa linii komend
1 process . stdout . write ( ’1 ’ ) ;
2 process . stdout . write ( ’2 ’ ) ;
3 console . log ( 3 )
4
5 /∗
6 console . log = function (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”) ;
1
2
3
4
5
6
7
8
// Odczyt w a r t o ś c i z m i e n n e j ś r o d o w i s k o w e j ’HOME’
console . log ( " Tw ó j katalog domowy to : "+process . env [ ’ HOME ’ ] ) ;
//Wyś w i e t l e n i e w a r t o ś c i a rgu men t ów l i n i i komend
console . log ( " Argumenty linii komend to : " ) ;
process . argv . forEach ( function ( wartosc , indeks , tablica ) {
console . log ( ’\ t ’+indeks + ’: ’ + wartosc ) ;
}) ;
skrypt.js
Uruchamianie
skrypt.js
$ 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
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
81
Podstawy
Moduł
Moduł
Tworzenie
Korzystanie
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
10
11
12
13
var mojModul = require ( ’mojModul’ ) ;
// mojModul = require ( ” ./mojModul ” ) ;
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
console . log ( mojModul . zmienna1 ) ; // u n d e f i n e d
console . log ( mojModul . zmienna2 ) ; // 2
console . log ( mojModul . zmienna3 ) ; // u n d e f i n e d
console . log ( mojModul . zmienna4 ) ; // 4
console . log ( mojModul . fun1 ( ) ) ;
// ” f u n 1 ”
console . log ( mojModul . fun2 ( ) ) ;
//B ł ą d
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
console . log ( mojModul ) ; //{ zmienna2: 2, zmienna4: 4, fun1:
[Function] }
console . log ( mojModul ( ) ) ; //Błąd
skrypt.js
1
$ export NODE_PATH =’kat1 :kat2 :. . . :katN ’
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
zmienna1 = 1 ;
exports . zmienna2 = 2 ;
var zmienna3 = 3 ;
var zmienna4 ;
module.exports . zmienna4 = 4 ;
var exports . zmienna5 = 5 ; // S y n t a x E r r o r :
Unexpected token .
exports . fun1 = function ( ) {
return " fun1 " ;
};
fun2 = function ( ) {
return " fun2 " ;
};
console . log ( module ) ;
/∗ Module {
... ,
exports : { z m i e n n a 2 : 2 , z m i e n n a 4 : 4 , f u n 1 : [
Function ] },
. . . } ∗/
exports = function ( ) {
return " fun3 " ;
}
module . exports = function ( ) {
return " fun4 " ;
}
console . log ( module.exports ) ; //{ zmienna2: 2, zmienna4: 4,
fun1: [Function] }
console . log ( exports ) ;
//{ zmienna2: 2, zmienna4: 4,
fun1: [Function] }
console . log ( module.exports == exports ) ; //true
82
Podstawy
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/
node modules/mojModul.js
83
84
Podstawy
Obsługa plików
1
2
3
4
5
6
7
Obsługa bazy danych SQLite 3
var
fs = require ( "fs" ) ;
// Sprawd ź c z y p l i k i s t n i e j e
try{ fs . accessSync ( ’ plik . txt ’ ) ; }
catch ( err ) { fs . writeFileSync ( ’ plik . txt ’ , ’1
’) ; }
fs . readFile ( ’ plik . txt ’ , ’utf -8 ’ , function
( error , data ) {
if ( error ) throw error ;
console . log ( " Odczytana warto ś ć : "+
data ) ;
}) ;
8
9
10 fs . writeFile ( ’ plik . txt ’ , ’2 ’ , function (
error ) {
11
12
console . log ( ’ Zapisano warto ś ć 2 ’ ) ;
13 }) ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
7
console . log ( " Odczytana warto ś ć : "+data
);
8
9
fs . writeFile ( ’ plik . txt ’ , ’2 ’ , function
( error ) {
10
11
console . log ( ’ Zapisano warto ś ć 2 ’ ) ;
12
}) ;
13 }) ;
Wersja nieprawidłowa
var sqlite3 = require ( ’ sqlite3 ’ ) ;
var db = new sqlite3 . Database ( ’: memory : ’ ) ; // Zwraca o b i e k t
Uruchamianie
Uruchamianie
$ node skrypt1.js
Zapisano wartość 2
Odczytana wartość: 2
$ node skrypt2.js
Odczytana wartość: 1
Zapisano wartość 2
jsonData = { products : [ ] };
db . each ( " SELECT rowid AS id , info FROM products " , function ( err , row ) {
jsonData . products . push ({ id : row . id , info : row . info }) ;
} , function ( ) {
console . log ( JSON . stringify ( jsonData ) ) ; //JSON . s t r i n g i f y − wbudowana f u n k c j a JS
}
);
}) ;
db . close ( ) ;
bd.js
$ npm install sqlite3
$ node bd.js
{"products":[{"id":1,"info":"Produkt 0"},{"id":2,"info":"Produkt 1"}]}
Podstawy
86
Tworzenie dodatków (addons) w C++
Obsługa protokołu HTTP
Szkielet skryptu
/∗
P o n i ż s z y program j e s t o d p o w i e d n i k i e m n a s t ę p u j ą c e g o
kodu JS :
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 ’ w o r l d ’ ; };
∗/
3
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 . GetR eturnVa lue ( ) . Set ( String : : NewFromUtf8 (
isolate , " world " ) ) ;
14 }
15
16 void init ( Handle<Object> exports ) {
17
NOD E_S ET_M ET H OD ( 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
1 {
2
" targets " : [
3
{
4
" target_name " : " hello " ,
5
" sources " : [ " hello . cc " ]
6
}
7
]
8 }
binding.gyp
$ npm install -g node-gyp
5
6
7
8
9
10
11
var http = require ( " http " ) ;
function requestListener ( request , response ) {
console . log ( " Pojawi ł o si ę ż ą danie od klienta " )
;
response . writeHead ( 2 0 0 , {" Content - Type " : " text
/ plain "}) ;
response . write ( " Hello World " ) ;
response . end ( ) ;
}
var serwer = http . createServer ( requestListener ) ;
serwer . listen ( 8 0 8 0 ) ;
console . log ( " Uruchomiono serwer " ) ;
1
2
3
4
5
6
7
8
9
http . createServer ( function ( request , response ) {
console . log ( " Pojawi ł o si ę ż ą danie od klienta " )
;
response . writeHead ( 2 0 0 , {" Content - Type " : " text
/ plain "}) ;
response . write ( " Hello World " ) ;
}) . listen ( 8 0 8 0 ) ;
console . log ( " Uruchomiono serwer " ) ;
Wersja alternatywna
2
var addon = require ( ’ ./ build / Release / hello ’
);
console . log ( addon . hello ( ) ) ;
hello.js
Sprawdzenie działania
Z poziomu terminala
hello.cc
Instalacja programu „node-gyp”
1
2
3
4
serwer.js
1
’ Statement ’
Instalacja i uruchamianie
85
’ Database ’
db . serialize ( function ( ) {
db . run ( " CREATE TABLE products ( info TEXT ) " ) ;
var stmt = db . prepare ( " INSERT INTO products VALUES (?) " ) ; // Zwraca o b i e k t
for ( var i = 0 ; i < 2 ; i++) {
stmt . run ( " Produkt " + i ) ;
}
stmt . finalize ( ) ;
Wersja prawidłowa
1
2
Podstawy
Kompilacja i uruchomienie
$ node-gyp configure
$ node-gyp build
$ node hello.js
world
87
$ node serwer.js &
Uruchomiono serwer
$ curl http://localhost:8080
Pojawiło się żądanie od klienta
Hello World
Rysunek: Z poziomu przeglądarki WWW
88
Obsługa formularzy
6
7
8
response . writeHead ( 2 0 0 , {" 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
14 }
15 . . .
serwer.js
K
var qs = require ( ’querystring’ ) ;
...
function r equ estL i st en e r ( request , response ) {
var url_parts = url . parse ( request . url , true ) ;
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
response . writeHead ( 2 0 0 , {" Content - Type " : " text / html "}) ;
response . write ( ’ < form method =" POST " action ="/ submit " > ’ ) ;
response . write ( ’ < input name =" login " value =" Jan " > ’ ) ;
response . write ( ’ < input name =" haslo " value =" Kowalski ( Nowak ) ą ę " > ’ ) ;
response . write ( ’ < input type =" submit " > ’ ) ;
response . write ( ’ </ form > ’ ) ;
}
if ( url_parts . pathname == ’/submit’ ) { // p r z e t w a r z a n i e z a w a r t o ś c i f o r m u l a r z a
if ( request . method==’ GET ’ ) {
response . write ( url_parts . query [ ’ login ’]+ ’\ n ’ ) ; // p r z e g l ą d a r k a w y p i s z e : ” Jan\n”
response . write ( url_parts . query [ ’ haslo ’]+ ’\ n ’ ) ; // p r z e g l ą d a r k a w y p i s z e : ” K o w a l s k i ( Nowak ) ą ę
\n”
19
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
29
response . write ( data [ ’ login ’]+ ’\ n ’ ) ; // p r z e g l ą d a r k a w y p i s z e : ” Jan\n”
30
response . write ( data [ ’ haslo ’]+ ’\ n ’ ) ; // p r z e g l ą d a r k a w y p i s z e : ” K o w a l s k i ( Nowak ) ą ę\n”
31
32
}) ;
33
}
34
}
35 }
Dr inż.36Stanisław
Polak
90
...
w
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
dl
/abc
Jan
Kowalski (Nowak)
en
tó
w
$ curl ’http://localhost:8080/abc?login=Jan&haslo=
Kowalski+%28Nowak%29’
ud
Terminal 2
89
M
at
er
ia
ły
$ 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’ }
st
Terminal 1
In
fo
rm
Na wyjściu
Kodowanie „application/x-www-form-urlencoded”
AG
H
var url = require ( " url " ) ;
...
function r e qu es tL i st en e r ( request , response ) {
console . log ( " Pojawi ł o si ę ż ą danie od klienta " ) ;
var url_parts = url . parse ( request . url , true ) ; // P a s s t r u e a s t h e s e c o n d a r g u m en t t o a l s o p a r s e
t h e q u e r y s t r i n g u s i n g t h e q u e r y s t r i n g module . D e f a u l t s t o f a l s e .
console . log ( url_parts ) ;
a
1
2
3
4
5
IE
T
Obsługa parametrów URL
ra
ko
wi
e
at
yk
iw
yd
zia
łu
Wolnostojący serwer WWW
Framework „Express”
Podstawy
Express
Instalacja i uruchamianie
$ npm install http-server -g
$ http-server -h
usage: http-server [path] [options]
options:
-p
-a
-d
-i
-e --ext
-s --silent
-h --help
-c
Port to use [8080]
Address to use [0.0.0.0]
Show directory listings [true]
Display autoIndex [true]
Default file extension if none supplied [none]
Suppress log messages from output
Print this list and exit.
Set cache time (in seconds). e.g. -c10 for 10
seconds.
To disable caching, use -c-1.
I
Najpopularniejszy framework do tworzenia aplikacji WWW
I
Inspirowany projektem Ruby „Sinatra”
I
Moduł node.js — instalacja npm install -g express
I
API oparte na JSON
$ http-server
Starting up http-server, serving ./ on port: 8080
Hit CTRL-C to stop the server
91
92
Aplikacja „Hello World 1”
Użyte narzędzia oraz języki
Tworzenie szkieletu aplikacji
1
2
3
4
I
$
$
$
$
mkdir MySite
cd MySite
vi package . json
npm install #i n s t a l o w a n i e z a l e ż no ś c i
Jade
I
I
I
System szablonów
Treść szablonu jest tłumaczona na HTML
CSS
1 {
2
3
4
5
6
7
8
9
10 }
" name " : " MySite " ,
" version " : " 0.0.1 " ,
" private " : " true " ,
" dependencies " : {
" express " : " * " ,
" jade " : " * " ,
" morgan " : " * "
}
package.json
93
Główny plik aplikacji
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
94
Pliki Jade
var express = require ( ’ express ’ ) ,
logger = require ( ’ morgan ’ ) ;
var app = express ( ) ;
var router = express . Router ( ) ;
app . set ( ’ views ’ , __dirname + ’/ views ’ ) ;
app . set ( ’ view engine ’ , ’ jade ’ ) ;
app . use ( logger ( ’ dev ’ ) ) ;
app . use ( express . static ( __dirname + ’/ public ’ ) ) ;
router . get ( ’/ ’ , function ( req , res ) {
res . render ( ’ index ’ ,
{ title : ’ Home ’ }
)
}) ;
app . use ( ’/ ’ , router ) ;
app . listen ( 3 0 0 0 ) ;
1 extend layout
2 block content
3
p
4
| Witaj Ś wiecie
5
| Witaj Ś wiecie
6
p
7
| Witaj Ś wiecie
8 block sidebar
9
. widget
10
h1 Widget
11
p
12
| Tre ś ć ramki
views/index.jade
1 doctype html
2 html
3
head
4
title #{title} − My Site
5
link ( rel=’ stylesheet ’ , href=’/
stylesheets / style . css ’ )
6
body
7
header
8
h1 My Site
9
. container
10
. main−content
11
block content
12
. sidebar
13
block sidebar
14
footer
15
p Running on node with Express ,
Jade and Stylus
app.js
views/layout.jade
95
96
Plik CSS
Uruchamianie aplikacji
1 $ node app
2 GET / 200 1563 ms − 444 b
3 GET / stylesheets / style . css 200 865 ms − 2 . 4 6 kb
1 body {
2
...
3 }
4 . widget {
5
...
6 }
7 ...
public/stylesheets/style.css
98
Polecenie express
ra
ko
wi
e
97
Generowanie aplikacji „Hello World”
T
IE
łu
yd
zia
iw
at
yk
fo
rm
er
99
at
ia
ł
y
dl
a
st
ud
en
tó
w
In
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
−V , −−version
output the version number
9
−e , −−ejs
add ejs engine support ( defaults to jade )
10
−−hbs
add handlebars engine support
11
−H , −−hogan
add hogan . js engine support
12
−c , −−css <engine> add stylesheet <engine> support ( less | stylus | compass ) (
defaults to plain css )
13
−f , −−force
force on non−empty directory
1 $ express MySite
2
create : MySite
3
create : MySite / package . json
4
create : MySite / app . js
5
create : MySite / public
6
create : MySite / public / javascripts
7
create : MySite / public / images
8
create : MySite / public / stylesheets
9
create : MySite / public / stylesheets / style . css
10
create : MySite / routes
11
create : MySite / routes / index . js
12
create : MySite / routes / users . js
13
create : MySite / views
14
create : MySite / views / index . jade
15
create : MySite / views / layout . jade
16
create : MySite / views / error . jade
17
create : MySite / bin
18
create : MySite / bin / www
19
20
install dependencies :
21
$ cd MySite && npm install
22
23
run the app :
24
$ DEBUG=MySite : ∗ npm start
AG
H
w
K
Użycie polecenia express
100
Plik ’package.json’
1
2
3
4
5
6
7
8
9
101
Pliki z definicją tras
...
var routes = require ( ’ ./ routes / index ’ ) ;
var users = require ( ’ ./ routes / users ’ ) ;
var app = express ( ) ;
...
app . use ( ’/ ’ , routes ) ;
app . use ( ’/ users ’ , users ) ;
...
102
Pozostałe (wygenerowane) pliki
1 extends layout
2
3 block content
4
h1= title
5
p Welcome to #{title}
var express = require ( ’ express ’ ) ;
/∗ GET home page . ∗/
res . render ( ’ index ’ , { title : ’ Express ’ }) ;
}) ;
views/index.jade
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.jade
module . exports = router ;
routes/index.js
1
2
3
4
5
6
7
8
9
Główny plik aplikacji — ’app.js’
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.13.2 " ,
10
" cookie - parser " : " ~1.3.5 " ,
11
" debug " : " ~2.2.0 " ,
12
" express " : " ~4.13.1 " ,
13
" jade " : " ~1.11.0 " ,
14
" morgan " : " ~1.6.1 " ,
15
" serve - favicon " : " ~2.3.0 "
16
}
17 }
1
2
3
4
5
6
7
8
9
var express = require ( ’ express ’ ) ;
/∗ GET u s e r s l i s t i n g . ∗/
res . send ( ’ respond with a resource ’ ) ;
}) ;
1
2
3
4
5
6
7
8
body {
padding : 50 px ;
font : 14 px " Lucida Grande " , Helvetica , Arial , sans−serif ;
}
a {
color : #00B7FF ;
}
public/stylesheets/style.css
module . exports = router ;
routes/user.js
1 $ cd MySite && npm install
2 $ npm start
Instalowanie zależności i uruchamianie aplikacji
103
104
MongoDB
Model danych w MongoDB
I
Nierelacyjna baza danych zorientowana dokumentowo
I
Dobrze skalowana
I
Szybka
I
Nie posiada sztywnych schematów danych
Referencje
Osadzane dokumenty
Podstawowe pojęcia
Kolekcja odpowiednik tabeli w relacyjnej bazie danych
Dokument odpowiednik wiersza w relacyjnej bazie danych
Rysunek: Przykładowy dokument
105
Instalowanie zależności
106
Tworzenie zawartości bazy danych
1 $ vi package . json
2 $ npm install #i n s t a l o w a n i e z a l e ż no ś c i
1 ...
2 " dependencies " : {
3
...
4
" monk " : " * "
5 }
6 ...
package.json
107
1
2
3
4
5
6
7
8
9
10
11
12
$ mongo
MongoDB shell version : 2 . 6 . 3
connecting to : test
> use bazatestowa1
switched to db bazatestowa1
> db . data collecti on . insert ({ " title " : " Express & Mongo " })
> db . data collecti on . insert ({ " title " : " Express " })
> db . datacollection . find ( )
{ " _id " : ObjectId ( " 52 f 8 b b 7 5 7 b a d e 7 e 2 c 4 7 4 1 7 4 1 " ) , " title " : " Express & Mongo " }
{ " _id " : ObjectId ( " 52 f 8 b d 4 0 7 b a d e 7 e 2 c 4 7 4 1 7 4 2 " ) , " title " : " Express " }
> db . datacollection . find ({ " title " : " Express " })
{ " _id " : ObjectId ( " 52 f 8 b d 4 0 7 b a d e 7 e 2 c 4 7 4 1 7 4 2 " ) , " title " : " Express " }
108
Technika „AJAX”
I
I
routes/index.js
I
app.js
Rysunek: Schemat działania typowej witryny
internetowej
ud
en
tó
w
1 extends layout
2
3 block content
4
h1 Tytu ł y
5
ul
6
each element in titlelist
7
li #{element . title}
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
K
AJAX = HTML + CSS +
DOM + XMLHttpRequest
+ XML + JavaScript
Możliwości:
w
I
AG
H
AJAX (ang. Asynchronous
JavaScript and XML),
Asynchroniczny JavaScript
i XML
IE
T
I
at
yk
iw
yd
zia
łu
1 ...
2 router . get ( ’/ titles ’ , function ( req , res )
{
3
var db = req . db ;
4
var collection = db . get ( ’
data collection ’ ) ;
5
collection . find ({} ,{} , function ( e ,
docs ) {
6
res . render ( ’ titlelist ’ , {
7
" titlelist " : docs
8
}) ;
9
}) ;
10 }) ;
11
12 module . exports = router ;
fo
rm
6
7
8
9
10
11
12
13
14
15
...
var bodyParser = require ( ’ body - parser ’ ) ;
//Nowy kod
var monk = require ( ’ monk ’ ) ;
var db = monk ( ’ localhost :27017/
bazatestowa1 ’ ) ;
...
//Nowy kod
app . use ( function ( req , res , next ) {
req . db = db ;
next ( ) ;
}) ;
// I s t n i e j ą c y kod
app . use ( ’/ ’ , routes ) ;
app . use ( ’/ users ’ , users ) ;
...
Rysunek: Schemat działania witryny internetowej
opartej o AJAX
dl
a
I
st
1
2
3
4
5
AJAX
In
Modyfikacje
ra
ko
wi
e
ły
Czy warto go zawsze
stosować?
ia
109
110
M
at
I
er
views/titlelist.jade
Technika „AJAX”
Technika „AJAX”
Zapytanie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Obsługa odpowiedzi
var http_request ;
if ( window.ActiveXObject ) { // IE ¬ 6
try { http_request = new ActiveXObject(”Msxml2.XMLHTTP”) ; }
catch ( e ) {
try { http_request = new ActiveXObject(”Microsoft.XMLHTTP”) ; }
catch ( e ) {}
}
}
else if ( window.XMLHttpRequest ) { // M o z i l l a , S a f a r i , IE 7 , . . .
http_request = new XMLHttpRequest ( ) ;
if ( http_request . ov err ideMi meTy pe ) {
http request.overrideMimeType(’text/xml’) ; }
}
if ( ! http_request )
alert ( ’ Nie mog ę stworzy ć instancji obiektu XMLHTTP ’ ) ;
http request.onreadystatechange = function ( ) { alertContents ( http_request ) ; } ;
http request.open ( ’ GET ’ , " / zadany_plik . html " , true ) ;
http request.send ( null ) ;
//http request.open ( ’ POST, ”/ s k r y p t . c g i ” , t r u e ) ;
//http request.setRequestHeader ( ’ C o n t e n t−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 ’ ) ;
//http request.send ( ’ p o l e 1=w a r t o s c 1&p o l e 2=w a r t o s c 2 & . . . ’ ) ;
1 <table>
2 <tr><td>Hello</ td></ tr>
3 </ table>
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 .
g e t E l e m e n t s B y T a g N a m e ( ’ 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 }
zadany plik.html
111
112
Biblioteka „ jQuery”
jQuery
Podstawy
I
I
Lekka biblioteka programistyczna
Funkcjonalności:
I
I
I
I
I
I
I
I
Podstawowe cechy:
I
I
I
I
I
Selektory — umożliwiają wybranie dowolnego podzbioru węzłów modelu
DOM
Atrybuty — jQuery pozwala przetwarzać atrybuty węzłów element
Manipulowanie modelem DOM
Zmiana i przypisywanie stylu do elementów
Rozbudowana obsługa zdarzeń, możliwość definiowania własnych
Efekty — animacje
AJAX — prosty interfejs realizujący asynchroniczne zapytania
Niezależność od przeglądarki — eliminuje konieczność dostosowywania kodu
do różnych przeglądarek WWW
Obsługa selektorów zgodna z CSS3
Małe rozmiary — produkcyjna wersja to około 100 kB
Wygoda tworzenia wtyczek
1 <html>
2 <head>
3
4
<title>jQuery demo</title>
5 </head>
6 <body>
7 <a href=" http :// jquery . com / ">jQuery</a>
8 <script type=" text / javascript " src=" http
:// code . jquery . com / jquery - latest .
js "></script>
10 //$ ( document ) . r e a d y ( f u n c t i o n ( ) {
11 jQuery ( document ) . ready ( function ( ) {
12 $(”a”) . click ( function ( event ) {
13
alert ( " Jak widzisz , ten odsy ł acz nie
przeniesie ci ę ju ż do jquery .
com " ) ;
14
event . preventDefau lt ( ) ;
15
}) ;
16 }) ;
17 </script>
18 </body>
19 </html>
Strona domowa — http://jquery.com/
113
114
Pobieranie treści tekstowej
Dostęp do stylów CSS
Odpowiednik przykładu DOM
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<style>
p { color : blue ; margin : 8 px ; }
b { color : red ; }
</style>
<script src=" http :// code . jquery . com / jquery - latest . js "></script>
</head>
<body>
<p><b>Test</b> Paragraph .</p>
<p></p>
var str = $ ( " p : first " ) . text ( ) ; // Zmienna ’ s t r ’ z a w i e r a ł a ń c u c h ” T e s t P a r a g r a p h . ”
$ ( " p : last " ) . html ( str ) ;
</script>
</body>
</html>
1 <html>
2 <head>
3 <meta h t t p−e q u i v=" Content - Type " content=" text / html ;
charset = UTF -8 " />
5 ...
6 </ head>
7 <body>
9 <tr><td id=" komorka1 ">a</ td><td>b</ td></ tr>
11 </ table>
12 <form>
13 <input type=" button " value=" Czerwony " onClick="
kolor(’#FF0000’); ">
14 <input type=" button " value=" Zielony " onClick="
kolor(’#00FF00’); ">
15 </ form>
16 </ body>
17 </ html>
1 ...
3 function kolor ( wartosc ){
4
$ ( ’# komorka1 ’ ) . css ( " ba ck g ro un dC o lo r " , wartosc ) ;
5 }
6 </ script>
Test Paragraph.
Test Paragraph.
a
c
2 function kolor ( wartosc ){
3
var element = document . getE lementById ( "
komorka1 " ) ;
4
element . style . b ac kg ro undCo l or = wartosc ;
5 }
6 </ script>
Użycie metod jQuery
115
b
d
Użycie metod DOM
116
Dodawanie nowego elementu do zbioru dopasowanych elementów
Wstawienie nowej komórki tabeli na końcu wiersza
Odpowiednik przykładu DOM
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<script src=" http :// code . jquery . com / jquery - latest . js "></script>
</head>
<body>
<p>Hello</p><span>Hello Again</span>
$ ( " p " ) . add ( " span " ) . css ( " background " , " yellow " ) ;
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
...
</ head>
<body>
<tr id=" wiersz1 "><td>a</ td><td>b</ td></ tr>
</ table>
<form>
<input type=" button " value=" Wstaw " onClick=" wstaw () ; ">
</ form>
</ body>
</ html>
</body>
</html>
Hello
a
c
b
d
b
d
b1
1 ...
3 function wstaw ( ){
4
5
var nowyTekst = document . crea teTextNode ( " b1 " ) ;
6
7
var element = document . getE lementById ( " wiersz1
") ;
8
element . appendChild ( nowyTD ) ;
9 }
10 </ script>
11 . . .
1 ...
3 function wstaw ( ){
4
$(’#wiersz1’) . append ( $(’<td>’) . text ( ’ b1 ’ ) ) ;
5 }
6 </ script>
7 ...
Hello Again
a
c
Użycie metod jQuery
Użycie metod DOM
117
Animacja tekstu
ra
ko
wi
e
118
Obsługa technologii AJAX
<!DOCTYPE html>
<html>
<head>
<style>
div {
background−color :# bca ;
width : 1 0 0 px ;
border : 1 px solid green ;
}
</style>
<script src=" http :// code . jquery . com / jquery - latest . js "
></script>
12 </head>
13 <body>
14
<button id=" go ">&raquo ; Run</button>
15
16 <div id=" block ">Hello!</div>
18
19 /∗ K o r z y s t a n i e z w i e l u t y p ów j e d n o s t e k w j e d n e j a n i m a c j i .
∗/
20
21 $ ( " # go " ) . click ( function ( ){
22
$ ( " # block " ) . animate ({
23
width : " 70% " ,
24
opacity : 0 . 4 ,
25
marginLeft : " 0.6 in " ,
26
fontSize : " 3 em " ,
27
borderWidth : " 10 px "
28
} , 1500 ) ;
29 }) ;
30 </script>
31 </body>
32 </html>
In
tó
w
AG
H
T
IE
yd
zia
łu
if ( url_parts . pathname == ’/ hello ’ ){
response . writeHead ( 2 0 0 , {" Content - Type " : "
text / plain "}) ;
response . write ( " Witaj Ś wiecie " ) ;
}
else {
var filename=" formularz . html "
var stat = fs . statSync ( filename ) ;
response . writeHead ( 2 0 0 , {
’ Content - Type ’ : ’ text / html ’ ,
’ Content - Length ’ : stat . size
}) ;
var readStream = fs . c r ea te R e a dS tr e am (
filename ) ;
readStream . pipe ( response ) ;
}
21
22
23 }
24 var serwer = http . createServer ( r eq ue st Lis te n er )
25 serwer . listen ( 8 0 8 0 ) ;
ud
en
Rysunek: Ostatnia klatka animacji
function re qu es tL i st en er ( request , response ) {
var url_parts = url . parse ( request . url , true ) ;
at
yk
10
11
12
13
14
15
16
17
18
19
20
fo
rm
Rysunek: Pierwsza klatka animacji
1 ...
3 $ ( document ) . ready ( function ( ){
4
$ ( ’# button1 ’ ) . click ( function ( ) {
5
$ . ajax ({
6
type : " GET " ,
7
url : " http :// localhost :8080/ hello " ,
8
success : function ( msg ){
9
alert ( " Zdalny skrypt wypisa ł : " + msg ) ;
10
}
11
}) ;
12
}) ;
13 }) ;
14 </script>
15 . . .
16 <form action=" # ">
17
<input type=" button " value=" Uruchom " id="
button1 " />
18 </form>
19 . . .
var url = require ( " url " ) ;
var fs = require ( ’ fs ’ ) ;
iw
1
2
3
4
5
6
7
8
9
dl
a
st
node.js
er
119
ia
ł
y
formularz.html
at
w
K
1
2
3
4
5
6
7
8
9
10
11
120
JavaScript — zagadnienia zaawansowane
Inne zagadnienia
Tryb ścisły
Inne zagadnienia
Tryb ścisły
Przykłady działania
I
Eliminuje niektóre „pułapki” starszych wersji języka
I
Naprawia błędy, które utrudniały silnikom JavaScriptu dokonywanie
optymalizacji
I
Uniemożliwia stosowanie składni, która zostanie wykorzystana w kolejnych
wersjach ECMAScriptu
1 " use strict " ;
2 var v = " Cze ś ć ! Jestem skryptem trybu ś cis ł ego ! " ;
Włączenie trybu ścisłego dla całego skryptu
1
2
3
4
5
6
7
8
function strict ( )
{
// t r y b ś c i s ł y na p o z i o m i e f u n k c j i
’ use strict ’ ;
function nested ( ) { return " Ja te ż " ; }
return " Cze ś ć ! Jestem funkcj ą trybu ś cis ł ego ! " + nested ( ) ;
}
function notStrict ( ) { return " A ja nie . " ; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
" use strict " ;
var v = " Cze ś ć ! Jestem skryptem trybu ś cis ł ego ! " ;
zmienna = 1 7 ; // w y r z u c a w y j ą t e k R e f e r e n c e E r r o r
delete Object . prototype ; // w y r z u c a w y j ą t e k T y p e E r r o r
var x = 1 7 ;
with ( obj ) // ! ! ! b ł ą d s k ł a d n i
{
// Gdyby t o n i e by ł t r y b ś c i s ł y , c z y by ł oby t o v a r x ,
// c z y moż e j e d n a k o b j . x ? W og ó lnym p r z y p a d k u
// n i e moż na t e g o o k r e ś l i ć p r z e d wykonaniem kodu ,
// co uniemo ż l i w i a o p t y m a l i z a c j ę .
x;
}
Włączenie trybu ścisłego dla funkcji
121
Inne zagadnienia
Magazyny danych
122
Inne zagadnienia
Magazyny danych
Przykład użycia
Typy
I
Magazyn lokalny — obiekt
’localStorage’
I
Magazyn sesji — obiekt
’sessionStorage’
I
Są dostępne tylko z poziomu
klienta
I
Dane są dostępne dla stron, które
mają to samo pochodzenie co
zapisane informacje
I
Pary postaci klucz-wartość
I
Maksymalny rozmiar
przechowywanych tam danych jest
znacznie większy niż w przypadku
ciasteczek
Strony traktowane jako różne
I
http://www.agh.edu.pl
I
https://www.agh.edu.pl — inny
protokół
I
http://www.agh.edu.pl:8080 —
inny numer portu. Domyślny port
HTTP to 80
I
http://poczta.agh.edu.pl —
inny host
1 if ( typeof ( Storage ) !== " undefined " ) {
2
localStorage . setItem ( " nazwisko " , " Polak " ) ;
3
// l u b
4
localStorage . nazwisko = " Polak " ;
5
// l u b
6
localStorage [ ’ nazwisko ’ ] = " Polak " ;
7
var nazwisko = localStorage . getItem ( " nazwisko " ) ;
8
console . log ( nazwisko ) ;
9
localStorage . removeItem ( " nazwisko " ) ;
10
// l u b
11
delete sessionStor age . nazwisko ;
12
var nazwisko = localStorage . getItem ( " nazwisko " ) ;
13
14
localStorage . setItem ( " imie " , " Stanis ł aw " ) ;
15
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
16
sess ionStora ge . setItem ( " nazwisko " , " Polak " ) ;
17
// l u b
18
sess ionStora ge . nazwisko = " Polak " ;
19
// l u b
20
sess ionStora ge [ ’ nazwisko ’ ] = " Polak "
21
var nazwisko = sess ionStora ge . getItem ( " nazwisko " ) ;
22
23
sess ionStora ge . removeItem ( " nazwisko " ) ;
24
// l u b
25
delete sessionStor age . nazwisko ;
26
var nazwisko = sess ionStora ge . getItem ( " nazwisko " ) ;
27
28
sess ionStora ge . setItem ( " imie " , " Stanis ł aw " ) ;
29 }
30 else
31
alert ( " Twoja przegl ą darka nie obs ł uguje magazyn ó w " )
;
1 <script>
2 if ( typeof ( Storage ) !== " undefined " ) {
3
var imi ę = localStorage . getItem ( " imie " ) ;
4
console . log ( imi ę ) ;
5
var imi ę = sessionStora ge . getItem ( " imie " )
;
6
console . log ( imi ę ) ;
7 }
8 else
9
alert ( " Twoja przegl ą darka nie obs ł uguje
magazyn ó w " ) ;
10 </script>
skrypt2.html
skrypt1.html
123
124
Inne zagadnienia
Magazyny danych
Inne zagadnienia
Iteratory
Przechowywanie danych niebędących napisami
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var liczba = 1 ;
tablica = [ 1 , 2 , 3 ] ;
obiekt = {a : 1 0 , b : 2 0 } ;
1
2
3
4
5
6
7
8
9
10
11
// W s t a w i a n i e d a n e j t y p u p r o s t e g o
localStorage . setItem ( " liczba " , liczba ) ;
liczba = Number ( localStorage . getItem ( " liczba " ) ) ;
console . log ( liczba ) ;
// W s t a w i a n i e d a n y c h t y p u z ł o ż onego
localStorage . setItem ( " tablica " , JSON . stringify ( tablica ) ) ;
tablica = JSON . parse ( localStorage . getItem ( " tablica " ) ) ;
console . log ( tablica ) ;
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
localStorage . setItem ( " obiekt " , JSON . stringify ( obiekt ) ) ;
obiekt = JSON . parse ( localStorage . getItem ( " obiekt " ) ) ;
console . log ( obiekt ) ;
Na wyjściu
1
Array [ 1, 2, 3 ]
Object a: 10, b: 20
125
Inne zagadnienia
Generatory
function* gener atorWar to ś ci ( ) {
yield " Jeden " ;
yield " Dwa " ;
for ( var i = 0 ; i < 2 ; i++)
yield i ;
}
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
// U t w o r z e n i e o b i e k t u t y p u ” G e n e r a t o r ”
var gen = generatorWarto ś ci ( ) ;
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
console . log ( gen . next ( ) ) ;
Na wyjściu
Object
Object
Object
Object
Object
value:
value:
value:
value:
value:
Na wyjściu
Object value: "Stanisław", done: false
Object value: "Polak", done: false
Object value: undefined, done: true
"Stanisław"
"Polak"
126
Inne zagadnienia
Wyrażenia tablicowe
Wiele generatorów
Pojedynczy generator
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function IterujPrzez ( . . . args ) {
let index = 0 ;
let iterable = {
[ Symbol . iterator ] ( ) {// P r o t o k ó ł ’ i t e r a b l e ’
return this ;
},
next ( ) { // P r o t o k ó ł ’ i t e r a t o r ’
if ( index < args . length ) {
return {
value : args [ index ++], // w y s t ą p i e n i e wymagane
done : false
// w y s t ą p i e n i e
niewymagane
};
} else {
return {
value : undefined , // w y s t ą p i e n i e niewymagane
done : true
// w y s t ą p i e n i e wymagane
};
}
} // n e x t ( )
};
return iterable ;
}
var iter = IterujPrzez ( ’ Stanis ł aw ’ , ’ Polak ’ ) ;
console . log ( iter . next ( ) ) ;
for ( var element of IterujPrzez ( ’ Stanis ł aw ’ , ’ Polak ’ ) )
console . log ( element ) ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function∗ nast ę p n yGe nera tor War to ś ci ( i ) {
yield i + 1 ;
yield i + 2 ;
}
function∗ gene ratorWarto ś ci ( i ) {
yield i ;
yield* nast ę pn y Ge n er ator War to ś ci ( i ) ;
yield i + 1 ;
}
var gen = gene ratorWarto ś ci ( 1 ) ;
Object
Object
Object
Object
Object
127
{
{
{
{
{
value:
value:
value:
value:
value:
8
9
10
11
12
13
14
15
16
Na wyjściu
"Jeden", done: false
"Dwa", done: false
0, done: false
1, done: false
undefined, done: true
1
2
3
4
5
6
7
var litery = [ " A " , " B " , " C " ] ;
var liczby = [ 1 , 2 , 3 ] ;
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
var kwadraty = [ for ( liczba of liczby ) liczba∗liczba ] ;
console . log ( kwadraty ) ; // W y p i s z e : A r r a y [ 1 , 4 , 9 ]
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
var k wa d r a t y P ar z ys ty c h = [ for ( liczba of liczby ) if ( liczba%2 == 0 ) liczba∗
liczba ] ;
console . log ( k wa d r a t y P ar zy s ty c h ) ; // W y p i s z e : A r r a y [ 4 ]
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
var miks1 = [ for ( liczba of liczby ) for ( litera of litery ) liczba+litera ] ;
console . log ( miks1 ) ;
// W y p i s z e : A r r a y [ ”1A” , ”1B” , ”1C” , ”2A” , ”2B” , ”2C” , ”3A
” , ”3B” , ”3C” ]
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
var miks2 = [ for ( liczba of liczby ) if ( liczba > 1 ) [ for ( litera of litery )
liczba+litera ] ] ;
console . log ( miks2 ) ; // W y p i s z e : A r r a y [ A r r a y [ 3 ] , A r r a y [ 3 ] ]
console . log ( miks2 [ 0 ] ) ; // W y p i s z e : A r r a y [ ”2A” , ”2B” , ”2C” ]
console . log ( miks2 [ 1 ] ) ; // W y p i s z e : A r r a y [ ”3A” , ”3B” , ”3C” ]
1, done: false }
2, done: false }
3, done: false }
2, done: false }
undefined, done: true }
128
Inne zagadnienia
Obietnice
I
Reprezentują / Przechowują wyniki operacji asynchronicznej1 , np.
zapytania AJAX
I
Wyniki operacji mogą nie być jeszcze dostępne, ale kiedyś będą
I
Obietnice można ze sobą składać
IE
T
var litery = [ " A " , " B " , " C " ] ;
var liczby = [ 1 , 2 , 3 ] ;
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
var generator = ( for ( liczba of liczby ) liczba∗liczba ) ;
console . log ( generator ) ; // W y p i s z e : G e n e r a t o r { }
console . log ( generator . next ( ) ) ; // W y p i s z e : O b j e c t { v a l u e : 1 , done : f a l s e }
console . log ( generator . next ( ) ) ; // W y p i s z e : O b j e c t { v a l u e : u n d e f i n e d , done : t r u e }
var generator = ( for ( liczba of liczby ) liczba∗liczba ) ;
for ( var elem of generator )
console . log ( elem ) ; /∗ W y p i s z e :
1
4
9
∗/
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
generator =(for ( liczba of liczby ) if ( liczba > 1 ) [ for ( litera of litery ) liczba+
litera ] ) ;
19 console . log ( generator . next ( ) ) ; // W y p i s z e : O b j e c t { v a l u e : A r r a y [ 3 ] , done : f a l s e }
20 console . log ( generator . next ( ) ) ; // W y p i s z e : O b j e c t { v a l u e : A r r a y [ 3 ] , done : f a l s e }
21 console . log ( generator . next ( ) ) ; // W y p i s z e : O b j e c t { v a l u e : u n d e f i n e d , done : t r u e }
Stany obietnic
W oczekiwaniu (ang. pending)
I
Spełniona (ang. fulfilled)
I
Odrzucona (ang. rejected)
I
Rozstrzygnięta (ang. settled)
dl
a
st
ud
en
tó
w
In
fo
rm
I
at
yk
iw
yd
zia
łu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
AG
H
w
K
Wyrażenia generujące
Inne zagadnienia
ra
ko
wi
e
ły
Wartość zwracaną (w przypadku sukcesu) lub błąd (w razie porażki)
er
129
130
M
at
ia
1
Inne zagadnienia
Obietnice
Inne zagadnienia
Pośrednicy
Przykład użycia
1 /∗∗∗ T w o r z e n i e o b i e t n i c y ∗∗∗/
2 var obietnica1 = new Promise ( function ( resolve , reject ) {
3
// o b l i c z e n i a wykonywane a s y n c h r o n i c z n i e
4
setTimeout ( function ( ) {
5
var dzielnik = Math . floor ( Math . random ( ) ∗ 3 ) ;
6
if ( dzielnik != 0 )
7
resolve ( 1 0 / dzielnik ) ; // Spe ł n i j o b i e t n i c ę
8
else
9
reject ( " Pr ó ba dzielenia przez 0 " ) ; // Odrzu ć o b i e t n i c ę
10
}, 2000) ;
11 }) ;
12 /∗∗∗ Uż y c i e o b i e t n i c y ∗∗∗/
13 var obietnica2 = obietnica1 . then ( function ( result ) {
14
console . log ( ’ Wynik dzielenia : ’ , result ) ;
15 }) . catch ( function ( error ) {
16
console . log ( ’ Pojawi ł si ę b ł ą d ! ’ , error ) ;
17 }) ;
Na wyjściu
"Wynik dzielenia:" 5
Na wyjściu
"Pojawił się błąd!" "Próba dzielenia przez 0"
Rozstrzygnięta
.then(onFulfillment)
W oczekiwaniu (pending)
Spełnienie
Obietnica
Odrzucenie
1
2
3
4
5
6
7
8
9
10
11
12
var proceduraObs ł ugi = {
deleteProperty ( obiektDocelowy , w ł asno ś ć ) {
console . log ( " Kasowanie w ł asno ś ci ’"+w ł asno ś ć+" ’" ) ;
return delete obiektD ocelowy [ w ł asno ś ć ] ; // Zwraca : t r u e l u b f a l s e
// l u b
// r e t u r n R e f l e c t . d e l e t e P r o p e r t y ( o b i e k t D o c e l o w y , w ł a s n o ś ć ) ;
}
}
var p = new Proxy({} , proceduraObs ł ugi ) ;
p . a =1;
delete p . a ; // W y p i s z e : ” K a s o w a n i e w ł a s n o ś c i ’ a ’ ”
console . log ( p . a ) ; // W y p i s z e : u n d e f i n e d
Akcje asynchroniczne
W oczekiwaniu (pending)
Zwraca
Obietnica
.then()
...
.catch()
Zwraca
Rozstrzygnięta
.then(onRejection)
.catch(onRejection)
Obsługa błędów
131
132
Inne zagadnienia
Pośrednicy
Inne zagadnienia
Wątki robocze
Przykład zastosowania
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var walidator = {
set ( obiekt , w ł asno ś ć , warto ś ć ) {
if ( w ł asno ś ć === ’ ilo ś ć ’ ) {
if ( ! Number . isInteger ( warto ś ć ) ) {
throw new TypeError ( ’ Ilo ś ć nie jest liczb ą ’ ) ;
}
if ( warto ś ć < 0 ) {
throw new RangeError ( ’ Ilo ś ć nie mo ż e by ć liczb ą ujemn ą ’ ) ;
}
}
I
I
I
I
I
I
I
// Domyś l n e z a c h o w a n i e − z a p i s a n i e w a r t o ś c i
obiekt [ w ł asno ś ć ] = warto ś ć ;
return true ; // t r u e o z n a c z a , ż e uda ł o s i ę p r z y p i s a ć w a r t o ś ć
I
I
}
};
I
133
Obiekt ’navigator’
Obiekt ’location’ w trybie „tylko do odczytu”
Obiekt ’XMLHttpRequest’
Metody setTimeout() / clearTimeout() oraz setInterval() /
clearInterval()
Cache’owanie aplikacji — Application Cache API
Importowanie zewnętrznych skryptów za pomocą importScript()
Tworzenie innych wątków potomnych
Nie mają dostępu do:
I
var produkt = new Proxy ({} , walidator ) ;
produkt . ilo ś ć = 1 0 ;
console . log ( produkt . ilo ś ć ) ; // W y p i s z e : 10
produkt . ilo ś ć = ’ dziesi ę ć ’ ; // T y p e E r r o r : I l o ś ć n i e j e s t l i c z b ą
produkt . ilo ś ć = −2; // R a n g e E r r o r : I l o ś ć n i e moż e by ć l i c z b ą ujemn ą
Umożliwiają uruchamianie długotrwałych części skryptów JavaScript w
osobnym wątku
Mają dostęp do:
I
I
I
Obiekty DOM
Obiekt ’window’
Obiekt ’document’
Obiekt ’parent’
Inne zagadnienia
134
Wątki robocze
Obiekty
Obiekty i własności
Przykład
1 var worker = new Worker ( ’ worker . js ’ ) ;
2 worker . onmessage = function ( e ) {
3
console . log ( ’ Otrzymano odpowied ź od w ą
tku roboczego :\ n ’ + e . data ) ;
4 };
5 worker . postMessage ( ’ Witaj w ą tku roboczy ’ ) ;
6 worker . postMessage ( ’ Witaj w ą tku roboczy ’ ) ;
7 ...
8 worker . terminate ( ) ;
1 i = 0;
2 onmessage = function ( e ) {
3
i++;
4
odpowied ź =’\ ti = ’+i+’ , otrzymano
odpowied ź od w ą tku g ł ó wnego : ’+e
. data ;
5
postMessage ( odpowied ź ) ;
6
if ( i==3)
7
close ( ) ;
8 };
master.js
worker.js
I
Obiekt — konstrukcja z własnościami
I
Własność — zmienna, inny obiekt lub funkcja
I
Obiekty definiowane przez przeglądarkę + własne obiekty
Na wyjściu
Otrzymano odpowiedź od wątku roboczego:
i=1, otrzymano odpowiedź od wątku głównego: Witaj wątku roboczy
Otrzymano odpowiedź od wątku roboczego:
i=2, otrzymano odpowiedź od wątku głównego: Witaj wątku roboczy
135
136
Obiekty
Język oparty na prototypach kontra język oparty na klasach
Język obiektowy oparty na klasach (Java)
I Klasy i instancje są różnymi bytami
(podmiotami)
I
I
I
Definiowanie klasy za pomocą
definicji klasy; tworzenie instancji
klasy za pomocą metod konstruktora
Tworzenie pojedynczego obiektu za
pomocą operatora ’new’.
Tworzenie hierarchii obiektów za
pomocą definicji klas w celu
zdefiniowania podklas istniejących
klas
I
Dziedziczenie własności poprzez
podążanie za łańcuchem klas
I
Definicja klasy określa wszystkie
właściwości wszystkich instancji klasy.
Nie można dodać nowych właściwości,
dynamicznie, w czasie wykonywania
Obiekty
Tworzenie obiektów
Język obiektowy oparty na prototypach
(JavaScript)
I Wszystkie obiekty są instancjami
I
Definiowanie i tworzenie zestawu
obiektów za pomocą funkcji
konstruktora
I
Podobnie
I
Tworzenie hierarchii obiektów poprzez
przypisanie obiektu jako prototypu
związanego z funkcją konstruktora
I
Dziedziczenie własności poprzez
podążanie za łańcuchem prototypów
I
Funkcja konstruktora lub prototypu
określa początkowy zestaw
właściwości. Można dodawać i usuwać
właściwości dynamicznie do
poszczególnych obiektów lub do
całego zestawu obiektów
137
Tworzenie za pomocą inicjalizatora obiektu
auto1 = new Auto ( " BMW " , " 520 " , 2 0 0 3 ) ;
auto2 = new Auto ( " Fiat " , " Siena " , 1 9 9 8 ) ;
Tworzenie przy użyciu funkcji konstruktora
Obiekty
function Auto ( marka , model , rocznik ) {
this . marka=marka ;
this . model=model ;
this . rocznik=rocznik ;
}
138
Obiekty
Definiowanie metod
T
AG
H
w
K
function Auto ( marka , model , rocznik ) {
this . wyswietl=wyswietl
}
iw
auto=new Auto ( " BMW " , " 520 " ) ;
auto . wyswietl ( ) ; //Wyś w i e t l i : BMW 520
auto [ ’ wyswietl ’ ] ( ) ; //Wyś w i e t l i : BMW 520
yd
zia
łu
IE
console . log ( this . marka+" " ) ;
console . log ( this . model ) ;
}
at
yk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
tó
w
In
function dlugosc ( ) {
return ’D ł ugo ś ć napisu ’+ this+" wynosi "+this . length ;
}
ud
en
var napis=’ abc ’ ;
String . prototype . dlugosc=dlugosc ;
console . log ( napis . length ) ; // w y p i s z e : 3
console . log ( napis . dlugosc ( ) ) ; // w y p i s z e : Dł ugo ś ć n a p i s u abc w y n o s i 3
st
1
2
3
4
5
6
7
8
fo
rm
Definiowanie metody dla typu własnego
Definiowanie nowej (własnej) metody dla typu wbudowanego
er
139
at
ia
ł
y
1 function Auto ( marka , model , rocznik ){
2
3
4
5 }
6
7 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
8 function Osoba ( nazwa , wiek , plec ){
9
this . nazwa=nazwa ;
10
this . wiek=wiek ;
11
this . plec=plec ;
12
this . constructor . krotnosc++;
13 }
14 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
15 var auto1 = new Auto ( " BMW " , " 520 " , 2 0 0 3 ) ;
16 var auto2 = new Auto ( " Fiat " , " Siena " , 1 9 9 8 ) ;
17
18 auto1 . kolor = " czerwony " ;
19 console . log ( auto1 . kolor ) ; // W y p i s z e : c z e r w o n y
20 console . log ( auto2 . kolor ) ; // W y p i s z e : u n d e f i n e d
21
22 /∗w ł a s n o ś ć ’ p r o t o t y p e ’ t o w ł a s n o ś ć d o s t ę pna w o b i e k t a c h : O b j e c t , A r r a y , S t r i n g , Number , Date ,
F u n c t i o n , RegExp o r a z B o o l e a n
23
∗/
24 console . log ( Auto . prototype ) ; // w y p i s z e : [ o b j e c t O b j e c t ]
25 console . log ( Auto . prototype . constructor ) ; // w y p i s z e : f u n c t i o n Auto ( marka , model , r o c z n i k ){ t h i s .
marka=marka ; t h i s . model=model ; t h i s . r o c z n i k=r o c z n i k ; }
26
27 Auto . prototype . pojemnosc = null ;
28 auto2 . pojemnosc = 1 5 8 0 ;
29 console . log ( auto1 . pojemnosc ) ; // W y p i s z e : n u l l
30 console . log ( auto2 . pojemnosc ) ; // W y p i s z e : 1580
31
32 Osoba . krotnosc =0; //w ł a s n o ś ć s t a t y c z n a
33 var jk = new Osoba ( " Jan Kowalski " , 3 3 , " M " ) ;
34 auto1 . wlasciciel = jk ;
35 console . log ( auto1 . wlasciciel . nazwa ) ; // W y p i s z e : Jan K o w a l s k i
36 console . log ( Osoba . krotnosc ) ; // w y p i s z e : 1
dl
a
Własności i ich tworzenie
ra
ko
wi
e
1
2
3
4
5
6
7
8
1 var auto1 = {marka : " BMW " , model : " 520 " ,
rocznik : 2 0 0 3 } ;
2 var auto2 = {marka : " Fiat " , model : " Siena
" , rocznik : 1 9 9 8 } ;
140
Obiekty
Definiowanie metod pobierających oraz ustawiających
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
3
var obj = {wlasnosc : 1};
console . log ( JSON . stringify (
Object.getOwnPropertyDescriptor ( obj , " wlasnosc " ) )
);
//Wyś w i e t l i : {”value”:1, ”writable”:true, enumerable”:true,
,
ćonfigurable”:true}
4
5 var x = {};
6 Object.defineProperty ( x , " wlasnosc1 " , {
7
writable : true ,
// b ę d z i e moż na u s t a w i ć
warto ś ć
8
enumerable : true ,
// b ę d z i e w i d a ć w f o r−i n ,
in
9
configurable : true , // b ę d z i e moż na z m i e n i ć
deskryptor
10
value : 42
11 }) ;
12 console . log ( x . wlasnosc1 ) ; // Wyś w i e t l i : 42
13 Object.defineProperty ( x , " wlasnosc2 " ,{
14
value : 1
15 }) ;
16 console . log ( JSON . stringify ( Object .
g e t O w n P r o p e r t y D e s c r i p t o r ( x , " wlasnosc2 " ) )
);
17 //Wyś w i e t l i : {” v a l u e ” : 1 , ” w r i t a b l e ” : f a l s e , ”
enumerable ”: f a l s e ,” c o n f i g u r a b l e ”: f a l s e}
o . d =10;
console . log ( o . d ) ; // W y p i s z e : 19
141
Obiekty
Ograniczanie możliwości modyfikacji obiektów
Obiekty
Deskryptory własności
1
2
var o = {
a: 7,
get b ( ) { return this . a + 1 ; } ,
set c ( x ) { this . a = x / 2 ; }
};
console . log ( o . a ) ; // W y p i s z e : 7
console . log ( o . b ) ; // W y p i s z e : 8
o . c = 50;
console . log ( o . a ) ; // W y p i s z e : 25
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
Object . defineProperty ( o , ’d ’ ,{
get : function ( ) { return this . a − 1 ; } ,
set : function ( x ) { this . a = x ∗ 2 }
}) ;
1 var obj = { _x : 5 , y : " abc " };
2 Object.defineProperties ( obj , {
3
x : {
4
enumerable : false ,
5
configurable : true ,
6
get : function ( ) {
7
return this . _x ;
8
},
9
set : function ( nowaWartosc ) {
10
if ( nowaWartosc < 1 0 ) {
11
this . _x = nowaWartosc ;
12
} else {
13
this . _x = −1;
14
}
15
}
16
},
17
y : {
18
enumerable : false
19
},
20
z : {
21
enumerable : true
22
}
23 }) ;
24
25 obj . x =1;
26 console . log ( obj . x ) ; // Wyś w i e t l i : 1
27 obj . x =10;
28 console . log ( obj . x ) ; // Wyś w i e t l i : −1
29 obj . y =10;
30 console . log ( obj . y ) ; // Wyś w i e t l i : 10
31 for ( licznik in obj )
32
console . log ( licznik ) ; /∗ Wyś w i e t l i :
33
x
34 z ∗/
142
Obiekty
Tworzenie hierarchii obiektów
Prosty przykład
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
" use strict " ;
var obj = {
a: 5,
b: 7
};
Object . pr ev e nt Ex te n si o n s ( obj ) ;
obj . a = 3 1 3 3 7 ; // zmia na w a r t o ś c i : z a d z i a ł a
delete obj . b ;
// u s u n i ę c i e w ł a s n o ś c i : z a d z i a ł o
obj . c = 4 2 ;
// d o d a n i e w ł a s n o ś c i : s i l e n t f a i l u r e ; w s t r i c t : T y p e E r r o r
Object . seal ( obj ) ;
obj . a = 3 1 3 3 7 ; // zm ia na w a r t o ś c i : z a d z i a ł a
delete obj . b ;
// u s u n i ę c i e w ł a s n o ś c i : s i l e n t f a i l u r e ; w s t r i c t : T y p e E r r o r
obj . c = 8 ;
Object . freeze ( obj ) ;
obj . a = 3 1 3 3 7 ; // zm ia na w a r t o ś c i : s i l e n t f a i l u r e ; w s t r i c t : T y p e E r r o r
delete obj . b ;
// u s u n i ę c i e w ł a s n o ś c i : s i l e n t f a i l u r e ; w s t r i c t : T y p e E r r o r
obj . c = 8 ;
143
144
Tworzenie hierarchii
Obiekty
Obiekty
Tworzenie hierarchii obiektów
Alternatywny sposób tworzenia hierarchii obiektów
Trochę bardziej złożony przykład
ECMAScript 5
1 function Osoba ( ) {
2
this . imie = null ;
3
this . nazwisko = null ;
4
this . metoda = function ( ) {
5
return " Jestem metod ą " ;
6
}
7 }
8 function Pracownik ( ) {
9
this . id = null ;
10 }
11 Pracownik . prototype = new Osoba ( ) ;
12
13 var pracownik = new Pracownik ( ) ;
14 pracownik . imie = " Stanis ł aw " ;
15 pracownik . nazwisko = " Polak " ;
16 pracownik . id = 1 ;
17 console . log ( pracownik . id ) ; // W y p i s z e : 1
18 console . log ( pracownik . nazwisko ) ; // W y p i s z e :
Polak
19 console . log ( pracownik . metoda ( ) ) ; // W y p i s z e :
J e s t e m metod ą
Stary sposób
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var Osoba = {
imie : null ,
nazwisko : null ,
metoda : function ( ) {
return " Jestem metod ą " ;
}
};
// , , P o d k l a s a ’ ’ k l a s y Osoba
var Pracownik = Object . create ( Osoba , {
id : { // i d p r a c o w n i k a
value : null ,
enumerable : true ,
configurable : true ,
writable : true
}
}) ;
var pracownik = Object . create ( Pracownik ) ;
pracownik . imie = " Stanis ł aw " ;
pracownik . nazwisko = " Polak " ;
pracownik . id = 1 ;
console . log ( pracownik . id ) ; // W y p i s z e : 1
console . log ( pracownik . nazwisko ) ; // W y p i s z e :
Polak
console . log ( pracownik . metoda ( ) ) ; // W y p i s z e :
J e s t e m metod ą
Nowy sposób
145
Obiekty
Alternatywny sposób tworzenia hierarchii obiektów
146
Podstawy języka TypeScript
ECMAScript 6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
’ use strict ’ ; //Wł ą c z e n i e t r y b u ś c i s ł ego
class Osoba {
constructor ( imie , nazwisko ) {
this . imie = imie ;
this . nazwisko = nazwisko ;
}
I
Nadzbiór języka JavaScript
I
I
metodaZwyk ł a ( ) {
return " Jestem metod ą instancyjn ą " ;
}
I
I
I
static me toda Sta tycz na ( ) {
return " Jestem metod ą statyczn ą " ;
}
}
class Pracownik extends Osoba {
constructor ( id , imie , nazwisko ) {
super ( imie , nazwisko ) ;
this . id = id ;
}
}
Opcjonalne statyczne typowanie
Programowanie zorientowane obiektowo oparte na klasach
Moduły
Interfejsy
Opracowany przez firmę Microsoft
I
Kompilowany do JavaScript
I
Używany, m.in., w AngularJS wersja 2.x+
Jak zdobyć kompilator
I
I
I
Pakiet Node.js
$ npm install -g typescript
Wtyczka dla Visual Studio
var pracownik = new Pracownik ( 1 , " Stanis ł aw " , " Polak " ) ;
console . log ( pracownik . id ) ;
// 1
console . log ( pracownik . imie ) ;
// S t a n i s ł aw
console . log ( pracownik . nazwisko ) ;
// P o l a k
console . log ( pracownik . metodaZwyk ł a ( ) ) ;
// J e s t e m metod ą i n s t a n c y j n ą
console . log ( Pracownik . met oda Statycz na ( ) ) ; // J e s t e m metod ą s t a t y c z n ą
147
148
ra
ko
wi
e
Obsługa błędów
K
Błąd składniowy
AG
H
Błąd typowania
skrypt.ts
$ tsc skrypt.ts #generuj kod ES3
$ tsc --target ES5 skrypt.ts #generuj kod ES5
Kompilacja
$ node skrypt.js
Witaj Świecie
$ tsc skrypt.ts
skrypt.ts(1,5): error TS2322: Type ’string’ is
not assignable to type ’boolean’.
1 console . log ( " Witaj Ś wiecie " ) ;
$ tsc skrypt.ts
skrypt.ts(1,5): error TS1134: Variable
declaration expected.
skrypt.ts(1,8): error TS1005: ’(’ expected.
skrypt.ts(1,11): error TS1005: ’)’ expected.
skrypt.ts(2,13): error TS1135: Argument
expression expected.
skrypt.ts(2,15): error TS1005: ’(’ expected.
In
fo
rm
skrypt.js
at
yk
iw
yd
zia
łu
Kompilacja
skrypt.ts
Kompilacja i uruchamianie
en
tó
w
1 let ż ywy = ’ abc ’ ;
2 console . log ( ż ywy ) ;
1
2
3
4
5
6
let ;
if ( = 2 )
;
console . log ( ) ;
if ( )
;
a
st
ud
skrypt.js
IE
T
skrypt.ts
1 let ż ywy : boolean = ’ abc ’ ;
2 console . log ( ż ywy ) ;
1 console . log ( " Witaj Ś wiecie " ) ;
w
1 let if = 2 ;
2 console . log ( if ) ;
149
150
M
at
er
ia
ły
dl
skrypt.js
Deklarownie typu zmiennej
1
2
3
4
5
6
let ż ywy : boolean = true ;
let wiek : number = 4 8 ;
let nazwisko : string = ’ Kowalski ’ ;
let imiona:string[] = [ ’ Jan ’ , ’ Jerzy ’ ] ;
let wiek_dzieci : Array<number> = [ 1 , 2 0 ,
3];
7 let wiek_rodzic ó w : Array<number> = [ 4 0 , "
czterdzie ś ci jeden " ] ; // . . . Type ’
s t r i n g ’ i s not a s s i g n a b l e to type
’ number ’ .
8
9 let krotka : [string,number,boolean] ;
10 krotka = [ ’1 ’ , 2 , true ] ;
11 console . log ( krotka [ 2 ] ) ; // W y p i s z e : t r u e
12 krotka = [ ’1 ’ , 2 , true , 4 ] ; //OK
13 krotka = [ ’1 ’ , 2 ] ; // . . . Type ’ [ s t r i n g ,
number ] ’ i s n o t a s s i g n a b l e t o t y p e
’ [ s t r i n g , number , b o o l e a n ] ’ . . . .
14 krotka = [ 1 , 2 , 3 ] ; // . . . Type ’ [ number ,
number , number ] ’ i s n o t a s s i g n a b l e
t o t y p e ’ [ s t r i n g , number , b o o l e a n
] ’.
Typowanie
15 enum Oczy {Niebieskie , Zielone = 4 ,
Piwne , Br ą zowe } ;
16 let kolor_oczu = Oczy . Niebieskie ;
17 console . log ( Oczy [ 0 ] ) ; // W y p i s z e :
Niebieskie
18 console . log ( Oczy [ 4 ] ) ; // W y p i s z e : Z i e l o n e
19 console . log ( Oczy [ 5 ] ) ; // W y p i s z e : Piwne
20
21 let cokolwiek : any = 4 ;
22 cokolwiek = " Napis " ;
23 cokolwiek = true ;
24
25 function wypisz ( komunikat ) : void {
26
console . log ( komunikat ) ;
27 }
28
29 function wyj ą tek ( komunikat ) : never {
30
throw new Error ( komunikat ) ;
31 }
32
33 function p ę tla ( ) : never {
34
while ( true ) {}
35 }
151
1 let napis : string ;
2 napis = 1 ; //B ł ąd , n i e moż na p o d s t a w i a ć
l i c z b y pod z mi en n ą t y p u n a p i s o w e g o
3
4 let liczba = 1 ;
5 liczba = ’2 ’ ; //B ł ąd , n i e moż na
p o d s t a w i a ć n a p i s u pod zm ienn ą t y p u
liczbowego
skrypt.ts
1
2
3
4
5
6
7
8
let napis : string ;
napis = <any> 1 ; // T e r a z j e s t OK
// l u b
napis = 1 as any 1 ;
let liczba = 1 ;
liczba = <any>’2 ’ ; // T e r a z j e s t OK
// l u b
liczba = 2 as any’2 ’ ; // T e r a z j e s t OK
skrypt.ts
$ tsc skrypt.ts
skrypt.ts(2,1): error TS2322: Type ’number’ is
not assignable to type ’string’.
skrypt.ts(5,1): error TS2322: Type ’string’ is
not assignable to type ’number’.
$ tsc skrypt.ts
152
Interfejsy
Interfejsy
Tworzenie typu złożonego
Określanie typów funkcji
interface Nazwa {
imi ę : string ;
// obowi ą zkowe
nazwisko : string ; // obowi ą zkowe
wiek ? : number ;
// o p c j o n a l n y
}
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
let u ż ytkownik : Nazwa ;
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
u ż ytkownik = {
imi ę : ’ Jan ’ ,
nazwisko : ’ Kowalski ’
}
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
u ż ytkownik = {
nazwisko : ’ Kowalski ’ ,
wiek : ’ 40 ’ //B ł ą d : b ł ę dny t y p w a r t o ś c i
}
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
u ż ytkownik = {
//B ł ą d : n i e w y s p e c y f i k o w a n o ’ n a z w i s k o ’
imi ę : ’ Jan ’
}
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
u ż ytkownik = {
nazwisko : 3 4 5 , //B ł ą d : b ł ę dny t y p
warto ś c i
28
wiek : ’ nastolatek ’
29 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Kompilacja
$ tsc skrypt.ts
skrypt.ts(14,1): error TS2322: Type ’{ imię:
string; nazwisko: string; wiek: string; }’
is not assignable to type ’Nazwa’.
Types of property ’wiek’ are incompatible.
Type ’string’ is not assignable to type
’number’.
string; }’ is not assignable to type ’Nazwa’.
Property ’nazwisko’ is missing in type ’{
imię: string; }’.
string; nazwisko: number; wiek: string; }’
is not assignable to type ’Nazwa’.
Types of property ’nazwisko’ are
incompatible.
Type ’number’ is not assignable to type
’string’.
interface fu nkcjaNapisowa {
( param1 : string , param2 : string ) : string ;
}
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
let dodajNapisy : funkcjaNapis owa ;
let dodajLiczby : funkcjaNapis owa ;
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
dodajNapisy = function ( napis1 : string , napis2 : string ) {
return napis1+napis2 ;
} //OK
dodajLiczby = function ( liczba1 : number , liczba2 : number ) {
return liczba1 + liczba2 ;
} /∗ . . .
e r r o r TS2322 : Type ’ ( l i c z b a 1 : number , l i c z b a 2 : number ) => number ’ i s n o t
a s s i g n a b l e to type ’ funkcjaNapisowa ’ .
16
Types o f p a r a m e t e r s ’ l i c z b a 1 ’ and ’ param1 ’ a r e i n c o m p a t i b l e .
17
Type ’ number ’ i s n o t a s s i g n a b l e t o t y p e ’ s t r i n g ’ .
18
19 ∗/
20 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
21 dodajNapisy ( ’ Jan ’ , ’ Kowalski ’ ) ; //OK
22 dodajNapisy ( ’ Kowalski ’ ) ; // . . . e r r o r TS2346 : S u p p l i e d p a r a m e t e r s do n o t match
any s i g n a t u r e o f c a l l t a r g e t .
23 dodajNapisy ( 1 , 2 ) ; // . . . e r r o r TS2345 : Argument o f t y p e ’ number ’ i s n o t
a s s i g n a b l e to parameter of type ’ s t r i n g ’ .
skrypt.ts
153
skrypt.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Interfejsy
Interfejsy
Typy indeksowany
Typy klasowe
1
2
3
4
5
6
7
154
interface haszNapis ó w {
[ index : string ] : string ;
}
let parametry : haszNapis ó w ;
parametry [ ’ serwer ’ ] = ’ HP ’ ; // OK
let bar : number = parametry [ ’ serwer ’ ] ; // . . . e r r o r TS2322 : Type ’ s t r i n g ’ i s n o t
a s s i g n a b l e t o t y p e ’ number ’ .
8 parametry [ ’ serwer ’ ] = 2 3 4 ; // . . . e r r o r TS2322 : Type ’ number ’ i s n o t a s s i g n a b l e
to type ’ s t r i n g ’ .
skrypt.ts
1
2
3
4
5
6
7
8
9
class Osoba {
id : number ;
}
interface Walidator{
sprawd ź Unikalno ś ć ID ( s : number ) : boolean ;
}
class Pracownik extends Osoba implements Walidator {}
skrypt.ts
Na wyjściu
skrypt.ts(9,7): error TS2420: Class ’Pracownik’ incorrectly implements interface ’Walidator’.
Property ’sprawdźUnikalnośćID’ is missing in type ’Pracownik’.
155
156
Klasy
Klasy oraz typy generyczne
Modyfikatory
1 class Osoba {
2
protected _id : number ;
3
readonly imi ę : string ;
4
readonly nazwisko : string = " Anonim " ;
5
6
get id ( ) : number {
7
return this . _id ;
8
}
9
10
set id ( warto ś ć : number ) {
11
this . _id = warto ś ć
12
}
13
14
constructor ( imi ę : string , nazwisko :
string ) {
15
this . imi ę = imi ę ;
16
this . nazwisko = nazwisko ;
17
}
18 }
19 class Pracownik extends Osoba {
20
constructor ( id : number , imi ę : string ,
nazwisko : string ) {
21
super ( imi ę , nazwisko ) ;
22
this . id=id ;
23
}
24 }
25
26 let pracownik = new Pracownik ( 1 , " Stanis ł
aw " , " Polak " ) ;
27 console . log ( pracownik . id ) ;
// 1
28 console . log ( pracownik . _id ) ;
//
P r o p e r t y ’ i d ’ i s p r o t e c t e d and
only a c c e s s i b l e within c l a s s ’
Osoba ’ and i t s s u b c l a s s e s .
29 console . log ( pracownik . imi ę ) ;
//
S t a n i s ł aw
30 console . log ( pracownik . nazwisko ) ; // P o l a k
31 pracownik . imi ę = " Jan " ; // . . . L e f t −hand
s i d e of assignment expression
c a n n o t be a c o n s t a n t o r a r e a d−
only property .
skrypt.ts
157
24 class MyApp {
25
constructor ( ) {
26
let myUsers = new Cus to m Co ll e c t io n<User> ( ) ;
27
let myMessages = new Cu s to mC o ll ec t i o n<Message> ( ) ;
28
29
let user : User = myUsers . GetFirst ( ) ;
30
// E r r o r b e c a u s e o f g e n e r i c t y p e v a l i d a t i o n
31
let message : Message = myUsers . GetFirst ( ) ;
32
// E r r o r b e c a u s e o f t h e G e n e r i c t y p e v a l i d a t i o n .
33
myUsers . Add ( new Message ( ) ) ;
34
}
35 }
skrypt.ts
Źródło: https://gist.github.com/abergs/5817818
$ tsc skrypt.ts
skrypt.ts(36,9): error TS2322: Type ’User’ is not assignable to type ’Message’.
Property ’Message’ is missing in type ’User’.
skrypt.ts(38,17): error TS2345: Argument of type ’Message’ is not assignable to parameter of type ’User’.
Property ’Name’ is missing in type ’Message’.
158
Dekoratory
ra
ko
wi
e
1 class C u st o m Co l l e c t i o n <T> {
2
private itemArray : Array<T> ;
3
4
constructor ( ) {
5
this . itemArray = [ ] ;
6
}
7
8
Add ( item : T ) {
9
this . itemArray . push ( item ) ;
10
}
11
12
GetFirst ( ) : T {
13
return this . itemArray [ 0 ] ;
14
}
15 }
16 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
17 class User {
18
public Name ;
19 }
20 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
21 class Message {
22
public Message ;
23 }
Przestrzenie nazewnicze oraz moduły
method
Można je zagnieżdżać — tworzenie
hierarchii na podstawie
mechanizmu zagnieżdżania
przestrzeni nazw
I
Nie wymagają ładowacza modułów
w
AG
H
CommonJS
require.js
I
Jeden moduł to jeden plik
I
Tworzenie hierarchii w oparciu o
mechanizm zagnieżdżania
katalogów
y
ia
ł
er
159
at
I
Wymagają deklaracji zależności
(od innych modułów)
dl
a
Źródło: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Decorators.md
I
I
ud
skrypt.ts
I
In
I
tó
w
{ value: [Function],
writable: true,
enumerable: true,
configurable: true }
T
Jedna przestrzeń może obejmować
wiele plików
IE
I
łu
Umożliwiają zgrupowanie logicznie
powiązanych obiektów i typów w
zasięgu globalnym — nie trzeba ich
importować
Umożliwiają zgrupowanie logicznie
powiązanych obiektów i typów we
własnym zasięgu (zasięgu
lokalnym) — aby z nich skorzystać
należy je zaimportować
Importowanie odbywa się w
oparciu o ładowacz modułów:
yd
zia
I
Pozwalają na hermetyzację kodu
I
iw
Pozwalają na hermetyzację kodu
I
at
yk
$ tsc --target ES5 --experimentalDecorators skrypt.ts &&
node skrypt.js
f(): evaluated
g(abc): evaluated
g(abc): called
f(): called
C { method: [Function] }
I
fo
rm
en
function g ( value ) {
console . log ( " g ( "+value+" ) : evaluated " ) ;
return function ( target , propertyKey : string ,
descriptor : P r o p e r ty D es c r i pt o r ) {
16
console . log ( " g ( "+value+" ) : called " ) ;
17
}
18 }
19
20 class C {
21
@f()
22
@g(’abc’)
23
method ( ) {}
24 }
Przestrzenie nazewnicze
st
4
5
6
7
8
9
10
11
12
13
14
15
function f ( ) {
console . log ( " f () : evaluated " ) ;
return function ( target , propertyKey : string ,
descriptor : P r o p e r ty D e s c r i pt o r ) {
console . log ( " f () : called " ) ;
console . log ( target ) ;
console . log ( ) ;
console . log ( propertyKey ) ;
console . log ( ) ;
console . log ( descriptor ) ;
}
}
K
Moduły
1
2
3
160
Przestrzeń nazewnicza
Przestrzeń nazewnicza
Jednoplikowa
Wieloplikowa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
namespace A {
var a : string = ’ abc ’ ;
export class Twix {
constructor ( ) {
console . log ( ’ Twix ’ ) ;
}
}
1 namespace A {
2
export class Twix { . . . }
3 }
global1.ts
export class Pean utB ut terCu p {
constructor ( ) {
console . log ( ’ Pea nutBu tter Cup ’ ) ;
}
}
1 namespace A {
2
export class P ea nu tB u tt er Cu p { . . . }
3 }
global2.ts
export class KitKat {
constructor ( ) {
console . log ( ’ KitKat ’ ) ;
}
}
}
let o1 = new A . Twix ( ) ; // W y p i s z e : Twix
let o2 = new A . Pea nutButter Cup ( ) ; //
Wypisze : PeanutButterCup
23 let o3 = new A . KitKat ( ) ; // W y p i s z e :
KitKat
24 console . log ( A . a ) ; // . . . e r r o r TS2339 :
P r o p e r t y ’ a ’ d o e s n o t e x i s t on
type ’ typeof A ’ .
// /
// /
// /
let
let
let
<r e f e r e n c e p a t h=” g l o b a l 1 . t s ” />
o1 = new A . Twix ( ) ;
o2 = new A . P ea nu t Butt er C up ( ) ;
o3 = new A . KitKat ( ) ;
global3.ts
Źródło: http:
//stackoverflow.com/questions/30357634/
how-do-i-use-namespaces-with-typescript-external-modules
skrypt.ts
$ tsc --outFile skrypt.js skrypt.ts && node skrypt.js
Twix
PeanutButterCup
KitKat
skrypt.ts
1
2
3
4
5
6
1 namespace A {
2
export class KitKat { . . . }
3 }
161
162
Moduły zewnętrzne
Moduły zewnętrzne
Eksportowanie
Importowanie
1 export class Twix {
2
constructor ( ) {
3
4
}
5 }
6 export {Twix as Raider } ;
1 export class Twix { . . . }
2 export {Twix as Raider } ;
Mod1.ts
Mod1.ts
1 class PeanutBut ter Cup {
2
constructor ( ) {
3
console . log ( ’ P ea nutBu tterCup ’ ) ;
4
}
5 }
6 export {Pe a nu tBu tter Cup } ;
1 class Pe anutButte rCu p { . . . }
2 export {Pea nutBu tterCup } ;
Mod2.ts
Mod2.ts
1 export class KitKat {
2
constructor ( ) {
3
console . log ( ’ KitKat ’ ) ;
4
}
5 }
1 export class KitKat { . . . }
Źródło: http:
//stackoverflow.com/questions/30357634/
1
2
3
4
5
6
7
8
9
10
11
12
13
import
import
import
import
import
{Twix , Raider} from ’ ./ Mod1 ’ ;
{PeanutB utterCup} from ’ ./ Mod2 ’ ;
{KitKat} from ’ ./ Mod3 ’ ;
{KitKat as KitKatChunKy} from ’ ./ Mod3 ’ ;
∗ as Mars from ’ ./ Mod1 ’ ;
let o1 = new Twix ( ) ; // W y p i s z e : Twix
let o2 = new Raider ( ) ; // W y p i s z e : Twix
let o3 = new P ea nutButterCu p ( ) ; // W y p i s z e :
PeanutButterCup
let o4 = new KitKat ( ) ; // W y p i s z e : K i t K a t
let o5 = new KitKatChunKy ( ) ; // W y p i s z e : K i t K a t
let o6 = new Mars . Twix ( ) ; // W y p i s z e : Twix
let o7 = new Mars . Raider ( ) ; // W y p i s z e : Twix
skrypt.ts
Mod3.ts
Mod3.ts
163
164
Przestrzenie nazewnicze w modułach
Moduły zewnętrzne
Importowanie w stylu „NodeJS”
1 export namespace A {
2
export class Twix { . . . }
3 }
Mod1.ts
2
export class P ea nu tB u tt er Cu p { . . . }
3 }
Mod2.ts
2
export class KitKat { . . . }
3 }
Mod3.ts
Źródło: http://stackoverflow.com/questions/30357634/
1 class Twix {
2
constructor ( ) {
3
4
}
5 }
6 export = Twix ;
1 import Twix = require ( ’ ./ Mod ’ ) ;
2 let o = new Twix ( ) ;
skrypt.ts
Mod.ts
165
166
Tworzenie projektu
Pliki deklaracji
1 function pole ( promie ń ) {
2
return Math . PI∗Math . pow ( promie ń , 2 ) ;
3 }
4 module . exports = pole ;
1 {
2
" compi le rOpt ion s " : {
3
" module " : " commonjs " ,
4
" target " : " es5 " ,
5
" noImplicitAny " : false ,
6
" sourceMap " : false
7
},
8
" files " : [
9
" skrypt . ts "
10
]
11 }
1 import pole = require ( ’ ./ pole ’ ) ; // do ł ą
c z e n i e ’ pole . d . ts ’
2 let promie ń = 2 ;
3 console . log ( ‘ Pole ko ł a o promieniu ${
promie ń} wynosi ${pole ( promie ń ) } ‘ )
;
pole.js
1 declare function pole ( promie ń : number ) :
number ;
2 export = pole
skrypt.ts
pole.d.ts
tsconfig.json
Kompilacja projektu
Przykłady użycia kompilatora
$ tsc && node skrypt.js
skrypt.ts(3,56): error TS2304: Cannot find name ’pole’.
$ tsc --init
$ tsc
1
2
3
4
" use strict " ;
var pole = require ( " ./ pole " ) ;
var promie ń = 2 ;
console . log ( " Pole ko ł a o promieniu " +
promie ń + " wynosi " + pole ( promie
ń) ) ;
skrypt.js
167
168
AngularJS
Podstawy
Zalety i wady AngularJS
I
Umożliwia tworzenie aplikacji w oparciu o architekturę komponentową
I
Zgodność aplikacji AngulsJS z różnymi przeglądarkami
I
Pozwala używać HTML jako języka szablonów
w
AG
H
Zapewnia możliwość wiązania
danych HTML, co wzbogaca
doznania użytkownika serwisu
Wady
I
Kod może być testowany w
oparciu o mechanizm testów
jednostkowych
I
Wykorzystuje wstrzykiwanie
zależności oraz pozwala na
korzystanie z separacji zagadnień
I
Zapewnia komponenty
wielokrotnego użytku
I
Deweloperzy mogą osiągnąć
większą funkcjonalność z krótszego
kodu
I
Stworzone aplikacje nie są
bezpieczne
I
Nie działa, gdy użytkownik
wyłączy obsługę JS
ia
ły
dl
a
st
ud
en
tó
w
In
Rozszerza HTML o dodatkowe atrybuty i znaczniki
I
IE
T
Wydajny, darmowy framework do tworzenia dynamicznych aplikacji WWW
w języku TypeScript lub JavaScript
Zapewnia możliwość tworzenia
pojedynczej strony aplikacji w
bardzo zgrabny oraz kontrolowany
sposób
at
yk
iw
yd
zia
łu
I
I
K
Zalety
I
Framework „AngularJS”
ra
ko
wi
e
Podstawy
fo
rm
169
Podstawy
170
M
at
er
Etapy tworzenia aplikacji
Podstawy
Architektura
I
Utworzenie szablonu zawierającego HTML ze wstawkami Angular,
I
Kreowanie komponentów do zarządzania tymi szablonami,
I
Dodanie logiki aplikacji w usługach (ang. services),
I
Tworzenie modułów, których zawartością są komponenty oraz usługi,
I
Przekazanie modułu głównego do funkcji uruchamiającej aplikację.
Moduł
Komponent
{}
Moduł
Usługa
{}
Moduł
wartość
3,1415
Moduł
Fn
λ
Wstrzykiwacz
Usługa
(
)
.
.
.
Komponent
(
)
.
(
)
.
.
)
.
.
.
Dyrektywa
{}
Wiązanie zdarzenia
Metadane
.
171
Szablon
< >
Wiązanie własności
(
Metadane
.
172
.
Aplikacja „Hello World”
Generowanie szkieletu aplikacji
Struktura projektu
Ważniejsze pliki oraz katalogi
hello
angular-cli.json
e2e
src
1
2
3
4
$ npm install −g @angular / cli
$ ng new hello
cd hello
$ ng serve
app
assets
environments
polyfills.ts
tslint.json
173
Składniki
Komponent oraz moduł
1 import { Component } from ’ @angular /
core ’ ;
2
3 @Component({
4
selector : ’app - root ’ ,
5
templateUrl : ’ ./ app . component . html
’,
6
styleUrls : [ ’ ./ app . component . css ’ ]
7 })
8 export class AppComponent {
9
title = ’ app works ! ’ ;
10 }
src/app/app.component.ts
174
Plik główny
1 import { BrowserModule } from ’ @angular /
platform - browser ’ ;
2 import { NgModule } from ’ @angular / core ’ ;
3 import { FormsModule } from ’ @angular / forms ’
;
4 import { HttpModule } from ’ @angular / http ’ ;
5
6 import { AppComponent } from ’ ./ app .
component ’ ;
7
8 @NgModule({
9
declarations : [ AppComponent ] ,
10
imports : [ BrowserModule , FormsModule ,
HttpModule ] ,
11
providers : [ ] ,
12
bootstrap : [ AppComponent ]
13 })
14 export class AppModule { }
1
2
3
4
5
6
7
8
9
10
import
import
import
import
{
{
{
{
p l a t f o r m B r o w s e r D y n a m i c } from ’ @angular / platform - browser - dynamic ’ ;
enableProdMode } from ’ @angular / core ’ ;
environment } from ’ ./ environments / environment ’ ;
AppModule } from ’ ./ app / app . module ’ ;
if ( environment . production ) {
enableProdMode ( ) ;
}
p l a t f o r m B r o w s e r D y n a m i c ( ) . boo ts tra pModule ( AppModule ) ;
src/main.ts
src/app/app.module.ts
175
176
Składniki
Składniki
Szablon
Testowanie aplikacji
Środowiska do automatycznego testowania aplikacji
1 <h1>{{title}}</ h1>
1 ...
2 @Component ({
3
selector : ’ app-root ’ ,
4
...
5 })
6 export class AppComponent {
7
title = ’ app works ! ’ ;
8 }
src/app/app.component.html
Uruchamianie testów
src/app/app.component.ts
Tworzenie testów
I
Karma
I
Jasmine
I
Protractor
I
Mocha
1 <! doctype html>
2 <html>
3
<head>
4
5
<title>Hello</ title>
6
<base href=" / ">
7
8
<meta name=" viewport " content=" width = device width , initial - scale =1 ">
9
<link rel=" icon " type=" image /x - icon " href="
favicon . ico ">
10
</ head>
11
<body>
12
<app-root> Loading . . . </app-root>
13
</ body>
14 </ html>
src/index.html
177
178
Środowisko do uruchamiania testów jednostkowych „Karma”
Konfiguracja
Testy
w
AG
H
yd
zia
iw
at
yk
fo
rm
180
IE
T
$ ng test
...
14 02 2017 1 5 : 2 6 : 3 2 . 7 5 4 : INFO [
karma ] : Karma v1 . 2 . 0 server
started at http : / /
localhost : 9 8 7 6 /
14 02 2017 1 5 : 2 6 : 3 2 . 7 5 4 : INFO [
launcher ] : Launching
browser Firefox with
unlimited concurrency
14 02 2017 1 5 : 2 6 : 3 2 . 7 6 0 : INFO [
launcher ] : Starting browser
Firefox
14 02 2017 1 5 : 2 6 : 3 5 . 9 7 1 : INFO [
Firefox 5 1 . 0 . 0 ( Ubuntu
0 . 0 . 0 ) ] : Connected on
socket /#6
UsGClgJqyaDAt3OAAAA w i t h i d
7158706
Firefox 5 1 . 0 . 0 ( Ubuntu 0 . 0 . 0 ) :
Executed 3 of 3 SUCCESS
( 0 . 6 2 secs / 0 . 6 0 7 secs )
łu
1
2
3
4
5
6
In
tó
w
en
ud
st
dl
a
y
ia
ł
src/app/app.component.spec.ts
er
karma.conf.js
1 ...
2 describe ( ’ AppComponent ’ , ( ) => {
3
beforeEach ( ( ) => {
4
TestBed . c o n f i g u r e T e s t i n g M o d u l e ({
5
declarations : [ AppComponent ] ,
6
}) ;
7
TestBed . c o m p i l eC o m p o n e n t s ( ) ;
8
}) ;
9
10
it ( ’ should create the app ’ , async ( ( ) => {
11
const fixture = TestBed . cr e at eC omp on en t ( AppComponent ) ;
12
const app = fixture . debugElement . c o m p o n e n t I n s t an c e ;
13
expect ( app ) . toBeTruthy ( ) ;
14
}) ) ;
15
16
it ( ‘ should have as title ’ app works ! ’ ‘ , async ( ( ) => {
17
18
const app = fixture . debugElement . c o m p o n e n t I n s t an c e ;
19
expect ( app . title ) . toEqual ( ’ app works ! ’ ) ;
20
}) ) ;
21
22
it ( ’ should render title in a h1 tag ’ , async ( ( ) => {
23
24
fixture . detectChanges ( ) ;
25
const compiled = fixture . debugElement . nativeElement ;
26
expect ( compiled . querySelector ( ’ h1 ’ ) . textContent ) . toContain ( ’
app works ! ’ ) ;
27
}) ) ;
28 }) ;
at
1 // Karma c o n f i g u r a t i o n f i l e , s e e l i n k
f o r more i n f o r m a t i o n
2 // h t t p s : / / karma−r u n n e r . g i t h u b . i o / 0 . 1 3 /
c o n f i g / c o n f i g u r a t i o n −f i l e . h t m l
3
4 module . exports = function ( config ) {
5
config . set ({
6
...
7
frameworks : [ ’ jasmine ’ , ’ @angular /
cli ’ ] ,
8
plugins : [
9
require ( ’ karma - jasmine ’ ) ,
10
require ( ’ karma - chrome - launcher ’ ) ,
11
...
12
],
13
files : [
14
{ pattern : ’ ./src/test.ts }}; ’ ,
watched : false }
15
],
16
...
17
}) ;
18 } ;
1 // T h i s f i l e i s r e q u i r e d by karma . c o n f .
j s and l o a d s r e c u r s i v e l y a l l t h e .
s p e c and f r a m e w o r k f i l e s
2
3 import ’ zone . js / dist / long - stack - trace zone ’ ;
4 ...
5
6 // U n f o r t u n a t e l y t h e r e ’ s no t y p i n g f o r
the ‘ karma ‘ v a r i a b l e . Just
d e c l a r e i t a s any .
7 declare var __karma__ : any ;
8 declare var require : any ;
9
10 // P r e v e n t Karma from r u n n i n g
prematurely .
11 __karma__ . loaded = function ( ) {};
12
13 // F i r s t , i n i t i a l i z e t h e A n g u l a r t e s t i n g
environment .
14 getTestBed ( ) . i n i t T es t E n v i r o n me n t (
15
BrowserDynamicTestingModule ,
16
platformBrowserDynamicTesting ( )
17 ) ;
18 // Then we f i n d a l l t h e t e s t s .
19 const context = require . context ( ’ ./ ’ ,
true , / \ . spec \ . ts$ / ) ;
20 // And l o a d t h e m o d u l e s .
21 context . keys ( ) . map ( context ) ;
22 // F i n a l l y , s t a r t Karma t o r u n t h e t e s t s
.
179
23 __karma__
. start ( ) ;
K
Środowisko do uruchamiania testów jednostkowych „Karma”
ra
ko
wi
e
7
Uruchomienie testu
Środowisko do uruchamiania testów e2e „Protractor”
Środowisko do uruchamiania testów e2e „Protractor”
Konfiguracja
Test
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// P r o t r a c t o r c o n f i g u r a t i o n f i l e , s e e l i n k f o r more i n f o r m a t i o n
// h t t p s : / / g i t h u b . com/ a n g u l a r / p r o t r a c t o r / b l o b / m a s t e r / l i b / c o n f i g . t s
/∗ g l o b a l j a s m i n e ∗/
var SpecReporter = require ( ’ jasmine - spec - reporter ’ ) ;
exports . config = {
a l l S c rip t s Ti m eo u t : 1 1 0 0 0 ,
specs : [ ’ ./ e2e /**/*. e2e - spec . ts ’ ] ,
capabilities : {’ browserName ’ : ’ chrome ’ } ,
directConnect : true ,
baseUrl : ’ http :// localhost :4200/ ’ ,
framework : ’ jasmine ’ ,
jasmineN od eOpt s : {
showColors : true ,
defaultTimeoutInterval : 30000 ,
print : function ( ) {}
},
u s e A l l A n g u l a r 2 A p p R o o t s : true ,
beforeLaunch : function ( ) {
require ( ’ts - node ’ ) . register ({
project : ’ e2e ’
}) ;
},
onPrepare : function ( ) {
jasmine . getEnv ( ) . addReporter ( new SpecReporter ( ) ) ;
}
};
11
12
13
14
import { HelloPage } from ’ ./ app . po ’ ;
describe ( ’ hello App ’ , function ( ) {
let page : HelloPage ;
beforeEach ( ( ) => {
page = new HelloPage ( ) ;
}) ;
181
1
2
3
it ( ’ should display message saying app works ’ ,
( ) => {
page . navigateTo ( ) ;
expect ( page . g e t P a r a g r a p h T e x t ( ) ) . toEqual ( ’ app
works ! ’ ) ;
}) ;
}) ;
4
e2e/app.e2e-spec.ts
7
5
6
8
1
2
3
4
5
6
7
8
9
import { browser , element , by } from ’ protractor
’;
export class HelloPage {
navigateTo ( ) {
return browser . get ( ’/ ’ ) ;
}
g e t P ar a g ra p h T e x t ( ) {
return element ( by . css ( ’app - root h1 ’ ) ) .
getText ( ) ;
10
}
11 }
protractor.conf.js
1
2
3
4
5
6
7
8
9
10
9
10
11
12
13
14
15
16
$ ng e2e
...
[ 1 6 : 3 8 : 2 9 ] I / update − chromedriver : file exists
/ home / polak / hello / node_modules / protractor
/ node_modules / webdriver−manager / selenium /
chromedrive r_2 . 2 7 . zip
[ 1 6 : 3 8 : 2 9 ] I / update − chromedriver : unzipping
chromedrive r_2 . 2 7 . zip
[ 1 6 : 3 8 : 3 0 ] I / update − chromedriver : setting
permissions to 0755 for / home / polak / hello
/ node_modules / protractor / node_modules /
webdriver−manager / selenium / chrom edriver_2
.27
[ 1 6 : 3 8 : 3 0 ] I / update − chromedriver :
chromedrive r_2 . 2 7 up to date
[ 1 6 : 3 8 : 3 0 ] I / launcher − Running 1 instances of
WebDriver
[ 1 6 : 3 8 : 3 0 ] I / direct − Using ChromeDriver
directly . . .
Spec started
hello App
should display message saying app works
Executed 1 of 1 spec SUCCESS in 1 sec .
[ 1 6 : 3 8 : 3 2 ] I / launcher − 0 instance ( s ) of
WebDriver still running
[ 1 6 : 3 8 : 3 2 ] I / launcher − chrome #01 p a s s e d
Uruchomienie testu
182
e2e/app.po.ts
Aplikacja „Sklep”
Koncepcja aplikacji
Generowanie plików szkieletowych
Założenia
Potrzebne składniki
I
Aplikacja ma wyświetlać listę
produktów w postaci tabeli HTML
I
Adres strony z listą produktów:
http://localhost:
4200/products
I
Produkty są przechowywane, w
programie, w postaci tablicy
obiektów
I
Klasa reprezentująca produkt
I
Usługa dostarczająca zawartość
listy produktów
I
I
I
Moduł główny
Komponenty:
I
I
Strony mają być responsywne
183
główny
wyświetlający listę produktów
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ ng new shop
$ cd shop
$ ng generate class Product #Utwó r z s z k i e l e t k l a s y
installing class
create src / app / product . ts
$ ng generate service Products #Utwó r z s z k i e l e t u s ł u g i
installing service
create src / app / products . service . spec . ts
create src / app / products . service . ts
WARNING Service is generated but not provided , it must be provided to be used
$ ng generate component ProductsList #Utwó r z s z k i e l e t komponentu
installing component
create src / app / products−list / products−list . component . css
create src / app / products−list / products−list . component . html
create src / app / products−list / products−list . component . spec . ts
create src / app / products−list / products−list . component . ts
update src / app / app . module . ts
184
Niektóre z wygenerowanych plików szkieletowych
1 import { Injectable } from ’ @angular / core ’ ;
2
3 @Injectable ( )
4 export class Pro du c ts Se rv i ce {
5
constructor ( ) { }
6 }
src/app/products.service.ts
1
2
3
4
5
6
7
8
@Component ({
selector : ’app - products - list ’ ,
templateUrl : ’ ./ products - list . component . html ’ ,
styleUrls : [ ’ ./ products - list . component . css ’ ]
})
export class P r o d u c t s L i s t C o m p o n e n t implements
OnInit {
9
constructor ( ) { }
10
ngOnInit ( ) { }
11 }
src/app/products-list/productslist.component.ts
1 <p>products−list works !</ p>
Włączenie reponsywności
1 export class Product {
2 }
src/app/product.ts
1
import { Component , OnInit } from ’ @angular / core ’ ;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { BrowserModule } from ’ @angular / platform browser ’ ;
import { NgModule } from ’ @angular / core ’ ;
import { FormsModule } from ’ @angular / forms ’ ;
import { HttpModule } from ’ @angular / http ’ ;
import { AppComponent } from ’ ./ app . component ’ ;
import { P r o d u c t s L i s t C o m p o n e n t } from ’ ./ products list / products - list . component ’ ;
@NgModule ({
declarations : [
AppComponent ,
ProductsListComponent
],
imports : [
BrowserModule ,
FormsModule ,
HttpModule
],
providers : [ ] ,
bootstrap : [ AppComponent ]
})
export class AppModule { }
1 <! doctype html>
2 <html>
3
<head>
4
5
<title>Shop</ title>
6
<base href=" / ">
7
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
8
<meta name=" viewport " content=" width = device - width , initial - scale =1 ">
9
<link rel=" icon " type=" image /x - icon " href=" favicon . ico ">
10
</ head>
11
<body class=”container”>
12
<app−r o o t>Loading . . .</ app−r o o t>
13
</ body>
14 </ html>
src/index.html
src/app/products-list/productslist.component.html
185
186
Klasa reprezentująca produkt
Implementacja usługi dostarczenia listy produktów
1 export class Product {
2
id : number ;
3
name : string = ’ ’ ;
4
description : string = ’ ’ ;
5
price : number ;
6 }
src/app/product.ts
1 import { Injectable } from ’ @angular / core ’ ;
2 import { Product } from ’ ./ product ’ ;
3
4 const PRODUCTS : Product [ ] = [
5
{
6
id : 1 ,
7
name : ’ spadochron ’ ,
8
description : ’ Rewelacyjny spadochron dla nurk ó w ! Znakomicie zapobiega
zderzeniu si ę z dnem ’ ,
9
price : 2 5 0 . 9 9
10
},
11
{
12
id : 2 ,
13
name : ’ wanna ’ ,
14
description : ’ Dzi ę ki wbudowanym drzwiom ju ż wi ę cej nie po ś li ź niesz si ę
wychodz ą c z wanny ’ ,
15
price : 5 9 9 . 8 0
16
},
17 ] ;
18 /∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
19 @Injectable()
20 export class Pro du ctsService {
21
getProducts() : Product [ ] {
22
return PRODUCTS ;
23
}
24 }
src/app/products.service.ts
187
188
ra
ko
wi
e
Wyświetlanie listy produktów
1 ...
2 import { Produ ct s Se rvice } from ’ ../
products . service ’ ;
3 import { Product } from ’ ../ product ’ ;
4 ...
5 export class P r o d u c t s L i s t C o m p o n e n t
implements OnInit {
6
products : Product [ ] ;
7
8
// W s t r z y k i w a n i e u s ł u g i ’
P r o d u c t s S e r v i c e ’ − po
w s t r z y k n i e c i u , u s ł uga b ę d z i e
d o s t ę pna z a pomoc ą wyra ż e n i a ’
this . productsService ’
9
constructor ( private pr oduct sS ervice :
ProductsService ) {}
10
11
ngOnInit ( ) : void {
12
this . products = this.productsService .
getProducts ( ) ;
13
}
14 }
1 <table class=" table ">
2
<tr>
3
<th>Nazwa</ th>
4
<th>Opis</ th>
5
<th>Cena</ th>
6
</ tr>
7
<template ngFor l e t −p r o d u c t [ ngForOf ]="
products ">
8
<!−− p o w i e l a n y w i e r s z t a b e l i −−>
9
<tr>
10
<td>{{product.name}}</ td>
11
<td>{{product.description}}</ td>
12
<td>{{product.price}}</ td>
13
</ tr>
14
</template>
15 </ table>
IE
T
at
yk
iw
yd
zia
łu
1 <table class=" table ">
2
<tr>
3
<th>Nazwa</ th>
4
<th>Opis</ th>
5
<th>Cena</ th>
6
</ tr>
7
<tr *ngFor=" let product of products ">
8
<td>{{product . name}}</ td>
9
<td>{{product . description}}</ td>
10
<td>{{product . price}}</ td>
11
</ tr>
12 </ table>
fo
rm
en
tó
w
In
1 ...
2 import { Product sSe rvice } from ’ ./
products . service ’ ;
3
4 @NgModule ({
5
...
6
providers : [ ProductsService ] ,
7
...
8 })
9 ...
AG
H
w
K
Wstrzykiwanie usługi
ud
st
src/app/products-list/productslist.component.ts
189
190
M
at
er
ia
ły
dl
a
Trasowanie
Literatura
Źródła
Źródła I
1 ...
2 import { RouterModule }
from ’ @angular
/ router ’ ;
3 ...
4 @NgModule ({
5
...
6
imports : [
7
BrowserModule ,
8
FormsModule ,
9
HttpModule ,
10
RouterModule . forRoot ( [
11
{ path: ’products’, component:
ProductsListComponent }
12
])
13
],
14
...
15 })
16 . . .
I
Thomas Fuchs.
Scriptaculous Documentation.
http://madrobby.github.com/scriptaculous/.
I
Paweł Grzesiak.
Ajax w kilka minut.
http://internetmaker.pl/artykul/723,1,ajax_w_kilka_minut.html.
I
Patrick Hunlock.
Functional Javascript.
http://www.hunlock.com/blogs/Functional_Javascript.
I
MongoDB Inc.
The MongoDB Manual.
http://docs.mongodb.org/manual/.
I
Joyent.
Node.js Manual & Documentation.
http://nodejs.org/api/.
1
2
3
4
5
<h1>{{title}}</ h1>
<nav>
<a routerLink=" / products ">Products</ a>
</ nav>
<router-outlet></router-outlet>
src/app/app.component.html
191
192
Literatura
Źródła
Literatura
Źródła II
Źródła III
I
jQuery Project.
jQuery API.
http://api.jquery.com/.
I
Microsoft.
Typescript handbook.
http://www.typescriptlang.org/Handbook.
I
Mozilla.
AJAX.
https://developer.mozilla.org/pl/AJAX.
I
mozilla.org.
JavaScript Guide.
https://developer.mozilla.org/en/JavaScript/Guide.
I
Valerio Proietti.
MooTools API Documentation.
http://mootools.net/docs/core.
Źródła
193
I
Axel Rauschmayer.
Iterables and iterators in ECMAScript 6 .
http://www.2ality.com/2015/02/es6-iteration.html.
I
Marek Stępień.
marcoos.techblog.
http://blog.marcoos.com/.
I
Basarat Ali Syed.
Typescript deep dive.
http://basarat.gitbooks.io/typescript/.
I
wikibooks.org.
JavaScript.
http://en.wikibooks.org/wiki/JavaScript.
I
Wikipedia.
http://pl.wikipedia.org/.
194

Slajdy z wykładu

Transkrypt

Podobne dokumenty

Node.js

Wczytywanie i wypisywanie

Bezpieczeństwo systemu operacyjnego. Logi

Wstęp do teorii informacji: Wykład 2