web 前端 （二）
来源：互联网 发布：qq抢红包源码 编辑：程序博客网 时间：2024/05/18 03:44
16 javasciprt 有哪几种数据类型
简单：Number,Boolean,String,Null,Undefined
复合：Object, Array, Function
17 下面css标签在javaScript中调用应如何拼写，border-left-color,moz-viewprt
borderLeftColor
mozViewport
18 javaScript 如何对一个对象进行深度clone
function clone(Obj)
{
var buf;
if(obj instanceof Array)
{
buf = [];//创建一个空的数组
var i = Obj.length;
while(i--)
{
buf[i] = clone(Obj[i]);
}
return buf;
}else if(Obj instanceof Object)
{
buf = {};
for(var k in Obj)
{
buf[k] = clone(Obj[k]);
}
return buf;
}else
{
return Obj;
}
}
纯粹是个递归的思路，如果是数组，就一个的放到一个数组对象中，如果是对象，则复制他的对象中的属性，如果是普通变量，就直接赋值之
19 如何控制alert中的换行
alert("p\np"); // \n
20 请实现，鼠标点击页面中的任意标签alert该标签的名称.(注意兼容性)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN">
"http://www.w3.org/TR/xhtml1-transitinal.dtd/">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title></title>
<style>
div{background:#0000FF;width:100px;height:100px;}
span{background:#00FF00,width:100px;height:100px;}
p{background:#FF0000,width:100px;height:100px;}
</style>
<script type="text/javascript">
document.onclick=function(evt)
{
var e = window.event||evt;
var tag = e["target"]||e["srcElement"];
alert(tag.tagName);
};
</script>
</head>
</body>
<div id="div"><span>SPAN</span>DIV</div>
<span>SPAN</span>
<p>P</p>
</body>
</html>
21 请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象，如：
var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";
function parseQUeryString(url){
var params = {};
var arr = url.split("?");
if(arr.length<=1)
return params;
arr = arr[1].split("&");
for(var i=0;l=arr.length;i<l;i++)
{
var a=arr[i].split("=");
params[a[0]]=a[1];
}
return params;
}
var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps = parseQUeryString(url);
alert(ps["key1"]);
22 ajax是什么？ajax的交互模型 同步和异步的区别 如何解决跨域问题
Ajax 是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：
XHTML: XHTML1.0
CSS: CSS2.0
DOM: 主要指HTML DOM， XML DOM 包括在先面的XML中；
JavaScript:对应ECMA 的ECMAScript规范
XML：对应W3C的XML DOM， XSLT， XPath等等规范
XML HttpRequest： 对应 WhatWG 的 Web Application1.0 规范
同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本允许页面继续其进程并处理可能的回复。
跨域问题简单的理解就是因为JS同源策略的限制，a.com域下的JS无法操作 b.com 或 c.a.com 下的对象，具体场景如下：
同一域名下不同文件夹；同一域名下；同一域名，不同端口；同一域名，不同协议；域名和域名对应IP；主域相同，字域不同；不同域名
ps:(1)如果是端口或者协议造成的跨域问题前端是无能为力的
(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
前端对于跨域的解决办法：
(1)document.domain+iframe
(2)动态创建script标签
23 什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id="test">
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
内部函数被定义它的函数的外部区域调用的时候就产生了闭包。
(function A(){
var index = 0;
var url = document.getElementById("test");
var obj= {};
for(var i=0,l=ul.childNodes.length;i<l;i++)
{
if(ul.childNodes[i].nodeName.toLowerCase()=="li")
{
var li = ul.childNodes[i];
li.onclick = function()
{
index++;
alert(index);
}
}
}
})();
24 请给出异步加载js方案，不少于两种
默认情况下 javascript 是同步加载的，也就是javascript 的加载是阻塞的,后面的元素要等待javascript 加载完毕后才能进行再加载，对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
异步加载方式：
(1) defer, 只支持IE
(2) async;
(3) 创建script，插入到DOM中，加载完毕后callBack,代码如下：
function loadScript(url,callback){
var script = document.createElement("script");
script.type = "text/javascript";
if(script.readyState)
{//IE
scirpt.onreadystatechange = function()
{
if(script.readyState=="loaded"||script.readyState=="complete")
{
script.onreadystatechange = null;
callback();
}
};
}else
{
script.onload = function()
{
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
25 请设计一套方法，用于确保页面加载完全。
var n = document.createElemnt("scrit");
n.type = "text/javascript";
//以上省略部分代码
//ie 支持script的readystatechange属性
if(ua.ie)
{
n.onreadystatechange = function()
{
var rs = this.readyState;
if('loaded'==rs||'complete'==rs)
{
n.onreadystatechange = null;
f(id,url);
}
};
}
//省略部分代码
//safari 3.x 支持 load event;
n.addEventListener("load",function(){
f(id,url);
});
}else{
n.onload = function()
{
f(id,url);
};
}
26 js中如何定义class 如何扩展prototype?
Ele.className="***"，//***在css中定义，形式如下:.***{...}
A.prototype.b=C;
A是某个构造函数的名字
B是这个构造函数的属性
C是想要定义的属性的值
27 如何添加html元素的事件有几种方法
(1) 为HTML 元素的事件属性赋值
(2) 在JS 中使用ele.on***=function(){...}
(3) 使用DOM2的添加事件的方法 addEventListener 或 attachEvent
28 document.write 和 innerHTML的区别
document.write只能重回整个页面
innerHTML 可以重绘页面的一部分
29 多浏览器的检测通过什么?
(1) navigator.userAgent;
(2) 不同浏览器的特性，如 addEventListener
30 js的基础对象有哪些 window 和 document的常用的方法和属性列出来
String, Number, Boolean
Window：
方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性：
name, parent, screenLeft, screenTop, self, top, status
Document:
方法：
createElement,execCommand,getElementById,getElementByName,getElementByTagName
,write,writelen;
属性：cookie,doctypem,domain,documentElement,readyState,URL;
31 前端开发的优化问题
(1)前少http 请求次数：css spirit, data, uri
(2)JS, CSS 源码压缩
(3)前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
(4)用innerHTML 代替DOM操作，减少DOM操作次数,优化javascript 性能
(5)用 setTimeout 来避免页面失去响应
(6)用hash-table来优化查找
(7)当需要设置的样式很多时设置className而不是直接操作style
(8)少用全局变量
(9)缓存DOM节点查找的结果
(10)避免使用CSS Expression
(11)图片预载
(12)避免在页面的主体布局中使用table， table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
32 如何控制网页在网传输过程中的数据量
启用GZIP压缩
保持良好的编程习惯，避免重复的CSS,Javascript代码，多余的HTML标签和属性
33 Flash Ajax 各自的优缺点，在使用中如何取舍?
Ajax 的优势
(1) 可搜索型
(2) 开放性
(3) 费用
(4) 易用性
(5) 易于开发
Flash 的优势
(1) 多媒体处理
(2) 兼容性
(3) 矢量图形 比SVG， Canvas 优势大很多
(4) 客户端资源调度，比如麦克风，摄像头
简单：Number,Boolean,String,Null,Undefined
复合：Object, Array, Function
17 下面css标签在javaScript中调用应如何拼写，border-left-color,moz-viewprt
borderLeftColor
mozViewport
18 javaScript 如何对一个对象进行深度clone
function clone(Obj)
{
var buf;
if(obj instanceof Array)
{
buf = [];//创建一个空的数组
var i = Obj.length;
while(i--)
{
buf[i] = clone(Obj[i]);
}
return buf;
}else if(Obj instanceof Object)
{
buf = {};
for(var k in Obj)
{
buf[k] = clone(Obj[k]);
}
return buf;
}else
{
return Obj;
}
}
纯粹是个递归的思路，如果是数组，就一个的放到一个数组对象中，如果是对象，则复制他的对象中的属性，如果是普通变量，就直接赋值之
19 如何控制alert中的换行
alert("p\np"); // \n
20 请实现，鼠标点击页面中的任意标签alert该标签的名称.(注意兼容性)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN">
"http://www.w3.org/TR/xhtml1-transitinal.dtd/">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title></title>
<style>
div{background:#0000FF;width:100px;height:100px;}
span{background:#00FF00,width:100px;height:100px;}
p{background:#FF0000,width:100px;height:100px;}
</style>
<script type="text/javascript">
document.onclick=function(evt)
{
var e = window.event||evt;
var tag = e["target"]||e["srcElement"];
alert(tag.tagName);
};
</script>
</head>
</body>
<div id="div"><span>SPAN</span>DIV</div>
<span>SPAN</span>
<p>P</p>
</body>
</html>
21 请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象，如：
var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";
function parseQUeryString(url){
var params = {};
var arr = url.split("?");
if(arr.length<=1)
return params;
arr = arr[1].split("&");
for(var i=0;l=arr.length;i<l;i++)
{
var a=arr[i].split("=");
params[a[0]]=a[1];
}
return params;
}
var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps = parseQUeryString(url);
alert(ps["key1"]);
22 ajax是什么？ajax的交互模型 同步和异步的区别 如何解决跨域问题
Ajax 是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用，并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：
XHTML: XHTML1.0
CSS: CSS2.0
DOM: 主要指HTML DOM， XML DOM 包括在先面的XML中；
JavaScript:对应ECMA 的ECMAScript规范
XML：对应W3C的XML DOM， XSLT， XPath等等规范
XML HttpRequest： 对应 WhatWG 的 Web Application1.0 规范
同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本允许页面继续其进程并处理可能的回复。
跨域问题简单的理解就是因为JS同源策略的限制，a.com域下的JS无法操作 b.com 或 c.a.com 下的对象，具体场景如下：
同一域名下不同文件夹；同一域名下；同一域名，不同端口；同一域名，不同协议；域名和域名对应IP；主域相同，字域不同；不同域名
ps:(1)如果是端口或者协议造成的跨域问题前端是无能为力的
(2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
前端对于跨域的解决办法：
(1)document.domain+iframe
(2)动态创建script标签
23 什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id="test">
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
内部函数被定义它的函数的外部区域调用的时候就产生了闭包。
(function A(){
var index = 0;
var url = document.getElementById("test");
var obj= {};
for(var i=0,l=ul.childNodes.length;i<l;i++)
{
if(ul.childNodes[i].nodeName.toLowerCase()=="li")
{
var li = ul.childNodes[i];
li.onclick = function()
{
index++;
alert(index);
}
}
}
})();
24 请给出异步加载js方案，不少于两种
默认情况下 javascript 是同步加载的，也就是javascript 的加载是阻塞的,后面的元素要等待javascript 加载完毕后才能进行再加载，对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
异步加载方式：
(1) defer, 只支持IE
(2) async;
(3) 创建script，插入到DOM中，加载完毕后callBack,代码如下：
function loadScript(url,callback){
var script = document.createElement("script");
script.type = "text/javascript";
if(script.readyState)
{//IE
scirpt.onreadystatechange = function()
{
if(script.readyState=="loaded"||script.readyState=="complete")
{
script.onreadystatechange = null;
callback();
}
};
}else
{
script.onload = function()
{
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
25 请设计一套方法，用于确保页面加载完全。
var n = document.createElemnt("scrit");
n.type = "text/javascript";
//以上省略部分代码
//ie 支持script的readystatechange属性
if(ua.ie)
{
n.onreadystatechange = function()
{
var rs = this.readyState;
if('loaded'==rs||'complete'==rs)
{
n.onreadystatechange = null;
f(id,url);
}
};
}
//省略部分代码
//safari 3.x 支持 load event;
n.addEventListener("load",function(){
f(id,url);
});
}else{
n.onload = function()
{
f(id,url);
};
}
26 js中如何定义class 如何扩展prototype?
Ele.className="***"，//***在css中定义，形式如下:.***{...}
A.prototype.b=C;
A是某个构造函数的名字
B是这个构造函数的属性
C是想要定义的属性的值
27 如何添加html元素的事件有几种方法
(1) 为HTML 元素的事件属性赋值
(2) 在JS 中使用ele.on***=function(){...}
(3) 使用DOM2的添加事件的方法 addEventListener 或 attachEvent
28 document.write 和 innerHTML的区别
document.write只能重回整个页面
innerHTML 可以重绘页面的一部分
29 多浏览器的检测通过什么?
(1) navigator.userAgent;
(2) 不同浏览器的特性，如 addEventListener
30 js的基础对象有哪些 window 和 document的常用的方法和属性列出来
String, Number, Boolean
Window：
方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性：
name, parent, screenLeft, screenTop, self, top, status
Document:
方法：
createElement,execCommand,getElementById,getElementByName,getElementByTagName
,write,writelen;
属性：cookie,doctypem,domain,documentElement,readyState,URL;
31 前端开发的优化问题
(1)前少http 请求次数：css spirit, data, uri
(2)JS, CSS 源码压缩
(3)前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
(4)用innerHTML 代替DOM操作，减少DOM操作次数,优化javascript 性能
(5)用 setTimeout 来避免页面失去响应
(6)用hash-table来优化查找
(7)当需要设置的样式很多时设置className而不是直接操作style
(8)少用全局变量
(9)缓存DOM节点查找的结果
(10)避免使用CSS Expression
(11)图片预载
(12)避免在页面的主体布局中使用table， table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
32 如何控制网页在网传输过程中的数据量
启用GZIP压缩
保持良好的编程习惯，避免重复的CSS,Javascript代码，多余的HTML标签和属性
33 Flash Ajax 各自的优缺点，在使用中如何取舍?
Ajax 的优势
(1) 可搜索型
(2) 开放性
(3) 费用
(4) 易用性
(5) 易于开发
Flash 的优势
(1) 多媒体处理
(2) 兼容性
(3) 矢量图形 比SVG， Canvas 优势大很多
(4) 客户端资源调度，比如麦克风，摄像头
- web 前端 （二）
- Web 前端本地化（二）
- Web前端开发规范（二）
- Web前端开发规范（二）
- web前端 基础部分（二） CSS
- Web前端持续集成方案（二）
- web前端基本用法（二）
- web前端开发笔记（二）
- web前端面试题（二）
- WEB前端资源集（二）
- web前端面试题汇总（二）
- Web前端学习【二】
- web前端总结(二)
- Web前端知识点：汇总二
- Mobile Web前端开发系列: 事件处理（二）
- web前端面试常见问题二 ------css布局（position）
- Java Web 前端高性能优化（二）
- 第三课 设计WEB前端页面 （二）
- HDU 4498 Function Curve (分段， simpson)
- ios项目教训（1）
- ABS_MT_TOUCH_MAJOR和ABS_MT_WIDTH_MAJOR
- 大话数据结构七：两栈共享存储空间（双向栈）
- 在O(n^2)内寻找矩阵A中 A(c,d) - A(a,b) 的最大值， c > a 且 d > b.
- web 前端 （二）
- 初入Delphi（一）
- 25-python_类的属性-对象的属性
- 跨平台日志清理工具 Log-Cutter v2.0.1 正式发布
- oracle top 10 sql
- 微软office与WPS Office如此相似，微软为什么不告金山侵权呢？
- Redis主从自动failover
- 单选 和 复选
- Map的常见遍历操作
