BlogJava-CONAN ZONE-文章分类-JShttp://www.blogjava.net/conans/category/32364.html你越挣扎我就越兴奋zh-cnMon, 28 Nov 2011 19:18:28 GMTMon, 28 Nov 2011 19:18:28 GMT60js获取网页高度http://www.blogjava.net/conans/articles/364566.htmlCONANCONANTue, 22 Nov 2011 07:01:00 GMThttp://www.blogjava.net/conans/articles/364566.html<script>
function getInfo()
{
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth;
s += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。



有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.

可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.

原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.

区别新旧标准的行是:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
前者指明该页面使用旧标准, 后者指明该页面使用新标准.

总结:
XHTML中用 document.documentElement.clientHeight 代替
document.body.clientHeight



CONAN 2011-11-22 15:01 发表评论
]]>Firebug控制台详解http://www.blogjava.net/conans/articles/347393.htmlCONANCONANThu, 31 Mar 2011 07:18:00 GMThttp://www.blogjava.net/conans/articles/347393.html

Firebug是网页开发的利器，能够极大地提升工作效率。

但是，它不太容易上手。我曾经翻译过一篇《Firebug入门指南》，介绍了一些基本用法。今天，继续介绍它的高级用法。

===================================

Firebug控制台详解

作者：阮一峰


控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。

一、显示信息的命令

Firebug内置一个console对象，提供5种方法，用来显示信息。

最简单的方法是console.log()，可以用来取代alert()或document.write()。比如，在网页脚本中使用console.log("Hello World")，加载时控制台就会自动显示如下内容。

另外，根据信息的不同性质，console对象还有4种显示信息的方法，分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

比如，在网页脚本中插入下面四行：

　　console.info("这是info");

　　console.debug("这是debug");

　　console.warn("这是warn");

　　console.error("这是error");

加载时，控制台会显示如下内容。

可以看到，不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接，点击后跳转到网页源码的相应行。

二、占位符

console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

比如，

　　console.log("%d年%d月%d日",2011,3,26);

　　console.log("圆周率是%f",3.1415926);

%o占位符，可以用来查看一个对象内部情况。比如，有这样一个对象：

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黄色";

然后，对它使用o%占位符。

　　console.log("%o",dog);

三、分组显示

如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。

　　console.group("第一组信息");

　　　　console.log("第一组第一条");

　　　　console.log("第一组第二条");

　　console.groupEnd();

　　console.group("第二组信息");

　　　　console.log("第二组第一条");

　　　　console.log("第二组第二条");

　　console.groupEnd();

点击组标题，该组信息会折叠或展开。

四、console.dir()

console.dir()可以显示一个对象所有的属性和方法。

比如，现在为第二节的dog对象，添加一个bark()方法。

　　dog.bark = function(){alert("汪汪汪");};

然后，显示该对象的内容，

　　console.dir(dog);

五、console.dirxml()

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

比如，先获取一个表格节点，

　　var table = document.getElementById("table1");

然后，显示该节点包含的代码。

　　console.dirxml(table);

六、console.assert()

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

比如，下面两个判断的结果都为否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

七、console.trace()

console.trace()用来追踪函数的调用轨迹。

比如，有一个加法器函数。

　　function add(a,b){

　　　　return a+b;

　　}

我想知道这个函数是如何被调用的，在其中加入console.trace()方法就可以了。

　　function add(a,b){

　　　　console.trace();

　　　　return a+b;

　　}

假定这个函数的调用代码如下：

　　var x = add3(1,1);

　　function add3(a,b){return add2(a,b);}

　　function add2(a,b){return add1(a,b);}

　　function add1(a,b){return add(a,b);}

运行后，会显示add()的调用轨迹，从上到下依次为add()、add1()、add2()、add3()。

八、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

　　console.time("计时器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("计时器一");

九、性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

假定有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i=0;i<count;i++){}

　　}

　　function funcB(count){

　　　　for(var i=0;i<count;i++){}

　　}

然后，就可以分析Foo()的运行性能了。

　　console.profile('性能分析器一');

　　Foo();

　　console.profileEnd();

控制台会显示一张性能分析表，如下图。

标题栏提示，一共运行了12个函数，共耗时2.656毫秒。其中funcA()运行10次，耗时1.391毫秒，最短运行时间0.123毫秒，最长0.284毫秒，平均0.139毫秒；funcB()运行1次，耗时1.229ms毫秒。

除了使用console.profile()方法，firebug还提供了一个"概况"（Profiler）按钮。第一次点击该按钮，"性能分析" 开始，你可以对网页进行某种操作（比如ajax操作），然后第二次点击该按钮，"性能分析"结束，该操作引发的所有运算就会进行性能分析。

十、属性菜单

控制台面板的名称后面，有一个倒三角，点击后会显示属性菜单。

默认情况下，控制台只显示Javascript错误。如果选中Javascript警告、CSS错误、XML错误都送上，则相关的提示信息都会显示。

这里比较有用的是"显示XMLHttpRequests"，也就是显示ajax请求。选中以后，网页的所有ajax请求，都会在控制台面板显示出来。

比如，点击一个YUI示例，控制台就会告诉我们，它用ajax方式发出了一个GET请求，http请求和响应的头信息和内容主体，也都可以看到。

[参考文献]

* Firebug Tutorial - Logging, Profiling and CommandLine (Part I)

* Firebug Tutorial - Logging, Profiling and CommandLine (Part II)

（完）

CONAN 2011-03-31 15:18 发表评论
]]>利用"事件上提" 来简化事件注册(防止潜在的内存泄露)http://www.blogjava.net/conans/articles/217041.htmlCONANCONANWed, 23 Jul 2008 15:03:00 GMThttp://www.blogjava.net/conans/articles/217041.html
通常的解决方案是, 自行实现一套 添加事件, 移除事件 以及删除dom元素的机制.
为dom元素添加事件时, 同时记录 这个事件 以及对应的函数,
在删除dom元素时, 先移除dom元素上已经添加的事件 再删除dom元素本身.

