將 JavaScript 直接放入包含網頁 HTML 的文件中非常適合在學習 JavaScript 時使用的短腳本。

但是，當你開始創建腳本來為你的網頁提供重要功能時，JavaScript 的數量可能會變得非常大，并且將這些大型腳本直接包含在網頁中會帶來兩個問題：如果 JavaScript 占據了頁面內容的大部分，它可能會影響你的頁面在各種搜索引擎中的排名。這降低了使用關鍵字和短語來識別內容的頻率;這使得在你網站的多個頁面上重用相同的 JavaScript 功能變得更加困難。每次你想在不同的頁面上使用它時，你都需要將其復制并插入到每個附加頁面中，以及新位置所需的任何更改。

如果我們讓 JavaScript 獨立于使用它的網頁會更好。

選擇要移動的 JavaScript 代碼

幸運的是，HTML 和 JavaScript 的開發者已經為這個問題提供了解決方案。我們可以將我們的 JavaScript 移出網頁，但仍保持其功能完全相同。

我們需要做的第一件事是在使用它的頁面外部創建 JavaScript 代碼，即選擇實際的 JavaScript 代碼本身(不包括周圍的 HTML 腳本標簽)并將其復制到單獨的文件中。

例如，如果以下腳本在我們的頁面上，我們將選擇并復制粗體部分：

<script type="text/javascript">
var hello = 'Hello World';
document.write(hello);
</script>

曾經有一種做法是將 JavaScript 放在 HTML 文檔中的注釋標記內，以阻止舊版瀏覽器顯示代碼; 但是，新的 HTML 標準規定瀏覽器應該自動將 HTML 注釋標簽內的代碼視為注釋，這會導致瀏覽器忽略你的 Javascript。

如果你從其他人那里繼承了帶有注釋標簽內的 JavaScript 的 HTML 頁面，那么你不需要在你選擇和復制的 JavaScript 代碼中包含這些標簽。

例如，你將只復制粗體代碼，省略以下代碼示例中的 HTML 注釋標記 ：

<script type="text/javascript"><!--
var hello = 'Hello World';
document.write(hello);
// --></script>

將 JavaScript 代碼保存為文件

選擇要移動的 JavaScript 代碼后，將其粘貼到新文件中。為文件命名，以暗示腳本的作用或標識腳本所屬的頁面。

給文件一個 .js 后綴，以便你知道該文件包含 JavaScript。例如，我們可以使用 hello.js 作為保存上例中的 JavaScript 的文件名。

鏈接到外部腳本

現在我們已經將我們的 JavaScript 復制并保存到一個單獨的文件中，我們需要做的就是在我們的 HTML 網頁文檔中引用外部腳本文件。

首先，刪除腳本標簽之間的所有內容：

<script type="text/javascript">
</script>

這還沒有告訴頁面運行什么 JavaScript，所以我們接下來需要向 script 標簽本身添加一個額外的屬性，告訴瀏覽器在哪里可以找到腳本。

我們的示例現在看起來像這樣：

<script type="text/javascript"
src="hello.js">
</script>

src 屬性告訴瀏覽器應該從中讀取該網頁的 JavaScript 代碼的外部文件的名稱(在我們上面的示例中是 hello.js)。你不必將所有的 JavaScript 放在與 HTML 網頁文檔相同的位置。你可能希望將它們放入單獨的 JavaScript 文件夾中。在這種情況下，你只需修改 src 屬性中的值以包含文件的位置。你可以為 JavaScript 源文件的位置指定任何相對或絕對 Web 地址。

你現在可以獲取你編寫的任何腳本或從腳本庫中獲取的任何腳本，并將其從 HTML 網頁代碼移動到外部引用的 JavaScript 文件中。然后，你可以通過添加調用該腳本文件的適當 HTML 腳本標簽從任何網頁訪問該腳本文件。