HTML5 postMessage 和 onmessage API 详细应用

Sky-Tiger · 发表于 2014-8-4 21:34

Html5的基本布局（语义化的标记）

Html是用来描述网页的一种语言，它是一种标记语言，标记语言就是一套标记标签，比如用来描述一段文字是标题的<h1>，标记一个图像的<image>等。html4中使用没有任何语义的<div>用于内容分块，所以html4的网页基本布局是这样的，许多div加上用于命名区块的class或者id，

<div id="wrapper">
<div id="header"></div>
<div id="main">
      <div id="sidebar"></div>
      <div id="content"></div>
</div>
<div id="footer"></div>
</div>
在html5中，这种情况将被改变，html5新增了若干个明确语义化的标签，在html5中，<div id="header">将会被简洁的<header>代替，如下：

<article>
<header></header>
<section></section>
<section></section>
<aside></aside>
<footer></footer>
</article>
其中的<section>和<article>标签值得注意，<section>标签用来分组相类似的信息，而<article>标签则应该是用来放置诸如一篇文章或是博客一类的信息，你可以在<artile>中嵌入<header>，<section>，<footer>等内容。<article>标签，正如它的名称所暗示的那样，提供了一个完整的信息包。相比之下，<section>标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，因为这样的话其所代表的含义就会丢失。

一个普通的Html 5页面结构会如下所示：

<!DOCTYPE html>
<html>
<title>标题</title>
<body>
      <header></header>
      <nav>导航</nav>
      <article>
         <section>区块</section>
      </article>
      <aside>侧边栏</aside>
      <footer>页脚</footer>
</body>
</html>

Sky-Tiger · 发表于 2014-8-4 21:34

Html5对表单的支持

Html5新增了多个控件类型，如输入网址的url类型，输入电子邮箱地址的email类型，用于输入日期的date类型，更有用于输入颜色的color类型等等。更为神奇的是这些类型还内建表单验证，如required属性就说明该表项不能为空，max属性提供了该表项输入允许的最大值，当然在html4中这些功能也可以通过javascript来实现，但是的内建在html5中的表单验证优越性不言而喻。需要注意的是，现在Html5的输入类型还没有被所有浏览器所支持。

测试代码：

<form>
Email:<input type="email" required /></br>
Number:<input type="number" max="10" /></br>
Date :<input type="date"></br>
File:<input type="file" accept="image/png" /></br>
<input type="submit">
</form>
实例页面：input.html

Sky-Tiger · 发表于 2014-8-4 21:34

Html5中的Media

Html5 的另一大特点就是不借助其他插件就可播放视频和音频文件，在网页中添加如下代码就可以用一个宽度为320像素、高度为240像素的带控制条的浏览器内置播放器来播放”movie.mp4″视频文件，而不再需要使用Adobe Flash播放器。效果就像这样：video.html

<video src="movie.mp4" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
当然这种直接使用视频源文件的方法会牵扯到视频文件格式的版权问题，所以各主流浏览器都做不到对所有的视频格式都完全支持，这时就需要使用如下的代码来实现视频播放：

<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">Download</a>
</object>
</video>
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的，由于视频格式的版权问题，不同的浏览器支持不同的视频格式，所以video 元素含有允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。在上面的那个程序里：

如果浏览器支持video元素，也支持H264（mp4格式），那么就使用第一个视频；
如果浏览器支持video元素，不支持H264（mp4格式）但支持Ogg，那么用第二个视频；
如果浏览器不支持video元素，那么就播放Flash；
如果浏览器不支持video元素，也不支持Flash，那么就给出了下载链接，这下就该没有问题了吧。
不得不提，html5的支持媒体播放的特性会冲击adobe flash在网络媒体中的地位，Adobe公司已经深刻意识到了这个问题，更多信息参见关于Adobe最新的Flash/HTML5策略的问答。

Sky-Tiger · 发表于 2014-8-4 21:35

Html5中的Media

Html5 的另一大特点就是不借助其他插件就可播放视频和音频文件，在网页中添加如下代码就可以用一个宽度为320像素、高度为240像素的带控制条的浏览器内置播放器来播放”movie.mp4″视频文件，而不再需要使用Adobe Flash播放器。效果就像这样：video.html

<video src="movie.mp4" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
当然这种直接使用视频源文件的方法会牵扯到视频文件格式的版权问题，所以各主流浏览器都做不到对所有的视频格式都完全支持，这时就需要使用如下的代码来实现视频播放：

<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">Download</a>
</object>
</video>
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的，由于视频格式的版权问题，不同的浏览器支持不同的视频格式，所以video 元素含有允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。在上面的那个程序里：

如果浏览器支持video元素，也支持H264（mp4格式），那么就使用第一个视频；
如果浏览器支持video元素，不支持H264（mp4格式）但支持Ogg，那么用第二个视频；
如果浏览器不支持video元素，那么就播放Flash；
如果浏览器不支持video元素，也不支持Flash，那么就给出了下载链接，这下就该没有问题了吧。
不得不提，html5的支持媒体播放的特性会冲击adobe flash在网络媒体中的地位，Adobe公司已经深刻意识到了这个问题，更多信息参见关于Adobe最新的Flash/HTML5策略的问答。

Sky-Tiger · 发表于 2014-8-4 21:35

动画元素Canvas

HTML5 的 canvas 元素可以使用 JavaScript 直接在网页上绘制图像。在canvas中，画布是一个很重要的概念，画布是一个矩形区域，利用canvas可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素十分简单，只需要向 HTML5 页面添加 canvas 元素，规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>
然后通过 JavaScript 来绘制，canvas 元素本身是没有绘图能力的，因此所有的绘制工作必须在 JavaScript 内部完成：

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");
然后，创建 context 对象：

