Home > Article > Web Front-end > How does HTML call JavaScript results?
How does HTML call JavaScript results?
- PHPzOriginal
- 2023-04-25 17:30:551312browse
In web development, JavaScript is widely used to provide dynamic effects and user interaction functions. But for the JavaScript code to take effect, it needs to be called in the HTML file. This article will introduce how to call JavaScript in HTML and give some sample code.
1. Document header
Before calling JavaScript in an HTML document, JavaScript code needs to be declared in the document header as follows:
<head> <script type="text/javascript"> // JavaScript代码 </script> </head>
wheretype The attribute is required and is used to specify the type of scripting language. text/javascript represents JavaScript code. If you are using HTML5, you can omit the type attribute.
2. Internal JavaScript code
You can write JavaScript code directly in the HTML file and store it in the <script> tag, for example:
<!DOCTYPE html>
<html>
<head>
<title>调用JavaScript的例子</title>
<meta charset="utf-8" />
</head>
<body>
<h1>内部JavaScript的例子</h1>
<script>
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
showMessage();
</script>
</body>
</html>
In the above example, the showMessage() function is used to pop up a dialog box containing a welcome message. The last line of code calls this function, and the dialog box pops up immediately after the page loads.
3. External JavaScript files
When JavaScript codes are long or need to be used repeatedly, they are generally stored in external files and then referenced in the HTML file. For example, you can save the JavaScript code for the above example in a file named myscript.js.
In the HTML file, use the <script> tag to reference this file as follows:
<!DOCTYPE html> <html> <head> <title>调用JavaScript的例子</title> <meta charset="utf-8" /> <script src="myscript.js"></script> </head> <body> <h1>外部JavaScript的例子</h1> </body> </html>
The file name is myscript.js, placed in the same directory as the HTML file. The src attribute in the <script> tag is used to specify the external file path.
4. Event handler calls JavaScript
In HTML documents, user interaction events (such as mouse clicks, mouse hovers, keyboard keys, etc.) can be responded to through JavaScript. This section will show how to call JavaScript through event handlers.
1. Specify event handler
The following is an example of a mouse click event handler:
<!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>
In this example, we add a ## to the button element #onclick attribute, the value of this attribute is the showMessage() function. When the button is clicked, the browser will execute this function and pop up the dialog box.
<!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>In this example, we use the DOM method addEventListener() to add an event listener, which is the same as the previous one onclickThe way is different. mouseover is the event type, showMessage is the event response function.
The above is the detailed content of How does HTML call JavaScript results?. For more information, please follow other related articles on the PHP Chinese website!