English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript Grundtutorials

JavaScript Objekt

JavaScript Funktion

JS HTML DOM

JS Browser BOM

AJAX Grundtutorials

JavaScript Referenzhandbuch

Verwendung von JavaScript

Verwendung von JavaScript in HTML

In diesem Kapitel werden Sie lernen, wie Sie JavaScript in Ihre Webseite integrieren können.

Normalerweise gibt es drei Methoden, um JavaScript in eine Webseite zu integrieren:

  • Man kann<script>und</script>Tags einfügen

  • Verwenden SieEreignisattributen (z.B. onclick, onkeypress usw.) JavaScript-Code direkt in HTML-Tags einfügen

  • Erstellen Sie eine externe JavaScript-Datei und laden Sie sie über<script>das Attribut src des Tags verwenden, um es in die Seite zu laden

<script>-Tag

In HTML muss zwischen<script>und</script>JavaScript-Code zwischen den Tags einfügen.

<script>
document.write("Hello　World");
</script>
Testen Sie heraus‹/›

Beachten Sie:Alte JavaScript-Beispiele könnten den Attribut type verwenden: <script type="text/javascript">. Seit HTML5Seit dem5Standard-Skriptsprache.

JavaScript im <head> oder <body>.

Sie können eine beliebige Anzahl von Skripten in einem HTML-Dokument platzieren.

Skripte können in der HTML-Seite platziert werden.<head>oder im <body>, je nachdem, wann Sie den Skript laden möchten.

im <head>-Teil platziert.

In diesem Beispiel werden die JavaScript-Funktionen in der HTML-Seite<head>Teil.

Diese Funktion wird aufgerufen, wenn Sie auf die Schaltfläche klicken:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunc() {
　　document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>JavaScript im Head</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">Dies ist ein Absatz</p>
</html>
Testen Sie heraus‹/›

jeder<script>Die Tags verhindern den Prozess der Seitenpräsentation, bis sie vollständig heruntergeladen und ausgeführt wurden, daher beeinträchtigt die Plazierung am Anfang des Dokuments ohne legitimen Grund erheblich die Leistung Ihrer Webseite.

im <body>-Teil platziert.

In diesem Beispiel werden die JavaScript-Funktionen in der HTML-SeiteTeil.

Diese Funktion wird aufgerufen, wenn Sie auf die Schaltfläche klicken:

<!DOCTYPE html>
<html>
<h2>JavaScript im Body</h2>
<button type="button" onclick="myFunc()">Click</button>
<p id="output">Dies ist ein Absatz</p>
<script>
function myFunc() {
　　document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html>
Testen Sie heraus‹/›

Das Skript sollte am Ende des Textteils platziert werden, direkt neben</body>vor dem Tag, was die Ladezeit Ihrer Webseite schneller macht, da es verhindert, dass die Initialseitenpräsentation behindert wird.

inline JavaScript-Code platzieren

Sie können auchEreignisattributen (Beispielsweise onclick, onkeypress und andere) fügen Sie JavaScript-Code direkt in HTML-Tags ein.

<p onclick="this.innerHTML='Hello World';">This is First Paragraph (Click me)</p>
Testen Sie heraus‹/›

Es sollte jedoch vermieden werden, große Mengen an JavaScript-Code inline zu verwenden, da JavaScript die HTML verwirrt und den Code schwer zu warten macht.

Aufruf externer JavaScript-Dateien

Sie können auch JavaScript-Code in eine separate Datei mit der Erweiterung .js einfügen und dann durch<script>bezeichnetensrcDas Attribut lädt es in die Seite.

Das folgende Beispiel verweist auf eine externe JavaScript-Datei:

<script src="myscript.js"></script>
Testen Sie heraus‹/›

Um mehrere Skriptdateien auf einer Seite hinzuzufügen, verwenden Sie mehrere Skript-Tags:

<script src="myscript_1.js"></script>
<script src="myscript_2.js"></script>

Sie können, wenn Sie möchten,<head>oder<body>Platzieren Sie einen externen Skript-Verweis.

Das Verhalten dieses Skripts ist so, als ob es genau dort wäre<script>am selben Ort wie der

Beachten Sie:Externe Skriptdateien können nicht enthalten<script>Markierung.

Vorteile externer JavaScript

Es gibt einige Vorteile, Skripte in externen Dateien zu platzieren:

  • Es trennt JavaScript vom HTML

  • Es macht HTML und JavaScript lesbar und unterhaltsam

  • Gecachte JavaScript-Dateien können die Ladezeit der Seite beschleunigen

  • Das gleiche Skript kann für mehrere Dokumente verwendet werden

Hinweis: Normalerweise wird ein externes JavaScript-Datei beim ersten Download im Browser-Cache gespeichert (wie Bilder und Style-Sheets), daher ist es nicht notwendig, die Datei mehrmals vom Webserver des erstellten Webseiten herunterzuladen. Lade schneller.

Externe Skript Referenz

Sie können vollständige URLs oder Pfade relativ zur aktuellen Webseite verwenden, um externe Skripte zu referenzieren.

Dieses Beispiel verlinkt zu Skripten über vollständige URLs:

<script src="https://de.oldtoolbag.com/run/js/myscript.js"></script>
Testen Sie heraus‹/›

Dieses Beispiel verwendet Skripte, die sich im angegebenen Ordner der aktuellen Website befinden:

<script src="/run/js/myscript.js"></script>
Testen Sie heraus‹/›

Sie können im HTML Dateipfade Mehr Informationen über Dateipfade finden Sie im

Ausgabe von JavaScriptHäufig verwendete JavaScript-Beispiele