JavaScript/Tutorials/DOM/Einbindung in HTML

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
← Einführung
Einstieg ins DOM
(Übersicht)
Was ist das DOM? →

Informationen zu diesem Text

Lesedauer
10-15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Kenntnisse in
● HTML
● JavaScript

JavaScript ist eine Programmiersprache, die als Zusatztechnik in Webseiten eingebunden wird. Im modernen Webdesign erhalten Webseiten so neben der Inhaltsstruktur und dem Aussehen eine Verhaltensschicht.

Zusammenspiel HTML-CSS-JS

DOM-Scripting (Unobtrusive JavaScript)

JavaScript kommt in diesem Konzept die Aufgabe zu, dem Dokument »Verhalten« (Behaviour) hinzuzufügen. Damit ist gemeint, dass das Dokument auf gewisse Anwenderereignisse reagiert und z.B. Änderungen im Dokument vornimmt. Diese Interaktivität wird dem Dokument automatisch hinzugefügt – im HTML-Code sollte sich kein JavaScript in Form von Event-Handler-Attributen befinden (onload, onclick, onmouseover usw.). Im Idealfall steht im <head>-Element das ein oder andere <script>-Element, um eine externe JavaScript-Datei einzubinden, die dann ihrerseits aktiv wird und die Eventhandler an die jeweiligen Elemente anbringt. Dazu können Elemente, denen ein bestimmtes Verhalten hinzugefügt werden soll, z.B. mit einer Klasse markiert oder bei Bedarf sogar mit einer ID ausgezeichnet werden.

Zeitgemäße Scripte werden automatisch beim Ladens des Dokuments aktiv und starten die Ereignisüberwachung an den betreffenden Elementen. Diese Anwendung von JavaScript nennt sich Unobtrusive JavaScript, »unaufdringliches« JavaScript, oder auch DOM Scripting.

Einbindung

JavaScript-Quelltexte werden in HTML in einem script-Element notiert oder referenziert. Das script-Element darf dabei im body oder head des HTML-Dokuments notiert werden.

script-Elemente dürfen auch innerhalb von Flusselementen notiert werden.

  • JavaScript 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Attribute im script-Element

Beispiel: <script> in HTML5 
<script> … </script>


Beachten Sie:
  • In HTML5 können Sie die Angabe des MIME-Type type="text/javascript" weglassen - in älteren HTML-Varianten ist die Angabe notwendig.
  • Das language-Attribut wurde als deprecated eingestuft und muss weggelassen werden.

JavaScript Code direkt in HTML notieren

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript: Hallo Welt</title>
    <script>
      alert("Hallo Welt!");
    </script>
    <noscript>
      Sie haben JavaScript deaktiviert.
    </noscript>
  </head>
  <body>
    <p>Diese Seite tut nichts weiter, als eine Hinweisbox auszugeben.</p>
  </body>
</html>
Im obigen Beispiel wird mithilfe von JavaScript ein Meldungsfenster mit dem Text „Hallo Welt!“ am Bildschirm ausgegeben.
ansehen …
Empfehlung: Mit dem HTML-Element noscript können Sie Bereiche definieren, die angezeigt werden, wenn JavaScript deaktiviert ist.

JavaScript-Dateien in HTML referenzieren

Das direkte Notieren von JavaScript in HTML ist im allgemeinen schlechte Praxis. Viel besser ist es, Scripte in eigenen Dateien zu notieren und diese dann einzubinden. Die Datei wird an der entsprechenden Stelle so ausgeführt, als ob der Code direkt notiert wurde. Sie können diese externen JavaScript-Dateien in beliebig viele Webseiten einbinden.

  • JavaScript 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel: quadrat.js 
function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);
Die externe JavaScript-Datei enthält eine Funktion Quadrat, in der mit document.getElementById auf das Eingabefeld zugegriffen wird. Der Variable Ergebnis wird das Quadrat des Wertes der Eingabe zugewiesen. Dieses wird dann mit einer kurzen Erklärung ausgegeben. Der Wert der Eingabe wird dann zurückgesetzt.

In den letzten 2 Zeilen wird mit document.getElementById mit der id los auf den Button zugegriffen und ihm über addEventListener der Event-Handler onclick zugewiesen. Ein Klick auf den Button ruft die Funktion Quadrat auf.

