web05dezvoltareaaplicatiilorweb javascript nodejs

8/19/2019 Web05DezvoltareaAplicatiilorWeb Javascript Nodejs

1/190

D r . S a b i n

B u r a g a

p r o f s . i n f o . u a i c . r o / ~ b u s a

c o /

Tehnologii Web

programare Web

⍟JavaScript la nivel de server – Node.js(aspect e esențiale)

avansat


2/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

„Cine a văzut vreodat ă o bijuterie frumos cizelat ă

de bijutier cu ajutorul ciocanului?”

Jan Amos Comenius


3/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Inventat de Brendan Eich (1995)

denumit iniț ial Mocha, apoi LiveScript

Oferit în premieră de browser -ul Netscape Navigator

Adaptat de Microsoft: JScript (1996)

Standardizat ca ECMAScript : ECMA-262 (1997)

www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript


4/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

ECMAScript

versiunea standardizat ă în vigoare: 5.1 (2011)www.ecma-international.org/publications/standards/Ecma-262.htm

versiunea cea mai recentă: 6.0 – ES6 (ECMAScript 2015)git.io/es6features

referința de bază: https://developer.mozilla.org/JavaScript


5/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Limbaj de tip script (interpretat)

destinat să manipuleze, să automatizeze

și să integreze f uncționalitățile

oferite de un anumit sistem


6/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Limbaj de tip script (interpretat)

nu necesit ă intrări/ieșiri în mod implicit


7/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /

Adoptă diverse paradigme de programare

imperativă

à la C


8/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /


funcțională

λ calculfuncții anonime, închideri (closures),…


9/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a

c o /


pseudo-obiectuală

via prototipuri(obiectele moștenesc alte obiecte, nu clase)


10/190

D r . S a b i n

B u r a g a

p r o f s . i

n f o . u a i c . r o / ~ b u s a c o /


dinamică

variabilele își pot schimba tipulpe parcursul rulării programului


11/190

D r . S a b i n

B u r a g a

p r o f s . i n f o . u a i c . r o / ~ b u s a c o /

Cum putem executa programele JavaScript?


12/190

D r . S a b i n

B u r a g a


Mediu de execuț ie (host-environment )

navigator Web

permite rularea de aplicaț ii Web la nivelul unei platforme

(un sistem de operare)


13/190

D r . S a b i n

B u r a g a



navigator Web

permite rularea de aplicaț ii Web la nivelul unei platforme

(un sistem de operare)

inclusiv pe dispozitive mobile (Android, iOS,

Fire OS (Kindle Fire), Windows Phone,…),

console de jocuri, smart TV și altele


14/190

D r . S a b i n

B u r a g a



navigator Web

„injectarea” de cod JavaScript

în documentele HTML via elementul


15/190

D r . S a b i n

B u r a g a



navigator Web

„injectarea” de cod JavaScript

în documentele HTML via elementul

cod extern referit printr-un URL

vs. cod inclus direct în pagina Web


16/190

D r . S a b i n

B u r a g a



independent de navigatorul Web

platforme de dezvoltare de aplicații distribuite: Node.js

servere de baze de date – e.g., Apache CouchDBcomponente ale sistemului de operare

aplicații de sine-stătătoare – e.g., Adobe Creative Suite


17/190

D r . S a b i n

B u r a g a


Cuvinte rezervate:

break else new var case finally return void catchfor switch while continue function this with default

if throw delete in try do instanceof typeof

caracteristici: sintaxa


18/190

D r . S a b i n

B u r a g a


Alte cuvinte rezervate:

abstract enum int short boolean export interfacestatic byte extends long super char final native

synchronized class float package throws const

goto private transient debugger implementsprotected volatile double import public

caracteristici: sintaxa


19/190

D r . S a b i n

B u r a g a


Number

reprezentare în dublă precizie

stocare pe 64 biț i – standardul IEEE 754

caracteristici: tipuri de date

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Number


20/190

D r . S a b i n

B u r a g a


String

secvenț e de caractere Unicode

fiecare caracter ocupă 16 biț i (UTF-16)


developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/String


21/190

