- JavaScript+jQuery前端开发基础教程（微课版）
- 夏帮贵 刘凡馨
- 1807字
- 2020-06-24 20:29:18
1.2 JavaScript编程工具
JavaScript脚本需要嵌入到HTML文档，所以可使用各种工具来编写JavaScript。最简单的工具是Windows的记事本。常用的集成Web开发工具有Visual Studio、Dreamweaver、Eclipse和IntelliJ IDEA等。集成开发工具通常具有语法高亮、自动完成、错误检测等功能。本书使用Visual Studio Community 2017，它是Microsoft推出的免费集成开发工具。
1.2.1 下载安装Visual Studio Community 2017
Microsoft在其官网提供了Visual Studio Community 2017的下载地址，下载页面如图1-1所示。
图1-1 Visual Studio Community 2017下载页面
将鼠标指针指向页面中的“下载Visual Studio”按钮，展开下载菜单，然后选择“Community 2017”命令，下载Visual Studio Community 2017安装程序。
下载完成后，启动安装程序，首先会打开许可条款对话框，如图1-2所示。单击“继续”按钮，打开组件选择对话框，如图1-3所示。
图1-2 Visual Studio许可条款对话框
图1-3 组件选择对话框
在组件选择对话框中可根据要开发的不同应用选择需要的开发工具。本书需要使用Visual Studio来编写HTML和JavaScript代码，所以要选中“ASP.NET和Web开发”选项。在右侧的“摘要”列表框中可查看具体安装的组件。对本书而言，可取消所有可选组件。最后，单击“安装”按钮执行安装操作。
安装向导通过网络下载所需组件，所以在安装过程中应保持网络连接。安装完成后，显示图1-4所示的对话框。在对话框中，单击“修改”按钮，可以添加或删除组件。单击“启动”按钮，可启动Visual Studio。
图1-4 安装完成对话框
1.2.2 使用Visual Studio
首次启动Visual Studio时，会显示欢迎对话框，如图1-5所示。
图1-5 Visual Studio欢迎对话框
如果注册了Microsoft账号，可单击“登录”按钮登录。用户也可单击“注册”链接注册新账号，还可以不使用账号，单击“以后再说”链接，打开开发环境设置对话框，如图1-6所示。
图1-6 开发环境设置对话框
在“开发设置”下拉列表中选中“Web开发”选项。用户可选择喜欢的主题颜色。最后，单击“启动Visual Studio”按钮，启动Visual Studio。Visual Studio首次启动后的界面如图1-7所示。
图1-7 Visual Studio首次启动后的界面
下面的例1-1说明了如何在Visual Studio中创建HTML文件。
【例1-1】 创建一个HTML文档，使用JavaScript代码在页面中输出“JavaScript欢迎你！”。源文件：01\test1-1.html。
具体操作步骤如下。
（1）选择“文件\新建\文件”命令，打开“新建文件”对话框，如图1-8所示。
图1-8 “新建文件”对话框
（2）在文件类型列表中选中“HTML页”，单击“打开”按钮，Visual Studio使用默认HTML模板创建新的HTML文件，代码如图1-9所示。
图1-9 Visual Studio创建的新HTML文件代码
（3）在<body>和</body>标记之间添加下面的JavaScript脚本代码。
<script>
document.write("JavaScript欢迎你！")
</script>
（4）单击工具栏中的
按钮保存文件，文件名为test1-1，如图1-10所示。
图1-10 保存文件
（5）单击工具栏中的“在浏览器中查看”按钮
，或者选择“文件\在浏览器中查看”命令，Visual Studio打开系统默认浏览器来查看HTML文件，如图1-11所示。
图1-11 浏览器中的HTML文件显示结果
提示
Visual Studio在打开浏览器查看HTML文件的显示结果时，注意浏览器地址栏中的URL地址：http://localhost:55026/test1-1.html。localhost:55026说明Visual Studio使用自带的IIS Express作为Web服务器。通常，测试HTML文件并不需要Web服务器，在Windows资源管理器中双击HTML文件也可打开浏览器查看其结果。需要执行服务器脚本时，则必须使用Web服务器。
1.2.3 使用浏览器开发人员工具
目前的各种浏览器几乎都提供了开发人员工具。在Firefox浏览器中，单击工具栏最右侧的“打开菜单”按钮
，打开菜单。在其中选择“Web开发者”选项，打开Web开发者菜单，在菜单中列出了打开各种开发工具的命令。在菜单中选择“Web控制台”命令，可打开浏览器开发人员工具窗口，并显示控制台，如图1-12所示。
图1-12 浏览器的开发人员工具窗口
提示
在大多数浏览器中，按【F12】键可直接打开开发人员工具窗口。
在控制台最下方的命令输入框中输入JavaScript语句，按【Enter】键即可立即执行该语句。控制台输入支持自动完成功能，可提示JavaScript关键字，用分号分隔，可一次输入多条语句执行。
开发人员工具窗口以选项卡的方式列出了各个开发工具，包括查看器、控制台、调试器和样式编辑器等。查看器可用于查看HTML文档的DOM结构，如图1-13所示。
图1-13 在查看器中查看HTML文档的DOM结构
简单的JavaScript语句可在浏览器控制台中执行测试，不必创建HTML文件。
浏览器开发人员工具中的“调试器”可调试当前HTML文件中的JavaScript脚本，如图1-14所示。
图1-14 使用“调试器”调试脚本
基本调试技巧如下。
• 设置断点：可为JavaScript脚本设置断点。在HTML代码窗口中，单击脚本所在行的左侧行号，可设置或者取消断点。设置断点后，刷新浏览器，脚本执行到第1个断点位置。
• 在监视窗口中可添加监视，观察变量或表达式在代码执行过程中的变化。
• 执行到断点位置后，再单击工具栏中
（跨越，快捷键【F10】）、
（步进，快捷键【F11】）或者
（步出，快捷键【Shift+F11】）等按钮可逐条执行语句。跨越操作会将函数调用视为一条语句，步进操作可转到函数内部逐条语句执行，步出操作执行到函数结束。