7.2 JavaScript in HTML einbinden
JavaScript-Sourcecode in HTML-Seiten wird vom JavaScript-Interpreter des Browsers ausgeführt. Wie in vielen Programmiersprachen sollte auch in JavaScript ein Befehl pro Zeile verwendet werden. Das Semikolon am Ende der Zeile ist optional, wird aber dringend empfohlen, um den Überblick zu behalten – insbesondere bei der Verwendung von Frameworks.
Möglichkeiten der Einbindung
JavaScript kann auf verschiedene Arten in HTML-Dokumente eingebunden werden:
- Zwischen
<script>
-Tags - In einer externen Datei
- Über einen HTML-Link
- Durch HTML-Elemente und sogenannte Event-Handler
In den folgenden Beispielen wird der Befehl document.write("Wer reitet so spät durch Nacht und Wind")
verwendet. Zunächst genügt es uns, zu wissen dass dieser Befehl nur den Text „Wer reitet so spät durch Nacht und Wind" ausgibt. Mehr über diese Funktion erfahren wir in den nächsten Kapiteln.
1. Einbindung mittels <script>
-Element
Die einfachste Methode, um JavaScript einzufügen, ist, den Code zwischen <script>
-Tags zu schreiben.
Hinweis: Es ist üblich, JavaScript-Code vor dem schließenden </body>
-Tag einzubinden, damit die Elemente geladen sind, auf die sich das Script bezieht.
So sieht es im Browser aus
2. Einbindung in einer externen Datei
JavaScript-Sourcecode, der auf mehreren Seiten benötigt wird, sollte in eine separate .js
-Datei ausgelagert werden.
JS-Datei:
Die Darstellung im Browser sieht so aus, wie zuvor gezeigt.
Achtung: Das Einbinden einer Script-Datei kann im <head>
-Element oder im <body>
-Element erfolgen! Im oben gezeigten Fall schreiben wir mit document.write()
den Text genau an die Position, an der wir den Text sehen wollen. Normalerweise haben wir umfangreiche JavaSript-Dateien, die im <head>
-Element eingebunden werden.
Durch das Einbinden der JavaScript-Datei in das <head>
-Element können wir sicherstellen, dass die JavaScript-Datei geladen wird, bevor der <body>
-Bereich auf dem Browser dargestellt wird.
3. Einbindung über einen HTML-Link
Ein JavaScript-Befehl kann durch einen Klick auf einen Link ausgeführt werden.
So sieht es im Browser aus
4. Einbindung durch HTML-Tags (Event-Handler)
Ereignisse (z. B. Klicks, Maus auf ein Objekt, Tastendrücke etc.) können mit Event-Handlern in HTML-Elementen direkt verknüpft werden.
So sieht es im Browser aus
Event-Handler für <a>
-Elemente
Event-Handler | Wirkung |
---|---|
onClick |
Wird ausgelöst, wenn der Link angeklickt wird. |
onMouseOver |
Wird ausgelöst, wenn die Maus über den Link bewegt wird. |
onMouseOut |
Wird ausgelöst, wenn die Maus den Link verlässt. |
onFocus |
Wird ausgelöst, wenn der Link den Fokus erhält (z. B. durch Tabulator-Taste). |
onBlur |
Wird ausgelöst, wenn der Link den Fokus verliert. |
onDoubleClick |
Wird ausgelöst, wenn der Link doppelt angeklickt wird. |
onKeyDown |
Wird ausgelöst, wenn eine Taste gedrückt wird, während der Link fokussiert ist. |
onKeyUp |
Wird ausgelöst, wenn eine gedrückte Taste losgelassen wird, während der Link fokussiert ist. |
onContextMenu |
Wird ausgelöst, wenn das Kontextmenü (z. B. durch Rechtsklick) auf dem Link geöffnet wird. |
Fehler finden
Warum funktioniert der folgende Aufruf Fensters nicht? Was passiert stattdessen?
Lösung
Die doppelten Anführungszeichen innerhalb der alert
-Funktion stören den HTML-Interpreter. Der denkt, der Aufruf sei nach der ersten Klammer vorbei.
Korrektur: