SlideShare une entreprise Scribd logo
1  sur  59
Télécharger pour lire hors ligne
@余军

      1
Table of Contents

1,DOM
    1.1,HTML DOM
    1.2,document
2,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
1、 DOM

HTML DOM 定义了访问和操作
  HTML文档的标准方法。



                    3
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
1.1 HTML DOM




               5
DOM树




       6
HTML DOM 简介
• 整个文档是一个文档节点(document)
• 每个 HTML 标签是一个元素节点
• 包含在 HTML 元素中的文本是文本节点
• 每一个 HTML 属性是一个属性节点
  (attributes)
• 注释属于注释节点



http://www.w3school.com.cn/htmldom/dom_nodes.asp   7
1.1.1 节点(Node Object)
NodeType       Named Constant
1              ELEMENT_NODE
2              ATTRIBUTE_NODE
3              TEXT_NODE
4              CDATA_SECTION_NODE
5              ENTITY_REFERENCE_NODE
6              ENTITY_NODE
7              PROCESSING_INSTRUCTION_NODE
8              COMMENT_NODE
9              DOCUMENT_NODE
10             DOCUMENT_TYPE_NODE
11             DOCUMENT_FRAGMENT_NODE
12             NOTATION_NODE

                                             8
HTMLElement

                                                  DOM Node



                                                 DOM Element




                                              HTMLElement Object


HTMLHtmlElement                 HTMLHeadElement              HTMLBodyElement   ……




 http://www.w3schools.com/jsref/default.asp                                         9
DOM Node
• 属性: nodeType, nodeName, parentNode,
  childNodes, firstChild, nextSibling,
  nodeValue, textContent,……
• 方法: cloneNode(), appendChild(),……




                                     10
DOM Element
• 属性:id, className, attributes
• 方法: getAttribute(), setAttribute(),
  removeAttribute (), hasAttribute (),
  getElementsByTagName (),
  getElementsByClassName (),




                                         11
HTML Element
• 属性: title , lang , tabIndex , style ,
  onclick , itemProp , itemType ,
  draggable , ……
• 方法: click(),……




                                          12
1.2 document

DOM树的根节点是一个Document
       对象



                      13
document
• 属性: URL,contentType,
  documentElement,……
• 方法: getElementsByTagName(),
  getElementsByClassName (),getElementById
  (),createElement (), createTextNode
  (),……



                                         14
2、HTML 5




           15
HTML起源
• 1980年,蒂姆·伯纳斯-李为使世界各地的物
  理学家能够方便的进行合作研究,创建了
  使用于其系统的HTML。
• 两个浏览器,IE,Netscape




                       16
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
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月,W3C将和WHAT小组合作来开
  发下一代HTML。
• 2009年10月,W3C解散了XHTML 2工作小组。


                             19
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
• 新的简化的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
2.3 语义化标签
<header> <footer> <section> <article> <aside>
<figure> <figcaption> <nav>
<audio> <video>
使代码更清晰,SEO,减少无意义的DIV元素的使
  用。




http://kb.cnblogs.com/page/111802/ HTML5标签使用的常见误区   22
未知元素
• 所有浏览器都将未知元素渲染成 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
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
API
void 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
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
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
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
"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
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
State Stack
    void save(); //push
    void restore(); //pop
Transformations
    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
2.5 Web Storage
sessionStorage,localStorage
       sessionStorage   localStorage
数据会保存到存储它的窗口或标签页关闭      数据的生命期比窗口或浏览器的生命期长
时
(浏览器刷新时可以存储数据,浏览器关
闭时不可以)
数据只在构建它们的窗口或标签页内可见      数据可被同源的每个窗口或者标签页共享

与cookie的区别:
1,不会在服务器与浏览器之间来回来传送。
2,比cookie的存储空间大(5M)
3,跟cookie一样,数据最终会以字符串类型存储




                                             32
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
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
服务器      消息             消息               消息
轮询




            浏览器


            时间     50ms    100ms    150ms    200ms    50ms



            服务器   消息       消息      消息       消息       消息
WebSocket




            浏览器

            时间    50ms    100ms    150ms    200ms    50ms

                    轮询和WebSocket应用程序间时延的对比

                                                             35
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
• 表单验证
• var valCheck = document.myForm.myInput.validity; //获取表单元素的
  ValidityState对象,该对象包含了对所有八种验证状态的引用以及最终
  的验证结果。
• valCheck.valid;     //所有验证都通过返回true
• 任何表单元素都有八个可能的验证约束条件。当所有8个约束条件都
  返回false时,valid返回true
1、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
4、tooLong
  目的:避免输入值包含过多字符
  用法:在表单控件上设置maxLength特性
