JS – Curs 1

DE RETINUT:

➢ declararea unei variabile asociaza numele cu zona de memorie, la declarare nu se

atribuie o valoare pentru variabila

➢ setarea valorii unei variabile se numeste atribuire

➢ initializarea unei variabile permite setarea unei valori in momentul declararii
➢ toate instructiunile simple trebuie terminate cu ;
➢ variabilele trebuie declarate inainte de a fi utilizate
➢ pentru reducerea erorilor se recomanda initializarea variabilelor in locul declararii ➢
toate scripturile se vor rula in mod strict
➢ valoarea unei variabile ramane neschimbata intre doua atribuiri succesive.

DE RETINUT:

➢ numele trebuie sa inceapa cu o litera sau cu unul din caracterele _ (underscore) $

(dolar), insa pentru simplitate este recomandata evitarea caracterelor _ respectiv $

➢ numele trebuie sa descrie rolul variabilei (este de preferat total in loc de t), pentru
aceasta se recomanda ca lungimea numelui sa fie mai mare de 2 litere in majoritatea
cazurilor

➢ numele trebuie sa fie unice

➢ numele este case sensitive, pentru simplificarea codului evitati nume care pot fi
confundate datorita

modului de scriere
➢ numele nu trebuie sa contina spatii, daca numele este compus din mai multe cuvinte
se poate folosi

camelCase (fiecare cuvant, cu exceptia primului incep cu majuscula).

➢ numele nu trebuie sa fie cuvinte cheie folosite de limbajul JavaScript

➢ se recomanda folosirea unei variabile pentru un singur scop, aceasta reduce erorile si
efortul de intelegere

DE RETINUT:

➢ intre operatori si variabile se lasa spatii pentru intelegerea codului si detectarea mai
usoara a erorilor de sintaxa.

➢ sunt de evitat expresii de genul: let rest=a+b; ➢ varianta corecta: let rest = a + b;
DE RETINUT:

➢ in expresii complexe trebuie folosit operatorul ( ) pentru speficiarea ordinii

operatiilor

DE RETINUT:

➢ operatorii logici nu modifica valorile variabilelor din expresie, ei genereaza o valoare

de adevar in functie de valorile acestor variabile.

➢ este necesara memorarea tabelelor de adevar pentru operatorii logici, aceasta va

reduce efortul de asimilare a conceptelor discutate in lectiile urmatoare

➢ precedenta operatorilor logici este: ! && || (se executa mai intai negarea, apoi si, sau
este ultimul)

DE RETINUT:

➢ type coercion reprezinta conversia implicita de la un tip de valoare la alt tip de

valoare

➢ apare atunci cand in expresie sunt valori de tipuri diferite

➢ este necesara pentru evaluarea expresiilor

➢ conversia de la tipul string la valoare numerica se face doar daca in expresie nu este
operatorul +, in acest caz toate valorile se convertesc la tipul string

DE RETINUT:

➢ falsy reprezinta orice valoare care se converteste la false datorita type coercion ➢
truthy reprezinta orice valoare care se converteste la true datorita type coercion ➢
valorile falsy sunt: false, undefined, null, 0, "" (ultima reprezinta sirul vid)
➢ toate celelalte valori sunt truthy

➢ operatorii == respectiv != folosesc type coercion si valorile falsy / truthy pentru

evaluarea expresiilor

➢ memorarea valorilor pentru falsy va reduce eforturile de scriere a deciziilor si

buclelor in lectiile urmatoare

DE RETINUT:

➢ atat compararea stricta cat si compararea cu type coercion sunt corecte si utile
➢ este important de inteles type coercion, truthy respectiv falsy pentru a determina
care tip de comparare este necesar intr-un caz particular
➢ folosirea operatorilor de comparare stricta === respectiv !== ca o solutie universala
fara intelegerea type coercion este generatoare de erori
➢ programatorul trebuie sa gandeasca expresiile, sa determine coerent rezultatul
evaluarii fiecarei expresii inainte de a scrie codul

DE RETINUT:

➢ operatorul conditional se foloseste pentru initializarea / atribuirea conditionata

valorilor variabilelor

➢ are trei expresii, expresia din stanga ? reprezinta conditia,

➢ valoarea expresiei dintre ? si : se atribuie variabilei atunci cand prima expresie este
truthy

➢ valoarea ultimei expresii se atribuie variabilei atunci cand prima expresie este falsy

➢ se recomanda un singur operator conditional in expresie pentru reducerea efortului

de intelegere a codului si a defectelor datorate neintelegerii acestui cod.

JS – Curs 2

DE RETINUT:

➢ fragmentul cuprins intre acolade { respectiv } se numeste bloc de cod.

