JavaScript，标准化的名称为ECMAScript，简称ES，本合集将使用更常见的名称——JavaScript。ES标准在不断的修订和改进，本合集着重讨论JavaScript编程语言和常用资源的应用，并以浏览器为运行环境，主要解决网站开发时的客户端编程问题。
本合集的测试环境依然使用HTML和CSS合集中使用的ASP.NET窗体项目，开发工具Visual Studio 2019的安装和相关配置可以参考文章《搭建网站测试环境》，文章的网页版地址为http://caohuayu.com/article/Article.aspx?id=a262001。
在网页中添加JavaScript代码
在网页中添加JavaScript代码的方法和CSS相似，有元素中嵌入、文件中使用script元素定义、导入外部代码文件三种方法，下面分别介绍。
在元素中嵌入JavaScript代码时，常用的方法是在元素的事件属性中定义代码，如下面的代码，可以在点击按钮时显示一个消息对话框。
HTML |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form action="test.aspx"> <input type="button" value="提示信息" onclick="alert('提示信息');" /> </form> </body> </html> |
本例，在按钮的onclick属性，即点击事件响应代码中使用alert()函数显示了“提示信息”，打开页面点击按钮会显示一个消息对话框，执行效果如下图所示。
#图#元素嵌入JavaScript代码
除了在元素事件中使用JavaScript代码，在a元素href属性中也可以使用“javascript:”前缀定义JavaScript代码，如下面的代码。
HTML |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <a href="javascript:alert('提示信息');">提示信息</a> </body> </html> |
页面显示与点击链接后的效果如下图所示。
#图#链接中嵌入JavaScript代码
网页文件中，可以使用script元素定义JavaScript代码，一般来讲，可以将script元素放在页面代码的最后，即</html>标记之后，这样就可以在页面元素加载并解析之后再处理JavaScript代码，当代码中需要处理网页元素时就不会出现元素还没有加载的情况。如下面的代码，会在页面加载后直接显示一个消息对话框。
HTML |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>消息对话框演示</h1> </body> </html> <script> alert("提示信息"); </script> |
加载页面后效果如下图所示。
#图#使用script元素定义JavaScript代码
单独定义JavaScript代码的文件一般以.js为扩展名。在Visual Studio 2019“解决方案资源管理器”窗口中的/demo目录右键菜单选择“添加”>>“添加新项”，添加test.js文件的选项如下图所示。
#图#添加JavaScript文件
接下来修改/demo/test.js文件内容如下面的代码。
JavaScript |
function sayHi(name) { alert(`Hi,${name}.`); } |
请注意，在alert()函数中的文本内容使用了一对反单引号定义，此符号在美式键盘布局中位于主键盘区数字1的左边，Tab键的上面。
回到/demo/test.html文件，并修改代码如下。
HTML |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>引用JavaScript文件</title> </head> <body> <h1>引用JavaScript文件</h1> </body> </html> <script src="test.js"></script> <script> sayHi("Tom") </script> |
代码中定义了两个script元素，下面分别讨论。
第一个script元素中，使用src属性定义引用的JavaScript代码文件位置，本例为网页文件同目录的test.js；实际工作中，可以将通用的JavaScript代码定义在不同的文件，如果文件在本地服务器，可以通过绝对路径或相对路径引用，而远程服务器文件则使用网络地址引用。除了src元素，在HTML5标准中还添加了async和defer属性，其中，defer属性表示在页面完全解析后再加载JavaScript代码；async属性表示页面和JavsScript代码同时加载，但不保证加载顺序。如果代码库中需要操作页面元素，则应使用defer属性；如果代码库中不需要操作页面元素则可以使用async属性。
第二个script元素中调用了/demo/test.js文件中定义的sayHi()函数，并带入参数内容"Tom"，打开页面后会显示对话框并显示“Hi,Tom.”，效果如下图所示。
#图#引用JavaScript代码文件
以上就是在网页中应用JavaScript代码的基本形式，可以根据实际需要灵活选择。
对话框
前面的示例中使用了alert()函数显示消息对话框，其应用很简单，参数只需要指定显示的信息即可。参数可以是JavaScript中支持的所有数据类型，如数值（整数和浮点数）、字符串（文本）、布尔值、空值（null）、未定义（undefined）等。
除了使用alert()函数显示消息对话框，还可以使用confrim()函数显示确认对话框，使用prompt()函数显示数据输入对话框，下面分别介绍。
confirm()函数需要一个参数，指定需要用户确认的信息，当用户选择确定（OK）时函数返回true值，选择取消（cancel）时返回false值；获取用户的选择后可以根据选择结果进一步操作。下面的代码演示了confirm()函数的基本应用。
JavaScript |
<script> if (confirm("确定继续操作吗？")===true) alert("是"); else alert("否"); </script> |
打开页面会显示确认对话框，选择“确定”后会通过消息对话框显示“是”，选择“取消”后会通过消息对话框显示“否”。执行效果如下图所示。
#图#确认对话框
prompt()函数用于获取用户输入的数据，其中，参数一指定提示信息，参数二可以设置对话框中显示的默认值，不指定时为空。当用户点击“确认”按钮时，函数返回用户输入的字符串内容；当用户点击“取消”时，函数返回null值。下面的代码演示了prompt()函数的应用。
JavaScript |
<script> let result = prompt("请输入数据"); if (result === null) alert("取消操作"); else alert(result); </script> |
代码，首先使用变量result保存用户输入数据或取消操作的结果。当结果为null时显示“取消操作”，否则显示用户输入的内容。操作效果如下图所示。
#图#输入对话框
JavaScript关键字和保留字
代码中，关键字是具有特殊含义和功能的标识符，定义自己的标识符时（如变量、常量、函数等），不要使用关键字作为名称；在JavaScript（ECMAScript）标准中，编程语言使用了一些关键字，并有一些保留字可能在将来的标准中成为关键字，在接下来的学习和工作中应注意，这些关键字和保留字不应作为自定义的标识名名称。下面给出这关键字和保留字作为参考。
abstract | async | await | boolean | break |
byte | case | catch | char | class |
const | continue | debugger | default | delete |
do | double | else | enum | export |
extends | final | finally | float | for |
from | function | goto | if | implements |
import | in | instanceof | int | interface |
let | long | native | new | of |
package | private | protected | public | return |
short | static | super | switch | synchronized |
this | throw | throws | transient | try |
typeof | var | void | volatile | while |
with | yied | | | |
此外，在JavaScript代码中还有一些特殊的值和对象，如NaN、Infinity、undefined、arguments等，定义自己的标识符同样不应使用这些名称。
最后，需要注意的是，JavaScript代码是区分字母大小写的，如if是关键字，IF和If则不是关键字。
10个月宝宝每天需要喝多少奶粉？
