LU01b - JavaScript in HTML einbinden

Es gibt verschiedene Möglichkeiten, JavaScript in eine HTML-Seite einzubinden. Die wichtigsten sind:

  1. Inline im HTML-Tag
  2. Intern im <script>-Tag
  3. Extern in einer separaten .js-Datei

Der JavaScript-Code wird direkt als Attribut in einem Element reingeschrieben. 👉 Das ist nicht die eleganteste Lösung, aber für schnelle Tests praktisch.

HTML-Datei

<!DOCTYPE html>
<html>
  <head>
    <title>Beispiel</title>
  </head>
  <body>
    <p onclick="document.body.style.backgroundColor = 'lightblue';">
      Klick mich, um den Hintergrund blau zu machen!
    </p>
  </body>
</html>

JavaScript wird direkt im HTML-Dokument, meist im <head> oder besser am Ende von <body> platziert, damit das DOM schon geladen ist.

HTML-Datei

<!DOCTYPE html>
<html>
  <head>
    <title>Internes Script</title>
  </head>
  <body>
    <h1>Beispiel mit Script-Tag</h1>
    <h3>Beim Laden der Seite  wird die Hintergrundfarbe auf "lightblue" geändert.</h3>
    <!-- JS-Code-Bereich wird irgendwo definiert, hier direkt dort wo es gebraucht wird, und gleich ausgefüllt.
         In diesem Falle wird einfach Hintergrundfarbe mittels JS verändert --->
    <script>
      document.body.style.backgroundColor = "lightblue";
    </script>
  </body>
</html>

Dieser Ansatz ist der saubere Standardweg: Gemäss der Maxime Teile und herrsche wird HTML und JS in separaten Dateien gehalten. So bleibt der HTML-Code übersichtlich und JavaScript kann wiederverwendet werden.

HTML-Datei

<!DOCTYPE html>
<html>
  <head>
    <title>Externes Script</title>
  </head>
  <body>
    <h1>Externes JavaScript</h1>
    <h3>Hintergrundfarbe wird auf "lightblue" geändert</h3>
    <!-- JS-Code wird direkt aus der Datei geholt und im body verarbeitet -->
    <script src="scripts/script.js" ></script>
  </body>
</html>

Script.js

  document.body.style.backgroundColor = "lightblue";
  • de/modul/m288/learningunits/lu01/02.txt
  • Zuletzt geändert: 2025/08/29 11:44
  • von vdemir