web前端百度.docx

pageWidth=window.innerWidth,

pageHeight=window.innerHeight;

if（typeofpageWidth!

="number"）{

if（patMode=="CSS1Compat"）{

pageWidth=document.documentElement.clientWidth;

pageHeight=document.documentElement.clientHeight;

}else{

pageWidth=document.body.clientWidth;

pageHeight=document.body.clientHeight;

}

}

$（"#test"）.css（'width',pageWidth）;

$（"#test"）.css（'height',pageHeight）;

$（"#test"）.css（'background',"gray"）;

//滚动触发的事件

window.onscroll=function（）{

vartopPos=getScrollTop（）;

$（"#test"）.css（'marginTop',topPos）;

$（"#test"）.css（'width',pageWidth）;

$（"#test"）.css（'height',pageHeight）;

$（"#test"）.css（'background',"silver"）;

}

//获取滚动条距离导航栏的高度

functiongetScrollTop（）{

varscrollTop=0;

if（document.documentElement&&document.documentElement.scrollTop）{

scrollTop=document.documentElement.scrollTop;

}elseif（document.body）{

scrollTop=document.body.scrollTop;

}

returnscrollTop;

}

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

模拟map

6.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）innerTexttextContentouterHTML

IE：

支持innerText,outerHTML

FF：

支持textContent

（8）是否可用id代替HTML元素

IE：

可以用id来代替HTML元素

FF：

不可以

1）web开发团队人员应该如何分工协作

布局CSS脚本

比如脚本人员长期的积累可能铸造类型YUI这样的产品级脚本库（亮点）

2）web开发曾经的团队有没有别人遇到问题，什么问题，向你请教

3）自己在开发的过程中遇到什么问题，谈谈看法

4）web开发脚本开发环境用什么、调试用什么

现在就用notepad

调试肯定用firebug，chrom，ie下看页面DOM用IEInspector

5）如果有个新技术，现在需要掌握，你会怎么做

新技术的发现我一般是通过RSS工具，比如我用GoogleReader

每天有半个小时左右在看最新的资讯、技术走向

发现新技术，首先有个大概了解，如果有深入的必要

我一般会看他的官网，比如jquery，我会搜索到，然后看Docs、samples

如果要用到项目中，有困难的问题，我会svn得到最新的这个技术的源码，深入跟踪进去，看实现原理

一般现在涌现的技术都是opensource

提问时间

1XXweb开发脚本是否有做类似YUI库的打算

2XXweb开发工程师打算招多少人

XX电话二面回忆web开发部–web开发工程师

1、首先是自我介绍

2、然后谈谈做的web项目

3、然后开始问技术问题

4、前端开发的优化问题

答:

产品发布时，js的压缩，即函数名替换、整个文件压缩成一行

css开发的时候注释写清楚，先有个base.css，然后根据不同页面需要再加css，发布的时候将css中的一个定义写成一行，目的是压缩文件大小

最终发布的时候甚至可以将css，js分别压缩成一个文件，甚至css、js通过技巧压缩到一个里边（亮点）

这样的目的是，减少用户访问web产品的http连接数

5、web前端产品的开发流程

答:

首先根据产品的定位、用户群，确定配色，然后纸上设计整体布局，然后png或者psd出效果图，切出需要的小图片，然后手写代码div+css构造出页面，然后根据功能写脚本

参考126邮箱首页，将所有小图片放到一个图片中，通过css的background-position实现页面，还是为了优化，减少http连接数

6、规避javascript多人开发函数重名问题

答:

首先是通过命名规范，比如根据不同的开发人员实现的功能，在函数名加前缀，虽然函数名看起来复杂，发布的时候还是可以替换，从而优化。

还有一种办法是，每个开发人员都把自己的函数封装到类中，然后调用的时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性。

7、javascript面向对象中继承实现

答：

我是用prototype.jsextend.js扩展

然后子类中parent.initialize（）…

答的不好

正确答案：

//1.构造器

functionAnimal（）{};

functionMammal（）{};

functionCanine（）{};

functionDog（）{};

//2.原型链表

Mammal.prototype=newAnimal（）;

Canine.prototype=newMammal（）;

Dog.prototype=newCanine（）;

prototype.js实现的基本原理

答：

将功能封装，比如Ajax.Request，还是有判断浏览器的代码；Position这样的实现页面元素位置的计算

8、prototye太大，如果一个页面功能不需要这样的，自己实现，怎么做

答：

首先页面、css、脚本分离之后，脚本中将整个模块功能写成一个类varDo={}

其中初始化函数init:

function（）{}，然后最后做Do.init（）

其中init会对页面上form中需要交互的元素绑定事件，比如$（’input1′）.onclick=function（）{}

9、IE、FF下面脚本的区别

答：

1.IE有outerHTML，FF没有

2.页面元素id，IE可以直接取，FF必须document.getElementById（）

3.Ajax里边FF是newXMLHttpRequest，

而IE是

trynewActiveXObject（’Msxml2.XMLHTTP’）

trynewActiveXObject（’Microsoft.XMLHTTP’）

10、FF下面实现outerHTML

答：

.parenet.firstChild.parent.innerHTML

这个没答好

正确答案：

原理是，get：

取到这个标签的tagname，然后属性循环构造成这个标签的属性

set：

把字符串用insertBefore插入到这个元素前面，然后removeChild这个元素

–

if（typeof（HTMLElement）!

=”undefined”&&!

window.opera）