5、rangeUnderflow
  目的:限制型控件的最小值。
  用法:为表单控件设置min特性,并赋予允许的最小值。
6、rangeOverflow
  目的:限制数值型控件的最大值。
  用法:为表单控件设置max特性,并赋予允许的最大值。
7、stepMismatch
  目的:确保输入值符合min、max及step设置。
  用法:为表单控件设置step特性,并指定数值的增量。
8、customError
  目的:处理应用代码明确设置及计算产生的错误。
  用法:调用setCustomValidity(message)将表单控件置于customError状
  态。
                                                       38
验证反馈

只要发生表单验证(不管是在提交表单时,还是直接调用checkValidity函
数),所有未通过验证的表单都会接收到一个invalid事件。




                                      39
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
子元素
• //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
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
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
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
2.10 Communication
• 2.10.1 跨文档消息通信
• 2.10.2 XMLHttpRequest Level 2




                                  45
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
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:XDomainRequest
http://www.w3.org/TR/XMLHttpRequest2/#interface-xmlhttprequest                            47
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
// 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
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)
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
使用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
2.11 拖放



已经存在的拖放操作?




             53
•   事件流
•   dragstart
•   drag
•   dragenter
•   dragleave
•   dragover
•   drop
•   dragend




                          54
拖放事件流


                                  中间元素                       旋转目标
     拖动源
                                  (不放置)                      (放置)

            drag



dragstart                         dragover               dragover
dragenter
                      dragenter                  dragenter          drog


 dragend           dragleave                 dragleave




                                                                           55
传输和控制
• 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
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
HTML5还包括
•   Web Workers
•   File API
•   离线Web应用
•   浏览器数据库
•   微数据,微格式
•   服务器发送事件
•   custom data attribute
•   ……
                            58
附录
检测技术
1、检测全局对象是否拥有特定的属性,(navigator)
2、创建一个元素,然后检测该元素的DOM对象是否特定的属性。
   (canvas)
3、创建一个元素,然后检测这个元素的DOM对象是否拥有特定的方法,
   同时调用这个方法检查综的返回值。(支持的视频格式)
4、创建一个元素,给这个元素的DOM对象设定特定的属性值,然后检查
   浏览器是否保留了该属性值。(input type)
ps:Modernizr――一个HTML5特性检测库




                                59

Contenu connexe

Similaire à Html5培训内容

[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门Xiujun Ma
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starteryiming he
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2luolonghao
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路taobao.com
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路luolonghao
 
HTML5概览
HTML5概览HTML5概览
HTML5概览Adam Lu
 
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, ChineseWebsite Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinesemultiple1902
 
Koubei banquet 34
Koubei banquet 34Koubei banquet 34
Koubei banquet 34Koubei UED
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例Will Huang
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)ziggear
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克jay li
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介peterju
 

Similaire à Html5培训内容 (20)

