ice

om
on
Ec
dii
tu
e S
d
ia
e m
ad
Ac

TEHNOLOGII WEB
CURSUL 2: JAVASCRIPT – INTRODUCERE

IULIAN ILIE-NÉMEDI
JAVASCRIPT DE LA 10000 DE METRII

Caracteristici
Declararea variabilelor
Tipuri de date
Operatori și conversii
Funcții și obiecte
Tratarea excepțiilor
Evenimente
 CARACTERISTICI ALE
LIMBAJULUI JAVASCRIPT
• Limbaj multi-paradigmă:
• Imperativ: metode apelate direct;
• Funcțional: expresii lambda;
• Inițial doar bazat pe obiecte;
• A evoluat în orientat pe obiecte.
• Fundamental asincron;
• Case-sensitive;
• Folosește setul de caractere Unicode;
• Interpretat;
• Cu tipuri dinamice, determinabile și modificabile la runtime;
 CLIENT-SIDE JAVASCRIPT
VS. SERVER-SIDE JAVASCRIPT
• Client-side JavaScript extinde limbajul cu obiecte specifice browser-
ului;
• Server-side JavaScript extinde limbajul cu obiecte specifice server-
ului;
• Amândouă sunt construite pe un model asincron.
 DOMENII DE VIZIBILITATE

• 3 domenii de vizibilitate:
• Global;
• Funcție;
• Bloc.
• Legătura între domenii și rezolvarea conflictelor de nume;
• Numele interne au prioritate;
• Dacă un nume nu este găsit într-un anumit domeniu, va fi
căutat în domeniile care îl conțin (de la local la global).
 DECLARAREA VARIABILELOR

• var – permite declararea unei variabile cu vizibilitate în funcție;

• let – permite declararea unei variabile cu vizibilitate în bloc;
• fără let și var, variabilele sunt declarate global.
 DECLARAREA CONSTANTELOR
• const – permite declararea unei constante.
Global n = 1

În funcție n = 2

În blocul din funcție n = 3

În blocul global n = 4
 TIPURI DE DATE

• În principiu un limbaj pur obiectual (există tipuri primitive,

dar sunt împachetate în obiecte);
• String, Number, BigInt și Boolean împachetează tipuri
primitive;
• Array, Set, Map, Object, Date, RegExp, Function și Symbol
sunt tipuri complexe;
• Tipuri speciale: Null și Undefined;
 OPERATORUL TYPEOF

• Retunează tipul argumentului ca șir de caractere:

• typeof 42 // "number"
• typeof NaN // "number"
• typeof 'Hello World!' // "string"
• typeof true // "boolean"
• typeof undeclaredVariable // "undefined"
• typeof (function f() {}) // "function"
• typeof (f = () => {}) // object
• typeof {} // "object"
• typeof [] // "object"
• typeof null // "object"
 TIPURI PRIMITIVE

• String;
• Number;
• BigInt;
• Boolean.
 STRING

• Șiruri de caractere, delimitate fie prin ', fie prin ":

• var firstName = "Iulian";
• var lastName = 'Ilie-Némedi';
• var someString = "I can 'switch' quotes";

• Suportă secvențe de escape în stil C:

• var myString = "I can quote a \" quote";
• Suportă interpolarea de expresii cu ``:
• var hello = `Hello, ${firstName} ${lastName}!`;
 NUMBER ȘI BIGINT

• Toate numerele sunt în virgulă mobilă;

• Numerele sunt boxed în obiecte Number;
• Se pot scrie cu sau fără zecimale:
• var x = 3.14;
• var y = 3;
• var z = new Number(10);
• var t = 1 / 0; // Infinity
• var v = parseInt("xxx"); // NaN
• var w = 1n; // BigInt
 BOOLEAN
• Poate avea doar valorile true și false:
• var isTrue = true;
• var isFalse = false;
• Valori de adevăr true și false:
• Sunt false:
• false;
• String-ul vid;
• Numerele 0 și -0;
• undefined;
• null;
• NaN.
• Restul valorilor sunt true.
 TIPURI COMPLEXE

