Realizacja Aplikacji Internetowych

Prezentacja na temat: "Realizacja Aplikacji Internetowych"— Zapis prezentacji:

1 Realizacja Aplikacji Internetowych
JavaScript

2 Most popular technologies

3 Most loved technologies

4 Quiz 1<2<3; 3>2>1; [0]+1; [0]-1; [] == true; ![] == true;
[] + []; [] + {}; A = [0] A == A A == !A A = [null, undefined, [] ] A == ",," Math.min < Math.max

5 Quiz var objects = [{'a': 1}, {'b': 2}]; var result1, result2; result1 = _(objects) .filter(_.partialRight( _.has, 'a')) .value(); result2 = _(objects) .filter(function(o){ return _.partialRight( _.has, 'a')(o); }) .value();

6 function getLabel() { var count = 0, concatenation = "" ['dog','cow','rabbit'].forEach(function(animal,i){ count = i+1 concatenation += animal + ' ' }) return { 'count' : count, 'animals' : concatenation }

7 function getLabel() { var count = 0, concatenation = "" ;['dog','cow','rabbit'].forEach(function(animal,i){ count = i+1 concatenation += animal + ' ' }) return { 'count' : count, 'animals' : concatenation }

8 Javascript wymaga średników
… więc je sam sobie dodaje Gdy po nowej linii jest błedny token Gdy po nowej linii następuje ++ lub -- Gdy nowa linia następuje po continue, break, return, throw Na koncu pliku – jeśli to potrzebne ale nie dodaje Gdyby to zaowocowało pustą instrukcją Wewnątrz nagłówka instrukcji for

9 function getLabel() { var count = 0, concatenation = "" ['dog','cow','rabbit'].forEach(function(animal,i){ count = i+1 ; concatenation += animal + ' ' ; }) ; return ; { 'count' : count, 'animals' : concatenation } ; }

10 function getLabel() { var count = 0, concatenation = "" ['dog','cow','rabbit'].forEach(function(animal,i){ count = i+1 ; concatenation += animal + ' ' ; }) ; return ; { 'count' : count, 'animals' : concatenation } ; }

11 undefined Zwraca undefinefined pomijane ""['dog','cow','rabbit']
return ; { 'count' : count, 'animals' : concatenation } ; Zwraca undefinefined pomijane

12 Dodajemy wszędzie średniki
undefined ""['dog','cow','rabbit'] return ; { 'count' : count, 'animals' : concatenation } ; Możliwe rozwiazania: Dodajemy wszędzie średniki Dodajemy srednik przed linią która zaczyna się od ‘[‘ ‘(‘ binarnego operatora +- */ Uzywamy JSLint/JSHint Zwraca undefinefined pomijane

13 Co to jest ? console.log("hello") -> http://www.jsfuck.com
[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]](([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(+(+!+[]+[+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+[!+[]+!+[]]+[+[]])+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+(![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[!+[]+!+[]]]+(+(+!+[]+[+[]]+[+!+[]]))[(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]](!+[]+!+[]+[+!+[]])[+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([]+[])[(![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(!![]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]]()[+!+[]+[!+[]+!+[]]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]])() console.log("hello") ->

14 JavaScript vs ECMAScript
JavaScript nie jest związany z Javą Wprowadzony w przegladarce Netscape w XII 1995 (Mocha) Najbardziej popularny język programowania na świecie ? MS wyprodukował zbliżony język: JScript JavaScript i JScript mają niepuste przecięcia  z ECMAScript (European Computer Manufacturers Association) 3 - XII 1999, 4 – zarzucony, 5 – XII 2009, VI 2011, 6 - VI 2015 Hostowany …

15 JavaScript - czy to ma sens ?
przegladarki strona serwerowa: node.js urzadzenia mobilne z Windows 8, 10 – js, C#, VB office app – zamiennik dla starego rozwiązania wtyczek i dokumentów MS Office

16 Sprintem po JavaScripcie

17 Typy Undefined (pojedyncza wartość: undefined) Null (pojedyncza wartość: null) Boolean (wartości: true, false) String (niemutowalna sekwencja znaków Unicode, brak typu znakowego) Number (64-bitowa liczba zmiennoprzecinkowa, brak typu całkowitego, specjalne wartości NaN i Infinity) Object "...i to by było na tyle...".

18 Operatory niezalecane: zalecane - identyczność (wartość i typ):
+ - * / % = += -= *= /= %= type > < >= <= ? typeof instanceof niezalecane: == != zalecane - identyczność (wartość i typ): === !==

19 Zmienne Poziomy granularności zakresu:
globalne funkcja blok (ECMAt 6) Zmienne bez modyfikatora są globalne (strict mode nie zezwala na nie) Zmienne definiowane jako var w obrębie funkcji mają zakres funkcji – inne są globalne. Zmienne definiowane jako let mają zakres bloku var, let nie zaincjalizowane ex-plicite ma wartość undefined. var, let nie jest typowane In JavaScript blocks do not have scope. Only functions have scope. Do not use blocks except as required by the compound statements.

20 Obiekty Referencjonalne kontenery par nazwa/wartość
Nazwy: napisy (Jeśli trzeba wykonywana konwersja) Wartości: dowolny typ danych (włączając inne obiekty) Nie trzeba implementować dostępu API (hashtable) Właściwości tworzone w locie var myObj={}; var myObj=new Object(); myObj.p1= "blah"; myObj["p1"]="blah"; var myObj={"p1":"blah"}; var myObj={"p1":new String("blah")};

21 Obiekty Obiekty są w istocie tablicami haszowanymi z ładną składnią
Można więc iterować po obiekcie... for (name in myObj) { //if (myObj.hasOwnProperty(name)) { console.log(myObj[name]); //} }

22 Dziwactwa Javascript-u
void nie jest typem, to prefiksowy operator zwracajacy zawsze wartość undefined Operatory bitowe i przesuniecia są wspierane ale nie ma wbudowanego typu integer. 64-bitowy typ zmiennoprzecinkowy Number jest konwerowany na 32-bitowy typ całkowity przed operacją i po niej konwertowany ponownie do Number Operator typeof zwraca string opisujący dany obiekt. typeof(new Array()) i typeof(null) zwrócą ”object” (zamiast odpowiednio ”array” i ”null”)

23 Obiekt Globalny Unikalny, pre-definiowany obiekt który zawiera wszystkie funkcje i zmienne nie zdefiniowane wewnątrz innych funkcji lub obiektów W przeglądarkach implementacja this, window i self pokazują na Obiekt Globalny Wszystkie globalne funkcje i zmienne są zdefiniowane jako funkcje i zmienne Obiektu Globalnego this.NaN=0; //zmiana wartości of NaN //niemozliwe od ECM5 uff !!! Jeśli zmienna/funkcja nie jest zdefiniowana w bieżącym zakresie jest poszukiwana w Obiekcie Globalnym

24 Tablice Regularne obiekty (właściwości dostępne za pośrednictem nazw!) properties accessed via names!), ale okreslona klasa nazw (non-negative integers) właściwości traktowana inaczej Nie są typowane (mogą zawierać wartości różnych typ.) Właściwość length jest ustawiana na największy klucz całkowity w tablicy +1 var myArr=[”val0”]; //myArr.length == 1 myArr[1]=”val1”; //myArr.length == 2 myArr[”v2”]=”val2”; //myArr.length == 2 myArr.2=”val2”; //nielegalne ECMA5:isArray(),every(),filter(),some(), forEach(),indexOf(),lastIndexOf(), map(), reduce()

25 Funkcje Obiekty typu first-class ze skojarzonym kodem i możliwą operacją call Składnia function func(x) {alert(x);} Operator (nazwa f. jest opcjonalna – f.anonimowe) var func = function(x) {alert(x);}; Konstruktor var func = new Function("x", "y", "return x*y;"); Wsparcie dla zmiennej liczby argumentów (właściwość arguments) Ma zakres leksykalny (ECMA6 również bloku)

26 Funkcje (c.d.) var arr=[]; arr[0]=function(x){return x*x;};
Mogą być przypisywane do zmiennych (wcześniejszy przykład) Mogą być elementami tablicy var arr=[]; arr[0]=function(x){return x*x;}; arr[1]=arr[0](2); alert(arr[1]); //displays 4 Mogą mieć swoje właściwości var func = function(x) {alert(x);} func.ownProperty=”test”; Mogą być właściwościami obiektu (metody!) var obj={"intro": function(){return "I'm object";}} alert(obj. intro()); //displays I'm object

27 Funkcje (c.d.) doOpOn(16,square); //displays 256
Mogą być przekazywane jako argument function square(x) {return x*x;} function doOpOn(num,func) { return func(num);} doOpOn(16,square); //displays 256 Mogą być zwracane jako wartość function createIncrementer() { return function(x){return x+1;} } var inc = createIncrementer(); alert(inc(7)); //displays 8 Muszą zwracać wartość (domyślnie jest to undefined, z wyjątkiem wołań operatora new)

28 Metody Metoda jest funkcją wołaną z kontekstem określonego obiektu
Specjalna zmienna this jest dostępna wewnątrz funkcji i odnosi się do obiektu wskazanego jako kontekst (lub Obiektu Globalnego/undefined dla f. niezwiązanej) Metody mogą być definiowane przez : Ustawienie funkcji jako właściwości obiektu myObject.method1=function(...){...} Wywołanie - obiekt stanowi domyślny kontekst myObject.method1(...); Kontekst wskazany xx-plicite myFunction.call(myObject,...)

29 Operator new i konstruktory
operator new jest używany wraz z wywolaniem funkcji: Tworzy nowy pusty obiekt Ustawia go jako this dla wywołanej funkcji Ustawia go jako domyślny zwrot z funkcji (może być nadpisany np. przez zwrot innego obiektu (nie skalara)) ... Jeżeli f. jest używana do ustawienia właściwości nowego obiektu w połączeniu z operatorem new jest zwykle nazywana konstruktorem function func() { this.prop1=”val1”; } var x=new func(); alert(x.prop1); //displays val1

30 Dziwactwa Javascript-u
void nie jest typem, to prefiksowy operator zwracajacy zawsze wartość undefined Operatory bitowe i przesuniecia są wspierane ale nie ma wbudowanego typu integer. 64-bitowy typ zmiennoprzecinkowy Number jest konwerowany na 32-bitowy typ całkowity przed operacją i po niej konwertowany ponownie do Number Operator typeof zwraca string opisujący dany obiekt. typeof(new Array()) i typeof(null) zwrócą ”object” (zamiast odpowiednio ”array” i ”null”)

31 Emulacja klas I dziedziczenia
Przesta-rzałe Emulacja klas I dziedziczenia

32 OOP Emulacja klas Konstruktory definiują sposób tworzenia powtarzalnych obiektów (jak klasy w OOP) function myConstructor(value) { this.prop1=value; this.check=function(val) { if(this.prop1==val) alert("ok!"); } } var myObj1=new myConstructor("obj1"); myObj1.check("obj1"); //displays ok! myObj1.check("obj2"); //do nothing

33 OOP metody czy emulacja metod
Metody mogą być definiowane przez ustawienie właściwości na daną funkcję myObj1.func=function(){alert(this.name);}; Połączenie obiekt-metoda jest b. słabe var myObj1={"name":"obj1"}; var myObj2={"name":"obj2"}; myObj1.func=function(){ alert(this.name); }; myObj1.func(); //displays obj1 myObj1.func.call(myObj2); //displays obj2

34 OOP Konstruktor - dziwności
Konstruktor (funkcja) nie jest związany z żadnym typem Każda funkcja może być wywołana jako konstruktor var myObj1={"name":"obj1"}; myObj1.func=function() { alert(this.name); return {}; }; var x = new myObj1.func(); //x is empty object Zwracany z konstruktora typ obiektowy nadpisuje domyślny zwrot z new. Zwracany typ prosty nie nadpisuje.

35 OOP emulacja metod statycznych
Ponieważ funkcja konstruktor reprezentuje pewną grupę (klasę) obiektów może być rozszerzna o własne pola/funkcje mechanism ten można traktować jako implementację metod i pól statycznych function Person(name){ this.name = name; } Person.CreateNN = function() { return new Person("NN"); }; ... var unknownPerson = Person.CreateNN();

36 OOP Emulacja dziedziczenia – podejście funkcyjne
function Person(name){ this.name = name; this.Info = function() { return "Person:"+name } } var p = new Person("Kowalski"); alert(p.Info()); //wyswietli Person:Kowalski //ospowiednik dziedziczenia Student: Person function Student(name, indexNo) { Person.call(this,name); //kontekst f. Person to this this.indexNo = indexNo; this.Info = function() {return "Student:"+name+" "+indexNo} var s = new Student("Kowalski","24563"); alert(s.Info()); // wyswietli Student Kowalski 24563

37 Prototypy

38 Prototypy Każda funkcja ma właściwość prototype wskazującą na obiekt (domyślnie pusty). Każdy obiekt (włączając funkcje) ma właściwość constructor – wskazujący na funkcję użytą do stworzenia obiektu. Property constructor oraz prototype można nadpisać.

39 Prototypy (c.d.) Obiekty nie-funkcyjne mają ukrytą (niedostępną) właściwość _prototype, która pokazuje na prototyp (obiekt), który obowiązywał (tj. wskazywało na niego prototype w konstruktorze) w momencie tworzenia obiektu. Operator new aktualizuje tworzony obiekt: Ustawia ukrytą właściwość _prototype na prototype konstructora

40 Prototypy (c.d.) Jeżeli obiekt nie implementuje żadanej właściwości,sprawdzany jest jego prototyp, stąd: Obiekt efektywnie "dziedziczy" wszystkie własciwości po swoim prototypie Zmiany w prototypie są natychmiast widoczne w obiektach potomnych (równiez już utworzonych) Każda wartość w prototypie może być "nadpisana" w obiekcie Obiekty potomne mogą być prototypami innych obiektów, tworząc łańcuch dziedziczenia (aż do Obiektu Globalnego) Ponieważ własciwości są tworzone w locie, obiekty pochodne w momencie zapisu do dziedziczonej (z _prototype) wartości automatycznie tworzą własną kopię ("nadpisując" dziedziczoną wartość)

41 Prototypy działanie function Person(name){ this.name = name; } Person.prototype = {} ; Person.prototype.Breathe = function(){ ... }; var p = new Person("Kowalski"); p.Breathe()

42 Prototypy działanie (c.d.)
function Person(n) { this.name = n; } Person.prototype = { "Breathe": function(){ … } } var p = new Person("Kowalski");

43 Prototypy działanie (c.d.)
function Person(n) { this.name = n; } Person.prototype = { "Breathe": function(){ … } } var p = new Person("Kowalski"); p.Breathe();

44 Emulacja dziedziczenia (c.d.)
function Student(name, index) { this.name = name; this.index = index; } Student.prototype = new Person("NN"); Student.prototype.PassExam = function() {...} var s = new Student("Kowalski","23456"); s.Breathe(); s.PassExam(); Obiekt zawiera "komplet" informacji bo prototyp jest wspólny

45 Emulacja dziedziczenia (c.d.)
function Student() { … } Student.prototype = new Person("NN"); var d1 = new Student(...);

46 Emulacja dziedziczenia (c.d.)
Łańcuch “dziedziczenia” po utworzeniu jest stabilny ...ale można go zmienić dla nowych obiektów Student.prototype = new EducatedPerson(...); var d2=new Student(...); //d1 and d2 "dziedziczą" //z innych obiektów Nie można emulować prywatnych składowych Główny problem: niekontrolowana zmiana zawartości prototype (kiedyś, po utworzeniu) Student.prototype.PassExam = "NO"; wpływa na wszytkie obiekty utworzone wcześniej

47 Domknięcia Funkcje mogą być definiowane wewnątrz innych funkcji
Wewnętrzne funkcje mają dostep do zmiennych i parametrów f. zewnętrznej Jesli referencja do wewnętrznej funkcji (callback) istnieje – utrzymywana jest przy życiu f. zewnętrzna function createChecker(treshold) { return function(numberToCheck) { return (numberToCheck > treshold) ? true : false; } } var checker100 = createChecker(100); alert(checker100(99)); //displays false

48 Emulacja prywatnych właściwości
Prywatne właściwości można zaemulować przy użyciu domknięć function Person(name,creditCard){ //this.name=name; //this.creditCard = creditCard; //C# readonly i.e. could only be read this.GetName=function() {return name;}; this.Pay()=function() { // do smthg with creditCard }

49 Uwaga na mieszanie podejść
mieszanie podejść wywołuje zamieszanie "bazowa klasa" z domknięciami – nie będzie dostępna dla dziedziczących -> dziedziczenie prywatne function Base(){ var count; this.GetCount=function() {return count;}; this.SetCount=function(newCount){count=newCount;}; } function Derived(){ Base.call(this);

50 Samouruchamialna funkcja
(function() { // wszystkie zmienne sa lokalne, jakkolwiek // maja dostep do calego kontekstu var Person = { introduce: function() { alert("I'm a person"); } Person.introduce(); })();

51 Moduł var MODULE = (function () { var m= {}, prvVariable = 1;
function prvMethod() { /*...*/ }; m.field = 1; m.method = function () { /*...*/ }; return m; }()); Moduły można zgnieżdżać

52 Moduł podzielony na pliki
var MODULE = (function (m) { var m = {}, prvOtherVariable = 1; m.newMethod = function () { /*...*/ }; return m; }(MODULE || {})); Co gdyby zmienic kolejność ładowania plików? W przypadku "konfliktów" istotna jest kolejność "nadpisywania"

53 EcmaScript 5

54 Strict mode 'use strict';
zabronione niektóre konstrukcje m.in. globalne zm. wewnątrz funkcji, with, zmiana i kasowanie stałych właściwości, stałe ósemkowe this jest domyślnie undefined (nie window) więcej wyjątków czystszy kod

55 definiowanie właściwości
var obj = { get foo() { return 'getter'; }, set foo(value) { console.log('setter:'+value); } }; obj.foo = "abc"; console.log(obj.foo); drugi sposób -> property descriptors

56 bind function func() { console.log('this: '+this + ' arguments:' + Array.prototype.slice.call(arguments)); } func(3,4); var bound = func.bind('abc', 1, 2); bound(3,4); this: undefined arguments: 3,4 this: abc arguments: 1,2,3,4

57 Object.create(proto, propDescObj?)
var obj = Object.create(Object.prototype, { foo: { value: 123, enumerable: true }, bar: { value: 'abc', enumerable: true } }); wcześniej mozna było zaimplementować cos podobnego samememu: InheritFromObject (objectToDerrive) { var f = function() {}; f.prototype = objectToDerrive; return new f(); }

58 zastosowanie: kopiowanie obiektu
function copyObject(orig) { // 1. copy has same prototype as orig var copy = Object.create(Object.getPrototypeOf(orig)); // 2. copy has all of orig’s properties copyOwnPropertiesFrom(copy, orig); return copy; } function copyOwnPropertiesFrom(target, source) { Object.getOwnPropertyNames(source) .forEach(function(propKey) { var desc = Object.getOwnPropertyDescriptor( source, propKey); Object.defineProperty(target, propKey, desc); }); return target; };

59 EcmaScript 6

60 ECMAScript 6.0 Stałe (sam obiekt jest mutowalny)
const PI = Bezpieczne binarne/ósemkowe literały 0b 0o03427 Template strings/Interpolacja message = `Hello ${customer.name}, want to buy ${card.amount} ${card.product} for a total of ${card.amount * card.unitprice} bucks?` Tagged template strings (np String.raw) String.raw`This is a text with multiple lines. Escapes are not interpreted, \n is not a newline.`;

61 ECMAScript 6 Domyślne parametry Rest Parameter Spread
function f (x, y = 7, z = 42) { return x + y + z } f(1) === 50 Rest Parameter function f (x, y, ...a) { return (x + y) * a.length } f(1, 2, "hello", true, 7) === 9 Spread var params = [ "hello", true, 7 ]; var other = [ 1, 2, ...params ]; // [ 1, 2, "hello", true, 7 ] f(1, 2, ...params) === 9; var str = "foo"; var chars = [ ...str ]; // [ "f", "o", "o" ]

62 ECMAScript 6 Leksykalny this vs wcześniej
this.nums.forEach( (v) => { if (v % 5 === 0) this.fives.push(v) } ) vs wcześniej var self = this; this.nums.forEach(function (v) { if (v % 5 === 0) self.fives.push(v); } );

63 Zmienne o zasięgu bloku Funkcje o zasięgu bloku
for (let i = 0; i < a.length; i++){ let x = a[i] } Funkcje o zasięgu bloku { function foo () { return 1 } foo() === 1 { function foo () { return 2 } foo() === } foo() === 1 } W EC5 można było emulować (function () { var foo = function () { return 1; } foo() === 1; (function () { var foo = function () { return 2; } foo() === 2; })(); foo() === 1; })();

64 ECMAScript 6 Składnia =>
pairs = evens.map(v => ({ even: v, odd: v + 1 })) nums.forEach(v => { if (v % 5 === 0) fives.push(v) }) Uproszczona notacja przy tworzeniu obiektów obj = { x, y, foo(){} } obj.x obj.foo() Typ Symbol – unikalny, z opisem dla celow debugowania Symbol() !=== Symbol() Symbol("foo") !== Symbol("foo")

65 ECMAScript 6 Dekompozycja struktur, przypisania złożone
var list = [ 1, 2, 3 ] var [ a, , b ] = list [ b, a ] = [ a, b ] var { op, lhs, rhs } = getASTNode() var { op:a, lhs:{ op: b }, rhs:c } = getASTNode() Dekompozycja vs. wartości domyślne var list = [ 7, 42 ] var [ a = 1, b = 2, c = 3, d ] = list a === b === c === d === undefined

66 ES6 – set/weakSet map/weakMap
let s = new Set() s.add("hello").add("goodbye").add("hello") s.size === 2 s.has("hello") === true for (let key of s.values()) // insertion order console.log(key) let m = new Map() m.set("hello", 42) m.set(s, 34) m.get(s) === 34 m.size === 2 for (let [ key, val ] of m.entries()) console.log(key + " = " + val)

67 ES6 – Array/String - nowe metody
[ 1, 3, 4, 2 ].find(x => x > 3) // 4 String "foo".repeat(3) "hello".startsWith("ello", 1) // true "hello".endsWith("hell", 4) // true "hello".includes("ell") // true "hello".includes("ell", 1) // true "hello".includes("ell", 2) // false

68 ECMAScript 6.0 –Proxy // Proxying a normal object var target = {}; var handler = { get: function (receiver, name) { return `Hello, ${name}!`; } }; var p = new Proxy(target, handler); p.world === "Hello, world!";

69 ECMAScript 6.0 – Reflection
has, deleteProperty, defineProperty ownKeys getPrototypeOf, setPrototypeOf preventExtensions, isExtensible

70 ES6 - klasy class Shape { constructor (id, x, y) { this.id = id; this.move(x, y); } move (x, y) { this.x = x; this.y = y; } } class Rectangle extends Shape { constructor (id, x, y, width, height) { super(id, x, y); this.width = width; this.height = height; } }

71 ES6 – klasy: składowe statyczne
class Rectangle extends Shape { … static defaultRectangle () { return new Rectangle("default", 0, 0, 100, 100) } get dxdy() { return this.x * this.y } } var r = Rectangle.defaultRectangle() r.dxdy === 10000

72 Dygresja moduły w ES5 AMD - Asynchronous Module Definition CommonJS
Jquery, DoJo CommonJS Curl (client), NodeJs ES Harmony podstawa do modulow w ES6 Rozwiazanie: Web Pack

73 ECMAScript moduły // lib/math.js export function sum (x, y) { return x + y } export var pi = // someApp.js import * as math from "lib/math" console.log("2π = " + math.sum(math.pi, math.pi)) // otherApp.js import { sum, pi } from "lib/math" console.log("2π = " + sum(pi, pi))

74 ECMAScript moduły // lib/math.js export function sum (x, y) { return x + y } export var pi = // someApp.js import * as math from "lib/math" console.log("2π = " + math.sum(math.pi, math.pi)) // otherApp.js import { sum, pi } from "lib/math" console.log("2π = " + sum(pi, pi))

75 ECMAScript 6.0 - generatory
Function *range (start, end, step) { while (start < end) { yield start start += step } for (let i of range(0, 10, 2)) { console.log(i) // 0, 2, 4, 6, 8

76 ECMAScript 6.0 – Promises function msgAfterTimeout (msg, who, timeout) { return new Promise((resolve, reject) => { setTimeout(()=>resolve(`${msg} Hello ${who}!`), timeout) }) } msgAfterTimeout("", "Foo", 100) .then( (msg) => msgAfterTimeout(msg, "Bar", 200), (msg) =>{ console.log(`done after 300ms:${msg}`)} );

77 ECMAScript 6.0 Transcompiler:

78 Promises

79 Promisses ES6 – plain old callback

80 Promises ES6: callbacks – what is wrong?

81 Promises ES6 – promise Promise.prototype.catch()
Promise.prototype.then() Promise.all(iterable) Promise.race(iterable) Promise.reject(reason) Promise.resolve(value)

82 Promises ES6 – promise A promise states:
Pending: the result hasn’t been computed, yet Fulfilled: the result was computed successfully Rejected: a failure occurred during computation

83 Promises ES6 – Promise.all
Promise.all waits for all fulfillments (or the first rejection).

84 Realizacja Aplikacji Internetowych
Separacja

85 Truizmy ... Nie wynajdujemy koła Unikamy duplikacji:
Mniej kodu = mniej problemów Dzielimy kod na części Mniejsze części sa łatwiejsze do zrozumienie, użycia i modyfikacji, ale muszą być niezależne! Kod powinien być jasny i łatwy do zrozumienia

86 Praktyczne wskazówki Wydzielone tworzenie/reużycie obiektów, emulacja klas (clousures czy prototypy) lub dziedziczenie obiektów Zależności rozwiązywane na poziomie obiektów a nie odniesień do DOMa czy hierarchii obiektów: Obiekt ma property wskazujace na inny obiekt a nie odwołuje sie do konkretnego miejsca w hierachii klas/DOM. Wzorzec obserwator (event) można zaimplementowac również w JS … Testy jednostkowe, integracyjne, akceptacyjne

87 Dokumentacja, narzędzia
JSLint, JSHint FireBug, Chrome Developer Tools, IE Inspector / WebDeveloper Fiddler