1.2 Web开发工具
JavaScript的开发工具主要包括浏览器和代码编辑器两种软件。浏览器用于执行、调试JavaScript代码,代码编辑器用于编写代码。本节将针对这两种开发工具进行讲解。
1.2.1 浏览器
浏览器是访问互联网中各种网站所必备的工具。由于浏览器的种类、版本比较多,作为JavaScript开发人员需要解决各种浏览器的兼容性问题,确保用户使用的浏览器能够准确执行自己编写的程序。表1-1列举了几种常见的浏览器及其特点。
表1-1 常见浏览器
在表1-1列举的浏览器中,Internet Explorer浏览器的常见版本有6、7、8、9、10、11。其中6、7、8发布时间较早,用户数量多,但兼容性和执行效率稍微低一些。建议选择各方面比较优秀的Chrome浏览器或者Firefox浏览器使用。
面对市面上众多的浏览器,开发人员如何掌控程序的兼容性呢?实际上,许多浏览器都使用了相同的内核,了解其内核就能对浏览器有一个清晰的归类。浏览器内核分成两部分:排版引擎和JavaScript引擎。排版引擎负责将取得的网页内容(如HTML、CSS等)进行解析和处理,然后显示到屏幕中。JavaScript引擎用于解析JavaScript语言,通过执行代码来实现网页的交互效果。目前国内大部分浏览器都采用了WebKit或Blink内核,一些双核浏览器将其作为“急速模式”的内核。在移动设备中,iPhone和iPad等苹果iOS平台使用WebKit内核;Android 4.4之前的Android系统浏览器内核是WebKit,在Android 4.4系统中更改为Blink。
1.2.2 代码编辑器
JavaScript和jQuery源代码文件均为纯文本内容,用PC操作系统中自带的写字板或记事本工具就可以打开和编辑源代码内容。因此本书不对开发工具做特定要求,使用任意一款纯文本编辑器均可以进行网页内容的编写。
这里介绍几款常用的网页开发工具软件:Adobe Dreamweaver、Sublime Text、NodePad++、EditPlus和HBuilder。
1.Adobe Dreamweaver
Adobe Dreamweaver是一款所见即所得的网页编辑器,中文名称为“梦想编织者”或“织梦”。该软件最初的1.0版是1997年由美国Macromedia公司发布的,后来该公司于2005年被Adobe公司收购。Dreamweaver也是当时第一套针对专业Web前端工程师所设计的可视化网页开发工具,整合了网页开发与网站管理的功能。Dreamweaver支持HTML5/CSS3源代码的编辑和预览功能,其最大的优点是可视化性能带来的直观效果,开发界面可以分屏为代码部分与预览视图,开发者修改代码部分时预览视图会随着修改内容实时变化。Dreamweaver也有它的弱点,由于不同浏览器存在兼容性问题,Dreamweaver的预览视图难以达到与所有浏览器完全一致的效果。如需考虑跨浏览器兼容问题,预览画面仅能作为辅助参考。
2.Sublime Text
Sublime Text的界面布局非常有特色,它支持文件夹导航图和代码缩略图效果。该软件支持多种编程语言的语法高亮,也具有代码自动完成提示功能。该软件还具有自动恢复功能,如果在编程过程中意外退出,在下次启动该软件时文件会自动恢复至关闭之前的编辑状态。
3.Notepad++
NodePad++的名称来源于Windows系列操作系统自带的记事本NotePad,在此基础上多了两个加号,立刻带来了质的飞越。这是一款免费开源的纯文本编辑器,具有完整中文化接口并支持UTF-8技术。由于它具有语法高亮显示、代码折叠等功能,因此也非常适合作为计算机程序的编辑器。
4.EditPlus
EditPlus是由韩国Sangil Kim(ES-Computing)公司发布的一款文字编辑器,支持HTML、CSS、JavaScript、PHP、Java等多种计算机程序的语法高亮显示与代码折叠功能。其中最具特色的是EditPlus的自动完成功能,例如在CSS源文件中输入字母b加上空格,就会自动生成border:1px solid red语句。开发者可以自行编辑快捷键所代表的代码块,然后在开发过程中使用快捷方式让EditPlus自动完成指定代码内容。
5.WebStorm
WebStorm是jetbrains公司旗下一款JavaScript开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
WebStorm能智能地代码补全,支持不同浏览器的提示,还包括所有用户自定义的函数(项目中),代码补全包含了所有流行的库;代码不仅可以格式化,而且所有规则都可以自己来定义;支持联想查询,只需要按着Ctrl键点击(或称“单击”)函数或者变量等,就能直接跳转到定义;可以全项目查找函数或者变量,还可以查找使用并高亮显示;支持代码调试,界面和IDEA相似,非常方便。
6.HBuilder
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是用Java编写的。“快”,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、JS和CSS的开发效率。
1.2.3 技能训练
上机练习1 安装代码编辑器
需求说明
根据前面内容介绍,完成一款浏览器与代码编辑器的下载与安装。