 4) JavaScript einbinden - externe JavaScript-Datei
Eine JavaScript-Funktionen, die als Code-Sammlung im Head einer HTML-Datei abgelegt wurden, können innerhalb des Dokuments (auch mehrmals) aufgerufen werden können. Allerdings ist der Einsatz dieser Funktionen auf diese Seite beschränkt.
|
|
JavaScript einbinden - externe JavaScript-Datei
Lagert man eine Script-Sammlung aber in eine eigene JS-Datei aus, kann man aus mehreren HTML-Dateien auf diese Sammlung zugreifen. Eine separate JS-Datei würde ich überall dort einsetzen, wo gleiche Funktionen immer wieder in unterschiedlichen Seiten verwendet werden sollen. Vorteil dieser Vorgehensweise ist:
- geringere Größe der HTML-Dateien
- zentrale Änderung falls notwendig
Funktionen die in mehreren HTML-Dokumenten verwendet werden sollen, kann man ganz 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 Browser 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):
 Ein JavaScript 'einbauen' 1) Grundlagen
Ein JavaScript 'einbauen' 2) Script im Body-Bereich
Ein JavaScript 'einbauen' 3) Script im Head-Bereich
Module in eine externe JS-Datei auslagern
|
Home • JavaScript • externe JS-Datei
Script Zeit