Your SlideShare is downloading. ×
0
@余军      1
Table of Contents1,DOM    1.1,HTML DOM    1.2,document2,HTML5    2.1,WHATWG与W3C    2.2,化简为繁    2.3,语义化标签    2.4,canvas    ...
1、 DOMHTML DOM 定义了访问和操作  HTML文档的标准方法。                    3
DOM的发展史 DOM Level 1                     1998 年 10 月 1 日 DOM Level 2 Core                2000 年 11 月 13 日 DOM Level 3 Core ...
1.1 HTML DOM               5
DOM树       6
HTML DOM 简介• 整个文档是一个文档节点(document)• 每个 HTML 标签是一个元素节点• 包含在 HTML 元素中的文本是文本节点• 每一个 HTML 属性是一个属性节点  (attributes)• 注释属于注释节点htt...
1.1.1 节点(Node Object)NodeType       Named Constant1              ELEMENT_NODE2              ATTRIBUTE_NODE3              T...
HTMLElement                                                  DOM Node                                                 DOM ...
DOM Node• 属性: nodeType, nodeName, parentNode,  childNodes, firstChild, nextSibling,  nodeValue, textContent,……• 方法: cloneN...
DOM Element• 属性:id, className, attributes• 方法: getAttribute(), setAttribute(),  removeAttribute (), hasAttribute (),  getE...
HTML Element• 属性: title , lang , tabIndex , style ,  onclick , itemProp , itemType ,  draggable , ……• 方法: click(),……      ...
1.2 documentDOM树的根节点是一个Document       对象                      13
document• 属性: URL,contentType,  documentElement,……• 方法: getElementsByTagName(),  getElementsByClassName (),getElementById ...
2、HTML 5           15
HTML起源• 1980年,蒂姆·伯纳斯-李为使世界各地的物  理学家能够方便的进行合作研究,创建了  使用于其系统的HTML。• 两个浏览器,IE,Netscape                       16
HTML的发展HTML 1.0                          1993年6月HTML 2.0                          1995年11月HTML 3.2                        ...
HTML基本结构<html>  <head>    <title></title>  </head>  <body>  <body></html>                          18
2.1 WHATWG与W3C• WHATWG:2004年6月,Web浏览器生产厂  商和一些相关团体形成的一个松散的、非  正式的协作组织,他们改进的目标是创建  Web 应用程序 Web applications 1.0• 2006年10月,...
2.2 化简为繁• 以浏览器原生能力替代复杂的JavaScript代码document.getElementById,document.getElementByName,document.getElem   entByTagName==》doc...
• 新的简化的DOCTYPE   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
2.3 语义化标签<header> <footer> <section> <article> <aside><figure> <figcaption> <nav><audio> <video>使代码更清晰,SEO,减少无意义的DIV元素的使  ...
未知元素• 所有浏览器都将未知元素渲染成 inline 的(display:inline ),• article,aside,details,figcaption,figure,  footer,header,hgroup,menu,nav,s...
2.4 canvas• 本质上是一个位图画布• 缺点:用canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。在动画,鼠标事件方面的处理会比较麻烦。• 优点:不需要将所绘制的图像中的每个图元当做对象存储,因此执行性能非常好。<canv...
APIvoid lineTo(x, y)//画直线ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(300,300);ctx.stroke();void rect(x, y, w, h)//画矩形ctx.re...
void fillText(text, x, y[, maxWidth]);   //文本ctx.textAlign = "center";ctx.textBaseline = "top";ctx.font = " 20px sans-seri...
void clearRect(x, y, w, h)       //清除ctx.clearRect(0, 0, 200, 200);void drawImage(image, dx, dy)           //图片ctx.drawIma...
void createLinearGradient(x0, y0, x1, y1) //线性渐变void createRadialGradient(x0, y0, r0, x1, y1, r1) //径向渐变void createPattern...
"butt", "round", "square“   "round", "bevel", "miter"   提示:只有当 lineJoin 属性为          lineCap                   lineJoin   ...
void quadraticCurveTo(cpx, cpy, x, y)              //二次贝塞尔曲线void bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)   //三次方贝塞尔曲线c...
State Stack    void save(); //push    void restore(); //popTransformations    void scale(x, y);      //按x,y的比例进行缩放    void...
2.5 Web StoragesessionStorage,localStorage       sessionStorage   localStorage数据会保存到存储它的窗口或标签页关闭      数据的生命期比窗口或浏览器的生命期长时(...
interface Storage {         length;         DOMString key(index);         DOMString getItem(key);         DOMString setIte...
2.6 WebSockets           HTML5 WebSockets是HTML5中最强大的通信功能,它定义了一个     全双工通信信道,仅通过Web上的一个Socket即可进行通信。     WebSockets不仅仅是对常规H...
服务器      消息             消息               消息轮询            浏览器            时间     50ms    100ms    150ms    200ms    50ms    ...
2.7 HTML5 Forms新增类型:tel,email,url,Search,range,number未来支持的一些类型:color,datetime,datetime-local(不含时区), time, date, week, mont...
• 表单验证• var valCheck = document.myForm.myInput.validity; //获取表单元素的  ValidityState对象,该对象包含了对所有八种验证状态的引用以及最终  的验证结果。• valChe...
4、tooLong  目的:避免输入值包含过多字符  用法:在表单控件上设置maxLength特性5、rangeUnderflow  目的:限制型控件的最小值。  用法:为表单控件设置min特性,并赋予允许的最小值。6、rangeOverflo...
验证反馈只要发生表单验证(不管是在提交表单时,还是直接调用checkValidity函数),所有未通过验证的表单都会接收到一个invalid事件。                                      39
2.8 音频和视频• <audio> <video>• 优点:原生支持,不使用插件• 缺点:1,受到HTTP跨源资源共享的限制;2,全屏视频无法通过脚本  控制;3,各浏览器支持的视频格式不一样;4,HTML无法实现数字  版权加密   ps:...
子元素• //type=video/mp4; codecs="vp8, vorbis" type有三部分内容,容器格式,  视频编解码器,音频编解码器• <source src=“” type=“”/>    //备用来源,浏览器可以对这些来源...
2.9 Geolocation• Location Based Service(LBS)• navigator.geolocaion.getCurrentPosition(                udpateLocation,//suc...
function updateLocation(position){   var coords = position.coords;   coords.latitude //纬度   coords.longitude //经度   coords...
function handleLocationError(error){       switch(){       case 0: //UNKNOWN_ERROR       case 1: //PERMISSION_DENIED      ...
2.10 Communication• 2.10.1 跨文档消息通信• 2.10.2 XMLHttpRequest Level 2                                  45
2.10.1 跨文档消息通信可以确保iframe,标签页,窗口间安全地进行跨源通信。window.postMessage(message //要发送的数据           , targetOrigin //消息传送的目的地         ...
2.10.2 XMLHttpRequest Level 2                 XMLHttpRequest                                  XMLHttpRequest Level 2* 只支持文...
interface XMLHttpRequest : XMLHttpRequestEventTarget {    readyState;    onreadystatechange;    // request    void open(me...
// response    readonly status;    //服务器返回的状态码,等于200表示一切正常。    readonly statusText; //服务器返回的状态文本。     XMLHttpRequestRespon...
interface XMLHttpRequestEventTarget:EventTarget { // event handlers    Function? onloadstart; //传输开始    Function? onprogre...
interface ProgressEvent : Event {    readonly attribute boolean lengthComputable;    readonly attribute unsigned long long...
使用FormData对象管理表单数据[Constructor,Constructor(HTMLFormElement form)]interface FormData {   void append(DOMString name, Blob v...
2.11 拖放已经存在的拖放操作?             53
•   事件流•   dragstart•   drag•   dragenter•   dragleave•   dragover•   drop•   dragend                          54
拖放事件流                                  中间元素                       旋转目标     拖动源                                  (不放置)     ...
传输和控制• DataTransfer对象interface DataTransfer{    attribute DOMString dropEffect;    attribute DOMString effectAllowed;    r...
dropEffect:      //设置或获取当前执行操作的类型effectAllowed: //允许操作的类型,各种类型视觉效果不一样items:           //返回所有项及其相关格式的列表setDragImage(image, ...
HTML5还包括•   Web Workers•   File API•   离线Web应用•   浏览器数据库•   微数据,微格式•   服务器发送事件•   custom data attribute•   ……             ...
附录检测技术1、检测全局对象是否拥有特定的属性,(navigator)2、创建一个元素,然后检测该元素的DOM对象是否特定的属性。   (canvas)3、创建一个元素,然后检测这个元素的DOM对象是否拥有特定的方法,   同时调用这个方法检查...
Upcoming SlideShare
Loading in...5
×

Html5培训内容

1,221

Published on

Published in: Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,221
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html5培训内容"

  1. 1. @余军 1
  2. 2. Table of Contents1,DOM 1.1,HTML DOM 1.2,document2,HTML5 2.1,WHATWG与W3C 2.2,化简为繁 2.3,语义化标签 2.4,canvas 2.5,Web Storage 2.6,WebSockets 2.7,HTML5 Forms 2.8,音频和视频 2.9,Geolocation 2.10,Communication 2.11,拖放 2
  3. 3. 1、 DOMHTML DOM 定义了访问和操作 HTML文档的标准方法。 3
  4. 4. DOM的发展史 DOM Level 1 1998 年 10 月 1 日 DOM Level 2 Core 2000 年 11 月 13 日 DOM Level 3 Core 2004 年 4 月 7 日http://www.w3school.com.cn/w3c/w3c_dom.asp 4
  5. 5. 1.1 HTML DOM 5
  6. 6. DOM树 6
  7. 7. HTML DOM 简介• 整个文档是一个文档节点(document)• 每个 HTML 标签是一个元素节点• 包含在 HTML 元素中的文本是文本节点• 每一个 HTML 属性是一个属性节点 (attributes)• 注释属于注释节点http://www.w3school.com.cn/htmldom/dom_nodes.asp 7
  8. 8. 1.1.1 节点(Node Object)NodeType Named Constant1 ELEMENT_NODE2 ATTRIBUTE_NODE3 TEXT_NODE4 CDATA_SECTION_NODE5 ENTITY_REFERENCE_NODE6 ENTITY_NODE7 PROCESSING_INSTRUCTION_NODE8 COMMENT_NODE9 DOCUMENT_NODE10 DOCUMENT_TYPE_NODE11 DOCUMENT_FRAGMENT_NODE12 NOTATION_NODE 8
  9. 9. HTMLElement DOM Node DOM Element HTMLElement ObjectHTMLHtmlElement HTMLHeadElement HTMLBodyElement …… http://www.w3schools.com/jsref/default.asp 9
  10. 10. DOM Node• 属性: nodeType, nodeName, parentNode, childNodes, firstChild, nextSibling, nodeValue, textContent,……• 方法: cloneNode(), appendChild(),…… 10
  11. 11. DOM Element• 属性:id, className, attributes• 方法: getAttribute(), setAttribute(), removeAttribute (), hasAttribute (), getElementsByTagName (), getElementsByClassName (), 11
  12. 12. HTML Element• 属性: title , lang , tabIndex , style , onclick , itemProp , itemType , draggable , ……• 方法: click(),…… 12
  13. 13. 1.2 documentDOM树的根节点是一个Document 对象 13
  14. 14. document• 属性: URL,contentType, documentElement,……• 方法: getElementsByTagName(), getElementsByClassName (),getElementById (),createElement (), createTextNode (),…… 14
  15. 15. 2、HTML 5 15
  16. 16. HTML起源• 1980年,蒂姆·伯纳斯-李为使世界各地的物 理学家能够方便的进行合作研究,创建了 使用于其系统的HTML。• 两个浏览器,IE,Netscape 16
  17. 17. HTML的发展HTML 1.0 1993年6月HTML 2.0 1995年11月HTML 3.2 1997年1月14日HTML 4.0 1997年12月18日(HTML工作小组解散)HTML 4.01 1999年12月24日(XHTML1.0)HTML 5.0 2010年6月24日(草案)http://zh.wikipedia.org/zh/HTML 17
  18. 18. HTML基本结构<html> <head> <title></title> </head> <body> <body></html> 18
  19. 19. 2.1 WHATWG与W3C• WHATWG:2004年6月,Web浏览器生产厂 商和一些相关团体形成的一个松散的、非 正式的协作组织,他们改进的目标是创建 Web 应用程序 Web applications 1.0• 2006年10月,W3C将和WHAT小组合作来开 发下一代HTML。• 2009年10月,W3C解散了XHTML 2工作小组。 19
  20. 20. 2.2 化简为繁• 以浏览器原生能力替代复杂的JavaScript代码document.getElementById,document.getElementByName,document.getElem entByTagName==》document.querySelector,document.querySelectorAll• <link rel="stylesheet" href="css/styles.css“ type=“text/css”/> <script src="js/scripts.js"></script> 20
  21. 21. • 新的简化的DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> //可以直接用键盘打出来,而不用担心敲错• 新的简化的字符集声明 <meta http-equiv="Content-Type" content="text/html; chartset=UTF-8"> <meta charset="UTF-8">• 简单面强大的HTML5 API 21
  22. 22. 2.3 语义化标签<header> <footer> <section> <article> <aside><figure> <figcaption> <nav><audio> <video>使代码更清晰,SEO,减少无意义的DIV元素的使 用。http://kb.cnblogs.com/page/111802/ HTML5标签使用的常见误区 22
  23. 23. 未知元素• 所有浏览器都将未知元素渲染成 inline 的(display:inline ),• article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }• IE:不会为未知元素应用任何 CSS 样式,并且会解释成没有子元素的空节 点, <!--[if lt IE 9]> <script> var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(,); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]--> 23
  24. 24. 2.4 canvas• 本质上是一个位图画布• 缺点:用canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。在动画,鼠标事件方面的处理会比较麻烦。• 优点:不需要将所绘制的图像中的每个图元当做对象存储,因此执行性能非常好。<canvas height="200" width="200">替代内容</canvas>var ctx = cument.querySelector("canvas").getContext("2d");http://www.w3school.com.cn/html5/html5_ref_canvas.asp 24
  25. 25. APIvoid lineTo(x, y)//画直线ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(300,300);ctx.stroke();void rect(x, y, w, h)//画矩形ctx.rect(50, 50, 200, 200);ctx.stroke(); //ctx.strokeRect(50, 50, 200, 200);ctx.rect(50, 50, 200, 200); ctx.fill(); // ctx.fillRect(50, 50, 200, 200);void arc(x, y, radius, startAngle, endAngle[, anticlockwise=false])//画圆ctx.arc(100, 100, 50,0, Math.PI*2);ctx.fill(); //圆ctx.arc(100, 100, 50,0, Math.PI);ctx.stroke(); //半圆ctx.arc(100, 100, 50,0, Math.PI,true);ctx.stroke(); //逆时针 25
  26. 26. void fillText(text, x, y[, maxWidth]); //文本ctx.textAlign = "center";ctx.textBaseline = "top";ctx.font = " 20px sans-serif "; // (default 10px sans-serif)ctx.moveTo(149.5,10);ctx.lineTo(149.5,280);ctx.stroke(); //画竖线ctx.moveTo(10,79.5);ctx.lineTo(280,79.5);ctx.stroke(); //画横线ctx.fillText("canvas", 150, 80);ctx.moveTo(10,109.5);ctx.lineTo(280,109.5);ctx.stroke(); //画横线ctx.fillText("canvas", 150, 110, 30); 26
  27. 27. void clearRect(x, y, w, h) //清除ctx.clearRect(0, 0, 200, 200);void drawImage(image, dx, dy) //图片ctx.drawImage(image, 0, 0);void drawImage(image, dx, dy, dw, dh) //图片,并指定缩放大小ctx.drawImage(image, 100, 100, image.width/2, image.height/2);void drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 27
  28. 28. void createLinearGradient(x0, y0, x1, y1) //线性渐变void createRadialGradient(x0, y0, r0, x1, y1, r1) //径向渐变void createPattern(image, repetition)//在指定的方向上重复指定的元素var linearGradient = ctx.createLinearGradient(0,0,0,300);linearGradient.addColorStop(0,#ff0);linearGradient.addColorStop(1,#f00);ctx.fillStyle = linearGradient;ctx.fillRect(0,0,300,300);ctx.lineWidth=10;ctx.lineCap = "butt" // "butt", "round", "square" (default "butt")ctx.lineJoin = "round" // "round", "bevel", "miter" (default "miter")ctx.miterLimit = 10; //最大斜接长度//ps:如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示ctx.moveTo(10,10); ctx.lineTo(10,100);ctx.lineTo(100,100); //比较直角(100,100)与锐角(100,10)ctx.stroke(); 28
  29. 29. "butt", "round", "square“ "round", "bevel", "miter" 提示:只有当 lineJoin 属性为 lineCap lineJoin "miter" 时,miterLimit 才有效。/***阴影***/ctx.shadowOffsetX = 5; // (default 0)ctx.shadowOffsetY = 5; // (default 0)ctx.shadowBlur = 10; // (default 0) 模糊级数ctx.shadowColor = "rgba(0,0,255,0.5)";ctx.fillRect(10,10,100,100); 29
  30. 30. void quadraticCurveTo(cpx, cpy, x, y) //二次贝塞尔曲线void bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) //三次方贝塞尔曲线ctx.beginPath();ctx.moveTo(75,25);ctx.quadraticCurveTo(25,25,25,62.5);ctx.quadraticCurveTo(25,100,50,100);ctx.quadraticCurveTo(50,120,30,125);ctx.quadraticCurveTo(60,120,65,100);ctx.quadraticCurveTo(125,100,125,62.5);ctx.quadraticCurveTo(125,25,75,25);ctx.stroke();ctx.moveTo(0,150);ctx.bezierCurveTo(50,250, 200,0, 280,150);ctx.stroke();ctx.fillRect(50, 250,2,2);ctx.fillRect(200,0,2,2); 30
  31. 31. State Stack void save(); //push void restore(); //popTransformations void scale(x, y); //按x,y的比例进行缩放 void rotate(angle); //按角度旋转(0―2*Math.PI) void translate(x, y) //平移 void transform(a,b,c,d,e,f) //替换当前的绘图矩阵 void setTransform(a,b,c,d,e,f) //同transform ctx.save(); ctx.translate(150,150); //ctx.rotate(Math.PI/4); //ctx.transform(1,0,0,1,0,0); //ctx.strokeRect(20,20,200,200); ctx.strokeRect(-100,-100,200,200); ctx.restore();http://shawphy.com/2011/01/transformation-matrix-in-front-end.html 31
  32. 32. 2.5 Web StoragesessionStorage,localStorage sessionStorage localStorage数据会保存到存储它的窗口或标签页关闭 数据的生命期比窗口或浏览器的生命期长时(浏览器刷新时可以存储数据,浏览器关闭时不可以)数据只在构建它们的窗口或标签页内可见 数据可被同源的每个窗口或者标签页共享与cookie的区别:1,不会在服务器与浏览器之间来回来传送。2,比cookie的存储空间大(5M)3,跟cookie一样,数据最终会以字符串类型存储 32
  33. 33. interface Storage { length; DOMString key(index); DOMString getItem(key); DOMString setItem(key, value); void removeItem(key); void clear();}Web Storage 事件window.addEventListener(“storage”, displayStorageEvent, true); //监听事件interface StorageEvent : Event { readonly attribute DOMString key; readonly attribute DOMString oldValue; readonly attribute DOMString newValue; readonly attribute DOMString url; readonly attribute Storage? storageArea;};localStorage .getItem(key);localStorage[" key "];localStorage.key 33
  34. 34. 2.6 WebSockets HTML5 WebSockets是HTML5中最强大的通信功能,它定义了一个 全双工通信信道,仅通过Web上的一个Socket即可进行通信。 WebSockets不仅仅是对常规HTTP通信的另一种增量加强,它更代表着 一次巨大的进步,对实时、事件驱动的Web应用程序而言更是如此。 ws:// wss:// 一条消息以0x00字节开头,以0xFF结尾,中间数据采用UTF-8编码。 var webSocket = new WebSocket(url); 事件 onopen,onmessage,onclose, onerror send() //向服务器发送数据。 close() //关闭连接 注意:FireFox,Chrome与Safari实现的WebSocket标准不一样。http://www.w3.org/TR/websockets/ 34
  35. 35. 服务器 消息 消息 消息轮询 浏览器 时间 50ms 100ms 150ms 200ms 50ms 服务器 消息 消息 消息 消息 消息WebSocket 浏览器 时间 50ms 100ms 150ms 200ms 50ms 轮询和WebSocket应用程序间时延的对比 35
  36. 36. 2.7 HTML5 Forms新增类型:tel,email,url,Search,range,number未来支持的一些类型:color,datetime,datetime-local(不含时区), time, date, week, month新的属性:placeholder, autocomplete, autofocus, spellcheck, list(与 datalist元素组合使用),min, max, step, required新标签:< progress > 36
  37. 37. • 表单验证• var valCheck = document.myForm.myInput.validity; //获取表单元素的 ValidityState对象,该对象包含了对所有八种验证状态的引用以及最终 的验证结果。• valCheck.valid; //所有验证都通过返回true• 任何表单元素都有八个可能的验证约束条件。当所有8个约束条件都 返回false时,valid返回true1、valueMissing 目的:确保表单控件中的值已填写 用法:在表单控件中将required特性设置为true 示例: <input type=“text” name=“myText” required />2、typeMismatch 目的:保证控件值与预期类型相匹配 用法:指定表单控件的type特性值3、patternMismath 目的:根据表单控件上设置的格式规则验证输入是否为有效格式。 用法:在表单控件上设置pattern特性,并赋予适当的匹配规则。 示例:<input type=“number” name=“creditcardnumber” pattern=“*0- 9+,16-”/> 37
  38. 38. 4、tooLong 目的:避免输入值包含过多字符 用法:在表单控件上设置maxLength特性5、rangeUnderflow 目的:限制型控件的最小值。 用法:为表单控件设置min特性,并赋予允许的最小值。6、rangeOverflow 目的:限制数值型控件的最大值。 用法:为表单控件设置max特性,并赋予允许的最大值。7、stepMismatch 目的:确保输入值符合min、max及step设置。 用法:为表单控件设置step特性,并指定数值的增量。8、customError 目的:处理应用代码明确设置及计算产生的错误。 用法:调用setCustomValidity(message)将表单控件置于customError状 态。 38
  39. 39. 验证反馈只要发生表单验证(不管是在提交表单时,还是直接调用checkValidity函数),所有未通过验证的表单都会接收到一个invalid事件。 39
  40. 40. 2.8 音频和视频• <audio> <video>• 优点:原生支持,不使用插件• 缺点:1,受到HTTP跨源资源共享的限制;2,全屏视频无法通过脚本 控制;3,各浏览器支持的视频格式不一样;4,HTML无法实现数字 版权加密 ps:HTML5的媒体标签内建了一套机制来挑选最合适在浏览器中播放 的内容类型。• controls //显示控制条• autoplay //自动播放• loop //循环• preload //预加载• void load()• void play()• void pause()• DOMString canPlayType(DOMString type) //测试是否支持给定的MIME 类型的文件,返回"", "maybe", "probably“ 40
  41. 41. 子元素• //type=video/mp4; codecs="vp8, vorbis" type有三部分内容,容器格式, 视频编解码器,音频编解码器• <source src=“” type=“”/> //备用来源,浏览器可以对这些来源进行 识别,如果都支持会选择第一个来源• <track src="" /> //字幕• //后备• <object data="videoplayer.swf" type="application/x-shockwave-flash">• <param name="movie" value="video.swf"/>• </object> 41
  42. 42. 2.9 Geolocation• Location Based Service(LBS)• navigator.geolocaion.getCurrentPosition( udpateLocation,//successCallback handleLocationError,//errorCallback {enableHighAccuracy:false,//高精度 timeout:Infinity, //超时 maximumage:0} //有效期);//可选参数enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当 开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更 精确的位置数据。timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久 再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。 42
  43. 43. function updateLocation(position){ var coords = position.coords; coords.latitude //纬度 coords.longitude //经度 coords.accuracy //准确度,(m) /*可能会返回null的属性*/ coords.altitude //高度,(m) coords.altitudeAccuracy //高度的准确度,(m) coords.heading //运动的方向,相对于正北方向的角度 coords.speed //地面速度,(m/s)} 43
  44. 44. function handleLocationError(error){ switch(){ case 0: //UNKNOWN_ERROR case 1: //PERMISSION_DENIED case 2: //POSITION_UNAVAILABLE case 3: //TIMEOUT }}ps:备用方案google Gears;geo.js是一个使用MIT协议的开源JavaScript库, 它封闭了W3C标准、Gears以及移动平台所提供的各种不同类型的地理 位置API,提供了统一调用接口。 44
  45. 45. 2.10 Communication• 2.10.1 跨文档消息通信• 2.10.2 XMLHttpRequest Level 2 45
  46. 46. 2.10.1 跨文档消息通信可以确保iframe,标签页,窗口间安全地进行跨源通信。window.postMessage(message //要发送的数据 , targetOrigin //消息传送的目的地 [, transfer ] )interface MessageEvent : Event { readonly attribute any data; readonly attribute DOMString origin; readonly attribute DOMString lastEventId; readonly attribute (WindowProxy or MessagePort)? source; readonly attribute MessagePort[]? ports;}; 46
  47. 47. 2.10.2 XMLHttpRequest Level 2 XMLHttpRequest XMLHttpRequest Level 2* 只支持文本数据的传送,无法用来读 * 可以设置HTTP请求的时限。取和上传二进制文件。 * 可以使用FormData对象管理表单数据。* 传送和接收数据时,没有进度信息, * 可以上传文件。只能提示有没有完成。 * 可以请求不同域名下的数据(跨域请* 受到"同域限制"(Same Origin Policy),求 CORS)。只能向同一域名的服务器请求数据。 * 可以获取服务器端的二进制数据。 * 可以获得数据传输的进度信息。浏览器检测:var xhr = new XMLHttpRequert();if (typeof xhr.withCredentials === undefined) { alert("Your browser does not support cross-origin XMLHttpRequest");}IE:XDomainRequesthttp://www.w3.org/TR/XMLHttpRequest2/#interface-xmlhttprequest 47
  48. 48. interface XMLHttpRequest : XMLHttpRequestEventTarget { readyState; onreadystatechange; // request void open(method, url, async, user, password); void setRequestHeader(header, value); long timeout; //超时触发ontimeout事件 boolean withCredentials; XMLHttpRequestUpload upload; void send(); void send(ArrayBuffer data); //Typed Array void send(Blob data); //二进制文件(图片) void send(Document data); void send(DOMString? data); void send(FormData data); void abort(); 48
  49. 49. // response readonly status; //服务器返回的状态码,等于200表示一切正常。 readonly statusText; //服务器返回的状态文本。 XMLHttpRequestResponseType responseType; //设置返回类型 readonly any response; readonly DOMString responseText; //服务器返回的文本数据 readonly Document responseXML; //服务器返回的XML格式的数据 DOMString getResponseHeader(header); DOMString getAllResponseHeaders(); void overrideMimeType(mime);} 49
  50. 50. interface XMLHttpRequestEventTarget:EventTarget { // event handlers Function? onloadstart; //传输开始 Function? onprogress; //进度信息。 Function? onabort; //传输被用户取消。 Function? onerror; //传输中出现错误。 Function? onload; //传输成功完成。 Function? ontimeout; //超时 Function? onloadend; //传输结束,但是不知道成功还是失败。}var oReq = new XMLHttpRequest(); //例:接收二进制数据oReq.open("GET", "/myfile.png", true);oReq.responseType = "arraybuffer";oReq.onload = function(oEvent) {// Note: not oReq.responseText var blob = new Blob([oReq.response], {type: "image/png"});};https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data 50(Sending and Receiving Binary Data)
  51. 51. interface ProgressEvent : Event { readonly attribute boolean lengthComputable; readonly attribute unsigned long long loaded; readonly attribute unsigned long long total;}例:xhr.onprogress = function (e) { // xhr.upload.onprogress var total = e.total; //待发送数据总量 var loaded = e.loaded; //已发送数据问题 if (e.lengthComputable) {//数据总量是否已知(流式HTTP中可能无法获 知数据总量) var percentComplete = e.loaded / e.total; // }} 51
  52. 52. 使用FormData对象管理表单数据[Constructor,Constructor(HTMLFormElement form)]interface FormData { void append(DOMString name, Blob value, optional DOMString filename); void append(DOMString name, DOMString value);} 用法var formData = new FormData ();var formData = new FormData (document.forms[o]);xhr.send(formData); 52
  53. 53. 2.11 拖放已经存在的拖放操作? 53
  54. 54. • 事件流• dragstart• drag• dragenter• dragleave• dragover• drop• dragend 54
  55. 55. 拖放事件流 中间元素 旋转目标 拖动源 (不放置) (放置) dragdragstart dragover dragoverdragenter dragenter dragenter drog dragend dragleave dragleave 55
  56. 56. 传输和控制• DataTransfer对象interface DataTransfer{ attribute DOMString dropEffect; attribute DOMString effectAllowed; readonly attribute DataTransferItemList items; void setDragImage(Element image, long x, long y); /* old interface */ readonly attribute DOMString[] types; DOMString getData(DOMString format); void setData(DOMString format, DOMString data); void clearData(optional DOMString format); readonly attribute FileList files;} 56
  57. 57. dropEffect: //设置或获取当前执行操作的类型effectAllowed: //允许操作的类型,各种类型视觉效果不一样items: //返回所有项及其相关格式的列表setDragImage(image, x, y): //设置显示在图像,或元素types: //以数组形式返回所有当前注册的格式getData(format): //获取指定类型的数据项setData(format, data): //设置一个MIME类型的数据,只能在dragstart 设置clearData([format]): //清除指定MIME类型的数据,或全部files: //返回与放置相关的所有文件获取DataTransfer对象: event.dataTransfer对于dropEffect、effectAllowed属性使用的几个注意的地方:一般的时候我们在ondragstart事件中去设置effectAllowed值,ondragover事件中指定dropEffect值。其 中如果effectAllowed属性设置为none,则不允许拖动,如果dropEffect属性设置为none,则不允许拖放到目标元素中。 57
  58. 58. HTML5还包括• Web Workers• File API• 离线Web应用• 浏览器数据库• 微数据,微格式• 服务器发送事件• custom data attribute• …… 58
  59. 59. 附录检测技术1、检测全局对象是否拥有特定的属性,(navigator)2、创建一个元素,然后检测该元素的DOM对象是否特定的属性。 (canvas)3、创建一个元素,然后检测这个元素的DOM对象是否拥有特定的方法, 同时调用这个方法检查综的返回值。(支持的视频格式)4、创建一个元素,给这个元素的DOM对象设定特定的属性值,然后检查 浏览器是否保留了该属性值。(input type)ps:Modernizr――一个HTML5特性检测库 59
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×