JavaScript in HTML-Seiten einbinden

Mit Hilfe von JavaScript kann der Webentwickler – in relativ engem Rahmen – dynamische Funktionalitäten in eine HTML-Seite einbauen. Einige Beispiele hierzu finden Sie unter JavaScript Galerie Beispiel, JavaScript Navigation Beispiel oder JavaScript Fontsize Beispiel. Durch derartige JavaScript-Skripte kann eine Internetseite ein wenig aufgepeppt werden.

Der JavaScript-Code kann entweder direkt in der jeweiligen HTML-Datei gespeichert werden oder aber in einer ausgelagerten JS-Datei, welche die durch die Seite genutzten Funktionen enthält. Dies ist besonders dann praktisch, wenn die JavaScript-Funktionen nicht allein auf einer einzelnen Seite, sondern auf vielen Seiten eines Internet-Auftritts verwendet werden. Die JavaScript-Anweisungen werden dann bei Bedarf aufgerufen und liefern die gewünschten Funktionalitäten. JavaScript-Code kann aber auch direkt nach dem Laden eines HTML-Dokuments ausgeführt werden.

Dabei gibt es zwei Möglichkeiten JavaScript-Code direkt nach dem Laden des HTML-Dokuments auszuführen. Zum Einen kann der benötigte Quellcode in Form einer Folge von JavaScript-Anweisungen an entsprechender Stelle im HTML-Dokument notiert werden. Die andere Möglichkeit besteht darin, unter Verwendung des JavaScript-Events mit dem Namen onLoad die durchzuführenden Aktivitäten zu starten. Das Event onLoad wird direkt nach dem Laden der Seite ausgelöst.

Es existieren keine restriktiven Vorgaben bezüglich der Platzierung von JavaScript-Code innerhalb einer HTML-Seite. Allerdings hat sich die Speicherung des JavaScript-Codes innerhalb des HEAD-Tags etabliert. Dies liegt daran, dass der benötigte Code zu einem relativ frühen Zeitpunkt durch den Browser geladen wird und demnach schneller zur Verfügung steht. Wie Sie HTML und PHP zusammen bringen wird auf der entsprechenden Seite erklärt.

JavaScript HTML Beispiel 1: Script-Bereich innerhalb der HTML-Datei definieren

In der im folgenden Beispiel gezeigten HTML-Datei wird im HEAD-Bereich des HTML-Dokuments ein JavaScript-Bereich angegeben, in dem die Funktion trim() definiert wird. Aufgabe dieser Funktion ist es, den übergebenen String-Wert von führenden und anschließenden Whitespaces zu befreien. Als Rückgabewert liefert die Funktion die so ermittelte Zeichenkette.

Das Beispiel zeigt darüber hinaus im BODY-Tag des Dokuments zwei Möglichkeiten, wie die JavaScript Funktion trim auf der HTML-Seite genutzt werden kann. Der erste Aufruf erfolgt durch Anklicken eines Links und der zweite Aufruft erfolgt direkt nach dem Laden der Seite durch den Browser. Unter Verwendung der Methode alert() wird im ersten Fall der Rückgabewert der Funktion trim() ausgegeben. Die Alert-Methode ist Teil des vordefinierten JavaScript-Objekts Window.

Im zweiten Block wird das Ergebnis des Funktionsaufrufs in einem SPAN-Element ausgegeben. Durch die Document-Methode getElementById() wird dieses Element über sein ID-Attribut ermittelt. Hier wird der angegebene Script-Teil direkt nach dem Laden der Seite ausgeführt. Dies liegt daran, dass der Befehl ist nicht innerhalb einer Funktion notiert, sondern direkt als Aufruf in der Datei angegeben ist. Wäre dies der Fall, so würde der Befehl erst dann aufgerufen, wenn die Funktion explizit durch einen Funktionsaufruf gestartet wird. 

