javascript 札记一

时间：2010-10-19 来源：仰光

代码     <SCRIPT LANGUAGE="JavaScript">
       
</SCRIPT>

然而您可能会发现这段代码并不能在ie6中正常工作，ie7,ie8,firefox 却可以. why? 这种痛苦可能会持续一段时间。疑惑不解，外加急躁可能会导致你痛苦，乃至牙龈发炎。了解why可能会减轻痛苦.
javascript 是一套api，供开发人员与浏览器间的通信使者, 差异化原因，追其究竟，终究是浏览器间的差异。冒似长得像，必竞不是一个亲爹。既使是一个爹，没准不共一个妈. 所以在写js时，最好是一个萝卜一个坑. 推荐网站:如果想检索对象的某属性在不同浏览器中的支持程度，http://help.dottoro.com/index.php 是一个很不错的网站.
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;
   <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;
   <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;
   <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;
   
  </div>
</body>
</html>