向HTML页面中插入JavaScript脚本的主要方法有三种:
- 页面嵌入<script>标签内联
- 页面嵌入<script>标签外联
- 直接在HTML元素中加入
嵌入<script>标签内联
<script type="text/javascript">
function sayHi() {
alert("hi");
}
</script>
当浏览器执行到上述<script>标签时,会暂停页面其他部分的加载。
在使用<script>嵌入JavaScript代码时,不要在代码中的任何地方出现"</script>"字符串,会被认为是代码结束的标志:
<script type="text/javascript">
function sayScript() {
alert("</script>");//错误
}
sayScript();
</script>
但是可以将它分成两部分,如:
<script type="text/javascript">
function sayScript() {
alert("<\/script>");//或alert('<'+'/script>');alert('</'+'script>');等
}
sayScript();
</script>
页面嵌入<script>标签外联
此时需要指定src
属性:
<script type="text/javascript" src="somename.js"></script>
可以是来自本地的js文件,也可以是外部域中的:
<script type="text/javascript" src="http://www.somewhere.com/somefile/somename.js"></script>
当src指定外部js文件地址后,<script>标签内部就不应再包含额外脚本。即使包含了额外的脚本,也会被忽略。
<script>元素的属性
async
属性:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或者等待加载其他脚本。只对外部脚本有效。
charset
属性:可选。表示通过src属性指定的代码的字符集。
defer
属性:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
language
属性:已废弃,原来用于表示编写代码使用的脚本语言(如JavaScript、JvavScript1.2等)。大多数浏览器都会忽略这个属性,因此也木有必要用了。
src
属性:可选。表示包含要执行代码的外部文件。
type
属性:可选。可以看成是language属性的替代属性;表示编写代码使用的脚本语言的内容类型。虽然text/javascript和text/ecmascript都已经不被推荐使用,但是考虑到浏览器兼容等,目前type的值依然可以是text/javascript。但并非是必须的。
无论是内联还是外联脚本,只要不存在defer和async属性,浏览器都会按照<script>出现的先后顺序对它们依次进行解析。
直接在HTML元素中加入
<button type="submit" onclick="alert('clicked me')">提交</button>
<script>标签的位置
按照惯例,<script>元素应该放在页面的<head>元素中,和<link>位置类似,这样做的目的就是把所有的外部文件(CSS和JavaScript)都放在同样的位置。但是这样会导致页面内容出现延迟。所以一般<script>标签都放在<body>元素中内容的最后也就是</body>之前。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>This is a para.</p>
<button type="submit">提交</button>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
延迟脚本
既然有defer
属性的存在,那么就可以把<script>元素放在页面的<head>标签内,相当于提醒浏览器立即下载但是延迟执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<link rel="stylesheet" href="index.css">
<script src="index.js" type="text/javascript" defer="defer"></script>
</head>
<body>
<p>This is a para.</p>
<button type="submit">提交</button>
</body>
</html>
而当有两个脚本都设置了defer="defer"
时,HTML5规范规定了第一个脚本会比第二个脚本先执行,但是实际上延迟脚本并不一定会按照顺序执行,因此最好只包含一个延迟脚本。
异步脚本
与defer
类似,async
只适用于外部脚本文件,并告诉浏览器立即下载文件。但是与defer
不同的是,标记为async
的脚本并不保证按照指定执行顺序执行。