JavaScript-html中使用Javascript

一、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标签

使用情形：

浏览器不支持脚本；
浏览器支持脚本，但脚本被禁用。