Web05DezvoltareaAplicatiilorWeb Javascript Nodejs

Tehnologii Web
programare Web
JavaScript la nivel de server Node.js

(aspecte eseniale)
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/
avansat
Jan Amos Comenius
Cine a vzut vreodat o bijuterie frumos cizelat

de bijutier cu ajutorul ciocanului?
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
Inventat de Brendan Eich (1995)

denumit iniial Mocha, apoi LiveScript
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
referina de baz: https://developer.mozilla.org/JavaScript
ECMAScript
destinat s manipuleze, s automatizeze

i s integreze funcionalitile
oferite de un anumit sistem
Limbaj de tip script (interpretat)
nu necesit intrri/ieiri n mod implicit
Limbaj de tip script (interpretat)
imperativ
la C
Adopt diverse paradigme de programare
funcional
calculfuncii anonime, nchideri (closures),
pseudo-obiectual
via prototipuri
(obiectele motenesc alte obiecte, nu clase)
dinamic
variabilele i pot schimba tipul
pe parcursul rulrii programului
Cum putem executa programele JavaScript?
navigator Web
Mediu de execuie (host-environment)
permite rularea de aplicaii Web la nivelul unei platforme

(un sistem de operare)
navigator Web
permite rularea de aplicaii 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
navigator Web
injectarea de cod JavaScript
n documentele HTML via elementul <script>
navigator Web
injectarea de cod JavaScript
n documentele HTML via elementul <script>
cod extern referit printr-un URL
vs. cod inclus direct n pagina Web
independent de navigatorul Web

platforme de dezvoltare de aplicaii distribuite: Node.js
servere de baze de date e.g., Apache CouchDB
componente ale sistemului de operare
aplicaii de sine-stttoare e.g., Adobe Creative Suite
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
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
Number
reprezentare n dubl precizie
stocare pe 64 bii standardul IEEE 754
caracteristici: tipuri de date
developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Number
String
secvene de caractere Unicode
fiecare caracter ocup 16 bii (UTF-16)
developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/String
Boolean
expresii ce se pot evalua ca fiind true/false
developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Boolean
Object
aproape totul e considerat ca fiind obiect,
inclusiv funciile
Null
semnific nicio valoare
Undefined
are semnificaia nicio valoare asignat nc
Nu exist valori ntregi
Nu exist valori ntregi

convertirea unui ir n numr: parseInt ()
parseInt ("123") 123
parseInt ("11", 2) 3
indic baza
de numeraie
Valoarea NaN (not a number)

parseInt ("Salut") NaN
isNaN (NaN + 3) true
valori speciale:
Infinity
Infinity
irurile sunt obiecte

"Salut".length 5
un caracter reprezint un ir de lungime 1
Valorile 0, "", NaN, null, undefined

sunt interpretate ca fiind false
!!234 true
Variabilele se declar cu var

var marime;
var numeAnimal = "Tux";
variabilele declarate fr valori asignate,

se consider undefined
caracteristici: variabile
Dac nu se folosete var,

atunci variabila este considerat global
de evitat aa ceva!
caracteristici: variabile
Similari celor din C:

pentru numere: + * / %
testare: == === != !== ?:
asignare: += = *= /= %=
incrementare i decrementare: ++
logici: ! && ||
concatenare de iruri: "Java" + "Script" "JavaScript"
caracteristici: operatori
Conversia tipurilor se face din zbor (dinamic)

"3" + 4 + 5 345
3 + 4 + "5" 75
adugnd un ir vid la o expresie,

o convertim pe aceasta la string
Egalitatea valorilor se testeaz cu == i !=
1 == true true
a se folosi: 1 === true false
inhib conversia
tipurilor de date
Aflarea tipului unei expresii: operatorul typeof

typeof "Tux" string
operand
undefined
null
de tip Boolean
de tip Number
de tip String
Function
orice alte valori
rezultat
'undefined'
'object'
'boolean'
'number'
'string'
'function'
'object'
Testare: if else, switch

pentru 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
Ciclare: while, do while, for

do {
var nume = preiaNume ();
} while (nume != "");
for (var contor = 0; contor < 33; contor++) {
// de 33 de ori
}
Excepii: try catch finally

try {
// Linii "periculoase" ce pot cauza excepii
} catch (eroare) {
// Linii rulate la apariia unei/unor excepii
} finally {
// Linii care se vor executa la final
}
Excepii: try catch finally

try {
// Linii "periculoase" ce pot cauza excepii
} catch (eroare) {
// Linii rulate la apariia unei/unor excepii
} finally {
// Linii care se vor executa la final
}
emiterea unei excepii: throw

throw new Error ("O eroare de-a noastr...");
Perechi numevaloare
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
Perechi numevaloare
numele este desemnat de un ir de caractere
(i.e., expresie de tip String)
valoarea poate fi de orice tip,
inclusiv null sau undefined
Obiect colecie de proprieti,

avnd mai multe atribute
Obiect colecie de proprieti,

avnd mai multe atribute
proprietile pot conine alte obiecte,

valori primitive sau metode
Obiecte predefinite:
Global
Function
String
Boolean
Math
Object
Array
RegExp
Number
Date
de studiat developer.mozilla.org/JavaScript/Reference/Global_Objects
Obiecte fundamentale viznd gestionarea erorilor

Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError
Create prin intermediul operatorului new:

var ob = new Object();
var ob = { }; // echivalent cu linia anterioar
se prefer aceast sintax
Accesarea proprietilor operatorul .
ob.nume = "Tux";
var nume = ob.nume;
Accesarea proprietilor operatorul .
ob.nume = "Tux";
var nume = ob.nume;
echivalent cu:
ob["nume"] = "Tux";
var nume = ob["nume"];
Declarare + asignare:
var pinguin = {
nume: "Tux",
proprietati: {
culoare: "verde",
marime: 17
}
}
accesare:
pinguin.proprietati.marime 17
pinguin["proprietati"]["culoare"] verde
Iterarea proprietilor considerate chei:

var pinguin = { 'nume': 'Tux', 'marime': 17, 'oferta': true };
for (var proprietate in pinguin) {
console.log (proprietate + ' = ' + pinguin[proprietate]);
}
Tipuri speciale de obiecte
proprietile (cheile) sunt numere,

nu iruri de caractere
developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Array
caracteristici: tablouri
Se poate utiliza sintaxa privitoare la obiecte:

var animale = new Array ();
animale[0] = "pinguin";
animale[1] = "omida";
animale[2] = "pterodactil";
animale.length 3
notaie alternativ preferat:
var animale = [ "pinguin", "omida", "pterodactil" ];
Elementele pot aparine

unor tipuri de date eterogene
var animale = [ 33, "vierme", false, "gaga" ];
Tablourile pot avea guri (sparse arrays):

animale[33] = "om";
animale.length 34
typeof animale[13] undefined
Tablourile pot avea guri (sparse arrays):

animale[33] = "om";
animale.length 34
typeof animale[13] undefined
pentru a aduga elemente putem recurge la:
animale[animale.length] = altAnimal;
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));
}
adaptare dup John Kugelman (2009)
caracteristici: tablouri exemplu
rezultatul obinut n urma rulrii programului JavaScript

via aplicaia JS Bin
http://jsbin.com/
Definite via function

function transformaPixeliInPuncte (px) {
var puncte = px * 300;
return puncte;
}
caracteristici: funcii
developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Function
Dac nu este ntors nimic n mod explicit,

valoarea de retur se consider undefined
Parametrii de intrare pot lipsi,

fiind considerai undefined
Pot fi transmise mai multe argumente,

cele n surplus fiind ignorate
transformaPixeliInPuncte (10, 7) 3000
Funciile sunt tot obiecte

astfel, pot fi specificate funcii anonime
expresii
lambda
n acest sens, JavaScript este un limbaj funcional
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;
};
var media = function () { // calculul mediei a N numere

var suma = 0;
variabilele declarate
for (var iter = 0,
n funcie nu vor fi
lung = arguments.length; accesibile din exterior,
fiind nchise
iter < lung; iter++) {
suma += arguments[iter];
funcie closure
}
return suma / arguments.length;
};
console.log ( media (9, 10, 7, 8, 7) ) 8.2
precizai ce efect vor avea liniile de cod urmtoare:

console.log ( typeof (media) );
console.log ( media() );
variabila media este de tip function

apelul media() ntoarce valoarea NaN
pseudo-clase
(utilizarea
constructorilor)
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
Operatorul new creeaz un nou obiect vid i

apeleaz funcia specificat cu this setat pe acest obiect
aceste funcii se numesc constructori,

trebuie apelate via new
i, prin convenie, au numele scris cu liter mare
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
// instanierea unui obiect

var 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 ());
caracteristici: de la funcii la clase
trasarea pas-cu-pas a execuiei programului, cu inspectarea valorilor

variabilelor, via www.pythontutor.com/visualize.html#py=js
Metodele pot fi declarate i n exteriorul constructorului

function oferaNumeAnimal () {
return this.nume;
}
function Animal (nume, marime) {
this.nume = nume;
this.oferaNume = oferaNumeAnimal; // refer funcia de mai sus
}
Orice obiect deine trei tipuri de proprieti:

named data property
o proprietate avnd 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: proprieti
Fiecare proprietate are asociate atributele:

[[Value]] desemneaz valoarea curent a proprietii
[[Writable]] indic dac o proprietate
poate s-i modifice valoarea
[[Get]] i [[Set]] funcii opionale pentru a oferi/stabili
valoarea unei proprieti de tip accessor
[[Enumerable]] specific dac numele proprietii
va fi disponibil ntr-o bucl for-in
[[Configurable]] indic dac proprietatea
poate fi tears ori redefinit
[[Get]] [[Put]] [[CanPut]]

[[HasProperty]]
[[DefineOwnProperty]]
[[GetProperty]]
[[GetOwnProperty]]
[[Delete]]
[[Extensible]]
[[Construct]]
[[Call]]
[[Code]]
[[Scope]]
definete ierarhiilor de obiecte

pentru accesarea valorilor
manipularea proprietilor
indic obiectele ce pot fi extinse
asociate obiectelor executabile
(funcii)
desemneaz codul & contextul
unei obiect de tip funcie
proprieti interne importante (folosite de procesorul

ECMAScript, dar inaccesibile la nivel de program)
[[Prototype]]
// crearea unei proprieti simple stocnd date

// (writable, enumerable, configurabile)
obiect.numeProprietate = 33;
// crearea via API-ul intern a unei proprieti stocnd date

Object.defineProperty (obiect, "numeProprietate", {
value: 33, writable: true, enumerable: true, configurable: true }
)
proprietile interne ale obiectelor definite

http://www.objectplayground.com/
Deoarece orice obiect deine n mod implicit

proprietatea prototype,
structura unei clase poate fi extins ulterior
developer.mozilla.org/Web/JavaScript/Reference/Global_Objects/Object/prototype
caracteristici: prototipuri
Deoarece orice obiect deine n mod implicit

proprietatea prototype,
structura unei clase poate fi extins ulterior
un prototip e o proprietate oferind o legtur ascuns

ctre obiectul de care aparine
Dac se ncearc accesarea unui element inexistent

n cadrul unui obiect dat,
se va verifica lanul de prototipuri (prototype chain)
// 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;
};
// instaniem un obiect de tip Animal
function Animal (nume, marime) { // definiie iniial

this.nume = nume;
}
Pentru a cunoate tipul unui obiect

(pe baza constructorului i a ierarhiei de prototipuri)
se folosete operatorul instanceof
var marimi = [17, 20, 7, 14];

marimi instanceof Array
marimi instanceof Object
marimi instanceof String
true
true
false

tux instanceof Object
tux instanceof Array
true
false
caracteristici: extinderea claselor

Adugarea unei metode se realizeaz via prototype
Animal.prototype.oferaNumeMare = function () {
return this.nume.toUpperCase ();
};
tux.oferaNumeMare () "TUX"
Pot fi extinse i obiectele predefinite:

// adugm o metod obiectului String
String.prototype.inverseaza = function () {
var inv = '';
for (var iter = this.length - 1; iter >= 0; iter--) { // inversm irul
inv += this[iter];
}
return inv;
};
"Web".inverseaza () "beW"
Cel mai general prototype este cel al lui Object

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

tux.toString ()
[object Object]
Animal.prototype.toString = function () {
return '<animal>' + this.oferaNume () + '</animal>';
};
tux.toString ()
"<animal>Tux</animal>"
Atenie la pericole! e.g., comportamentul diferit

al construciei for (var proprietate in obiect)
ablon general:
ClasaDeBaza = function () { /* */ };
SubClasa = function () { /* */ };
SubClasa.prototype = new ClasaDeBaza ();
Deoarece o funcie reprezint un obiect, poate fi:

stocat ca valoare (asociat unei variabile)
pasat ca argument al unei alte funcii
ntoars de o funcie fiind argument pentru return
caracteristici
JavaScript ofer un singur spaiu de nume,

la nivel global
conflicte privind denumirea funciilor/variabilelor

specificate de programe diferite,
concepute de mai multi dezvoltatori
caracteristici: ncapsulare
Nu trebuie afectat spaiul de nume global,

pstrndu-se codul-surs la nivel privat
Codul poate fi complet ncapsulat

via funcii anonime
care pstreaz construciile la nivel privat
Declararea imbricat ca expresii de tip funcie

a funciilor anonime are denumirea closures
nchideri
https://developer.mozilla.org/en/JavaScript/Guide/Closures
caracteristici: closures
ablonul general:
// specificarea unei expresii de tip funcie
( function () {
// variabilele i funciile vor fi vizibile doar aici
// variabilele globale pot fi accesate
} ( ) );
caracteristici: closures
function faCeva (x, y) {

// ...
}
return {
// sunt publice doar
// funciile 'start' i 'faCeva'
'start': start,
'faCeva': faCeva
}
}) ();
cod.start (arg); // apelm 'start'

via closures, simulm metodele private
modularizarea codului (module pattern)
var cod = (function () {

var priv = 0; // variabil privat
function start (x) {
// ... poate accesa 'priv'
// i funcia 'faCeva'
}
function faAia (param) {
// ... invizibil din afar
}
var makeCounter = function () {

var contorPrivat = 0;
// un contor de valori (iniial, zero)
function changeBy (val) { // funcie privat
contorPrivat += val;
// ce modific valoarea contorului
}
return {
// funcii publice (expuse)
increment: function() {
changeBy (1);
},
decrement: function() {
changeBy (-1);
},
value: function() {
return contorPrivat;
}
};
};
console.log (contor1.value ()); /* 0 */

contor1.increment ();
contor1.increment ();
contor1.decrement ();
Totul n JavaScript este obiect chiar i funciile
de reinut!
Orice obiect este ntotdeauna mutabil

(poate fi alterat oricnd)
proprietile i metodele sunt disponibile

oriunde n program (public scope)
de reinut!
Nu exist vizibilitate la nivel de bloc de cod

(block scope),
ci doar la nivel global ori la nivel de funcie
de reinut!
Funciile ascund orice e definit n interiorul lor
de reinut!
Operatorul new creeaz obiecte aparinnd

clasei specificate de funcia constructor
de reinut!
Accesorul this este relativ la contextul execuiei,

nu al declarrii
Atenie la dependena
de mediul de execuie!
de reinut!
Proprietatea prototype are valori modificabile
de reinut!
JavaScript Object Notation
http://json.org/
json
Format compact pentru interschimb de date

n termeni de obiecte i literali ntre aplicaii
biblioteci de procesare i alte resurse de interes:

http://jsonauts.github.io/
json
procesare recurgnd la
obiectul predefinit JSON
// definim un ir de caractere ce specific diverse construcii 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 { // procesm 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 strict a limbajului: "use strict";

verificare static a codului: JSLint, JSHint, ESLint
instrumente
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 dezvoltrii aplicaiilor JavaScript

http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html#week10
instrumente
www.codefellows.org/blog/a-list-of-foundational-javascript-tools
noua specificaie standardizat (ediia VI, iunie 2015)
http://www.ecma-international.org/ecma-262/6.0/
lista facilitilor:
https://github.com/lukehoban/es6features
http://es6-features.org/
instrumente ES6: https://github.com/addyosmani/es6-tools
ECMAScript 2015 (ES6)
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 funciilor anonime (arrow functions)
iteratori i generatori
notificri privind rezultatul oferit de o funcie (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
N-am putea dezvolta n JavaScript

aplicaii Web la nivel de server?
node.js: caracterizare
Node.js is a JavaScript runtime built on Chromes
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.
ruleaz pe maini respectnd 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 crei codsurs 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 producie
Node.js 5.8.0 caracter experimental, n dezvoltare

https://nodejs.org/en/blog/community/node-v5/
Ryan Dahl concepe Node.js (2009) http://nodejs.org/
Permite dezvoltarea de aplicaii Web

la nivel de server n limbajul JavaScript
recurge la V8 procesor (interpretor) JavaScript

creat de Google i disponibil liber
https://developers.google.com/v8/
node.js
Ofer suport pentru cele mai importante

protocoale Web i Internet
HTTP (HyperText Transfer Protocol)
DNS (Domain Name System)
TLS (Transport Layer Security)
functionaliti de nivel sczut (socket-uri TCP)
G. Yeh (2014): www.slideshare.net/garyyeh165/basic-understanding-and-implement-of-nodejs
node.js:
Uzual, o aplicaie
Web caracterizare
realizeaz un numr mare de
operaii n acest caz, asincrone de intrare/ieire
Operaiile de intrare/ieire sunt asincrone
fiecare cerere (operaie) adresat aplicaiei

e.g., acces la disc, la reea, la alt proces poate avea
ataat o funcie de tratare a unui eveniment specific
evented I/O
ateapt i trateaz
evenimente de
interaciune
(onclick, onmouseover,
onkeypressed,)
cod JS rulat pe partea

de server (node.js)
procesare
bazat pe
evenimente
evented/
event-based
cod JS executat de
client (browser Web)
ateapt i trateaz
cereri (evenimente)
provenite de la client(i)
programul trebuie s fie

programul trebuie s fie
responsiv atunci cnd
responsiv atunci cnd
ateapt ncrcarea
ateapt ncrcarea
asincronism
datelor de pe reea
datelor locale/externe
(e.g., operatii
(e.g., JSON, XML, imagini,
(preluate din baze de
neblocante)
video) via Ajax/Comet
date, fiiere,
ori socket-uri Web
servicii Web, API-uri,)
adaptare dup Ben Sheldon (2012): http://www.island94.org/?p=3066
O aplicaie node.js ruleaz ntr-un singur proces

event loop an entity that handles & processes external
events 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/
Aplicaia Node.js reacioneaz la evenimente

node.js:
context mai larg:
reactive caracterizare
programming http://reactivex.io/
G. Yeh (2014): www.slideshare.net/garyyeh165/basic-understanding-and-implement-of-nodejs
deosebire esenial fa de serverele de aplicaii Web

tradiionale ce recurg la servere multi-process/threaded
server tipic
server node.js
adaptare dup Ben Sheldon (2012): http://www.island94.org/?p=3066
http://strongloop.com/strongblog/node-js-is-faster-than-java/
HTTP: server Web
Mediul node.js e disponibil gratuit open source

pentru platformele UNIX/Linux, Windows, Mac OS X
http://nodejs.org/download/
funcionaliti suplimentare
oferite de module administrate cu npm https://npmjs.org/
Ofer un mediu de execuie n linia de comand,

pe baza unor biblioteci C++ i a procesorului V8
node program.js
Un prim program care emite mesaje de salut

// salutari.js: un program (de sine-stttor) care emite un salut
console.log ('Salutari banale din Node.js');
invocarea unei
metode oferit de
un obiect predefinit
node.js: exemplu
Un prim program care emite mesaje de salut

// salutari.js: un program (de sine-stttor) care emite un salut
console.log ('Salutari banale din Node.js');
> node salutari.js
Salutari banale din Node.js
node.js: exemplu
fs.readFile ('salutari.txt', 'utf-8', function (eroare, date) {

if (eroare)
throw eroare;
// excepie de citire
console.log (date);
})
console.log ('Gata!');
execuia (cod interpretat) pornete

de la prima linie a programului JavaScript
/* Un program JavaScript ilustrnd comportamentul asincron

al operaiilor I/O implementate de Node.js */
var fs = require ('fs'); // acces la sistemul de fiiere

if (eroare)
throw eroare;
console.log (date);
})
ncepe execuia unei operaii asincrone

(aici, citirea coninutului unui fiier text)
care returneaz imediat


if (eroare)
throw eroare;
console.log (date);
})
execuia continu cu ultima linie de program

