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.编写一个数组去重的方法