下载掌阅APP，畅读海量书库
立即打开
1.1节和1.2节主要介绍了JavaScript基本概念和JavaScript开发工具。为了帮助读者快速入门JavaScript，本节将介绍JavaScript基本使用，包括JavaScript初体验、JavaScript代码引入方式、JavaScript常用的输入输出语句和JavaScript注释等内容。
为了帮助读者初次体验JavaScript，下面将通过一个案例演示如何在Visual Studio Code代码编辑器中编写一段简单的JavaScript代码。本案例的要求是打开网页时自动弹出一个警告框，警告框中的提示内容为“锲而不舍，金石可镂”。
创建Example1.html文件，具体代码如例1-1所示。
例1-1 Example1.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=＂UTF-8＂> 5 <title>Document</title> 6 </head> 7 <body> 8 <script> 9 alert（＇锲而不舍，金石可镂＇）; 10 </script> 11 </body> 12 </html>
编写完JavaScript代码后，按“Ctrl+S”快捷键保存代码，然后右击Visual Studio Code代码编辑器中的Example1.html文件，选择“Open with Live Server”，就会自动通过浏览器打开Example1.html文件。
例1-1的运行结果如图1-10所示。
图1-10 例1-1的运行结果
由图1-10可知，浏览器的页面弹出了警告框，警告框中的内容为“锲而不舍，金石可镂”，说明JavaScript代码运行成功。
在网页中编写JavaScript代码时，有3种引入JavaScript代码的方式，分别是行内式、内部式和外部式，下面分别对这3种引入方式进行讲解。
行内式将JavaScript代码作为HTML标签的属性值使用。例如，在打开网页时自动弹出一个警告框，警告框中的提示内容为“通过行内式引入JavaScript代码”，示例代码如下。
<body onload=＂alert（＇通过行内式引入JavaScript代码＇）;＂> </body>
在上述示例代码中，<body>标签的onload属性表示页面加载事件，用于在网页打开时自动执行JavaScript代码，该属性的值为行内式JavaScript代码。
需要说明的是，使用行内式不适合在HTML标签中书写大量的JavaScript代码，这是因为行内式代码与HTML标签混合在一起，不利于代码维护。
内部式将JavaScript 代码写在<script>标签中。<script>标签可以写在<head>标签或<body>标签中。例如，在打开网页时自动弹出一个警告框，警告框中的提示内容为“通过内部式引入JavaScript代码”，示例代码如下。
<body>
<script>
alert（＇通过内部式引入JavaScript代码＇）;
</script>
</body>
由于通过内部式可以将多行JavaScript 代码写在<script>标签中，相比于行内式，使用内部式更方便阅读代码，所以内部式是引入JavaScript代码的常用方式之一。
另外，<script>标签有一个type属性，该属性表示脚本类型。由于在HTML5中type属性的默认值为text/javascript（表示JavaScript），所以在使用HTML5时可以省略type属性。
外部式将JavaScript代码单独写在一个文件中（一般使用“.js”作为该文件的扩展名），然后在HTML中通过<script>标签引入该文件。外部式适合在JavaScript代码量较多的情况下使用。例如，创建一个test.js文件，在该文件中编写如下代码。
alert（＇通过外部式引入JavaScript代码＇）;
在HTML文件中使用外部式引入JavaScript代码，示例代码如下。
<body>
<script src=＂test.js＂></script>
</body>
上述代码表示引入当前目录下的test.js文件。需要注意的是，在使用外部式时，<script>标签内不可以编写JavaScript代码。
以上分别介绍了引入JavaScript代码的3种方式。在实际开发中，提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript 这3部分代码，这样可以提高代码的可读性和可维护性。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScript代码时，推荐使用外部式。
外部式相比内部式，具有以下3点优势。
①使用外部式JavaScript代码存在于独立文件中，有利于修改和维护，而使用内部式会导致HTML代码与JavaScript代码混合在一起。
②使用外部式可以通过浏览器缓存提高响应速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器会将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件。
③使用外部式有利于HTML页面代码结构化，可以把大量的JavaScript 代码分离到HTML页面外，这样既美观，又方便文件级别的代码复用。
另外，浏览器运行JavaScript 代码时，无论使用的是内部式还是外部式，页面的加载和渲染都会暂停，等待脚本执行完成后才会继续。为了尽可能减少对整个页面的影响，推荐将不需要提前运行的JavaScript代码所在的<script>标签放在HTML文档的底部。
多学一招：JavaScript异步加载
使用外部式时，为了减少JavaScript加载过程对页面造成的影响，可以使用HTML5为<script>标签新增的两个可选属性 async 和 defer，实现异步加载。实现异步加载后，即使JavaScript文件下载失败，也不会阻塞后面的JavaScript代码运行。
async 属性用于异步加载，即先下载文件，不阻塞其他代码运行，下载完成后再运行，示例代码如下。
<script src=＂file.js＂ async></script>
defer属性用于延后执行，即先下载文件，不阻塞其他代码运行，直到网页加载完成后再运行，示例代码如下。
<script src=＂file.js＂ defer></script>
在实际开发中，为了方便数据的输入和输出，JavaScript提供了输入输出语句。常用的输入输出语句如表1-3所示。
表1-3 常用的输入输出语句
下面分别演示prompt()语句、alert()语句、document.write()语句和console.log()语句的使用。
使用prompt()语句实现在网页中弹出一个带有提示信息的输入框，示例代码如下。
prompt（＇请输入手机号：＇）;
prompt()语句的运行结果如图1-11所示。
由图1-11可知，页面中弹出了一个输入框，提示用户“请输入手机号：”，说明使用prompt()语句可以在网页中弹出一个带有提示信息的输入框。
图1-11 prompt()语句的运行结果
使用alert()语句实现在网页中弹出一个警告框，示例代码如下。
alert（＇这是一个警告框＇）;
alert()语句的运行结果如图1-12所示。
由图1-12可知，页面中弹出了一个警告框，提示用户“这是一个警告框”，说明使用alert()语句可以在网页中弹出一个警告框。
图1-12 alert()语句的运行结果
使用document.write()语句时，如果输出内容中含有HTML标签，则输出内容会被浏览器解析。下面使用 document.write()语句在页面中输出“谁知盘中餐，粒粒皆辛苦。”，示例代码如下。
document.write（＇谁知盘中餐，粒粒皆辛苦。＇）;
document.write()语句的运行结果如图1-13所示。
由图1-13可知，页面中输出了“谁知盘中餐，粒粒皆辛苦。”，说明使用document.write()语句能够在网页中输出内容。
图1-13 document.write()语句的运行结果
使用console.log()语句在控制台中输出“一年之计在于春，一日之计在于晨。”，示例代码如下。
console.log（＇一年之计在于春，一日之计在于晨。＇）;
上述示例代码运行后，需要在浏览器的控制台中查看输出的内容。首先按“F12”键启动开发者工具，然后切换到“Console”（控制台）面板，即可查看 console.log()语句的输出内容。
console.log()语句的运行结果如图1-14所示。
图1-14 console.log()语句的运行结果
由图1-14可知，在控制台中输出了“一年之计在于春，一日之计在于晨。”，说明使用console.log()语句能够在控制台中输出内容。
脚下留心：输出内容包含JavaScript结束标签的情况
如果输出的内容中包含JavaScript 结束标签，则会导致代码提前结束。若要解决这个问题，需要使用“\”对结束标签的“/”进行转义，即使用“<\/script>”，示例代码如下。
document.write（＇<script>alert（1）;<\/script>＇）;
运行上述示例代码后，页面中会弹出一个警告框。如果没有使用“\”对结束标签进行转义，则</script>会被当成结束标签，使得页面不会弹出警告框，程序会报错。
注释用于对代码进行解释和说明，其目的是让代码阅读者能够更加轻松地了解代码的设计逻辑、用途等。在实际开发中，为了提高代码的可读性、方便代码的维护和升级，可以在编写JavaScript代码时添加注释。注释在程序解析时会被JavaScript解释器忽略。
JavaScript支持单行注释和多行注释，下面分别介绍这两种注释方式。
单行注释以“//”开始，到该行结束之前的内容都是注释。下面通过代码演示单行注释的使用。
prompt（＇请输入用户名：＇）; // 提示用户输入用户名
上述示例代码中，“//”和后面的“提示用户输入用户名”是一条单行注释，运行代码后这部分内容不会在页面中显示。
多行注释以“/*”开始，以“*/”结束。在多行注释中可以嵌套单行注释，但不可以嵌套多行注释。下面通过代码演示多行注释的使用。
/＊
prompt（＇请输入用户名：＇）;
＊/
上述示例代码中，从“/*”开始到“*/”结束的内容就是多行注释。
小提示：在Visual Studio Code代码编辑器中，可以使用快捷键对当前选中的行添加注释或取消注释，单行注释使用快捷键“Ctrl+/”，多行注释使用快捷键“Shift+Alt+A”。