html5读书笔记

book&code：http://www.minkbooks.com/ 

第8章-拖放API

1、7种新的事件：为了得到预期效果，需要停止默认行为

----src--------

dragstart

drag

dragend

---dest------

dragenter

dragover

drop

dragleave

2、拖放操作

drop = document.getElementById('dropbox');
drop.addEventListener('dragenter', function(e){ e.preventDefault(); });//大多数元素不支持投放操作，为了在投放框中支持这个操作必须阻止默认行为
drop.addEventListener('dragover', function(e){ e.preventDefault(); });
drop.addEventListener('drop', dropped);
 
function dragged(e){
  var code = '<img src="' + source1.getAttribute('src') + '">';
  e.dataTransfer.setData('Text', code);//保存拖放操作的信息
}
function dropped(e){
  e.preventDefault();
  drop.innerHTML = e.dataTransfer.getData('Text');
}

3、dataTransfer

setData(type,data)：发送到数据和类型，如text/plain、text/html等

getData(type)

clearData() 

setDragImage(elem,x,y)：浏览器创建的默认缩略图替换为自定义图像，并设定鼠标位置

----属性-----

types

files：数组，返回被拖动到文件

dropEffect：当前操作类型，none、copy、link、move

effectAllowed

function dropped(e){
  e.preventDefault();
  var files = e.dataTransfer.files;
  var list = '';
  for(var f = 0; f < files.length; f++){
    list += 'File: ' + files[f].name + ' ' + files[f].size + '<br>';
  }
  drop.innerHTML = list;
}

第9章-地理位置API

1、提供了3个具体的方法

getCurrentPosition(location,error,configuration)

watchPosition(location,error,configuration)：前者是一次性操作，该方法在位置变化时，自动提供新的数据，知道用clearWatch取消。

clearWatch(id)

2、第一，必须在移动设备上测试多数代码才能确切了解真实情况下的执行情况（dev.w3.org/geo/api/test-suite/,使用该API测试套件）；第二，必须对这个API的使用负责，GPS及其它定位要消耗大量资源，稍不注意设备电池会很快耗尽，其只有在严格必须的时候，才将enableHighAccuracy属性设置为true，不要滥用。

3 、Google Map API，code.google.com/apis/maps

第10章-Web存储API

1、提供2种机制存储数据

sessionStorage：单窗口使用，关闭后消失

localStorage：存储永久数据，同一应用程序可以共享。HTML5规范建议浏览器厂商为每个来源至少保留5MB空间。

2、方法

setItem(key,value)

getItem(key)：属性.或[]获取数据值

key(index)

removeItem(key)

clear()

3、属性

length：存储空间数据条数

4、事件

storage：存储空间发生变化时触发该事件（localstorage共享）

 第11章-IndexedDB API

1、用于存储大量结构化数据，作为底层API开发的，目的是支持更广泛的用途，允许开发人员进一步开发，它是最强大的API，也是最复杂的API。

createObjectStore(name,keyPath,autoIncrement)：keyPath声明对象公共索引

objectStore(name)：事务来打开一个对象库

deleteObjectStore(name)

2、创建数据库

if(window.webkitIndexedDB){//针对特定浏览器引擎属性的检测
  	window.indexedDB = window.webkitIndexedDB;
  	window.IDBTransaction = window.webkitIDBTransaction;
  	window.IDBKeyRange = window.webkitIDBKeyRange;
  	window.IDBCursor = window.webkitIDBCursor;
  }else if(window.mozIndexDB){
  	window.indexedDB = window.mozIndexedDB;
  }
  var request = indexedDB.open('mydatabase');
  request.addEventListener('error', showerror);
  request.addEventListener('success', start);
  request.addEventListener('upgradeneeded', createdb);

function showerror(e){
  alert('Error: ' + e.code + ' ' + e.message);
}
function start(e){
  db = e.result || e.target.result;//有些浏览器通过事件发送结果对象、有些通过触发事件的元素
  //最终规范确定后，只需要使用其中一个
  if(db.version == ''){//检测并设置版本，方便数据的日后迁移
  	var request = db.setVersion('1.0')
  	request.addEventListener('error', showerror, false);
  	request.addEventListener('success', createdb, false);
  }
}
function createdb(e){
  var mystore = db.createObjectStore('movies', {keyPath: 'id'});//创建对象库时创建索引
  mystore.createIndex('SearchYear', 'date', {unique: false});//使用方法分配一个索引
}