資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 頁面中包含內聯 JavaScript？
在本教程中，我們將學習如何在 HTML 頁面中包含內聯 JavaScript。
使用 onclick 事件包含內聯 JavaScript
就像從 HTML 頁面內的內聯 JavaScript 中彈出的警報訊息一樣，我們也可以宣告一個函式並呼叫它。這種方法使我們能夠在 JavaScript 函式內部編寫多行程式碼，執行的任務不僅僅是顯示警報訊息。在本例中，我們將透過從內聯 JavaScript 程式碼呼叫函式來更改元素的文字和背景顏色。
使用者可以按照以下語法在 HTML 頁面中包含內聯 JavaScript 以呼叫函式。
語法
// inline JavaScript within the onclick attribute of a button
<button type = "button" onclick = "(function(){
// JavaScript Code
})()"> Click Me </button>
在上面的語法中，我們聲明瞭一個匿名函式，為了能夠呼叫這個匿名函式，我們將其包裹在括號之間，然後透過開啟和關閉括號來呼叫它。
示例
在下面的示例中，我們在 HTML 頁面中包含了內聯 JavaScript 來呼叫一個函式。我們使用了一個函式來更改“root”元素的文字。我們在“更改文字”按鈕的點選事件上設定了此函式，因此當用戶使用該按鈕時，“root”元素的文字將更改。類似地，我們設定了另外兩個帶有點選事件的按鈕。“更改背景”按鈕用於更改背景顏色，“重置更改”按鈕用於將“root”元素的所有更改重置。
<html> <body> <p>Including inline JavaScript inside an HTML page to invoke a function</p> <div> <button type = "button" onclick ="(function(){ // JavaScript Code to Change the Inner Text const root = document.getElementById('root') root.innerHTML = 'This Text is Changed By Inline JavaScript!' })()"> Change Text </button> <button type = "button" onclick = "(function(){ // JavaScript Code to Change the Background Color const root = document.getElementById('root') root.style.backgroundColor = '#85f8d5' })()"> Change Background </button> <button type = "button" onclick = "(function(){ // JavaScript Code to Rest the Changes const root = document.getElementById('root') root.innerHTML = 'Welcome to Tutorialspoint!' root.style.backgroundColor = '#ffffff' })()"> Reset Changes </button> </div> <div id="root" style="border: 1px solid black; margin-top: 10px; padding: 10px;">Welcome to Tutorialspoint!</div> </body> </html>
使用內聯 JavaScript 顯示警報訊息
瞭解 JavaScript 工作原理的最簡單方法之一是使用 alert 方法。alert 方法開啟一個包含訊息的彈出視窗。在本例中，我們將在內聯 JavaScript 程式碼中使用該 alert 方法。內聯 JavaScript 程式碼始終需要寫在事件屬性之間，因此每當觸發該事件時，內聯 JavaScript 程式碼就會執行。
使用者可以按照以下語法在 HTML 頁面中包含內聯 JavaScript 以顯示警報訊息。
語法
// inline JavaScript within the onclick attribute of a button
<button type="button" onclick="alert('Welcome')"> Click Me </button>
在上面的語法中，“welcome”是警報訊息。每當使用者點選按鈕時，都會顯示警報訊息。
示例
在下面的示例中，我們在 HTML 頁面中包含了內聯 JavaScript 以顯示警報訊息。我們使用了多個元素來為顯示不同的警報訊息提供點選事件。
<html> <body> <p>Including inline JavaScript inside an HTML page to show <i>alert</i> messages</p> <button type = "button" onclick = "alert('Welcome to Tutorialspoint')"> Click Me </button> <p style="border: 1px solid black; padding: 10px;" onclick="alert('Hi from p tag!')">'p' tag</p> <div style="border: 1px solid black;padding: 10px;" onclick="alert('Hi from div tag!')">'div' tag</div> </body> </html>
在本教程中，我們學習瞭如何在 HTML 頁面中包含內聯 JavaScript。我們瞭解瞭如何使用內聯 JavaScript 顯示警報訊息，並且我們還在示例中編寫了程式碼併為多個元素的點選事件使用了多個警報訊息。我們還了解了如何在內聯 JavaScript 中執行或呼叫函式。
在本方法的示例中，我們使用多個按鈕的點選事件來更改內部文字和背景顏色並重置它們。因此，內聯 JavaScript 對於快速編寫 JavaScript 程式碼可能很有用，但對於大型應用程式來說，它並不是包含 JavaScript 程式碼的最佳方法，因為它可能包含多個重複程式碼，並且管理應用程式可能很困難。
8K+ 次瀏覽
