JavaScript
Gefahren und Anwendungsmöglichkeiten durch JavaScript

1.1 Entstehung

JavaScript wurde 1995 ursprünglich unter dem Namen LifeScript von Netscape Communications entwickelt. Wahlweise direkt im HTML-Dokument oder in einer separaten Datei notiert, wird der Code zur Laufzeit vom Web-Browser interpretiert. Mit Hilfe von JavaScript kann man somit statischen HTML-Dokumenten eine gewisse Dynamik verleihen (‚LifeScript'). Da die neue Sprache zusammen mit der Firma Sun präsentiert wurde, änderte man den Namen aus Marketing-Gründen zu ‚JavaScript'. Diese Bezeichnung ist leicht irreführend. Zwar orientiert sich JavaScript gerade in der Syntax stark an Java (von Sun), sonst zeigen die beiden Programmiersprachen allerdings wenig Gemeinsamkeiten auf. Folgende Tabelle soll kurz die wichtigsten Unterschiede zwischen Java und JavaScript verdeutlichen:

Parallel zu dem von Netscape entwickelten und vom Netscape Navigator unterstützten ‚JavaScript', integrierte Microsoft 1996 ebenfalls einen Interpreter in den Internet Explorer. Die Sprache, die auf JavaScript 1.0 basiert, wird von Microsoft als JScript bezeichnet. Trotz gemeinsamer Wurzel unterscheiden sich die beiden Sprachen teilweise erheblich, so dass Entwickler, die portabel programmieren wollen, zum Teil erheblichen Mehraufwand betreiben müssen. Inzwischen wurden allerdings wesentliche Kernbereiche von JavaScript durch die ECMA (European Computer Manufacturers Association) zu dem gemeinsamen Nenner ECMAScript zusammengefasst. So konnten durch den ECMA-262 Standard etliche Inkompatibilitätsprobleme beseitigt werden.

1.2 Elemente

1.2.1 Standardelemente

Als flexibles Entwicklungswerkzeug verfügt JavaScript über die wesentlichen Elemente einer Programmiersprache:

•   Variablen
•   Datentypen
•   Operatoren
•   Operanden
•   Kontrollstrukturen/Schleifen
•   Funktionen
•   Objekte
  

1.2.2 Standardobjekte

JavaScript enthält bereits eine Reihe an Standardobjekten, die sich im Zusammenhang mit der Programmierung von WWW-Seiten als recht nützlich erwiesen haben. Zu jedem Objekt existieren für die jeweilige Klasse typische Eigenschaften und Methoden. Folgende Objekte sollen exemplarisch hervorgehoben werden:

•   String-Objekt (Zeichenketten)
•   Number-Objekt (Zahlen)
•   RegExp-Objekt (Reguläre Ausdrücke)
•   Array-Objekt (Variablenlisten)
•   Math-Objekt (Mathematische Werte und Funktionen)
•   Date-Objekt (Datum- und Zeitangaben)

1.2.3 Abbildung der Benutzersituation auf ein hierarchisches Objektmodell

In der Regel verwendet man JavaScript zur Manipulation des Browserverhaltens und zur dynamischen Veränderung von HTML-Dokumenten. Beim Laden eines Dokumentes wird durch die JavaScript-Runtime-Engine eine Hierarchie von JavaScript-Objekten angelegt, die Inhalte und Struktur des Dokuments wiederspiegelt. Innerhalb dieser Hierarchie werden abhängige Objekte über Eigenschaften übergeordneter Objekte angesprochen. Normalerweise beziehen JavaScript-Objekte dabei ihre Namen von den ‚name'-Attributen der entsprechenden HTML-Tags des Dokuments. So wird z.B. für jedes <FORM>-Tag eines HTML-Dokumentes ein form-Objekt erzeugt. Auf das i-te form-Objekt innerhalb des Dokuments wird dann über document.Forms[i-1] zugegriffen.Jeder geladenen Seite sind folgende Objekte zugeordnet:

• Screen (Bildschirmeinstellungen)
• Navigator (Eigenschaften des Browsers)
• Window (Erscheinungsbild des Browserfensters)
  • Frames (Rahmen)
  • Document (Form, Struktur und Inhalt eines HTML-Dokuments)
  • Event (Ereignisbehandlung)
  • History (Referenzen auf die vom Benutzer bisher besuchten URLs)
  • Location (Eigenschaften der URL des momentan dargestellten Dokuments)

1.2.4 Ereignisse (Events)

Die meisten JavaScript-Anweisungen werden bereits beim Laden eines Dokuments ausgeführt. Allerdings bietet einem das ereignisgesteuerte Programmiermodell (event-driven programming model) von JavaScript weit mehr Möglichkeiten. Interaktionen des Benutzers werden erkannt und führen somit zur Erzeugung von Ereignissen. Der Browser reagiert mit dem Aufruf einer entsprechenden Ereignisbehandlungsroutine (event handler). Mit Hilfe von Ereignissen kann man somit statische HTML-Seiten zu dynamischen Oberflächen aufwerten. Dies bietet dem Benutzer ein gewisses Maß an Interaktivität und stellt somit den eigentlichen Zweck von JavaScript dar.
Diese Events sind neben Eigenschaften und Methoden im Document-Object-Modell von JavaScript definiert, welches für viele HTML-Objekte existiert. Der Browser kann auf sie mit der Ausführung von JavaScript-Code reagieren. Die ‚Event-Handler' werden dann als Attribut im zugehörigen HTML-Tag mittels JavaScript-Anweisungen definiert. Der Code kann dann wahlweise direkt im Attribut stehen oder durch einen Funktionsaufruf ausgeführt werden. Dazu muss die jeweilige Funktion bereits definiert sein.

Bsp.: <INPUT type="button" value="Hello" onClick="alert('Hello World!');">
Es wird also ein Knopf mit der Beschriftung 'Hello' generiert. Wird dieser angeklickt, so öffnet sich unter Windows ein Dialogfenster mit dem Text „Hello World!" als Meldung und dem Button „OK".

Bsp.: <INPUT type="button" value="Hello" onClick="HelloWorld()">
Wieder wird ein Knopf mit der Beschriftung 'Hello' generiert. Wird dieser angeklickt, so wird dieses Mal die Funktion HelloWorld aufgerufen. Dafür sollte sie dann bereits im Kopf des Dokuments definiert sein.

Häufig verwendete Event-Handler sind z.B.:

1.3 Einbettung

Client-seitiges JavaScript kann auf sechs grundsätzlich verschiedene Arten in HTML-Dokumente eingebettet werden [Flan 98b S.211 ff., Agou99].

• <SCRIPT>-Tag

  Direkte Einbettung von JavaScript-Code in die HTML-Seite
  <SCRIPT LANGUAGE="JavaScript"> Code </SCRIPT>

  Verweis auf eine separate Datei oder komprimierte Archiv-Datei mit JavaScript-Code
  <SCRIPT SCR="Code.js"> </SCRIPT>

• Ereignisbehandlungsroutine (event handler)
  

  Ereignisbehandlungsroutinen werden als Wert eines HTML-Attributs wie z.B. onClick, onChange oder onMouseOver angegeben und können beliebigen Code enthalten, der ausgeführt wird, sobald das spezifizierte Ereignis auftritt. Ereignisbehandlungsroutinen ermöglichen flexible Reaktionen auf Benutzeraktionen.
  <FORM> <INPUT type=text onChange="Code"> </FORM>
  

• "javascript:"-URL
  

  Sobald die betreffende URL geladen wird, werden alle auf den Pseudo-Protokollidentifikator "javascript:" folgenden Statements vom JavaScript-Interpreter als Java-Script-Code ausgeführt. „javascript:"-URLs dienen ähnlich wie Ereignisbehandlungsroutinen der flexiblen Reaktion auf Benutzereingaben und das Auftreten von Ereignissen
  <A href="javascript:Code> Das ist ein javascript-URL Test </A>
  

• Style-Sheets
  

  Style Sheets, spezielle Formatierungsvorgaben für die Darstellung einer Seite im Client, können seit Netscape Navigator 4.0 alternativ zu der weitverbreiteten CSS (cascading style sheet)-Syntax auch in JavaScript formuliert werden. Der die Formatierungen enthaltende JavaScript-Code kann entweder direkt in die Seite eingebunden oder in Form eines Verweises auf eine JavaScript-Datei aufgerufen werden. Microsoft Internet Explorer unterstützt JavaScript-Style Sheets nicht.
  Direkte Einbettung in <STYLE>-Tag
  <STYLE type=text/javascript> Code </STYLE>
  Verweis auf JavaScript-Datei in <LINK>-Tag
  <LINK href='code.js' rel=styleshett type=text/javascript>
  

• JavaScript-Entity
  

  Seit Netscape Navigator 3 kann JavaScript-Code in Form eines sogenannten JavaScript-Entities als Wert von HTML-Attributen erscheinen. JavaScirpt-Entities dienen dazu, bedingten HTML-Code zu verfassen und können beliebigen JavaScript-Code enthalten. Microsoft Internet Explorer unterstützt JavaScript-Entities nicht.
  <BODY background="&{JavaScript-Code};">
  

• Bedingte Kommentare (conditional comments)
  

  Seit Netscape Navigator 4.0 besteht die Möglichkeit, mit Hilfe von JavaScript-Entities bedingte HTML-Kommentare zu formulieren. Ergibt die Auswertung des JavaScript-Ausdrucks „wahr", so wird die Kommentierung ignoriert und der Inhalt des Kommentars normal ausgewertet. Ist das Ergebnis der Auswertung des JavaScirpt-Ausdrucks „falsch", so wird der Inhalt des Kommentars vom Browser ignoriert. Microsoft Internet Explorer unterstützt bedingte Kommentare nicht.
  <!-- &{JavaScript-Code} -->

Bsp. zum <SCRIPT>-Tag:

<HTML>
  <HEAD><TITLE>Hello World Programm</TITLE>
    <SCRIPT type="text/javascript"> // Einleiten Bereichs für JavaScript in einer HTML-Datei
    <!-- // einen HTML-Kommentar einleiten -> aeltere Browser
      alert("Hello World!"); // Dialogfenster mit dem Text „Hello World!" als Meldung und dem Button „OK"
    //--> // einen HTML-Kommentar abschliessen
    </SCRIPT>
  </HEAD>
  <BODY></BODY>
<HTML>

1.4 Sicherheitsmodelle

Netscape entwickelte mehrere Sicherheitsmodelle, die den verschiedenen Gefährdungen durch JavaScript-Programme entgegentreten sollen. Drei Modelle sollen kurz vorgestellt werden.

• Same Origin Policy
  Ein JavaScript-Programm darf nicht auf alle Objekte innerhalb des Browser zugreifen. Das Programm erhält ausschließlich Zugriff auf Eigenschaften derjenigen Fenster und Dokumente, die von der gleichen „Quelle" wie das Programm selbst stammen.
• Data Tainting
  Mittels Data Tainting kann der Autor des Fensters verschiedene Objekte als privat kennzeichnen. Auf diese gekennzeichneten Objekte kann zwar nach wie vor zugegriffen werden, aber die Werte des gekennzeichneten Objekts werden nur nach Rückfrage beim Anwender übertragen.
• Signed Script Policy
  Dieses Modell basiert auf der Möglichkeit, Objekte digital signieren zu lassen und diese somit zu authentisieren. Einem signierten JavaScript-Programm können somit erweiterte Zugriffsrechte auf Ressourcen des lokalen Rechners gewährt werden.

2 Vorteile und Anwendungen

2.1 Vorteile von JavaScript

• einfache Programmiersprache
  JavaScript zeichnet sich durch eine einfach zu erlernende Syntax aus. Im Gegensatz zu höheren Programmiersprachen (wie C oder C++) muss sich der Software-Entwickler nicht mehr mit komplexen Kleinarbeiten wie dem Verschieben von Bits oder dem Verbiegen von Pointern herumärgern. JavaScript eröffnete sich daher neue Zielgruppen abseits der klassischen Programmierer und ist gerade bei Grafikern, Systemadministratoren und Homepageentwickler äußerst beliebt.
• kostenlos
  Um ein JavaScript zu programmieren und zu testen, benötigt man nur einen einfachen Texteditor und einen JavaScript kompatiblen Browser. Beides wird im Internet kostenlos zur Verfügung gestellt.
• fortlaufende Weiterentwicklung
  JavaScript wird gemeinsam von Sun Mircosystems und Netscape weiterentwickelt. Dem Entwickler werden durch neue Versionen laufend neue Möglichkeiten geboten.
• Ergänzung von HTML
  JavaScript kann die gängige HTML-Syntax sinnvoll erweitern. So kann man z.B. Formularbuttons vielfältiger nutzen oder mehrere Framefenster gleichzeitig ändern.
• objektbasierend
  JavaScript verwendet das so genannte Konzept der Prototypen. Dieser Ansatz differenziert nicht zwischen Objekten und Klassen, sondern kennt nur das Konzept der Objekte. Auf einem prototypischen Objekt können beliebige Operationen ausgeführt werden. Die Hauptanwendung von JavaScript liegt hier beim Umgang mit HTML-Dokumenten und deren Elemente.
• dynamisch
  Durch die in Kapitel 1.2.4 vorgestellten Event-Handler wird ein interaktiver Umgang mit dem Benutzer ermöglicht. JavaScript kann somit direkt auf Aktionen des Users reagieren.
• Serverentlastung
  JavaScript verfügt über Kontrollstrukturen. Damit können z.B. Anwendereingaben in einem HTML-Formular beim Anklicken des Submit-Buttons abgefangen werden und gleich clientseitig überprüft werden. Dies reduziert die Serverbelastung.

2.2 Anwendungsmöglichkeiten von JavaScript

Exemplarisch sollen einige potentielle Einsatzgebiete von JavaScript vorgestellt werden.

• Prüfung eines HTML-Formulars
  Ein nützlicher Aspekt von JavaScript ist die Formularprüfung. Hierbei wird getestet, ob alle Eingaben zum Formular richtig erfolgt sind. Man erspart sich damit unnötige Serverlast und der Anwender kann sich sicher sein, dass er keine Fehleingaben getätigt hat. Mittels des Form-Objekts kann man auf die einzelnen Formularinhalte zugreifen.
• Dynamische WWW-Seiten, Dynamic HTML (DHTML)
• Datenbankzugriffe (mittels Perl/PHP) durch Mausbewegungen (Eventhandling)
  Anwendungen, bei denen aufgrund von Mausbewegungen verschiedene Grafiken oder Texte aus einer zentralen Datenbank eingeblendet werden, lassen sich weder alleine mit Perl, PHP oder JavaScript sinnvoll programmieren. Unter JavaScript werden die nötigen Datenbankzugriffe nicht unterstützt. Die Skriptsprachen PHP und Perl arbeiten dagegen nicht clientseitig, was eine direkte und schnelle Reaktion innerhalb des Browsers ausschließt.
  Verschmelzt man die Vorteile der verschiedenen Programmiersprachen, kann man PHP oder Perl auf die Datenbank zugreifen lassen und erzeugt anhand der darin enthaltenen Informationen JavaScript-Code. Dieser steuert dann den Browser des Users.
  Weitere Informationen: http://selfaktuell.teamone.de/artikel/javascript/datenbanken/index.htm
• Browsererkennung
  Über das navigator-Objekt kann die Browserversion des Benutzers abgefragt werden. Mit dieser Information lassen sich Internetseiten portabel programmieren, was aber auch einen deutlichen höheren Zeitaufwand erfordert.
• Navigationshilfen
  Mittels JavaScript können übersichtliche Navigationshilfen zum Betrachten von Internetseiten generiert werden.
• Personalifizierung mittels Cookies
  JavaScript kann Cookies verwenden. So gibt es z.B. unter Netscape die Datei cookies.txt im Programmverzeichnis. In diese Datei dürfen JavaScript-Programme ausnahmsweise schreiben. So kann darin z.B. festgehalten werden, wann der Benutzer zum Beispiel das letzte Mal die betreffende Seite aufgerufen hat, welche Seiten er dort betrachtet hat und wie lange er sich dafür Zeit nahm. Wenn der Benutzer das nächste Mal die gleiche Seite aufruft, liest das JavaScript-Programm dann die cookies.txt Datei des Benutzers aus und kann damit eine individuelle dynamische HTML Seite erstellen.
• Interaktion mit anderen Web-Technologien (Java-Applets, Shockwave)
  Im Internet kann man immer häufiger multimediale Technologien wie Java-Applets, das Shockwave-Plugin, Streaming Video oder Musik anfinden. Solche Elemente werden innerhalb der Browser-Umgebung wieder als Objekte verwaltet. JavaScript kann dazu verwendet werden, um mit ihnen zu kommunizieren. Durch die LiveConnect-Technologie erhalten JavaScripts so z.B. die Möglichkeit auf Java-Klassen zuzugreifen und diese zu benutzen.
• Animation (Lauftext)
  Ein Texteingabefeld wird normalerweise vom Benutzer dazu benutzt, einen Text einzugeben. Mit Hilfe von JavaScript kann es so manipuliert werden, dass es Text ausgibt. Newsticker und Lauftexte sind im Netz häufig anzutreffen. Mit Hilfe des Image-Objekts lässt sich der Sourcecode eines Bildes austauschen. Damit lassen sich Rollover-Effekte und animierte Bilder generieren.