JavaScript Wohin


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


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>

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.


JavaScript-Funktionen und -Ereignisse

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.


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-Funktion im Abschnitt <head> platziert einer HTML-Seite.

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>

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> 


JavaScript in <body>

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:

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>

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.


Externes JavaScript

Skripte können auch in externen Dateien abgelegt werden:

Externe Datei: myScript.js

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:

Beispiel

<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.


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

  • 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 Weg

In diesem Beispiel wird eine vollständige URL verwendet, um auf myScript.js zu verlinken:

Beispiel

<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:

Beispiel

<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:

Beispiel

<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.