Realizacja Aplikacji Internetowych

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

1 Realizacja Aplikacji Internetowych
JavaScript

2 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

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

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

5 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

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 undefined Zwraca undefinefined pomijane ""['dog','cow','rabbit']
return ; { 'count' : count, 'animals' : concatenation } ; Zwraca undefinefined pomijane

9 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

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

11 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 są (?) nadzbiorami ECMAScript (European Computer Manufacturers Association) 3 - XII 1999, 4 – zarzucony, 5 – XII 2009, VI 2011, 6 - VI 2015 Hostowany w przeglądarkach, ale nie tylko (Acrobat Forms, Node.js)

12 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...".

13 Nowe operatory === jest identyczny (wartość i typ)
!== nie jest identyczny (wartość lub typ)

14 Zmienne Dwa poziomy granularności zakresu: globalne i funkcja (brak zakresu bloku) Tylko zmienne defioniowane jako var w obrebie funkcji mają zakres funkcji – inne są globalne. Nie na sensu używać bloków gdy nie są wymagane przez instrukcje złożone. var nie zaincjalizowane ex-plicite ma wartość undefined. var 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.

15 Obiekty Referencjonalne kontenery par nazwa/wartość
Nazwy: napisy (Jeśli trzeba wykonywana konwersja) Wartości: dowolny typ danych (właczajac 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")};

16 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]); //} }

17 Obiekt Globalny Unikalny, pre-definiowany obiekt który zawiera wszytskie funkcje i zmienne nie zdefionowane 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; //changes value of NaN //‘constant’ ! Jeśli zmienna/funkcja nie jest zdefiniowana w bieżącym zakresie jest poszukiwana w Obiekcie Globalnym

18 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) 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

19 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

20 Funkcje (c.d.) var arr=[]; arr[0]=function(x){return x*x;};
Mogą być przypisywane do zmiennych (wcześniejszy przyklad) 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

21 Funkcje (c.d.) opOn(16,square); //displays 256
Mogą być przekazywane jako argument function square(x) {return x*x;} function opOn(num,func) { return func(num);} opOn(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)

22 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 dla f. niezwiązanych) 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,...)

23 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żyta do ustawienia właściwości nowego obiektu wraz z operatorem new często jest nazywana konstruktorem function func() { this.prop1=”val1”; } var x=new func(); alert(x.prop1); //displays val1

24 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. Obiekt wskazywany domyślnie przez domyślny prototype danej funkcji ma swoją właściwość constructor ustawioną na (tą) pierwotną funkcję Property constructor oraz prototype można nadpisać.

25 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 wlaściwość _prototype na prototype konstructora

26 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ść)

27 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”)

28 Realizacja Aplikacji Internetowych
Wielkie udawanie

29 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(); //displays obj1 myObj1.func.call(myObj2); //displays obj2

30 OOP Emulacja klas Konstruktory definiują sposób tworzenia obiektu (OOP klasy) 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

31 OOP Emulacja klas (c.d.) Obiekty mogą współdzielić implementację swoich metod function checkFunction(val) { if(this.prop1==val) alert("ok!"); } function myConstructor(value) this.prop1=value; this.check=checkFunction; var myObj1=new myConstructor("obj1"); myObj1.check("obj1"); //displays ok!

32 OOP Emulacja klas (c.d) 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 Obiekty nadpisują domyslny zwrot z funkcji. Typy proste już nie.

33 OOP emulacja metod statycznych
Ponieważ funkcja konstruktor faktycznie reprezentuje klasę obiektów i może być rozszerzna o własne właściwości implementacja metod i właściwości statyczny jest trywialna function BaseClass(name){ this.name = name; } BaseClass.staticMethod = function() { return new OtherClass(); }; ... var other = BaseClass.staticMethod();

34 Mamy obiekt i chcielibyśmy mieć drugi - podobny…
Application.GUI.Panel; ... Application.GUI.SecondPanel = Application.GUI.Panel; // to de facto ten sam obiekt!!! //A gdyby tak … Application.GUI.SecondPanel.Name = "Second"; //Jak jest nazwa pierwszego panelu? Application.GUI.Panel.Name = ???

35 Klony nadchodzą Funkcje są obiektami! Application.GUI.Panel; ...
App.GUI.SecondPanel = {}; App.GUI.SecondPanel.Show = App.GUI.Panel.Show; App.GUI.SecondPanel.Validate = App.GUI.Panel.Validate; //itd. itd. ... //Co się stanie gdy ? App.GUI.SecondPanel.Config = App.GUI.Panel.Config;

36 Helper z ExtJS? //funkcja kopiuje zawartosc (wlaczajac funkcje) //z Panel do SecondPanel Ext.apply(Application.GUI.SecondPanel, Application.GUI.Panel) // Przykladowa implementacja Ext.apply = function(d, e, b) { if (d && e && typeof e == "object") { for (var a in e) { d[a] = e[a] } } return d }; Issues: shallow copy prototypes

