@EncyKe 2015-12-24T04:16:45.000000Z 字数 18757 阅读 2653

HTML5

前端

一、简介

1. 新功能

添加了新元素标签：
<header>：定义 section 或 page 的页眉；
<hgroup>：标题群组；
<nav>：定义导航链接；
<section>：定义 section；
<aside>：定义页面内容之外的内容；
<footer>：定义 section 或 page 的页脚；
<datalist>：定义下拉列表；
<audio>：定义声音内容；
<source>：定义媒介源；
<video>：定义视频；
<wbr>：定义视频；
<command>：定义命令按钮；
<time>：定义日期/时间；
<bdi>：定义文本的文本方向，使其脱离其周围文本的方向设置；
<mark>：定义有记号的文本；
<meter>：定义预定义范围内的度量；
<progress>：定义任何类型的任务的进度；
<rp>：定义若浏览器不支持 ruby 元素显示的内容；
<rt>：定义 ruby 注释的解释；
<ruby>：定义 ruby 注释；
<keygen>：定义生成密钥；
<output>：定义输出的一些类型；
<track>：定义用在媒体播放器中的文本轨道；
<details>：定义元素的细节；
<dialog>：定义对话框或窗口；
<summary>：为元素定义可见的标题；
<embed>：为外部应用程序（非 HTML）定义容器；
Canvas二维绘图界面控制JS编程；
无须第三方插件即可嵌入视频；
无须第三方插件即可永久性本地数据存储；
离线Web应用运作；
地理定位；
Web表单经过改进。

2. 其它

Modernizr库
jQuery库：减少和简化处理DOM、使用Ajax；
CDN调用：
- Google：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
- Microsoft：··
SVG：可缩放矢量图形，需以XML指定;
离线web应用：<html manifest="notetoself.manifest">，其中notetoself.manifest含：CACHE MANIFEST以及CACHE（此节存放要缓存的图片）；AddType text/cache-manifest .manfest；
Web Socket API：XMLHttpRequest以及JSONP都是基于http协议，web socket则基于ws协议；
拖放元素API：draggable: true;。
querySelectorAll：document.querySelectorAll(""); 选取CSS选择器，语法同CSS；querySelector：语法同上；

二、表单

表单HTML模板

<form id="" method="">
    <hgroup>
    </hgroup>
    <fieldset>
        <legend>
        </legend>
        <div>
            <label for="">
            </label>
            <input id="" name="" placeholder="(文本占位符)" 
                type=""
                required aria-required="true"(必填项 range/color/button/hidden不可用) 
                autofocus(光标跟随) 
                autocomplete="off"(禁止浏览器自动填写 可加在form本身上) 
                list="_(自定义名称，在新的datalist下拉弹出选项)"
            />
            <datalist id="(上述list名称)" >
                <select>
                    <option value=""></option>
                    <option value=""></option>
                    <option value=""></option>
                    …
                </select>
            </datalist>
        </div>
    </fieldset>
</form>

input标签type属性详解：
type="text"
type="email"
type="url"
type="tel"
type="search"
type="color"
type="number" min="(数值)" max="(数值)"
type="range" min="(数值)" max="(数值)" (滑动条效果)
type="pattern" (正则表达式)
（时间相关）：
type="date"→2014-12-02
type="month"→2014-12
type="week"→2014-W49
type="time"→20:48
type="datetime"→2014-12-02T12:49:00+8:00
type="datetime-local"→2014-12-02T20:49:00
（CSS3选择器）：
input: required;：必填表单域；
input: focus: invalid;：当前聚焦的含非法输入值的表单域；
input: focus: valid;：当前聚焦的含合法输入值的表单域。

三、多媒体

多媒体HTML模板 & Video/Audio 参考手册

<video 
    id=""
    src=""
    width="" height="" 
    controls  (显示按钮，控制按钮的外观应浏览器不同而不同)
    autoplay (自动播放，不建议)
    preload="auto/none/metadata" (播放前是否下载视频)
    loop (循环播放) 
    poster="" (视频缩略图路径)
    >
    <source src="video/preroll.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
    (Mp4格式：Safari, IE9+)
    <source src="video/preroll.ogv" type='video/ogg; codecs="theora, vorbis"'> 
    (ogv格式：FF, Opera)
    <source src="video/preroll.webm" type='video/webm; codecs="vp8, vorbis"'> 
    (WebM格式：Chrome)
    <p>Sorry, your browser doesn't support the video element</p> (指出浏览器不兼容video)