而当页面中添加了事件监听的dom元素很多时, 移除元素变得很麻烦.
例如 一个div 里面有个form form里有多个元素都添加了事件.
那么移除这个div时, 就要先去移除他下面每一个元素上的事件 然后再移除这个div.

这种做法很多时候是必须的, 而且自己写一个"深度遍历子节点,并移除其事件"的函数也并不是很困难.

但是 在很多时候 这种做法是可以避免的, 避免的方法就是, 把事件监听注册到更上层的dom元素中.
并且在事件函数中 通过 event.target/event.srcElement 来 事件发生在哪个元素上,然后来执行相关的方法.
这样 在移除元素时 只要移除这个元素以及它上面的事件 就可以了, 而不必执行(或者少量的执行)"移除所有子节点事件"的动作了.


见下面的例子 :

Html代码 复制代码
  1.  <table width="300" border="1"  onclick="showDetail(event)">    
  2.  <tr>  
  3. <td>1</td>  
  4. <td>Tom</td>  
  5. <td><input type="button" value="详细信息" userid="1" /></td>  
  6.  </tr>  
  7.  <tr>  
  8. <td>2</td>  
  9. <td>Kate</td>  
  10. <td><input type="button" value="详细信息" userid="2"  /></td>  
  11.  </tr>  
  12.  <tr>  
  13. <td>3</td>  
  14. <td>John</td>  
  15. <td><input type="button" value="详细信息"  userid="3" /></td>  
  16.  </tr>  
  17.  </table>  


在这个例子中, 实际上事件只是注册在table上, 而没有在"input type="button"上.

"showDetail" 可以这样写

Javascript代码 复制代码
  1. function showDetail_b(event) {   
  2.     event=event||window.event;   
  3.     var target=event.target||event.srcElement;   
  4.     if ( String(target.tagName).toLowerCase()=='input' &&  target.value=="详细信息") {   
  5.         showUserDetail(target.getAttribute('userid') );   
  6.     }   
  7. }  



当然 这种做法不是绝对的, 有时候这么做很可能让代码变得臃肿冗长.
到底是否使用"事件上提"的做法 要根据实际情况来选择.
不过 根据我的以往经验, 在列表(table)中, 使用这种技术非常合适.
因为 列表有着"行与行之间模型一致"(只是数据不一致,结构一致)的特点.

例如,下面的效果, 都可以通过在 table上注册事件来实现:

1 点击行, 行变色 (不必在 tr 上注册点击事件)
2 点击行中的某个按钮 (不必在 tr 里的 button 上注册点击事件)
3 鼠标经过行时 行变色 (不必在 tr上注册 mouseover/mouseout 事件, 而是可以在table上注册mousemove事件)
4 还有关于单元格的 很多效果.....

当然,在非列表里 这种做法也有很多的用武之地.
总之 合理的利用"事件上提"的方法, 可以增强dom元素和事件的可控性, 有效的防止内存泄露和内存无法回收的情况.

CONAN 2008-07-23 23:03 发表评论
]]> js判断页面是否load完成http://www.blogjava.net/conans/articles/214466.htmlCONANCONANSat, 12 Jul 2008 11:17:00 GMThttp://www.blogjava.net/conans/articles/214466.html今天发现自己的项目存在一个问题，一些连接需要页面完全load完成之后才能点击，否则报js错，原因是因为有些js文件还没load完成，而这些连接又正好用到这些js，怎么办呢

解决办法2个，第一是在load完成之前把这些按钮全部disabled，再处理onload事件，把他们enable，这样好像比较麻烦

另外一个觉得办法是，在用户点击连接的时候先判断页面是否load完成，如果没有完成，那就什么都不干

判断方法如下

view plaincopy to clipboardprint?
  1. var complete = false;   
  2.   
  3. document.onreadystatechange = function(){   
  4.   
  5.     complete = true;   
  6.   
  7. }  
然后再在连接的onclick事件函数里里加上
view plaincopy to clipboardprint?
  1. <PRE class=jscript name="code">if(complete == false){   
  2.   
  3.     return;   
  4.   
  5. }</PRE>  
view plaincopy to clipboardprint?
  1.    


CONAN 2008-07-12 19:17 发表评论
]]>JavaScript 中的有限状态机，第 1 部分: 设计一个小部件http://www.blogjava.net/conans/articles/214091.htmlCONANCONANThu, 10 Jul 2008 11:34:00 GMThttp://www.blogjava.net/conans/articles/214091.html

有限状态机很早就已用作设计和实现事件驱动的程序（比如网络适配器和编译器）内复杂行为的组织原则。现在，可编程的 Web 浏览器为新一代的应用程序开辟了一种全新的事件驱动环境。基于浏览器的应用程序因 Ajax 而广为流行，而同时也变得更为复杂。程序设计人员和实现人员能够大大受益于有限状态机的原理和结构。本篇文章将向您介绍如何使用有限状态机来为一个简单的 Web 小部件 —— 一个能够淡入和淡出的工具提示 —— 设计复杂的行为。

本系列的第 2 部分将描述如何在 JavaScript 内实现此设计，以及如何充分利用 JavaScript 独特的语言特性，比如关联数组和函数闭包。第 3 部分则会涵盖如何使此实现能够在所有流行的 Web 浏览器中正常工作的内容。最终的代码紧凑简练，逻辑清晰透明，动画效果即使在负载极重的处理器上也能平稳流畅。

多年以来，Web 设计人员一直都通过在流行的 Web 浏览器内采用 JavaScript 解释器的方式来改善其网站的外观。他们的做法大都是将代码的简短片段复制到 HTML 页面中。当前，随着 Ajax 的日益流行，软件工程师也开始使用 JavaScript 来开发能在浏览器内执行的新一代的应用程序。基于浏览器的应用程序的规模不断扩大，这就相应要求采用其他执行环境成长和发展所使用的相同设计模式和开发原理。

