前端面试题一

CSS 选择题

简答题

1、 HTML中定义表格的宽度的时候 80PX与80%的区别是什么

Px表示像素，% 表示站整个也面宽度的百分比

2、简述 DIV元素和SPAN元素的区别。

DIV默认情况下是分行显示， SPAN在同行显示

3、 CSS+DIV开发 Web页面的优势有哪些？

优点：

1）div+css ，这个网页设计模式中， div承担了网页的内容，css承担了网页的样式。这样就使网页的内容和样式的分离开来。有利于页面的维护升级。

2）有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在 table中一层层的查找）

3）有助于页面的重构(换皮肤如 blog，直接套用另外一套样式就可以实现，而不用改动网页脚本。 )

缺点：开发效率比较低

4、有关 CSS浏览器兼容的一道面试题

请写出一段代码实现如下效果：在老的浏览器里面显示一段蓝色文字，新浏览器里面则显示成红色的，在 IE6里面显示成绿的，IE7里面显示成黑色的因为这个问题不是很严谨，只给出可能的答案：

#content p{color:blue}

html>body #content p {color:red}

* html #content p{color:green}

html>body #content p {*color:black;}

*的涵意：由于不同的浏览器对 CSS的支持及解析结果不一样，还由于 CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的 CSS。这种方式称之为CSS Hack。

CSS Hack大致有3 种表现形式， CSS类内部Hack 、选择器 Hack以及HTML 头部引用 (if IE)Hack，CSS Hack 主要针对类内部 Hack：比如 IE6 能识别下划线 "_"和星号" * " ，IE7能识别星号 " * "，但不能识别下划线"_"，而 firefox两个都不能认识。

选择器 Hack：比如 IE6 能识别*html .class{}， IE7能识别*+html .class{} 或者*:first-child+html .class{}。

HTML头部引用(if IE)Hack ：针对所有 IE：<![endif]-->，针对IE6 及以下版本： <![endif]--> ，这类Hack不仅对 CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序一般是将识别能力强的浏览器的 CSS写在前面，如：

比如要分辨 IE6和firefox 两种浏览器，可以这样写：

div{

background:green;/*forfirefox*/

*background:red;/*forIE6*/(bothIE6&&IE7)

}

在IE6中看到是红色的，在 firefox中看到是绿色的。

在firefox中，由于不识别 *号标识，于是将以星号开头的样式过滤掉，不予理睬，解析得到的结果是 :div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中，两个 background样式都能识别出来，解析得到的结果是 :div{background:green;*background:red;}，于是根据优先级别，处在后面的 red的优先级高，所以div的背景颜色就是红色的。

CSS hack:区分IE6 ，IE7， firefox

区别 IE6与FF ：

background:orange;*background:blue;

区别 IE6与IE7 ：

background:green!important;background:blue;

区别 IE7与FF ：

background:orange;*background:green;

区别 FF，IE7 ，IE6：

background:orange;*background:green;_background:blue;

background:orange;*background:green!important;*background:blue;

注： IE都能识别*; 标准浏览器 (如FF) 不能识别 *；

IE6能识别* ；不能识别 !important;

IE7能识别* ，能识别 !important;

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

浏览器优先级别 :FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6

以: " #demo {width:100px;} "为例;

#demo {width:100px;} /* 被FIREFOX,IE6,IE7执行 .*/

* html #demo {width:120px;} /* 会被IE6执行 ,之前的定义会被后来的覆盖 ,所以#demo 的宽度在 IE6就为120px; */

*+html #demo {width:130px;} /* 会被IE7执行 */

所以最后 ,#demo的宽度在三个浏览器的解释为 : FIREFOX:100px; ie6:120px; ie7:130px;

IE8 最新css hack：

"\9" 　例:"border:1px \9;".这里的"\9"可以区别所有 IE和FireFox.（只针对 IE9 Hack）

"\0" 　IE8识别，IE6 、IE7不能.

"*" 　IE6、IE7可以识别.IE8、 FireFox不能.

"_" 　IE6可以识别"_",IE7 、IE8、FireFox 不能.

5、 Position的值有哪几种？默认值又是什么？

position 的五种值都是什么？ static, relative, absolute, fixed, inherit
position 的缺省值是什么？ Static

6、 超链接访问过后 hover样式就不出现的问题?

被点击访问过的超链接样式不在具有 hover和active 了,解决方法是改变 CSS属性的排列顺序: L-V-H-A