> node asincronism.js
Gata!


if (eroare)
throw eroare;
console.log (date);
})
dup care sunt afiate datele preluate din fiier

> node asincronism.js
Gata!
Un prim salut...
Acesta este al doilea salut.

http.createServer (
// crem un server Web
// funcie anonim ce trateaz o cerere i trimite un rspuns
function (cerere, raspuns) {
// afim la consola serverului mesaje de diagnostic
console.log ('Am primit o cerere...');
// stabilim valori pentru diverse cmpuri din antetul mesajului HTTP
raspuns.writeHead (200, { 'Content-Type': 'text/html' });
// emitem rspunsul propriu-zis conform tipului MIME (aici, cod HTML)
raspuns.end ('<html><body><h1>Salutari</h1></body></html>');
}
// serverul ascult cereri la portul 8080 al mainii locale
).listen (8080, "127.0.0.1");
console.log ('Serverul creat asteapta cereri la http://127.0.0.1:8080/');
// Un program JavaScript care salut toi posibilii si clieni Web

var http = require ('http');
// folosim 'http', un modul Node predefinit
pe partea de server ateptare de cereri

> node salutari-web.js
Serverul creat asteapta cereri la http://127.0.0.1:8080/
Am primit o cerere...
programul JavaScript creat funcioneaz ca un server Web

pentru fiecare cerere emis de un posibil client (browser,
aplicaie desktop etc.) conform modelului client/server
pe partea de server ateptare de cereri

> node salutari-web.js
Serverul creat asteapta cereri la http://127.0.0.1:8080/
programul JavaScript creat funcioneaz ca un server Web

pentru fiecare cerere emis de un posibil client (browser,
aplicaie desktop etc.) conform modelului client/server
la client recepionarea rspunsului conform cererii GET

emise de un program desktop i de un navigator Web
> node client-salutari.js
Am primit raspuns de la server -- cod HTTP: 200
Continut receptionat: <html><body>
<h1>Salutari din Node.js</h1></body></html>
// Un program JS care implementeaz un client pentru serviciul de salut

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,
})
// tratm diverse evenimente via funcii (eventual, anonime) de tip callback
.on ('error',
// eroare
function (e) { console.log ('Eroare: ' + e.message); })
.on ('response',
// receptare rspuns de la server
function (raspuns) {
// exist date de procesat
raspuns.on ('data', function (date) {
console.log ('Continut receptionat: ' + date);
});
}
);
Funcia require () specific utilizarea unui modul Node.js

