avansat tehnologii webbusaco/teach/courses/web/presentations/web05... · ga .ro / ~ co / adoptă...

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/Tehnologii Web

programare Web

⍟JavaScript la nivel de server – Node.js

(aspecte esențiale)

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

„Cine a văzut vreodată o bijuterie frumos cizelatăde bijutier cu ajutorul ciocanului?”

Jan Amos Comenius

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

JavaScript

un limbaj de programare pentru Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

ECMAScript

versiunea standardizată în vigoare: ECMAScript 2016 – versiunea ES7 (iunie 2016)

www.ecma-international.org/publications/standards/Ecma-262.htm

git.io/es6features

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Limbaj de tip script (interpretat)

destinat să manipuleze, să automatizezeși să integreze funcționalitățile

oferite de un anumit sistem

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Limbaj de tip script (interpretat)

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Adoptă diverse paradigme de programare

imperativă

à la C

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


funcțională

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


pseudo-obiectuală

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


dinamică

variabilele își pot schimba tipul pe parcursul rulării programului

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Cum putem executa programele JavaScript?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Mediu de execuție (host-environment)

navigator Web

permite rularea de aplicații Web la nivelul unei platforme(un sistem de operare)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


navigator Web

permite rularea de aplicații Web la nivelul unei platforme(un sistem de operare)

inclusiv pe diverse dispozitive – e.g., Android, iOS, Fire OS (Kindle Fire), Universal Windows Platform,… –,

console de jocuri, smart TV și altele

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


navigator Web

„injectarea” de cod JavaScriptîn documentele HTML via elementul

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


navigator Web

„injectarea” de cod JavaScriptîn documentele HTML via elementul

cod extern referit printr-un URL vs. cod inclus direct în pagina Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


independent de navigatorul Web

platforme de dezvoltare de aplicații distribuite: Node.jsservere Web – nginScript în cadrul Nginx

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Cuvinte rezervate:

break else new var case finally return void catch

for switch while continue function this with default

if throw delete in try do instanceof typeof

caracteristici: sintaxa

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Alte cuvinte rezervate:

abstract enum int short boolean export interface

static byte extends long super char final native

synchronized class float package throws const

goto private transient debugger implements

protected volatile double import public

caracteristici: sintaxa

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

String

secvențe de caractere Unicode

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


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Boolean

expresii ce se pot evalua ca fiind true/false


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Object

aproape totul e considerat ca fiind obiect,inclusiv funcțiile


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Null

semnifică „nicio valoare”


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Undefined

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Nu există valori întregi


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Nu există valori întregi

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

parseInt ("123") 123parseInt ("11", 2) 3


indică bazade numerație

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

„Valoarea” NaN (“not a number”)

parseInt ("Salut") NaNisNaN (NaN + 3) true

valori speciale:Infinity

–Infinity


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Șirurile sunt obiecte

"Salut".length 5

un caracter reprezintă un șir de lungime 1


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Valorile 0, "", NaN, null, undefinedsunt interpretate ca fiind false

!!234 true


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Variabilele se declară cu var

var marime;

var numeAnimal = "Tux";

variabilele declarate fără valori asignate, se consideră undefined

caracteristici: variabile

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Dacă nu se folosește var,atunci variabila este considerată globală

de evitat așa ceva!


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Valorile sunt „legate” tardiv la variabile(late binding)


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Similari celor din C:

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

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

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

caracteristici: operatori

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Conversia tipurilor se face „din zbor” (dinamic)

"3" + 4 + 5 3453 + 4 + "5" 75

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

1 == true true

a se folosi: 1 === true false


inhibă conversiatipurilor de date

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Aflarea tipului unei expresii: operatorul typeoftypeof "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'

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Operatorii logici && și ||

var nume = unNume || "Implicit";


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Operatorul ternar de test ? :

var prezență = (studenți > 33) ? "Prea mulți" : "Cam puțini…";


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Ciclare: while, do … while, for

do {

var nume = preiaNume ();

} while (nume != "");

