1.

Protocolul HTTP

Descriere Generala

 Protocol de nivel de aplicație

 Protocol request-response
 Comunicare sincronă
 Date transmise text
 Inițierea comunicației se face doar de către client
 Protocol în principiu stateless

Protocol request-response

 Sesiunea HTTP este formată din cerea clientului și răspunsul serverului

 Nu se menține stare între request-uri succesive
 Pentru menținerea stării unei aplicații se utilizează header-ele (fie prin sesiuni sau prin cookies)

Comunicare sincronă

 După ce face cererea, clientul așteaptă un răspuns

 La primirea răspunsului, clientul încarcă conținutul primit
 Alternativa este AJAX prin care se menține o conexiune HTTP deschisă și se verifică starea
conexiunii

Servere de web

 Livrează resurse web

 Execută cod prin intermediul unor containere
 Suportă virtual hosting, securitate etc.
 Apache, NGINX, IIS etc.

Resurse web
 Nu neapărat fișiere
 Nu neapărat text (deși resursele binare sunt encodate ca text)
 Tipul resursei este definit prin MIME types
 Două perspective asupra resursei, remote și local

Scheme de adresare

 URL(Uniform Resource Locator) - locația unică unei resurse

 URN (Uniform Resource Name) - numele unic al unei resurse
 URI(Uniform Resource Identifier) - identificatorul unic al unei resurse
URL

 Conțin caracterele limbii engleze, cifrele de la 0 la 9 și -_~.

 De asemenea, există o serie de caractere care pot fi folosite cu ”percent encoding” e.g. spațiu este
utilizabil ca %20
 Există o extensie a standardului care permite utilizarea de URL-uri care conțin toate caracterele
UTF-8
  URL-urile se utilizează pentru HTTP, dar și FTP, JDBC etc.
 Forma generală:
o schema://server:port/cale?parametri#fragment
o schema de nume - identifică protocolul utilizat care determină și forma URL-ului
o server - numele sau adresa serverului; se pot obține unul din altul prin intermediul DNS
(Domain Name Service)
 Forma generală:
o schema://server:port/cale?parametri#fragment
o port - identifică aplicație pe calculatorul destinație; browser-ul presupune portul 80
(portul tipic), dar se poate utiliza orice port neocupat
o parametri - listă de perechi cheie-valoare separate de & e.g. name=Andrei&age=32
o fragment - identifică în principiu poziția în interiorul documentului

Metode HTTP

 OPTIONS - returnează setul de metode suportate pentru un URL

 GET - returnează resursa de la locația specificată
 POST - cere serverului să adauge o subresursă la locația specificată
 PUT - cere serverului să înlocuiască resursa de la locația specificată
 DELETE - cere serverului să șteargă resursa de la locația specificată
 PATCH - cere serverului să actualizeze resursa de la locația specificată
 HEAD - echivalent unui GET, nereturnând însă corpul mesajului
 TRACE
 CONNECT

Request-ul HTTP

 O linie de request care specifică metoda și adresa resursei

 Un număr oarecare de header-e
 O linie goală
 (Opțional) un corp de request

Coduri de răspuns

 1xx - informativ
 2xx - succes
 3xx - redirectări
 4xx - erori client-side
 5xx - erori server-side

Response-ul HTTP

 O linie de status, conținând codul de răspuns și justificarea (corespunde codului)

 Un număr de headere de răspuns
 O linie goală
 (Opțional) un corp de răspuns
Conținut multimedia

 Acoperă text non-ASCII, imagini, video etc.

 Definirea tipului de date se face prin tipuri MIME
 Protocolul fiind fundamental un protocol text, datele multimedia trebuie encodate text (i.e.
Base64 encoding)
 Tipul se specifică prin header-ul Content-Type

Mecanisme HTTP

 Header-ele sunt perechi cheie valoare prin care se extinde comportamentu protocolului
 Pot memora tipul conținutului, lungimea, posiblitatea compresiei etc
 Redirect - atunci când server-ul nu poate livra o resursă dar îi știe locația, va răspunde cu un cod
din gama 3--
 Clientul va cere resursa de la noua locație, trecând prin redirecturi succesive până când ajunge fie
la un cod de succes fie la unul de eroare
 Caching - un caz special de redirect
 Fiecărei resurse îi corespunde o cheie ( header-ul ETAG)
 Atunci când clientul cere o resursă pe care o are în cache trimite și ETAG-ul
 Dacă acesta corespunde cu al server-ului i se răspunde cu 304, altfeli se livrează versiunea
curentă a resursei
 Sesiuni și cookies
 HTTP asincron
 Compresie

REST

 Caracteristici REpresentational State Transfer

 Acces la obiecte la distanță peste HTTP
 Vocabular limitat
 Identificarea semanticii prin URL
 HATOAS

JSON

 (una dintre) reprezentările native JavaScript pentru obiecte

 Simplă, nu necesită descrierea tipului
 Orice mecanism de discovery e complicat sau inutil

Miscelanee
 API-uri REST
 Clean URLs
 HTTPS
Javascript- cursul 4
Caracteristici
 Limbaj multiparadigmă (imperativ, funcțional, orientat obiect)
 Interpretat
 Cu tipuri dinamice, determinabile și modificabile la runtime
 Duck-typed
 Inițial client-side, dar au apărut și variante server-side
Tipuri de date
 În principiu un limbaj pur obiectual (există tipuri primitive, dar sunt împachetate în obiecte)
 String, Numeric și Boolean împachetează tipuri primitive
 Array și Object
