suchen

Heim  >  Artikel  >  Web-Frontend  >  So rufen Sie Javascript extern auf

So rufen Sie Javascript extern auf

王林
王林Original
2023-05-09 09:01:361022Durchsuche

Im modernen Webdesign ist JavaScript zu einem unverzichtbaren Bestandteil geworden. JavaScript kann die Funktionalität von Webseiten problemlos erweitern und gleichzeitig das Benutzererlebnis verbessern. Obwohl JavaScript direkt in HTML eingebettet werden kann, ist es sehr nützlich, JavaScript als separate externe Datei zu kapseln und extern aufzurufen, wenn Sie denselben JavaScript-Code auf mehreren Webseiten wiederverwenden müssen.

In diesem Artikel wird erläutert, wie Sie JavaScript-Code extern aufrufen, einschließlich der Einbettung in HTML-Dokumente und der Verknüpfung mit Dokumenten.

  1. JavaScript in HTML-Dokumente einbetten

Das direkte Einbetten von JavaScript-Code in HTML-Dokumente ist der einfachste Weg. Sie müssen lediglich das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag in den Head-Bereich oder Body-Bereich des HTML schreiben und den JavaScript-Code direkt darin einbetten.

Das Folgende ist beispielsweise ein einfaches HTML-Dokument mit eingebettetem JavaScript-Code: 

<!DOCTYPE html>
<html>
<head>
  <title>嵌入JavaScript代码</title>
  <script>
    function sayHello() {
      alert("Hello World!");
    }
  </script>
</head>
<body>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

In diesem Beispiel definieren wir eine einfache Funktion namens sayHello(). Es begrüßt den Benutzer mit einer Warnaktion. Wir rufen diese Funktion mit dem onclick-Ereignis auf, das im HTML-Button-Tag definiert ist.

Während dieser Ansatz für kleine Projekte in Ordnung sein mag, kann die Einbettung Ihres gesamten JavaScript-Codes in das HTML-Dokument bei größeren Projekten dazu führen, dass der Code unübersichtlich und schwer zu pflegen ist.

  1. JavaScript-Code als separate externe Datei speichern

Um dieses Problem zu lösen, können wir den JavaScript-Code als separate externe Datei speichern. Dieser Ansatz macht den Code klarer und leichter lesbar und erleichtert die Wiederverwendung desselben Codes in verschiedenen HTML-Dokumenten. Da der Browser externe Dateien zwischenspeichert, erhöht sich gleichzeitig auch die Ladegeschwindigkeit.

Hier ist ein einfaches Beispiel: Wir speichern den JavaScript-Code in einer Datei namens myscript.js. 

function sayHello() {
  alert("Hello World!");
}

Wir speichern den obigen Code als myscript.js und verlinken ihn dann in unser HTML-Dokument. 

<!DOCTYPE html>
<html>
<head>
  <title>调用外部JavaScript文件</title>
  <script src="myscript.js"></script>
</head>
<body>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

Durch die Verwendung des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags und des src-Attributs können wir die Datei myscript.js in das HTML-Dokument verlinken. Auf diese Weise können wir alle in der JavaScript-Datei definierten Funktionen und Variablen im HTML-Dokument aufrufen.

Es ist zu beachten, dass Sie bei der Verwendung externer JavaScript-Dateien sicherstellen müssen, dass die JavaScript-Dateien korrekt geladen werden können. Wenn der Dateipfad falsch ist, kann der Browser die Datei nicht finden und der Code in der JavaScript-Datei wird nicht ausgeführt.

Ein weiterer Vorteil der Einbindung externer JavaScript-Dateien in HTML-Dokumente besteht darin, dass die Website dadurch einfacher zu verwalten und zu warten ist. Wenn der JavaScript-Code aktualisiert werden muss, ändern Sie einfach den Code in der JavaScript-Datei und alle HTML-Dokumente, die die Datei verwenden, können automatisch aktualisiert werden.

  1. Mehrere Funktionen und Variablen in einer JavaScript-Datei definieren

Im Allgemeinen kann eine JavaScript-Datei eine Reihe logisch verwandter Funktionen und Variablen enthalten. Dies kann Ihnen helfen, Ihren Code besser zu organisieren und ihn in mehr Anwendungsszenarien nutzbar zu machen.

Hier ist zum Beispiel eine Datei namens myfunctions.js, die mehrere Funktionen enthält: 

function addNumber(a, b) {
  return a + b;
}

function subtractNumber(a, b) {
  return a - b;
}

function divideNumber(a, b) {
  return a / b;
}

Wir führen diese JavaScript-Datei in unser HTML-Dokument ein: 

<!DOCTYPE html>
<html>
<head>
  <title>在JavaScript文件中定义多个函数和变量</title>
  <script src="myfunctions.js"></script>
</head>
<body>
  <p>10 + 5 = <script>document.write(addNumber(10, 5));</script></p>
  <p>10 - 5 = <script>document.write(subtractNumber(10, 5));</script></p>
  <p>10 / 5 = <script>document.write(divideNumber(10, 5));</script></p>
</body>
</html>

Dieses Beispiel zeigt, wie man mehrere Funktionen in mehreren HTML-Dokumenten verwendet. Mehrere definierte Funktionen verwenden in myfunctions.js. Wir können diese Funktionen aufrufen, indem wir Funktionen in einem Skriptblock aufrufen.

  1. Asynchrones Laden von JavaScript verwenden

Wenn wir eine JavaScript-Datei in ein HTML-Dokument einfügen, beginnt der Browser sofort mit dem Laden der Datei und blockiert das Rendern der Seite, bis die Datei vollständig geladen ist. Dies kann dazu führen, dass Seiten langsamer geladen werden.

Um dieses Problem zu vermeiden, können wir das asynchrone Laden von JavaScript verwenden. Konkret können wir den Download von JavaScript unten auf der HTML-Seite platzieren und das async-Attribut im Skript-Tag auf true setzen. Dies führt dazu, dass der Browser den Download der JavaScript-Datei ignoriert, bis die Seite vollständig geladen ist und mit dem Herunterladen des Codes beginnt.

Zum Beispiel unten ist ein HTML-Dokument, das eine JavaScript-Datei asynchron lädt: 

<!DOCTYPE html>
<html>
<head>
  <title>异步加载JavaScript</title>
</head>
<body>
  <h1>使用异步加载JavaScript进行页面优化</h1>
  <p>这里是页面的正文内容。</p>
  <script async src="myscript.js"></script>
</body>
</html>

Wir laden die JavaScript-Datei myscript.js in das HTML-Dokument. Wenn Sie das Attribut „async“ auf „true“ setzen, lädt der Browser den Skriptcode asynchron und verhindert nicht, dass die Seite gerendert wird.

Zusammenfassung

In diesem Artikel haben wir besprochen, wie man JavaScript-Code in HTML-Dokumente einbettet und JavaScript-Code extern aufruft. Wir haben auch besprochen, wie man JavaScript-Code als separate externe Datei speichert, mehrere Funktionen und Variablen in einer JavaScript-Datei definiert und das asynchrone Laden von JavaScript-Code zur Seitenoptimierung verwendet.

Ob Sie Anfänger oder Profi sind, das Verständnis dieses Wissens wird Ihnen helfen, JavaScript-Code besser zu organisieren und zu verwalten und die Leistung und Wartbarkeit Ihrer Website zu verbessern.

Das obige ist der detaillierte Inhalt vonSo rufen Sie Javascript extern auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 封装 JS 事件 异步
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：HTML-CSS-SchreibmethodeNächster Artikel：HTML-CSS-Schreibmethode

In Verbindung stehende Artikel

Mehr sehen