下载掌阅APP，畅读海量书库
立即打开
JavaScript的开发工具主要包括浏览器和代码编辑器。浏览器用于运行、调试JavaScript代码，代码编辑器用于编写代码。本节将对浏览器和代码编辑器进行讲解。
浏览器是用户访问互联网中的各种网站所必备的工具，常见的浏览器及其特点如表1-2所示。
表1-2 常见的浏览器及其特点
在表1-2列举的浏览器中，Internet Explorer（简称IE）浏览器曾经有较高的市场份额，但因为跟不上Web技术的发展，目前已被淘汰。本书主要基于Chrome浏览器进行讲解。
浏览器一般由渲染引擎和JavaScript引擎组成。渲染引擎负责解析HTML代码与CSS代码，用于实现网页结构和样式的渲染；JavaScript引擎是JavaScript语言的解释器，用于读取网页中的JavaScript 代码并运行。Chrome 浏览器使用的渲染引擎是Blink，使用的JavaScript引擎是V8。由于Chrome浏览器的下载、安装相对简单，本节不讲解，读者可在Chrome浏览器官方网站中下载所需的版本进行安装。
多学一招：在Chrome浏览器控制台中运行代码
在Chrome 浏览器的控制台中可以直接输入JavaScript 代码并运行。下面演示如何在Chrome浏览器的控制台中使用alert（）语句实现在页面中弹出一个警告框。其中，alert（）语句是在1.3.3小节讲解的内容，此处为了演示操作，提前使用了该语句。
首先在Chrome浏览器中按“F12”键，或在网页的空白区域右击，并在弹出的快捷菜单中选择“检查”，启动开发者工具。然后切换到“Console”（控制台）面板，可以看到一个闪烁的光标，此时可以在控制台中输入代码，如图1-2所示。
在图1-2所示页面中，按“Enter”键，即可看到JavaScript代码的运行结果，如图1-3所示。
图1-3所示页面中弹出了警告框，说明在浏览器的控制台中可以直接输入JavaScript代码并运行。
另外，在控制台中还可以通过“Ctrl+鼠标滚轮”放大或缩小字体，通过“Shift+Enter”快捷键在输入的代码中换行。
图1-2 在控制台中输入代码
图1-3 JavaScript代码的运行结果
“工欲善其事，必先利其器。”一款优秀的代码编辑器能够极大地提高程序的开发效率。常见的JavaScript代码编辑器有Visual Studio Code、Sublime Text、HBuilder等。本书选择基于Visual Studio Code代码编辑器进行讲解。
Visual Studio Code（简称VS Code）是由微软公司推出的一款免费、开源的代码编辑器。Visual Studio Code代码编辑器具有如下特点。
●轻巧快速，占用系统资源较少。
●具备代码智能补全、语法高亮显示、自定义快捷键和代码匹配等功能。
●跨平台，可用于Windows、Linux和macOS操作系统。
●主题界面设计人性化。例如，可以快速查找文件、分屏显示代码、自定义主题颜色、快速查看最近打开的项目文件，以及查看项目文件结构等。
●提供丰富的扩展，用户可以根据需要自行下载和安装扩展，以增强代码编辑器的功能。
下面将讲解如何下载和安装Visual Studio Code代码编辑器、如何安装中文语言扩展、如何安装Live Server扩展以及如何创建项目文件夹。
打开浏览器并访问Visual Studio Code官方网站，如图1-4所示。
在图1-4所示的页面中，单击“Download for Windows”按钮可以下载Windows操作系统的Visual Studio Code安装包。如需下载其他操作系统的Visual Studio Code安装包，单击“
”按钮，即可看到其他操作系统版本的下载选项，如图1-5所示。
图1-4 Visual Studio Code官方网站
图1-5 其他操作系统版本的下载选项
Visual Studio Code安装包下载成功后，在下载目录中找到该安装包，双击启动安装程序，按照程序的安装向导提示操作，直到安装完成。
Visual Studio Code安装成功后，启动该编辑器，即可进入Visual Studio Code初始界面，如图1-6所示。
由图1-6可知，Visual Studio Code初始界面默认显示的语言是英文，如果要切换为中文，需要安装中文语言扩展。
图1-6 Visual Studio Code初始界面
为了提高Visual Studio Code代码编辑器的易用性，使其界面和提示信息显示为中文，需要安装中文语言扩展。单击Visual Studio Code初始界面左侧的第5个按钮“
”进入扩展界面，在该界面的搜索框中输入关键词“Chinese”找到中文语言扩展，单击“Install”按钮进行安装即可。安装中文语言扩展界面如图1-7所示。
图1-7 安装中文语言扩展界面
需要说明的是，中文语言扩展安装成功后，需要重新启动Visual Studio Code代码编辑器，该扩展才会生效。
Live Server 扩展用于搭建具有实时重新加载功能的本地服务器，可以实现保存代码后浏览器自动同步刷新，即时查看网页效果。单击Visual Studio Code初始界面左侧的第5个图标按钮“
”进入扩展界面，在该界面的搜索框中输入关键词“Live Server”找到Live Server扩展，单击“安装”按钮进行安装即可。安装Live Server扩展界面如图1-8所示。
图1-8 安装Live Server扩展界面
安装Live Server 扩展后，可在编写好的网页文件中右击，在弹出的快捷菜单中选择“Open with Live Server”调用浏览器打开网页文件。
在开发项目时，需要创建项目文件夹，以保存项目所需的文件。下面在本地创建一个文件夹Chapter01，创建好文件夹后，首先在Visual Studio Code代码编辑器的菜单栏中单击“文件”，然后单击“打开文件夹...”并选择Chapter01文件夹。打开文件夹后的界面如图1-9所示。
在图1-9中，可以进行新建文件、打开文件夹等操作。
图1-9 打开文件夹后的界面