HTML5 学习之三 web worker,server-send,表单属性

HTML5 Web Workers
一般情况下,当在HTML页面中执行脚本时,页面的状态是不可响应的,知道脚本已经完成。
Web worker是运行在后天的JavaScript,独立于其他脚本,不影响页面的性能,开放者可以继续做任何要做的事情:点击,选取内容等等,而此时web worker在后台运行。
浏览器支持:
除了IE其他浏览器都支持
Web Workers和DOM
由于web Workers位于外部文件中,他们无法访问下列JavaScript对象:
1、  window对象
2、  document对象
3、  parent 对象
 
要使用web worker先检测用户的浏览器是否支持它:
if(typeof(Worker)!==”undefined”){
 //浏览器支持
}else{
 //浏览器不支持
}
 
创建Web Workers对象
下面代码检测是否存在worker,如果不存在会创建一个:
if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }
w.onmessage=function(event)
{
document.getElementById("result").innerHTML=event.data;
};
前面说了,Web worker运行在一个独立于其他脚本,所以这里需要一个单独的js文件,js文件事例如下:
var i=0;
 
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
 
timedCount();
主要代码就是postMessage()方法。它会向HTML页面传回一段消息。
注释:web worker通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。
当js向页面传回消息之后,worker的onmessage事件监听器就可以收到这个消息,这个消息就存在于event.data中,上面的例子就是直接将获得内容展示到了页面上。
 
停止Web worker
当创建Web worker对象之后,它会继续监听消息,直到其被终止才结束,并释放浏览器/计算机资源,那就请使用terminate()方法。
w.terminate();
 
eg:
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}
 
function stopWorker()
{
w.terminate();
}
</script>
 
Server-Sent事件-单向消息传递:
该事件的作用是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
接收Server-sent事件通知:
EventSource对象用于接收服务器发送的事件通知:
Var source = new EventSource(“demo_sse.php”); //创建一个新的EventSource对象,并规定发送更新的页面的URL(demo_sse.php)
Source.onmessage=function(event){
 Document.getElementById(“result”).innerHTML =event.data;
}
//收到更新后,发生onmessage事件,然后把接收的数据放到result元素中
 
HTML5 表单:
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
新的输入类型:(IE完全不支持)
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
但是不支持不代表不能正常显示,还是可以在主流浏览器上显示为常规的文本域的
Input 类型-email
在提交表单时会自动验证email域的值:
E-mail: <input type="email" name="user_email" />
其他类型于此用法类似。
这里要特别说一下number类型
它添加属性值max,min,step,value字段类型来对数字进行限定
Max,min很好理解,数字文本域中最大最小值,step规定合法的数字间隔(如果step=3,则合法的数是-3,0,3,6等),value规定默认值
 
Input 类型 - Date Pickers(数据检出器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)
 
HTML5表单属性:
新的form属性:
Autocomplete //form 或input域应该拥有自动完成的功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
Novalidate
新的input属性:
Autocomplete//同上
Autofocus //规定页面加载时,域自动获得焦点
注释:autofocus 属性适用于所有 <input> 标签的类型。
Form //规定输入域所属的一个或多个表单
注释:form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id:
Form override(formaction,formenctype,formmethod,formnovalite,formtarget)//允许中邪form元素的某些属性设置
 
Height和width  // height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释:height 和 width 属性只适用于 image 类型的 <input> 标签
 
List //规定输入域的datalist(是输入域的选项列表)
注释:list属性适用于一下类型的<input>标签:text,search,url,telephone,email,date pickers,number,range以及color.
Eg:
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
 
Min,max,step
注释:min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
下面的例子显示一个数字域,该域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9):
 
Multiple//规定输入域中可选择多个值
注释:multiple属性适用于email和file类型的<input>标签
 
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释:novalidate 属性适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.
 
Pattern
注释:pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
 
Placeholder //提供一种提示(hint),描述输入域所期待的值
注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
 
Retuired //必须在提交之前写入输入域(不能为空)
注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<input type="text" name="usr_name" required="required" />