基于浏览器的应用程序在实时环境中执行，在这种环境中鼠标、键盘、定时器、网络和程序事件都十分常见。当事件驱动的应用程序的行为取决于事件发生的顺序时，其编程就会变得非常复杂，也十分难以调试和修改。软件工程师早已开始使用 有限状态机 —— 学术领域有时又称其为离散或确定性有限自动机 —— 作为一种组织原理来开发事件驱动的程序了。

有限状态机通过用直观的表格代替复杂的逻辑为设计增加了严密性。从传统意义上讲，有限状态机对开发诸如网络驱动程序和编译器这类程序颇有帮助。有限状态机也同样有助于开发基于浏览器的应用程序。

在本系列中，您将练习开发一个样例有限状态机应用程序，来深入体验 JavaScript 语言的一些独特特性：

  • 函数是一类 对象：与其它对象一样，函数可被创建，可赋给变量，也可作为参数传递。函数可在另一个函数内定义，还可赋给全局变量或作为结果返回。定义这些函数的函数返回之后，这些函数还会一直存在。
  • 函数可以引用词法作用域（包围函数定义的嵌套括号）内的任何变量，例如本地变量（由函数定义）。这些变量是函数闭包 的一部分（该函数、函数自身的变量和该函数所使用的在其词法作用域内定义的所有变量），而且在定义这些变量函数返回后，这些变量依然会存在。
  • 函数可以存储于关联数组 中（关联数组是这样一类数组：它们按名称而不是数值索引）。

 

这些语言特性可以提供一种紧凑而简明的方式来为状态间的事件和转移组织动作，还可以提供一种巧妙的方式来兼容不同的浏览器事件模型。

样例应用程序 FadingTooltip 比内置于大多数浏览器的默认工具提示更为精致。用 FadingTooltip 小部件创建的工具提示使用动画式淡入和淡出代替突然弹出和消失，并可随光标移动。设计此行为所用的有限状态机模式使逻辑清晰透明。实现此行为所用的 JavaScript 语言特性则使源代码紧凑而有效。

本文展示了如何使用有限状态机的图、表表示设计一个动画式小部件的行为。本系列的后续文章会介绍如何在 JavaScript 内实现有限状态机的表表示以及如何处理与在流行的浏览器内进行测试和实现相关的实际问题。

基本的工具提示

当光标暂时停留于一些可视控件 —— 比如按钮、选择器或输入字段 —— 时，时下的许多图形应用程序都能暂时显示包含相应的帮助性定义、操作说明或建议的小文本框。在早期的系统中，这些小文本框被称为 “气球帮助”，在 IBM 的一些产品中，称其为 infopop，在一些 Microsoft 产品中，其名字则是 ScreenTip。在本文，我使用的是其中更为常见的术语工具提示。

现在一些流行的 Web 浏览器，比如 Netscape Navigator、Microsoft Internet Explorer、Opera 和 Mozilla Firefox，会为任何拥有 title 属性的 HTML 元素显示工具提示。例如，清单 1 中显示的这三个拥有 title 属性的 HTML 元素。


清单 1. 浏览器工具提示的 HTML 代码
            Here are some
            <span title='Move your cursor a bit to the right, please.'>
            fields with built-in tooltips
            </span>:
            <input type='text'
            title='Type your bank account and PIN numbers here, please ...'
            size=25>
            <input type='button'
            title='Go ahead. Press it. What's the harm? Trust me.'
            value='Press this button'>

样例页面 展示了浏览器如何呈现具有 title 属性的 HTML 元素。注意当光标在元素上移动时工具提示是如何出现和消失的。文本框包含简单的文本，这些文本无任何格式和样式。文本框会在光标短暂停留时弹出，并会在特定时间过后、鼠标从此 HTML 元素移出或单击了某键的情况下突然消失。浏览器一次只显示一个文本框。工具提示的外观和行为已经硬性设定到浏览器内，无法更改。

更为精致的工具提示

内置的工具提示还有很多可待提高之处，一些流行浏览器的最新版本为构建更为精致的工具提示提供了所需的 “原料”。HTML Division 元素创建了一个可在浏览器窗口的任何地方放置的提示框。通过级联样式表(CSS)，您几乎可以设定框体外观的各个方面。用 JavaScript 编程实现的光标移动可以触发浏览器窗口内任意可视元素的特定动作。您还可以编制一个定时器来控制这些动作的顺序。

在 样例页面 可以找到具有这类工具提示的一些 HTML 元素。如果运行的是流行浏览器的最新版本，您就可以将更为精致的工具提示和内置的工具提示做一对比：
如果使用的是较老的浏览器，您可能无法获得其中的一部分行为。例如，Opera 浏览器版本 9 之前的版本，工具提示是弹入弹出的，而非淡入淡出的，原因是 Opera 在实现 opacity 样式属性方面起步相对较晚。要下载流行的浏览器的当前版本，请参考 参考资料。

  • 这类工具提示是淡入淡出的，而不是突然弹出和突然消失。
  • 这类工具提示包含图像和文本，并经很好的格式化和样式化处理。
  • 可见时，这类工具提示可以随光标移动。
  • 当光标从 HTML 元素移出然后又移回此元素时，淡入淡出会反转方向。
  • 同时可有多个工具提示可视，一些淡出，一些淡入。

 

这些增强的行为和外观不仅有修饰的作用，还可以提高可用性。面对有数十个或数百个元素的繁忙页面，用户很可能会错过即刻弹出的工具提示。人类的视觉系统对运动的物体十分敏感，因而也更容易注意到淡入视野并随鼠标而动的工具提示，即使用户的注意力不在这儿也没关系。对比未格式化过的文本，图像、格式化和样式化能更有效地传递信息。而且，这些更为精致的工具提示的所有参数都是可配置的。

