Embed Size (px)
DESCRIPTION
Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Citation preview
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
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Cum rulează programele JavaScriptîn navigatorul Web?
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
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>
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
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”
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
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
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,…
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
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
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ă
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
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
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
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
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
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
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
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
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?
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
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
};
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
};
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?
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,…
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
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ă
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
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
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
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
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
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ă
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
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
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
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
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/
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
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
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
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)
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
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>
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
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
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/
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);
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
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/
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
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
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
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
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
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
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
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/
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
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
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
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"
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
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
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)
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
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
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
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
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
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 ()
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Răspunsul la evenimente
ignorarea comportamentului implicit
preventDefault ()
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
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 ()
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
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
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
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/
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) {} });} )();
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?
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”
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
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
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
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
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)
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
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/
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
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
};
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)
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,…
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
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
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
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,…
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
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
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
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),…
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
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
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
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
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
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)
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
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,…)
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)
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?
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
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
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
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
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)
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
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
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)
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
a se consultahttp://ajaxpatterns.org/Patterns
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
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,…
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
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/
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
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ă
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)
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,…
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
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?
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
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
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
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
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
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?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
episodul viitor: ingineria aplicațiilor JavaScript
