JavaScript funkcyjność

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "JavaScript funkcyjność"

Helena Bukowska
9 lat temu
Przeglądów:

1 JavaScript funkcyjność WWW 9 kwietnia 2014

3 Możliwości tworzenia dynamicznych stron WWW HTML i CSS. Skrypty CGI (Perl, PHP). Serwery (django, java). Plug-iny. Ksiażka Większość przykładów pochodzi z ksiażki: Secrets of the JavaScript Ninja. John Resig ISBN-13:

Ksiażka Większość przykładów pochodzi z ksiażki: Secrets

4 Skad się wział JS Składnia zbliżona do Javy. Obsługa zdarzeń powiazanych z elemantami HTML. Istnienie obiektów bez klas. Możliwość generowania fragmentów HTML.

5 Elementy z których składa się JS Jadro (ECMAScript) The Document Object Model (DOM) The Browser Object Model (BOM)

6 ECMAScript Co to jest To jest skryptowy język programowania, który może być stosowany w różnych zastosowaniach. Co definiuje Składnia Typy Wyrażenia Słowa kluczowe Operatory Obiekty

7 DOM Co to jest Jest to programistyczny interfejs do obsługi html i xml. Jak wyglada <html> <head> <title>tytul</title> </head> <body> <p>hello World!</p> </body> </html> html +-head +-title +-Tytul +-body +-p +-Hello World!

8 BOM Co to jest Jest to programistyczny interfejs do obsługi przegladarki. Do czego daje dostęp Otwieranie nowych okienek. Przesuwanie i zamykanie istniejacych okienek. Dostęp do informacji o przegladarce. Dostęp do informacji o lokalizacji otwartej strony. Dostęp do informacji o ekranie użytkownika. Wsparcie dla ciasteczek.

Przesuwanie i zamykanie istniejacych okienek. Dostęp do informacji o przegladarce.

