WEB前端开发试题

1请实现，鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）

function elementName(evt){

   evt = evt|| window.event;   // IE: window.event

// IE用srcElement获取事件源，而FF用target获取事件源

   var selected = evt.target || evt.srcElement;

   alert(selected.tagName);

  }

  window.onload = function(){

   var el =document.getElementsByTagName('body');

   el[0].onclick = elementName;

  }

2请指出一下代码的性能问题，并经行优化。

var info="腾讯拍拍网（www.paipai.com）是腾讯旗下知名电子商务网站。";
info +="拍拍网于2005年9月12日上线发布，";
info +="2006年3月13日宣布正式运营，";
info +="是目前国内第二大电子商务平台。";
info=info.split(",");
for(var i=0; i<info.length; i++)
{  alert(info[i]);  }

优化：

1、由于字符串相加比较慢，所以可以考虑直接把所有字符写在同一个变量中。

2、仔细考虑这段JS需要实现的功能，会发现，其实完全可以用一个数组来存储，然后遍历数组输出，这样效率会提高很多，因为省去了info=info.split(",");执行所要消耗的时间。

优化结果如下：

  var info = new Array();

  info[0] = "腾讯拍拍网（www.paipai.com）是腾讯旗下知名电子商务网站。拍拍网于2005年9月12日上线发布";

  info[1] = "2006年3月13日宣布正式运营";

  info[2] = "是目前国内第二大电子商务平台。"; 

  for(var i = 0; i < info.length; i++) {

   alert(info[i]);

  }

3请给出异步加载js方案，不少于两种。

(1) defer，只支持IE

(2) async：

(3)创建script，插入到DOM中，加载完毕后callBack，见代码：

function loadScript(url, callback){
   var script = document.createElement_x("script")
   script.type = "text/javascript";
   if (script.readyState){ //IE
      script.onreadystatechange = function(){
         if (script.readyState == "loaded" ||
            script.readyState == "complete"){
            script.onreadystatechange = null;
            callback();
         }
      };
   } else { //Others: Firefox, Safari, Chrome, and Opera
      script.onload = function(){
          callback();
      };
   }
   script.src = url;
   document.body.appendChild(script);
}

4请写出jQuery绑定事件的方法，不少于两种。

1.  bind/Unbind：匹配页面元素进行相关事件的处理

      $("#id").bind('click',function(){alert('tt!')});

      $('a').bind({

          click:function(){alert('a');},

      mouseover:function(){alert('aagain!')}

2.  One：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

      $('a').one('click',function(){

          alert('a');

      })

3.  live：能处理动态添加的元素，给那些后添加的元素也一样绑定事件

      $('a').live('click,function(){

          alert('showmessage!');

      })

5请设计一套方案，用于确保页面中JS加载完全。

var n = document.createElement("script");
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 supports the load event for script nodes(DOM2)
   n.addEventListener('load',function(){
       f(id,url);
   });
//firefox and opera support onload(but not dom2 in ff) handlers for
//script nodes. opera, but no ff, support the onload event for link
//nodes.
}else{
   n.onload = function(){
       f(id,url);
   };
}

6请优化某网页的加载速度。

1）JS，CSS，HTML做gzip压缩（不要对图片进行Gzip压缩）

2）JS，CSS脚本文件优化：删除js，css文件的注释；avascript放置网页底部，避免阻塞下载；CSS放到header中，避免白屏；合并JS和CSS；压缩JS和CSS；

3）  精简HTML：去掉HTML注释，回车符，以及无效字节

4） 优化img文件，注明：width，height，在img标签中指定尺寸是为了提升浏览器渲染效率；写入img：第一时间显示logo图和背景，避免空白和无背景

5） 优化缓存：对没有变化的css,js，图片等网页元素，直接利用客户端的浏览器缓存读取来有效减少http请求数。

6） 通过增加expires header（给文件加上关于过期时间的header报文。）可以告诉浏览器，那些网页元素可以缓存和缓存多长时间。

7） 合并网站图标采用CSS sprites（CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中）技术来实现。

8） 把脚本和图片放在不同的服务器和域名，做成并行下载。

9） 屏蔽无效页面。

7对string对象进行扩展，使其具有删除前后空格的方法。

1） 用prototype添加方法

2） substring()函数是返回截取之后的字符串，不会对原字符串进行修改。

3）  示例代码：

String.prototype.deletSpace = function(){
var str = this;  //提取需要操作的字符串
while(str[0] == " "){  //删除前面的空格
str = str.substring(1); 
}
while(str[str.length - 1] == " "){  //删除后面的空格
str = str.substring(0,str.length-1);
}
return str;
}
//测试字符，字符长度为10，前面后面分别有两个空格
var expr =new String(" 123456 ");
var delet = expr.deletSpace();
alert(delet.length);  //返回值为6 前面空格已删除

8完成一个正则表达式，验证用户输入是否为身份证号码。

function check(myform){
if(myform.number.value==""){
alert("请输入身份证号码地址!");
myform.number.focus();
return;
}
if(!checkeNO(myform.number.value)){
alert("您输入身份证号码不正确!");
myform.number.focus();
return;
}
myform.submit();
}
function checkeNO(NO){
var str=NO;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/\d{17}[\d|X]|\d{15}/; 
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
} 

补充：
1）客户端验证Email是否正确1）客户端验证Email是否正确

<script language="javascript">
function check(myform){
if(myform.e_mail.value==" "){
alert("请输入Email地址!");
myform.e_mail.focus();
return;
}
if(!checkemail(myform.e_mail.value)){
alert("您输入Email地址不正确!");
myform.e_mail.focus();
return;
}
myform.submit();
}
function checkemail(email){
var str=email;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; 
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}
} 
</script>

2）验证输入的字符串是否为汉字

function check(myform){
if(myform.realname.value==" "){
alert("请输入真实姓名!");
myform.realname.focus();
return;
}
if(checkrealname(myform.realname.value)){
alert("您输入真实姓名不正确!");
myform.realname.focus();
return;
}
myform.submit();
}
function checkrealname(realname){
var str=realname;
//在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
var Expression=/[^\u4E00-\u9FA5]/; 
var objExp=new RegExp(Expression);
if(objExp.test(str)==true){
return true;
}else{
return false;
}}