JavaScript

Caracteristici
• Limbaj multi-paradigmă:
– Imperativ;
– Funcțional;
– 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;
• Inițial client-side, dar au apărut și variante server-side.
 Client-side JS vs. Server-side JS

• 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;
• const – permite declararea unei constante.
 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, Object, Date, RegExp, Function și Symbol
sunt tipuri complexe;
• Tipuri speciale: Null și Undefined;
 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;
• 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”);
 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;
• Declararea unui obiect se face fie cu operatorul new fie
inițializând obiectul în 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;
– a !== b a fie nu este egal cu b, fie nu are același tip.
 Alți operatori

• typeof returneză tipul operandului;

• + unar poate fi utilizat pentru conversia unui String
la număr;
• delete șterge o proprietate a unui obiect, un
element al unui array etc.;
• void permite evaluarea unei expresii și returnează
undefined.
 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
 Alți operatori (III)

• spread operator – permite despachetarea unui

array:
– 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]]
 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();
 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 ASE”
.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.”.inclues(“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
 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 parametrii:

– 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:
– var person = {name: ”Iulian”};
– var person = new Object();
person.name = “Iulian”;
person[“name”] = “Iulian”;
– 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 object 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:
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.
 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.
– Propagarea poate fi oprită prin apelul event.preventDefault().

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.
 Tratarea excepțiilor

• JavaScript are
un mecanism
clasic de
tratare a
excepțiilor cu
throw, try,
catch și
finally.
 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.
 Bibliografie
Douglas Crockford
 Vă mulțumesc!
Ne vedem la cursul următor.