W3docs
de
Anmelden

JavaScript verwenden

JavaScript mit dem script-Tag einbinden, externe .js-Dateien verknüpfen, Ladereihenfolge mit defer und async steuern und die Browser-Konsole nutzen.

Was dieses Kapitel behandelt

Dies ist Ihr Einstiegspunkt zum Schreiben von JavaScript. Am Ende werden Sie wissen, wie man:

  • JavaScript direkt mit dem <script>-Tag in eine HTML-Seite einfügt,
  • den Code in eine separate .js-Datei auslagert und verknüpft,
  • mit den Attributen defer und async steuert, wann ein Skript ausgeführt wird,
  • die ersten Codezeilen schreibt, und
  • die Browser-Konsole nutzt, um Ausgaben zu sehen und Fehler zu finden.

Wenn Sie noch ganz neu in der Sprache sind, lesen Sie zunächst die kurze Einführung in JavaScript für einen Überblick und kehren Sie dann hierher zurück, um mit dem Programmieren zu beginnen.

Warum Sie JavaScript brauchen

HTML beschreibt die Struktur einer Seite und CSS gestaltet sie, aber keines von beiden kann auf einen Besucher reagieren. HTML allein lässt Menschen Text lesen, Videos ansehen, Bilder betrachten und Links anklicken — es kann keine Berechnungen durchführen, Formulare validieren oder die Seite nach dem Laden verändern. JavaScript fügt Verhalten hinzu: Es verwandelt ein statisches Dokument in etwas Interaktives, das auf Klicks, Tastatureingaben und andere Ereignisse reagieren kann.

JavaScript zu einer Seite hinzuzufügen bedeutet, ein Computerprogramm zu schreiben. Die meisten Einsteiger-Skripte sind kurz, teilen aber dieselben Grundbausteine wie größere Programme: Werte, Bedingungen und schrittweise Anweisungen. Eine gute Methode, bevor man codiert, ist es, eine Aufgabe in kleine Schritte aufzuteilen. Um zum Beispiel einen Besucher mit Namen zu begrüßen — „Willkommen, Max Mustermann!" — muss das Programm:

  1. den Besucher nach seinem Namen fragen,
  2. die Antwort lesen und
  3. die Nachricht auf der Seite ausgeben.

Sobald die Schritte klar sind, übersetzt man sie in Code. Die Sprache zu lernen ähnelt dem Erlernen einer gesprochenen Sprache: Man eignet sich neue Wörter an (let, if, function) und lernt, sie zu kombinieren.

So fügt man JavaScript zu einer Seite hinzu

Der Browser liest HTML von oben nach unten. Um ihm mitzuteilen „Es kommt JavaScript", wird der Code in den HTML-<script>-Tag eingeschlossen. Alles zwischen dem öffnenden <script> und dem schließenden </script> wird als JavaScript ausgeführt:

Ein „Hello, world!"-Skript innerhalb von HTML

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>
Probier es selbst »

Ein <script>-Tag kann den Code selbst enthalten (sogenannter Inline-Code) oder mit dem src-Attribut auf eine externe Datei verweisen (im nächsten Abschnitt behandelt). <script>-Tags können im <head> der Seite oder an beliebiger Stelle im <body> platziert werden.

Wo man den <script>-Tag platziert

Ein Skript blockiert das Parsen während seiner Ausführung, daher ist die Platzierung wichtig:

  • Direkt vor dem schließenden </body>-Tag ist der einfachste sichere Platz. Wenn das Skript ausgeführt wird, existiert das HTML darüber bereits, sodass der Code Seitenelemente finden kann.
  • Im <head> hält den Code an einem Ort organisiert, aber ein einfaches <script> dort wird ausgeführt, bevor der Body geparst wird — es kann also noch keine Elemente der Seite sehen. Um das zu beheben, verwenden Sie das defer-Attribut (siehe unten).

Alte <script>-Attribute, die Sie noch antreffen können

