一、Script标签
向 HTML 页面中插入 JavaScript 的主要方法，就是使用<script>元素。 通常我们刚开始学习的时候一般都知道script标签可能只有两个作用：
1、在其内写js代码
2、使用它的src属性引入外部的js文件。
其实它有6个属性，这里我们只需要了解如下几个属性：
- async:表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效
- defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。 IE7 及更早版本对嵌入脚本也支持这个属性。
- src
- type
二、引入JS的两种方式
1、在HTML中的script中嵌入js代码
注意：
- 在使用<script>嵌入 JavaScript 代码时，记住不要在代码中的任何地方出现"</script>"字符串，因为遇到</script>浏览器解析就会认为是js代码结束的位置
2、在HTML中引入外部的js文件
注意：
- 带有 src 属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的 JavaScript 代码，如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
- 通过<script>元素的 src 属性还可以包含来自外部域的 JavaScript 文件
三、标签的位置
传统的做法，会把script标签放到head标签中。可是，在文档的<head>元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。所以建议放到</body>标签前，等整个的DOM结构加载完再加载js文件。
例子：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="1.js"></script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
js:
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
alert(1);
}
上述代码如果点击页面中的button按钮，是不会弹出对话框的，因为html页面的代码是自上而下执行的，在head标签中遇到script，会引入js并解析，但是因为DOM结构还没有加载，所以js中找不到id为btn的元素，因而点击没有反应。
解决办法：
1、在script中加入延迟属性（defer）,加入这个属性后，外部js代码会下载，但会延迟到文档完全被解析和显示之后再执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="1.js" defer="defer"></script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
2、把script放到</body>标签前面，这样会等到DOM文档加载完后执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="1.js"></script>
</body>
</html>
综合上述两种方法，如果考虑用户体验的话，因为第一种方法还是会加载js,然后显示DOM.所以把<script>放在</body>前更好。
四、noscript标签
使用情形：
- 浏览器不支持脚本；
- 浏览器支持脚本，但脚本被禁用。
网友评论