首頁 > 文章 > web前端 > 如何外部呼叫javascript

如何外部呼叫javascript

王林原創: 2023-05-09 09:01:36960瀏覽

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

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

在HTML文件中嵌入JavaScript

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

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

<!DOCTYPE html>
<html>
<head>
  <title>嵌入JavaScript代码</title>
  <script>
    function sayHello() {
      alert("Hello World!");
    }
  </script>
</head>
<body>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

在這個例子中，我們定義了一個簡單的函數，名為sayHello()。它透過警報操作向使用者發出問候。我們使用在HTML的button標籤上定義的onclick事件來呼叫這個函數。

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

將JavaScript程式碼儲存為獨立的外部檔案

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

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

function sayHello() {
  alert("Hello World!");
}

我們將上面的程式碼儲存為myscript.js，然後將它連結到我們的HTML文件中。

<!DOCTYPE html>
<html>
<head>
  <title>调用外部JavaScript文件</title>
  <script src="myscript.js"></script>
</head>
<body>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

透過使用3f1c4e4b6b16bbbd69b2ee476dc4f83a標記和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文件中：

<!DOCTYPE html>
<html>
<head>
  <title>在JavaScript文件中定义多个函数和变量</title>
  <script src="myfunctions.js"></script>
</head>
<body>
  <p>10 + 5 = <script>document.write(addNumber(10, 5));</script></p>
  <p>10 - 5 = <script>document.write(subtractNumber(10, 5));</script></p>
  <p>10 / 5 = <script>document.write(divideNumber(10, 5));</script></p>
</body>
</html>

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

使用非同步載入JavaScript

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

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

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

<!DOCTYPE html>
<html>
<head>
  <title>异步加载JavaScript</title>
</head>
<body>
  <h1>使用异步加载JavaScript进行页面优化</h1>
  <p>这里是页面的正文内容。</p>
  <script async src="myscript.js"></script>
</body>
</html>

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

總結

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

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

以上是如何外部呼叫javascript的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html 封装 JS 事件异步

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html css 寫法下一篇：html css 寫法

看更多