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
}
}
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.编写一个数组去重的方法
3295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