本文后面的内容将着重于介绍如何将 FadingTooltip 小部件设计为一个有限状态机。本系列的后续文章会为您展示如何实现和测试这些代码。如果您急于想知道这些代码，也可以在 参考资料 部分找到到相关 JavaScript 源代码和使用这些代码的一个 HTML Web 页面的链接。


回页首


有限状态机

有限状态机对行为建模，在该模型中，对将来事件的响应取决于先前的事件。此领域已出现了大量学术著作（参见 参考资料），而有限状态机的实用定义却十分简单明了。有限状态机就是包含如下内容的计算机程序：

  • 事件：程序对事件进行响应。
  • 状态：程序在事件间的状态。
  • 转移：对应于事件，状态间的转移。
  • 动作：转移过程中采取动作。
  • 变量：变量保存事件间的动作所需的值。

 

在行为由许多不同类型事件驱动以及对特定事件的响应取决于先前事件发生顺序的情况下，有限状态机最为有用。 驱动有限状态机的事件可以是计算机外部的（由键盘、鼠标、定时器或网络活动发起），也可以是计算机内部的（由本应用程序的其他部分或其他应用程序发起）。

状态是记起先前事件的一种方式，转移则用来组织对将来事件的响应。其中的一个状态必须要被指派为初始状态。结束状态可有可无，FadingTooltip 小部件就没有结束状态。

有限状态机的两种常见表示为：

方向图
气球状的圆圈代表状态，圆圈间的箭头线代表转移，它会被标以事件和动作。

 

二维表
表的行和列代表事件和状态，单元格内包含动作和转移。

上述两种表示是等价的，分别侧重于设计的不同方面。两者都十分有用，我在本文的后面都会用到。

 

用有限状态机开发事件驱动程序比一般的过程式编程要复杂一些；一般来说，需要更多的规则，尤其是更多的设计精力。如果处理得当，有限状态机可以使代码简单、测试迅速、维护轻松。但是，即便如此，有限状态机的复杂性使其并不能适合所有事件驱动的程序的开发。例如，当事件的种类不多或事件触发的动作总是相同时，进行额外的开发可能会得不偿失。


回页首


有限状态机和运行时环境

有限状态机是事件驱动的，需要在它们的运行时环境将其与其相关的事件挂接起来。这可通过事件处理程序 实现，事件处理程序是一些可插入到运行时环境的小的代码片段，一旦特定事件发生，这些处理程序就会执行。事件处理程序执行时，需要获得如下一些基本信息：

  • 已发生事件的类型（例如，光标移动、定时器超时）
  • 事件的上下文（例如，光标位于哪个 HTML 元素之上、完成的是哪个网络请求）
  • 有限状态机自身的变量和方法的位置

 

JavaScript 十分适合于构建事件驱动的有限状态机。事实上，JavaScript 有点太过适合 —— 它有三种挂接事件的方式。每种事件模型 都很直观明了，但程序必须实现所有三种模型以确保它们可以运行于所有流行的浏览器之上。事件的上下文在其中两个事件模型内被直接传递给事件处理程序；对于另外一个模型，JavaScript 函数闭包允许事件的上下文被包裹进其事件处理程序。

JavaScript 提供一种对象模型，对象模型是 Java 和 C++ 程序员所熟知的，它也可用来对有限状态机的变量和方法进行编码。而且，JavaScript 关联数组还允许直接对有限状态机的二维表进行编码。


回页首


系统地设计行为

有限状态机的基本要素是它所响应的事件及事件间的状态。设计必须考虑到每个可能状态的每个可能事件：

  • 在该状态下，此事件是否可能发生
  • 采取什么动作来处理事件
  • 事件过后转移到什么状态
  • 在事件之间需要记录什么变量

 

我以 图 1 所示的一个图形来开始设计的过程，图中气球形圆圈所示的是状态，连接这些圆圈的箭头线代表的是转移。最终获得的是一张表，如 图 4 所示，在该表的标题行和标题列分别列出了事件和状态。表中的一些单元格列出了当特定事件在特定状态发生时所要执行的动作，其它一些则表示在该状态下此事件不能发生。

通常，需要反复执行此设计过程才能获得正确的图和表。对具有多个事件和状态的有限状态机，这个过程可能会十分乏味，每次重复都需要遵守一定的原则来系统地处理表中的每一个单元格。这迫使您不得不考虑在每个可能的情况下您所想要的动作。您可能会发现还可以进一步完善这些行为，也可能会发现所需的状态较预计的要多（或少），甚至会发现您必须重新整理单元格间的这些动作以正确定义每种情况下的行为。

这种设计有限状态机的系统过程虽然有些乏味但却十分值得。图 4 所示的完成后的表给出了此行动的所有逻辑，并可被直接转换为代码（参见 actionTransitionFunctions 源代码）。


回页首


关于 JavaScript

要设计 FadingTooltip 小部件，您需要了解 JavaScript 的一些功能。在严谨设计的原则指导下，我只在这里给出基本的设计思想，而将具体的实现留待本系列后续文章中介绍。

当光标经过页面中的 HTML 元素时，所有流行的浏览器都能将事件传递给 JavaScript 代码。这些事件是 mouseover、mousemove 和 mouseout，分别代表光标已经移至、移上和移出 HTML 元素。浏览器用这些事件传递光标当前位置。当事件发生时，可用 JavaScript 编程动态创建 HTML Division 元素，用文本、图像和标记填充这些元素并将其定位到光标附近。

浏览器并没有原生的淡入和淡出函数，但可以通过改变 Division 元素的透明度（实际上是不透明度，透明度的反义词）来模拟这些函数。