Moderne Skripte benötigen kaum Attribute, aber zwei tauchen in älterem Code auf:

  • type — HTML4 erforderte type="text/javascript". Das wird nicht mehr benötigt; der moderne Standard verwendet type nur noch für JavaScript-Module (type="module"), ein fortgeschrittenes Thema, das später behandelt wird.
  • language — language="javascript" diente einst zur Deklaration der Skriptsprache. Da JavaScript die Standardsprache ist, ist dieses Attribut veraltet.

Über alle verfügbaren Attribute können Sie im Kapitel über HTML-Attribute nachlesen.

Steuern, wann ein Skript geladen wird: defer und async

Wenn der Browser auf ein externes <script src="..."> trifft, stoppt er normalerweise den Seitenaufbau, lädt die Datei herunter und führt sie aus, bevor er fortfährt. Bei einer Seite mit mehreren Skripten verlangsamt das das Rendering. Zwei Attribute ändern dieses Verhalten:

  • defer — lädt das Skript parallel herunter und führt es erst nach dem vollständigen Parsen des HTML aus, in der Reihenfolge, in der die Skripte erscheinen. Dies ist die empfohlene Standardeinstellung für Skripte, die mit der Seite interagieren.
  • async — lädt parallel herunter und führt das Skript aus, sobald es bereit ist, ohne Reihenfolgegarantie. Am besten für unabhängige Skripte (Analyse, Werbung), die weder von anderem Code noch vom vollständigen Laden der Seite abhängig sind.
<!-- Runs after the page is parsed, keeps order -->
<script defer src="main.js"></script>

<!-- Runs whenever it finishes downloading, order not guaranteed -->
<script async src="analytics.js"></script>

Beide Attribute gelten nur für externe Skripte (src). Für Inline-Code platzieren Sie <script> einfach am Ende des <body>.

Externe JavaScript-Dateien

Inline-Code eignet sich für schnelle Demos, aber echte Projekte halten JavaScript in separaten .js-Dateien. Denselben Code in jede Seite zu kopieren ist schwer zu pflegen — wenn Sie einen Fehler beheben, müssten Sie jede Seite bearbeiten. Ein externes Skript liegt in einer einzigen .js-Datei, die viele Seiten gemeinsam nutzen können, sodass man es einmal schreibt und der Browser es sogar für mehr Geschwindigkeit zwischenspeichern kann.

Um eine externe Datei zu verwenden, verweisen Sie das src-Attribut (Quelle) des <script>-Tags auf sie und lassen das Tag leer:

Ein Skript im selben Ordner verknüpfen

<script src="W3DocsScript.js"></script>

Der Pfad in src funktioniert wie jede andere URL in HTML. Er kann sein:

  • Relativ zur aktuellen Seite — my-script.js (gleicher Ordner) oder js/my-script.js (ein Unterordner).
  • Absoluter (seitenrelatiever) Pfad — beginnt mit /:
<script src="/path/W3DocsScript.js"></script>
  • Eine vollständige URL, nützlich für Bibliotheken, die auf einem CDN gehostet werden:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Um mehrere Dateien zu laden, verwenden Sie ein <script>-Tag pro Datei. Sie werden von oben nach unten ausgeführt:

<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>

Ein häufiger Fehler: Ein einziges <script>-Tag kann nicht gleichzeitig ein src-Attribut und Inline-Code haben. Wenn src gesetzt ist, wird alles zwischen den Tags ignoriert:

src gesetzt — das Inline-alert wird nie ausgeführt

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>
Probier es selbst »

Um sowohl eine externe Datei als auch Inline-Code zu verwenden, teilen Sie sie in zwei separate Tags auf:

Zwei Tags: eines extern, eines inline

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>
Probier es selbst »

Ihr erstes JavaScript-Programm

Schreiben wir ein vollständiges erstes Programm. Erstellen Sie eine HTML-Datei und fügen Sie direkt vor dem schließenden </body>-Tag ein <script> mit einer einzigen Zeile hinzu, die eine Nachricht anzeigt:

Ein alert()-Dialog

<!DOCTYPE HTML>
<html>
  <head>
    <title>My First Script</title>
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
Probier es selbst »