D r . S a b i n

B u r a g a


Boolean

expresii ce se pot evalua ca fiind true/ false


developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Boolean


22/190

D r . S a b i n

B u r a g a


Object

aproape totul e considerat ca fiind obiect,

inclusiv funcțiile



23/190

D r . S a b i n

B u r a g a


Null

semnifică „nicio valoare”



24/190

D r . S a b i n

B u r a g a


Undefined

are semnificaț ia „nicio valoare asignat ă încă”



25/190

D r . S a b i n

B u r a g a

p r o f s . i n f o . u a i c . r o / ~ b u s

a c o /

Nu exist ă valori întregi



26/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Nu exist ă valori întregi

convertirea unui șir în număr: parseInt ()

parseInt ("123") 123

parseInt ("11", 2) 3


indică baza

de numeraț ie


27/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

„Valoarea” NaN (“not a number ”)

parseInt ("Salut") NaN

isNaN (NaN + 3) true

valori speciale:

Infinity

–Infinity



28/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Șirurile sunt obiecte

"Salut".length 5

un caracter reprezint ă un șir de lungime 1



29/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Valorile 0, "", NaN, null, undefined

sunt interpretate ca fiind false

!!234 true



30/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Variabilele se declară cu var

var marime;var numeAnimal = "Tux";

variabilele declarate f ără valori asignate,

se consideră undefined

caracteristici: variabile


31/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Dacă nu se folosește var ,

atunci variabila este considerat ă globală

de evitat așa ceva!

caracteristici: variabile


32/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Similari celor din C:

pentru numere: + – * / %testare: == === != !== ?:

asignare: += –= *= /= %=

incrementare și decrementare: ++ – –logici: ! && ||

concatenare de șiruri: "Java" + "Script" "JavaScript"

caracteristici: operatori


33/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Conversia tipurilor se face „din zbor” (dinamic)

"3" + 4 + 5 345

3 + 4 + "5" 75

adăugând un șir vid la o expresie,o convertim pe aceasta la string



34/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Egalitatea valorilor se testează cu == și !=

1 == true

truea se folosi: 1 === true false


inhibă conversia

tipurilor de date


35/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Aflarea tipului unei expresii: operatorul typeof typeof "Tux" string


operand rezultat undefined 'undefined'

null 'object'

de tip Boolean 'boolean'

de tip Number 'number'

de tip String 'string'

Function 'function'

orice alte valori 'object'


36/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Testare: if … else, switchpentru switch, sunt permise expresii la fiecare case

(testarea se realizează cu operatorul ===)