7、 IE6的双倍边距 BUG

例如 :

div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red } </style>

浮动后本来外边距 10px,但IE 解释为20px,解决办法是加上 display:inline

8、 为什么 FF下文本无法撑开容器的高度 ?

标准浏览器中固定高度值的容器是不会象 IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉 he ight设置min-height:200px; 这里为了照顾不认识 min-height的IE6 可以这样定义：

div { height:auto!important; height:200px; min-height:200px; }

9、 为什么 web标准中IE无法设置滚动条颜色了 ?

原来样式设置：

body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000;scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } </style>

解决办法是将 body换成html

10、为什么无法定义1px左右高度的容器?

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px

11、怎么样才能让层显示在 FLASH之上呢?

解决的办法是给 FLASH设置透明:

12、怎样使一个层垂直居中于浏览器中 ?

position:absolute; top:50%; left:50%;

margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } –> </style>

这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

13、firefox嵌套 div标签的居中问题的解决方法

假定有如下情况： <div id=”a ”> <div id=” b”> </div> </div>

如果要实现 b在a 中居中放置，一般只需用 CSS设置a 的text-align属性为 center。这样的方法在IE里看起来一切正常；但是在Firefox中 b却会是居左的。

解决办法就是设置 b的横向margin 为auto。例如设置 b的CSS 样式为： margin: 0 auto;。

14、FireFox浏览器是否支持 VBScript脚本？

不支持

15、我们现在使用的IE的版本一般是多少，IE的英文全称是什么？

Internet Explorer 6.0 SP2/5.5/5.0/6.0 SP1/7.0 beta2/7.0 beta3 都算对。

16、CSS规范中，每一条样式的结束符是 ;（分号）还是: （冒号） ？样式名与样式值之间的 分隔符是: （冒号）还是 =（等号）？

;，: 和=都可以

17、CSS规范中， .（句点）后面跟一个名称代表什么含义？ #（井号）后面跟一个名称代表

什么含义？如果要对一个元素设置 CSS样式，应将CSS 样式写在它的什么属性内？

后面跟个名称表示文档中所有 class属性值包含这个名称的应用其后样式， #后面跟个名称表示文档中 ID为此名称的元素应用其后样式。

18、什么是CSS？它的能做些什么？

CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（ Cascading Stylesheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。它的作用可以达到：

（1）在几乎所有的浏览器上都可以使用。

（2）以前一些非得通过图片转换实现的功能，现在只要用 CSS就可以轻松实现，从而更快地下载页面。

（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。（4 ）你可以轻松地控制页面的布局。

（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个 CSS文件进行控制，只要修改这个 CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

19、CSS指的是什么 ?在网页制作中为什么要使用 CSS技术?

CSS(Cascading Style Sheets) 也叫层叠样式表，它是用来控制网页中一个或多个元素的外观。在网页制作中，使用样式表可以减少很多具有相同外观元素的重复设置工作，从而给网页的设计和维护带来了很大的方便 ;具体应用是：改变样式表中元素显示样式的定义，则在使用该样式表的所有网页中相应元素的显示样式都会自动发生改变。

编程题

JavaScript 选择题

20、以下哪条语句会产生运行错误：（ A）

A、 var obj = ( ); B 、 var obj = [ ]; C 、 var obj = { }; D 、 var obj = / /;

21、以下哪个单词不属于 javascript保留字：（B）

A、 with B 、 parent C、 class D、 void

22、请选择结果为真的表达式：（ C）

A、 null instanceof Object B 、 null === undefined C、 null == undefined D 、 NaN == NaN

23、请选择对javascript理解有误的：(ABCD)

A、 JScript 是javascript的简称

B、 javascript 是网景公司开发的一种 Java脚本语言，其目的是为了简化 Java的开发难

度 C、 FireFox和IE 存在大量兼容性问题的主要原因在于他们对 javascript的支持不同上 D、 AJAX技术一定要使用javascript技术

24、foo对象有 att属性，那么获取att属性的值，以下哪些做法是可以的：（ ACE）

A、 foo.att B 、 foo(“ att”) C 、 foo[“ att”] D 、 foo{“ att”} E 、 foo[“ a”+ ”t” +”t ”]

25、在不指定特殊属性的情况下，哪几种 HTML标签可以手动输入文本：（ AB）

A、 <TEXTAREA></TEXTAREA> B 、 <INPUT type=”text ”/> C、 <INPUT type=”hidden ”/> D、 <DIV></DIV>

