??xml version="1.0" encoding="utf-8" standalone="yes"?>亚洲一区二区三区无码影院,亚洲av无码国产精品夜色午夜,精品亚洲永久免费精品http://m.tkk7.com/conans/category/32364.html你越挣扎我就兴?/description>zh-cnMon, 28 Nov 2011 19:18:28 GMTMon, 28 Nov 2011 19:18:28 GMT60js获取|页高度http://m.tkk7.com/conans/articles/364566.htmlCONANCONANTue, 22 Nov 2011 07:01:00 GMThttp://m.tkk7.com/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)Q?+ document.body.scrollTop;
s += " |页被卷ȝ?ie)Q?+ document.documentElement.scrollTop;
s += " |页被卷ȝ左:"+ document.body.scrollLeft;
s += " |页正文部分上:"+ window.screenTop;
s += " |页正文部分左:"+ window.screenLeft;
s += " 屏幕分L率的高:"+ window.screen.height;
s += " 屏幕分L率的宽:"+ window.screen.width;
s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
s += " 你的屏幕讄?"+ window.screen.colorDepth +" 位彩?;
s += " 你的屏幕讄 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地试当中Q?
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
卛_获得Q很单,很方ѝ?
而在公司目当中Q?
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">
如果在页面中dq行标记的话

在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 ==> 面对象宽度Q即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 面对象高度Q即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,?
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 面对象宽度Q即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 面对象高度Q即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 面对象宽度Q即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 面对象高度Q即BODY对象高度加上Margin高)
真是一仉烦事情,其实开发来看,宁可一些对象和ҎQ不使用最新的标准要方便许多啊?br />


有时候需要取面的底? ׃用到document.body.clientHeight , 在HTML 标准?q一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 面最大化? q个高度Uؓ720 , 即ə面上只有一?#8221;hello world” , 也仍然取?20.

