向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的脚本并不保证按照指定执行顺序执行。
网友评论