suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So führen Sie Javascript in HTML ein

So führen Sie Javascript in HTML ein

WBOY
WBOYOriginal
2023-05-09 15:24:3716561Durchsuche

Im Prozess der Webentwicklung müssen wir häufig JavaScript verwenden, um Webseiten dynamische Effekte und interaktive Funktionen hinzuzufügen. Wie führt man also JavaScript in HTML-Dateien ein? In diesem Artikel erfahren Sie, wie Sie JavaScript einführen und worauf Sie achten sollten.

1. Verwenden Sie das script-Tag, um JavaScript einzuführen.

In HTML-Dateien können wir das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 verwenden. Die spezifischen Schritte sind wie folgt:

  1. Suchen Sie das 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1-Tag in der HTML-Datei

  2. und fügen Sie es hinzu innerhalb der 93f0f5c25f18dab9d176bd4f6de5d30e 5b8b77bb7a3607db25abf34210579d17-Datei, um auf den Code zu verweisen.

    3. Unter anderem verwenden wir 352b1442a1f39d4f49881b7e5087d9182cacc6d41bbb37262a98f745aa00fbf0, um externe JavaScript-Dateien einzuführen. Die test.js-Datei wird im selben Verzeichnis wie die HTML-Seite abgelegt und hat folgenden Inhalt: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入</title>
  <script src="test.js"></script> 
<!-- 引入test.js文件 -->
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Wenn die HTML-Datei in das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag geladen wird, wird sie automatisch interpretiert und führen Sie den JavaScript-Code der test.js-Datei aus. Zu diesem Zeitpunkt wird ein Dialogfeld mit dem Inhalt „Hallo Welt“ angezeigt.

2. Einführung in die Attribute des Skript-Tags

Im obigen Code verwenden wir das src-Attribut des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags, um auf die externe JavaScript-Datei zu verweisen. Was sind also die anderen Attribute des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags? Wie kann ich diese Attribute verwenden, um JavaScript einzubinden? Im Folgenden stellen wir einige wichtige Attribute des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags vor.

src-Attribut
  1. Dieses Attribut wird verwendet, um die JavaScript-Datei anzugeben, die verknüpft werden muss. 
alert("Hello World!");

Wie im obigen Code gezeigt, können wir im src-Attribut den Pfad der JavaScript-Datei angeben, die importiert werden muss.

Wenn der Pfad ein relativer Pfad ist, ist es ein relativer Pfad basierend auf dem Speicherort der HTML-Datei. Bei der Angabe des Pfads müssen Sie auf die Richtigkeit des Pfads achten.

async-Attribut
  1. Dieses Attribut wird verwendet, um JavaScript-Code asynchron auszuführen, ohne die Seite zu blockieren. Beispiel: Das 
<script src="test.js"></script>

async-Attribut bewirkt, dass der Browser nicht auf das Laden der JavaScript-Datei wartet, bevor er mit dem Laden anderer Ressourcen und Elemente auf der Webseite fortfährt, sondern die JS-Datei nach anderen Ressourcen und Elementen lädt sind geladen. Dadurch wird das Rendern der Seite beschleunigt und Benutzer können den Seiteninhalt schneller sehen. Das durch das Async-Attribut eingeführte JavaScript wird jedoch ausgeführt, nachdem das Rendern der Seite abgeschlossen ist, sodass es Auswirkungen auf das nachfolgende Seitenverhalten haben kann.

Defer-Attribut
  1. Dieses Attribut wird auch zum asynchronen Ausführen von JavaScript-Code verwendet, es wird nach der HTML-Datei verwendet Der JavaScript-Code wird nach und vor dem „DOMContentLoaded“-Ereignis der Seite ausgeführt. 
<script src="test.js" async></script>

Im Vergleich zum async-Attribut eignet sich das defer-Attribut besser für JavaScript, das auf DOM-Elementen basieren muss, da bei der Ausführung alle DOM-Elemente geladen wurden. Daher fügen wir bei der Einführung von JavaScript-Dateien normalerweise das Defer-Attribut hinzu.

Typattribut
  1. Dieses Attribut gibt den MIME-Typ des eingebetteten oder verknüpften JavaScript-Codes an. In HTML5 ist der MIME-Typ von JavaScript standardmäßig „text/javascript“, sodass wir das angegebene Typattribut im Allgemeinen nicht im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag anzeigen müssen. 
<script src="test.js" defer></script>

Wenn Sie jedoch andere Arten von JavaScript-Dateien (z. B. TS-Dateien) einführen möchten, müssen Sie den entsprechenden Dateityp über das Typattribut angeben.

3. Dinge, die bei der Einführung von JavaScript zu beachten sind

Bei der Einführung von JavaScript-Dateien müssen wir außerdem auf folgende Punkte achten:

#🎜 🎜#Versuchen Sie, Ihr Bestes zu geben. Zentralisieren Sie JavaScript-Dateien, um die Anzahl der HTTP-Anfragen zu reduzieren.

    Wenn Sie die CDN-Beschleunigung nutzen können, versuchen Sie, die JavaScript-Dateien des CDN zu verwenden.
  1. Fügen Sie JavaScript-Dateien am Ende der Seite ein oder markieren Sie sie als zurückgestellt oder asynchron.
  2. Schreiben Sie JavaScript nicht direkt in die Seite, sondern sollte in einer externen JS-Datei eingeführt werden.
  4. Kurz gesagt, die Einführung von JavaScript in HTML ist sehr einfach, verwenden Sie einfach das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 In der tatsächlichen Entwicklung müssen wir jedoch auch verschiedene Attribute und Vorsichtsmaßnahmen sinnvoll nutzen, um die Leistung und Codequalität zu verbessern. Ich hoffe, dieser Artikel kann jedem helfen, JavaScript-Einführungsmethoden in HTML besser zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonSo führen Sie Javascript in HTML ein. 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：Die Kommentarsyntax in JavaScript lautetNächster Artikel：Die Kommentarsyntax in JavaScript lautet

In Verbindung stehende Artikel

Mehr sehen