JavaScript 有两类定时器：一次定时器在超时时生成 timeout 事件；重复断续器定期生成 timetick 事件。FadingTooltip 小部件需要这两种定时器。


回页首


设计状态图

首先回顾一下想要从 FadingTooltip 小部件获得的基本行为。当光标从特定的 HTML 元素上移过的时候，您可能想让此小部件等待光标在该元素上暂停。如果可以如此，之后您可能又想让此小部件将工具提示淡入，显示一会后再淡出。

有限状态机将需要响应以下事件：

  • 当光标移至、移上和移出某一 HTML 元素时，浏览器能分别将 mouseover、mousemove 和 mouseout 事件传递给 JavaScript。
  • JavaScript 可以编程实现 timeout 事件来指示光标已停止足够长的一段时间或工具提示已显示了足够长的一段时间，也可以编程实现 timetick 事件来分别增减工具提示淡入和淡出的不透明度。

 

您将需要设计状态机在事件间等待的一些状态。需要调用小部件的初始状态 Inactive，小部件在该状态下等待被 mouseover 事件激活。小部件在 Pause 状态下等待直到 timeout 事件指示光标已经在 HTML 元素上停留了足够长的时间。之后在用 timetick 事件动画式淡入的同时，小部件会在 FadeIn 状态下等待，继而又会在 Display 状态等待另一个 timeout 事件。最后，在用更多 timetick 事件动画式淡出的同时，小部件会在 FadeOut 状态下等待。小部件转回到 Inactive 状态，在此状态下等待另一个 mouseover 事件。

图 1 是此过程相应的图形表示，其中的气球形圆圈代表状态，连接圆圈的箭头线代表转移，箭头线上的标注代表事件。双层边界的圆圈代表初始状态。


图 1. 状态图的初始设计
状态图的初始设计

FadingTooltip 小部件必须针对它处理的每个事件采取动作：

  • 当 mouseover 事件在 Inactive 状态发生时，在转入 Pause 状态等待之前，它必须要开启一个一次定时器。
  • 当 timeout 事件发生时，在转入 FadeIn 状态等待之前，它必须要创建工具提示（初始不透明度值为零）并开启一个重复断续器。
  • 每次发生 timetick 事件，它都要适当增加工具提示的不透明度。当达到工具提示的最大不透明度时，它必须在转入 Display 状态等待之前取消此重复断续器并开启另一个定时器。
  • 当定时器的 timeout 事件发生时，它必须在转入 FadeOut 状态等待之前开启另一个重复断续器。
  • 每次在 FadeOut 状态发生 timetick 事件时，它都必须要适当减少工具提示的不透明度。当工具提示的不透明度减少到零时，小部件会取消此重复断续器，删除工具提示并返回到 Inactive 状态，在该状态等待被另一个 mouseover 事件激活。

 

图 2 在触发这些动作的事件之下列出了这些动作。


图 2. 在初始状态图的事件下追加动作
在初始状态图的事件下追加动作




回页首


将状态图转换成状态表

上述的状态图是设计有限状态机的一个很好的开始。但表形式更适合于完成设计，原因是表可以给出事件和状态的所有组合以供参考。

要将状态图转换成状态表，可以在行标题内填上事件名，在列标题内填上状态名。这些名字的顺序是任意的；我在第一行的开始位置放入了初始状态，在第一列的开始位置放入了初始事件，随后将动作和每一事件的下一状态复制到表中适当的单元格内，如 图 3 所示。


图 3. 与初始状态图对应的初始状态表
与初始状态图对应的初始状态表




回页首


完成状态表

要完成有限状态机的设计，需要顾及表中的每一个空单元格。您需要为每个单元格做这样的考虑：该事件是否可以发生在该状态，如果可以，小部件在这种情况下将采取什么动作，下一个状态又将是什么。这虽然有些乏味，但却是设计过程的必需部分。

考虑单元格的顺序先后关系不大。通常在设计过程中需要多次重复此步骤，反复考虑每个单元格，不时地修改其内容，而且每次的考虑顺序都会有所不同。另外随着设计的不断深入，添加（或删除）状态、做进一步的修改也十分常见。在这里，我将跳过这些反复过程，着重总结如何通过依次查看每个状态和事件来获得最终的结果表。

Inactive 状态
在这种状态下，只有初始状态可以发生，原因是 mousemove 和 mouseout 事件应该继 mouseover 事件之后发生，而且没有任何定时器在运行。所以应将此列的所有其他单元格标记为“不应发生”。

在继续之前，还应注意一下此状态的 mouseover 事件。当为此工具提示创建 HTML Division 元素时，需要将它定位于光标的附近，所以要保存光标的当前位置，当前位置由浏览器与此事件一同传递。而且在开始新的定时器之前，最好能够取消任何运行着的定时器。在 mouseover 对应的单元格内添加上述动作。

Pause 状态

在等待定时器超时时，光标可能会在 HTML 元素内移动或从此 HTML 元素移出。需要决定一旦发生这些事件所应采取的动作以及下一个状态是什么。如果在此状态发生 mouseout 事件，FadingTooltip 小部件应能返回 Inactive 状态，就像光标从未经过 HTML 元素一样，而且还必须取消定时器。在 mouseout 对应的单元格记录这些动作和转移。

另一方面，对于 mousemove 事件，则需要小部件能够继续等待光标悬停，这又要求取消和重新开启定时器。因为想要让工具提示出现在光标的附近，所以需要更新所保存的光标位置。Pause 状态下的 mousemove 事件的动作和转移与 Inactive 状态下的 mousemove 事件的动作和转移相同。所以无需重复两个单元格的内容，在 mousemove 对应的单元格内放上同样的内容即可。将此列的所有其他单元格标记为“不应发生”。

