javascript 札记一-优快云博客

本文探讨了web3.0时代JavaScript和Flash的重要性，分享了JavaScript编程的经验，包括工具选择、语法理解、浏览器兼容性问题、脚本位置安排、多文件加载顺序控制、中文乱码解决方案及图片动态加载与缩放的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着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 " >
        
</ 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解码.

　　解决办法:使用其它文本编辑器，将乱码的js文件编码格式转为utf-8。

7.如何在文档加载完毕，开始缩放图片？假设如下场景:

<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">
   
  </div>
</body>
</html>