簡介
JavaScript 不需要多作介紹。它是網頁開發中最受歡迎的程式語言之一。它的運作方式類似於 HTML 和 CSS。所有這些語言都有助於設計和開發網頁應用程式和程式。
那麼，JavaScript 具體有什麼用處呢？在 JavaScript 的幫助下，您可以讓您的網頁應用程式和網頁具有相當高的互動性。在現代領域中，沒有自滿的餘地。您需要在最初的幾秒鐘內吸引觀眾的注意力並讓他們保持參與。毫無疑問，有趣且響應式的網頁設計是實現這一目標的最佳方法之一。幸好，大多數瀏覽器都支援 JavaScript。它可以在一些內建引擎的幫助下在您的瀏覽器上執行。
將 JavaScript 新增至 HTML
如果您想在網頁應用程式中使用 JavaScript 檔案，您需要讓它們與 HTML 標記並行執行。將 JavaScript 新增至 HTML 有兩種方法。一種方法是在 HTML 文件中以行內方式進行。另一種方法是將其新增為獨立的檔案。該檔案將與 HTML 文件一起下載。
在本教學中，我們將詳細探討如何將 JavaScript 新增至 HTML，使用這兩種方法。
如何以行內方式將 JavaScript 新增至 HTML 文件
首先，我們將看看如何以行內方式將 JavaScript 新增至 HTML 文件。為此，您必須使用專用的 HTML 標籤。它是 <script>。此標籤包覆著 JavaScript 程式碼。您可以將該標籤放置在 HTML 標記中的任何位置。放置的位置取決於您希望 JavaScript 何時載入。
例如，您可以將其放置在 <head> 區段、<body> 區段，甚至是在 </body> 結束標籤之後。如果您想讓 JavaScript 遠離 HTML 程式碼的主要內容，最好將標籤放在 <head> 區段中。這將包含 JavaScript 程式碼。另一方面，您可能希望您的 JavaScript 程式碼在網頁的版面配置中執行。如果是這種情況，您應該將標籤放在 <body> 區段中。例如，如果您使用 document.write 來產生內容，您就會這樣做。
透過程式碼範例可以更好地理解這一點。請考慮以下空白的 HTML 文件。此文件的瀏覽器標題為 Today’s Date：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> </head> <body> </body> </html> |
如您所見，這裡沒有 JavaScript 的蹤影。該文件僅包含 HTML 標記。現在，我們想以行內方式新增一些 JavaScript 程式碼，使其同時載入和執行。請考慮以下這段 JavaScript 程式碼：
|
1 2 |
let d = new Date(); alert("今天的日期是 " + d); |
根據上述程式碼，我們正在使我們的網頁能夠顯示包含今天日期的警示視窗。因此，無論訪客何時啟動該網站，頁面都將顯示當前日期。
現在，要將這段 JavaScript 程式碼新增至 HTML 文件中，我們將使用 <script> 標籤。首先，您需要將 JavaScript 程式碼新增在 <head> 標籤之間。這會告訴網頁，這段特定的程式碼必須在頁面的其他內容之前載入。您可以將程式碼新增在 <title> 標籤下方。以下是具體的操作方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> <script> let d = new Date(); alert("今天的日期是 " + d); </script> </head> <body> </body> </html> |
您的 JavaScript 程式碼現已加入。您的網頁將在載入頁面其餘部分之前執行並載入此腳本。當您啟動網站時，您將收到一個包含目前日期的警示，就像這樣：
這就是您將程式碼加入 HTML 文件 <head> 區段的方法。另一種方法是將腳本加入到 <body> 標籤的內部或外部。正如您在下面的範例中看到的，我們將在 <head> 區段之後加入這段程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>今天的日期是 " + d + "</h1>" </script> </body> </html> |
進行此修改後，重新載入頁面時您將會看到類似這樣的內容：
如何使用獨立的 JavaScript 檔案將 JavaScript 加入 HTML
較小的 JavaScript 腳本與 HTML 檔案搭配得很好。這是因為它們可以完整地在一個頁面或更少的範圍內執行。如果您正在處理佔用多個頁面的較大腳本，該檔案可能會變得非常難以理解。這就是為什麼您可能需要將其加入為獨立的 JavaScript 檔案。該檔案將與 HTML 文件同時載入。
在本節中，我們將討論如何使用獨立檔案將 JavaScript 加入 HTML。程式碼通常存放在一個或多個 .js 檔案中。HTML 文件將像引用任何其他外部資源一樣引用這些檔案。您會想要完全使用獨立 JavaScript 檔案的原因有很多。主要是，它使程式碼更容易閱讀和理解。更不用說，獨立的檔案可以讓快取的頁面快速載入，而且維護起來也相對容易。
為了利用這些好處，您需要知道如何將兩者（JavaScript 檔案和 HTML 文件）連接起來。為了幫助您理解，我們將以一個小型網頁專案為例。這個假設的專案在根目錄中包含一個主要的 index.html，在 css/ 目錄中包含 style.css，在 js/ 目錄中包含 script.js。這是我們的小專案：
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
對於我們的 HTML 標記，我們將使用之前使用過的文件：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> </head> <body> </body> </html> |
現在我們有了這兩個文件，可以開始將它們連接起來。我們必須將與日期相關的 JavaScript 程式碼新增到 script.js 檔案中。您將按如下方式將其新增為 <h1> 標題：
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>今天的日期是 " + d + "</h1>" |
要將程式碼連接到 HTML 文件，您需要新增對該腳本的引用。該引用應位於 HTML 範本的 <body> 區段內部或下方。以下是您在此處將使用的程式碼：
|
1 |
<script src="js/script.js"></script> |
如您所見，我們正在使用 <script> 標籤。該標籤指向專案 js/ 目錄中的 script.js 檔案。以下是程式碼在 HTML 文件中的呈現方式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
如果您願意，可以進行一些樣式修改來美化您的頁面。例如，讓我們為 <h1> 標題新增一些背景顏色。我們將在 style.css 檔案中進行此修改：
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
由於此修改要在標頭中顯示，我們將在 HTML 文件的 <head> 區段中引用它。以下是您引用此 CSS 檔案的方式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>今天的日期</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
現在我們已經建立了所需的引用，您可以查看變更效果。在瀏覽器中載入 index.html，您將看到如下頁面：
如果您想更新程式碼，可以從單一位置編輯所有頁面。這使得網頁的維護變得非常容易。這就是為 JavaScript 腳本使用獨立檔案的好處。
結論
希望本教學能幫助您進一步了解將 JavaScript 新增到 HTML 的過程。我們介紹了如何將其內嵌到 HTML 文件中，以及如何將其作為 .js 檔案新增。既然您已經了解了基本知識，您就可以在 HTML 中使用 JavaScript 實現更多功能。
以下是我們部落格中的一些資源，將幫助您進一步利用 JavaScript：
- 如果您正在建立自己的網頁應用程式，請參考我們關於如何選擇最佳伺服器設定的指南.
- 如果您想學習如何使用 Ghost 建立部落格，請參考本教學.
- 請參考本教學以了解如何在 Ubuntu 18.04 上安裝 Node.js.
祝您編程愉快！
留言
目前尚無留言。成為第一個留言的人吧。