Realizacja Aplikacji Internetowych JavaScript

Most popular technologies http://stackoverflow.com/research/developer-survey-2016#technology-most-popular-technologies

Most loved technologies http://stackoverflow.com/research/developer-survey-2016#technology-most-loved-dreaded-and-wanted

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

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();

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

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

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

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

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

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

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

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

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, 5.1 - VI 2011, 6 - VI 2015 Hostowany …

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

Sprintem po JavaScripcie

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

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

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.

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")};

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]); //} } http://jsfiddle.net/manus/18j3djxk/5/

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

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

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() http://jsfiddle.net/manus/78vgw1tw/13/

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)

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

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)

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,...)

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

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

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

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

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

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.

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();

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

Prototypy

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

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

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

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

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

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

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

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

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

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

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 }

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

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

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ć

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"

EcmaScript 5

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

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

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

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(); }

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; };

EcmaScript 6

ECMAScript 6.0 Stałe (sam obiekt jest mutowalny) const PI = 3.141593 Bezpieczne binarne/ósemkowe literały 0b1101010010 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.`;

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" ]

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); } );

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() === 2 } 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; })();

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

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 === 7 b === 42 c === 3 d === undefined

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)

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

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!";

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

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; } }

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

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

ECMAScript 6.0 - moduły // lib/math.js export function sum (x, y) { return x + y } export var pi = 3.141593 // 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))

ECMAScript 6.0 - moduły // lib/math.js export function sum (x, y) { return x + y } export var pi = 3.141593 // 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))

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

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}`)} );

ECMAScript 6.0 Transcompiler: http://babeljs.io/

Promises

Promisses ES6 – plain old callback

Promises ES6: callbacks – what is wrong?

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

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

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

Realizacja Aplikacji Internetowych Separacja

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

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

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