for (var contor = 0; contor < 33; contor++) {

// de 33 de ori…

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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ă...");


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Obiect colecție de proprietăți,având mai multe atribute


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Obiect colecție de proprietăți,având mai multe atribute

proprietățile pot conține alte obiecte,valori primitive sau metode


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Obiecte predefinite:

Global Object

Function Array

String RegExp

Boolean Number

Math Date


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Obiecte fundamentale vizând gestionarea erorilor

Error

EvalError

RangeError

ReferenceError

SyntaxError

TypeError

URIError


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Create prin intermediul operatorului new:

var ob = new Object();

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


se preferă această sintaxă

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Accesarea proprietăților – operatorul .

ob.nume = "Tux";

var nume = ob.nume;


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Accesarea proprietăților – operatorul .

ob.nume = "Tux";

var nume = ob.nume;

echivalent cu:

ob["nume"] = "Tux";

var nume = ob["nume"];


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Declarare + asignare:

var pinguin = {

nume: "Tux",

proprietati: {

culoare: "verde",

marime: 17

}

}


accesare:pinguin.proprietati.marime 17

pinguin["proprietati"]["culoare"] verde

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

var facultyContactInfo = {

// numele proprietăților sunt încadrate de ghilimele

"official-phone" : '+40232201090',

city : 'Iasi', // dacă numele e identificator valid, ghilimelele pot fi omise

'street' : 'Berthelot Street',

'number' : 16, // pot fi folosite orice tipuri de date primitive

"class" : "new", // cuvintele rezervate se plasează între ghilimele

coord : { // obiectele pot conține alte obiecte (nested objects)

'geo' : { 'x': 47.176591, 'y': 27.575930 }

},

age : Math.floor ("25.1") // pot fi invocate metode de calcul a valorilor

};

console.log (facultyContactInfo.coord["geo"].y); // obținem 27.57593

adaptare după Sergiu Dumitriu (absolvent FII)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Iterarea proprietăților – considerate chei:

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

for (var proprietate in pinguin) {

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

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Eliminarea proprietăților se realizează cu delete

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

pinguin.nume = undefined; // nu șterge proprietatea

delete pinguin.marime; // eliminare efectivă

for (var prop in pinguin) {

console.log (prop + "=" + pinguin[prop]);

}

// va apărea doar "nume=undefined"


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Tipuri speciale de obiecte

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

caracteristici: tablouri

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Elementele pot aparțineunor tipuri de date eterogene

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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


animale[33] = "om";

animale.length 34typeof animale[13] undefined


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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


animale[33] = "om";

animale.length 34typeof animale[13] undefined

pentru a adăuga elemente putem recurge la:animale[animale.length] = altAnimal;


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

http://jsbin.com/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Metode utile:

a.toString() a.concat(item, ..) a.join(sep)

a.pop() a.push(item, ..) a.reverse()

a.shift() a.unshift([item]..)

a.sort(cmpfn) a.splice(start, delcount, [item]..)

etc.


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Definite via function

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

}

caracteristici: funcții

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Dacă nu este întors nimic în mod explicit, valoarea de retur se consideră undefined


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Parametrii de intrare pot lipsi, fiind considerați undefined

Pot fi transmise mai multe argumente,cele în surplus fiind ignorate

transformaPixeliInPuncte (10, 7) 3000


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Funcțiile sunt tot obiecte

astfel, pot fi specificate funcții anonime

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


expresiilambda

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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;

};


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

pentru aprofundarea aspectelor vizând programarea funcțională în JavaScript a se studia

https://github.com/stoeffel/awesome-fp-js

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

precizați ce efect vor avea liniile de cod următoare:console.log ( typeof (media) );

console.log ( media() );

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

variabila media este de tip functionapelul media() întoarce valoarea NaN

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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(utilizarea

constructorilor)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Operatorul new creează un nou obiect vid șiapelează 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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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 obiectvar pax = new Animal ("Pax", 15); pax.marime = 21;console.log (pax.oferaMarime ());

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

}


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

named data propertyo proprietate având asignată o valoare

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

internal propertyfolosită exclusiv de procesorul ECMAScript (JavaScript)

caracteristici: proprietăți

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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ă


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

proprietăți interne importante (folosite de procesorul ECMAScript, dar inaccesibile la nivel de program)

[[Prototype]] definește ierarhiilor de obiecte

[[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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// 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 date

Object.defineProperty (obiect, "numeProprietate", {

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

)


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

proprietățile interne ale obiectelor definitehttp://www.objectplayground.com/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Dacă se încearcă accesarea unui element inexistentîn cadrul unui obiect dat,

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

function Animal (nume, marime) { // definiție inițială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 Animalvar tux = new Animal ("Tux", 17);

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Pentru a cunoaște tipul unui obiect(pe baza constructorului și a ierarhiei de prototipuri)

se folosește operatorul instanceof


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Adăugarea unei metode se realizează via prototype

Animal.prototype.oferaNumeMare = function () {

return this.nume.toUpperCase ();

};

tux.oferaNumeMare () "TUX"

caracteristici: extinderea claselor

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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"


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Cel mai general prototype este cel al lui Object

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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 diferital construcției for (var proprietate in obiect)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Șablon general:

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

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

SubClasa.prototype = new ClasaDeBaza ();


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

JavaScript oferă un singur spațiu de nume, la nivel global

conflicte privind denumirea funcțiilor/variabilelorspecificate de programe diferite,

concepute de mai multi dezvoltatori

caracteristici: încapsulare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Nu trebuie afectat spațiul de nume global,păstrându-se codul-sursă la nivel privat


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Codul poate fi complet încapsulatvia funcții anonime

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


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Ș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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/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 privatemodularizarea codului (module pattern)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

var makeCounter = function () {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;}

}; };

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

contor1.increment ();

contor1.increment ();


contor1.decrement ();



Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Orice obiect este întotdeauna mutabil(poate fi alterat oricând)

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

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Funcțiile ascund orice e definit în interiorul lor

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Operatorul “.” este echivalentcu de-referențierea:

ob.prop === ob["prop"]

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Operatorul new creează obiecte aparținând„clasei” specificate de funcția constructor

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Accesorul this este relativ la contextul execuției, nu al declarării

de reținut!

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Proprietatea prototype are valori modificabile

de reținut!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

JavaScript Object Notation

http://json.org/

json

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

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

var tux;

try { // procesăm șirul pentru a genera un obiect JS via obiectul JSON

tux = JSON.parse (sirTux);

} catch (e) { console.log (e.message); /* eroare :( */ }

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

console.log (tux);

// serializare ca șir de caractere

console.log (JSON.stringify (tux));

procesare recurgând la obiectul predefinit JSON

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

instrumente

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Aspecte mai recente vizând JavaScript?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

ECMAScript 2015 (ES6)

specificație standardizată – ediția 6, iunie 2015

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


lista facilităților:http://es6-features.org/

https://jsfeatures.in/#ES6

https://ponyfoo.com/articles/tagged/es6-in-depth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/ECMAScript 2015 (ES6)

definirea de clase – perspectiva paradigmei obiectualeparametri cu valori implicite și parametri multipli

machete pentru șiruri de caractere (template literals)declararea succintă a funcțiilor anonime (arrow functions)

iteratori și generatorinotificări privind rezultatul oferit de o funcție (promises)

noi tipuri de date – e.g., Map, Set, Proxy, Reflectionmodularizarea codului: module + importuri

…

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Definirea de clase(perspectiva paradigmei obiectuale)

“simple sugar over the prototype-based OO pattern”

https://ponyfoo.com/articles/es6-classes-in-depth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

const DIST = 7, MAXPOWER = 33;class Robot {

constructor (distance = 0) {this.power = 0;this.distance = distance;

}move () {if (this.power < 1) {

throw new RangeError('N-am energie');}this.power--;this.distance += DIST;

}addPower () {if (this.power >= MAXPOWER) {

throw new RangeError('Bateria e plina');}this.power++;

}}

un robot poate fi mutat, parcurgând o distanță

prestabilită și consumând o unitate energică

suplimentar, poate fi alimentat cu energie

în ES6 se pot declaraparametri cu valori implicite

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

const DIST = 7, MAXPOWER = 33;class Robot {

constructor (distance = 0) {this.power = 0;this.distance = distance;

}move () {if (this.power < 1) {

throw new RangeError('N-am energie');}this.power--;this.distance += DIST;

}addPower () {if (this.power >= MAXPOWER) {

throw new RangeError('Bateria e plină');}this.power++;

}}

// instanțiem un robot

// distanța ia valoarea implicită

let robot = new Robot();

console.log (robot.distance);

try {

robot.addPower();

robot.move();

robot.move();

} catch (e) {

console.error (e.message);

} finally {

console.log ('M-am deplasat cu '

+ robot.distance +

' metri, iar energia actuală este '

+ robot.power);

}

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

class R2D2 extends Robot {constructor (distance) {super(distance * 2);

}move () {super.move();this.power++; // R2D2 nu consumă energie ;)

}}

mai sunt permise:

extinderi de clasă via extendsacces – cu super – la membrii din clasa de bază

metode de tip get și setmetode statice specificate cu prefixul static (similar C++)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Noi declarații de variabile

const – valori constante vizibile la nivel de bloc

let – alternativă la var, cu vizibilitate la nivel de bloc(mărginirea domeniului de vizibilitate – scope)

ponyfoo.com/articles/es6-let-const-and-temporal-dead-zone-in-depth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

function TestareLet() {

let x = 33;

if (true) {

// variabilă diferită!

let x = 74;

console.log(x); // 74

}


}

function TestareVar() {

var x = 33;

if (true) {

// aceeași variabilă

var x = 74;


}


}

developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Parametrii unei funcții pot fi multipli (rest parameters)

function concateneaza (...cuvinte) {

return cuvinte.join(' ');

}

var sir = concateneaza ('ES6', 'e', 'super!');

console.log(sir); // "ES6 e super!"

https://ponyfoo.com/articles/es6-spread-and-butter-in-depth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Destructurare în ES6 (destructuring)

“binds properties to as many variables as you need and it works with both arrays and objects”

https://ponyfoo.com/articles/es6-destructuring-in-depth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// selectarea elementelor dorite dintr-o listă (tablou)

let [ primul, , ultimul ] = [ 'Radu', 'Ana', Date.now() ];

console.log (primul); // "Radu"

console.log (ultimul); // data curentă în secunde

// oferă coordonatele geografice pentru Iași

function furnizeazaCoordonate () {

return { lat: 47.16667, long: 27.6 };

}

var { lat, long } = furnizeazaCoordonate ();

console.log (lat);

// furnizează un număr natural generat aleatoriu dintr-un anumit interval

function aleator ({ min = 1, max = 300 } = { }) {

return Math.floor(Math.random() * (max - min)) + min;

}

console.log (aleator());

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Machete privind substituția de valorile de bază (template literals)

machetă = orice șir de caractere delimitat de simbolul `(inclusiv specificat pe mai multe linii de text – multiline)

o machetă poate include expresii JavaScript specificate cu ${…} ce vor fi înlocuite cu valoarea evaluată

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

var article = { // un obiect JS oferind date despre un articoltitle: 'Un exemplu de machete ES6',teaser: 'facilitati oferite de machete de substituție de valori',body: 'Generare HTML cu noul JavaScript',tags: [ 'ES6', 'JavaScript', 'HTML5' ]

};var { title, teaser, body, tags } = article; // destructurarevar html = `

${title}

Articol referitor la ${teaser}

${body}

${tags.map(tag => `${tag}`).join('\n ')}

`;

console.log (html);

fiecărui element din tabloul tags îi corespunde o machetă a cărei valoare va fi un marcaj HTML

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

alte detalii sunt furnizate dehttps://ponyfoo.com/articles/es6-template-strings-in-depth

http://es6-features.org/#StringInterpolation

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Arrow functions

declarare succintă a unei funcții anonimeparametri => valoareOferită

nu posedă propriile valori pentru this, arguments, super

https://ponyfoo.com/articles/es6-arrow-functions-in-depth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// funcție anonimă cu un singur argument de intrare

// se întoarce valoarea unei expresii JS

console.log ( [2, 3, 5].map (numar => numar * 7) ); // [14, 21, 35]

// în JavaScript clasic (ES5):

console.log ( [2, 3, 5].map (function (numar) {

return numar * 7;

}) );

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// definirea unei funcții recursive în ES6; aici, factorialul

let factorial = (numar) => {

return numar === 0 ? 1 : numar * factorial (numar - 1);

};

console.log ( factorial (5) ); // 120

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// prelucrarea facilă a tablourilor: filtrare, asociere de valori,…

var numere = [1, 7, 50, 74, 9, 85, 51, 12, 7, 15];

// suma tuturor valorilor: 311

var suma = numere.reduce ((a, b) => a + b);

// doar numerele impare: [1, 7, 9, 85, 51, 7, 15]

var impare = numere.filter (val => val % 2 === 1);

// valorile pătratelor

var patrate = numere.map (val => Math.pow(val, 2));

developer.mozilla.org/Web/JavaScript/Reference/Functions/Arrow_functions

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Iteratori

iterarea valorilor se poate realiza asupra oricărui obiect

generarea de secvențe de valori (finite ori infinite) ce se pot prelucra via noua construcție for…of

https://ponyfoo.com/articles/es6-iterators-in-depth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

secvența fiind infinită, trebuie să ieșim cu break

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Iteratori

remarcă:un singur element al secvenței poate fi accesat

la un moment dat (lasy in nature)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Generatori

generator = tip special de iterator ce returnează gobiecte de tip generator care ulterior pot fi iterate cu

Array.from(g), […g] sau for valoare of g

https://ponyfoo.com/articles/es6-generators-in-depth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Generatori

oprirea temporară și apoi continuarea execuției unui generator se realizează via yield

https://developer.mozilla.org/Web/JavaScript/Reference/Operators/yield

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// declararea unui generator de identificatori numerici

function* idMaker() {

var index = 0;

while (index < 3)

yield index++;

}

var gen = idMaker();

console.log (gen.next().value); // 0



console.log (gen.next().value); // undefined

aspecte (mai) avansate la http://exploringjs.com/es6/ch_generators.html

https://www.promisejs.org/generators/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Promises

a promise represents the eventual result of an asynchronous operation

represents an operation that hasn’t completed yet, but is expected in the future

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Promises

fiecare obiect de tip Promisese poate afla în una dintre stările:

pending – stare inițială, operația nu s-a terminat sau a fost anulată

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Promises


fulfilled – operația s-a terminat cu succes, oferind un rezultat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Promises


rejected – operația a eșuat, oferindu-se un motiv (eroarea survenită)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// implementarea unui obiect Promise

var promise = new Promise (function(resolve, reject) {

// realizarea unor operații (eventual, în mod asincron)

// apoi, în funcție de ceea ce s-a întâmplat…

if (/* totul e în regulă */) {

resolve ("A mers!");

}

else {

reject (Error("S-a stricat"));

}

});

specificația pentru implementarea standardizată: https://promisesaplus.com/

biblioteci JS: https://promisesaplus.com/implementations

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// implementarea unui obiect Promise

var promise = new Promise (function(resolve, reject) {

// realizarea unor operații (eventual, în mod asincron)

// apoi, în funcție de ceea ce s-a întâmplat…

if (/* totul e în regulă */) {

resolve ("A mers!");

}

else {

reject (Error("S-a stricat"));

}

});// utilizarea ulterioară

promise.then (function(result) {

console.log (result); // "A mers!"

}, function(err) {

console.log (err); // Error: "S-a stricat"

});

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

metodele then() și catch() pot fi înlănțuite

un tutorial, oferind exemple pragmatice:www.html5rocks.com/en/tutorials/es6/promises/

a se studia și github.com/wbinnssmith/awesome-promises

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Noi tipuri de date ES6

SymbolMapSet

WeakMapWeakSet

ProxyReflection

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Extinderea unor tipuri existente

Number – exprimarea de valori binare și octale

String – suport mai bun pentru Unicode

RegExp – operatorul y (sticky matching)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Module

// --json.js--

function preiaJSON (url, callback) {

let xhr = new XMLHttpRequest();

xhr.onload = function () {

callback (this.responseText)

};

xhr.open ("GET", url, true);

xhr.send ();

}

export function oferaContinut (url, callback) {

preiaJSON (url, date => callback(JSON.parse(date)));

}

specificarea unui modul ce oferă (exportă) funcționalități

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Module

// --json.js--

function preiaJSON (url, callback) {

let xhr = new XMLHttpRequest();

xhr.onload = function () {

callback (this.responseText)

};

xhr.open ("GET", url, true);

xhr.send ();

}

export function oferaContinut (url, callback) {

preiaJSON (url, date => callback(JSON.parse(date)));

}

aspecte avansate: exploringjs.com/es6/ch_modules.html

ponyfoo.com/articles/es6-modules-in-depth

// --main.js-- (utilizarea modulului)

import { oferaContinut } from "json.js";

oferaContinut ("http://undeva.info ",

date => { proceseaza (date); });

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Instrumente ES6

în principal, convertire ES6ES5

Babel – https://babeljs.io/Traceur – https://github.com/google/traceur-compiler

de consultat https://github.com/addyosmani/es6-tools

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


specificație standardizată – ediția 7, iunie 2016

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/ECMAScript 2016 (ES7)

operatorul ** (exponent)let valoareLaCub = val => val ** 3; // Math.pow (val, 3);

tablou cu elemente create dinamic (array comprehensions)[ for (x of [ 2, 3, 9, 4, 7 ]) if ( x % 2 === 0) x ]; // valori pare: [ 2, 4 ]

funcții/generatori de tip asincron(async functions/generators)

http://thecodebarbarian.com/common-async-await-design-patterns-in-node.js.html

…și altele

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Alte resurse – disponibile liber:

Nicholas C. Zakas, Understanding ECMAScript 6 (2015)https://leanpub.com/understandinges6/read

Axel Rauschmayer, Exploring ES6 (2017)http://exploringjs.com/es6/index.html

Wolfram Kriesing, ES6 Katas (2016)http://es6katas.org/

Axel Rauschmayer, Exploring ES2016 & ES2017 (2017)http://exploringjs.com/es2016-es2017/index.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

N-am putea dezvolta în JavaScriptaplicații Web la nivel de server?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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 buildscalable network applications.”

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

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

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 6.10 LTS – Long Term Support (februarie 2017)versiune stabilă actuală pentru uz în producție

Node.js 7.7.3 – varianta cea mai recentă (14 martie 2017)https://github.com/nodejs/node

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js

Permite dezvoltarea de aplicații Web la nivel de server în limbajul JavaScript

recurge la V8 – procesor (interpretor) JavaScript creat de Google, implementat în C++ și disponibil liber

https://developers.google.com/v8/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Oferă suport pentru cele mai importanteprotocoale Web și Internet

HTTP (HyperText Transfer Protocol)DNS (Domain Name System)

TLS (Transport Layer Security)functionalități de nivel scăzut (socket-uri TCP)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: caracterizareUzual, o aplicație Web realizează un număr mare de operații – în acest caz, asincrone – de intrare/ieșire

G. Yeh (2014): www.slideshare.net/garyyeh165/basic-understanding-and-implement-of-nodejs

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Operațiile de intrare/ieșire sunt asincrone

fiecare cerere (operație) adresată aplicației– e.g., acces la disc, la rețea, la alt proces – poate aveaatașată o funcție de tratare a unui eveniment specific

evented I/O

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

cod JS executat declient (browser Web)

cod JS rulat pe parteade server (node.js)

așteaptă și trateazăevenimente de

interacțiune(onclick, onmouseover,

onkeypressed,…)

procesarebazată pe

evenimenteevented/

event-based

așteaptă și trateazăcereri (evenimente)

provenite de la client(i)

programul trebuie să fie responsiv atunci când

așteaptă încărcareadatelor de pe rețea

(e.g., JSON, XML, imagini, video) via Ajax/Comet

ori socket-uri Web

asincronism(e.g., operatiineblocante)

programul trebuie să fie responsiv atunci când

așteaptă încărcareadatelor locale/externe(preluate din baze de

date, fișiere, servicii Web, API-uri,…)

adaptare după Ben Sheldon (2012): http://www.island94.org/?p=3066

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


O aplicație node.js rulează într-un singur proces

event loop ≡ “an entity that handles & processes externalevents and converts them into callback invocations”

codul JavaScript nu este executat paralel, dar tratează în mod asincron diverse evenimente I/O

http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: caracterizareAplicația Node.js „reacționează” la evenimente

context mai larg: reactive programming – http://reactivex.io/

G. Yeh (2014): www.slideshare.net/garyyeh165/basic-understanding-and-implement-of-nodejs

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



deosebire esențială față de serverele de aplicații Webtradiționale ce recurg la servere multi-process/threaded

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



server tipic server node.js

adaptare după Ben Sheldon (2012): http://www.island94.org/?p=3066

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

HTTP: server Web

http://strongloop.com/strongblog/node-js-is-faster-than-java/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Mediul node.js e disponibil gratuit – open source –pentru platformele UNIX/Linux, Windows, MacOS

https://nodejs.org/en/download/


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

funcționalități suplimentareoferite de module administrate cu npm – https://npmjs.org/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Oferă un mediu de execuție în linia de comandă, pe baza unor biblioteci C++ și a procesorului V8

node program.js

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: exemplu

Un prim program care emite mesaje de salut

// salutari.js: un program (de sine-stătător) care emite un salut

console.log ('Salutari banale din Node.js');

invocarea uneimetode oferită de

un obiect predefinit

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: exemplu

Un prim program care emite mesaje de salut

// salutari.js: un program (de sine-stătător) care emite un salut

console.log ('Salutari banale din Node.js');

> node salutari.js

Salutari banale din Node.js

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

/* Un program JavaScript ilustrând comportamentul asincron

al operațiilor I/O implementate de Node.js */

var fs = require ('fs'); // acces la sistemul de fișiere

fs.readFile ('salutari.txt', 'utf-8', function (eroare, date) {

if (eroare)

throw eroare; // excepție de citire

console.log (date);

})

console.log ('Gata!');

execuția (cod interpretat) pornește de la prima linie a programului JavaScript

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/





if (eroare)


console.log (date);

})


începe execuția unei operații asincrone(aici, citirea conținutului unui fișier text)

care returnează imediat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/





if (eroare)


console.log (date);

})


execuția continuă cu ultima linie de program

> node asincronism.js

Gata!

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/





if (eroare)


console.log (date);

})


…după care sunt afișate datele preluate din fișier

> node asincronism.js

Gata!

Un prim salut...

Acesta este al doilea salut.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// Un program JavaScript care salută toți posibilii săi clienți Web

var http = require ('http'); // folosim 'http', un modul Node predefinit

http.createServer ( // creăm un server Web

// funcție anonimă ce tratează o cerere și trimite un răspuns

function (cerere, raspuns) {

// afișăm la consola serverului mesaje de diagnostic

console.log ('Am primit o cerere...');

// stabilim valori pentru diverse câmpuri din antetul mesajului HTTP

raspuns.writeHead (200, { 'Content-Type': 'text/html' });

// emitem răspunsul propriu-zis conform tipului MIME (aici, cod HTML)

raspuns.end ('Salutari…');

}

// serverul ascultă cereri la portul 8080 al mașinii locale

).listen (8080, "127.0.0.1");

console.log ('Serverul creat asteapta cereri la http://127.0.0.1:8080/');

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

pe partea de server – așteptare de cereri> node salutari-web.js

Serverul creat asteapta cereri la http://127.0.0.1:8080/

Am primit o cerere...


programul JavaScript creat funcționează ca un server Webpentru fiecare cerere emisă de un posibil client (browser,aplicație desktop etc.) conform modelului client/server

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

pe partea de server – așteptare de cereri> node salutari-web.js

Serverul creat asteapta cereri la http://127.0.0.1:8080/



la client – recepționarea răspunsului conform cererii GETemise de un program desktop și de un navigator Web

> node client-salutari.js

Am primit raspuns de la server -- cod HTTP: 200

Continut receptionat:

Salutari din Node.js

programul JavaScript creat funcționează ca un server Webpentru fiecare cerere emisă de un posibil client (browser,aplicație desktop etc.) conform modelului client/server

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// Un program JS care implementează un client pentru serviciul de salut

var http = require ('http');

http.get ('http://127.0.0.1:8080/', // emite o cerere HTTP

function (raspuns) {

console.log ('Am primit raspuns de la server -- cod HTTP: '

+ raspuns.statusCode); // statusCode: 200, 404,…

})

// tratăm diverse evenimente via funcții (eventual, anonime) de tip callback

.on ('error', // eroare

function (e) { console.log ('Eroare: ' + e.message); })

.on ('response', // receptare răspuns de la server

function (raspuns) { // există date de procesat

raspuns.on ('data', function (date) {

console.log ('Continut receptionat: ' + date);

});

}

);

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module

Funcția require () specifică utilizarea unui modul Node.js

module predefinite (built-in):

privitoare la tehnologii Web – http, https, url, querystringreferitoare la fișiere – fs, path

vizând rețeaua – net, dns, dgram, tls,…resurse privind sistemul de operare – os, child_process

alte aspecte de interes – buffer, console, util, crypto

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module

documentația online aferentă

nodejs.org/en/docs/

devdocs.io/node/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module – http

Dezvoltarea de aplicații Web via modulul http

funcționalități HTTP de bază

crearea unui server Web: createServer()

realizarea de cereri HTTP: request() get()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



servire de cereri HTTP – clasa http.Server

metode uzuale: listen() setTimeout() close()

evenimente ce pot fi tratate: request connect close clientError etc.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



răspuns emis de server – clasa http.ServerResponse

metode uzuale: writeHead() getHeader() removeHeader() write() end() etc.

evenimente: close finish

proprietăți folositoare: statusCode headersSent

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



cerere emisă de client – clasa http.ClientRequest

metode uzuale: write() abort() end() setTimeout() setSocketKeepAlive()

evenimente ce pot fi tratate: response connect continue socket etc.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



mesaj vehiculat – clasa http.IncomingMessage

metode: setEncoding() setTimeout() pause() resume()

evenimente ce pot fi tratate: data end close

proprietăți de interes: httpVersion headers method url statusCode socket

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module – url

Procesarea adreselor Web via modulul url

metode oferite: parse() format() resolve()

http://nodejs.org/api/url.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/var url = require ('url');

var adresaWeb = url.parse (

'http://undeva.info:8080/oferta/jucarii/produs/?nume=Tux&marime=17#descriere',

true // generează un obiect 'query' ce include câmpurile din querystring

);

console.log (adresaWeb);

if (adresaWeb['query'].marime > 13) {

console.log ('Jucaria e in regula.');

} else {

console.log ('Jucaria e stricata.');

}

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

> node url.js

{ protocol: 'http:',

slashes: true,

auth: null,

host: 'undeva.info:8080',

port: '8080',

hostname: 'undeva.info',

hash: '#descriere',

search: '?nume=Tux&marime=17',

query: { nume: 'Tux', marime: '17' },

pathname: '/oferta/jucarii/produs/',

path: '/oferta/jucarii/produs/?nume=Tux&marime=17',

href: 'http://undeva.info:8080/oferta/jucarii/produs/?nume=…'

}

Jucaria e in regula.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module – net

Crearea de aplicații Internet – modulul net

partea de server:

createServer()

+ clasa net.Server

metode: listen() close() address() getConnections()evenimente: listening connection close error

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



partea de client:

connect()

createConnection()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



acces la socket-uri – clasa net.Socket

metode: connect() write() setEncoding() destroy() end() etc.

evenimente: connect data end timeout drain error close

proprietăți utile: localAddress localPortremoteAddress remotePort bytesRead bytesWritten bufferSize

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module – fs

Acces la sistemul de fișiere via modulul fs

metode folosite uzual – comportament asincron:

open() read() write() close()

truncate() stat() chmod() rename() exists()

isFile() isDirectory() isSocket()

mkdir() rmdir() readdir()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module – fs

Acces la sistemul de fișiere via modulul fs

studiu de caz (Victor Porof, 2013 – absolvent FII): generare de liste de melodii via iTunes și Last.fm

(ilustrează și maniera de creare a modulelor proprii)

https://github.com/victorporof/plgen

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: fluxuri de date

Accesul la date poate fi realizatprin intermediul fluxurilor (streams)

abstractizează accesul la date stocate parțial(partially buffered data)

se emit evenimente ce pot fi tratate de codul aplicației

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



pot fi citite – stream.Readablepot fi scrise – stream.Writable

duplex (citite și scrise) – stream.Duplexrealizând o transformare a datelor – stream.Transform

detalii la https://nodejs.org/api/stream.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



fluxuri ce pot fi citite (readable streams)e.g., create de fs.createReadStream() http.ServerRequesthttp.ClientResponse net.Socket child.stdout process.stdin

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




emit evenimentele readable data end error

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




au asociate metodele pause() resume() destroy()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



fluxuri ce pot fi scrise (writeable streams)e.g., create de fs.createWriteStream() http.ServerResponse

http.ClientRequest net.Socket child.stdin process.stdout

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/





emit evenimentele drain error

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/





oferă metodele write() end() destroy()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// Program ce preia ceea ce tastează utilizatorul la intrarea standard

// și scrie într-un fișier – conform M. Takada (2012)

var fs = require ('fs');

var fisier = fs.createWriteStream ('./spion.txt');

// la apariția datelor, le scriem în fișier

process.stdin.on ('data', function (date) { fisier.write (date); } );

// tratăm evenimentul de terminare a fluxului

process.stdin.on ('end', function() { fisier.end (); } );

// "reactivăm" intrarea standard; implicit, e în starea 'paused'

process.stdin.resume ();

obiectul process e global – detalii la https://nodejs.org/api/process.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



exemple de fluxuri de tip duplex:socket-uri TCP create cu net.Socket()

privind arhivele create cu zlib – nodejs.org/api/zlib.htmldate criptate via crypto – nodejs.org/api/crypto.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: rulare temporizată

Se poate planifica execuția codului JavaScript

recurgerea la funcțiile globalesetTimeout ()

clearTimeout ()

setInterval ()

clearInterval ()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// creăm un server Web care trimite fiecărui client secvența valorilor unui contor

var server = http.createServer ().listen (8080, '127.0.0.1');

// stabilim un comportament la apariția evenimentului 'request' (cerere de la un client)

server.on ('request', function (cerere, raspuns) {

console.log ('Cerere de la clientul ' + cerere.headers['user-agent']);

raspuns.writeHead (200, { 'Content-Type': 'text/html' });

var contor = 0;

var interval = setInterval ( // generăm valori ale contorului conform intervalului de timp

function () {

raspuns.write ('

Contorul are valoarea ' + contor + '

');

console.log ('Contorul are valoarea ' + contor);

contor++;

if (contor >= 7) {

clearInterval (interval); // ștergem intervalul

raspuns.end (); // închidem fluxul de răspuns

console.log ('Am trimis raspuns clientului ' + cerere.headers['user-agent']);

}

}, 1000); // cod rulat la interval de 1000 milisecunde

});

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Cerere de la clientul … Mozilla/5.0 (Windows NT 10.0 …) … Firefox/52.0

Contorul are valoarea 0




Cerere de la clientul … Edge/14.14393






Am trimis raspuns clientului … Mozilla/5.0 (Windows NT 10.0 …) … Firefox/52.0






Am trimis raspuns clientului … Edge/14.14393

codul este rulatasincron

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Cerere de la clientul … Mozilla/5.0 (Windows NT 10.0 …) … Firefox/52.0





Cerere de la clientul … Edge/14.14393






Am trimis raspuns clientului … Mozilla/5.0 (Windows NT 10.0 …) … Firefox/52.0






Am trimis raspuns clientului … Edge/14.14393

browser-ul Web va aștepta ca întreaga secvență de valorisă fie trimisă de către serverde ce?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: evenimente

Emiterea (lansarea) și tratarea (prinderea)evenimentelor specificate de programator

se realizează via event.EventEmitter

clasă utilizată intern de multe biblioteci de bază

https://nodejs.org/api/events.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module externe


module disponibile on-line (instalate via utilitarul npm)

de studiat Understanding NPMhttps://unpm.nodesource.com/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module externe


instalare globală a unui modul: npm install modul –g listarea modulelor ce sunt instalate local: npm list

căutarea unui modul: npm search moduleliminarea unui modul: npm uninstall modulactualizarea unui modul: npm update modul

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module – acces la baze de date

Operații cu baze de date relaționale SQLite

recurgerea la modulul sql.js implementat în JavaScriptvia compilatorul emscripten

nu depinde de alte module

detalii la https://www.npmjs.com/package/sql.js

exemple demonstrative: http://kripken.github.io/sql.js/GUI/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module – studiu de caz

Dorim să realizăm un mini-robot care proceseazăconținutul diverselor resurse disponibile pe Web

rol de client pentru un server Web

prelucrează codul HTMLWeb scrappingmetode consacrate:

DOM (Document Object Model)SAX (Simple API for XML)

în cursurile viitoare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

var http = require ('http');

var qs = require ('querystring');

var dom = require ('xmldom').DOMParser;

// de exemplu, dorim să obținem reprezentarea corespunzătoare resursei

// de la http://www.google.ro/search?q=web+programming+node.js

var cerere = http.get ("http://www.google.ro/search?" +

qs.stringify ({ q: 'web programming node.js' }), function (raspuns) {

var rezultat = ''; // răspunsul poate sosi în fragmente de date

raspuns.on ('data', function (date) { // tratăm evenimentul privitor la

rezultat += date; // apariția datelor

});

// tratăm evenimentul de finalizare a transferului de date de la server

raspuns.on ('end', function() {

console.log (procesareHTML (rezultat));

});

});conectare la un server Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// realizează procesarea dorită (Web scrapping)function procesareHTML (document) {

var adrese = [ ]; // instanțiem un procesor DOMtry {var doc = new dom().parseFromString (document, "text/html");// preluăm toate elementele var noduri = doc.getElementsByTagName ('a');// obținem valoarea atributului 'href' (URL-ul)for (var i = 0; i < noduri.length; i++) {

// plasăm în tablou doar dacă e relativ și e prefixat de "/url?q="var uri = noduri[i].getAttribute ('href');if (!uri.match (/^http(s?)/gi) && uri.match (/^\/url\?q=/g))

adrese.push (uri);}

} catch (e) { console.log (e.message); }return (adrese);

} procesare document cu DOMParserhttps://developer.mozilla.org/DOMParser

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: module

lista modulelor Node.jsnodejsmodules.org/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

node.js: framework-uri web

Uzual, încurajează dezvoltarea de aplicații Webîn care interacțiunea cu utilizatorulse realizează într-o singură pagină

(SPA – Single-Page Applications)

real-time single-page Web apps

avansat tehnologii webbusaco/teach/courses/web/presentations/web05... · ga .ro / ~ co / adoptă...

Documents