前生今世,40个重要的HTML5面试题及答案

HTML 5 History API的”前生今世”

2014/10/23 · HTML5 ·
HTML5

原文出处:
tuts+   译文出处:淡忘浅思的博客(@dwido)   

History是有趣的,不是吗?在之前的HTML版本中,我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法,但这就是一切我们能做的了。

但是,利用HTML 5的History
API,我们可以更好的控制浏览器的历史记录了。例如:我们可以添加一条记录到历史记录的列表中,或者在没有刷新时,可以更新地址栏的URL。

百行 HTML5 代码实现四种双人对弈游戏

2012/06/30 · HTML5 · 1
评论 ·
HTML5

来源:于丙超@developerworks

简介: 本文是一个非常具有挑战性的编程,因为 100 行代码,约莫 10000
个字符左右,将实现围棋、五子棋、四子棋和翻转棋四种双人对弈游戏。请注意,这四个对弈游戏不是初级编程者的习作,而是有着棋盘、立体棋子、事件、走棋规则判断、输赢判断的完整对弈游戏,并且可以离线存储到
iPad、Android
平板中,试想一下,把这种游戏下载到平板中,就可以在火车,旅游景区,等没有信号的地方进行对弈,是不是扩展了平板电脑的功能,是不是一种很惬意的事情。而且,关键是,这个程序没有图片,不需要去应用商店付费下载,仅仅是用
HTML5 技术写的 100
行代码而已,绝对是目前最迷您精悍的双人对弈游戏源码。(编者注:由于网页代码的宽度有限制,所以作者的源代码经过了一些换行处理,特此说明。)

目标

要做一个完整的双人对弈游戏,至少要做如下事情,第一步:绘制棋盘。不同的棋类游戏棋盘不同,这一点需要进行动态处理;第二步:绘制棋子。需要说明的是,围棋,五子棋等这些棋子都是圆的啊,请不要为了图片苦恼,在
HTML5
时代,我们用代码就可以实现立体圆形棋子;第三步:判断落子事件。当然是要定位手指的点击位置,这四种棋中,有的是落在框里面的,有的却是落在纵横交错的棋盘十字线上,需要动态处理;第四步:判断落子规则。下棋都有规则,不要因为代码少,就将规则打折扣,否则程序不成熟,会变成小朋友的玩具了;第五步:判断输赢。最后,我们要判断输赢。也就是要数子,这个事情必须由程序来完成,因为下棋总得需要一个裁判嘛;第六步:就是平板电脑时代,我们得实现离线应用。这个太重要了,否则,要是在台式电脑上,接根网线玩的游戏,已经遍地都是了,您写得再牛,有什么用?就是要移动,在没有信号的地方,才有市场,现在平板,智能手机这么多,在没有网络信号的地方,掏出移动设备来下棋,才是一件很牛的事情。

绘制棋盘

前面说了围棋、五子棋、四子棋和翻转棋的棋盘并不相同,围棋是纵横 18
个格,其他三种棋则是 8
个格。所以绘制棋盘是需要有参数。这是个小问题,大问题是,选择什么方法来绘制棋盘?

HTML5 框架下,有至少 3 种方法:第一种,用 Canvas 画线;第二种,用
DIV,CSS3 里面增加了行列属性;第三种,用 table 标签。

用哪一种速度最快,代码少呢?答案是:第三种。多少有点失望啊,HTML5
不是万能的。详细代码如下:

XHTML

this.board=function(name,width,height,rowBak,colBak){ /* 画棋盘 */
nameBak=name; if(“turnover”==name){row=8;col=8;}else
if(“gogame”==name){row=18;col=18;} var
aW=Math.floor(width/(col+2)),aH=Math.floor(height/(row+2));
minL=(aW>aH?aH:aW)-4;// 这个减法很重要,否则填空时会把表格撑大 var
array=new Array(“<div style=\”margin:”+minL+”px;\”> “+
“<table border=1 cellspacing=0 width=\””+(aW*col)+”\”
height=\””+(aH*row)+”\”>”); for(var i=0;i<row;i++){
array.push(“<tr>”); for(var j=0;j<col;j++){array.push(“<td
align=center>”+
evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+”</td>”);}
if(nameBak!=”four”&&nameBak!=”turnover”)/* 将事件添加到表格中 */
array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2));
array.push(“</tr>”); } if(nameBak!=”four”&&nameBak!=”turnover”){
for(var j=0;j<=col;j++){
array.push(evt(row,j,minL,minL,aW*j+minL/2+8,aH*row+minL/2)); } }
document.write(array.join(“”)+”</table></div>”);
setClick(row,col,minL,minL);/* 初始化事件 */ start();/* 初始化棋子
*/ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
this.board=function(name,width,height,rowBak,colBak){ /* 画棋盘 */
nameBak=name;
if("turnover"==name){row=8;col=8;}else if("gogame"==name){row=18;col=18;}
var aW=Math.floor(width/(col+2)),aH=Math.floor(height/(row+2));
minL=(aW>aH?aH:aW)-4;// 这个减法很重要,否则填空时会把表格撑大
var array=new Array("<div style=\"margin:"+minL+"px;\"> "+
"<table border=1 cellspacing=0 width=\""+(aW*col)+"\"
height=\""+(aH*row)+"\">");
for(var i=0;i<row;i++){
       array.push("<tr>");
       for(var j=0;j<col;j++){array.push("<td align=center>"+
evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+"</td>");}
       if(nameBak!="four"&&nameBak!="turnover")/* 将事件添加到表格中 */
             array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2));
             array.push("</tr>");
}
   if(nameBak!="four"&&nameBak!="turnover"){
           for(var j=0;j<=col;j++){
               array.push(evt(row,j,minL,minL,aW*j+minL/2+8,aH*row+minL/2));
               }
           }
document.write(array.join("")+"</table></div>");
setClick(row,col,minL,minL);/* 初始化事件 */
start();/* 初始化棋子 */
}

上面代码中,最重要的是标黑体的第 6 行代码,这里面有两个诀窍,第一个就是
table 的定义,第二个就是使用了 Array
数组。为什么要使用数组,而不是定义一个字符串呢?答案是优化,就是 Array
数组的 push 方法的速度要远远快于 String 字符串的加 + 运算。共计 16
行代码,一个棋盘就画好了,当然这其中不仅仅是画线,还有棋子处理,事件定义等方法的调用,后面将陆续谈到。

绘制棋子

绘制完棋盘,我们来绘制棋子。我们挑选的这四种棋,虽然棋盘不同,但是棋子都是相同的,都是黑白棋子。这在以前,做在线对弈,除了
Flash 能实现美观效果外,其他的必须先请美工做几副小图片,HTML5
时代,美工的人力和沟通成本就节省了。

我们至少有两种方法绘制棋子,第一种是:canvas 类,第二种就是 css
的圆角属性。用哪种速度又快代码又少呢?答案是第二种,圆角。代码如下:

CSS

