BlogJava-liuzheng-文章分类-JavaScript

javascript中函数的深入理解

刘铮 — Thu, 17 Jan 2008 02:05:00 GMT

unction funcName(){
//函数体
}
//等价于
var funcName=function(){
//函数体
}

　　但前面一种方式创建的是有名函数，而后面是创建了一个无名函数，只是让一个变量指向了这个无名函数。在使用上仅有一点区别，就是：对于有名函数，它可以出现在调用之后再定义；而对于无名函数，它必须是在调用之前就已经定义。例如：
script language="JavaScript" type="text/javascript"＞
＜!--
func();
var func=function(){
alert(1)
}
//--＞
＜/script＞

　　这段语句将产生func未定义的错误，而：

＜script language="JavaScript" type="text/javascript"＞
＜!--
func();
function func(){
alert(1)
}
//--＞
＜/script＞

　　则能够正确执行，下面的语句也能正确执行：

＜script language="JavaScript" type="text/javascript"＞
＜!--
func();
var someFunc=function func(){
alert(1)
}
//--＞
＜/script＞

认识函数对象（Function Object）

　　可以用function关键字定义一个函数，并为每个函数指定一个函数名，通过函数名来进行调用。在JavaScript解释执行时，函数都是被维护为一个对象，这就是要介绍的函数对象（Function Object）。

　　函数对象与其他用户所定义的对象有着本质的区别，这一类对象被称之为内部对象，例如日期对象（Date）、数组对象（Array）、字符串对象（String）都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的：通过执行new Array()这样的语句返回一个对象，JavaScript内部有一套机制来初始化返回的对象，而不是由用户来指定对象的构造方式。

JavaScript为函数对象定义了两个方法：apply和call，它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数的方式有所区别：

Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]]);

在javascript的继承中可以使用其方法

例如：
function ClassA(sColor){
    this.color=sColor;
    this.sayColor=function()
    {
    alert(this.color);
    }
}
function ClassB(sColor,sName){
    ClassA.call(this,sColor);
    或者
    ClassA.apply(this, new Array(sColor));
    this.name=sName;
    this.sayName=function()
    {
    alert(name);
    }
}

刘铮 2008-01-17 10:05 发表评论

在IE中使用Javasript对xml的解析

刘铮 — Sat, 17 Nov 2007 06:43:00 GMT

以下是万用的生成处理xml的

ActiveXObject

function loadXMLDoc(dname)

{

var xmlDoc;

// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation && document.implementation.createDocument)

{

xmlDoc=document.implementation.createDocument("","",null);

}

else

{

alert('Your browser cannot handle this script');

}

xmlDoc.async=false;

xmlDoc.load(dname);

return(xmlDoc);

}





然后就可以使用xmlDoc了



例如：



xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');

var newel

