Hinweis: Das ist das Ende der Metanavigation. Es folgt die Kontext-Spalte.
Hinweis: Das ist das Ende der Kontext-Spalte.
Javascript-Funktionen auslagern
Es gibt verschiedene Möglichkeiten, JavaScript in einem HTML-Dokument zu verwenden:* direkt im BODY-Bereich
* als Funktion im HEAD-Bereich
* als Funktion in einer externen Datei
direkt im BODY-Bereich
Durch Verwendung des SCRIPT-Tags können mitten in einem HTML-Dokument JavaScript-Code ausführen lassen:
<HTML>
<HEAD>
...
</HEAD>
<BODY>
<H3>Willkommen</H3>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
document.write('Gut, dass Sie JavaScript in Ihrem');
document.write('Browser aktiviert haben!');
//-->
</SCRIPT>
<NOSCRIPT>FEHLER: kein JavaScript aktiviert!</NOSCRIPT>
</BODY>
</HTML>
Demo-HTML-Dokument
Seitenanfang
als Funktion im HEAD-Bereich
Durch Verwendung des SCRIPT-Tags können mitten in einem Dokument deklarierte JavaScript-Funktionen aufrufen.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function HELLO()
{
document.write('Gut, dass Sie JavaScript in Ihrem');
document.write('Browser aktiviert haben!');
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H3>Willkommen</H3>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
HELLO();
//-->
</SCRIPT>
<NOSCRIPT>FEHLER: kein JavaScript aktiviert!</NOSCRIPT>
</BODY>
</HTML>
Demo-HTML-Dokument
Seitenanfang
als Funktion in einer externen Datei
Damit in der HTML-Datei die Funktion ausgeführt werden kann, ist im HEAD-Bereich die entsprechende Datei mit dem Attribut SRC bekanntzumachen. In anderen Skriptsprachen nennt man dies "sourcen", z.B. das Punkt-Kommando in UNIX-Shellscripts oder das PERL-Kommando require().In nachfolgendem Beispiel muss die JavaScript-Datei im selben Verzeichnis, wie das HTML-Dokument zu finden sein (es ginge natürlich auch, einen relativen oder absoluten Pfad anzugeben):
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT" SRC="functions.js"></SCRIPT>
</HEAD>
<BODY>
<H3>Willkommen</H3>
... sonstiger Text ...
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
footer();
//-->
</SCRIPT>
</BODY>
</HTML>
Demo-HTML-Dokument
Die Datei referenzierte Datei functions.js beinhaltet nur die zu nutzenden Funktionen und besitzt keinerlei SCRIPT-Tags. Dies sieht z.B. wie folgt aus:
/*
functions.js
external funtions
*/
// ---------------------------------------------------------
// footer:
// print footline on every page in the same look
function footer()
{
document.write("<HR SIZE=1 NOSHADE><small>");
document.write("<font size=-1>");
document.write("<B>title: </B>" + document.title);
document.write(" (" + document.URL + ")<BR>");
document.write("<B>last change: </B>");
document.write("document.lastModified + "</font>");
}
Demo-JavaScript-Datei functions.js
Sinn macht eine Auslagerung von Funktionen in eine .js-Datei dann, wenn mehrere HTML-Dokumente dieselben Funktionen benötigen. Sie brauchen gegenüber der Variante 2 den Code nicht in jede HTML-Datei hineinzukopieren. Wenn Sie irgendwann eine Änderung in einer Funktion machen wollten, so ist dies nur einmal - eben in der gemeinsam genutzten Datei - notwendig.
Ich nutze der Bequemlichkeit ausgelagerte Funktion so häufig, wie möglich.
- So sind - wie in obigen Beispiel die Fusszeilen-Informationen des aktuellen Dokuments mit JavaScript dynamisch eingefügt.
- bestimmte "Standard"-Tasten kann man in
JS-Funktionen verpacken. So z.B. das
[zurück]-springen oben in der Navigationszeile
(Funktion: history.back())
oder die [Dokument drucken]-Taste
(Funktion: window.print()).
Wenn ich morgen auf die Idee komme, statt des Textes eine Grafik auf allen Seiten einzubinden, ist das gar kein Problem ;-)
// ---------------------------------------------------------
// Link mit history.back() schreiben
function go_back()
{
document.write('<A HREF="JavaScript:history.back()">zurück</A>');
}
Demo-JavaScript-Datei functions.js
Seitenanfang
©2010
by Axel Hahn - powered by