可是在XHTML? 如果body 体中只有一? 则document.body.clientHeight 只能取到那一行的高度, U?0px, q时如何q想取到整个面的高? p用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控制台详?/title><link>http://m.tkk7.com/conans/articles/347393.html</link><dc:creator>CONAN</dc:creator><author>CONAN</author><pubDate>Thu, 31 Mar 2011 07:18:00 GMT</pubDate><guid>http://m.tkk7.com/conans/articles/347393.html</guid><description><![CDATA[<div> <p><a target="_blank" >Firebug</a>是网开发的利器Q能够极大地提升工作效率?/p> </div> <p>但是Q它不太Ҏ上手。我曄译q一?a target="_blank" >《Firebug入门指南?/a>Q介l了一些基本用法。今天,l箋介绍它的高用法?/p> <p>===================================</p> <p><strong>Firebug控制台详?/strong></p> <p>作者:阮一?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032616.png" alt="" /></p> <p><br /> 控制収ͼConsoleQ是Firebug的第一个面板,也是最重要的面板,主要作用是显C网加载过E中产生各类信息?/p> <p><strong>一、显CZ息的命o</strong></p> <p>Firebug内置一个console对象Q提?U方法,用来昄信息?/p> <p>最单的Ҏ是console.log()Q可以用来取代alert()或document.write()。比如,在网脚本中使用console.log("Hello World")Q加载时控制台就会自动显C如下内宏V?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032601.png" alt="" /></p> <p>另外Q根据信息的不同性质Qconsole对象q有4U显CZ息的ҎQ分别是一般信息console.info()、除错信息console.debug()、警告提Cconsole.warn()、错误提Cconsole.error()?/p> <p>比如Q在|页脚本中插入下面四行:</p> <blockquote> <p>  console.info("q是info");</p> <p>  console.debug("q是debug");</p> <p>  console.warn("q是warn");</p> <p>  console.error("q是error");</p> </blockquote> <p>加蝲Ӟ控制C昄如下内容?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032602.png" alt="" /></p> <p>可以看到Q不同性质的信息前面有不同的图标,q且每条信息后面都有链接Q点d跌{到网|码的相应行?/p> <p><strong>二、占位符</strong></p> <p>console对象的上?U方法,都可以用printf风格的占位符。不q,占位W的U类比较,只支持字W(%sQ、整敎ͼ%d?iQ、QҎQ?fQ和对象Q?oQ四U?/p> <p>比如Q?/p> <blockquote> <p>  console.log("%dq?d?d?,2011,3,26);</p> <p>  console.log("圆周率是%f",3.1415926);</p> </blockquote> <p><img src="http://image.beekka.com/blog/201103/bg2011032603.png" alt="" /></p> <p>%o占位W,可以用来查看一个对象内部情c比如,有这样一个对象:</p> <blockquote> <p>  var dog = {} ;</p> <p>  dog.name = "大毛" ;</p> <p>  dog.color = "黄色";</p> </blockquote> <p>然后Q对它用o%占位W?/p> <blockquote> <p>  console.log("%o",dog);</p> </blockquote> <p><img src="http://image.beekka.com/blog/201103/bg2011032604.png" alt="" /></p> <p><strong>三、分l显C?/strong></p> <p>如果信息太多Q可以分l显C,用到的方法是console.group()和console.groupEnd()?/p> <blockquote> <p>  console.group("W一l信?);</p> <p>    console.log("W一l第一?);</p> <p>    console.log("W一l第二条");</p> <p>  console.groupEnd();</p> <p>  console.group("W二l信?);</p> <p>    console.log("W二l第一?);</p> <p>    console.log("W二l第二条");</p> <p>  console.groupEnd();</p> </blockquote> <p><img src="http://image.beekka.com/blog/201103/bg2011032605.png" alt="" /></p> <p>点击l标题,该组信息会折叠或展开?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032606.png" alt="" /></p> <p><strong>四、console.dir()</strong></p> <p>console.dir()可以昄一个对象所有的属性和Ҏ?/p> <p>比如Q现在ؓW二节的dog对象Q添加一个bark()Ҏ?/p> <blockquote> <p>  dog.bark = function(){alert("汪汪?);};</p> </blockquote> <p>然后Q显C对象的内容,</p> <blockquote> <p>  console.dir(dog);</p> </blockquote> <p><img src="http://image.beekka.com/blog/201103/bg2011032607.png" alt="" /></p> <p><strong>五、console.dirxml()</strong></p> <p>console.dirxml()用来昄|页的某个节点(nodeQ所包含的html/xml代码?/p> <p>比如Q先获取一个表D点,</p> <blockquote> <p>  var table = document.getElementById("table1");</p> </blockquote> <p>然后Q显C节点包含的代码?/p> <blockquote> <p>  console.dirxml(table);</p> </blockquote> <p><img src="http://image.beekka.com/blog/201103/bg2011032608.png" alt="" /></p> <p><strong>六、console.assert()</strong></p> <p>console.assert()用来判断一个表辑ּ或变量是否ؓ真。如果结果ؓ否,则在控制台输Z条相应信息,q且抛出一个异常?/p> <p>比如Q下面两个判断的l果都ؓ否?/p> <blockquote> <p>  var result = 0;</p> <p>  console.assert( result );</p> <p>  var year = 2000;</p> <p>  console.assert(year == 2011 );</p> </blockquote> <p><img src="http://image.beekka.com/blog/201103/bg2011032609.png" alt="" /></p> <p><strong>七、console.trace()</strong></p> <p>console.trace()用来q踪函数的调用轨qV?/p> <p>比如Q有一个加法器函数?/p> <blockquote> <p>  function add(a,b){</p> <p>    return a+b;</p> <p>  }</p> </blockquote> <p>我想知道q个函数是如何被调用的,在其中加入console.trace()Ҏ可以了?/p> <blockquote> <p>  function add(a,b){</p> <p>    console.trace();</p> <p>    return a+b;</p> <p>  }</p> </blockquote> <p>假定q个函数的调用代码如下:</p> <blockquote> <p>  var x = add3(1,1);</p> <p>  function add3(a,b){return add2(a,b);}</p> <p>  function add2(a,b){return add1(a,b);}</p> <p>  function add1(a,b){return add(a,b);}</p> </blockquote> <p>q行后,会显Cadd()的调用轨q,从上C依次为add()、add1()、add2()、add3()?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032610.png" alt="" /></p> <p><strong>八、计时功?/strong></p> <p>console.time()和console.timeEnd()Q用来显CZ码的q行旉?/p> <blockquote> <p>  console.time("计时器一");</p> <p>  for(var i=0;i<1000;i++){</p> <p>    for(var j=0;j<1000;j++){}</p> <p>  }</p> <p>  console.timeEnd("计时器一");</p> </blockquote> <p><img src="http://image.beekka.com/blog/201103/bg2011032611.png" alt="" /></p> <p><strong>九、性能分析</strong></p> <p>性能分析QProfilerQ就是分析程序各个部分的q行旉Q找出瓶颈所在,使用的方法是console.profile()?/p> <p>假定有一个函数Foo()Q里面调用了另外两个函数funcA()和funcB()Q其中funcA()调用10ơ,funcB()调用1ơ?/p> <blockquote> <p>  function Foo(){</p> <p>    for(var i=0;i<10;i++){funcA(1000);}</p> <p>    funcB(10000);</p> <p>  }</p> <p>  function funcA(count){</p> <p>    for(var i=0;i<count;i++){}</p> <p>  }</p> <p>  function funcB(count){</p> <p>    for(var i=0;i<count;i++){}</p> <p>  }</p> </blockquote> <p>然后Q就可以分析Foo()的运行性能了?/p> <blockquote> <p>  console.profile('性能分析器一');</p> <p>  Foo();</p> <p>  console.profileEnd();</p> </blockquote> <p>控制C昄一张性能分析表,如下图?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032612.png" alt="" /></p> <p>标题栏提C,一p行了12个函敎ͼp时2.656毫秒。其中funcA()q行10ơ,耗时1.391毫秒Q最短运行时?.123毫秒Q最?.284毫秒Q^?.139毫秒QfuncB()q行1ơ,耗时1.229ms毫秒?/p> <p>除了使用console.profile()ҎQfirebugq提供了一?概况"QProfilerQ按钮。第一ơ点击该按钮Q?性能分析" 开始,你可以对|页q行某种操作Q比如ajax操作Q,然后W二ơ点击该按钮Q?性能分析"l束Q该操作引发的所有运就会进行性能分析?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032613.png" alt="" /></p> <p><strong>十、属性菜?/strong></p> <p>控制台面板的名称后面Q有一个倒三角,点击后会昄属性菜单?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032614.png" alt="" /></p> <p>默认情况下,控制台只昄Javascript错误。如果选中Javascript警告、CSS错误、XML错误都送上Q则相关的提CZ息都会显C?/p> <p>q里比较有用的是"昄XMLHttpRequests"Q也是昄ajaxh。选中以后Q网늚所有ajaxhQ都会在控制台面板显C出来?/p> <p>比如Q点M?a target="_blank" >YUICZ</a>Q控制台׃告诉我们Q它用ajax方式发出了一个GEThQhttph和响应的头信息和内容MQ也都可以看到?/p> <p><img src="http://image.beekka.com/blog/201103/bg2011032615.png" alt="" /></p> <p><strong>[参考文献]</strong></p> <p>* <a target="_blank" >Firebug Tutorial - Logging, Profiling and CommandLine (Part I)</a></p> <p>* <a target="_blank" >Firebug Tutorial - Logging, Profiling and CommandLine (Part II)</a></p> Q完Q? <img src ="http://m.tkk7.com/conans/aggbug/347393.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://m.tkk7.com/conans/" target="_blank">CONAN</a> 2011-03-31 15:18 <a href="http://m.tkk7.com/conans/articles/347393.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>利用"事g上提" 来简化事件注?防止潜在的内存泄?http://m.tkk7.com/conans/articles/217041.htmlCONANCONANWed, 23 Jul 2008 15:03:00 GMThttp://m.tkk7.com/conans/articles/217041.html
通常的解x案是, 自行实现一?d事g, U除事g 以及删除dom元素的机?
为dom元素d事g? 同时记录 q个事g 以及对应的函?
在删除dom元素? 先移除dom元素上已l添加的事g 再删除dom元素本n.