9 Podstawowe zasady składni Wszystko jest case-sensitive. Zmienne sa słabo typowalne. Średniki na końcu linii sa opcjonalne Komentarze takie jak w Javie (// i /* */) Bloki kodu zawarte sa w { }

10 Zmienne Definiowane sa za pomoca słowa kluczowego var (ale ma to wpływ na ich zasięg) Moga być inicjalizowane var a = 1; Moga być nie inicjalizowane var a; Można deklarować wiele zmiennych w jednej instrukcji var a = ala, b=1;. Można im zmieniać typy var a = ala ; a=1; Nazwy moga zaczynać się od litery, znaku $ i znaku _.

Można deklarować wiele zmiennych w jednej instrukcji var a = ala, b=1;.

11 Typy zmiennych Podstawowy podział Typy proste (w tym String). Referencje. Operator typeof var a=1; alert(typeof a) undefined zmienna ma typ Undefined. boolean zmienna ma typ Boolean. number zmienna jest typu Number. string zmienna jest typu String. object zmienna jest referencja lub jest typu Null.

Undefined. boolean zmienna ma typ Boolean. number zmienna jest typu Number.

12 Konwersje Typy proste maja metodę to_string(). Nawet String ja ma! Istnieja funkcje parseint i parsefloat. Rzutowanie Boolean() konwertuje 0, null, pusty string i undefined na false, a inne rzeczy na true. Number() działa jak parseint, ale wymaga aby cały tekst był poprawna liczba.

Rzutowanie Boolean() konwertuje 0, null, pusty string i undefined na

13 Definiowanie funkcji Funkcja składa się z słowa kluczowego function, opcjonalnej nazwy, (widocznej jako własność name obowiazkowej listy parametrów. ciała w klamerkach. W trakcie definiowania globalnej funkcji jest ona widoczna jako własność window.

obowiazkowej listy parametrów. ciała w klamerkach.

14 Przykłady 1 function isnimble() 2 { return true; } 3 4 assert( typeof window. isnimble === function, 5 "isnimble() defined"); 6 assert( isnimble.name === isnimble, 7 "isnimble() has a name"); 8 9 var canfly = function(){ return true; }; assert( typeof window. canfly === function, 12 "canfly() defined"); 13 assert( canfly.name ===, 14 "canfly() has no name");

name === isnimble, 7 "isnimble() has a name"); 8 9 var canfly = function(){ return true; };

15 Przykłady 1 window. isdeadly = function(){ return true; }; 2 3 assert( typeof window. isdeadly === function, 4 "isdeadly() defined"); 5 function outer(){ 6 assert( typeof inner === function, 7 " inner() in scope before declaration"); 8 function inner(){} 9 assert( typeof inner === function, 10 " inner() in scope after declaration"); 11 assert( window. inner === undefined, 12 " inner() not in global scope"); 13 } 14 outer(); 15 assert(inner === undefined, 16 " inner() still not in global scope")

scope before declaration"); 8 function inner(){} 9 assert( typeof inner === function, 10 " inner() in scope after

16 Zasięg zmienne sa widoczne od momentu w którym się pojawia w kodzie funkcje sa widoczne zawsze w obrębie zasięgu zasięgiem zmiennych jest funkcja, albo window w przypadku obiektów globalnych

17 Przykłady 1 function f() 2 { 3 var a = 1; 4 function inner() {}; 5 var b = 2; 6 if (a == 1) 7 { 8 var c = 1; 9 } 10 }

18 Wywoływanie funkcji Funkcja może być wywołana jako funkcja, jako metoda, jako konstruktor, przy użyciu apply lub call. Parametry sa dopasowywane, undefined jeśli jest ich za mało, funkcji jest przekazywany arguments (ma length i []) funkcji jest przekazywany this czyli kontekst wywołania

Parametry sa dopasowywane, undefined jeśli jest ich za mało, funkcji

19 Przykłady 1 function ninja(){}; 2 ninja(); 3 4 var samurai = function (){}; 5 samurai(); Kontekstem jest w obu przypadkach window

20 Przykłady 1 function creep(){ return this; } 2 assert(creep() === window); 3 4 var sneak = creep; 5 assert(sneak() === window) 6 7 var ninja1 = { 8 skulk: creep 9 }; 10 assert( ninja1.skulk() === ninja1) var ninja2 = { skulk: creep }; 13 assert( ninja2.skulk() === ninja2)

ninja1 = { 8 skulk: creep 9 }; 10 assert( ninja1.

21 Przykłady konstruktory 1 function Ninja() 2 { 3 this.skulk = function() 4 { return this; }; 5 } 6 7 var ninja1 = new Ninja(); 8 var ninja2 = new Ninja(); 9 10 assert( ninja1.skulk() === ninja1); 11 assert( ninja2.skulk() === ninja2);

22 Przykłady apply i call 1 function juggle() { 2 var result = 0; 3 for (var n = 0; n < arguments. length; n++) { 4 result += arguments[n]; 5 } 6 this. result = result; 7 8 } 9 var ninja1 = {}; 10 var ninja2 = {}; juggle.apply(ninja1,[1,2,3,4]); 13 juggle.call(ninja2,5,6,7,8);

23 Iterowanie po tabeli 1 function printarray( array) { 2 for (var i = 0; i < array. length; i++) 3 print(array[i]); 4 } 5 6 function foreach( array, action) { 7 for (var i = 0; i < array. length; i++) 8 action(array[i]); 9 } foreach(["wampeter", "Foma", "Granfalloon"], print);

24 Na przykład sum 1 function sum( numbers) { 2 var total = 0; 3 foreach(numbers, function ( number) { 4 total += number; 5 }); 6 return total; 7 } 8 show(sum([1, 10, 100]));

25 Funkcja wyższego rzędu 1 function negate(func) { 2 return function(x) { 3 return!func(x); 4 }; 5 } 6 var isnotnan = negate( isnan); 7 show( isnotnan(nan));

26 apply 1 show( Math. min. apply( null, [5, 6])); 2 3 function negate(func) { 4 return function() { 5 return! func. apply( null, arguments); 6 }; 7 }

27 Map-reduce 1 function reduce(combine, base, array) { 2 foreach( array, function ( element) { 3 base = combine( base, element); 4 }); 5 return base; 6 } 7 8 function add(a, b) { 9 return a + b; 10 } function sum( numbers) { 13 return reduce(add, 0, numbers); 14 }

28 Map 1 function map( func, array) { 2 var result = []; 3 foreach( array, function ( element) { 4 result.push(func( element)); 5 }); 6 return result; 7 } 8 9 show( map( Math. round, [0.01, 2, 9.89, Math. PI]));

29 Funkcje anonimowe Użycie funkcji anonimowych Oczekiwanie na zdarzenia Integracja z przegladark a Dodawanie metody do obiektów

30 Przykłady 1 window. onload = function() { 2 assert(true, power! ); 3 }; 4 5 var ninja = { 6 shout: function(){ 7 assert(true,"ninja"); 8 } 9 }; 10 ninja.shout(); 11 settimeout( 12 function() { assert(true, Forever! ); }, );

31 Przykłady rekurencja 1 var ninja = { 2 chirp: function(n) { 3 return n > 1? 4 ninja.chirp(n - 1) + "-chirp" : 5 "chirp"; 6 } 7 }; 8 9 assert(ninja.chirp(3) == "chirp -chirp -chirp");

32 Przykłady błędna rekurencja 1 var ninja = { 2 chirp: function(n) { 3 return n > 1? 4 ninja.chirp(n - 1) + "-chirp" : 5 "chirp"; 6 } 7 }; 8 9 var samurai = { 10 chirp: ninja. chirp 11 }; 12 ninja = {}; assert(samurai.chirp(3) == "chirp -chirp -chirp");

33 Funkcje inlinowe Nazywanie funkcji anonimowych Funkcji anonimowej możemy nadać nazwę i z tego skorzystać. 1 var ninja = { 2 chirp: function signal(n) { 3 return n > 1? 4 sugnal(n - 1) + "- chirp" : 5 "chirp"; 6 } 7 }; 8 var samurai = { 9 chirp: ninja. chirp 10 }; 11 ninja = {}; 12 assert(samurai.chirp(3) == "chirp -chirp -chirp");

34 Co to jest domknięcie Intuicja Domknięcie to zasięg (którym jest funkcja), tworzony kiedy funkcja jest deklarowana, wraz z funkcjami pozwalajacymi na manipulowanie tym zasięgiem z zewnatrz funkcji. Domknięcia sa jedna z podstawowych metod ukrywania szczegółów implementacji, gdyż JS nie posiada pól prywatnych.

35 Przykład 1 var outervalue = ninja ; 2 var later; 3 function outerfunction() { 4 var innervalue = samurai ; 5 function innerfunction() { 6 assert( outervalue,"i can see the ninja."); 7 assert( innervalue,"i can see the samurai"); 8 } 9 later = innerfunction; 10 } 11 outerfunction (); 12 later();

36 Przykład widoczność z domknięcia 1 var outervalue = ninja ; 2 var later; 3 function outerfunction() { 4 var innervalue = samurai ; 5 function innerfunction( paramvalue) { 6 assert( outervalue," Can see the ninja."); 7 assert( innervalue," Can see the samurai"); 8 assert( paramvalue," Can see the wakizashi"); 9 assert( toolate," Can see the ronin"); 10 } 11 later = innerfunction; 12 } 13 assert(! toolate," Outer can t see the ronin"); 14 var toolate = ronin ; 15 outerfunction (); 16 later( wakizashi );

37 Przykład ukrywanie zmiennych 1 function Ninja() { 2 var slices = 0; 3 this. getslices = function(){ 4 return slices; 5 } 6 this.slice = function(){ 7 slices ++; 8 }; 9 }; 10 var ninja = new Ninja(); 11 ninja.slice(); 12 assert(ninja. getslices() == 1) 13 assert(ninja. slices === undefined)

38 Przykład jquery 1 jquery( #testbutton ).click(function(){ 2 var elem$ = jquery(" div"); 3 elem$.html("loading..."); #3 4 jquery.ajax({ 5 url: " test. html", 6 success: function(html){ 7 assert(elem$); 8 elem$.html(html); 9 } 10 }); 11 });

Podobne dokumenty

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 5 Podstawy JavaScript Agenda Czym jest JavaScript? Podstawowe typy danych Zmienne Tablice Funkcje Zakres