1. Herfried K. Wagner’s VB.Any
  2. Web
  3. Artikel

Einführung in JavaScript

Kurzfassung

JavaScript ist eine clientseitige Skriptsprache, die u. a. dazu verwendet werden kann, Dokumenten im Web ein dynamisches Verhalten zu verleihen. Dieser Artikel soll einen kurzen Einblick in die Möglichkeiten, die JavaScript bietet, gewähren und auch auf mögliche Risiken des Einsatzes von JavaScript hinweisen.

Einleitung

JavaScript ist eine plattformunabhängige Skriptsprache, die von Netscape zum Einsatz in HTML-Dokumenten entwickelt wurde. Ursprünglich arbeitete Netscape an einer Skriptsprache mit dem Namen LiveScript, in Zusammenarbeit mit Sun Microsystems wurde diese Sprache dann aber in JavaScript umgewandelt und umbenannt. Wie andere Skriptsprachen auch verwendet JavaScript Codes, die in anderen Anwendungen laufen, wie z. B. einem Webbrowser. JavaScripts können nicht unabhängig, d. h. ohne „Hostanwendung“ ablaufen.

Was ist JavaScript?

Die Geschichte von JavaScript

Seit JavaScript 1.0 mit Netscape 2.0 vorgestellt wurde, wurde die Programmiersprache mehrfach geändert. Die derzeit gültige/letzte Version (für Netscape 4.0x) ist 1.2. Zusätzlich hat Microsoft seine eigene Version von JavaScript herausgebracht, die JScript genannt wird. Auch diese wurde mehrfach geändert. Die derzeitige Version (für MSIE 4.0) ist 3.0. Wie bei vielen der besten Webtechnologien werden die Entwickler mit der Arbeit konfrontiert, ihre Skripte auf so vielen Browsern und Plattformen zu testen, wie möglich. Das kann sehr strapaziös sein, da die Debugging-Werkzeuge für JavaScript viel zu wünschen übrig lassen.

Bessere Zeiten kommen: Die ECMA Standards Organisation bringt eine Hauptspezifikation für ECMAScript heraus, eine generelle Skriptsprache hervorgegangen aus JavaScript. Microsoft beansprucht für sich, dass JScript vollkommen ECMAScript-kompatibel sei, während Netscapes JavaScript 1.2 dies nicht sei. Netscapes Antwort darauf ist natürlich gegensätzlich. Wie dem auch sei, die Hauptsache sollte doch sein, dass die Skripte überall funktionieren.

Es gibt keine keine direkte Verwandtschaft zwischen JavaScript und Java. Java ist eine plattformunabhängige Programmiersprache bzw. Technologie und wird verwendet, um selbstständig arbeitende Applikationen oder Applets für HTML-Dokumente zu schreiben. JavaScript ist keine Unterform von Java (Java mit ein paar Komponenten weniger). Obwohl JavaScript in mancher Hinsicht ähnlich wie Java aufgebaut ist, gibt es viele Unterschiede. VBScript andererseits ist eine andere Form von Microsofts Programmiersprache Visual Basic. Obwohl VBScript und JavaScript ähnliche Funktionen haben, gibt es auch zwischen dieses beiden Sprachen viele Unterschiede und die Skripte dieser Sprachen sind nicht austauschbar, ein paar einfache Fälle ausgenommen. VBScript wird zur Zeit nur vom Microsoft Internet Explorer unterstützt.

Einsatzgebiete und Grenzen

Auch wenn JavaScript in seinen Möglichkeiten sehr eingeschränkt ist, kann man damit optisch ansprechende Effekte erzielen. Alternativen dafür liegen in anderen Präsentationstechnologien, die allerdings nicht direkt mit logisch formatierten Dokumenten zusammenarbeiten können. Ein Beispiel dafür ist die kommerzielle Technologie Flash von Macromedia. Im Folgenden werden einige Beispiele dafür angegeben, was mit JavaScript realisiert werden kann:

JavaScript besitzt einige Einschränkungen gegenüber herkömmlichen Programmiersprachen, da es „nur“ eine Skriptsprache ist und keine eigenständigen Programme damit erzeugt werden können. Die JavaScript-Skripte läuft browserintern auf dem System des Benutzers und können nur auf Objekte/Daten zugreifen, die der Browser momentan im Arbeitsspeicher des Computers gespeichert hat:

Diese Grenzen kann man auch als „Sicherheitsvorkehrungen“ sehen, da weder Sie selbst noch der Benutzer, der Ihre Website anschaut, Angst zu haben braucht, dass JavaScript seine Programme, Daten oder gar den Computer zerstört. Das schlimmste, was JavaScript machen kann, ist eine Fehlermeldung zu produzieren, wenn es nicht ordnungsgemäss läuft.

Einbau von JavaScripts

JavaScript-Code wird in ein script-Element geschrieben, wobei zusätzlich noch ein HTML-Kommentar um das Skript gelegt wird. Dadurch werden Browser, die kein JavaScript unterstützen, daran gehindert, den Code als Text auszugeben. Vergessen Sie nicht die // am Beginn der Zeile für das Schliessen des Kommentars. Dieses zeichnet einen JavaScript-Kommentar aus und bewahrt Browser davor, --> als Teil des Skripts zu sehen.

<script language="JavaScript">
<!--
Hier steht der JavaScript-Code.
//-->
</script>

Das Attribut language="JavaScript" sagt dem Browser, dass es sich bei dem Skript um ein JavaScript handelt. Es können auch andere Werte für dieses Attribut angeben werden, beispielsweise „JavaScript 1.3“ oder „JScript“. Wenn eine Sprachversion definiert wird, dann werden nur Browser, die diese Version unterstützen, das Skript verarbeiten. Der Vorteil davon ist, dass das Risiko von Fehlermeldungen geringer ist. Nachteilig ist jedoch, dass ältere Browser davon abgehalten werden, zu versuchen, das Skript auszuführen. Es dürfte allerdings sicherer sein, das Skript nicht ablaufen zu lassen, als den Benutzern älterer Browser Fehlermeldungen zu bescheren. Clientseitige Skripte sollten generell auf verschiedenen Browsern getestet werden, um Fehler zu vermeiden; ggf. muss eine entsprechende Version von JavaScript im language-Attribut angegeben werden.

Wird ein Skript von mehreren HTML-Seiten verwendet, dann kann es in eine JavaScript-Datei ausgelagert werden. Diese Dateien tragen üblicherweise die Dateiendung .js. In der HTML-Datei muss dann lediglich die JavaScript-Datei referenziert werden. Diese Möglichkeit besteht erst seit JavaScript 1.1. Bei den Browsern MSIE und NS funktioniert es ab den Versionen 4.0. MSIE 3.0 unterstützt es nur, wenn das Skript keinen Text in ein HTML-Dokument schreibt. Opera 3.0 unterstützt diese Funktion nicht.

<script language="JavaScript 1.1" src="checklink.js"></script>

Technisch gesehen können die Skripte überall in das Dokument geschrieben werden. Es gibt jedoch einige Besonderheiten:

Wir wollen hier nicht weiter auf das Implementieren von JavaScripts eingehen, sondern einige kleine Beispiele vorstellen. Dadurch soll näher gebracht werden, wo JavaScript eingesetzt werden kann und wo seine Stärken liegen.

Anwendungsbeispiele

Schreiben in das Dokument

Ein klassisches Beispiel für JavaScript ist das Schreiben von „Hello World!“. Dies lässt sich durch reines HTML natürlich leichter bewerkstelligen:

document.write("<span style='font-size: 22px'>");  // Grösse 22px, zentriert.
document.write("Hello World!");   // Text, der geschrieben werden soll.
document.write("</span>");        // Ende der Formatierung.

Folgendes JavaScript muss an der Stelle eingefügt werden, an der das Datum der letzten Änderung erscheinen soll, beispielsweise am Ende des HTML-Dokuments. Zuerst wird das Datum der letzten Änderung ermittelt und dann über die Methode write von document in einer für den Benutzer leicht lesbaren Form in das Dokument geschrieben:

var date = new Date(document.lastModified);
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yy = date.getYear();
var HH = date.getHours();
var MM = date.getMinutes();
if (dd < 10)
  dd = "0" + dd;
if (mm < 10)
  mm = "0" + mm;
if (HH < 10)
  HH = "0" + HH;
if (MM < 10)
  MM = "0" + MM;
document.write(dd + "." + mm + "." + yy + " " + HH + ":" + MM);

Zurück-Link, „Fensterschliesser“ und „Fensteröffner“

Ein weiterer Klassiker ist ein Zurück-Link, der JavaScript benutzt, um zur zuletzt angesehenen Seite zurückzukehren. Dieser Link hat den selben Effekt wie die Zurück-Schaltfläche im Browser. Oft sieht man Fenster, die über einen Link geschlossen werden können. Auch dies lässt sich einfach mit JavaScript realisieren, indem die Methode close von self aufgerufen wird. Soll ein ganzes Frameset geschlossen werden, muss anstelle von self das Objekt top verwendet werden:

<a href="javascript:history.go(-1)">Zurück</a><br/>
<a href="javascript:self.close()">Schliessen</a><br/>
<a href="javascript:open('http://www.activevb.de/')">ActiveVB öffnen</a>

Soll der Benutzer entscheiden können, ob die Seite in einem neuen Fenster geöffnet oder dazu das bestehende Fenster verwendet wird, dann könnte folgender Code zum Einsatz kommen:

<script language="JavaScript" type="text/javascript">
  function opener(doc) {
    if (confirm("Soll das Dokument in einem neuen Fenster angezeigt werden?"))
      open(doc);
    else
      location.href = doc;
  }
</script>
.
.
.
<a href="javascript:opener('http://www.activevb.de/')">ActiveVB öffnen</a>

Es ist zu beachten, dass der Benutzer Meldungsfelder nicht gerne sieht und daher getrennte Links sinnvoller wären.

Eine Schaltfläche mit der aktuellen Zeit

Zum Abschluss sei noch ein Beispiel angebeben, das bereits sehr lange im Internet zu finden ist. Dabei wird eine Schaltfläche mit der aktuellen Uhrzeit als Beschriftung dynamisch in die HTML-Datei geschrieben, der bei Klick die Anzahl der seit dem 1. Januar 1970 vergangenen Millisekunden in einem Meldungsfeld anzeigt:

day = new Date();
miVisit = day.getTime();

function clock() {
  dayTwo = new Date();
  hrNow = dayTwo.getHours();
  mnNow = dayTwo.getMinutes();
  scNow = dayTwo.getSeconds();
  miNow = dayTwo.getTime();
  if (hrNow == 0) {
    hour = 12;
    ap = " AM";
  }
  else if(hrNow <= 11) {
    ap = " AM";
    hour = hrNow;
  }
  else if(hrNow == 12) {
    ap = " PM";
    hour = 12;
  }
  else if (hrNow >= 13) {
    hour = (hrNow - 12);
    ap = " PM";
  }
  if (hrNow >= 13)
    hour = hrNow - 12;
  if (mnNow <= 9)
    min = "0" + mnNow;
  else
    min = mnNow;
  if (scNow <= 9)
    secs = "0" + scNow;
  else
    secs = scNow;
  time = hour + ":" + min + ":" + secs + ap;
  document.form.button.value = time;
  self.status = time;
  setTimeout('clock()', 1000);
}

function timeInfo() {
  milliSince = miNow;
  milliNow = miNow - miVisit;
  secsVisit = Math.round(milliNow / 1000);
  minsVisit = Math.round((milliNow / 1000) / 60);
  alert(
    "Es sind " + milliSince + " Millisekunden seit Mitternacht "
    + "des 1. Jänner 1970 vergangen. Sie haben " + milliNow + " "
    + "dieser Millisekunden auf dieser Seite verbracht; also "
    + "cirka " + minsVisit + " Minuten und "
    + secsVisit + " Sekunden."
  );
}

document.write(
  "<div style='text-align: center'><form name=\"form\">"
  + "<input type='button' value=\"Click for info!\""
  + " name='button' onClick=\"timeInfo()\"></form></div>"
);

onError = null;
clock();

Schlusswort

JavaScript bietet eine leistungsstarke Möglichkeit, HTML-Seiten mit dynamischen Inhalten zu versehen. Wegen der vielen verschiedenen Browser ist ihr Einsatz allerdings problematisch, wenn man von einigen einfachen Fällen absieht. Weiters stellen JavaScripts und dynamische Inhalte wie z. B. Menüs für Besucher mit Behinderungen, beispielsweise Blinde, eine oft unüberwindbare Hürde dar. Aus diesem Grund sollte man Skripte nur dann einsetzen, wenn kein anderer Weg herumführt. Dynamik in der Darstellung der Seite mag zwar einigen Besuchern gefallen, aber eine grosse Anzahl an Menschen vom Besuch der Seiten ausschliessen.