switch (2 + 3) { /* sunt permise expresii */

case 4 + 1 : egalitate ();

break;

default : absurd (); // nu se apelează niciodată}

caracteristici: control


37/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Ciclare: while, do … while, for

do {var nume = preiaNume ();

} while (nume != "");

for (var contor = 0; contor < 33; contor ++) {// de 33 de ori…

}



38/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Excepț ii: try … catch … finallytry {

// Linii "periculoase" ce pot cauza excepții} catch (eroare) {// Linii rulate la apariția unei/unor excepții

} finally {// Linii care se vor executa la final

}



39/190

D r . S a b i n

B u r a g a

p r o f s .

i n f o . u a i c . r o / ~ b u s

a c o /

Excepț ii: try … catch … finallytry {

// Linii "periculoase" ce pot cauza excepții} catch (eroare) {// Linii rulate la apariția unei/unor excepții

} finally {// Linii care se vor executa la final

}

emiterea unei excepț ii: throw

throw new Error ("O eroare de-a noastr ă...");



40/190

D r . S a b i n

B u r a g a


a c o /

Perechi nume—valoare

tabele de dispersie (hash) în C/C++

tablouri asociative în Perl, PHP sau Ruby

HashMaps în Java

“everything except primitive values is an object ”

caracteristici: obiecte


41/190

D r . S a b i n

B u r a g a


a c o /

Perechi nume—valoare

numele este desemnat de un șir de caractere(i.e., expresie de tip String)

valoarea poate fi de orice tip,

inclusiv null sau undefined



42/190

D r . S a b i n

B u r a g a


a c o /

Obiect colecț ie de propriet ăț i,

având mai multe atribute



43/190

D r . S a b i n

B u r a g a


a c o /

Obiect colecț ie de propriet ăț i,

având mai multe atribute

propriet ăț ile pot conț ine alte obiecte,

valori primitive sau metode



44/190

D r . S a b i n

B u r a g a


a c o /

Obiecte predefinite:

Global Object

Function Array

String RegExp

Boolean Number Math Date


de studiat developer.mozilla.org/JavaScript/Reference/Global_Objects


45/190

D r . S a b i n

B u r a g a


a c o /

Obiecte fundamentale vizând gestionarea erorilor

Error EvalError

RangeError

ReferenceError

SyntaxError TypeError

URIError



46/190

D r . S a b i n

B u r a g a


a c o /

Create prin intermediul operatorului new:

var ob = new Object();

var ob = { }; // echivalent cu linia anterioar ă


se preferă aceast ă sintaxă


47/190

D r . S a b i n

B u r a g a


a c o /

Accesarea propriet ăț ilor – operatorul .

ob.nume = "Tux";var nume = ob.nume;



48/190

D r . S a b i n

B u r a g a


a c o /

Accesarea propriet ăț ilor – operatorul .

ob.nume = "Tux";var nume = ob.nume;

echivalent cu:ob["nume"] = "Tux";

var nume = ob["nume"];



49/190

D r . S a b i n

B u r a g a


a c o /

Declarare + asignare:

var pinguin = {nume: "Tux",

proprietati: {

culoare: "verde",

marime: 17}

}


accesare:pinguin.proprietati.marime 17

pinguin["proprietati"]["culoare"]

verde


50/190

D r . S a b i n

B u r a g a


a c o /

Iterarea propriet ăț ilor – considerate chei:

var pinguin = { 'nume': 'Tux', 'marime': 17, 'oferta': true };

for (var proprietate in pinguin) {

console.log (proprietate + ' = ' + pinguin[proprietate]);

}



51/190

D r . S a b i n

B u r a g a


a c o /

Tipuri speciale de obiecte

propriet ăț ile (cheile) sunt numere,nu șiruri de caractere

caracteristici: tablouri

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Array


52/190

D r . S a b i n

B u r a g a


a c o /

Se poate utiliza sintaxa privitoare la obiecte:

var animale = new Array ();animale[0] = "pinguin";animale[1] = "omida";animale[2] = "pterodactil";

animale.length 3

notaț ie alternativă – preferat ă:

var animale = [ "pinguin", "omida", "pterodactil" ];



53/190

D r . S a b i n

B u r a g a


a c o /

Elementele pot aparț ine

unor tipuri de date eterogene

var animale = [ 33, "vierme", false, "gaga" ];



54/190

D r . S a b i n

B u r a g a


a c o /

Tablourile pot avea „găuri” (sparse arrays):

var animale = [ "pinguin", "omida", "pterodactil" ];animale[33] = "om";

animale.length 34

typeof animale[13] undefined



55/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u s

a c o /

Tablourile pot avea „găuri” (sparse arrays):

var animale = [ "pinguin", "omida", "pterodactil" ];animale[33] = "om";

animale.length 34

typeof animale[13] undefined

pentru a adăuga elemente putem recurge la:

animale[animale.length] = altAnimal;



56/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u s

a c o /

var vector = [ ];

vector [0] = "zero";

vector [new Date ().getTime ()] = "now";vector [3.14] = "pi";

for (var elem in vector ) {

console.log ("vector[" + elem + "] = " + vector [elem] +", typeof( " + elem +") == " + typeof (elem));

}

caracteristici: tablouri – exemplu

adaptare după John Kugelman (2009)


57/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u s a c o /

rezultatul obț inut în urma rulării programului JavaScriptvia aplicația JS Bin

http://jsbin.com/


58/190

D r . S a b i n

B u r a g a

p r o f s


Definite via function

function transformaPixeliInPuncte (px) {var puncte = px * 300;return puncte;

}

caracteristici: funcții

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Function


59/190

D r . S a b i n

B u r a g a

p r o f s


Dacă nu este întors nimic în mod explicit,

valoarea de retur se consideră undefined



60/190

D r . S a b i n

B u r a g a

p r o f s


Parametrii de intrare pot lipsi,

fiind consideraț i undefined

Pot fi transmise mai multe argumente,

cele în surplus fiind ignorate

transformaPixeliInPuncte (10, 7) 3000



61/190

D r . S a b i

n

B u r a g a

p r o f s


Funcț iile sunt tot obiecte

astfel, pot fi specificate funcț ii anonime

în acest sens, JavaScript este un limbaj funcț ional


expresii

lambda


62/190

D r . S a b i

n

B u r a g a

p r o f s


var media = function () { // calculul mediei a N numere

var suma = 0;

for (var iter = 0,lung = arguments.length;

iter < lung; iter ++) {

suma += arguments[iter ];}

return suma / arguments.length;

};



63/190

D r . S a b i

n

B u r a g a

p r o f s


var media = function () { // calculul mediei a N numere

var suma = 0;

for (var iter = 0,lung = arguments.length;

iter < lung; iter ++) {

suma += arguments[iter ];}

return suma / arguments.length;

};


variabilele declarate

în funcție nu vor fi

accesibile din exterior,

fiind „închise”

funcție closure


64/190

D r . S a b i

n

B u r a g a

p r o f s


console.log ( media (9, 10, 7, 8, 7) ) 8.2


65/190

D r . S a b i

n

B u r a g a

p r o f s


precizaț i ce efect vor avea liniile de cod următoare:

console.log ( typeof (media) );

console.log ( media() );


66/190

D r . S a b i

n

B u r a g a

p r o f s


variabila media este de tip function

apelul media() întoarce valoarea NaN


67/190

D r . S a b i

n

B u r a g a

p r o f s


function Animal (nume, marime) {

this.nume = nume; // date-membre

this.marime = marime;

this.oferaNume = function () { // metodăreturn this.nume;

};

this.oferaMarime = function () { // metodăreturn this.marime;

};

}


creational pattern

pseudo-clase

(utilizareaconstructorilor)


68/190

D r . S a b i

n

B u r a g a

p r o f s


Operatorul new creează un nou obiect vid și

apelează funcția specificată cu this setat pe acest obiect

aceste funcții se numesc constructori,

trebuie apelate via new

și, prin convenție, au numele scris cu literă mare



69/190

D r . S a b i

n

B u r a g a

p r o f s


Față de alte limbaje de programare,

obiectul curent – referit cu this –este setat ca fiind obiectul global

de exemplu, în browser , reprezint ă fereastra curent ă în care este redat documentul: this window



70/190

D r . S a b i n

B u r a g a

p r o f s


caracteristici: de la funcții la clase

trasarea pas-cu-pas a execuției programului, cu inspectarea valorilor

variabilelor, via www.pythontutor.com/visualize.html#py=js

// instanțierea unui obiectvar tux = new Animal ("Tux", 17);console.log (tux.oferaNume ());var jox = tux;console.log ( jox.oferaNume ());

// alt obiect

var pax = new Animal ("Pax", 15);pax.marime = 21;console.log (pax.oferaMarime ());


71/190

D r . S a b i n

B u r a g a

p r o f s


Metodele pot fi declarate și în exteriorul constructorului

function oferaNumeAnimal () {

return this.nume;

}

function Animal (nume, marime) {this.nume = nume;

this.marime = marime;

this.oferaNume = oferaNumeAnimal; // referă funcția de mai sus

}



72/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Orice obiect deține trei tipuri de proprietăți:

named data property o proprietate având asignată o valoare

named accessor property de tip setter / getter pentru a stabili/accesa o valoare

internal property folosită exclusiv de procesorul ECMAScript (JavaScript)

caracteristici: proprietăți


73/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Fiecare proprietate are asociate atributele:

[[Value]] – desemnează valoarea curentă a proprietății[[Writable]] – indică dacă o proprietate

poate să-și modifice valoarea

[[Get]] și [[Set]] – funcții opționale pentru a oferi/stabili

valoarea unei proprietăți de tip accessor [[Enumerable]] – specifică dacă numele proprietății

va fi disponibil într-o buclă for-in

[[Configurable]] – indică dacă proprietatea

poate fi ștearsă ori redefinită


[[Prototype]] definește ierarhiilor de obiecte


74/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

proprietăți interne importante (folosite de procesorul

ECMAScript, dar inaccesibile la nivel de program)

[[Get]] [[Put]] [[CanPut]] pentru accesarea valorilor

[[HasProperty]]

[[DefineOwnProperty]][[GetProperty]]

[[GetOwnProperty]]

[[Delete]]

manipularea proprietăților

[[Extensible]] indică obiectele ce pot fi extinse[[Construct]]

[[Call]]asociate obiectelor executabile

(funcții)

[[Code]]

[[Scope]]

desemnează codul & contextul

unei obiect de tip funcție


75/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

// crearea unei proprietăți simple stocând date // (writable, enumerable, configurabile)

obiect.numeProprietate = 33;

// crearea via API-ul intern a unei proprietăți stocând dateObject.defineProperty (obiect, "numeProprietate", {

value: 33, writable: true, enumerable: true, configurable: true })



