How does HTML call JavaScript results?-Front-end Q&A-php.cn

How does HTML call JavaScript results?

PHPz

Release： 2023-04-25 18:18:32

Original

1325 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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.

2.DOM event model

In the DOM event model, respond to user interaction events by adding event listeners. For example, the following code will pop up a message when the mouse hovers over the element:

<!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>

Copy after login

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.

Summary

This article introduces various ways to call JavaScript in HTML, including internal JavaScript code, external JavaScript files, event handlers calling JavaScript, etc. These methods allow web developers to use JavaScript to achieve better dynamic effects and interactive experiences.

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!