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

Slides:



Advertisements
Similar presentations
JavaScript and AJAX Jonathan Foss University of Warwick
Advertisements

JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
Introduction to HTML5 Programming donghao. HTML5 is the New HTML Standard New Elements, Attributes. Full CSS3 Support Video and Audio 2D/3D Graphics Local.
The Web Warrior Guide to Web Design Technologies
Martin Kruliš by Martin Kruliš (v1.0)1.
HTML5 JavaScript Storage for Structured Data Andy Gup, Esri
Fast Track to ColdFusion 9. Getting Started with ColdFusion Understanding Dynamic Web Pages ColdFusion Benchmark Introducing the ColdFusion Language Introducing.
Bartosz Kowalski Software Developer CERN. Presentation outline -HTML : introduction and history -HTML5 : -History and philosophy -New features -Structure.
Working With Data on Titanium Local Data Remote Data Titanium Data Options:
ASP.NET 2.0 Chapter 6 Securing the ASP.NET Application.
Chapter 11 ASP.NET JavaScript, Third Edition. 2 Objectives Learn about client/server architecture Study server-side scripting Create ASP.NET applications.
Canvas, SVG, Workers Doncho Minkov Telerik Corporation
Chapter 25 Utilizing Web Storage.
Sen Wang 11/17/2011.  RFC  “Form-based File Upload in HTML” NOV 1995 
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
CSCI 6962: Server-side Design and Programming Course Introduction and Overview.
Ajax (Asynchronous JavaScript and XML). AJAX  Enable asynchronous communication between a web client and a server.  A client is not blocked when an.
Architecture Of ASP.NET. What is ASP?  Server-side scripting technology.  Files containing HTML and scripting code.  Access via HTTP requests.  Scripting.
JavaScript & jQuery the missing manual Chapter 11
Ajax Application Errors Developer Oversight and Tracking Errors Presented by Eric Pascarello.
Central Arizona Phoenix LTER Center for Environmental Studies Arizona State University Data Entry Applications Peter McCartney (CAP) RDIFS Training Workshop.
WEEK 3 AND 4 USING CLIENT-SIDE SCRIPTS TO ENHANCE WEB APPLICATIONS.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
Meet with the AppEngine Márk Gergely eu.edge. What is AppEngine? It’s a tool, that lets you run your web applications on Google's infrastructure. –Google's.
Chapter 8 Cookies And Security JavaScript, Third Edition.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
CHAP 6. USING THE HTML5 WEB STORAGE API.  Cookie - Are a built-in way of sending text values back and forth from server to client.  Servers can use.
Using Client-Side Scripts to Enhance Web Applications 1.
What’s new in Kentico CMS 5.0 Michal Neuwirth Product Manager Kentico Software.
STATE MANAGEMENT.  Web Applications are based on stateless HTTP protocol which does not retain any information about user requests  The concept of state.
Term 2, 2011 Week 1. CONTENTS Problem-solving methodology Programming and scripting languages – Programming languages Programming languages – Scripting.
Database Systems Design, Implementation, and Management Coronel | Morris 11e ©2015 Cengage Learning. All Rights Reserved. May not be scanned, copied or.
Vitaliy Tarnavskyy Jun 26, 2013 Using Web workers in Javascript.
David Lawrence 7/8/091Intro. to PHP -- David Lawrence.
1 Java Servlets l Servlets : programs that run within the context of a server, analogous to applets that run within the context of a browser. l Used to.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
© FPT SOFTWARE – TRAINING MATERIAL – Internal use 04e-BM/NS/HDCV/FSOFT v2/3 JSP Application Models.
Martin Kruliš by Martin Kruliš (v1.1)1.
CS2550 Dr. Brian Durney. SOURCES  JavaScript: The Definitive Guide, by David Flanagan  Dive into HTML5, by Mark Pilgrim
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
JavaScript Overview Developer Essentials How to Code Language Constructs The DOM concept- API, (use W3C model) Objects –properties Methods Events Applications;
 Web pages originally static  Page is delivered exactly as stored on server  Same information displayed for all users, from all contexts  Dynamic.
Creating Animations, Working with Graphics, and Accessing Data Lesson 9.
Rich Internet Applications 2. Core JavaScript. The importance of JavaScript Many choices open to the developer for server-side Can choose server technology.
Rich Internet Applications 9. HTML 5 and RIAs. HTML 5 Standard currently under development by W3C Aims to improve the language with support for the latest.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
Reading ROOT files in (almost) any browser.  Use XMLHttpRequest JavaScript class to perform the HTTP HEAD and GET requests  This class is highly browser.
JQUERY AND AJAX
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
JavaScript and Ajax Week 10 Web site:
CHAPTER 9 File Storage Shared Preferences SQLite.
1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)
JQuery, JSON, AJAX. AJAX: Async JavaScript & XML In traditional Web coding, to get information from a database or a file on the server –make an HTML form.
Ext JS - Direct Bridging The Gap A DMSBT Presentation By Timothy Chandler.
Martin Kruliš by Martin Kruliš (v1.1)1.
Phonegap Bridge – Storage CIS 136 Building Mobile Apps 1.
National College of Science & Information Technology.
Development of Internet Applications HTML5 Ing. Jan Janoušek 7.
CIS 136 Building Mobile Apps
PHP / MySQL Introduction
HTML5 APIs for Data Handling and Processing
IOS SDK v1.0 with NAM 4.2.
Building responsive apps and sites with HTML5 web workers
CIS 136 Building Mobile Apps
HTML5 and Local Storage.
Chengyu Sun California State University, Los Angeles
Chengyu Sun California State University, Los Angeles
Web Application Development Using PHP
Presentation transcript:

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