Tipuri primitive
 String
 Number
 Boolean
String
Șiruri de caratere, delimitate fie prin “” fie prin ’’
o var name = “Andrei”;
o var surname = ‘Toma’;
o var somestring = “i can ‘switch’ quotes”
 Suportă secvențe de escape still C
o var myString = “i can ‘ quote a \” quote ”
Number
 Toate numerele sunt floating point
 Numerele sunt boxed în obiecte Number
 Se pot scrie cu sau fără zecimale
o var x = 3.14
o var y = 3
o var z = new Number(10)
Boolean
 Poate avea doar valorile true și false
o var isTrue = true
o var isFalse = false
 Truthy values și falsy values
 Sunt falsy: false, string-ul vid, numerele 0 și -0, undefined, null și NaN
 Restul valorilor sunt truthy
Tipuri complexe
 Array
 Object
Array
 Array-urile sunt 0 based și reprezintă o listă de obiecte
o var brands=[“Microsoft”,”Apple”,”IBM”]
o var empty = new Array()
o var names = new Array(“Andrei”,”Ana”,”George”)
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
o var person = {name:”Andrei”, age:32}
o var car = new Car(“Dacia”)
 Prima variantă permite crearea de obiecte inline fără definire prealabilă, cea de-a doua rulează și
codul constructorului
Tipuri speciale
 Null
o reprezintă o variabilă cu tip definit, dar care nu ține referința unui obiect
 Undefined
o 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
o var s = new String(19)
o var s = (1984).toString()
 Alte metode toExponential(), toFixed(), toPrecision()
 Boolean to String
o var s = new String(false)
o var s = false.toString()
Conversii
 String la Number
o var s = new Number(“5”); //rezultatul este 5
o var s = new Number(“”);//rezultatul este 0
o var s = new Number(“abc”);//rezultatul este NaN
o parseInt(“5.2”)
o parseFloat(“5.2”)
 isNaN() se poate utiliza pentru verificare conversiei
Conversii automate
 adunarea unui Number cu un String va produce un String
 adunarea unui obiect cu un String va produce un String
 afișarea unui obiect va face conversia la String
Operatori
 Operatori aritmetici
 Operatori de atribuire
 Operatori string
 Operații între tipuri diferite
 Operatori bitwise
 Operatori de comparație
 Alți operatori
Operatori aritmetici
 Presupunând că cei doi operanzi sunt de tip number:
o a + b este suma celor 2 numere
 o a - b este diferența între cele 2 numere
o a / b este rezultatul împărțirii reale
o a * b este produsul
o a % b este restul împărțirii întregi
o a++ rezultatul incrementării
o a-- rezultatul decrementării
Operatori de atribuire
 Atribuie o valoare cu eventuale modificări variabilei din stânga
o a=b
o a += b
o a -= b
o a %= b
o a /= b
o a *= b
Operatori string
 Operatorii + și += sunt supraîncărcați pentru a suporta concatenarea, resepectiv atribuirea cu
concatenare a unor string-uri
Operatori intre tipuri diferite
 Aplicarea operatorului + între un String și un Number va produce un String
 Din moment ce numerele sunt de fapt tot obiecte, mai precis se concatenează String-ul cu
rezultatul apelării metodei toString a obiectului (valabil și pentru concatenarea unui string cu
obiecte de alt tip decât Number)
Operatori bitwise
 Operatori la nivel de bit:
o & și binar între 2 operanzi
o | sau binar
o ^ xor binar
o ~ not binar
o << shift left
o >> shift right
 Toate operațiile lucrează cu numere pe 32 de biți
Operatori de comparative
 Rezultatul este un Boolean
o a == b a este egal cu b
o a != b a nu este egal cu b
o a > b a este mai mare ca b
o a >= b a este mai mare sau egal cu b
o a < b a este mai mic ca b
o a <= b a este mai mic sau egal cu b
o a === b a este egal cu b și are același tip
o a !== b a fie nu este egal cu b, fie nu are același tip
Alti operatori
 Typeof returneză tipul operandului
 + unar poate fi utilizat pentru conversia unui număr la String
Controlul fluxului
 un bloc este un set de intrucțiuni între {}
 if
  switch
 for
 foreach
 while
 do..while
 break, continue, label
Operatori cu stringuri
 http://www.w3schools.com/jsref/jsref_obj_string.asp
Operatori cu array-uri
 http://www.w3schools.com/jsref/jsref_obj_array.asp
Javascript-functii si obiecte – cursul 5
Functii
 Funcțiile sunt (în orice limbaj) o modalitate de reutilizare a codului
 Funcții în limbaje cu tipuri dinamice
o nu specifică tipul parametrilor (determinat la runtime)
o nu specifică tipul rezultatului (se pot returna rezultate diferite pe ramuri de execuție
diferite)
o liste de parametri de lungime variabilă
Definirea unei functii
 Cuvântul cheie function
o [ex1]
 Return permite întoarcerea unui rezultat
 Tipul de rezultat nu e neapărat omogen
 Dacă se folosește return fără parametru, se returnează undefined
Parametrii
 Funcțiile pot primi o listă de parametri
o [ex2]
 Funcția nu este obligată să utilizeze toți parametrii
 În interiorul funcției, parametrii sunt accesibili și printr-un obiect similar cu un array special