➢ decizia if permite executia conditionata a unui fragment de cod (care poate contine
decizii, bucle

secvente)
➢ expresia conditiei se scrie intre paranteze rotunde, fragmentul de cod se executa numai
daca valoarea expresiei este true
➢ intelegerea valorilor truthy si falsy prezentate in lectia anterioara este esentiala in
evaluarea expresiilor
➢ pentru comparare in expresii se pot folosi operatorii cu coercion != respectiv == sau cei
fara coercion !== respectiv ===
➢ fragmentul de cod este delimitat de acolade si trebuie scris cu un tab mai la dreapta
fata de if ➢ adaugarea taburilor pentru alinierea codului se numeste indentare.
➢ respectati stilul de formatare a codului prezentat

DE RETINUT:

➢ deciziile ierarhice trebuie folosite cu precautie deoarece cresc complexitatea codului si

riscul introducerii defectelor

➢deciziile ierarhice cu mai mult de doua nivele sunt de evitat

➢ se recomanda simplificarea implementarii prin:
1. rescrierea conditiilor folosind operatori logici,
2. folosirea variabilelor auxiliare (exemplele urmatoare) 3. organizarea ramurilor cu else
if (exemplul urmator) 4. crearea unor functii (lectia urmatoare)

DE RETINUT:

➢ deciziile switch se folosesc atunci cand rezultatul unei expresii trebuie comparat cu un
set discret de valori

➢ la compararea valorilor in ramurile case nu se foloseste coercion

➢ pentru terminarea unei ramuri se folosesc comenzile break sau return
➢ daca este necesar, mai multe ramuri case pot sa fie grupate pentru a executa un
fragment comun ➢ in ramurile case nu trebuie sa existe expresii
➢ ramura default este optionala

DE RETINUT:

➢ buclele permit executia repetata a unui fragment de cod cat timp o conditie este
indeplinita ➢ executia o singura data a fragmentului de cod se numeste iteratie
➢ exista trei tipuri de bucle: while, do / while si for
➢ buclele while testeaza conditia la inceputul iteratiei

➢ buclele do / while testeaza conditia la sfarsitul iteratiei

➢ buclele for au trei expresii, prima expresie este cea de initializare si se executa o
singura data, a doua expresie reprezinta conditia, a treia expresie se executa dupa
terminarea fiecarei iteratii, oricare din aceste expresii este optionala

➢ instructiunea break termina executia buclei curente

➢ instructiunea continue termina executia iteratiei curente

➢ modul de indentare si formatare a codului este similar cu cel de la decizii

➢ in cazul buclelor trebuie acordata atentie conditiei, o conditie incorect scrisa poate crea
fie bucle infinite sau bucle al caror fragment de cod nu se executa niciodata

DE RETINUT:

➢ pseudocodul este un mod de a descrie pasii logici necesari rezolvarii unei probleme sau
implementarea unor specficatii

➢ descrierea pasilor se face fara detaliile de sintaxa ale unui limbaj de programare
➢ diferenta dintre schemele logice si pseudocod consta in nivelul de detaliu

➢ in cazul pseudocodului trecerea la implementare intr-un limbaj de programare se face

cu efort minimal

➢ pentru a nu interfera cu sintaxa limbajului pseudocodul va fi scris in comentarii

➢ in cele mai multe cazuri declararea variabilelor este omisa atunci cand este necesara
initializarea

unei variabile cu o anumita valoare se va folosi notatia nume = valoare

➢ specificatiile indentate cu un tab la dreapta marcheaza un bloc de cod si trebuie scrise
intre acolade

si indentate corespunzator

DE RETINUT:

➢ trasarea executiei permite intelegerea executiei programelor; pe langa scrierea

manuala a codului, trasarea executiei pentru exemple, exercitii si teme este calea cea mai
rapida in asimilarea conceptelor si formarea gandirii

➢ pentru trasarea executiei trebuie puse breakpointuri in cod pe liniile ce se doresc a fi

investigate ➢ executia se opreste pe linia in care este setat breakpointul, comenzile de pe
acea linie nu sunt

executate

➢ trasarea se poate face pas cu pas sau de la un breakpoint la altul

➢ in Watch se poate adauga numele variabilei sau expresia ce se doreste evaluata

➢ comanda debugger; opreste executia scriptului si permite trasarea executiei cu conditia

ca developer tools sa fie active inainte de incarcarea scriptului in pagina

➢ erorile de sintaxa apar in consola si cu dublu click pe mesaj se deschide in Sources

fisierul in care a aparut eroarea

➢ rezolvarea erorilor de logica este un proces iterativ si necesita trasarea executiei cu

debuggerul ➢ debuggerul este doar un instrument, el nu poate inlocui gandirea
programatorului
➢ scrierea ordonata a codului reduce eforturile de depanare
JS – Curs 3