FadeIn 状态
在这种状态下，在用 timetick 事件处理淡入时，光标可以继续到处移动。如果发生 mousemove 事件，需相应移动工具提示并保持当前的状态不变。如果发生 mouseout 事件，转移到 FadeOut 状态，重复断续器仍会运行以便后续的 timetick 事件会在当前值的基础之上减少工具提示的不透明度。在适当的单元格内记录这些动作和转移并将此列的所有其他单元格标记为“不应发生”。

 

Display 状态
光标仍可以到处移动。如果光标在 HTML 元素之内移动，采取与 FadeIn 状态相同的动作 —— 相应移动工具提示。如果光标从 HTML 元素移出，就采取与 Display 状态下的 timeout 事件相同的状态和转移。在 mousemove 和 mouseout 对应的单元格直接放上相同的内容并将此列的所有其他单元格标记为“不应发生”；

 

FadeOut 状态
在这种状态下，在用 timetick 事件处理淡出时，光标仍可继续到处移动。如果光标在 HTML 元素之内移动，采取与 FadeIn 和 Display 状态相同的动作。如果光标从 HTML 元素移出，不需要做任何事情 —— 重复断续器会继续运行以便后续的 timetick 事件会在当前值的基础之上减少工具提示的不透明度直到其值为零。

不要将此单元格标记为“不应发生”，而是应该标示为无需任何动作。如果光标又再次回到该 HTML 元素，将工具提示移回光标并返回 FadeIn 状态。

图 4 显示了所有这些动作和转移。剩下的空白单元格应标记为“不应发生”。


图 4. FadingTooltip 小部件设计后的状态表
FadingTooltip 小部件设计后的状态表

有限状态机的状态表总是能转换回状态图，因为二者是等价的。图 5 显示了完整的状态表对应的状态图。


图 5. FadingTooltip 小部件设计后的状态图
FadingTooltip 小部件设计后的状态图




回页首


收集状态变量

完成状态表和状态图之后，很有必要对它再进行一次回顾来收集状态机在两事件间需要记录的变量以便状态机能够执行不同的单元格内的相应动作。有限状态机需要 清单 2 中所示的状态变量。


清单 2.初始的状态变量列表
            currentState         string value equal to one of the state names
            currentTimer         pointer to timer object, obtained when set, used to cancel
            currentTicker        pointer to ticker object, obtained when started, used to cancel
            currentOpacity       float that varies from 0.0 (invisible) to 1.0 (fully visible)
            lastCursorPosition   floats obtained from cursor events, used when an HTML Division
            element is created
            tooltipDivision      pointer to HTML Division element, set when created, used when
            faded, moved, or deleted

虽然 JavaScript 变量本身不区分类型，但变量所包含的值是区分类型的（这就是说，任何类型的值都可以赋给变量）。根据这一原则，我列出了状态变量名并在注释部分给出了希望赋给这些变量的值的类型。

下载

CONAN 2008-07-10 19:34 发表评论
]]>JavaScript导出Word后对Word分页的处理 http://www.blogjava.net/conans/articles/213751.htmlCONANCONANWed, 09 Jul 2008 11:07:00 GMThttp://www.blogjava.net/conans/articles/213751.html需求是这样的,导出html指定元素内容为word,并按指定关键字分页.
网上找了半天只有保存为word的方法.在csdn上向专家提了问,没人回啊555.
蹒跚学步开始了.
对于分页,自己用vba录制了
命令,然后用JavaScript调试出来的.

直接看代码:
<html>
    <HEAD>
        <title>WEB页面导出为Word文档后分页的方法 </title>
    </HEAD>
    <SCRIPT LANGUAGE="javascript">
                /*
                 * 
                 * @param {Object} cont  要导出的html元素内容的id,注意不要加双引号
                 * @param {Object} key   分页关键字
                 */
                function AllAreaWord(cont,key)
                {
                    var oWD = new ActiveXObject("Word.Application");
                    //默认为页面视图
                    var oDC = oWD.Documents.Add("", 0, 0);
                    var oRange = oDC.Range(0, 1);
                    //var oRange1 = oDC.Range(0,2);
                    var sel = document.body.createTextRange();
                    //参数为html元素id 
                    sel.moveToElementText(cont);
                    sel.select();
                    sel.execCommand("Copy");
                    oRange.Paste();
                    oWD.Application.Visible = true;
                    //得到打开后word的selection对象
                    var selection = oWD.Selection;
                    //设置字体大小
                    selection.Font.Size = 10;
                    //ctrl+A 全选操作
                    selection.WholeStory();
                    //清除格式
                    selection.Find.ClearFormatting();
                    //指定查找关键字
                    selection.Find.Text = key;
                    //^m为手动分页符标记
                    //向下查找
                    selection.Find.Forward = true;
                    selection.Find.Wrap = 1;
                    //不区分大小写
                    selection.Find.MatchCase = false;
                    //不匹配整个单词
                    selection.Find.MatchWholeWord = false;
                    //如果找到指定字符串返回真,否则返回false
                    while (selection.Find.Execute()) 
                    {
                        //插入分页符,分页符常量为7,具体可查word api
                        selection.InsertBreak(7);
                    }
                }
    </SCRIPT>
    <body>
        <BR>
        <div id="test">
            aaa
            ^
            bbb
            ^
            ccc
        </div>
        <input type="button" onclick="javascript:AllAreaWord(test,'^');" value="导出页面指定区域内容到Word"/>
    </body>
</html>


CONAN 2008-07-09 19:07 发表评论
]]>悟透JavaScript (转帖[绝对经典])http://www.blogjava.net/conans/articles/210930.htmlCONANCONANThu, 26 Jun 2008 11:52:00 GMThttp://www.blogjava.net/conans/articles/210930.html阅读全文

CONAN 2008-06-26 19:52 发表评论
]]>javaScript常用技巧续（二） http://www.blogjava.net/conans/articles/210577.htmlCONANCONANWed, 25 Jun 2008 07:51:00 GMThttp://www.blogjava.net/conans/articles/210577.html26.如何设定打开页面的大小
<body onload="top.resizeTo(300,200);">
打开页面的位置<body onload="top.moveBy(300,200);">


