Protocolul HTTP

Descriere generală
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
URL-urile se utilizează pentru HTTP, dar și
FTP, JDBC etc.
Forma generală:
schema://server:port/cale?parametri#fragment
schema de nume - identifică protocolul utilizat care
determină și forma URL-ului
server - numele sau adresa serverului; se pot obține
unul din altul prin intermediul DNS (Domain Name
Service)
URL
Forma generală:
schema://server:port/cale?parametri#fragment
port - identifică aplicație pe calculatorul destinație;
browser-ul presupune portul 80 (portul tipic), dar se
poate utiliza orice port neocupat
parametri - listă de perechi cheie-valoare separate de
& e.g. name=Andrei&age=32
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ă
Metode HTTP
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
Mecanisme HTTP
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
Mecanisme HTTP
ETAG - 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 (header-ul If-None-Match)
Dacă acesta corespunde cu al server-ului i se
răspunde cu 304, altfeli se livrează versiunea
curentă a resursei
Mecanisme HTTP
Exista si posibilitatea pentru caching
tradițional cu header-ele cache-control și
expires
Mecanisme HTTP
Sesiuni și cookies
HTTP asincron
Compresie
REST
Caracteristici REpresentational State Transfer
Acces la obiecte la distanță peste HTTP
Vocabular limitat
Identificarea semanticii prin URL
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
HTTP/2
Păstrează mare parte dintre mecanismele
HTTP 1.1
Bazat pe SPDY
Protocol binar
Discută la nivel de ‘frame’ unde un frame
poate avea scop diferit (headers, data etc.)
HTTP/2
Introduce compresia si pentru headers,
metoda, url etc. la nivel conexiunii nu la
nivelul requestului (HPACK)
Funcționează (practic) numai peste TLS;
cerința pentru criptare nu e în stadard dar
toate implementările o au
HTTP/2
Elimină elementele blocante ale versiunii 1
Se pot cere mai multe resurse pe o
conexiune, pe care serverul le poate livra în
orice ordine
Resursele se livrează în stream-uri de resurse
și sunt prioritizabile
De asemenea serverul poate trimite și resurse
care nu au fost încă cerute de client
Bibliografie
HTTP: The Definitive Guide: The Definitive
Guide, Gourley et. al., O Reilly 2009
https://http2.github.io/http2-spec/
https://www.youtube.com/watch?v=r5oT_2ndj
ms
HTML
HyperText Markup Language
HTML
limbaj de descriere structurală
multe componente au conținut semantic
nu conține cod executabil în sensul clasic
bazat pe o structură de tag-uri și atribute
HTML 5
HTML a evoluat de la un limbaj bazat pe
SGML, la variații bazate pe XML
HTML5 deconectează standardul limbajului
de predecesori
Tag-uri
Reprezentarea tag-urilor
<tag>content</tag>
Reprezentarea prescurtată a tag-urilor fără
conținut
<tag />
Setul de tag-uri nu e extensibil la nivel HTML
Extensibil prin JavaScript (e.g. angularjs)
Atribute
Tag-urile suportă o serie de atribute
Atributele sunt perechi cheie valoare, unde toate tag-
urile cu aceleși tip au aceleași atribute, dar valori
diferite
atribut=”valoare” sau atribute=’valoare’
în HTML5 atribut=valoare (atâta timp cât nu există
ambiguitate)
Unele atribute sunt generale
Există un set de atribute specifice pentru tratarea de
evenimente
Structură fundamentală
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Structură fundamentală
DOCTYPE specifică versiunea fișierului
HTML (și ce set de tag-uri sunt suportate)
HEAD conține metainstrucțiuni necesare
pentru afișarea paginii
BODY cuprinde conținutul afișabil efectiv
Conținut HEAD
TITLE - titlul paginii
tag-uri META
BASE - pentru link-uri relative, baza de la care
acestea sunt calculate
includerea de resurse
Resurse
LINK, STYLE, SCRIPT - resurse incluse în
fișierul HTML, fie direct, fie specificând un
fișier
<link rel='stylesheet' href="css/style.css"
type="text/css" />
<style type="text/css"></style>
Resurse
SCRIPT - definește inline sau include script-
uri
<script type=”text/javascript”></script>
În XHTML, pentru a împiedica parsarea
conținutului ca XML, trebuie pus într-un bloc
CDATA
Meta
cuprinde informații care sunt destinate a fi
parsate automat, nu afișate
comportament diferit pe baza unor atribute
<meta name="keywords" content="some words">
<meta name="description" content="some words">
<meta name="author" content="Andrei">
<meta http-equiv="refresh" content="30">
<META http-equiv="refresh" content="5;URL=http://andrei.ase.ro">
<meta charset="UTF-8">
Atribute globale
id - identifică unic un tag
class - specifică una sau mai multe clase
asociate tag-lui (descrise separat într-un
fișier CSS)
style - modifică inline proprietățile stilului
asociat tag-ului
Atribute globale
title - specifică informație suplimentară legată
de tag-ul respectiv (i.e. tooltip)
lang - specifică limba asociată conținutului
tag-ului
accesskey - cheie de acces rapid pentru
componentă
Atribute globale
tabindex - ordinea de selecție a componentei
la navigarea cu tasta TAB
dir - direcția de afișare a conținutului
componentei
o serie de atribute sunt adăugate în HTML5:
contenteditable, contextmenu, draggable,
dropzone, hidden, spellcheck, translate,
data-
Evenimente
Există o serie de atribute care suportă
definirea de handler-e de evenimente pe
componentele HTML
Evenimentele vor fi tratate de cod JavaScript
Atributele diferă în funcție de evenimentele
suportate de o anumită componentă
Evenimente
O listă completă -
http://www.w3schools.com/tags/ref_eventattr
ibutes.asp
Tag-uri structurale tradiționale
H1, H2, H3, H4, H5, H6 - titluri de subsecțiuni
DIV - diviziune anonimă care cuprinde o serie
de componente HTML
SPAN - diviziune inline
Tag-uri structurale noi
În html5 apar o serie de tag-uri structurale noi
care descriu semantic structura unei pagini
article, aside, header, footer, header, main etc.
Ancore
Conceptul fundamental al HTTP
Specifică unde se poate găsi o resursă
înrudită
Adresele sunt specificate prin atributul href
Adrese pot fi absolute sau relative
Pentru adrese relative, dacă există un tag
base, adresa va fi obținută prin
concatenarea base href cu anchor href
Ancore
Format
<a href=”url” rel=”sens” target=”destinatie”>text</a>
Exemple
<a href=”http://somewhere.com”>click me!</a>
<a href=”./content/main.html”>click me!</a>
cu base
<base href="http://somewhere.com/content">
<a href=”somefile.html”>click me!</a>
Imagini
Conținutul multimedia tradițional al paginilor
web
În HTML5 se adaugă audio și video
Adresa imaginilor se calculează de la base,
dacă acesta există
Suportă image maps (imagini cu zone care
reactionează diferit la click)
Imagini
<img src=”someimage.jpg” alt=”text”/>
Cu map:
<img src=”someimage.jpg” alt=”text”
usemap=”#mymap”/>
<map name="mymap">
<area shape="rect" coords="0,0,100,100"
href="somefile.html" alt="file">
</map>
Tabele
TABLE - definește tabelul
THEAD - definește headerul tabelului
TFOOT - definește headerul tabelului
TH - o celulă a header-ului
TBODY - definește conținutul tabelului
TR - un rând al conținutului
TD - o celulă a conținutului
Tabele
<table>
<thead>
<th>Name</th>
<th>Characteristics</th>
</thead>
<tbody>
<tr>
<td>Name 1</td>
<td>Prop 1
</td>
</tr>
</tbody>
</table>
Liste
Liste ordonate
lista e definită cu OL
componentele liste sunt definite cu LI
Liste neordonate
lista e definită cu UL
componentele liste sunt definite cu LI
Liste