DE RETINUT:

➢ numele functiei trebuie sa descrie actiunea functiei

➢ nu trebuie sa fie un cuvant cheie al limbajului JavaScript

➢ nu trebuie sa inceapa cu cifra

➢ nu trebuie sa contina spatii

➢ incepe cu litera mica sau _ (underscore)

➢ daca este compus din mai multe cuvinte se prefera varianta camelCase (urmatoarele
cuvinte incep cu litera mare).

➢ implementarea unei functii presupune scrierea comenzilor acelei functii

DE RETINUT:

➢ pentru numele parametrilor se folosesc aceleasi reguli ca si cele pentru variabile

prezentate in lectiile anterioare

➢ trebuie acordata atentie cand se modifica valoarea parametrilor in interiorul functiei

pentru a nu introduce defecte atunci cand parametrul este folosit in mai multe expresii

DE RETINUT:

➢ verificati toate ramurile logice de iesire din functie pentru a returna rezultate corecte

DE RETINUT:

➢ pentru trasarea executiei unei functii se pune breakpoint pe linia cu apelul

➢ intrarea in functie se face cu Step into

➢ se recomanda trasarea executiei pentru toate ramurile deciziilor, verificarea limitelor

buclelor si rezultatelor calculate

➢ se recomanda trasarea executiei iterativ in timpul implementarii pentru fiecare ramura

logica aceasta reduce numarul de defecte si efortul de implementare

➢ trebuie trasata executia pentru toate functiile implementate sau modificate ➢ in

sectiunea Scope se pot examina variabilele care sunt accesibile functiei ➢ in sectiunea
Call stack se poate examina stiva de apeluri pentru functie ➢ daca se doreste iesirea din
functie se foloseste Step out
DE RETINUT:

➢ domeniul de vizibilitate reprezinta zona de cod in care asocierea dintre nume si zona de
memorie a unei variabile este accesibila

➢ accesarea variabilelor in afara domeniului de vizibilitate genereaza erori

➢ variabilele declarate cu let si const au 3 domenii posibile de vizibilitate (in functie de
locul

declararii): global, local in functie respectiv local in bloc de cod

➢ variabilele declarate cu var au doua domenii posibile de vizibilitate: global si local in

functie

➢ redeclararea variabilelor este o sursa de erori si trebuie evitata.

➢ atunci cand se foloseste let sau const erorile de redeclarare sunt detectate automat
daca redeclararea a aparut in acelasi bloc de cod

➢ atunci cand se declara o variabila trebuie verificat blocul curent si toate blocurile pana
la nivelul functiei pentru a evita erorile de redeclarare

➢ se recomanda evitarea declararii cu var in blocurile de cod.

➢ declararea cu const interzice atribuirea dupa declarare.

➢ domeniul de vizibilitate pentru parametrii functiilor este la nivelul blocului de cod

corespunzator acelei functii.

➢ se recomanda folosirea declararii cu var pentru variabilele care sunt accesate de mai
multe blocuri de cod la inceputul functiilor.

➢ se recomanda folosirea declararii cu let pentru majoritatea cazurilor.

➢ atunci cand valorile variabilelor nu au fost modificate in interiorul functiilor se poate
schimba

declararea din let in const pentru a preveni modificarea neautorizata.

DE RETINUT:

➢ declararea functiilor si a variabilelor care folosesc var se muta la inceputul domeniului

de vizibilitate datorita mecanismului de hoisting

➢ in cazul variabilelor se muta doar declararea nu si valoarea cu care initializeaza

variabila ➢ pentru expresiile functie care folosesc var se intampla acelasi lucru se muta
doar declararea
variabilei ceea ce este in dreapta operatorului = nu este mutat

DE RETINUT:

➢ closures – permite accesul controlat la variabile locale, si la parametrii unei functii

prin intermediul functiilor interne returnate

➢ pentru a crea un closure se foloseste o functie externa care returneaza o functie interna
➢ la fiecare apel al functiei externe se creeaza cate un environment care este accesibil
doar functiei

returnate
➢ folosirea abuziva a closures poate degrada performanta aplicatiilor datorita memoriei
alocate

pentru fiecare environment creat

➢ closures sunt folosite pentru a transfera parametri functiilor de callback

JS – Curs 4

DE RETINUT:

➢ obiectele reprezinta colectii de proprietati si metode

➢ varianta cea mai simpla pentru declararea obiectelor individuale este cu object
literals prezentata

in aceasta sectiune
➢ proprietatile sunt variabile care apartin obiectului, separatorul dintre numele
proprietatii si valoare

este operatorul : (doua puncte)

➢ separatorul proprietatilor si metodelor este operatorul , (virgula)