</video>

1. 视频

1) 视频编码

HTML5规范允许采用任何视频格式，但具体的支持由浏览器决定——
Mp4容器：H.264视频编码+AAC音频编码；
WebM容器：Vp8视频编码+Vorbis音频编码；
Ogg容器：Theora视频编码+Vorbis音频编码；

2) 连续播放列表

var position = 0;
var playlist;
var video;
window.onload = function() {
    playlist = ["video/preroll", 
              "video/areyoupopular", 
              "video/destinationearth"];
    video = document.getElementById('video');
    video.addEventListener("ended", nextVideo, false); 
    //addEventListener()方法增加事件监听：
    //“ended”表视频播放结束，调用函数，默认一般为flase（除非编写高级代码）
    video.src = playlist[position] + getFormatExtension();
    video.load(); //加载视频
    video.play(); //播放视频
};
function nextVideo() {
    position++;
    if (position >= playlist.length) {
        position = 0;
    }
    video.src = playlist[position] + getFormatExtension();
    video.load();
    video.play();
}
function getFormatExtension() {
    if (video.canPlayType("video/mp4") != "") {
        return ".mp4";
    } else if (video.canPlayType("video/ogg") != "") {
        return ".ogv";
    } else if (video.canPlayType("video/webm") != "") {
        return ".webm";
    }
}
//canPlayType()方法将返回三个值："probably"、"maybe"、""(空串表完全无法播放)

3) 自定义播放控件

function setEffect(e) {
    var id = e.target.getAttribute("id");
    if (id == "normal") {
        pushUnpushButtons("normal", ["western", "noir", "scifi"]);
        effectFunction = null;
    } else if (id == "western") {
        pushUnpushButtons("western", ["normal", "noir", "scifi"]);
        effectFunction = western;
    } else if (id == "noir") {
        pushUnpushButtons("noir", ["normal", "western", "scifi"]);
        effectFunction = noir;
    } else if (id == "scifi") {
        pushUnpushButtons("scifi", ["normal", "western", "noir"]);
        effectFunction = scifi;
    }
}
//以上四个按钮为单选按钮，调用下文的pushUnpushButton函数
function handleControl(e) {
    var id = e.target.getAttribute("id");
    var video = document.getElementById("video");
    if (id == "play") {
        pushUnpushButtons("play", ["pause"]);
        if (video.ended) {
            video.load();
        }
        video.play();
    } else if (id == "pause") {
        pushUnpushButtons("pause", ["play"]);
        video.pause();
    } else if (id == "loop") {
        if (isButtonPushed("loop")) {
            pushUnpushButtons("", ["loop"]);
        } else {
            pushUnpushButtons("loop", []);
        }
        video.loop = !video.loop; //取反值
    } else if (id == "mute") {
        if (isButtonPushed("mute")) {
            pushUnpushButtons("", ["mute"]);
        } else {
            pushUnpushButtons("mute", []);
        }
        video.muted = !video.muted; //取反值
    }
}
//play和pause是单选按钮，但loop和mute为开关按钮
function pushUnpushButtons(idToPush, idArrayToUnpush) {
    if (idToPush != "") {
        var anchor = document.getElementById(idToPush);
        var theClass = anchor.getAttribute("class");
        if (!theClass.indexOf("selected") >= 0) {
            theClass = theClass + " selected";
            anchor.setAttribute("class", theClass);
            var newImage = "url(images/" + idToPush + "pressed.png)";
            anchor.style.backgroundImage = newImage; //通过改变CSS中的背景图片实现
        }
    }
    for (var i = 0; i < idArrayToUnpush.length; i++) {
        anchor = document.getElementById(idArrayToUnpush[i]);
        theClass = anchor.getAttribute("class");
        if (theClass.indexOf("selected") >= 0) {
            theClass = theClass.replace("selected", "");
            anchor.setAttribute("class", theClass);
            anchor.style.backgroundImage = "";
        }
    }
}
//pushUnpushButton函数实现单选效果按钮
function isButtonPushed(id) {
    var anchor = document.getElementById(id);
    var theClass = anchor.getAttribute("class");
    return (theClass.indexOf("selected") >= 0);
}
//isButtonPushed判定按钮是否被触发
function endedHandler(e) {
    pushUnpushButtons("", ["play"]);
}
//播放完毕后play按钮弹起

4) 利用canvas为video加滤镜：

需用两个canvas遮罩video，#buffer用作缓冲区，#display显示视频：

