如何在HTML中引入Javascript程式碼

Javascript是一種腳本語言，廣泛應用於Web開發。它可以在網頁中運行，使頁面更加動態和互動性。要在網頁中使用Javascript，我們需要將它與HTML連結。此文章將介紹如何在HTML中引入Javascript程式碼，並使用它來改變網頁的外觀和行為。

一、什麼是Javascript？

Javascript是一種輕量級的腳本語言，用於為Web頁面添加動態效果和互動性。它是一種解釋性語言，與傳統的編譯語言不同。 Javascript程式碼不需要編譯器來轉換成執行程式碼，它是在網頁載入時即時執行的。由於Javascript可以在客戶端執行，因此減少了與伺服器的通信，並允許更快的回應速度和更流暢的使用者體驗。

二、如何引進Javascript？

為了在網頁中使用Javascript，我們需要將其引入HTML檔案中。有三種方法可以將Javascript程式碼引入HTML檔案中：

內聯腳本 #內嵌腳本是指將Javascript程式碼直接嵌入在HTML頁面中的一種方法。可以使用 標記將Javascript程式碼寫入HTML檔。

Inline Script Hello World!

alert('Welcome to Javascript!');

在上面的程式碼中，我們在HTML檔案中嵌入了一個腳本，向使用者顯示了一個警告框。然而，這種方法會使程式碼難以維護，並可能對網頁的效能產生負面影響。因此，不建議使用內聯腳本。

內部腳本 內部腳本是指將Javascript程式碼寫在HTML檔案中，但不在HTML標籤中。可以使用 標記將Javascript程式碼放在 或 標記內的 標籤中。

Internal Script function welcome(){ alert('Welcome to Javascript!'); } Hello World! 在上面的程式碼中，我們將Javascript程式碼放在 標記內的 標記中，並定義了一個名為welcome的函數。函數在 標籤中的onload事件中呼叫。這是一種更好的方法，但仍不完美。

外部腳本 最好的方法是將Javascript程式碼儲存在外部檔案中，並從HTML檔案中連結到它們。為外部Javascript檔案建立一個單獨的檔案並儲存，副檔名為.js。然後，可以使用 標記引用該檔案。

假設我們將上面的Javascript程式碼保存在名為「welcome.js」的檔案中，則可以使用以下程式碼將其連接到HTML檔案中：

External Script Hello World! 在上面的程式碼中，我們使用 標記的src屬性將「welcome.js」檔案連結到HTML檔案中。然後，我們在 標記內的onload事件中呼叫welcome()函數。

使用外部腳本的好處是可以讓Javascript程式碼更易於維護和更新，並使HTML檔案更易於閱讀和管理。另外，它還可以快取文件，從而提高網站的效能。

三、在Javascript中操作HTML元素

一旦Javascript被引進到HTML檔案中，我們就可以用它來操作HTML元素。可以使用文件物件模型（DOM）來存取和修改HTML元素。

DOM是一種API，用於在HTML和XML文件中存取和操作元素。它將文件視為一個樹狀結構，其中每個元素都是一個節點，並透過操作節點來存取和修改HTML元素。以下是一些常見的DOM方法：

getElementById()：按ID取得元素。 getElementsByTagName()：按標籤名稱取得元素。 getElementsByClassName()：以類別名稱取得元素。 innerHTML屬性：取得或設定元素的內容。 style屬性：取得或設定元素的樣式屬性。 以下是使用DOM方法來更改HTML元素的範例：

DOM Manipulation function changeColor(){ document.getElementById("text").style.color = "red"; } Hello World! Change Color 在上方的程式碼中，我們在 中定義了一個標題，並建立了一個按鈕。在JavaScript函數changeColor()中，我們使用getElementById()來取得ID為「text」的元素，並將其文字顏色變更為紅色。

四、總結

Javascript是一種用於Web開發的流行語言，可使網頁更加動態和互動性。若要在HTML檔案中使用Javascript，您可以使用內嵌腳本、內部腳本或外部腳本。外部腳本是最好的方法，因為它使程式碼更易於維護和閱讀，並提高了網站的效能。一旦Javascript被連接到HTML檔案中，我們就可以使用DOM方法來存取和修改HTML元素。