向HTML中插入JacaScript的方法主要有3种：
- 页面嵌入<script>标签内联
- 页面嵌入<script>标签外联
- 直接在HTML元素中加入(很不常见了，我是没这么写过)
1. 嵌入<script>标签内联
<script type="text/javascript">
function sayHi() {
alert("hi");
}
</script>
注意用这种方式时，标签内部不可以出现“</script>”字符串，会被认为是代码结束的标志。
解决办法：转义字符 or 分成两部分
<script type="text/javascript">
function sayScript() {
alert("<\/script>");//或alert('<'+'/script>');alert('</'+'script>');等
}
sayScript();
</script>
2.页面嵌入<script>标签外联
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
注意：这样的用src来引入外部文件的<script>开关标签中间就不能在包含js脚本代码 ，写了也不执行。
3. js写在HTML标签中
<button type="submit" onclick="alert('clicked me')">提交</button>
关于引入的一些些事
<script>标签的常用属性
[async] 可选。异步脚本。立即下载脚本，不妨碍其他操作，比如下载其他资源或者加载其他脚本，只对外部脚本有效。
[charset]可选。表示通过src属性指定的代码的字符集。
[defer]可选。延迟脚本。立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行。只对外部脚本有效。
[src] 可选。路径。
[type]可选。language属性被废弃，type可以看做是替代属性，表示脚本的内容类型。
<script>标签的位置
本来应该和<link>标签放在头里，目的是把所有的外部文件都放在相同的位置。但是会导致页面加载延迟。所以我们一般把<script>放在</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>
async和defer
- 浏览器解析HTML是按照从上到下的顺序进行的。
- 浏览器加载js时会产生阻塞效果，在js文件加载完成之前不会同时加载其他文档内容。如果没有HTML和CSS，页面没有内容，js就毫无意义。
<script>标签中的async和defer就是解决这个问题的。 - <script src="script.js"></script>
<script>标签中没有任何属性，此时就按照浏览器的默认方式，把js文件加载执行后，再加载页面其他内容。 - <script async src="script.js"></script>
async告诉浏览器，加载js文件的时候可以同时加载页面其他内容，（加载时是异步同时进行）但js文件一旦加载完成就立即执行，不管其他内容有没有加载或解析，执行的时候其它页面内容暂停加载。 - <script defer src="script.js"></script>
<script>标签中没有使用了defer属性，此时就告诉浏览器，加载JS文件的时候可以同时加载页面其它内容，（加载时是异步同时进行）JS文件加载完成后会延迟等待等待其他内容加载或解析完成后才会执。
image.png
其它注意点和执行的顺序
- 1.JS脚本的加载和执行分两个步骤，使用async和defer属性时，加载时都是异步加载，但执行时会有区别。
- 2.async和defer都只适用于外部引入的JS脚本文件。
- 3.有多个JS脚本时执行的顺序优先级：
- 4.使用async时由于加载和执行连续进行，所以是谁先加载完谁先执行，没有先后顺序。所以使用async时，各JS脚本之间最好不要有任何关联。
- 5.使用defer时，HTML5规范规定按照JS脚本在HTML页面中的先后顺序执行。但是现实中却并不一定是这样。所以一个HTML页面中最好只有一个使用defer的脚本。
最后的解决办法：
把所有JS脚本放在HTML页面内容最后，即</body>之前。
网友评论