在網路開發中,JavaScript被廣泛用於提供動態效果和使用者互動功能。但是要讓JavaScript程式碼生效,需要在HTML檔案中呼叫它。本文將介紹如何在HTML中呼叫JavaScript,並且會給予一些範例程式碼。
一、文檔頭
在HTML文檔中呼叫JavaScript之前,需要在文檔頭部分宣告JavaScript程式碼,方式如下所示:
<head> <script type="text/javascript"> // JavaScript代码 </script> </head>
其中type
屬性是必填項,用來指定腳本語言的類型,text/javascript
表示JavaScript程式碼。如果你使用的是HTML5,則可以省略type
屬性。
二、內部JavaScript程式碼
可以在HTML檔案中直接寫JavaScript程式碼,存放在<script>
標籤內,例如:
<!DOCTYPE html> <html> <head> <title>调用JavaScript的例子</title> <meta charset="utf-8" /> </head> <body> <h1>内部JavaScript的例子</h1> <script> function showMessage() { alert("你好,欢迎访问我的网站!"); } showMessage(); </script> </body> </html>
上面的範例中,showMessage()
函數用來彈出一個對話框,裡麵包含一則歡迎訊息。最後一行程式碼呼叫了該函數,頁面載入後會立即彈出對話框。
三、外部JavaScript檔案
當JavaScript程式碼較長或需要重複使用時,通常會將它們存放在外部檔案中,然後在HTML檔案中引用這個檔案。例如,可以將上面的範例的JavaScript程式碼儲存在一個名為myscript.js
的檔案中。
在HTML文件中,使用<script>
標籤來引用這個文件,方式如下所示:
<!DOCTYPE html> <html> <head> <title>调用JavaScript的例子</title> <meta charset="utf-8" /> <script src="myscript.js"></script> </head> <body> <h1>外部JavaScript的例子</h1> </body> </html>
文件名稱為myscript.js
,放在HTML檔案相同的目錄下。 <script>
標籤中的src
屬性用於指定外部檔案路徑。
四、事件處理器呼叫JavaScript
在HTML文件中,使用者的互動事件(例如滑鼠點擊、滑鼠懸停、鍵盤按鍵等)可以透過JavaScript來回應。本節將展示透過事件處理器呼叫JavaScript的方式。
1.指定事件處理器
下面是一個滑鼠點擊事件處理器的例子:
<!DOCTYPE html> <html> <head> <title>event handling example</title> <meta charset="utf-8" /> <script type="text/javascript"> function showMessage() { alert("你好,欢迎访问我的网站!"); } </script> </head> <body> <h1>事件处理器调用JavaScript的例子</h1> <button onclick="showMessage()">点击这里发送欢迎消息</button> </body> </html>
在這個例子中,我們為按鈕元素添加了一個onclick
屬性,該屬性的值是showMessage()
函數。當按鈕被點選時,瀏覽器會執行這個函數,跳出對話框。
2.DOM事件模型
在DOM事件模型中,透過新增事件監聽器來回應使用者互動事件。例如,以下程式碼會在滑鼠懸停元素上時彈出訊息:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DOM事件模型的例子</title> <script type="text/javascript"> function showMessage() { alert("你好,欢迎访问我的网站!"); } var myButton = document.getElementById("myButton"); myButton.addEventListener("mouseover", showMessage); </script> </head> <body> <h1>调用JavaScript的例子</h1> <button id="myButton">鼠标悬停在此处弹出欢迎消息</button> </body> </html>
在這個範例中,我們使用了DOM方法addEventListener()
來新增事件監聽器,與前面的onclick
方式不同。 mouseover
是事件類型,showMessage
是事件回應函數。
總結
本文介紹了在HTML中呼叫JavaScript的各種方式,包括內部JavaScript程式碼、外部JavaScript檔案、事件處理器呼叫JavaScript等。這些方法可以讓Web開發者利用JavaScript來實現更好的動態效果和互動體驗。
以上是HTML怎麼呼叫JavaScript的結果的詳細內容。更多資訊請關注PHP中文網其他相關文章!