Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web
-
Upload
sabin-buraga -
Category
Technology
-
view
235 -
download
1
description
Transcript of Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web
![Page 1: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/1.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
JavaScript în cadrul navigatorului Web
programare Webla nivel de client
![Page 2: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/2.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“Solving the problem is more importantthan being right.”
Milton Glaser
![Page 3: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/3.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum rulează programele JavaScriptîn navigatorul Web?
![Page 4: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/4.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Majoritatea programelor JavaScript
rulează – sunt interpretate –
în navigatorul Web via un script engine
![Page 5: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/5.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cod JavaScript intern vs.preluat dintr-un fișier extern
<body>
…
<script type="text/javascript">
alert ("Salut, lume!");
</script>
</body>
<script type="text/javascript" src="http://salutari.info/salut.js">
</script>
![Page 6: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/6.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Remarcă:
în loc de tipul MIME text/javascript
ar putea fi indicat application/javascript
nesuportat de versiuniIE mai vechi
![Page 7: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/7.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Un program JavaScript are acces la arborele DOM (Document Object Model)
corespunzător documentului HTML
specificații ale Consorțiului Web
www.w3.org/DOM/DOMTR
a se revedea cursul“Tehnologii Web”
![Page 8: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/8.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<!DOCTYPE html>
<html>
<body>
<p>Tehnologii Web</p>
<div>
<img src="web.png"/>
</div>
</body>
</html>
HTMLHtmlElement
HTMLBodyElement
HTMLParagraphElement
Text
HTMLDivElement
HTMLImageElement
![Page 9: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/9.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Un program JavaScript are acces la arborele DOM (Document Object Model)
corespunzător documentului HTML
minimal, un navigator Web implementează
recomandarea DOM Level 2 HTML (2003)
www.w3.org/TR/DOM-Level-2-HTML
![Page 10: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/10.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
De asemenea, programele JavaScript au accesla diverse obiecte oferite de mediul de execuție
pus la dispoziție de browser
e.g., informații privind contextul rulării(caracteristici ale navigatorului, latența rețelei),
istoricul navigării, fereastra de redare a conținutului,…
![Page 11: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/11.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Arborele DOM asociat documentului (X)HTMLpoate fi accesat/alterat via obiectul document
instanță a clasei implementând interfața HTMLDocument
![Page 12: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/12.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interface HTMLDocument : Document { attribute DOMString title; // titlul documentuluireadonly attribute DOMString referrer; // adresa resursei ce referă paginareadonly attribute DOMString domain; // domeniul de care aparținereadonly attribute DOMString URL; // URL-ul absolut al documentuluiattribute HTMLElement body; // acces la elementul <body>readonly attribute HTMLCollection images; // lista tuturor imaginilorreadonly attribute HTMLCollection links; // lista tuturor legăturilorreadonly attribute HTMLCollection forms; // lista tuturor formularelor
attribute DOMString cookie; // acces la cookie-uri// emite o excepție dacă e asignată o valoare
void open (); // deschide un flux de scriere (alterează DOM-ul curent)void close (); // închide fluxul de scriere și forțează redarea conținutuluivoid write (in DOMString text); // scrie un șir de caract. (e.g., cod HTML)void writeln (in DOMString text); // idem, dar inserează și new lineNodeList getElementsByName (in DOMString numeElement);
// furnizează o listă de elemente conform unui nume de tag};
interfață specificată via limbajul declarativ WebIDL
![Page 13: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/13.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
proprietatea documentElement
desemnează nodul-rădăcină
![Page 14: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/14.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
getElementById (identificator)
furnizează un element – nod de tip Element –conform identificatorului său unic, desemnat de valoarea
atributului id specificat în cadrul documentului
![Page 15: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/15.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
parentNode
proprietate ce oferă acces la numele nodului-părinteal nodului curent
![Page 16: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/16.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
nextSibling
proprietate care oferă acces la următorul nodde pe același nivel al arborelui
![Page 17: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/17.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
previousSibling
proprietate oferind acces la nodul precedentde pe același nivel al arborelui
![Page 18: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/18.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
childNodes
proprietate furnizând într-un tablounumele nodurilor-copil ale nodului curent
![Page 19: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/19.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
firstChild
proprietate desemnând primul nod-copilal nodului curent
![Page 20: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/20.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
lastChild
proprietate specificând ultimul nod-copilal nodului curent
![Page 21: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/21.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Deoarece HTMLDocument extinde interfața Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
attributes
proprietate ce reprezintă tabloul asociativconținând atributele asociate unui nod de tip Element
![Page 22: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/22.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
cofunction topLevelNodeAt (nod, top) {
while (nod && nod.parentNode != top)
nod = nod.parentNode;
return nod;
}
function topLevelNodeBefore (nod, top) {
while (!nod.previousSibling && nod.parentNode != top)
nod = nod.parentNode;
return topLevelNodeAt (nod.previousSibling, top);
}
discuție
Ce rol au cele două funcții?
![Page 23: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/23.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfața HTMLElement o extindepe cea generală oferită de DOM Level 2
fiecare element HTML specific derivă din ea
![Page 24: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/24.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
// un element HTML generic
interface HTMLElement : Element {
attribute DOMString id; // identificator asociat elementului
attribute DOMString title; // titlu explicativ
attribute DOMString lang; // limba în care e redactat conținutul
attribute DOMString className; // numele clasei CSS folosite pentru redare
};
// specifică un formular Web
interface HTMLFormElement : HTMLElement {
readonly attribute HTMLCollection elements; // elementele HTML incluse în formular
readonly attribute long length; // numărul câmpurilor formularului
attribute DOMString action; // URI-ul resursei ce procesează datele
attribute DOMString enctype; // tipul MIME de codificare a datelor
// (e.g., application/x-www-form-urlencoded)
attribute DOMString method; // metoda HTTP folosită: GET, POST
void submit(); // trimite date URI-ului definit de ‘action’
};
// o imagine (conținut grafic raster)
interface HTMLImageElement : HTMLElement {
attribute DOMString alt; // text alternativ descriind conținutul grafic
attribute DOMString src; // URI-ul resursei grafice
};
![Page 25: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/25.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Interfața HTMLCollection modelează o listă de noduri
un nod poate fi accesat folosind un index numeric sau pe baza unui identificator (e.g., stabilit via atributul id)
interface HTMLCollection {
readonly attribute unsigned long length; // oferă lungimea listei
Node item (in unsigned long index); // oferă un nod via index numeric
Node namedItem (in DOMString name); // furnizează un nod pe baza numelui
};
![Page 26: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/26.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum putem afla/modifica diverse informațiiprivind nodurile arborelui DOM?
![Page 27: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/27.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Informații referitoare la nodurile arborelui DOM
nodeType
proprietate care furnizează tipul unui nod
1 = element, 2 = atribut, 3 = conținut text,…
![Page 28: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/28.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Informații referitoare la nodurile arborelui DOM
nodeValue
proprietate oferind valoarea unui nod
![Page 29: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/29.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Informații referitoare la nodurile arborelui DOM
innerHTML
proprietate – mutabilă – ce furnizează codul (X)HTMLdin cadrul unui nod de tip Element
utilizarenerecomandabilă
![Page 30: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/30.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Informații referitoare la nodurile arborelui DOM
textContent
proprietate ce furnizează/stabilește conținutul textual al nodului și posibililor descendenți
![Page 31: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/31.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Informații referitoare la nodurile arborelui DOM
getAttribute (numeAtribut)
metodă care oferă acces la valoarea unui atribut
![Page 32: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/32.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modificarea structurii arborelui DOM
createElement (element)
creează un nod de tip Element
![Page 33: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/33.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modificarea structurii arborelui DOM
createTextNode (nod)
creează un nod cu conținut textual
![Page 34: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/34.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modificarea structurii arborelui DOM
appendChild (nod)
adaugă un nod-copil nodului curent
![Page 35: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/35.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
// funcție care generează un număr de elemente HTML// pe care le adaugă elementului identificat prin 'identificator'function genereazaElemente (numarElem, numeElem, identificator) {
for (var it = 0; it < numarElem; it++) {// creăm un element specificvar element = document.createElement (numeElem); // ...și-i atașăm un nod textvar text = document.createTextNode ("Salut, lumea..."); element.appendChild (text);// adaugăm nodul creatdocument.getElementById (identificator).appendChild (element);
}}genereazaElemente (3, "div", "continut"); // 3 <div>-urigenereazaElemente (2, "p", "lumi"); // 2 paragrafe (<p>)
<div id="lumi"></div><h1 id="continut"></h1> a se studia exemplele
din arhivă
![Page 36: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/36.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
arborele DOM corespunzător codului HTML
generat prin program
inspectarea valorilorproprietăților DOM
consultarea arborelui DOM via extensia Firebug
![Page 37: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/37.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modificarea structurii arborelui DOM
removeChild (nod)
elimină un nod-copil
![Page 38: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/38.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modificarea structurii arborelui DOM
cloneChild ()
“clonează” un nod al arborelui
![Page 39: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/39.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modificarea structurii arborelui DOM
setAttribute (atribut, valoare)
stabilește valoarea unui atribut
![Page 40: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/40.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Găsirea de noduri via selectori CSS
Selectors API
recomandare W3C (februarie 2013)
www.w3.org/TR/selectors-api/
![Page 41: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/41.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Găsirea de noduri via selectori CSS
querySelector (selectori)
furnizează primul element – folosind traversarea în adâncime în preordine – care se potrivește grupului
de selectori (deliminați de virgulă)
querySelectorAll (selectori)
oferă lista de tip NodeList a tuturor elementelor găsite
![Page 42: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/42.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemplificare – folosim consola oferită de browser: var lista = document.querySelectorAll
("section[id^=\"week\"]:nth-child(even) > h2");
for (el in lista) {
console.log (lista[el].textContent);
}
selectori CSS3
![Page 43: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/43.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
eveniment = acțiune produsă în cadrul mediului deexecuție în urma căreia programul va putea reacționa
![Page 44: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/44.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
codul JavaScript invocat la apariția unui evenimentva putea fi încapsulat într-o funcție de tratare a acestuia
(handler)
![Page 45: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/45.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
tradițional, se atașează cod JavaScript ce va fi executatla apariția unui eveniment de bază
(e.g., onclick, onmouseover, onchange, onload, onkeypress,…)asupra unui element
![Page 46: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/46.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
<button onclick="alert ('Au!');">Apasă-mă!</button>
![Page 47: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/47.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
<button onclick="alert ('Au!');">Apasă-mă!</button>
pentru a inhiba execuția acțiunii implicite, codul JavaScript va trebui să întoarcă false
![Page 48: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/48.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
<button onclick="alert ('Au!');">Apasă-mă!</button>
document.getElementById ("identificator").onclick
= trateazaClick; // mai ‘evoluat’ via DOM 1
![Page 49: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/49.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
tratarea standardizată a evenimentelor:specificația DOM Level 2 Events
www.w3.org/TR/DOM-Level-2-Events/
![Page 50: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/50.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
specificarea de activități executatela apariția unui eveniment
obiect.addEventListener ("eveniment", functie, mod);
![Page 51: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/51.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
descrierea arborescentă a fluxului de evenimente
capture versus bubble
![Page 52: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/52.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
fluxul de evenimente (T. Leithead et al., 2012)
a se studia și W. Page, An Introduction to DOM Events (2013)http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/
![Page 53: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/53.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
descrierea arborescentă a fluxului de evenimente
mod = true
se încearcă tratarea evenimentului pornindde la rădăcină până la obiectul-țintă – capture phase
![Page 54: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/54.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
descrierea arborescentă a fluxului de evenimente
mod = false
se încearcă tratarea evenimentului atunci cândevenimentul e propagat de la obiectul unde a survenit
până la entitățile superioare lui – bubbling phase
![Page 55: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/55.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
se va utiliza un set standard de evenimente
e.g., de control al interacțiunii cu utilizatorul
![Page 56: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/56.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți asociate evenimentelorprivind acțiunile mouse-ului
click, mousedown, mouseup, mouseover, mousemove, mouseout
![Page 57: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/57.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți asociate evenimentelorprivind acțiunile mouse-ului
button – butonul acționat (0=stâng, 1=median, 2=drept)detail – numărul de apăsări ale butonului
clientX – coordonata orizontală a poziției mouse-uluiclientY – coordonata verticală a poziției mouse-ului
![Page 58: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/58.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interface MouseEvent : UIEvent {readonly attribute long screenX, screenY; // coordonate relative la ecranreadonly attribute long clientX, clientY; // coordonate relative la zona de redarereadonly attribute boolean ctrlKey, shiftKey, altKey, metaKey; // taste speciale utilizate?readonly attribute unsigned short button; // indică butonul acționatreadonly attribute EventTarget relatedTarget;void initMouseEvent (in DOMString typeArg, // inițializează evenimentul de tratare
in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in EventTarget relatedTargetArg);
};
detalii la www.w3.org/TR/DOM-Level-2-Events/events.html
argumente specifice
![Page 59: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/59.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți asociate evenimentelor vizând tastatura
keyup, keydown, keypress
charCode – codul caracterului asociat tastei acționatekeyCode – codul tastei acționate
![Page 60: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/60.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
interacțiuni tactile – touch events
recomandare a Consorțiului Web (octombrie 2013)
www.w3.org/TR/touch-events/
![Page 61: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/61.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interface Touch { // specifică zona tactilă readonly attribute long identifier;readonly attribute EventTarget target;readonly attribute long screenX;readonly attribute long screenY;readonly attribute long clientX;readonly attribute long clientY;readonly attribute long pageX;readonly attribute long pageY;
};interface TouchList { // definește lista punctelor de contact pentru un eveniment tactil
readonly attribute unsigned long length;getter Touch? item (unsigned long index);
};interface TouchEvent : UIEvent {
readonly attribute TouchList touches;readonly attribute TouchList targetTouches;readonly attribute TouchList changedTouches;readonly attribute boolean altKey;readonly attribute boolean metaKey;readonly attribute boolean ctrlKey;readonly attribute boolean shiftKey;
};
pot fi tratate evenimentele
touchstart
touchend
touchmove
touchcancel
![Page 62: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/62.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
evenimente referitoare la interacțiunea cu browser-ul
load, unload, select, change, submit, focus, blur, resize, scroll
![Page 63: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/63.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
evenimente privitoare la modificarea arborelui DOM(mutation events)
DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved,DOMAttrModified, DOMCharacterDataModified,
DOMNodeInsertedIntoDocument,DOMNodeRemovedFromDocument
![Page 64: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/64.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
type
specifică tipul evenimentului ca șir de caracteree.g., "click", "load", "scroll", "submit"
![Page 65: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/65.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
target
desemnează nodulasupra căruia evenimentul a fost declanșat inițial
![Page 66: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/66.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
currentTarget
indică nodul care tratează evenimentul
![Page 67: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/67.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
bubbles
indică dacă evenimentul se propagăspre elemente ascendente (valoarea true)
ori către descendenți (valoarea false)
![Page 68: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/68.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
bubbles
e.g., evenimentele abort, error, select, submit, resize, scroll,click, mousedown, mouseover, mousemove, mouseout,
touchstart, touchend pot avea bubbles = true
![Page 69: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/69.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
bubbles
în cazul evenimentelor focus, blur, load, unload, proprietatea bubbles are valoarea false
![Page 70: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/70.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
cancelable
precizează dacă evenimentul poate fi întrerupt
![Page 71: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/71.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
cancelable
de exemplu, pentru evenimentele load, unload, abort, error, select, focus, blur, resize, scroll, touchcancel
proprietatea cancelable este setată ca fiind false
![Page 72: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/72.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
cancelable
pentru evenimente precum click, mousedown, mouseup,mouseover, mousemove, mouseout, touchstart, touchend,
touchmove proprietatea cancelable poate fi true
![Page 73: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/73.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
eliminarea tratării unui eveniment
removeEventListener ()
![Page 74: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/74.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
ignorarea comportamentului implicit
preventDefault ()
![Page 75: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/75.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
comportamentul implicit pentru evenimentul tactiltouchend poate varia în funcție de context/platformă:
mousemove, mousedown, mouseup, click
![Page 76: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/76.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
trimiterea evenimentului să poată fi procesatconform modelului oferit de implementare
dispatchEvent ()
![Page 77: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/77.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
// adăugăm o funcție de tratare a evenimentului de inserare a unui nod
document.addEventListener ("DOMNodeInserted", inserareNod, false);
// funcția apelată la apariția evenimentului de inserare a unui nod
// e.g., se recurge la metoda appendChild() oferită de specificația DOM
function inserareNod (eveniment) {
console.log ("S-a adăugat un nod nou: " + eveniment.target.nodeName);
}
Firebug – vizualizarea consoleidetalii la https://getfirebug.com/wiki/index.php/Console_API
![Page 78: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/78.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Remarcă:unele navigatoare acceptă tratarea unor evenimente
nestandardizate (încă) de Consorțiul Web
exemple:editarea datelor – cut, copy, paste
![Page 79: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/79.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Remarcă:anumite evenimente sunt specificate în cadrul HTML5
conectivitatea la rețea: online, offline
interacțiunea cu utilizatorul: redo, undo, drag, drop, mousewheel, contextmenu, pagehide, pageshow,…
starea dispozitivului – deviceorientation, devicemotion
utilizarea imprimantei – beforeprint, afterprint
…și altele
![Page 80: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/80.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
studiu de caz (Ondřej Žára, 2013)
calcul tabelar în 30 de linii JavaScript
jsfiddle.net/ondras/hYfN3/
![Page 81: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/81.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
for (var i = 0; i < 6; i++) { // construim tabelul cu câmpuri de intrarevar row = document.querySelector ("table").insertRow (-1); // adăugăm un rând la tabelfor (var j = 0; j < 6; j++) {
var letter = String.fromCharCode ("A".charCodeAt (0) + j - 1);row.insertCell (-1).innerHTML = i && j ? "<input id='" + letter + i + "'/>" : i || letter;
}}
var DATA={}, INPUTS=[].slice.call (document.querySelectorAll ("input"));INPUTS.forEach ( function(elm) { // pentru fiecare element <input>, procesăm valoarea
elm.onfocus = function (e) { e.target.value = localStorage[e.target.id] || ""; };elm.onblur = function (e) { localStorage[e.target.id] = e.target.value; computeAll(); };var getter = function () { // funcție de furnizare a valorii (deja stocată în localStorage)
var value = localStorage[elm.id] || "";if (value.charAt(0) == "=") { // începe cu =, deci e o formulă care va fi evaluată
with (DATA) return eval (value.substring(1));} else { return isNaN (parseFloat (value)) ? value : parseFloat (value); }
};Object.defineProperty (DATA, elm.id, { get: getter });Object.defineProperty (DATA, elm.id.toLowerCase(), { get: getter });
} );( window.computeAll = function () {
INPUTS.forEach (function (elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });} )();
![Page 82: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/82.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
În ce mod are loc transferul asincronîntre aplicațiile de pe server și documentul Web?
![Page 83: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/83.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
permite transfer asincron de date între client (browser) și serverul Web
a se revizita cursul“Tehnologii Web”
![Page 84: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/84.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
limbaje standardizate de structurare – e.g., (X)HTML –și de prezentare a datelor: CSS
![Page 85: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/85.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
redare + interacțiune la nivel de client Webvia standardul DOM
![Page 86: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/86.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
interschimb & manipulare de date reprezentate prin: diverse dialecte XML,
JSON (JavaScript Object Notation), HTML,
alte formate
![Page 87: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/87.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
transfer (a)sincron de datefacilitat de obiectul XMLHttpRequest
![Page 88: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/88.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
procesare folosind limbajul ECMAScript (JavaScript)
![Page 89: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/89.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
disponibil la nivel de navigator Web via JavaScript
![Page 90: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/90.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
nivelul 1 (în mod normal, implementat de orice browser)www.w3.org/TR/XMLHttpRequest1/
nivelul 2 (pentru navigatoare recente) – în lucru la W3Cwww.w3.org/TR/XMLHttpRequest/
![Page 91: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/91.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
permite realizarea de cereri HTTP – e.g., GET, POST,… –dintr-un program rulând la nivel de client (browser)
spre o aplicație / un serviciu Web existent(ă) pe server,în mod asincron ori sincron
![Page 92: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/92.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interface XMLHttpRequest : XMLHttpRequestEventTarget {attribute Function? onreadystatechange;
// funcția de tratare a evenimentului de schimbare a stării transferuluireadonly attribute unsigned short readyState; // starea transferului
// realizarea unei cereri HTTPvoid open (DOMString metoda, DOMString url, optional boolean asinc = true,
optional DOMString? cont, optional DOMString? parola); // deschide conex.void setRequestHeader (DOMString campAntet, DOMString valoare);
// stabilește antetul HTTPvoid send (optional data = null); // trimite date spre serverul Webvoid abort (); // abandonează transferul
// receptarea răspunsului de la serverul Webreadonly attribute unsigned short status; // codul de stare HTTP: 200, 303, 400,…readonly attribute DOMString statusText; // textul asociat codului de stareDOMString? getResponseHeader (DOMString antet); // preia antetul HTTPDOMString getAllResponseHeaders (); // preia toate câmpurile răspunsuluireadonly attribute any response; // conține răspunsul propriu-zisreadonly attribute DOMString responseText; // conține răspunsul: format textreadonly attribute Document? responseXML; // stochează răspunsul: date XML
};
![Page 93: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/93.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
interface XMLHttpRequestEventTarget : EventTarget { // funcții de tratare a evenimentelor asociate transferului asincronattribute Function? onloadstart; // transferul a începutattribute Function? onprogress; // se realizează transferul datelor…attribute Function? onabort; // s-a abandonat transferul de dateattribute Function? onerror; // a apărut o eroare de transmisieattribute Function? onload; // datele au fost recepționate de clientattribute Function? ontimeout; // a apărut o întârziere de transferattribute Function? onloadend; // transferul s-a terminat
};
// constante ce specifică starea transferului (vezi proprietatea readyState)const unsigned short UNSENT = 0; // încă n-au fost efectuate transferuriconst unsigned short OPENED = 1; // s-a deschis conexiunea cu serverulconst unsigned short HEADERS_RECEIVED = 2; // primire câmpuri-antet HTTPconst unsigned short LOADING = 3; // datele se încarcăconst unsigned short DONE = 4; // gata! (transfer efectuat complet)
![Page 94: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/94.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
open ( )
inițiază – deschide – o conexiune HTTP cu serverul,emițând o cerere: GET, POST,…
![Page 95: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/95.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
send ( )
transmite (asincron) date – e.g., XML, JSON etc. –,spre aplicația/serviciul ce rulează pe server
![Page 96: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/96.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
send ( )
orice listener (asociat evenimentelor onload, ontimeout, onabort,…) trebuie stabilit înainte de a trimite date
![Page 97: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/97.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
abort ( )
abandonează transferul de date curent
![Page 98: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/98.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
setRequestHeader ( )
specifică anumite câmpuri de antet HTTPexemple: Cookie, Keep-Alive, User-Agent,…
![Page 99: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/99.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
getResponseHeader ( )
furnizează un anumit câmp prezentîn antetul mesajului de răspuns HTTP trimis de server
![Page 100: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/100.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
getAllResponseHeaders ( )
oferă toate câmpurile HTTP trimise de server,exceptând Set-Cookie
![Page 101: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/101.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
readyState
furnizează codul de stare a transferului:0 – UNSENT, 1 – OPENED,
2 – HEADERS_RECEIVED, 3 – LOADING, 4 – DONE
![Page 102: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/102.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
status
oferă codul de stare HTTP întors de serverul Web:200 (Ok), 404 (Not Found), 500 (Internal Server Error),…
![Page 103: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/103.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
statusText
conține mesajul corespunzător codului de stare HTTP
![Page 104: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/104.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
responseText
responseXML
conțin răspunsul (datele) obținut(e) de la server
![Page 105: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/105.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
onreadystatechange
specifică funcția ce va fi invocată la modificările de stareale transferului de date dintre server și client
![Page 106: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/106.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
obiectul XMLHttpRequest
excepții specifice care pot fi emise (conform DOM 3):SECURITY_ERR
NETWORK_ERR
ABORT_ERR
![Page 107: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/107.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
XMLHttpRequest – nivelul 2
noutăți:stabilirea unui timeout privind realizarea unei cereri
![Page 108: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/108.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
XMLHttpRequest – nivelul 2
noutăți:datele vehiculate pot fi de mai multe tipuri
(ArrayBuffer, Blob, Document, DOMString, FormData)
![Page 109: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/109.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
XMLHttpRequest – nivelul 2
noutăți:procesul de upload poate avea asociatvia atributul upload un handler specific
![Page 110: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/110.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
XMLHttpRequest – nivelul 2
noutăți:utilizând constructorul AnonXMLHttpRequest,
transferurile sunt considerate “anonime” (i.e., nu se trimit cookie-uri, anteturi de autentificare,…)
![Page 111: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/111.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
http://caniuse.com/ – verificarea suportului oferitde browser pentru o anume tehnologie
(în acest caz, suportul pentru XMLHttpRequest 2)
![Page 112: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/112.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce alte aspecte trebuie considerate
atunci când se recurge la Ajax?
![Page 113: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/113.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
oferirea de alternative la Ajax, atunci când suportulpentru acesta nu este implementat/activat
graceful degradation
![Page 114: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/114.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
minimizarea traficului dintre browser și server
![Page 115: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/115.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
transferul de date poate fi monitorizat (+interceptat)via instrumente dedicate
WireShark
Firebug, Fiddler, TamperData, Live HTTP Headers
![Page 116: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/116.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
stabilirea unui mod de interacțiune clar
interacțiune HTML clasică versus
interacțiune „bogată” cu Ajaxversus
interacțiune la nivelul unei aplicații convenționale
![Page 117: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/117.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
adoptarea Ajax pentru creșterea utilizabilității,nu doar de dragul tehnologiei
exemple negative:distragerea utilizatorului, abuz de resurse(e.g., supradimensionarea arborelui DOM)
![Page 118: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/118.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
AJAX – Asynchronous JavaScript And XML
oferă premisele invocării asincrone de servicii Webîn stilul REST
transferul de date se realizeaza via POX (Plain Old XML),JSON (JavaScript Object Notation),
AHAH (Asynchronous HTML and HTTP)sau text neformatat
![Page 119: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/119.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare AJAX
privind programarea: invocare de servicii Web (RESTful Service, JSON Message)
dialog între browser & server(Periodic Refresh, Submission Throttling, Cross-Domain Proxy)asigurarea performanței (Fat Client, Browser-Side Cache,
Guesstimate, Predictive Fetch, Code Compression, On-Demand JS) popularea arborelui DOM
![Page 120: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/120.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare AJAX
referitoare la interacțiunea cu utilizatorul: formulare
(Live Form, Data Grid, Progress Indicator, Suggestion, Slider)widget-uri de afișare a conținutului
arhitectura informațieifuncționalitate (Lazy Registration, Direct Login, Heartbeat,
Autosave, Unique URLs)
![Page 121: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/121.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Șabloane de proiectare AJAX
inginerie Web: jurnalizare (e.g., Logging)
depanareinspecție de cod/date (DOM Inspection, Traffic Sniffing)
vezi și cursul viitor
![Page 122: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/122.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
a se consultahttp://ajaxpatterns.org/Patterns
![Page 123: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/123.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Comettermen propus de Alex Russel, 2006
permite ca datele să fie “împinse” (push) de către server spre aplicația client, utilizând conexiuni HTTP
persistente (long-lived) în vederea reducerii latenței
![Page 124: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/124.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Comet
șablon de proiectare a aplicațiilor Webcare necesită realizarea de conexiuni persistente,
în stilul peer-to-peer
utilizat de aplicațiile Web intensiv interactive,eventual colaborative – e.g., Google Docs, Mibbit,…
![Page 125: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/125.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Comet
complementar Ajax
long pollingHTTP server push
Reverse Ajax
http://ajaxpatterns.org/HTTP_Streaming
![Page 126: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/126.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
implementare: HTTP long polling sau HTTP streaming
de studiat M. Carbou, “Reverse Ajax, Part 1: Introduction to Comet”, IBM developerWorks, 2011
http://www.ibm.com/developerworks/web/library/wa-reverseajax1/
![Page 127: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/127.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Comet
instrumente software – exemplificări:Atmosphere, DWR, Ice Faces, Jetty, Orbited
în contextul JavaScript, un exemplu notabil esteAPE (Ajax Push Engine)
www.ape-project.org
![Page 128: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/128.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ajax/Comet oferă suport pentru dezvoltarea de aplicații Web hibride – mash-ups
combinarea – în contextul nostru, la nivel de client –a conținutului ce provine din surse (situri)
multiple, oferind o funcționalitate/experiență nouă
![Page 129: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/129.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicații mash-up
se bazează pe fluxuri RSS/Atom, servicii Web, API-uri publice,…
“curentul” SaaS (Software As A Service)
![Page 130: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/130.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
mash-ups
Surse de date(data feeds)
Atom, RSS, geoRSS, microdateHTML5, RDFa,…
Interfețe de programare(API-uri)
specifice serviciilor publice& de procesare JSON/XML
Biblioteci/framework-uripentru dezvoltare
framework-uri Web genericesau oferite de organizații
Instrumente interactive(Web tools)
eventual, disponibile în cloude.g., Yahoo! Pipes
Platforme(Platform As A Service)
Heroku, Google App Engine, Nodejitsu, Windows Azure,…
![Page 131: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/131.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
o listă a mash-up-urilor existente: www.programmableweb.com/mashups/directory
![Page 132: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/132.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Nu există o problemă de securitateprivind accesul la resurse via JavaScript?
![Page 133: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/133.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Same-Origin Security Policy
stipulează că un program JavaScript trebuie să accesezedoar datele aparținând aceleași origini
– i.e., provenite din același domeniu Internet –a script-ului JavaScript
![Page 134: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/134.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
se permit doar transferuri vizând reprezentări de resursereferitoare la imagini, fișiere CSS
și alte programe JavaScript aparținând aceleași origini
![Page 135: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/135.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Same-Origin Security Policy
previne cazurile în care un document/program încărcatdintr-o origine să poată accesa/modifica proprietăți
ale unui document aparținând altei origini
detalii la www.w3.org/Security/wiki/Same_Origin_Policy
![Page 136: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/136.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
CORS (Cross-Origin Resource Sharing)
mecanism ce permite partajarea la nivel de client a resurselor provenind din domenii Internet diferite
astfel, se pot emite cereri via XMLHttpRequest între domenii
![Page 137: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/137.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
CORS (Cross-Origin Resource Sharing)
specificație în lucru la Consorțiul Web (ianuarie 2013)http://www.w3.org/TR/cors/
deja există suport oferit de navigatoarele actuale
tutorial: T. Brown, DOM access control using cross-originresource sharing, Opera, 2011 – http://tinyurl.com/chozusf
![Page 138: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/138.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Având un mash-up Web la nivel de client ce utilizează N surse de date provenite din domenii
diferite, la câți arbori DOM are accesprogramul JavaScript?
întrebări (pentru acasă)
Transferul datelorvia Comet
este bidirecțional?De ce?
![Page 139: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #9): JavaScript în navigatorul Web](https://reader036.fdocuments.us/reader036/viewer/2022081403/5552c02eb4c905920f8b47c0/html5/thumbnails/139.jpg)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
episodul viitor: ingineria aplicațiilor JavaScript