Javascript-Funktionen auslagern

Javascript: Möglichkeiten zur Einbettung von Skripten in einer Webseite.
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&uuml;ck</A>');
   }
Demo-JavaScript-Datei functions.js


Seitenanfang