如何使用

在本教程中，我們將學習如何使用<script>標籤定義客戶端JavaScript。

HTML <script>標籤用於在HTML文件中宣告指令碼。透過它，您可以定義客戶端JavaScript。使用者可以直接在script標籤中編寫客戶端JavaScript程式碼，或者可以使用‘src’屬性將script標籤指向外部JavaScript檔案。

客戶端JavaScript可以寫在HTML檔案的多個部分，例如body標籤內、head標籤內或元素標籤內聯。但是，建議只在body標籤內的script標籤之間編寫任何JavaScript程式碼。

語法

<html>
<head>
</head>
<body>
   ...
   <!-- Script tag goes here -->
   <script>
      // JavaScript code
   </script>
</body>
</html>

上述語法顯示了使用script標籤編寫JavaScript程式碼的推薦位置。

屬性

屬性 值 描述
async async 它指定指令碼是非同步執行的。
defer defer 它指定指令碼不會生成任何內容。因此，瀏覽器/使用者代理可以繼續解析和渲染頁面的其餘部分。
charset charset 它指定指令碼使用的字元編碼。
src URL 它指定外部指令碼的URI/URL。
type application/ecmascript text/JavaScript text/vbscript application/JavaScript 它將指令碼語言指定為內容型別或MIME型別。
crossorigin anonymous use-credentials 它指定對HTTP CORS請求的請求模式。
integrity filehash 它允許瀏覽器驗證獲取的指令碼，確保如果原始碼被篡改則永遠不會載入程式碼。

示例1

在下面的示例中，我們使用了script標籤來定義客戶端JavaScript。我們在body標籤內使用了script標籤。這裡的JavaScript程式碼將透過單擊按鈕來更改元素的文字。“更改文字”按鈕與一個點選事件關聯，該事件執行“changeText()”函式。此函式使用document.getElementById()方法更改元素的內容。

<html>
<body>
   <h2>Using the <i>script tag</i> to to define client-side JavaScript</h2>
   <button onclick = "changeText()"> Change text </button>
   <div
      id = "root"
      style = "padding: 10px; background-color: bisque; border: 1px solid black">
      This element's text will change after the button click!
   </div>
   <!-- script tag -->
   <script>
      function changeText() {
         const root = document.getElementById('root')
         root.innerHTML = 'Welcome to Tutorialspoint!'
      }
   </script>
</body>
</html>

示例2

在下面的示例中，我們使用了script標籤來定義客戶端JavaScript以更新元素的樣式。我們將script標籤放在body標籤的末尾。script標籤包含JavaScript程式碼，用於透過單擊按鈕更改元素的背景顏色。“藍色”和“綠色”兩個按鈕與點選事件關聯，這些事件分別執行其各自的函式，將背景顏色分別更改為藍色和綠色。document.getElementById()方法用於更改背景顏色。

<html>
<body>
   <h2>Using the <i>script tag</i> to define client-side JavaScript</h2>
   <button onclick = "bgBlue()" >Blue</button>
   <button onclick = "bgGreen()" >Green</button>
   <div
      id = "root"
      style = "padding: 10px; margin: 5px 0px; background-color: blue; border: 1px solid black; color: white;">
      This element's background color will change by button click!
   </div>
   <!-- script tag -->
   <script>

      // element
      const root = document.getElementById('root')
      function bgBlue() {
         root.style.backgroundColor = 'blue'
      }
      function bgGreen() {
         root.style.backgroundColor = 'green'
      }
   </script>
</body>
</html>

本教程教我們如何使用<script>標籤定義客戶端JavaScript。我們討論了script標籤的語法和屬性。在第一個示例中，我們使用script標籤並在其之間編寫JavaScript程式碼來更改元素的內容。在第二個示例中，我們使用script標籤來更改元素的背景顏色。使用者可以在script標籤之間編寫任何JavaScript程式碼。建議仔細閱讀示例以更好地理解主題。

更新於：2022年10月31日

281 次瀏覽

啟動您的職業生涯

完成課程後獲得認證

開始
廣告
© . All rights reserved.