2.1 套用方式

方式一：HTML 檔的 script 標籤內

然而 script 標籤儘量寫在 </body> 之前，當然也可以寫在 <head>...</head> 區段裡面。但我們希望先讓使用者看到內容，然後再執行 JS 程式碼。

範例：

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>這是段落</p>


    <!-- 寫在 body 結束標籤之前 -->
    <script>
      // 在這寫 JavaScript 程式碼
    </script>
  </body>
</html>

方式二：寫在 HTML 屬性上

例 1：onclick 指的是滑鼠左鍵點擊一下：

<p onclick="alert('顯示 alert 視窗');">這是段落(click)</p>

例 2：ondblclick 指的是滑鼠左鍵快速點擊二下：

<p ondblclick="alert('顯示 alert 視窗');">這是段落(double click)</p>

方式三：寫在外部 JS 檔

在 javascript/practice 資料夾下建立 js 資料夾，然後在 js 資料夾中，建立 index.js 檔案，然後將 1.4 第一個 JavaScript 所寫的 js 部份，全部移到 index.js 中。(註：不要連 script 標籤也移進去。)

在 practice/index.html 檔，如果要載入 practice/js/index.js 檔案的話，使用以下語法：

<script src="./js/index.js"></script>

最後 index.html 會變成如下：

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div.block{
        border: 1px solid black;
        color: red;
      }
      p.para{
        border: 1px solid blue;
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="block">
      這是 div 區塊
      <p class="para">這是段落</p>
    </div>

    <br>

    <button type="button" id="btn1">取得內容</button>
    <button type="button" id="btn2">更新內容</button>
    <button type="button" id="btn3">刪除元素節點</button>
    <button type="button" id="btn4">建立元素節點</button>

    <script src="./js/index.js"></script>
  </body>
</html>

如果將此例的 script 標籤，改成放到 head 結束標籤之前，會發生什麼錯誤？

Previous2. JS 在網頁上的基本觀念 Next3. 瀏覽器物件模型 (BOM)

Last updated 9 months ago