module predefinite (built-in):
privitoare la tehnologii Web http, https, url, querystring

referitoare la fiiere fs, path
viznd reeaua net, dns, dgram, tls,
resurse privind sistemul de operare os, child_process
alte aspecte de interes buffer, console, util, crypto
node.js: module
documentaia online aferent

node.js: module
Dezvoltarea de aplicaii Web via modulul http

funcionaliti HTTP de baz
crearea unui server Web: createServer()
realizarea de cereri HTTP: request() get()
node.js: module http

servire de cereri HTTP clasa http.Server
metode uzuale:
listen() setTimeout() close()
evenimente ce pot fi tratate:
request connect close clientError etc.
rspuns emis de server clasa http.ServerResponse

metode uzuale:
writeHead() getHeader() removeHeader() write() end() etc.
evenimente: close finish
proprieti folositoare: statusCode headersSent

cerere emis de client clasa http.ClientRequest
metode uzuale:
write() abort() end() setTimeout() setSocketKeepAlive()
evenimente ce pot fi tratate:
response connect continue socket etc.

mesaj vehiculat clasa http.IncomingMessage
metode: setEncoding() setTimeout() pause() resume()
evenimente ce pot fi tratate: data end close
proprieti de interes:
httpVersion headers method url statusCode socket
Procesarea adreselor Web via modulul url

metode oferite:
parse() format() resolve()
http://nodejs.org/api/url.html
node.js: module url
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 cmpurile din querystring
);
console.log (adresaWeb);
if (adresaWeb['query'].marime > 13) {
console.log ('Jucaria e in regula.');
} else {
console.log ('Jucaria e stricata.');
}
> 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.
Crearea de aplicaii Internet modulul net

partea de server:
createServer()
+
clasa net.Server
metode: listen() close() address() getConnections()
evenimente: listening connection close error
node.js: module net

partea de client:
connect()
createConnection()
node.js: module net

acces la socket-uri clasa net.Socket
metode: connect() write() setEncoding() destroy() end() etc.
evenimente: connect data end timeout drain error close
node.js: module net
proprieti utile: localAddress localPort

remoteAddress remotePort bytesRead bytesWritten bufferSize
Acces la sistemul de fiiere via modulul fs

metode folosite uzual comportament asincron:
open() read() write() close()
truncate() stat() chmod() rename() exists()
isFile() isDirectory() isSocket()
mkdir() rmdir() readdir()
node.js: module fs
Acces la sistemul de fiiere 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
node.js: module fs
Accesul la date poate fi realizat

prin intermediul fluxurilor (streams)
abstractizeaz accesul la date stocate parial
(partially buffered data)
se emit evenimente ce pot fi tratate de codul aplicaiei
node.js: fluxuri de date

pot fi citite stream.Readable
pot fi scrise stream.Writable
duplex (citite i scrise) stream.Duplex
realiznd o transformare a datelor stream.Transform
detalii la https://nodejs.org/api/stream.html

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

emit evenimentele readable data end error

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

fluxuri ce pot fi scrise (writeable streams)
e.g., create de fs.createWriteStream() http.ServerResponse
http.ClientRequest net.Socket child.stdin process.stdout

emit evenimentele drain error

ofer metodele write() end() destroy()
var fisier = fs.createWriteStream ('./spion.txt');

// la apariia datelor, le scriem n fiier
process.stdin.on ('data', function (date) { fisier.write (date); } );
// tratm evenimentul de terminare a fluxului
process.stdin.on ('end', function() { fisier.end (); } );
// "reactivm" intrarea standard; implicit, e n starea 'paused'

process.stdin.resume ();
// Program ce preia ceea ce tasteaz utilizatorul la intrarea standard

// i scrie ntr-un fiier conform M. Takada (2012)
var fs = require ('fs');
obiectul process e global detalii la https://nodejs.org/api/process.html

exemple de fluxuri de tip duplex:
socket-uri TCP create cu net.Socket()
privind arhivele create cu zlib nodejs.org/api/zlib.html
date criptate via crypto nodejs.org/api/crypto.html
Se poate planifica execuia codului JavaScript
recurgerea la funciile globale

setTimeout ()
clearTimeout ()
setInterval ()
clearInterval ()
node.js: rulare temporizat
// stabilim un comportament la apariia 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 ( // generm valori ale contorului conform intervalului de timp
function () {
raspuns.write ('<p>Contorul are valoarea ' + contor + '</p>');
console.log ('Contorul are valoarea ' + contor);
contor++;
if (contor >= 7) {
clearInterval (interval);
// tergem intervalul
raspuns.end ();
// nchidem fluxul de rspuns
console.log ('Am trimis raspuns clientului ' + cerere.headers['user-agent']);
}
}, 1000);
// cod rulat la interval de 1000 milisecunde
});
// crem un server Web care trimite fiecrui client secvena valorilor unui contor
var server = http.createServer ().listen (8080, '127.0.0.1');
Cerere de la clientul Gecko/20100101 Firefox/45.0

Contorul are valoarea 0
Cerere de la clientul Windows NT 6.3; WOW64; Trident/7.0
codul este rulat
asincron
Am trimis raspuns clientului Gecko/20100101 Firefox/45.0
Am trimis raspuns clientului Windows NT 6.3; WOW64; Trident/7.0
browser-ul va atepta ca ntreaga secven de valori

s fie trimis de ctre server
de ce?
Cerere de la clientul Gecko/20100101 Firefox/45.0

Cerere de la clientul Windows NT 6.3; WOW64; Trident/7.0
Am trimis raspuns clientului Gecko/20100101 Firefox/45.0
Am trimis raspuns clientului Windows NT 6.3; WOW64; Trident/7.0
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
node.js: evenimente

module disponibile on-line (instalate via utilitarul npm)
de studiat Understanding NPM

https://unpm.nodesource.com/
node.js: module externe

instalare global a unui modul: npm install modul g
listarea modulelor ce sunt instalate local: npm list
cutarea unui modul: npm search modul
eliminarea unui modul: npm uninstall modul
actualizarea unui modul: npm update modul
node.js: module externe
Exemplificare:
utilizarea modulului node-sqlite-purejs
pentru operaii cu baze de date relaionale SQLite
nu depinde de alte module
detalii la https://www.npmjs.com/package/node-sqlite-purejs
node.js: module node-sqlite-purejs
var sql = require ('node-sqlite-purejs');
var nume = [ 'Tuxy', 'Pingou', 'Ux', 'Ping', 'Ingu', // nume fictive de pinguini
'Nes', 'Xut', 'Nipu', 'Guin', 'Esc' ];
// operaii SQL uzuale: creare tabel, inserare date, interogare
sql.open ('./pinguini.sqlite', {}, function (eroare, bd) {
bd.exec ('CREATE TABLE tucsi (id integer, nume text, varsta integer)');
for (var id = 0; id < 10; id++) { // inserm date (vrsta e generat aleatoriu)
bd.exec ('INSERT INTO tucsi VALUES (' + id + ', "'
+ nume[id] + '", ' + Math.round (Math.random () * 60) + ');');
};
// prelum pinguinii aduli

bd.exec ("SELECT * FROM tucsi WHERE varsta >= 18 ORDER BY nume;",
function (eroare, rezultate) { console.log (rezultate); }
);
}
);
Dorim s realizm un mini-robot care proceseaz

coninutul diverselor resurse disponibile pe Web
rol de client pentru un server Web
prelucreaz codul HTMLWeb scrapping

metode consacrate:
DOM (Document Object Model)
SAX (Simple API for XML)
n cursurile
viitoare
node.js: module studiu de caz
// de exemplu, dorim s obinem reprezentarea corespunztoare 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 = ''; // rspunsul poate sosi n fragmente de date
raspuns.on ('data', function (date) { // tratm evenimentul privitor la
rezultat += date;
// apariia datelor
});
// tratm evenimentul de finalizare a transferului de date de la server
raspuns.on ('end', function() {
console.log (procesareHTML (rezultat));
});
});
conectare la un server Web

var qs = require ('querystring');
var dom = require ('xmldom').DOMParser;
https://developer.mozilla.org/DOMParser
// realizeaz procesarea dorit (Web scrapping)

