HTML 中的 JavaScript 前言 在上一篇文章"什麼是JavaScript？"中我們說到js作為一門和頁面交互的語言。那如何把網頁的主導語言HTML和JavaScript關聯起來呢？在js早期，網景公司創造出了<script>元素，用來講JavaScript插入到HTML中。 <scrip ...
HTML 中的 JavaScript
前言
在上一篇文章"什麼是JavaScript？"中我們說到js作為一門和頁面交互的語言。那如何把網頁的主導語言HTML和JavaScript關聯起來呢？在js早期，網景公司創造出了<script>元素，用來講JavaScript插入到HTML中。
<script>元素
博主在看“紅寶書”的時候，看到script標簽居然有足足8個屬性。如下：
- async：可選。表示應該立即開始下載腳本，但不能阻止其他頁面動作，比如下載資源或等待其他腳本載入。只對外部腳本文件有效。
- charset：可選。使用 src 屬性指定的代碼字元集。這個屬性很少使用，因為大多數瀏覽器不在乎它的值。
- crossorigin：可選。配置相關請求的CORS（跨源資源共用）設置。預設不使用CORS。crossorigin= "anonymous"配置文件請求不必設置憑據標誌。crossorigin="use-credentials"設置憑據標誌，意味著出站請求會包含憑據。
- defer：可選。表示腳本可以延遲到文檔完全被解析和顯示之後再執行。只對外部腳本文件有效。在 IE7 及更早的版本中，對行內腳本也可以指定這個屬性。
- integrity：可選。允許比對接收到的資源和指定的加密簽名以驗證子資源完整性（SRI，Subresource Integrity）。如果接收到的資源的簽名與這個屬性指定的簽名不匹配，則頁面會報錯，腳本不會執行。這個屬性可以用於確保內容分髮網絡（CDN，Content Delivery Network）不會提供惡意內容。
- language：廢棄。最初用於表示代碼塊中的腳本語言（如"JavaScript"、"JavaScript 1.2"或"VBScript"）。大多數瀏覽器都會忽略這個屬性，不應該再使用它。
- src：可選。表示包含要執行的代碼的外部文件
- type：可選。代替 language，表示代碼塊中腳本語言的內容類型（也稱 MIME 類型）。按照慣例，這個值始終都是"text/javascript"，儘管"text/javascript"和"text/ecmascript"都已經廢棄了。JavaScript 文件的 MIME 類型通常是"application/x-javascript"，不過給type 屬性這個值有可能導致腳本被忽略。在非 IE 的瀏覽器中有效的其他值還有"application/javascript"和"application/ecmascript"。如果這個值是 module，則代碼會被當成 ES6 模塊，而且只有這時候代碼中才能出現 import 和 export 關鍵字。
博主今年5月入行前端，個人認為在現在這個前端框架盛行的時代，平時的業務也不會接觸到這麼多屬性，掌握 src屬性就足以。其他看過有點印象，可能以後維護前後端不分離的項目的時候能用到。並且再好的web開發實踐中部分屬性也是不推薦使用的。
使用方法
使用
有一點是值得註意 在使用別人伺服器上的js文件時，必須要確認來源是可靠的，穩定。不然別人把文件一換，項目就可能因此跑不起來。
在最佳實踐中通常認為，使用外部文件時更好的選擇。理由如下：
- 可維護性。如果js分散到一個個HTML頁面中，這會導致維護困難。然而放到一個js文件中就會極大提升可維護性。
- 緩存。瀏覽器會根據特定的設置緩存所有外部鏈接的js文件。如果兩個頁面用到同一個js文件，則該文件只會下載一次，意味著頁面載入更快了。
- 適應未來 。使用外部鏈接的方式，就不用去考慮XHTML文件中轉義字元帶來的問題。
執行順序
在沒有async和defer關鍵字的影響下，不管包含什麼代碼，瀏覽器會按照<script>標簽在頁面中出現的順序來依次解釋它們。
標簽位置
過去，所有的<script>標簽都是寫在head裡面的，這就意味著需要把head裡面的所有的js都下載、解析和解釋完成才會開始渲染頁面，這就會導致頁面在首次載入的時候會出現長時間的白屏。為瞭解決這個問題，現代web應用通常會把js放在body里的頁面元素之後，這樣就會在處理js之前把頁面渲染完成，顯著提升了用戶體驗，感覺頁面載入變快了。
<noscript>元素
當瀏覽器不支持腳本語言或者腳本語言的支持被關閉的時候就會去渲染<noscript>標簽內的內容。現在感覺基本上不會遇到這種業務場景。
