Post on 13-Apr-2017
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dezvoltarea aplicațiilor Webla nivel de client
{ⵄ}programare Web
JavaScript în cadrul navigatorului Web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“Solving the problem is more importantthan being right.”
Milton Glaser
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Majoritatea programelor JavaScript
rulează – sunt interpretate –
în navigatorul Web via un script engine
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Majoritatea programelor JavaScript
rulează – sunt interpretate –
în navigatorul Web via un script engine
Chakra (Microsoft)
SpiderMonkey, IonMonkey, Rhino (Mozilla)
V8 (Google, Opera, Node.js)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
fazele principale ale procesării și rulării codului JavaScript(Hyungwook Lee, 2014)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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>
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Remarcă:
în loc de tipul MIME text/javascript
ar putea fi indicat application/javascript
nesuportat de versiuniIE mai vechi
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
de revăzut materia „Tehnologii Web”
http://profs.info.uaic.ro/~busaco/teach/courses/web/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
DOM 1 (1998) – www.w3.org/TR/REC-DOM-Level-1/
DOM Core + DOM HTML
DOM 2 (2001) – www.w3.org/TR/REC-DOM-Level-2/
spații de nume XML, aplicare de stiluri CSS, evenimente
DOM 3 (2004) – www.w3.org/TR/DOM-Level-3-Core/
module oferind diverse funcționalități
DOM 4 (19 noiembrie 2015) – www.w3.org/TR/dom/
restructurarea unor interfețe
DOM Living Standard (nov. 2015) – dom.spec.whatwg.org/
specific HTML5, în continuă dezvoltare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
<!DOCTYPE html>
<html>
<body>
<p>Tehnologii Web</p>
<div>
<img src="web.png"/>
</div>
</body>
</html>
HTMLHtmlElement
HTMLBodyElement
HTMLParagraphElement
Text
HTMLDivElement
HTMLImageElement
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Un program JavaScript are acces la arborele DOM (Document Object Model)
corespunzător documentului HTML
minimal, navigatorul Web implementează
recomandarea DOM Level 2 HTML (2003)
www.w3.org/TR/DOM-Level-2-HTML
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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, transfer (a)sincron de date,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Arborele DOM asociat documentului (X)HTMLpoate fi accesat/alterat via obiectul document
instanță a clasei implementând interfața HTMLDocument
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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ă în limbajul declarativ WebIDL
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Deoarece interfața HTMLDocument
extinde Document, putem recurge la funcționalitățile
stipulate de specificația DOM generală
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
getElementById (identificator)
furnizează un element – nod de tip Element –conform identificatorului său unic, desemnat de valoarea
atributului id specificat în cadrul documentului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
parentNode
oferă acces la numele nodului-părinte al nodului curent
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
nextSibling
acces la următorul nod de pe același nivel al arborelui
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
previousSibling
acces la nodul precedent de pe același nivel al arborelui
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
childNodes
proprietate furnizând într-un tablounumele nodurilor-copil ale nodului curent
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
firstChild
desemnează primul nod-copil al nodului curent
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
lastChild
specifică ultimul nod-copil al nodului curent
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
attributes
reprezintă tabloul asociativconținând atributele asociate unui nod de tip Element
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Interfața HTMLElement o extindepe cea generală oferită de DOM Level 2
fiecare element HTML specific derivă din ea
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
};
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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 un index numeric
Node namedItem (in DOMString name); // furnizează un nod pe baza numelui
};
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Cum putem afla/modifica diverse informațiiprivind nodurile arborelui DOM?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații referitoare la nodurile arborelui DOM
nodeType
proprietate care furnizează tipul unui nod
ELEMENT_NODE (1) = elementTEXT_NODE (3) = conținut text
COMMENT_NODE (8) = comentariu…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații referitoare la nodurile arborelui DOM
nodeValue
proprietate oferind valoarea unui nod
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații referitoare la nodurile arborelui DOM
innerHTML
proprietate – mutabilă – ce furnizează codul (X)HTMLdin cadrul unui nod de tip Element
utilizarenerecomandabilă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații referitoare la nodurile arborelui DOM
textContent
proprietate ce furnizează/stabilește conținutul textual al nodului și posibililor descendenți
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Informații referitoare la nodurile arborelui DOM
getAttribute (numeAtribut)
metodă care oferă acces la valoarea unui atribut
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modificarea structurii arborelui DOM
createElement (element)
creează un nod de tip Element
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modificarea structurii arborelui DOM
createTextNode (nod)
creează un nod cu conținut textual
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modificarea structurii arborelui DOM
appendChild (nod)
adaugă un nod-copil nodului curent
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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);// adăugă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ă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
consultarea arborelui DOM via extensia Firebug
inspectarea valorilorproprietăților DOM
arborele DOM corespunzător codului HTML
generat prin program
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modificarea structurii arborelui DOM
removeChild (nod)
elimină un nod-copil
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modificarea structurii arborelui DOM
cloneChild ()
„clonează” un nod al arborelui
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modificarea structurii arborelui DOM
setAttribute (atribut, valoare)
stabilește valoarea unui atribut
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
generarea dinamică a unui formular Web
http://jsfiddle.net/busaco/0wvn3fha/
recurgerea la createElement()
appendChild()
getElementById()
JS Fiddle
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Găsirea de noduri via selectori CSS
Selectors API – Level 1
recomandare W3C (2013)
www.w3.org/TR/selectors-api/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
exemplificare – folosim consola oferită de browser: document.querySelectorAll ("section[id^=\"week\"]:nth-child(even) > h2");
selectori CSS3
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
eveniment = acțiune produsă în cadrul mediului deexecuție în urma căreia programul va putea reacționa
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
<button onclick="alert ('Au!');">Apasă-mă!</button>
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
<button onclick="alert ('Au!');">Apasă-mă!</button>
document.getElementById ("identificator").onclick
= trateazaClick; // mai ‘evoluat’ via DOM 1
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
tratarea standardizată a evenimentelor:specificația DOM Level 2 Events
www.w3.org/TR/DOM-Level-2-Events/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
specificarea de activități executatela apariția unui eveniment
obiect.addEventListener ("eveniment", funcție, mod);
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
descrierea arborescentă a fluxului de evenimente
capture versus bubble
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
se va utiliza un set standard de evenimente
e.g., de control al interacțiunii cu utilizatorul
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
proprietăți asociate evenimentelorprivind acțiunile mouse-ului
click, mousedown, mouseup, mouseover, mousemove, mouseout
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
interacțiuni tactile – touch events
recomandare a Consorțiului Web (2013)
www.w3.org/TR/touch-events/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
evenimente referitoare la interacțiunea cu browser-ul
load, unload, select, change, submit, focus, blur, resize, scroll
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
evenimente privitoare la modificarea arborelui DOM(mutation events)
DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved,DOMAttrModified, DOMCharacterDataModified,
DOMNodeInsertedIntoDocument,DOMNodeRemovedFromDocument
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
evenimente privitoare la modificarea arborelui DOM(mutation events)
în prezent, acestea sunt considerate învechite
alternativă: recurgerea la MutationObserver (DOM 4)http://www.w3.org/TR/dom/#mutation-observers
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// monitorizarea modificărilor structurale ale arborelui DOM
[Constructor(MutationCallback callback)]
interface MutationObserver {
// observă modificări
void observe(Node target, MutationObserverInit options);
// oprește observarea modificărilor
void disconnect();
// preia secvența de noduri ce s-au modificat
sequence<MutationRecord> takeRecords();
};
// funcția de tratare a evenimentelor
// privind modificările de structură a arborelui DOM
callback MutationCallback = void (sequence<MutationRecord> mutations,
MutationObserver observer);
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
dictionary MutationObserverInit { // definește ce anume se observă:
boolean childList = false; // o listă de noduri-copil ale nodului țintă (target)
boolean attributes; // atributele nodului țintă
boolean characterData; // conținutul textual propriu-zis
boolean subtree = false; // descendenții nodului țintă
boolean attributeOldValue;
boolean characterDataOldValue;
sequence<DOMString> attributeFilter; // filtre asupra atributelor observate
};
// informații privitoare la nodurile observate, ce s-au modificat
interface MutationRecord {
readonly attribute DOMString type;
readonly attribute Node target;
[SameObject] readonly attribute NodeList addedNodes;
[SameObject] readonly attribute NodeList removedNodes;
readonly attribute Node? previousSibling;
readonly attribute Node? nextSibling;
readonly attribute DOMString? attributeName;
readonly attribute DOMString? attributeNamespace;
readonly attribute DOMString? oldValue;
};
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
type
specifică tipul evenimentului ca șir de caracteree.g., "click", "load", "scroll", "submit"
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
target
desemnează nodulasupra căruia evenimentul a fost declanșat inițial
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
currentTarget
indică nodul care tratează evenimentul
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
bubbles
în cazul evenimentelor focus, blur, load, unload, proprietatea bubbles are valoarea false
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
proprietăți utile ale obiectului Event
cancelable
precizează dacă evenimentul poate fi întrerupt
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
eliminarea tratării unui eveniment
removeEventListener ()
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
ignorarea comportamentului implicit
preventDefault ()
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
comportamentul implicit pentru evenimentul tactiltouchend poate varia în funcție de context/platformă:
mousemove, mousedown, mouseup, click
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Răspunsul la evenimente
trimiterea evenimentului să poată fi procesatconform modelului oferit de implementare
dispatchEvent ()
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Remarcă:unele navigatoare acceptă tratarea unor evenimente
nestandardizate (încă) de Consorțiul Web
exemple:editarea datelor – cut, copy, paste
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
studiu de caz (Ondřej Žára, 2013)
calcul tabelar în 30 de linii JavaScript
jsfiddle.net/ondras/hYfN3/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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) {} });} )();
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
În ce mod are loc transferul asincronîntre aplicațiile de pe server și documentul Web?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
AJAX – Asynchronous JavaScript And XML
permite transfer asincron de date între client (browser) și serverul Web
a se revizita cursul„Tehnologii Web”
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
limbaje standardizate de structurare – e.g., (X)HTML –și de prezentare a datelor: CSS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
redare + interacțiune la nivel de client Webvia standardul DOM
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
interschimb și manipulare de date reprezentate prin: diverse dialecte XML,
JSON (JavaScript Object Notation), HTML,
alte formate
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
transfer (a)sincron de datefacilitat de obiectul XMLHttpRequest
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
AJAX – Asynchronous JavaScript And XML
suită de tehnologii deschise
procesare folosind limbajul ECMAScript (JavaScript)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
disponibil la nivel de navigator Web via JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
specificația inițială bazată pe implementarea MSIEoferită în prezent de aproape orice browser
www.w3.org/TR/XMLHttpRequest1/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
specificația actuală oferită de navigatoare moderne(Living Standard, 25 noiembrie 2015)
https://xhr.spec.whatwg.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
open ( )
inițiază – deschide – o conexiune HTTP cu serverul,emițând o cerere: GET, POST,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
send ( )
transmite (asincron) date – e.g., XML, JSON etc. –,spre aplicația/serviciul ce rulează pe server
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
send ( )
orice listener (asociat evenimentelor onload, ontimeout, onabort,…) trebuie stabilit înainte de a trimite date
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
abort ( )
abandonează transferul de date curent
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
setRequestHeader ( )
specifică anumite câmpuri de antet HTTPexemple: Cookie, Keep-Alive, User-Agent,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
getResponseHeader ( )
furnizează un anumit câmp prezentîn antetul mesajului de răspuns HTTP trimis de server
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
getAllResponseHeaders ( )
oferă toate câmpurile HTTP trimise de server,exceptând Set-Cookie
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
readyState
furnizează codul de stare a transferului:0 – UNSENT, 1 – OPENED,
2 – HEADERS_RECEIVED, 3 – LOADING, 4 – DONE
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
status
oferă codul de stare HTTP întors de serverul Web:200 (Ok), 404 (Not Found), 500 (Internal Server Error),…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
statusText
conține mesajul corespunzător codului de stare HTTP
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
responseText
responseXML
conțin răspunsul (datele) obținut(e) de la server
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
onreadystatechange
specifică funcția ce va fi invocată la modificările de stareale transferului de date dintre server și client
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obiectul XMLHttpRequest
excepții specifice care pot fi emise (conform DOM 4 Core)
AbortError InvalidAccessError InvalidStateError
NetworkError SecurityError TimeoutError
…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Noutăți:stabilirea unui timeout privind realizarea unei cereri
(la nivel de milisecunde)
o valoare nenulă cauzează realizarea unei preîncărcări (fetching) a resursei – https://fetch.spec.whatwg.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Noutăți:datele vehiculate pot fi de mai multe tipuri
(ArrayBuffer, Blob, Document, DOMString, FormData)
detalii la https://xhr.spec.whatwg.org/#interface-formdata
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Noutăți:procesul de transmitere a datelor spre server (upload)
poate avea asociat un handler specific via proprietatea upload
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Noutăți:progresul încărcării poate fi urmărit pe baza
funcționalităților specificate de interfața ProgressEvent
https://xhr.spec.whatwg.org/#interface-progressevent
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface XMLHttpRequest : XMLHttpRequestEventTarget {// funcția de tratare a evenimentului de schimbare a stării transferuluiattribute Function? onreadystatechange;readonly attribute unsigned short readyState; // starea transferului
// realizarea unei cereri HTTP// deschide o conexiune cu serverul Webvoid open (ByteString metoda, [EnsureUTF16] DOMString url);void open (ByteString metoda, [EnsureUTF16] DOMString url,
boolean asinc, optional ByteString? numecont = null, optional DOMString? parola = null);
// stabilește antetul HTTPvoid setRequestHeader (ByteString campAntet, ByteString valoare);// stochează valoarea în milisecunde a timpului maxim de așteptareattribute unsigned long timeout;
void send (optional data = null); // trimite date spre serverul Webvoid abort (); // abandonează transferul
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// receptarea răspunsului de la serverul Web// codul de stare HTTP emis de server: 200, 303, 400,…readonly attribute unsigned short status; // textul asociat codului de starereadonly attribute ByteString statusText;
// preia valoarea câmpului-antet din mesajul HTTP transmis de serverByteString? getResponseHeader (ByteString antet);// furnizează toate câmpurile răspunsuluiByteString getAllResponseHeaders ();
// specifică tipul MIME al răspunsului: blob, document, json, text,…attribute XMLHttpRequestResponseType responseType;// conține răspunsul propriu-zisreadonly attribute any response;// furnizează răspunsul în format textreadonly attribute DOMString responseText; // stochează răspunsul ca document XMLreadonly attribute Document? responseXML;
};
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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 propriu-zise se încarcăconst unsigned short DONE = 4; // gata! (transfer efectuat complet)
specificație WebIDL
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
studiu de caz
preia asincron o secvență de numere aleatoare
generate de random.org
jsfiddle.net/busaco/2254kdqn/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
const URL = 'https://www.random.org/sequences/?min=1&max=50&col=1&format=plain';const TIMP = 2000;
var xhr = new XMLHttpRequest();var numere = document.getElementById('numere');// eveniment de tratare a expirării timpului de așteptarexhr.ontimeout = function () { numere.textContent = 'Timpul a expirat... :('; };// eveniment de tratare a preluării datelor solicitate unui serviciuxhr.onload = function () {
if (xhr.readyState === 4) { // am primit dateleif (xhr.status === 200) { // răspuns Ok din partea serverului
// înlocuim spațiile albe cu virgulă și plasăm conținutul// în cadrul elementului HTML identificat prin 'numere'numere.textContent = xhr.responseText.trim().replace(/\W+/g, ', ');
} else {numere.textContent = 'A survenit o eroare: ' + xhr.statusText;
}}
};
xhr.open("GET", URL, true); // deschidem conexiuneaxhr.timeout = TIMP; // stabilim timpul maxim de așteptare a răspunsuluixhr.send(null); // trimitem cererea HTTP (nu expediem date)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Ce alte aspecte trebuie considerate
atunci când se recurge la Ajax?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Oferirea de alternative la Ajax, atunci când suportulpentru acesta nu este implementat/activat
graceful degradation
progressive enhancement
www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Transferul de date poate fi monitorizat (+interceptat)via instrumente dedicate
la nivel de desktop: instrumentul WireShark
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
direct în navigator (eventual, ca extensii)Firebug, Fiddler, TamperData, Live HTTP Headers
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Adoptarea Ajax pentru creșterea utilizabilității,nu doar de dragul tehnologiei
exemple negative:distragerea utilizatorului
abuz de resurse (e.g., supradimensionarea arborelui DOM)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Șabloane de proiectare AJAX
inginerie Web: jurnalizare (e.g., Logging)
depanareinspecție de cod/date (DOM Inspection, Traffic Sniffing)
vezi și cursul viitor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Comet
complementar Ajax
long pollingHTTP server push
Reverse Ajax
http://ajaxpatterns.org/HTTP_Streaming
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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ă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aplicații mash-up
se bazează pe fluxuri RSS/Atom, servicii Web, API-uri publice,…
„curentul” SaaS (Software As A Service)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
mash-ups
lista mash-up-urilor: www.programmableweb.com/mashups/directory
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Nu există o problemă de securitateprivind accesul la resurse via JavaScript?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
https://developer.mozilla.org/Web/Security/Same-origin_policy
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interactiune web: ajax – studiu de cazvar url = "http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film";
// realizăm o cerere HEAD pentru a obține meta-date despre o resursăvar client = new XMLHttpRequest ();client.open ("HEAD", url, true);client.send ();client.onreadystatechange = function () {
// am recepționat câmpurile-antet?if (client.readyState == 2) {// semnalăm tipul MIME și data ultimei actualizărialert ("Resursa de tip '" +
client.getResponseHeader ("Content-Type") + "' s-a actualizat la " + client.getResponseHeader ("Last-Modified"));
}}
preluarea în mod asincron via HEAD a unor meta-date
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
CORS (Cross-Origin Resource Sharing)
recomandare a Consorțiului Web (ianuarie 2014)http://www.w3.org/TR/cors/
mecanism ce permite partajarea la nivel de client a resurselor provenind din domenii Internet diferite
astfel, se pot emite cereri via XMLHttpRequest între domenii
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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?
test scris #4 (T4)
Transferul datelorvia Comet
este bidirecțional?De ce?