Profesjonalny JavaScriptdla Programistów JavyGrzegorz Borkowski
JavaScript – podstawy Najlepsza wg mnie książka na temat JavaScriptu jako języka programowania: JavaScript: The Good Par...
JavaScript – podstawy Zmienne - var: var x = 5; Zmienne mają zasięg funkcji: function test() {     var x = 5; } alert(x)...
Obiekty Wszystko jest obiektem, lub typem prostym (primitive type) Typy proste (strings, numbers, booleans) są niezmienn...
Obiekty Dot notation i bracket notation:  var tree = {};                 // pusty obiekt  tree.type = oak;  tree.height =...
Prototyp Obiekt „dziedziczy” swój prototyp var x = {}; //dziedziczy z Object.prototype Object.prototype.msg = from protot...
Tablice Tablica jest specjalnym typem obiektu (czyli mapy), gdzie kluczami są liczby całkowite W JavaScripcie nie ma tab...
Funkcje Funkcje są specjalnymi typami obiektów  są więc mapami  mogą więc zawierać właściwości jak każdy inny obiekt, a...
Funkcje Funkcje mają swój literał:  var myFunction = function() {   alert(function has been called!);  } Funkcje są mapa...
Referencja do funkcji a wywołanie funkcji Funkcja jest dostępna jako zmienna – ta zmienna jest referencją do funkcji var ...
Wzorzec wywołania metody Funkcja zadeklarowana jaka właściwość obiektu jest nazywana metodą (tego obiektu) var myObject =...
Wzorzec wywołania funkcji Weźmy ten sam obiekt: var myObject = {   name : An object,   action : function(count) {      al...
Wzorzec wywołania funkcji Czemu to może być problematyczne? Zobaczmy na przykładzie: var messanger = {   message: hey,   ...
Wzorzec wywołania funkcji Czemu to może być problematyczne? Zobaczmy na przykładzie: var messanger = {   message: hey,   ...
Wzorzec wywołania konstruktora Javascript nie posiada konstruktorów jako osobnych funkcji, jak Java  Każda funkcja może ...
Wzorzec zastosowania funkcji Funkcja jest obiektem który może mieć atrybuty, a atrybut może być funkcją. Czyli funkcje mo...
Dostęp do argumentów funkcji Każda funkcja podczas wywołania ma dostęp do specjalnej zmiennej arguments, która jest pseud...
Funkcje – dodatkowe uwagi Zasięg zmiennej – brak zasięgu blokowego! Każda zmienna ma zasięg obejmujący całą funkcję – bar...
Domknięcia (closures) Każda funkcja wewnętrzna ma dostęp do zmiennych zewnętrznych (oprócz „this‟ i „arguments‟). var cou...
JavaScript - problemy Zmienna globalne – wystarczy zapomnieć słówka var Brak zasięgu blokowego Podchwytliwe reguły uzup...
Upcoming SlideShare
Loading in …5
×

Professional Javascript for Developers

617 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
617
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Professional Javascript for Developers

  1. 1. Profesjonalny JavaScriptdla Programistów JavyGrzegorz Borkowski
  2. 2. JavaScript – podstawy Najlepsza wg mnie książka na temat JavaScriptu jako języka programowania: JavaScript: The Good Parts by Douglas Crockford (O‟Reilly)  Polskie wydanie: JavaScript - mocne strony (Helion) JavaScript używa składni podobnej do Javy - ale to zmyłka, bo na tym podobieństwa się kończą; JavaScript jest kompletnie innym typem języka, bliżej mu do języków funkcjonalnych. JavaScript jest używany zazwyczaj w środowisku DOM, a DOM jest niewygodny w użyciu JavaScript ma wiele błędów i wad, ale ma też mocne strony © Rule Financial 2011 2
  3. 3. JavaScript – podstawy Zmienne - var: var x = 5; Zmienne mają zasięg funkcji: function test() { var x = 5; } alert(x) ; //x undefined Jeśli zapomnimy słowa var, zmienna stanie się globalna! Również var poza jakąkolwiek funkcją da zmienną globalna: x = 5; // zmienna globalna! var y = 6; // zmienna globalna jeśli poza funkcją! © Rule Financial 2011 3
  4. 4. Obiekty Wszystko jest obiektem, lub typem prostym (primitive type) Typy proste (strings, numbers, booleans) są niezmienne  Obiekty są zmienne Obiekty są po prostu mapami (kolekcje klucz-wartość)  Dostęp do atrybutów obiektu poprzez notację kropkową (dot notation) lub klamrową (bracket notation) © Rule Financial 2011 4
  5. 5. Obiekty Dot notation i bracket notation: var tree = {}; // pusty obiekt tree.type = oak; tree.height = 10.34; //to samo co: tree[“height”] = 10.34 var weightPropertyName = weight; tree[weightPropertyName] = 5; //to samo co tree.weight = 5 lub tree[weight] = 5 Możemy też zdefiniować to wszystko jedną instrukcją za pomocą takiego literału obiektowego: var tree = { type : "oak", height : 10.34, weight : 5 }; Literał obiektowy a JSON © Rule Financial 2011 5
  6. 6. Prototyp Obiekt „dziedziczy” swój prototyp var x = {}; //dziedziczy z Object.prototype Object.prototype.msg = from prototype!; alert("x: " + x.msg); //from prototype! var y = {}; //również dziedziczy z Object.prototype alert("y: " + y.msg); //from prototype! x.msg = overriden!; alert("x: " + x.msg); //overriden! alert("y: " + y.msg); //from prototype! delete(x.msg); alert("x: " + x.msg); //from prototype! © Rule Financial 2011 6
  7. 7. Tablice Tablica jest specjalnym typem obiektu (czyli mapy), gdzie kluczami są liczby całkowite W JavaScripcie nie ma tablic takich jak w Javie, opartych o blok pamięci Tablice mają swój własny literał []: var books = []; // pusta tablica books = [JavaScript in practice, UML for the beginners, {name: Java tutorial, format: ebook}]; var size = books.lenth; // 3 books[1000] = Learn programming in one day; size = books.length; // 1001 © Rule Financial 2011 7
  8. 8. Funkcje Funkcje są specjalnymi typami obiektów  są więc mapami  mogą więc zawierać właściwości jak każdy inny obiekt, a właściwość może być funkcją! Funkcje mogą być wywoływane. W związku z tym mają one dwie specyficzne właściwości:  Kod funkcji  Kontekst funkcji (w momencie jej wywołania) określający na co wskazują specjalne zmienne „this‟ i „arguments‟, oraz jakie inne zmienne są dostępne © Rule Financial 2011 8
  9. 9. Funkcje Funkcje mają swój literał: var myFunction = function() { alert(function has been called!); } Funkcje są mapami, więc mogą mieć atrybuty jak każdy obiekt: myFunction.isCodeComplete = false; Opcjonalnie mogą mieć nazwę (która prawie do niczego nie służy): var myFunction = function myFunction() { … } Zapis instrukcji funkcji: function myFunction() { … }  Niemal równoważny zapis z funkcją anonimową (preferowany): var myFunction = function() { … } © Rule Financial 2011 9
  10. 10. Referencja do funkcji a wywołanie funkcji Funkcja jest dostępna jako zmienna – ta zmienna jest referencją do funkcji var myFunction = function() { return result; } myFunction powyżej jest zmienną będącą referencją do funkcji Można tę referencję przekazać: var myFunctionAlias = myFunction; //myFunctionAlias jest funkcją lub wywołać funkcję i przekazać jej wynik: var myFunctionResult = myFunction(); //myFunctionResult jest łańcuchem „result” © Rule Financial 2011 10
  11. 11. Wzorzec wywołania metody Funkcja zadeklarowana jaka właściwość obiektu jest nazywana metodą (tego obiektu) var myObject = { name : An object, action : function(count) { alert(this.name ? this.name + count : no name!); } } //obiekt myObject ma metodę “action” wzorzec wywołania metody: myObject.action(5); //wyświetla “An object5” więc „this‟ będzie wskazywać na myObject gdy wywołamy funkcję w ten sposób © Rule Financial 2011 11
  12. 12. Wzorzec wywołania funkcji Weźmy ten sam obiekt: var myObject = { name : An object, action : function(count) { alert(this.name ? this.name + count : no name!); } }I zamiast wywoływać funkcję jako metodę: myObject.action(5);zróbmy tak: action(5); // co wyświetli? var x = myObject.action; x(5); // co wyświetli?Jest to wzorzec wywołania funkcji; this wskazuje na obiekt globalny (window) © Rule Financial 2011 12
  13. 13. Wzorzec wywołania funkcji Czemu to może być problematyczne? Zobaczmy na przykładzie: var messanger = { message: hey, printMessage: function() { … var printer = function() { alert(this.message); } printer(); } } messanger.printMessage(); //wyświetla „undefined‟ - dlaczego? Jak to poprawić? © Rule Financial 2011 13
  14. 14. Wzorzec wywołania funkcji Czemu to może być problematyczne? Zobaczmy na przykładzie: var messanger = { message: hey, printMessage: function() { var that = this; var printer = function() { alert(that.message); } printer(); } } messanger.printMessage(); //wyświetla „hey‟ Wskazówka: Używaj that jako aliasu dla this © Rule Financial 2011 14
  15. 15. Wzorzec wywołania konstruktora Javascript nie posiada konstruktorów jako osobnych funkcji, jak Java  Każda funkcja może być konstruktorem jeśli wywołamy ją ze słowem new, i odwrotnie. Jest to niebezpieczne, nie ma w języku żadnej kontroli tego.  Dlatego istnieje konwencja: funkcje przeznaczone do wywołania jako konstruktor powinny mieć nazwy zaczynające się wielką literą – wówczas narzędzia są w stanie wykryć błędne użycie. Niepoprawne użycie może dać nieprzewidziane efekty; na przykład funkcja z poprzedniego przykładu użyta jako konstruktor: new messanger.printMessage(); //wyświetla „undefined‟! © Rule Financial 2011 15
  16. 16. Wzorzec zastosowania funkcji Funkcja jest obiektem który może mieć atrybuty, a atrybut może być funkcją. Czyli funkcje mogą mogę funkcje (metody). Każda funkcja posiada metodę „apply‟ (oraz podobną metodę „call‟). Metoda „apply‟ pobiera dwa parametry, pierwszy oznacza jakie „this‟ ma być użyte, drugi (opcjonalny) to tablica argumentów. W ten sposób możemy „wypożyczać” funkcje: var otherObject = { message: another object!‚ } messanger.printMessage.apply(otherObject); //wyświetla „another object!” © Rule Financial 2011 16
  17. 17. Dostęp do argumentów funkcji Każda funkcja podczas wywołania ma dostęp do specjalnej zmiennej arguments, która jest pseudo-tablicą zawierającą argumenty wywołania funkcji. To pozwala tworzyć funkcje pobierające zmienną liczbę parametrów, np.: var sum = function() { var i, sum = 0; for (i=0; i < arguments.length; i += 1) { sum += arguments[i]; } return sum; }; alert(sum(1,2,3,4)); //wyświetla 10 © Rule Financial 2011 17
  18. 18. Funkcje – dodatkowe uwagi Zasięg zmiennej – brak zasięgu blokowego! Każda zmienna ma zasięg obejmujący całą funkcję – bardzo niebezpieczne, bo nieintuicyjne! Brak napisywania metod (method overloading) w JS Zamiast funkcji z wieloma parametrami, preferuj pojedynczy parametr jako tak zwany object specifier: var panel = new Panel({ width : 100, height: 200, title: ‘A title’, background: ‘blue’ }); © Rule Financial 2011 18
  19. 19. Domknięcia (closures) Każda funkcja wewnętrzna ma dostęp do zmiennych zewnętrznych (oprócz „this‟ i „arguments‟). var counter = function() { var value = 0; return { increment: function(inc) { value += typeof inc === ‘number’ ? inc : 1; }, getValue: function() { return value; } } }(); //uwaga na () ! Domknięcia można wykorzystać do symulacji zmiennych prywatnych lub dziedziczenia © Rule Financial 2011 19
  20. 20. JavaScript - problemy Zmienna globalne – wystarczy zapomnieć słówka var Brak zasięgu blokowego Podchwytliwe reguły uzupełniania średnika Długa lista nieużywanych zastrzeżonych słów typeof Wiele wartości „pustych”: null, undefined, NaN, empty string, 0, false parseInt == vs === (!= vs !==) Standardowe (wbudowane) funkcje są ograniczone i chaotyczne © Rule Financial 2011 20

×