STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Full-Stack Web Development
JavaScript în cadrul navigatorului Web
javascript.info
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

“Solving the problem is more important
than being right.”
Milton Glaser

Cum rulează programele JavaScript
în navigatorul Web?

Majoritatea programelor JavaScript
rulează – sunt interpretate –
în navigatorul Web via un script engine

Majoritatea programelor JavaScript
rulează – sunt interpretate –
în navigatorul Web via un script engine
Chakra (Edge, Node-ChakraCore – Microsoft)
JavaScriptCore (Safari, React Native – Apple)
JerryScript (destinat IoT – JS Foundation)
SpiderMonkey (Firefox, SpiderNode – Mozilla)
Rhino (implementare Java – Mozilla)
Nashorn (OpenJDK – Oracle)
V8 (Chrome, Opera, Edge, Node.js – Google)

fazele principale ale procesării și rulării codului JavaScript
(Hyungwook Lee, 2014)

Analiza lexicală și sintactică precedă faza de compilare
procesarea (parsing) codului-sursă JS
arbore sintactic abstract (AST – Abstract Syntax Tree)
conținând obiecte ce reprezintă structura programului

Analiza lexicală și sintactică precedă faza de compilare
procesarea (parsing) codului-sursă JS
arbore sintactic abstract (AST – Abstract Syntax Tree)
conținând obiecte ce reprezintă structura programului
AST este apoi transformat în cod binar (bytecode)

etape principale ale procesării codului JS la V8
(T. Verwaest, 2019) – v8.dev/blog/scanner

intern, procesorul JavaScript interpretează codul-sursă
care apoi este optimizat de un compilator
(M. Bynens & B. Meurer, 2018) – mathiasbynens.be/notes/shapes-ics

cod JScod intermediar (bytecode)cod mașină
M. Bynens & B. Meurer, 2018
mathiasbynens.be/notes/prototypes

cod JScod intermediar (bytecode)cod mașină
M. Bynens & B. Meurer, 2018
function add(x, y) {
return x + y;
}
add(1, 2);
StackCheck
Ldar a1
Add a0, [0]
Return
leaq rcx,[rip+0x0]
movq rcx,[rcx-0x37]
testb [rcx+0xf],0x1
jnz CompileLazyDeoptimizedCode
push rbp
movq rbp,rsp
push rsi
push rdi
cmpq rsp,[r13+0xe88]
jna StackOverflow
…
jo Deoptimize
shlq rdx, 32
movq rax,rdx
movq rsp,rbp
pop rbp
ret 0x18

V8 – v8.dev
interpretorul Ignition + compilatorul TurboFan

Optimizările sunt realizate pe baza unor euristici
(speculative optimizations)
interpretorul colectează informații (profiling data)
despre datele de intrare (input) ale unor operații
aceste informații vor fi utilizate apoi de compilator pentru
a face diverse presupuneri vizând input-urile posibile

etapele principale realizate de procesorul V8
a se studia articolul lui B. Meurer (2017)
benediktmeurer.de/2017/12/13/an-introduction-to-speculative-optimization-in-v8/

SpiderMonkey – developer.mozilla.org/docs/Mozilla/Projects/SpiderMonkey
recurge la 2 compilatoare pentru optimizarea codului

când procesorul JS determină – în funcție de datele
colectate (profiling data) – că o parte de cod e utilizat (hot),
decide să-l optimizeze

Chakra – github.com/Microsoft/ChakraCore

JavaScriptCore – developer.apple.com/documentation/javascriptcore
Data Flow Graph
compiler
Faster Than Light
compiler
Low-Level
interpreter

în cazul JavaScriptCore, optimizările au loc complet
concurent (all optimizing compilers run fully concurrent
with the main JavaScript execution)

codul mașină optimizat necesită memorie suplimentară
procesorul JS nu poate optimiza „orice”

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>

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>
remarcă: pentru browser-ele moderne se va specifica
application/javascript în loc de text/javascript

arhitectura de bază a interpretorului (script engine) JS
inclus într-un navigator Web (A. Zlatkov, 2017)
blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf
blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e

execuția codului JavaScript se realizează într-un singur fir de
execuție (proces), dar alte acțiuni efectuate de browser-ul Web nu
developers.google.com/web/updates/2018/09/inside-browser-part1

Procesorul JavaScript e responsabil și cu eliminarea
memoriei neutilizate (junk) via operația garbage collection
algoritmul de bază: mark-and-sweep
rulat periodic
javascript.info/garbage-collection
developer.mozilla.org/Web/JavaScript/Memory_Management

garbage collection
tradițional, are loc în firul de execuție principal
eventual, aplicându-se optimizări (euristici):
generational / incremental / idle-time collection
v8.dev/blog/jank-busters
jayconrod.com/posts/55/a-tour-of-v8-garbage-collection

garbage collection
actualmente, se poate realiza concurent sau în paralel
exemplu: Orinoco inclus în V8
v8.dev/blog/orinoco-parallel-scavenger

Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
specificații ale Consorțiului Web
varianta în vigoare: DOM 4 (2015)
www.w3.org/TR/dom/
de revăzut materia „Tehnologii Web”
profs.info.uaic.ro/~busaco/teach/courses/web/

