3.1 套用 JavaScript

方式一：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>
  </head>
  <body>
    <p>這是段落</p>


    <!-- 寫在 body 結束標籤之前 -->
    <script src="./js/index.js"></script>
  </body>
</html>

使用開發者工具的 Network 頁籤觀察看看。

Previous3. JavaScript程式語言 Next3.2 註解(Comment)

Last updated 4 years ago