1、使用”script”元素
2.1 <script> 元素
向HTML頁面中插入JavaScript的主要方法，就是使用”<script>“元素。
“<script>”有以下六個屬性：
- async：可選。表示應該立即下載腳本，但不應妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部腳本有效。
- charset：可選。表示通過src屬性指定的代碼的字符集。
- defer：可選。表示腳本可以延遲到文檔完全被解析和顯示之後再執行。只對外部腳本文件有效。
- language：已廢棄。原來用於表示編寫代碼使用的腳本語言。
- src：表示包含要執行代碼的外部文件。
- type：可選。可以看做是language的替代屬性。表示編寫代碼使用的腳本語言的內容類型。目前type這個屬性的值依舊還是text/JavaScript。不過這個屬性並不是必須的。
使用“<script>”元素的方式有兩種：直接在頁面中嵌入JavaScript代碼和包含外部JavaScript文件。
在使用”<script>“元素嵌入JavaScript代碼時，只需爲“<script>”指定type屬性。然後像這樣把JavaScript代碼直接放進元素內部即可：
<script type="text/javascript">
function sayHi(){
alert("Hi");
}
</script> 遇到字符串“</script>”，把字符串分隔爲兩部分。例如：
<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script> 如果是通過“<script>”來包含外部JavaScript文件，則src屬性爲必需的。
例如：
<script type="text/javajscript" src="example.js"></script> 需要注意的是：帶有src屬性的”<script>“元素不應該在其<script>和</script>標籤之間再包含額外的JavaScript代碼。如果包含了嵌入的代碼，則只會下載並執行外部腳本文件，嵌入的代碼會被忽略。
src還可以包含外部域的JavaScript文件。
例如：
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>只要不存在defer和async屬性，瀏覽器都會按照<script>元素在頁面中出現的先後順序對它們依次解析。
2.1.1 標籤的位置
爲了避免“等到全部的JavaScript代碼都被下載、解析和執行完成以後，纔開始呈現頁面的內容，導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器窗口一片空白”這個問題，現代web程序一般都把全部JavaScript引用放在<body>元素頁面的內容後面。例如：
<!DOCTYPE HTML>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裏放內容-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>這樣在解析包含JavaScript的代碼之前，頁面的內容將完全呈現在瀏覽器中。
2.1.2 延遲腳本
defer屬性的用途是表明腳本在執行時不會影響頁面的構造。也就是說，腳本會被延遲到整個頁面都解析完畢再運行。因此在<script>元素中設置defer屬性，相當於告訴瀏覽器立即下載，但延遲執行。
<!DOCTYPE HTML>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裏放內容-->
<script type="text/javascript" src="example1.js" defer="defer"></script>
<script type="text/javascript" src="example2.js" defer="defer"></script>
</body>
</html> 這個例子中，<script>元素將延遲到瀏覽器遇到</html>標籤之後再執行。
HTML5規範要求腳本按照它們出現的先後順序執行，第一個延遲腳本會先於第二個延遲腳本。而這個兩個腳本會先於DOMContentLoaded事件執行。但在現實中，延遲腳本並不一定會按照順序執行，也不一定會在DOMContentLoaded事件觸發前執行，因此最好只包括一個延遲腳本。
2.1.3 異步腳本
async屬性與defer屬性類似，都用於改變處理腳本的行爲，只適用於外部腳本文件，並告訴瀏覽器你立即下載文件。但與defer不同的是標記爲async屬性的腳本並不保證按照指定它們的先後順序執行。
例如：
<!DOCTYPE HTML>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裏放內容-->
<script type="text/javascript" src="example1.js" async></script>
<script type="text/javascript" src="example2.js" async></script>
</body>
</html> 在以上代碼中，第二個腳本問加你可能會在第一個腳本文件之前執行。因此確保兩者之間互不依賴非常重要。
指定async屬性的目的是不讓頁面等待兩個腳本下載和執行，從而異步加載頁面其他內容。爲此，建議異步腳本不要在加載期間修改DOM。
異步腳本一定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件觸發之前或之後執行。
小結：
- 在包含外部JavaScript文件時，必須將src屬性設置爲指向相應文件的URL。而這個文件既可以是與包含它的頁面位於同一個服務器上的文件，也可以是其他任何域中的文件。
- 所有
<script>元素都會按照它們在頁面中出現的先後順序被依次解析。在不使用defer和async屬性的情況下，只有在解析完前面的<script>元素中的代碼之後，纔會開始解析後面<script>元素中的代碼。 - 由於瀏覽器會先解析完不使用defer屬性的
<script>元素中的代碼，然後再解析後面的內容，所以一般應該把<script>元素放在頁面最後，即主要內容後面，</body>標籤前面。 - 使用defer屬性可以讓腳本在文檔完全呈現之後再執行。延遲腳本總是按照指定它們的順序執行。
- 使用async屬性可以讓當前腳本不必等待其他腳本，也不必阻塞文檔呈現。不能保證異步腳本按照它們在頁面中出現的順序執行。
另外，使用<noscript>元素可以指定在不支持腳本的瀏覽器中顯示的替代內容。但在啓用了腳本的情況下，瀏覽器不會顯示<noscript>元素中的任何內容。