Objektorientierte Programmierung mit JavaScript

Es hat Tradition, die Beschreibung einer Programmiersprache mit einem Programm zu beginnen, das einzig dem Zweck dient, die Worte „Hello world!“ auf dem Bildschirm anzuzeigen. Dabei ist es ebenso Tradition, keine umfangreichen Erläuterungen zu geben.

Was ist die prinzipielle Eigenschaft eines Computers?Wie das englische Wort compute bereits vermuten lässt, handelt es sich bei einem Computer zunächst um eine Rechenmaschine. Angesichts der Videos, die man sich auf einem Computer-Bildschirm anschaut, und der Telefonkonferenz, die man mit Hilfe eines Computers abwickelt, tritt allerdings das Rechnen bei vielen Nutzungen scheinbar in den Hintergrund. Aber natürlich rechnet der Computer auch für die Anzeige eines Videos und den Transport der Tonsignale, etwa wenn die vor der Internet-Übertragung komprimierten Bild- und Tonsignale wieder dekomprimiert werden müssen.

Um einen Computer zu programmieren, muss man keineswegs wissen, wie er technisch funktioniert. Schließlich kann man auch Auto fahren, ohne Kenntnisse über die interne Funktionsweise zu besitzen. Ein wenig Hintergrundwissen ist aber trotzdem oft hilfreich.

Auch wenn die Überschrift dazu geeignet wäre, eine philosophische Betrachtung über Erkenntnistheorie anzukündigen, liegt uns nichts ferner. In einer ganz pragmatischen Sichtweise können wir aber feststellen, dass Computerprogramme – in einer gewissen Analogie zu wissenschaftlichen Theorien und mathematischen Modellen – einen Teil der von uns wahrgenommenen Realität widerspiegeln. Dabei ist es üblich, materielle Gegenstände als Objekte aufzufassen, von denen jedes einen individuellen, das heißt einen einzigartigen, Charakter besitzt, und zwar unabhängig davon, ob er für uns äußerlich erkennbar ist oder nicht.

Schon das erste Beispiel „Hello world!“ in Kapitel 1 hat uns gezeigt, dass JavaScript in HTML eingebettet wird. Obwohl wir uns hier möglichst wenig mit HTML beschäftigen wollen, lässt sich das doch nicht ganz vermeiden. Wir starten daher eine Kurzübersicht.

Das Wort „Start“ in der Überschrift gilt im doppelten Sinn. Einerseits starten wir endlich mit JavaScript. Andererseits wollen wir uns in diesem Kapitel damit beschäftigen, wie man ein JavaScript-Programm innerhalb einer Webseite starten kann.

Ging es bisher mehr um den logischen Hintergrund sowie das technische Fundament eines JavaScript-Programms, so wollen wir nun ein wenig mit JavaScript experimentieren. Konkret wollen wir uns die verschiedenen Anweisungstypen ansehen. Insbesondere werden wir zunächst erörtern, in welcher Weise es mit sogenannten Kontrollstrukturen möglich ist, von der rein sequentiellen Ausführung von Programmbefehlen abzuweichen.

Viele Abläufe in unserem Leben wiederholen sich ständig. Wenn wir beispielsweise beim Autofahren merken, dass die Drehzahl des Motors für den aktuellen Gang zu hoch wird, schalten wir in den nächsthöheren Gang. Dazu gehen wir vom Gas, treten die Kupplung, schalten in den nächsten Gang und lassen dann die Kupplung langsam wieder kommen, um schließlich wieder Gas zu geben.

In den bisherigen Beispielprogrammen standen alle Variablen für Speicherzellen, in denen Zahlen gespeichert wurden. Details wie maximale Größe oder Nachkomma-Genauigkeit der Zahlen wurden dabei nicht erörtert. Im beschränkten Rahmen kamen in den erörterten Programmen auch Texte vor, etwa im „Hello world!“-Beispiel. Dort wurde der Text „Hello world!“ aber nicht in einer Variablen gespeichert, sondern direkt als Konstante für eine Bildschirmausgabe verwendet.

Im vorletzten Kapitel haben wir JavaScript-Funktionen als wichtiges Mittel kennen gelernt, Daten systematisch zu bearbeiten. Dies geschah dort an Hand von JavaScript-Funktionen, in denen mit Zahlen Berechnungen durchgeführt wurden. Im letzten Kapitel haben wir dann gesehen, dass mit JavaScript nicht nur Zahlen, sondern auch Strings, boolesche Werte und Zusammensetzungen von Einzeldaten gespeichert werden können.