76/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

proprietățile interne ale obiectelor definite

http://www.objectplayground.com/


77/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Deoarece orice obiect deține în mod implicit

proprietatea prototype,

structura unei „clase” poate fi extinsă ulterior

caracteristici: prototipuri

developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Object/prototype


78/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Deoarece orice obiect deține în mod implicit

proprietatea prototype,

structura unei „clase” poate fi extinsă ulterior

un prototip e o proprietate oferind o legătură ascunsă

către obiectul de care aparține



79/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Dacă se încearcă accesarea unui element inexistent

în cadrul unui obiect dat,

se va verifica lanț ul de prototipuri ( prototype chain)


function Animal (nume, marime) { // definiție inițialăthi


80/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

this.nume = nume;this.marime = marime;

}

// pe baza protipurilor, definim noi metode// disponibile pentru toate obiectele din clasă

Animal.prototype.oferaNume = function () {return this.nume;};

Animal.prototype.oferaMarime = function () {

return this.marime;};

// instanțiem un obiect de tip Animal

var tux = new Animal ("Tux", 17);


81/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /


82/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Pentru a cunoaște tipul unui obiect

(pe baza constructorului și a ierarhiei de prototipuri)

se folosește operatorul instanceof



83/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

var marimi = [17, 20, 7, 14];

