Informatik :: JavaScript :: Einbindung von JavaScript

Einbindung von JavaScript

[JavaScript-Bereich] [Externe Datei] [Direkter Aufruf] [Aufgaben]

Um JavaScript-Code in den HTML-Code einzubinden, gibt es prinzipiell 3 Möglichkeiten:

  1. JavaScript-Bereich definieren
    Macht Sinn, wenn der JavaScript-Code nur für diese Seite verwendet wird.
  2. Externe JavaScipt-Datei
    Ist von Vorteil, wenn der JavaScript-Code auf mehreren Seiten angewandt wird.
  3. Direkter Aufruf
    Bei der Verwendung von Eventhandlern.

1. JavaScript-Bereich definieren:

Dazu gibt es 2 Möglichkieten:

oder ab HTML 4.0:

Der dadurch entstandene JavaScript-Bereich kann prinzipiell an beliebiger Stelle im HTML-Code notiert werden.

Beispiel HTML-Datei hallo.html:

<html><head><title>Hallo</title></head>
<script type="text/JavaScript">
   alert("Hallo Welt!");
</script>
<body>...</body></html>

Erläuterung:
Es erscheint durch alert("Hallo Welt!") eine Dialogbox mit der Textmeldung 'Hallo Welt'.

Seitenanfang

2. Externe JavaScript-Datei einbinden:

Seit der Sprachversion 1.1 von JavaScript (und auch seit HTML 4.0) ist es möglich, JavaScript-Code in externen Dateien zu notieren.
Das ist sehr nützlich, wenn man gleiche JavaScript-Funktionen in mehreren HTML-Dateien verwenden will. Denn so braucht man den Code nur einmal notieren und kann ihn in mehreren HTML-Dateien referenzieren.

Man benötigt zunächst eine JavaScript-Datei, in der sich nur JavaScript-Code befindet. Diese sollte als Extension die Dateiendung js bekommen.

Beispiel externe JavaScript-Datei meldung.js:

  alert("Hallo Welt");

Um die externe Datei einzubinden, muss man lediglich im Tag <SCRIPT> mit dem Attribut SRC den Namen der Datei sowie mit TYPE die Angabe text/javascript vornehmen.

Beispiel HTML-Datei hallo.html:

 <html><head><title>Hallo</title></head>
 <script src="meldung.js" type="text/JavaScript"></script>
 <body></body>  </html>

Seitenanfang

3. Direkter Aufruf mittels Eventhandler:

JavaScript kann auch innerhalb herkömmlicher HTML-Tags vorkommen.
Das ist dann kein komplexer Programmcode, sondern in der Regel nur der Aufruf bestimmter Methoden, Funktionen oder Aneisungen. Für den Aufruf gibt es sogenannte Event-Handler. Das sind JavaScript-eigene Attribute in HTML-Tags. Für jeden der möglichen Event-Handler ist festgelegt, in welchen HTML-Tags er vorkommen darf. Dazu später mehr.

Beispiel HTML-Datei hallo.html:

<html><head><title>Hallo</title></head>
<body>
<a onmouseover="alert('Hallo Welt!')">Meldung</a>
</body></html>

Erläuterung:
Beim Überstreichen des Textes Meldung erscheint durch alert("Hallo Welt!") eine Dialogbox mit der Textmeldung 'Hallo Welt'.

Seitenanfang

Aufgaben:

Erstelle die Datei hallo.html, welche die Textmeldung Hallo Welt! ausgibt ...

  1. ... duch Verwendung eines JavaScript-Bereiches
  2. ... durch Einbindung der externen Datei meldung.js und
  3. ... durch direkten Aufruf mit Hilfe eines Eventhandlers!

Seitenanfang