CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
⁂
programare Web
API-uri JavaScript în contextul HTML5

“You are never too old to set another goal
or to dream a new dream.”
C.S. Lewis

Încărcarea & redarea documentelor
suplimentar față de obiectul Document,
browser-ul Web pune la dispoziție Window
https://developer.mozilla.org/Web/API/Window

obiectul Window oferă acces la mediul de redare
proprietăți importante:
window self top parent opener frames
document location navigator
history undoManager

proprietăți importante:
applicationCache
onNumeEveniment
(stabilirea de funcții pentru tratarea evenimentelor)
exemple: onplay ondrag onprogress etc.

metode folositoare:
open() close() stop()
focus() blur()
alert() confirm() prompt()
print()
showModalDialog()

Control asupra cache-ului navigatorului Web
ApplicationCache
detalii la http://www.w3.org/TR/html5/browsers.html#offline

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

ApplicationCache
operații asupra cache-ului: update() abort() swapCache()
starea cache-ului este furnizată de atributul status

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.

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/

Specificarea contoarelor de timp
WindowTimers
setTimeout() clearTimeout()
setInterval() clearInterval()
http://www.w3.org/TR/html5/webappapis.html#timers

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

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

interface NavigatorID {
readonly attribute DOMString appName;
readonly attribute DOMString appVersion;
readonly attribute DOMString platform;
readonly attribute DOMString product; // întoarce "Gecko"
readonly attribute DOMString userAgent;
};

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

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ă

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

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

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

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

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

Drag & drop
datele de transferat vor fi stocate
de un obiect DataTransfer
se permit diverse operații:
copiere (copy copyLink)
mutare (move linkMove),
realizarea unei legături (link) etc.

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

Drag & drop
o soluție alternativă:
ținta operației drop poate trata
evenimentele dragenter și, eventual, dragover
pentru a oferi un feedback vizual utilizatorului

Drag & drop
evenimente ce pot fi tratate:
drop
dragenter
dragover
dragend

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

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

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.

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

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

Există alte specificații/inițiative de interes?

WebSocket API
definește un API abstract pentru transmiterea de date
pe baza protocolului de transfer WebSocket – RFC 6455
succesor al abordării Comet (Reverse Ajax)

WebSocket API
detalii disponibile în specificația HTML5 Living Standard
(14 decembrie 2015)
https://html.spec.whatwg.org/multipage/comms.html#network

[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 conexiunii
const 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 tratare
attribute EventHandler onmessage; // a evenimentelor
attribute EventHandler onerror; // privitoare la comunicarea
attribute EventHandler onclose; // prin rețea
readonly attribute DOMString protocol;
void send (in (DOMString or Blob or ArrayBuffer) data); // trimite date
void close (optional unsigned short code, optional DOMString reason);
// închide conexiunea
}

WebSocket API
transferul datelor se realizează
în regim full duplex (bidirecțional),
folosind un singur socket
se recurge la schemele URI ws: și wss:

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

// 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ă

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

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),…

WebSocket API
navigatorul poate fi considerat platformă de dezvoltare
a aplicațiilor Internet
oferă suport pentru diverse paradigme de comunicare
via protocoalele Internet:
RPC (Remote Procedure Call)
+
Pub/Sub (Publish/Subscribe)

WebSocket API
de studiat WAMP – Web Application Messaging Protocol
http://wamp.ws/
exemple de instrumente software folositoare:
Autobahn.js – client WAMP
crossbar.io – router WAMP

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

EventSource API (Server-Send Events)
mecanism standardizat de transmitere
a unui flux continuu de date de la server spre client
(push events)
tratarea recepționării datelor provenite de la server
se realizează via evenimente DOM

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

// 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…");
}
};

Web Messaging
oferă API-uri pentru realizarea transferului de mesaje
între diverse contexte de navigare

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

Web Messaging
mesajele pot proveni de la server, via socket-uri Web
sau de la alte documente via canale de comunicație
documentele HTML5 pot transmite date unul altuia,
chiar dacă aparțin unor domenii Internet diferite