<video id="video" width="720" height="480"></video>
<canvas id="buffer" width="720" height="480"></canvas>
<canvas id="display" width="720" height="480"></canvas>

video.addEventListener("play", processFrame, false); //放在window.onload中
function processFrame(e) {
    var video = document.getElementById("video");
    if (video.paused || video.ended) {
        return;
    }
    var bufferCanvas = document.getElementById("buffer");
    var displayCanvas = document.getElementById("display");
    var buffer = bufferCanvas.getContext("2d");
    var display = displayCanvas.getContext("2d");
    buffer.drawImage(video, 0, 0, bufferCanvas.width, displayCanvas.height);
    //drawImage方法：取一图像并把它绘制在canvas上，指定x、y以及宽、高；
    //若指定video为源，则可选取视频帧；
    var frame = buffer.getImageData(0, 0, bufferCanvas.width, displayCanvas.height);
    //getImageData方法：取图像的rgba四项信息生成数组；
    var length = frame.data.length / 4;
    //得出帧数据的长度，即一帧的像素数；
    for (var i = 0; i < length; i++) {
        var r = frame.data[i * 4 + 0];
        var g = frame.data[i * 4 + 1];
        var b = frame.data[i * 4 + 2];
        if (effectFunction) {
            effectFunction(i, r, g, b, frame.data); //传入要作处理的滤镜函数
        }
    }
    display.putImageData(frame, 0, 0);
    //处理完毕后，显示在canvas#display上；
    setTimeout(processFrame, 0);
    //要求再次尽快重复运行processFrame函数，使每一帧都能得到处理
}
function bwcartoon(pos, r, g, b, outputData) {
    var offset =  pos * 4;
    if( outputData[offset] < 120 ) {
        outputData[offset] = 80;
        outputData[++offset] = 80;
        outputData[++offset] = 80;
    } else {
        outputData[offset] = 255;
        outputData[++offset] = 255;
        outputData[++offset] = 255;
    }
    outputData[++offset] = 255;
    ++offset;
} //卡通滤镜
function noir(pos, r, g, b, data) {
    var brightness = (3*r + 4*g + b) >>> 3;
    if (brightness < 0) brightness = 0;
    data[pos * 4 + 0] = brightness;
    data[pos * 4 + 1] = brightness;
    data[pos * 4 + 2] = brightness;
} //黑白滤镜
function western(pos, r, g, b, data) {
    var brightness = (3*r + 4*g + b) >>> 3;
    data[pos * 4 + 0] = brightness+40;
    data[pos * 4 + 1] = brightness+20;
    data[pos * 4 + 2] = brightness-20;
    data[pos * 4 + 3] = 255; //220;
} //西部片滤镜
function scifi(pos, r, g, b, data) {
    var offset = pos * 4;
    data[offset] = Math.round(255 - r) ;
    data[offset+1] = Math.round(255 - g) ;
    data[offset+2] = Math.round(255 - b) ;
} //底片滤镜

5) 处理错误

1 = MEDIA_ERR_ABORTED：取回过程被用户中止；
2 = MEDIA_ERR_NETWORK：当下载时发生错误；
3 = MEDIA_ERR_DECODE：当解码时发生错误；
4 = MEDIA_ERR_SRC_NOT_SUPPORTED：不支持音频/视频。

2. 音频

与视频基本相同，改<video>为<audio>，无width，height以及poster；
格式：mp3、wav、Ogg Vorbis。

四、地理位置感知

1. 定位原理

GPS（能耗大）；
IP地址映射物理位置（街区级）；
蜂窝电话（取决于用户周围的基站数）；
WiFi三角定位（要求处于静态）；
其它。

2. 调用谷歌地图

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--true值指谷歌地图将调用用户的位置，false表不调用位置-->

3. `geolocation`对象下的`getCurrentPosition`、`watchPosition`、`clearWatch`方法：

getCurrentPosition(showLocation, errorHandler, positionOptions);
        showLocation：position对象：coords属性、timestamp属性；
                      coordinates对象：latitude、longitude、accuracy、altitude、altitudeAccuracy、heading、speed
        positionOption：enableHighAccuracy：true、false, //是否以高性能换取定位的精确性
                      timeout：infinity、数值(毫秒),//定位需要多长时间，超出这一期限则报为error
                      maximumAge：数值(毫秒)//最多可套用多久前的缓存位置

4. 将度分秒转化为小数（西经、南纬为负数值）