marimi instanceof Array true

marimi instanceof Object true

marimi instanceof String false

var tux = new Animal ("Tux", 17);tux instanceof Object true

tux instanceof Array false



84/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Adăugarea unei metode se realizează via prototype

Animal.prototype.oferaNumeMare = function () {

return this.nume.toUpperCase ();

};

tux.oferaNumeMare () "TUX"

caracteristici: extinderea claselor


85/190

D r . S a b i n

B u r a g a

p r o f s

. i n f o . u a i c . r o / ~ b u

s a c o /

Pot fi extinse și obiectele predefinite:

// adăugăm o metodă obiectului String

String.prototype.inverseaza = function () {var inv = '';

for (var iter = this.length - 1; iter >= 0; iter--) { // inversăm șirul…inv += this[iter];

}

return inv;

};

"Web".inverseaza ()

"beW"


d l l


86/190

D r . S a b i n

B u r a g a

p r o f s . i n f o . u a i c . r o / ~ b u

s a c o /

Cel mai general prototype este cel al lui Object

una dintre metodele disponibile – predefinite –este toString() care poate fi suprascrisă (over-ride)


i i i i d l l


87/190

D r . S a b i n

B u r a g a


s a c o /

var tux = new Animal ("Tux", 17);

tux.toString () [object Object]

Animal.prototype.toString = function () {return '' + this.oferaNume () + '';

};

tux.toString () "Tux"


Atenț ie la pericole! – e.g., comportamentul diferit

al construcț iei for (var proprietate in obiect )

i i i i d l l


