CURSUL #3

JAVASCRIPT
PREZENTARE IN ANSAMBLU A CELUI MAI FOLOSIT LIMBAJ DE
PROGRAMARE IN DOMENIUL WEB
CE ESTE JAVASCRIPT?
• JavaScript este un limbaj de scripting folosit cel mai mult
in domeniul web
• Se foloseste atat pe backend (NodeJS), cat si pe frontend
(React, Angular, Vue, Backbone, jQuery, Vanilla)
• Este un limbaj usor de inteles, dar greu de perfectionat
SCURT ISTORIC
• JavaScript a fost inventat in 1995 de Brendan Eich
• A aparut ca o nevoie a browserului Netscape Navigator de
a avea un limbaj care sa lege si sa anime componentele
HTML statice de atunci
• Nu are nicio legatura cu Java, insa Java era foarte popular,
asa ca a fost numit JavaScript
• “Java is to JavaScript as ham is to hamster”
STANDARDIZAREA LIMBAJULUI
• Imediat dupa aparitia sa, JavaScript a intrat sub tutela European Computer
Manufacturers Association (ECMA) pentru a fi standardizat, sub numele
ECMAScript
• JavaScript-ul modern este o implementare a standardului ECMAScript
(ECMA-262)
• Din 1997, cand a fost lansata prima editie a ECMAScript, s-au lansat 10
editii
• Cea mai importanta editie este ES6 (ECMAScript 2015)
• Ultima editie aparuta este ES10 (ECMAScript 2019), insa nu este complet
suportata de browsere sau Node
CONCEPTE DE BAZA. PARADIGME.

• JavaScript este un limbaj:

• Dinamic (comportament la runtime)
• Slab tipat (tipurile nu conteaza)
• Imperativ
• Functional (functii “high order” si functii “pure”)
• OOP (se bazeaza pe prototip)
• Reactiv (se bazeaza pe evenimente)
CONCEPTE DE BAZA. RULARE.

• JavaScript poate fi rulat:

• In consola browserului
• Local, cu NodeJS
• Codul JavaScript se scrie in fisiere .js
• Nu exista “puncte de intrare” (e.g.: functii main)
CONCEPTE DE BAZA. SINTAXA.

• Sintaxa JavaScript se aseamana cu sintaxa C

