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});//使用方法分配一个索引
}

 2、添加对象

var mytransaction = db.transaction(['movies'], "readwrite");//多个对象库生成事务，事务类型
var mystore = mytransaction.objectStore('movies');//获取一个对象库
var request = mystore.add({id: keyword, name: title, date: year});//添加对象
request.addEventListener('success', function(){ show(keyword) });

 3、显示对象

function show(keyword){
  var mytransaction = db.transaction(['movies']);//默认事务readonly
  var mystore = mytransaction.objectStore('movies');
  var request = mystore.get(keyword);
  request.addEventListener('success', showlist);
}
function showlist(e){
  var result = e.result || e.target.result;
  databox.innerHTML = '<div>' + result.id + ' - ' + result.name + ' - ' + result.date + '</div>';
}

 4、cursor显示对象：在事务中获取一组对象，openCursor（）打开游标

var mytransaction = db.transaction(['movies']);
var mystore = mytransaction.objectStore('movies');
var newcursor = mystore.openCursor();
newcursor.addEventListener('success', showlist);

function showlist(e){
  var cursor = e.result || e.target.result;
  if(cursor){
    databox.innerHTML += '<div>' + cursor.value.id + ' - ' + cursor.value.name + ' - ' + cursor.value.date + ' <input type="button" onclick="removeobject(\'' + cursor.value.id + '\')" value="remove"></div>';
    cursor.continue();//方法会再次触发success事件，整个函数反复执行，直至游标返回null
  }
}

 

var mytransaction = db.transaction(['movies']);
  var mystore = mytransaction.objectStore('movies');
  var myindex = mystore.index('SearchYear');
  var newcursor = myindex.openCursor(null, "prev");//第一个属性是对象范围，第二个属性是排序
//IDBCursor的属性NEXT、NEXT_NO_DUPLICATE、PREV、PREV_NO_DUPLICATE
  newcursor.addEventListener('success', showlist);

 5、删除数据

function removeobject(keyword){
  if(confirm('Are you sure?')){
    var mytransaction = db.transaction(['movies'], "readwrite");
    var mystore = mytransaction.objectStore('movies');
    var request = mystore.delete(keyword);
    request.addEventListener('success', show);
  }
}

 6、搜索数据

 only(value)：只返回关键字与value对应的对象

bound(lower,upper,lowerOpen,upperOpen)：创建一个范围，有开始值和结束值

lowerBound(value,open)：开放的范围，从value开始，到列表末尾

upperBound(value,open)：开放的范围，从列表开始，到value结束

var find = document.getElementById('year').value;
var mytransaction = db.transaction(['movies']);
var mystore = mytransaction.objectStore('movies');
var myindex = mystore.index('SearchYear');
var myrange = IDBKeyRange.only(find);
//var myrange = IDBKeyRange.lowerBound(find,true);
var newcursor = myindex.openCursor(myrange);
newcursor.addEventListener('success', showlist);