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>