26、以下哪些是javascript的全局函数：（ABC）

A、 escape B 、 parseFloat C、 eval D、 setTimeout E 、 alert

27、关于IFrame表述正确的有： (ABCD)

A、通过IFrame，网页可以嵌入其他网页内容，并可以动态更改 B、在相同域名下，内嵌的 IFrame可以获取外层网页的对象 C、在相同域名下，外层网页脚本可以获取 IFrame网页内的对象 D、可以通过脚本调整IFrame的大小

28、关于表格表述正确的有：（ ABCDE）

A、表格中可以包含 TBODY元素 B 、表格中可以包含 CAPTION元素 C 、表格中可以包含多个 TBODY元素 D 、表格中可以包含 COLGROUP元素 E 、表格中可以包含 COL元素

29、关于IE的 window对象表述正确的有：（ ACD）

A、 window.opener 属性本身就是指向 window对象

B、 window.reload() 方法可以用来刷新当前页面

C、 window.location= ”a.html”和 window.location.href=”a.html ”的作用都是把当前页

面替换成 a.html页面

D、定义了全局变量 g；可以用window.g 的方式来存取该变量

简答题

30、如何让一个页面每20秒钟刷新一次而不用Javascript?

可以使用 meta refresh标签来进行刷新。meta 标签是属于 HTML文档的<head> 部分。例如： <meta http-equiv=”refresh ” content=” 20″> 如下代码实现用 meta标签将页面转发到一个新的页面：

31、HTML的几种触发都是什么？

onblur 事件会在对象失去焦点时发生。

onchange 事件会在域的内容改变时发生。

onclick 事件会在对象被点击时发生。

onfocus 事件在对象获得焦点时发生。

onkeydown 事件会在用户按下一个键盘按键时发生。

onkeypress 事件会在键盘按键被按下并释放一个键时发生。

onkeyup 事件会在键盘按键被松开时发生。

onmousedown 事件会在鼠标按键被按下时发生。

onmousemove 事件会在鼠标指针移动时发生。

onmouseout 事件会在鼠标指针移出指定的对象时发生。

onmouseup 事件会在鼠标按键被松开时发生。

32、说一下javascript中 this的用法

通常情况下 , this代表的是前面提到的Globle Object.也就是 Browser环境时的window Object. 当function作为某一对象的 method 时, this 代表这个 function 所属的 object. 下面这段代码有格错误 , 涉及到this 的使用:

function Employee(a) {

this.name = a;

}

function init(){

John = Employee(”Johnson”);

alert(John.name);

}

在init()中我们少了一个 new keyword. 于是这个代码就会报错, 因为 Browser把Employee 当作是window obect的一个 method, 里面的this 指的就是 window object. init()应该改为:

function init(){

John = new Employee(”Johnson”);

alert(John.name);

}

同时我们也可以将 Employee的constructor 函数修改 , 防止类似的错误:

function Employee(a) {

if (!(this instanceof Employee))

return new Employee(a);

this.name = a;

}

33、介绍一下javascript中function 的用法

在 JavaScript中 , function是一种数据类型, 所有的 function都是从buildin 的Function object 衍生的对象 . 所以在JavaScript 中function可以作为参数传递 , 可以作为Object 的property, 也可以当作函数返回值 . function在JavaScript 中有两种用法 , 一种是当作constructor, 前面加上 new keyword用来建立对象. 一种是当作 method, 为其他对象调用.

注意 function和method 在中文里的意思相当 , 在有些语言里也可以通用 . 但是在 JavaScript 中, 它们还是有所区别的 . function本身是是一个对象, 而当作为一个方法他属于一个对象时 , 就成为了一个这个对象的 method, 相当于一个对象种的属性 . 也就是说method 是相对于一个对象而言的 , function在某些情况下成为了一个对象的 method.

34、JavaScript面试 -介绍一下JavaScript中的对象。

JavaScript中的Object 是一组数据的 key-value的集合, 有点类似于 Java中的HashMap, 所有这些数据都是 Object里的property. 通常情况下 , JavaScript中建立一个对象用”new”加上 constructor function来实现. 如new Date(), new Object()等.

var book = new Object();

book.name = “JavaScript is Cool”;

book.author = “tom”; book.pages = 514;

