將 JavaScript 新增到你的網頁

關於 JavaScript

JavaScript 是一種程式語言，主要用於客戶端，使網頁具有互動性。你可以在沒有 JavaScript 的情況下創建出色的網頁，但 JavaScript 開闢了全新的可能性。

如何從 HTML 觸發 JavaScript

在瀏覽器中，JavaScript 本身不會做任何事情。你需要在 HTML 網頁中執行 JavaScript。要從 HTML 中呼叫 JavaScript 程式碼，你需要使用 <script> 元素。使用 script 有兩種方式，具體取決於你是連結到外部指令碼還是直接在網頁中嵌入指令碼。

連結外部指令碼

通常，你會將指令碼寫入自己的 .js 檔案中。如果你想從網頁執行 .js 指令碼，只需使用帶有 src 屬性的 <script> 元素，該屬性指向指令碼檔案，並使用其 URL

<script src="path/to/my/script.js"></script>

在 HTML 中編寫 JavaScript

你也可以將 JavaScript 程式碼新增到 <script> 標籤之間，而不是提供 src 屬性。

<script>
  console.log("Some code");
</script>

當您只需要少量 JavaScript 程式碼時，這種方法很方便，但如果將 JavaScript 放在單獨的檔案中，您會發現更容易

• 專注於你的工作
• 編寫自給自足的 HTML
• 編寫結構化的 JavaScript 應用程式

以可訪問的方式使用指令碼

可訪問性是任何軟體開發中的一個主要問題。如果你明智地使用 JavaScript，它可以使你的網站更具可訪問性，或者如果你不小心使用指令碼，它可能會變成一場災難。為了讓 JavaScript 對你有利，值得了解新增 JavaScript 的某些最佳實踐。

• 使所有內容都可作為（結構化）文字提供。 儘可能地依靠 HTML 來承載你的內容。例如，如果你實現了一個漂亮的 JavaScript 進度條，請務必在 HTML 中補充匹配的文字百分比。同樣，你的下拉選單應結構化為無序列表的連結。

• 使所有功能都可以透過鍵盤訪問。

  • 讓使用者以邏輯順序透過 Tab 鍵遍歷所有控制元件（例如連結和表單輸入）。
  • 如果你使用指標事件（如滑鼠事件或觸控事件），請使用鍵盤事件複製功能。
  • 僅使用鍵盤測試你的網站。

• 不要設定甚至猜測時間限制。 使用鍵盤導航或聽取內容朗讀需要額外的時間。你幾乎無法預測使用者或瀏覽器完成一個過程（尤其是載入資源等非同步操作）需要多長時間。

• 動畫應保持微妙、簡短且無閃爍。 閃爍令人煩惱，並可能導致癲癇發作。此外，如果動畫持續時間超過幾秒鐘，請為使用者提供取消它的方法。

• 讓使用者啟動互動。 這意味著，不要自動更新內容、重定向或重新整理。不要在沒有警告的情況下使用輪播或顯示彈出視窗。

• 為沒有 JavaScript 的使用者提供備選方案。 人們可能會關閉 JavaScript 以提高速度和安全性，而且使用者經常遇到網路問題，導致指令碼無法載入。此外，第三方指令碼（廣告、跟蹤指令碼、瀏覽器擴充套件）可能會破壞你的指令碼。

  • 至少，使用 <noscript> 留下一個簡短的訊息，例如：<noscript>要使用此站點，請啟用 JavaScript。</noscript>
  • 理想情況下，在可能的情況下，使用 HTML 和伺服器端指令碼複製 JavaScript 功能。
  • 如果你只是尋求簡單的視覺效果，CSS 通常可以更直觀地完成工作。
  • 由於幾乎每個人都確實啟用了 JavaScript，因此 <noscript> 不能作為編寫不可訪問指令碼的藉口。

瞭解更多

• <script>
• <noscript>
• 編寫 JavaScript 時考慮可訪問性，作者 Manuel Matuzovic (2017)
• W3C 的可訪問性指南