Verwenden von JavaScript in HTML

Verwenden von JavaScript in HTML

Das <script>-Tag

In HTML5 hat Skript die folgenden Attribute: async, defer, charset, src, type,

  • asynchron (optional):

Schlüsselwörter: asynchrones Skript, externe Datei, sofortiger Download;

Wenn das Tag dieses Attribut enthält, wird das Skript (externe Datei) sofort heruntergeladen. Dies gilt nur für externe Skriptdateien. Während des Downloads können andere Vorgänge auf der Seite ausgeführt werden. Die Analyse und Ausführung werden nach Abschluss des Downloads angehalten und die Analyse wird nach der Ausführung fortgesetzt, die Ausführungsreihenfolge kann jedoch nicht garantiert werden.

<script src="js/index2.js" async="async"></script>
  • aufschieben (optional):

Schlüsselwörter: Verzögertes Skript, externe Datei, verzögertes Laden;

Wenn das Tag dieses Attribut enthält, kann das Skript warten, bis die Seite vollständig analysiert oder angezeigt wurde, bevor es ausgeführt wird. Dies gilt nur für externe Dateien. Wenn zwei Skripte mit „defer“ gleichzeitig vorhanden sind, wird das erste aufgrund der Verzögerung vor dem zweiten ausgeführt.

<script src="js/index1.js" defer="defer"></script>
  • Zeichensatz (optional):

Schlüsselwörter: Zeichensatz

Die meisten Browser ignorieren seinen Wert bereits, daher wird er selten verwendet.

  • src (optional):

Schlüsselwörter: externe Referenz

Gibt die Adresse der externen Datei an, auf die verwiesen werden muss.

  • Typ (optional):

Schlüsselwörter: MIME (Inhaltstyp der Skriptsprache)

Um maximale Browserkompatibilität zu gewährleisten, ist der Wert des Typattributs immer noch hauptsächlich Text/Javascript. Wenn dieses Attribut nicht geschrieben wird, ist sein Standardwert immer noch Text/Javascript.

Hinweis: Wenn Sie auf externe Dateien verweisen, fügen Sie dem Tag keinen anderen JS-Code hinzu. Beim Parsen lädt der Browser nur die von src referenzierte externe Skriptdatei herunter und der in die Tabelle eingebettete Code wird ignoriert.

Position des <script>-Tags

Normalerweise platzieren wir Verweise auf Tags mit externen Dateien (einschließlich CSS-Dateien, JavaScript-Dateien) an derselben Stelle, normalerweise im <head>-Tag.

Wenn jedoch während des Analysevorgangs mehrere externe JavaScript-Dateien gefunden werden, kann die Seite erst vollständig angezeigt werden, wenn alle externen Dateien geladen sind. Daher platzieren wir sie normalerweise am Ende des <body>-Tags, wie unten gezeigt:

Oben wurde erwähnt, dass <script> das Defer-Attribut hat, aber wie in HTML5 erwähnt, ignoriert HTML5 das für eingebettete Skripts festgelegte Defer-Attribut. Derzeit unterstützen nur IE4 bis IE7 das Defer-Attribut. IE8 und höher folgen vollständig dem HTML5-Standard, daher ist es immer noch die beste Wahl, <script> am Ende des <body>-Tags zu platzieren.

Vorteile der Referenzierung externer Dateien

  • Einfach zu warten: Durch das Zusammenführen aller JavaScript-Dateien wird nicht nur die Bearbeitung des HTML-Codes vermieden, sondern es wird für Entwickler auch einfacher, Code zu schreiben und zu warten.
  • Beschleunigen Sie das Surfen: Wenn mehrere HTML-Seiten auf dieselbe externe JavaScript-Datei verweisen, wird die Datei nur einmal geladen (zwischengespeichert), was bedeutet, dass die Seitenladegeschwindigkeit beschleunigt werden kann.
  • Sicherheit: Beim Verweisen auf externe Dateien wird dem Benutzer beim Anzeigen des HTML-Codes der JavaScript-Code nicht angezeigt. Dies ist sicherer, als ihn in Tags zu schreiben.

Das <noscript>-Tag

Die wörtliche Bedeutung ist NO-script, kein Skript, d. h. wenn der Browser JavaScript nicht unterstützt, wird der Inhalt im Tag <noscript> angezeigt.

  • Ihr Browser unterstützt kein Skript;
  • Der Browser unterstützt Skripte, aber JavaScript ist deaktiviert;

Wenn eine der beiden oben genannten Bedingungen erfüllt ist, wird der Inhalt innerhalb des <noscript>-Tags angezeigt.

Auf der obigen Seite wird den Benutzern eine Meldung angezeigt, die nur angezeigt wird, wenn der Browser JavaScript nicht unterstützt oder deaktiviert. Andernfalls wird der Benutzer sie nie sehen und die Anzeige anderer Elemente auf der Seite wird dadurch nicht beeinträchtigt.

Zusammenfassen

Oben ist der Beispielcode für die Verwendung von JavaScript in HTML, den ich Ihnen vorgestellt habe. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<:  Werden die erfolgreichsten Unternehmen der Zukunft Technologieunternehmen oder Designunternehmen sein?

>>:  Praxis der Implementierung der Benutzeranmeldung durch Front-End- und Back-End-Interaktion von Node.js

Artikel empfehlen

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Swap deaktivieren Wenn auf dem Server ein Datenba...

So richten Sie einen URL-Link im Nginx-Server ein

Websites mit einer Architektur wie LNMP werden im...

So überprüfen und organisieren Sie Websitedateien mit Dreamweaver8

Was ist der Zweck der Erstellung einer eigenen Web...

JavaScript implementiert den Front-End-Countdown-Effekt

In diesem Artikel wird der spezifische JavaScript...

18 erstaunliche Verbindungen zwischen Interaktionsdesign und Psychologie

Designer müssen Psychologie verstehen, indem sie ...

Docker-Speicherüberwachung und Stresstestmethoden

Der ausgeführte Docker-Container zeigt, dass der ...

Erstellen Sie Schritt für Schritt ein Dateiverwaltungssystem mit nginx+FastDFS

Inhaltsverzeichnis 1. Einführung in FastDFS 1. Ei...

js implementiert einen einfachen Rechner

Verwenden Sie natives JS, um einen einfachen Rech...

Detaillierte Erklärung der HTML-Programmier-Tags und der Dokumentstruktur

Der Zweck der Verwendung von HTML zum Markieren v...

Detaillierte Erklärung der Set-Datenstruktur von JavaScript

Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...

So löschen Sie die Hintergrundfarbe des A-Tags, wenn in H5 darauf geklickt wird

1. Die blaue Farbe des Tags wird aufgehoben, wenn...

Detaillierte Erklärung zum Aktivieren des https-Dienstes in Apache unter Linux

Dieser Artikel beschreibt, wie man den https-Dien...

Das WeChat-Applet realisiert den Neun-Quadrat-Rastereffekt

In diesem Artikel wird der spezifische Code für d...