JavaScript 使用

<script> 標簽

在 HTML 中，JavaScript 代碼必須位于 <script> 與 </script> 標簽之間。

實例

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

親自試一試

注釋：舊的 JavaScript 例子也許會使用 type 屬性：<script type="text/javascript">。

注釋：type 屬性不是必需的。JavaScript 是 HTML 中的默認腳本語言。

JavaScript 函數和事件

JavaScript 函數是一種 JavaScript 代碼塊，它可以在調用時被執行。

例如，當發生事件時調用函數，比如當用戶點擊按鈕時。

提示：您將在稍后的章節學到更多有關函數和事件的知識。

<head> 或 <body> 中的 JavaScript

您能夠在 HTML 文檔中放置任意數量的腳本。

腳本可被放置與 HTML 頁面的 <body> 或 <head> 部分中，或兼而有之。

<head> 中的 JavaScript

在本例中，JavaScript 函數被放置于 HTML 頁面的 <head> 部分。

該函數會在按鈕被點擊時調用：

實例

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一張網頁</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">試一試</button>
</body>
</html>

親自試一試

<body> 中的 JavaScript

在本例中，JavaScript 函數被放置于 HTML 頁面的 <body> 部分。

該函數會在按鈕被點擊時調用：

實例

<!DOCTYPE html>
<html>
<body> 
<h1>A Web Page</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">試一試</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</body>
</html>

親自試一試

提示：把腳本置于 <body> 元素的底部，可改善顯示速度，因為腳本編譯會拖慢顯示。

外部腳本

腳本可放置與外部文件中：

外部文件：myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

外部腳本很實用，如果相同的腳本被用于許多不同的網頁。

JavaScript 文件的文件擴展名是 .js。

如需使用外部腳本，請在 <script> 標簽的 src (source) 屬性中設置腳本的名稱：

實例

<script src="myScript.js"></script>

親自試一試

您可以在 <head> 或 <body> 中放置外部腳本引用。

該腳本的表現與它被置于 <script> 標簽中是一樣的。

注釋：外部腳本不能包含 <script> 標簽。

外部 JavaScript 的優勢

在外部文件中放置腳本有如下優勢：

  • 分離了 HTML 和代碼
  • 使 HTML 和 JavaScript 更易于閱讀和維護
  • 已緩存的 JavaScript 文件可加速頁面加載

如需向一張頁面添加多個腳本文件 - 請使用多個 script 標簽：

實例

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

外部引用

可通過完整的 URL 或相對于當前網頁的路徑引用外部腳本：

本例使用完整的 URL 來鏈接至腳本：

實例

<script src="https://www.codew3c.com/js/myScript1.js"></script>

親自試一試

本例使用了位于當前網站上指定文件夾中的腳本：

實例

<script src="/js/myScript1.js"></script>

親自試一試

本例鏈接了與當前頁面相同文件夾的腳本：

實例

<script src="myScript1.js"></script>

親自試一試

您能夠在 HTML 文件路徑中學習更多有關文件路徑的知識。