function degreesToDecimal(degrees, minutes, seconds){
  return degrees + (minutes / 60) + (seconds / 3600.0);
}

地理定位模板

var watchId = null;
var map = null;
var ourCoords =  {
latitude: 47.624851,
longitude: -122.52099
};
var prevCoords = null;
window.onload = getMyLocation;
function getMyLocation() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        displayLocation, 
        displayError,
        {enableHighAccuracy: true, timeout:9000});
    var watchButton = document.getElementById("watch");
    watchButton.onclick = watchLocation;
    var clearWatchButton = document.getElementById("clearWatch");
    clearWatchButton.onclick = clearWatch;
}
else {
    alert("Oops, no geolocation support");
}
    //测试能否实现地理定位
}
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
    //实现地理定位的代码
var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
    //引用地理定位
var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
    //引用距离测量
if (map == null) {
    showMap(position.coords);
    prevCoords = position.coords;
}
else {
    var meters = computeDistance(position.coords, prevCoords) * 1000;
    if (meters > 20) {
        scrollMapToPosition(position.coords);
        prevCoords = position.coords;
    }
}
}
function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);
var Radius = 6371; // radius of the Earth in km
var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 
                Math.cos(startLatRads) * Math.cos(destLatRads) *
                Math.cos(startLongRads - destLongRads)) * Radius;
return distance;
}
function degreesToRadians(degrees) {
radians = (degrees * Math.PI)/180;
return radians;
}
//实现距离测量的代码
function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude, 
                                              coords.longitude);
var mapOptions = {
    zoom: 10,
    center: googleLatAndLong,
    mapTypeId: google.maps.MapTypeId.ROADMAP//SATELLITE：卫星图；HYBRID：混合
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);
var title = "Your Location";
var content = "You are here: " + coords.latitude + ", " + coords.longitude;
addMarker(map, googleLatAndLong, title, content);
// 标记弹窗信息
}
//引用谷歌地图
function addMarker(map, latlong, title, content) {
var markerOptions = {
    position: latlong,
    map: map,
    title: title,
    clickable: true
};
var marker = new google.maps.Marker(markerOptions);
var infoWindowOptions = {
    content: content,
    position: latlong
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map);
});
}
//大头钉标记以及单击弹出窗口的代码
function displayError(error) {
var errorTypes = {
    0: "Unknown error",
    1: "Permission denied",
    2: "Position is not available",
    3: "Request timeout"
};
var errorMessage = errorTypes[error.code];
if (error.code == 0 || error.code == 2) {
    errorMessage = errorMessage + " " + error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMessage;
}
//处理错误类型的代码
function watchLocation() {
watchId = navigator.geolocation.watchPosition(
                displayLocation, 
                displayError,
                {enableHighAccuracy: true, timeout:3000});
}
// 开始监视的代码
function scrollMapToPosition(coords) {
var latitude = coords.latitude;
var longitude = coords.longitude;
var latlong = new google.maps.LatLng(latitude, longitude);
map.panTo(latlong);
// 新标记
addMarker(map, latlong, "Your new location", "You moved to: " + 
                            latitude + ", " + longitude);
}
// 路径标记的代码
function clearWatch() {
if (watchId) {
    navigator.geolocation.clearWatch(watchId);
    watchId = null;
}
}
// 清除监视的代码

五、画布

canvas可有可多，但应注明id，因为canvas是通过JS进行绘制的；
canvas默认是透明的；
canvas默认宽300px、高150px，建议是在标签属性中指明宽、高，而非通过css（css指定将产生缩放效果）；
欲绘制canvas，需先创建一个context；

<canvas width="600" height="200" id="">
    <p>You need canvas to use XXX!</p>
    <p>This example requires a browser that supports the
    <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
    &lt;canvas&gt; feature.</p>
    <!--此处文字在不支持canvas的浏览器将显示-->
</canvas>

画布模板 & canvas参考手册

window.onload = function() {
    var button = document.getElementById("previewButton");
    button.onclick = previewHandler;
    makeImage();
}
function previewHandler() {
    var canvas = document.getElementById("tshirtCanvas");//按id选取canvas
    var context = canvas.getContext("2d");//2d的context指定，3d尚未出现
    fillBackgroundColor(canvas, context);
    var selectObj = document.getElementById("shape");
    var index = selectObj.selectedIndex;
    //selectedIndex表选取数组字符串对应的序数，注意第一个为0
    var shape = selectObj[index].value;
    //value表按上述序数取字符串
    if (shape == "squares") {
        for (var squares = 0; squares < 20; squares++) {
            drawSquare(canvas, context);//编写随机生成的伪函数
        }
    }
    else if (shape == "circles") {
        for (var circles = 0; circles < 20; circles++) {
            drawCircle(canvas, context);
        }
    }
    drawText(canvas, context);
    drawBird(canvas, context);
}
function fillBackgroundColor(canvas, context) {
    var selectObj = document.getElementById("backgroundColor");
    var index = selectObj.selectedIndex;
    var bgColor = selectObj[index].value;
    context.fillStyle = bgColor;
    context.fillRect(0, 0, canvas.width, canvas.height);
    //fillRect表画矩形带填充色，默认为黑色，语法：fillRect(x,y,width,height);
    //strokeRect则表画矩形仅轮廓
}
function drawSquare(canvas, context) {
    var w = Math.floor(Math.random() * 40);    
    //random取随机，floor取整，40界定上界
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);
    context.fillStyle = "rgb(0, 173, 239)";
    //fillStyle表填充色：context.fillStyle = "lightblue";
    context.fillRect(x, y, w, w);
}
function drawCircle(canvas, context) {
    var radius = Math.floor(Math.random() * 40);
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);
    context.beginPath();
    /*
    路径方法（画三角形为例）：
    context.beginPath();
    context.moveTo(_,_);
    context.lineTo(_,_);
    context.lineTo(_,_);
    context.closePath();
    context.lineWidth=5;    路径线宽为5
    context.stroke();       用线描绘路径
    context.fillStyle="red";填充颜色为红
    context.fill();         用颜色填充路径封闭区域
    */
    context.arc(x, y, radius, 0, degreesToRadians(360), true); 
    //arc方法：context.arc(x, y, radius, startAngle, endAngle, direction);
    //x,y确定圆心坐标；radius指定半径；
    //startAngle与endAngle表弧的起始角和终止角，单位弧度，取值正负，0为x轴正方向；
    //direction规定创建圆路径的方向，true为逆时针；
    context.fillStyle = "lightblue";
    context.fill();
}
function degreesToRadians(degrees) {
    return (degrees * Math.PI)/180;
    //degreesToRadians()方法将角度转换为弧度；
}