Web Messaging
datele privind evenimentul de recepționare
a unui mesaj sunt specificate de interfața MessageEvent
transmiterea unui mesaj via metoda postMessage ()

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

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

un exemplu succint:
http://tutorials.jenkov.com/html5/messaging.html

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

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

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

Web Workers
un worker – desemnat de interfața Worker –
prezintă un domeniu global de execuție
specificat de interfața WorkerGlobalScope

interface WorkerGlobalScope : EventTarget {
readonly attribute WorkerGlobalScope self;
readonly attribute WorkerLocation location; // originea worker-ului
readonly attribute WorkerNavigator navigator;
void importScripts(DOMString... urls);
void close ();
// tratarea evenimentelor
attribute 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)

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

[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)

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).”

Web Workers
service worker
lucră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

Web Workers
un worker poate importa programe și biblioteci
via importScripts (adreseWeb)
de exemplu, se poate interacționa cu navigatorul Web
identificat prin interfața WorkerNavigator

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/

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

Web Storage
oferă mecanisme de stocare (persistentă) a datelor
la nivel de client (browser)
sub forma de perechi cheie—valoare

Web Storage
recomandare a Consorțiului Web (noiembrie 2015)
www.w3.org/TR/webstorage/

Web Storage
interfața Storage oferă acces la o listă de perechi (itemi)
de forma cheie—valoare

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 ();
}

Web Storage
maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage

Web Storage
stocare nepersistentă
(suport pentru sesiuni)

Web Storage
alternativă la cookie-uri

<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);

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)

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)

(în loc de) pauză

Indexed Database API
suport de stocare de date la nivel obiectual
via un API asincron, inclusiv pentru WebWorker
recomandare a Consorțiului Web (ianuarie 2015)
http://www.w3.org/TR/IndexedDB/

obiectele de stocare compun baze de date
identificate prin nume
fiecare bază de date are asociată o versiune (număr >= 0)

interface IDBDatabase : EventTarget {
readonly attribute DOMString name;
readonly attribute unsigned long version;
readonly attribute DOMStringList objectStoreNames;
IDBObjectStore createObjectStore (DOMString name, // stocare
optional 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ții
attribute EventHandler onerror; // tratează posibile erori
attribute EventHandler onversionchange; // tratează actualizările
};
interfață modelând o conexiune la baza de date,
rezultând o tranzacție

interface IDBDatabase : EventTarget {
readonly attribute unsigned long version;
readonly attribute DOMStringList objectStoreNames;
IDBObjectStore createObjectStore (DOMString name, // stocare
optional 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ții
attribute EventHandler onerror; // tratează posibile erori
attribute EventHandler onversionchange; // tratează actualizările
};
var db = indexedDBSync.open ('Agenda', 1,
function (tranz, versVeche) {
tranz.db.createObjectStore ('Adrese',
{ keyPath: 'id', autoIncrement: true } ); });

datele sunt indexate, în sensul că fiecare înregistrare
posedă o cheie unică de tip Number, String, Date ori Array
(conform specificației ECMAScript)

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 „.”)

interface IDBObjectStore { // specifică maniera de stocare
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);
};

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.
};
metode importante specificate de interfața IDBObjectStore:
get () put () add () delete ()
openCursor ()
createIndex () index () deleteIndex ()
clear () count ()

accesul la înregistrări se poate realiza și via indecși
specificați de interfața IDBIndex

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

interface IDBTransaction : EventTarget {
// modul de efectuare a tranzacției: readonly, readwrite, versionchange
readonly attribute IDBTransactionMode mode;
readonly attribute IDBDatabase db;
readonly attribute DOMError error; // include eroarea apărută
IDBObjectStore objectStore (DOMString name);
void abort ();
attribute EventHandler onabort;
attribute EventHandler oncomplete;
};

interface IDBTransaction : EventTarget {
// modul de efectuare a tranzacției: readonly, readwrite, versionchange
readonly attribute IDBTransactionMode mode;
readonly attribute IDBDatabase db;
readonly attribute DOMError error; // include eroarea apărută
IDBObjectStore objectStore (DOMString name);
void abort ();
attribute EventHandler onabort;
attribute EventHandler oncomplete;
};
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'

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

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 ();
};

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

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/

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/

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

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

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

Privire de ansamblu
asupra stocării la nivel de client
Web Storage API: localStorage + sessionStorage
indexedDB
Web SQL – specificație abandonată
Application Cache
File APIs
cookie-uri clasice

Web Notifications
alertarea utilizatorului în afara contextului paginii Web
asupra apariției unui eveniment
recomandare a Consorțiului Web (octombrie 2015)
http://www.w3.org/TR/notifications/

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 Visibility
determinarea stării curente de vizibilitate a unei pagini
http://www.w3.org/TR/page-visibility/

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

Geolocation API
determinarea locației geografice a dispozitivului
http://www.w3.org/TR/geolocation-API/

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

Geolocation API
de studiat și experimentat:
http://diveintohtml5.info/geolocation.html
https://developer.mozilla.org/docs/WebAPI/Using_geolocation
http://html5demos.com/geo

DeviceOrientation Event Specification
tratarea evenimentelor
privind modificarea orientării și mișcarea dispozitivului
în lucru la Consorțiul Web (decembrie 2011)
http://www.w3.org/TR/orientation-event/

date oferite de giroscop, accelerometru, busolă
pe baza evenimentelor
deviceorientation, devicemotion, compassneedscalibration

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/

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

animațiile pot fi realizate:
declarativ
(e.g., via CSS sau elementul <animate> oferit de SVG)
ori
programatic
(implementate de un program JavaScript)

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

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ă

metode noi specificate de interfața Window:
void cancelAnimationFrame (long handler)
anulează o cerere anterioară de actualizare a animației

resurse adiționale:
http://creativejs.com/resources/requestanimationframe/
developer.mozilla.org/Web/API/window.requestAnimationFrame

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/

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/

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

implementări curente
specifice fiecărui navigator Web
http://caniuse.com/#feat=stream

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)

WebRTC
API de interes:
RTCPeerConnection
oferă suport și pentru controlul sesiunii de transfer al
datelor, plus trimiterea de mesaje speciale (signaling)
transmiterea efectivă poate adopta
un anumit protocol bidirecțional – HTTP, SIP, XMPP,…

diverse maniere de comunicare specificate de WebRTC
detalii la www.webrtc.org

WebRTC
API de interes:
RTCDataChannel
permite interschimb eficient, în stilul peer-to-peer,
de date arbitrare, nu doar audio și/sau video

http://iswebrtcreadyyet.com

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/

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

Web Audio API
procesarea și sintetizarea sunetului la nivel înalt
W3C Working Draft (octombrie 2013)
http://www.w3.org/TR/webaudio/

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/

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/

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/

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/

Până la urmă, ce înseamnă HTML5?

“HTML5 should not be considered as a whole.
You should cherry-pick the technology
that suits the solution to your problem.”
Remy Sharp

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-

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

HTML5
grafica 2D și/sau 3D
<canvas> în contextul 2D raster
<canvas> 3D (WebGL)
conținut grafic scalabil – SVG

HTML5
multimedia
<audio> (MP3, OGG,…)
<video> (H.264, OGG, WebM)
API-uri de procesare a sunetului
comunicații în timp-real – WebRTC

HTML5
acces la dispozitiv
drag & drop
orientation
geolocation
acces la camera Web
notificări
File API
contexte: TV, industria auto, console de jocuri

HTML5
offline & storage
Web Storage (localStorage & Session Storage)
baze de date la nivel de client: indexedDB
caching

HTML5
connectivity & real-time
mesaje vehiculate între documente
transfer asincron via XMLHttpRequest
transfer de date via WebSocket
evenimente recepționate de la server (server-side events)

HTML5
asigurarea performanței
Web Workers
managementul istoricului navigării
RequestAnimationFrame
înglobarea datelor direct în URI
controlul disponibilității conexiunii la rețea
etc.

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/

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/

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/



❄
❄
❄
❄
❄
❄

episodul viitor: vacanța de iarnă ☃
❄

CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5 (20)

More from Sabin Buraga (20)

CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5