web前端开发笔试集锦(javascript篇)

1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

reg.test("a1a__a1a__a1a__a1a__");

2，截取字符串abcdefg的efg

var str = "abcdefg";

if (/efg/.test(str)) {

  var efg = str.substr(str.indexOf("efg"), 3);

  alert(efg);

}

3，判断一个字符串中出现次数最多的字符，统计这个次数

//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数

var str = "abcdefgaddda";

var obj = {};

for (var i = 0, l = str.length; i < l; i++) {

   var key = str[i];

   if (!obj[key]) {

      obj[key] = 1;

   } else {

      obj[key]++;

   }

}

/*遍历这个hash table，获取value最大的key和value*/

var max = -1;

var max_key = "";

var key;

for (key in obj) {

   if (max < obj[key]) {

      max = obj[key];

      max_key = key;

   }

}

alert("max:"+max+" max_key:"+max_key);

4，IE与FF脚本兼容性问题

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

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

(3) 添加，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 获取标签的自定义属性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

(5) document.getElementByName()和document.all[name]

IE；document.getElementByName()和document.all[name]均不能获取div元素

FF：可以

(6) input.type的属性

IE：input.type只读

FF：input.type可读写

(7) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

(8) 是否可用id代替HTML元素

IE：可以用id来代替HTML元素

FF：不可以

这里只列出了常见的，还有不少，更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结

5，规避javascript多人开发函数重名问题