➢ pentru atribuirea valorilor proprietatilor sau functiilor nu trebuie folosit operatorul =

➢ metodele sunt functii care apartin obiectului, sintaxa de declarare este similara cu cea a
proprietatilor

➢ pentru accesarea proprietatilor sau apelarea metodelor trebuie folosit numele

obiectului urmat de operatorul . (punct)

➢ obiectele se atribuie si se transmit ca parametri in functii prin referinta, zona de

memorie este aceeasi, modificarile proprietatilor prin intermediul unei referinte sunt
"vazute" de toate celelalte referinte
➢ metodele pot accesa proprietatile folosind referinta this, aceasta contine valoarea
obiectului care executa metoda

➢ dupa declarare se pot adauga metode sau proprietati la obiecte

➢ se pot crea obiecte din variabile si functii existente,

➢ atunci cand proprietatea sau metoda are acelasi nume se scrie doar numele acelei
proprietati sau functii

➢ atunci cand se doreste folosirea altui nume trebuie scris numele proprietatii sau
metodei si in locul valorii se scrie numele variabilei sau functiei

➢ numele metodelor si proprietatilor trebuie sa fie unice

➢ pentru accesarea proprietatilor se pot folosi urmatoarele variante:
obiect.numeProprietate sau

obiect["numeProprietate"]

DE RETINUT:

➢ Object este obiectul parinte pentru toate obiectele in JavaScript

➢ Lantul de mostenire (prototype chain) este folosit pentru cautarea proprietatilor si
metodelor in

obiectele parinte atunci cand proprietatea sau metoda respectiva nu este declarata in
obiectul curent

➢ Cand functia constructor este apelata cu new, this este conectat la obiectul nou creat

➢ Proprietatea __proto__ a obiectelor create are aceeasi valoare ca si proprietatea

prototype a functiei constructor (sunt acelasi obiect) pentru permite actualizarea
dinamica a obiectelor existente atunci cand continutul prototype este modificat in functia
constructor

➢ metodele obiectului trebuie sa returneze this pentru a putea fi apelate in cascada

DE RETINUT:

➢ conectarea referintei this la un obiect in momentul executiei se numeste binding

➢ obiectul la care se face binding depinde de contextul in care sunt apelate functiile si de
modul de

executie strict sau non strict

➢ bindingul este folosit frecvent in doua scenarii atunci cand se creeaza obiecte si atunci
cand se
folosesc functii de callback
➢ functiile obisnuite modifica bindingul in momentul apelului, in modul de executie strict
valoarea

pentru this implicita este undefined

➢ functiile sageata nu modifica bindingul indiferent de modul de executie

➢ apelul functiilor constructor sau a constructorilor din clase cu new creeaza un obiect
nou si conecteaza this la acest obiect (aceasta este necesara pentru accesarea
proprietatilor din metode)

➢ se poate modifica bindingul explicit cu ajutorul functiilor call, apply si bind

➢ functiile call si apply se folosesc atunci cand se doreste apelarea imediata a functiei

➢ functia bind se foloseste cand apelul nu se face imediat (ex. apelul se face ca raspuns la
un eveniment)

DE RETINUT:

➢ JSON este o modalitate de formatare a datelor care se pot trimite intre server si o
aplicatie web
➢ datele reprezinta perechi nume – valoare, intre nume si valoare se foloseste : iar intre
valori virgula ➢ valorile valide sunt: boolean, number, null, object, string si tablou
➢ in JSON nu exista comentarii
➢ conversia datelor in format JSON se numeste serializare
➢ conversia inversa se numeste deserializare
➢ valorile cu tipul undefined sau function nu pot fi serializate
➢ se pot filtra ambele conversii

JS – Curs 5

DE RETINUT:

➢ tablourile sunt variabile de tip object care pot gestiona mai multe valori numite
elemente ➢ determinarea sau setarea numarului de elemente se face cu proprietatea
length
➢ accesarea valorilor se face cu ajutorul unei variabile index
➢ indexul primului element este 0

➢ valorile elementelor pot fi de orice tip inclusiv tablou sau alte colectii
➢ elementele se pot parcurge cu bucla for ... of
➢ metoda push adauga elemente la sfarsitul tabloului
➢ metoda concat genereaza un nou tablou unind elementele a doua tablouri ➢ metoda
slicegenereaza un tablou dintr-o sectiune a unui tablou existent ➢ metoda splice
adauga sau sterge elemente in orice pozitie

➢ metoda sort sorteaza elementele unui tablou

➢ cautarea elementelor se poate face cu metodele find si indexOf

➢ metodele every si some testeaza daca toate respectiv cel putin un element indeplinesc
conditia specificata de o functie de callback

➢ prelucrarea valorilor se poate face cu metodele: filter, map, reduce respectiv join, in
toate aceste cazuri tabloul initial nu este modificat

