資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 文件中包含 JavaScript？
在本教程中，我們將學習如何在 HTML 文件中包含 JavaScript。
要在 HTML 文件中包含 JavaScript，請使用 <script> 標籤。可以使用放置在 <script>... </script> 中的 JavaScript 語句來實現 JavaScript。
您可以將包含 JavaScript 的 <script> 標籤放置在網頁中的任何位置，但通常建議您將其保留在 <head> 標籤內。
我們將討論以下三種在 HTML 文件中包含 JavaScript 的方法：
- 嵌入程式碼（在 head 或 body 中）
- 內聯程式碼（在任何元素內部）
- 外部檔案（HTML 檔案外部）
透過嵌入程式碼
我們可以透過兩種方式將 JavaScript 程式碼嵌入到 HTML 頁面中：
在 head 標籤內
使用者可以在 <head> 標籤內編寫 JavaScript 程式碼。為此，我們必須在 head 標籤內建立一個 <script>…..</script> 元素。
語法
<head> <script> // Write your JavaScript Code Here </script> </head>
在上面的語法中，我們使用了 head 標籤內的 script 標籤來編寫 JavaScript 程式碼。
示例
在下面的示例中，我們學習瞭如何在 HTML 檔案中使用 script 標籤將 JavaScript 程式碼嵌入到 head 標籤內。
<html> <head> <script> //script tag inside the head tag //parachange function that called by the onclick event function parachange() { document.getElementById('para').innerHTML = 'The line has changed.' } </script> </head> <body> <h3>Including JavaScript in HTML document in <i>Head tag</i></h3> <p id="para">The is a line</p> <button type="button" onclick="parachange()">Click Here</button> </body> </html>
使用者可以看到，在單擊按鈕後，段落行在 p 標籤內發生了更改，這是因為點選事件。此 onclick 事件透過呼叫“parachange”函式發生，該函式寫在 script 標籤內，而 script 標籤寫在 head 標籤內。
在 body 標籤內
我們也可以將 JavaScript 程式碼包裹在 <body> 標籤內。為此，我們必須在 body 標籤內建立一個 <script>…. </script> 元素。
語法
<body> <script> //Write your JavaScript Code Here </script> </body>
在上面的語法中，我們使用了 body 標籤內的 script 標籤來編寫 JavaScript 程式碼。
示例
在下面的示例中，我們學習了使用者如何在 HTML 檔案中使用 script 元素將 JavaScript 程式碼嵌入到 body 標籤內。
<html> <head> </head> <body> <h3>Including JavaScript in HTML document in <i>Body tag</i></h3> <p id="para">The is a line</p> <button type="button" onclick="parachange()">Click Here</button> <script> //script tag inside the body tag function parachange() { document.getElementById('para').innerHTML = 'The line has changed.' } </script> </body> </html>
使用者可以看到，在單擊按鈕後，段落行在 p 標籤內發生了更改，這是因為點選事件。此 onclick 事件透過呼叫“parachange”函式發生，該函式寫在 script 標籤內，而 script 標籤寫在 body 標籤內。
使用內聯程式碼
我們也可以在不使用 script 標籤的情況下在元素內部編寫 JS 程式碼。通常，如果使用者必須在特定事件（如 onclick、onmouseover 等）上呼叫任何函式，我們會使用此內聯程式碼。
語法
<button type="button" onclick="alert('Hello world!');Click Here</button>
<!-- it can be elements other than button too -->
在上面的語法中，我們在 onclick 內使用了按鈕的 JavaScript 內聯。
示例
在下面的示例中，我們學習了使用者如何在 HTML 檔案中使用 onclick 屬性將 JavaScript 程式碼嵌入到按鈕標籤內。
<html> <body> <h3>Including JavaScript in HTML document inside <i>element</i></h3> <p> <button onclick="alert('Hello world!');">Click Here</button> </p> </body> </html>
使用者可以看到，在單擊“點選此處”按鈕後，事件被啟用並顯示警報訊息“Hello world！”
使用外部檔案
使用者可以建立一個單獨的檔案，在 HTML 檔案外部編寫 JavaScript 程式碼，並將該路徑連結新增到 <script> 標籤中。當我們需要在多個頁面上新增相同的 JS 程式碼時，這非常有用。此過程還可以使程式碼更簡單易懂。
首先，我們必須建立一個 JavaScript 檔案，在其中我們可以編寫程式碼（沒有任何標籤），然後將其儲存為 .js 副檔名。然後在 HTML 檔案中的 script 標籤中新增檔案的路徑作為“src”屬性。
語法
<script src="./file.js"></script>
在上面的語法中，我們在 script 標籤的 src 屬性中附加了 javascript 檔案的路徑。
示例
在下面的示例中，我們學習了使用者如何在 script 標籤的 src 屬性中嵌入外部 JavaScript 檔案。
<html> <body> <h2>Including JavaScript in HTML document using <i>external file</i></h2> <p id="para">The is a line</p> <button type="button" onclick="parachange()">Click Here</button> <script src="./file.js"></script> </body> </html>
在 file.js 檔案中，將編寫 onclick 事件呼叫的 parachange() 函式的定義。
＃file.js
function parachange() { document.getElementById("para").innerHTML = "The line has changed."; }
使用者可以看到，在單擊按鈕後，段落行在 p 標籤內發生了更改，這是因為點選事件。此 onclick 事件透過呼叫“parachange()”函式發生，該函式寫在外部檔案中。
我們學習瞭如何在 HTML 文件中包含 JavaScript。正如我們所看到的，使用者可以遵循多種方法來包含 JavaScript 和 HTML。因此，我們可以得出結論，如果程式碼僅與任何事件相關，則我們可以在內聯標籤內編寫它，或者如果程式碼行數很少，則可以將其新增到 body 或 head 標籤中。但是，如果程式碼行數很多或需要重複使用程式碼，則使用者可以使用外部檔案編寫 JavaScript 程式碼。
897 次檢視
