Heim > Artikel > Web-Frontend > Wie ruft HTML JavaScript-Ergebnisse auf?

Wie ruft HTML JavaScript-Ergebnisse auf?

PHPzOriginal: 2023-04-25 17:30:551312Durchsuche

In der Webentwicklung wird JavaScript häufig verwendet, um dynamische Effekte und Benutzerinteraktionsfunktionen bereitzustellen. Damit der JavaScript-Code jedoch wirksam wird, muss er in der HTML-Datei aufgerufen werden. In diesem Artikel wird erläutert, wie JavaScript in HTML aufgerufen wird, und es werden einige Beispielcodes bereitgestellt.

1. Dokumentkopf

Bevor Sie JavaScript in einem HTML-Dokument aufrufen, müssen Sie JavaScript-Code im Dokumentkopf wie folgt deklarieren:

<head>
  <script type="text/javascript">
      // JavaScript代码
  </script>
</head>

#🎜🎜 # Das Attribut type ist erforderlich und wird verwendet, um die Art der Skriptsprache anzugeben, die text/javascript darstellt. Wenn Sie HTML5 verwenden, können Sie das Attribut type weglassen.

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 2. Interner JavaScript-Code

Sie können JavaScript-Code direkt in die HTML-Datei schreiben und im <script>-Tag speichern, z Beispiel: # 🎜🎜#rrreee

Im obigen Beispiel wird die Funktion showMessage() verwendet, um ein Dialogfeld mit einer Willkommensnachricht aufzurufen. Die letzte Codezeile ruft diese Funktion auf und das Dialogfeld wird sofort nach dem Laden der Seite angezeigt.

3. Externe JavaScript-Dateien #🎜🎜##🎜🎜#Wenn JavaScript-Codes lang sind oder wiederholt verwendet werden müssen, werden sie im Allgemeinen in externen Dateien gespeichert und dann in der HTML-Datei referenziert. Sie können beispielsweise den JavaScript-Code für das obige Beispiel in einer Datei namens myscript.js speichern. #🎜🎜##🎜🎜#Verwenden Sie in der HTML-Datei das Tag <script>, um wie folgt auf diese Datei zu verweisen: #🎜🎜#rrreee#🎜🎜#Der Dateiname lautet myscript.js, im selben Verzeichnis wie die HTML-Datei abgelegt. Das Attribut src im Tag <script> wird verwendet, um den externen Dateipfad anzugeben. #🎜🎜##🎜🎜#4. Event-Handler ruft JavaScript auf#🎜🎜##🎜🎜#In HTML-Dokumenten kann auf Benutzerinteraktionsereignisse (wie Mausklicks, Mauszeigerbewegungen, Tastaturtasten usw.) über JavaScript reagiert werden . In diesem Abschnitt wird gezeigt, wie Sie JavaScript über Ereignishandler aufrufen. #🎜🎜##🎜🎜#1. Event-Handler angeben #🎜🎜##🎜🎜#Das Folgende ist ein Beispiel für einen Mausklick-Event-Handler: #🎜🎜#rrreee#🎜🎜#In diesem Beispiel sind wir die Schaltfläche Das Element fügt ein onclick-Attribut hinzu, dessen Wert die Funktion showMessage() ist. Wenn auf die Schaltfläche geklickt wird, führt der Browser diese Funktion aus und öffnet das Dialogfeld. #🎜🎜##🎜🎜#2.DOM-Ereignismodell#🎜🎜##🎜🎜#Reagieren Sie im DOM-Ereignismodell auf Benutzerinteraktionsereignisse, indem Sie Ereignis-Listener hinzufügen. Der folgende Code zeigt beispielsweise eine Meldung an, wenn die Maus über das Element fährt: Er unterscheidet sich von der vorherigen onclick-Methode. mouseover ist der Ereignistyp und showMessage ist die Ereignisantwortfunktion. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel werden verschiedene Möglichkeiten zum Aufrufen von JavaScript in HTML vorgestellt, darunter interner JavaScript-Code, externe JavaScript-Dateien, Ereignishandler, die JavaScript aufrufen usw. Diese Methoden ermöglichen es Webentwicklern, mithilfe von JavaScript bessere dynamische Effekte und interaktive Erlebnisse zu erzielen. #🎜🎜#

Das obige ist der detaillierte Inhalt vonWie ruft HTML JavaScript-Ergebnisse auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 html JS 事件 dom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So aktivieren Sie Javascript in AndroidNächster Artikel：So aktivieren Sie Javascript in Android

In Verbindung stehende Artikel

Mehr sehen