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
17
{
18
//Others: Firefox, Safari, Chrome, and Opera
19
script.onload =
function
()
20
{
21
callback();
22
};
23
}
24
script.src = url;
25
document.body.appendChild(script);
26
}
25,请设计一套方案,用于确保页面中JS加载完全。
1
var
n = document.createElement(
"script"
);
2
n.type =
"text/javascript"
;
3
//以上省略部分代码
4
//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)
5
if
(ua.ie)
6
{
7
n.onreadystatechange =
function
()
8
{
9
var
rs =
this
.readyState;
10
if
(
'loaded'
=== rs ||
'complete'
===rs)
11
{
12
n.onreadystatechange =
null
;
13
f(id,url);
//回调函数
14
}
15
};
16
//省略部分代码
17
//safari 3.x supports the load event for script nodes(DOM2)
18
n.addEventListener(
'load'
,
function
(){
19
f(id,url);
20
});
21
//firefox and opera support onload(but not dom2 in ff) handlers for
22
//script nodes. opera, but no ff, support the onload event for link
23
//nodes.
24
}
25
else
26
{
27
n.onload =
function
(){f(id,url);};
28
}
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) 客户端资源调度,比如麦克风,摄像头
亚信web前端面试题
1.判断字符串以字母开头,后面可以是数字,下划线,字母,长度为6-30
2.请举例使用callee属性实现函数的递归使用
3.Ajax同步和异步的区别,如何解决跨域问题?
4.apply和call方法有形似之处,请说出二者的区别
5.请解读一下javascript代码,并之处问题所在
1
var
Obj=
function
(msg){
2
this.msg=msg;
3
this.shout=
function
(){
4
alert(this.msg);
5
}
6
this.waitAndShout=
function
(){
7
8
setTimeout(this.shout, 2000);
9
}
10
}
11
var
aa=
new
Obj(
"abc"
);
12
aa.waitAndShout();
6.请给Array本地对象增加一个原型方法,他的用途是删除数组中重复的条目,并将新的数组返回
7.以下代码中 end字符串什么时候输出
1
var
t=
true
;
2
setTimeout(
function
(){
3
console.log(123);
4
t=
false
;
5
},1000);
6
7
while
(t)
8
{ }
9
console.log(
'end'
);
8.你对前端开发工程师这个职位怎么理解的?前景如何?
9.前端开发的优化问题?
其他面试题集会
题一
CSS
1、css选择器优先级顺序
2、将图片bg.jpg作为按钮的背景图片,并把文字隐藏
<input type=”button” value=”我是按钮”/>
4、写出你所了解的目前主流浏览器(ie6,ie7,ie8,firefox,chrome)的css hack
JAVASCRIPT
1、表单验证
A、写一段正则表达式验证字符串匹配邮箱格式, 邮箱如
admin2514@topsem.com.cn、google@gmail.com。
B、验证字符串是否为数字字符串。如‘125’,‘2313.12’等为数字字符串。
2、写出下面代码的输出结果
A、
Var obj={};
Var ref=obj;
obj.name=”objectA”;
obj=["one","two","three"];
alert(ref.name);
alert(ref.length);
B、
Var outter=[];
Function clouseTest(){
Var array=["one","two","three","four"];
for(vari=0;i<array.length;i++){
Var x={};
x.no=i;
x.text=array[i];
x.invoke=function(){
alert(i);
}
outter.push(x);
}
}
//调用这个函数
clouseTest();
outter[0].invoke();
outter[3].invoke();
C、
$(function(){
Var con=$(“div#panel”);
this.id=”content”;
con.click(function(){
alert(this.id);
});
});
3、操作表格(可用javascript框架实现)
<table id=”mytable”>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
将第二行,第二列的内容改为55,背景色设置为红色。
4、算法题
A、快速排序算法
B、写一个函数实现字符串翻转
5、网站有一个广告,显示规则为:
a、第一次进入页面,广告显示10秒后隐藏
b、一个小时内第二次进入不显示广告简单描述下,实现的方法
6、列举你使用过的javascript操作字符串函数。
7、描述下你对js闭包、面向对象、继承的理解
8、你熟悉的Javascript框架,使用此框架实现过的最复杂的功能是?
题二
HTML+CSS
1.对WEB标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 :同时加载
前者无兼容性,后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式,后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成,分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
11.<img>标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一
13.解释css sprites,如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
15.你如何对网站的文件和资源进行优化?期待的解决方案包括:
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处
17.清除浮动的几种方式,各自的优缺点
1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,,,增加无意义的标签)
2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.是用afert伪元素清除浮动(用于非IE浏览器)
Javascript
1.javascript的typeof返回哪些数据类型
Object number function boolean underfind
2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== – ===)
3.split() join() 的区别
前者是切割成数组的形式,后者是将数组转换成字符串
4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
5.事件绑定和普通事件有什么区别
6.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
7.IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的,一个是类似修改密码的
9.call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax请求时,如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
11.b继承a的方法
12.写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
13.事件委托是什么
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
http://www.webasily.com/?p=78 例子可见此链接
14.闭包是什么,有什么特性,对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看(问这个问题的不是一个公司)
15.如何阻止事件冒泡和默认事件
canceBubble return false
16.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17.解释jsonp的原理,以及为什么不是真正的ajax
动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作
18.javascript的本地对象,内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
19.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法,jquery中有 $().ready(function)
20.”==”和“===”的不同
前者会自动转换类型
后者不会
21.javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合
22.编写一个数组去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}