27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
<STYLE>
body
{background-image:url(/logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>


28. 检查一段字符串是否全由数字组成
<script language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>


29. 获得一个窗口的大小
document.body.clientWidth; document.body.clientHeight


30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");


31.TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 onpropertychange
="this.style.posHeight=this.scrollHeight">
</textarea>


32. 日期减去天数等于第二个日期
<script language=Javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>


33. 选择了哪一个Radio
<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then
window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="/style" checked>Style
<INPUT name="radio1" type="radio" value="/blog/barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>


34.脚本永不出错
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// -->
</SCRIPT>


35.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">

CONAN 2008-06-25 15:51 发表评论
]]>javaScript常用技巧续（一） http://www.blogjava.net/conans/articles/210576.htmlCONANCONANWed, 25 Jun 2008 07:50:00 GMThttp://www.blogjava.net/conans/articles/210576.html <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="/Close"></OBJECT>
<input type=button value="/最小化 onclick=hh1.Click()>
<input type=button value="/blog/最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE


17.屏蔽功能键Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift键!"); //可以换成ALT　CTRL
}
document.onkeydown=look;
</script>


18. 网页不会被缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META HTTP-EQUIV="expires" CONTENT="0">


19.怎样让表单没有凹凸感？
<input type=text"border:1 solid #000000">
或
<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000"></textarea>


20.<div><span>&<layer>的区别？
<div>(division)用来定义大段的页面元素，会产生转行
<span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行
<layer>是ns的标记，ie不支持，相当于<div>


21.让弹出窗口总是在最上面:
<body onblur="this.focus();">


22.不要滚动条?
让竖条没有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
让横条没有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
两个都去掉？更简单了
<body scroll="no">
</body>


23.怎样去掉图片链接点击后，图片周围的虚线？
<a href="#" onFocus="this.blur()"><img src="/logo.jpg" border=0></a>


24.电子邮件处理提交表单
<form name="form1" method="post" action=mailto:****@***.com
enctype="text/plain">
<input type=submit>
</form>


25.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()

CONAN 2008-06-25 15:50 发表评论
]]>javaScript常用技巧 http://www.blogjava.net/conans/articles/210575.htmlCONANCONANWed, 25 Jun 2008 07:48:00 GMThttp://www.blogjava.net/conans/articles/210575.html1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标


7. <input style="ime-mode:disabled"> 关闭输入法


8. 永远都会带着框架
<script language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --></script>


9. 防止被人frame
<SCRIPT LANGUAGE=JAVASCRIPT><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>