[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starter
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路
 
HTML5 Basic
HTML5 BasicHTML5 Basic
HTML5 Basic
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, ChineseWebsite Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinese
 
Koubei banquet 34
Koubei banquet 34Koubei banquet 34
Koubei banquet 34
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
Fl介绍
Fl介绍Fl介绍
Fl介绍
 
Javascript
JavascriptJavascript
Javascript
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
Html&css基础
Html&css基础Html&css基础
Html&css基础
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介
 

Html5培训内容

  • 2. Table of Contents 1,DOM 1.1,HTML DOM 1.2,document 2,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. 1、 DOM HTML DOM 定义了访问和操作 HTML文档的标准方法。 3
  • 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
  • 6. DOM树 6
  • 7. HTML DOM 简介 • 整个文档是一个文档节点(document) • 每个 HTML 标签是一个元素节点 • 包含在 HTML 元素中的文本是文本节点 • 每一个 HTML 属性是一个属性节点 (attributes) • 注释属于注释节点 http://www.w3school.com.cn/htmldom/dom_nodes.asp 7
  • 8. 1.1.1 节点(Node Object) NodeType Named Constant 1 ELEMENT_NODE 2 ATTRIBUTE_NODE 3 TEXT_NODE 4 CDATA_SECTION_NODE 5 ENTITY_REFERENCE_NODE 6 ENTITY_NODE 7 PROCESSING_INSTRUCTION_NODE 8 COMMENT_NODE 9 DOCUMENT_NODE 10 DOCUMENT_TYPE_NODE 11 DOCUMENT_FRAGMENT_NODE 12 NOTATION_NODE 8
  • 9. HTMLElement DOM Node DOM Element HTMLElement Object HTMLHtmlElement HTMLHeadElement HTMLBodyElement …… http://www.w3schools.com/jsref/default.asp 9
  • 10. DOM Node • 属性: nodeType, nodeName, parentNode, childNodes, firstChild, nextSibling, nodeValue, textContent,…… • 方法: cloneNode(), appendChild(),…… 10
  • 11. DOM Element • 属性:id, className, attributes • 方法: getAttribute(), setAttribute(), removeAttribute (), hasAttribute (), getElementsByTagName (), getElementsByClassName (), 11
  • 12. HTML Element • 属性: title , lang , tabIndex , style , onclick , itemProp , itemType , draggable , …… • 方法: click(),…… 12
  • 14. document • 属性: URL,contentType, documentElement,…… • 方法: getElementsByTagName(), getElementsByClassName (),getElementById (),createElement (), createTextNode (),…… 14
  • 16. HTML起源 • 1980年,蒂姆·伯纳斯-李为使世界各地的物 理学家能够方便的进行合作研究,创建了 使用于其系统的HTML。 • 两个浏览器,IE,Netscape 16
  • 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. HTML基本结构 <html> <head> <title></title> </head> <body> <body> </html> 18
  • 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. 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. • 新的简化的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. 2.3 语义化标签 <header> <footer> <section> <article> <aside> <figure> <figcaption> <nav> <audio> <video> 使代码更清晰,SEO,减少无意义的DIV元素的使 用。 http://kb.cnblogs.com/page/111802/ HTML5标签使用的常见误区 22
  • 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. 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. API void 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. 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. 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. 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. "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. 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. State Stack void save(); //push void restore(); //pop Transformations 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. 2.5 Web Storage sessionStorage,localStorage sessionStorage localStorage 数据会保存到存储它的窗口或标签页关闭 数据的生命期比窗口或浏览器的生命期长 时 (浏览器刷新时可以存储数据,浏览器关 闭时不可以) 数据只在构建它们的窗口或标签页内可见 数据可被同源的每个窗口或者标签页共享 与cookie的区别: 1,不会在服务器与浏览器之间来回来传送。 2,比cookie的存储空间大(5M) 3,跟cookie一样,数据最终会以字符串类型存储 32
  • 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. 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. 服务器 消息 消息 消息 轮询 浏览器 时间 50ms 100ms 150ms 200ms 50ms 服务器 消息 消息 消息 消息 消息 WebSocket 浏览器 时间 50ms 100ms 150ms 200ms 50ms 轮询和WebSocket应用程序间时延的对比 35
  • 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. • 表单验证 • var valCheck = document.myForm.myInput.validity; //获取表单元素的 ValidityState对象,该对象包含了对所有八种验证状态的引用以及最终 的验证结果。 • valCheck.valid; //所有验证都通过返回true • 任何表单元素都有八个可能的验证约束条件。当所有8个约束条件都 返回false时,valid返回true 1、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. 4、tooLong 目的:避免输入值包含过多字符 用法:在表单控件上设置maxLength特性 5、rangeUnderflow 目的:限制型控件的最小值。 用法:为表单控件设置min特性,并赋予允许的最小值。 6、rangeOverflow 目的:限制数值型控件的最大值。 用法:为表单控件设置max特性,并赋予允许的最大值。 7、stepMismatch 目的:确保输入值符合min、max及step设置。 用法:为表单控件设置step特性,并指定数值的增量。 8、customError 目的:处理应用代码明确设置及计算产生的错误。 用法:调用setCustomValidity(message)将表单控件置于customError状 态。 38
  • 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. 子元素 • //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. 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. 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. 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. 2.10 Communication • 2.10.1 跨文档消息通信 • 2.10.2 XMLHttpRequest Level 2 45
  • 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. 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:XDomainRequest http://www.w3.org/TR/XMLHttpRequest2/#interface-xmlhttprequest 47
  • 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. // 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. 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. 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. 使用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
  • 54. 事件流 • dragstart • drag • dragenter • dragleave • dragover • drop • dragend 54
  • 55. 拖放事件流 中间元素 旋转目标 拖动源 (不放置) (放置) drag dragstart dragover dragover dragenter dragenter dragenter drog dragend dragleave dragleave 55
  • 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. 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. HTML5还包括 • Web Workers • File API • 离线Web应用 • 浏览器数据库 • 微数据,微格式 • 服务器发送事件 • custom data attribute • …… 58
  • 59. 附录 检测技术 1、检测全局对象是否拥有特定的属性,(navigator) 2、创建一个元素,然后检测该元素的DOM对象是否特定的属性。 (canvas) 3、创建一个元素,然后检测这个元素的DOM对象是否拥有特定的方法, 同时调用这个方法检查综的返回值。(支持的视频格式) 4、创建一个元素,给这个元素的DOM对象设定特定的属性值,然后检查 浏览器是否保留了该属性值。(input type) ps:Modernizr――一个HTML5特性检测库 59