JavaScript,标准化的名称为ECMAScript,简称ES,本合集将使用更常见的名称——JavaScript。ES标准在不断的修订和改进,本合集着重讨论JavaScript编程语言和常用资源的应用,并以浏览器为运行环境,主要解决网站开发时的客户端编程问题。
本合集的测试环境依然使用HTML和CSS合集中使用的ASP.NET窗体项目,开发工具Visual Studio 2019的安装和相关配置可以参考文章《搭建网站测试环境》,文章的网页版地址为http://caohuayu.com/article/Article.aspx?id=a262001。
在网页中添加JavaScript代码的方法和CSS相似,有元素中嵌入、文件中使用script元素定义、导入外部代码文件三种方法,下面分别介绍。
在元素中嵌入JavaScript代码时,常用的方法是在元素的事件属性中定义代码,如下面的代码,可以在点击按钮时显示一个消息对话框。
<!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代码,在a元素href属性中也可以使用“javascript:”前缀定义JavaScript代码,如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <a href="javascript:alert('提示信息');">提示信息</a> </body> </html>
页面显示与点击链接后的效果如下图所示。
网页文件中,可以使用script元素定义JavaScript代码,一般来讲,可以将script元素放在页面代码的最后,即</html>标记之后,这样就可以在页面元素加载并解析之后再处理JavaScript代码,当代码中需要处理网页元素时就不会出现元素还没有加载的情况。如下面的代码,会在页面加载后直接显示一个消息对话框。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>消息对话框演示</h1> </body> </html> <script> alert("提示信息"); </script>
加载页面后效果如下图所示。
单独定义JavaScript代码的文件一般以.js为扩展名。在Visual Studio 2019“解决方案资源管理器”窗口中的/demo目录右键菜单选择“添加”>>“添加新项”,添加test.js文件的选项如下图所示。
接下来修改/demo/test.js文件内容如下面的代码。
function sayHi(name) { alert(`Hi,${name}.`); }
请注意,在alert()函数中的文本内容使用了一对反单引号定义,此符号在美式键盘布局中位于主键盘区数字1的左边,Tab键的上面。
回到/demo/test.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代码的基本形式,可以根据实际需要灵活选择。
前面的示例中使用了alert()函数显示消息对话框,其应用很简单,参数只需要指定显示的信息即可。参数可以是JavaScript中支持的所有数据类型,如数值(整数和浮点数)、字符串(文本)、布尔值、空值(null)、未定义(undefined)等。
除了使用alert()函数显示消息对话框,还可以使用confrim()函数显示确认对话框,使用prompt()函数显示数据输入对话框,下面分别介绍。
confirm()函数需要一个参数,指定需要用户确认的信息,当用户选择确定(OK)时函数返回true值,选择取消(cancel)时返回false值;获取用户的选择后可以根据选择结果进一步操作。下面的代码演示了confirm()函数的基本应用。
<script> if (confirm("确定继续操作吗?")===true) alert("是"); else alert("否"); </script>
打开页面会显示确认对话框,选择“确定”后会通过消息对话框显示“是”,选择“取消”后会通过消息对话框显示“否”。执行效果如下图所示。
prompt()函数用于获取用户输入的数据,其中,参数一指定提示信息,参数二可以设置对话框中显示的默认值,不指定时为空。当用户点击“确认”按钮时,函数返回用户输入的字符串内容;当用户点击“取消”时,函数返回null值。下面的代码演示了prompt()函数的应用。
<script> let result = prompt("请输入数据"); if (result === null) alert("取消操作"); else alert(result); </script>
代码,首先使用变量result保存用户输入数据或取消操作的结果。当结果为null时显示“取消操作”,否则显示用户输入的内容。操作效果如下图所示。
代码中,关键字是具有特殊含义和功能的标识符,定义自己的标识符时(如变量、常量、函数等),不要使用关键字作为名称;在JavaScript(ECMAScript)标准中,编程语言使用了一些关键字,并有一些保留字可能在将来的标准中成为关键字,在接下来的学习和工作中应注意,这些关键字和保留字不应作为自定义的标识名名称。下面给出这关键字和保留字作为参考。
此外,在JavaScript代码中还有一些特殊的值和对象,如NaN、Infinity、undefined、arguments等,定义自己的标识符同样不应使用这些名称。
最后,需要注意的是,JavaScript代码是区分字母大小写的,如if是关键字,IF和If则不是关键字。