六、通信

function getSales() {
    var url = ""; //浏览器从哪里请求数据
    var request = new XMLHttpRequest(); //XMLHttpRequest是一个构造函数
    request.open("GET", url); //HTTP GET是获取HTTP数据的标准方法，open方法建立请求
    request.onload = function() {
        if (request.status == 200) { //200表调用成功的返回值
            updateSales(request.responseText);
        }
    };
    request.send(null); //将请求发送至服务器，null指不发送数据
}

XMLHttpRequest：给一个url，即可为用户获取数据，并置入处理程序。可以获取XML，也可是JSON。
JSON (JavaScript Object Notation)：规模、可读性高，是js的内置记法。
JSON.stringify()方法：把js对象作为实参传入，成为一个字符串；
JSON.parse()方法：把字符串转换为一个对象；
XMLHttpRequest不允许跨域请求，这是浏览器的安全策略；若需跨域请求，需用JSONP (JSON with Padding)，前提是被请求的服务器支持JSON，如Google、Facebook、Twitter、MS等。
JSONP：Padding是指传回的JSON经历了一个函数调用包装。由于是从第三方库或者其它服务器请求数据，JSONP方法通常不是很安全，除非是值得信任的库，如Google、Facebook、Twitter、MS等。

“web应用的一大优点就是不必像web页面那样不断刷新。”
setInterval()方法：定时调用、处理的方法。setInterval(函数名, 毫秒数值)。关闭浏览器终止计时，或以clearInterval方法终止。
createElement方法、setAttribute方法、getElementsByTagName方法（获取后用数组取值[]取标签的次序）、appendChild方法、replaceChild方法（replaceChild (NEW, OLD);）

通信模板

window.onload = init;
function init() {
    var interval = setInterval(handleRefresh, 3000);
    handleRefresh();
}
function handleRefresh() {
    console.log("here");
    var url = "http://gumball.wickedlysmart.com" +
                "?callback=updateSales" +
                //"&lastreporttime=" + lastReportTime +
                "&random=" + (new Date()).getTime(); //创建新的url骗过浏览器，旨在清除缓存
    var newScriptElement = document.createElement("script"); //以下皆为创建新的script过程
    newScriptElement.setAttribute("src", url);
    newScriptElement.setAttribute("id", "jsonp");
    var oldScriptElement = document.getElementById("jsonp");
    var head = document.getElementsByTagName("head")[0];
    if (oldScriptElement == null) {
        head.appendChild(newScriptElement);
    }
    else {
        head.replaceChild(newScriptElement, oldScriptElement);
    }
}

