 4) JavaScript einbinden - externe JavaScript-Datei
 Ein JavaScript das als Code-Sammlung im Head einer HTML-Datei abgelegt wurde, kann Funktionen enthalten die dann innerhalb des Dokuments auch mehrmals aufgerufen werden können. Allerdings ist der Einsatz dieser Sripte auf diese Seite beschränkt.
Lagert man eine Script-Sammlung aber in eine eigene Datei aus, kann man dann aus jeder HTML-datei auf diese Sammlung zugreifen. Eine separate JS-Datei würde ich überall dort einsetzen, wo gleiche Scripte immer wieder und auch in unterschiedlichen Seiten verwendet werden sollen. Vorteil dieser Vorgehensweise ist:
- geringere Größe der HTML-Dateien
- zentrale Änderung falls notwendig
JavaScripte die in mehreren HTML-Dokumenten verwendet werden, kann man also wirtschaftlich in eine externe Datei auslagern. Ein Beispiel zu einer solchen Script-Sammlung innerhalb einer externen Datei, finden sie oben
unter dem Link  BSP EXTERNE DATEI .
Den Text dieser Beispieldatei können sie kopieren, in eine Textdatei kopieren und mit der Dateierweiterung " j s " als reine Textdatei abspeichern.
Beispiel: Funktion zur Zeitanzeige
Der Script-Code einer Funktion soll in einer externen JS-Datei abgelegt werden.
Anhand eines Beispiels zur Zeitanzeige, wollen wir das einmal in die Praxis umsetzen. Basis ist dieses JavaScript, das für die Verwendung innerhalb einer Seite, im Head der betreffenden HTML-Datei notiert werden würde.
<script type="text/javascript" language="JavaScript">
<!--
function zeit()
{
uhrzeit=new Date();
document.write(uhrzeit.getHours() + " Uhr " + uhrzeit.getMinutes());
}
//-->
</script>
In der externen JS-Datei muss lediglich der rot markierte Script-Code für die Funktion zeit() stehen. Die Deklarierung des JavaScript-Bereichs, die dem Browser in einer HTML-Seite signalisiert, das es sich hier nicht um HTML-Code handelt, entfällt.
<script type="text/javascript" language="JavaScript">
<!--
function zeit()
{
uhrzeit=new Date();
document.write(uhrzeit.getHours() + " Uhr " + uhrzeit.getMinutes());
}
//-->
</script>
Diesen rot markierten ScriptCode markieren sie und kopieren ihn in die Zwischenablage. Dann gehts zum nächsten Schritt, bei dem sie die exterene Datei erstellen.
externe JS-Datei erstellen
Vorgehensweise:
Text-Editor öffnen (z.B. WordPad)
'neue Datei' anklicken
JavaScript-Code hineinkopieren
mit der Dateiendung ".js" als reine Textdatei abspeichern.
Die externe Script-Datei sieht dann so aus JS-Zeit
|
Bei der Erstellung achten Sie darauf, dass die einleitenden und beendenden Scipt-Befehle: <script type="text/javascript"> </script> nicht in dieser Datei stehen (diese Befehle stehen später im Aufruf der Datei)
|
externe JS-Datei in das HTML-Dokument einbinden
Im Head-Bereich des HTML-Dokuments teilen sie dem Browser mit, das es eine externe JavaScript-Datei gibt, deren Inhalt eingelesen werden soll. Die Einbindung dieses Hinweises sieht dann (abhängig vom relativen Speicherort der JS-Datei) so aus:
Beispiele:
<script type="text/javascript" src="dateiname.js"></script>
<script type="text/javascript" src="../dateiname.js"></script>
<script type="text/javascript" src="unterverzeichnis/dateiname.js"></script>
Aufruf der Funktionen im BODY
Der Scriptcode zur Zeitanzeige wurde beim Einlesen des HTML-Codes der Seite vom Browser ebenfalls erfasst (sage ich mal so einfach). Grund ist, der Browser folgte dem Link zur externen JS-Datei und hat sämtliche Codezeilen eingelesen. Der Bowser weiß also, dass es eine Funktion mit dem Namen "zeit()" gibt. Erfolgt nun im Body des Dokuments der Aufruf dieser Funktion, wird der Browser die Anweisungen die zu dieser Funktion gehören ausführen.
Syntax des Aufrufs im Body:
<script type="text/javascript" language="JavaScript>
<!--
zeit();
//-->
</script>
Das Ergebnis des Funktionsaufrufs (rot):
|
WWW.WEB-TOOLBOX.NET
Script Zeit 
ZURÜCK