dezvoltarea aplicaţiilor web la nivel de client (cursul #12): programare web. api-uri javascript...
DESCRIPTION
Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.htmlTRANSCRIPT
![Page 1: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/1.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
API-uri JavaScript în contextul HTML5
programare Web la nivel de client
![Page 2: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/2.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
“You are never too old to set another goal or to dream a new dream.”
C.S. Lewis
![Page 3: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/3.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Încărcarea & redarea documentelor
suplimentar față de obiectul Document,browser-ul Web pune la dispoziție Window
![Page 4: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/4.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Î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: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/5.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Î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: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/6.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Î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: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/7.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Control asupra cache-ului navigatorului Web
ApplicationCache
detalii la http://www.w3.org/TR/html5/browsers.html#offline
![Page 8: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/8.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
politica de caching e specificată de un fișier .appcache
referit prin <html manifest="offline.appcache">
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: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/9.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/10.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Control asupra cache-ului navigatorului Web
ApplicationCache
evenimente specifice: checking noupdate downloading progress
cached updateready obsolete error
![Page 11: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/11.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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://appcachefacts.info/
![Page 12: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/12.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Specificarea contoarelor de timp
WindowTimers
setTimeout() clearTimeout()
setInterval() clearInterval()
http://www.w3.org/TR/html5/webappapis.html#timers
![Page 13: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/13.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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, 2013)
![Page 14: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/14.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Starea și proprietățile sistemului
Navigator
subinterfețele NavigatorID și NavigatorAbilities
www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities
![Page 15: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/15.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Starea și proprietățile sistemului
interface NavigatorID {
readonly attribute DOMString appName;
readonly attribute DOMString appVersion;
readonly attribute DOMString platform;
readonly attribute DOMString product;
readonly attribute DOMString userAgent;
};
datele furnizate pot fi folosite la identificarea utilizatoruluibrowser-ul ar trebui să ofere cât mai puține informații
![Page 16: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/16.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Starea și proprietățile sistemului
protocoalele și/sau tipurile de date ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorAbilities
implicit, într-un URI se permit schemele:bitcoin irc geo mailto magnet mms news nntp sip
sms smsto ssh tel urn webcal xmpp
![Page 17: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/17.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Starea și proprietățile sistemului
protocoalele și/sau tipurile de date ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorAbilities
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 18: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/18.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Drag & drop
stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop
http://www.w3.org/TR/html5/editing.html#dnd
![Page 19: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/19.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 20: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/20.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 21: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/21.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 22: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/22.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Drag & drop
evenimente ce pot fi tratate:drop
dragenter
dragover
dragend
![Page 23: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/23.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Drag & drop
pentru exemple și alte detalii, a se vizita:
https://developer.mozilla.org/docs/DragDrop/Drag_and_Drop
http://www.html5rocks.com/tutorials/dnd/basics/
http://dev.opera.com/articles/view/drag-and-drop/
http://html5demos.com/drag
![Page 24: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/24.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Alte API-uri de bază:
UndoManager
gestionează istoricul comenzilor efectuate de utilizator(undo transaction history)
![Page 25: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/25.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
![Page 26: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/26.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 27: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/27.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Există alte specificații/inițiative de interes?
![Page 28: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/28.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 29: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/29.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
WebSocket API
specificație în stadiul W3C Candidate Recommendation (20 septembrie 2012)
www.w3.org/TR/websockets/
![Page 30: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/30.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
[Constructor(DOMString url, optional (DOMString or DOMString[ ]) protocols)]
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 31: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/31.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 32: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/32.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
// 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 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.log ("A survenit o eroare…"); };// trimitem datesock.send ("Salutări flaușate!");// am închis conexiuneasock.close ();
maniera generală de transfer al datelor
![Page 33: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/33.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
// 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:1974/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 34: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/34.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 etc.
![Page 35: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/35.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 36: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/36.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
WebSocket API
navigatorul poate fi considerat platformă de dezvoltarea aplicațiilor Internet
oferă suport pentru diverse protocoale bazate pe TCP(pub/sub, VNC, XMPP,…)
![Page 37: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/37.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
detalii la http://www.infoq.com/articles/Web-Sockets-Proxy-Servers
![Page 38: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/38.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura aplicațiilor Web ce recurg la WebSocketconform Peter Lubbers (2012)
![Page 39: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/39.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 40: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/40.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 41: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/41.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
EventSource API (Server-Send Events)
specificație în stadiu de ciornă (15 noiembrie 2013)
http://dev.w3.org/html5/eventsource/
![Page 42: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/42.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
// verificăm dacă există suport oferit de navigatorul Web
if (!!window.EventSource) { // eventual, Modernizr.eventsource
// instanțiem o sursă de date (un flux)
var flux = new EventSource ("http://stiri.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.log ("A survenit o eroare…");
}
};
![Page 43: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/43.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Messaging
oferă API-uri pentru realizarea transferului de mesajeîntre diverse contexte de navigare
![Page 44: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/44.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Messaging
specificație a Consorțiului Webstatut Candidate Recommendation (mai 2012)
http://www.w3.org/TR/webmessaging/
![Page 45: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/45.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Messaging
mesajele pot proveni de la server, via socket-uri Websau de la alte documente via canale de comunicație
![Page 46: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/46.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Messaging
datele privind evenimentul de recepționarea unui mesaj sunt specificate de interfața MessageEvent
transmiterea unui mesaj via metoda postMessage ()
![Page 47: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/47.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 48: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/48.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
attribute Function? onmessage; // tratează evenimentele
};
![Page 49: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/49.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
pentru detalii, a se parcurge șihttp://dev.opera.com/articles/view/window-postmessage-messagechannel/
http://msdn.microsoft.com/en-us/library/ie/hh781494%28v=vs.85%29.aspx
![Page 50: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/50.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 51: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/51.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 52: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/52.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Workers
se oferă un API pentru instanțierea și manipulareaprogramelor JavaScript de tip worker
specificație W3C Candidate Recommendation (mai 2012)
http://www.w3.org/TR/workers/
![Page 53: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/53.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Workers
un worker – desemnat de interfața Worker –prezintă un domeniu global de execuție
specificat de interfața WorkerGlobalScope
![Page 54: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/54.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interface WorkerGlobalScope : EventTarget {
readonly attribute WorkerGlobalScope self;
readonly attribute WorkerLocation location;
void close ();
// funcția de tratare a erorilor
attribute Function? onerror;
// tratează lipsa conectivității la rețea
attribute Function? onoffline;
// tratează disponibilitatea conectivității la rețea
attribute Function? ononline;
};
WorkerGlobalScope implements WorkerUtils;
![Page 55: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/55.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Workers
dedicated worker“legat” de creatorul lui
interacțiunea cu el se face via porturi de mesaje– vezi interfața MessagePort
![Page 56: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/56.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Workers
[Constructor(in DOMString scriptURL)]
interface Worker : AbstractWorker {
// 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 Function? onmessage;
};
![Page 57: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/57.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Workers
shared workerposedă un nume prin care poate fi referit
de alte script-uri având aceeași origine
vezi interfața DedicatedWorkerGlobalScope
![Page 58: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/58.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Workers
un worker are acces la API-uri specificedesemnate prin interfața WorkerUtils
de exemplu, se poate interacționa cu navigatorul Web
![Page 59: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/59.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
// worker.js – determină numere primevar numar = 1; search: while (true) {
numar += 1; 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 worker = new Worker('worker.js'); // instanțiem lucrătorul JavaScriptworker.onmessage = function (event) { // tratăm mesajul recepționat
// plasăm datele (rezultatul) în cadrul elementului HTML cu id='rezultat'document.getElementById ('rezultat').textContent = event.data;
}; </script>
![Page 60: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/60.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Workers
restricții:nu se poate modifica arborele DOM al paginii
și nu se pot altera variabilele globale
pot fi efectuate transferuri asincrone via XMLHttpRequest
![Page 61: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/61.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Storage
oferă mecanisme de stocare (persistentă) a datelorla nivel de client (browser)
sub forma de perechi cheie—valoare
![Page 62: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/62.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Storage
recomandare a Consorțiului Web (iulie 2013)
www.w3.org/TR/webstorage/
![Page 63: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/63.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Storage
interfața Storage oferă acces la o listă de perechi (itemi)de forma cheie—valoare
![Page 64: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/64.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 65: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/65.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Storage
maniera de stocare a itemilor se precizeazăvia atributele sessionStorage și localStorage
![Page 66: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/66.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Storage
maniera de stocare a itemilor se precizeazăvia atributele sessionStorage și localStorage
stocare nepersistentă(suport pentru sesiuni)
![Page 67: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/67.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Storage
maniera de stocare a itemilor se precizeazăvia atributele sessionStorage și localStorage
alternativă la cookie-uri
![Page 68: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/68.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
<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 69: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/69.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 70: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/70.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 71: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/71.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Indexed Database API
suport de stocare de date la nivel obiectualvia un API asincron
W3C Candidate Recommendation (iulie 2013)
http://www.w3.org/TR/IndexedDB/
![Page 72: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/72.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 73: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/73.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 (any storeNames, optional DOMString mode);void close ();
attribute Function? onabort; // abandonarea unei operațiiattribute Function? onerror; // tratează posibile erori survenite attribute Function? onversionchange; // tratează actualizările
};var db = indexedDBSync.open ('Agenda', 1,
function (tranz, versVeche) {
tranz.db.createObjectStore ('Adrese',
{ keyPath: 'id', autoIncrement: true } ); });
![Page 74: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/74.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Indexed Database API
datele sunt indexate, în sensul că fiecare înregistrareposedă o cheie unică de tip Array (JavaScript),
DOMString (WebIDL), Date (JavaScript) sau float (WebIDL)
![Page 75: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/75.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Indexed Database API
de asemenea, o înregistrare are o valoarede un anumit tip simplu sau structurat – e.g., Object
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 76: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/76.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interface IDBObjectStore { readonly attribute DOMString name; readonly attribute DOMString keyPath; readonly attribute DOMStringList indexNames; readonly attribute IDBTransaction transaction; readonly attribute boolean autoIncremenent;
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 DOMString direction); IDBIndex createIndex (DOMString name, any keyPath,
optional IDBIndexParameters optionalParameters); IDBIndex index (DOMString name); void deleteIndex (DOMString indexName); IDBRequest count (optional any key);
};
![Page 77: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/77.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Indexed Database API
accesul la înregistrări se poate realiza și via indecși
meta-datele asociate indecșilor sunt oferite de interfețele IDBIndex și IDBIndexSync
![Page 78: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/78.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 79: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/79.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interface IDBTransaction : EventTarget { readonly attribute DOMString mode; // modul de efectuarereadonly attribute IDBDatabase db; readonly attribute DOMError error; // include eroarea apărutăIDBObjectStore objectStore (DOMString name); void abort ();
attribute Function? onabort; // tratarea evenimentelorattribute Function? oncomplete; attribute Function? 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 80: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/80.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Indexed Database API
iterarea unui număr de înregistrări se face via un cursor
valorile direcției de parcurgere sunt:next, nextunique, prev, prevunique
a se vedea interfețele IDBCursor și IDBCursorSync
![Page 81: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/81.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacointerface IDBCursor {
readonly attribute Object source; // sursa datelorreadonly attribute DOMString direction; // direcția de iterarereadonly attribute any key; // cheiareadonly attribute any primaryKey; // cheia primară
IDBRequest update (any value); // actualizarea valorilorvoid advance (unsigned long count); void continue (optional any key); IDBRequest delete ();
};
![Page 82: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/82.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Indexed Database API
pentru detalii și exemplificări, a se parcurge:http://docs.webplatform.org/wiki/apis/indexedDB
https://developer.mozilla.org/docs/IndexedDBhttp://net.tutsplus.com/tutorials/javascript-ajax/working-with-indexeddb/
www.webappers.com/2014/01/02/how-to-use-indexeddb-to-handle-3d-webgl-assets/
![Page 83: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/83.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
File API
suită de API-uri pentru manipularea fișierelor
specificație W3C în stadiu de ciornă (septembrie 2013)
http://www.w3.org/TR/FileAPI/
![Page 84: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/84.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
File API
File
Blob BlobBuilder
FileList
FileReader
FileWriter FileSaver
FileSystem
![Page 85: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/85.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
interface FileReader : EventTarget { void readAsArrayBuffer (Blob blob); // metode de citire asincronăvoid readAsBinaryString (Blob blob); void readAsText (Blob blob, optional DOMString encoding);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; readonly attribute any result; // rezultatul obținut: File sau Blobreadonly attribute DOMError error;attribute [TreatNonCallableAsNull] Function? onloadstart; attribute [TreatNonCallableAsNull] Function? onprogress; attribute [TreatNonCallableAsNull] Function? onload; attribute [TreatNonCallableAsNull] Function? onabort; attribute [TreatNonCallableAsNull] Function? onerror; attribute [TreatNonCallableAsNull] Function? onloadend;
};
tratareaevenimen-
telor
![Page 86: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/86.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
File API
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 87: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/87.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 88: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/88.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Notifications
alertarea utilizatorului în afara contextului paginii Webasupra apariției unui eveniment
specificație în lucru (septembrie 2013)
http://www.w3.org/TR/notifications/
![Page 89: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/89.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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); }
}
);
exemple + amănunte:https://developer.mozilla.org/docs/WebAPI/Using_Web_Notifications
http://www.html5rocks.com/tutorials/notifications/quick/
http://caniuse.com/#feat=notifications
![Page 90: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/90.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 91: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/91.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Page Visibility
extinde interfața Document cu următoarele facilități:
enum VisibilityState { "hidden", "visible", "prerender", "unloaded" };
partial interface Document {
readonly attribute boolean hidden; // documentul e ascuns?
readonly attribute VisibilityState visibilityState; // starea vizibilității
};
![Page 92: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/92.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Geolocation API
determinarea locației geografice a dispozitivului
W3C Recommendation (octombrie 2013)
http://www.w3.org/TR/geolocation-API/
![Page 93: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/93.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 94: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/94.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Geolocation API
de studiat și experimentat:
http://diveintohtml5.info/geolocation.html
https://developer.mozilla.org/docs/WebAPI/Using_geolocation
http://html5demos.com/geo
![Page 95: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/95.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
DeviceOrientation Event Specification
tratarea evenimentelorprivind modificarea orientării și mișcarea dispozitivului
W3C Working Draft (decembrie 2011)
http://www.w3.org/TR/orientation-event/
![Page 96: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/96.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busacodate oferite de giroscop, accelerometru, busolă
pe baza evenimentelor deviceorientation, devicemotion, compassneedscalibration
![Page 97: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/97.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
DeviceOrientation Event Specification
nu există suport complet oferit de nici un navigator
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 98: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/98.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
WebRTC
comunicare în timp-real (real time communication)între navigatoare Web în stilul peer-to-peer
specificație în lucru la Consorțiul Web (septembrie 2013)
http://www.w3.org/TR/webrtc/
![Page 99: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/99.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
WebRTC
API de interes:
MediaStream
acces la fluxuri multimedia (e.g., video și/sau audio) furnizate de un senzor local – tipic, un Webcam
http://www.w3.org/TR/mediacapture-streams/
![Page 100: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/100.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
<video id="monitor" autoplay="autoplay"></video>
// accesul la conținut multimedia local furnizat de un senzor
// (cameră Web, microfon) pe baza acordului utililizatorului
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 101: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/101.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
implementările curente sunt specifice fiecărui navigator Web
http://caniuse.com/#feat=stream
![Page 102: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/102.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 103: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/103.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 104: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/104.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
diverse maniere de comunicare specificate de WebRTCdetalii la www.webrtc.org
![Page 105: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/105.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
WebRTC
API de interes:
RTCDataChannel
permite interschimb eficient, în stilul peer-to-peer,de date arbitrare, nu doar audio și/sau video
![Page 106: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/106.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
http://iswebrtcreadyyet.com
![Page 107: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/107.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
WebRTC
tutoriale & exemple demonstrative:
http://www.html5rocks.com/tutorials/webrtc/basics/
www.creativebloq.com/javascript/get-started-webrtc-1132857
http://mozilla.github.io/webrtc-landing/
http://webrtcdemo.com/
![Page 108: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/108.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Audio API
procesarea și sintetizarea sunetului la nivel înalt
W3C Working Draft (octombrie 2013)
http://www.w3.org/TR/webaudio/
![Page 109: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/109.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Web Audio API
pentru detalii + exemple demonstrative, a se parcurge:
http://creativejs.com/resources/web-audio-api-getting-started/
https://github.com/WebAudio/demo-list
![Page 110: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/110.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Alte API-uri de interes (unele, neimplementate):
Battery Status API – www.w3.org/TR/battery-status/
Network Information API – www.w3.org/TR/netinfo-api/
Push API – www.w3.org/TR/push-api/
Vibration API – www.w3.org/TR/vibration/
Ambient Light Events – www.w3.org/TR/ambient-light/
Progress Events – www.w3.org/TR/progress-events/
Proximity Events – www.w3.org/TR/proximity/
vezi și http://www.w3.org/2009/dap/
![Page 111: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/111.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Până la urmă, ce înseamnă HTML5?
![Page 112: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/112.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
“HTML5 should not be considered as a whole. You should cherry-pick the technology
that suits the solution to your problem.”Remy Sharp
![Page 113: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/113.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 114: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/114.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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 115: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/115.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
HTML5
grafica 2D și/sau 3D
<canvas> în contextul 2D raster<canvas> 3D (WebGL)
conținut grafic scalabil – SVG
![Page 116: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/116.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
HTML5
multimedia
<audio> (MP3, OGG)<video> (H.264, OGG, WebM)
API-uri de procesare a sunetuluicomunicații în timp-real – WebRTC
![Page 117: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/117.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
HTML5
acces la dispozitiv
drag & droporientationgeolocation
acces la camera WebnotificăriFile API
HTML5 în contextul TV + industriei auto
![Page 118: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/118.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
HTML5
offline & storage
Web Storage (localStorage & Session Storage)baze de date la nivel de client – e.g., indexedDB
caching
![Page 119: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/119.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
HTML5
connectivity & real-time
mesaje vehiculate între documentetransfer asincron via XMLHttpRequest – nivelul 2
WebSocketevenimente recepționate de la server (server-side events)
![Page 120: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/120.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
HTML5
asigurarea performanței
Web Workersmanagementul istoricului navigării
RequestAnimationFrameînglobarea datelor direct în URI
controlul disponibilității conexiunii la rețeaetc.
![Page 121: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/121.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura clientului Web actual(conform Jeff Jaffe)
![Page 122: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5](https://reader034.vdocuments.us/reader034/viewer/2022050808/5552c0cbb4c90581158b474d/html5/thumbnails/122.jpg)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
episodul viitor: performanța aplicațiilor Web la nivel de client