上面例子中的 name和page 就是名为 book的对象中的property. 我们可以用 delete来删除Object 中的 property: “ delete book.name;”. 除了Object, Date等 buildin的对象外, 我们可以写自己的 constructor function, 然后使用new 就可以建立自己的对象 . 如上面的book 可以写成 :

function Book (name, author, page) {

this.name = name;

this.author = author;

this.page = page;

}

var abook = new Book( ”JavaScript is Cool” , “tom ”, 514);

35、介绍一下JavaScript中的循环引用

在JavaScript中，当一个 DOM对象包含了一个JavaScript对象的引用 (比如一个事件的function), 同时那个 JavaScript的对象又包含了一个这个 DOM对象的引用，这样就造成了一个循环引用的结构。例如

var s = document.createElement(’span’); document.body.appendChild(s);

s.onclick=function (){

s.style.backgroundColor = ‘red’;

alert(n);

};

36、结合text这段结构，谈谈 innerHTML outerHTML innerText 之间的区别。

innerHTML对象里面的HTML,outerHTML 包括对象和里面的 innerText对象里面的文本

37、settimeout与 setinteval 的区别？

Settimeout只执行一次 setInteval 没有次数限制

38、生成1-6之间的整数？

var NowFrame;

NowFrame=Math.random( )*6+1 // 随机生成一个 1-6之间的小数

NowFrame=parseInt(NowFrame) // 把1-6之间的小数转化为整数

39、请简述javascript脚本的执行原理。

（1）浏览器接收用户的请求

（2）向服务请求某个包含 avascript脚本的页面

（3）应用服务器端向浏览器发送煤响应的消息。

40、如何让一个DIV隐藏起来，如何让一个曾显示出来

Diasplay属性设置成none

41、isNaN的作用

判断是否为数字

42、JAVASCRIPT中获取某个元素的方式

Document.getElementById(); 此方法在页面中搜索 Document.myform.xxx 此方法按照层次结构来获取 Document.getElementsByName() 此方法用于获得所有的名字相同的元素

43、JAVASCRIPT如何弹出一个模式对话框

window.showModalDialog( “”)

44、在做浮动广告的时候如何把 DIV层漂起来

style=”position:absolute;”

45、如何用JavaScript隐藏一个超级链接真实的地址？

代码示例如下：

46、请写出一个JavaScript 对象并初始化几个属性

代码如下：

var obj = {

name: “ IT公司面试手册”,

address: “http://www.mianwww.com”,

outfit: { top: “naked”, bottom: “jeans”, shoes: “hiking sho” }

}

47、Javascript面试题：如何给一个 Javascript的对象属性赋值？如何取得属性值？

一个 Javascript对象的属性可以用”.”操作符或者数组方式来设置和取得：

代码如下：

obj.name = “IT公司面试手册” ;

obj["name"] = “IT公司面试手册” ;

取得属性的值： var myname = obj.name; var myname = obj["name"];

两种方法的区别是如果属性的名字如果是保留字的话，用点操作符就会报错，代码如下： obj.for = “IT 公司面试手册”；因为 for是保留字，所以会报错 obj["for"] = “IT 公司面试手册” 就不会报错

48、Javascript面试题：如何创建一个 Javascript Object?

可以有两种方式创建一个 Javascript Object, 代码如下：

第一种方法： var obj = new Object();

第二种方法：var ob = {};

49、为什么Javascript和 Java有类似的名字？

因为 Javascript语法是基于Java 语法的(松散的 )

50、当一个用户浏览一个包含 Javascript的页面，那个程序真正的执行了这些代码？

用户机器的浏览器程序

51、“2names”是一个合法的 Javascript变量名吗？

不是的

52、请写出一个Javascript数组的定义？

var txt = new Array( ”tim” , “kim ”, “ jim”)

53、<noscript>有什么作用？

用来在客户端浏览器不支持 Javascript的时候显示标签内部的信息

54、哪个事件是在表单元素失去焦点的时候触发？

onblur

55、Javascript问题：有几种方法在你的 HTML页面里面潜入一段Javascript?

方法有如下几种：

也可以使用DOM 来包含javascript文件：

window.onload=function(){

if(!document.getElementById || !document.createElement){return;}

var newjs=document.createElement(’script’);

newjs.type=’text/javascript’; newjs.src=’myjsfile.js’;

document.getElementsByTagName(’head’)[0].appendChild(newjs);

}

也可以动态通过 function添加一段javascript 到DOM: // loadscript(’ filepath/myjsfile.js’);