Im letzten Kapitel wurde erörtert, wie in JavaScript Standardfunktionalitäten realisiert werden können, die für die verschiedenen einfachen Datentypen häufig benötigt werden. Im Fokus standen Operatoren und daraus gebildete, Formel-artige Ausdrücke. Unter ausschließlicher Verwendung von Operatoren können allerdings nicht alle Funktionalitäten realisiert werden, die insbesondere für Strings, aber auch für die anderen einfachen Datentypen oft gebraucht werden.

Von JavaScript haben wir bisher diverse Befehle zur Steuerung des Programmablaufs sowie die elementaren Möglichkeiten zur Speicherung und Bearbeitung von Daten kennen gelernt. Insbesondere haben wir gesehen, wie der Datenzugriff – zum Lesen oder Speichern – organisiert wird, nämlich mit Variablennamen. Jede von diesen Variablen steht analog zu einer Adresse für einen Speicherbereich, dessen Inhalt im einfachsten Fall einer Zahl, einem logischen Wert oder einer Zeichenkette entspricht.

Objekte in JavaScript haben wir bisher als völlig individuelle Unikate kennen gelernt. Dabei ist jedes einzelne JavaScript-Objekt im Verlauf seiner Existenz mit höchster Flexibilität veränderbar: Verändert werden können nicht nur die Werte der Attribute. Ebenfalls veränderbar sind – in Abweichung zu den meisten anderen Programmiersprachen – die Menge der Attribute, die Menge der Methoden und die Funktionalität der Methoden.

Im letzten Kapitel haben wir gesehen, dass Klassen ihre Entsprechung in JavaScript darin finden, wenn mit einem Konstruktor Objekte nach einem gemeinsamen Bauplan erzeugt werden. Dabei werden – anders als in klassenbasierten Programmiersprachen wie C++ und Java – bei jedem Aufruf eines Konstruktors nicht nur die Attributwerte initialisiert. Vielmehr findet bei jedem Aufruf der komplette Prozess der Objekterstellung statt.

Bereits im ersten Beispielprogramm js/12 zu Objekten in Kapitel 12 hatten wir versucht, mit einem Zuweisungsbefehl ein Objekt zu kopieren, wie wir es von Werten einfacher Datentypen her gewohnt waren. Dass dies nicht wie gewünscht funktionierte, lag daran, dass der eigentliche Inhalt eines Objekts über eine Referenz verwaltet wird. Der Objektinhalt lässt sich damit nicht durch Kopieren des Variableninhalts kopieren, weil auf diese Weise nur die Referenz kopiert wird – so, wie man den Inhalt einer Internetseite nicht dadurch in seinen lokalen Speicher kopieren kann, dass man die betreffende Internetadresse speichert.

In Kapitel 8 haben wir bei der Erörterung von Funktionen auf die Wichtigkeit hingewiesen, Variablen möglichst lokal zu deklarieren. Nur so kann nämlich verhindert werden, dass es zwischen verschiedenen Programmteilen zu unerwünschten Seiteneffekten kommt, wenn dort auf ein und dieselbe globale Variable schreibend zugegriffen wird – jeweils in der implizit gemachten Annahme, dass diese Variable dem betreffenden Programmteil exklusiv zur Verfügung steht. Das hat zur Folge, dass die korrekte Funktionalität eines Programmteils, der globale Variablen verwendet, davon abhängt, in welcher Weise der Rest des Programms realisiert ist.

Bekanntlich ist ein Objekt in JavaScript nicht nur im Hinblick auf seine Attributwerte, sondern auch in Bezug auf seine Struktur und seine Funktionalität völlig flexibel veränderbar. In Kapitel 13 haben wir gesehen, dass es Klassen als Zusammenfassungen von Objekten gleicher Bauart und gleicher Funktionalität in JavaScript abweichend von anderen Programmiersprachen wie Java und C++ nur indirekt gibt: Auch wenn es in JavaScript kein Sprachelement gibt, das einer Klasse entspricht, so kann man dennoch von Klassen sprechen, weil es sie in der abzubildenden Wirklichkeit gibt. Außerdem ist es mit einem Konstruktor möglich, baugleiche und funktional identische Objekte zu erstellen – wohl wissend, dass später individuelle Veränderungen der Objektstruktur und -funktionalität möglich sind

Wer etwas erbt, muss es sich nicht selbst erarbeiten. Das gilt im richtigen Leben, aber auch für Programmierer – dort mit dem Vorteil, dass niemand für die Erbschaft sterben muss.

