HTMLCSSJavaScriptIndexRoadmapImpressum

Externe JavaScript-Datei einbinden

Externe JavaScript-Dateien trennen das Verhalten einer Webseite vom HTML-Code. Dabei speicherst du JavaScript in einer separaten Datei und verknüpfst es mit deiner HTML-Datei. Dadurch bleibt dein Code übersichtlicher und einfacher zu warten.

HTML-Datei

index.html

1<!DOCTYPE html>
2<html lang="de">
3<head>
4    <meta charset="UTF-8">
5    <title>Externes JavaScript</title>
6</head>
7<body>
8
9    <h1>Externe JavaScript-Datei einbinden</h1>
10
11
12    <!-- Externes JavaScript einbinden -->
13    <script src="script.js"></script>
14
15</body>
16</html>

Erklärung

  • <script src="script.js"></script> bindet deine externe JavaScript-Datei namens script.js in die HTML-Seite ein.
  • Die Datei script.js enthält den gesamten JavaScript-Code für die Interaktivität.
  • Das script-Tag steht am besten am Ende des body-Bereichs, damit die HTML-Elemente zuerst geladen werden, bevor JavaScript darauf zugreift.
  • Änderungen am Verhalten nimmst du nur in der JavaScript-Datei vor.
  • Mehrere HTML-Dateien kannst du mit derselben JavaScript-Datei verknüpfen.

Im nächsten Kapitel lernst du: JavaScript dierekt im HTML-Dokument