web前端笔试题整理

java

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

　　

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

2 reg.test("a1a__a1a__a1a__a1a__");

2，截取字符串abcdefg的efg

1 var str = "abcdefg";

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

3   {

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

5 alert(efg);

6 }

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

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

2 var str = "abcdefgaddda";

3 var obj = {};

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

5  {

6   var key = str[i];

7   if (!obj[key])

8    {

9  　  obj[key] = 1;

10 　　}

11     else

12     {

13 　　  obj[key]++;

14 　　}

15 }

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

17 var max = -1;

18 var max_key = "";

19 var key;

20 for (key in obj)

21   {

22     if (max < obj[key])

23       {

24         max = obj[key];

25         max_key = key;

26     }

27 }

28 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原型链，简单的代码如下：

1 function Animal(name)

2   {

3   this.name = name;

4 }

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

6 function Dog() {};

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

8 Dog.prototype.constructor = Dog;

9 var dog = new Dog();

7，FF下面实现outerHTML

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

　　思路如下：

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

　　SPANDIV

　　SPAN

　　P

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

　　假设：

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

1 function GetBytes(str)

2   {

3   var len = str.length;

4   var bytes = len;

5   for(var i=0; i<len;i++)

6   { if (str.charCodeAt(i) > 255) bytes++; }

7   return bytes;

8 }

9 alert(GetBytes("你好,as"));

9，编写一个方法 去掉一个数组的重复元素

1 var arr = [1 ,1 ,2, 3, 3, 2, 1];

2 Array.prototype.unique = function()

3  {

4   var ret = [];

5   var o = {};

6   var len = this.length;

7   for (var i=0; i<len;I++)

8     {

9      var v = this[i];

10      if (!o[v])

11        {

12         o[v] = 1;

13         ret.push(v);

14       }

15    }

16 return ret;

17 };

18 alert(arr.unique());

10，写出3个使用this的典型应用

　(1)在html元素事件属性中使用，如

　(2)构造函数

1 function Animal(name, color) {

2 this.name = name;

3 this.color = color;

4 }

　(3)CSS expression表达式中使用this关键字

12，如何显示/隐藏一个DOM元素?

　　el.style.display = "";

　　el.style.display = "none";

　　el是要操作的DOM元素

13，JavaScript中如何检测一个变量是一个String类型?请写出函数实现

　　String类型有两种生成方式：

　　(1)

1 Var str = “hello world”;

　　(2)

1   Var str2 = new String(“hello world”);

2 function IsString(str){return (typeof str == "string" || str.constructor == String);}

3 var str = "";

4 alert(IsString(1));

5 alert(IsString(str));

6 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

1 function cloneObject(o)

2  {

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

4    {

5     return o;

6  }

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

8  var p, v;

9  for(p in o)

10    {

11     if(o.hasOwnProperty(p))

12       {

13        v = o[p];

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

15          {

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

17         }

18      else

19        {

20         c[p] = v;

21      　}

22     　}

23  　}

24   return c;

25 };

19，如何控制alert中的换行

　　\n alert(“p\np”);

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

　　SPANDIV

　　SPAN

　　P

21，请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：

　　

1   var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

2 function parseQueryString(url)

3   {

4   var params = {};

5   var arr = url.split("?");

6   if (arr.length <= 1)

7     return params;

8   arr = arr[1].split("&");

9   for(var i=0, l=arr.length; i<l;i++)

10     {

11      var a = arr[i].split("=");

12      params[a[0]] = a[1];

13    }

14    return params;

15 }

16 var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";

17 var ps = parseQueryString(url);

18 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?

　　这是第一条

　　这是第二条

　　这是第三条

　　内部函数被定义它的函数的外部区域调用的时候就产生了闭包。

1 (function A() {

2 var index = 0;

3 var ul = document.getElementById("test");

4 var obj = {};

5 for (var i = 0, l = ul.childNodes.length; i < l; i++)

6   {

7    if (ul.childNodes[i].nodeName.toLowerCase() == "li")

8      {

9      var li = ul.childNodes[i];

10      li.onclick = function()

11        {

12          index++;

13          alert(index);

14       }

15     }

16  }

17 })();

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

　　默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头

会导致加载很慢的话，是会严重影响用户体验的。

　　异步加载方式：

　　(1) defer，只支持IE

　　(2) async：

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

1 function loadScript(url, callback)

2   {

3     var script = document.createElement("script")

4     script.type = "text/javascript";

5     if (script.readyState)

6       { //IE

7         script.onreadystatechange = function()

8           {

9        　   if (script.readyState == "loaded" ||script.readyState == "complete")

10              {

11                script.onreadystatechange = null;

12                callback();

13            　}

14          　};

15     　}

16        else