JavaScript in HTML einbinden

Unsere bisherigen JavaScript-Beispiele funktionierten zwar alle in einem Browser, waren jedoch formal nicht korrekt. JavaScript muss in gültiges HTML eingebunden werden. Das möchte ich hier nachholen. Es gibt zwei Möglichkeiten, JavaScript in HTML einzubinden: direkt im HTML-Dokument oder als Referenz auf eine externe Datei. Beides funktioniert mit dem script-Element:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript direkt in HTML</title>
    <script>
      alert("Hallo JavaScript!");
    </script>
  </head>
  <body>
    Hallo HTML!
  </body>
</html>

Hier steht der JavaScript-Code direkt zwischen dem öffnenden und schließenden script-Tag.
Für die externe Referenz benötigen wir zwei Dateien: eine HTML-Datei und JavaScript-Datei. Die HTML-Datei kennen wir schon. Es ist einen Datei mit der Endung ‚html‘. Eine JavaScript trägt die Endung ‚js‘. Das folgende HTML schreiben wir wie gewohnt in die Datei index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript direkt in HTML</title>
    <script src="index.js"></script>
  </head>
  <body>
    Hallo HTML!
  </body>
</html>

In index.js schreiben wir folgenden Code:

alert("Hallo JavaScript!");

Beide Dateien müssen im selben Ordner liegen. Mit dem src-Attribute des script-Elements wird die JavaScript-Datei referenziert. src steht dabei für source (engl. Quelle).
Von der Funktionalität her sind beide Arten JavaScript einzubinden identisch. Die externe Referenz ist jedoch deutlich übersichtlicher. Aus diesem Grund schreiben wir JavaScript immer in gesonderte Dateien und binden diese per Referenz in HTML-Dokumente ein.

SELFHTML

SELFHTML ist ein Projekt, dass eine deutschsprachige Dokumentation zu HTML, CSS und JavaScript bereitstellt. Insbesondere der Teil zu HTML ist empfehlenswert. SELFHTML wurde 1995 von Stefan Münz aufgebaut und entwickelte sich schnell zu einer wichtigen, deutschsprachigen Dokumentation für HTML. 2005 übernahm ein Entwicklerteam SELFHTML und Stefan Münz zog sich aus dem Projekt zurück. Heute wird das Projekt von dem Verein SELFHTML e.V. geführt. Mitarbeit an SELFHTML ist jederzeit willkommen!

Hallo HTML!

Bevor wir mit JavaScript weitermachen, sollten wir die ersten Schritte zum Anlegen von Websiten machen. Websiten werden auf der Basis von HTML erstellt. HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. HTML legt den Inhalt und die Struktur einer Website fest. Browser stellen HTML-Seiten dar. HTML-Seiten werden in Dateien mit der Endung html gespeichert. Das Grundgerüst einer solchen Seite sieht wie folgt aus:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hallo Welt</title>
  </head>
  <body>
    Hallo Welt!
  </body>
</html>

In der ersten Zeile findest du die sogenannte Dokumenttyp-Deklaration. Mit <!doctype html> legen wir fest, dass wir ein HTML5-Dokument schreiben. Eine andere Dokumenttyp-Deklaration sollte man heute für HTML nicht mehr verwenden.

Ab Zeile 2 folgt das eigentliche HTML-Dokument. HTML-Dokumente bestehen aus HTML-Elementen. html, head, meta, title und body sind die Elemente, die wir im obigen Beispiel verwendet haben. HTML5 kennt noch viele weitere Elemente. HTML-Elemente werden durch Tags beschrieben. Tags werden durch den Elementnamen mit spitzen Klammern notiert. Die meisten Elemente besitzen ein einleitendes und ein schließendes Tag. Das html-Element wird durch <html> eingeleitet und durch </html> geschlossen. Dazwischen befindet sich der Inhalt des Elements. Der Inhalt eines Elements besteht entweder aus weiteren Elementen oder aus Text. Dadurch entsteht eine hierarchische Struktur.

Jedes HTML-Dokument beginnt mit dem html-Element. Es ist das sogenannte Wurzel-Element. Das html-Element enthält genau zwei Elemente: den head und den body. Im body, dem Körper, befindet sich der eigentliche Inhalt des HTML-Dokuments. In unserem Beispiel den Text „Hallo Welt!“. Im head, dem Kopf, befinden sich Informationen über den im body befindlichen Inhalt.

Mit dem obigen meta-Element sagen wir, dass wir unser Dokument mit dem Zeichensatz UTF-8 geschrieben haben. Ohne genauer auf Zeichensätze einzugehen, empfehlen wir, HTML-Dokumente immer in UTF-8 zu schreiben. Dies stellt man in seinem Editor unter „Einstellungen“ ein. Das meta-Element ist ein Standalone-Tag. Es besitzt keinen Inhalt und wird deshalb nur mit einem Tag beschrieben. Dieses Tag kann entweder wie ein einleitendes Tag (<...>) oder wie eine Kombination aus einleitendem und schließendem Tag (<.../>) geschrieben werden. Zur besseren Unterscheidung empfehlen wir letzteres. Das meta-Element besitzt verschiedene Eigenschaften. „charset“ ist eine Eigenschaft des meta-Elements. Der Wert von chartset im obigen Beispiel in „utf-8“. Die meisten Elemente besitzen neben ihrem Inhalt Eigenschaften.

Mit dem title-Element geben wir unserem Dokument einem Titel. Der Titel wird an verschiedenen Stellen angezeigt. U.a. in der Titelleiste des Browserfensters, in der Titelleiste des Tabs und als Überschrift von Einträgen in Suchmaschinen.