Heim > Artikel > Web-Frontend > So fügen Sie Javascript zu HTML hinzu

So fügen Sie Javascript zu HTML hinzu

WBOYOriginal: 2023-05-21 09:04:072909Durchsuche

JavaScript ist eine objektbasierte und ereignisgesteuerte Skriptsprache, die in der Webentwicklung weit verbreitet ist. Webseiten können durch JavaScript interaktiver und dynamischer gestaltet werden, und während der Entwicklung ist es oft notwendig, JavaScript-Code zu HTML hinzuzufügen, um die Funktionen der Seite zu realisieren.

In diesem Artikel erfahren Sie, wie Sie JavaScript zu HTML hinzufügen, einschließlich interner Skripts, externer Skripts und Inline-Skripts.

1. Internes Skript

Beim internen Skript wird JavaScript-Code direkt in die HTML-Seite geschrieben. Diese Methode eignet sich für Situationen, in denen die Codemenge gering ist, z. B. für einige einfache interaktive Effekte. Das Folgende ist ein Beispiel für die Verwendung eines internen Skripts zum Ändern der Textfarbe, wenn die Maus darauf platziert wird:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部脚本示例</title>
</head>

<body>
    <h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">鼠标放上去改变颜色</h1>
</body>

</html>

In diesem Beispiel wird der JavaScript-Code über die Ereignisse onmouseover und onmouseout direkt zum HTML-Element h1 hinzugefügt, um das zu erstellen Die Textfarbe ändert sich, wenn die Maus platziert und wegbewegt wird, und wechselt zu Rot bzw. Schwarz.

2. Externes Skript

Externes Skript speichert JavaScript-Code in einer separaten Datei und führt ihn dann über die HTML-Seite ein. Diese Methode eignet sich für Situationen, in denen die Codemenge groß ist oder mehrere Seiten gemeinsam genutzt werden müssen, und kann die Wartbarkeit und Wiederverwendbarkeit des Codes verbessern. Das Folgende ist ein Beispiel für die Einführung einer externen JavaScript-Datei in eine HTML-Seite:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
    <script src="example.js"></script>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

In diesem Beispiel wird der Pfad zu einer externen JavaScript-Datei über das 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的src-Attribut angegeben und dann wird der JavaScript-Code in der Datei in den HTML-Code eingefügt Datei, wodurch eine Wiederverwendung des Codes erreicht wird.

3. Inline-Skript

Inline-Skript bedeutet, JavaScript-Code in die Attribute von HTML-Tags zu schreiben. Diese Methode eignet sich für Situationen, in denen bestimmte interaktive Effekte mithilfe von JavaScript implementiert werden müssen und nur in diesem Tag funktionieren. Das Folgende ist ein Beispiel für die Verwendung eines Inline-Skripts, um beim Klicken auf eine Schaltfläche ein Eingabeaufforderungsfeld anzuzeigen:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内脚本示例</title>
</head>

<body>
    <button onclick="alert('Hello World!')">点击这里弹出提示框</button>
</body>

</html>

In diesem Beispiel wird der JavaScript-Code durch das onclick-Ereignis direkt zum HTML-Schaltflächenelement hinzugefügt, sodass ein Eingabeaufforderungsfeld angezeigt wird wenn auf die Schaltfläche geklickt wird.

Mit den oben genannten drei Methoden können Sie JavaScript-Code zu HTML hinzufügen, um eine interaktivere und dynamischere Webseite zu erhalten. Wählen Sie in der tatsächlichen Entwicklung die entsprechende Methode zum Hinzufügen von JavaScript-Code nach Bedarf aus und achten Sie auf die Lesbarkeit, Wartbarkeit und Wiederverwendbarkeit des Codes.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Javascript zu HTML hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：css3deleteNächster Artikel：css3delete

In Verbindung stehende Artikel

Mehr sehen