10. 网页将不能被另存为
<noscript><*** src="/*.html>";</***></noscript>


11. <input type=button value="/查看网页源代码
onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">
12.删除时确认
<a href=""javascript :if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>


13. 取得控件的绝对位置
//Javascript
<script language="Javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>
//VBScript
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
end function
--></script>


14. 光标是停在文本框文字的最后
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart("character",e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">


15. 判断上一页的来源
javascript :
document.referrer

CONAN 2008-06-25 15:48 发表评论
]]>注意! JavaScript中的"陷阱"http://www.blogjava.net/conans/articles/209885.htmlCONANCONANSun, 22 Jun 2008 10:58:00 GMThttp://www.blogjava.net/conans/articles/209885.html 

以下是JavaScript容易犯错的几个"陷阱".由本人google+体验+搜集而来.虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些.

1.　最后一个逗号

如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语义不详，你只能用人眼从几千行代码中扫描。

Js代码 复制代码
  1. <script>   
  2.   var theObj = {   
  3.         city : "ShenZhen",   
  4.         state : "ok",   
  5.   }   
  6. </script>   



2.　this的引用会改变

如这段代码：

Js代码 复制代码
  1. <input type="button" value="Gotcha!" id="MyButton" >   
  2. <script>   
  3. var MyObject = function () {   
  4.     this.alertMessage = "Javascript rules";   
  5.     this.ClickHandler = function() {   
  6.         alert(this.alertMessage );  //行1   
  7.   }   
  8. }();   
  9. document.getElementById("theText").onclick =  MyObject.ClickHandler;   
  10. </script>  


并不如你所愿，答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时，在行1中，this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决：
Js代码 复制代码
  1. <input type="button" value="Gotcha!" id="theText" >   
  2. <script>   
  3. var MyObject = function () {   
  4.     var self = this;   
  5.     this.alertMessage = “Javascript rules”;   
  6.     this.OnClick = function() {   
  7.         alert(self.value);   
  8.     }   
  9. }();   
  10. document.getElementById(”theText”).onclick =  MyObject.OnClick   
  11. </script>  

实质上，这就是JavaScript作用域的问题。如果你看过，你会发现解决方案不止一种。

3.　标识盗贼

在JavaScript中不要直接使用跟HTML的id一样的变量名。如下代码：

Js代码 复制代码
  1. <input type="button" id="TheButton">   
  2. <script>   
  3.     TheButton = document.getElementById("TheButton");   
  4. </script>  


IE会报对象未定义的错误。我只能说：IE 真烂.
若在TheButton之前加上var 声明,或者将TheButton改为其它名称,则不会报错.如:
Js代码 复制代码
  1. <input type="button" id="TheButton">   
  2. <script>   
  3.     var TheButton = document.getElementById("TheButton");   
  4.     //或   
  5.      TestButton = document.getElementById("TheButton");   
  6. </script>  



4.　字符串只替换第一个匹配

如下代码：

Js代码 复制代码
  1. <script>   
  2.     var fileName = "This is a title";   
  3.     fileName=fileName.replace(" ","_");   
  4. </script>  


而实际上，fileName结果是"This_is a title". 在JavaScript中，String.replace的第一个参数应该是正则表达式。所以，正确的做法是这样：

Js代码 复制代码
  1. var fileName = "This is a title".replace(/ /g,"_");  


5.　mouseout意味着mousein

事实上，这是由于事件冒泡导致的。IE中有mouseenter和mouseleave，但不是标准的。作者在此建议大家使用js库来解决问题。

6.　parseInt是基于进制体系的

这个是常识，可是很多人给忽略了parseInt还有第二个参数，用以指明进制。比如，parseInt("09")，如果你认为答案是9，那就错了。因为，在此，字符串以0开头，parseInt以八进制来处理它，在八进制中，09是非法，返回false，布尔值false转化成数值就是0. 因此，正确的做法是
Js代码 复制代码
  1. parseInt("09", 10).   


7.　for...in...会遍历所有的东西

有一段这样的代码：
Js代码 复制代码
  1. var arr = [5,10,15]   
  2. var total = 1;   
  3. for ( var x in arr) {   
  4.     total = total * arr[x];   
  5. }  

运行得好好的，不是吗？但是有一天它不干了，给我返回的值变成了NaN, 晕。我只不过引入了一个库而已啊。原来是这个库改写了Array的prototype，这样，我们的arr平白无过多出了一个属性（方法），而for...in...会把它给遍历出来。
其实,就算没有引进库.它的结果也并不是数组所有元素的乘积,因为for...in...会遍历到数组的length属性.
所以这样做才是比较安全的：

Js代码 复制代码
  1. for ( var x = 0; x < arr.length; x++) {   
  2.     total = total * arr[x];   
  3. }  


其实，这也是污染基本类的prototype会带来危害的一个例证。

8.　事件处理器的陷阱

这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码，这会复写掉之前的window.onclick事件，还可能导致IE的内容泄露（sucks again）。在IE还没有支持DOM 2的事件注册之前，作者建议使用库来解决问题，比如使用YUI:

YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);

这应该也属于常识问题，但新手可能容易犯错。

9.　focus() 出错

新建一个input文本元素，然后把焦点挪到它上面，按理说，这样的代码应该很自然：
Js代码 复制代码
  1. var newInput = document.createElement("input");   
  2. document.body.appendChild(newInput);   
  3. newInput.focus();   
  4. newInput.select();  

但是IE会报错。这是因为当你执行fouce()的时候，元素尚未可用。因此，我们可以延迟执行：

Js代码 复制代码
  1. var newInput = document.createElement("input");   
  2. newInput.id = "TheNewInput";   
  3. document.body.appendChild(newInput);   
  4. //在0.01秒之后调用匿名函数获取焦点   
  5. setTimeout(function(){   
  6.              document.getElementById('TheNewInput').focus();   
  7.            document.getElementById('TheNewInput').select();}, 10);  
更详细的资料参见:http://realazy.org/blog/category/javascript-dom/


10.document.write()完全替换之前页面内容
有这样一段代码:
Js代码 复制代码
  1. <h3>开始</h3>    
  2. <script type="text/jscript">   
  3. function init() {    
  4. document.write("现在时间是:" + Date() );   
  5. }   
  6. window.onload = init;   
  7. </script>   
  8. <h3>结束</h3>  


上面代码块中的"开始"和"结束"两块不会输出.
当onload事件结束之后,如果再一次调用document.write()方法写进一段HTML,这段HTML会完全替换掉之前页面的内容.整个页面的源代码就变为了document.write()所写的内容.把上面的改为:
Js代码 复制代码
  1. <h3>开始</h3>    
  2. <script type="text/jscript">   
  3. function init() {    
  4. document.write("现在时间是:" + new Date() );   
  5. }   
  6. init()   
  7. </script>   
  8. <h3>结束</h3>  

"开始"和"结束"就会正常输出.

11.注意你name的值.

有这样一段代码:
Js代码 复制代码
  1. <form name="myForm" action="aa.htm">   
  2. <input type="text" name="action" />   
  3. </form>   
  4. <script>   
  5. //获取form的id   
  6. alert(document.forms[0].action);   
  7. </script>  

可输出结果不是我们想要的"aa.htm",而是一个"[object]"字符串.因为它得到的是myForm中的name为"action"的input标签的值.更详细的内容请参考[url]https://bugzilla.mozilla.org/show_bug.cgi?id=322488
[/url]


12.后台数据传输不会影响到前台

也许你会说这是一非常低级的错误.但我还是想说下:
页面login.htm代码
Js代码 复制代码
  1. ...   
  2. xmlHttp.open("GET","check.htm",false);   
  3. xmlHttp.send();   
  4. alert(xmlHttp.responseText);   
  5. ...  

页面check.htm代码
Js代码 复制代码
  1. ...   
  2. window.onload=checkLogin;   
  3. function checkLogin(){   
  4.     ...   
  5.     //如果验证失败,弹出错误   
  6.      alert("登录失败");   
  7.     ...   
  8. }   
  9. ...  

很多人习惯用这种方法来进行登录失败的提示.但是要注意:xmlHttp发送数据的时候是进行的后台发送,它所关心的,仅仅是send之后,得到所请求URL的响应.而check.htm页面所执行的一切,都是只在后台完成.不管它怎么跳转,或者alert(),或者close().都不会在界面中有任何显示.

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

在实践中，JavaScript的陷阱还有很多很多，大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现，只能靠开发者之间的经验分享。希望大家有更好的分享。
如发现其它的"陷阱",我会继续增加内容.谢谢关注.


CONAN 2008-06-22 18:58 发表评论
]]>js中replace方法的高级替换http://www.blogjava.net/conans/articles/209620.htmlCONANCONANFri, 20 Jun 2008 15:27:00 GMThttp://www.blogjava.net/conans/articles/209620.html阅读全文

CONAN 2008-06-20 23:27 发表评论
]]>