(arguments)
 Array-ul arguments cuprinde atât parametrii numiți cât și cei nenumiți
 Alternativ, se pot utiliza rest parameters (ECMA6)
Variabile locale si globale in functii
 Un scope este un set de variabile la care o funcție are acces
 Există un scope global și un set de scope-uri imbricate pentru funcții
 Javascript caută valoarea unei variabile printr-un lanț de scopes
Variabile locale si globale in functii
 Se pot declara variabile globale în orice punct (deși nu este o idee bună)
 La căutarea unei varibile se încearcă scope-ul curent, după care se trece la scope-ul superior
 Funcțiile din interiorul altei funcții determină păstrarea scope-ului părinte
Lambda-uri
 Javascript suportă funcții anonime (lambda-uri)
 Lambda este denumirea tradițională pentru expresii prin care se crează funcții anonime
o [ex4]
 Utilitatea este dată de cazurile în care o funcție nu este gândită să fie reutilizabilă (e.g.
comportamentul pe un click)
Functii ca variabile
 Funcțiile anonime se pot stoca în variabile
o [ex4]
 Pentru că variabila conține efectiv funcția, se poate utiliza ca atare, cu aceleași reguli legate de
valorile returnate ca orice altă funcție
o [ex5]
Functii ca parametrii
 Funcțiile pot fi trimise ca parametri la alte funcții și returnate din alte funcții
 O funcție care primește ca parametru o altă funcție se numește funcție de grad mai mare ca 1
(higher order function)
 Consecința este posbilitatea de a scrie funcții părinte polimorfe
 [ex6]
Functii ca valori returnate
 Funcțiile se pot returna din alte funcții
 Spre deosebire de modelul clasic (C++), ceea ce se returnează nu este un pointer la o funcție
 Funcțiile returnate trebuie să fie concrete, deci se returnează cu variabilele la care aveau acces în
momentul creării
Functii ca valori returnate
 În alte limbaje, variabilele locale există atât timp cât există funcția declaratoare, în JS, atât timp
cât sunt necesare
 Se spune că funcția este închisă asupra contextului ei de creare
 Funcția își amintește deci valorile variabilelor accesibile în momentul creării
 [ex7]
Eval si functii ca text
 Javascript poate executa text arbitrar prin intermediul funcției eval
 Textul trebuie să fie o primitivă string
 Mecanismul presupune crearea unei funcții anonime în jurul textului executabil
o [ex8]
Modelul callback
 Un model alternativ de scriere a codului
 O funcție va apela alte funcții atunci când termină execuția
 Funcțiile apelate pot fi diferite, dependent de rezultatul execuției funcției apelante
 La limită, o paradigmă diferită de programare (Continuation Passing Style)
 [ex9]
FUnctii speciale pentru array-uri
 Array-urile suportă o serie de funcții de ordin mai mare ca 1 care permit manipularea automată a
fiecărui element
 forEach - aplică fiecărui element funcția trimisă
o https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
 every - returnează true dacă funcția condiție este adevărată pentru toate elementele array-ului
o https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/every
 some - returnează true dacă funcția condiție este adevărată pentru cel puțin unele dintre
elementele array-ului
o https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
 filter - returnează un array cu elementele pentru care funția condiție este adevărată
o https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
 map - returnează un array obținut prin aplicarea funcției fiecărui element
o https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
 reduce - returnează o valoare obținută prin aplicarea funcției elementelor array-ului de la stânga la
dreapta
o https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
 reduceRight - returnează o valoare obținută prin aplicarea funcției elementelor array-ului de la
dreapta la stânga
o https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight
Incapsulare functionala
 Permite executarea unui bloc de cod fără ca acesta să fie accesibil în spațiul global
o [ex10]
Obiecte
 Javascript este un limbaj bazat pe prototipizare spre deosebire de limbajele clasice
 Obiectele sunt create prin copierea unui prototip, nu pe baza unei clase
 Obiectele sunt modalități de grupare a caracteristicilor și comportamentului
 De fapt, funcțiile sunt caracteristici ca oricare altele și sunt accesibile ca atare
 Obiectele au structură modificabilă la runtime
 Mai mult, prototipul unui obiect poate fi modificat la runtime, modificând prototipul tuturor
obiectelor bazate pe el
 Orice obiect poate fi modificat, inclusiv clasele core (deși nu este o idee bună decât atunci când
reprezintă o corectare autentică a slăbiciunilor limbajului)
JSON
 Reprezentarea simplificată a obiectelor
 Foarte populară pentru simplitatea la transferul în rețea
 Preferat în serviciile REST
o [ex11]
Prototipuri
 Reprezintă “modelul” după care se construiește un obiect
 Un obiect preia metodele prototipului său, pe care le poate însă suprascrie (method and attribute
hiding)
 [ex13]
Constructori si new
 Constructorul este o simplă funcție care se poate apela cu operatorul new
 Se scriu (convențional) cu literă mare pentru a denota semnificația specială
 new creează o nouă instanță de obiect pe baza prototipului
 [ex14]
 Pași la aplicarea new
o se creează un nou obiect moștenitor al prototipului
o se apelează constructorul
o rezultatul va fi chiar instanța nouă
 Lantul de prototipuri
 Prototipurile sunt organizate într-un lanț care se termină cu null
 Dacă o proprietate accesată nu este disponibilă în obiectul curent, se caută în prototip
 Daca nu există în prototipul acestuia, se continuă prin lanțul de prototipuri până se găsește null
 Consecințe
