JavaScript Wohin
"Wir sind hier, um einen Beitrag zu dieser Welt zu leisten. Warum sind wir sonst hier?"
Steve Jobs
Das <script>-Tag
In HTML wird JavaScript-Code zwischen den Tags <script> und </script> eingefügt.
Beispiel
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Try it Yourself »
Alte JavaScript-Beispiele verwenden möglicherweise ein Typattribut: <script type="text/javascript">.
Das Typattribut ist nicht erforderlich. JavaScript ist die Standard-Skriptsprache in HTML.
JavaScript-Funktionen und -Ereignisse
Eine JavaScript- function ist ein Block von JavaScript-Code, der bei „Aufruf“ ausgeführt werden kann.
Beispielsweise kann eine Funktion aufgerufen werden, wenn ein Ereignis eintritt, etwa wenn der Benutzer auf eine Schaltfläche klickt.
In späteren Kapiteln erfahren Sie noch viel mehr über Funktionen und Ereignisse.
JavaScript in <head> oder <body>
Sie können beliebig viele Skripte in einem HTML-Dokument platzieren.
Skripte können im Abschnitt <body> oder im Abschnitt <head> einer HTML-Seite platziert werden, oder in beiden.
JavaScript in <head>
In diesem Beispiel wird eine JavaScript-function im Abschnitt <head> einer HTML-Seite platziert.
Die Funktion wird aufgerufen, wenn auf eine Schaltfläche geklickt wird:
Beispiel
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body><h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Try it Yourself »
JavaScript in <body>
In diesem Beispiel wird eine JavaScript-function im Abschnitt <body> einer HTML-Seite platziert.
Die Funktion wird aufgerufen, wenn auf eine Schaltfläche geklickt wird:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Try it Yourself »
Das Platzieren von Skripten am Ende des <body>-Elements verbessert die Anzeigegeschwindigkeit, da die Skriptinterpretation die Anzeige verlangsamt.
Externes JavaScript
Skripte können auch in externen Dateien abgelegt werden:
Externe Datei: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Absatz geändert.";
}
Externe Skripte sind praktisch, wenn der gleiche Code auf vielen verschiedenen Webseiten verwendet wird.
JavaScript-Dateien haben die Dateierweiterung .js.
Um ein externes Skript zu verwenden, geben Sie den Namen der Skriptdatei in das Attribut src (Quelle) eines <script>-Tag:
Sie können eine externe Skriptreferenz nach Belieben in <head> oder <body> platzieren.
Das Skript verhält sich so, als ob es sich genau dort befände, wo sich das Tag <script> befindet.
Externe Skripte dürfen keine <script>-Tags enthalten.
Vorteile von externem JavaScript
Das Platzieren von Skripten in externen Dateien hat einige Vorteile:
- Es trennt HTML und Code
- Es erleichtert das Lesen und Verwalten von HTML und JavaScript
- Im Cache gespeicherte JavaScript-Dateien können das Laden von Seiten beschleunigen
Um mehrere Skriptdateien zu einer Seite hinzuzufügen, verwenden Sie mehrere Skript-Tags:
Beispiel
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Externe Referenzen
Ein externes Skript kann auf drei verschiedene Arten referenziert werden:
- Mit einer vollständigen URL (einer vollständigen Webadresse)
- Mit einem Dateipfad (wie /js/)
- Ohne Pfad
In diesem Beispiel wird eine vollständige URL als Link verwendet myScript.js:
In diesem Beispiel wird ein Dateipfad für die Verknüpfung verwendet myScript.js:
In diesem Beispiel wird kein Pfad zum Verlinken verwendet myScript.js:
Weitere Informationen zu Dateipfaden finden Sie im Kapitel HTML Dateipfade.
JavaScript — Woher? W3Schools Video Tutorial
Dieses Video zeigt, wo JavaScript in HTML platziert werden soll.
Teil einer Reihe von Video -Tutorials, um JavaScript für Anfänger zu lernen!