<ol>
<li> First ordered item </li>
<li> Second ordered item </li>
</ol>
<ul>
<li> First unordered item </li>
<li> Second unordered item </li>
</ul>
Formulare
Trimite informație la un server printr-o metodă HTTP
Conținutul formularului este trimis url encoded (listă de
perechi cheie-valoare)
param1=value1&param2=value2
Dacă se utilizează GET, parametrii vor fi trimiși prin
secțiuea de parametri a URL-ului, pentru POST, vor fi
trimiși în corpul request-ului
Formulare
Forma generală
<form action=”test.asp” method=”POST”>
<!-- componente -->
</form>
Lista de componente de input este extinsă în HTML5
datalist, keygen, output
Componente de input
text
<input type=”text” name=”somename” />
password
<input type=”password” name=”somename” />
hidden
<input type=”hidden” name=”somename” />
Componente de input
radio button
<input type="radio" name="sex" value="male" /> Male
checkbox
<input type="checkbox" name="pet" value="cat" />Cat
<input type="checkbox" name="pet" value="Dog"
checked />Dog
Componente de input
submit - trimite conținutul formularului la server
<input type="submit" value="Submit" />
reset - resetează câmpurile formularului
<input type="reset" value="Reset" />
file - deschide o fereastră de selecție a unui
fișier
<input type="file" name="file" />
Componente de input noi (HTML5)