function man(width,height,id,colorBak){ /* 画棋子 */ var
color=colorBak==null?(order++%2==0?”000″:”CCC”):colorBak; var
r=”border-radius:”+width/2+”px;”; var
obj=id==null?event.srcElement:_$(id); obj.innerHTML=”<div
id=\”man_”+color+”_”+order+”\” style=\”display:block;-webkit-”
+r+”-moz-“+r+””+r+”-moz-box-shadow:inset 0 -10px 40px rgba(0,0,0,1);”+
“box-shadow:inset 0 -10px 40px rgba(0,0,0,1);”+
“background:-webkit-gradient(radial, 50 40, 30, center center, 80,
from(#”+color+”), to(rgba(255,255,255,1)));”+
“width:”+width+”px;height:”+height+”px;\”></div>”; }

1
2
3
4
5
6
7
8
9
10
11
function man(width,height,id,colorBak){ /* 画棋子 */
   var color=colorBak==null?(order++%2==0?"000":"CCC"):colorBak;
   var r="border-radius:"+width/2+"px;";
   var obj=id==null?event.srcElement:_$(id);
   obj.innerHTML="<div id=\"man_"+color+"_"+order+"\" style=\"display:block;-webkit-"
   +r+"-moz-"+r+""+r+"-moz-box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+
   "box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+
   "background:-webkit-gradient(radial, 50 40, 30, center center, 80, from(#"+color+"),
      to(rgba(255,255,255,1)));"+
   "width:"+width+"px;height:"+height+"px;\"></div>";
}

上面代码中,我们看到,我们将每一个棋子定义了一个 DIV,使用了 CSS3 的
shadow,gradient
属性,并且可以根据棋盘的大小自动计算棋子的大小,另外,如果用户不喜欢黑白颜色,甚至可以定义成红黄颜色,女生和小朋友估计会喜欢。这
5
行代码是画一个棋子的方法,做一个简单的循环,就可以画出多个棋子,方法如下。

CSS

function moreMan(array){for(var i=0;i<array.length;i++)
man(minL,minL,nameBak+”_”+array[i]);} /* 绘制多个棋子 */

1
2
3
function moreMan(array){for(var i=0;i<array.length;i++)
man(minL,minL,nameBak+"_"+array[i]);}
/* 绘制多个棋子 */

处理事件

绘制完棋盘和棋子,我们来分析一下用户的动作。用户的动作无非就是两种,一种是点击棋盘
table,另外一种就是点击棋子 DIV。难点在点击 table
这里,我们要获知用户点击 table 的位置。

传统思路可能是这样,使用 event 方法,获得 x,y 的坐标,然后与 table
的左上角做减法,然后再跟单元格 cell 做除法。听起来都麻烦。

如果您仔细阅读了前面的代码,就应该发现,其实在画棋盘是,我们向 array
数组中 push 了一个 evt 方法,很明显,这个 evt
方法要返回一个字符串变量的,那么他的内容是什么呢?答案揭晓:

CSS

function evt(i,j,width,height,left,top){ /* 单一单元格事件 */ return
“<div id=\””+nameBak+”_”+i+”_”+j+”\” style=\”position:”+
(nameBak==”four”||nameBak==”turnover”?”block”:”absolute”)+ “;border:0px
solid #000;width:”+
width+”px;height:”+height+”px;top:”+top+”px;left:”+left+”px;\”></div>”;
}

1
2
3
4
5
6
function evt(i,j,width,height,left,top){ /* 单一单元格事件 */
  return "<div id=\""+nameBak+"_"+i+"_"+j+"\" style=\"position:"+
(nameBak=="four"||nameBak=="turnover"?"block":"absolute")+
";border:0px solid #000;width:"+
width+"px;height:"+height+"px;top:"+top+"px;left:"+left+"px;\"></div>";
}

原理是一个
DIV。对了,这个添加事件的方法非常特殊,实际上是在每个棋盘的交叉的地方画了一个
DIV,然后给 DIV 添加事件。

CSS

function setClick(row,col,width,height){ for(var i=0;i<=row;i++){
for(var j=0;j<=col;j++){ var els=_$(nameBak+”_”+i+”_”+j);
if(els!=null)els.onclick=function(){if(rule())man(width,height);}; } } }

1
2
3
4
5
6
7
8
function setClick(row,col,width,height){
    for(var i=0;i<=row;i++){
            for(var j=0;j<=col;j++){
                var els=_$(nameBak+"_"+i+"_"+j);
                if(els!=null)els.onclick=function(){if(rule())man(width,height);};
}
    }
}

需要说明的是,DIV 一定要先定义,即 document.write 输出出来,然后才能执行
onclick 的定义,否则会返回 DIV 未定义的错误。寥寥 10
行代码,把事件问题搞定了。

落子规则

前面说了,用户点击事件有两种,点击棋盘 table 事件我们采用额外增加 DIV
的方法巧妙解决了,第二种点击棋子的方法又该如何呢?

先要说明的是,点击棋子其实是一种错误的事件,点击棋盘可以落子,点击棋子是什么意思?黑白棋点击棋子是无意义的,我们必须要进行判断,不能在有子的地方落子,这是规则之一。所以必须要定义一个方法,判断是不是点击的地方是不是有棋子。代码如下:

CSS

function isMan(row,col){var obj=_$(nameBak+”_”+row+”_”+col,1);
if(obj==null||obj.indexOf(“man_”)==-1)return null; else
if(obj.indexOf(“000”)!=-1) return 0; else
if(obj.indexOf(“CCC”)!=-1)return 1;}

1
2
3
4
5
function isMan(row,col){var obj=_$(nameBak+"_"+row+"_"+col,1);
if(obj==null||obj.indexOf("man_")==-1)return null;
else if(obj.indexOf("000")!=-1)
  return 0;
else if(obj.indexOf("CCC")!=-1)return 1;}

想不到吧,其实只要一行代码就可以就可以做是否有子的判断,怎么判断的,诀窍就在于判断
DIV 的颜色,棋子要么黑,返回 0,要么白,返回
1,但是空白地方是没有颜色的,返回
null。这里要特别注意返回值,后面判断输赢的时候还要用,所以不能简单通过
true 或者 false 的的返回值来判断是否有子,而是要判断出有什么颜色的子。

对于五子棋和围棋,这一条规则够用了,但是对于翻转棋和四子棋,还有第二条规则:不能在四周空白的地方落子,就是说必须是相连的。也就是说,不仅仅要判断点击的地方是不是有棋子,还要判断其四周是不是有棋子,这个,不是可以有,而是,必须有。需要做一个小循环啊,代码如下:

CSS

function rule(){/* 走棋规则 */ var id=event.srcElement.id;
if(id.indexOf(“man_”)==0){alert(“不能在有子的地方落子”);return
false;}else{ var p=id.indexOf(“_”),p1=id.lastIndexOf(“_”); var
row=id.substr(p+1,p1-p-1)*1,col=id.substr(p1+1)*1;
if(“gobang”==nameBak)return gobang(row,col); else if(“four”==nameBak){
if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
isMan(row+1,col)==null&& isMan(row-1,col)==null){
alert(“四子棋不能在四周空白的地方落子!”); return false; } return
gobang(row,col,3); }else if(“turnover”==nameBak){
if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
isMan(row+1,col)==null&&isMan(row-1,col)==null&&
isMan(row-1,col-1)==null&& isMan(row+1,col+1)==null){
alert(“翻转棋不能在四周空白的地方落子!”); return false; } turnover();
}else if(“gogame”==nameBak){ } } return true; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function rule(){/* 走棋规则 */
var id=event.srcElement.id;
if(id.indexOf("man_")==0){alert("不能在有子的地方落子");return false;}else{
     var p=id.indexOf("_"),p1=id.lastIndexOf("_");
     var row=id.substr(p+1,p1-p-1)*1,col=id.substr(p1+1)*1;
     if("gobang"==nameBak)return gobang(row,col);
        else if("four"==nameBak){
     if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
     isMan(row+1,col)==null&&
     isMan(row-1,col)==null){
     alert("四子棋不能在四周空白的地方落子!");
     return false;
}
return gobang(row,col,3);
}else if("turnover"==nameBak){
if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
isMan(row+1,col)==null&&isMan(row-1,col)==null&&
isMan(row-1,col-1)==null&&
isMan(row+1,col+1)==null){
alert("翻转棋不能在四周空白的地方落子!");
return false;
}
  turnover();
}else if("gogame"==nameBak){
     }
     }
  return true;
}

