JavaScript 是什麼? | javascript下載
在正確的時機載入腳本涉及一些要注意的東西。並不如它看起來的簡單!其中一個常見的問題是,所有的HTML是根據出現順序載入。假如你使用JavaScript操作頁面中的元素(精確地來說是DOM元素[1]),如果JavaScript在這些HTML操作對象前被讀取及解析,你的程式將無法運作。上面的範例中,內部和外部JavaScript範例裡的程式碼都放在HTML的head區域,在body區被載入前就先被解析。這樣會造成一些問題,所以我們載入與執行在文件(HTML檔)的開頭,是HTMLbody還沒解析之前。這可能會產生錯誤,所以我們使用一些模式來處理它。在內部程式的範例中...
在正確的時機載入腳本涉及一些要注意的東西。並不如它看起來的簡單!其中一個常見的問題是,所有的 HTML 是根據出現順序載入。假如你使用 JavaScript 操作頁面中的元素(精確地來說是 DOM 元素[1]),如果 JavaScript 在這些 HTML 操作對象前被讀取及解析,你的程式將無法運作。
上面的範例中,內部和外部 JavaScript 範例裡的程式碼都放在 HTML 的 head 區域,在 body 區被載入前就先被解析。這樣會造成一些問題,所以我們載入與執行在文件(HTML 檔)的開頭,是 HTML body 還沒解析之前。這可能會產生錯誤,所以我們使用一些模式來處理它。
在內部程式的範例中,你可以看到以下這樣結構的程式碼:
document.addEventListener("DOMContentLoaded", function() { ... });這是一個事件偵聽器,它偵聽瀏覽器的「DOMContentLoaded」事件,它是在 HTML body 部分已經完全載入與解析發出。區塊內(... 的部分)的 JavaScript 直到事件被發出後才會執行,這樣子問題就被避開了。(你將會在這個課程中學習到什麼是事件[2])
在外部程式的範例中,我們使用比較現代的 JavaScript 特性來解決這個問題,defer 屬性,它告訴瀏覽器碰到這種 <script> 標籤時,繼續下載後面其他的 HTML 內容。
<script src="script.js" defer></script>在這個例子中,腳本(JavaScript 程式)與 HTML 會同時載入,所以程式將正確地執行。
備註: 在外部程式的範例裡,我們不需要使用 DOMContentLoaded 事件因為 defer 為我們解決問題了。而在內部程式的範例裡我們沒用 defer 屬性,是因為 defer 屬性只能用於外部的腳本。
這個問題有另一個舊式的解決方法,就是將 script 元素放在 body 元素的底部(剛好在 </body> 的前面),如此它就會在所有 HTML 被解析完之後才被載入。這個方法的問題在於腳本的載...