开发学院网页设计 JavaScript javascript 摘记一阅读

javascript 摘记一

　2010-10-19 08:56:00　来源：WEB开发网　闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣椤愯姤鎱ㄥ鍡楀幊缂傚倹姘ㄩ幉绋款吋閸澀缃曢梻鍌欑濠€閬嶆惞鎼淬劌绐楅柡宥庡亞娑撳秵銇勯弽顐沪闁绘挶鍎甸弻锝夊即閻愭祴鍋撻崷顓涘亾濮樼偓瀚�

闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿极閹剧粯鍋愰柟缁樺笧閳ь剦鍙冨鍝勑ч崶褏浠奸梺璇茬箲閼归箖鎮鹃悜钘夎摕闁靛濡囬崢鐢告⒑鐟欏嫷鍟忛柛鐘崇墵閵嗗倹绺介崨濠勫幈闁硅壈鎻槐鏇熺墡闂備線娼уú銈団偓姘嵆閻涱噣骞掑Δ鈧粻锝嗙節闂堟稑鏆欏ù婊堢畺閺岋綁濮€閳惰泛婀辨竟鏇熺節濮橆厾鍘甸梺缁樺姦閸撴岸鎮樻潏銊ょ箚闁圭粯甯炴晶娑氱磼缂佹ḿ娲寸€规洖宕灃闁告劕鍟犻崜婵堟崲濞戞ḿ鏆嗗┑鐘辫兌閺佹牜绱撴担浠嬪摵闁圭懓娲ら悾鐑藉箳閹搭厽鍍甸梺鐟板悁閻掞箓鎮楅幖浣光拻濞达絿鍎ら崵鈧梺鎼炲€栭悧鐘荤嵁韫囨稒鏅搁柨鐕傛嫹

婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繑銇勯幘鍗炵仼缂佺媭鍨堕弻娑㈠箛闂堟稒鐏堥悗鐟版啞缁诲啴濡甸崟顖氱閻庨潧鎽滈悾濂告⒑绾拋娼愭繛鑼枎椤繒绱掑Ο鑲╂嚌闂侀€炲苯澧畝锝堝劵椤︽煡鎮￠妶澶嬬厪闁割偅绻冮崑顏呯箾瀹割喕绨婚幆鐔兼⒑鐎圭姵銆冮柤鍐茬埣瀹曟繈鏁冮埀顒勨€旈崘顔嘉ч柛鈩冾殘閻熸劙姊洪悡搴℃毐闁绘牕銈稿畷鐑樼節閸パ冨祮闂侀潧楠忕槐鏇㈠储椤忓牊鈷戦柟鑲╁仜閸旀鏌￠崨顔锯姇缂佸倹甯熼ˇ瀵哥磼鏉堛劌绗氭繛鐓庣箻閸┾剝鎷呴柨瀣垫綗闂傚倷娴囧銊╂倿閿曞倸绠查柛銉墮閺嬩線鏌熼崜褏甯涢柡鍛倐閺屻劑鎮ら崒娑橆伓闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣椤愯姤鎱ㄥ鍡楀幊缂傚倹姘ㄩ幉绋款吋閸澀缃曢梻鍌欑濠€閬嶆惞鎼淬劌绐楅柡宥庡亞娑撳秵銇勯弽顐沪闁绘挶鍎甸弻锝夊即閻愭祴鍋撻崷顓涘亾濮樼偓瀚�　　闂傚倸鍊搁崐鎼佸磹閹间礁纾归柣鎴ｅГ閸ゅ嫰鏌ら崫銉︽毄濞寸姵姘ㄧ槐鎾诲磼濞嗘帒鍘＄紓渚囧櫘閸ㄥ爼濡撮崘顔煎窛闁哄鍨归崢娲倵楠炲灝鍔氭い锔诲灦瀹曪繝骞庨懞銉у帾闂婎偄娲﹀ú鏍ㄧ墡闂備浇顕х€垫帡宕滈悢濂夋綎闁惧繐婀辩壕鍏间繆椤栨碍鎯堟い顐㈢焸濮婅櫣鎷犻懠顒傤唹濠殿喗菧閸旀垿宕洪埀顒併亜閹哄秶顦﹂柛銈庡墴閺屾盯骞樼捄鐑樼€诲銈庡亜缁绘劗鍙呭銈呯箰鐎氼剟鎮楅鐑嗘富闁靛牆妫欑粈鈧梺鐟板暱闁帮絽鐣峰⿰鍕嚤閻庢稒菤閹锋椽姊绘笟鍥т簽闁稿鐩幊鐔碱敍濞戞瑦鐝峰銈嗘煥婢х晫澹曢悡搴唵閻犺櫣灏ㄩ崝鐔虹磼婢跺孩顏犻柍褜鍓氶鏍窗閺嶎厸鈧箓鏌ㄧ€ｂ晝绠氬┑顔界箓閻牆危閻戣姤鈷戠紒瀣儥閸庢劙鏌熼悷鐗堟悙閾荤偤鏌涢幇鈺佸Ψ婵℃彃鐗婄换娑㈠幢濡ゅ啰顔夊┑鐐茬墛閿曘垹顫忕紒妯诲濡炲绨肩憰鍡欑磽閸屾氨袦闁稿鎸荤换娑氣偓娑欋缚閻倝鏌涢幘璺烘灈鐎规洘妞介崺鈧い鎺嶉檷娴滄粓鏌熼悜妯虹仴闁逞屽墮缂嶅﹤顕ｉ幎绛嬫晢闁告洦鍓涢崢閬嶆煟鎼搭垳绉靛ù婊呭厴閻擃剟顢楅崒妤€浜鹃悷娆忓绾惧鏌涘Δ鈧崯鍧楊敋閿濆纾归柣鏇氱劍闉嬮梻鍌欑閹碱偄螞鐎靛摜涓嶉柟鎹愵嚙閽冪喖鏌曟繛鐐珕闁稿妫濋弻娑氫沪閸撗€妲堝銈呴獜閹凤拷