循环中,反复调用 isMan 方法判断是否有棋子,所以如果 isMan
写得不够简练,快速,不知道要耗费多少时间啊。数一数,总共 19
行代码就处理了落子规则。

到这里,我们绘制了棋盘,棋子,获得了点击时间,判断了落子规则,才用了 40
行左右的代码,其实程序基本上可用了,但是我们不能满足啊,还得让他更加智能一些,我们还需要一个裁判断输赢。

判断输赢

要判断输赢,我们必须要知道下棋的规则:

五子棋是各个方向的五子相连算赢,四子棋是各个方向四个子相连算赢,翻转棋数棋子的个数,围棋则要麻烦些,不仅仅数棋子个数,还要数围住的区域。

逻辑上好像很复杂啊,似乎也是计算最多的地方,有点人工智能的意思。没错,如果前面的基础打得不好,这里的确要耗费很多代码,但是因为我们前面定义了
DIV 用颜色判断是否存在棋子的 iaMan
方法,这里再使用一个小技巧,就可以轻松搞定这个输赢判断。先看看五子棋和四子棋的输赢判断代码,然后对照代码来分析。

CSS

function gobang(row,col,num){ num=num==null?4:num; var
rs=[[],[],[],[]],b=[],w=[];/*
这里采用四维数组来存储棋子位置 */ for(var
i=0,j=0;i<num*2+1;i++,j++){ rs[0].push(isMan(row-num+i,col));
rs[1].push(isMan(row,col-num+j));
rs[2].push(isMan(row-num+i,col-num+j));
rs[3].push(isMan(row-num+i,col-num+j));
if(i<num){b.push(0);w.push(1);} }
if(rs.join(“#”).indexOf(b.join(“,”))!=-1){alert(“黑棋胜”);return false;
}else if(rs.join(“#”).indexOf(w.join(“,”))!=-1){alert(“白棋胜”);return
false;} return true; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function gobang(row,col,num){
num=num==null?4:num;
var rs=[[],[],[],[]],b=[],w=[];/* 这里采用四维数组来存储棋子位置 */
for(var i=0,j=0;i<num*2+1;i++,j++){
rs[0].push(isMan(row-num+i,col));
rs[1].push(isMan(row,col-num+j));
rs[2].push(isMan(row-num+i,col-num+j));
rs[3].push(isMan(row-num+i,col-num+j));
if(i<num){b.push(0);w.push(1);}
}
if(rs.join("#").indexOf(b.join(","))!=-1){alert("黑棋胜");return false;
}else if(rs.join("#").indexOf(w.join(","))!=-1){alert("白棋胜");return false;}
     return true;
}

共计 9 行代码就搞定,看懂没?首先定义了一个 Javascript 多维数组
rs=[[],[],[],[]],这种定义多维数组的方法,挑出来重点说明一下,因为搜索引擎上都是搜不到的,我讲课时差不多遇到的学生也都不清楚,他们大多采用
new Array,然后加循环的蜗牛方法。

第二步:从落子的地方开始循环,注意,不是循环整个棋盘,为的就是节省时间啊。循环设计纵横交叉四个方向,有棋子的地方,就向这个四维数组
push 棋子的颜色。

第三步:把数组 join 起来就 ok 啦,如果有 4 个或 5 个 1
相连,自然就是白棋胜,否则就是黑棋胜。

写道这里,就有点意思啦,注意我们处理的数据的方法,我称之为“块数据”的处理方法,就是充分利用
array
数组,保存一块一块的数据,无论写入,读取,还是统计分析,都是针对这一块数据进行,这样既可以提高内聚度,便于提炼出可以重用的方法,就可以大大的加快执行速度。

处理相连都不在话下,数子就更简单了,使用块数据处理方法,3 行搞定。

CSS

function turnover(){ if(order<64)return; var num=0;var
total=row*col;for(var i=0;i<row;i++){ for(var
j=0;j<col;j++){num+=isMan(i+”_”+j);} }
if(num<total/2)alert(“黑棋胜”+(total-num*2)+”子”); else
if(num>row*col/2)alert(“白棋胜”+(num*2-total)+”子”); else
alert(“平局”); }

1
2
3
4
5
6
7
8
9
function turnover(){
    if(order<64)return;
    var num=0;var total=row*col;for(var i=0;i<row;i++){
        for(var j=0;j<col;j++){num+=isMan(i+"_"+j);}
    }
if(num<total/2)alert("黑棋胜"+(total-num*2)+"子");
else if(num>row*col/2)alert("白棋胜"+(num*2-total)+"子");
else alert("平局");
}

棋子初始化

环环相扣地写到这里,还有最后一个关于棋子的问题需要处理。那就是,下五子棋是从空白棋盘开始,其他三种棋却一开始都是有子的。其实给一个空白棋盘也行,但是其他三种棋因为一般的前几步走法都是固定的,我们为了提高智能化程度,不得不在浪费四行代码,毕竟,我们的目标是一个市场化的产品,而不是一个初学者不考虑用户体验的程序。

CSS

function start(){
if(“turnover”==nameBak){moreMan([3+”_”+3,4+”_”+3,4+”_”+4,3+”_”+4]);
}else if(“four”==nameBak){man(minL,minL,nameBak+”_”+row/2+”_”+0);
}else
if(“gogame”==nameBak){moreMan([3+”_”+3,15+”_”+3,15+”_”+15,3+”_”+15]);
} }

1
2
3
4
5
6
function start(){
   if("turnover"==nameBak){moreMan([3+"_"+3,4+"_"+3,4+"_"+4,3+"_"+4]);
   }else if("four"==nameBak){man(minL,minL,nameBak+"_"+row/2+"_"+0);
   }else if("gogame"==nameBak){moreMan([3+"_"+3,15+"_"+3,15+"_"+15,3+"_"+15]);
   }
}

其实就是调用了一下 moreMan
方法,注意也是块数据引用,传输了一个数组,用下划线分割横向和纵向坐标。

做成离线应用

本文开头就说过,台式电脑的双人或多人对弈程序早已多如牛毛烂大街了,只有移动应用才能有市场,我们的目标就是奔着这个来的,所以最后必须做成离线应用。

如何实现 HTML5
的离线应用,搜索引擎很快能找到结果,其实只要三个关键步骤。

第一步;在 Web 服务器的配置文件中声明一下。Tomcat 和 Apache
的声明方式不相同,需要注意;

第二步:定义 manifest 文件,文件格式需要注意;

第三步:在 HTML 的文件中调用一下 manifest 文件。

根据这三个步骤,读者可以自行搜索细节,这里就不赘述了,我只讲搜索引擎搜不到的。

另外需要说明的是,iPad 和 Android
平板上浏览器实现全屏的方法也不一样,针对 iPad
用户,我们还必须定义一行能够实现全屏的代码。

  1. 效果图、在线演示、开放源代码

本文的在线演示网址是:,效果图如下图所示:

图 1. 效果图

图片 1

图中加了一个选择棋类型和设置背景功能,如要获得全部源代码,只要使用浏览器的查看源代码功能即可,限于篇幅,这里就不贴了。

总结

作为一个程序员,最高的境界不是写得代码越多越好,而是用最少的代码实现最多的计算,解决最多的问题。回想当年,盖茨在编写
Basic
时,为了节省几个字符需要绞尽脑汁通宵达旦,以至于遗留了千年虫世纪难题,反观今日,在云计算时代,随着硬盘和内存的容量越来越大,CPU
的运算越来越快,很多大型项目的程序员似乎失去了精简代码的习惯。但是移动计算的硬件,目前还没有那么高的配置,本文通过
HTML5
对弈游戏,使用“块数据”计算方法,实现了用最少代码实现最多计算的目标,特别适用移动计算,与大家共勉。

 

赞 收藏 1
评论

图片 2

40个重要的HTML5面试题及答案

2014/10/16 · HTML5 · 3
评论 ·
HTML5

本文由 伯乐在线 –
某小浩
翻译。未经许可,禁止转载!
英文出处:Shivprasad
koirala。欢迎加入翻译组。

为什么介绍History API ?

在这篇文章中,我们将了解HTML 5中History
API的来源。在此之前,我们经常使用散列值来改变页面内容,特别是那些对页面特别重要的内容。因为没有刷新,所以对于单页面应用,改变其URL是不可能的。此外,当你改变URL的散列值值,它对浏览器的历史记录没有任何影响。

然后,现在对于HTML 5的History
API来说,这些都是可以轻易实现的,但是由于单页面应用没必要使用散列值,它可能需要额外的开发脚本。它也允许我们用一种对SEO友好的方式建立新应用。此外,它能减少带宽,但是该怎么证明呢?

在文章中,我将用History API开发一个单页应用来证明上述的问题。

这也意味着我必须先在首页加载必要的资源。现在开始,页面仅仅加载需要的内容。换句话说,应用并不是一开始就加载了全部的内容,在请求第二个应用内容时,才会被加载。

注意,您需要执行一些服务器端编码只提供部分资源,而不是完整的页面内容。

内容

  • 介绍
  • SGML(标准通用标记语言)和HTML(超文本标记语言),XML(可扩展标记语言)和HTML的之间有什么关系?
  • 什么是HTML5?
  • 为什么HTML5里面我们不需要DTD(Document Type Definition文档类型定义)?
  • 如果我不放入<! DOCTYPE html>
    标签,HTML5还会工作么?
  • 哪些浏览器支持HTML5?
  • HTML5的页面结构同HTML4或者更前的HTML有什么区别?
  • HTML5中的datalist是什么?
  • HTML5中哪些是不同的新的表单元素类型?
  • HTML5中什么是输出元素?
  • 什么是SVG(Scalable Vector Graphics可缩放矢量图形)?
  • 我们能看到使用HTML5的SVG的简单例子么?
  • HTML5中canvas是什么?
  • 我们如何使用Canvas来画一条简单的线?
  • Canvas和SVG图形之间的区别是什么?
  • 如何使用Canvas和HTML5中的SVG去画一个矩形?
  • CSS(cascading style sheets级联样式表)中的选择器是什么?
  • 如何使用ID值来应用一个CSS样式?
  • CSS中使用列布局是什么?
  • 你能解释一下CSS的盒子模型么?
  • 你能解释一些CSS3中的文本效果么?
  • 什么是Web Workers?为什么我们需要他们?
  • Web Worker线程的限制是什么?
  • 我们如何在JavaScript中创建一个worker线程?
  • 如何中止Web Worker?
  • 为什么我们需要HTML5的服务发送事件?
  • HTML5中的本地存储概念是什么?
  • 我们如何从本地存储中添加和移除数据?
  • 本地存储的生命周期是什么?
  • 本地存储和cookies(储存在用户本地终端上的数据)之间的区别是什么?
  • 什么是事务存储?我们如何创建一个事务存储?
  • 本地存储和事务存储之间的区别是什么?
  • 什么是WebSQL?
  • WebSQL 是HTML5的一个规范吗?
  • 我们如何使用WebSQL?
  • HTML5中的应用缓存是什么?
  • HTML5中我们如何实现应用缓存?
  • 我们如何刷新浏览器的应用缓存?
  • 应用缓存中的回退是什么?
  • 应用缓存中的网络是什么?

介绍

我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。所以以下40个重要的问题将帮助你复习HTML5相关的知识。

这些问题不是你得到工作的高效解决方案,但是可以在你想快速复习相关主题的时候有所帮助。

快乐地找工作。

图片 3

SGML(标准通用标记语言)和HTML(超文本标记语言),XML(可扩展标记语言)和HTML的之间有什么关系?

SGML(标准通用标记语言)是一个标准,告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言,HTML是被用SGML描述的标记语言。

因此利用SGML创建了HTML参照和必须共同遵守的DTD,你会经常在HTML页面的头部发现“DOCTYPE”属性,用来定义用于解析目标DTD

XHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“;

1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

现在解析SGML是一件痛苦的事情,所以创建了XML使事情更好。XML使用了SGML,例如:在SGML中你必须使用起始和结束标签,但是在XML你可以有自动关闭的结束标签。

XHTML创建于XML,他被使用在HTML4.0中。你可以参考下面代码片段中展示的XML DTD

XHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

图片 4

总之,SGML是所有类型的父类,较旧的HTML利用SGML,HTML4.0使用派生自XML的XHTML

什么是HTML5?

HTML5是最新的HTML标准,他的主要目标是提供所有内容而不需要任何的像flash,silverlight等的额外插件,这些内容来自动画,视频,富GUI等

HTML5是万维网联盟(W3C)和网络超文本应用技术工作组(WHATWG)之间合作输出的

为什么HTML5里面我们不需要DTD(Document Type Definition文档类型定义)?

HTML5没有使用SGML或者XHTML,他是一个全新的东西,因此你不需要参考DTD,对于HTML5,你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档

如果我不放入<! DOCTYPE html> ,HTML5还会工作么?

不会,浏览器将不能识别他是HTML文档,同时HTML5的标签将不能正常工作

哪些浏览器支持HTML5?

几乎所有的浏览器Safari,Chrome,Firefox,Opera,IE都支持HTML5

HTML5的页面结构同HTML4或者更前的HTML有什么区别?

一个典型的WEB页面包含头部,脚部,导航,中心区域,侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容,我们可能要使用DIV标签。

但是在HTML5中通过为这些区域创建元素名称使他们更加清晰,也使得你的HTML更加可读

图片 5

以下是形成页面结构的HTML5元素的更多细节:

  • <header>:代表HTML的头部数据
  • <footer>:页面的脚部区域
  • <nav>:页面导航元素
  • <article>:自包含的内容
  • <section>:使用内部article去定义区域或者把分组内容放到区域里
  • <aside>:代表页面的侧边栏内容

HTML5中的datalist是什么?

HTML5中的Datalist元素有助于提供文本框自动完成特性,如下图所示:

图片 6

以下是DataList功能的HTML代码:

XHTML

<input list=”Country”> <datalist id=”Country”> <option
value=”India”> <option value=”Italy”> <option
value=”Iran”> <option value=”Israel”> <option
value=”Indonesia”> </datalist>

1
2
3
4
5
6
7
8
<input list="Country">
<datalist id="Country">
  <option value="India">
  <option value="Italy">
  <option value="Iran">
  <option value="Israel">
  <option value="Indonesia">
</datalist>

HTML5中什么是不同的新的表单元素类型?

这里有10个重要的新的表单元素在HTML5中被介绍

  1. Color
  2. Date
  3. Datetime-local
  4. Email
  5. Time
  6. Url
  7. Range
  8. Telephone
  9. Number
  10. Search

让我们一步一步了解这10个元素

如果你想显示颜色选择对话框

XHTML

<input type=”color” name=”favcolor”>

1
<input type="color" name="favcolor">

图片 7

如果你想显示日历对话框

XHTML

<input type=”date” name=”bday”>

1
<input type="date" name="bday">

图片 8

如果你想显示含有本地时间的日历

XHTML

<input type=”datetime-local” name=”bdaytime”>

1
<input type="datetime-local" name="bdaytime">

图片 9

如果你想创建一个含有email校验的HTML文本框,我们可以设置类型为“email”

XHTML

<input type=”email” name=”email”>

1
<input type="email" name="email">

图片 10

对于URL验证设置类型为”url”,如下图显示的HTML代码

XHTML

<input type=”url” name=”sitename”>

1
<input type="url" name="sitename">

图片 11

如果你想用文本展示数字范围,你可以设置类型为“number”

XHTML

<input type=”number” name=”quantity” min=”1″ max=”5″>

1
<input type="number" name="quantity" min="1" max="5">

图片 12

如果你想显示范围控制,你可以使用类型”range”

XHTML

<input type=”range” min=”0″ max=”10″ step=”2″ value=”6″>

1
<input type="range" min="0" max="10" step="2" value="6">

图片 13

想让文本框作为搜索引擎

XHTML

<input type=”search” name=”googleengine”>

1
<input type="search" name="googleengine">

想只能输入时间

XHTML

<input type=”time” name=”usr_time”>

1
<input type="time" name="usr_time">

如果你想使用文本框接受电话号码

XHTML

<input type=”tel” name=”mytel”>

1
<input type="tel" name="mytel">

HTML5中什么是输出元素?

当你需要计算两个输入的和值到一个标签中的时候你需要输出元素。例如你有两个文本框(如下图),你想将来自这两个输入框中的数字求和并放到标签中。

图片 14

下面是如何在HTML5中使用输出元素的代码

XHTML

<form onsubmit=”return false” öninput=”o.value = parseInt(a.value) +
parseInt(b.value)”> <input name=”a” type=”number”> + <input
name=”b” type=”number”> = <output name=”o” /> </form>

1
2
3
4
5
<form onsubmit="return false"  öninput="o.value = parseInt(a.value) + parseInt(b.value)">
  <input name="a" type="number"> +
  <input name="b" type="number"> =
  <output name="o" />
</form>

为了简单起见,你也可以使用“valueAsNumber”来代替“parseInt”。你同样能在output元素中使用“for”使其更加可读

XHTML

<output name=”o” for=”a b”></output>

1
<output name="o" for="a b"></output>

什么是SVG(Scalable Vector Graphics可缩放矢量图形)?

SVG(Scalable Vector Graphics可缩放矢量图形)表示可缩放矢量图形。他是基于文本的图形语言,使用文本,线条,点等来进行图像绘制,这使得他轻便,显示更加迅速

我们能看到使用HTML5的SVG的简单例子么?

比方说,我们希望使用HTML5 SVG去显示以下简单的线条

图片 15

下面是HTML5代码

XHTML

<svg id=”svgelem” height=”[object SVGAnimatedLength]”
xmlns=”; <line style=”stroke: rgb(255,
0, 0); stroke-width: 2px;” y2=”[object SVGAnimatedLength]”
x2=”[object SVGAnimatedLength]” y1=”[object SVGAnimatedLength]”
x1=”[object SVGAnimatedLength]”> </line>

1
2
3
<svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="http://www.w3.org/2000/svg">
<line style="stroke: rgb(255, 0, 0); stroke-width: 2px;" y2="[object SVGAnimatedLength]" x2="[object SVGAnimatedLength]" y1="[object SVGAnimatedLength]" x1="[object SVGAnimatedLength]">
</line>

HTML5中canvas是什么?

Canvas是HTML中你可以绘制图形的区域

我们如何使用Canvas来画一条简单的线?

  • 定义Canvas区域
  • 获取访问canvas上下文区域
  • 绘制图形

定义Canvas区域

定义Canvas区域你需要使用下面的HTML代码,这定义了你能进行绘图的区域

XHTML

<canvas id=”mycanvas” width=”600″ height=”500″ style=”border:1px
solid #000000;”></canvas>

1
<canvas id="mycanvas" width="600" height="500" style="border:1px solid #000000;"></canvas>

获取画布区域的访问

在画布上进行绘图我们首先需要获取上下文区域的关联,下面是获取画布区域的代码。

XHTML

var c=document.getElementById(“mycanvas”); var ctx=c.getContext(“2d”);

1
2
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");

绘制图形

现在一旦你获取了访问上下文,我们就可以开始在上下文中绘制了。首先调用“move”方法并从一个点开始,使用线条方法绘制线条然后使用stroke方法结束。

XHTML

ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke();

1
2
3
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();

以下是完整的代码

XHTML

<body onload=”DrawMe();”> <canvas id=”mycanvas” width=”600″
height=”500″ style=”border:1px solid #000000;”></canvas>
</body> <script> function DrawMe() { var
c=document.getElementById(“mycanvas”); var ctx=c.getContext(“2d”);
ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke(); }

1
2
3
4
5
6
7
8
9
10
11
12
<body  onload="DrawMe();">
<canvas id="mycanvas" width="600" height="500" style="border:1px solid #000000;"></canvas>
</body>
<script>
function DrawMe()
{
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
}

你可以得到以下输出

图片 16

 

Canvas和SVG图形的区别是什么?

Note:-如果你看了之前的两个的问题,Canvas和SVG都可以在浏览器上绘制图形。因此在这个问题中,面试官想知道你在什么时候选用哪种方式。

SVG Canvas
这个就好像绘制和记忆,换句话说任何使用SVG绘制的形状都能被记忆和操作,浏览器可以再次显示 Canvas就像绘制和忘记,一旦绘制完成你不能访问像素和操作它
SVG对于创建图形例如CAD软件是良好的,一旦东西绘制,用户就想去操作它 Canvas在绘制和忘却的场景例如动画和游戏是良好的
因为为了之后的操作,需要记录坐标,所以比较缓慢 因为没有记住以后事情的意向,所以更快
我们可以用绘制对象的相关事件处理 我们不能使用绘制对象的相关事件处理,因为我们没有他们的参考
分辨率无关 分辨率相关

如何使用Canvas和HTML5中的SVG去画一个矩形?
HTML5使用SVG绘制矩形的代码

XHTML

<svg xmlns=”” version=”1.1″> <rect
style=”fill: rgb(0, 0, 255); stroke-width: 1px; stroke: rgb(0, 0, 0);”
height=”[object SVGAnimatedLength]” width=”[object
SVGAnimatedLength]”> </rect>

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect style="fill: rgb(0, 0, 255); stroke-width: 1px; stroke: rgb(0, 0, 0);" height="[object SVGAnimatedLength]" width="[object SVGAnimatedLength]">
</rect>

HTML5使用Canvas绘制矩形的代码

XHTML

var c=document.getElementById(“mycanvas”); var ctx=c.getContext(“2d”);
ctx.rect(20,20,150,100); ctx.stroke();

1
2
3
4
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

CSS(cascading style
sheets级联样式表)中的选择器是什么?
选择器在你想应用一个样式的时候,帮助你去选择元素。举例,下面是简单的被命名为”instro”的样式,他适用于HTML元素显示红色背景

XHTML

<style> .intro{ background-color:red; } </style>

1
2
3
4
5
<style>
.intro{
background-color:red;
}
</style>

应用上面的”intro”样式给div,我们可以使用”class”选择器,如下图所示

XHTML

<div class=”intro”> <p>My name is Shivprasad
koirala.</p> <p>I write interview questions.</p>
</div>

1
2
3
4
<div class="intro">
<p>My name is Shivprasad koirala.</p>
<p>I write interview questions.</p>
</div>

如何使用ID值来应用一个CSS样式?
假设,你有一个HTML段落标签,使用id是”mytext”,就和下面的片段中显示的那样

XHTML

<p id=”mytext”>This is HTML interview questions.</p>

1
<p id="mytext">This is HTML interview questions.</p>

你可以使用”#”选择器和”id”的名字创建一种样式,并把CSS值应用到段落标签中,因此应用样式到”mytext”元素,我们可以使用”#mytext”,如下所示

XHTML

<style> #mytext { background-color:yellow; } </style>

1
2
3
4
5
6
<style>
#mytext
{
background-color:yellow;
}
</style>

迅速修订一些重要的选择器

设置所有段落标签背景色为黄色

XHTML

div p { background-color:yellow; }

1
2
3
4
div p
{
background-color:yellow;
}

设置所有div内部的段落标签为黄色背景

XHTML

div p { background-color:yellow; }

1
2
3
4
div p
{
background-color:yellow;
}

设置所有div之后的段落标签为黄色背景

XHTML

div+p { background-color:yellow; }

1
2
3
4
div+p
{
background-color:yellow;
}

设置所有含有“target”属性的变为黄色背景

XHTML

a[target] { background-color:yellow; } <a
href=” interview questions</a>
<a href=”” target=”_blank”>c# interview
questions</a> <a href=””
target=”_top”>.NET interview questions with answers</a>

1
2
3
4
5
6
7
a[target]
{
background-color:yellow;
}
<a href="http://www.questpond.com">ASP.NET interview questions</a>
<a href="http://www.questpond.com" target="_blank">c# interview questions</a>
<a href="http://www.questpond.org" target="_top">.NET interview questions with answers</a>

当控制得到焦点的时候设置所有的元素为黄色背景

XHTML

input:focus { background-color:yellow; }

1
2
3
4
input:focus
{
background-color:yellow;
}

根据相关连接操作设置超链接样式

XHTML

a:link {color:green;} a:visited {color:green;} a:hover {color:red;}
a:active {color:yellow;}

1
2
3
4
a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

CSS中使用列布局是什么?
CSS列布局帮助你分割文本变为列,例如考虑下面的杂志新闻在一个大的文本中,但是我们需要在他们之间使用边界划分为3列,这里HTML5的列布局就有所帮助了

图片 17

为了实现列布局我们需要指定以下内容

  • 我们需要把text划分为多少列

指定列数我们需要使用column-count,对于Chrome和firefox分别需要”webkit”和“moz-column”

XHTML

-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari
and Chrome */ column-count:3;

1
2
3
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
  • 两列之间我们想要多少差距

XHTML

-moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /*
Safari and Chrome */ column-gap:20px;

1
2
3
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;

· 你想在这些列之间画一条线么?如果是,那么多厚呢?

XHTML

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;

1
2
3
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;

以下是完整代码

XHTML

<style> .magazine { -moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */ column-count:3;
-moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /*
Safari and Chrome */ column-gap:20px; -moz-column-rule:4px outset
#ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /*
Safari and Chrome */ column-rule:6px outset #ff00ff; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.magazine
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
 
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;
 
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
}
</style>

你可以使用class属性来应用样式到文本

XHTML

<div class=”magazine”> Your text goes here which you want to
divide in to 3 columns. </div>

1
2
3
<div class="magazine">
Your text goes here which you want to divide in to 3 columns.
</div>

你能解释一下CSS的盒子模型么?
CSS和模型是围绕在HTML元素周围的定义Border(边界),padding(内边距)和margin(外边距)的矩形空间
Border(边界):定义了元素包含的最大区域,我们能够使边界可见,不可见,定义高度和宽度等;
Padding(内边距):定义了边界和内部元素的间距
Margin:定义了边界和任何相邻元素的间距

图片 18

例如以下是简单的CSS代码定义了盒子的边界,内边距和外边距值

XHTML

.box { width: 200px; border: 10px solid #99c; padding: 20px; margin:
50px; }

1
2
3
4
5
6
.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
}

现在如果我们应用了以上的CSS到一个如下显示的DIV标签,你输出将会和下面图形中显示的那样。我已经创建两个测试“Some text”和“Some other text”,因此我们能看到多少margin(外边距)的属性功能

XHTML

<div align=”middle” class=”box”> Some text </div> Some other
text

1
2
3
4
<div align="middle" class="box">
Some text
</div>
Some other text

图片 19

你能解释一些CSS3中的文本效果么?

这里面试官期待你回答两个Css的文本效果,以下是两种需要注意的效果

阴影文本效果

XHTML

.specialtext { text-shadow: 5px 5px 5px #FF0000; }

1
2
3
4
.specialtext
{
text-shadow: 5px 5px 5px #FF0000;
}

图片 20

文字包装效果

XHTML

<style> .breakword {word-wrap:break-word;} </style>

1
2
3
4
<style>
.breakword
{word-wrap:break-word;}
</style>

图片 21

什么是Web
Workers?为什么我们需要他们?
考虑以下会执行上百万次的繁重的循环代码

XHTML

function SomeHeavyFunction() { for (i = 0; i < 10000000000000; i++) {
x = i + x; } }

1
2
3
4
5
6
7
function  SomeHeavyFunction()
{
for (i = 0; i < 10000000000000; i++)
{
x = i + x;
}
}

比方说上面的循环代码在HTML按钮点击以后执行,现在这个方法执行是同步的,换句话说这个浏览器必须等到循环完成才能操作

XHTML

<input type=”button” onclick=”SomeHeavyFunction();” />

1
<input type="button" onclick="SomeHeavyFunction();" />

这个会进一步导致浏览器冻结并且没有相应,屏幕还会显示如下的异常信息

图片 22

如果你能移动这些繁重的循环到Javascript文件中,采用异步的方式运行,这意味着浏览器不需要等到循环接触,我们可以有更敏感的浏览器,这就是web worker的作用

Web worker帮助我们用异步执行Javascript文件

Web Worker线程的限制是什么?
Web
worker线程不能修改HTML元素,全局变量和Window.Location一类的窗口属性。你可以自由使用Javascript数据类型,XMLHttpRequest调用等。

我们如何在JavaScript中创建一个worker线程?
创建一个worker线程,我们需要通过Javascript文件名创建worker对象

XHTML

var worker = new Worker(“MyHeavyProcess.js”);

1
var worker = new Worker("MyHeavyProcess.js");

我们需要使用“PostMessage”发送信息给worker对象,下面是相同的代码。

XHTML

worker.postMessage();

1
worker.postMessage();

当worker线程发送数据的时候,我们在调用结束的时候,通过”onMessage”事件获取

XHTML

worker.onmessage = function (e) { document.getElementById(“txt1”).value
= e.data; };

1
2
3
4
worker.onmessage = function (e)
{
document.getElementById("txt1").value = e.data;
};

图片 23

这个繁重的循环在“MyHeavyProcess.js”的Javascript文件中,以下代码,当Javascript文件想发送信息,他使用”postmessage”,同时任何来自发送者的信息都在“onmessage”事件中接收到。

XHTML

var x =0 self.onmessage = function (e) { for (i = 0; i < 1000000000;
i++) { x = i + x; } self.postMessage(x); };

1
2
3
4
5
6
7
8
var x =0
self.onmessage = function (e) {
    for (i = 0; i < 1000000000; i++)
    {
        x = i + x;
    }
    self.postMessage(x);
};

如何中止Web Worker?

XHTML

w.terminate();

1
w.terminate();

为什么我们需要HTML5的服务发送事件?
网络世界的普遍需求是从服务器更新。以一个股票应用为例,浏览器必须定期从服务器更新最新的股票值。

图片 24

现在实现这类需求开发者通常写一些PULL的代码,到服务器同时抓取某些区间数据。现在PULL的解决方案是很好的,但是这使得网络健谈有很多的调用,同时增加了服务器的负担。

因此相比于PULL,如果我们能采用某种PUSH的解决方案那会是很棒的。简而言之,当服务器更新的时候,将会发送更新到浏览器客户端,那可以被接受通过使用”SERVER SENT EVENT”

因此首要的是浏览器需要连接将会发送更新的服务器资源,比方说我们有一个”stock.aspx”页面会发送股票更新,因此连接该页面,我们需要使用附加时间来源对象,如下所示:

XHTML

var source = new EventSource(“stock.aspx”);

1
var source = new EventSource("stock.aspx");

当我们将要接受服务器发送的更新信息时,我们需要附加功能。我们需要附加功能到”onmessage”事件就像以下显示的那样。

XHTML

source.onmessage = function (event) {
document.getElementById(“result”).innerHTML += event.data +
“<br>”; };

1
2
3
source.onmessage = function (event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

现在来自服务端,我们需要去发送事件,下面是一些用命令需要从服务端发送的重要事件列表

Event Command
发送数据到客户端 data : hello
告诉客户端10s内重试 retry : 10000
提出具体事件与数据 event : successdata : You are logged in.

因此,举例说明,如果你想下面的ASP.NET代码一样发送数据,请标记内容类型设置给文本/事件

XHTML

Response.ContentType=”text/event-stream”; Response.Expires=-1;
Response.Write(“data: ” + DateTime.Now.ToString()); Response.Flush();

1
2
3
4
Response.ContentType="text/event-stream";
Response.Expires=-1;
Response.Write("data: " + DateTime.Now.ToString());
Response.Flush();

以下是设置10s后重试的命令

XHTML

Response.Write(“retry: 10000”);

1
Response.Write("retry: 10000");

如果你想附加事件,我们需要使用“addEventListener”事件,如下代码所示:

XHTML

source.addEventListener(‘message’, function(e) { console.log(e.data); },
false);

1
2
3
source.addEventListener(‘message’, function(e) {
  console.log(e.data);
}, false);

来自服务器端的以下信息将会触发Javascript的”message”方法

XHTML

event: message data : hello

1
2
event: message
data : hello

HTML5中的本地存储概念是什么?
很多时候我们会存储用户本地信息到电脑上,例如:比方说用户有一个填充了一半的长表格,然后突然网络连接断开了,这样用户希望你能存储这些信息到本地,当网络恢复的时候,他想获取这些信息然后发送到服务器进行存储
现代浏览器拥有的存储被叫做“Local Storage”,你可以存储这些信息。

我们如何从本地存储中添加和移除数据?
数据添加到本地存储采用键值对,以下示例显示了城市数据”India”添加了键”Key001”

XHTML

localStorage.setItem(“Key001”,”India”);

1
localStorage.setItem(“Key001”,”India”);

从本地存储中检索数据我们可以提供键名并使用”getItem”方法

XHTML

var country = localStorage.getItem(“Key001”);

1
var country = localStorage.getItem(“Key001”);

你也可以使用以下代码,存储Javascript对象在本地存储中

XHTML

var country = {}; country.name = “India”; country.code = “I001”;
localStorage.setItem(“I001”, country); var country1 =
localStorage.getItem(“I001”);

1
2
3
4
5
var country = {};
country.name = “India”;
country.code = “I001”;
localStorage.setItem(“I001”, country);
var country1 = localStorage.getItem(“I001”);

如果你想存储Json格式,你可以使用“JSON.stringify”方法,如下所示:

XHTML

localStorage.setItem(“I001”,JSON.stringify(country));

1
localStorage.setItem(“I001”,JSON.stringify(country));

本地存储的生命周期是什么?
本地存储没有生命周期,它将保留知道用户从浏览器清除或者使用Javascript代码移除。

本地存储和cookies(储存在用户本地终端上的数据)之间的区别是什么?

Cookies Local storage
客户端/服务端 客户端和服务端都能访问数据。Cookie的数据通过每一个请求发送到服务端 只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器
大小 每个cookie有4095byte 每个域5MB
过期 Cookies有有效期,所以在过期之后cookie和cookie数据会被删除 没有过期数据,无论最后用户从浏览器删除或者使用Javascript程序删除,我们都需要删除

 

什么是事务存储?我们如何创建一个事务存储?
会话存储和本地存储类似,但是数据在会话中有效,简而言之数据在你关闭浏览器的时候就被删除了。
为了创建一个会话存储你需要使用“sessionStorage.variablename.”在以下的代码我们创建了一个名为”clickcount”的变量;
如果你刷新浏览器则数目增加,但是如果你关闭浏览器,“clickcount”变量又会从0开始。

XHTML

if(sessionStorage.clickcount) {
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else {
sessionStorage.clickcount = 0; }

1
2
3
4
5
6
7
8
if(sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount = 0;
}

本地存储和事务存储之间的区别是什么?
本地存储数据持续永久,但是会话在浏览器打开时有效知道浏览器关闭时会话变量重置

什么是WebSQL?
WebSQL是一个在浏览器客户端的结构关系数据库,这是浏览器内的本地RDBMS(关系型数据库系统),你可以使用SQL查询

WebSql是HTML5的一个规范吗?
不是,许多人把它标记为HTML5,但是他不是HTML5的规范的一部分,这个规范是基于SQLite的

我们如何使用WebSQL?
第一步我们需要做的是使用如下所示的“OpenDatabase”方法打开数据库,第一个参数是数据库的名字,接下来是版本,然后是简单原文标题,最后是数据库大小;

XHTML

var db=openDatabase(‘dbCustomer’,’1.0′,’Customer app’, 2 * 1024 *
1024);

1
var db=openDatabase(‘dbCustomer’,’1.0′,’Customer app’, 2 * 1024 * 1024);

为了执行SQL,我们需要使用“transaction”方法,并调用”executeSql”方法来使用SQL

JavaScript

db.transaction(function (tx) { tx.executeSql(‘CREATE TABLE IF NOT EXISTS
tblCust(id unique, customername)’); tx.executeSql(‘INSERT INTO tblcust
(id, customername) VALUES(1, “shiv”)’); tx.executeSql(‘INSERT INTO
tblcust (id, customername) VALUES (2, “raju”)’); }

1
2
3
4
5
6
db.transaction(function (tx)
{
tx.executeSql(‘CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)’);
tx.executeSql(‘INSERT INTO tblcust (id, customername) VALUES(1, "shiv")’);
tx.executeSql(‘INSERT INTO tblcust (id, customername) VALUES (2, "raju")’);
}

万一你要使用“select”查询你会得到数据”result”集合,我们可以通过循环展示到HTML的用户界面

JavaScript

db.transaction(function (tx) { tx.executeSql(‘SELECT * FROM tblcust’,
[], function (tx, results) { for (i = 0; i < len; i++) { msg =
“<p><b>” + results.rows.item(i).log +
“</b></p>”; document.querySelector(‘#customer).innerHTML +=
msg; } }, null); });

1
2
3
4
5
6
7
8
9
10
db.transaction(function (tx)
{
  tx.executeSql(‘SELECT * FROM tblcust’, [], function (tx, results) {
   for (i = 0; i < len; i++)
{
     msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
     document.querySelector(‘#customer).innerHTML +=  msg;
}
}, null);
});

HTML5中的应用缓存是什么?
一个最需要的事最终是用户的离线浏览,换句话说,如果网络连接不可用时,页面应该来自浏览器缓存,离线应用缓存可以帮助你达到这个目的
应用缓存可以帮助你指定哪些文件需要缓存,哪些不需要。

HTML5中我们如何实现应用缓存?
首先我们需要指定”manifest”文件,“manifest”文件帮助你定义你的缓存如何工作。以下是”mainfest”文件的结构

XHTML

CACHE MANIFEST # version 1.0 CACHE : Login.aspx

1
2
3
4
CACHE MANIFEST
# version 1.0
CACHE :
Login.aspx
  • 所有manifest文件都以“CACHE MANIFEST”语句开始.
  • #(散列标签)有助于提供缓存文件的版本.
  • CACHE 命令指出哪些文件需要被缓存.
  • Mainfest文件的内容类型应是“text/cache-manifest”.

以下是如何在ASP.NET C#使用manifest缓存

JavaScript

Response.ContentType = "text/cache-manifest";
Response.Write("CACHE MANIFEST \n"); Response.Write("#
2012-02-21 v1.0.0 \n"); Response.Write("CACHE : \n");
Response.Write("Login.aspx \n"); Response.Flush();
Response.End();

1
2
3
4
5
6
7
Response.ContentType = &quot;text/cache-manifest&quot;;
Response.Write(&quot;CACHE MANIFEST \n&quot;);
Response.Write(&quot;# 2012-02-21 v1.0.0 \n&quot;);
Response.Write(&quot;CACHE : \n&quot;);
Response.Write(&quot;Login.aspx \n&quot;);
Response.Flush();
Response.End();

创建一个缓存manifest文件以后,接下来的事情实在HTML页面中提供mainfest连接,如下所示:

XHTML

<html manifest=”cache.aspx”>

1
<html manifest="cache.aspx">

当以上文件第一次运行,他会添加到浏览器应用缓存中,在服务器宕机时,页面从应用缓存中获取

我们如何刷新浏览器的应用缓存?
应用缓存通过变更“#”标签后的版本版本号而被移除,如下所示:

XHTML

CACHE MANIFEST # version 2.0(new) CACHE : Login.aspx Aboutus.aspx
NETWORK : Pages.aspx

1
2
3
4
5
6
7
CACHE MANIFEST
# version 2.0(new)
CACHE :
Login.aspx
Aboutus.aspx
NETWORK :
Pages.aspx

应用缓存中的回退是什么?
应用缓存中的回退帮助你指定在服务器不可访问的时候,将会显示某文件。例如在下面的manifest文件中,我们说如果谁敲击了”/home”同时服务器不可到达的时候,”homeoffline.html”文件应送达

XHTML

FALLBACK: /home/ /homeoffline.html

1
2
FALLBACK:
/home/ /homeoffline.html

应用缓存中的网络是什么?
网络命令描述不需要缓存的文件,例如以下代码中,我们说”home.aspx”永远都不应该被缓存或者离线访问。

XHTML

NETWORK: home.aspx

1
2
NETWORK:
home.aspx

赞 7 收藏 3
评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注