【Javascript入門-3】script 標簽引入js
前言
在開始學習之前，最好了解過一些Html的基礎知識。因為這一章節介紹的是script標簽，如果你還不了解少么是標簽，還需要去了解html的基礎知識。
script 標簽
在 HTML 中，javaScript 代碼通常插入在標簽之間。
您可以在 HTML 文檔中放置任意數量的腳本。腳本可以放在
， 或HTML 頁面的部分，或兩者中。在Html文檔中可以編寫任意多的script標簽，編寫任意多的js代碼。script標簽可以放在
， 或中。放在body和head的區別
這樣做的原因是 HTML 從上到下加載。頭部首先加載，然后是身體，然后是身體內部的所有東西。如果我們將 javaScript 放在 head 部分，整個 JavaScript 將在加載任何 HTML 之前加載，這可能會導致一些問題：
如果JavaScript 中有代碼會在 JavaScript 代碼加載時立即更改 HTML，那么實際上還沒有任何可用的 HTML 元素對其產生影響，因此看起來 JavaScript 代碼似乎不起作用，而您可能會出錯。
如果有很多 JavaScript，它會明顯減慢頁面的加載速度，因為它會在加載任何 HTML 之前加載所有 JavaScript。
當您將 JavaScript 放在 HTML 正文的底部時，它會在任何 JavaScript 加載之前讓 HTML 有時間加載，這可以防止錯誤并加快網站響應時間。
讓我們通過一個例子來了解更多（不要擔心我使用的語法，你只需要了解我們想要做什么）。
放在head中
新建test.html
編寫代碼
有如下的代碼,代碼的邏輯是，將文本的顏色設置為綠色。
改變顏色
運行
在瀏覽器中運行test.html。效果如下：字體的顏色并沒有變成綠色。
這里我們可以重新驗證上文說的：腳本在p標簽之前加載了。在加載腳本的時候，是無法找到p標簽的，最終導致無法改變顏色。
放在body中
現在讓我們嘗試相反的方法，在 body 的底部：
改變顏色
還有一件事：雖然最好將 JavaScript 包含在 HTML 的末尾
，但將 JavaScript 放在HTML 的中并不總是會導致錯誤。外部 JavaScript
JavaScript 也可用于外部文件。JavaScript 文件的文件擴展名為“.js”。要使用外部腳本，請將腳本文件的名稱放在腳本標記的 src 屬性中。
|
外部 JavaScript 的優點：
將 JavaScript 代碼放在外部 js 文件中比內聯腳本有一些優勢：
分離 HTML 和 JavaScript 代碼將有助于更輕松地管理代碼庫。
設計人員可以與編碼人員并行工作而不會發生代碼沖突。
適用于現代源代碼版本控制系統，例如 GIT。這意味著這些文件中的每一個都將維護一個歷史記錄，并且可以由多個程序員簽入、簽出。
代碼和 HTML 都易于閱讀。
外部 JavaScript 文件由瀏覽器緩存，可以加快頁面加載時間。
許多流行的 JavaScript 包都托管在內容交付網絡 (cdn) 上，您可以使用src 中的 URL 簡單地指向它們*，*從而避免將 js 文件復制到本地文件夾。
script標簽到底放在哪里
以下是瀏覽器加載帶有
script標簽
JavaScript：
// my-script.js document.addEventListener("DOMContentLoaded", function() { // this function runs when the DOM is ready, i.e. when the document has been parsed document.getElementById("user-greeting").textContent = "Welcome back, Bart"; });
因為您的瀏覽器不知道my-script.js在下載和執行之前不會修改文檔，所以解析器停止解析。
過時的推薦
解決這個問題的舊方法是將
具有 async 屬性的腳本是異步執行的。這意味著腳本在下載后立即執行，同時不會阻止瀏覽器。這意味著可以在腳本 1 之前下載和執行腳本 2。
根據http://caniuse.com/#feat=script-async，97.78% 的瀏覽器都支持這個。
延遲defer
具有 defer 屬性的腳本按順序執行（即第一個腳本 1，然后是腳本 2）。這也不會阻止瀏覽器。
與異步腳本不同，延遲腳本僅在整個文檔加載后才執行。
根據http://caniuse.com/#feat=script-defer，97.79% 的瀏覽器都支持這個。98.06% 至少部分支持它。
JavaScript
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
