JavaScript funkcyjność WWW 9 kwietnia 2014
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: 978-1933988696.
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.
Elementy z których składa się JS Jadro (ECMAScript) The Document Object Model (DOM) The Browser Object Model (BOM)
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
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!
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.
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 { }
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 _.
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.
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.
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.
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; }; 10 11 assert( typeof window. canfly === function, 12 "canfly() defined"); 13 assert( canfly.name ===, 14 "canfly() has no name");
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")
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
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 }
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
Przykłady 1 function ninja(){}; 2 ninja(); 3 4 var samurai = function (){}; 5 samurai(); Kontekstem jest w obu przypadkach window
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) 11 12 var ninja2 = { skulk: creep }; 13 assert( ninja2.skulk() === ninja2)
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);
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 = {}; 11 12 juggle.apply(ninja1,[1,2,3,4]); 13 juggle.call(ninja2,5,6,7,8);
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 } 10 11 foreach(["wampeter", "Foma", "Granfalloon"], print);
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]));
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));
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 }
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 } 11 12 function sum( numbers) { 13 return reduce(add, 0, numbers); 14 }
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]));
Funkcje anonimowe Użycie funkcji anonimowych Oczekiwanie na zdarzenia Integracja z przegladark a Dodawanie metody do obiektów
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! ); }, 13 500);
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");
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 = {}; 13 14 assert(samurai.chirp(3) == "chirp -chirp -chirp");
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");
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.
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();
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 );
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)
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 });