JavaScript Wohin
Das <script>-Tag
In HTML wird JavaScript-Code zwischen den Tags <script>und eingefügt.</script>
Beispiel
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Alte JavaScript-Beispiele verwenden möglicherweise ein Typattribut: <script type="text/javascript">.
Das type-Attribut ist nicht erforderlich. JavaScript ist die Standard-Skriptsprache in HTML.
JavaScript-Funktionen und -Ereignisse
Ein JavaScript functionist ein Block von JavaScript-Code, der ausgeführt werden kann, wenn er „aufgerufen“ wird.
Beispielsweise kann eine Funktion aufgerufen werden, wenn ein Ereignis eintritt, beispielsweise 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 ein HTML-Dokument einfügen.
Skripte können im <body>oder im <head>Abschnitt einer HTML-Seite oder in beiden platziert werden.
JavaScript in <head>
In diesem Beispiel wird ein JavaScript functionim <head>Abschnitt einer HTML-Seite platziert.
Die Funktion wird aufgerufen (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>
JavaScript in <body>
In diesem Beispiel wird ein JavaScript functionim <body>Abschnitt einer HTML-Seite platziert.
Die Funktion wird aufgerufen (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>
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 platziert werden:
Externe Datei: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Externe Skripte sind praktisch, wenn derselbe 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 srcAttribut (source) eines <script>Tags ein:
Beispiel
<script src="myScript.js"></script>
Sie können eine externe Skriptreferenz in <head>oder platzieren <body>, wie Sie möchten.
Das Skript verhält sich so, als würde es sich genau dort befinden, wo sich das <script>Tag 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 macht HTML und JavaScript einfacher zu lesen und zu warten
- Zwischengespeicherte 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 jeden Weg
Dieses Beispiel verwendet eine vollständige URL , um auf myScript.js zu verlinken:
Beispiel
<script src="https://www.w3schools.com/js/myScript.js"></script>
Dieses Beispiel verwendet einen Dateipfad , um auf myScript.js zu verlinken:
Beispiel
<script src="/js/myScript.js"></script>
Dieses Beispiel verwendet keinen Pfad, um auf myScript.js zu verlinken:
Beispiel
<script src="myScript.js"></script>
Mehr über Dateipfade erfahren Sie im Kapitel HTML -Dateipfade .