Wenn Sie diese Seite im Browser öffnen, erscheint ein Dialogfeld mit dem Text Welcome to W3Docs. Die Seite pausiert, bis Sie auf OK klicken; sobald das Fenster geschlossen wird, wird der Rest der Seite gerendert. alert() ist praktisch für schnelle Überprüfungen beim Lernen, unterbricht aber den Benutzer — daher wird es in Produktionscode selten verwendet.

Text auf einer Webseite schreiben

alert() zeigt ein Popup an, aber oft möchte man Text in die Seite selbst einfügen. Der klassische Lehrbefehl dafür ist document.write(), der den übergebenen String direkt beim Laden in das Dokument einfügt:

Verwendung von document.write()

<!DOCTYPE HTML>
<html>
  <head>
    <title>document.write demo</title>
  </head>
  <body>
    <h1>Writing to the document window</h1>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>
Probier es selbst »

Wie die Funktion alert() gibt document.write() aus, was zwischen den Klammern steht — hier ein <p>-Element, sodass der Browser einen neuen Absatz unterhalb der Überschrift hinzufügt.

Achtung: document.write() eignet sich für erste Experimente, sollte aber in echten Projekten vermieden werden. Wird es nach dem vollständigen Laden der Seite ausgeführt, löscht es das gesamte Dokument. Moderner Code aktualisiert die Seite über das DOM (zum Beispiel element.textContent = '...').

Die Browser-JavaScript-Konsole

Jeder moderne Browser verfügt über eine eingebaute Konsole — das nützlichste Werkzeug beim Lernen. Sie zeigt ausgegebene Nachrichten an, meldet Fehler mit der genauen Zeilennummer und ermöglicht es, JavaScript einzugeben und sofort auszuführen.

Ausgaben mit console.log() schreiben. Im Gegensatz zu alert() unterbricht es die Seite nicht, und im Gegensatz zu document.write() überschreibt es niemals das Dokument — es ist daher die bevorzugte Methode zur Wertüberprüfung:

In die Konsole ausgeben

<!DOCTYPE HTML>
<html>
  <head>
    <title>console.log demo</title>
  </head>
  <body>
    <p>Open the console to see the message.</p>
    <script>
      console.log('Welcome to W3Docs');
      console.log('2 + 2 =', 2 + 2);
    </script>
  </body>
</html>
Probier es selbst »

So öffnen Sie die Konsole:

  • Chrome / Edge: Ctrl + Shift + J (Windows/Linux) oder Cmd + Option + J (Mac), oder über das Menü → Weitere Tools → Entwicklertools und dann den Tab Console auswählen.
  • Firefox: Ctrl + Shift + K (Windows/Linux) oder Cmd + Option + K (Mac).
  • Safari: Aktivieren Sie das Entwickler-Menü unter Einstellungen → Erweitert, dann drücken Sie Cmd + Option + C.

Für eine ausführlichere Einführung in Debugging-Tools, siehe DOM-Debugging und Tools.

Zusammenfassung

  • JavaScript wird mit dem <script>-Tag eingebunden — Inline-Code steht zwischen den Tags; eine externe Datei wird im src-Attribut angegeben (niemals beides in einem Tag).
  • Einfache Skripte direkt vor </body> platzieren oder defer bei externen Skripten verwenden, damit sie nach dem Parsen der Seite ausgeführt werden.
  • Externe .js-Dateien ermöglichen Wiederverwendung und Caching über viele Seiten hinweg.
  • alert() zeigt ein Popup an, document.write() schreibt in die Seite (sparsam verwenden) und console.log() gibt Ausgaben in die Konsole aus, ohne die Seite zu stören.

Als Nächstes lernen Sie, wie man Daten in JavaScript-Variablen speichert und wie man Code mit Kommentaren dokumentiert.

Übungen

Übung
Welche der folgenden Aussagen über den Einstieg in JavaScript in der Webentwicklung sind wahr?
Welche der folgenden Aussagen über den Einstieg in JavaScript in der Webentwicklung sind wahr?
Was this page helpful?