5.2
JavaScripts in externen Dateien
Wie auch bei Style-Sheets macht es viel Sinn, JavaScripte in einer oder mehreren externen Datei(en) auszulagern. Dies funktioniert seit HTML
4 bzw. JavaScript ab der Version 1.1. Statt aber – wie bei Style-Sheets – einen
eigenen Tag dafür zu verwenden, wird bei der Referenz auf externe
Script-Dateien wieder der <SCRIPT>-Tag
verwendet, der dann aber dem Attribut src die externe Datei angibt. Die Syntax
ist also so:
<SCRIPT language="JavaScript"
src="[externe
JavaScript-Datei]"></SCRIPT>
In Anführungszeichen wird hinter dem Attribut src der Name der
separaten Datei angegeben. Dabei gelten beim Referenzieren von separaten
JavaScript-Dateien die üblichen Regeln für URLs. Die Datei mit dem Quellcode
muss – wie HTML-Dateien – eine reine ASCII-Datei sein und ausschließlich
JavaScript-Code enthalten. Üblich ist die Dateierweiterung js,
aber das ist nicht zwingend.
|
Bei der Referenz auf externe JavaScript-Dateien muss der <SCRIPT>-Container |
Die externe JavaScript-Datei enthält wie ein in einer
Webseite notierter <SCRIPT>-Container
einfach JavaScript-Code in Form von Klartext. Allerdings wird bei externen
JavaScript-Dateien fast immer mit Funktionen gearbeitet, da sonst alle in der
externen Datei notierten Anweisungen abgearbeitet werden. Das ist in der Regel
nicht gewünscht, denn meist finden sich mehrere Funktionalitäten in einer
einzigen Datei und Funktionen geben die Möglichkeit, gezielt eine der
Schrittfolgen aufzurufen.
Ein konkretes Beispiel mit zwei Dateien wird diese Form der
Einbindung verdeutlichen. Die HTML-Datei referenziert die JavaScript-Datei, die
in dem Beispiel meineJavaScripte.js heißt. Die HTML-Datei beinhaltet zwei <SCRIPT>-Container.
Der erste leere Container ist die Referenz auf die externe JavaScript-Datei mit
der eigentlichen Funktionalität. Der zweite Container beinhaltet den Aufruf
einer Funktion (eine Funktion wird eingesetzt, um in der externen Datei den
auszuführenden Quelltext auszuwählen – auch wenn hier die gesamten Anweisungen
verwendet werden), die in der externen Datei notiert ist.
<HTML>
<!– Die Referenz auf die exteren JavaScript-Datei
–>
<script
language="JavaScript" src="meineJavaScripte.js"></script>
<BODY>
<h1>Und das sind die LOOOOOTTTOOO-Zahlen von
MOORRGGEEN</h1>
<!– Aufruf der Funktion aus der exteren
JavaScript-Datei –>
<script
language="JavaScript">
<!–
lottoZahlen();
//–>
</script>
</BODY>
</HTML>
Listing 5.2: Die HTML-Seite mit Referenz auf eine
externe JavaScript-Datei und einen Aufruf einer dort notierten Funktion
Die externe JavaScript-Datei sieht so aus:
function lottoZahlen() {
var eins = Math.round(Math.random()*49);
var zwei = Math.round(Math.random()*49);
var drei = Math.round(Math.random()*49);
var vier = Math.round(Math.random()*49);
var fuenf =
Math.round(Math.random()*49);
var sechs =
Math.round(Math.random()*49);
var zz =
Math.round(Math.random()*49);
document.write("Zahl 1: " + eins +
"<br>" +
"Zahl 2: " + zwei + "<br>" +
"Zahl 3: " + drei + "<br>" +
"Zahl 4: " + vier + "<br>" +
"Zahl 5: " + fuenf + "<br>"
+
"Zahl 6: " + sechs + "<p>" +
"Und die Zusatzzahl lautet: " + zz +
".");
}
Listing 5.3: Die externe JavaScript-Datei
beinhaltet die konkrete Programmierung der in der HTML-Datei aufgerufenen
Funktion
Die Funktion nutzt ein in JavaScript immer verfügbares
Objekt mit Namen Math.
Dieses stellt einige mathematische Methoden bereit. Hier wird die Methode random()
verwendet, um eine Zufallszahl zwischen 0 und 1 zu erzeugen. Diese wird mit der Zahl 49 multipliziert
und das Ergebnis dann mit einer weiteren Methode von Math gerundet. Das Prozedere wird
siebenmal durchgeführt und dann als Lottotipp (oder Lottoweissagung) für die
morgige Ziehung in der Webseite ausgegeben. Beachten Sie, dass auch Variablen
vorkommen, in denen die jeweiligen Ergebnisse zwischengespeichert werden.
|
Wir werden für dieses Beispiel noch eine elegantere |
Wenn Sie die Seite nochmal laden, erhalten Sie eine andere
Weissagung – ein reiner Zufallsprozess.
|
Das Verfahren zur Berechnung der Zufallszahlen ist sehr |
Sie können wie schon angedeutet in einer Webseite mehrere
verschiedene externe JavaScript-Dateien verwenden. Dabei sollten Sie aber
beachten, dass es dann in den verschiedenen Dateien keine Funktionen oder
Variablen mit gleichen Namen gibt. In dem Konfliktfall wird immer die zuletzt
definierte Funktion oder Variable (im Sinn der Abarbeitung der Webseite von
oben nach unten) verwendet. Sie müssen natürlich auch nicht alle in einer Datei
vorhandenen Funktionen auch wirklich nutzen (das gilt auch für einen <SCRIPT>-Container).
Das nachfolgende sehr einfache Beispiele referenziert in einer HTML-Datei zwei
externe JavaScript-Dateien und verwendet aus beiden Dateien jeweils eine
Funktion. In der einen externen Datei befindet sich eine weitere Funktion, die
einfach nicht verwendet wird.
function a() {
alert("Eins");
}
function b() {
alert("Zwei");
}
Listing 5.4: Eine externe JavaScript-Datei mit
zwei Funktionen
function c() {
alert("Drei");
}
Listing 5.5: Eine weitere externe
JavaScript-Datei mit einer Funktion
<HTML>
<script
language="JavaScript"
src="meineJavaScripte2.js"></script>
<script
language="JavaScript" src="meineJavaScripte3.js"></script>
<BODY>
<script
language="JavaScript">
<!–
a();
c();
//–>
</script>
</BODY>
</HTML>
Listing 5.6: In der HTML-Datei werden beide
externe Dateien referenziert