o O relativă ineficiență
o Rezultate neașteptate dacă o proprietate crezută undefined există undeva în lanț
o Un copil maschează practic o proprietate din lanț prin definirea ei de către el însuși
Hasownproperty
 Permite verificarea faptului că o proprietate este prezentă în obiectul curent, nu prin căutarea în
lanțul de prototipuri
 https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
This
 this este cuvântul cheie prin care se accesează instanța curentă a obiectului
 permite diferențierea execuției pentru instanțe ale aceluiași tip
o [ex14]
Incapsulare obiectuala
 Încapsularea se poate face printr-o serie de variante
 Cea preferabilă este funcțională, bazată pe closures
o http://www.intertech.com/Blog/encapsulation-in-javascript/
Modele de invocare functionala
 Method - apelul unei funcții stocate într-un obiect
o are drept consecință bindarea obiectului this la instanța curentă
 Function - apelul unei funcții care nu este stocată într-un obiect
o this este bindat la obiectul global
 Constructor - invocarea unei funcții cu operatorul new
o constructorii sunt în principiu invocați doar cu new
o return va returna instanța creată a obiectului
 Apply - aplicarea explicită a unei funcții
o primul parametru este this (se poate selecta la apel)
o restul parametrilor sunt lista de parametrii a funcției
 [ex15]
Alte mecanisme functionale
 Currying
 Recursie
 Cascade funcționale (chaining)
 Memoizare
Module
 Permit ascunderea numelui unei funcții în spațiul de nume global
 Se pot utiliza biblioteci cu funcții identice fără conflicte
 [ex16]
Modele de creare obiectuala
 Object initializars - crearea obiectului prin definirea în JSON
o echivalent cu un call la new Object()
 Prin apelul unui constructor
 Prin apelul Object.create
o primește ca parametru prototipul pentru obiectul creat
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
Obiectul function
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
Obiectul object
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
JQuery – cursul 6
Obiective
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
Chaining
 Metodele JQuery se pot apela în serie
 Fiecare metodă returnează un wrapped set
 Wrapped sets sunt iterabile și au toate metodele JQuery
Cautarea intr-un context
 metodele JQuery se pot aplica întregului document sau unui subset
 un subset din document poate să fie o componentă sau un set rezultat în urma executării unei
metode de selecție JQuery
Avantaje JQuery
 Selectorii css nu au o modalitate de a accesa părintele
 Părți de prezentare care se execută în momentul în care browser-ul ajunge la ele
 Mecanisme complexe de traversare
 Comunicare simplificată cu resurse remote
Incarcarea bibliotecii
 Cel mai sigur, codul JS se va rula la încărcarea DOM (pe document.ready)
 Funcțiile JQuery sunt apelabile și pe baza unui alias ( $ )
Forma generala
 Un șir de operații de selecție și de modificare
 Unele operații modifică wrapped set-ul pe care se lucrează
 Cea mai simplă formă
o $(selector).action()
Accesul la obiecte DOM
 addClass() - adaugă o clasă CSS la un element
o $( "p" ).addClass( "myClass yourClass" );
 removeClass() - elimină o clasă CSS a unui element
o $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
 hasClass() - determină dacă o clasă este prezentă
 toggleClass() - adaugă sau șterge una sau mai multe clase de pe elementele selectate
 css() - returnează valoarea proprietății css specificate, iar dacă există un al doilea parametru
stabilește valoare
 html() - fără parametru returnează conținutul HTML al primului nod dintre nodurile selectate
o $( "div.demo-container" ).html();
 eventualul parametru este șirul cu care va fi înlocuit conținutul tuturor nodurilor selectate