Damit dieser Event-Handler zugewiesen werden kann, muss das Element schon existieren. Deshalb sollte das Script entweder am Ende des HTML-Dokuments aufgerufen werden oder nach dem endgültigen Laden der Seite (mittels load) durch eine Funktion aufgerufen werden.


Beispiel: für die Einbindung der separaten JavaScript-Datei "quadrat.js" in eine HTML-Datei ansehen …
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>externes JavaScript in HTML einbinden</title>
</head>
<body>
  <h1>externes JavaScript in HTML einbinden</h1>
 
  <main>
    <input type="number" id="Eingabe" value="0" size="3">
    <button type="button" id="los">Quadrat errechnen</button>
  </main>
  <script src="quadrat.js"></script>
</body>
</html>
ansehen …

Das src-Attribut (source = "Quelle") hat als Wert den URI zum Script. (Mehr Informationen über Referenzieren in HTML)

Beachten Sie: Im Beispiel erhält der Button durch das externe Script einen Event-Handler mit addEventListener. Deshalb muss das externe Script am Ende des HTML-Dokuments aufgerufen werden, damit das button-Element schon vorhanden ist, wenn der Event-Handler angehängt werden soll, damit die Funktionalität auch gewährleistet ist. Wenn das Script im head referenziert wird, muss der Event-Handler am Ende des Ladevorgangs z.B. durch document.body.addEventListener("load",test); geladen werden.

Script in den head oder ans Ende des body-Elements?

Eine immer wieder gestellte Frage ist, welche der beiden Positionen besser ist.

Wenn ein Browser eine Webseite lädt, folgt er einer festen Routine:

  1. Der Browser holt sich die HTML-Datei
  2. Das HTML-Markup wird geparst
  3. Der Parser trifft auf ein script-Element, dass ein externes JavaScript referenziert
  4. Der Browser sendet einen Request, dass das Skript geladen werden soll. In der Zwischenzeit wird das Parsen des restlichen HTML-Markups eingestellt.
  5. Nach einiger Zeit ist das Skript heruntergeladen und wird ausgeführt.
  6. Der Browser setzt mit dem Parsen des restlichen HTML fort.

Warum kommt es bei Schritt 4 zu einer Unterbrechung? Skripte können mit document.write() oder anderen DOM-Manipulationen HTML einfügen oder verändern. Deshalb wartet der Parser, bis das Skript heruntergeladen und ausgeführt ist, bevor er den Rest des Dokuments parst.

Aus diesem Grund empfahlen früher viele JavaScript am Schluss einzubinden, indem das script-Element vor das schließende body-Tag gesetzt wurde. Dieser Ansatz birgt aber das Problem, dass der Browser Skripte erst downloaden kann, wenn das ganze HTML-Dokument geparst ist. Gerade bei größeren Seiten mit vielen Stylesheets, Skripten und eingebundenen Bibliotheken kann dies zu einer schlechteren Konversionsrate führen, wenn Nutzer nach erfolglosem Warten auf die Webseite entnervt aufgeben.

Also sollten Skripte so schnell wie möglich geladen werden.

Fazit: in den head

Durch die Attribute async und defer können Sie dem Browser mitteilen, dass er mit dem Parsen fortfahren kann, während er Skripte herunterlädt.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel 
<script src="script1.js" async></script>
<script src="script2.js" async></script>

Auch auf den wenigen alten Browsern, die diese Attribute noch nicht unterstützen, werden Ihre Seiten korrekt geladen.

Beachten Sie: Häufig wird in JavaScript auf Elemente im DOM zugegegriffen, die beim Laden des Skripts noch nicht geparst wurden. Deshalb müssen Sie diese nach dem Laden der Seite aufrufen. Am Besten geht dies mit dem DOMContentLoaded-Event.

Hinweis

Bei den Beispielen im Wiki sollten sie JavaScript immer im head einbinden, da im body vorhandene Skripte im Frickl-Editor zwar angezeigt, beim Ausführen durch den im HTML-Markup vorhandenen OriginalCode aber wieder überschrieben werden. --MScharwies (Diskussion) 11:55, 11. Jan. 2017 (CET)


← Einführung
Einstieg ins DOM
(Übersicht)
Was ist das DOM? →

Weblinks

Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/DOM/Einbindung_in_HTML&oldid=64291“