HTML-Dateien waren ursprünglich nur zur Darstellung von Informationen gedacht. HTML dient also nur zur Präsentation, irgendeine Funktionalität ist damit nicht möglich. Deshalb führte die Firma Netscape 1995 die Skriptsprache "ActiveScript" ein, die dann an die ebenfalls 1995 entwickelte Programmiersprache JAVA angepaßt und dann in JavaScript umbenannt wurde. Allerdings unterscheiden sich JAVA und JavaScript in vielen Punkten deutlich.

JavaScript-Programmierung erfolgt als "normaler Text" im HTML-Code einer HTML-Seite. Die Javascript-Programme werden durch Browser ausgeführt. Browser besitzen zu diesem Zweck JavaScript-Interpreter, die die JavaScript-Befehle gleich beim Lesen ausführt (bzw. fehlerhafte Kommandos ignorieren oder anmeckern). JavaScript wird verwendet, um z.Bsp. Anwendereingaben in HTML-Formularen zu überprüfen oder auf Ereignisse (Mausklick, Timerereignisse, ...) dynamisch zu reagieren.

Was ist JavaScript?

Einfaches Beispiel: Eine Zeile JavaScript mit einer Textausgabe innerhalb einer HTML-Datei:

<html>
<body>
<script language="JavaScript">
  document.write("Hallo");
</script>
</body>
</html>

JavaScript wird durch ein öffnendes und schließendes <script>-Tag in die HTML-Datei eingefügt und es wird das Wort "Hallo" angezeigt.

Hinweise:

  • Eine JavaScript-Anweisung wird immer mit einem Semikolon ";" abgeschlossen.
  • Fehler werden vom Interpreter nicht immer angemeckert. Entweder werden fehlerhafte Kommandos kommentarlos ignoriert, oder es erscheint im Browserfenster ganz unten ein kleines gelbes Warndreieck. Durch Anklicken dieses Warndreiecks bekommt man einen mehr oder weniger sinnvollen Fehlerhinweis...
  • JavaScript kann im HEAD- und im BODY-Bereich einer HTML-Datei stehen. Das Prinzip ist meist, dass im HEAD-Bereich die JavaScript-Funktionen stehen und im BODY-Bereich die Aufrufe dieser Funktionen.
  • Alternativ kann JavaScripts über sogenannte Events/Ereignisse aufgerufen werden, also z.Bsp. beim Anklicken eines Formular-Buttons mit dem Event "onClick", oder beim Überfahren eines Objekts (Grafik, Link,...) mit der Maus und den Events "onMouseover", "onMouseout",...

Beispiel:

Ein JavaScript im Head-Bereich, von 2 Stellen vom Body-Bereich aus genutzt

<html>
<head>
  <script language="JavaScript">
    function zeigHallo() {
      alert("Hallo");
    }
  </script>
</head>
<body>
  <script language="JavaScript">
    zeigHallo();
  </script>
  <form>
    <input type="button" value="Zeige ein Hallo" onClick="zeigHallo();">
  </form>
</body>
</html>

Die Funktion "zeigHallo()" wird beim Ausführen der HTML-Datei einmal aufgerufen. Durch Anklicken eines Buttons kann die Funktion auch aufgerufen werden.

Javascript: Prüfung, ob JavaScript aktiviert ist

Gelegentlich soll geprüft werden, ob im Browser des Anwenders JavaScript aktiviert/eingeschaltet ist. Dazu gibt es verschiedene Verfahren für verschiedene Browser, die unterschiedlich zuverlässig sind. Ich schlage die simple Variante vor, dem Anwender einen entsprechenden Hinweis zu zeigen, wenn JavaScript deaktiviert ist.

Prinzip: Einen Hinweistext ("Ihr JavaScript ist nicht eingeschaltet") einblenden und per JavaScript ausblenden.
- Ist JavaScript aktiviert, dann wird der Text per Javascript sofort ausgeblendet.
- Ist JavaScript nicht aktiviert, dann kann der Text nicht ausgeblendet werden und wird somit angezeigt.

  <html>
    <head></head>
    <body>
      <p>Text vor JS-Test...</p>
      <h1 id="jstest">Bitte JavaScript einschalten!</h1>
      <script language="javascript">
      <!--
        document.getElementById("jstest").style.display="none";
      -->
      </script>
      <p>Text nach JS-Test...</p>
    </body>
  </html>
Es wird ein Anzeigebereich <h1 id="jstest"> definiert, der einen entsprechenden Text enthält und per CSS optisch nett verziert werden kann. Anschliessend folgt ein JavaScript, das diesen Anzeigenbereich per "getElementById" versucht auszublenden.

  Hinweis:
In den meisten Browsern läßt sich Javascript über die Browsereinstellungen abschalten. Alternativ kann man zum Testen aber auch das Script abschalten, indem man es falsch schreibt! Also im HTML-Coding einfach aus "script" ein "scrip_" machen und abspeichern. Dann den Browser aktualisieren, das JavaScript wird nicht mehr ausgeführt und der Fehlerhinweis wird angezeigt.

Select-/Auswahlbox zur Navigation

Innerhalb eines Formulars die Auswahlbox per <select>- und <option>-tags erzeugen.
In das <select>-tag das Event "onchange" einbauen. Mit dem "onchange" eine Javascript-Funktion verknüpfen, die die gewählte Seite lädt. Wenn nun in der select-box ein anderer Eintrag angeklickt wird (der markierte Eintrag sich also verändert hat = "onchange"), dann wird die JavaScript-Funktion ausgeführt.

Hier zwei Varianten, wie im HEAD-Bereich das JavaScript eingebaut werden kann.

1) Einsatz in Frames:
  <head>
    <script language="JavaScript">
      function sprung(ziel) {parent.frames[2].location.href=ziel;}
    </script>
  </head>
frames[2] entspricht dem 3. Frame des aktuellen Framesets
(Bsp.: Links das navigationsframe[0], oben das selectboxframe[1] und in der Mitte das anzeigeframe[2]

2) Einsatz ohne Frames:
  <head>
    <script language="JavaScript">
      function sprung(ziel) {window.location.href=ziel;}
    </script>
  </head>

Im BODY-Bereich an der gewünschten Stelle die Select-Box erzeugen:
  <body>
    <form name="xxx">
    <select name="yyy"
      onChange="sprung(document.xxx.yyy.options[document.xxx.yyy.selectedIndex].value)"
      size="1">
      <option value="seite1.html">Seite 1 anzeigen</option>
      <option value="seite2.html">Seite 2 anzeigen</option>
    </select>
    </form>
    ...
Zuerst ein Formular mit einem Namen (hier: xxx) definieren. Dann die Selectbox mit einem Namen (hier: yyy) definieren. Danach durch die <option> -tags die Selectbox mit Werten und deren Beschreibung füllen. Per "onChange" im <select> -tag wird der Wechsel in der Liste erkannt und der angeklickte Wert (hier z.B. seite1.html) an die JavaScript-Funktion übergeben. Diese stellt dann die neue Seite im Frame bzw. neuen Window dar.