JavaScript與HTML的結(jie)合(he)方式(shi)
時間：2018-09-27 來源：未(wei)知(zhi)
向HTML頁面中插入JavaScript的(de)主要方(fang)法，就是使用<script>元素。
script元素的屬性(xing)：
async：可選。表(biao)示應該立即下(xia)載(zai)(zai)腳本，但(dan)不應妨礙頁面中(zhong)的其(qi)他操作(zuo)，比如(ru)下(xia)載(zai)(zai)替他資源或等待(dai)加(jia)載(zai)(zai)其(qi)他腳本。只對外部腳本文(wen)件有效。
charset：可選(xuan)。表示通過src屬性(xing)指定的代碼的字符集。
defer：可選。表示(shi)腳本可以延(yan)遲到文檔(dang)完全被解析和(he)顯示(shi)之后在執行。只對外部腳本文件有效。
src：可選。表示包含要執行代(dai)碼(ma)的(de)外部文件。
type：可選。可以看成是language的(de)替代(dai)屬性，表示編寫代(dai)碼使(shi)用(yong)的(de)腳本語言的(de)內容(rong)類型。默認(ren)值(zhi)(zhi)以及通常(chang)情況下的(de)使(shi)用(yong)值(zhi)(zhi)：text/javascript。
script元素的使(shi)用方式：
一：直接(jie)在頁面中嵌入JavaScript代(dai)碼。
二：包含(han)外部JavaScript文件。
注意：
帶(dai)有src屬性(xing)的(de)<script>元(yuan)素(su)不(bu)應該在其<script>和<script/>標簽(qian)之間(jian)再包含(han)額外(wai)的(de)JavaScript代(dai)(dai)碼(ma)。如(ru)果包含(han)了(le)嵌入(ru)的(de)代(dai)(dai)碼(ma)，則只(zhi)會下(xia)載并執(zhi)行(xing)外(wai)部腳本(ben)文件，嵌入(ru)的(de)代(dai)(dai)碼(ma)會被忽略。另(ling)外(wai)通(tong)過<script>元(yuan)素(su)的(de)src屬性(xing)還可以包含(han)來(lai)自(zi)外(wai)部域的(de)JavaScript文件。
標簽的位置：
傳統做法：所(suo)有<script>元(yuan)素都(dou)應該放在頁面(mian)的<head>元(yuan)素中(zhong)。
缺點(dian)：對(dui)于那些需要(yao)很多JavaScript代碼的(de)頁面來說，這無疑會(hui)導致(zhi)瀏覽(lan)器(qi)在呈現(xian)頁面時出現(xian)明顯的(de)延遲，而延遲期間的(de)瀏覽(lan)器(qi)窗(chuang)口將會(hui)是一片(pian)空白。
現代做法(fa)：一般會(hui)把全部JavaScript引用放在<body>元素中頁面內容的后面。
延遲腳本：
<script>標簽多的defer屬(shu)性，用途是表明腳本在(zai)執行時不會影響頁面(mian)的構造。也就是說，腳本會被延(yan)遲到整個頁面(mian)都解析完畢(bi)后(hou)在(zai)運行，因此(ci)，defer屬(shu)性相當(dang)于告訴(su)瀏覽(lan)器(qi)立即下載，但延(yan)遲執行。
defer屬性只適用(yong)于(yu)外部腳本。
異步腳本：
HTML5為(wei)(wei)(wei)<script>元素定(ding)義了async屬性。這個屬性與defer屬性類似，都用于(yu)改變處(chu)理腳(jiao)(jiao)本(ben)的(de)行(xing)為(wei)(wei)(wei)。async屬性只(zhi)適用于(yu)外部腳(jiao)(jiao)本(ben),并(bing)告訴瀏覽(lan)器立即下(xia)(xia)載文件。但標記(ji)為(wei)(wei)(wei)async的(de)腳(jiao)(jiao)本(ben)并(bing)不保證按照指定(ding)它們的(de)先后順序(xu)執行(xing)。但指定(ding)async屬性的(de)目的(de)是不讓(rang)頁(ye)面等待多個腳(jiao)(jiao)本(ben)下(xia)(xia)載和執行(xing)，從(cong)而(er)異步(bu)(bu)加(jia)(jia)載頁(ye)面其他內容。為(wei)(wei)(wei)此建議異步(bu)(bu)腳(jiao)(jiao)本(ben)不要在加(jia)(jia)載期間修改DOM。異步(bu)(bu)腳(jiao)(jiao)本(ben)一定(ding)會在頁(ye)面的(de)load事件前執行(xing)。
問題：并不(bu)是所有的瀏覽器都支(zhi)持JavaScript？
解釋(shi)：不支持的瀏覽(lan)器會(hui)把<script>元素的內容直接輸(shu)出到頁面中，因而會(hui)破壞頁面的布局和外(wai)觀。
解(jie)決方式：給腳(jiao)本(ben)加上(shang)HTML注(zhu)釋。
原理：不支持(chi)JavaScript的(de)瀏覽器(qi)會(hui)忽略<script>標簽中(zhong)的(de)內容，而那(nei)些(xie)支持(chi)JavaScript的(de)瀏覽器(qi)在遇到這種情況時，則必須進一步確(que)認(ren)其中(zhong)是(shi)否包(bao)含需(xu)要(yao)解(jie)析(xi)的(de)JavaScript代碼。但是(shi)現在所有(you)的(de)瀏覽器(qi)都已經(jing)支持(chi)JavaScript了，因此也沒(mei)有(you)必要(yao)再使用這種格式了。
引用外部文件的好處：
可維護性：可以再不觸(chu)及HTML的情(qing)況下，集中精(jing)力編(bian)輯JavaScript代碼。
可緩存 ：如果有多個頁面(mian)都需要使(shi)用同一(yi)個文件，那么這個文件只(zhi)需要下載(zai)一(yi)次(ci)。加快頁面(mian)加載(zai)的速度。
適應未來(lai)：無需(xu)使用前面提到的注釋(shi)hack。
<noscript>元素：
可以解(jie)決瀏覽器不支持JavaScript時，頁面平穩地(di)退化。
當出(chu)現(xian)以下情況之一時<noscript>中的內容(rong)才會(hui)呈現(xian)出(chu)來，否則永遠(yuan)也不會(hui)顯(xian)示：
; 瀏覽器不支持JavaScript。
瀏覽器支持腳(jiao)本，但腳(jiao)本被(bei)禁用(yong)。