Im letzten Kapitel haben wir zwei Techniken kennen gelernt, wie Methoden einer Klasse an eine Unterklasse vererbt werden können: Universell und flexibel, aber höchst schwerfällig ist das Verfahren der Delegation. Wird dagegen nur der Aufruf des Konstruktors delegiert, werden alle Methoden – und gegebenenfalls auch Attribute – automatisch vererbt.

Schon zu Beginn von Kapitel 13 wurde in Bezug auf JavaScript-Objekte auf die unbegrenzte Dynamik hingewiesen: Während der Laufzeit können bei einem Objekt nicht nur die Werte der Attribute verändert werden, wie es auch in anderen klassenbasierten Programmiersprachen möglich ist. Darüber hinaus ist es sogar möglich, Attribute und Methoden zu ergänzen oder zu streichen. Insofern ist es oft erforderlich, die aktuelle Gestalt eines Objektes zu analysieren, beispielsweise wenn es als Parameter an eine Funktion übergeben wurde.

Beginnend mit Kapitel 12 wurde bereits mehrfach darauf hingewiesen, dass Objekte anders als Werte einfacher Datentypen nicht durch eine Zuweisung in eine andere Variable kopiert werden können. Grund ist, dass bei einem Versuch, ein Objekt mittels Zuweisung zu kopieren, nur dessen Referenz kopiert wird. Daher verfügt man nach dem Kopieren über zwei Variablen, deren Inhalte als Referenzen auf denselben, weiterhin nur einfach vorhandenen Objektinhalt verweisen.

Bevor wir uns nach dem Erörtern der eigentlichen JavaScript-Sprache dem Einsatz von JavaScript in HTML-Dokumenten zuwenden, soll es nicht versäumt werden, ein kurzes Resümee zu ziehen

JavaScript hat seine Bedeutung als Programmiersprache fast ausschließlich dadurch erlangt, dass mit seiner Hilfe Internetseiten interaktiv gestaltet werden können. Auf diese Weise lassen sich insbesondere Inhalt und Aussehen einer aktuell angezeigten Internetseite ändern, ohne dass eine Kommunikation mit einem Internetserver stattfinden muss. Dabei kann die Interaktivität so ergonomisch und visuell ansprechend gestaltet werden, wie es zuvor nur mit lokal installierten Anwendungsprogrammen möglich war.

Im letzten Kapitel haben wir das Objekt window, das dem Browserfenster entspricht, zu dem das betreffende Skript gehört, in den Erläuterungen so weit wie möglich ausgeklammert. Die Lücken gilt es nun zu schließen: Zu den äußerlich sichtbaren Eigenschaften eines Browserfensters, die sich in Eigenschaften des Window-Objekts widerspiegeln, gehören insbesondere die Größe des Fensters und sein Erscheinungsbild, das unter anderem die vorhandenen Bedien- und Anzeigeelemente umfasst.

Von den in Bild 9 dargestellten Objekten wurde einzig das Dokumentenobjekt window.document bisher noch nicht näher erläutert. Das Dokumentenobjekt spiegelt den Inhalt einer HTML-Datei wider, die im Browserfenster zum Objekt window angezeigt wird. Dabei findet die verschachtelte Struktur der HTML-Tags seine Entsprechung in einer Hierarchie von Unterobjekten, deren Attribute die Textinhalte sowie die Layout-Eigenschaften des Dokuments beinhalten.

Mit der Methode getElementById des Objekts window.document haben wir im letzten Kapitel eine Möglichkeit kennen gelernt, mit der auf den Inhalt und die Attribute eines beliebigen HTML-Elements lesend und schreibend zugegriffen werden kann.

Wie bereits in Kapitel 5 erwähnt, müssen die Tags eines HTML-Dokuments immer sauber geschachtelt sein. Davon betroffen sind natürlich nur Tags, die anders als zum Beispiel <img>, <meta> und <br> eines End-Tags bedürfen: Bei einem solchen Tag-Paar wie zum Beispiel <a></a> darf es nie vorkommen, dass nur ein einzelnes Tag des Tag-Paares im inneren Bereich eines anderen Tag-Paares vorkommt. Mit anderen Worten: Es gilt das Last-In-First-Out-Prinzip (LIFO), das wir bereits beim Stack kennen gelernt haben.