for (i=0;i
{

newel=xmlDoc.createElement('edition');

x[i].appendChild(newel);

}



进行添加删除节点属性等

刘铮 2007-11-17 14:43 发表评论

prototype对ajax的支持

刘铮 — Fri, 16 Nov 2007 02:51:00 GMT

`Ajax` 对象

上面提到的共通方法非常好，但是面对它吧，它们不是最高级的那类东西。它们是吗？你很可能自己编写了这些甚至在你的脚本里面有类似功能的方法。但是这些方法只是冰山一角。

我很肯定你对prototype.js感兴趣的原因很可能是由于它的AJAX能力。所以让我们解释当你需要完成AJAX逻辑的时候，这个包如何让它更容易。

Ajax 对象是一个预定义对象，由这个包创建，为了封装和简化编写AJAX 功能涉及的狡猾的代码。这个对象包含一系列的封装AJAX逻辑的类。我们来看看它们的一些。

1.4.1. 使用 `Ajax.Request`类

如果你不使用任何的帮助程序包，你很可能编写了整个大量的代码来创建XMLHttpRequest对象并且异步的跟踪它的进程，然后解析出响应然后处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运。

为了支持 AJAX 功能。这个包定义了 Ajax.Request 类。

假如你有一个应用程序可以通过url http://yoursever/app/get_sales?empID=1234&year=1998与服务器通信。它返回下面这样的XML 响应。

用 Ajax.Request对象和服务器通信并且得到这段XML是非常简单的。下面的例子演示了它是如何完成的。

你看到传入 Ajax.Request构造方法的第二个对象了吗？参数{method: 'get', parameters: pars, onComplete: showResponse} 表示一个匿名对象的真实写法。他表示你传入的这个对象有一个名为 method 值为 'get'的属性，另一个属性名为 parameters 包含HTTP请求的查询字符串，和一个onComplete 属性/方法包含函数showResponse。

还有一些其它的属性可以在这个对象里面定义和设置，如 asynchronous，可以为true 或 false 来决定AJAX对服务器的调用是否是异步的（默认值是 true）。

这个参数定义AJAX调用的选项。在我们的例子中，在第一个参数通过HTTP GET命令请求那个url，传入了变量 pars包含的查询字符串， Ajax.Request对象在它完成接收响应的时候将调用showResponse 方法。

也许你知道， XMLHttpRequest在HTTP请求期间将报告进度情况。这个进度被描述为四个不同阶段：Loading, Loaded, Interactive, 或 Complete。你可以使 Ajax.Request 对象在任何阶段调用自定义方法，Complete 是最常用的一个。想调用自定义的方法只需要简单的在请求的选项参数中的名为 onXXXXX 属性/方法中提供自定义的方法对象。就像我们例子中的 onComplete 。你传入的方法将会被用一个参数调用，这个参数是 XMLHttpRequest 对象自己。你将会用这个对象去得到返回的数据并且或许检查包含有在这次调用中的HTTP结果代码的 status 属性。

还有另外两个有用的选项用来处理结果。我们可以在onSuccess 选项处传入一个方法，当AJAX无误的执行完后调用，相反的，也可以在onFailure选项处传入一个方法，当服务器端出现错误时调用。正如onXXXXX 选项传入的方法一样，这两个在被调用的时候也传入一个带有AJAX请求的XMLHttpRequest对象。

我们的例子没有用任何有趣的方式处理这个 XML响应，我们只是把这段XML放进了一个文本域里面。对这个响应的一个典型的应用很可能就是找到其中的想要的信息，然后更新页面中的某些元素，或者甚至可能做某些XSLT转换而在页面中产生一些HTML。

更完全的解释，请参照 Ajax.Request 参考和 Ajax选项参考。

1.4.2. 使用 `Ajax.Updater` 类

如果你的服务器的另一端返回的信息已经是HTML了，那么使用这个程序包中 Ajax.Updater 类将使你的生活变得更加得容易。用它你只需提供哪一个元素需要被AJAX请求返回的HTML填充就可以了，例子比我写说明的更清楚。

你可以看到，这段代码比前面的例子更加简洁，不包括 onComplete 方法，但是在构造方法中传入了一个元素id。我们来稍稍修改一下代码来描述如何在客户端处理服务器段错误成为可能。

我们将加入更多的选项，指定处理错误的一个方法。这个是用 onFailure 选项来完成的。

我们也指定了一个 placeholder 只有在成功请求之后才会被填充。为了完成这个目的我们修改了第一个参数从一个简单的元素id到一个带有两个属性的对象， success (一切OK的时候被用到) 和 failure (有地方出问题的时候被用到) 在下面的例子中没有用到failure属性，而仅仅在 onFailure 处使用了 reportError 方法。

如果你的服务器逻辑是返回JavaScript 代码而不是单纯的 HTML 标记， Ajax.Updater对象可以执行那段JavaScript代码。为了使这个对象对待响应为JavaScript，你只需在最后参数的对象构造方法中简单加入evalScripts: true属性。

刘铮 2007-11-16 10:51 发表评论

关于页面两个列表的数据传输的js算法

刘铮 — Tue, 13 Nov 2007 12:03:00 GMT

页面设计如下：




 Add >


 < Remove





对应的js如下（这里的js是使用的prototype的js方法）

Security = Class.create();

Security.prototype =
{

addRole: function()
{
  var availableRolesList = $("availableRoles");
  var rolesList = $("roles");
  this.moveOption(availableRolesList, rolesList);
},

removeRole: function()
{
  var availableRolesList = $("availableRoles");
  var rolesList = $("roles");
  this.moveOption(rolesList, availableRolesList);
},

moveOption: function(source, target)
{
  var lastInsert = null;
  for (var i = source.options.length - 1; i >= 0; i--)
  {
   if (source.options[i].selected)
   {
    var option = source.removeChild(source.options[i]);
    target.insertBefore(option, lastInsert);
    lastInsert = option;
   }
  }
},
}

var secure = null;

function initSecurity()
{
secure = new Security();
secure.setup();
}

Event.observe(window, "load", initSecurity, false);

刘铮 2007-11-13 20:03 发表评论

javascript的基本概念

刘铮 — Tue, 30 Oct 2007 04:01:00 GMT

javascript 中对类型的转化

1.转换成字符串
使用toString()的方法
2.转换成数字
使用parseInt和parsefloat的方法

NaN表示是不是数字（not a number）这种情况发生在类型转化失败时候，并且NaN和自身比较不相等。
isNaN是判断是否是数字。

typeof运算需要一个参数，即要检查的参数或变量。
比如t变量是null或引用类型，typeof返回object

javascript中的switch语句

switch（expression）
{
    case value: statement
    break;
    case value: statement
    break;
}

如果函数无返回值，那么可以调用没有参数的 return运算符随时退出函数。
如果函数没有明确的返回值，或调用了没有参数的return语句，那么他真正返回的值是undefined

Array对象声明数组
toString()方法
返回字符串，用逗号将他们连接起来
join(“”)方法，选择特定的符号连接字符串。

string的split方法可以将string转化为array

javascript中的object类

javascript中所有的类都是继承object类，很重要的属性就是prototype--对该对象的对象原型的引用，返回对象object的实例 ,
可以使用prototype为任何已有的类定义新的方法

javascript中的array类
shift（）方法是删除第一个字符串
unshift（“”）方法是在数组的第一个位置上添加新元素，其他的向后摞
array中还可以使用pop和push方法，把array当作栈来使用。

javascript中的date类用来表示时间
var date=new Date()
date.getTime()

刘铮 2007-10-30 12:01 发表评论

javascript中定义类和对象最好的方法

刘铮 — Mon, 29 Oct 2007 09:59:00 GMT

刘铮 2007-10-29 17:59 发表评论

转贴javascript心得（二）

刘铮 — Mon, 15 Oct 2007 09:34:00 GMT

1，不要认为Struts已经过时了，也不要盲目的去追随JSF以及更新的MVC框架，在目前Struts仍旧是最为优秀的MVC框架，尤其是后来与Spring、Hibernate（或者Ibatis）的结合，使得Struts的应用得到了进一步的发展，也许你认为Webwork2、SpringMVC或者JSF更为优秀和实用，那么也没有关系，其实只要对你或你的公司适用，那么就可以了。

2，你知道Javascript中的typeof和instanceof操作吗，如果不知道，劝你还是看看这方面的知识吧，typeof返回的是对象的类型，例如string、number、object等等，而instanceof判断的是一个对象是否是某个类的实例，例如：
var arr=new Array();
var type=typeof(arr);//返回object
var flag=arr instanceof Array;//返回true
var flag2=arr instanceof Object;//返回true;
在实际使用过程中，你会发现instanceof是更为强大的，当然了许多时候typeof用起来很方便，但是对于复杂的场合typeof就不太适用了，尤其是对于自定义对象以及对象之间有着复杂的继承关系时，使用instanceof可以方便的对这些进行判断。

3，虽然你可能知道javascript中typeof的用法，但是如果你不能做对下面的题，说明你对typeof的理解还是不够的，例如：
var a;
var rs=typeof(a);//请问rs的值是什么？
（A）object （B）variable （C）undefined (D) string （E）null （F）以上答案全不正确
如果你选择A还算对JS有一些了解，如果选择B则基本上是乱猜的，如果选择D什么也说明不了，如果选择E则说明你对于Java和Javascript有些东西还没有分清楚，选择F也是不正确的。答案是C，记住在Javascript之中，如果一个变量没有初始化，那么该变量的类型为undefined。

4，也许你一直在抱怨Javascript之中没有列表、哈西表以及堆栈、队列等数据结构，如果真的在抱怨，那么也不是你的错，毕竟包括我自己在内，我们对JS的了解太少了，其实在JS之中，数组对象自身完全支持上面的那些数据结构，例如：
var list=new Array();//列表
list[0]="a";
list[100]="b";
var map=new Array();//哈西表
map["001"]="a";
map["username"]="zhangsan";
var stack=new Array();//堆栈，即后进先出
stack.push("a");
stack.pop();
var queue=new Array();//队列，即先进先出
queue.unshift("a");
queue.shift();
可见JS是非常强大的，关键是我们知道的太少了，关于Javascript对于数组的操作，你也可以参考《Javascript对数组的操作》。

5，作为一个web开发人员，我们不能指望美工在完成漂亮的效果图之后，还要为我们将图切分，最后生成html文件后再给我们，然后我们对这些html文件，再修改转换为jsp、asp或者php文件。我一直认为效果图的切分应该或者最好由我们程序员自己来做，因为美工做的效果图实际上是要应用到我们的产品或者项目中的，而具体的产品和项目，对效果图中哪些部分是需要输入文字的，哪些地方是需要背景的，哪些地方是需要可以自动伸缩的，而哪些地方又是必须保证大小的，是有很严格的要求的，尤其是我们的产品或项目中如果使用了类似sitemesh等的模板技术，那么切图的工作就更要由我们自己来做了。这样并不是说美工不需要懂得html、css等技术，也不是说美工切出的图，会不符合我们的要求，我们知道，一张效果图，可以有n种切法，但是要能够满足实际的需求，往往只有一种最合适的切法，而这个切法一般来说美工是不太清楚的，开发人员也是不清楚的，只有既是开发人员，又懂得美工切图的人，才能够找到最为合适的切分方法，而这样的人才是非常奇缺的！

6，不要过于痴迷Ajax技术，也不要过于追捧web2.0这个时髦的词汇，并不是说什么东西粘上ajax或者web2.0，就能够火起来或者对我们的实际发展有利的，如果你是做公网网站的，那么要注意，不合适的ajax使用，会使得网站被搜索引擎收录的信息大幅度减少，但是ajax或者Flex2等技术对于用户体验而言，还是相当不错的，因此是否使用ajax等技术，一要看对你们的解决方案宣传是否有作用，另外一点就是要看，它是否真正的改进了我们的应用。

7，对于ajax的post提交方式，可能你有些问题要问，例如post的方式是不是只要在open时指定method就可以了，为什么我将大数据放到url后面，而没有被完全传递过去，为什么我后台使用类似jsp中的request.getParamter方法接收不到数据，我们通过一个例子看一下ajax发送/接受大数据的方式：

1）send.jsp:（我举的例子使用的是Javascript开源框架JsJava的ajax类库，该类库对IE和Firefox等的XMLHttpRequest等对象进行了易用性的封装，不像prototype.js默认对传递的数据进行urlencode编码）

var ajaxRequest=new AjaxRequest();
ajaxRequest.setRequestMethod("post");
ajaxRequest.setRequestURL("ajaxresponse.jsp");
ajaxRequest.setAsync(true);
ajaxRequest.setMethodOnSuccess(onSuccess,[ajaxRequest]);
ajaxRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
ajaxRequest.send("content=这是一篇几千字的文档...在此省略");

要注意设置发送方式为post，设置头信息的内容类型为application/x-www-form-urlencoded，charset是否设置要看内容的编码情况，另外大数据就放到send之中，记住大数据不是放在url的参数之中的。

2）receive.jsp

    InputStream stream=request.getInputStream();
    InputStreamReader isr=new InputStreamReader(stream);
    BufferedReader br=new BufferedReader(isr);
    String str=br.readLine();
    System.out.println(str);
    br.close();

要知道，对于ajax post方式提交的数据，在服务器端如果是jsp不是简单使用getParameter就能取得到的，需要从输入流中去取，这和附件上传有些类似的地方。当然要注意编码和解码的问题。

8，我们在界面中经常会通过setTimeout方法来实现定时或者异步操作，例如：
setTimeout(myfunc,2000);//两秒后执行myfunc函数
但是要注意setTimeout方法并不能阻止后面js代码逻辑的执行，例如：

上面的代码中，document.write("wait...");逻辑并不会等到3秒后才执行，而是立即执行的，其实这一点可能大部分开发人员都知道，但是如果不注意，就很容易犯下面的错误，如下面代码所示：
var ajax2HasExecuted=false;
var ajaxRequest1;
function ajax1Func(){
    if(!ajax2HasExecuted){
      setTimeout(ajax1Func,200);
   }
   var text=ajaxRequest1.getResponseText();
   ...
}
var ajaxRequest2;
function ajax2Func(){
   var text=ajaxRequest2.getResponseText();
   ...
   ajax2HasExecuted=true;
}
上面的代码是一个页面中同时发送了两个ajax异步请求，分别有两个对应的接收操作，而业务逻辑要求，这两个操作是要有先后顺序的，其中第一个接收操作，需要等待第二个接收操作完成之后，才能进行处理，于是第一个操作中就采用setTimeout的方式，本意是在执行第一个操作的开始的地方，先判断第二个操作是否已经执行完毕，如果没有执行完毕，则等待200毫秒后，重新执行第二个操作，然后由于setTimeout并不能组织后续的逻辑继续执行，所以实际上不管第二个操作是否完成，第一个操作都会一直往下执行下去，从而导致业务上的错误。解决方法要么是在if后面加上else，或者在setTimeout之后直接return，例如：
if(!ajax2HasExecuted){
      setTimeout(ajax1Func,200);
      return;
   }

9，window.open和window.showModalDialog方法相信你已经用到过许多次了，但是总是出现这样或那样的问题，问题主要是以下几个方面：
1）showModalDialog这个函数名经常被写错，例如经常被写成showModelDialog，使得不能执行打开窗口的操作。
2）控制打开窗口的属性，例如尺寸、滚动条、菜单、状态栏等，是我们经常会碰到的情况，但是我们经常会将这两种打开方式的属性名称以及属性之间的分隔符混用，使得属性执行不正确，例如我举下面的例子，要求弹出一个宽200高300的窗口，你看哪些方式是对的？
（A） window.open("about:blank","","width=200,height=300");
（B） window.open("about:blank","","width:200,height:300");
（C） window.open("about:blank","","width=200;height=300");
（D） window.open("about:blank","","width:200;height:300");
（E） window.showModalDialog("about:blank","","dialogWidth:200px;dialogHeight:300px");
（F） window.showModalDialog("about:blank","","dialogWidth=200px;dialogHeight=300px");
（G） window.showModalDialog("about:blank","","dialogWidth:200;dialogHeight:300");
再多的选项就不写了，正确答案是A和E，通过上面的问题我们需要记住一下几点：

window.open控制属性之间的分隔符是逗号“,”，属性和值之间用等于号"="连接
window.showModalDialog控制属性之间的分隔符是分号“;”，属性之间的用冒号“:”连接
window.open控制属性中长度和宽度尺寸可以直接写数字，也可以加上度量，例如px，但是对于window.showModalDialog的长度和宽度则必须带上px，否则尺寸无效，这一点是很重要的。

10，对于数据库中的varchar型字段，是有长度限制的，例如oracle10g中varchar2字段的最大长度为4000字符,在mysql中varchar最长为255字符，要注意这里面的限制值是单字节字符值，而汉字属于双字节字符，因此对于汉字存储而言，varchar2字段最多可以存储2000个汉字，由此引申出来的一个问题，就是web开发过程中的表单提交验证问题，因为对于中国用户而言，输入的内容有可能是汉字和英文字符的组合，因此判断输入字符串的长度需要注意，Javascript中判断一个字符串的长度的方法为：
var str="abcdef";
var length=str.length;
但是字符串的这个属性，计算的是独立字符的长度，例如一个中文字符按长度1计算，因此如下：
var str="你好";
var length=str.length;
其长度的值为2，而不是4，那么如何计算含有汉字或者说是双字节字符的真实长度呢？通过搜索可以很快找到方法，就是先将双子节字符替换为两个单字节字符，然后计算替换后的字符的长度，当然了JsJava中提供了对于双字节字符串真实长度的计算支持，你可以查看其中的StringUtils类。

11，如果你不能默写出常用颜色的英文表示值和16进制表示值，那么说明你的HTML基本功还是需要练的，例如白色是white，十六进制是FFFFFF，红色是red，十六进制是FF0000，蓝色是blue，十六进制是0000FF，紫色是purple，橙色是orange，网页中常用的灰色一般都是EEEEE，或者再浅一些EFEFEF，当然说这些并不是让你去背大量的颜色和十六进制值，但掌握一些常用的，还是很有必要的。

12，Javascript支持多维数组，但是没有构造函数可以直接生成多维数组，例如一维数组可以通过Array生成，例如：
var arr=new Array(12);
生成多维数组，虽然没有构造函数支持，但是可以通过另外一种方式实现，例如实现一个12x5的二维数组：
var arr=new Array(12);
for(var i=0;i arr[i]=new Array(5);
}
另外，你可以直接使用JsJava的标准类MultiDimensionArrayUtils，支持生成二维和三维数组。

13，对于img标签，我们知道它有一个align属性，这个align是控制该图片与临近文本的位置关系，按照MSDN的说法，该属性的默认值是left，但是从实际的显示效果来看，好像并非如此，我们可以一起来比较一下不写align属性和将align赋值为left的情况，如果默认就是left，那么不写align和将align赋值left，其效果应该是一样的，那我们来一下：
JsJava是最优秀的Javascript类库解决方案和界面应用开发支撑框架！
效果如下：

再看加入align=left的情况：
JsJava是最优秀的Javascript类库解决方案和界面应用开发支撑框架！
效果图如下：

从实际效果来看，img的默认align并非是left，好像应该是bottom，而且上面的情况在IE6.0和Firefox2.0上都试验过，看来MSDN的说法是不太可信的，或者是自己理解错了？你可以看一下MSDN中的描述：http://msdn2.microsoft.com/en-us/library/ms533066.aspx

14，在界面中添加事件的方式主要有如下几种，例如当页面加载之后，执行函数myfunc，几种定义方式如下：
1）在标签中加入onload事件，即：

2）在任何一个可以执行Javascript的地方定义window.onload，即：
window.onload=myfunc;
3）在
4）将事件加入到事件队列中，即：
IE中 window.attachEvent("onload",myfunc)
Firefox中 window.addEventListener("load",myfunc,false)
建议大家使用第四种方式，因为只有第四种方式，可以避免将其它的同类事件覆盖，第四种方式是将该事件加入到同类的事件的队列之中，不会覆盖其它的同类事件，这在web开发过程种，是需要特别注意的，尤其我们自己定义一些界面框架或者组建的时候，经常需要定义onload事件，这个时候最好是使用第四种方式，因为引用界面框架和组建的用户，可能在页面上也想使用onload逻辑，当然用户自己使用第四种方式也不会有问题，但是做为一个负责任的界面高手，是不应该这样想得，我们应该严于律己，而宽以待人。

15，并不只是body（或者说window）有onload事件，中也可以定义onload事件，还有也可以定义onload事件，例如当图片加载完毕后，在window的状态栏种显示加载成功的字样：

当然了对于img，你最好深入研究一下其各个事件和属性的用法，你会发现原来不知道的东西还有那么多，当然肯定有不少开发人员，已经对这一点有所研究了，但是大多数开发人员还是缺乏对这方面知识的了解。

16，如何在HTML种加入一段保留格式化的文本，相信你会想到

标签，例如：



  这是一段格式化文本，

里面的文字直接将格式输出

显示结果为：
这是一段格式化文本，
里面的文字直接将格式输出

对于一般情况而言，pre标签就够用了，但是pre标签的不足之处，在于它不能将其中的html标签也原样输出，而是进行了解析，例如：



  这是一段格式化文本，里面的文字直接将
格式输出

显示结果为：
这是一段格式化文本，里面的文字直接将
格式输出

那么如何才能将含有HTML的内容也原样输出呢？实际上在HTML规范种有

标签，可以实现这种效果，例如： <xmp>   这是一段格式化文本，里面的文字直接将 格式输出 
显示结果为：
这是一段格式化文本，里面的文字直接将
格式输出

17，如何获取某个对象区域的尺寸以及坐标，是我们界面开发过程种经常会遇到的一个问题，一般我们都采用getBoundingClientRect方法来获取对象的区域，进而得到该区域的尺寸和坐标，但是该方法只能在IE中使用，当然Firefox也有类似的方法，相信大多数开发人员不知道，该方法就是getBoxObjectFor，为了不想为跨浏览器而操心，你可以直接下载JsJava，使用其中的DocumentUtils类的getElementRectangle静态方法，例如：

JsJava的类和方法都是经过IE和Firefox测试的，使用起来很方便。

18，在界面中对象的位置的计算与理解是比较麻烦的一件事情，例如clientHeight、clientTop、scrollHeight、scrollTop、offsetHeight、offsetTop，这些该怎么区分，又分别代表什么意思，对位置属性的深入理解，非常有助于对HTML界面布局本质的理解，是成为高手的必由之路，下面就简单介绍一下：
1）clientHeight，代表对象区域的屏幕高度，不包含区域的border尺寸，但包含padding的尺寸
2）clientTop，对象区域offsetHeight与clientHeight的差的一半
3）scrollHeight，代表对象区域内容的底部距区域最上边的距离
4）scrollTop，代表对象区域滚动部分的高度，即区域的最上边距离该区域可见部分的最上边的距离
5）offsetHeight，代表对象区域的屏幕高度，包含border和padding尺寸
6）offsetTop，代表对象区域距离上一个对象高度
上面的解释如果没有实际的经验，多少会有些迷糊，没有关系，我给你一个示意图：

因此，scrollHeight并非总是大于或等于clientHeight，实际上确实有一些开发人员认为一个区域没有滚动时scrollHeight和clientHeight相等，有滚动时scrollHeight＝clientHeight+scrollTop，这种认识是不对的或者说是不准确的。
上面的图的html源码为：

区域1，高100

区域2，高50

区域4，高100

显示结果为：
70
15
28
0
100
15
--------------
50
0
18
0
50
115
--------------

19，网上许多人都问，如何将一个RGB颜色转换为HTML中的十六进制颜色，我看到了一些网友的实现，例如定义一个长度为256的数组，并按照十六进制的规律将其全部初始化，还有的利用了HTML标签的一些特点，不过有一定的局限性，其实我们只要理解了RGB颜色的基本知识，转换起来是很方便的，RGB分别代表红（Red）、绿（Green）、蓝（Blue）三种基色，其中每一种基色从浅到深又可以定义256色，这样RGB总共可以表示256x256x256种颜色，而对于十六进制颜色来说，其实就是用十六进制数字来表示RGB，例如FFFFFF代表rgb(256,256,256)，换算起来也很简单，就是十进制与十六进制之间的表示方法的转换，例如对于RGB颜色rgb(132,216,12)，用十六进制颜色表示的计算方式为：
132转换为十六进制数字为84
216转换为十六进制数字为D8
12转换为十六进制数字为0C
因此rgb(132,216,12)的十六进制颜色就是84D80C，我们可以看一下两者的效果：

显示为：

那么Javascript之中是否提供了十进制数与十六进制数的转换呢，Javascript没有提供内置的函数来进行这种转换，不过你可以下载JsJava，使用其中Integer类的静态方法：toHexString方法，例如

或者你直接使用JsJava种的Color对象：
var color=new Color(132,216,12);
var hex=color.toHexValue();//hex的值为84d80c

20，web开发过程中，经常会遇到原页面与弹出页面之间进行交互的问题，如果只是简单的变量传递，还是不难的，而我们经常遇到的一个实际场景是：例如有一个用户列表页面，点击“新建”按钮，弹出一个创建用户的页面，填写完信息后要提交表单并关闭窗口，同时列表页面中要列出新建的用户，这个时候我们一些开发人员喜欢使用的方式为：
userForm.submit();
opener.location.reload();//或者有些开发人员喜欢用opener.location=列表页面的请求url
window.close();
上面的代码有一个很明显的问题，就是如果表单提交给后台，后台还在处理，而此时原页面已经执行了重载，那么等新用户在后台存储后了，也不会反映到列表页面中了，当然刷新一个就有了，但是就达不到我们所要的效果了。下面给你介绍一种比较稳妥的方式（ajax方式就不介绍了）：
先让表单提交，提交后还是回到弹出的那个页面，或者一个其它的页面，然后在该页面中做判断，如果后台信息处理成功，那么就执行原页面的重载，然后关闭窗口。
当然有些开发人员说，前面的那种方式，一直在项目中使用没有发现什么问题，那我告诉你，那是因为你比较幸运，后台处理速度很快，列表重载的时候，后台已经处理完了，但是一旦后台处理慢了，客户就该找麻烦了。

21，界面问题是当前web开发领域（不要认为只是asp、jsp和或者php等的开发，大的说可以包括ASP.NET以及J2EE等）最为棘手的问题之一，而且大部分开发人员，不懂得该如何去解决界面问题，而且经常会遇到一些不可思议的问题。其实我告诉你，界面问题的确有一些是非常奇怪的，但是不要因为这样，就不去深究问题的原因所在，我在这些年的开发中，遇到了不少的离奇的界面问题，包括自己碰到的和别人让我去解决的，不过我发现，在这些离奇的问题背后，体现的却是我们大部分开发人员，在界面能力和素养方面的一些问题，例如有些人就是太粗心，而有些人则是缺乏界面基础知识等等。成为界面高手不是目的，培养解决界面问题的能力和素养才是最关键的。

22，在连接标签中加入onclick操作是很常用的一种方式，例如：
人员管理
一般情况，这种方式是没有问题，但是如果页面内容比较长，出现了上下滚动条的时候，这种方式就会出一些问题，主要是由于href的#造成的，我们知道锚的作用就是让页面定位并移动到锚处，上面的代码开发人员的意图主要是想点击的时候不要执行链接href，所以写一个#，但是#对于滚动的页面，会在执行onclick的同时，页面出现移动定位行为，这样的用户体验是很不好，解决方式有如下几种：
人员管理
 人员管理
建议使用void 0方式，因为return方式，有时会影响click事件的传播，尤其是return false的时候。

23，在Window XP系统中，我们经常奇怪为什么我们使用的Javascript控制窗口尺寸和位置的一些操作，而IE竟然没有全部支持呢，例如下面的代码：

按道理应该弹出一个10000x15000的大窗口，然后实际上IE给我们弹出的不过是一个和浏览器尺寸大小一致的窗口，为什么会这样呢？其实我们理解微软，如果不这样限制，系统可能会因为大量的这种代码而最终崩溃，当然微软的IE也提供了配置入口，配置是否进行限制，具体入口为：

对一般站点类说，默认都是禁用的，只要打开就可以了。

24，我们页面中经常会以post方式提交表单数据，提交之后，如果我们刷新页面，IE中一般都会提示如下图所示的信息：

如果避免这种提示出现，一种是编程上去解决，即表单提交后，不要从其它窗口对该窗口继续执行location的reload方法等等，最好是使用location的href属性或者assign、replace等方法），在IE的高级选项中，也有一个条目可以设置重定向表单提交时是否给出提示信息，但是设置了之后，没有什么效果，因此也就不过多介绍了。

25，现在很流行div+css方式的布局，的确这样做界面框架的灵活性大为增加，可以说什么布局都能出的来，而且目前的ajax方式的轻量级portal框架基本上都采用的是div+css的布局方式，但是也不要过度的使用，或者什么场合下都使用，例如对于一个中大型的项目而言，要考虑的不仅仅是布局这样的事情，还要考虑界面框架的许多东西，在这种情况下，还是使用模板的方式比较好，事实上div+css是一种布局，而模板是一种“框架”，两者可以结合使用，至于能结合到什么程度，就看你的实际本领了。

26，做为一个项目经理、产品经理或者是技术总监，你应该要重视界面方面的问题了，想想吧我们现在的开发人员，大都能很快的完成后台逻辑的开发，但是到了界面展现却是捉襟见肘，界面效果和易用性做的都不到位，界面方面都调整好了，需要的时间往往并不比后台逻辑开发用的时间少多少，相信你见到过吧，为了调试一个界面中的奇怪的问题，往往会用掉一个人一两天的时间，如果再不重视界面技术的学习和素养的培养，我们的路还能走多远。

又七七八八的为大家总结了一下我在web开发尤其是界面开发上的一些经验，这些都是摸爬滚打出来的，可以算作是经验，但不一定就特别的正确，许多东西还需要你自己去实践、检验和再总结，如果我写的这些东西，对你而言哪怕只是有一点的用处，我都是很欣慰的，另外一点我需要说的，就是我们应该逐步走出大师崇拜的阴影，不要再津津乐道于敏捷开发、极限编程等等，面对那些国外的大师，我们更为重要的是学习他们身上的精神和品质，而不是做一个忠实的传道士，对于这些精神和品质，我们中华民族实际上很早就有了，只是到现在已经少的可怜的，但并不是说我们就没有希望了，看看当今科学界和各个行业的民族精英们，看看他们骨子里面的那种精神，是很值得我们崇敬和学习的。

刘铮 2007-10-15 17:34 发表评论

转贴javascript学习心得

刘铮 — Mon, 15 Oct 2007 09:18:00 GMT

1，document.getElementById方法只能获取到一个对象，即使有多个同名的对象，也只取第一个具有该名称的对象，例如在一个form（名称为myform）中，有三个id="mycheckbox"的复选框，那么使用document.getElementById("mycheckbox")，返回的是第一个checkbox对象，而不是返回一个数组，如果使用document.myform.mycheckbox则返回一个数组。

2，使用showModalDialog打开一个页面，则在这个页面中，对于任何链接和任何表单提交，都会在新的窗口中执行，即使你在链接或form中指定了target="_self"也是没有用的。例如使用showModalDialog打开一个test.html，在该页面有一段代码
打开
如果点击该链接，那么将会在新窗口中打开test2.html，至少在ie中是这样的，那么是不是就没有办法解决了呢？不是的，我们可以通过在弹出的页面的head中加入下面的代码来解决这个问题：

3，在一个页面含有某个iframe，其id="myframe" name="myframe"，此时使用document.getElementById("myframe")取到的是iframe标签对象，通过该对象可以获取iframe的各个属性，例如src、frameborder、style等等，但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames("myframe")取到的是iframe组件对象，通过该对象可以获取到iframe所包含的页面的子页面的各个对象，例如子页面的window对象，但是不能获得iframe标签得各个属性，例如上面说到的src等等。请参看如下类似代码：
1.html

2.html

4，在table中，如果在table中加入border="1" bordercolor="red"，那么table中所有单元格都会加上厚度为1的红色边框，但是如果在table中加入css style="border-width:1;border-color:red;border-style:solid" 那么只会在整个table的最外面加上厚度为1的红色边框，分别如下图所示：

当然第一个出现了双边框，这是因为没有设置cellspacing的缘故，只要在table中设计cellspacing="0"，那么就变为单边框了。

5，许多时候我们需要在页面加载时能够通过javascript去动态操作html中的一些对象，对于这些操作我们最好是在body中定义onload操作，然后在该操作中去完成这些任务，尽量避免在html中嵌入script执行代码，因为对于比较大的页面，当这些脚本执行的时候，页面往往还没有加载完毕，因此许多页面对象还没有被生成，此时动态去改变很可能会报异常。

6，有时候我们需要在iframe子页面中调用父页面的javascript函数，例如在父窗口中定义了一个函数如下：

//...

那么在iframe子页面中可以通过parent.loadImage()来实现调用，这也说明用户在页面定义的所有javascript函数都属于window对象之下。那么在父窗口如何调用子窗口中的函数呢，应该很简单了，就是获得子窗口对象，然后调用子窗口对象的window对象下的这些函数即可，例如iframe的name为myframe，在子窗口定义了一个函数getUserName，那么父窗口中的调用方式为document.frames("myframe").getUsername();另外对于父窗口调用子窗口中的方法，还要注意一个问题，就是子窗口的加载有时候会比较慢，如果子窗口正在加载，那么此时它的各种页面对象都不存在，那么当在父窗口调用子窗口的方法时，为了保险可以使用借助setTimeout来实现异步调用，即通过setTimeout指定一定时间之后（例如100ms），再执行调用，调用执行总是判断子窗口页面是否加载完毕，如果没有加载完毕，则继续使用setTimeout方法，循环往复直到子窗口被完全加载，然后执行子窗口的函数调用。既然这里解释了窗口间的异步调用，后面就不专门解释了。

7，在一个网页中如何最小化窗口，当然你可能会说，网页的右上角不是有最小化、最大化和关闭三个按钮吗，当然了这里说这个问题是指，如果不点击网页右上角的最小化，如何实现网页的最小化操作，例如有些项目中，用户需要办公界面是全屏化的，这意味着网页自己提供的许多操作都不可见，更不用说去操作了。在网络上我们搜索最小化的解决方式，我们会发现千篇一律的使用如下的方式实现：

在win98和windows2000中这个方式可能是可以的，但是在windows XP中却是不再支持了，不仅如此在windows XP中对javascript不少函数做了限制。那么在XP中如何实现最小化呢，一个可以实现的方式就是自己写一个activeX控件，这个是在项目中证明可以实现的。（不要认为activeX控件很难写，也不要以为activeX控件用户不接受，在实际的项目中如果用户使用的都是ie，那么用户一般是会接受的，当然这里的项目最好是内网办公项目，对于公网项目来说，用户接不接受就很难说了）

8，注意td中nowrap的使用，这个属性是很有用的，例如如果一个td中含有多张图片，那么如果不加入nowrap，那么很可能这些图片会由于其它的td的挤压而产生细微的上下错位，这表现的页面上就是某处出现了一条横向的细缝。这一点很重要，页面中许多非常奇怪的现象都与此有关。

9，对于showModalDialog弹出的页面，不能使用右键菜单，也不支持F5和ctrl+r刷新，如果此时修改弹出页面的内容，那么必须关闭该窗口，然后重新弹出才可以。另外，对于许多web服务器，由于服务器都设置有缓存，如果修改了弹出页面的内容，那么许多时候只是关闭弹出页面还是不够的，往往还需要关闭弹出该页面的那个页面才可以。在这里多说一句，web开发许多奇怪的页面现象都和web服务器的缓存有着很大的关系，因此出现问题时考虑一下是否是由于服务器的缓存所致。

10，我们喜欢在form中定义onsubmit操作，主要是为了在表单提交之前可以做一些有意义的操作，例如检查输入域的有效性等等，但是一定要注意，如果我们通过点击该form中的submit按钮（type=submit或type=image）提交表单，那么该onsubmit操作会被执行，但是如果通过document.formName.submit()提交表单，那么此onsubmit操作将不被执行。

11，许多时候我们修改了页面的内容，但是我们刷新页面或重新打开该页面，却看不到修改的效果，除了前面提到过的showModalDialog和缓存的情况要考虑外，还要检查一下是否改对了地方，即你修改的那个页面是否是服务器上的那个页面，有可能你修改了其它地方的一个页面，如果不是这个原因，那么再进行其它方面的检查。

12，在没有系统规划好之前，请不要在css中定义html标签的统一行为，即下面的形式：

因为一但定义了这些标签的属性，那么这将会影响页面中所有的这些标签属性，尤其在一些公用的css文件中，尽量不要定义html标签的统一行为。当然如果经过了系统的良好的规划，那么这样做将是非常好的，只是在国内在css上经过良好规划的并不多，因此虽然我们见到许多项目和产品中对html标签做了许多css的定义，但是真正起到作用的并不多。

13，在html标签中有许多属性的名称都是复合词，例如borderColor、frameBorder、readOnly等等，注意这些复合词在html的书写，一般来说我们在html标签中写为borderColor和bordercolor，各个浏览器的解析都会通过，但是我们在使用javascriopt引用这些属性时却需要注意了，一定使用正确的属性名称，严格来说，对于复合词而言，除了第一个有意义的词之外，其它任何有意义的词的首字母都要大写，例如对于上面列出的三个属性的引用，一定要使用borderColor、frameBorder、readOnly的形式。

14，我们知道当使用浏览器的菜单“查看”->“文字大小”来改变文字的显示时（或者有些浏览器也可以使用ctrl+滚轮键），网页中的文字的字号会发生相应的变化，如果我们在网页中的文字块中定义了style="font-size:10pt"，那么这些文字块中的文字的大小将是固定的了（注意在标签定义size属性是不能固定字号的），我想这一点多数人都应该知道的。但是我们使用中有时会出现一种非常奇怪的现象，例如下面的一段代码：

这是上面

这是下面

我们看一下在字号显示“最大”和“最小”下的差别：

从上图我们可以看到字号我们是固定住了，但是table的高度却会随着查看方式的不同而发生变化，这是为什么呢？原因就在于td当中的那个
，我们知道
是表示段内换行，但是要注意在网页中所谓的行也是有一定的默认高度的，而且这个高度随着查看方式的不同而发生相应的变化，因此如果我们想固定上面table的高度不发生变化，有下面两种方式：
方式一：在table标签中加入字号限制例如方式二：在
中加入字号限制例如
...
如果你是一个web开发人员，你可以试着使用ctrl+滚轮键改变网页查看文字的大小，你会发现不少页面都存在这个问题的。

15，网页中定位对象的方式有许多种，下面先简单总结一下，以后再专门写这个方面的文章的：
1）页面内通用定位方式（这些定位方式适用于后面其它元素的定位）
document.getElementById(objId);//通过对象的id获取对象，这个是各个浏览器都支持的，返回一个对象
document.getElementsByName(objName);//通过对象的name获取对象，这个是各个浏览器都支持的，返回一个数组
document.getElementsByTagName(tagName);//通过标签名称获取对象，这个是各个浏览器都支持的，返回一个数组
document.all.objId;//通过对象id获取对象，这个是ie支持的，返回一个对象
document.all(objId);//通过对象id获取对象，这个是ie支持的，返回一个对象
document.layers.objId;//通过对象id获取对象，这是Netscape支持的，返回一个对象
document.layers(objId);//通过对象id获取对象，这是Netscape支持的，返回一个对象
window.objName;//通过对象名称获取对象，至少在ie中如此
objName;//通过对象名称获取对象，至少在ie中如此
2）页面内集合元素的定位方式
我们知道在页面中有许多集合，例如form、frame、image等等，引用这些集合中某个对象的方式为，举其中一个为例，其它都差不多，以form为例：
document.formName;//通过表单name获取表单对象
document.forms[index];//通过索引获取表单对象，浏览器会按顺序将页面中所有的表单集合城数组，可以通过下标引用
document.forms(formName);//通过表单name获取表单对象
3）定位子窗口的方式（定位子窗口对象，不是标签对象，见前面3中的说明）
子窗口是指页面中frame或iframe窗口，定位方式为：
document.frames[index];//索引定位方式
document.frames(frameName);//通过名称定位
window.frameName;//通过名称定位
frameName;//直接通过名称来定位
4）在子定位父窗口的方式
通过关键字parent来引用即可，同理parent.parent则表示父父窗口，top则表示最上层窗口。
5）原窗口定位open弹出窗口的方式，例如下面代码：
window.open("test.html");
这里我们要知道window.open将会返回一个弹出窗口的句柄，即可以如下：
var owin=window.open("test.html");
owin即代码弹出窗口对象，通过改对象可以引用到弹出窗口的各个对象。
6）原窗口定位showModalDialog弹出窗口的方式，例如：
window.showModalDialog("test.html");
注意showModalDialog与open不同，open弹出窗口后，window.open后面的代码可以继续执行，而showModalDialog弹出窗口后，原页面被阻塞，即window.showModalDialog后面的代码不被执行，直到用户关闭了弹出窗口才会继续往下执行，但这时因为已经关闭了弹出窗口，所以已经无法再对该窗口进行引用。
7）open弹出的窗口对原窗口的定位方式，这个我们一般都知道，在弹出窗口中使用opener即可。
8）showModalDialog弹出的窗口对原窗口的定位方式，这个不是使用opener，而应该在弹出窗口中使用parent。

16，编写页面代码尽量使用标准的html、css和javascript，不要以为只要在ie上通过就可以了，要注意最近浏览器市场已经开始发生变化了，不知道你是否听说过Firefox2.0，它的用户量已经不在ie之下了，至少你的代码要在ie和Firefox上都通过才可以，另外现在linux越来越吃香，保不准几年后我们的许多客户都开始使用linux，到那个时候，我们将不得不对原来已经完成的项目进行维护，与其这样的后果，还不如从现在开始就使用标准为好，不要认为跨浏览器是很虚的话题，觉得没有必要，要知道这已经不是几年前了，现在形式和市场都在发生变化，我们的思想也该变一变了。

17，我们的产品或OA系统往往会有许多模块，例如用户管理、发文流程、物品管理等等，我们在为这些模块命名时往往都是不太讲究的，没有注意名字的结构、字数等的统一，例如在个人事务模块下面有三个子模块，名称分别如下：待办事项、已办事项，维护个人信息。对于字数而言我们往往不会苛求太多，但是对于词的结构，我们还是要讲究的，例如上面的三个模块，前两个是名词结构，而后一个是谓词结构（动宾结构），这是不太妥当的，也许你觉得这有些吹毛求疵，当然大多数项目中不会要求这么严格，但是有些客户的确会有这样的要求，另外对我们自己而言，这也体现了我们做事认真、一丝不苟的品格和态度。

18，图标与文字的配比要合适，这不仅要求图标能够正确显示文字的意思，而且还要求图标不能盖过文字的显示与含义，即图标太显眼而文字无足轻重的情况需要避免，例如下面的情况就是不太合适的：
用户管理
之所以不合适，主要是因为图标的含义与用户管理关系不大，图标的含义更接近“XX编辑”的意思，和用户管理基本没有什么联系。

19，在用户登录和表单处理页面，我们要处理用户按enter键的情况，即用户按enter键也要触发提交事件，不要只有用户点击“登录”或“提交”按钮才触发提交操作。

20，如果我们在页面中使用标签，那么默认情况，当鼠标移到该链接时，鼠标自动会变为手的形状，许多时候我们希望鼠标移动到其它非链接的区域，也希望鼠标变为手的形状，我们一般的处理方式为在该区域的style中加入cursor属性，如下：
下一页
或者使用：
下一页
但是要注意，只有在ie中才支持cursor:hand，在firefox2.0中的cursor中是没有hand的，像wait、help等都是支持的，另外firefox中也不支持cursor:url方式。

21，我们有时想通过javascript进行跨域页面的调用，不过出于安全性的考虑，各个浏览器一般都是不支持的，例如下面的代码：
http://www.google.com">>

使用setTimeout是为了可以让iframe子页面可以加载完毕，上面的调用会报安全性警告，例如在ie如下：

那么是不是说只要是跨域就能不能进行javascript访问了呢？不是的，一种比较常用的办法就是设置document.domain属性，这种方式的描述如下：
假设有两个页面
test1.html 所在域：aaa.maindomain.com 访问协议：http 端口：8080
test2.html 所在域：bbb.maindomain.com 访问协议：http 端口：8080
满足上面条件的两个页面test1.html、test2.html是可以通过javascript相互访问的，上面的条件即为两个页面位于同一个基础域（例如上面同为maindomain.com），遵循同一个访问协议和端口（例如上面同为http 8080）。只要在这样的两个页面中都设置document.domain为所在基础域名，就可以相互调用了，例如：
test1.html 所在域为aaa.mydomain.com

test2.html 所在域为bbb.mydomain.com

...
这样一来，test1.html的调用就是可以的了。一般来说跨域调用的场景发生在集团型企业项目或多机构的政务项目中，而对于这种类型的项目，它们的基础域基本上是相同的，只是三级域名不同，因此可以使用上面的方式来进行跨域调用。

22，你会页面中的javascript调试吗？也许你还不会使用ie或firefox提供的页面调试器或插件，那么没有关系，至少你懂得一种最基本的调试：alert调试，不要认为这是一种很土或很傻的方式，很多时候这种方式都很非常有用的，对于一段很长的javascrip代码，从头到尾加入几个alert，那么立即就能定位错误的大概位置，当然使用调试器的断点也可以很快定位，只是说alert也是一种不错的方式。当然还是希望你能够掌握更为高级的调试器的使用，毕竟调试器带给我的功能更强大。

23，我们许多时候编写完网页之后，发现最终的显示效果和我们想象的不太一样，这有些时候是由于浏览器的不同造成的，但除此之外，我们如何具体定位到底是页面的哪块代码导致不太理想的页面效果呢？当然你可能会使用Dreamweaver或Frontpage打开出问题的页面，然后查找原因，但是这些所见即所得的网页设计器，并非我们想象的那么完美，例如明明在设计器种预览很好的效果，到了真实环境中页面竟然出现了错位等等，这里和你介绍一种非常不错的css的调试方式，这里就不具体说了，请参看我新写过的一篇文章【css在html中的调试作用】

24，网页打印我们都知道可以调用window.print函数，那么如果想打印iframe子窗口中页面呢，如果你只是获得子窗口对象，然后调用子窗口对象的print方法，此时打印机打印出却不是子窗口页面的内容，而是父窗口页面自身，为什么会这样呢？原来（至少在ie中如此）在父页面调用子窗口的print函数时，因为此时焦点还在父窗口之中，所以打印机此时会将获得焦点的窗口进行打印，我们在打印子窗口之前，只需做一件事即可完成对子窗口的打印，如下代码：

25，网页切图许多人都习惯于网页三剑客的配合使用，网页三剑客就是网页开发者都熟悉的Dreamweaver、Fireworks和Flash，一般我们使用使用Flash或Fireworks将动画或图切分后输出成为html页面，然后通过Dreamweaver编辑输出后的页面，这是我们网页切图常用的配合方式，但是通过使用比较发现，在图片的切分方面，使用Photoshop要好于Fireworks，Photoshop不仅定位更加精确，而且由于自身是平面设计的标准，因此它提供了许多图片编辑的其它功能，这要比fireworks强大得多。目前专业的网页设计师都在开始或一直使用Photoshop进行网页设计并切分后输出成为HTML页面。如果你是三剑客的爱好者也没有关系，你可以使用一下看看效果如何，总之我从2000年就开始使用三剑客，现在才逐渐认识到Photoshop已经不仅仅是平面设计的标准了。

26，在javascript中有一个方法可以列出当前对象所支持的所有属性、集合和事件，通过使用in关键字来实现，如下样例代码：
var str="";
for(var i in document){
str+=i+"\n";
}
alert("document's all attributes:"+str);

27，在一个名称为myform的表单中，含有一个名称为mychckbox的复选框，那么document.myform.mycheckbox所取到的是那个复选框对象，那么此时调用document.myform.mycheckbox.length是错误的，如果该表单中含有多个名称为mycheckbox的复选框，那么document.myform.mycheckbox返回的是一个数组，此时调用document.myform.mycheckbox.length就是正确的。单独说这个问题，可能感觉比较简单，但是在实际应用中我们经常会犯与此相关的错误，如下图所示：

上图是我们在应用中经常遇到的“增、删、改”的逻辑，我们在其中经常会对复选框做操作，经常会使用类似document.myform.mycheckbox.length的方式，一般情况不会报错，这主要是因为在我们的列表中一般来说都不会只有一条记录，但是当列表中只有一条记录的时候（尽管这种时候不常见），这样引用就会报错，因为此时document.myform.mycheckbox返回的不是一个数组，则对length的引用就没有意义了，这种错误说起来很容易，但是在编程时往往就会忽略，因此在编程时我们建议如下方式：
if(document.myform.mycheckbox.length){
//...
}else{
//...
}

28，在ie中有一个很特别的css语法，如果你听说过，那说明你的积累真是太丰富了！在css中有一种给汉语注音的语法，如下所示：

你知道这个语法吗？ni zhi dao zhe ge yu fa ma

不知道bu zhi dao

你运行这段代码看看什么效果（要在ie中运行），我这里效果如下：

29，我们项目中经常会遇到页面打印的需求，许多时候用户需要只打印页面某一部分，如果直接调用window.print则打印的是整个网页的内容。解决办法不外乎两种，第一种方式是将整个页面分为几个部分，将需要打印的部分放在其中的一个部分，然后定义onbeforeprint和onafterprint两个操作，即打印之前将不要打印的部分隐藏，打印之后将隐藏的部分显示，类似代码如下：

这里不需要打印

这里需要打印

这里不需要打印

第二种方式是将需要打印的部分放到iframe之中，然后将焦点移到子窗口，然后调用子窗口的print方法即可。

30，Javascript中的数组和我们一般的编程语言中的数组是不太一样，一般语言中数组的长度是固定的，有些语言中数组中的数据类型也要求是一样的，但是javascript数组却不受这些限制，在javascript中数组基本上是没有长度限制的，而且类型也没有限制，例如下面的一些使用方法：
var arr=new Array();
arr[1000]="ok";
arr[300]=255;
arr[200]=new Date();
var date=arr[200];
alert(date.getTime());
因为数组的这种机制，我们可以使用数组实现许多数据结构，例如列表、哈西表等等。

31，对于XML的处理一般情况下都是在服务器端处理的，例如在Java中有W3C、JDOM、XPath等许多xml的解析器，但是现在许多时候我们需要在浏览器端处理xml字符串，目前在ie和netscape中都有针对xml字符串的解析，如果你喜欢使用，也没有什么关系，不过对于Java程序员，我给你介绍一个完全按照W3C Document API实现的XML解析器，相信你会非常喜欢的，因为完全是Java的风格，请从 http://download.jsjava.com 下载jsjava0.91，在其中的src/jsorg/w3c/dom下有XML各个对象的实现，在页面中只需引用其中的xmlp.js和i18n.js即可，具体使用可以参考里面的例子：位于下载包的examples/XMLParser/XMLW3CParser下面，也可以直接访问：http://jsjava.sourceforge.net/examples/XMLParser/XMLW3CParser/W3CXMLParser.html 查看例子。

32，一段文本的首行文本缩进两个汉字，这是中文段落的格式要求，我们可以通过在首行加入多个来实现，不过还是建议使用css的标准属性text-indent，例如下面的代码：

这是一段文本，请注意它的格式，

你看到了什么效果？如果你看到首行

缩进了，那么说明起作用了。

显示效果如下：

33，在Javascript中字符串的替换函数为replace(regexp, newSubStr)，其中第一个参数是一个正则表达式，但是我们在实际使用中，往往习惯使用为一个字符串，这虽然不会报错，但是得到的结果往往是不正确的，例如下面的例子：
var str=“ abbbbacc”;
var rs=str.replace(“a”,”0”);
(A)0bbbbacc (B)0bbbb0cc
正确答案是A，当然A可能不是你想要的结果，你想要的结果是字符串中所有的“a”都被替换为“0”，可是上面的使用方式只能将第一个“a”替换为“0”，正确的使用方式，在第一个参数中输入一个正则表达式，如下所示：
var str=“ abbbbacc”;
var rs=str.replace(“/a/g”,”0”);//注意如果第一个参数为/a/，结果也是不正确的。
(A)0bbbbacc (B)0bbbb0cc
这样的话答案就是B了，如果你不明白/a/g是什么意思，那么你就需要对Javascript的正则表达式好好学习了，具体可以参看我以前写过的一篇文章：http://blog.csdn.net/eye_of_back/archive/2006/07/14/922667.aspx

34，无论你使用的是ASP，还是PHP，或者JSP，都不建议在页面代码中夹杂着大量的业务逻辑代码。我们应该将业务逻辑代码封装到应用服务器层或者说业务层，web端只是进行调用。在JSP和PHP中我们可以将业务逻辑封装到BO（业务对象）中，由于支持类、接口等一套面向对象的机制，使得这种封装显得很容易，对于ASP，由于ASP.NET和C#的兴起，使得它对业务封装也变得相当方便。虽然我们都懂得服务器的三层架构，但是我们发现许多的项目之中，开发人员仍然在页面中直接编写业务逻辑，甚至直接访问数据库，面对这种情况，不能不说我们的项目管理是存在很大的问题的，我们的项目经理和程序设计师们，我们应该好好反思一下了。

35，有些时候我们在标签的href中直接加入javascript代码，通过window.open来打开一个自己可以控制许多属性的窗口，例如下面的代码：
打开Google
当我们点击链接后，确实弹出了Google的页面，但同时原页面却变为了下面的样子：

这种情况相信有些人遇到过，解决方式如下：
打开Google
但是为什么前面的那种方式就会出现那种情况呢，其实只要做个简单实验就会明白了，你运行一下下面的代码，点击链接看看会出现什么结果：
打开Google
实验后你会发现，点击链接后页面出现的结果与上面那种结果相同，然后你再实验一下下面的代码：
打开Google
点击链接后，你会发现页面中会显示test字样。可见对于类似
点击
的代码，如果js代码执行完毕后返回一个对象，那么页面内容会被冲掉，然后将该对象的描述输出到页面中，我们知道window.open方法返回的是弹出的页面的窗口对象（window），因此javascript:window.open将会在弹出一个窗口的同时，原页面会冲掉原有内容并将返回的window对象输出到原页面中。如果在window.open后面加入window.opener=null;window.close()，则弹出窗口后，返回给原页面的对象为空，则原页面不执行任何其它操作。

刘铮 2007-10-15 17:18 发表评论

网页中浮动对象总是显示在窗体的某个位子的javascript实现

刘铮 — Thu, 04 Oct 2007 03:21:00 GMT

网页中浮动对象总是显示在窗体的某个位子的javascript实现

例子：


   50"> 走

刘铮 2007-10-04 11:21 发表评论

javascript 中innerText,innerHTML,outerText,outerHTML之间的不同和区别

刘铮 — Thu, 04 Oct 2007 02:39:00 GMT

javascript 中innerText,innerHTML,outerText,outerHTML之间的不同和区别

innerText是指设置和返回的是HTML元素的标签对之间的内容。如果设置值中包含其他的HTML标签，其他的HTML标签符号将作为普通文本显示在网页中。读取时，如果标签对之间的内容包含其他的标签，返回内容将不包括其他标签符号本身。

outerText与innerText不同的是包括设置和返回HTML元素的标签符号本身和其中嵌套的内容。

innerHTML也是设置和返回的是HTML元素的标签对之间的内容，但是如果设置值中包含其他的HTML标签，浏览器将按照这个被包含的HTML标签的意义控制文本在网页中的显示的效果，读取该属性时，如果标签对之间的内容包含其他的标签，则将被包含的标签符号本身连同其他内容一起返回。

outerHTML与innnerHTML不同的是包括设置和返回HTML元素的标签符号本身和其中嵌套的内容

刘铮 2007-10-04 10:39 发表评论

JavaScript 中改变当前window和frame的page的方法

刘铮 — Tue, 11 Sep 2007 07:36:00 GMT

可以使用location

To load a different page into the current window or frame, assign the new page's URL string to the location.href property:

location.href=http://www.megacorp.com/products/framistan309.html;

location是window对象和document对像的属性，所以window.location和document.location是相同的，可以相互使用

刘铮 2007-09-11 15:36 发表评论

javascript中的事件处理

刘铮 — Sat, 18 Aug 2007 06:54:00 GMT

function submitViaEnter(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
var form = target.form;
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if (charCode =  = 13 || charCode =  = 3) {
if (validateForm(form)) {
form.submit( );
return false;
}
}
return true;
}

NN4和IE有所不同所以先要判断evt是evt还是event

NN4中的目标元素为target，而IE4+中的目标元素为srcElement

这样写可以无论是IE还是NN，都可以接受。

刘铮 2007-08-18 14:54 发表评论

ShowModelDialog的返回值的问题

刘铮 — Fri, 10 Aug 2007 08:36:00 GMT

window.returnValue [ = vValue ]
Sets or retrieves the value returned from the modal dialog window

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

sURL

Required. String that specifies the URL of the document to load and display.

Return Value

Variant. Returns the value of the returnValue property as set by the window of the document specified in sURL .

也就是说window.returnValue可以设置模态对话框的返回值。

刘铮 2007-08-10 16:36 发表评论

document.all[]的意思

刘铮 — Tue, 07 Aug 2007 11:08:00 GMT

从IE4开始IE的object model才增加了document.all[],来看看document.all[]的Description:
Array of all HTML tags in the document.Collection of all elements contained by the object.
　　也就是说document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素（见例1）。

IE’s document.all collection exposes all document elements.This array provides access to every element in the document.

　　document.all[]这个数组可以访问文档中所有元素。

例1（这个可以让你理解文档中哪些是对象）

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Document.All Example

Example Heading

This is a paragraph. It is only a paragraph.

Yet another paragraph.

This final paragraph has special emphasis.

　　它的执行结果是:

Example Heading

--------------------------------------------------------------------------------

This is a paragraph. It is only a paragraph.

Yet another paragraph.

This final paragraph has special emphasis.

--------------------------------------------------------------------------------
document.all.length=18
document.all[0]=!
document.all[1]=HTML
document.all[2]=HEAD
document.all[3]=TITLE
document.all[4]=META
document.all[5]=BODY
document.all[6]=H1
document.all[7]=HR
document.all[8]=P
document.all[9]=EM
document.all[10]=EM
document.all[11]=P
document.all[12]=EM
document.all[13]=P
document.all[14]=EM
document.all[15]=EM
document.all[16]=HR
document.all[17]=SCRIPT
(注意它只可以在IE上运行)
　　例2（访问一个特定元素）

"http://www.w3.org/TR/html4/loose.dtd">

单击DIV变色

　　上面的这个例子让你了解怎么访问文档中的一个特定元素，比如文档中有一个DIV

，你可以通过这个DIV的ID，NAME或INDEX属性访问这个DIV：

document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("div")则返回文档中所有DIV数组，本例中只有一个DIV，所以用document.all.tags("div")[0]就可以访问了。

　　3、使用document.all[]

例3

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Document.All Example #2

DHTML Fun!!!

4、标准DOM中的访问方法

　　开头就说过document.all[]不符合WEB标准，那用什么来替代它呢？document.getElementById

Most third-party browsers are “strict standards” implementations, meaning that they implement W3C and ECMA standards and ignore most of the proprietary object models of Internet Explorer and Netscape.If the demographic for your Web site includes users likely to use less common browsers, such as Linux aficionados, it might be a good idea to avoid IE-specific features and use the W3C DOM instead. by Internet Explorer 6, we see that IE implements significant portions of the W3C DOM.

　　这段话的意思是大多数第三方浏览器只支持W3C的DOM，如果你的网站用户使用其他的浏览器，那么你最好避免使用IE的私有属性。而且IE6也开始支持W3C　DOM。

毕竟大多数人还不了解标准，在使用标准前，你还可以在你的网页中用document.all[]访问文档对象前面写到WEB标准，今天继续WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签：

　　1、getElementById()

　　getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。

　　比如说有一个DIV的ID为docid：

　　那么就可以用getElementById("docid")来获得这个元素。

"http://www.w3.org/TR/html4/loose.dtd">

ById

　　2、getElementsByName()

　　这个是通过NAME来获得元素，但不知大家注意没有，这个是GET　ELEMENTS，复数ELEMENTS代表获得的不是一个元素，为什么呢？

　　因为DOCUMENT中每一个元素的ID是唯一的，但NAME却可以重复。打个比喻就像人的身份证号是唯一的（理论上，虽然现实中有重复），但名字重复的却很多。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。

　　比如有两个DIV：

　　那么可以用getElementsByName("docname")获得这两个DIV，用getElementsByName("docname")[0]访问第一个DIV，用getElementsByName("docname")[1]访问第二个DIV。

　　下面这段话有错，请看forfor的回复，但是很可惜，IE没有支持这个方法，大家有兴趣可以在FIREFOX或NETSCAPE中调试下面这个例子。（我在NETSCAPE7.2英文版和FIREFOX1.0中调试成功。）

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Byname,tag

　　3、getElementsByTagName()

　　这个呢就是通过TAGNAME（标签名称）来获得元素，一个DOCUMENT中当然会有相同的标签，所以这个方法也是取得一个数组。

　　下面这个例子有两个DIV，可以用getElementsByTagName("div")来访问它们，用getElementsByTagName("div")[0]访问第一个DIV，用

getElementsByTagName("div")[1]访问第二个DIV。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Byname,tag

刘铮 2007-08-07 19:08 发表评论

JS的日期输入判断

刘铮 — Tue, 07 Aug 2007 10:36:00 GMT

             }

           }
         }
   }
}

刘铮 2007-08-07 18:36 发表评论

BlogJava-liuzheng-文章分类-JavaScript

javascript中函数的深入理解

在IE中使用Javasript对xml的解析

prototype对ajax的支持

Ajax 对象

1.4.1. 使用 Ajax.Request类

1.4.2. 使用 Ajax.Updater 类

关于页面两个列表的数据传输的js算法

javascript的基本概念

javascript中定义类和对象最好的方法

转贴javascript心得（二）

转贴javascript学习心得

网页中浮动对象总是显示在窗体的某个位子的javascript实现

javascript 中innerText,innerHTML,outerText,outerHTML之间的不同和区别

JavaScript 中改变当前window和frame的page的方法

javascript中的事件处理

ShowModelDialog的返回值的问题

document.all[]的意思

Example Heading

DHTML Fun!!!

JS的日期输入判断

`Ajax` 对象

1.4.1. 使用 `Ajax.Request`类

1.4.2. 使用 `Ajax.Updater` 类