一旦您很好地掌握了HTML和CSS，下一步就是使用JavaScript將您的Web項目提升到一個新的水平。成都小程序設計堅信JavaScript為網頁添了交互式和動態功能，使得網頁變得有趣且吸引人，而不僅僅是靜態內容。
如果您想制作一個交互式頁面，您需要了解的基本技能之一是如何從HTML文檔調用JavaScript函數。換句話說，當用戶以某種方式使用HTML元素（例如單擊它）時，如何觸發JavaScript函數作為響應？
幸運的是，HTML和JavaScript使這一切變得簡單。在本文中，您將學習使用HTML調用JavaScript函數的三種方法。讓我們深入了解一下。
如何在HTML中調用JavaScript函數
在本節中，我們將介紹使用HTML調用函數的三種方法
帶有腳本標簽
使用外部JavaScript文件
與事件偵聽器
在HTML文檔中調用JavaScript函數的最簡單方法是在一對<script>標記內定義該函數，然后將其放置在HTML文檔的頭部或正文中。然后，您可以在用戶與頁面元素交互時調用此函數。
雖然將HTML和JavaScript放在同一個文件中很容易，但大多數開發人員更喜歡將JavaScript代碼放在單獨的文件中。以這種方式分離HTML和JavaScript使代碼更易于理解和維護。它讓一切變得更有條理。
在外部JavaScript文件中調用JavaScript函數很容易。我們只需要添加一些額外的代碼。
接下來，我們將制作HTML文檔。這次，我們將使用<script>標記鏈接到head部分中的functions.js文件。在<script>標記中，src屬性被分配為functions.js文件的文件路徑。如果HTML文檔和JavaScript文檔保存在同一目錄中，則只需提供JavaScript文件名作為src的值。
現在，當瀏覽器在HTML文檔中遇到函數調用changeColor()時，它就會知道changeColor()是functions.js中的函數。
使用HTML調用JavaScript函數的最后也是最強大的方法是使用事件偵聽器。在JavaScript中，事件偵聽器是一種等待某個元素或一組元素發生事件（例如鼠標單擊）的功能。一旦該事件發生，事件偵聽器就會調用一個函數。
要在JavaScript中創建事件偵聽器，請使用內置的addEventListener()函數。此函數將事件偵聽器添加到HTML元素、類或id。addEventListener()函數采用兩個必需參數：
事件：這會觸發偵聽器，例如click或mouseover。
偵聽器：這是事件發生時調用的JavaScript函數。如果需要，您可以添加多個偵聽器。
事件偵聽器非常適合通過用戶輸入觸發JavaScript函數，因為它們無需從HTML中包含JavaScript函數調用（即onclick），從而使代碼更易于維護。另外，您可以從單個事件調用多個函數。
從本質上講，HTML單獨負責頁面的內容。如果沒有JavaScript，用戶將無法與您的網頁進行大量交互。
最后，通過掌握成都小程序設計在本文中介紹的技術，您可以立即提高頁面參與度。嘗試這些不同的技術，看看哪種最適合您的項目和編碼風格。
