第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运行前不需要进行编译而直接在客户端运行,所以代码的下载时间和执行效率直接决定了网页的打开速度,从而影响客户端的用户体验效果。