而当面中添加了事g监听的dom元素很多? U除元素变得很麻?
例如 一个div 里面有个form form里有多个元素都添加了事g.
那么U除q个div? p先去U除他下面每一个元素上的事?然后再移除这个div.

q种做法很多时候是必须? 而且自己写一?深度遍历子节?q移除其事g"的函Cq不是很困难.

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


见下面的例子 :

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" 可以q样?

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. }  



当然 q种做法不是l对? 有时候这么做很可能让代码变得臃肿冗长.
到底是否使用"事g上提"的做?要根据实际情冉|选择.
不过 Ҏ我的以往l验, 在列?table)? 使用q种技术非常合?
因ؓ 列表有着"行与行之间模型一?(只是数据不一?l构一?的特?

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

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

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

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

解决办法2个,W一是在load完成之前把这些按钮全部disabledQ再处理onload事gQ把他们enableQ这样好像比较麻?/p>

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

判断Ҏ如下

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


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

有限状态机很早已用作设计和实C仉动的E序Q比如网l适配器和~译器)内复杂行为的l织原则。现在,可编E的 Web 览器ؓC代的应用E序开辟了一U全新的事g驱动环境。基于浏览器的应用程序因 Ajax 而广为流行,而同时也变得更ؓ复杂。程序设计h员和实现人员能够大大受益于有限状态机的原理和l构。本文章将向您介绍如何使用有限状态机来ؓ一个简单的 Web 部?—?一个能够E入和淡出的工hC?—?设计复杂的行为?/p>

本系列的W?2 部分描q如何在 JavaScript 内实现此设计Q以及如何充分利?JavaScript 独特的语aҎ,比如兌数组和函数闭包。第 3 部分则会늛如何使此实现能够在所有流行的 Web 览器中正常工作的内宏V最l的代码紧凑l,逻辑清晰透明Q动L果即使在负蝲极重的处理器上也能^Ex畅?/p>

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

Z览器的应用E序在实时环境中执行Q在q种环境中鼠标、键盘、定时器、网l和E序事g都十分常见。当事g驱动的应用程序的行ؓ取决于事件发生的序Ӟ其编E就会变得非常复杂,也十分难以调试和修改。Y件工E师早已开始?有限状态机 —?学术领域有时又称其ؓL或确定性有限自动机 —?作ؓ一U组l原理来开发事仉动的E序了?/p>

有限状态机通过用直观的表格代替复杂的逻辑计增加了严密性。从传统意义上讲Q有限状态机对开发诸如网l驱动程序和~译器这cȝ序颇有帮助。有限状态机也同h助于开发基于浏览器的应用程序?/p>

在本pd中,您将l习开发一个样例有限状态机应用E序Q来深入体验 JavaScript 语言的一些独特特性:

  • 函数?em>一c?/em> 对象Q与其它对象一P函数可被创徏Q可赋给变量Q也可作为参C递。函数可在另一个函数内定义Q还可赋l全局变量或作为结果返回。定义这些函数的函数q回之后Q这些函数还会一直存在?
  • 函数可以引用词法作用?/em>Q包围函数定义的嵌套括号Q内的Q何变量,例如本地变量Q由函数定义Q。这些变量是函数闭包 的一部分Q该函数、函数自w的变量和该函数所使用的在其词法作用域内定义的所有变量)Q而且在定义这些变量函数返回后Q这些变量依然会存在?
  • 函数可以存储?em>兌数组 中(兌数组是这样一cLl:它们按名U而不是数值烦引)?

 

q些语言Ҏ可以提供一U紧凑而简明的方式来ؓ状态间的事件和转移l织动作Q还可以提供一Uy妙的方式来兼容不同的览器事件模型?/p>

样例应用E序 FadingTooltip 比内|于大多数浏览器的默认工hC更为精致。用 FadingTooltip 部件创建的工具提示使用动画式E入和淡出代替H然弹出和消失,q可随光标移动。设计此行ؓ所用的有限状态机模式佉K辑清晰透明。实现此行ؓ所用的 JavaScript 语言Ҏ则使源代码紧凑而有效?/p>

本文展示了如何用有限状态机的图、表表示设计一个动d部件的行ؓ。本pd的后l文章会介绍如何?JavaScript 内实现有限状态机的表表示以及如何处理与在行的浏览器内进行测试和实现相关的实际问题?/p>

基本的工hC?/span>

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

现在一些流行的 Web 览器,比如 Netscape Navigator、Microsoft Internet Explorer、Opera ?Mozilla FirefoxQ会ZQ何拥?title 属性的 HTML 元素昄工具提示。例如,清单 1 中显C的q三个拥?title 属性的 HTML 元素?/p>


清单 1. 览器工hC的 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'>
            

