![Page 1: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/1.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dezvoltarea aplicațiilor Webla nivel de client
⁂programare Web
API-uri JavaScript în contextul HTML5
![Page 2: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/2.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“You are never too old to set another goal or to dream a new dream.”
C.S. Lewis
![Page 3: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/3.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Încărcarea & redarea documentelor
suplimentar față de obiectul Document,browser-ul Web pune la dispoziție Window
https://developer.mozilla.org/Web/API/Window
![Page 4: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/4.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Încărcarea & redarea documentelor
obiectul Window oferă acces la mediul de redare
proprietăți importante:window self top parent opener frames
document location navigator
history undoManager
![Page 5: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/5.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Încărcarea & redarea documentelor
obiectul Window oferă acces la mediul de redare
proprietăți importante:applicationCache
onNumeEveniment
(stabilirea de funcții pentru tratarea evenimentelor)exemple: onplay ondrag onprogress etc.
![Page 6: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/6.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Încărcarea & redarea documentelor
obiectul Window oferă acces la mediul de redare
metode folositoare:open() close() stop()
focus() blur()
alert() confirm() prompt()
print()
showModalDialog()
![Page 7: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/7.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Control asupra cache-ului navigatorului Web
ApplicationCache
detalii la http://www.w3.org/TR/html5/browsers.html#offline
![Page 8: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/8.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
politica de caching e specificată de un fișier .appcache
referit prin <html manifest="offline.appcache">
pentru fiecare pagină Web a aplicației
CACHE MANIFEST# versiunea 1.0.1 # resurse (proprii / din alte domenii) ce pot fi plasate în cacheindex.htmlcache.htmlhtml5.cssfigura.jpgimg/sigla.pnghttp://www.undeva.info/stiluri.css
# preia conținutul de pe rețea, dacă e posibilNETWORK:stiri.html
# conținut alternativ, dacă suntem offlineFALLBACK:/fallback.html
![Page 9: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/9.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Control asupra cache-ului navigatorului Web
ApplicationCache
operații asupra cache-ului: update() abort() swapCache()
starea cache-ului este furnizată de atributul status
![Page 10: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/10.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
checking
The user agent is checking for an update, or attempting to download the manifest for the first time. This is always the first event in the sequence.
noupdate The manifest hadn’t changed.
downloading The user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time.
progress
Downloading resources listed by the manifest. The event object’s total attribute returns the total number of files to be downloaded. The event object’s loaded attribute returns the number of files processed so far.
cached The resources listed in the manifest have been downloaded, and the application is now cached.
updateready The resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
obsolete The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
error
The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted.
The manifest hadn’t changed, but the page referencing the manifest failed to download properly.
A fatal error occurred while fetching resources listed in the manifest.
The manifest changed while the update was being run.
![Page 11: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/11.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Control asupra cache-ului navigatorului Web
ApplicationCache
pentru exemple și alte aspecte de interes, a se consulta:
http://diveintohtml5.info/offline.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/
http://appcache.offline.technology/
![Page 12: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/12.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Specificarea contoarelor de timp
WindowTimers
setTimeout() clearTimeout()
setInterval() clearInterval()
http://www.w3.org/TR/html5/webappapis.html#timers
![Page 13: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/13.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Specificarea contoarelor de timp
WindowTimers
“This API does not guarantee that timers will run exactlyon schedule. Delays due to CPU load, other tasks, etc.
are to be expected.” (W3C, 2014)
pentru alte detalii și exemple, a se parcurge șihttps://developer.mozilla.org/Web/API/WindowTimers
![Page 14: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/14.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Starea și proprietățile sistemului
interfața Navigator având sub-interfețele:NavigatorID – identitatea browser-ului
NavigatorLanguage – preferințe lingvistice ale clientuluiNavigatorOnline – starea online/offline a navigatorului
NavigatorContentUtils – manipularea conținuturilorNavigatorStorageUtils – parametri privind stocarea locală
NavigatorPlugins – managementul plugin-urilor
www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities
![Page 15: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/15.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Starea și proprietățile sistemului
interface NavigatorID {
readonly attribute DOMString appName;
readonly attribute DOMString appVersion;
readonly attribute DOMString platform;
readonly attribute DOMString product; // întoarce "Gecko"
readonly attribute DOMString userAgent;
};
![Page 16: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/16.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Starea și proprietățile sistemului
remarcă:datele furnizate pot fi folosite la identificarea utilizatorului
implicații asupra intimității (privacy)
browser-ul ar trebui să ofere cât mai puține informații
![Page 17: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/17.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Starea și proprietățile sistemului
remarcă:“In certain cases, despite the best efforts of the entire
industry, Web browsers have bugs and limitations that Web authors are forced to work around.” (W3C, 2014)
detectarea clientului trebuie întotdeauna să ia în considerație versiunile actuale
se presupune că versiunile viitoare/necunoscutevor fi compatibile cu cea curentă
![Page 18: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/18.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Starea și proprietățile sistemului
protocoalele și/sau tipurile de date ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorContentUtils
registerProtocolHandler () registerContentHandler ()
implicit, într-un URI se permit scheme precum:bitcoin irc geo mailto magnet mms news nntp sip
sms smsto ssh tel urn webcal xmpp
![Page 19: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/19.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Starea și proprietățile sistemului
protocoalele și/sau tipurile de date ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorContentUtils
tipuri MIME uzuale suportate de browser:application/x-www-form-urlencoded application/xhtml+xml application/xml
image/gif image/jpeg image/png image/svg+xml
text/cache-manifest text/css text/html text/plain text/xml
![Page 20: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/20.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Managementul istoricului navigării
interface History {
readonly attribute unsigned long length;
attribute ScrollRestoration scrollRestoration;
readonly attribute any state;
void go(optional long delta = 0);
void back();
void forward();
void pushState(any data, DOMString title, optional DOMString? url = null);
void replaceState(any data, DOMString title, optional DOMString? url = null);
};
html.spec.whatwg.org/multipage/browsers.html#dom-history-pushstate
![Page 21: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/21.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Drag & drop
stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop
mecanism definit de varianta HTML5 living standardși nu în recomandarea Consorțiului Web
https://html.spec.whatwg.org/#dnd
![Page 22: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/22.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Drag & drop
un element HTML poate fi sursă pentru drag & drop dacă are atașat atributul draggable="true" și are definită
o funcție de tratare a evenimentului dragstart
ce stochează datele ce vor fi transferate către destinație
![Page 23: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/23.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Drag & drop
datele de transferat vor fi stocatede un obiect DataTransfer
se permit diverse operații:copiere (copy copyLink)mutare (move linkMove),
realizarea unei legături (link) etc.
![Page 24: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/24.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Drag & drop
destinatarul operațiunii drag & drop va avea definitatributul dropzone a cărui valoare specifică tipul MIME
al datelor ce vor fi acceptate
e.g., string:text/plain pentru a accepta orice șir de caracteresau file:image/jpeg pentru un fișier JPEG
![Page 25: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/25.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Drag & drop
o soluție alternativă: ținta operației drop poate trata
evenimentele dragenter și, eventual, dragover
pentru a oferi un feedback vizual utilizatorului
![Page 26: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/26.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Drag & drop
evenimente ce pot fi tratate:drop
dragenter
dragover
dragend
![Page 27: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/27.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Drag & drop
pentru exemplificări și alte detalii, a se vizita:
http://dev.opera.com/articles/view/drag-and-drop/
https://developer.mozilla.org/docs/DragDrop/Drag_and_Drop
http://www.html5rocks.com/tutorials/dnd/basics/
http://html5demos.com/drag
![Page 28: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/28.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte API-uri de bază:
editing API
conținutul poate fi marcat ca fiind editabil via atributul contenteditable
document.designMode="on"
întreg documentul poate fi editat la nivel local
http://www.w3.org/TR/html5/editing.html
![Page 29: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/29.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte API-uri de bază:
editing API
execuția de script-uri asupra selecției curentesau la poziția curentă a cursorului de text
metode:execCommand()
queryCommandEnabled() queryCommandState()
queryCommandSupported() etc.
![Page 30: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/30.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte API-uri de bază:
scripting
suport pentru execuția de cod în contextul unui document HTML:
procesarea elementelor <script>
navigarea via URL-uri folosind schema javascript:
managementul funcțiilor de tratare a evenimentelorsuport pentru scripting în alte limbaje – e.g., SVG
![Page 31: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/31.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte API-uri de bază:
scripting
interfața ErrorEvent pentru raportarea erorilor
interface ErrorEvent : Event {
readonly attribute DOMString message;
readonly attribute DOMString filename;
readonly attribute unsigned long lineno;
readonly attribute unsigned long colno;
readonly attribute any error;
};
![Page 32: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/32.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Există alte specificații/inițiative de interes?
![Page 33: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/33.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebSocket API
definește un API abstract pentru transmiterea de datepe baza protocolului de transfer WebSocket – RFC 6455
succesor al abordării Comet (Reverse Ajax)
![Page 34: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/34.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebSocket API
detalii disponibile în specificația HTML5 Living Standard(14 decembrie 2015)
https://html.spec.whatwg.org/multipage/comms.html#network
![Page 35: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/35.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
[Constructor(DOMString url, optional (DOMString or sequence<DOMString>) protocols), Exposed=(Window,Worker)]
interface WebSocket : EventTarget { readonly attribute DOMString url; const unsigned short CONNECTING = 0; // constante: starea conexiuniiconst unsigned short OPEN = 1; const unsigned short CLOSING = 2; const unsigned short CLOSED = 3; readonly attribute unsigned short readyState; readonly attribute unsigned long bufferedAmount;
attribute EventHandler onopen; // funcții de tratareattribute EventHandler onmessage; // a evenimentelorattribute EventHandler onerror; // privitoare la comunicareaattribute EventHandler onclose; // prin rețeareadonly attribute DOMString protocol; void send (in (DOMString or Blob or ArrayBuffer) data); // trimite datevoid close (optional unsigned short code, optional DOMString reason);
// închide conexiunea}
![Page 36: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/36.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebSocket API
transferul datelor se realizeazăîn regim full duplex (bidirecțional),
folosind un singur socket
se recurge la schemele URI ws: și wss:
![Page 37: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/37.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// creăm un socket Webvar sock = new WebSocket ("ws://www.undeva.info/");// asociem funcțiile de tratare a evenimentelorsock.onopen = function (evt) {
// socket-ul a fost deschis, transferul datelor poate începe…};sock.onclose = function (evt) {
console.log ("Socket-ul a fost închis; cod de stare: " + evt.code) };sock.onmessage = function (evt) {
console.log ("Am recepționat mesajul: " + evt.data);};sock.onerror = function (evt) {
console.error ("A survenit o eroare…"); };// trimitem datesock.send ("Salutări hibernale! :)");// am închis conexiuneasock.close (); maniera generală de
transfer al datelor
![Page 38: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/38.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// actualizările de date vor fi trimise cu rata de o actualizare
// la fiecare 50ms, dacă rețeaua oferă suficientă lățime de bandă
var socket =
new WebSocket ('ws://joc.undeva.org:19740/updates');
socket.onopen = function () {
setInterval (function() {
if (socket.bufferedAmount == 0)
socket.send (oferaDate ());
}, 50);
};
oferă numărul de octețice n-au fost transmiși încă
![Page 39: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/39.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebSocket API
diverse instrumente de programare
la nivel de server: apache-websocket (modul Apache), proiectul APE,
framework-ul Autobahn (Web, aplicații mobile, IoT),HornetMQ, Kaazing, Jetty, Juggernaut, MigratoryData,
PHPWebsocket, socket.io (bazat pe Node.js), websockify
![Page 40: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/40.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebSocket API
diverse instrumente de programare
la nivel de client (aplicații) – API-uri/biblioteci:Arduino WebSocket (C++), clasa WebSocket (Dart),
Java API for WebSocket (JSR 356), libwebsockets (C),ScalaWebSockets (framework-ul Play), Web-socket-js,
WebSocket Sharp (.NET), ZTWebSocket (Objective-C),…
![Page 41: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/41.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebSocket API
navigatorul poate fi considerat platformă de dezvoltarea aplicațiilor Internet
oferă suport pentru diverse paradigme de comunicare via protocoalele Internet:
RPC (Remote Procedure Call) +
Pub/Sub (Publish/Subscribe)
![Page 42: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/42.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebSocket API
de studiat WAMP – Web Application Messaging Protocolhttp://wamp.ws/
exemple de instrumente software folositoare:Autobahn.js – client WAMPcrossbar.io – router WAMP
![Page 43: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/43.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebSocket API
pentru diverse exemple și resurse de interes, a se studia:
https://developer.mozilla.org/docs/WebSockets
http://www.websocket.org/aboutwebsocket.html
http://html5demos.com/web-socket
![Page 44: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/44.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
EventSource API (Server-Send Events)
mecanism standardizat de transmiterea unui flux continuu de date de la server spre client
(push events)
tratarea recepționării datelor provenite de la serverse realizează via evenimente DOM
![Page 45: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/45.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
EventSource API (Server-Send Events)
detalii disponibile în specificația HTML5 Living Standard(14 decembrie 2015)
https://html.spec.whatwg.org/multipage/comms.html#server-sent-events
![Page 46: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/46.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
// verificăm dacă există suport oferit de navigatorul Web
if (!!window.EventSource) {
// instanțiem o sursă de date (un flux)
var flux = new EventSource ("http://news.info/web/today");
// tratăm evenimentele
flux.onopen = function () { console.log ("Am deschis fluxul"); }
flux.onmessage = function (evt) {
console.log ("Am primit date de la server: " + evt.data);
}
flux.onerror = function (evt) {
if (evt.eventPhase != EventSource.CLOSED)
console.error ("A survenit o eroare…");
}
};
![Page 47: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/47.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Messaging
oferă API-uri pentru realizarea transferului de mesajeîntre diverse contexte de navigare
![Page 48: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/48.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Messaging
recomandare a Consorțiului Web (mai 2015)http://www.w3.org/TR/webmessaging/
de studiat și HTML5 Living Standard (14 decembrie 2015)https://html.spec.whatwg.org/multipage/comms.html#web-messaging
![Page 49: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/49.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Messaging
mesajele pot proveni de la server, via socket-uri Websau de la alte documente via canale de comunicație
documentele HTML5 pot transmite date unul altuia, chiar dacă aparțin unor domenii Internet diferite
![Page 50: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/50.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Messaging
datele privind evenimentul de recepționarea unui mesaj sunt specificate de interfața MessageEvent
transmiterea unui mesaj via metoda postMessage ()
![Page 51: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/51.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Messaging
interfața MessageChannel specificăun canal de transmitere de mesaje
constituit din 2 porturi (sursă și destinație)
vezi și interfața MessagePort
![Page 52: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/52.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
typedef sequence<MessagePort> MessagePortArray;
interface MessagePort : EventTarget {
void postMessage (any message, // plasează un mesaj
optional sequence<Transferable> transfer);
void start (); // deschide canalul de comunicație
void close (); // închide canalul
// tratează evenimentul recepționării unui mesaj
attribute EventHandler onmessage;
};
![Page 53: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/53.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
un exemplu succint:http://tutorials.jenkov.com/html5/messaging.html
![Page 54: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/54.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers
conceptul de worker Web:script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScript
nu interacționează direct cu utilizatorul
![Page 55: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/55.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers
conceptul de worker Web:script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScript
mediul de execuție a unui worker e complet separat,codul fiind rulat concurent/paralel, în mod asincron
![Page 56: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/56.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers
se oferă un API pentru instanțierea și manipulareaprogramelor JavaScript de tip worker
specificație W3C Working Draft (septembrie 2015)http://www.w3.org/TR/workers/
https://html.spec.whatwg.org/multipage/workers.html
![Page 57: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/57.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers
un worker – desemnat de interfața Worker –prezintă un domeniu global de execuție
specificat de interfața WorkerGlobalScope
![Page 58: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/58.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface WorkerGlobalScope : EventTarget { readonly attribute WorkerGlobalScope self; readonly attribute WorkerLocation location; // originea worker-uluireadonly attribute WorkerNavigator navigator;void importScripts(DOMString... urls);
void close ();
// tratarea evenimentelorattribute EventHandler onerror; attribute EventHandler onlanguagechange;attribute EventHandler onoffline;attribute EventHandler ononline;attribute EventHandler onrejectionhandled;attribute EventHandler onunhandledrejection;
};
un obiect WorkerGlobalScope are asociate: un URL (inițial null) și o stare HTTPS (modern, deprecated, none)
![Page 59: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/59.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers
dedicated worker„legat” de creatorul lui
interacțiunea se face via canale de comunicație prin intermediul porturilor de mesaje
vezi interfața MessagePort
![Page 60: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/60.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
[Constructor (in DOMString scriptURL), Exposed=(Window,Worker)]
interface Worker : EventTarget {
// termină execuția programului (worker-ului)
void terminate ();
// plasează un mesaj
void postMessage (any message,
optional sequence<Transferable> transfer);
// tratează apariția unui mesaj ce poate fi procesat
attribute EventHandler onmessage;
};
Worker implements AbstractWorker;
“Dedicated web workers are instantiated by the main process and they can communicate only with it.”
(Guillaume Cedric Marty, 2015)
![Page 61: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/61.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers : cod partajabil – shared worker
“Shared workers can be reached by all processes running on the same origin
(different browser tabs, iframes or other shared workers).”
![Page 62: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/62.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers
service workerlucrător responsabil cu accesarea serviciilor Web
specificație W3C în regim de ciornă (iunie 2015)http://www.w3.org/TR/service-workers/
https://jakearchibald.github.io/isserviceworkerready/resources.html
![Page 63: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/63.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers
un worker poate importa programe și biblioteci via importScripts (adreseWeb)
de exemplu, se poate interacționa cu navigatorul Webidentificat prin interfața WorkerNavigator
![Page 64: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/64.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
var numar = 1; // worker.js – determină numere prime ad infinitumsearch: while (true) {
numar++; for (var i = 2; i <= Math.sqrt (numar); i++)
if (numar % i == 0) continue search;
// a fost determinat un număr primpostMessage (numar); // transmitem valoarea lui printr-un mesaj
}
<p>Cel mai mare număr prim calculat: <div id="rezultat"></div></p> <script>
var prog = new Worker('worker.js'); // instanțiem lucrătorul JavaScriptprog.onmessage = function (ev) { // tratăm mesajul recepționat
// plasăm datele (rezultatul) în cadrul elementului HTML cu id='rezultat'document.getElementById ('rezultat').textContent = ev.data;
}; </script>
G. Marty, How fast are Web workers? (2015) – context: performanță https://hacks.mozilla.org/2015/07/how-fast-are-web-workers/
![Page 65: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/65.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Workers
observații:
nu se poate modifica arborele DOM al paginiiși nu se pot altera variabilele globale
pot fi efectuate transferuri asincrone via XMLHttpRequest
![Page 66: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/66.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Storage
oferă mecanisme de stocare (persistentă) a datelorla nivel de client (browser)
sub forma de perechi cheie—valoare
![Page 67: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/67.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Storage
recomandare a Consorțiului Web (noiembrie 2015)
www.w3.org/TR/webstorage/
![Page 68: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/68.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Storage
interfața Storage oferă acces la o listă de perechi (itemi)de forma cheie—valoare
![Page 69: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/69.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface Storage {
// mărimea spațiului de stocare
readonly attribute unsigned long length;
// cheie pentru acces la date
DOMString? key (unsigned long index);
// consultarea unui item
getter DOMString getItem (DOMString key);
// asignarea de valori pentru un item
setter creator void setItem (DOMString key, DOMString value);
// eliminarea unui item
deleter void removeItem (DOMString key);
// ștergerea spațiului de stocare
void clear ();
}
![Page 70: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/70.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Storage
maniera de stocare a itemilor se precizeazăvia atributele sessionStorage și localStorage
![Page 71: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/71.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Storage
maniera de stocare a itemilor se precizeazăvia atributele sessionStorage și localStorage
stocare nepersistentă(suport pentru sesiuni)
![Page 72: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/72.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Storage
maniera de stocare a itemilor se precizeazăvia atributele sessionStorage și localStorage
alternativă la cookie-uri
![Page 73: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/73.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
<textarea id="editor" placeholder="Începeți să tastați...">
</textarea>
document.querySelector ('#editor').addEventListener ('keyup',
function (eveniment) { // la fiecare eliberare a tastei…
// stocăm conținutul și data editării
localStorage.setItem ('valoare', this.value);
localStorage.setItem ('data', (new Date ()).getTime ());
}, false);
![Page 74: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/74.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Storage
față de cookie-uri, datele stocate în localStorage
nu au un timp de viață stabilit a-priori(pot fi șterse explicit de utilizator sau prin program)
![Page 75: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/75.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Storage
datele memorate în localStorage
sunt disponibile numai la nivel local – în browser(serverul Web nu le poate accesa direct decât
via un program ce le transferă explicit prin HTTP)
![Page 76: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/76.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
(în loc de) pauză
![Page 77: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/77.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
suport de stocare de date la nivel obiectualvia un API asincron, inclusiv pentru WebWorker
recomandare a Consorțiului Web (ianuarie 2015)
http://www.w3.org/TR/IndexedDB/
![Page 78: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/78.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
obiectele de stocare compun baze de date identificate prin nume
fiecare bază de date are asociată o versiune (număr >= 0)
![Page 79: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/79.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface IDBDatabase : EventTarget { readonly attribute DOMString name; readonly attribute unsigned long version; readonly attribute DOMStringList objectStoreNames;
IDBObjectStore createObjectStore (DOMString name, // stocareoptional IDBObjectStoreParameters optionalParameters);
void deleteObjectStore (DOMString name); // ștergere
IDBTransaction transaction ((DOMString or sequence<DOMString>) storeNames, optional IDBTransactionMode mode = "readonly");
void close ();
attribute EventHandler onabort; // abandonarea unei operațiiattribute EventHandler onerror; // tratează posibile eroriattribute EventHandler onversionchange; // tratează actualizările
};
interfață modelând o conexiune la baza de date, rezultând o tranzacție
![Page 80: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/80.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface IDBDatabase : EventTarget { readonly attribute DOMString name; readonly attribute unsigned long version; readonly attribute DOMStringList objectStoreNames;
IDBObjectStore createObjectStore (DOMString name, // stocareoptional IDBObjectStoreParameters optionalParameters);
void deleteObjectStore (DOMString name); // ștergere
IDBTransaction transaction ((DOMString or sequence<DOMString>) storeNames, optional IDBTransactionMode mode = "readonly");
void close ();
attribute EventHandler onabort; // abandonarea unei operațiiattribute EventHandler onerror; // tratează posibile eroriattribute EventHandler onversionchange; // tratează actualizările
};var db = indexedDBSync.open ('Agenda', 1,
function (tranz, versVeche) {
tranz.db.createObjectStore ('Adrese',
{ keyPath: 'id', autoIncrement: true } ); });
![Page 81: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/81.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
datele sunt indexate, în sensul că fiecare înregistrareposedă o cheie unică de tip Number, String, Date ori Array
(conform specificației ECMAScript)
![Page 82: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/82.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
de asemenea, o înregistrare (record) are o valoarecorespunzătoare unui tip de date ECMAScript
valoarea propriu-zisă e obținută prin evaluareaașa-numitei căi asociate cheii (key path)
(uzual, un șir de caractere ori șiruri delimitate de „.”)
![Page 83: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/83.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface IDBObjectStore { // specifică maniera de stocarereadonly attribute DOMString name; readonly attribute DOMString keyPath; readonly attribute DOMStringList indexNames; readonly attribute IDBTransaction transaction; readonly attribute boolean autoIncrement;
IDBRequest put (any value, optional any key); // operații privind cheileIDBRequest add (any value, optional any key); IDBRequest delete (any key); IDBRequest get (any key); IDBRequest clear (); IDBRequest openCursor (optional any? range,
optional IDBCursorDirection direction = "next"); IDBIndex createIndex (DOMString name, // operații vizând indecșii
(DOMString or sequence<DOMString>) keyPath, optional IDBIndexParameters optionalParameters);
IDBIndex index (DOMString name); void deleteIndex (DOMString indexName); IDBRequest count (optional any key);
};
![Page 84: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/84.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface IDBRequest : EventTarget { // modelează o cererereadonly attribute any result; // rezultatul interogării emisereadonly attribute DOMError error; // eventuala eroare survenită readonly attribute (IDBObjectStore or IDBIndex or IDBCursor)? source;readonly attribute IDBTransaction transaction;// starea interogării: în așteptare ("pending") sau efectuată ("done")readonly attribute IDBRequestReadyState readyState;
attribute EventHandler onsuccess; // funcții de tratare a evenim. attribute EventHandler onerror;
};
metode importante specificate de interfața IDBObjectStore:get () put () add () delete ()
openCursor ()createIndex () index () deleteIndex ()
clear () count ()
![Page 85: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/85.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
accesul la înregistrări se poate realiza și via indecșispecificați de interfața IDBIndex
![Page 86: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/86.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
operațiile asupra datelor din baza de date se realizează prin intermediul tranzacțiilor
fiecare tranzacție are asociată o conexiune
o tranzacție poate fi deschisă (inițiată) în modurile:readonly, readwrite, versionchange
![Page 87: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/87.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface IDBTransaction : EventTarget { // modul de efectuare a tranzacției: readonly, readwrite, versionchangereadonly attribute IDBTransactionMode mode; readonly attribute IDBDatabase db; readonly attribute DOMError error; // include eroarea apărută
IDBObjectStore objectStore (DOMString name); void abort ();
// tratarea evenimentelorattribute EventHandler onabort;attribute EventHandler oncomplete; attribute EventHandler onerror;
};
![Page 88: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/88.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface IDBTransaction : EventTarget { // modul de efectuare a tranzacției: readonly, readwrite, versionchangereadonly attribute IDBTransactionMode mode; readonly attribute IDBDatabase db; readonly attribute DOMError error; // include eroarea apărută
IDBObjectStore objectStore (DOMString name); void abort ();
// tratarea evenimentelorattribute EventHandler onabort;attribute EventHandler oncomplete; attribute EventHandler onerror;
};
var tran = db.transaction (); // crearea unei tranzacții
var adr = tran.objectStore ('Adrese');
var loc = adr.add ( { nume: 'Copou', numar: '11' } );
var locatie = adr.get (1); // locatie.nume === 'Copou'
![Page 89: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/89.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
iterarea unui număr de înregistrări se face via un cursor
valorile direcției de parcurgere sunt specificate via IDBCursorDirection: next, nextunique, prev, prevunique
![Page 90: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/90.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
cointerface IDBCursor { readonly attribute (IDBObjectStore or IDBIndex) source; // sursa datelorreadonly attribute IDBCursorDirection direction; // direcția de iterarereadonly attribute any key; // cheiareadonly attribute any primaryKey; // cheia primară
IDBRequest update (any value); // actualizarea valorilorvoid advance ([EnforceRange] unsigned long count); void continue (optional any key); IDBRequest delete ();
};
![Page 91: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/91.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
excepții specifice:UnknownError ConstraintError DataError
TransactionInactiveError ReadOnlyError VersionError
excepții preluate de la DOM – nivelul 4:NotFoundError InvalidStateError InvalidAccessError
AbortError TimeoutError QuotaExceededError
SyntaxError DataCloneError
![Page 92: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/92.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
pentru detalii și exemplificări, a se parcurge:
http://docs.webplatform.org/wiki/apis/indexeddb
https://developer.mozilla.org/docs/IndexedDB
exemplu în contextul WebGL:www.webappers.com/2014/01/02/how-to-use-indexeddb-to-handle-3d-webgl-assets/
![Page 93: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/93.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Indexed Database API
![Page 94: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/94.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
File API
suită de API-uri pentru manipularea fișierelor
specificație W3C în stadiu de ciornă (aprilie 2015)
http://www.w3.org/TR/FileAPI/
![Page 95: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/95.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
File API
interfețe de interes:File – consultarea informațiilor vizând un fișier
Blob – consultarea datelor binare FileList – lista unor fișiere, eventual via <input type="file">
FileReader – citirea datelor dintr-un File sau Blob
se poate folosi în conjuncție cu XMLHttpRequest, postMessage, drag & drop, WebWorker
![Page 96: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/96.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
interface FileReader : EventTarget { void readAsArrayBuffer (Blob blob); // metode de citire asincronăvoid readAsText (Blob blob, optional DOMString label);void readAsDataURL (Blob blob);void abort (); const unsigned short EMPTY = 0; // coduri de stareconst unsigned short LOADING = 1; const unsigned short DONE = 2; readonly attribute unsigned short readyState; // rezultatul obținut: File sau Blobreadonly attribute (DOMString or ArrayBuffer)? result;readonly attribute DOMError error;attribute [TreatNonCallableAsNull] EventHandler onloadstart; attribute [TreatNonCallableAsNull] EventHandler onprogress; attribute [TreatNonCallableAsNull] EventHandler onload; attribute [TreatNonCallableAsNull] EventHandler onabort; attribute [TreatNonCallableAsNull] EventHandler onerror; attribute [TreatNonCallableAsNull] EventHandler onloadend;
};
![Page 97: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/97.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
detalii tehnice și exemplificări:developer.mozilla.org/Using_files_from_web_applications
http://docs.webplatform.org/wiki/apis/file
html5demos.com/file-api
https://github.com/coremob/camera
![Page 98: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/98.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Privire de ansambluasupra stocării la nivel de client
Web Storage API: localStorage + sessionStorageindexedDB
Web SQL – specificație abandonatăApplication Cache
File APIs
cookie-uri clasice
![Page 99: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/99.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Notifications
alertarea utilizatorului în afara contextului paginii Webasupra apariției unui eveniment
recomandare a Consorțiului Web (octombrie 2015)
http://www.w3.org/TR/notifications/
![Page 100: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/100.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Notifications
// o notificare afișată 20 de secunde
new Notification ("Ha, ha! Ai primit o notă la CLIW!", {
iconUrl: "nota10.png",
onshow: function() { setTimeout (notification.close (), 20000); }
}
);
alte resurse de interes:https://developer.mozilla.org/docs/WebAPI/Using_Web_Notifications
http://www.paulund.co.uk/html5-notifications
https://github.com/alexgibson/notify.js
http://caniuse.com/#feat=notifications
![Page 101: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/101.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Page Visibility
determinarea stării curente de vizibilitate a unei pagini
recomandare a Consorțiului Web (octombrie 2013)
http://www.w3.org/TR/page-visibility/
![Page 102: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/102.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Page Visibility
extinde interfața Document cu următoarele facilități:
enum VisibilityState { "hidden", "visible", "prerender", "unloaded" };
// la definiția interfeței Document se adaugă următoarele:
partial interface Document {
readonly attribute boolean hidden; // documentul e ascuns?
readonly attribute VisibilityState visibilityState; // starea vizibilității
};
![Page 103: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/103.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Geolocation API
determinarea locației geografice a dispozitivului
recomandare a Consorțiului Web (octombrie 2013)
http://www.w3.org/TR/geolocation-API/
![Page 104: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/104.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
navigator.geolocation.getCurrentPosition (
proceseazaDate, // funcție prelucrând datele privind poziția geografică
trateazaErori, // nu s-a putut determina localizarea
{ // diverși parametri de control
enableHighAccuracy: true,
timeout: 10000, // așteaptă max 10000 milisec. pentru a primi date
maximumAge: 8000 // preia din cache date privind poziția
} // dacă nu-s mai vechi de 8000 de milisecunde
);
function proceseazaDate (localizare) {
alert ('latitudine: ' + localizare.coords.latitude +
'longitudine: ' + localizare.coords.longitude);
}
a se folosi watchPosition() pentru a prelua localizarea în mod continuu
![Page 105: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/105.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Geolocation API
de studiat și experimentat:
http://diveintohtml5.info/geolocation.html
https://developer.mozilla.org/docs/WebAPI/Using_geolocation
http://html5demos.com/geo
![Page 106: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/106.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
DeviceOrientation Event Specification
tratarea evenimentelorprivind modificarea orientării și mișcarea dispozitivului
în lucru la Consorțiul Web (decembrie 2011)
http://www.w3.org/TR/orientation-event/
![Page 107: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/107.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
codate oferite de giroscop, accelerometru, busolă pe baza evenimentelor
deviceorientation, devicemotion, compassneedscalibration
![Page 108: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/108.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
DeviceOrientation Event Specification
nu există suport complet oferit de niciun navigator(e.g., maniera de tratare a coordonatelor e diferită)
exemple practice (dependente de browser):developer.mozilla.org/docs/Web/Guide/Events/Orientation_and_motion_data_explained
http://www.html5rocks.com/en/tutorials/device/orientation/
http://people.opera.com/richt/release/demos/orientation/marinecompass/
![Page 109: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/109.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
![Page 110: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/110.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Controlul temporizării animațiilor realizate via JavaScript
(timing control for script-based animations)
specificație în regim de ciornă (septembrie 2015)http://www.w3.org/TR/animation-timing/
parte a standardului HTML 5.1 – în lucru www.w3.org/TR/html51/webappapis.html#animation-frames
![Page 111: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/111.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Controlul temporizării animațiilor
animațiile pot fi realizate:
declarativ(e.g., via CSS sau elementul <animate> oferit de SVG)
ori
programatic(implementate de un program JavaScript)
![Page 112: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/112.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Controlul temporizării animațiilor
apare necesitatea de a cunoaște la nivel de cod care e frecvența ideală de a actualiza conținutul
dorit a fi animat (animation frame update)în funcție de capabilitățile disponibile la nivel de browser
![Page 113: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/113.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Controlul temporizării animațiilor
metode noi specificate de interfața Window:
long requestAnimationFrame (FrameRequestCallback funcție)
semnalează navigatorului Web că o animație realizată prin program trebuie să fie planificată
actualizarea va fi realizată o singură dată
![Page 114: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/114.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Controlul temporizării animațiilor
metode noi specificate de interfața Window:
void cancelAnimationFrame (long handler)
anulează o cerere anterioară de actualizare a animației
![Page 115: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/115.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
resurse adiționale:http://creativejs.com/resources/requestanimationframe/
developer.mozilla.org/Web/API/window.requestAnimationFrame
![Page 116: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/116.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebRTC
comunicare în timp-real (real time communication)între navigatoare Web în stilul peer-to-peer
specificație în lucru la Consorțiul Web (februarie 2015)
http://www.w3.org/TR/webrtc/
![Page 117: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/117.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebRTC
API de interes:
MediaStream
acces la fluxuri multimedia (e.g., video și/sau audio) furnizate de un senzor local – tipic, Webcam
http://www.w3.org/TR/mediacapture-streams/
![Page 118: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/118.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
<video id="monitor" autoplay="autoplay"></video>
// accesul la conținut multimedia local furnizat de un senzor
// (cameră Web, microfon) pe baza acordului utilizatorului
navigator.getUserMedia (
{ video: true, // pot fi impuse diverse constrângeri
audio: true }, // în acest caz, dorim și video și audio
prelucreazaFlux, trateazaErori
);
var video = document.getElementById ('monitor');
function prelucreazaFlux (flux) {
video.src = URL.createObjectURL (flux); // ‘alimentăm’ cu flux video
video.onerror = function () { flux.stop (); }; // eroare, deci oprim fluxul
flux.onended = function () { /* transmisia s-a terminat */ };
…
}
![Page 119: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/119.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
implementări curente specifice fiecărui navigator Web
http://caniuse.com/#feat=stream
![Page 120: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/120.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebRTC
API de interes:
RTCPeerConnection
permite ca doi utilizatori să comunice direct via browser
comunicațiile sunt coordonate pe baza unui canal(e.g., instanțiat de un program via XMLHttpRequest)
![Page 121: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/121.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebRTC
API de interes:
RTCPeerConnection
oferă suport și pentru controlul sesiunii de transfer aldatelor, plus trimiterea de mesaje speciale (signaling)
transmiterea efectivă poate adopta un anumit protocol bidirecțional – HTTP, SIP, XMPP,…
![Page 122: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/122.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
diverse maniere de comunicare specificate de WebRTCdetalii la www.webrtc.org
![Page 123: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/123.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebRTC
API de interes:
RTCDataChannel
permite interschimb eficient, în stilul peer-to-peer,de date arbitrare, nu doar audio și/sau video
![Page 124: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/124.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
http://iswebrtcreadyyet.com
![Page 125: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/125.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebRTC
tutoriale și exemple demonstrative:
http://www.html5rocks.com/tutorials/webrtc/basics/
https://developer.mozilla.org/Web/API/WebRTC_API/
https://webrtc.github.io/samples/
![Page 126: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/126.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
WebRTC
realizarea unei aplicații Web multimedia conversaționale (proiect de licență al absolventului Bogdan Cernat, 2015)
http://pixelwav.es/licenta/
https://github.com/bogdancernat/licenta
studiu de caz
![Page 127: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/127.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Audio API
procesarea și sintetizarea sunetului la nivel înalt
W3C Working Draft (octombrie 2013)
http://www.w3.org/TR/webaudio/
![Page 128: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/128.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Audio API
pentru detalii + exemple demonstrative, a se parcurge:
http://creativejs.com/resources/web-audio-api-getting-started/
https://developer.mozilla.org/Web/API/Web_Audio_API
http://webaudio.github.io/demo-list/
http://webaudioapi.com/
http://chimera.labs.oreilly.com/books/1234000001552/
![Page 129: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/129.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte API-uri de interes – unele (încă) neimplementate:
Battery Status API (W3C Candidate Rec., 2014) – 64%www.w3.org/TR/battery-status/
Network Information API (în lucru la W3C, 2014) – 19%www.w3.org/TR/netinfo-api/
Network Service Discovery API (în lucru, feb. 2014)www.w3.org/TR/discovery-api/
Beacon API (în lucru, 9 decembrie 2015) – 56%http://www.w3.org/TR/beacon/
![Page 130: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/130.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte API-uri de interes – unele (încă) neimplementate:
Push API (W3C Working Draft, aprilie 2015) – 45%www.w3.org/TR/push-api/
Vibration API (recomandare W3C, februarie 2015) – 68% www.w3.org/TR/vibration/
Gamepad (W3C Working Draft, aprilie 2015) – 58% www.w3.org/TR/gamepad/
Clipboard API & Events (ciornă W3C, aprilie 2015) – 82% www.w3.org/TR/clipboard-apis/
![Page 131: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/131.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte API-uri de interes – unele (încă) neimplementate:
Ambient Light Events (în lucru, sep. 2015) – 8%www.w3.org/TR/ambient-light/
Progress Events (W3C Recommandation, aprilie 2014)www.w3.org/TR/progress-events/
Proximity API (în lucru, septembrie 2015) – 9%www.w3.org/TR/proximity/
Web Cryptography API (Candidate Rec., dec. 2014) – 74%www.w3.org/TR/WebCryptoAPI/
![Page 132: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/132.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Până la urmă, ce înseamnă HTML5?
![Page 133: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/133.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“HTML5 should not be considered as a whole. You should cherry-pick the technology
that suits the solution to your problem.”Remy Sharp
![Page 134: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/134.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
HTML5
semantic markup
noi marcaje precum <header> <nav> <section> <aside>…noi tipuri de interacțiune via formulare Web
includerea diverselor tipuri de conținut precum SVGmicrodate – vezi inițiativa schema.org
conținut editabilatribute specifice aplicațiilor: data-
![Page 135: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/135.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
HTML5
prezentarea conținutului via foi de stiluri CSS
facilități CSS: animații, tranziții, transformări, coloane,…www.w3.org/standards/techs/css#w3c_all
interogări privind mediile de redare (media queries)suport pentru designul Web responsiv
utilizarea fonturilor externe – Web fonts
![Page 136: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/136.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
HTML5
grafica 2D și/sau 3D
<canvas> în contextul 2D raster<canvas> 3D (WebGL)
conținut grafic scalabil – SVG
![Page 137: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/137.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
HTML5
multimedia
<audio> (MP3, OGG,…)<video> (H.264, OGG, WebM)
API-uri de procesare a sunetuluicomunicații în timp-real – WebRTC
![Page 138: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/138.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
HTML5
acces la dispozitiv
drag & droporientationgeolocation
acces la camera WebnotificăriFile API
contexte: TV, industria auto, console de jocuri
![Page 139: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/139.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
HTML5
offline & storage
Web Storage (localStorage & Session Storage)baze de date la nivel de client: indexedDB
caching
![Page 140: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/140.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
HTML5
connectivity & real-time
mesaje vehiculate între documentetransfer asincron via XMLHttpRequest
transfer de date via WebSocketevenimente recepționate de la server (server-side events)
![Page 141: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/141.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
HTML5
asigurarea performanței
Web Workersmanagementul istoricului navigării
RequestAnimationFrameînglobarea datelor direct în URI
controlul disponibilității conexiunii la rețeaetc.
![Page 142: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/142.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
tehnologii implementate de navigatorul Web actual, inclusiv la nivelul dispozitivelor mobile
http://www.w3.org/Mobile/mobile-web-app-state/vezi și Device APIs Working Group: www.w3.org/2009/dap/
![Page 143: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/143.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Components
suita de tehnologii HTML5 oferă premisele implementării de componente Web la nivel de client
ce pot fi împachetate și reutilizate în funcție de context
http://webcomponents.org/
http://w3c.github.io/webcomponents/
![Page 144: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/144.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Components
elemente specificate de dezvoltator – Custom Elements(ciornă, decembrie 2015): www.w3.org/TR/custom-elements/
import de construcții HTML – HTML Imports(în lucru, martie 2014): www.w3.org/TR/html-imports/
machete de prezentare definite declarativ – <template>
(ciornă, dec. 2014): http://caniuse.com/#feat=template
interacțiune între arborii DOM – Shadow DOM(în lucru, 15 decembrie 2015): www.w3.org/TR/shadow-dom/
![Page 145: CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022030312/58edf64c1a28ab97098b45ab/html5/thumbnails/145.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
❄❄
❄❄
❄❄
episodul viitor: vacanța de iarnă ☃
❄