(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀

(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok

6，javascript面向对象中继承实现

javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：

function Animal(name) {

   this.name = name;

}

Animal.prototype.getName = function() {alert(this.name)}

function Dog() {};

Dog.prototype = new Animal("Buddy");

Dog.prototype.constructor = Dog;

var dog = new Dog();

7，FF下面实现outerHTML

FF不支持outerHTML，要实现outerHTML还需要特殊处理

思路如下：

在页面中添加一个新的元素A，克隆一份需要获取outerHTML的元素，将这个元素append到新的A中，然后获取A的innerHTML就可以了。

SPANDIV

SPAN

P

8，编写一个方法 求一个字符串的字节长度

假设：

一个英文字符占用一个字节，一个中文字符占用两个字节

function GetBytes(str){

    var len = str.length;

    var bytes = len;

    for(var i=0; i 
  
        if (str.charCodeAt(i) > 255) bytes++;
 
  
    }
 
  
    return bytes;
 
  
}
 
  
alert(GetBytes("你好,as"));
 
  
 9，编写一个方法 去掉一个数组的重复元素
 
  
var arr = [1 ,1 ,2, 3, 3, 2, 1];
 
  
Array.prototype.unique = function(){
 
  
    var ret = [];
 
  
    var o = {};
 
  
    var len = this.length;
 
  
    for (var i=0; i 
  
        var v = this[i];
 
  
        if (!o[v]){
 
  
            o[v] = 1;
 
  
            ret.push(v);
 
  
        }
 
  
    }
 
  
    return ret;
 
  
};
 
  
alert(arr.unique());
 
  
 10，写出3个使用this的典型应用
 
  
 （1）在html元素事件属性中使用，如
 
  
 
  
 （2）构造函数
 
  
function Animal(name, color) {
 
  
   this.name = name;
 
  
   this.color = color;
 
  
}
 
  
 （3）
 
  
 
  
 
  
 （4）CSS expression表达式中使用this关键字
 
  
  
    
  
 
  
 
  
 
  
    
div element
 
  
    
 
  
 
  
 
  
 12，如何显示/隐藏一个DOM元素？
 
  
el.style.display = "";
 
  
el.style.display = "none";
 
  
 el是要操作的DOM元素
 
  
 13，JavaScript中如何检测一个变量是一个String类型？请写出函数实现
 
  
 String类型有两种生成方式：
 
  
 (1)Var str = “hello world”;
 
  
 (2)Var str2 = new String(“hello world”);
 
  
function IsString(str){
 
  
    return (typeof str == "string" || str.constructor == String);
 
  
}
 
  
var str = "";
 
  
alert(IsString(1));
 
  
alert(IsString(str));
 
  
alert(IsString(new String(str)));
 
  
 14，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
 
  
 
  
 
  
 
  
   
 
  
   
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 15，补充代码，鼠标单击Button1后将Button1移动到Button2的后面
   
 
  
 
  
   
 
  
   
 
  

16，JavaScript有哪几种数据类型

简单：Number，Boolean，String，Null，Undefined

复合：Object，Array，Function

17，下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-viewport

borderLeftColor

mozViewport

18，JavaScript中如何对一个对象进行深度clone

function cloneObject(o) {

    if(!o || 'object' !== typeof o) {

        return o;

    }

    var c = 'function' === typeof o.pop ? [] : {};

    var p, v;

    for(p in o) {

        if(o.hasOwnProperty(p)) {

            v = o[p];

            if(v && 'object' === typeof v) {

                c[p] = Ext.ux.clone(v);

            }

            else {

                c[p] = v;

            }

        }

    }

    return c;

};

19，如何控制alert中的换行

\n alert(“p\np”);

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

SPANDIV

SPAN

P

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 
  
      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：对应W3C的XHTML规范，目前是XHTML1.0。
 
  
 CSS：对应W3C的CSS规范，目前是CSS2.0
 
  
 DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中
 
  
 JavaScript：对应于ECMA的ECMAScript规范
 
  
 XML：对应W3C的XML DOM、XSLT、XPath等等规范
 
  
 XMLHttpRequest：对应WhatWG的Web Applications1.0规范（http://whatwg.org/specs/web-apps/current-work/）
 
  
 AJAX交互模型
 
  
  
 
  
 同步：脚本会停留并等待服务器发送回复然后再继续
 
  
 异步：脚本允许页面继续其进程并处理可能的回复
 
  
 跨域问题简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com或c.a.com下的对象，具体场景如下：
 
  
  
 
  
 PS：（1）如果是端口或者协议造成的跨域问题前端是无能为力的
 
  
 (2) 在跨域问题上，域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
 
  
 前端对于跨域的解决办法：
 
  
 (1) document.domain+iframe
 
  
 (2) 动态创建script标签
 
  
 23，什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
 
  
 
  
这是第一条
 
  
这是第二条
 
  
这是第三条
 
  
 
  
 内部函数被定义它的函数的外部区域调用的时候就产生了闭包。
 
  
(function A() {
 
  
   var index = 0;
 
  
   var ul = 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
 
  
      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);
 
  
}
 
  
 25，请设计一套方案，用于确保页面中JS加载完全。
 
  
var n = document.createElement("script");
 
  
n.type = "text/javascript";
 
  
//以上省略部分代码
 
  
//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)
 
  
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);
 
  
   };
 
  
}
 
  
 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，documen.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,getElementsByName,getElementByTagName,write,writeln
 
  
 属性：cookie,doctype,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） 客户端资源调度，比如麦克风，摄像头
 
  
 --------------------
 
  
 
 
  
 一、写出几种IE6 BUG的解决方法。
 这里能写多少是多少，最好把自己遇到的全写出来。可以借鉴http://css.doyoe.com/ 问题和经验列
 
  
 表，里面应有尽有。写几个常见的：
 1.解决IE6及更早浏览器浮动时产生双倍边距的BUG
 display:inline
 
  
 2.如何解决IE6下的文本溢出BUG(行业内称：多出一只猪)
 删除2个div之间所有的注释；
 不设置浮动；
 调整2个div的宽度，比如将宽度调整为更小一点，刷新页面看效果。
 
  
 3.DIV浮动IE文本产生3象素的bug
 
  
 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{
 
  
 float:left; width:800px;} #left{ float:left; width:50%;}
 
  
 #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} 
 
  
 
 
 
 
  
 4.css hack
 
  
 5.如果这道题出的不是IE6 而是让你列举各浏览器之间的兼容性解决方法，就要写死了。。太多太多
 
  
 二、如果让一个div在页面中垂直居中（动动脑子，其实方法很多，各有利弊）
 
  
 1.绝对定位法
 
  
 2.单行垂直居中（重点是里面的文字是单行）
 div {
 height:25px;
 line-height:25px;
 overflow:hidden;
 }
 
  
 3.多行未知高度文字的垂直居中
 
  
 div {
 padding:xxpx; （谁都会吧）
 }
 
  
 4.多行文本固定高度的垂直居中 （IE6不能正确地理解display:table和display:table-cell，所以要
 
  
 用css hack，想知道为什么这样做，可以参考
 
  
 http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html，）
 
  
 div#wrap父容器 {
 display:table;
 border:1px solid #FF0099;
 background-color:#FFCCFF;
 width:760px;
 height:400px;
 _position:relative;
 overflow:hidden;
 }
 div#subwrap子容器 {
 vertical-align:middle;
 display:table-cell;
 _position:absolute;
 _top:50%;
 }
 div#content内容 {
 _position:relative;
 _top:-50%;
 }
 
  
 三、如何让2个并列的div自动等高（不设高度）
 注：如果能写出3种常见方法固然最好，但最好写一下各自优缺点，否则面试时肯定会问你为什么这样
 
  
 写
 
  
 1、背景模拟法（假高度），按照尺寸制作背景，平铺，当内容增多时，背景就会向下纵向重复，看起
 
  
 来就向左右两个div都自动向下延伸了一样。
 
  
 2、表格嵌套法（不难理解，表格都是等高的，就是在div中嵌套表格）
 
  
 3、内外补丁法（最推荐的方法，因为只用css实现的，但初学者不易理解）
 * { margin:0; padding:0; }
 #wrap {
 overflow:hidden; (这行代码是重点，否则你会看到页面很长很长)
 padding:0;
 padding-left:180px;（内补丁）
 }
 #left,#right {
 height:auto;
 margin-bottom:-10000px;（外补丁）
 padding-bottom:10000px;（内补丁）
 }
 #left {
 display:inline;
 float:left;
 width:180px;
 margin-left:-180px;（外补丁）
 background: #0CF;
 }
 #right{
 float:right;
 width:100%;
 background: #FC6;
 }
 
  
 这里说一下内外补丁，其实也没那么难理解，我的理解就是相互抵消。多用用margin负值，你会了解这
 
  
 个原理的。
 
  
 四、宽度自适应三栏的布局方式
 三种方法：
 1、绝对定位法（最易理解）
 左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实
 
  
 现了三栏自适应布局。
 
  
 html,body{margin:0; height:100%;}
 #left,#right{position:absolute; top:0; width:200px; height:100%;}
 #left{left:0; background:#a0b3d6;}
 #right{right:0; background:#a0b3d6;}
 #main{margin:0 210px; background:#ffe6b8; height:100%;}
 
  
 

 

 
 
  
 2、margin负值法（不易理解）
 
  
 html,body{margin:0; height:100%;}
 #main{width:100%; height:100%; float:left;}
 #main #body{margin:0 210px; background:#ffe6b8; height:100%;}
 #left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
 #left{margin-left:-100%;}
 #right{margin-left:-200px;}
 
  
 

 

 
 

 
 
  
 重点是第一个div是中间的main，且必须套一个容器。
 
  
 3、浮动法（最常见）
 
  
 html,body{margin:0; height:100%;}
 #main{height:100%; margin:0 210px; background:#ffe6b8;}
 #left,#right{width:200px; height:100%; background:#a0b3d6;}
 #left{float:left;}
 #right{float:right;}
 
  
 

 

 
 
  
 重点是中间的main要放在标签最后，缺点是需要用clear:both
 
  
 五、一小张效果图，大致内容是一个图片列表，ul内边距左：10px 右：10px。ul中的li右边距30px，
 
  
 但最后一个li距离ul只有10px，也就是ul有边框，里面的li图片列表也有边框。（这些属性是定死的，
 
  
 你不能修改，要求写出这段css代码）
 
  
 这道题，其实也是考你的内外补丁掌握，大致方法是，ul设置左右内边距后，设置li的margin负值，这
 
  
 样li在ul的框里就居中了。还有一种比较傻瓜的办法，设置li的margin-right:30px的后，最后一个li
 
  
 需要改class，把margin-right清掉。
 
  
 六、谈谈你对WEB标准以及W3C的理解与认识。
 这题网上随便找找都有，大致要点:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用
 
  
 外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内
 
  
 容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打
 
  
 印版本而不需要复制内容、提高网站易用性。