样例面 展示了浏览器如何呈现h title 属性的 HTML 元素。注意当光标在元素上Ud时工hC是如何出现和消q。文本框包含单的文本Q这些文本无M格式和样式。文本框会在光标短暂停留时弹出,q会在特定时间过后、鼠标从?HTML 元素Ud或单M某键的情况下H然消失。浏览器一ơ只昄一个文本框。工hC的外观和行为已l硬性设定到览器内Q无法更攏V?/p>

更ؓ_致的工hC?/span>

内置的工hC有很多可待提高之处,一些流行浏览器的最新版本ؓ构徏更ؓ_致的工hC提供了所需?“原料”。HTML Division 元素创徏了一个可在浏览器H口的Q何地Ҏ|的提示框。通过U联样式?CSS)Q您几乎可以讑֮框体外观的各个方面。用 JavaScript ~程实现的光标移动可以触发浏览器H口内Q意可视元素的特定动作。您q可以编制一个定时器来控制这些动作的序?

?样例面 可以扑ֈhq类工具提示的一?HTML 元素。如果运行的是流行浏览器的最新版本,您就可以更为精致的工具提示和内|的工具提示做一ҎQ?
如果使用的是较老的览器,您可能无法获得其中的一部分行ؓ。例如,Opera 览器版?9 之前的版本,工具提示是弹入弹出的Q而非淡入淡出的,原因?Opera 在实?opacity 样式属性方面v步相对较晚。要下蝲行的浏览器的当前版本,请参?参考资?/a>?/td>

  • q类工具提示是E入E出的Q而不是突然弹出和H然消失?
  • q类工具提示包含囑փ和文本,q经很好的格式化和样式化处理?
  • 可见Ӟq类工具提示可以随光标移动?
  • 当光标从 HTML 元素Ud然后又移回此元素Ӟ淡入淡出会反转方向?
  • 同时可有多个工具提示可视Q一些E出,一些E入?

 

q些增强的行为和外观不仅有修饰的作用Q还可以提高可用性。面Ҏ数十个或数百个元素的J忙面Q用户很可能会错q即d出的工具提示。hcȝ视觉pȝ对运动的物体十分敏感Q因而也更容易注意到淡入视野q鼠标而动的工hC,即用户的注意力不在q儿也没关系。对比未格式化过的文本,囑փ、格式化和样式化能更有效C递信息。而且Q这些更为精致的工具提示的所有参数都是可配置的?/p>

本文后面的内容将着重于介绍如何?FadingTooltip 部件设计ؓ一个有限状态机。本pd的后l文章会为您展示如何实现和测试这些代码。如果您急于想知道这些代码,也可以在 参考资?/a> 部分扑ֈ到相?JavaScript 源代码和使用q些代码的一?HTML Web 面的链接?/p>





回页?/strong>


有限状态机

有限状态机对行为徏模,在该模型中,对将来事件的响应取决于先前的事g。此领域已出C大量学术著作Q参?参考资?/a>Q,而有限状态机的实用定义却十分单明了。有限状态机是包含如下内容的计机E序Q?

 