88/190

D r . S a b i n

B u r a g a


s a c o /

Șablon general:

ClasaDeBaza = function () { /* … */ };SubClasa = function () { /* … */ };

SubClasa.prototype = new ClasaDeBaza ();


i i i


89/190

D r . S a b

i n

B u r a g a


s a c o /

Deoarece o funcț ie reprezint ă un obiect, poate fi:

stocat ă ca valoare (asociată unei variabile)

pasat ă ca argument al unei alte funcț ii

întoarsă de o funcț ie – fiind argument pentru return

caracteristici

i i i î l


90/190

D r . S a b

i n

B u r a g a


s a c o /

JavaScript oferă un singur spaț iu de nume,

la nivel global

conflicte privind denumirea funcț iilor/variabilelor

specificate de programe diferite,concepute de mai multi dezvoltatori

caracteristici: încapsulare

t i ti i î l


91/190

D r . S a b

i n

B u r a g a


s a c o /

Nu trebuie afectat spaț iul de nume global,

păstrându-se codul-sursă la nivel privat


t i ti i î l


92/190

D r . S a b

i n

B u r a g a


s a c o /

Codul poate fi complet încapsulat

via funcț ii anonime

care „păstrează” construcț iile la nivel privat


t i ti i l


93/190

D r . S a b

i n

B u r a g a


s a c o /

Declararea imbricat ă – ca expresii de tip funcț ie –

a funcț iilor anonime are denumirea closures

https://developer.mozilla.org/en/JavaScript/Guide/Closures

caracteristici: closures

închideri

t i ti i l


94/190

D r . S a b

i n

B u r a g a


s a c o /

Șablonul general:

// specificarea unei expresii de tip funcție( function () {

// variabilele și funcțiile vor fi vizibile doar aici // variabilele globale pot fi accesate

} ( ) );

caracteristici: closures


95/190

D r . S a b

i n

B u r a g a


s a c o /var cod = (function () {

var priv = 0; // variabilă privată

function start (x) {// ... poate accesa 'priv'// și funcția 'faCeva'

}function faAia (param) {// ... invizibilă din afar ă

}

function faCeva (x, y) {// ...

}return {// sunt publice doar // funcțiile 'start' și 'faCeva''start': start,'faCeva': faCeva

}}) ();

cod.start (arg); // apelăm 'start'

via closures, simulăm metodele private

modularizarea codului (module pattern)

var makeCounter = function () {


96/190

D r . S a b

i n

B u r a g a


s a c o /

() {var contorPrivat = 0; // un contor de valori (inițial, zero)function changeBy (val) { // funcție privată

contorPrivat += val; // ce modifică valoarea contorului}return { // funcții publice (expuse)

increment: function() {changeBy (1);

},decrement: function() {

changeBy (-1);},value: function() {

return contorPrivat;}

};};


97/190

D r . S a b

i n

B u r a g a


s a c o /

console.log (contor1.value ()); /* 0 */

contor1.increment ();

contor1.increment ();console.log (contor1.value ()); /* 2 */

contor1.decrement ();



de eți t!


98/190

D r . S a b

i n

B u r a g a


s a c o /

Totul în JavaScript este obiect – chiar și funcț iile

de reținut!

de rețin t!


99/190

D r . S a b

i n

B u r a g a


s a c o /

Orice obiect este întotdeauna mutabil

(poate fi alterat oricând)

propriet ăț ile și metodele sunt disponibileoriunde în program ( public scope)

de reținut!

de reținut!


100/190

D r . S a b

i n

B u r a g a


s a c o /

Nu exist ă vizibilitate la nivel de bloc de cod

(block scope),

ci doar la nivel global ori la nivel de funcț ie

de reținut!

de reținut!


101/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

Funcț iile ascund orice e definit în interiorul lor

de reținut!

de reținut!


102/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

Operatorul new creează obiecte aparț inând

„clasei” specificate de funcț ia constructor

de reținut!

de reținut!


103/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

Accesorul this este relativ la contextul execuț iei,

nu al declarării

de reținut!

Atenție la dependențade mediul de execuție!

de reținut!


