如何外部呼叫javascript-前端問答-PHP中文網

在現代網頁設計中，JavaScript已經成為了不可或缺的一部分。 JavaScript可以輕鬆擴展網頁的功能性，同時也可以增強使用者體驗。雖然JavaScript在HTML中可以直接嵌入，但當你需要在多個網頁中重複使用相同的JavaScript程式碼時，封裝JavaScript為一個獨立的外部檔案並外部呼叫將變得非常有用。

本文將討論如何外部呼叫JavaScript程式碼，包括將其嵌入HTML文件和連結到文件中。

在HTML文件中嵌入JavaScript 將JavaScript程式碼直接嵌入HTML文件中是最簡單的方法。你只需在HTML的head區域或body區域中編寫 標籤，並將JavaScript程式碼直接嵌入其中。

例如，以下是一個簡單的HTML文檔，它嵌入了JavaScript程式碼：

嵌入JavaScript代码 function sayHello() { alert("Hello World!"); } 点击我 登入後複製 在這個例子中，我們定義了一個簡單的函數，名為sayHello()。它透過警報操作向使用者發出問候。我們使用在HTML的button標籤上定義的onclick事件來呼叫這個函數。

雖然這種方法可能對小型專案還可以，但在大型專案中，將所有JavaScript程式碼嵌入到HTML文件中可能會使程式碼變得混亂不堪，難以維護。

將JavaScript程式碼儲存為獨立的外部檔案 為了解決這個問題，我們可以將JavaScript程式碼儲存為獨立的外部檔案。這種方法使程式碼更加清晰易讀，並且可以輕鬆地在不同的HTML文件中重複使用相同的程式碼。同時，由於瀏覽器會快取外部文件，載入速度也會變得更快。

以下是一個簡單的範例：我們將JavaScript程式碼儲存在名為myscript.js的檔案中。

function sayHello() { alert("Hello World!"); } 登入後複製 我們將上面的程式碼儲存為myscript.js，然後將它連結到我們的HTML文件中。

调用外部JavaScript文件 点击我 登入後複製 透過使用 標記和src屬性，我們可以將檔案myscript.js連結到HTML文件中。這樣我們就可以在HTML文件中呼叫JavaScript檔案中定義的所有函數和變數了。

值得注意的是，使用外部JavaScript檔案時，必須確保JavaScript檔案能夠正確載入。如果檔案路徑不正確，瀏覽器將無法找到文件，JavaScript檔案中的程式碼將無法執行。

在HTML文件中包含外部JavaScript檔案的另一個好處是可以讓網站更容易管理和維護。當需要更新JavaScript程式碼時，只需更改JavaScript檔案中的程式碼即可，所有使用該檔案的HTML文件都可以自動更新。

在JavaScript檔案中定義多個函數和變數 一般來說，一個JavaScript檔案可以包含一組邏輯相關的函數和變數。這可以幫助你將程式碼組織的更好，並且在更多的應用程式場景中可以使用。

例如，以下是一個名為myfunctions.js文件，它包含多個函數：

function addNumber(a, b) { return a + b; }

function subtractNumber(a, b) { return a - b; }

function divideNumber(a, b) { return a / b; } 登入後複製 我們將這個JavaScript文件引入到我們的HTML文件中：

在JavaScript文件中定义多个函数和变量 10 + 5 = document.write(addNumber(10, 5));

10 - 5 = document.write(subtractNumber(10, 5));

10 / 5 = document.write(divideNumber(10, 5));

登入後複製 這個範例顯示如何在多個HTML文件中使用myfunctions.js中定義的多個函數。我們可以在腳本區塊中使用呼叫函數的方式來呼叫這些函數。

使用非同步載入JavaScript 當我們在HTML文件中包含JavaScript檔案時，瀏覽器會立即開始載入檔案並阻止頁面的呈現，直到檔案完全載入完成。這可能導致頁面載入速度變慢。

為了避免這個問題，我們可以使用非同步載入JavaScript的方式。具體來說，我們可以將JavaScript的下載放到HTML頁面的底部，並將腳本標記中的async屬性設為true。這將使瀏覽器忽略JavaScript檔案的下載，直到頁面載入完成後開始下載程式碼。

例如，下面是一個HTML文檔，用於非同步載入JavaScript文件：

异步加载JavaScript 使用异步加载JavaScript进行页面优化 这里是页面的正文内容。

登入後複製 我們將JavaScript文件myscript.js載入到HTML文檔中。透過將async屬性設為true，瀏覽器將非同步載入腳本程式碼並不會阻止頁面的呈現。

總結

在本文中，我們討論如何在HTML文件中嵌入JavaScript程式碼和外部呼叫JavaScript程式碼。我們也討論如何將JavaScript程式碼儲存為獨立的外部檔案、在JavaScript檔案中定義多個函數和變數以及使用非同步載入JavaScript程式碼進行頁面最佳化。

無論你是初學者還是專業人士，了解這些知識將有助於你更好地組織和管理JavaScript程式碼，並提高網站的效能和可維護性。