在行为由许多不同cd事g驱动以及对特定事件的响应取决于先前事件发生顺序的情况下,有限状态机最为有用?驱动有限状态机的事件可以是计算机外部的Q由键盘、鼠标、定时器或网l活动发PQ也可以是计机内部的(由本应用E序的其他部分或其他应用E序发vQ?/p>

状态是记v先前事g的一U方式,转移则用来组l对来事g的响应。其中的一个状态必要被指zؓ初始状态。结束状态可有可无,FadingTooltip 部件就没有l束状态?/p>

有限状态机的两U常见表CZؓQ?

方向?/strong>
气球状的圆圈代表状态,圆圈间的头U代表{U,它会被标以事件和动作?

 

二维?/strong>
表的行和列代表事件和状态,单元格内包含动作和{UR?

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

 

用有限状态机开发事仉动程序比一般的q程式编E要复杂一些;一般来_需要更多的规则Q尤其是更多的设计精力。如果处理得当,有限状态机可以使代码简单、测试迅速、维护轻松。但是,即便如此Q有限状态机的复杂性其ƈ不能适合所有事仉动的E序的开发。例如,当事件的U类不多或事件触发的动作L相同Ӟq行额外的开发可能会得不偿失?/p>





回页?/strong>


有限状态机和运行时环境

有限状态机是事仉动的Q需要在它们的运行时环境其与其相关的事件挂接v来。这可通过事g处理E序 实现Q事件处理程序是一些可插入到运行时环境的小的代码片D,一旦特定事件发生,q些处理E序׃执行。事件处理程序执行时Q需要获得如下一些基本信息:

  • 已发生事件的cdQ例如,光标Ud、定时器时Q?
  • 事g的上下文Q例如,光标位于哪个 HTML 元素之上、完成的是哪个网l请求)
  • 有限状态机自n的变量和Ҏ的位|?

 

JavaScript 十分适合于构Z仉动的有限状态机。事实上QJavaScript 有点太过适合 —?它有三种挂接事g的方式。每U?em>事g模型 都很直观明了Q但E序必须实现所有三U模型以保它们可以q行于所有流行的览器之上。事件的上下文在其中两个事g模型内被直接传递给事g处理E序Q对于另外一个模型,JavaScript 函数闭包允许事g的上下文被包裹进其事件处理程序?/p>

JavaScript 提供一U?em>对象模型Q对象模型是 Java ?C++ E序员所熟知的,它也可用来对有限状态机的变量和Ҏq行~码。而且QJavaScript 兌数组q允许直接对有限状态机的二l表q行~码?/p>





回页?/strong>


pȝ地设计行?/span>

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

  • 在该状态下Q此事g是否可能发生
  • 采取什么动作来处理事g
  • 事gq后转移C么状?
  • 在事件之间需要记录什么变?

 

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

通常Q需要反复执行此设计q程才能获得正确的图和表。对h多个事g和状态的有限状态机Q这个过E可能会十分乏味Q每ơ重复都需要遵守一定的原则来系l地处理表中的每一个单元格。这q您不得不考虑在每个可能的情况下您所惌的动作。您可能会发现还可以q一步完善这些行为,也可能会发现所需的状态较预计的要多(或少Q,甚至会发现您必须重新整理单元格间的这些动作以正确定义每种情况下的行ؓ?/p>

q种设计有限状态机的系l过E虽然有些乏味但却十分值得?a cmimpressionsent="1">?4 所C的完成后的表给Z此行动的所有逻辑Qƈ可被直接转换Z码(参见 actionTransitionFunctions 源代码)?/p>





回页?/strong>


关于 JavaScript

要设?FadingTooltip 部Ӟ您需要了?JavaScript 的一些功能。在严}设计的原则指gQ我只在q里l出基本的设计思想Q而将具体的实现留待本pd后箋文章中介l?/p>

当光标经q页面中?HTML 元素Ӟ所有流行的览器都能将事g传递给 JavaScript 代码。这些事件是 mouseover?em>mousemove ?mouseoutQ分别代表光标已l移臟뀁移上和Ud HTML 元素。浏览器用这些事件传递光标当前位|。当事g发生Ӟ可用 JavaScript ~程动态创?HTML Division 元素Q用文本、图像和标记填充q些元素q将其定位到光标附近?/p>

览器ƈ没有原生的E入和淡出函数Q但可以通过改变 Division 元素的透明度(实际上是不透明度,透明度的反义词)来模拟这些函数?/p>

JavaScript 有两cd时器Q一ơ定时器在超时时生成 timeout 事gQ重复断l器定期生成 timetick 事g。FadingTooltip 部仉要这两种定时器?/p>





回页?/strong>


设计状态图

首先回顾一下想要从 FadingTooltip 部件获得的基本行ؓ。当光标从特定的 HTML 元素上移q的时候,您可能想让此部件等待光标在该元素上暂停。如果可以如此,之后您可能又惌此小部g工hCE入,昄一会后再E出?/p>

有限状态机需要响应以下事Ӟ

  • 当光标移臟뀁移上和Ud某一 HTML 元素Ӟ览器能分别?mouseover、mousemove ?mouseout 事g传递给 JavaScript?
  • JavaScript 可以~程实现 timeout 事g来指C光标已停止_长的一D|间或工具提示已显CZ_长的一D|_也可以编E实?timetick 事g来分别增减工hCE入和淡出的不透明度?

 

您将需要设计状态机在事仉{待的一些状态。需要调用小部g的初始状?InactiveQ小部g在该状态下{待?mouseover 事gȀzR小部g?Pause 状态下{待直到 timeout 事g指示光标已经?HTML 元素上停留了_长的旉。之后在?timetick 事g动画式E入的同时Q小部g会在 FadeIn 状态下{待Q而又会在 Display 状态等待另一?timeout 事g。最后,在用更多 timetick 事g动画式E出的同时Q小部g会在 FadeOut 状态下{待。小部g转回?Inactive 状态,在此状态下{待另一?mouseover 事g?/p>

?1 是此q程相应的图形表C,其中的气球Ş圆圈代表状态,q接圆圈的箭头线代表转移Q箭头线上的标注代表事g。双层边界的圆圈代表初始状态?/p>


?1. 状态图的初始设?/strong>
状态图的初始设? src=

FadingTooltip 部件必针对它处理的每个事仉取动作:

  • ?mouseover 事g?Inactive 状态发生时Q在转入 Pause 状态等待之前,它必要开启一个一ơ定时器?
  • ?timeout 事g发生Ӟ在{?FadeIn 状态等待之前,它必要创徏工具提示Q初始不透明度gؓӞq开启一个重复断l器?
  • 每次发生 timetick 事gQ它都要适当增加工具提示的不透明度。当辑ֈ工具提示的最大不透明度时Q它必须在{?Display 状态等待之前取消此重复断箋器ƈ开启另一个定时器?
  • 当定时器?timeout 事g发生Ӟ它必d转入 FadeOut 状态等待之前开启另一个重复断l器?
  • 每次?FadeOut 状态发?timetick 事gӞ它都必须要适当减少工具提示的不透明度。当工具提示的不透明度减到零时Q小部g会取消此重复断箋器,删除工具提示q返回到 Inactive 状态,在该状态等待被另一?mouseover 事gȀzR?

 

?2 在触发这些动作的事g之下列出了这些动作?/p>


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




回页?/strong>


状态图转换成状态表

上述的状态图是设计有限状态机的一个很好的开始。但表Ş式更适合于完成设计,原因是表可以l出事g和状态的所有组合以供参考?/p>

要将状态图转换成状态表Q可以在行标题内填上事g名,在列标题内填上状态名。这些名字的序是Q意的Q我在第一行的开始位|放入了初始状态,在第一列的开始位|放入了初始事gQ随后将动作和每一事g的下一状态复制到表中适当的单元格内,??3 所C?/p>


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




回页?/strong>


完成状态表

要完成有限状态机的设计,需要顾及表中的每一个空单元根{您需要ؓ每个单元格做q样的考虑Q该事g是否可以发生在该状态,如果可以Q小部g在这U情况下采取什么动作,下一个状态又是什么。这虽然有些乏味Q但却是设计q程的必需部分?

考虑单元格的序先后关系不大。通常在设计过E中需要多ơ重复此步骤Q反复考虑每个单元|不时C改其内容Q而且每次的考虑序都会有所不同。另外随着设计的不断深入,dQ或删除Q状态、做q一步的修改也十分常见。在q里Q我蟩q这些反复过E,着重ȝ如何通过依次查看每个状态和事g来获得最l的l果表?/p>

Inactive 状?/strong>
在这U状态下Q只有初始状态可以发生,原因?mousemove ?mouseout 事g应该l?mouseover 事g之后发生Q而且没有M定时器在q行。所以应此列的所有其他单元格标记?#8220;不应发生”?

在l之前,q应注意一下此状态的 mouseover 事g。当为此工具提示创徏 HTML Division 元素Ӟ需要将它定位于光标的附q,所以要保存光标的当前位|,当前位置由浏览器与此事g一同传递。而且在开始新的定时器之前Q最好能够取消Q何运行着的定时器。在 mouseover 对应的单元格内添加上q动作?/p>

Pause 状?/strong>

在等待定时器时Ӟ光标可能会在 HTML 元素内移动或从此 HTML 元素Ud。需要决定一旦发生这些事件所应采取的动作以及下一个状态是什么。如果在此状态发?mouseout 事gQFadingTooltip 部件应能返?Inactive 状态,像光标从未l过 HTML 元素一P而且q必d消定时器。在 mouseout 对应的单元格记录q些动作和{UR?/p>

另一斚wQ对?mousemove 事gQ则需要小部g能够l箋{待光标悬停Q这又要求取消和重新开启定时器。因为想要让工具提示出现在光标的附近Q所以需要更新所保存的光标位|。Pause 状态下?mousemove 事g的动作和转移?Inactive 状态下?mousemove 事g的动作和转移相同。所以无需重复两个单元格的内容Q在 mousemove 对应的单元格内放上同L内容卛_。将此列的所有其他单元格标记?#8220;不应发生”?/p>

FadeIn 状?/strong>
在这U状态下Q在?timetick 事g处理淡入Ӟ光标可以l箋到处Ud。如果发?mousemove 事gQ需相应Ud工具提示q保持当前的状态不变。如果发?mouseout 事gQ{Ud FadeOut 状态,重复断箋器仍会运行以便后l的 timetick 事g会在当前值的基础之上减少工具提示的不透明度。在适当的单元格内记录这些动作和转移q将此列的所有其他单元格标记?#8220;不应发生”?

 

Display 状?/strong>
光标仍可以到处移动。如果光标在 HTML 元素之内UdQ采取与 FadeIn 状态相同的动作 —?相应Ud工具提示。如果光标从 HTML 元素UdQ就采取?Display 状态下?timeout 事g相同的状态和转移。在 mousemove ?mouseout 对应的单元格直接放上相同的内容ƈ此列的所有其他单元格标记?#8220;不应发生”Q?

 

FadeOut 状?/strong>
在这U状态下Q在?timetick 事g处理淡出Ӟ光标仍可l箋到处Ud。如果光标在 HTML 元素之内UdQ采取与 FadeIn ?Display 状态相同的动作。如果光标从 HTML 元素UdQ不需要做M事情 —?重复断箋器会l箋q行以便后箋?timetick 事g会在当前值的基础之上减少工具提示的不透明度直到其gؓ零?

不要此单元格标Cؓ“不应发生”Q而是应该标示为无需M动作。如果光标又再次回到?HTML 元素Q将工具提示Ud光标q返?FadeIn 状态?/p>

?4 昄了所有这些动作和转移。剩下的I白单元格应标记?#8220;不应发生”?/p>


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

有限状态机的状态表L能{换回状态图Q因Z者是{h的?a cmimpressionsent="1">?5 昄了完整的状态表对应的状态图?/p>


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




回页?/strong>


攉状态变?/span>

完成状态表和状态图之后Q很有必要对它再q行一ơ回来攉状态机在两事g间需要记录的变量以便状态机能够执行不同的单元格内的相应动作。有限状态机需?清单 2 中所C的状态变量?


清单 2.初始的状态变量列?/strong>
            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 变量本n不区分类型,但变量所包含的值是区分cd的(q就是说QQ何类型的值都可以赋给变量Q。根据这一原则Q我列出了状态变量名q在注释部分l出了希望赋l这些变量的值的cd?/p> 下蝲



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

直接看代?
<html>
    
<HEAD>
        
<title>WEB面导出为Word文档后分늚Ҏ </title>
    
</HEAD>
    
<SCRIPT LANGUAGE="javascript">
                
/*
                 * 
                 * @param {Object} cont  要导出的html元素内容的id,注意不要加双引号
                 * @param {Object} key   分页关键?br />                  
*/

                
function AllAreaWord(cont,key)
                
{
                    
var oWD = new ActiveXObject("Word.Application");
                    
//默认为页面视?/span>
                    var oDC = oWD.Documents.Add(""00);
                    
var oRange = oDC.Range(01);
                    
//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 全选操?/span>
                    selection.WholeStory();
                    
//清除格式
                    selection.Find.ClearFormatting();
                    
//指定查找关键?/span>
                    selection.Find.Text = key;
                    
//^m为手动分늬标记
                    //向下查找
                    selection.Find.Forward = true;
                    selection.Find.Wrap 
= 1;
                    
//不区分大写
                    selection.Find.MatchCase = false;
                    
//不匹配整个单?/span>
                    selection.Find.MatchWholeWord = false;
                    
//如果扑ֈ指定字符串返回真,否则q回false
                    while (selection.Find.Execute()) 
                    
{
                        
//插入分页W?分页W常量ؓ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 (转帖[l对l典])http://m.tkk7.com/conans/articles/210930.htmlCONANCONANThu, 26 Jun 2008 11:52:00 GMThttp://m.tkk7.com/conans/articles/210930.html阅读全文

CONAN 2008-06-26 19:52 发表评论
]]>
javaScript常用技巧箋Q二Q?http://m.tkk7.com/conans/articles/210577.htmlCONANCONANWed, 25 Jun 2008 07:51:00 GMThttp://m.tkk7.com/conans/articles/210577.html26.如何讑֮打开面的大?br /> <body onload="top.resizeTo(300,200);">
打开面的位|?/span><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. 查一D字W串是否全由数字l成
<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. 怎么判断是否是字W?br /> if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");


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


32. 日期减去天数{于W二个日?br /> <script language=Javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
= a.valueOf()
= a - dadd * 24 * 60 * 60 * 1000
= new Date(a)
alert(a.getFullYear() 
+ "q?/span>" + (a.getMonth() + 1+ "?/span>" + a.getDate() + "?/span>")
}
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键可以让光标Ud下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">

CONAN 2008-06-25 15:51 发表评论
]]>
javaScript常用技巧箋Q一Q?http://m.tkk7.com/conans/articles/210576.htmlCONANCONANWed, 25 Jun 2008 07:50:00 GMThttp://m.tkk7.com/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">
或?lt;META HTTP-EQUIV="expires" CONTENT="0">


19.怎样让表单没有凹凸感Q?
<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>用来定义同一行内的元素,?lt;div>的唯一区别是不产生转行
<layer>是ns的标讎ͼie不支持,相当?lt;div>


21.让弹出窗口L在最上面:
<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.怎样L囄链接点击后,囄周围的虚U?
<a href="#" onFocus="this.blur()"><img src="/logo.jpg" border=0></a>


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


25.在打开的子H口h父窗口的代码里如何写Q?
window.opener.location.reload()

CONAN 2008-06-25 15:50 发表评论
]]>
javaScript常用技?http://m.tkk7.com/conans/articles/210575.htmlCONANCONANWed, 25 Jun 2008 07:48:00 GMThttp://m.tkk7.com/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"> 可以在收藏夹中显C出你的图标


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


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


9. 防止被hframe
<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. 取得控g的绝对位|?
//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,"得到控g的位|?
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://m.tkk7.com/conans/articles/209885.htmlCONANCONANSun, 22 Jun 2008 10:58:00 GMThttp://m.tkk7.com/conans/articles/209885.html 

以下是JavaScriptҎ犯错的几?陷阱".由本人google+体验+搜集而来.虽然不是什么很高深的技术问题,但注意一下,会您的~程L?

1. 最后一个逗号

如这D代码,注意最后一个逗号Q按语言学角度来说应该是不错的(python的类似数据类型辞典dictionary允许如此)。IE会报语法错误Q但语义不详Q你只能用hg几千行代码中扫描?

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



2. this的引用会改变

如这D代码:

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 );  //?   
  7.   }   
  8. }();   
  9. document.getElementById("theText").onclick =  MyObject.ClickHandler;   
  10. </script>  


q不如你所愿,{案q不?#8221;JavaScript rules”。在执行MyObject.ClickHandlerӞ在行1中,this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解冻I
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>  

实质上,q就是JavaScript作用域的问题。如果你看过Q你会发现解x案不止一U?

3. 标识盗贼

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

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. 字符串只替换W一个匹?/strong>

如下代码Q?

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


而实际上QfileNamel果?This_is a title". 在JavaScript中,String.replace的第一个参数应该是正则表达式。所以,正确的做法是q样Q?

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


5. mouseout意味着mousein

事实上,q是׃事g冒D的。IE中有mouseenter和mouseleaveQ但不是标准的。作者在此徏议大家用js库来解决问题?

6. parseInt是基于进制体pȝ

q个是常识,可是很多人给忽略了parseIntq有W二个参敎ͼ用以指明q制。比如,parseInt("09")Q如果你认ؓ{案?Q那错了。因为,在此Q字W串?开_parseInt以八q制来处理它Q在八进制中Q?9是非法,q回falseQ布值false转化成数值就?. 因此Q正的做法?
Js代码 复制代码
  1. parseInt("09", 10).   


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

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

q行得好好的Q不是吗Q但是有一天它不干了,l我q回的值变成了NaN, 晕。我只不q引入了一个库而已啊。原来是q个库改写了Array的prototypeQ这P我们的arrq白无过多出了一个属性(ҎQ,而for...in...会把它给遍历出来?
其实,q没有引进?它的l果也ƈ不是数组所有元素的乘积,因ؓfor...in...会遍历到数组的length属?
所以这样做才是比较安全的:

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


其实Q这也是污染基本cȝprototype会带来危害的一个例证?

8. 事g处理器的陷阱

q其实只会存在用作为对象属性的事g处理器才会存在的问题。比如window.onclick = MyOnClickMethodq样的代码,q会复写掉之前的window.onclick事gQ还可能DIE的内ҎԌsucks againQ。在IEq没有支持DOM 2的事件注册之前,作者徏议用库来解决问题,比如使用YUI:

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

q应该也属于常识问题Q但新手可能Ҏ犯错?

9. focus() 出错

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

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

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


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


上面代码块中?开??l束"两块不会输出.
当onload事gl束之后,如果再一ơ调用document.write()Ҏ写进一DHTML,q段HTML会完全替换掉之前面的内?整个面的源代码变Zdocument.write()所写的内容.把上面的改ؓ:
Js代码 复制代码
  1. <h3>开?lt;/h3>    
  2. <script type="text/jscript">   
  3. function init() {    
  4. document.write("现在旉?" + new Date() );   
  5. }   
  6. init()   
  7. </script>   
  8. <h3>l束</h3>  

"开??l束"׃正常输出.

11.注意你name的?

有这样一D代?
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标签的?更详l的内容请参考[url]https://bugzilla.mozilla.org/show_bug.cgi?id=322488
[/url]


12.后台数据传输不会影响到前?/strong>

也许你会说这是一非常低的错?但我q是惌?
面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.     //如果验证p|,弹出错误   
  6.      alert("dp|");   
  7.     ...   
  8. }   
  9. ...  

很多Z惯用q种Ҏ来进行登录失败的提示.但是要注?xmlHttp发送数据的时候是q行的后台发?它所兛_?仅仅是send之后,得到所hURL的响?而check.htm面所执行的一?都是只在后台完成.不管它怎么跌{,或者alert(),或者close().都不会在界面中有M昄.

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

在实践中QJavaScript的陷p有很多很多,大多是由于解析器的实CC而引赗这些东西一般都不会在教U书中出玎ͼ只能靠开发者之间的l验分n。希望大家有更好的分享?
如发现其它的"陷阱",我会l箋增加内容.谢谢x.


CONAN 2008-06-22 18:58 发表评论
]]>
js中replaceҎ的高U替?/title><link>http://m.tkk7.com/conans/articles/209620.html</link><dc:creator>CONAN</dc:creator><author>CONAN</author><pubDate>Fri, 20 Jun 2008 15:27:00 GMT</pubDate><guid>http://m.tkk7.com/conans/articles/209620.html</guid><description><![CDATA[     摘要: /*    ******************************************                       &n...  <a href='http://m.tkk7.com/conans/articles/209620.html'>阅读全文</a><img src ="http://m.tkk7.com/conans/aggbug/209620.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://m.tkk7.com/conans/" target="_blank">CONAN</a> 2008-06-20 23:27 <a href="http://m.tkk7.com/conans/articles/209620.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss> <footer> <div class="friendship-link"> <p>лǵվܻԴȤ</p> <a href="http://m.tkk7.com/" title="亚洲av成人片在线观看">亚洲av成人片在线观看</a> <div class="friend-links"> </div> </div> </footer> վ֩ģ壺 <a href="http://minliusoft.com" target="_blank">Ƶ</a>| <a href="http://tedegold.com" target="_blank">޵ӰĻ</a>| <a href="http://www-070755.com" target="_blank">߹ۿѹۿ</a>| <a href="http://mangshigas.com" target="_blank">޾Ʒ˳߹ۿ</a>| <a href="http://367316.com" target="_blank">ûɫվ</a>| <a href="http://kimnote.com" target="_blank">ŮܳƵ</a>| <a href="http://wxbhnkyy39.com" target="_blank">þþƷĻվ</a>| <a href="http://1314a.com" target="_blank">ֻ߿avƬ</a>| <a href="http://fenglufzjx.com" target="_blank">վ߹ۿ</a>| <a href="http://xdxdl.com" target="_blank">þþŷղ</a>| <a href="http://yijiazhiwei.com" target="_blank">Ƶվ</a>| <a href="http://sds54.com" target="_blank">hƵѹۿ</a>| <a href="http://9522952.com" target="_blank">˳www߲</a>| <a href="http://aa77cc.com" target="_blank">ľþþƷww16</a>| <a href="http://gwcyy.com" target="_blank">þþƷվѹۿ</a>| <a href="http://wwwnewhtbook.com" target="_blank">þþþùɫAVѹۿ</a>| <a href="http://svvnn.com" target="_blank">㽶߹ۿ</a>| <a href="http://0595laser.com" target="_blank">޾Ʒ벻߲HE</a>| <a href="http://mottool.com" target="_blank">ŮѹۿˬˬˬƵ</a>| <a href="http://240842.com" target="_blank">ؼëƬߴȫѲ</a>| <a href="http://wwwdd312.com" target="_blank">ŷղ</a>| <a href="http://www-79983.com" target="_blank">þþƷƷ</a>| <a href="http://jogador1.com" target="_blank">þþƷվѹۿ </a>| <a href="http://meiluniao.com" target="_blank">ţƷ޳avƬ</a>| <a href="http://173ba.com" target="_blank">avպavӰƬƷ</a>| <a href="http://taiyu18.com" target="_blank">Ļѹۿ</a>| <a href="http://1444000.com" target="_blank">Ļ߹ۿ</a>| <a href="http://takiku.com" target="_blank">žѾƷƵ</a>| <a href="http://www-095666.com" target="_blank">avƬһ</a>| <a href="http://xmllhb.com" target="_blank">޼VëƬþþƷ</a>| <a href="http://tzntrip.com" target="_blank">ձػɫѴƬ</a>| <a href="http://527352.com" target="_blank">ŷƵһ</a>| <a href="http://mtripmall.com" target="_blank">þþžžþƷֱ</a>| <a href="http://wogool.com" target="_blank">ޱAAAר</a>| <a href="http://jinlaifubuxiugang.com" target="_blank">ƵС˵ͼƬ</a>| <a href="http://wxyz2.com" target="_blank">˳ۺ7777</a>| <a href="http://929119.com" target="_blank">һaƵ</a>| <a href="http://hbjpxnyqckj.com" target="_blank">Ѱvվ߹ۿg</a>| <a href="http://guakao88.com" target="_blank">þòþüƵ7 </a>| <a href="http://89895cc.com" target="_blank">XXX2߹ۿƵ</a>| <a href="http://bjqhkf.com" target="_blank">ɫavƷר</a>| <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body>