In HTML wird JavaScript-Code zwischen den Tags <script>
und </script>
eingefügt.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
Alte JavaScript-Beispiele verwenden möglicherweise ein Typattribut: <script; type="text/javascript">.
Das Typattribut ist nicht erforderlich. JavaScript ist die Standard-Skriptsprache in HTML.
Eine JavaScript-Funktion
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.
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.
In diesem Beispiel wird eine JavaScript-Funktion
im Abschnitt <head>
platziert einer HTML-Seite.
Die Funktion wird aufgerufen (aufgerufen), wenn auf eine Schaltfläche geklickt wird:
<!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>
Probieren Sie es selbst aus →
<!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>
In diesem Beispiel wird eine JavaScript-Funktion
im Abschnitt <body>
einer HTML-Seite platziert.
Die Funktion wird aufgerufen (aufgerufen), wenn auf eine Schaltfläche geklickt wird:
<!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>
Probieren Sie es selbst aus →
<!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 Anzeige Geschwindigkeit, da die Skriptinterpretation die Anzeige verlangsamt.
Skripte können auch in externen Dateien abgelegt werden:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
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) von ein ein <script>
-Tag:
<script src="myScript.js"></script>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
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.
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
Zwischengespeicherte JavaScript-Dateien können das Laden von Seiten beschleunigen
Um mehrere Skriptdateien zu einer Seite hinzuzufügen - verwenden Sie mehrere Skript-Tags:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
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 Weg
In diesem Beispiel wird eine vollständige URL verwendet, um auf myScript.js zu verlinken:
<script src="https://www.w3schools.com/js/myScript.js"></script>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click Me</button>
<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>
In diesem Beispiel wird ein Dateipfad verwendet, um eine Verknüpfung zu myScript.js herzustellen:
<script src="/js/myScript.js"></script>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="/js/myScript.js"></script>
</body>
</html>
In diesem Beispiel wird kein Pfad zur Verknüpfung mit myScript.js verwendet:
<script src="myScript.js"></script>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
Weitere Informationen zu Dateipfaden finden Sie im Kapitel HTML Dateipfade.