➢ metoda forEach poate modifica tabloul initial apeland o functie de callback pentru
fiecare element

DE RETINUT:

➢ proprietatea length si metodele indexOf si slice sunt similare cu cele de la tablouri

➢ metodele toUpperCase / toLowerCase returneaza un sir care are toate caracterele
convertite la

majuscule sau litera mica

➢ metodele substr si substring returneaza un fragment din sirul initial

➢ cu metoda split se poate converti un sir la un tablou de siruri, optional se pot specifica
separatorul, care implicit este spatiu, si numarul de siruri

➢ cu metodele padStart / padEnd se pot adauga spatii sau alte caractere, la inceputul sau
sfarsitul unui sir pentru a obtine o latime specificata

➢ metodele trim, trimLeft si trimRight sterg spatiile de la extremitatile sirului

➢ metoda replace inlocuieste un fragment din sirul initial cu valoarea specificata
➢ la siruri prin atribuire se copiaza valoarea, la tablouri prin atribuire se copiaza o
referinta

DE RETINUT:

➢ elementele colectiilor de tip Set au valori unice

➢ elementele pot fi adaugate individual cu metoda add sau la creare unde trebuie trimisa
o colectie ➢ adaugarea aceleiasi valori in colectie va fi ignorata
➢ metoda has verifica daca exista un element cu valoarea specificata in colectie
➢ proprietatea size determina numarul de elemente din colectie
➢ metoda delete sterge un element din colectie
➢ metoda clear sterge toate elementele din colectie
➢ pentru parcurgerea elementelor se pot folosi: metoda forEach si bucla for ... of
DE RETINUT:

➢ elementele colectiilor de tip Map sunt perechi cheie – valoare

➢ elementele pot fi adaugate individual cu metoda set sau la creare unde trebuie trimisa
o colectie ale

carei elemente sunt tablouri de doua elemente

➢ cheile sunt unice, daca se adauga mai multe elemente cu aceeasi cheie, valoarea va fi
suprascrisa

➢ metoda has verifica daca exista un element cu cheia specificata in colectie

➢ proprietatea size determina numarul de elemente din colectie

➢ metoda get returneaza valoarea elementului care are cheia specificata in colectie sau
undefined daca nu exista niciun element cu acea cheie

➢ metoda delete sterge un element din colectie

➢ metoda clear sterge toate elementele din colectie
➢ pentru parcurgerea elementelor se pot folosi: metoda forEach si bucla for ... of

DE RETINUT:

➢ arguments este o variabila locala functiilor si grupeaza toti parametrii functiilor intr-o
colectie similara cu un tablou

➢ atat arguments cat si ... permit gruparea mai multor parametrii intr-o colectie de
valori pentru functiile cu numar variabil de parametri

➢ parametrul ... este un tablou, arguments este o colectie similara cu un tablou

➢ arguments grupeaza toti parametrii functiei

➢ ... este intotdeauna ultimul parametru al functiei

➢ ... grupeaza numai ultimii parametri, daca functia are si alti parametri, numai
parametrii care nu au fost declarati explicit sunt grupati in tablou

➢ arguments nu poate fi folosit in functiile sageata ➢ ... poate fi folosit si pentru functiile
sageata

DE RETINUT:
➢ destructurarea reprezinta extragerea valorilor din tablouri sau proprietatilor
obiectelor in variabile distincte

➢ destructurarea este folosita pentru a simplifica transferul datelor

➢ variabilele se pot declara in momentul destructurarii sau se pot folosi variabile

declarate anterior

➢ in cazul tablourilor in partea stanga a operatorului = se scriu numele variabilelor

separate cu virgula si delimitate de paranteze drepte

➢ in cazul obiectelor se folosesc acolade in partea stanga a operatorului =, implicit se

extrag valorile proprietatilor in variabile cu acelasi nume, daca numele variabilei este
diferit, trebuie scris numeProprietate: numeVariabila

➢ daca la destructurarea obiectelor se folosesc variabile declarate anterior, trebuie

folosite paranteze rotunde pentru a crea o expresie

➢ operatorul ... este folosit pentru a extrage valorile ramase intr-un tablou sau pentru
concatenarea elementelor unor tablouri

JS – Curs 6

DE RETINUT:

➢ obiectul document implementeaza interfata Document si este punctul de pornire pentru

selectia elementelor

➢ metodele getElementsByTagName, getElementsByClassName returneaza o valoare de tipul

HTMLCollection si se pot apela doar din obiectul document. Colectia este actualizata
dinamic cu modificarile din pagina

➢ metoda getElementById selecteaza un element (de tipul Element) dupa valoarea

atributului id si se poate apela doar din obiectul document

➢ valoarea pentru atributul id trebuie sa fie unica in pagina si este responsabilitatea

programatorului sa verifice aceasta unicitate

➢ metodele querySelector si querySelectorAll folosesc selectorii css si pot fi apelate atat

din obiectul document cat si din obiecte te tipul Element

➢ metoda querySelectorAll returneaza o valoare de tipul NodeList, colectia nu este

actualizata cu modificarile ulterioare din pagina
DE RETINUT:

➢ atributele data-* permit transferul de date intre continutul paginii si DOM prin
intermediul proprietatii dataset

➢ numele atributelor trebuie sa aiba prefixul data-

➢ atributele se pot accesa in doua moduri: ca si proprietate sau dupa nume; in ambele
cazuri se elimina prefixul data-, asa cum a fost prezentat in exemplul anterior

➢ valoarea atributelor este de tip string

DE RETINUT:

➢ continutul paginii se poate modifica dinamic cu JavaScript

➢ pentru crearea elementelor se foloseste metoda createElement() implementata de

obiectul document

➢ dupa creare se seteaza atributele, continutul etc cu proprietatile si metodele discutate

anterior

➢ pentru adaugarea in pagina a elementului creat trebuie selectat elementul parinte si

apelata metoda appendChild()

➢ stergerea elementelor din pagina se face apeland metoda removeChild() pentru

elementul parinte; pentru accesarea elementului parinte se foloseste proprietatea
parentNode

➢ copierea elementelor se poate face cu metoda cloneNode(); daca este apelata cu true, se
cloneaza elementul selectat si toate elementele descendente; dupa clonare nodul este
adaugat in pagina apeland appendChild()

➢ modificarea dinamica a continutului paginii poate avea impact negativ asupra

performantei (memorie ocupata, timp de incarcare, alte efecte)

➢ se recomanda reducerea numarului modificari

➢ atunci cand se adauga colectii de elemente este de preferat ca operatia de adaugare a

elementelor in container sa se faca pe un element nou creat (offline) iar la final sa se
adauge containerul in arborele DOM al paginii

DE RETINUT:

➢ se recomanda folosirea fiecarei tehnologii pentru scopul cu care a fost creata: pentru
stilurile de afisare sunt folosite setarile CSS, iar pentru comportamentul dinamic
JavaScript.
➢ in majoritatea cazurilor se poate obtine rezultatul dorit setand clasa cu className sau
setul de clase folosind proprietatea classList (declarate in interfata Element) si metodele
contains(), toggle(), add() si remove()

➢ in situatiile cand efectul nu poate fi obtinut prin setarea claselor se poate folosi
proprietatea style (declarata in interfata Element)

➢ toate proprietatile setate cu in proprietatea style sunt aplicate inline si pot interfera
cu celelalte stiluri din fisierele css datorita specificitatii5

DE RETINUT:

➢ canvas este un element HTML care permite desenarea continutului folosind JavaScript
➢ toate metodele de desenare sunt implementate de obiectul context care se obtine din
elementul

canvas apeland metoda getContext()

➢ sistemul de coordonate pentru desenare are originea in coltul din stanga sus si sensul de
crestere

catre dreapta pe axa orizontala si in jos pe axa verticala

➢ valorile pentru coordonate si dimensiuni sunt in pixeli
➢ pentru setarea punctului de inceput se foloseste metoda moveTo()
➢ sunt patru functionalitati de desenare: rect(), lineTo(), arc() si fillText() ➢ pentru
desenarea arcelor pozitia de inceput trebuie se fie in centrul arcului ➢ trasarea
continutului se face cu metoda stroke()
➢ umplerea continutului se face cu metoda fill()
➢ pentru setarea culorii liniilor se foloseste proprietatea strokeStyle
➢ pentru setarea culorii de umplere se foloseste proprietatea fillStyle
➢ proprietatea lineWidth specifica latimea linei
➢ metodele beginPath() si closePath() definesc un contur inchis
➢ la desenarea arcelor, unghiurile se specifica in radiani

➢ in aceasta sectiune au fost prezentate functionalitatile de baza; pentru mai multe

detalii urmariti materialele din bibliografie

DE RETINUT:

➢ elementul template nu este afisat in pagina, este doar un container pentru structura
➢ la selectie trebuie extras continutul acestui container cu proprietatea content si doar
aceste elemente

se adauga in arborele DOM al paginii

➢ elementele din structura template pot avea clase si atribute care sa permita aplicarea
stilurilor css
➢ atunci cand aceeasi structura se foloseste pentru mai multe valori, este necesara
clonarea elementelor, asa cum este prezentat in exemplul anterior

DE RETINUT:

➢ elementele HTML definite de utilizator permit simplificarea structurii paginii

➢ pentru implementarea unui element definit de utilizator se extinde obiectul HTMLElement
si trebuie

implementate urmatoarele proprietati si metode:

observedAttributes(), attributeChangedCallback(), connectedCallback() si cate o pereche

get / set pentru fiecare atribut

➢ la final elementele se inregistreaza in fereastra browserului, asociind un nume de tag cu

elementul definit anterior prin apelul customElements.define()

➢ numele pentru tagurile definite de utilizator trebuie sa contina minus – pentru a putea
fi procesate de browser

DE RETINUT:

➢ shadow DOM se foloseste atunci cand se doreste evitarea interferentei intre anumite
elemente (adaugate cu template sau definite de utilizator) si structura principala a paginii

➢ continutul adaugat in shadow nu mai poate fi selectat cu css (aceasta este si intentia)

➢ shadow DOM se poate folosi impreuna cu template si elemente definite de utilizator

➢ crearea obiectului shadow se face prin apelul metodei createShadowRoot() pentru

elementul container

➢ continutul se adauga in obiectul shadow

DE RETINUT:

➢ BOM reprezinta setul de obiecte care permit interactiunea cu browserul

➢ in acest curs vor fi discutate persistenta datelor si timerele

➢ persistenta datelor se poate realiza cu trei mecanisme: Local Storage, Session Storage
si IndexedDB

➢ diferenta dintre Local Storage si Session Storage este ca in ultima datele sunt sterse
automat dupa terminarea sesiunii (inchiderea browserului sau tabului in care este
deschisa pagina).
➢ salvarea si citirea datelor se face adaugand atribute la obiectele localStorage si
sessionStorage ➢ daca valorile salvate sunt obiecte este necesara conversia datelor in
format JSON cu metoda

stringify().
➢ tipul valorilor citite este string; in cazul obiectelor este necesara conversia in format
JSON cu

metoda parse().
➢ pentru stergerea datelor se apeleaza metoda removeItem() din storage

JS – Curs 7

DE RETINUT:

➢ propagarea evenimentului in DOM are trei faze: capturing, at-target si bubbling

➢ obiectul eveniment are urmatoarele proprietati: target care este referinta la elementul
destinatie, currentTarget care este referinta la elementul curent la care a ajuns
evenimentul, type care reprezinta tipul evenimentului si eventPhase care reprezinta faza
curenta de propagare

➢ oprirea actiunii implicite pentru eveniment se face apeland metoda preventDefault()

pentru eveniment; oprirea propagarii se face apeland metoda stopPropagation() pentru
eveniment

➢ cand se doreste trimiterea informatiilor suplimentare se poate crea un obiect

CustomEvent si informatiile auxiliare se adauga in atributul detail

➢ adaugarea unui event handler se face cu metoda addEventListener() pentru elementul

destinatie, implicit este adaugat pentru faza bubbling, daca se doreste adaugarea pe faza
capturing metoda trebuie apelata cu al treilea parametru cu valoarea true.

➢ pentru stergerea unui event handler se apeleaza metoda removeEventListener()

➢ pentru trimiterea unui eveniment catre un element se apeleaza metoda dispatchEvent()

pe elementul destinatie

➢ cu exceptia functiilor sageata, obiectul this este conectat la elementul destinatie al

evenimentului

➢ pentru optimizarea incarcarii paginii se recomanda plasarea scripturilor inainte de

inchiderea elementului body
➢ dupa ce se termina de incarcat elementele paginii se genereaza evenimentul
DOMContentLoadedcare are ca destinatie obiectul document.
➢ se recomanda conectarea celorlalte handlere in functia de callback pentru evenimentul

DOMContentLoaded.

➢ pentru reducerea timpului de incarcare a continutului se pot adauga atributele async

respectiv defer la elementele script.

DE RETINUT:

➢ functia setTimeout() permite apelul unei functii de callback dupa expirarea timpului
specificat in milisecunde

➢ dupa expirarea timpului functia de callback este executata o singura data

➢ daca se specifica valoarea 0 pentru timeout, se va adauga imediat functia specificata in
coada de callback-uri insa executia acestei functii nu este imediata
➢ functia clearTimeout() anuleaza un timer; pentru anulare este necesar id-ul timerului
returnat de functia setTimeout()
➢ functia setInterval() permite apelul repetitiv al unei functii de callback la un interval
de timp specificat in milisecunde (este un timer repetitiv)
➢ functia clearInterval() opreste apelul functiei de callback; pentru aceasta este
necesar id-ul timerului returnat de setInterval()

DE RETINUT:

➢ mecanismul exceptiilor este folosit pentru controlarea executiei atunci cand apar erori
in timpul executiei

➢ ridicarea exceptiilor se face cu comanda throw in locul in care apar erori ce nu pot fi
tratate in functia curenta