核心提示：随着web 3.0 的来临，web开发的趋势着重在用户体验上. 因此javascript , flash 等前端应用受到热捧，javascript 摘记一，做为web开发者,将javascript ， flash 做为技术储备是个不错的主意. 目前无论基于何种平台的web服务，然后注册onload事件. 3. 获得对象

随着web 3.0 的来临。web开发的趋势着重在用户体验上. 因此javascript , flash 等前端应用受到热捧。做为web开发者,将javascript ， flash 做为技术储备是个不错的主意. 目前无论基于何种平台的web服务，最终都面向浏览器端。而 javascript 几乎被所有游览器所支持. flash 虽做为浏览器端的一个小插件，在某些应用上有无可替代的优势，例如其弥补了浏览器与服务器端只能单向通信的弊端,在涉汲流的应用得到广泛使用.而flash编写的应用程序很容易移值到其它设备上，因此大大降底了flash的开发成本.

　　在前一段时间做了一些应用级别脚本编程后，积累了一些想法和经验，拿来分享。如有不当之处，请多指教.
1.工具的使用.
　　 javascript 做为脚本语言，执行速度快，语法灵活. 因为其语法宽松，因此也成了编写javascript者致命的痛苦. 还好在调试js方面firefox 的 firebug 帮助大多数js编写者脱离了苦海.其中的css，html查看器能构实时反应内存中的dom的状态.
2.javascript 是什么？
　　在很长一段时间内不明白javascript 到底是什么?其实很简单,各个浏览器供应商在推出其产品时，都会提供一套API,供开发者开发浏览器端应用.早在前期，微软曾使用VBScript做为浏览器API. 只是后来javascript 成了脚本界的标准，并被大多数者习惯和使用。同时javascript 被ECMAScript 规范化.因此现代浏览器生产商都将浏览器接口API设计成支持 ECMAScript.
3.同样的一段javascript脚本在不同浏览器中执行，效果却不一致.难道javascript不兼容么？
　　或许您在脚本编写时，会有这样的需求:创建一组单选框，并将它添加到页面中. 您可能会写如下语法

<SCRIPT LANGUAGE="JavaScript">
       <!--
    var input1 = document.createElement("input") ;
    input1.setAttribute("type","radio") ;
    input1.setAttribute("name","a1") ;
    document.body.appendChild(input1) ;

        var input2 = document.createElement("input") ;
    input2.setAttribute("type","radio") ;
    input2.setAttribute("name","a1")
    document.body.appendChild(input2) ;
      //-->
