JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

JS应用范围

当 Javascript 第一次出现的时候,是为了给页面带来更多的动态,使得用户可以与页面进行交互为目的的,虽然 Javascript 在 WEB 客户端取得了很大的成功,但是 ECMA 标准并没有局限其应用范围。事实上,现在的 Javascript 大多运行与客户端,但是仍有部分运行于服务器端,如 Servlet,ASP 等,当然,Javascript 作为一个独立的语言,同样可以运行在其他的应用程序中,比如 Java 版的 JavaScript 引擎 Rhino,C 语言版的SpiderMonkey 等,使用这些引擎,可以将 JavaScript 应用在任何应用之中。

客户端 Javascript

客户端的 JavaScript 随着 AJAX 技术的复兴,越来越凸显了 Javascript 的特点,也有越来越多的开发人员开始进行 JavaScript 的学习,使用 Javascript,你可以使你的 WEB页面更加生动,通过 AJAX,无刷新的更新页面内容,可以大大的提高用户体验,随着大量的 JavaScript 包如 jQuery, ExtJS,Mootools 等的涌现,越来越多的绚丽,高体验的WEB 应用被开发出来,这些都离不来幕后的 JavaScript 的支持。

图 JavaScript 实现的一个 WEB 幻灯片

浏览器中的 JavaScript 引擎也进行了长足的发展,比如 FireFox 3,当时一个宣传的重点就是速度比 IE 要快,这个速度一方面体现在页面渲染上,另一方面则体现在JavaScript 引擎上,而 Google 的 Chrome 的 JavaScript 引擎 V8 更是将速度发展到了极致。很难想象,如果没有 JavaScript,如今的大量的网站和 WEB 应用会成为什么样子。

我们可以看几个例子,来说明客户端的 JavaScript 的应用程度:

图 ExtJS 实现的一个网络相册,ExtJS 是一个非常优秀的 JavaScriipt 库
 

图 ExtJS 实现的一个表格,具有排序,编辑等功能

当然,客户端的 JavaScript 各有侧重,jQuery 以功能见长,通过选择器,可以完成80%的页面开发工作,并且提供强大的插件机制,下图为 jQuery 的 UI 插件:

总之,随着 Ajax 的复兴,客户端的 JavaScript 得到了很大的发展,网络上流行着大量的优秀的 JavaScript 库,现在有一个感性的人是即可,我们在后边的章节会择其尤要者进行详细讲解。

服务端 Javascript

相对客户端而言,服务器端的 JavaScript 相对平淡很多,但是随着 JavaScript 被更多人重视,JavaScript 在服务器端也开始迅速的发展起来,Helma, Apache Sling 等等。

