Detalii despre cele mai importante API-uri JavaScript standardizate specifice HTML5 pe care le oferă navigatoarele Web actuale, inclusiv diverse exemple. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
5. Dr.SabinBuragawww.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.
8. Dr.SabinBuragawww.purl.org/net/busaco
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 cache
index.html
cache.html
html5.css
figura.jpg
img/sigla.png
http://www.undeva.info/stiluri.css
# preia conținutul de pe rețea, dacă e posibil
NETWORK:
stiri.html
# conținut alternativ, dacă suntem offline
FALLBACK:
/fallback.html
10. Dr.SabinBuragawww.purl.org/net/busaco
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.
11. Dr.SabinBuragawww.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://appcache.offline.technology/
13. Dr.SabinBuragawww.purl.org/net/busaco
Specificarea contoarelor de timp
WindowTimers
“This API does not guarantee that timers will run exactly
on schedule. Delays due to CPU load, other tasks, etc.
are to be expected.” (W3C, 2014)
pentru alte detalii și exemple, a se parcurge și
https://developer.mozilla.org/Web/API/WindowTimers
14. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
interfața Navigator având sub-interfețele:
NavigatorID – identitatea browser-ului
NavigatorLanguage – preferințe lingvistice ale clientului
NavigatorOnline – starea online/offline a navigatorului
NavigatorContentUtils – manipularea conținuturilor
NavigatorStorageUtils – parametri privind stocarea locală
NavigatorPlugins – managementul plugin-urilor
www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities
17. Dr.SabinBuragawww.purl.org/net/busaco
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/necunoscute
vor fi compatibile cu cea curentă
18. Dr.SabinBuragawww.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 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
19. Dr.SabinBuragawww.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 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
21. Dr.SabinBuragawww.purl.org/net/busaco
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
22. Dr.SabinBuragawww.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
24. Dr.SabinBuragawww.purl.org/net/busaco
Drag & drop
destinatarul operațiunii drag & drop va avea definit
atributul 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 caractere
sau file:image/jpeg pentru un fișier JPEG
27. Dr.SabinBuragawww.purl.org/net/busaco
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
28. Dr.SabinBuragawww.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
http://www.w3.org/TR/html5/editing.html
29. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de bază:
editing API
execuția de script-uri asupra selecției curente
sau la poziția curentă a cursorului de text
metode:
execCommand()
queryCommandEnabled() queryCommandState()
queryCommandSupported() etc.
30. Dr.SabinBuragawww.purl.org/net/busaco
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 evenimentelor
suport pentru scripting în alte limbaje – e.g., SVG
31. Dr.SabinBuragawww.purl.org/net/busaco
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;
};
37. Dr.SabinBuragawww.purl.org/net/busaco
// creăm un socket Web
var sock = new WebSocket ("ws://www.undeva.info/");
// asociem funcțiile de tratare a evenimentelor
sock.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 date
sock.send ("Salutări hibernale! :)");
// am închis conexiunea
sock.close (); maniera generală de
transfer al datelor
38. Dr.SabinBuragawww.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:19740/updates');
socket.onopen = function () {
setInterval (function() {
if (socket.bufferedAmount == 0)
socket.send (oferaDate ());
}, 50);
};
oferă numărul de octeți
ce n-au fost transmiși încă
39. Dr.SabinBuragawww.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
40. Dr.SabinBuragawww.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),…
46. Dr.SabinBuragawww.purl.org/net/busaco
// 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…");
}
};
55. Dr.SabinBuragawww.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
56. Dr.SabinBuragawww.purl.org/net/busaco
Web Workers
se oferă un API pentru instanțierea și manipularea
programelor 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
60. Dr.SabinBuragawww.purl.org/net/busaco
[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)
61. Dr.SabinBuragawww.purl.org/net/busaco
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).”
64. Dr.SabinBuragawww.purl.org/net/busaco
var numar = 1; // worker.js – determină numere prime ad infinitum
search: while (true) {
numar++;
for (var i = 2; i <= Math.sqrt (numar); i++)
if (numar % i == 0)
continue search;
// a fost determinat un număr prim
postMessage (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 JavaScript
prog.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/
73. Dr.SabinBuragawww.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);
82. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
de asemenea, o înregistrare (record) are o valoare
corespunzătoare unui tip de date ECMAScript
valoarea propriu-zisă e obținută prin evaluarea
așa-numitei căi asociate cheii (key path)
(uzual, un șir de caractere ori șiruri delimitate de „.”)
83. Dr.SabinBuragawww.purl.org/net/busaco
interface IDBObjectStore { // specifică maniera de stocare
readonly 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 cheile
IDBRequest 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);
};
84. Dr.SabinBuragawww.purl.org/net/busaco
interface IDBRequest : EventTarget { // modelează o cerere
readonly attribute any result; // rezultatul interogării emise
readonly 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 ()
86. Dr.SabinBuragawww.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
90. Dr.SabinBuragawww.purl.org/net/busaco
interface IDBCursor {
readonly attribute (IDBObjectStore or IDBIndex) source; // sursa datelor
readonly attribute IDBCursorDirection direction; // direcția de iterare
readonly attribute any key; // cheia
readonly attribute any primaryKey; // cheia primară
IDBRequest update (any value); // actualizarea valorilor
void advance ([EnforceRange] unsigned long count);
void continue (optional any key);
IDBRequest delete ();
};
91. Dr.SabinBuragawww.purl.org/net/busaco
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
92. Dr.SabinBuragawww.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/IndexedDB
exemplu în contextul WebGL:
www.webappers.com/2014/01/02/how-to-use-indexeddb-to-handle-3d-webgl-assets/
95. Dr.SabinBuragawww.purl.org/net/busaco
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
96. Dr.SabinBuragawww.purl.org/net/busaco
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 stare
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
// rezultatul obținut: File sau Blob
readonly 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;
};
97. Dr.SabinBuragawww.purl.org/net/busaco
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
100. Dr.SabinBuragawww.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); }
}
);
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
104. Dr.SabinBuragawww.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
108. Dr.SabinBuragawww.purl.org/net/busaco
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/
118. Dr.SabinBuragawww.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 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 */ };
…
}
128. Dr.SabinBuragawww.purl.org/net/busaco
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/
129. Dr.SabinBuragawww.purl.org/net/busaco
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/
130. Dr.SabinBuragawww.purl.org/net/busaco
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/
131. Dr.SabinBuragawww.purl.org/net/busaco
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/
134. Dr.SabinBuragawww.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 SVG
microdate – vezi inițiativa schema.org
conținut editabil
atribute specifice aplicațiilor: data-
135. Dr.SabinBuragawww.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
143. Dr.SabinBuragawww.purl.org/net/busaco
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/
144. Dr.SabinBuragawww.purl.org/net/busaco
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/