➢ blocul try contine apelurile care pot ridica exceptii

➢ codul din blocul catch se executa atunci cand apar exceptii

➢ blocul finally se adauga dupa blocul catch pentru a permite executia codului din
interior atat in conditii normale cat si cand apar exceptii
➢ executia scriptului se opreste daca exceptiile nu sunt tratate

DE RETINUT:

➢ pentru conversia la valori numerice se folosesc functiile parseInt() respectiv

parseFloat()

➢ daca nu se poate face conversia atunci se returneaza NaN.

➢ pentru setarea preciziei numerelor reale se foloseste metoda toPrecision()

➢ datorita aproximarilor pentru valorile reale nu se pot folosi operatorii ===, ==, <=
respectiv >=

➢ egalitatea se poate verifica folosind diferenta valorilor in valoare absoluta asa cum a
fost prezentat in exemplul 7.29

➢ conversia valorilor numerice la string se face cu ajutorul metodei toString()

➢ pentru valori calendaristice sau de timp se foloseste obiectul Date; acesta are metode
pentru determinarea datei si timpului curent

DE RETINUT:

➢ functiile asincrone optimizeaza executia codului; apelul unei functii asincrone se

termina imediat; returnarea rezultatelor sau erorilor se face cu functii de callback

➢ obiectele Promise simplifica executia functiilor asincrone oferind un mecanism uniform

de obtinere a rezultatului si tratarea erorilor

➢ functiile asincrone returneaza un obiect Promise care are metode pentru obtinerea
rezultatului final sau a erorilor atunci cand procesarea s-a terminat

➢ un obiect Promise are trei stari pending, fulfilled si rejected

➢ obtinerea rezultatului cand procesarea s-a terminat cu succes se realizeaza prin apelul
metodei then()
➢ obtinerea erorilor atunci cand procesarea a esuat se realizeaza prin apelul metodei
catch() ➢ oricare din aceste metode pot returna un promise daca alte procesari
asincrone sunt necesare

➢ metoda all() se foloseste atunci cand este necesar ca toate procesarile asincrone sa fie
terminate inainte de a continua executia

JS – Curs 8

DE RETINUT:

➢ se recomanda evitarea refolosirii iteratorilor dupa terminarea buclei cu break sau

exceptii.

➢ se poate implementa metoda return() care este apelata in aceste situatii; in metoda
trebuie returnat un obiect {done: true} si setata o proprietate cu care sa se poata
determina terminarea iteratiilor in urmatoarele apeluri ale metodei next()

DE RETINUT:

➢ generatoare sunt functii sau metode care permit controlul executiei cu ajutorul
iteratorilor ➢ functiile generator au * intre function si nume
➢ functiile sageata nu pot fi generatori
➢ la apelul functiei generator se returneaza un iterator, executia este suspendata

➢ la fiecare apel al metodei next next() se executa fragmentul de cod dintre punctul in
care a fost suspendata anterior si una din instructiunile yield, return sau terminarea
codului functiei

➢ pentru returnarea rezultatelor partiale se foloseste comanda yield care poate

contine variabile, expresii, apeluri de functii

➢ atunci cand se returneaza un obiect iterabil sau o functie generator se foloseste

yield*
➢ daca se doreste transferul datelor catre functia generator, aceste date sunt transmise
ca parametri in

apelul next()
➢ executia se poate face cu bucle for...of
➢ daca bucla in care se executa functia generator este oprita cu break iteratorul ajunge
la sfarsit

DE RETINUT:

➢ Jasmine este un framework pentru unit testing in JavaScript

➢ pentru testare se apeleaza codul cu un set de date pentru care se cunosc rezultatele;
dupa executie se compara rezultatele obtinute cu cele cunoscute; testul se executa cu
succes daca aceste doua valori coincid sau esueaza in caz contrar

➢ functia describe() grupeaza testele pentru o functionalitate; are doi parametri: un sir
cu textul explicativ si o functie de callback

➢ testarea functionalitatii se face cu functia it(); are doi parametri: un sir cu textul
explicativ si functia de callback in care se apeleaza codul care trebuie testat

➢ compararea rezultatelor se face cu functia expect() care ca parametru are valoarea

calculata de functionalitatea testata; pentru valorile cunoscute se folosesc functiile
toBe(), toThrowError() sau una din functiile prezentate in Tabelul 8.7

➢ atunci cand se compara valori care sunt numere reale se recomanda folosirea functiei
toBeCloseTo() cu precizia dorita

➢ functiile beforeEach() respectiv afterEach() sunt executate inainte si dupa fiecare

apel it() si permit gestionarea starii obiectelor pentru initializarea valorilor sau
eliberarea resurselor