104/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

Proprietatea prototype are valori modificabile

de reținut!

json


105/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

JavaScript Object Notation

http://json.org/

json

json


106/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

Format compact pentru interschimb de date

– în termeni de obiecte și literali – între aplicaț ii

biblioteci de procesare și alte resurse de interes:

http://jsonauts.github.io/

json

// definim un șir de caractere ce specifică diverse construcții JSON // (e.g., preluarea datelor via Ajax/WebSocket-uri de la un serviciu Web/API)

i T '{ " " "T " " t " 33 " d l" [ " did" " it " ] }'


107/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

var sirTux = '{ "nume": "Tux", "stoc": 33, "model": [ "candid", "viteaz" ] }';

var tux;

try { // procesăm șirul pentru a genera un obiect JS via obiectul JSONtux = JSON.parse (sirTux);} catch (e) { console.log (e.message); /* eroare :( */ }

// obiectul 'tux' generat cu JSON.parse ()

console.log (tux);

// serializare ca șir de caractereconsole.log (JSON.stringify (tux));

procesare recurgând la

obiectul predefinit JSON

instrumente


108/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

procesare strictă a limbajului: "use strict";

verificare statică a codului: JSLint , JSHint , ESLint

suport pentru unit testing: Jasmine, Qunit , Sinon.js, Tyrtle

documentarea codului: JSDoc Toolkit

optimizare de cod: Closure Compiler, Scriptalizer

pachete & workflow -uri: Bower, Grunt , Yeoman,…

de studiat și S. Buraga, „Ingineria dezvoltării aplicaț iilor JavaScript ”

http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week10

instrumente

instrumente


109/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

instrumente

www.codefellows.org/blog/a-list-of-foundational-javascript-tools


110/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

ECMAScript 2015 (ES6)

noua specificație standardizată (ediția VI, iunie 2015)

http://www.ecma-international.org/ecma-262/6.0/

lista facilităților:

https://github.com/lukehoban/es6featureshttp://es6-features.org/

instrumente ES6: https://github.com/addyosmani/es6-tools


111/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /ECMAScript 2015 (ES6)

definirea de clase – perspectiva paradigmei obiectuale

parametri cu valori implicite și parametri multipli

machete pentru șiruri de caractere (template literals)

declararea succintă a funcțiilor anonime (arrow functions)iteratori și generatori

notificări privind rezultatul oferit de o funcție ( promises)

noi tipuri de date – e.g., Map, Set, Proxy, Reflection

modularizarea codului: module + importuri…

http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week13

(în loc de) pauză


112/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /


113/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

N-am putea dezvolta în JavaScript

aplicații Web la nivel de server?

node js: caracterizare


114/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

node.js: caracterizare

“ Node.js® is a JavaScript runtime built on Chrome’s

V8 JavaScript engine. Node.js uses an event-driven ,

non-blocking I/O model that makes it lightweight and

efficient. Node.js’ package ecosystem – npm – is the largest

ecosystem of open source libraries in the world .”

“Node.js is designed to build

scalable network applications.”

Ryan Dahl concepe Node.js (2009) – http://nodejs.org/


115/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /rulează pe mașini respectând POSIX + Windows (2011)

adoptat de industrie (2012)e.g., Cloud9 IDE, eBay, LinkedIn, Storify, Yahoo!

Node.js Foundation (2015)IBM, Intel, Joyent, Microsoft, RedHat, SAP, The Linux Foundation,…

io.js – o variantă Node.js concepută în ES6 al cărei cod-

sursă a fost încorporat în Node.js 4 (2015)

Node.js 4.4.0 LTS – Long Term Support (8 martie 2016)versiune stabilă actuală pentru uz în producție

Node.js 5.8.0 – caracter experimental, în dezvoltarehttps://nodejs.org/en/blog/community/node-v5/

node js


116/190

D r . S a b

i n

B u r a g a

p r o f

s . i n f o . u a i c . r o / ~ b u

s a c o /

node.js

Permite dezvoltarea de aplicaț ii Web

web05dezvoltareaaplicatiilorweb javascript nodejs

Documents