七、Web工作线程

JS是单线程的，实现多线程需用Web worker API；
工作线程代码单独放在一个JS文件里；
工作线程不能访问页面的DOM或函数，但可使用XMLHttpRequest和localStorage；
用postMessage可以向工作线程发送字符串、数组和对象，但不能发送函数；
工作线程将其onmessage属性设置为一个处理函数，来接收页面发送的消息；
工作线程结果封装在一个event对象中，并置于data属性中；
用event.target可以查找哪个工作线程发出了消息；
可从页面用worker.terminate()终止一个线程，也可在工作线程中用close()自己终止；
用importScripts可以在线程中使用JS库，也可以利用JSONP；

Web工作线程模板

window.onload = function() {
    if (Worker == "undefined") {
        document.getElementById("output").innerHTML = "Bummer, no Web Workers";
        //查看是否支持web工作线程
    }
    else {
        var worker = new Worker("worker.js");
        //创建工作线程，可以有多个且不同的js：
        /*
        var worker = new Worker("worker.js");
        var worker2 = new Worker("worker.js");
        var worker3 = new Worker("another_worker.js");
        */
        worker.postMessage("ping");
        //postMessage方法可以发送字符串、数组、JSON对象等，但不能发送函数
        worker.onmessage = function(event) {
            var message = "Worker " + " says " + event.data;
            document.getElementById("output").innerHTML = message;
        }
        //onmessage：接收到的消息包装与event对象中，含两个属性：data及target
        worker.onerror = function(error) {
            document.getElementById("output").innerHTML =
                "There was an error in " + error.filename + 
                " at line number " + error.lineno +
                ": " + error.message;
        };
    }
}

八、本地存储

Web存储包括本地存储localStorage和会话存储sessionStorage；
本地存储是持久的，会话存储在关闭窗口或退出浏览器时将自行清除；二者API完全一致；
每个域有5M的本地存储，域间的数据项是互不可见的；
localStorage.setItem(key)可以增加一个值；
localStorage.getItem(key)可以获取一个值；
localStorage.key()方法可以列出localStorage中的键；
F12开发者工具下resources可以查看、编辑键值对；
删除方法：removeItem(key)及clear；
每个键必须是唯一的，否则最新的数据项将覆盖原有的；
建议用getTime()方法，以时间生成唯一的键；
若要存储更复杂的数据，可用JSON，以JSON.stringify转化为字符串，以JSON.parse转化为对象；

本地存储模板

localStorage.setItem("sticky_0", "Pick up dry cleaning");
    //localStorage对象：
    //setItem方法：setItem（"键的自定义字符串","值的自定义字符串"），键及值都需采用字符串形式
    //字符串可用parseInt或parseOut转换为数值
    /*
    另可用关联数组语法：
    localStorage["sticky_0"]="Pick up dry cleaning";
    var sticky=lovalStorage["sticky_0"];
    */
localStorage.setItem("sticky_1", "Cancel cable tv, who needs it now?");
var stickyValue = localStorage.getItem("sticky_0");
alert(stickyValue);
window.onload = init;
function init() {
    var button = document.getElementById("add_button");
    button.onclick = createSticky;
    for (var i = 0; i < localStorage.length; i++) { 
    //length属性给出localStorage的键值对的数目；
        var key = localStorage.key(i);
        //key方法可以给出localStorage中各项的键；
        //语法：localStorage.key(i)取值；localStorage[key]返回；
        if (key.substring(0, 6) == "sticky") {
            var value = localStorage.getItem(key);
            addStickyToDOM(value);
        }
    }
}
function createSticky() {
    var value = document.getElementById("note_text").value;
    var key = "sticky_" + localStorage.length;
    //数组起始序数为0，可以length递增1；
    localStorage.setItem(key, value);
    addStickyToDOM(value);
}
function addStickyToDOM(value) {
    var stickies = document.getElementById("stickies");
    var sticky = document.createElement("li");
    var span = document.createElement("span");
    span.setAttribute("class", "sticky");
    span.innerHTML = value;
    sticky.appendChild(span);
    stickies.appendChild(sticky);
}