37 OOP Emulacja dziedziczenia – podejście funkcyjne
function Base(name){ this.name = name; } var b = new Base("b1"); alert(b.name); //wyswietli b1 //class Derived : Base function Derived(name,count) { Base.call(this,name); //this.baseClass=Base; this.count = count; //this.baseClass(); var d = new Derived("d1",5); alert(d.count); // wyswietli 5 alert(d.name); // wyswietli d1

38 Dziedziczenie na poziomie obiektu?
InheritFromObject (objectToDerrive) { var f = function() {}; f.prototype = objectToDerrive; return new f(); } App.GUI.Panel; ... App.GUI.SecondPanel = InheritFromObject(App.GUI.Panel); // albo nawet ze składnią zbliżoną do f. wbudowanych Object.prototype.BegetObject = function () { f.prototype = this; App.GUI.SecondPanel = App.GUI.Panel.BegetObject();

39 Dziedziczenie na poziomie obiektu
Ale: Object jest globalny więc begetObject może być nadpisane Co będzie jak oldObject się zmieni?

40 Zmiany: //niektore metody I pola moga zostac nadpisane
App.GUI.Panel; ... App.GUI.SecondPanel = App.GUI.Panel.BegetObject(); //niektore metody I pola moga zostac nadpisane App.GUI.SecondPanel.Show = function() {}; App.GUI.SecondPanel.Title = "new panel"; Co będzie w momencie zmiany w App.GUI.Panel ?? Application.GUI.Panel.Validate = function() {}; //spowoduje zmiane zachowania SecondPanel //jezeli case when the Hide function wasn’t overridden

41 Emulacja dziedziczenia klas – podejscie prototypowe
function Base(name){ this.name = name; } //here is an example how to create method that will be //shared across all objects of Base ‘class’ Base.prototype.toString = function(){ return "name:" + this.name; }; var b = new Base("b1"); alert(b.toString()); //displays name:b1 //in fact alert() calls toString() method //and Base.toString() overrides Object.toString() method

42 Emulacja dziedziczenia klas(c.d.)
var b = new Base("b1");

43 Emulacja dziedziczenia (c.d.)
Łańcuch “dziedziczenia” po utworzeniu jest stabilny Derived.prototype=new Base1(); var d1=new Derived(...); //d1 cannot be altered to inherit //from object other than Base1 ...ale można go zmienić dla nowych obiektów Derived.prototype=new Base2(); var d2=new Derived(...); //d1 and d2 inherit from //different objects

44 Emulacja dziedziczenia klas (c.d.)
//class Derived : Base function Derived(name,count) { Base.call(this,name); //Derived : base(name) this.count = count; } //Derived prototype have to be linked with Base prototype Derived.prototype = new Base(); //yes, Derived has custom toString() implementation Derived.prototype.toString = function() { return "name:"+this.name+",count:"+this.count; }; var d = new Derived("d1",5); alert(d.toString()); //displays name:b1,count:5

45 Emulacja dziedziczenia klas (c.d.)
Derived.prototype = new Base(); var d = new Derived("d1",5);