{

HTMLElement.prototype.__defineGetter__（”outerHTML”,function（）

{

vara=this.attributes,str=”<”+this.tagName,i=0;

for（;i

if（a[i].specified）

str+=”“+a[i].name+’=”‘+a[i].value+’”‘;

if（!

this.canHaveChildren）

returnstr+”/>”;

returnstr+”>”+this.innerHTML+””;

}）;

HTMLElement.prototype.__defineSetter__（”outerHTML”,function（s）

{

vard=document.createElement（”DIV”）;d.innerHTML=s;

for（vari=0;i

this.parentNode.insertBefore（d.childNodes[i],this）;

this.parentNode.removeChild（this）;

}）;

HTMLElement.prototype.__defineGetter__（”canHaveChildren”,function（）

{

return!

/^（area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param）$/.test（this.tagName.toLowerCase（））;

}）;

}

//–>

11、IE、FF下面CSS的解释区别

答：

1.png透明背景，FF下面没有问题，IE需要用滤镜通道

2.z-index在IE、FF下面的解释问题，

12、IE会认为第一个z-index=0

13、.长字符串，word-wrap:

break-all可以解决IE，但是FF需要overflow:

hidden才行

补充：

1、有些标签在ff中不能用，比如button

2、滤镜

3、鼠标cursor:

handcursor:

pointer

4、div的高度自适应

5、对box模型解析不一样

6、ul、ol的padding和margin

IE都能识别*，标准浏览器（如FF）不能识别*；

IE6能识别*，但不能识别!

important；

IE7能识别*，也能识别!

important；

FF不能识别*，但能识别!

important；

例如style=”*width:

10px;!

importantwidth:

20px;”

这样在IE6下宽度为10px,在IE7下宽度时20px

12、web前端技术的展望

答：

javascriptajax；flashAS；Flex；Sliveright

XXweb开发工程师笔试问题集

1、编写一个方法求一个字符串的字节长度

newfunction（s）

{

if（!

arguments.length||!

s）returnnull;

if（”"==s）return0;

varl=0;

for（vari=0;i

{

if（s.charCodeAt（i）>255）l+=2;

elsel++;

}

alert（l）;

}（”hello你好，我好,大家好！

world!

”）;

2、编写一个方法去掉一个数组的重复元素

Array.prototype.strip=function（）

{

if（this.length<2）return[this[0]]||[];

vararr=[];

for（vari=0;i

{

arr.push（this.splice（i–,1））;

for（varj=0;j

{

if（this[j]==arr[arr.length-1]）

{

this.splice（j–,1）;

}

}

}

returnarr;

}

vararr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];

alert（arr.strip（））;

3、用脚本写去除字符串的前后空格

String.prototype.trim=function（mode）

{//前后去空格

if（mode==’left’）{

return（（this.charAt（0）==”“&&this.length>0）?

this.slice

（1）.trim（’left’）:

this）;

}else

if（mode==’right’）{

return（（this.charAt（this.length-1）==”“&&this.length>0）?

this.slice（0,this.length-1）.trim（’right’）:

this）;

}else{

returnthis.trim（’left’）.trim（’right’）;

}

};

5、算出字符串中出现次数最多的字符是什么，出现了多少次

//

[CDATA[varstr="adadfdfseffserfefsefseeffffftsdg";//命名一个变量放置给出的字符串

varmaxLength=0;//命名一个变量放置字母出现的最高次数并初始化为0

varresult='';//命名一个变量放置结果输入

while（str!

=''）{//循环迭代开始，并判断字符串是否为空

oldStr=str;//将原始的字符串变量赋值给新变量

getStr=str.substr（0,1）;//用字符串的substr的方法得到第一个字符（首字母）

eval（"str=str.replace（/"+getStr+"/g,''）"）;//详细如补充

if（oldStr.length-str.length>maxLength）

{//判断原始的字符串的长度减去替代后字符串长度是否大于之前出现的最大的字符串长度

maxLength=oldStr.length-str.length;//两字符串长度相减得到最大的字符串长度

result=getStr+"="+maxLength//返回最大的字符串结果（字母、出现次数）

}

}

alert（result）//弹出结果

//]]>

6、写出3中使用this的典型应用

在HTML元素事件属性中inline方式使用this关键字：

7.最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。

这个网上有很多成品，主要是通过绝对定位和相对定位结合的方式，改造原有的select标签和input标签的方法。

附上javascript正则表达式的基本知识：

g:

全局匹配

i:

忽略大小写

^匹配一个输入或一行的开头，/^a/匹配”anA”，而不匹配”Ana”

$匹配一个输入或一行的结尾，/a$/匹配”Ana”，而不匹配”anA”

*匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa

+匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa

?

匹配前面元字符0次或1次，/ba*/将匹配b,ba

（x）匹配x保存x在名为$1…$9的变量中

x|y匹配x或y

{n}精确匹配n次

{n,}匹配n次以上

{n,m}匹配n-m次

[xyz]字符集（characterset），匹配这个集合中的任一一个字符（或元字符）

[^xyz]不匹配这个集合中的任何一个字符

[b]匹配一个退格符

b匹配一个单词的边界

B匹配一个单词的非边界

cX这儿，X是一个控制符，/cM/匹配Ctrl-M

d匹配一个字数字符，/d/=/[0-9]/

D匹配一个非字数字符，/D/=/[^0-9]/

n匹配一个换行符

r匹配一个回车符

s匹配一个空白字符，包括n,r,f,t,v等

S匹配一个非空白字符，等于/[^nfrtv]/

t匹配一个制表符

v匹配一个重直制表符

w匹配一个可以组成单词的字符（alphanumeric，这是我的意译，含数字），包括下划线，如[w]匹配”$5.98″中的5，等于[a-zA-Z0-9]

W匹配一个不可以组成单词的字符，如[W]匹配”$5.98″中的$，等于[^a-zA-Z0-9

举例：

验证email

varmyReg=/^[_a-z0-9]+@（[_a-z0-9]+.）+[a-z0-9]{2,3}$/;

if（myReg.test（strEmail））returntrue;