var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。fillRect 方法拥有参数 (0,0,150,75)。意思是：在画布从左上角开始 (0,0)绘制一个 150×75 的矩形，很简单吧。上面的例子是最简单的例子，canvas是十分强大的，现在大多数html5的Demon页面都是在展示html5强大的动画能力，通过canvas完全可以实现与flash动画相媲美的页面，下面的几个网页供大家惊叹：

一个神奇的茶壶（拖动茶壶就会发现不可思议的事情）
HTML5版超级玛丽

Sky-Tiger · 发表于 2014-8-4 21:35

Drag&Drop

HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽，如果draggable=”true”，则元素可被拖拽，否则只能选择元素的文本。下面几行简单的代码可以简单的说明Html5的Drag&Drop特性：

<section>
<p draggable="true" ondragstart="dragstartHandler(event)">
Drag me!Drag me!!</p>
<p draggable="false">Don’t drag me!!</p>
</section>
Section区块中包含两行文本，第一行文本的draggable = true，即可拖拽的，且声明了发生dragstart事件是调用的函数；第二行文本draggable = false，即不可拖拽的。下面的<script>实现了发生dragstart事件时调用的函数，显示一个提示框。

function dragstartHandler(e)
{alert('dragstart');}
实例页面：drag.html

运行这段代码可以发现，当拖拽第一行文本时会弹出一个提示框，而拖拽第二行文本时除了复制文本以外没有任何反应，这是因为当拖拽第一行文本时会触发ondragstart事件，从而调用相应的处理函数产生一个提示框。同样的定义其他拖拽事件如ondragenter、ondragover、ondragover、ondrop等的动作函数就可以完成一个完整的拖拽动作，实现想要实现的目的。

下面是一个网络上的demon供大家尝鲜：

Sky-Tiger · 发表于 2014-8-4 21:36

Html 5的Application Cache

现在，web应用的火爆已经是不折不扣的现实，并且相对传统的应用,web应用不需要安装，所占空间小的特性使其具备传统软件应用所不具备的优势，然而，目前制约web应用最大的问题在于网络连接不能够无时无处。在飞机上，汽车上，火车上，有很多地方都无法被网络信号所覆盖，因此web应用也就无法使用。

HTML5的离线存储使得这个问题迎刃而解。HTML5的web storage API 采用了离线缓存，会生成一个清单文件（manifest file），这个清单文件实质就是一系列的URL列表文件，这些URL分别指向页面当中的HTML,CSS,Javascrpit,图片等相关内容。

一个Mainfest file实例：

– CACHE MANIFEST
/demo/test/style.css
/demo/test/jquery.min.js
/demo/test/test.html
当使用离线应用时，应用会引入这一清单文件，浏览器读取这一文件，下载相应的文件，并将其缓存到本地。使得这些web应用能够脱离网络使用，而用户在离线时的更改也同样会映射到清单文件中，并在重新连线之后将更改返回应用，工作方式与我们现在所使用的网盘有着异曲同工之处。

Sky-Tiger · 发表于 2014-8-4 21:36

Local storge

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。此外，在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。针对以上情况，HTML5中给出了更加理想的解决方案：假如你需要存储复杂的数据则可以使用Web Database，可以像客户端程序一样使用SQL（不过Web Database标准当前正陷于僵局之中，而且目前已经实现的浏览器很有限）；假如你需要存储的只是简单的数据则可以使用Web Storage。

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

下面一段代码同时包含sessionStorage和localStorage用于统计页面的访问次数：

if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
sessionStorage.pagecount=1;
}
document.write("Visits "+ sessionStorage.pagecount + " time(s).");
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
多次刷新页面locaStorage.html可以发现，两种计数每刷新一次就增加1，如果把页面关闭然后再打开，那么sessionStorage计数将会从0开始重新计数，而localStorage仍然继续上次的计数。这正是因为sessionStorage仅仅存储本次会话中的数据，而localStorage则会持久的存储数据。

Sky-Tiger · 发表于 2014-8-16 21:53

Xtext uses the MWE2 DSL to configure the generation of its artifacts; the default generated .mwe2 file already comes with good defaults, thus, for the moment, we will not modify it. However, it is interesting to know that by tweaking this file we can request the Xtext generator to generate support for additional features, as we will see later in this book.
During the MWE2 workflow execution, Xtext will generate artifacts related to the UI editor for your DSL, but most important of all, it will derive an ANTLR specification from the Xtext grammar with all the actions to create the AST while parsing. The classes for the nodes of the AST will be generated using the EMF framework (as explained in the next section).

Sky-Tiger · 发表于 2014-8-16 21:53

A new Eclipse instance will be run and a new workbench will appear; in this instance, our Entities DSL implementation is available. So let's create a new General project (call it, for instance, sample). Inside this project, create a new file; the name of the file is not important, but the file extension must be entities (remember that this was the extension we chose in the Xtext project wizard). As soon as the file is created, it will also be opened in a text editor, and you will be asked to add the Xtext nature to your project. You should accept that to make your DSL editor work correctly in Eclipse.
The editor is empty, but there is no error since an empty program is a valid Entities program (remember how the Model rule was defined with the operator *). If you access content assist (with Ctrl + Space bar), you will get no proposal; instead, the entity keyword is inserted for you. This is because the generated content assist is smart enough to know that in that particular program context there is only one valid thing to do: start with the keyword entity.