Un program JavaScript are acces la arborele DOM
(Document Object Model)
corespunzător documentului HTML
DOM Living Standard – dom.spec.whatwg.org
specific HTML5, în continuă dezvoltare
(cea mai recentă actualizare: 4 noiembrie 2019)

Programul JS recurge la obiecte implementând
interfețele DOM pentru accesarea și modificarea
reprezentării interne a unui document HTML
(i.e. arborele DOM)
devdocs.io/dom

<!DOCTYPE html>
<html>
<body>
<p>Tehnologii Web</p>
<div>
<img src="web.png"/>
</div>
</body>
</html>
HTML
HtmlElement
HTML
BodyElement
HTML
ParagraphElement
Text
HTML
DivElement
HTML
ImageElement

dom: browser
inspectarea arborelui DOM asociat unui document HTML
via instrumentele oferite de navigatorul Web

Minimal, navigatorul Web implementează
recomandarea DOM Level 2 HTML (2003)
www.w3.org/TR/DOM-Level-2-HTML

dom: core
un document HTML și arborele DOM corespunzător
reprezentat via Live DOM Viewer
software.hixie.ch/utilities/js/live-dom-viewer/
în cazul HTML, numele elementelor
sunt disponibile cu litere mari (capitals)

dom: core
un document HTML și arborele DOM corespunzător
reprezentat via Live DOM Viewer
software.hixie.ch/utilities/js/live-dom-viewer/
De ce apare
și acest nod?

De asemenea, programele JavaScript au acces
la 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,…

Arborele DOM asociat documentului HTML
poate fi accesat/alterat via obiectul document
instanță a clasei implementând interfața HTMLDocument

interface HTMLDocument : Document {
attribute DOMString title; // titlul documentului
readonly attribute DOMString referrer; // adresa resursei ce referă pagina
readonly attribute DOMString domain; // domeniul de care aparține
readonly attribute DOMString URL; // URL-ul absolut al documentului
attribute HTMLElement body; // acces la elementul <body>
readonly attribute HTMLCollection images; // lista tuturor imaginilor
readonly attribute HTMLCollection links; // lista tuturor legăturilor
readonly 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ținutului
void write (in DOMString text); // scrie un șir de caract. (e.g., cod HTML)
void writeln (in DOMString text); // idem, dar inserează și new line
NodeList getElementsByName (in DOMString numeElement);
// furnizează o listă de elemente conform unui nume de tag
}; interfață specificată în limbajul declarativ WebIDL

Deoarece interfața HTMLDocument
extinde Document,
putem recurge la funcționalitățile
stipulate de specificația DOM generală

Proprietatea documentElement
desemnează nodul-rădăcină

getElementById (identificator)
furnizează un element – nod de tip Element –
conform identificatorului său unic, desemnat de valoarea
atributului id specificat în cadrul documentului

parentNode
oferă acces la numele nodului-părinte al nodului curent

previousSibling
nextSibling
acces la nodul precedent/următor
de pe același nivel al arborelui

Pentru noduri de tip Element
se pot folosi și proprietățile
previousElementSibling
nextElementSibling

childNodes
proprietate furnizând într-un tablou
numele nodurilor-copil ale nodului curent

firstChild
desemnează primul nod-copil al nodului curent

lastChild
specifică ultimul nod-copil al nodului curent

attributes
reprezintă tabloul asociativ
conținând atributele asociate unui nod de tip Element

function 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?

Interfața HTMLElement o extinde
pe cea generală oferită de DOM Level 2
fiecare element HTML specific derivă din ea
Node Element
HTML
Element
HTML
DivElement
o interfață specifică fiecărui element HTML

// 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
};

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; // reprezintă 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
};

Cum putem afla/modifica diverse informații
privind nodurile arborelui DOM?

Informații referitoare la nodurile arborelui DOM
nodeType
proprietate care furnizează tipul unui nod

dom: coreTipuri de noduri (valori pentru nodeType) Valoare
ELEMENT_NODE 1
ATTRIBUTE_NODE 2
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5
ENTITY_NODE 6
PROCESSING_INSTRUCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12

nodeValue
proprietate oferind valoarea unui nod

innerHTML
proprietate – mutabilă – ce furnizează codul HTML
din cadrul unui nod de tip Element
utilizare
nerecomandabilă

textContent
proprietate ce furnizează/stabilește conținutul textual
al nodului și posibililor descendenți

getAttribute (numeAtribut)
metodă care oferă acces la valoarea unui atribut

Modificarea structurii arborelui DOM
createElement (element)
creează un nod de tip Element

createTextNode (nod)
creează un nod cu conținut textual

appendChild (nod)
adaugă un nod-copil nodului curent

removeChild (nod)
elimină un nod-copil

cloneChild ()
„clonează” un nod al arborelui

setAttribute (atribut, valoare)
stabilește valoarea unui atribut asociat unui element

removeAttribute (atribut)
elimină un atribut

JS Fiddle
generare dinamică via JavaScript
a unui formular Web
jsfiddle.net/busaco/0wvn3fha/