• Array;
• Set;
• Map;
• Object;
• Date;
• RegExp;
• Function;
• Symbol.
 ARRAY

• Array-urile sunt indexate de la 0 și reprezintă o listă de

obiecte:
• var companies = ["Microsoft", "Apple", "IBM"];
• var empty = new Array();
• var names = new Array("Iulian", "Gyula");
 SET

• Un Set este o listă de obiecte cu valori unice:

• var letters = new Set(["a", "a", "b"];
// letters.length este 2
• letters.add("c");
• console.log(letters.values())
// SetIterator {a, b, c}
 MAP

• Reprezintă o colecție de perechi cheie-valoare:

• const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
• const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
• fruits.get("apples"); // 500
 OBJECT

• Există o ierarhie de obiecte care au ca prototip inițial object;

• Obiectele sunt prelucrabile și în JSON, similar cu niște hash-
tables;
• Instanțierea unui obiect se face fie cu operatorul new fie
inițializând o reprezentare JSON:
• var person = {name: "Iulian", birthDay: "07/24"};
• var car = new Car("Dacia");
• Prima variantă permite crearea de obiecte in-line fără definire
prealabilă, cea de-a doua rulează și codul constructorului.
 DATE

• JavaScript folosește fusul orar al browserului sau al NodeJS și

afișează o dată ca un șir text complet:
• var now = new Date();
• var fromYMD = new Date(2001, 9, 11);
• var fromMls = new Date(1633730569855);
• Metode getXXX și setXXX pentru a obține sau a modifica data,
anul, luna, ziua, ora, minutele, secundele, milisecundele,
timpul.
 REGEXP

• Expresiile regulate sunt definite în JavaScript cu sintaxa:

/pattern/modifiers
• i: case-insensitive;
• g: global;
• m: multiple matching.
 TIPURI SPECIALE

• Null:
• Reprezintă o variabilă cu tip definit, dar care nu ține referința unui obiect.
• Undefined:
• Reprezintă o variabilă cu tip nedefinit.
 CONVERSII

• Din moment ce totul e un obiect (sau se poate împacheta automat ca un obiect),

conversia la String se poate face oricând cu toString();
• Number la String:
• var s = new String(19);
• var s = (1979).toString();
• Alte metode:
• toExponential();
• toFixed();
• toPrecision().
• Boolean to String:
• var s = new String(false);
• var s = false.toString();
 CONVERSII (II)

• String la Number:
• var s = new Number("5"); //rezultatul este 5
• var s = new Number(""); //rezultatul este 0
• var s = new Number("abc"); //rezultatul este NaN
• parseInt("5.2"); // rezultatul este 5
• parseFloat("5.2"); // rezultatul este 5.2
• isNaN() se poate utiliza pentru verificare conversiei.
 CONVERSII AUTOMATE

• Adunarea unui String cu un Number va produce un String:

• var s = 7 + "days";

• Adunarea unui String cu un obiect va produce un String:

• var s = "now is: " + new Date();
• Afișarea unui obiect va face conversia la String:
• console.log({name: "Iulian", birthday: "07/24"});
 OPERATORI

• Operatori aritmetici;
• Operatori de atribuire;
• Operatori string;
• Operații între tipuri diferite;
• Operatori pe biți;
• Operatori de comparație;
• Alți operatori.
 OPERATORI ARITMETICI

• Presupunând că cei doi operanzi sunt de tip number:

• a + b este suma celor două numere;
• a - b este diferența între cele două numere;
• a / b este rezultatul împărțirii reale;
• a * b este produsul;
• a % b este restul împărțirii întregi;
• a++ rezultatul incrementării;
• a-- rezultatul decrementării.
 OPERATORI DE ATRIBUIRE

• Atribuie o valoare cu eventuale modificări variabilei din

stânga:
• a = b;
• a += b;
• a -= b;
• a %= b;
• a /= b;
• a *= b;
 OPERATORI STRING

• Operatorii + și += sunt supraîncărcați pentru a suporta

concatenarea, respectiv atribuirea cu concatenare a unor
string-uri:
• s = "the" + "quick" + "brown" + "fox";
• s += "jumps" + "over" + "the" + "lazy" + "dog";
 OPERATORI ÎNTRE TIPURI DIFERITE

• Aplicarea operatorului + între un String și un Number va

produce un String:
• let x = 7 + "days"; // x va conține 7days
• Din moment ce numerele sunt de fapt tot obiecte, mai precis
se concatenează String-ul cu rezultatul apelării metodei
toString a obiectului.
 OPERATORI PE BIȚI

• Operatori la nivel de bit:

• & și binar între doi operanzi;
• | sau binar;
• ^ xor binar;
• ~ not binar;
• << shift left;
• >> shift right;
• >>> shift right cu 0 padding.
• Toate operațiile lucrează cu numere pe 32 de biți.
 OPERATORI DE COMPARAȚIE

• Rezultatul este un Boolean:

• a == b a este egal cu b;
• a != b a nu este egal cu b;
• a > b a este mai mare ca b;
• a >= b a este mai mare sau egal cu b;
• a < b a este mai mic ca b;
• a <= b a este mai mic sau egal cu b;
• a === b a este egal cu b și are același tip:
• 1 == "1" // true 1 === "1" // false
• a !== b a fie nu este egal cu b, fie nu are același tip:
• 1 != "1" // false 1 !== "1" // true
 ALȚI OPERATORI

• typeof: returneză tipul operandului;

• +: unar poate fi utilizat pentru conversia unui String la
număr: NaN

• delete: șterge o proprietate a unui obiect, un element al

unui array etc.;
• void: permite evaluarea unei expresii și returnează
 ALȚI OPERATORI (II)

• in: returnează true dacă proprietatea există în obiect:

• "name" in Person.
• instanceof returneză true dacă primul operand are al doilea
operand în lanțul de prototipuri:
• "somestring" instanceof Object; // false
• new String("test") instanceof String; // true
• spread operator: permite despachetarea unui array sau obiect:
• var a = [1, 2, 3];
• var b = [4, 5];
• var c = [...a,...b]; // c este [1, 2, 3, 4, 5]
• var d = [a, b]; // c este [[1 ,2 , 3], [4, 5]]
 ALȚI OPERATORI (III)

• spread operator (continuare): despachetarea obiectelor:

• let person = {firstName: 'Iulian', lastName: 'Ilie-Némedi’};
let location = {city: 'Bucharest', country: 'Romania’};
let personWithLocation = {...person, ...location};
/* {
firstName: 'Iulian',
lastName: 'Ilie-Némedi',
city: 'Bucharest’,
country: 'Romania’
} */

• destructurarea: unui array sau a unui obiect:

• let {city} = personWithLocation; // Bucharest
 PRECEDENȚA
OPERATORILOR
member . []
call / create instance () new
negation/increment ! ~ - + ++ -- typeof void delete
multiply/divide */%
addition/subtraction +-
bitwise shift << >> >>>
relational < <= > >= in instanceof
equality == != === !==
bitwise-and &
bitwise-xor ^
bitwise-or |
logical-and &&
logical-or ||
conditional ?:
assignment = += -= *= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??=
comma ,
 CONTROLUL FLUXULUI

• un bloc este un set de intrucțiuni între {};

• if;
• switch;
• for;
• for..in, for..of;
• while;
• do..while;
• break, continue, label.
CONTROLUL FLUXULUI (II)

Instrucțiunea break poate lipsi, caz în care se vor executa toate ramurile
case de sub ramura curentă, chiar dacă nu sunt îndeplinite condițiile lor.
 OPERAȚII CU STRING-URI
• Definirea:
• const string1 = "A string primitive";
• const string2 = 'Also a string primitive’;
• const string3 = `Yet another string primitive`;
• Se pot defini și string-uri multiline care pot conține expresii evaluate;
• Un string multiline este conținut de ``;
• Un string multiline poate funcționa și ca un șablon conținând expresii.
• Accesul la un caracter:
• 'cat'.charAt(1) // întoarce "a"
• 'cat'[1] // întoarce tot "a"
• Compararea:
• "a" > "b"; "a" < "b";
• str1.toUpperCase() === str2.toUpperCase();
• str1.localeCompare(str2)
 OPERAȚII CU STRING-URI (II)

• Parcurgerea:
• for (let c in s) {console.log(c);}
• Extragerea unui substring:
• "Apple, Banana, Kiwi".substring(7, 13); // extrage Banana
• "Apple, Banana, Kiwi".slice(7, 13); // extrage Banana
• "Apple, Banana, Kiwi".slice(-12, -6); // extrage Banana
• Înlocuirea unui substring:
• "I’m working at AxWAY“
.replace(/AXWAY/i, "Axway");
 OPERAȚII CU STRING-URI (III)

• Căutarea unui substring:

• "Please locate where 'locate' occurs!".indexOf("locate"); // 7
• "Please locate where 'locate' occurs!".lastIndexOf("locate"); // 21
• "Please locate where 'locate' occurs!".search("locate"); // 7
• "Hello world, welcome to the universe.".includes("world"); // true
• "The rain in SPAIN stays mainly in the plain".match(/ain/g);
// ["ain", "ain", "ain"]
• "Hello world, welcome to the universe."startsWith("world"); // true
• "Hello world, welcome to the universe."startsWith("world", 5); // false
• "John Doe". endsWith("Doe") // true
 OPERAȚII CU ARRAY-URI
• Crearea:
• let fruits = ['Apple', 'Banana’];
• let fruits = new Array('Apple', 'Banana');
• Accesarea unui element:
• let first = fruits[0];
• let last = fruits[fruits.length - 1];
• Căutarea:
• let index = fruits.indexOf('Banana');
• Parcurgerea:
• fruits.forEach(function(item, index, array) {…});
• for (item of fruits) {…}
• for (let i = 0; i < fruits.length; i++) {
let item = fruits[i];
…
 OPERAȚII CU ARRAY-URI (II)

• Adăugarea:
• let newLength = fruits.push('Orange');
• Ștergerea:
• let last = fruits.pop(); // șterge de la sfârșit
• let first = fruits.shift(); // șterge de la început
• let removedItem = fruits.splice(index, 1);
// șterge un element de la index
• let removedItems = fruits.splice(index, n);
// șterge n elemente începând de la index
 OPERAȚII CU ARRAY-URI (III)

• Reducerea:
• let sum = [1, 2, 3, 4, 5].reduce((s, n) => s += n, 0); // sum = 15
• Substituirea fiecărui element:
• let lengths = ["one", "two", "three"].map(n => n.length); // [3, 3, 5]
• Filtrarea:
• let numbers = ["1", 2, '3'].filter(n => typeof n === "number"); // [2]
• Despachetarea ca listă:
• let numbers = […[1, 2, 3],…[4, 5, 6]]; // [1, 2, 3, 4, 5, 6]
• Concatenarea elementelor:
• let letters = ["a", "b", "c"];
• let s = letters.join(" "); // a b c
 DEMO: OPERAȚII CU ARRAY-URI
Ne propunem să implementăm un serviciu care furnizează informații
despre lista județelor și orașele din fiecare județ al României. Rulăm
nmp init comanda npm init pentru a crea aplicația server descrisă de package.json.

Vom rula aplicația cu nodemon care

pornește node și monitprizează sursele
ei, repornind când acestea se modifică.

În package.json adăugăm dependențele

de modulele de care avem nevoie.
nmp install
Adăugăm și depedența de nodemon. De
remarcat că în producție rulăm cu node.

După salvarea modificărilor în

package.json rulăm comanda nmp install
pentru a descărca modulele referite.
DEMO: OPERAȚII CU ARRAY-URI (II)

Importăm funcțiile join și resolve din path, modulul express și funcțiile

getDistricts și getCitiesByDistrict din fișierul nostru service.js.

Configurăm portul pe care vom porni

serverul Web creat cu express.

Înregistrăm livrarea de resurse statice

din subdirectorul web al aplicației.
Înregistrăm rute pentru a întoarce lista județelor și
orașele după județ primit ca parametru un query string.

Pornim serverul pe portul configurat

și scriem în console după ce a pornit.
DEMO: OPERAȚII CU ARRAY-URI (III)

Folosim funcția readFileSync din modulul fs pentru a citi sincron din

fișierul cities.csv și a stoca în locals lista județelor și a orașelor citite.

Citim conținutul fișierului cu care cream un șir de caractere

pentru a împărți în linii folosind o expresie regulată pentru
separtorul de linii de tip Unix (\n) sau Windows (\n\r), iar
apoi înlocuim fiecare linie cu un obiect care reține datele
unui oraș (nume, județ și număr de locuitori).
DEMO: OPERAȚII CU ARRAY-URI (VI)
Dacă nu avem în locals județele, verificăm dacă avem
orașele, pe care le încărcăm din fișier dacă nu sunt.

Preluăm județul pentru

fiecare oraș și creăm un set
cu lista unică a județelor pe
care îl destructurăm într-un
vector sortat lexicographic
după numele județului.

Încărcăm orașele din fișiere dacă nu sunt deja citite.

Filtrăm orașele după județ și le sortăm după nume.

Exportăm din modul un obiect care conține cele două

metode referite prin proprietăți cu același nume.
 DEMO: OPERAȚII CU ARRAY-URI (V)
În directorul web creăm un fișier index.html care referă
index.js și conține un selector pentru județ și un tabel în
care vom afișa orașele din județul selectat, apelând
după încărcarea documentului metoda load din script.
Metoda load din index.js referă tag-urile după nume și apelează
ruta pentru a încărca lista județelor, generând câte un option
pentru fiecare județ, pe care le adaugă în interioul tag-ului select.

La selectarea unui județ,

încărcăm de pe server orașele
din județul respective pe care le
vom afișa, dacă există în tabel.
DEMO: OPERAȚII CU ARRAY-URI (V)
Reducem vectorul de orașe la uma
numărului de locuitori din fiecare oraș.

Construim antetul tabelului care va

avea o coloană cu numele orașului și
alta cu numărul de locuitori din oras.

Înlocuim fiecare oraș din vector cu o

linie care conține doua celule cu datele
corespunzătoare fiecărui oraș din
vector, iar in final concatenăm liniile.

În final tragem o linie și afișăm

numărul total de locuitori din județ.
DEMO: OPERAȚII CU ARRAY-URI (V)
 FUNCȚII
• Definirea unei funcții:
• function f(a, b, c) {
/*instrucțiuni*/
}
• const f = function(a, b, c) {
/*instrucțiuni*/
}
• Apelarea unei funcții:
• f(1, 3, 4); // valid
• f(1); // valid, b și c undefined
• f(...[1, 2, 3]); // valid
• let p = f; p(1, 2, 3); // valid
 FUNCȚII (II)

• Funcții cu număr variabil de parametri:

• function f() {let args = arguments; /*instrucțiuni*/ }
• function f(...args) { /*instrucțiuni*/ }
• Arrow functions:
• let f = (x) => x * 2;
• let f = (x) => {return x * 2;};
 OBIECTE

• Definirea obiectelor:
• In-line:
var person = {name: "Iulian"};
• Prin apelul constructorului:
var person = new Object();
person.name = "Iulian";
person["name"] = "Iulian";
• Prin extragerea dintr-un șir de caractere:
var person = JSON.parse(`{
"name": "Iulian“
}`);
 PROPRIETĂȚILE UNUI OBIECT

• Accesul la proprietățile unui obiecte:

• console.log(person.name);
• console.log(person['name']);
• Iterarea proprietăților unui obiect:
• Proprietățile unui obiect pot fi iterate cu for..in
 METODELE UNUI OBIECT

• Proprietățile unui obiect pot fi de tip funcție:

• Accesul la instanța curentă se face folosind this;

• Un arrow function dintr-un obiect in-line nu poate referi
obiectul prin intermediul lui this.
 REFERINȚA THIS

• this se referă la contextul apelantului:

• Pentru o funcție liberă, this este Window în browser sau module.exports in
NodeJS;
• Pentru o funcție apelată prin intermediul unei variabile, this este variabila
care apelează metoda;
• Pentru un eveniment this este elementul țintă.

Afișează “undefined” pentru că proprietatea name nu există în obiectul

Window pe client, respectiv în obiectul module.exports pe server.

Afișează “Iulian”, care este valoarea

proprietății name din variabila de tip Person.
 IERARHIA DE OBIECTE

• Instanțele moștenesc proprietățile și metodele de la tipul cu

care au fost create prin intermediul proprietății prototype,
care la rândul lor moștenește de la tipul object;
• Se pot defini noi proprietăți și metode prin adăugarea lor în
prototype-ul tipului, care sunt disponibile tuturor instanțelor
tipului respectiv.
 PROTOTYPING

• Adăugăm metoda format tuturor obiectelor de tip String prin

definirea ei în obiectul prototype al tipului String, ceea ce ne
permite să apelăm noua metodă cu oriect instanță de tip
String:
 PROTOTYPING (II)

• Adăugăm metoda times tuturor obiectelor de tip Number

care calculează factorialul, prin definirea ei în obiectul
prototype al tipului Number, ceea ce ne permite să apelăm
noua metodă cu oriect
instanță de tip Number:
 MOȘTENIREA FOLOSIND
PROTOTYPE

Aceste proprietăți și metode vor fi moștenite

prin copierea prototype-ului tipului de bază.

Apelăm inițializarea tipului pe

care îl extindem pentru
setarea câmpurilor moștenite.

Copiem câmpul prototype al tipului pe

care îl extindem, simpla atribuire ar fi
făcut ca ambele să aibă aceleași câmpuri.
 EVENIMENTE

• Atât server-side cât și client-side JavaScript au un model de

evenimente;
• În centrul sistemului se află o coadă de evenimente;
• Evenimentele produse sunt adăugate la coadă;
• Evenimentele sunt apoi scoase din coadă și funcțiile care le
tratează sunt executate atunci când există resurse suficiente;
• Execuția unei funcții care tratează un eveniment nu poate fi
întreruptă.
 MECANISME DE PROPAGARE
A EVENIMENTELOR ÎN DOM
• Evenimentele DOM descriu trei faze
ale propagării evenimentelor:
• Faza Capturing:
• Evenimentul coboară la element.
• Faza Target:
• Evenimentul a atins elementul țintă.
• Faza Bubbling:
• Evenimentul se ridică din element în
element.
 MECANISME DE PROPAGARE
A EVENIMENTELOR ÎN DOM (II)
• Fiecare handler poate accesa proprietățile obiectului eveniment:
• event.target – elementul care a generat evenimentul;
• event.currentTarget (=this) – elementul curent care gestionează
evenimentul (cel care are handler-ul pe el);
• event.eventPhase – faza curentă:
• Capture = 1; Target = 2, Buble = 3.
• Orice element poate opri evenimentul apelând event.stopPropagation(),
dar acest lucru nu este recomandat, deoarece nu putem fi siguri că nu
vom avea nevoie de el mai sus, poate pentru lucruri complet diferite;
• Tratamentul implicit pentru eveniment poate fi evitat prin apelul
event.preventDefault().
 MECANISME DE PROPAGARE
A EVENIMENTELOR ÎN DOM (III)
• Capturing:
• Evenimentul trece mai întâi prin lanțul strămoșilor până la elementul care
l-a declanșat.

1. HTML → BODY → FORM → DIV;

2. P;
3. DIV → FORM → BODY → HTML.
 MECANISME DE PROPAGARE
A EVENIMENTELOR ÎN DOM (IV)
• Bubbling:
• Când ajunge un eveniment la elementul care l-a declanșat, acesta execută mai întâi
handler-urile pe el, apoi pe părintele său, apoi pe tot parcursul altor strămoși.
 MECANISME DE PROPAGARE
A EVENIMENTELOR ÎN DOM (V)

event.eventPhase
3 pentru bubbling

event.stopPropagation();
întrerupe mecanismul de bubbling
event.eventPhase
1 pentru capturing event.currentTarget
referă pe rând containerele
event.stopPropagation();
întrerupe mecanismul de capturing

event.currentTarget event.preventDefault()
referă pe rând containerele inhibă tratamentul implicit
event.target pentru eveniment
referă tot timpul elemntul
care a generat evenimentul
 TRATAREA EXCEPȚIILOR

• JavaScript are un
mecanism clasic de
tratare a excepțiilor
cu throw, try, catch
și finally.
 PYRAMID OF DOOM

• Din cauza faptului că accesul la resurse este asincron, apeluri

în JavaScript tind sa fie imbricate în adâncime prin furnizarea
unei metode care să fie apelată înapoi când resursa accesată
devine disponibilă:
• Soluția:
 PROMISIUNI

• Promisiunile permit execuția unei serii de operații într-un

mediu asincron;
• Promisiunile sunt pentru codul asincron ce este tratarea
excepțiilor pentru codul sincron;
• O promisiune este fie rezolvată, fie în curs de rezolvare;
• O promisiune rezolvată a produs fie
o valoare fie o eroare.
PROMISIUNI (II)
 CALLBACK-URI VS. PROMISE-URI VS.
ASYNC / AWAIT
• Callback-urile duc la ramificarea programului și la imbricare;
• Promise-urile elimină imbricarea, dar păstrează ramificarea
programului;
• Async/Await în plus față de eliminarea imbricării și liniarizează
ramificațiile
programului.
DEMO: ASYNC/AWAIT
VS. PROMISE
Ne propunem să implementăm un serviciu
care întoarce lista țărilor unde apare mai
frecvent un nume de familie căutat.

Pornim serverul express care va

livra conținutul static al aplicației
client plus ruta dinamică pentru
căutarea țărilor în care apare mai
frecvent un nume de familie.
 DEMO: ASYNC/AWAIT
VS. PROMISE (II)
Macheta HTML ne permite să
tastăm numele apăsând Enter
pentru a vedea lista țărilor în
care apare mai frecvent.

Serviciu de pe server poate fi apelat

folosind async/await sau promise.

Selectăm metoda de apel în funcție de tipul bifat.

Afișăm rezultatele sub forma unei liste ordonate.

DEMO: ASYNC/AWAIT
VS. PROMISE (III)
Apelul care utilizează async/await
așteaptă să primească răspunsul la
cererea HTTP, iar apoi așteaptă să
deserializeze ca JSON corpul
răspunsului, apelând in final
consumatorul cu rezultatul primit.

Apelul care primise-uri declanșează

cererea HTTP și înregistrează un
consummator care va fi apelat la
primirea răspunsului, când
declanșează deserializarea corpului
răspunsului, înregistrând un
consumator care va apela metoda
care tratează rezultatele întoarse
de serviciul nostru.
DEMO: ASYNC/AWAIT
VS. PROMISE (IV)
BIBLIOGRAFIE
ÎNREGISTRAREA CURSULUI

https://youtu.be/-fsp342GiRs?si=GO3Z5tzojPoA9hm8
 POANTA CURSULUI

Do you want to
hear a JavaScript
joke?

I’ll callback later!

 VĂ MULȚUMESC!
NE VEDEM LA CURSUL URMĂTOR.