Martin Kruliš by Martin Kruliš (v1.0)1

 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) by Martin Kruliš (v1.0)2

 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 by Martin Kruliš (v1.0)3

 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 by Martin Kruliš (v1.0)4

 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() by Martin Kruliš (v1.0)5 Example 1

 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 by Martin Kruliš (v1.0)6

 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 by Martin Kruliš (v1.0)7

 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 by Martin Kruliš (v1.0)8

 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 by Martin Kruliš (v1.0)9 Example 2

 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 ◦ 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 by Martin Kruliš (v1.0)10

 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 by Martin Kruliš (v1.0)11

 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 by Martin Kruliš (v1.0)12

 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() {... }; by Martin Kruliš (v1.0)13 Create/upgrade the structure Open existing DB

 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(); } }; by Martin Kruliš (v1.0)14 When everything is done A way to iterate over selection of data Example 3

 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 by Martin Kruliš (v1.0)15 Example 4

 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) by Martin Kruliš (v1.0)16

by Martin Kruliš (v1.0)17