function adaugaControl (element, tip, nume, explicatie) {
// vom crea un element <input> atașându-i atributele esențiale
let control = document.createElement ('input');
control.type = tip;
control.id = nume;
control.name = nume;
let eticheta = document.createElement ('label'); // o etichetă explicativă…
eticheta.htmlFor = nume;
eticheta.innerHTML = explicatie;
eticheta.style.background = 'lightgray’; // …plus diverse stiluri CSS
eticheta.style.color = '#333';
eticheta.style.padding = '0.2em';
// vom plasa elementele <label> și <input> într-un container
let container = document.createElement ('div');
container.className = "interactiv";
container.appendChild (eticheta);
container.appendChild (control);
// vom adăuga nodul container la elementul dat ca parametru
element.appendChild (container);
}

// preluăm elementul de tip formular
let formular = document.getElementById ('unFormular’);
// adăugăm controalele de interacțiune dorite
adaugaControl (formular, 'text', 'nume', 'Numele meu: ');
adaugaControl (formular, 'password', 'parola', '<em>Codul secret</em>: ');
adaugaControl (formular, 'checkbox', 'particip', 'Particip? ');
for (let an = 2018; an <= 2020; an++) {
adaugaControl (formular, 'radio', 'an', 'Web Hackathon ' + an);
}
arborele DOM corespunzător
codului HTML
generat prin program

Suport pentru procesarea proprietăților CSS
pe baza unui model obiectual specific
CSSOM (CSS Object Model)
specificație în lucru (draft) – 16 octombrie 2019
drafts.csswg.org/cssom/

Suport pentru procesarea proprietăților CSS
actualmente, modificarea proprietăților de stil
se poate realiza via proprietatea HTMLElement.style
// asocierea mai multor stiluri CSS
elem.style.cssText = "color: blue; border: 1px solid #000";
// similar cu linia – are drept efect alterarea arborelui DOM:
elem.setAttribute ("style", "color: blue; border: 1px solid #000;");
developer.mozilla.org/Web/API/CSSStyleDeclaration

Găsirea de noduri via selectori CSS
Selectors API – Level 1
recomandare W3C (2013)
acces la diverse date via selectorii CSS cu metodele
query() queryAll() querySelector() querySelectorAll()
www.w3.org/TR/selectors-api/

querySelector (selectori)
furnizează primul element – folosind traversarea
în adâncime în preordine – care se potrivește grupului
de selectori (delimitați de virgulă)
querySelectorAll (selectori)
oferă lista de tip NodeList a tuturor elementelor găsite

// toate elementele <li> selectate via CSS (date de tip NodeList)
var elemente = document.querySelectorAll ("ul.menu > li");
for (var i = 0; i < elemente.length; i++) {
prelucrează (elemente.item (i)); // procesăm fiecare nod
}

exemplificare – folosim consola browser-ului Web:
document.querySelectorAll ("section[id^="week"]:nth-child(odd) > h2");
selectori
CSS3

Traversarea arborilor DOM
se utilizează
TreeWalker
NodeIterator
Filter
developer.mozilla.org/docs/Web/API/TreeWalker

// instanțiem un obiect TreeWalker pentru a parcurge arborele DOM
let calator = document.createTreeWalker(document.body,
NodeFilter.SHOW_ELEMENT, // selectăm doar nodurile de tip element
{ acceptNode: nod => { // ...și le filtrăm (doar <p>, <div> și <strong>)
if (nod.nodeName === 'P' || nod.nodeName === 'DIV' ||
nod.nodeName === 'STRONG') return NodeFilter.FILTER_ACCEPT;
}});
let noduri = [ ];
// baleiem toate nodurile găsite și le plasăm în tabloul 'noduri'
while(calator.nextNode()) noduri.push(calator.currentNode);
// listăm nodurile găsite
let elem = document.getElementById('info');
noduri.forEach(nod => {
// plasăm informațiile în DOM, în <div> înainte de ultimul nod copil
elem.insertAdjacentText('beforeend', nod.outerHTML + "u25CF");
// și la consola browser-ului Web
console.log (`Element ${nod.nodeName}: ${nod.textContent}`);
});

program disponibil la JSFiddle: jsfiddle.net/busaco/ofm958vr/

Tratarea evenimentelor
definirea de activități (callback-uri) executate
la apariția unui eveniment
eveniment = acțiune produsă în cadrul mediului de
execuție în urma căreia programul va putea reacționa

codul JavaScript invocat la apariția unui eveniment
va putea fi încapsulat într-o funcție de tratare a acestuia
(event handler)

tradițional, se atașează cod JavaScript ce va fi executat
la apariția unui eveniment de bază
(e.g., onclick, onmouseover, onchange, onload, onkeypress,…)
asupra unui element

<button onclick="alert ('Au!');">Apasă-mă!</button>

pentru a inhiba execuția acțiunii implicite,
codul JavaScript va trebui să întoarcă false


document.getElementById ("identificator").onclick
= trateazaClick; // mai „evoluat” via DOM 1

tratarea standardizată a evenimentelor:
specificația DOM Level 2 Events
www.w3.org/TR/DOM-Level-2-Events/

specificarea de activități executate
la apariția unui eveniment
obiect.addEventListener ("eveniment", funcție, mod);

descrierea arborescentă a fluxului de evenimente
capture versus bubble
de parcurs javascript.info/bubbling-and-capturing

fluxul de evenimente (T. Leithead et al., 2012)
a se studia și W. Page, An Introduction to DOM Events (2013)
www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/

mod = true
se încearcă tratarea evenimentului pornind
de la rădăcină până la obiectul-țintă – capture phase

mod = false
se încearcă tratarea evenimentului atunci când
evenimentul e propagat de la obiectul unde a survenit
până la entitățile superioare lui – bubbling phase

se va utiliza un set standard de evenimente

Tipuri de evenimente – interacțiune cu utilizatorul
mouse: click dblclick mouseenter mousedown mouseup
mouseover mousemove contextmenu select wheel
keyboard: keypress keydown keyup
clipboard: copy cut paste
view: resize scroll fullscreenchange fullscreenerror
drag & drop: dragstart drag dragenter dragover
dragleave dragend drop
form: focus blur select submit reset
document (page lifecycle): load DOMContentLoaded
beforeunload unload abort cancel

Tipuri de evenimente – vizând resursele
network: online offline
session history: pagehide pageshow popstate
printing: beforeprint afterprint
media: canplay play playing pause suspend waiting seeking
seeked stalled complete ended emptied durationchange
ratechange volumechange timeupdate …
progress: loadstart progress error timeout abort load loaded
storage: change storage
Web socket: open message error close

Tipuri de evenimente – altele
CSS transitions: transitionstart transitionrun
transitionend transitioncancel
CSS animations: animationstart animationend
animationiteration
value change: broadcast hashchange input readystatechange…
pentru amănunte, a se explora și
developer.mozilla.org/Web/Events

Tipuri de evenimente – specifice HTML5
asociate API-urilor disponibile:
Ambient Light, App Cache, Battery, Contacts,
Device Orientation, Device Storage, Download, File,
IndexedDB, Media Capture & Streams, Payment, Pointer,
Proximity, Push, SVG, Touch, Time & Clock, TV, Web Audio,
WebGL, WebRTC, Web Notifications, Web Speech, WebVR,
Wifi Information, Wifi P2P etc.
vezi cursurile
viitoare

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
exemplificare:
specificarea
evenimentelor tactile

(în loc de) pauză

proprietăți utile ale obiectului Event
type
specifică tipul evenimentului ca șir de caractere
e.g., "click", "load", "scroll", "submit"

target
desemnează nodul
asupra căruia evenimentul a fost declanșat inițial

currentTarget
indică nodul care tratează evenimentul

bubbles
indică dacă evenimentul se propagă
spre elemente ascendente (valoarea true)
ori către descendenți (valoarea false)

bubbles
e.g., evenimentele abort, error, select, submit, resize, scroll,
click, mousedown, mouseover, mousemove, mouseout,
touchstart, touchend pot avea bubbles = true

bubbles
în cazul evenimentelor focus, blur, load, unload,
proprietatea bubbles are valoarea false

cancelable
precizează dacă evenimentul poate fi întrerupt

cancelable
de exemplu, pentru evenimentele load, unload, abort, error,
select, focus, blur, resize, scroll, touchcancel
proprietatea cancelable este setată ca fiind false

cancelable
pentru evenimente precum click, mousedown, mouseup,
mouseover, mousemove, mouseout, touchstart, touchend,
touchmove proprietatea cancelable poate fi true

eliminarea tratării unui eveniment
removeEventListener ()

ignorarea comportamentului implicit
preventDefault ()

comportamentul implicit pentru evenimentul tactil
touchend poate varia în funcție de context/platformă:
mousemove, mousedown, mouseup, click

trimiterea evenimentului să poată fi procesat
conform modelului oferit de implementare
dispatchEvent ()

oprirea propagării unui eveniment
în cadrul arborelui DOM
stopPropagation ()

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>Evenimente JS</title></head>
<body>
<form>
<textarea id="editor"></textarea>
</form>
</body>
<script type="application/javascript">
const infoEv = e => { console.log (
`Eveniment: ${e.type}n
Caracter: ${String.fromCharCode (e.charCode)}n
Element țintă al evenim.: ${e.target}n
Ținta curentă: ${e.currentTarget}`);
};
document.addEventListener ("keypress", infoEv);
</script>
</html>
exemplificare: afișarea datelor vizând un eveniment
adaptaredupăBaptistePesquet(2017)
github.com/bpesquet/thejsway/blob/master/manuscript/chapter16.md

inspecție de evenimente
apărute în pagina Web
(tratate de un program JS
sau de o extensie instalată)

// Adaptare după https://eloquentjavascript.net/14_event.html
const trateazaEveniment = ev => {
// plasăm un 'punct' la coordonatele cursorului mouse-ului
let pct = document.createElement ('div');
pct.className = (ev.type === 'dblclick') ? 'punct roz' : 'punct';
pct.style.left = (ev.pageX - 5) + 'px';
pct.style.top = (ev.pageY - 5) + 'px';
document.body.appendChild (pct);
console.log (`${ev.type}: Am plasat un punct
la coord. (${ev.pageX}, ${ev.pageY}).`);
};
// "ascultăm" evenimentele click și dblclick
document.addEventListener ('click', trateazaEveniment);
document.addEventListener ('dblclick', trateazaEveniment);
exemplu: tratarea evenimentelor click și dblclick
vezi exemplul
complet în arhivă

studiu de caz (Ondřej Žára, 2013)
calcul tabelar în
30 de linii JavaScript
jsfiddle.net/ondras/hYfN3/

// crearea interfeței Web via DOM
// construim tabelul cu câmpuri de intrare
for (var i = 0; i < 6; i++) {
// adăugăm un rând la tabel
var row = document.querySelector ("table").insertRow (-1);
for (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;
}
}

Remarcă:
unele navigatoare acceptă tratarea unor evenimente
nestandardizate (încă) de Consorțiul Web

Remarcă:
pot fi specificate și evenimente definite de programator
CustomEvent
dom.spec.whatwg.org/#interface-customevent
developer.mozilla.org/Web/API/CustomEvent

Browser-ul Web oferă obiectul Window
reprezintă o zonă de redare a conținutului
pe baza reprezentării interne (arborele DOM)
a unui document HTML
developer.mozilla.org/Web/API/Window

fiecare tab al interfeței navigatorului
conține propriul obiect Window
acest obiect nu este partajat de tab-uri multiple

proprietăți importante:
document – referință la documentul (arborele DOM)
pe care obiectul Window îl include
history – acces la istoricul navigării (via obiectul History)
html.spec.whatwg.org/multipage/history.html
location – adresa Web (URL) curentă
navigator – oferă date despre browser (un obiect Navigator)
developer.mozilla.org/Web/API/Navigator

proprietăți importante – continuare:
screen – oferă detalii despre ecran (obiectul Screen)
developer.mozilla.org/Web/API/Screen
localStorage – date persistente stocate local
(obiectul LocalStorage specificat de HTML5)
developer.mozilla.org/Web/API/Window/localStorage
sessionStorage – referință la date vizând sesiunea curentă
(stocate într-un obiect SessionStorage oferit de HTML5)
html.spec.whatwg.org/multipage/webstorage.html

metode utile:
alert() confirm() prompt() postMessage()
focus() blur() find() print()
open() close() stop()
moveBy() moveTo() resizeBy() resizeTo()
scrool() scrollBy() scrollTo()
amănunte: drafts.csswg.org/cssom-view/

evenimente – specificate prin nume prefixat de on
și clasificate ca fiind WindowEventHandlers
(reuniunea evenimentelor definite de interfețele
Window, HTMLBodyElement și HTMLFrameSetElement)
developer.mozilla.org/Web/API/WindowEventHandlers

suportul cumulat vizând evenimentele
oferit de navigatoarele Web actuale
caniuse.com/#search=event

În ce manieră are loc transferul asincron
între aplicațiile de pe server
și documentul Web?

AJAX – Asynchronous JavaScript And XML
permite transfer asincron de date
între client (browser) și serverul Web
a se revizita cursul
„Tehnologii Web”

suită de tehnologii deschise
limbaje standardizate de structurare – uzual, HTML –
și de prezentare a datelor: CSS

redare + interacțiune la nivel de client Web
via standardul DOM

interschimb și manipulare de date reprezentate prin:
diverse dialecte XML
JSON (JavaScript Object Notation)
HTML
alte formate

transfer (a)sincron de date
facilitat de obiectul XMLHttpRequest

procesare folosind limbajul ECMAScript (JavaScript)

Obiectul XMLHttpRequest
disponibil la nivel de navigator Web via JavaScript

specificația actuală oferită de navigatoarele curente
(Living Standard, 24 septembrie 2019)
xhr.spec.whatwg.org

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

open ( )
inițiază – deschide – o conexiune HTTP cu serverul,
emițând o cerere: GET, POST,…

send ( )
transmite (asincron) date – e.g., JSON, XML etc. –,
spre aplicația/serviciul ce rulează pe server

send ( )
transmite (asincron) date – e.g., JSON, XML etc. –,
spre aplicația/serviciul ce rulează pe server
orice listener (asociat evenimentelor onloadstart,
onprogress, onload, onloadend, ontimeout, onabort, onerror)
trebuie stabilit înainte de a trimite date

abort ( )
abandonează transferul de date curent

setRequestHeader ( )
specifică anumite câmpuri de antet HTTP
exemple: Cookie, Keep-Alive, User-Agent,…

getResponseHeader ( )
furnizează un anumit câmp prezent
în antetul mesajului de răspuns HTTP trimis de server

getAllResponseHeaders ( )
oferă toate câmpurile HTTP trimise de server,
exceptând Set-Cookie

readyState
furnizează codul de stare a transferului:
0 – UNSENT
1 – OPENED
2 – HEADERS_RECEIVED
3 – LOADING
4 – DONE

status
oferă codul de stare HTTP întors de serverul Web:
200 (Ok)
404 (Not Found)
500 (Internal Server Error)
…

statusText
conține mesajul corespunzător codului de stare HTTP

responseText
responseXML
conțin răspunsul (datele) obținut(e) de la server

onreadystatechange
specifică funcția ce va fi invocată la modificările de stare
ale transferului de date dintre server și client
handler de tratare a
evenimentelor de transfer

excepții care pot fi emise:
AbortError
InvalidAccessError
InvalidStateError
NetworkError
SecurityError
TimeoutError
…

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
de studiat Fetch
(HTML5 Living Standard, 4 noiembrie 2019)
fetch.spec.whatwg.org

Noutăți:
datele vehiculate pot fi de mai multe tipuri
(ArrayBuffer, Blob, Document, DOMString, FormData)
detalii la xhr.spec.whatwg.org/#interface-formdata

Noutăți:
procesul de transmitere a datelor spre server (upload)
poate avea asociat un handler specific
via proprietatea upload

Noutăți:
progresul încărcării poate fi urmărit pe baza
funcționalităților specificate de interfața ProgressEvent
xhr.spec.whatwg.org/#interface-progressevent

studiu de caz: RandomAjax
preia asincron
o secvență de numere
aleatoare generate de
random.org – trimisă ca
text obișnuit
jsfiddle.net/busaco/2254kdqn/

// adresa Web a sursei de date
const URL = 'https://www.random.org/sequences/
?min=1&max=33&col=1&format=plain';
// timpul maxim de așteptare a răspunsului trimis de server
const TIME = 2000;
// deschidem conexiunea
xhr.open ("GET", URL, true);
// stabilim timpul maxim de așteptare a răspunsului
xhr.timeout = TIME;
// nu expediem date
xhr.send (null);

studiu de caz: RandomAjax (Fetch)
soluție folosind Fetch API
pentru aceeași problemă
jsfiddle.net/busaco/a2q9regd/

API-ul Fetch se bazează pe conceptul promise
rezultat ce ar putea fi oferit
în urma execuției unei operații asincrone
revezi unul dintre
cursurile anterioare

Recurgem la promises pentru a realiza procesări
în funcție de codul de stare HTTP primit
function status(response) {
if (response.status >= 200 && response.status < 300) {
// cererea poate fi rezolvată
return Promise.resolve (response)
} else {
// cererea a fost rejectată
return Promise.reject (new Error (response.statusText))
}
}

let numbers = document.getElementById ('numbers’);
fetch (URL)
.then (status) // verificăm dacă datele au fost recepționate cu succes
// transformăm obiectul răspunsului în șir de caractere
.then ((response) => response.text ())
// procesăm secvența de numere
.then ((response) => {
// înlocuim spațiile albe cu virgulă și plasăm conținutul
// în cadrul elementului HTML identificat prin 'numbers'
numbers.textContent = response.trim ().replace (/W+/g, ', ');
})
.catch ((error) => { // a survenit o eroare :(
numbers.textContent = 'An error occurred: ' + error;
});

Scenariu:
preluăm caractere de la client – introduse în <textarea> –
și le trimitem asincron prin POST unei aplicații Web
rulând pe server care le expediază înapoi
mesaje vehiculate în format JSON
{ "tasta": "caracter", "data": "secunde" }
tratăm evenimentul keypress pentru a capta tastele
acționate de utilizator
studiu de caz: PostJSON

// codul programului ES6 interpretat de navigatorul Web
// tratăm evenimentul de apăsare a unei taste
const trateazaEveniment = ev => {
// mesajul propriu-zis trimis serverului prin POST
// atunci când survine evenimentul
let msg = `{ "tasta": "${String.fromCharCode (ev.charCode)}",
"data": "${Date.now()}" }`;
// încapsulăm o cerere POST
let request = new Request ('/ajax/post.php', {
method: 'POST',
body: JSON.stringify (msg), // convertim datele JSON în șir de caractere
headers: {} // n-avem câmpuri-antet
});
de consultat
arhiva cu exemple

fetch (request) // promitem să executăm codul, transmițând cererea...
.then (response => { // verificăm dacă am primit date JSON de la server
let contentType = response.headers.get ('Content-Type');
if (contentType && contentType.includes ('application/json')) {
return response.json (); };
throw new TypeError ('Datele primite nu-s JSON :(');
})
.then (json => { // procesăm efectiv datele
// creăm un nod text care indică tasta apăsată
let elem = document.createTextNode (json.tasta);
document.getElementById ('tasteApasate').appendChild (elem);
// raportăm datele primite și la consola browser-ului
console.log
(`Date JSON primite: tasta=${json.tasta}, data=${Date(json.data)}`);
})
};
// via DOM, tratăm evenimentul keypress
document.addEventListener ('keypress', trateazaEveniment);

// post.php -- program PHP care preia date JSON
// transmise via POST de client și le trimite înapoi (echo)
function eJSONValid ($sir) { // verifică dacă datele JSON sunt corecte
json_decode ($sir);
return json_last_error () == JSON_ERROR_NONE;
}
// preluăm de la intrarea standard datele transmise de client (raw data)
// (aici, cele dintr-o cerere POST)
$date = trim (file_get_contents ("php://input"));
if (eJSONValid ($date)) { // trimitem datele JSON înapoi dacă sunt în regulă
header ("Content-type: application/json");
echo json_decode ($date);
} else {
die ('Date incorecte’);
}
aplicația (serviciul) Web invocat(ă) pe server
temă: portarea programului pentru Node.js

suportul pentru Fetch API
în browser-ele Web curente
caniuse.com/#search=fetch

Ce alte aspecte trebuie considerate
atunci când se recurge la Ajax?

Oferirea de alternative la Ajax, atunci când suportul
pentru acesta nu este implementat/activat
graceful degradation
progressive enhancement
www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement

Aspect dezirabil:
minimizarea traficului dintre browser și server

Transferul de date poate fi monitorizat
(+interceptat) via instrumente dedicate
la nivel de desktop:
instrumentul WireShark
www.wireshark.org/docs/wsug_html_chunked/

inspecție a datelor vehiculate cu instrumentele
pentru dezvoltatorii Web oferite de browser

Stabilirea unui mod de interacțiune clar
interacțiune HTML clasică
versus
interacțiune „bogată” cu Ajax
versus
interacțiune la nivelul unei aplicații convenționale

Adoptarea Ajax pentru creșterea utilizabilității,
nu doar de dragul tehnologiei
exemple negative:
distragerea utilizatorului
abuz de resurse (e.g., supradimensionarea arborelui DOM)

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

Șabloane de proiectare AJAX
amănunte în cartea Michael Mahemoff,
Ajax Design Patterns, O’Reilly, 2006
www.oreilly.com/library/view/ajax-design-patterns/0596101805/

privind programarea:
invocare de servicii Web
(RESTful Service, JSON Message)

dialog între navigatorul Web și server
(Periodic Refresh, Submission Throttling, Cross-Domain Proxy)

asigurarea performanței
(Fat Client, Browser-Side Cache, Guesstimate,
Predictive Fetch, Code Compression, On-Demand JS)
detalii într-un
curs viitor

popularea arborelui DOM
(e.g., Browser-Side Templating)

referitoare la interacțiunea cu utilizatorul:
formulare Web
(Edit-in-place, Rich Text Editor, Live Search)

widget-uri de afișare a conținutului
(Data Grid, Progress Indicator, Suggestion, Slider, Status Area)

acțiuni oferite
(Drag-and-Drop, Popup, Upload/Download Files)
detalii la master,
în cadrul materiei Human-Computer Interaction
profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

efecte vizuale
(One-Second Spotlight, One-Second Motion, Highlight)

funcționalitate
(Lazy Registration, Direct Login, Timeout,
Heartbeat, Autosave, Unique URLs)

inginerie Web:
monitorizare & diagnoză
(Logging, Debugging)
vezi cursul următor

inginerie Web:
inspecție de cod/date
(DOM Inspection, Traffic Sniffing)

inginerie Web:
testare
(Simulation Service, Browser-Side Test,
Service Test, System Test)
vezi cursul următor

Comet
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
complementar Ajax:
long polling, HTTP server push, Reverse Ajax

Comet
șablon de proiectare a aplicațiilor Web
care necesită realizarea de conexiuni persistente,
în stilul peer-to-peer
utilizat de aplicațiile Web intensiv interactive,
eventual colaborative – e.g., Mibbit

Comet
instrumente software – exemplificări:
Atmosphere – github.com/Atmosphere/atmosphere-javascript
APE (Ajax Push Engine) – www.ape-project.org
Axios – github.com/axios/axios
Fermata – github.com/natevw/fermata
Push – pushjs.org

Comet
soluții alternative, moderne:
adoptarea diverselor tehnologii HTML5
server-sent events
WebSocket
detalii într-un
curs viitor

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ă
„curentul” SaaS (Software As A Service)

mash-ups
Surse de date
(data feeds)
Atom, RSS, geoRSS,
microdate HTML5, RDFa,…
Interfețe de programare
(API-uri)
specifice serviciilor publice
și de procesare JSON, XML etc.
Biblioteci/framework-uri
pentru dezvoltare
framework-uri Web generice
sau oferite de organizații
Instrumente interactive
(Web tools)
eventual, disponibile în „nori”
Platforme
(Platform As A Service)
Digital Ocean, Heroku, Google
Cloud Platform, MS Azure,…

Crearea unui mash-up Web la nivel de client
DoCa (Dogs ‘n’ Cats)
imagini cu câini dog.ceo/dog-api/ – răspuns JSON:
{ "status": "success", "message": "URL_imagine" }
+
fotografii cu pisici aws.random.cat/meow – răspuns JSON:
{ "file": "URL_imagine" }
studiu de caz: DoCa

codul-sursă complet la jsfiddle.net/busaco/z2f3vp4m/
utilizăm două apeluri fetch()
pentru a prelua date JSON
de la cele două servicii Web
(API-uri publice)
URL-urile obținute sunt
folosite pentru a genera
cu DOM elementele <img />
corespunzătoare

inspectarea cererilor HTTP
inițiate de program
dog.ceo folosește HTTP/2
aws.random.cat recurge la HTTP/1.1

// verificăm dacă avem succes (codul de stare e 2XX)
function status(response) {
if (response.status >= 200 && response.status < 300) {
// cererea poate fi rezolvată
return Promise.resolve (response)
} else {
// cererea a fost rejectată
return Promise.reject (new Error (response.statusText))
}
}
// generăm în cadrul unui element identificat prin 'id'
// elementul <img /> pentru a include URL-ul fotografiei
// (parametrul 'url' dat funcției) ce reprezintă un animal
function genImg (url, id) {
const elem = document.createElement ('img');
elem.setAttribute ('src', url);
document.getElementById (id).appendChild (elem);
}

const URLDOGS = 'https://dog.ceo/api/breed/dalmatian/images/random';
// folosim Dog API pentru a obține o imagine aleatorie
// a unui câine dalmațian
fetch (URLDOGS)
.then (status) // datele au fost recepționate cu succes?
.then (response => response.json ())
.then (json => {
// procesăm datele JSON primite...
// proprietatea 'message' stochează URL-ul imaginii câinelui
genImg (json.message, 'dog');
})
.catch (error => { // redăm eroarea survenită
document.getElementById ('dog').textContent = error;
});

// similar pentru pisici…
const URLCATS = 'https://aws.random.cat/meow';
// invocăm random.cat API pentru a obține fotografia unei/unor pisici
fetch (URLCATS)
.then (status) // datele au fost recepționate cu succes?
.then (response => response.json ())
.then (json => {
// procesăm datele JSON primite...
// proprietatea 'file' stochează URL-ul fotografiei cu pisici
genImg (json.file, 'cat');
})
.catch (error => { // redăm eroarea survenită
document.getElementById ('cat').textContent = error;
});

inspectarea datelor obținute prin transfer asincron
cu instrumentele pentru dezvoltatori ale browser-ului Web

performanță: scalabilitatea și latența
limite ale API-urilor + existența versiunilor multiple
drepturi de autor asupra datelor și licențiere
securitate: abuz, confidențialitate, încredere etc.
monetizare
lipsa unei interoperabilități reale între platforme
mash-ups

mash-ups
lista mash-up-urilor: www.programmableweb.com/mashups/directory
multe alte API-uri publice la github.com/toddmotto/public-apis

Nu există o problemă de securitate
privind accesul la resurse via JavaScript?

Same-Origin Security Policy
“restricts how a document or script loaded from one origin
can interact with a resource from another origin”
astfel, un program JavaScript trebuie să acceseze
doar datele aparținând aceleași origini
– i.e., provenite din același domeniu Internet

se permit doar transferuri vizând reprezentări de resurse
referitoare la imagini, fișiere CSS
și alte programe JavaScript aparținând aceleași origini
client
server
Web
HTTP
JSON, XML,…
API
public
API
public
HTTP
JPG
HTTP
JPG
Same-Origin Policy

Same-Origin Security Policy
previne cazurile în care un document/program încărcat
dintr-o origine să poată accesa/modifica proprietăți
ale unui document aparținând altei origini
developer.mozilla.org/Web/Security/Same-origin_policy

interactiune web: ajax – studiu de cazconst URL = "https://profs.info.uaic.ro/~busaco/teach/courses/web/";
// realizăm o cerere HEAD pentru a obține meta-date despre o resursă
let 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ări
alert ("Resursa de tip '" +
client.getResponseHeader ("Content-Type") + "' s-a actualizat la " +
client.getResponseHeader ("Last-Modified"));
}
}
preluarea cu HEAD a unor
meta-date, în mod asincron

URL al altui domeniuse încalcă Same Origin Policy

caz real: Google Mail

CORS (Cross-Origin Resource Sharing)
permite partajarea la nivel de client a resurselor
provenind din domenii Internet diferite
astfel, se pot emite cereri între domenii (cross-origin)
recomandare a Consorțiului Web (2014)
www.w3.org/TR/cors/

Politicile de partajare a resurselor se bazează pe
anumite câmpuri din antetul mesajelor HTTP
exemplu (se permit doar cereri GET
având în antetul mesajului câmpuri specifice din partea
unui client aparținând unui domeniu Internet):
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Content-Type, Accept
Origin: http://localhost:8000
resurse de interes:
developer.mozilla.org/en-US/docs/Web/HTTP/CORS
auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/

API-ul furnizând imagini publice cu pisici
https://aws.random.cat/meow
acceptă cereri GET emise de orice origine a clientului
Access-Control-Request-Method: GET
Access-Control-Allow-Origin: *
caz real #1

Google Play acceptă cereri POST emise numai de serviciul
Google Drive (originea este https://drive.google.com)
ce includ câmpuri-antet vizând autorizarea
Access-Control-Request-Method: POST
Origin: https://drive.google.com
Access-Control-Request-Headers: authorization,x-goog-authuser
câmp nestandardizat
caz real #2

Reddit.com permite cereri POST și OPTIONS formulate de
orice origine, fiind acceptate anumite câmpuri-antet
(controlul accesului depinde de timp)
Access-Control-Allow-Headers: Content-Type,Origin,Accept,X-Signature
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Max-age: 1728000
caz real #3

episodul viitor:
ingineria aplicațiilor JavaScript
ⵄ DOM
▣ view
▦ model
⧆ template
🛢 storage
☄ events
changes
observes
renders
queries &
writes to
emits

STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri

More Related Content

What's hot (20)

Similar to STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri (20)

More from Sabin Buraga (20)

STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri