1. Martin Kruliš 14. 5. 2015 by Martin Kruliš (v1.0)1

2.  ArrayBuffer ◦ Represents generic binary data of fixed length var buf = new ArrayBuffer(64); ◦ slice() – create a copy of (sub)buffer  ArrayBufferView ◦ Creates a specific view for an array buffer  Multiple views can be created over one array ◦ Many subclasses: Int8Array, Uint32Array, … ◦ Getter/setter handles the array elements in the correct format (convert them to/from JS number) 14. 5. 2015 by Martin Kruliš (v1.0)2

3.  DataView ◦ Another way how to view data in array buffer ◦ Low level operations: getInt8(), setFloat32(), …  Supports both little and big endian  Blob ◦ Represents file-like object of immutable raw data ◦ Constructor gets list (array) of array buffers, array buffer views, blobs, or strings ◦ Also holds data properties  MIME type 14. 5. 2015 by Martin Kruliš (v1.0)3

4.  File Interface ◦ Extension of the Blob interface  Attributes: name, size, type, lastModified ◦ Can be constructed explicitly from binary data ◦ Real files can be accessed through input element  The input implements FileList interface (array of files) document.getElementById("fileSelect").files[0]...  JS can access only those files the user have selected  Input element multiple attribute 14. 5. 2015 by Martin Kruliš (v1.0)4

5.  Reading Files ◦ FileReader interface  readAs...(blob) – starts async. read  Read as ArrayBuffer, Text, or DataURL  readyState ( EMPTY, LOADING, DONE )  onload, onprogress, onerror, onloadend, …  result (either ArrayBuffer or string ), error  abort() 14. 5. 2015 by Martin Kruliš (v1.0)5 Example 1

6.  Drag and Drop ◦ Files can be dragged into the browser mydiv.ondrop = function(e) { e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files;... }  Saving Files ◦ Tricky, some nonstandard APIs exist (e.g., saveAs() ) ◦ Data URL can be used in window.open() or  Not a very neat way, but it works 14. 5. 2015 by Martin Kruliš (v1.0)6

7.  File API: Directories and System ◦ API for storing files at client side  Two types: temporal and persistent  Intended for situations when other types of data storage (e.g., web storage) are inappropriate  Multimedia files, persistent uploads, … ◦ Support for directory structure  Both traversing and manipulation ◦ File reader and analogous file writer APIs ◦ Implemented in webkit only, specification rejected  Firefox OS implements its own Device Storage API 14. 5. 2015 by Martin Kruliš (v1.0)7

8.  Web Storage ◦ Simple storage for keeping persistent data ◦ Similar to cookies (storing key-value strings), but intended for client-side scripting only ◦ Two storage objects with the same API  Local storage – per web site, persistent  Session storage – per window, deleted on close ◦ Strict quotas  ~ 5MB per site in most browsers  Can be configured 14. 5. 2015 by Martin Kruliš (v1.0)8

9.  API ◦ window.localStorage and window.sessionStorage  getItem(key), setItem(key, val)  length, key(idx)  removeItem(key), clear() ◦ Window storage event  Fired in other windows when one window changes the local storage  Event object contains information about the change  key, oldValue, newValue  url, storageArea 14. 5. 2015 by Martin Kruliš (v1.0)9 Example 2

10.  Web SQL Database API ◦ Specialized SQL database for client-side scripts  Asynchronous API with JS data bindings  Transactional support  SQL dialect, which is supported by SQLite 3.6.19 ◦ Web browsers should apply some form of quotas  Prompt the user, when the quotas are to be exceeded ◦ Deprecated  Not implemented by Firefox and MSIE  Only SQLite implementation existed 14. 5. 2015 by Martin Kruliš (v1.0)10

11.  Web Database Indexed Storage ◦ Alternative to Web SQL (with different functionality)  Object-oriented database (not relational)  Simple queries and cursors are used instead of SQL ◦ Database stores key-value pairs  Values may be complex objects  Keys may be properties of value objects  Indexes may be built on any object properties ◦ Transactional model  All operations (objects, …) are tied to a transaction  Guarantees concurrent-safe access to data 14. 5. 2015 by Martin Kruliš (v1.0)11

12.  Application Interface ◦ Mostly asynchronous (like AJAX requests)  Most operation require callback  Callbacks are invoked when result becomes available  Request objects representing pending operations  Dom events onsuccess, onerror ◦ Database structure  Database is a set of object stores identified by name and version  Databases follow same-origin data isolation policy  Object store – a key-value set sorted by keys  Additional indexes may be applied on object store 14. 5. 2015 by Martin Kruliš (v1.0)12

13.  Opening Database var db = null; var request = indexedDB.open("db_name"); request.onupgradeneeded = function() { db = request.result; db.createObjectStore("store_name", {... }); }; request.onsuccess = function() { db = this.result; showData(); }; request.onerror = function() {... }; 14. 5. 2015 by Martin Kruliš (v1.0)13 Create/upgrade the structure Open existing DB

14.  Data Manipulation var tx = db.transaction([stores], "readwrite"); var store = tx.objectStore(storeName); tx.oncomplete = function(e) {... } store.put(data); var range = IDBKeyRange.lowerBound(0); store.openCursor(range).onsuccess = function(e) { var cursor = e.target.result; if (cursor) {... cursor.continue(); } }; 14. 5. 2015 by Martin Kruliš (v1.0)14 When everything is done A way to iterate over selection of data Example 3

15.  Web Workers ◦ Worker represents a separate computing thread  The code of the worker is sandboxed  API for bidirectional communication with main thread  Workers may spawn sub-workers  Some APIs have synchronous counterparts for workers ◦ API  Worker(url) – constructing function  Worker.postMessage(msg) – send message to the peer  Worker.onmessage – receiving message event handler  Worker.terminate() – kill the worker thread 14. 5. 2015 by Martin Kruliš (v1.0)15 Example 4

16.  WebCL ◦ JavaScript binding for OpenCL API  Allows access to multicore CPUs and GPUs  Implemented in window.WebCL interface ◦ Currently no browser natively implements WebCL  Plugins exist for majority of browsers ◦ Important issues  OpenCL device/host synchronization is often performed by blocking operations  Callbacks should be used in WebCL instead  Explicit object releasing is required due to dynamic nature of JS (managed memory and garbage collector) 14. 5. 2015 by Martin Kruliš (v1.0)16

17. 14. 5. 2015 by Martin Kruliš (v1.0)17