Im Beispielprogramm js/26 des vorletzten Kapitels wurden neue HTML-Elemente wie beispielsweise die drei Hyperlinks durch Änderung der innerHTML-Eigenschaft des übergeordneten HTML-Elements erzeugt. Diese Technik, bei welcher der Attributwert der Eigenschaft innerHTML ausgehend vom ursprünglichen Wert um HTML-Tags ergänzt wird, kann im Extremfall sogar dazu verwendet werden, den gesamten Textkörper eines HTML-Dokuments auszutauschen.

Die Gelegenheiten, innerhalb einer Internetseite persönliche Daten einzutragen, sind zahlreich. Ist man bereits beim Anbieter der Seite registriert, reicht für eine Anmeldung meist die Eingabe einer Nutzerkennung, bei der es sich in der Regel um eine Email-Adresse, ein frei wählbares Pseudonym oder eine Kundennummer handelt, und die Eingabe des zugehörigen Passworts.

Mit dem ersten Beispielprogramm von Kapitel 25 wurden einige Grundeigenschaften eines HTML-Dokuments auf dem Bildschirm angezeigt, wozu die entsprechenden Attribute des document-Objekts title, referrer, lastModified und URL ausgelesen wurden. Eigentlich hätte man in diesem Zusammenhang noch ein weiteres Attribut ergänzen können, nämlich cookie. Allerdings ist das Verhalten dieses Attributs deutlich komplexer, was der Grund dafür ist, ihm ein eigenes Kapitel zu widmen.

Nur ein sehr kleiner Teil der Programme kommt ohne jede Interaktion mit dem Benutzer aus – dazu gehören zum Beispiel die Programme, die beim Start eines Computers automatisch starten, dabei die Hardware prüfen und nach Updates suchen. Da JavaScript insbesondere die Möglichkeit bietet, eine vom Browser angezeigte Seite dynamisch zu ändern, ist es mehr als naheliegend, dass das Potenzial dieser spezifischen Funktionalität erst dann richtig ausgeschöpft wird, wenn die dynamischen Änderungen unmittelbar durch äußere Ereignisse wie Benutzereingaben ausgelöst werden.

Häufig entsteht beim Webdesign der Wunsch, nur Teilbereiche einer Seite neu zu laden. Man denke beispielsweise an eine Diaschau, bei der eine Sequenz von Bildern nacheinander präsentiert werden soll: Anzuzeigen ist jeweils ein einzelnes Bild, das dafür aktuell geladen wird. Natürlich könnte man für jedes Bild eine eigene HTML-Seite erstellen – in der Regel dynamisch auf dem Server –, und dann jeweils die gesamte Seite neu laden. Allerdings würde dies unter Umständen zu einem wenig schönen Neuaufbau der als „Bilderrahmen“ fungierenden Internetseite führen.

Im Rahmen der Erläuterungen, die wir im vorletzten Kapitel über ereignisgesteuerte Programmierung von JavaScript gegeben haben, wurde darauf hingewiesen, dass eine Warteschleife in einem JavaScript-Programm eigentlich nichts zu suchen hat. Andernfalls würden nämlich während des Verharrens in einer Warteschleife alle Bedienmöglichkeiten innerhalb der betreffenden Internetseite blockiert.

In Kapitel 30 haben wir die Funktionalität und Anwendungen von Cookies erörtert: Cookies bieten auf Basis des Protokolls HTTP eine Möglichkeit, serverseitig die Dateiabrufe einer Session und – wenn gewünscht – darüber hinaus eines Nutzers als solche erkennen zu können. Dies geschieht in Form eines kleinen Speicherbereichs, den der Browser für jede Domain zur Verfügung stellt.

Auch wenn ein Browser als Sandbox fungiert, aus der heraus per Skript nicht auf das Dateisystem des Computers zugegriffen werden kann, so kennen wir doch eine strikt limitierte Ausnahme. Wer lokale Bilddateien zur Bestellung von Papierabzügen oder zur Präsentation in einem Online-Fotoalbum hochlädt, tut dies meist mit einem Webbrowser. Gleiches gilt für das Hochladen eines Email-Anhangs, wenn man das Email mit einem Webmail-Zugang verfasst.

Als Autor hoffe ich, dass Ihnen die Lektüre des vorliegenden Buchs den Gewinn an Wissen und Erkenntnis gebracht hat, den Sie sich zu Beginn der Lektüre erhofft haben. Ich würde mich freuen, wenn Sie den einen oder anderen Ausblick in den Kästen und Fußnoten, insbesondere auf Sicherheitsaspekte und auf grundlegende Themen der Informatik, zum Anlass genommen haben, an anderer Stelle weiterzulesen, um so die bei Ihnen geweckte Neugierde zu befriedigen.