function procesareHTML (document) {
var adrese = [ ];
// instaniem un procesor DOM
try {
var doc = new dom().parseFromString (document, "text/html");
// prelum toate elementele <a>
var noduri = doc.getElementsByTagName ('a');
// obinem valoarea atributului 'href' (URL-ul)
for (var i = 0; i < noduri.length; i++) {
// plasm 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 DOMParser
}
node.js: module
lista modulelor Node.js

nodejsmodules.org/
Uzual, ncurajeaz dezvoltarea de aplicaii Web

n care interaciunea cu utilizatorul
se realizeaz ntr-o singur pagin
(SPA Single-Page Applications)
real-time single-page Web apps
node.js: framework-uri web
Alte faciliti notabile:
node.js: framework-uri web exemple
MVC (Model-View-Controller) i variantele

transfer de date n timp-real e.g., cu Socket.IO
servicii Web paradigma REST
suport pentru baze de date NoSQL
machete de prezentare a coninutului (templates)
http://nodeframework.com/
Derby
Express
Flatiron
Geddy
Locomotive
Meteor
Mojito
SocketStream
TowerJS
node.js: framework-uri web exemple
Framework minimalist
ce ncurajeaz dezvoltarea de aplicaii Web
tradiionale reprezentri multiple via hipermedia
bazate pe un unic punct de acces: SPA (Single Page App)
hibride (Web + aplicaii native)
http://expressjs.com/
node.js: framework-uri web express
diverse configurri ale aplicaiei

specificarea modelelor de date
module Node.js adiionale
coninut static destinat clientului

(e.g., foi de stiluri CSS, biblioteci JS
procesate de browser, imagini,)
rute viznd deservirea cererilor pe
baza URL-urilor solicitate de client
specificarea interfeei (view-ul)
via machete de vizualizare descrise
cu JADE: http://jade-lang.com/
eafodajul unei aplicaii Web bazate pe Express
app.js
package.json
bin
data
node_modules
body-parser
cookie-parser
debug
express
lib
jade
morgan
public
images
javascripts
stylesheets
style.css
routes
index.js
users.js
views
error.jade
index.jade
layout.jade
Node.js 4+ ofer suport pentru ECMAScript 2015 (ES6)

faciliti deja incluse:
declararea variabilelor cu let i const
specificarea claselor
colecii de date (Map, WeakMap, Set, WeakSet)
generatori
execuie asincron (Promises)
....
https://nodejs.org/en/docs/es6/
node.js: suport es6
Deservirea unui volum mare de conexiuni

concurente cu necesar minim de resurse
(procesor, memorie) ntr-un singur proces
node.js: utilizri pragmatice
Procesarea n timp-real
a datelor JSON oferite de API-uri (multiple)
inclusiv, crearea de aplicaii

oferind fluxuri de date (streaming data)
de experimentat http://nodestreams.com/
Dezvoltarea rapid de servicii Web

sau API-uri conform paradigmei REST
(REpresentational State Transfer)
n cursurile
viitoare
cteva framework-uri pentru dezvoltarea de API-uri:

actionHero.js, facet, Frisby, restify, restmvc, percolator,
Crearea de aplicaii native (desktop)

folosind tehnologii Web moderne precum HTML5
nw.js (fost node-webkit)

utilizarea modulelor Node.js direct la nivel de DOM
http://nwjs.io/
Mediu de dezvoltare tradiional (desktop)

exemplificri:
Nodeclipse & Enide (pentru Eclipse)
http://www.nodeclipse.org/
Node.js Tools for Visual Studio
https://github.com/Microsoft/nodejstools
node.js: instrumente de dezvoltare
dezvoltare n nori de aplicaii Web e.g., Cloud9 i Koding

S. Buraga, Cu codul n nori (2015) http://www.slideshare.net/busaco/cu-codul-n-nori

dezvoltarea de aplicaii Web la nivel de server
de la JavaScript la Node.js
caracteristici, module, exemple
rezumat
episodul viitor:
un model de date pentru Web: familia XML

Web05DezvoltareaAplicatiilorWeb Javascript Nodejs

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web05DezvoltareaAplicatiilorWeb Javascript Nodejs

Enviado por

Direitos autorais:

Formatos disponíveis

Tehnologii Web

JavaScript la nivel de server Node.js

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Jan Amos Comenius

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Cine a vzut vreodat o bijuterie frumos cizelat

Oferit n premier de browser-ul Netscape Navigator

Standardizat ca ECMAScript: ECMA-262 (1997)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Inventat de Brendan Eich (1995)

versiunea standardizat n vigoare: 5.1 (2011)

versiunea cea mai recent: 6.0 ES6 (ECMAScript 2015)

referina de baz: https://developer.mozilla.org/JavaScript

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

destinat s manipuleze, s automatizeze

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Limbaj de tip script (interpretat)

nu necesit intrri/ieiri n mod implicit

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Limbaj de tip script (interpretat)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Adopt diverse paradigme de programare

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Adopt diverse paradigme de programare

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Adopt diverse paradigme de programare

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Adopt diverse paradigme de programare

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Cum putem executa programele JavaScript?

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Mediu de execuie (host-environment)

permite rularea de aplicaii Web la nivelul unei platforme

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Mediu de execuie (host-environment)

permite rularea de aplicaii Web la nivelul unei platforme

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Mediu de execuie (host-environment)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Mediu de execuie (host-environment)

independent de navigatorul Web

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Mediu de execuie (host-environment)

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Alte cuvinte rezervate:

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

caracteristici: tipuri de date

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

caracteristici: tipuri de date

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

caracteristici: tipuri de date

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

caracteristici: tipuri de date

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

caracteristici: tipuri de date

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

caracteristici: tipuri de date

Nu exist valori ntregi

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

caracteristici: tipuri de date

Nu exist valori ntregi

Dr. Sabin Buragaprofs.info.uaic.ro/~busaco/

caracteristici: tipuri de date