前端面试题一

最新推荐文章于 2023-06-02 09:56:02 发布

weixin_30809173

最新推荐文章于 2023-06-02 09:56:02 发布

阅读量556

点赞数

文章标签： java 面试 xhtml

原文链接：http://www.cnblogs.com/yuhangwang/p/5821627.html

版权

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.οnclick=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.οnlοad=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;

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 控制浏览器的行为和内容。

转载于:https://www.cnblogs.com/yuhangwang/p/5821627.html