在服务器端的 JavaScript 比客户端少了许多限制,如本地文件的访问,网络,数据库等。一个比较有意思的服务端 JavaScript 的例子是 Aptana 的 Jaxer,Jaxer 是一个服务器端的 Ajax 框架,我们可以看这样一个例子(例子来源于 jQuery 的设计与实现这 JohnResig):
<html>
<head>
<script src="http://code.jquery.com/jquery.js"
runat="both"></script>
<script>
jQuery(function($){
    $("form").submit(function(){
        save( $("textarea").val() );
        return false;
    });
});
</script>
<script runat="server">
function save( text ){
    Jaxer.File.write("tmp.txt", text);
    function load(){
        $("textarea").val(Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
    }
</script>
</head>
<body onserverload="load()">
<form action="" method="post">
    <textarea></textarea>
    <input type="submit"/>
</form>
</body>
</html>

runat 属性说明脚本运行在客户端还是服务器端,client 表示运行在客户端,server表示运行在服务器端,而 both 表示可以运行在客户端和服务器端,这个脚本可以访问文件,并将文件加载到一个 textarea 的 DOM 元素中,还可以将 textarea 的内容通过 Form 表单提交给服务器并保存。

再来看另一个例子,通过 Jaxer 对数据库进行访问:
<script runat="server">
    var rs = Jaxer.DB.execute("SELECT * FROM table");
    var field = rs.rows[0].field;
</script>

通过动态,灵活的语法,再加上对原生的资源(如数据库,文件,网络等)操作的支持,服务器端的 JavaScript 应用将会越来越广泛。

当 Google 的 JavaScript 引擎 V8 出现以后,有很多基于 V8 引擎的应用也出现了,其中最著名,最有前景的当算 Node.js 了,下面我们来看一下 Node.js 的例子:
var sys = require('sys'),
http = require('http');

http.createServer(function (req, res) {
    setTimeout(function () {
        res.sendHeader(200, {'Content-Type': 'text/plain'});
        res.sendBody('Hello World');
        res.finish();
    }, 2000);
}).listen(8000);
sys.puts('Server running at http://127.0.0.1:8000/');

保存这个脚本为 sayHello.js,然后运行:
    node sayHello.js
程序将会在控制台上打印:
    Server running at http://127.0.0.1:8000/
访问 http://127.0.0.1:8000,两秒钟之后页面会响应:Hello, World。

再来看另一个官方提供的例子:
var tcp = require('tcp');
var server = tcp.createServer(function (socket) {
    socket.setEncoding("utf8");
    socket.addListener("connect", function () {
        socket.send("hello\r\n");
    });
    socket.addListener("receive", function (data) {
        socket.send(data);
    });
    socket.addListener("eof", function () {
        socket.send("goodbye\r\n");
        socket.close();
    });
});
server.listen(7000, "localhost");

访问 localhost 的 7000 端口,将建立一个 TCP 连接,编码方式为 utf-8,当客户端连接到来时,程序在控制台上打印hello当接收到新的数据时,会将接收到的数据原样返回给客户端,如果客户端断开连接,则向控制台打印:goodbay。

Node 提供了丰富的 API 来简化服务器端的网络编程,由于 Node 是基于一个JavaScript 引擎的,因此天生的就具有动态性和可扩展性,因此在开发网络程序上,确实是一个不错的选择。

其他应用中的 Javascript

通过使用 JavaScript 的引擎的独立实现,比如 Rhino,SpliderMonkey,V8 等,可以将 JavaScript 应用到几乎所有的领域,比如应用程序的插件机制,高级的配置文件分析,用户可定制功能的应用,以及一些类似与浏览器场景的比如 Mozilla 的 ThunderBrid,Mozilla 的 UI 框架 XUL,笔者开发的一个 Todo 管理器 sTodo(在第十章详细讨论)等。

图 sTodo 一个使用 JavaScript 来提供插件机制的 Java 桌面应用

Java 版的 JavaScript 引擎原生的可以通过使用 Java 对象,那样将会大大提高JavaScript 的应用范围,如数据库操作,服务器内部数据处理等。当然,JavaScript 这种动态语言,在 UI 方面的应用最为广泛。著名的 Adobe reader 也支持 JavaScript 扩展,并提供 JavaScript 的 API 来访问PDF 文档内容,可以通过 JavaScript 来定制 Adobe Reader 的界面以及功能等。
app.addMenuItem({
    cName: "-",
    // menu divider
    cParent: "View",
    // append to the View menu
    cExec: "void(0);"
});
app.addMenuItem({
    cName: "Bookmark This Page &5",
    cParent: "View",
    cExec: "AddBookmark();",
    cEnable: "event.rc= (event.target != null);"
});
app.addMenuItem({
    cName: "Go To Bookmark &6",
    cParent: "View",
    cExec: "ShowBookmarks();",
    cEnable: "event.rc= (event.target != null);"
});
app.addMenuItem({
    cName: "Remove a Bookmark",
    cParent: "View",
    cExec: "DropBookmark();",
    cEnable: "event.rc= (event.target != null);"
});
app.addMenuItem({
    cName: "Clear Bookmarks",
    cParent: "View",
    cExec: "ClearBookmarks();",
    cEnable: "event.rc= true;"
});

为 Adobe Reader 添加了 4 个菜单项,如图:
另一个比较有意思的 JavaScript 实例为一个在线的遗传算法的演示,给定一个图片,然后将一些多边形(各种颜色)拼成一个图片,拼图的规则为使用遗传算法,使得这些多变形组成的图片与目标图片最为相似:
可见,JavaScript 在其他方面的也得到了广泛的应用。