一旦您很好地掌握了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,用戶將無法與您的網頁進行大量交互。
最后,通過掌握成都小程序設計在本文中介紹的技術,您可以立即提高頁面參與度。嘗試這些不同的技術,看看哪種最適合您的項目和編碼風格。