functionDrawMe()
{
varc=document.getElementById("mycanvas");
varctx=c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();
}
13、Canvas和SVG图形的区别是什么?
答:
Note:
-如果你看了之前的两个的问题,Canvas和SVG都可以在浏览器上绘制图形。
因此在这个问题中,面试官想知道你在什么时候选用哪种方式。
SVG
Canvas
这个就好像绘制和记忆,换句话说任何使用SVG绘制的形状都能被记忆和操作,浏览器可以再次显示
Canvas就像绘制和忘记,一旦绘制完成你不能访问像素和操作它
SVG对于创建图形例如CAD软件是良好的,一旦东西绘制,用户就想去操作它
Canvas在绘制和忘却的场景例如动画和游戏是良好的
因为为了之后的操作,需要记录坐标,所以比较缓慢
因为没有记住以后事情的意向,所以更快
我们可以用绘制对象的相关事件处理
我们不能使用绘制对象的相关事件处理,因为我们没有他们的参考
分辨率无关
分辨率相关
14、如何使用Canvas和HTML5中的SVG去画一个矩形?
(1)HTML5使用SVG绘制矩形的代码
//www.w3.org/2000/svg"version="1.1"> rgb(0,0,255);stroke-width: 1px;stroke: rgb(0,0,0);"height="[objectSVGAnimatedLength]"width="[objectSVGAnimatedLength]"> (2)HTML5使用Canvas绘制矩形的代码 varc=document.getElementById("mycanvas"); varctx=c.getContext("2d"); ctx.rect(20,20,150,100); ctx.stroke(); 15、CSS(cascadingstylesheets级联样式表)中的选择器是什么? 答: 选择器在你想应用一个样式的时候,帮助你去选择元素。 举例,下面是简单的被命名为”instro”的样式,他适用于HTML元素显示红色背景 .intro{ background-color: red; } 应用上面的”intro”样式给div,我们可以使用”class”选择器,如下图所示 MynameisShivprasadkoirala. Iwriteinterviewquestions.
16、CSS中使用列布局是什么?
答:
(1)指定列数我们需要使用column-count,对于Chrome和firefox分别需要”webkit”和“moz-column”
-moz-column-count:
3;/*Firefox*/
-webkit-column-count:
3;/*SafariandChrome*/
column-count:
3;
(2)两列之间我们想要多少差距
-moz-column-gap:
40px;/*Firefox*/
-webkit-column-gap:
40px;/*SafariandChrome*/
column-gap:
20px;
(3)你想在这些列之间画一条线么?
如果是,那么多厚呢?
-moz-column-rule:
4pxoutset#ff00ff;/*Firefox*/
-webkit-column-rule:
4pxoutset#ff00ff;/*SafariandChrome*/
column-rule:
6pxoutset#ff00ff;
以下是完整代码
.magazine
{
-moz-column-count:
3;/*Firefox*/
-webkit-column-count:
3;/*SafariandChrome*/
column-count:
3;
-moz-column-gap:
40px;/*Firefox*/
-webkit-column-gap:
40px;/*SafariandChrome*/
column-gap:
20px;
-moz-column-rule:
4pxoutset#ff00ff;/*Firefox*/
-webkit-column-rule:
4pxoutset#ff00ff;/*SafariandChrome*/
column-rule:
6pxoutset#ff00ff;
}
你可以使用class属性来应用样式到文本
Yourtextgoesherewhichyouwanttodivideinto3columns.
17、你能解释一下CSS的盒子模型么?
答:
CSS和模型是围绕在HTML元素周围的定义Border(边界),padding(内边距)和margin(外边距)的矩形空间
Border(边界):
定义了元素包含的最大区域,我们能够使边界可见,不可见,定义高度和宽度等;
Padding(内边距):
定义了边界和内部元素的间距
Margin:
定义了边界和任何相邻元素的间距
18、你能解释一些CSS3中的文本效果么?
答:
这里面试官期待你回答两个Css的文本效果,以下是两种需要注意的效果
(1)阴影文本效果
.specialtext
{
text-shadow:
5px5px5px#FF0000;
}
(2)文字包装效果
.breakword
{word-wrap:
break-word;}
19、什么是WebWorkers?
为什么我们需要他们?
答:
考虑以下会执行上百万次的繁重的循环代码
functionSomeHeavyFunction()
{
for(i=0;i<10000000000000;i++)
{
x=i+x;
}
}
比方说上面的循环代码在HTML按钮点击以后执行,现在这个方法执行是同步的,换句话说这个浏览器必须等到循环完成才能操作
这个会进一步导致浏览器冻结并且没有相应,屏幕还会显示如下的异常信息
如果你能移动这些繁重的循环到Javascript文件中,采用异步的方式运行,这意味着浏览器不需要等到循环接触,我们可以有更敏感的浏览器,这就是webworker的作用
Webworker帮助我们用异步执行Javascript文件。
20、WebWorker线程的限制是什么?
答:
Webworker线程不能修改HTML元素,全局变量和Window.Location一类的窗口属性。
你可以自由使用Javascript数据类型,XMLHttpRequest调用等。
21、我们如何在JavaScript中创建一个worker线程?
创建一个worker线程,我们需要通过Javascript文件名创建worker对象
varworker=newWorker("MyHeavyProcess.js");
我们需要使用“PostMessage”发送信息给worker对象,下面是相同的代码。
worker.postMessage();
当worker线程发送数据的时候,我们在调用结束的时候,通过”onMessage”事件获取
worker.onmessage=function(e)
{
document.getElementById("txt1").value=e.data;
}
这个繁重的循环在“MyHeavyProcess.js”的Javascript文件中,以下代码,当Javascript文件想发送信息,他使用”postmessage”,同时任何来自发送者的信息都在“onmessage”事件中接收到。
varx=0
self.onmessage=function(e){
for(i=0;i<1000000000;i++)
{
x=i+x;
}
self.postMessage(x);
};
22、如何中止WebWorker?
答:
w.terminate();
23、为什么我们需要HTML5的服务发送事件?
答:
网络世界的普遍需求是从服务器更新。
以一个股票应用为例,浏览器必须定期从服务器更新最新的股票值。
现在实现这类需求开发者通常写一些PULL的代码,到服务器同时抓取某些区间数据。
现在PULL的解决方案是很好的,但是这使得网络健谈有很多的调用,同时增加了服务器的负担。
因此相比于PULL,如果我们能采用某种PUSH的解决方案那会是很棒的。
简而言之,当服务器更新的时候,将会发送更新到浏览器客户端,那可以被接受通过使用”SERVERSENTEVENT”
因此首要的是浏览器需要连接将会发送更新的服务器资源,比方说我们有一个”stock.aspx”页面会发送股票更新,因此连接该页面,我们需要使用附加时间来源对象,如下所示:
varsource=newEventSource("stock.aspx");
当我们将要接受服务器发送的更新信息时,我们需要附加功能。
我们需要附加功能到”onmessage”事件就像以下显示的那样。
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data+"";
};
现在来自服务端,我们需要去发送事件,下面是一些用命令需要从服务端发送的重要事件列表
因此,举例说明,如果你想下面的ASP.NET代码一样发送数据,请标记内容类型设置给文本/事件
Response.ContentType="text/event-stream";
Response.Expires=-1;
Response.Write("data:
"+DateTime.Now.ToString());
Response.Flush();
以下是设置10s后重试的命令
Response.Write("retry:
10000");
如果你想附加事件,我们需要使用“addEventListener”事件,如下代码所示:
source.addEventListener('message',function(e){
console.log(e.data);
},false);
来自服务器端的以下信息将会触发Javascript的”message”方法
event:
message
data:
hello
24、HTML5中的本地存储概念是什么?
答:
很多时候我们会存储用户本地信息到电脑上,例如:
比方说用户有一个填充了一半的长表格,然后突然网络连接断开了,这样用户希望你能存储这些信息到本地,当网络恢复的时候,他想获取这些信息然后发送到服务器进行存储
现代浏览器拥有的存储被叫做“LocalStorage”,你可以存储这些信息。
26、我们如何从本地存储中添加和移除数据?
答:
数据添加到本地存储采用键值对,以下示例显示了城市数据”India”添加了键”Key001”
localStorage.setItem(“Key001”,”India”);
从本地存储中检索数据我们可以提供键名并使用”getItem”方法
varcountry=localStorage.getItem(“Key001”);
你也可以使用以下代码,存储Javascript对象在本地存储中
varcountry={};
country.name=“India”;
country.code=“I001”;
localStorage.setItem(“I001”,country);
varcountry1=localStorage.getItem(“I001”);
如果你想存储Json格式,你可以使用“JSON.stringify”方法,如下所示:
localStorage.setItem(“I001”,JSON.stringify(country));
27、本地存储的生命周期是什么?
答:
本地存储没有生命周期,它将保留知道用户从浏览器清除或者使用Javascript代码移除。
28、本地存储和cookies(储存在用户本地终端上的数据)之间的区别是什么?
答:
29、什么是事务存储?
我们如何创建一个事务存储?
答:
会话存储和本地存储类似,但是数据在会话中有效,简而言之数据在你关闭浏览器的时候就被删除了。
为了创建一个会话存储你需要使用“sessionStorage.variablename.”在以下的代码我们创建了一个名为”clickcount”的变量;
如果你刷新浏览器则数目增加,但是如果你关闭浏览器,“clickcount”变量又会从0开始。
if(sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=0;
}
30、本地存储和事务存储之间的区别是什么?
答:
本地存储数据持续永久,但是会话在浏览器打开时有效知道浏览器关闭时会话变量重置
31、什么是WebSQ
copyright@ 2008-2023 冰点文库 网站版权所有
经营许可证编号:鄂ICP备19020893号-2