</SCRIPT>

然而您可能会发现这段代码并不能在ie6中正常工作，ie7,ie8,firefox 却可以. why?

javascript 是在宿主环境下运行，开发者通过javascript 与其宿主(浏览器)交互. 而不同的浏览器对DOM的解释会有差异.

4.javascript 写在哪里？
　　通常javascript 写在head中,它通常最先执行.如果经常报 "找不到对象" 的错误时.那是因为执行了某些javascript 语法. 可能您正在尝试用脚本检索某些对象. 但这些对象还未装载到内存中.因此，可以将该脚本移至文档末尾，或着在 body 元素的onload 中执行.
5.如果同时引用多段js文件,但它们有明确的加载顺序怎么设置?
　　"defer" 关键字很容易解决这个问题.例如:
　　<script src = "..." defer = true language = 'javascript' ></script>
　　 <script src = "..." language = 'javascript' ></script>
　　第一段 js 最后被执行(defer 表示该段js脚本最后执行). 如果有更复杂的js加载顺序，建议动态加载js。
6.引用了js文件，有一段js中文部份乱码，怎么解决?
　　曾经有一段经历，在写多国语言版网页时，防止html乱码,因此在 meta 中设置为utf-8.本人有一个习惯，喜欢在记事本中编写脚本.结果js的中文部份均为乱码. 原因是:记事本编码默认为系统代码页(gb2312),而网页中指定了utf-8解码.

解决办法:使用其它文本编辑器，将文件编码格式转为utf-8。
7.如何理解onload 事件. 假设如下场景:

 <html>
 <head>
 <script src = "imageauto.js" language = "javascript"></script>
 </head>
 <body>
  <div style = "width:100px; height:120px">
   <img src = "aa.jpg" id = 'img' />
  </div>
 </body>
 </html>

现要求 img 通过脚本缩放. 已知图片缩放的逻辑写在imageauto.js文件中。
常规分析:
1. img 的缩放逻辑写在 img 的onload事件中.
2. 先通过脚本获得img 对象，然后注册onload事件.
3. 获得对象元素应该在文档加载完毕时进行，也就时 body 的 onload 事件中进行.
所以代码这样写:

 <html>
 <head>
 <script src = "imageauto.js" language = "javascript"></script>
 <script>
  window.onload = function(){
   document.getElementById("img").onload = function(){
    //调用 imageauto.js 缩放图片
   }
  }
 </script>
 </head>
 <body>
  <div style = "width:100px; height:120px">
   <img src = "aa.jpg" id = 'img' />
  </div>
 </body>
 </html>

如上 img 中的onload 不会执行. 因为文档加载完毕，意味着 img 已经加载完毕。因此 img 的onload 事件生命周期已经过了.
所以只能将如上js放到尾部,但仍无法确定 imageauto.js 是否加载完毕. 因此存在调用imageauto.js 失败的风险.

 <html>
 <head>
 <script src = "imageauto.js" language = "javascript"></script>
 </head>
 <body>
  <div style = "width:100px; height:120px">
   <img src = "aa.jpg" id = 'img' />
  </div>
 </body>
 </html>

 <script>
 document.getElementById("img").onload = function(){
    //调用 imageauto.js 缩放图片
   }
 </script>

仔细分析加载顺序,安全的加载的顺序如下
window.onload
-> imageauto.js
-> img (onload 失效)

因此产生如下关系:
imageauto.js 依赖 window.onload 事件
img.onload 依赖 imageauto.js
img.onload 排斥 window.onload 事件.
解决办法:利用脚本创建img,如:

 <html>
 <head>
 <script src = "imageauto.js" language = "javascript"></script>
 <script>
  window.onload = function(){
    var img = document.createElement("img") ;
   img.src = "aa.jpg" ;
   img.onload = function()
   {
    //调用 imageauto.js 缩放图片 
   } ;
   document.getElementById("div1").appendChild(img) ;
  }
 </script>
 </head>
 <body>
  <div style = "width:100px; height:120px" id = "div1">
   <!--<img src = "aa.jpg" id = 'img' />-->
  </div>
 </body>
 </html>