o $( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
 attr() - fără parametru, returnează valoarea atributului pentru primul element selectat
 o $( "input" ).attr( "disabled");
 cu parametru, stabilește valoarea atributului pentru toate elementele selectate
o $( "input" ).attr( "checked", true );
 remvoveAttr() - șterge proprietatea pentru elementele selectate
 prop() - fără parametru, returnează valoarea proprietății pentru primul element selectat
o $( "input" ).prop( "disabled");
 cu parametru, stabilește valoarea proprietății pentru toate elementele selectate
o $( "input" ).prop( "checked", true );
 removeProp() - șterge proprietatea pentru elementele selectate
Accesul la controale INPUT
 val() - returnează valoarea primului element selectat
o $( "#single" ).val( );
 cu parametru, stabilește valoarea tuturor elementelor selectate
o $( "#single" ).val( "Single2" );
Navigare
 each() - pentru fiecare element selectat, aplică funcția trimisă ca parametru
 add() - adaugă un nou set de elemente la setul anterior (care nu e modificat)
 andSet() - adaugă setul selectat anterior
 andSet() - adaugă setul selectat anterior la setul curent
 children() - selectează copiii elemetului pe care este aplicat (elementele DOM)
 contents() - selectează copii elementului pe care este aplicat (toți copii inclusiv noduri text)
 siblings() - toate elementele care sunt copii ai aceluiași părinte cu cel selectat
 next(), prev() - elementul care este sibling-ul imediat următor, respectiv imediat anterior
 nextAll(), prevAll() - toate elementele următoare, respectiv anterioare
 filter() - selectează doar elementele care ar fi returnate de selectorul transmis dintre elementele
anterioare
o dacă parametrul este un predicat, selectează doar elementele pentru care predicatul este
adevărat
 not() - elimină dintre elementele selectate elementele specificate de selectorul sau predicatul
trimis ca parametru
 parent() - parintele elementului selectat
 parents() - toți ascendenții elementului selectat
 parentsUntil() - toți ascendenții elementului selectat până la găsirea unui element de tipul
specificat
 slice() - echivalentul lui array slice, selectează doar elementele dintre cei 2 indici
 map() - echivalentul lui array map, produce un set care conține rezultatul aplicării funcției map
asupra elementelor selectate
 find() - caută prin descendenții elemetelor selectate după un nou selector (asemănător cu un
children cu o condiție)
 end() - reversează modificările făcute de ultima operație de filtrare asupra setului de obiecte
selectate și returnează setul anterior
Evenimente
 o serie de metode pentru majoritatea evenimentelor suportate de tag-urile HTML
 de exemplu click() primește ca parametru un handler pentru evenimentul mouse click
 permit asocierea facilă a unor handler-e la un set de elemente selectabil
 http://api.jquery.com/category/events/
 on() - permite specificarea unui handler pentru mai multe evenimente în același timp
 metodele click, focus etc sunt de fapt metode wrapper pentru on
 concepte legate de evenimente: propagare, evenimente default, current target
 se pot și declanșa evenimente manual creînd un element cu Event()
 evenimentul se poate declanșa cu metoda trigger()
 se pot de asemenea trata evenimente care țin de browser, nu de document, cu error(), resize() și
scroll()
Adaugarea de elemente noi
 Metode care permit adăugarea dinamică de noi elemente la DOM
 append() - inserează parametrul la sfârșitul colecției de copii a elementelor selectate
 prepend() - inserează parametrul la începutul colecției de copii a elementelor selectate
 before() - inserează conținutul înaintea elementelor selectate (în părinte)
 after() - inserează conținutul după elementelor selectate (în părinte)
 appendTo()/prependTo() - inserează toate elementele selectate în elementul specificat ca
parametru
 wrap() - inserează în jurul fiecărui element selectat
 wrapAll() - inserează în jurul tuturor elementelor selectate
 unwrap() - elimină părinții elementelor selectate
 wrapInner() - inserează în jurul conținutului elementelor selectate
Stergerea de element
 remove() - șterge elementele selectate din DOM
 detach() - detașează elementele selectate de la DOM (le șterge din DOM, dar pot fi reinserate
ulterior)
 empty() - șterge toate nodurile copil ale elementelor selectate (inclusiv noduri text)
Accesul la un serviciu remote
 O serie de metode care ascund complexitatea(și lipsa de omogenitate) a mecanismului AJAX
 ajax()
 metode simplificate
o get()
o post()
Alte metode
 serialize() - metodă aplicabilă unui form sau unui set de componente de intrare pentru a obține un
string URL encoded cu valorile câmpurilor
 serializeArray() - metodă similară cu serialze care produce un array de perechi cheie valoare
(fiecare este un obiect)
Efecte
 hide() - ascunde elementele selectate
 show() - afișează elementele selectate
 toggle() - schimbă starea elementelor selectate între afișat și ascuns
 fadeOut(), fadeIn(), fadeTo() - aplică efectul fade componentelor selectate
 slideUp(), slideDown(),slideToggle() - aplică efectul slide componentelor selectate
 animate() - aplică o animație complexă (cu mai multe componente e.g.poziție, mărime)
componentelor selectate
 stop() - oprește animația curentă
 Intro Node.js- arhitecturi web- cursul 7
Principii node
 Server-side JavaScript
 Omogenitate de limbaj
 (Relativ) axat pe dezvoltare rapidă
 Renunță la utilizarea unor mecanisme complicate pentru cod mai ușor de scris și înțeles
Compromisuri node
 Ușor de creat servere clasice (dar mai puțin control asupra socket-ului propriu-zis)
 Ușor de creat task-uri paralele (dar fără acces la thread-uri)
Evenimente
 Mecanismul fundamental al Node este ciclul de evenimente
 Există mult mai multe evenimente decât în JavaScript utilizat în browser
 Evenimentele se tratează prin atașarea unui handler cu metoda on
 Node se ocupă de un singur task la un moment dat
 Operațiile sunt neblocante și apelează callback-uri la terminare (eventual callback-uri diferite
pentru finaluri diferite)
Un server Node.js
 Pachetul net expune funcționalitatea de comunicare pe socket
 Pași
o creare server
o răspuns la evenimentul de conectare a unui client
o răspuns la cererile clientului
 N.B. nu se poate răspunde la cereri decât daca evenimentul de conectare a fost emis
Arhitecturi web
 Arhitecturi clasice MVC
o Arhitecturi request-based
o Arhitecturi component-based
 Arhitecturi asincrone
o Aplicație asincronă monolitică
o Aplicații component-based
o Aplicație client-side Model View Controller (deși modelele MVC client-side sunt destul
de diferite de un MVC pur)
Arhitecturi clasice
 Bazate pe paradigma request-response
 Browser-ul încarcă răspunsurile la cererile utilizatorului ca pagini noi
 Probleme
o Lipsa fundamentală de stare
o Mecanismul de transfer e limitat la expresivitatea dată de URL encoding
o Timp de răspuns vizibil utilizatorului
Arhitecturi request based
 Codul conține cât mai puțină abstracție a mecanismelor HTTP
 Starea este menținută prin cookies sau sesiuni
 Comportament complex prin interceptori (rescrierea requestului HTTP)
 Exemple: JSP,Struts
Arhitecturi component based
 Serverul menține un arbore de componente
 La fiecare request, arborele se completează cu valorile valide și se întoarece un nou HTML
generat
 Starea este ținută în general prin sesiuni
 Exemplu JSF
Arhitecturi SPA
 Bazate pe paradigma Asynchronous Javascript and XML
 Browser-ul încarcă doar uneori pagini noi, în general modificând dinamic conținutul paginii
existente
 La limită, single page apps, unde browserul încarcă o singură pagină
 Probleme
o (relativ) mai dificil pentru motoarele de căutare să acceseze toate end-point-urile
aplicației
o în varianta unei aplicații monolitice, cod foarte dificil de întreținut
Aplicatii asincrone monolitice
 O singură pagină, care se actualizează dinamic prin JQuery
 Starea se ține pe client, în variabile JavaScript
 Foarte simplu de utilizat pentru aplicații triviale
Aplicatii component based
 O singură pagină, care este organizată sub forma unei structuri de componente
 Starea se ține pe client, în variabile JavaScript
 Componentele se actualizează asincron prin reîncărcarea stării de pe server sau modificarea din
client după primirea unor confirmări
 Exemplu: JQuery UI
Aplicatii client-side MVC
 Pentru utilizator, o singură pagină
 Organizată în fișiere multiple
 Starea se ține pe client, în variabile JavaScript
 Ascunde detaliile comunicării cu server-ul și promovează separation of concerns
 Exemplu: AngularJS
Express
 Biblioteca node.js pentru implementarea de aplicații web clasice si spa-uri
 Suportă o gama variată de abordări
 Pentru varianta clasică, are o serie de motoare de definire de modele pe partea de view
 Request-based
 Cross-cutting concerns pot fi tratate prin middleware
Arhitectura SPA – cursul 8
Front-end
 Javascript, CSS și HTML
 Necesitatea de a organiza o cantitate mare de cod Javascript, o structura complexă și un număr
mare de reguli de prezentare
Front-end
 AngularJS permite organizarea aplicației într-o serie de view-uri parțiale
 Comportamentul corespunzător fiecărui view este separat
 Controller-ul populează un scope pe care view-ul îl afișează
 Navigarea între view-uri se face printr-un router
Controller-e
  Conțin partea de logică executabilă a front-end-ului
 Transmite valori view-ului corespunzător prin intermediul unui scope
 Controller-ul poate accesa scope-ul direct
 View-ul bindează controale de input la scope prin directiva ng-model
 Controller-ele au acces la funcționalitate suplimentară specificând biblioteci în lista de parametri
 Angular injectează instanțe concrete de obiecte în variabilele specificate
View-uri
 Sunt părți ale interfeței implementate separat
 Sunt populate automat de un controller
 View-urile și controller-ele sunt legate prin rute
 Ui.router adaugă funcționalitate suplimentară (nested views)
Back-end
 Express permite folosirea unui back-end RESTful
 Pentru acces REST, vom livra JSON
 API-ul REST poate fi utilizat de orice aplicație (aplicația din browser-ul clientului este doar una
dintre aplicațiile client posibile)
 Prin definiție, cererile unui SPA vor fi cross-domain
 Pentru a permite cererile, vor trebui setate header-e suplimentare (cross-origin resource sharing)
 Soluția este cors, un modul de node care funționează ca un middleware
Middleware
 Express este axat pe ideea de middleware
 Un middleware are access la request, response și eventualul următor middleware dintr-un lanț
Sequelize
 Permite abstractizarea aceesului la baza de date
 Rezolvă object relational mismatch
 Sursa efectivă de date este configurabilă, obiectele persistente având aceeași formă indiferent de
bază

CURSUL 9
ORM
Object Relational Mapping
 Asigură persistența unor obiecte într-o bază de date relațională
 Elimină nevoia de a scrie cod SQL
 Rezolvă problema diferenței de paradigmă între reprezentarea datelor în bazele de date relaționale
și limbajele de programare obiectuale
Sequelize

 ORM pentru Node.js

 Bazat pe evenimente, ca restul framework-ului
 Suportă și migrații
 interacțiunea se face printr-un obiect Sequelize
 ConectarePe lângă parametrii tipici (server, username, port etc.) se poate stabili logging și dacă
valorile undefined sunt inserate sau nu ca NULL
 Crearea tabelelor
 Sincronizare
o distruge datele existente (șterge structura existentă și o înlocuiește cu una nouă)
 Migrații
 o nu distruge datele existente (deși este posibil ca ele să devină invalide)
o migrațiile pot fi multiple, iar prin definiție un set de migrații e reversibil (deși datele s-ar
putea să devină invalide)
 Obiecte ale modelului
 Conceptul de convention over configuration
 Sequelize define
o în forma cea mai simplă, numele entității (numele entității va determina și numele
tabelei) și o listă de nume de câmpuri însoțite de tipul acestora
 Tipuri de date
 Multiple tipuri de date, reprezintă generic tipurile de date din bazele relaționale
 http://sequelizejs.com/docs/latest/models#data-types
 Salvarea obiectelor
 Obiectele se salvează creând un obiect compatibil și apelând build/save sau create
 La momentul creării, se apelează eventualele validări, apoi se execută un statement insert
 Query-uri
 Obiectele se pot regăsi prin intermediul metodei find(primul obiect persistat) sau findAll (toate
obiectele peristate)
 Metoda primește o serie de parametri care permit definirea unui comportament la fel de puternic
ca SQL
 Parametri find
 where - permite selecție bazată pe condiții
 attributes - proiecție (selectarea doar anumitor coloane)
 include - joncțiune
o o implementare de eager loading (încarcă un obiect copil sau o serie de obiecte copil
atunci când este încărcat părintele)
 Delete
 Obiectele pot fi șterse cu destroy
 Pentru a fi distrus, un obiect trebuie încărcat din bază
 Update
 obiectele pot fi actualizate cu metoda save
 ca parametru se pot specifica atributele care trebuie modificate (i.e. în cazul în care la interfață
restful se primește obiectul modificat ca atare)
 Asocieri
 Sequelize suportă asocieri 1-1, 1-m, m-m
 Pentru definirea asocierilor se definesc mai întâi cele două entități
 Pentru asocieri 1 la 1, ambele entități specifică hasOne una față de cealaltă
 Pentru asocieri 1-m entitatea dependentă este legată de părinte prin belongsTo, iar părintele
specifică hasMany pentru entitatea copil
 Pentru asocieri m-m ambele entități specifică hasMany una pentru alta
 Atunci când se încarcă o entitate se pot încărca entități dependente prin intermediul include
 La definirea entității părinte se poate defini și comportamentul de cascadare (e.g. dacă părintele
este șters, trebuie sau nu șterși și copii)
 Asocierile pot fi manipulate prin intermediul unor metode autogenerate
 presupunând două entități, Author și Book și două obiecte author și book
o author.addBook(book) adaugă o asociere
o author.removeBook(book) șterge o asociere
 o author.setBooks([book]) șterge toate asocierile și adaugă o asociere pentru book
 toate metodele de mai sus suportă condiții de selecție
 Validări
 Permit verificarea respectării unor condiții
 Se definesc pe model
 Se apelează automat la create
o metoda primește ca parametru erorile care vor fi populate după validare
 Există o serie de validări suportate, care pot fi extinse cu validări custom
o http://sequelizejs.com/docs/latest/models#validations
 Query-uri native (raw)
 Este posibilă execuția de query-uri SQL clasice (cu metoda query)
 Util în momentul în care se ajunge la o problemă de perfomanță dintr-o slăbiciune de
implementare a framework-ului
 Anumite operații posibile la nivelul bazei nu sunt acoperite de conceptul de ORM (e.g.
managementul rolurilor)


Cursul 10
Directive și scopes
Scopes
 Un scope este un context de execuție
 Scope-urile sunt ierarhice, replicând structura DOM-ului aplicației
 Rădăcina structurii ierarhice este un rootScope
 Fiecare aplicație are un singur rootScope, care poate fi folosit pentru starea globală (deși există
alternative)
 În principiu, scope-urile moștenesc scope-ul care le conține
 Excepția sunt scope-urile izolate, care nu au acces decât la ele însele
 Scope-urile servesc la transmiterea datelor între controller-e și view-uri, jucând și rolul unui view
model
 Funcții ale scope-ului
 Watch - adaugă comportament pe schimbarea unei valori din model (e.g. schimbarea valorii unui
atribut, variabile din scope-ul global etc)
 Apply - propagă schimbări care nu apar direct în model
 Directive
 Directivele sunt elemente, atribute etc care decorează elemente existente de DOM
 Directivele pot adăuga elemente suplimentare (extinde DOM) sau adăuga comportament la
elemente existente
 Efectiv, directivele se adresează componentei AngularJs HTML compiler
 Angular JS în sine este reprezentat printr-o serie de directive
 Se pot implementa directive custom, cu diverse efecte
 Numele directivelor

 La identificarea codului pentru o anumită directivă, numele acesteia este normalizat
 Numele normalizat este scris camel case, fără prefix suplimentar
 Pași
o se elimină prefixul data- sau x-
 o se convertesc numele delimitate (prin -,_ sau :) la forma camel case
 Următoarele exemple reprezintă aceeași directivă (ngMisc):
o ng:misc
o data-ng-misc
o x_ng_misc
 La definire, directivele vor fi scrise camel case, dar la utilizare pot fi scrise în orice formă
normalizabilă
 Utilizarea directivelor
 Directivele se pot utiliza ca elemente separate, atribute pe elemente existente, clase css sau
comentarii
 Ca regulă, directivele se utilizează ca elemente sau atribute, celelalte două variante fiind depășite
și necesitând specificare explicită
 Bindings
 Angular verifică textul din atribute pentru înlocuirea eventualelor binded values (prin intermediul
$compiler)
 pentru atribute care ar genera conflicte de nume, se poate utiliza ngAttr
 valorile bound sunt actualizate pe baza eventualelor watch-uri (se pot înregistra evenimente
pentru tratarea schimbărilor)
 Directive template
 Adaugă cod html la DOM
 Pot utiliza orice variabilă din scope-ul vizibil
 Scope-ul vizibil este cel al controller-ului curent pentru contextul în care a fost utilizată directiva
 Template-ul poate fi inclus și ca fișier extern
 Fișierul extern utilizat poate fi precizat fie ca string, fie sub forma unei funcții care returnează un
string
 În cel de-al doilea caz, funcția care generează numele template-ului nu are acces la scope
 Tipul de directivă
 În cazul tipic directivele se pot utiliza ca atribute sau ca elemente
 Comportamentul poate fi modificat cu opțiunea restrict
o A - numai atribut
o E - numai element
o C - numai clasă
 Directive cu scope izolat

 Având acces la scope, directivele sunt dependente de ce livrează controller-ul
 Se poate izola scope-ul directivei pentru a o face reutilizabilă
 Dacă directiva are nevoie de informații suplimentare, se vor trimite prin intermdiul unui atribut
 Dacă scope-ul este izolat, directiva va avea acces doar la elementele care au fost puse explicit în
scope
 În mod normal, un scope are ca prototip scope-ul părinte, în acest caz însă, scope-ul izolat nu are
nicio informație descpre scope-ul care îl conține
 Directive link
 Directivele care specifică o funcție link pot manipula DOM-ul
 prototipul funcției link are parametrii
o scope permite accesarea unui angular scope (cel care era accesibil directivei)
o element este elementul pe care a fost atașată directiva
 o attrs este o serie de perechi cheie-valoare cu atributele la care avea acces directiva
 Directive wrapper

 Dacă scope-ul unei directive este izolat, aceasta va avea acces doar la valorile care sunt precizate
explicit (copiate din scope-ul extern)
 Se poate crea însă un scope izolat peste tot scope-ul extern prin opțiunea transclude
 Directiva creează propriul scope care nu modifică scope-ul extern (doar îl copiază)
 Acest stil de directivă permite definirea de componente reutilizabile, directiva nefiind dependentă
de ceea ce conține

CURSUL 11
Servicii
Dependency injection
 Mecanismul de dependency injection unul dintre fundamentele angularjs
 Prin dependecy injection, entitatea care are nevoie de un serviciu extern este complet decuplată
de definiția acestuia
 Dependențele pot avea la rândul lor alte dependențe
 Dependențele sunt obiecte singleton
 Avantaje DI
 Moduri de acces la o dependență
o instanțiere cu new - are dezavantajul că utilizatorul este puternic cuplat cu dependența
o din starea globală - dezavantajul unei cuplări puternice și posibile conflicte de nume în
spațiul global
o injecție de dependențe - în angular prin intemediul unui injector service, responsabil
pentru localizarea, instanțierea și injectarea dependențelor
 Dependency injection

 Componentele angularjs sunt obținute de codul care le utilizează prin dependency injection dar
mecanismul poate fi utilizat și pentru componente specifice aplicației
 Se pot injecta componente prin:
o metoda controller
o metoda run
o metoda config
o metodele de crearea a unor componente proprii
 Modalități de injecție

 Adnotări array inline

 Adnotări inline implicite
o se poate configura angular sa arunce o eroare dacă se folosesc adnotări implicite (ng-
strict-di)
o codul nu va funcționa dacă numele sunt rescrise (e.g prin minificare)
 $inject
 Definirea de componente

 Componentele se definesc pe baza unei metode factory care livrează o instanță a

componentei (din moment ce componentele sunt singleton, va exista o singură instanță a
componentei)
 Componentele reprezintă o alternativă la $rootScope ca stare globală
 Moduri de definire a componentelor
 Modurile de definire a unei componente sunt abordări particulere ale aceluiași mecanism
(provider)
 Nu toate componentele pot fi injectate în orice context
 Value și constant
 Sunt o modalitate simplă de a configura global aplicația
 Se creează prin metoda value a unui modul, respectiv prin metoda constant
 Constantele sunt utile pentru că celelalte servicii nu sunt inițializate la momentul rulării metodei
config a aplicației
 Factory
 Componentele se creează
o fie prin metoda factory a unui modul
o fie aplând metoda $provide în interiorul unui modul
 Componentele create ca factory pot avea dependențe externe
 Sunt inițializate atunci când sunt referite prima dată, spre deosebire de values
 Service
 Serviciile produc componente pe baza unei metode new (prin invocarea unui constructor)
 Providers
 Cea mai complexă formă de componentă
 Componentele create cu provider sunt configurabile (deci pot fi reutilizate mai ușor)
 Providerii sunt configurați înainte de inițializare și returnează componenta pe metoda $get
 Comparație
 https://docs.angularjs.org/guide/providers
 Watch
 Metoda watch permite rularea de cod la schimbarea unei valori
 Atunci când o valore este bound, angular creează un watch intern pentru ea
 Atunci când angular apelează metoda $digest se verifică toate watch-urile și, dacă valoarea s-a
schimbat, se apelează eventualele listener-e
 Apply
 metoda $apply invocă automat $digest, deci și listenere-le pe watch-uri
 metoda apply poate fi utilizată pentru a sincroniza starea aplicației cu cod extern
 Filtre
 Filtrele formatează valoarea unei expresii
 Pot fi folosite atât în partea de view cât și în partea de controller sau în directive și servicii
 În view filtrele se aplică prin expresii
o {{ expresie | filtru }}
 Filtrele sunt chainable deci se poate scrie:
o {{ expresie | filtru1 | filtru2 | filtru3 }}
 Filtre
 Pentru a folosi un filtru într-un controller, directivă sau serviciu, acesta va trebui injectat
 injecția folosește un nume standard <nume>Filter
 Filtre custom
 Filtrele custom se pot defini prin metoda filter a unui modul
 Se utilizează la fel ca filtrele incluse în angular și pot primi parametri pentru particularizarea
comportamentului
 Validări
 Validările simple se pot face prin intermediul unui watch sau (cel mai bine) pe baza imlementării
unei directive de validare