<head>
  <title>JavaScript innerhalb des HTML-Dokuments</title>
  <!-- Script-Bereich mit den benötigten Funtionen direkt in die HTML-Datei einbetten -->
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Führende und Abschließende Whitespaces (Leerzeichen, Tabulatoren, ...)
  // aus der übergebenen Zeichenkette entfernen.
  function trim (zeichenkette) {
    // Erst führende, dann Abschließende Whitespaces entfernen
    // und das Ergebnis dieser Operationen zurückliefern
    return zeichenkette.replace (/^\s+/, '').replace (/\s+$/, '');
  }
  // -->
  </script>
</head>
<body>
  ....
  <!-- Funktionsaufruf durch Anklicken des folgenden Links -->
  <br><a href="javascript:alert ('¦' + trim ('    Hund    ') + '¦')" title="">Zeichenkette trimmen</a><br>
  ....
  <!-- SPAN-Element zur Ausgabe des Funktionsergebnisses -->
  <br><span id="ausgabe"></span><br>
  <!-- oder aber direktes Ausführen der Funktion nach Laden der HTML-Datei -->
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Aufruf einer in der JS-Datei definierten Funktion zur Ausgabe des
  // Rückgabewertes der Funktion in einem HTML-Element.
  document.getElementById ('ausgabe').appendChild (document.createTextNode ('¦' + trim ('     Katze     ') + '¦'));
  // -->
  </script>
  ....
</body>
</html>

JavaScript HTML Beispiel 2: Script-Dateien (JS) in HTML einbinden

Das nächste Beispiel zeigt, wie eine externe JavaScript-Datei in ein HTML-Dokument eingebunden werden kann. Die JS-Datei kann dabei eine Reihe von Funktionen enthalten. Es ist aber auch möglich Script-Code in einer JS-Datei zu speichern, der direkt aufgeführt wird. In diesem Fall werden die JavaScript-Anweisungen nicht innerhalb einer Funktion notiert sondern direkt als Folge von Anweisungen in der Datei aufgelistet.

Eingebunden wird die JS-Datei wie unten gezeigt innerhalb des HEAD-Tags über das HTML-Tag SCRIPT. Unter dem Attribut src wird die URL der JS-Datei angegeben und das Attribut type besagt in diesem Fall, dass es sich bei der Script um eine Datei mit dem Mine-Type "text/javascript" handelt. Dadurch weiss der Browser um welche Art von Script es sich handelt.

Auch bei diesem Beispiel wird gezeigt, wie auf die in eingebundenen JavaScript-Datei enthaltenen Funktionen zugegriffen werden kann. Dies geschieht, wie beim letzten Beispiel, einmal per direktem Aufruf (erster Block mit Aufruf der Funktion starteVerarbeitung()) und darunter per Klick auf den definierten Link. Bei der zweiten Variante wird der JavaScript-Operator void verwendet. Hier wird, nach dem Anklicken des Links, die Funktion eineFunktion aufgerufen. Void wird benötigt, falls die Funktion eineFunktion einen anderen Wert als "undefined" liefert. 

<html>
  <head>
    <title>JavaScript aus externer Datei nutzen</title>
    <!-- Einbinden des JS-Files, welches die benötigten Funktionen enthält -->
    <script src="/funktionen.js" type="text/javascript"></script>
  </head>
  <body>
    ....
    <!-- Script-Bereich innerhalb des BODY-Tags -->
    <script language="javascript" type="text/javascript">
    <!-- // JavaScript-Bereich für ältere Browser auskommentieren
    // Aufruf einer in der JS-Datei definierten Funktion
    starteVerarbeitung ();
    // -->
    </script>
    ....
    <!-- Funktionsaufruf einer in der JS-Datei gespeicherten Funktion
         durch Anklicken eines Links -->
    <a href="javascript:void(eineFunktion ())" title="">Eine Funktion ausführen</a>
    ....
  </body>
</html>

weiter zu Seite 2 »

¬ Menu

¬ Gratis Download

¬ Seminare



¬ Yoga

¬ Insolvenzrecht