46 Prototypy - podsumowanie
Nie można emulować prywatnych składowych Brak duplikacji funkcji – rozmiar obiektu nie zależy od liczby ani rozmiaru funkcji Główny problem to niekontrolowana zmiana zawartości prototypu -

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){ //C# readonly this.getName=function() {return name;}; var count; this.getCount=function() {return count;}; this.setCount= function(newCount) { count=newCount;}; this.publicMethod=function(){ alert(this.name); //undefined alert(this.getName()); //ok }

49 Uwaga na prototypy i domknięcia
function Base(){ var count; this.GetCount=function() {return count;}; this.SetCount=function(newCount){count=newCount;}; } function Derived() { Base.call(this); //!!! } Derived.prototype = new Base(); var cd1=new Derived(); var cd2=new Derived(); //cd1.GetCount()==cd2.GetCount() cd1.SetCount(100); //cd1.GetCount()!=cd2.GetCount()

50 Emulacja namespaces Przestrzenie nazw mogą być emulowane jako
var DATA={}; DATA.IO={}; DATA.IO.Parsers={}; var SC = DATA.IO.Parsers; //jak C# using DATA.IO.Class1=function(...){...}; DATA.IO.Class1.prototype.toString=function(){...}; var c1 = new SC.Class1(...);

51 Realizacja Aplikacji Internetowych
Separacja

52 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

53 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

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

55 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ć

56 Moduł podzielony na pliki
var MODULE = (function (m) { prvOtherVariable = 1; m.newMethod = function () { /*...*/ }; return m; }(MODULE));

57 Bezpieczna modyfikacja modułu
Jak bezpiecznie zmienić zachowania modułu (tj. nadpisać stare zachowania)? ... var MODULE = (function (m) { var stara_metoda = m.method; m.method = function () { // mimo nadpisania mamy dostęp do // stara_metoda }; return m; }(MODULE));

58 Moduł – współdzielony stan prywatny
var MODULE = (function (m) { var _private = m._private = m._private || {}, _seal = m._seal = m._seal || function () { delete m._private; delete m._seal; delete m._unseal; }, _unseal = m._unseal = m._unseal || function () { m._private = _private; m._seal = _seal; m._unseal = _unseal; }; // dostęp do zmiennych zdefiniowanych w m._private // dopóki aplikacja nie zawoła MODULE._seal return m; }(MODULE || {}));

59 Moduł – Komunikcja między komponentami
var MODULE = (function (m) { var _private = m._private = m._private || {}, _seal = m._seal = m._seal || function () { delete m._private; delete m._seal; delete m._unseal; }, _unseal = m._unseal = m._unseal || function () { m._private = _private; m._seal = _seal; m._unseal = _unseal; }; // dostęp do zmiennych zdefiniowanych w m._private // dopóki aplikacja nie zawoła MODULE._seal return m; }(MODULE || {}));

60 Realizacja Aplikacji Internetowych
TESTOWANIE

61 Testowanie Jakies testy sa potrzebne Testy jednostkowe
Testy integracyjne Testy akceptacyjne lub end-to-end

62 Środowisko Framework Narzędzia dodatkowe FireUnit
Środowisko uruchomieniowe Przeglądarka uruchamiana ręcznie Selenium + przeglądarka Na serwerze: PhantomJS (SlimerJS,CasperJS…) Node.js + Chimera | Karma rhino + env.js,

63 Framework QUnit (używany np. przez wiele plug-inów JQuery)
module('calculator'); test('add numbers', function() { var calc = new Calculator(); equals(4, calc.add(2, 2)); })

64 Framework Jasmine (BDD, hierarchiczna definicja setup-ów)
describe('panda',function(){ it('is happy',function(){ expect(panda).toBe('happy'); });

65 Framework Mocha (BDD, hierarchiczna definicja setup-ów, pozwala używać różnych assert libraries, raportuje wolne testy przy t. asynchr., coverrage) describe('panda',function(){ it('is happy',function(){ assert.equal('happy',panda.state); expect(panda).toBe('happy'); });

66 Framework Screw.Unit JSSpec
describe("Calculator", function() {   it("should add numbers", function() {     var calc = new Calculator();     expect(calc.add(2, 2)).to(equal, 4);   }); }); JSSpec describe("Calculator", function() { with(this) { it("should add numbers", function() { var calc = new Calculator(); calc.add(2, 2).should(equal(4)); }); }});

67 Framework jsUnitTest jsUnitTest + jShoulda
new Test.Unit.Runner({   testCalculatorAdd: function() { with (this) {     var calc = new Calculator();     assertEqual(4, calc.add(2, 2));   }} }); jsUnitTest + jShoulda context('Calculator', { should('add numbers', function() { with (this) { var calc = new Calculator(); assertEqual(4, calc.add(2, 2)); }})

68 Framework I wiele innych m.in
Unittest, jsAssertUnit, YUItest, Qooxdoo, JSUnit, JSUnit , Crosscheck, Ecmaunit, Dojo Objective Harness, FireUnit, Qunit, RhinoUnit, JSpec

69 Tools Smoke Amok MockMe
new Smoke.Stub(Calculator, 'add').and_return(5); Smoke.Mock(Calculator).should_receive('add').at_least('once')   .with_arguments(2, 2).and_return(5); Amok var mock = amok.mock(Calculator); mock.should_receive('add').with_args(2, Number) .times(1).and_return(5); MockMe mock(Calculator).andDo(function() { SomethingThatUsesCalculator.calculate("2 + 2"); verify(Calculator.add)(2, 2); });

70 Tools qMock Jack Interesujace: JSMockito, Sinon.js, Mock.js
var mock = new Mock(); mock.expects(1).method('add').withArguments(2, 2).andReturn(5); Jack jack.expect("Calculator.add").exactly("1 time") .withArguments(2, 2).mock(function() { … return sth; }) jack.create("mock", ['add', 'substract']); .whereArgument(0).isOneOf(2, 3, 4); Interesujace: JSMockito, Sinon.js, Mock.js

71 Istotne uwagi Izolacja od drzewa DOM i globalnych odwołań do obiektów
Lokalne referencje do używanych obiektów Rozluznienie połączeń miedzy obiektami Mozliwość stosowanania wzorca obserwator (event) Stosowanie broker event (serviceBus) do komunikacji

72 Pokrycie kodu testami JSCoverage Istambul …

73 Realizacja Aplikacji Internetowych
JQuery

74 JQuery Silny model selekcji
Wsparcie dla typowych akcji np. ustawienie obsługi zdarzenia, dodanie, usunięcie klasy stylu itd. Gotowe rozwiazania typowych problemów Rozszerzalny model - wtyczki Dużo gotowych wtyczek Testowalny

75 JQuery Problem: wyszukiwanie elementów na stronie np:for ( var (i in document.getElementsByTagName("p") ) {     i.onclick = function(event) { alert("Hello!"); } } JQuery: $("p").click(function(event){ alert("Hello!!"); }

76 Jquery – Referencjonowanie
<script src=" </script> <script> // Standard. jQuery  $ jQuery(document).ready( function () { alert('DOM is ready!'); }); // Shortcut, but same thing as above. jQuery( function () { alert('No really, the DOM is ready!'); }); // Shortcut with fail-safe usage of $ jQuery(function($) {alert('Seriously its ready!'); });

77 JQuery Problem: wyszukiwanie elementów na stronie np:for ( var (i in document.getElementsByTagName("p") ) {     i.onclick = function(event) { alert("Hello!"); } } JQuery: $("p").click(function(event){ alert("Hello!!"); }

78 JQuery Selektor zwraca kolekcję obiektów DOM "owiniętych" w obiekty JQuery (dodatkowe metody) Pojedynczy obiekt można owinac stosujac $ np. $(this) Kolekcję można ją zapamiętać i wyłuskać z niej referencje do poszczególnych elementów var jqlinki = $("a"); var pierwszy_link = linki[0]; Kolekcję można też sprowadzic do tablicy obiektów DOM var jqlinki = $("a").get();

79 JQuery - selektory Selektory zwracają kolekcję elementów JQuery opakowujących elementy DOM: $("*") – wszystko $("a") - po nazwie tagu $('#myDivId') - po id $('.myCssClass'), $(‘a.myCssClass')- po klasie CSS $("[id]") – po atrybucie $("[id=wartosc]") – po wartości atrybutu Np. $('div').each( function() { alert($(this).html(); });

80 JQuery – selektory strukturalne
$ (“selektor1, selektor2, selektorN”) $("p,a,div,code.bold") $("rodzic > dziecko") $(„p>a") $("przodek potomek") $("p a.bold") $ (“poprzedni+nastepny”) $ (“label.MyLabelClass + input”) $ (“poprzedni ~ cale_rodzenstwo”) $ (“h3 ~ p”)

81 JQuery - atrybuty $("[id]") $("p[id][name]")
$("[id=wartosc]") $("input[name='newsletter']") $("[id~=slowo]") $("input[name~='test']") $("[id|=poczatek_do_kreski_lub_rowny]") $("a[hreflang|='en']") $("[id*=podciag]") $("input[name~='xx']") $("[id^=poczatek]") $("input[name^='news']") $("[id$=koniec]") $("input[name^=letter']")

82 JQuery - selektory Selektory można łaczyć i dodawać
$("a.myCssClass, '#myDivId>a")

83 JQuery – modyfikatory selekcji
:animated, :checked, :disabled :enabled, :empty, :hidden, :visible, :selected :file, :checkbox, :button, :header, :password, :radio, :reset, :submit, :text :even, :odd, :first, :first-child, :last, :last-child, :parent :contains() $("div:contains('John')") :has() $("div:has('p')") :not(sektor) $("input:not(:checked) + span") :eq(), :lt(), :gt() $("td:eq(2)")

84 JQuery – filtry .eq(), .first(), .last(), .slice(od,[do]) $('li').eq(2) $('li').eq(-1) $('li').slice(3,-2) .filter(selector), filter(function) $('li').filter(':even') $('li').filter(function(index) { return index % 3 == 2; }) .has(selektor_potomka), .has(DOM_element_potomny) $('li').has('ul') .not(selektor), not(DOM_elementy), not(function(index)) $('li').not(':even') $("p").not( $("#selected")[0] )

85 JQuery – pobieranie zawartości
.get([pozycja]) - pobieranie elementów Dom $("a").get() .html() $('div.demo-container').html(); $( "#myDiv p:first" ) .html( "New <strong>first</strong> paragraph!" ); .length, size() var n = $("div").length; .val() $('select.foo option:selected').val() .attr() var title = $("em").attr("title"); $("em").attr("title“,”new title”);

86 JQuery – trawersowanie drzewa
.find(), .end() – kończy ostatnie find $("p").find("a") .siblings(), .children(), .contents(), .closest(), .next(), .prev(), .parent(), .parents() .prevAll(), .nextAll(), .andSelf() $("div:last").prevAll(".myClass") .nextUntil(), .parentsUntil(), .prevUntil() #("#term-2").nextUntil("dt") .offsetParent() – pozycja na ekranie .add() $('li').add('p')

87 JQuery – ZMIANY .replaceAll(co_zastapic_selekcja) $("<b>Paragraph.</b>").replaceAll("p") .replaceWith(noweElementy), replaceWith(funkcja), $('.second').replaceWith( "<h2>New heading</h2>"); $('.third').replaceWith($('.first'));

88 JQuery – transformacje
.map( callback(this, index) ) var oneBased = $.map([0,1,2,3,4], function(value){return value+1;}); var ids = $(':checkbox').map(function() { return this.id; })

89 JQuery – predykaty .hasClass() $('#mydiv').hasClass('foo')
.is() $(this).is(".blue,.red")

90 JQuery – modyfikacje .addClass(), removeClass() $('p').addClass('myClass yourClass'); .toggleClass( className ), .toggleClass( className, switch ), .toggleClass( function(index, class), [ switch ] ) $("p").click(function () { $(this).toggleClass("highlight"); }); .removeAttr() $(this).next().removeAttr("disabled") .css(), .attr(), .val() $(‘p’). css( { fontSize: "100px", color: "red“ } )

91 JQuery – zdarzenia .error(), .resize(), .scroll() $('#book').error(function() { alert('Handler called.') }); .load()*, .ready(), .unload()* .blur(), .change(), .focus(), .select(), .submit() $('form').submit(function() { alert('Handler for .submit() called.'); return false; }); .focusin(), .focusout(), .keydown(), .keypress(), .keyup() .hover(), .mousedown(), .mouseenter(), .mouseleave(), .mousemove(), .mouseout(), .mouseover(), .mouseup(), .click(), .dblclick(), on() $('#target').click( function() { alert(‘click handler called.'); } ); * - deprecated -> on(“load”…

92 JQuery – efekty .hide(), show() $('p').addClass('myClass yourClass');
.focus() .slideDown(), .slideToggle(), .slideUp() ("div").slideDown("slow"); .fadeIn(), .fadeOut(), .fadeTo() $("div:hidden:first").fadeIn("slow"); .animate(), .stop(), .delay(), jQuery.fx.off $('#book').animate({ width: ['toggle', 'swing'], height: ['toggle', 'linear'], opacity: 'toggle' }, 5000, function() { // Animation complete. }); );

93 JQuery – Ajax load(), jQuery.get(), jQuery.getJSON(), jQuery.getScript(), jQuery.post() $.get("test.cgi", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); }); $('#result').load('ajax/test.html', function() { alert('Load was performed.'); }); jQuery.ajax(), jQuery.ajaxSetup(), $.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType }); .ajaxComplete(), .ajaxError(), .ajaxSend(), .ajaxStart(), .ajaxStop(), .ajaxSuccess(), . jQuery.param(), .serialize(), .serializeArray()

94 JQuery – Różne .clone(), .append(), appendTo(), .prepend(), .prependTo(), text(), html() $('h2').appendTo($('.container')); $("p").text("<b>Some</b> new text."); .unwrap(), .wrap(), .wrapAll(), .wrapInner() $("span").wrap("<div><p><em><b></b></em></p></div>"); $("span").wrapAll("<div></div>") .replaceAll(), .replaceWith() $('<h2>New heading</h2>').replaceAll('.inner'); $(‘<div/>’).replaceWith(‘<p></p>’); .detach(), .empty(), .remove() $('.hello').empty();

95 JQuery – Literatura Materiały: Ksiązki Doc do VS jquery.com
“JQuery in Action” “Learning jQuery” “jQuery UI” “jQuery Cookbook” Doc do VS

96 Realizacja Aplikacji Internetowych
Ext-Js

97 Ext - GUI ViewPort, Window Toolbar, Progresbar, TabPanel, Panel,
Editor, DataPicker, DataView Button, ButtonGroup

98 Ext - przykład Ext.onReady(function() { var item1 = new Ext.Panel({ title: 'Accordion Item 1', html: '<empty panel>', cls:'empty' }); var item2 = new Ext.Panel({ title: 'Accordion Item 2', html: '<empty panel>', cls:'empty' }); ... var accordion = new Ext.Panel({ renderTo: Ext.getBody(), // do elementu 'myDiv' margins:' ', split:true, width: 210, layout:'accordion', items: [item1, item2, item3, item4, item5] });

99 Ext - przykład Ext.onReady(function() { var item1 = new Ext.Panel({ }); var accordion = new Ext.Panel({ region:'west', margins:' ', split:true, width: 210, layout:'accordion', items: [item1, item2, item3, item4, item5] }); var viewport = new Ext.Viewport({ layout:'border', items:[ accordion, { region:'center', margins:' ', cls:'empty',bodyStyle:'background:#f1f1f1', html:'<br/><br/><empty center panel>' }] });

100 Ext – przykład: reużycie kontrolek
Ext.onReady(function() { MyPanel = extend(Ext.Panel, { title: 'Accordion Item 1', html: '<empty panel>', cls:'empty' }); ... var accordion = new Ext.Panel({ region:'west', margins:' ', split:true, width: 210, layout:'accordion', items: [ new MyPanel(), new MyPanel(), new MyPanel(), new MyPanel(), new MyPanel() ] });

101 Realizacja Aplikacji Internetowych
AngularJS

102 Kompleksowy framework JS
“opinionated” Dwukierunkowy binding HTML jako szablon – deklaratywna składnia MVC - MVVM Dependency Injection Rozszerzalny Testowalny Dobrze współpracuje z JQuery, Bootstrap

103 Dyrektywy Atrybuty: <html ng-app="project"> Tagi
<ng-pluralize count="beerCount" when="beerForms"> <my-widget title=“My Widget">

104 Binding

105 Kontroler

106

107

108

109 Filtry {{ data | filter:options }}
{{ element.price | currency }} currency uppercase date:' h:mma dd/MM/yyyy‘ limitTo:8 ng-repeat="…|orderBy:'-content'"

110 Formatowanie <a href ng-click="tab = 1"> ng-class ng-show

111 ng-pristine, ng-submitted ng-invalid, ng-valid ng-dirty
Formatowanie <a href ng-click="tab = 1"> ng-pristine, ng-submitted ng-invalid, ng-valid ng-dirty ng-scope, ng-isolate-scope ng-binding

112 Zdarzenia <a href ng-click="tab = 1"> ng-click ng-submit ng-init

113 Dane i binding {{GeneralInfo}} ng-repeat="todo in todos"
<input type="checkbox" ng-model="todo.done">

114 Modularyzacja ng-include="'sub-page.html‘"
ng-controller= "MyController as ctrl« <my-directive></my-directive > <span my-attribute></span>

115 Custom element <my-directive>
app.directive('myDirective', function(){ return { restrict: 'E', templateUrl: 'myTemlate.html', }; }); Element Attribute Class

116 Custom element <my-directive>
app.directive('myDirective', function(){ return { restrict: 'E', templateUrl: 'myTemlate.html', controller: function(){...}, controllerAs: 'ctrl' }; }); Element Attribute Class

117 Modularyzacja ng-include="'sub-page.html‘"
ng-controller= "MyController as ctrl« <my-directive></my-directive > <span my-attribute></span> var myModule = angular.module('myModule', []);

118 Serwisy, DI app.controller('MyController', ['$http', $log, function($http, $log){ }]); Serwisy

119 Serwisy, DI app.controller('MyController', ['$http', $log, function($http, $log){ }]); Leniwa inicjalizacja Model singleton Standardowe s.: $anchorScroll, $animate, $cacheFactory, $compile, $controller, $document, $exceptionHandler, $filter, $http, $httpBackend, $interpolate, $interval, $locale, $location, $log, $parse, $q, $rootElement, $rootScope, $sce, $sceDelegate, $templateCache, $templateRequest, $timeout, $window Serwisy

120 Własny serwis var myModule = angular.module('myModule', []); myModule.factory('myService', function() { var serviceInstance; // inicjalizacja return serviceInstance; }); myModule.factory('myServiceWithDep', [$log, myService, function($log, mySrvc){ return ...;

121 Wykorzystanie DI – serwis locator
var di = angular.injector(['myModule', 'ng']); var split = di.get('splitter'); var contr = di.instantiate('MyController'); Pot. wykorzystanie cache

122 Własne filtry {{name | reverse}}
angular.module('myApp', []) .filter('reverse', function() { return function(input, uppercase) { input = input || ''; var out = ""; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); return out; }; })

123 Angular - kontekst $scope może być zagnieżdzony
może odwołać sie do rodzica i odczytać jego wartości nie może odczytać wartości dzieci

124 Angular - wady Relatywnie drobne błedy potrafią spowodować niedziałanie całej strony Wolno działa pod starszymi przeglądarkami IE7, IE8 Pot. wolny dla skomplikowanych stron Trudno zrzumieć niektóre interakcje Niektóre mechanizmy są trudne np uaktualnianie scope vs event loop vs binding

125 Aurelia Projekt Roba Eisenberga

126 ReactJS - jeszcze inne podejście
var Hello = React.createClass({displayName: 'Hello', render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); ReactDOM.render( React.createElement(Hello, {name: "World"}), document.getElementById('container') );

127 ReactJS - jeszcze inne podejście
Skupia się na izolacji komponentów (za to kod html jest pomieszany z kodem js). Unika zarządzania stanem – przy każdej zmianie cały widok jest renderowany ponownie (w przeglądarce lub na serwerze) Koncepcja funkcyjna: wyświetlenie strony polega na wyrenderowaniu html-a na podstawie stanu Modele sa zwykłymi obiektami js Jednokierunkowe wiązanie Szybki - asynchroniczne odświeżanie widoku (kolejka) może być bardziej efektywne niż natychmiastowe odświeżanie przy b. rozbudowanych aplikacjach

128 Realizacja Aplikacji Internetowych
CoffeeScript

129 Języki kompilowane do JavaScript
Traceur (google: kompilator javascript next 2 javascript) Ecma Harmony / Narcisius (jw) Script# (c# 2 javascript) GWT (java 2 javascript) Pyjamas (python 2 javascript) CoffeeScript TypeScript Dart

130 Instalacja Node.js + coffee-script.js CoffeeSharp.zip
NUGet: Install-Package CoffeeSharp Coffee.exe CoffeeScriptHttpHandler.dll CoffeeSharp.dll Jurassic.dll

131 Motywacja Zwięzła składnia Redukcja szumu {} itd Dodatkowe możliwości
Poprawione problemy (==, var) Produkowany jest dobry kod Javascript Informacje Ksiazki: Screencast:

132 Podstawy Komentarz # Przypisanie – tworzy zmienna Abc =5 var Abc = 5
Bloki realizowane za pomoca wcięć if happy and knowsIt clapsHands() chaChaCha() else showIt() if (happy && knowsIt) { clapsHands(); chaChaCha(); } else { showIt();

133 Operatory Operatory CoffeeScript vs JavaScript is isnt not and or
true, yes, on false, no, off @, this of in, ? === !== ! && || true false this in Brak odpowiednika alert "I knew it!" if elvis? if (typeof elvis !== "undefined" && elvis !== null) alert("I knew it!");

134 Interpolacja zmiennych
Zmienne w " " podlegają interpolacji a w ' ' nie podlegają author = "Wittgenstein" quote = "A picture is a fact. -- #{ author }" sentence = "#{ 22 / 7 } is a decent approximation of π" var author, quote, sentence; author = "Wittgenstein"; quote = "A picture is a fact. -- " + author; sentence = "" + (22 / 7) + " is a decent approximation of π";

135 Wieloliniowe literały i komentarze blokowe
html = ''' <strong> cup of coffeescript </strong> ''' ### CoffeeScript Compiler v1.1.2 Released under the MIT License

136 Kaskadowe porównania cholesterol = 127
healthy = 200 > cholesterol > 60 var cholesterol, healthy; cholesterol = 127; healthy = (200 > cholesterol && cholesterol > 60);

137 Funkcje Składnia ala Ruby, zwraca wynik ostaniej instrukcji
Nawiasy przy wywołaniach można pomijać square(x) -> x*x test(x,y) -> a=5 x+y+a function square(x) { return x*x; } function test(x,y) { var a = 5; return x+y+5; } z = square 5 var z = square(5);

138 Funkcje i this Account = (customer, cart) -> @customer = customer
@cart = cart $('.shopping_cart').bind 'click', (event) -> var Account; var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; Account = function(customer, cart) { this.customer = customer; this.cart = cart; return $('.shopping_cart').bind('click', __bind(function(event) { return this.customer.purchase(this.cart); }, this)); };

139 Obiekty Składnia wymaga wcięć math = root: Math.sqrt square: square
cube: (x) -> x * square x math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); } };

140 Wszystko jest wyrażeniem
grade = (student) -> if student.excellentWork "A+" else if student.okayStuff if student.triedHard then "B" else "B-" else "C" eldest = if 24 > 21 then "Liz" else "Ike" var eldest, grade; grade = function(student) { if (student.excellentWork) { return "A+"; } else if (student.okayStuff) { if (student.triedHard) { return "B"; } else { return "B-"; } return "C"; }; eldest = 24 > 21 ? "Liz" : "Ike";

141 Pętle for, while, until, Petle zwracają wartość
eat food for food in ['toast', 'cheese', 'wine'] var food, _i, _len, _ref; _ref = ['toast', 'cheese', 'wine']; for (_i = 0, _len = _ref.length; _i < _len; _i++) { food = _ref[_i]; eat(food); }

142 Pętle Zwrot z petli mozna przypisac
cubes = (math.cube num for num in list) cubes = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results; })();

143 Przypisania wielokrotne
theBait = 1000 theSwitch = 0 [theBait, theSwitch] = [theSwitch, theBait] var theBait, theSwitch, _ref; theBait = 1000; theSwitch = 0; _ref = [theSwitch, theBait], theBait = _ref[0], theSwitch = _ref[1];

144 switch switch (day) { case "Tue": go(relax); break;
case "Thu": go(iceFishing); case "Fri": case "Sat": if (day === bingoDay) { go(bingo); go(dancing); } case "Sun": go(church); default: go(work); switch day when "Tue" then go relax when "Thu" then go iceFishing when "Fri", "Sat" if day is bingoDay go bingo go dancing when "Sun" then go church else go work

145 try/catch/finally try allHellBreaksLoose() try { allHellBreaksLoose();
catsAndDogsLivingTogether() catch error print error finally cleanUp() try { allHellBreaksLoose(); catsAndDogsLivingTogether(); } catch (error) { print(error); } finally { cleanUp(); }

146 Sklejanie tablic numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
copy = numbers[0..numbers.length] middle = copy[3..6] var copy, middle, numbers; numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; copy = numbers.slice(0, numbers.length); middle = copy.slice(3, 7);

147 Sklejanie tablic numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
var numbers, _ref; numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; [].splice.apply(numbers, [3, 4].concat(_ref = [-3, -4, -5, -6])), _ref;

148 Przypisania mogą dekomponowac struktury
var city, futurists, name, street, _ref, _ref2; futurists = { sculptor: "Umberto Boccioni", painter: "Vladimir Burliuk", poet: { name: "F.T. Marinetti", address: ["Via Roma 42R", "Bellagio, Italy 22021"] } }; _ref = futurists.poet, name = _ref.name, _ref2 = _ref.address, street = _ref2[0], city = _ref2[1]; futurists = sculptor: "Umberto Boccioni" painter: "Vladimir Burliuk" poet: name: "F.T. Marinetti" address: [ "Via Roma 42R" "Bellagio, Italy 22021" ] {poet: {name, address: [street, city]}} = futurists

149 Przypisania mogą dekomponowac zakresy
tag = "<impossible>" [open, contents..., close] = tag.split("") var close, contents, open, tag, _i, _ref; var __slice = Array.prototype.slice; tag = "<impossible>"; _ref = tag.split(""), open = _ref[0], contents = 3 <= _ref.length ? __slice.call(_ref, 1, _i = _ref.length - 1) : (_i = 1, []) , close = _ref[_i++];

150 Argumenty Funkcji gold = silver = rest = "unknown"
awardMedals = (first, second, others...) -> gold = first silver = second rest = others contenders = [ "Michael Phelps" "Liu Xiang" "Yao Ming" "Allyson Felix" "Shawn Johnson" "Roman Sebrle" "Guo Jingjing" "Tyson Gay" "Asafa Powell" "Usain Bolt" ] awardMedals contenders... var awardMedals, contenders, gold, rest, silver; var __slice = Array.prototype.slice; gold = silver = rest = "unknown"; awardMedals = function() { var first, others, second; first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? __slice.call(arguments, 2) : []; gold = first; silver = second; return rest = others; }; contenders = ["Michael Phelps", "Liu Xiang", "Yao Ming", "Allyson Felix", "Shawn Johnson", "Roman Sebrle", "Guo Jingjing", "Tyson Gay", "Asafa Powell", "Usain Bolt"]; awardMedals.apply(null, contenders);

151 Klasy CoffeScript oferuje koncepcję klas
Klasy mają składnię zbliżoną do obiektów Wspierane jest dziedziczenie i odwołania do klas bazowych

152 class Animal constructor: -> move: (meters) -> + " moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 sam = new Snake "Sammy the Python" sam.move() class Horse extends Animal alert "Galloping..." super 45 tom = new Horse "Tommy the Palomino" tom.move()

153 var Animal, Horse, Snake, sam, tom;
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; }; Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); return Animal; })();

154 Snake = (function() { __extends(Snake, Animal); function Snake() { Snake.__super__.constructor.apply(this, arguments); } Snake.prototype.move = function() { alert("Slithering..."); return Snake.__super__.move.call(this, 5); }; return Snake; })(); Horse = (function() { __extends(Horse, Animal); function Horse() { Horse.__super__.constructor.apply(this, arguments); } Horse.prototype.move = function() { alert("Galloping..."); return Horse.__super__.move.call(this, 45); return Horse; sam = new Snake("Sammy the Python"); tom = new Horse("Tommy the Palomino"); sam.move(); tom.move()

155 Realizacja Aplikacji Internetowych
Wygląd …

156 Wygląd czyli CSS to początek
Zerowanie stylów LESS, SASS Twitter BootStrap

157 Zerowanie stylów Problem: w poszczególnych przeglądarkach różne są domyślne wartości dla poszczególnych znaczników Minimum: * { padding: 0; margin: 0; } Podstawowy: * { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; } Zerujące CSS-y: Eric Meyer, Shaun Inmann, Chris Poteet

158 Zerowanie stylów Zalety: Piszemy od zera, a nie łatamy
Tylko wybrane (zdefiniowane) style będą dostępne Wiele rzeczy jest prostszych np. okreslamy padding I nie musimy werifikować czy przypadkiem marginnie jest gdzieś ustawiony Łatwiej opanować róznicew między przegladarkami

159 Zerowanie stylów Wady: Wieksza waga wytryny
Trzeba zdefiniować wszystko od początku = sporo pracy I tak nie załatwia wszystkich problemów kompatybilnościwych

160 Preprocesory CSS Najpopularniejsze: LESS, SASS
Pozwalają uzywać rozszerzeń np: Zagnieżdzanie reguł Zmienne Instrukcje warunkowe Funkcje Importowanie plików Mix-iny Wymagają dodatkowego kroku - kompilacji

161 Twitter - Bootstrap Pozwala szybko tworzyć strony z gotowych elementów
Dostępnych wiele gotowych rozwiązań/tematów 12 kolumnowy grid oparty na pixelach/procentach Reaktywny Wiele gotowych do użycia komponentów i wtyczek Wielo-platformowy: smartfony, przeglądarki