Blog

JavaScript

在 HTML 內嵌 JavaScript 程式

  • <body> 內任意位置
    • 此種寫法以前較為常見，但會讓網頁內容與程式混在一起，降低頁面的可讀性也難以維護，因此較不建議此種方法。
  • <body> 標籤，</body> 封閉標籤前
    • 瀏覽器在載入腳本，但未執行完成之前是無法執行畫面繪製的。有大型腳本的狀況下將會導致畫面顯示延遲。
    • 為了加速頁面顯示，可將 <script> 標籤配置在頁面尾端的 </body> 標籤前。瀏覽器就會在頁面繪製結束後才載入程式，可有效加速頁面的顯示時間。
    • 一般而言，JavaScript 的相關處理，本來就應該在頁面準備好後才完成執行，因此不太會發生前述延遲畫面顯示的問題。
  • <head> 標籤內
    • 上述第 (2) 點有個例外狀況：JavaScript 有 「在 <script> 呼叫函數前，必須先有 <script> 定義函數」的規則 (函數定義與呼叫都在同一個 <script> 標籤中亦可)。若 <body> 標籤內需要呼叫函數，則在 <body> 標籤前就須先行定義以載入函數。
    • 此外，若要從腳本輸出樣式表，則輸出前亦要於 <head> 中先撰寫 <script> 標籤。

因此，以 (2) 為基礎，在有例外時再搭配使用 (3) 的方法。除了嵌入 Wiget 需使用 (1) 之外，其他狀況都應避免使用該方法。

將 JavaScript 程式寫成外部檔案

JavaScript 程式也可以單獨寫成外部檔案，語法如下：

<script type="text/javascript" src="path" [charset="encoding"]></script>

若要併用外部腳本與內嵌腳本，有設定 src 屬性時，<script> 標籤內的內容會被忽略，

<script type="text/javascript" src="path">
window.alert('Hello, World!'); //此行將被忽略
</script>

正確寫法是將裡面的內容以另一個 <script> 標籤撰寫。

<script type="text/javascript" src="path"></script>[charset="encoding"]></script>
<script type="text/javascript">
window.alert('Hello, World!');
</script>

無法執行 JavaScript 時的取代內容

瀏覽器可設定禁用 JavaScript，此時可用 <noscript> 標籤撰寫當用戶端無法運作 JavaScript 時的替代內容。

<noscript>無法使用 JavaScript</noscript>

以 Google Chrome 87 為例，若要關閉 JavaScript 功能，可在設定 > 隱私權和安全性 > 網站設定 > 內容 JavaScript 項目設定。

發佈留言