• Blocurile decizionale (if, switch)
• Buclele (for, while, do…while) si break si continue
• Corpurile functiilor scrise intre paranteze acolade
• Comentariile (//, /**/)
• Se bazeaza pe variabile, functii, vectori si obiecte
• Afisarea pe ecran se realizeaza folosind [Link]()
CONCEPTE DE BAZA. VARIABILE.

• Variabilele in JavaScript se declara cu let sau const

• Exista doua categorii de date:
• Primitive (string, number, boolean, undefined, symbol)
• Complexe (object, function)
• Deoarece JS este dinamic si slab-tipat, tipurile de date nu se
pun explicit
• Sirurile de caractere se pot define utilizand “ sau ‘.
CONCEPTE DE BAZA. VARIABILE.

este echivalent cu
CONCEPTE DE BAZA. OBIECTE.
• Obiectele sunt elemente de tipul cheie:valoare
• Cheia este un sir de caractere
• Valoarea este orice, inclusiv un alt obiect
• Obiectele pot fi declarate pe loc, folosindu-se paranteze acolade sau pot fi
instantiate, utilizandu-se new
• Cheile obiectelor pot fi scrise in 3 moduri:
• Sir de caractere
• Sub forma de variabila evaluata
• Ca simbol
• Atunci cand o cheie este definita drept simbol, numele ei este ascuns
CONCEPTE DE BAZA. OBIECTE.
CONCEPTE DE BAZA. COPIEREA
OBIECTELOR.

• Obiectele sunt copiate, implicit, prin referinta

• Copierea unui obiect prin valoare se poate realiza in mai multe
moduri:
• Folosind [Link]
• Folosind spread operator (ES6)
• Folosind [Link] si [Link] (cea mai buna)
• Problema la primele doua variante apare atunci cand se doreste
copierea unor obiecte care au la randul lor alte obiecte in interior.
CONCEPTE DE BAZA. FUNCTII.
• Functiile din JS sunt asemanatoare cu cele din C, cu cateva exceptii:
• Nu au tip de retur
• Nu au tip la parametri
• Pana la introducerea ES6, functiile se declarau folosind cuvantul cheie
function
• ES6 a introdus arrow functions
• Arrow function se bazeaza pe modelul lambda, atribuind unei variabile
drept valoare o functie anonima
• O functie atasata unei chei dintr-un obiect se numeste metoda
CONCEPTE DE BAZA. FUNCTII.

este (aproape) echivalent cu

CONCEPTE DE BAZA.
THIS.
• In JavaScript exista this
• This este urmatoarele:
• Intr-o metoda este obiectul posesor
• De unul singur este obiectul global
• Intr-o functie este obiectul global
• Intr-un eveniment, this este
elementul care a primit evenimentul
CONCEPTE DE BAZA. FUNCTION VS ARROW
FUNCTION.
• Functiile clasice nu sunt identice cu functiile arrow
• Cand sunt folosite ca metode, this are valori diferite
• Functiile clasice au comportamentul obisnuit
• Functiile arrow considera this ca facand parte din contextul
in care au fost apelate
• Functiile clasice pot fi folosite drept constructor, functiile
arrow nu
• Functiile arrow nu au obiectul argument
CONCEPTE DE BAZA. FUNCTIE
CONSTRUCTOR.

• O functie definita in mod clasic, cu function, poate fi

constructor
• Un constructor se comporta asemanator cu o clasa
• Un constructor este un blueprint pentru un obiect
• Un constructor utilizeaza this pentru a asigna proprietati si
metode obiectelor
• Pentru a instantia un obiect, se foloseste new
CONCEPTE DE BAZA. FUNCTIE
CONSTRUCTOR.
CONCEPTE DE BAZA. EGALITATE DE TIP
SI VALOARE.

• In JS exista doua tipuri de egalitate

• De valoare ==
• De tip si valoare (stricta) ===
• == incearca sa converteasca variabilele comparate la un tip
comun inainte de a fi comparate
• Este indicat sa folositi === pentru a evita erorile
CONCEPTE DE BAZA. ERORI SI TRATAREA
ERORILOR.

• Erorile sunt obiecte de tip Error aruncate la runtime

• Implicit, contin nume si mesaj
• Erorile pot fi create folosind new si aruncate folosind throw
• Pe langa mesajul oferit in constructor, se pot adauga si campuri noi sub
forma de proprietati dupa ce obiectul a fost instantiat
• Acestea pot fi tratate utilizand try … catch
• Pentru debug, este util sa investigati stiva erorii ([Link])
 CONCEPTE AVANSATE. COMPORTAMENT
ASINCRON.
• JavaScript ruleaza pe un singur thread
• Prezinta elemente de programare asincrona si reactiva
• Natura asincrona este datorata comportamentului browserului
• Cererile HTTP complexe sau diversele operatii intensive computational nu trebuie sa blocheze
pagina
• E.g.: o cerere catre un API care cauta un element intr-o baza de date cu 100000 de inregistrari.
Daca browserul ar astepta dupa terminarea functiei, pagina s-ar bloca
• Atunci cand o functie asincrona este executata, executia ei se pune pe o coada de
evenimente
• Rezultatul ei este intors la un moment de timp viitor
• Exista 3 moduri de a interactiona cu o functie asincron:
• Callbacks
• Promises
 CONCEPTE DE AVANSATE. CALLBACKS.
• JavaScript, prin natura functionala, permite high-order
functions
• HOC se mai numesc callbacks
• Callbacks erau foarte folosite intens inainte de ES6
• Mecanismul este urmatorul:
• O functie asincrona primeste un callback ca si parametru
• Functia se executa candva
• Atunci cand se termina de executat, se apeleaza callback-ul
• Exemplu de functii asincrone native ce accepta callbacks
• setTimeout – executa callbackul dupa un delay
• setInterval – executa callbackul periodic
Doua callbacks
intr-un callback…
intr-un
callback :D
CONCEPTE AVANSATE. PROMISIUNI.

• Promisiunile au fost introduse in ES6 pentru a combate callback hell

(structura denumita si “the great callback pyramid of doom”)
• Cateva callbacks nu ingreuneaza codul, dar ganditi-va cum ar arata
callback in callback in callback … in callback
• Scopul promisiunilor este de a fluidiza scrierea codului asincron
• Promisiunile sunt instante ale clasei Promise si au trei metode: then,
catch si finally
• Then intoarce un rezultat si accepta un callback care foloseste rezultatul
• Catch intoarce o eroare si accepta un callback care foloseste eroarea
• Finally accepta un callback
CONCEPTE AVANSATE. PROMISIUNI.
• Promisiunile au 3 stari: pending, fulfilled, rejected
CONCEPTE AVANSATE. PROMISIUNI.

• Pentru a crea o promisiune, este nevoie sa instantiati clasa

Promise si sa utilizati metodele resolve si reject date ca
argumente intr-un callback in constructor
• Resolve si reject sunt atat metode statice cat si callbackuri
interne
• Resolve primeste ca parametru un obiect si schimba starea promisiunii din
pending in fulfilled. Obiectul este accesat, ulterior, in then.
• Reject primeste ca parametru o eroare si schimba starea promisiunii din pending
in rejected. Eroarea este accesata, ulterior, in catch.
CONCEPTE AVANSATE. PROMISIUNI.

• Clasa Promise ofera multe metode statice utile:

• [Link] returneaza o promisiune indeplinita cu success
• [Link] returneaza o promisiune esuata
• [Link] primeste un vector de promisiuni si intoarce promisiunea
care se executa cel mai repede
• [Link] primeste un vector de promisiuni si intoarce o promisiune
ce contine rezultatele tuturor promisiunilor executate
CONCEPTE AVANSATE. PROMISIUNI.
 CONCEPTE AVANSATE. ASYNC/AWAIT.
• Async/Await a fost introdus in ES7 ca o iteratie peste promisiuni
pentru a fluidiza si mai mult scrierea codului asincron.
• Async/Await si Promisiunile sunt compatibile.
• O promisiune poate fi asteptata cu await.
• O functie marcata ca async returneaza o promisiune.
• Metodele statice din Promise pot utiliza constructii care folosesc
async/await.
• Pentru a folosi await, este nevoie ca functia in care se pune await
sa fie marcata drept async.
CONCEPTE AVANSATE. ASYNC/AWAIT.

• Erorile se pot gestiona usor

utilizand try…catch
• Deoarece nu se poate apela
await fara async, am imbracat
codul intr-o functie care se
apeleaza singura
COOL HACKS
• Iteratori avansati:
• for… of
• for… in
• for await … of
• Templating:
• Sir de caractere in care se pot injecta variabile. Sirul se pune intre `` si variabila intre ${}
• Spread operator
• Rest operator