function loadScript(src) {

newjs= document.createElement( “script” );

newjs.src = src;

newjs.type=’text/javascript’;

head = document.getElementsByTagName( “head” )[0];

head.appendChild(newjs);

}

也可以使用 javascript writeln()来进入一段javascript:

document.write(”<scr ”+” ipt

type=\”text/javascript\”

src=\”yoursource.js\ ”></scr” +”ipt> ”);

56、如何用JavaScript启动 bat文件

var wsh = new ActiveXObject(”WScript.Shell”);

wsh.Run(”C:/*****.bat”);

</script>

57、介绍一下XMLHttpRequest对象

通过 XMLHttpRequest对象，Web 开发人员可以在页面加载以后进行页面的局部更新。 AJAX开始流行始于Google在 2005年使用的”Google Suggest ”。

“Google Suggest”就是使用 XMLHttpRequest对象来创建动态的Web接口：当用户开始输入google的搜索框， Javascript发送用户输入的字符到服务器，然后服务器返回一个建议列表。

XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

58、AJAX的全称是什么？ 介绍一下AJAX

AJAX的全称是Asynchronous JavaScript And XML.

AJAX是2005 年由Google发起并流行起来的编程方法， AJAX不是一个新的编程语言，但是它是一个使用已有标准的新的编程技术。

使用 AJAX可以创建更好，更快，更用户界面友好的 Web应用。 AJAX 技术基于 Javascript和HTTP Request.

59、介绍一下isNaN函数？

如果参数不是数字类型的话 isNaN返回true

60、javascript都支持哪些布尔型的操作？

&&, ||和！

61、“1″ +2+4在javascript中得到什么？

因为“ 1”是String 类型，所以所有的操作数都是 String, 结果为124

62、2+5+” 8″得到的结果是什么？

因为 2和5 是数字类型， 8是字符串，所以得到的结果是 78

63、javascript有几种 loop方法？

for, while, do-while, 没有foreach

64、javascript如何创建一个新的对象？

var obj = new Object() 或者 var obj = {}

65、如何为一个对象属性赋值？

obj["age"]=17 或者obj.age=17

66、如何为一个数组添加一个值？

arr[arr.length]= value;

67、Javascript的数据类型有几种？

1. Number 数字类型

2. String 字符串类型

3. Boolean 布尔类型

4. Function 函数

5. Object 对象

6. Null

7. Undefined 没有定义类型

68、将字符串用指定字符分割成数组的函数是什么？

var str="How are you doing today?";

document.write(str.split(" ") + "<br />");

document.write(str.split("") + "<br />");

document.write(str.split(" ",3));

</script>

69、Javascript如何创建对象？

答：创建对象的例子：

personObj=new Object()

personObj.firstname="John"

personObj.lastname="Doe"

personObj.age=50

personObj.eyecolor="blue"

70、怎么取页面的element

document.getElementById( ”id” )或者

form.elementName方法根据element 的name来取

71、怎么动态创建element,怎么设置他的鼠标事件

var myLink = document.createElement('a');

var href = document.createAttribute('href');

myLink.setAttribute(href,'http://www.mianwww.com');

myLink.innerText ="Go here";

var spanAppend = document.getElementById('myDivLink');

spanAppend.appendChild(myLink);

72、如何用Javascript判断上传文件的大小？

有几种方法判断文件的大小：

1. 用ActiveX 控件，代码如下：

function getFileSize(path) {

var fileAO = new ActiveObject(”Scripting.FileSystemObject”);

alert(”File size is:” + fileAO.GetFile(path).size); }

</script>

2. 可以利用img 标签的dynsrc属性来判断大小， dynsrc属性是用来插入多媒体文件的，格式可以是 WAV,AVI, MP3等等，例如<img dynsrc=” xxx.avi”> 这样就可以根据 Image对象的fileSize 属性来得到文件的大小，代码如下：

function getFileSize(filePath) {

var image=new Image();

image.dynsrc=filePath;

alert(image.fileSize);

}

</script>

73、Prototype如何实现页面局部定时刷新？

可以使用 Prototype的Ajax.PeriodicalUpdater 来实现页面的局部刷新。比如如果页面上需要定时刷新的部分为<div id= ”refresh” ></div> 那么可以按照如下代码定时刷新这一部份

new Ajax.PeriodicalUpdater(’refresh’, ‘/your_url’, { method: ‘get’, insertion: Insertion.Top, frequency: 1, decay: 2 });

其中的两个参数 frequency表示间隔的秒数，缺省情况下为 2。decay 表示如果返回的内容相同，则将 frequency的间隔时间加倍，这里第一次是 1秒，如果返回内容相同则编程两秒，然后四秒，然后八秒。。。如果每次返回的结果都不一样那么这个参数就不起作用

74、Prototype如何更新局部页面？

可以使用 Ajax.Updater来更新局部页面，实例如下： <div id=”company ”></div>

以上是需要局部更新的容器，使用一下 javascript来操作

new Ajax.Updater( ’company’ ,'/your_url’,{method: ’get’ });

75、Prototype如何为一个 Ajax添加一个参数？

代码如下：

new Ajax.Request(’/your_url’, { method: ‘get’,

parameters: {name: ‘rainman’, limit: 12} });

76、Ajax请求总共有多少种 Callback?

Ajax请求总共有八种

Callback

onSuccess

onFailure

onUninitialized

onLoading

onLoaded

onInteractive

onComplete

onException

77、Prototype中如何为一个元素添加一个方法？

Prototype提供的Element.addMethods() 方法可以用来为一个元素添加自定义的方法，如果你有一个对象包含了一些自定义的方法，可以直接把这个对象传给 Element.addMethods(); 例如：

var MyUtils = {

truncate: function(element, length){

element = $(element);

return element.update(element.innerHTML.truncate(length));

updateAndMark: function(element, html){

return $(element).update(html).addClassName(’updated’);

}

Element.addMethods(MyUtils); // now you can:

$(’explanation’).truncate(100);

需要注意的一点就是这些方法的第一个参数必须是这个元素本身，你还可以在方法的最后返回这个元素

78、AJAX都有哪些有点和缺点？

传统的 web应用允许用户填写表单(form)，当提交表单时就向 web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分 HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同， AJAX应用可以仅向服务器发送并取回必需的数据，它使用 SOAP或其它一些基于 XML的 web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以 Web服务器的处理时间也减少了。

使用 Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得 Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。 Ajax不需要任何浏览器插件，但需要用户允许 JavaScript在浏览器上执行。就像 DHTML应用程序那样， Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着 Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持 JavaScript的用户提供替代功能。

对应用 Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为 [4]。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在 Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的 IFRAME来重现页面上的变更。（例如，当用户在 Google Maps中单击后退时，它在一个隐藏的 IFRAME中进行搜索，然后将搜索结果反映到 Ajax元素上，以便将应用程序状态恢复到当时的状态。）一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用 URL片断标识符（通常被称为锚点，即 URL中# 后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许 JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。进行Ajax 开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 [5]，没有恰当的预读数据 [6]，或者对 XMLHttpRequest的不恰当处理[7]，都会使用户感到延迟，这是用户不欲看到的，也是他们无法理解的 [8]。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

一些手持设备（如手机、 PDA等）现在还不能很好的支持 Ajax;

用JavaScript作的 Ajax引擎，JavaScript 的兼容性和 DeBug都是让人头痛的事; Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等 ; 对串流媒体的支持没有FLASH、 Java Applet好;

79、Ajax主要包含了哪些技术？

Ajax（Asynchronous JavaScript + XML ）的定义

基于 web标准（standards-based presentation ）XHTML+CSS的表示；使用 DOM （Document Object Model）进行动态显示及交互；使用 XML 和 XSLT 进行数据交换及相关操作；使用 XMLHttpRequest 进行异步数据查询、检索；

使用 JavaScript 将所有的东西绑定在一起。英文参见 Ajax的提出者Jesse James Garrett 的原文,原文题目 (Ajax: A New Approach to Web Applications) 。类似于 DHTML或LAMP ，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于 AJAX的“派生/ 合成”式（ derivative/composite）的技术正在出现，如“ AFLAX”。 AJAX 的应用使用支持以上技术的 web浏览器作为运行平台。这些浏览器目前包括： Mozilla、Firefox 、Internet Explorer、 Opera、Konqueror 及Safari。但是 Opera不支持XSL 格式对象，也不支持 XSLT。

80、DOM的优缺点都有什么？

DOM的优势主要表现在：易用性强，使用 DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持 XPath，增强了易用性。

DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用 DOM进行解析时，将为文档的每个 element、attribute 、processing- instrUCtion和 comment都创建一个对象，这样在 DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

81、谈谈javascript数组排序方法 sort()的使用，重点介绍sort()参数的使用及其内部机制

sort的实现的功能类似JAVA的比较器，数据排序从多维数组的第一维开始排序可以自己定义排序方法，很不多的函数

82、简述DIV元素和 SPAN元素的区别。

DIV有回车，SPAN 没有

83、结合<span id=”outer”><span id=”inner”>text</span></span>这段结构，谈谈

innerHTML outerHTML innerText 之间的区别。

innerHTML对象里面的HTML,outerHTML 包括对象和里面的 innerText对象里面的文本

84、说几条XHTML规范的内容（至少 3条）

属性加引号，不能有不匹配的标签，加定义

85、对Web标准化（或网站重构）知道哪些相关的知识，简述几条你知道的 Web标准？

W3C标准等

86、如何用Javascript校验数字型 ?

var re=/^\d{1,8}$|\.\d{1,2}$/;

var str=document.form1.all(i).value;

var r=str.match(re);

if (r==null) {

sign=-4; break;

} else{

document.form1.all(i).value=parseFloat(str);

}

87、主要的Ajax框架都有什么？

* Dojo（dojotoolkit.org ）；

* Prototype和Scriptaculous （www.prototypejs.org和script.aculo.us）；

* Direct Web Reporting （getahead.org/dwr）；

* Yahoo! User Interface Library （developer.yahoo.com/yui）；

* Google Web Toolkit （code.google.com/webtoolkit）。

*JQuery

88、AJAX的优缺点都有什么？

1、最大的一点是页面无刷新，用户的体验非常好。

2、使用异步方式与服务器通信，具有更加迅速的响应能力。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担， ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点

1、ajax 不支持浏览器 back按钮。

2、安全问题 AJAX 暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

89、Ajax的工作原理

Ajax的核心是JavaScript 对象XmlHttpRequest。该对象在 Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之， XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

90、谈一下Javascript中的对象

var book = new Object();

book.name = “JavaScript is Cool”;

book.author = “tom”;

book.pages = 514;

上面例子中的 name和page 就是名为 book的对象中的property. 我们可以用 delete来删除Object 中的property: “ delete book.name;”. 除了Object, Date等 buildin的对象外, 我们可以写自己的 constructor function, 然后使用new 就可以建立自己的对象 . 如上面的book 可以写成 :

function Book (name, author, page) {

this.name = name;

this.author = author;

this.page = page;

}

var abook = new Book(”JavaScript is Cool”, “tom”, 514);

91、Javascript脚本必须写在什么标签之内。

92、javascript 的优缺点和内置对象

1）优点：简单易用，与Java 有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；

2）缺点：不适合开发大型应用程序；

3）Javascript 有11 种内置对象：

Array、String 、Date、 Math、Boolean 、Number、 Function、Global 、Error、 RegExp、Object 。

93、 介绍一下 XMLHttpRequest对象的常用方法和属性

open(“method ”,” URL”) 建立对服务器的调用，第一个参数是 HTTP请求方式可以为 GET，POST 或任何服务器所支持的您想调用的方式。第二个参数是请求页面的 URL。

send()方法，发送具体请求 abort()方法，停止当前请求

readyState属性请求的状态有5 个可取值

0=未初始化，1=正在加载， 2=以加载，3= 交互中， 4=完成

responseText 属性服务器的响应，表示为一个串

reponseXML 属性服务器的响应，表示为 XML

status 服务器的 HTTP状态码，200 对应ok 400对应 not found

94、 XMLHttpRequest对象在 IE和Firefox中创建方式有没有不同？

有， IE中通过new ActiveXObject() 得到，Firefox中通过 new XMLHttpRequest()得到

95、在 Ajax应用中信息是如何在浏览器和服务器之间传递的

Ajax与服务端是通过字符串或者 xml进行交互的

96、 Ajax和 javascript的区别？

javascript是一种在浏览器端执行的脚本语言， Ajax是一种创建交互式网页应用的开发技术，它是利用了一系列相关的技术其中就包括 javascript。 Javascript 是由网景公司开发的一种脚本语言，它和 sun公司的java 语言是没有任何关系的，它们相似的名称只是一种行销策略。

在一般的 web开发中，javascript 是在浏览器端执行的，我们可以用 javascript控制浏览器的行为和内容。

posted @ 2016-08-30 13:21 王六六666 阅读(768) 评论(2) 编辑收藏举报

刷新页面返回顶部

王六六666

前端面试题一

公告