第2章
世界上最流行的编程语言——JavaScript
◎本章教学微视频：12个 18分钟
学习指引
在程序开发过程中，总是需要对代码程序不断地调试以及优化才能达到理想的效果，JavaScript也同样需要一套有力的开发工具。本章将详细介绍与JavaScript相关工具的应用，主要内容包括JavaScript常用的编写工具、开发工具与调试工具。
重点导读
- 掌握JavaScript编写工具的使用。
- 掌握JavaScript开发工具的使用。
- 掌握JavaScript调试工具的使用。
2.1 JavaScript的编写工具
JavaScript是一种脚本语言，代码不需要编译成二进制，而是以文本的形式存在，因此任何文本编辑器都可以作为其开发环境。通常使用的JavaScript编辑器有记事本、UltraEdit和Dreamweaver。
2.1.1 系统自带编辑器记事本
记事本是Windows系统自带的文本编辑器，也是最简洁方便的文本编辑器。由于记事本的功能过于单一，所以要求开发者必须熟练掌握JavaScript语言的语法、对象、方法和属性等。这对于初学者是极大的挑战，因此，不建议使用记事本。但是由于记事本简单方便、打开速度快，所以常用来进行局部修改，如图2-1所示。
图2-1 记事本编辑窗口
2.1.2 UltraEdit文本编辑器
UltraEdit是能够满足一切编辑需要的编辑器。UltraEdit是一套功能强大的文本编辑器，可以编辑文本、十六进制数据、ASCII码，可以取代记事本，内建英文单词检查，C++及VB指令突显，可同时编辑多个文件，而且即使开启很大的文件速度也不会慢。软件附有HTML标签颜色显示、搜寻替换以及无限制地还原功能，一般大家喜欢用其来代替记事本的文本编辑器，如图2-2所示。
图2-2 UltraEdit文本编辑器窗口
2.1.3 Dreamweaver开发工具
Adobe公司的Dreamweaver是一个非常优秀的网页开发工具，其用户界面也非常友好，深受广大用户的喜爱。Dreamweaver编辑窗口如图2-3所示。
提示：除了上述编辑器外，还有很多种编辑器可以用来编写JavaScript程序，如Aptana、1st JavaScript Editor、JavaScript Menu Master、Platypus JavaScript Editor、SurfMap JavaScript、JavaScript Editor等。“工欲善其事，必先利其器。”选择一款适合自己的JavaScript编辑器，可以让编辑工程事半功倍。
图2-3 Dreamweaver编辑窗口
2.2 JavaScript常用的开发工具
由于JavaScript缺少合适的开发工具的支持，编写JavaScript程序，特别是超过500行以上的JavaScript程序，就会变得非常复杂，若在代码中不小心多输入了一个“(”或“{”，则整段代码就有可能无法运行。本节就来介绍几款常用的JavaScript开发工具。
2.2.1 附带测试的开发工具——TestSwarm
TestSwarm是Mozilla实验室推出的一个开源项目，旨在为开发者提供在多个浏览器版本上快速、轻松测试自己JavaScript代码的方法。
目前，TestSwarm正在测试许多开发人员都依靠的诸多流行的开源JavaScript库，其中包括jQuery、YUI、Dojo、MooTools和Prototype等。如果用户想在自己的项目中使用TestSwarm，可以下载并在自己的服务器上安装TestSwarm。图2-4所示为TestSwarm的工作界面。
图2-4 TestSwarm的工作界面
2.2.2 半自动化开发工具——Minimee
在互联网领域，速度就是一切。这意味着当面对CSS和JavaScript文件的时候，文件大小是一个重要的要素。Minimee可以自动将文件最小化并对其进行组合，帮助用户化繁为简。图2-5所示为Minimee的工作界面。
图2-5 Minimee的工作界面
2.2.3 轻松建立JavaScript库的开发工具——Boilerplate
Boilerplate是基于HTML/CSS/JavaScript的一个快速、健壮和面向未来的网站模板。经过多年的迭代开发，功能更加完善，包括跨浏览器的正常化显示、性能优化、Ajax跨域通信和Flash处理等。这个模板包含一个.htaccess配置文件，通过该配置文件可以设置Apache缓存、网站播放HTML5视频、使用@font-face和允许使用gzip等。图2-6所示为Boilerplate的工作界面。
图2-6 Boilerplate的工作界面
它同样可以工作在手机浏览器，它拥有iOS、Android、Opera所支持的标签和CSS骨架。Boilerplate有以下特性。
- 支持HTML5。
- 跨浏览器兼容，包括对IE 6的支持。
- 高速缓存和压缩规则，最佳实践配置。
- 移动浏览器优化。
- 单元测试套件JavaScript分析。
- 移动与特定CSS规则的iOS和Android的浏览器支持。
2.3 JavaScript常用的调试工具
JavaScript调试器能帮忙找出JavaScript代码中的错误。要想成为一名高级JavaScript调试员，你需要知道你可用到的一些调试器、典型的JavaScript调试工作流程和高效调试的核心条件。
当调查一个特定问题时，通常将遵循以下过程。
（1）在调试器的代码查看窗口找出相关代码。
（2）在觉得可能发生问题的地方设置断点。
（3）若是行内脚本，则在浏览器中重载页面；若是一个事件处理器则单击按钮，以再次运行脚本。
（4）一直等到调试器暂停执行并通过代码。
（5）查看变量值。例如，查看那些本该包含一个值却显示未定义的变量，或者希望返回true却返回false时。
（6）如果需要，使用命令行对代码进行求值，或者为测试改变变量。
（7）通过学习导致错误情况发生的那段代码来找出问题所在。
这里介绍5个最常用的JavaScript调试工具。
2.3.1 调试工具——Drosera
Drosera可以调试任何基于WebKit的应用程序，Drosera的调试界面如图2-7所示。
图2-7 Drosera的调试界面
2.3.2 规则的调试工具——Dragonfly
Dragonfly可以高亮显示语法和断点，搜索功能强大，可以搜索当前选择的脚本，可以用文本、正则表达式来加载所有的JavaScript文件。Dragonfly的调试界面如图2-8所示。
图2-8 Dragonfly的调试界面
2.3.3 Firefox的集成工具——Firebug
Firefox集成了Firebug，它提供了一个丰富的Web开发工具，可以在任何网页编辑、调试和监控CSS、HTML与JavaScript。Firebug的调试界面如图2-9所示。
图2-9 Firebug的调试界面
2.3.4 前端调试利器——DebugBar
在IE 8之前，在IE中的调试只有alert命令，虽然可以在Visual Studio中进行调试，但过程比较麻烦。一个比较好的工具就是DebugBar，不过该工具与Firebug比起来，还是有很大差距的。
DebugBar虽然可以与Firebug一样获取页面元素、做源代码调试和CSS调试，但是，其功能实在有限。DebugBar工作界面如图2-10所示。
图2-10 DebugBar的工作界面
2.3.5 支持浏览器多的工具——Venkman
Venkman是Mozilla的JavaScript Debugger代码名称，可以在用户界面上和控制台命令中使用断点管理、调用栈检查、检查变量/对象等功能，可以让用户以最习惯的方式调试。
Venkman可以从http://www.hacksrus.com/~ginda/venkman/下载，然后用Firefox打开得到的xpi文件，它就会自动安装，重启Firefox，选择“工具”→JavaScript Debugger命令启动Venkman，其工作界面如图2-11所示。
图2-11 Venkman的工作界面
从工作界面中可以看出其窗口布局很清晰，Loaded Scripts中显示当前可用的JavaScript文件，单击文件旁边的加号，就会打开一个详细列表，列出该文件中的所有函数。
代码中的断点跟踪是调试工作中的重点，Venkman支持两种断点模式，分别是硬（Hard）断点和将来（Future）断点。将来断点设置在函数体之外的代码行上，一旦这些代码行加载到浏览器上就会立即执行。
下面给出一个实例，其中有一个JavaScript文件DebugSample.js和一个调用页面CallPage.html。
用Firefox打开CallPage.html，启动Venkman，在所需的代码行上设置一个断点，单击代码行左侧的边栏即可。每次单击这一行时，这行就会在以下3种间轮流切换：无断点、硬断点、将来断点。硬断点由一个红色的B指示，将来断点由橙色的F指示（注：此处界面在实际操作过程中会显示为相应的彩色，因本书是黑白印刷，无法正常显示出颜色，读者可在实际界面或者相关视频中看到。余同）。函数体外的代码行只能切换为无断点和将来断点。可以在“var y = "hello";”这一行设个断点，如图2-12所示。
然后单击页面中的test按钮，可以看到在断点处停止了，接下来的操作想必都知道了，它和其他的Debugger用法相同。
下面看一下Venkman的另一个强大特性。右击一个断点，在弹出的快捷菜单中选择Breakpoint Properties（断点属性）命令，如图2-13所示。
图2-12 设置断点
图2-13 右键快捷菜单
这样会打开Breakpoint Properties对话框，允许用户修改断点的行为，如图2-14所示。
这个窗口的强大之处在于“When triggered, execute…”（当触发时，执行…），选中这个复选框，会置一个文本框有效，可以编写JavaScript代码，每次遇到断点时都会执行此代码，向这个定制脚本传递的参数名为_count_，它表示遇到断点的次数。下面的4个行为中也以Stop if result is true的功能最强大，它意味着只有当定制代码的返回值为true时，断点才会暂停执行。
图2-14 Breakpoint Properties对话框
2.4 编写第一个JavaScript程序——Hello，JavaScript!
在记事本中编写JavaScript程序的方法很简单，只需打开记事本文件，在打开的窗口中输入相关JavaScript代码即可。
【例2-1】（实例文件：ch02\Chap2.1.html）在记事本中编写JavaScript的脚本，打开记事本文件，在窗口中输入如下代码：
将记事本文件保存为Chap2.1.html格式的文件，然后再使用IE浏览器打开即可浏览最后的效果，如图2-15所示。
图2-15 最后的效果
2.5 就业面试技巧与解析
2.5.1 面试技巧与解析（一）
面试官：如果当前浏览器不支持JavaScript，如何做才能不影响网页的美观？
应聘者：现在浏览器种类、版本繁多，不同浏览器对JavaScript代码的支持度不一样。为了保证浏览器不支持的这部分代码不影响网页的美观，可以使用HTML注释语句将其注释，这样便不会在网页中输出这些代码。
2.5.2 面试技巧与解析（二）
面试官：使用JavaScript编写好应用程序后，你认为还需要对JavaScript代码进行优化处理吗？
应聘者：对于我个人来说，优化处理是必要的，而且主要优化的是脚本程序代码的下载时间和执行效率，因为JavaScript运行前不需要进行编译而直接在客户端运行，所以代码的下载时间和执行效率直接决定了网页的打开速度，从而影响客户端的用户体验效果。