1.2 开发工具
JavaScript 的开发工具主要包括浏览器和代码编辑器两种软件。浏览器用于执行、调试JavaScript代码，代码编辑器用于编写代码。本节将针对这两种开发工具进行讲解。
1.2.1 浏览器
浏览器是访问互联网中各种网站所必备的工具。由于浏览器的种类、版本比较多，作为JavaScript开发人员需要解决各种浏览器的兼容性，确保用户使用的浏览器能够准确执行自己编写的程序。表1-2列举了几种常见的浏览器及其特点。
表1-2 常见浏览器
在表1-2列举的浏览器中，Internet Explorer浏览器的常见版本有6、7、8、9、10、11。其中6、7、8发布时间较早，用户数量多，但兼容性和执行效率稍微低一些。本书选择各方面比较优秀的Google Chrome浏览器进行讲解。
面对市面上众多的浏览器，开发人员如何掌控程序的兼容性呢？实际上，许多浏览器都使用了相同的内核，了解其内核就能对浏览器有一个清晰的归类。浏览器内核分成两部分：排版引擎和JavaScript引擎。排版引擎负责将取得的网页内容（如HTML、CSS等）进行解析和处理，然后显示到屏幕中。JavaScript引擎用于解析JavaScript语言，通过执行代码来实现网页的交互效果。下面分别介绍一些常见的排版引擎和JavaScript引擎。
1.排版引擎
（1）Trident
Trident是Internet Explorer（IE）浏览器使用的引擎。Trident在Windows操作系统中被设计为一个功能模块，使得其他软件的开发人员可以便捷地将网页浏览功能加入到其开发的应用程序里。
国内很多的双核浏览器提供了“兼容模式”，该模式便是使用了Trident引擎。其代表软件有遨游、世界之窗、QQ浏览器、猎豹安全浏览器、360安全浏览器、360极速浏览器等。
（2）EdgeHTML
微软公司在Windows 10操作系统中提供了一个新的浏览器Microsoft Edge，其最显著的特点是使用了新引擎 EdgeHTML。EdgeHTML 在速度方面有了极大的提升，在 Trident 基础上删除了过时的旧技术支持代码，增加了许多对现代浏览器的技术支持。
（3）Gecko
Gecko是Mozilla FireFox（火狐浏览器）使用的引擎，其特点是源代码完全公开，可开发程度很高，全世界的程序员都可以为其编写代码、增加功能。Gecko 原本是由网景公司开发的，现在由Mozilla基金会维护。Gecko是跨平台的，支持在Windows、Linux和macOS等操作系统上运行。
（4）WebKit
WebKit是一个开放源代码的浏览器引擎，其所包含的WebCore 排版引擎和JavaScriptCore引擎来自于KDE项目组的KHTML和KJS。苹果公司采用了KHTML作为开发Safari浏览器的引擎后，衍生出了WebKit引擎，并按照开源协议开放了WebKit的源代码。WebKit具有高效稳定、兼容性好、源码结构清晰、易于维护的特点。Google Chrome浏览器也曾经使用过WebKit引擎。
（5）Blink
Blink是一个由Google公司和Opera Software ASA开发的浏览器排版引擎，Google公司将这个引擎作为开源浏览器Chromium项目的一部分。Blink是WebKit中WebCore组件的一个分支，并且在Chrome（28及后续版本）、Opera（15及后续版本）等浏览器中使用。
目前国内大部分浏览器都采用了WebKit或Blink内核，一些双核浏览器将其作为“急速模式”的内核。在移动设备中，iPhone和iPad等苹果iOS平台使用Webkit内核；Android 4.4之前的Android系统浏览器内核是Webkit，在Android 4.4系统中更改为Blink。
2.JavaScript引擎
（1）Chakra
Chakra是微软公司在IE 9~11、Microsoft Edge等浏览器中使用的JavaScript引擎。目前，该引擎的核心部分已经开源，其开源版本称为ChakraCore。
（2）SpiderMonkey
SpiderMonkey是Mozilla项目中的一个JavaScript引擎，主要用于Firefox浏览器。其后又发布了TraceMonkey、JaegerMonkey、IonMonkey、OdinMonkey等改进版引擎，提高了性能。
（3）Rhino
Rhino是Mozilla项目中的一个使用Java语言编写的JavaScript引擎，它被作为Java SE6上的默认JavaScript引擎，主要用于为Java执行环境提供JavaScript的支持。
（4）JavaScriptCore
JavaScriptCore是苹果在Safari浏览器使用的JavaScript引擎。
（5）V8
V8是Google为Chrome浏览器开发的JavaScript引擎，具有较快的执行速度。V8非常受欢迎，其他一些软件也整合了V8引擎，如Node.js。
1.2.2 代码编辑器
工欲善其事，必先利其器，一款优秀的开发工具能够极大提高程序开发效率与体验。在Web前端开发中，常用的编辑工具有Notepad++、Sublime Text、WebStorm等，下面介绍这些编辑工具的特点。
1.Notepad++
Notepad++是一款在 Windows 环境下免费开源的代码编辑器，支持的语言包括 HTML、CSS、JavaScript、XML、PHP、Java、C/C++、C#等。
2.Sublime Text
Sublime Text是一个轻量级的代码编辑器，具有友好的用户界面，支持拼写检查、书签、自定义按键绑定等功能，还可以通过灵活的插件机制扩展编辑器的功能，其插件可以利用 Python语言开发。Sublime Text是一个跨平台的编辑器，支持Windows、Linux、macOS等操作系统。
3.NetBeans
NetBeans是由Sun公司建立的开放源代码的软件开发工具，可以在Windows、Linux、和macOS 平台上进行开发，是一个可扩展的开发平台。NetBeans 开发环境可提供代码编写、调试、跟踪、语法高亮、语法检查、格式化代码风格等功能，还可以通过插件扩展更多功能。
4.HBuilder
HBuilder是由DCloud（数字天堂）推出的一款支持HTML5的Web开发编辑器，在前端开发、移动开发方面提供了丰富的功能和贴心的用户体验。HBuilder具有较全的语法库和浏览器兼容数据，还为基于HTML5的移动端App开发提供了良好的支持。
5.Adobe Dreamweaver
Adobe Dreamweaver是一个集网页制作和网站管理于一身的所见即所得网页编辑器，用于帮助网页设计师提高网页制作效率，降低网页开发的难度和HTML、CSS的学习门槛。但缺点是可视化编辑功能会产生大量冗余的代码，而且不适合开发结构复杂、需要大量动态交互的网页。
6.WebStorm
WebStorm是JetBrains公司推出的一款Web前端开发工具，JavaScript、HTML5开发是其强项，支持许多流行的前端技术，如jQuery、Prototype、Less、Sass、AngularJS、ESLint、webpack等。
在上述6种编辑工具中，Notepad++的特点是小巧，占用资源少，非常适合初学者使用。本书选择使用Notepad++进行代码编写，其软件界面如图1-3所示。
图1-3 Notepad++编辑器
1.2.3 【案例】第一个JavaScript程序
在初步了解 JavaScript 的基本概念和开发工具以后，相信大家已经迫不及待地想要使用JavaScript语言来编写网页程序了。那么，接下来就开始动手体验第一个JavaScript程序吧。
1.创建网页文件并设置编码
使用代码编辑器创建一个 hello.html 文件，并设置文件的编码格式。这里推荐大家使用UTF-8编码，这是目前网页开发中普遍使用的字符编码，可以支持世界上大部分的语言文字。
以Notepad++编辑器为例，将文件设置为UTF-8无BOM格式的方法，如图1-4所示。
图1-4 设置编码格式
注意
在编码格式中，BOM（Byte Order Mark）是指字节顺序标记，它会在文件头部占用3个字节，用来标识文件的编码格式。对于HTML网页，不需要通过BOM来识别编码，因此推荐选择无BOM格式。
2.编写一个简单的网页
设置编码后，编写一个简单的网页，具体示例如下。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>网页标题</title>
6 </head>
7 <body>网页内容</body>
8 </html>
在上述代码中，第4行声明了网页的编码为 UTF-8，帮助浏览器正确识别网页的编码格式。
3.将JavaScript嵌入到HTML中
为了将JavaScript代码嵌入到HTML中，需要为其找到一个合适的落脚点。通过HTML中的<script>标签可以包裹 JavaScript 代码，通常将其放到<head>或<body>等标签中，具体示例如下。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>网页标题</title>
6 <script>
7 alert(’第一个JavaScript程序！');
8 </script>
9 </head>
10 <body>网页内容</body>
11 </html>
在上述代码中，第6～8行就是嵌入到HTML中的JavaScript代码，这段代码用于弹出一个警告框。第7行是一条JavaScript语句，其中分号“;”表示该语句结束，后面可以编写下一条语句。
4.测试网页程序
使用浏览器打开hello.html文件，会看到JavaScript代码的运行结果，如图1-5所示。
图1-5 查看运行结果
从图1-5中可以看出，JavaScript 代码已经执行了，此时单击警告框上的“确定”按钮，就可以关闭警告框，显示网页内容。
脚下留心
在编写JavaScript代码时，应注意基本的语法规则，避免程序出错。具体如下。
① JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性。例如，将案例代码中的alert改为ALert，则警告框将无法弹出。
② JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写。例如，将alert后面的“(”换到下一行，程序依然正确执行。
③ 如果一条语句结束后，换行书写下一条语句，后面的分号可以省略。但是在实际开发中，保持良好的代码风格是很重要的，建议每一条语句都加上分号结束。