- 剑指JavaScript：核心原理与应用实践
- 尚硅谷教育编著
- 2370字
- 2024-05-11 19:05:54
1.7 编写第一行JavaScript代码
千里之行，始于足下。下面将学习JavaScript编程工具的安装、代码编写位置、代码注释、程序调试工具等内容。相比其他编程语言，JavaScript简单明了，对初学者十分友好。
1.7.1 编程工具
使用任何一个文本编辑器都可以开发JavaScript程序，最简单的文本编辑器就是Windows系统自带的记事本，它可以写JavaScript程序，但是并不好用。为了开发方便，我们使用IDE（Integrated Development Environment，集成开发环境）开发JavaScript。
常见的JavaScript集成开发环境包括以下几种：
• Visual Studio Code：简称VS Code，由微软公司打造，完全免费使用。VS Code具备强大的代码自动补全功能，具有高度可扩展性，插件资源非常丰富；智能程度很高，不仅能自动检测并标出错误，还能自动寻找函数定义等；集成了GitHub功能（GitHub近年也被微软公司收购），使用非常方便。
• WebStorm：来自JetBrains公司，付费使用。WebStorm的内置版本管理、错误检测、代码重构等功能是其他编辑器难以超越的。
• HBuilder：来自DCloud公司，完全免费使用。HBuilder最令人兴奋的特点是其提供比其他工具更优秀的对Vue、uni-app等框架开发的支持，非常适合开发大型Vue项目等，而且它轻巧、极速、有强大的语法提示。
• Sublime：来自Sublime HQ公司，有条件限制地免费使用。Sublime最显著的特点是启动和使用时非常快速，十分轻巧，低内存消耗。严格来讲，Sublime Text是文本编辑器，不能称之为集成开发环境。
本书书写代码选择的编辑器是Visual Studio Code。下面就以Visual Studio Code为例，讲解它的安装和使用。当然，你也可以多尝试几款集成开发环境，从中选择最适合自己的一个。
Visual Studio Code是由微软公司开发的IDE工具，它是跨平台的，可以在Windows、Linux和macOS平台上运行。Visual Studio Code没有限定开发语言，几乎可以开发所有语言程序。
读者可自行到官方网站下载Visual Studio Code，官方网站会自动检测访问者的操作系统，直接单击“Download for…”按钮即可下载适配版，如图1-12所示。
图1-12 Visual Studio Code的下载页面
安装Visual Studio Code的过程非常简单，本书不再赘述。安装完成后启动软件，界面如图1-13所示。
图1-13 Visual Studio Code的界面
如果想让Visual Studio Code显示中文界面，就需要安装相关扩展。单击图1-14中的“扩展按钮”，在输入框中输入“Chinese”并按回车键，即可在扩展商店搜索相关插件。找到“Chinese（Simplified）”插件，单击“Install”按钮，即可完成插件安装。重启Visual Studio Code后，软件将显示中文界面，读者可以自行查看并熟悉相关内容。
图1-14 安装中文扩展
1.7.2 代码编写位置
本书讲解的是运行在浏览器上的JavaScript代码，其是需要嵌入HTML中执行的。JavaScript代码常见的编写位置有三种，本节将依次展开介绍。
第一种方式是在HTML中内嵌<script></script>标签对，将JavaScript代码写在标签内。代码如下：
观察这段代码，可以发现其在<body></body>对中添加了<script></script>标签对，并且将<script></script>标签对放在了其他标签的后面。
其实，<script></script>标签对放在HTML文件的任意位置都可以运行，但是我们建议将其写在其他标签的后面。因为JavaScript代码的执行会阻塞HTML标签的加载，所以建议开发人员将JavaScript代码写在其他标签的后面，其他标签加载完毕再执行JavaScript代码。JavaScript代码写在后面还有助于获取元素，这在后面学习DOM的时候会讲到，这里只做了解即可。
需要注意的是：在HTML4.01标准中，在<script>标签上应该添加type属性，其值为“text/javascript”，表示程序的类型是纯文本的JavaScript：
在HTML5标准中，<script>标签上的type属性不再要求必须书写，只需要简单书写<script></script>标签对即可。
第二种方式同样需要在HTML中内嵌<script></script>标签对，但不是把JavaScript代码写在此标签对中，而是先将其写在一个单独的js文件中，然后在标签对中通过src属性指定js文件的地址。
比如：新建一个名为“index.js”的文件，先将第一种方式<script></script>中的代码写在“index.js”文件中，然后通过<script></script>标签对的src属性引入。在HTML文件中可以这样书写：
这种写法可以实现HTML与JavaScript的分离，类似于使用CSS的<link>标签，只不过这里仍然使用<script></script>标签对。<script></script>标签对的位置与第一种方式相同，位于<body></body>中其他标签的后面。
第三种方式是使用DOM事件将JavaScript代码写在标签内。代码如下：
这里只需明白怎样将JavaScript代码放在标签内，代码的具体含义在后面的学习中会逐步明白。下面仅对代码含义进行简单讲解。
运行这段代码后，页面会出现两个按钮，如图1-15所示。
图1-15 页面效果
当单击按钮“单击按钮”时，可以触发对应的JavaScript代码执行；当将鼠标指针移入按钮“鼠标移入按钮”时，会触发对应的JavaScript代码执行。
需要注意的是：这种方式我们并不推荐使用，因为HTML与JavaScript不能进行分离，而是混在一起，代码的可读性是很差的。
1.7.3 代码注释
注释是给程序员看的提示性文字，可以增强代码可读性。在执行代码时，注释是不会被执行的。在调试程序时，也可以将部分代码进行注释，从而阻断这部分代码执行，查看其他代码的执行情况。
在JavaScript代码中可以使用双斜线“//”表示单行注释：
也可以进行多行注释，多行注释以一个斜杠和一个星号“/＊”开头，以一个星号和一个斜杠“＊/”结尾，如下：
为了美观，可以让注释的每行都有一个星号：
1.7.4 空格与分号
和其他许多编程语言一样，JavaScript使用分号（；）将语句分隔开，否则代码将无法正确执行。不过在JavaScript中，如果语句独占一行，则通常省略语句之间的分号（程序结尾或右大括号“}”之后的分号也可以省略）。
下面演示使用分号、省略分号，以及必须使用分号的情况，代码如下：
空格用于分隔关键字或其他代码，但是有的空格或空行在JavaScript中是无关紧要的，在执行代码的时候会被忽略。
合理地利用空格或空行进行排列，可以增强代码的清晰性与可读性。代码如下：
关键字var与变量名sum之间必须加一个空格，因为需要使用空格将它们分隔开。此行代码在运算符“=”和“+”的两边都加了一个空格，这仅仅是为了增强代码的清晰性，即使删掉空格也可以正常运行，下面的代码也是正确的：
1.7.5 程序调试
为了展示如何在浏览器中查看错误的代码信息，在下面的代码中我们故意写了一个错误：
使用Chrome浏览器运行这段代码。打开网页后，按F12键即可打开“检查”面板，其中的“Console”选项卡就是浏览器的控制台，如图1-16所示。
图1-16 “控制台”页面
观察图1-16可以发现控制台中用红色的字输出了错误信息。从错误信息可以看出，错误类型是“Uncaught ReferenceError（未捕获的引用错误）”。错误细节是“alret is not defined（alret没有被定义）”。在错误信息的最右侧还能看见发生错误的代码为第10行，据此即可寻找到代码出错的地方。