color, date, datetime, datetime-local, email,

month, number, range, search, tel, time, url,
week
Componente de input
TEXTAREA - text multiline
<textarea rows="4" cols="50" name=”description”>
some text </textarea>
Componente de input
SELECT - combo box cu selecție simplă sau
multiplă (pentru selecție multiplă vor fi trimite
mai multe valori cu acceași cheie)
<select>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
</select>
Pentru selecție multiplă se adaugă atributul multiple
Alte tag-uri
p - paragraf
pre - text preformatat
hr - horizontal rule
br - line break
Tag-uri noi de content(HTML5)
CANVAS
AUDIO
VIDEO
EMBED
TRACK - subtitrare pentru elemente
audio/video
SOURCE - sursa unui element audio/video
http://html5demos.com/
https://www.w3.org/TR/html5-diff/
CSS
CSS ca limbaj de prezentare
în principal mecanism de styling
include mecanisme de poziționare
separa prezentarea de structura
regulile sunt reutilizabile și se pot compune
Includerea CSS
link - stiluri externe
bloc style - stiluri interne
atributul general style - stiluri inline
Precedență
precendență - stilurile inline au precendență
regula generală - stilurile mai specifice
suprascriu stilurile generice
pentru reguli identice, ultima aplicată are
precendență
!important permite suprascrierea unei reguli
cu precedență mai mare
Forma generală
selector{reguli}
regulile sunt perechi cheie valoare terminate
cu ;
cheile sunt fie atribute ale elementelor
selectate fie pseudo-atribute (care permit
atribuirea de valori mai multor elemente)
selectorii sunt în principiu expresii de căutare
prin nodurile modelului documentului
Selectori
selectorul id
#id (e.g. #mytable) - selectează elementul cu id-ul
specificat
selectorul general
* - selectează toate elementele
selectorul clasa
.class (e.g. .important) - selectează toate elementele
cu clasa specificată
Selectori
selectorul element(tip)
element (e.g. div) - selectează toate elementele cu
tipul specificat
selectorul and
element1,element2,element3 (e.g. p,div,form) -
selectează toate elementele cu tipurile specificate
selectorul descendent
element1 element2 (e.g. div p) - selectează toate
elementele de tip element2 descendente ale
elementelor de tip element 1
Selectori
Selectorul descendent direct
element1>element2 (e.g. div>p) - selectează toate
elementele de tip element2 care sunt copii
(descendenți direcți) ale elementelor de tip element1
Selectori
Selectorul adiacent
element1+element2 (e.g div+p) - selectează
elementele de tip element2 care urmează după
elementele de tip element1
element1~element2 (e.g. div~p) - selectează toate
elementede de tip element 2 precedate de elemente
de tip element1
Selectori
Selectorii atribut
[atribut] (e.g. [href]) - toate elementele care au
atributul specificat definit
[atribut=valoare] (e.g. [type=text]) - toate elementele
pentru care atributul specificat este egal cu valoarea
[atribut~=valoare] (e.g. [type=text]) - toate elementele
pentru care atributul specificat conține cuvântul
specificat de valoare
Selectori
Selectorii atribut
[atribut^=valoare] (e.g. [type=text]) - toate elementele
pentru care atributul specificat începe cu valoarea
[atribut$=valoare] (e.g. [type=text]) - toate elementele
pentru care atributul specificat se termină cu
valoarea
[atribut*=valoare] (e.g. [type=text]) - toate elementele
pentru care atributul specificat conține valoarea
Alți selectori
Selectori poziționali
:first-child - elementele care sunt primul copil al
ascendentului lor direct
:nth-child(k) - elementele care sent al k-lea copil al
ascendentului lor direct
:last-child - elementele care sunt ultimul copil al
ascendentului lor direct
:nth-last-child(k) - elementele care sent al k-lea copil
al ascendentului lor direct numărând de la final
Alți selectori
Selectori poziționali
:first-of-type, :last-of-type - primul/ultimul
element de tipul
:nth-of-type - al n-lea element de tipul
Alți selectori(pseudo-clase)
link activ, vizitat, nevizitat, hover
:active, :visited, :link, :hover
checkbox selectat
:checked
disabled input/enabled input
:disabled
:enabled
input valid/invalid
:valid, :invalid
Alți selectori(pseudo-clase)
input readonly/read-write
:readonly, :read-write
input required/optional
:required,:optional
:empty - toate elementele vide
:focus - input-ul selectat
Alți selectori(pseudo-elemente)
::after, ::before - modifică modelul de
document
::first-letter - prima literă a unui element
(pseudo-element)
::first-line - prima linie a unui element
Alți selectori
::selection - textul selectat
Precendență
reguli specifice
ordinea selectorilor e guvernată de specificitate
reguli în ordinea specificitații
selectorul general (*) 0
selectorul de tip al tag-ului/pseudo-element 1
selectorul de clasa/atribut/pseudo-clasa 10
selectorul de id 100
Excepții
selectorul :not()
tot conținutul selectorului not este numărat
independent (nu este considerat un pseudo-
selector)
!important
utilizat pentru suprascrierea unei reguli cu precedență
mai mare
Dimensiuni
componentă
padding
border
margin
Box model
componentele sunt afișate în bounding boxes
padding - spațiul dintre componentă și border
border - granița componentei
margin - distanța dintre componentă și vecinii săi
Dimeniunile conținutului
height
width
min-height
min-width
max-height
max-width
Dimensiunile paddingului
padding - atribut compozit
conține fie 4 valori pentru direcțiile top,
bottom, left, right, fie 2 valori (top/bottom și
left/right fie 1 valoare pentru toate direcțiile)
Border
border - atribut compozit
border-width
border-style
border-color
border-radius
Margin
Poziționarea față de celelalte componente
Semnificația depinde de poziție și float
Box sizing
în mod normal, dimensiunea unei
componente este dimensiunea conținutului
padding-ul e desenat în exterior
comportamentul se poate schimba cu atributul
box-sizing
comportamentul default se numește content-
box
Box sizing
box-sizing:border-box include dimensiunea
padding-ului și a border-ului în dimensiunea
elementului
box-sizing:padding-box include dimensiunea
padding-ului
marginile nu fac parte niciodată din
dimesiunea elementului
Fluxul documentului
Componentele au modalități default de afișare
(e.g. paragrafele se afișează unul sub altul
cu spațiere, ancorele se afișează inline etc.)
Comportamentul default poate fi suprascris
(e.g. componentele pot fi scoase parțial sau
total din flux)
Modelul de afișare
O componentă se afișează în funcție de
dimensiunile sale
tipul de afișare (block, inline etc)
modul de poziționare
relația cu celelalte componente
alte informații externe (mărimea viewport-ului,
dimensiunile imaginilor etc.)
Atributul display
fiecare componentă are un mod default de
afișare (e.g. ancorele sunt afișate inline)
modul de afișare poate fi schimbat prin
atributul display
Atributul display
valori:
none - elementul nu e afișat
block - elementul e afișat ca un paragraf (nu pot exista
elemente în stânga sau in dreapta)
inline - elementul e afișat ca un caracter (în interiorul
textului, elementul nu încearcă să se distanțeze de
alte elemente, elementul are dimensiunea
conținutului său și nu este dimensionabil)
Atributul display
valori:
inline-block - la fel ca un element inline, dar este
dimensionabil
list-item - ca un item dintr-o listă (are două box-uri,
una pentru content și una pentru marker)
o serie de alte modele (table,table-row, inline-table
etc.)
Atributul position
modul de poziționare al elementului în fluxul
documentului
de atributul position depinde semnificația atributelor
top, bottom, left, right
valori
static - poziția default, elementele statice nu sunt
afectate de top, bottom, left, right
Atributul position
valori
relative - poziția e calculată relativ la poziția default pe
care ar fi avut-o elementul; top, left, bottom, right
specifică offset-ul elementului față de poziția default
(în lipsa lor, elementul e afișat în poziția default)
absolute - elementul e scos din flux și ignoră poziția
celorlate elemente vecine; poziția unui element
absolut se raportează la cel mai apropiat ascendent
care nu are poziția static (în lipsa lui, la începutul
paginii)
Atributul position
valori
fixed - elementul e scos complet din flux și ingnoră
orice alt element; poziția e calculată relativ la
viewport (fereastra browser-ului) și ignoră
eventulalul scroll
Float
float scoate elementul din flux, dar celelalte
elemente se vor repoziționa pe lângă spațiul
ocupat de float
elementele cu float vor pluti fie într-o poziție
relativ la părintele lor; celelalte elemente
(care nu au float) se vor alinia în funcție de
elementul cu float
Float
atributul clear permite elementelor să ingnore
alinierea la elementul cu float (interzice
prezența unui floating element la stânga, la
dreapta sau în ambele direcții)
Font-uri
tag-ul font
webfont fallbacks
serif
sans-serif
cursive
fantasy
monotype
Stiluri pentru font-uri
em ca dimensiune
@font-face
font-family - sistem de fallback
font-style (bold, italic etc)
font-variant (normal, small-caps)
font-weight (grosimea fontului)
font-size (marimea fontului)
color, background-color
https://specificity.keegan.st/
https://codemyviews.com/blog/the-lowdown-on-
before-and-after-in-css
Don’t make me think - Steve Krug
https://css-tricks.com/snippets/css/a-guide-to-
flexbox/
Javascript
Funcții și obiecte
Funcții
Funcțiile sunt (în orice limbaj) o modalitate de
reutilizare a codului
Funcții în limbaje cu tipuri dinamice
nu specifică tipul parametrilor (determinat la runtime)
nu specifică tipul rezultatului (se pot returna rezultate
diferite pe ramuri de execuție diferite)
liste de parametri de lungime variabilă
Definirea unei funcții
Cuvântul cheie function
function somefunc(){/*function body*/}
Return permite întoarcerea unui rezultat
Tipul de rezultat nu e neapărat omogen
Dacă se folosește return fără parametru, se
returnează undefined
Parametri
Funcțiile pot primi o listă de parametri
function f(a,b,c){}
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)
Parametri
Array-ul arguments cuprinde atât parametrii
numiți cât și cei nenumiți
Alternativ, se pot utiliza rest parameters
function f(a,b,...args){}
Variabile locale și globale în funcții
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 și globale în funcții
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
function(x){return x*2;}
Utilitatea este dată de cazurile în care o
funcție nu este gândită să fie reutilizabilă
(e.g. comportamentul pe un click)
Arrow functions
Lambda-urile pot fi definite și prin arrow
functions
În cazul în care în partea dreaptă nu se află
un bloc, expresia este evaluata direct
(x,y) => x+y
Nu au acces la array-ul arguments
Arrow functions
Dacă se utilizează un bloc, va trebui să folosească return
pentru a produce o valoare
(x) => {return x+2;}
Arrow functions sunt instanceof Function, dar nu pot fi
utilizate ca constructori
Arrow functions nu au prototip
Arrow functions au acces la un this lexical (this este cel din
din obiectul care conține funcția)
Funcții ca variabile
Funcțiile anonime se pot stoca în variabile
let f = function(){}
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
g(f)
Funcții ca parametri
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
f(myList, function(x){})
Funcții 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
Funcții 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 și funcții 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
[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]
Funcții 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ă
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/
Array/forEach
Funcții speciale pentru array-uri
every - returnează true dacă funcția condiție este
adevărată pentru toate elementele array-ului
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
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/
Funcții speciale pentru array-uri
filter - returnează un array cu elementele
pentru care funția condiție este adevărată
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
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/
Funcții speciale pentru array-uri
reduce - returnează o valoare obținută prin aplicarea
funcției elementelor array-ului de la stânga la dreapta
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
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/
Array/reduceRight
Încapsulare funcțională
Permite executarea unui bloc de cod fără ca
acesta să fie accesibil în spațiul global
[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
Obiecte
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
Obiecte
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
[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 și 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]
Constructori și new
Pași la aplicarea new
se creează un nou obiect moștenitor al prototipului
se apelează constructorul
rezultatul va fi chiar instanța nouă
Lanțul 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
Lanțul de prototipuri
Consecințe
O relativă ineficiență
Rezultate neașteptate dacă o proprietate crezută
undefined există undeva în lanț
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
[ex14]
Încapsulare obiectuală
Încapsularea se poate face printr-o serie de
variante
Cea preferabilă este funcțională, bazată pe
closures
http://www.intertech.com/Blog/encapsulation-in-
javascript/
În Javascript 6 se pot utiliza getteri și setteri
dedicati
Modele de invocare funcțională
Method - apelul unei funcții stocate într-un
obiect
are drept consecință bindarea obiectului this la
instanța curentă
Function - apelul unei funcții care nu este
stocată într-un obiect
this este bindat la obiectul global
Modele de invocare funcțională
Constructor - invocarea unei funcții cu
operatorul new
constructorii sunt în principiu invocați doar cu new
return va returna instanța creată a obiectului
Apply - aplicarea explicită a unei funcții
primul parametru este this (se poate selecta la apel)
restul parametrilor sunt lista de parametrii a funcției
[ex15]
Alte mecanisme funcționale
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 obiectuală
Object initializars - crearea obiectului prin
definirea în JSON
echivalent cu un call la new Object()
Prin apelul unui constructor
Prin apelul Object.create
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
Javascript, the good parts - Douglas Crockford
http://es6-features.org
https://javascriptweblog.wordpress.com/2010/1
0/25/understanding-javascript-closures/
JQuery
Obiective
Simplifică interacțiunea cu modelul de
document
Permite mecanisme de navigare mai flexibile
Cod mai ușor de citit printr-o interfață
chainable
Manipulare ușoară a evenimentelor
Chaining
Metodele JQuery se pot apela în serie
Fiecare metodă returnează un wrapped set
Wrapped sets sunt iterabile și au toate
metodele JQuery
Căutarea într-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
Încărcarea 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 generală
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ă
$(selector).action()
Accesul la obiecte DOM
addClass() - adaugă o clasă CSS la un
element
$( "p" ).addClass( "myClass yourClass" );
removeClass() - elimină o clasă CSS a unui
element
$( "p" ).removeClass( "myClass noClass" ).addClass(
"yourClass" );
Accesul la obiecte DOM
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
Accesul la obiecte DOM
html() - fără parametru returnează conținutul
HTML al primului nod dintre nodurile
selectate
$( "div.demo-container" ).html();
eventualul parametru este șirul cu care va fi
înlocuit conținutul tuturor nodurilor selectate
$( "div" ).html( "<span class='red'>Hello
<b>Again</b></span>" );
Accesul la obiecte DOM
attr() - fără parametru, returnează valoarea
atributului pentru primul element selectat
$( "input" ).attr( "disabled");
cu parametru, stabilește valoarea atributului
pentru toate elementele selectate
$( "input" ).attr( "checked", true );
remvoveAttr() - șterge proprietatea pentru
elementele selectate
Accesul la obiecte DOM
prop() - fără parametru, returnează valoarea
proprietății pentru primul element selectat
$( "input" ).prop( "disabled");
cu parametru, stabilește valoarea proprietății
pentru toate elementele selectate
$( "input" ).prop( "checked", true );
removeProp() - șterge proprietatea pentru
elementele selectate
Accesul la controale input
val() - returnează valoarea primului element
selectat
$( "#single" ).val( );
cu parametru, stabilește valoarea tuturor
elementelor selectate
$( "#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
Navigare
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)
Navigare
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
Navigare
filter() - selectează doar elementele care ar fi
returnate de selectorul transmis dintre
elementele anterioare
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
Navigare
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
Navigare
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
Navigare
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/
Evenimente
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
Evenimente
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()
Adăugarea 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
Adăugarea de elemente noi
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
Adăugarea de elemente noi
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
Ștergerea de elemente
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
get()
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
Efecte
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
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
Evenimente
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
creare server
răspuns la evenimentul de conectare a unui client
răspuns la cererile clientului
tratarea evenimentului de sfârșit al conexiunii
N.B. nu se poate răspunde la cereri decât
daca evenimentul de conectare a fost emis
Arhitecturi web
Arhitecturi clasice MVC
Arhitecturi request-based
Arhitecturi component-based
Arhitecturi asincrone
Aplicație asincronă monolitică
Aplicații component-based
Aplicație client-side Model View Controller (deși
modelele MVC client-side sunt destul de diferite de
un MVC pur)
Alte arhitecturi
'Installable' apps
hybrid mobile apps
Transpilation (e.g. react)
Arhitecturi clasice
Bazate pe paradigma request-response
Browser-ul încarcă răspunsurile la cererile
utilizatorului ca pagini noi
Probleme
Lipsa fundamentală de stare
Mecanismul de transfer e limitat la expresivitatea dată
de URL encoding
Timp de răspuns vizibil utilizatorului
Arhitecturi clasice
Bazate pe paradigma request-respone
Browser-ul încarcă noi pagini ca răspuns la
cererie utilizatorului
Problems
Fără stare internă a aplicației (se vor utiliza cookies
sau sessions pentru menținerea stării)
Mecanism limitat de transfer
Timpul de răspuns este vizibil utilizatorului
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
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 asincrone
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ă
Arhitecturi asincrone
Probleme
(relativ) mai dificil pentru motoarele de căutare să
acceseze toate end-point-urile aplicației
în varianta unei aplicații monolitice, cod foarte dificil de
întreținut
Aplicații 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
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
Aplicații 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
Aplicații 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
Request-based
Cross-cutting concerns pot fi tratate prin
middleware
Backend restful
Express poate fi utilizat pentru dezvoltarea de
servicii REST
Un back-end REST permite decuplarea logicii
de server de cea de client
Un back-end rest poate fi practic dezvoltat și
testat separat
Storage
Access a baza de date prin mecanisme
obiectuale
Detaliile de stocare sunt ascunse
Abordări
Sequelize (pentru RDBMS)
Mongoose (pentru MongoDB)
Arhitectura SPA
Demo
Principii
Un SPA încarcă o singură pagină
Toată comunicația ulterioară se face prin
AJAX
Codul de front-end este uzual organizat printr-
un framework
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-e
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)
Modele
Scopes au rolul modelelor, view-urile având
acces la un scope populat de controller
Un view poate folosi ng-model pentru a lega
date de input la o cheie de pe scope-ul
curent
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)
Back-end
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ă