Die vorliegende Lerneinheit bildet den Abschluss des Lehrbriefs überInternettechnologien und behandelt wichtige Aspekte der clientseiti-gen Programmierung. Im Zusammenhang mit dem Web bedeutet diesvor allem Programmierung mit JavaScript und die Verwendung weitverbreiteter, auf JavaScript basierender Bibliotheken und Frameworks,insbesondere jQuery und AngularJS.Die Programmierung mit JavaScript entstand sehr früh mit der mas-siven Verbreitung des Internets Mitte der 1990er Jahre, wurde aberim Verlaufe des darauf folgenden Jahrzehnts insbesondere aufgrund si-cherheitstechnischer Bedenken zunehmend unbeliebter. Erst mit dergezielten Förderung durch Google, sowohl durch Marketing als auchdurch technische Weiterentwicklung, gewann JavaScript wieder an Be-deutung. Zur Trendwende hat daneben auch ganz sicher das Buch vonDouglas Crockford, JavaScript: The Good Parts [1], beigetragen, das ei-ne „saubere“ Programmierung mit der Skriptsprache propagiert. DasBuch hat wesentlich die Entstehung dieser Lerneinheit beeinflusst unddessen Geist geprägt.
Hagen,im Dezember 2016 Andreas de Vries
3
1 JavaScript
1 JavaScript
JavaScript ist eine wichtige Programmiersprache, da es die Sprache derBrowser ist. Nach C, mit dem alle wichtigen Betriebssystemkerne pro-grammiert sind, ist JavaScript damit die wohl am weitesten verbreitetehöhere Programmiersprache der Welt. JavaScript ist, ähnlich wie PHP,eine Skriptsprache, deren Anweisungen der Interpreter direkt in denArbeitsspeicher liest und ausführt. Üblicherweise versteht man unterdem Begriff JavaScript eine clientseitige Sprache, deren Interpreter einModul des Browsers ist.1 JavaScript ermöglicht es, durch Zugriff auf be-stimmte Funktionen des Browsers, also „lokal“ auf dem Rechner desWebclients, eine HTML-Seite dynamisch und interaktiv zu gestalten. Imwesentlichen lassen sich mit JavaScript Formulareingaben lokal (alsonoch vor Abschicken der Daten an den Server) überprüfen, Bilder ani-mieren, Mausereignisse verarbeiten, Pop-Up-Fenster öffnen, oder (ins-besondere im Rahmen von AJAX) asynchrone HTML-Requests für ein-zelne HTML-Elemente durchführen.
JavaScript wurde 1995 von Brendan Eich bei Netscape Communicati-ons entwickelt. Der Name suggeriert eine Verwandtschaft mit der Pro-grammiersprache Java, was aber bis auf gewisse Syntaxähnlichkeitenüberhaupt nicht der Fall ist. Als Reaktion auf den Erfolg von JavaScriptentwickelte Microsoft kurz darauf eine sehr ähnliche Sprache unterdem Namen JScript. Die europäische Industrievereinigung ECMA (Eu-ropean Computer Manufacturers Association) mit Sitz in Genf erarbei-tete 1997 den Standard ECMA-Script (ECMA-262, [JS]). ECMA-262 istseit 1998 internationaler Standard (ISO/IEC 16262). Aktuelles findetman unter [JS] insbesondere zu den verschiedenen Browserimplemen-tierungen auf der Unterseite About_JavaScript.
Insgesamt ist JavaScript eine im Kern sehr schöne und mächtige Pro-grammiersprache, die allerdings auch einige üble Eigenschaften hat.Zudem existieren im Web unzählige unsäglich schlechte Programmbei-spiele von Programmierlaien und – ja, auch Idioten. Glauben Sie nie-mals blind irgendeinem Beispiel aus dem Netz, prüfen Sie stets die Pro-gramme und Ausschnitte auf Nachvollziehbarkeit! Douglas Crockford,einer der Kämpfer für die Nutzung der guten Möglichkeiten von Java-Script [1], hat die Webseite JSLint [JSL] eingerichtet, auf der JavaScript-Quelltext auf seine Qualität geprüft werden kann. In einer umfangrei-chen Optionsliste kann man dabei die Toleranz des Prüfprogramms ein-stellen. Die Quelltexte dieses Skriptes sind mit den Einstellungen in 1.1geprüft (bis auf die Methode document.write).
1 Seit November 2009 existiert die vielbeachtete auf JavaScript basierende eigen-ständige Laufzeitumgebung Node.js, die Netzwerk- und Dateisystemfunktionen besitztund serverseitig laufen kann [9].
4
1.1 Einleitende Beispiele
Abb. 1.1: Optionen der Toleranz von JSLint [JL]
1.1 Einleitende Beispiele
Nach alter Tradition soll unser erstes Programm eine kleine Begrü-ßungsformel ausgeben. Als Vorbemerkung halten wir zunächst fest,dass ein JavaScript-Programm stets in einem HTML-Dokument einge-bettet ist. Anders als bei PHP ist also der Quelltext von JavaScript ineiner Textdatei mit der Endung .html oder .htm.
Listing 1: Hello World mit document.write
1 <!DOCTYPE html>
2 <html>
3 <head><meta charset="UTF-8"/></head>
4 <body>
5 <script>
6 document.write("<h2>Grüße Dich, Welt!</h2>");
7 </script>
8 </body>
9 </html>
Achtet man auf die korrekte Textcodierung des HTML-Dokuments, sokann man problemlos Umlaute oder Sonderzeichen ausgeben.
1.1.1 Das <script>-Tag
Gehen wir das obige Programm kurz durch. Zunächst bemerken wir,dass das Programm ein HTML-Dokument ist: Die ersten vier Zeilen sindStandard-HTML. In der fünften Zeile beginnt mit dem Tag <script> dieDeklaration des JavaScript-Programms. Das HTML-Tag
<script> ... </script>
sagt dem Browser, dass nun JavaScript-Code folgt. Man kann JavaScript-Quellext auch in eine eigene Datei auslagern, was mit Hilfe des Attributs
5
1 JavaScript
src geschieht:
<script src="./quelltext.js"></script>
Das Auslagern von Quelltext ist für kleine Programme zwar etwas auf-wendiger, dafür aber bei größeren Projekten übersichtlicher. Zudemkann so einmal erstellter JavaScript-Code in anderen Webseiten ver-wendet werden.
Wo kann ein <script> erscheinen?
In unserem ersten Programm wurde der Quelltext im body-Tag desHTML deklariert. Muss das immer so sein? Prinzipiell kann JavaScriptdurch ein script-Tag an jeder Stelle des HTML-Dokuments – also imhead-Element oder im body-Element – eingebunden werden, solange dieHTML-Syntax nicht verletzt wird. Insbesondere kann man beliebig vie-le script-Tags verwenden. Der Browser interpretiert sie alle der Reihenach durch.Als Faustregel sollte man jedoch beachten, dass Deklarationen vonFunktionen (s.u.) eher im head vorgenommen werden, das ist eine üb-liche und sinnvolle Konvention. JavaScript-Anweisungen, die vor oderwährend des Aufbaus der HTML-Seite geschehen sollen, müssen sogarim head deklariert werden.Aus Performanzgründen allerdings wird für große Programme oft ge-raten, die <script>-Elemente am Ende des <body>-Elements zu laden,da somit das Laden des JavaScript-Quelltextes und der HTML-Elementesich nicht gegenseitig blockieren können.2 Sicher sollte man diesenHinweis bei Ladezeitproblemen großer Programme auch beachten, je-doch werden in diesem Lehrbrief die <script>-Elemente bevorzugt im<head> erscheinen.
1.1.2 Anweisungen
Jede Anweisung sollte mit einem ; abgeschlossen werden. (Solange jedeAnweisung in einer eigenen Zeile steht, ist dies zwar nicht notwendig,aber es kann zu Mehrdeutigkeiten und somit zu unvorhergesehenen Ef-fekten führen.)
1.1.3 Ausgaben
Ausgabe mit document.write()
Der JavaScript-Befehl document.write übergibt direkt Text an den Brow-ser, den dieser gemäß HTML interpretiert und im Fenster darstellt.Der Browser empfängt zum Beispiel im Programm des Listings 1 ein-fach <h2>Hello World</h2> innerhalb des body-Tags. Eine Ausgabe mit
document.write sollte also stets im body-Tag an der Stelle stehen, woauch der Text erscheinen soll.
Ausgabe in HTML-Elementen mit ID
Eine weitere Möglichkeit zur Ausgabe in JavaScript zeigt das folgen-de Beispiel. Es ist ein wenig komplizierter, verwendet aber bereits ei-ne sehr bedeutsame Möglichkeit von JavaScript, auf einzelne Elementeeines HTML-Dokuments zuzugreifen, wenn sie jeweils dokumentweiteindeutige ID’s erhalten haben. Dazu wird das Attribut id verwendet,das bereits im Zusammenhang mit CSS angesprochen wurde. Mit derFunktion getElementById kann dann aus JavaScript mit dieser ID auf dasElement referenziert werden. Das so erhaltene Element ist ein Objektin JavaScript, das als ein Attribut innerHTML besitzt, das wiederum aufden Textinhalt verweist. (Beachten Sie dabei die Groß- und Kleinschrei-bung!) Betrachten wir dazu das Beispielprogramm 1.2, in dem eine Aus-gabe nach Anklicken eines Buttons geschieht.
Abb. 1.2: Ausgabe per Element-ID
Hier hat das <p>-Element die ID "ausgabe" und wird so mit der Anwei-sung in Zeile 7 mit einem Text beschrieben. Zu beachten ist, dass dieFunktion getElementById zum Zeitpunkt ihrer Ausführung das Elementkennen muss. Da sie in unserem Programm im <head>-Element dekla-riert ist, das <p>-Element in Zeile 13 also noch nicht bekannt ist, wirdhier ein in JavaScript üblicher Mechanismus verwendet, der die Ausfüh-rung erst nach Anklicken des Buttons ausführt; zu diesem Zeitpunktist das <p>-Element also schon bekannt. (Diesen Mechanismus wer-den wir unter dem Stichwort Ereignisbehandlung bzw. Event Handlingnäher kennen lernen.): Mit dem Attribut onclick wird festgelegt, wasbei Anklicken der Schaltfläche passieren soll. Hier wird die Funktionausgeben ausgeführt, die den Inhalt innerHTML des <p>-Elements über-schreibt. Die Deklaration der Funktion ab Zeile 6 mit dem Schlüsselwortfunction ist JavaScript typisch und wird weiter unten erklärt.
7
1 JavaScript
Debugging: Ausgabe auf der JavaScript-Konsole
Bei der Entwicklung von JavaScript-Programmen kann man zum De-buggen seiner Programme auch Text auf der JavaScript-Konsole ausge-ben, und zwar mit dem Befehl
console.log("Hallo Welt!");
Die Konsole ist bei den Browsern Firefox oder Chrome sehr einfach ein-zuschalten.
1.1.4 Eingabe von Daten in JavaScript
Eine Erweiterung des Programmbeispiels 1.2 ist das folgende Pro-gramm mit der Möglichkeit, Daten in ein JavaScript-Programm einzu-lesen. Bei dieser Erweiterung definiert man im <head>-Element eineFunktion einlesen, die beim Klicken des OK-Schaltknopfes aufgerufenwird und den eingegebenen Text verarbeitet. Hierzu müssen also zweiHTML-Elemente mit einer ID versehen werden, so dass sie aus Java-Script angesprochen werden können, ein <input>-Element für die Ein-gabe und ein <span>-Element für die Ausgabe:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8"/>
5 <script>
6 var einlesen = function() {
7 var text = document.getElementById("eingabe").value;
15 <p>Sie haben gerade <span id="ausgabe"></span> eingegeben.</p
>
16 </body>
17 </html>
Um auf den eingegeben Wert des Eingabefeldes eingabe zuzugreifen,muss man sein value-Attribut ansprechen, das auf aktuell den einge-gegeben Inhalt verweist.
8
1.2 Grundsätzliche Syntaxregeln
1.2 Grundsätzliche Syntaxregeln
JavaScript ist schreibungssensitiv (case sensitive), d.h. es wird strikt un-terschieden zwischen Groß- und Kleinschreibung. Das reservierte Wortnull ist etwas völlig anderes als Null.Wie in Java beginnen Kommentare entweder mit einem // und endenmit dem Zeilenende, oder sind eingeschlossen zwischen /* und */.Eine Anweisung wird mit einem Semikolon beendet. Zwar besitzt Java-Script einen Mechanismus, der fehlende Semikolons einfügt, d.h. manmuss sie nicht notwendig selber setzen. Allerdings sollte man sich aufdiesen Mechanismus nicht verlassen, er kann zu logischen Programm-fehlern führen [1, S. 109f, 127f].Anweisungen werden durch Umschließen von geschweiften Klammern{...} zu Blöcken zusammengefasst. Empfohlen wird in JavaScript der1TBS-Stil,3 bei dem die öffnende geschweifte Klammer immer am Endeeiner Zeile steht, nie am Anfang [1, S. 103].
1.3 Dynamisch und implizite Typisierung
Eine Variable in JavaScript kann während ihrer Laufzeit verschiede-ne Datentypen annehmen. Programmiersprachen, die das ermöglichen,heißen dynamisch typisiert. Demgegenüber heißt eine Programmier-sprache statisch typisert, wenn jede Variable einen Datentyp hat, densie lebenslänglich behält. Konsequenterweise ist in JavaScript eine Va-riable stets implizit definiert, d.h. der Datentyp wird bei jeder Zuwei-sung während der Laufzeit automatisch bestimmt. Java ist demgegen-über statisch und explizit typisiert. In JavaScript kann eine Variable diefolgenden 7 möglichen Datentypen annehmen oder eine Funktion oderein Objekt sein.
• string: eine in Anführungszeichen "..." oder Apostrophs’...’eingerahmte Zeichenkette (mit Unicode-Zeichen), z.B. "¡Howdy!"oder ’Allô’; um Unicode zu ermöglichen, sollte das einbetten-de HTML-Dokument die Zeichenkodierung UTF-8 im <meta>-Tagvorsehen werden, wie in den obigen einleitenden Beispielen.
• number: eine Zahl gemäß IEEE754 (double in Java oder C), also 42
oder 3.14159. Spezielle Werte sind Infinity für den Wert Unend-lich (∞) und NaN für „not a number“. Einen expliziten Datentyp fürganze Zahlen (wie int in Java) kennt JavaScript nicht. Eine Zahl inJavaScript hat eine Objektmethode4 toString(radix) mit radix ∈{2, 3, . . . , 36}, die sie bezüglich der Basis radix darstellt, also bei-spielsweise
Eine weitere nützliche Standardmethode einer Zahl in JavaScriptist die Methode toFixed, die als Parameter die Anzahl n der dar-zustellenden Dezimalstellen erwartet, wobei 0 5 n 5 20.5
• boolean: einer der beiden logischen Werte true oder false. Wich-tige Boole’sche Operatoren sind === und !==, hierbei ergibt x ===
y den Wert true genau dann, wenn Datentyp und Wert der beidenOperanden x und y gleich sind, und umgekehrt liefert x !== y denWert true genau dann, wenn Typ oder Wert verschieden sind.6
Um den Unterschied zwischen === und == zu illustrieren, sei aufdie Webseite
verwiesen. Hier erkennt man, dass === die erwartete Gleichheitzeigt (nur die Diagonale ist besetzt). Auch die „falsy“ Werte, alsoWerte == false, sind einigermaßen übersichtlich (0, "0", NULL, lee-re Arrays oder Arrays mit Eintrag 0); Ähnliches gilt für „truthy“,also == true, nur mit 1 statt 0. (Vergleiche die Situation in PHP).
• function: Der Datentyp für eine Funktion.
• object: Der Datentyp für ein Objekt. Für den Operator typeof istauch ein Array vom Typ object [1, S. 18, 66].
• null: ein spezieller Wert für das Null-Objekt;
• undefined: ein spezieller Wert für „undefiniert“.
Der Datentyp eines gegebenen Wertes kann mit dem Operator typeof
ermittelt werden. Vorsicht ist dabei nur geboten, wenn man auf dasNullobjekt prüfen möchte, denn typeof null ergibt object.In JavaScript wird mit dem Schlüsselwort var eine Variable deklariert.
Reference#toFixed6 Die auch in JavaScript vorhandenen Operatoren == und != sind nicht zu empfeh-
len, sie erzwingen bei Typenungleichheit unerwartete Ergebnisse; insbesondere ist ==nicht transitiv [1, S. 117]: ""==0: true, 0=="0": true, ""=="0": false.
Dabei können in einer var-Anweisung auch mehrere durch Kommas ge-trennte Variablen deklariert werden. Auch wenn eine Variablendekla-ration in JavaScript nicht notwendig und prinzipiell immer eine einfa-che Wertzuweisung wie x = 1 für eine neue Variable x möglich ist, wirdsie aus Gründen der Softwarequalität dringend empfohlen [1, S. 125,130], [JSL].
Zwar besitzt JavaScript eine „C-Syntax“ (wie Java), durch die insbeson-dere ein Programm durch geschweifte Klammern in Blöcke {...} un-terteilt wird. Anders als in Java oder C impliziert dies aber nicht auto-matisch, dass ein Block den Geltungsbereich (Scope) aller in ihm dekla-rierten Variablen begrenzt. JavaScript nutzt nicht Blöcke als Geltungs-bereich für Variablen, sondern Funktionen [1, S. 40, 109].
1.4 Prototypen
Im Unterschied zu einer klassenbasierten objektorientierten Sprachewie Java oder C++ gibt es in JavaScript keine Klassen, sondern nur Pro-totypen. Klassenbasierte Objektorientierung unterscheidet zwischenKlassen, die die Struktur seiner Attribute und Methoden festlegen, undden Objekten oder Instanzen, die daraus gebildet werden. Ein Objektkann niemals die Struktur seiner eigenen Klasse ändern.
In einer prototypenbasierten Programmiersprache wie JavaScript gibtes keine Klassen, sondern nur Objekte. Sie sind prototypisch in demSinne, dass ihre Struktur von anderen Objekten übernommen und ver-erbt werden kann und sie ihre eigene Struktur dynamisch erweiternkönnen. Ein Objekt in JavaScript ist eine Menge von Attribut-Wert-Paa-ren, ganz ähnlich wie HashMaps in Java oder assoziative Arrays in PHP.Die Attribute heißen in JavaScript auch Properties. JavaScript eröffnetgrundsätzlich zwei Möglichkeiten, ein Objekt zu erzeugen, eine Dekla-ration in einer pseudoklassische Notation [1, S. 52] einerseits, und alsObjektliteral andererseits. Ist man an eine klassenbasierte Program-miersprache wie Java gewöhnt, ist die pseudoklassische Notation zwareinsichtig, allerdings sind Objektliterale eleganter und werden allge-mein empfohlen [1, §3]. Bei einem Objektliteral werden mit einem Dop-pelpunkt jeweils ein Attribut-Wert-Paar bestimmt und diese verschie-denen Paare durch Kommas getrennt:
Diese Syntax liegt dem wichtigen Format JSON zugrunde, das mittler-weile zu einem De-Facto-Standard der Datenübertragung im Web ge-worden ist.7 In den write-Funktionen erkennt man die verschiedenenAbrufmöglichkeiten der Objekteigenschaften, nämlich mit der Punkt-notation objekt.property (wie in Java oder C++), mit der Array-Nota-tion mit eckigen Klammern, oder über definierte Objektmethoden wietoString. Die toString-Methode braucht dabei (als einzige Methode)nicht explizit genannt zu werden.Die zweite Möglichkeit der Objekterzeugung ist wie in Java mit demSchlüsselwort new; dazu muss ein Konstruktor als Funktion definiertwerden, die mit der Selbstreferenz this die Eigenschaften (properties)des Objekts festlegt, also dessen Attribute und Funktionen (Methoden):
1 var Angestellter = function(name, abteilung) {
2 this.name = name;
3 this.abteilung = abteilung;
4 this.toString = function() {return name + " in " + abteilung
;}
5 }
6 emil = new Angestellter("Emil", "IT"); // Objekterzeugung
Der Konstruktor übernimmt somit in gewisser Hinsicht die Rolle derKlasse in einer klassenbasierten Sprache wie Java.Für Objekte gibt es den Operator in mit der Syntax "xyz" in obj , dertrue zurückgibt, wenn das Objekt obj die Eigenschaft xyz besitzt, an-sonsten false:
1 "details" in emil; // => false
2 "details" in gemüse; // => true
Der in-Operator kann auch für Arrays (s.u.) verwendet werden, im Falleeines numerischen Indizes müssen dabei allerdings die Anführungszei-chen weggelassen werden.
Notiz. JavaScript ermöglicht auch das Konzept der „prototypischenVererbung“, eine Möglichkeit zur dynamischen Veränderung undErweiterung der Property prototype bestehender Objekte. Allerdingsist das Konzept aus meiner Sicht unklar und nur begrenzt brauchbar(es ermöglicht z.B. kein Überschreiben bestehender Properties),daher wird es in diesem Skript, im Gegensatz zu früheren Versionen,
7 Für „lupenreines“ JSON kann es als Wert allerdings keine Funktionen geben.
12
1.5 Mathematische Funktionen und Konstanten
nicht erläutert. Auch die ansonsten ja sehr guten Quellen https:
JavaScript hat dieselbe bedingten Verzweigung wie Java:
if(ausdruck) { code } [else { code2 }]
Hierbei bezeichnet ausdruck einen Boole’schen Wert und code eine An-weisung oder einen Block von Anweisungen, der else-Zweig ist optio-nal (und daher in eckigen Klammern). code wird genau dann ausge-führt, wenn der Ausdruck nicht die Werte true annimmt, ansonstenwird code2 ausgeführt, oder eben nichts, wenn der else-Zweig nichtexistiert.
Fallunterscheidungen mit switch-case
JavaScript verwendet zur Unterscheidung mehrerer alternativer Fälleden Befehl switch. Die Syntax und Funktionsweise ähnelt der switch-Anweisung in Java.
Schleifen gehören als iterative Kontrollstrukturen in die Welt der im-perativen Sprachen, rein funktionale Sprachen ermöglichen die Wie-derholungen ausschließlich über Rekursionsaufrufe. JavaScript ist je-doch nicht rein funktional, es hat die vier Schleifenkonstrukte while,do/while, for und for-in wie in Java. Die Syntax ist bei den ersten drei
14
1.6 Kontrollstrukturen
Schleifenkonstrukten identisch zu der in Java. Bei der for-Schleife istzu beachten, dass die Zählvariable mit var deklariert wird, so wie imfolgenden Beispiel, dass die Euler’sche Zahl iterativ berechnet:
1 var n = 5, y = 0;
2 for (var k = 0; k <= n; k++) {
3 y += 1/factorial(k);
4 document.write("<br/>" + k + ". Iteration für e: " + y);
5 }
Hier bezeichnet factorial die Fakultätsfunktion auf S. 22. Die Ausga-ben lauten dabei sukzessive 2, 2.5, 2.66666. . . , 2.70833. . . , 2.71666. . . .Mit der for-in-Schleife kann man auf die Eigenschaften eines Objektszugreifen, ähnlich wie die foreach-Schleife in PHP. Ihre Syntax lautet:
for(var key in obj) {
... obj[key] ...;
}
Hierbei sind for, var und in Schlüsselworte, während key die durch dieEigenschaften (properties) des Objekts obj laufende Variable bezeich-net. Auf beide Werte von key und obj kann dann in der Schleife zuge-griffen werden. Das Beispielprogramm
1 var gemüse = {
2 name: "Möhre",
3 for: "Max", // funktioniert nicht im IE 8! (aber in IE 9)
Man sieht, dass Werte von Attributen mit einfachem Datentyp angezeigtwerden, Objekte als Attribut jedoch nicht. Bei einer Funktion wird derQueltext angezeigt, d.h. im Programmablauf kann man auf den definie-renden Quelltext von Objektfunktionen lesend zugreifen.
15
1 JavaScript
1.7 Wichtige Standardobjekte
Es gibt einige vorgegebene Objekte in JavaScript, so die drei ObjekteString, Number, Boolean zu den entsprechenden Datentypen, die ObjektMath, Date und RegExp, das Function-Objekt und einige Error-Objekte, so-wie die Datenstrukturen Array und JSON [JS, §15].
1.7.1 Arrays
Die einzige Datenstruktur oder Kollektion in JavaScript ist das Array.Ein Array ist in JavaScript ein Objekt mit dem Konstruktor Array undkann daher mit dem new-Operator erzeugt werden. Empfohlen ist je-doch stattdessen die Erzeugung mit [] (dem Literalausdruck):
1 var a = [];
2 a[0] = 10;
3 a[1] = 20;
4 a[5] = "Unterschied"; // Array mit unterschiedlichen Datentypen
Arrays sind, wie in Skriptsprachen allgemein, dynamisch in ihrer Grö-ße. Daher muss die Größe nicht bei der Erzeugung angegeben werdenwie beispielsweise in Java. Standardmäßig sind Arrays in JavaScript nu-merisch. Der Array-Index wird von 0 an hochgezählt. Die Elemente ei-nes Array müssen nicht vom gleichen Typ sein. Das Attribut length gibtdie Länge des Arrays zurück, die sich bei numerischen Arrays aus demgrößten belegten Indexwert plus Eins ergibt. Ferner muss man das Ar-ray nicht sukzessive auffüllen, sondern kann durchaus nach Index 1 denIndex 3 belegen; der Eintrag mit Index 2 bleibt dann entsprechend un-definiert.Ein Array kann ohne newund den Konstruktor mit einer einzigen Anwei-sung erzeugt werden, indem die Einträge in eckigen Klammern einge-schlossen und durch Kommas getrennt dem Arraynamen zugewiesenwerden:
Damit ist das Array automatisch indiziert. (Eine Einzelbelegung der Ar-rayplätze ohne einen Index mit leeren eckigen Klammern, wie in PHP,funktioniert in JavaScript jedoch nicht.)
Assoziative Arrays.
In JavaScript sind auch assoziative Arrays möglich. Als Schlüssel (keys)können dabei Strings verwendet werden, aber auch beliebige Objektewie ein Array.
16
1.7 Wichtige Standardobjekte
1 var tel = new Array();
2 tel["Meier"] = "9330-723"; // Arrays können assoziativ sein
Allerdings kann man bei einem assoziativen Array nicht mehr das Attri-but length verwenden, es hat stets den Wert 0. Im Grunde sind Objektein JavaScript nichts anderes als assoziative Arrays, bis auf die Tatsache,dass für ein Objekt im allgemeinen das Attribut length undefiniert ist,während es für ein assoziatives den Wert 0 hat.Eine wichtige Funktion eines Arrays ist forEach,8 die als Argument ei-ne Funktion callback erhält, die sie auf jedes Array-Element anwendet.callback muss dabei drei Argumente (value, index, array) vorsehen,wobei value der beim Durchlaufen aktuell bearbeitete Elementwert ist,index der entsprechende Array-Index, und array das aktuelle Array.
1 var callback = function(value, index, array) {
2 document.write("a[" + index + "] = " + value + ", ");
Falls der dritte Parameter array nicht benötigt wird (wie in diesem Bei-spiel), kann er auch einfach weggelassen werden.
1.7.2 JSON
Die Abkürzung JSON steht für JavaScript Object Notation und bezeich-net zunächst ein weitverbreitetes Format zum Datenaustausch, alsoinsbesondere eine allgemeine Syntax zur Serialisierung (Speicherung)und Übermittlung von Werten oder Objekten der sieben Datentypenauf S. 9, bis auf die Funktionen und undefined. Dabei ist zu beachten,dass in JSON nur Objekte erlaubt sind, deren Attribute Strings sind;es muss also heißen "name"="Müller" statt name="Müller". In JavaScriptist JSON ein spezielles globales Objekt, das die beiden entgegengesetztwirkenden („komplementären“) Methoden parse und stringify bereit-stellt. Mit dem Befehl JSON.parse("...")wird der JSON-String in ein Ob-jekt oder einen Wert in JavaScript umgewandelt. Ist der String nicht imJSON-Format, so wird das Programm mit einem Syntaxfehler beendet.
Man erkennt an dem Quelltextbeispiel, dass stringify alle Attribute inStrings verwandelt und Funktionen (wie hier die toString-Methode)einfach ignoriert. Weitere Details, insbesondere zur Syntax von JSON,findet man im MDN.9
1.7.3 Ereignisbehandlung (Events und Event-Handler)
JavaScript ermöglicht die Ausführung von Anweisungen, die durch Ein-gabeereignisse, sogenannte Events, ausgelöst werden und in speziel-len Methoden, den zuständigen Event-Handlern, implementiert sind.Events und Event-Handler stellen auf diese Weise ein wesentlichesBindeglied zwischen dem HTML-Dokument und JavaScript-Funktionendar. Grundsätzlich funkioniert die Ereignisbehandlung dabei wie folgt.Jede Anwenderaktion, also eine Mausbewegung, ein Mausklick, ein Tas-tendruck, löst ein Ereignis oder Event aus. Ist für das Element, in demdas Ereignis erzeugt wird, also beispielsweise eine Schaltfläche oderein Textfeld, ein Ereignisbehandler registriert, so ruft dieser diejenige,
Das Grundkonzept der Ereignisbehandlung in JavaScript ist klar undeinfach: Für ein HTML-Element kann ein Event-Handler als ein Attri-but festgelegt werden, das auf die JavaScript-Funktion oder die Anwei-sungfolge verweist, die bei Auslösen des entsprechenden Ereignissesauszuführen ist. Die Attribute der Ereignisbehandler sind daran zu er-kennen, dass sie mit on... beginnen. Beispielsweise ist der Ereignisbe-handler für einen Mausklick onclick oder für das Loslassen einer Tasteonkeyup. Im allgemeinen kann nicht jeder Ereignisbehandler in jedemHTML-Element registriert werden, eine Auflistung der Ereignisbehand-ler und der HTML-Elemente, für die sie definiert sind, findet man aufselfhtml.org10, eine umfangreiche Liste von Ereignissen in der MozillaEvent Reference11. Das folgende Beispielprogramm zeigt einige Ereig-nisbehandler für Maus- und Touchscreen-Ereignisse:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8"/>
5 <script>
6 var machma = function(event) {
7 alert(event + " ausgelöst!");
8 };
9 </script>
10 </head>
11 <body>
12 <p onclick="machma(’Klick’);">
13 Wer hier klickt, kann was erleben!
14 </p>
15 <p ondblclick="machma(’Doppelklick’);">
16 Wer hier doppelklickt, auch!
17 </p>
18 <p onwheel="machma(’Mausrad’);">
19 Hier müssen Sie das Mausrad drehen!
20 </p>
21 <p ontouchmove="machma(’Touchmove’);">
22 Hier müssen Sie wischen!
23 </p>
24 </body>
25 </html>
Das Programm ist für Ihr Endgerät abrufbar über http:
Das Objekt Date regelt in JavaScript alle Berechnungen mit Datum undZeit. Grundlage ist die Unix-Zeit in Millisekunden mit dem Nullpunkt1.1.1970, 0:00 Uhr UTC (Universal Coordinated Time). Es gibt mehrereKonstruktoren für ein Date-Objekt
1 var today = new Date(); // liefert das aktuelle Datum und
Uhrzeit
2 var birthday = new Date("December 17, 1985 03:24:00");
3 var geburtstag = new Date(1985,11,17);
4 var anniversaire = new Date(1985,11,17,3,24,0);
Daneben gibt es noch einen Konstruktor, der als Argument die Unixzeitin Millisekunden erwartet. Zwar gibt es eine Reihe von Methoden fürdas Objekt, insbesondere zur Ausgabe von Datum und Uhrzeit, jedochsind die Ausgabeformate nur wenig spezifiziert und daher in ihrer Dar-stellung browserabhängig.12 Mit den folgenden Methoden kommt manin der Regel jedoch hin:
1 var tag = ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag
","Freitag","Samstag"];
2 var jetzt = new Date();
3 document.write("Heute ist " + tag[jetzt.getDay()] + ", der ");
Eine Liste der möglichen Methoden für ein Date-Objekt findet man bei-spielsweise auf selfhtml.de.13
1.8 Funktionen und Callbacks
JavaScript ermöglicht funktionale Programmierung. In einer funktiona-len Programmiersprache können Funktionen definiert werden und esgibt keinen Unterschied zwischen Daten und Funktionen, Funktionenkönnen also auch in Variablen gespeichert und als Parameter überge-ben werden [8, S. 6]. Die funktionale Programmierung steht damit imGegensatz zur imperativen Programmierung, denn die Trennung vonDaten und Programmlogik wird aufgehoben und jede Variable kann nureinmal einen Wert bekommen (final in Java). Rein funktionale Spra-
12 Eine der Methoden, getYear(), ist sogar deutlich schlecht programmiert, sie gibtdie Differenz der Jahreszahl mit 1900 zurück!
chen haben sogar gar keine Variablen oder Schleifen, denn ein Algorith-mus wird hier durch eine Abfolge von Funktionsaufrufen ausgeführt;für Wiederholungen werden also keine Schleifen verwandt, sondernausschließlich Rekursionen. So werden mathematisch unsinnige Aus-drücke der imperativen Programmierung wie x=x+1 vermieden. Ande-rerseits widerspricht die funktionale Programmierung dem objektori-entierten Paradigma, gemäß dem Objekte im Laufe ihres Lebenszyklusverschiedene Zustände annehmen können, die Attribute also Veränder-liche sein müssen. JavaScript ist ein Kompromiss aus beiden Ansätzen,indem es beide Programmierparadigmen ermöglicht.
Funktionen gehören zu einem der elementaren Datentypen von Java-Script und bilden die modularen Einheiten der Sprache [1, S. 29]. Ei-ne Funktion wird definiert durch das Schlüsselwort function, ihren Na-men, eine von runden Klammern eingeschlossene Liste von durch Kom-mas getrennten Parametern, und den durch geschweifte Klammernumschlossenenen Funktionsrumpf, der die Anweisungen der Funktionenthält. Der Rückgabewert der Funktion wird mit dem Schlüsselwortreturn ausgegeben:
1 function f(x,y) {
2 return x*x - y*y;
3 }
4 document.write("f(5,3) = " + f(5,3)); // => 16
Als funktionale Programmiersprache ermöglicht JavaScript die Defini-tion anonymer Funktionen, auch „Lambda-Ausdrücke“ genannt:
Damit kann eine Funktion in einer Variablen gespeichert werden;oder genauer gesagt als Referenz auf eine anonyme Funktion. Sol-che Funktionsreferenzen werden Rückruffunktionen oder Callbacks ge-nannt, wenn sie in andere Funktionen als Argument eingesetzt und vondiesen aufgerufen werden.Rückruffunktionen sind ein wichtiges Programmierkonzept der funk-tionalen Programmierung. Die Programmierung mit Rückruffunktio-nen folgt dem Entwurfsmuster der Kontrollflussumkehr (Inversion ofControl, IoC), denn in ein bereits vorher definiertes Programmmodul(die aufrufende Funktion) bzw. eine gegebene Infrastruktur (z.B. dieAPI) kann „nachträglich“ auszuführender Quelltext definiert werden.Viele JavaScript-Bibliotheken und Frameworks basieren auf diesemPrinzip. Als ein einfaches Beispiel einer Rückruffunktion soll das fol-gende kurze Programm dienen:
var callback = function(x) {return x*x;};
var quadrate = [1, 2 , 3, 4, 5].map(callback);
document.write(quadrate); // => 1,4,9,16,25
21
1 JavaScript
Hier wird die Funktion callback(x) = x2 von der API-Funktion map ei-nes Arrays aufgerufen und ausgeführt. Ihr „Rückruf“ ergibt am Ende
Abb. 1.3: Aufrufstruktur einer Rückruffunktion. (Modifiziert nach https:
ein Array, das in jedem Eintrag den Quadratwert des originalen Arraysenthält. Die Aufrufstruktur ist in Abbildung 1.3 skizziert.Es gibt zwei Arten von Rückruffunktionen. Eine Rückruffunktion heißtblockierend, oder auch synchron, wenn sie mit ihrer Referenz aufgeru-fen wird und ihr Ausführungsergebnis abgewartet wird, um weiterver-arbeitet zu werden. Das obige Programmierbeispiel ist eine solche syn-chrone Rückruffunktion.Bei einer verzögerten (deferred) oder asynchronen Rückruffunktionwird die Rückruffunktion in einem anderen Prozess oder Thread aus-geführt, das Hauptprogramm wartet aber nicht auf das Ergebnis derRückruffunktion. Stattdessen wird das Ergebnis der Rückruffunktion„möglichst schnell“ verarbeitet, wenn es eingetroffen ist. Typische An-wendungsfälle solcher verzögerten Rückruffunktionen sind Ereignis-behandler, die nach einem gefeuerten Ereignis die Rückruffunktionausführen, oder Aufrufe serverseitiger Skripte im Web.In der nebenläufigen Programmierung spricht man bei asynchronenRückruffunktionen auch oft von Promises.14
Rekursionen.
In rein funktionalen Sprachen können Wiederholungen nicht durchSchleifen, sondern nur durch Rekursionen durchgeführt werden, alsodurch Selbstaufrufe von Funktionen. Als ein einfaches Beispiel sei dieBerechnung der Fakultät angegeben:
In JavaScript wird häufig eine Rekursion mit einer definierten Verzöge-rung aufgerufen. Dazu muss die Funktion setTimeout verwendet wer-den,16 deren erstes Argument die aufzurufende Funktion und derenzweites die Verzögerungszeit in Millisekunden ist:
1 var rekurs = function(n) {
2 if (n <= 0) return;
3 setTimeout("rekurs("+(n-1)+")",1000);
4 console.log("Aufruf rekurs("+n+")");
5 }
6 rekurs(5);
Um eine Funktion mit Argumenten aufzurufen, muss sie als String mitdem gewünschten Argumentwert aufbereitet werden.17 Man erkenntbeim Ausführen des Skripts insbesondere in der Konsole des Firefox, inder die Uhrzeiten der Ausgaben protokolliert werden, dass setTimeout
zwar den Aufruf der angegebenen Funktion verzögert, den weiterenAblauf der aufrufenden Funktion jedoch nicht aufhält: Die Ausgabe er-scheint stets direkt nach Aufruf der Funktion, aber eine Sekunde vordem Rekursionsaufruf der nächsten Funktion.
Funktionen höherer Ordnung.
Eine Funktion höherer Ordnung ist eine Funktion, die als Argument eineFunktion erwartet oder deren Ergebnis eine Funktion ist. Beispielswei-se kann die Kepler’sche Fassregel (oder auch Simpson-Regel)
If (a, b) ≈ b – a6
(f (a) + 4f
(a+b
2
)+ f (b)
)(1.1)
als Näherungsformel für das Integral If (a, b) =∫ b
a f (x) dx einer inte-grierbaren Funktion f : [a, b] → R mit a, b ∈ R in JavaScript wie folgtimplementiert werden:
1 var I = function (f, a, b) {
2 return (b-a)/6 * (f(a) + 4*f((a+b)/2) + f(b));
3 }
4
5 var f = function(x,y) {return 3*x*x;}
6 var g = function(x,y) {return 1/x;}
7 var h = function(x,y) {return Math.sqrt(1 - x*x);}
(1.3)(Für die Herleitung dieser Gleichung mit Integration durch Substitutionsiehe z.B. [3, §19.15]; der Graph der Funktion
√1 – x2 beschreibt in dem
Intervall [0, 1] einen Viertelkreis mit Radius 1.)
Closures.
Im Gegensatz zu vielen Programmiersprachen wie Java können in Java-Script Funktionen auch innerhalb von Funktionen definiert werden. Ei-ne solche innere Funktion hat wie jede Funktion Zugriff auf ihre eigenenVariablen, aber auch auf die Variablen der Funktion, in der sie definiertist. Eine innere Funktion heißt Closure.18 Mit Closures kann man Funk-tionenscharen oder „Funktionenfabriken“ programmieren, also Funk-tionen, die parameterabhängig Funktionen zurückgeben:
1 var fabrik = function(name) {
2 return function(instrument) {
3 return name + " spielt " + instrument;
4 }
5 };
6 var a = fabrik("Anna");
7 var b = fabrik("Bert");
8
9 document.write(a("Geige") + ", " + b("Bass")); // Anna spielt
Geige, Bert spielt Bass
Die äußere Funktion definiert hier eine Variable name, auf die die inne-re anonyme Funktion auch Zugriff hat. Bei jedem Aufruf der äußerenFunktion wird der jeweilige Wert der Variablen in der inneren Funkti-on „eingefroren“ und mit ihr zurückgegeben. Daher gibt die Funktionanna() einen anderen Wert zurück als die Funktion bert().Wofür braucht man Closures? Ein wichtiger Anwendungsfall für Clos-ures ist das Verbergen von Hilfs- oder Arbeitsfunktionen, die nach au-ßen vor dem Anwender gekapselt werden sollen. (In Java bis Version7 war das nur mit private Objektmethoden möglich.) Als Beispiel seidie folgende effiziente Berechnung der Fibonacci-Zahlen f0 = 0, f1 = 1,
f2 = 1, f3 = 2, . . . , fn = fn–1 + fn–2 durch eine Rekursion innerhalb deraufzurufenden Funktion angegeben:
1 var f = function (n) {
2 var c = function (f1, f2, i) { // innere
"Arbeitsfunktion" (Closure)
3 if (i == n) return f2;
4 return c(f2, f1+f2, i+1);
5 }
6 if (n.toFixed(0) != n) return NaN; // nur für ganze Zahlen
definiert!
7 if (n <= 0) return 0;
8 return c(0,1,1);
9 }
Ruft man nun die Funktion f mit einer natürlichen Zahl n auf, so wirddie innere Arbeitsfunktion c in Zeile 8 mit den Startwerten f0 = 0 unff1 = 1 und dem Zähler i = 0 aufgerufen, die sich wiederum in Zeile 6selbst aufruft, falls keine der Abbruchkriterien erfüllt ist. Bei jedem Auf-ruf enthält der zweite Parameter von c die Summe der letzten beidenFibonacci-Zahlen, dieZudem finden Closures Einsatz bei dem Funktionalkalkül, also der Al-gebra mit Funktionen. Man kann beispielsweise die Summe f +g zweierFunktionen f , g : R→ R definieren, indem man (f + g)(x) = f (x) + g(x)definiert. In JavaScript könnte der Additionsoperator für zwei Funktio-nen beispielsweise so aussehen:
Ein von JavaScript-Entwicklern oft verwendetes Programmiermusterist ein „sofort aufgerufener Funktionsausdruck“ (immediately invokedfunction expression, IIFE) meist mit Closures. Hierbei wird eine anony-me Funktion deklariert und sofort aufgerufen [11]:
Listing 2: Ein einfaches IIFE
1 (function() {
2 var tuwas = function() {
3 document.write("a="+ a);
4 }
25
1 JavaScript
5
6 var a = 1;
7 tuwas();
8 })(); // => ä=1"
Dieser Ausdruck tut zunächst nichts Besonderes, die Funktion tuwas
wird ausgeführt und verarbeitet die Variable a. Funktionsdeklarationund Anweisungen sind in eine anonyme Funktion (Zeile 1) gekapselt,die sofort ausgeführt wird (letzte Zeile), also schematisch dargestellt:
(function() {...}) ();
Die Funktion tuwas ist hier also eine Closure, die auf die Variable a zu-greifen kann, auch wenn die äußere anonyme Funktion bereits abge-laufen ist. Das Programm würde aber dasselbe ausgeben, wenn man dieerste und letzte Zeile einfach wegließe. Nur wären dann tuwas und dieVariable a global definiert, und genau das ist das Problem: Globale Va-riablen sollten in JavaScript in komplexen Systemen möglichst vermie-den werden. Durch IIFEs lässt sich deren Anzahl deutlich reduzieren.Denn in Listing 2 beispielsweise sind die Variable a und die Funktiontuwas außerhalb der anonymen Funktion unbekannt.
1.9 DOM
Das DOM (Document Object Model), ist eine Schnittstellenbeschreibungfür API’s, die Parser oder Browser zur Darstellung von HTML- oderXML-Dokumenten verwenden können. Für JavaScript (aber auch für je-de andere Programmiersprache) ist im DOM festgelegt, welche HTML-Elemente als Objekte in zur Verfügung stehen und wie man dynamischneue Elemente hinzufügen oder löschen kann, aber auch, welche Event-Handler für eine clientseitige Interaktion implementiert werden kön-nen. Obwohl das Grundkonzept des DOM als eine Baumstruktur vonKnoten einfach ist, sind die Bezeichnungen und Dokumentationen zu-nächst etwas verwirrend. Neben der Standardreferenz sei daher dieDOM-API von Gecko, dem HTML-Interpreter („Rendering Machine“)der Mozilla-Programme,
empfohlen. Bevor wir das DOM in seinen für uns wesentlichen Detailsuntersuchen sei noch seine Historie erwähnt. Das DOM erschien suk-zessive in mehreren Versionen, bis zur Version 3 Level genannt. Level 1wurde im Oktober 1998 veröffentlicht, Level 2 im November 2000 undLevel 3 im April 2004 .Das DOM trägt seinen Namen „Objektmodell“ vor allem, da es HTML-oder XML-Elemente als Objekte darstellt und in gegenseitige Beziehun-gen setzt, nämlich in eine Baumhierarchie wie in Abbildung 1.4 skiz-ziert. In jedem Browser ist eine Objekthierarchie mit dem Wurzelob-jekt window vorhanden (Abbildung 1.4). Eines seiner Kindelemente ist
Abb. 1.4: Objekt-Hierarchie des Browsers mit wichtigen Objekten, insbesondere dasdocument-Objekt.
document und bestimmt den im Browserfenster sichtbaren Inhalt. DasObjekt navigator liefert Informationen über den aktuellen verwende-ten Browser, und history über die im aktuellen Tab oder Frame bisheraufgerufenen Webseiten.19
1.9.1 Grundlegende Objekte des DOM: document und element
Das zentrale Interface des DOM ist Node,20 das einen allgemeinenKnoten des DOM-Baumes beschreibt. Ein Node im DOM hat u.a.stets einen parentNode und eine Liste von childNodes als Attribu-te und Methoden zum Hinzufügen oder Löschen von Kindknoten(appendChild, removeChild). Die wichtigsten Implementierungen vonNode sind document und element. Ein element21 ist ein allgemeines Ele-ment eines HTML- oder XML-Dokuments.
Das document-Objekt22 repräsentiert den Inhalt des darzustellendenDokuments, also den Inhalt des Browser-Fensters. Mit der Methodewrite()des document-Objekts können wir mit JavaScript in das Browser-Fenster schreiben. Eine weitere wichtige Methode des document-Objektes ist getElementById("ID"), die ein Element des Dokuments alsErgebnis liefert, dessen Attribut "id" als Wert den übergebenen Stringhat. Beide Methoden haben wir bereits als einführende Beispiele fürJavaScript-Ausgaben im Abschnitt 1.1 kennen gelernt.
CSS-Anweisungen mit der Eigenschaft style
Ein element-Objekt hat unter anderem die Eigenschaft style, mitder CSS-Deklarationen über JavaScript angewiesen werden können.21
Hierbei kann zu jedem HTML-Element dessen style-Attribut per Ja-vaScript verändert werden, indem das zu jeweilige CSS-Attribut miteinem neuen Wert belegt wird. Dabei ist zu beachten, dass ein CSS-Attribut mit einem Bindestrich in JavaScript mit der Binnenmajuskel-Notation (CamelCase) übernommen wird, da dort der Bindestrich alsMinuszeichen eine arithmetische Rechenoperation darstellen würde.In dem folgenden Beispielprogramm wird die Hintergrundfarbe des
16 <span id="text">Die Zeichen an der Wand.</span>
17 </body>
18 </html>
Die entscheidende Anweisung dazu ist in Zeile 8, wo das CSS-Attributbackground-color in Binnenmajuskelnotation in JavaScript als AttributbackgroundColor des Elementattributs style festlegt.
Das folgende auf Crockford [1, S. 42] zurückgehende Programm bei-spielsweise verändert mit einer Closure langsam die Hintergrundfar-be des Browserfensters (das Element document.body) von gelb (#ffff00)auf weiß (#ffffff):
1 var fade = function(element, delay) {
2 var level = 0;
3 var step = function() {
4 var hex = level.toString(16); // level in hexadezimal
8 setTimeout(step, delay); // Rekursion nach delay [ms]
9 }
10 };
11 step(); // erster Aufruf von step
12 };
13
14 fade(document.body, 100);
Hier rufen wir in Zeile 14 die Funktion fade auf und übergeben ihr das
28
1.9 DOM
DOM-Objekt document.body, also den Knoten des HTML-Dokuments, derdurch das Tag <body> erzeugt wurde, und die Verzögerungszeit delay inMillisekunden. Die Methode fade setzt zunächst die Variable level auf0 und definiert als Closure eine rekursive Funktion step, in der level
bei jedem hochgezählt wird und der Rekursionsaufruf mit Hilfe vonsetTimeout um delay verzögert wird. In Zeile 11 wird dann step erst-mals aufgerufen und die Rekursion gestartet. Bei jedem weiteren Aufrufvon step wird der Wert der Variablen level erhöht und als neuer Wertin step verwendet. Die Variablen element, delay und level sind hier ausSicht der Closure also eine „globale“ Variable. Eleganter wäre sicherlicheine Rekursion, die ohne solche grlobalen Variablen auskommt, z.B. in-dem sie sie als Parameter übergibt:
var step = function(element, delay, level) {
...
if (level < 15) {
step(element, delay, level + 1);
}
};
Leider ermöglicht setTimeout jedoch nur den verzögerten Aufruf vonFunktionen ohne Parametern.
Hinzufügen und Löschen von Elementen
In dem folgenden Beispielprogramm wird mit Hilfe der Standardme-thoden des DOM createElement in Zeile 9 und appendChild in Zeile 10durch JavaScript dynamisch ein <li>-Element an das <ol>-Element mitder id angehängt.
Listing 3: DOM-Manipulation
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8"/>
5 <title>DOM-Elemente</title>
6 <script>
7 var hinzufuegen = function() {
8 var wurzel = document.getElementById(’liste’);
9 var neu = document.createElement(’li’);
10 var neuerText = document.createTextNode("Die Zeichen an
der Wand.");
11 neu.appendChild(neuerText);
12 wurzel.appendChild(neu);
13 }
14 var loeschen = function() {
15 var element = document.getElementById(’liste’);
Entsprechend wird in Zeile 18 das letzte Kindelement des <ol>-Elements mit der id mit der Methode removeChild gelöscht. Damites nicht zu einem Laufzeitfehler kommt, wenn kein Kindelement des<ol>-Elements mehr vorhanden ist, wird das Löschen nur durchge-führt, wenn die Prüfung auf Existenz von Kindknoten mit der Metho-de hasChildNodes in Zeile 17 positiv ausgeht. Der DOM-Baum des Doku-
Abb. 1.5: Der DOM-Baum des HTML-Dokuments aus Listing 3.
ments ist in Abbildung 1.5 skizziert. Die gestrichelt gezeichneten Kno-ten werden durch das JavaScript-Programm je nach Eingabe hinzuge-fügt oder gelöscht.
1.9.2 Das window-Objekt
Das Browser-Fenster, in dem die HTML-Seite, die den JavaScript-Codeenthält, dargestellt wird, wird durch ein window-Objekt repräsentiert.Das window-Objekt verfügt über Methoden wie prompt() alert() oderconfirm(), mit denen eigene Fenster zur Ein- und Ausgabe geöffnet wer-den können.
30
1.9 DOM
Darüberhinaus hat das window-Objekt Attribute, die sich von JavaScriptaus steuern lassen. Dazu gehört die Statuszeile (Attribut status), derURL, der gerade dargestellt wird (location) oder die URL’s der Seiten,die bis jetzt dargestellt wurden (history).Tatsächlich sind sind sogar alle anderen JavaScript-HTML-Objekte ent-weder selbst Attribute des window-Objekts oder Attribute von Attribu-ten des window-Objekts; so auch das document-Objekt, welches wir be-reits öfter zum Schreiben in das Browser-Fenster benutzt haben. Daswindow-Objekt ist also die Wurzel der Objekthierarchie in JavaScript.Das window-Objekt verfügt über drei Methoden, mit denen Benutzerin-teraktion möglich ist. Die erste (prompt()) haben wir bereits kennen-gelernt. prompt() öffnet ein eigenes Fenster oberhalb des Browser-Fensters. Das Fenster enthält zwei Bereiche: im ersten wird eine Mel-dung dargestellt (erster Parameter von prompt()), im zweiten kann derBenutzer Eingaben tätigen (der zweite Parameter von prompt() ist eineVorgabe im Eingabefeld).confirm() erwartet vom Benutzer eine Bestätigung. Der einzige Pa-rameter von confirm() ist eine Meldung, die im von confirm() aufge-spannten Fenster dargestellt wird. Der Benutzer kann mit einem OK-Button bestätigen (confirm() liefert dann true zurück) oder mit einemAbbruch-Button abbrechen (confirm() liefert false zurück). Betrachtenwir dazu folgendes Programm:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8"/>
5 <script>
6 var factorial = function (n) {
7 if (n < 0) return NaN;
8 if (n === 0) return 1;
9 return n * factorial(n-1);
10 }
11
12 var einlesen = function () {
13 var n = document.getElementById("eingabe").value;
14 var wirklich = true;
15 if (n > 150) {
16 wirklich = confirm("Wirklich "+n+"! berechnen? Das kann
lange dauern . . .");
17 }
18 if (wirklich) {
19 document.getElementById("label").innerHTML = n + "! = " +
Hier muss der Anwender die Frage bestätigen, ob die Zahl, deren Fakul-tät berechnet werden soll, größer als 150 sein darf. In diesem Fall wirdein confirm-Fenster aufgebaut. Wählt der Benutzer „OK“, gibt confirm
einfach true zurück. Der Boole’schen Variablen wirklichwird damit derWert true zugewiesen und die Fakultäten werden berechnet. Klickt derBenutzer hingegen Abbrechen, wird von confirm false zurückgegeben,wirklichwird damit false zugewiesen, und die Berechnung findet nichtstatt.
1.10 XMLHttpRequest und AJAX
Ein weiteres wichtiges Objekt in JavaScript ist XMLHttpRequest. Es er-möglicht, über einen aus JavaScript ausgelösten Request, also eineNetzanfrage, Daten von einem beliebigen URL zu laden. Es spielt ei-ne Schlüsselrolle bei AJAX-Anwendungen. Anders als der Name sug-geriert, kann XMLHttpRequest nicht nur XML-Daten laden, sondern be-liebige Formate, also auch Binärdateien wie Bilder und Streams. Eben-so kann es nicht ausschließlich HTTP-Requests auslösen, sondern auchandere Anfragen über andere Protokolle wie FTP oder FILE.Als Objekt besitzt es als wichtigste Attribute readystate, response undstatus, als wichtigste Methoden openund send sowie den Event-Handleronreadystatechange:23
Um einen HTTP-Request auszulösen, muss zunächst einXMLHttpRequest-Objekt mit new instanziiert werden:
var request = new XMLHttpRequest();
Mit der Methode open wird ein Request initialisiert. Sie benötigt dafürmindestens zwei Parameter vom Typ String, sowie drei optionale Para-meter:
Hierbei bezeichnet method die HTTP(S)-Methode, die einen der Wer-te "GET", "POST", "PUT" oder "DELETE" annehmen kann und url der an-gefragte URL, also der Pfad zur angefragten Datei. Der optionale Boo-le’sche Parameter async bestimmt, ob die Anfrage asynchron ablaufenoder das Programm die Antwort abwarten soll; er ist im Default auf truegesetzt. Die beiden optionalen Parameter user und password schließ-lich ermöglichen eine etwaig notwendige Authentifizierung für Zugangzu dem URL. Mit der Methode send wird die Anfrage abgeschickt. Dazumuss sie vorher mit open initialisiert sein. Ist sie asynchron initialisiert,so läuft das Programm weiter, andernfalls wird das Ende der Metho-de abgewartet. Die Methode kann optional mit zu übertragenden Da-ten als Parameter aufgerufen werden, z.B. Formulardaten. Die Funktiononreadystatechange ist ein Event Handler, der auf Änderungen des Attri-buts readyState reagiert, das wiederum einen der 5 möglichen Werte 0,1, 2, 3, 4 annehmen kann:
readyState Zustand Bedeutung0 UNSENT open ist noch nicht aufgerufen1 OPENED send ist noch nicht aufgerufen2 HEADERS_RECEIVED send ist aufgerufen und Headers und Status des
Requests sind verfügbar3 LOADING Daten werden empfangen4 DONE Die Anfrage ist erledigt
Die beiden ersten Zustände dienen der Vorbereitung der Kommunika-tion, der Request wird erst durch die send()-Methode ausgelöst. Die-se Kommunikation läuft übrigens asnchron ab, d.h. die send()-Methodeblockiert oder beeinflusst nicht andere JavaScriptprogramme der Seite.Diese Möglichkeit, asynchrone Anfragen an den Server zu stellen, ohnedass die dargestellte Webseite blockiert wird oder gar neu geladen wer-den muss, bildet die technische Grundlage für AJAX-Anwendungen, diewir in Abschnitt 1.10.2 behandeln werden.Der Event Handler ist zunächst nur eine „leere“ Funktion und mussimplementiert werden, so wie wir es ja auch von den Event-Handlerndes DOM bereits kennen. Üblicherweise wird hier die Antwort derAnfrage verarbeitet, die wiederum in dem Attribut response gespei-chert ist. Im Überblick ergibt sich damit das Zustandsdiagramm ei-nes XMLHttpRequest-Objekts nach Abbildung 1.6. Die Details sind imtechnischen Report unter http://w3.org/TR/XMLHttpRequest des W3-Konsortiums festgelegt.Beginnen wir mit einem einfachen Beispiel, das die vier Schritte Erzeu-gung eines Requests, Implementierung des Event Handlers, Öffnen undSenden eines Requests zeigt:
3 if (request.readyState === 4) { // Request ist erledigt
4 document.write(request.response);
5 }
6 }
7 request.open("GET", "http://localhost/");
8 request.send();
Die Reihenfolge der Anweisungen bei der Ausführung des Programmsentspricht dabei nicht ganz der Reihenfolge ihrer Implementierung:Der Event-Handler onreadystatechange wird für das Request-Objektzwar zu Beginn des Objektes implementiert, aber erst nach Beendender Anfrage verarbeitet, also nach dem send. Er sollte aber natürlich be-reits implementiert sein, wenn der Request gesendet wird.Zu beachten ist, dass bei den Standardeinstellungen des Webserverseine Anfrage in JavaScript nur für denselben Server möglich ist, aufdem sich auch das JavaScript-Programm befindet. Möchte man überXMLHttpRequest einen anderen Server aufrufen, so müssen die Einstel-lungen dieses Servers entsprechend angepasst sein. Man spricht in die-sem Falle von Cross Origin Resource Sharing (CORS).24 Damit JavaScripteinen XMLHttpRequest weiter verarbeitet, muss der Server nämlich dieAntwort mit dem HTTP-Header
Access-Control-Allow-Origin: *
senden. Möglich ist auch die Variante Access-Control-Allow-Origin:
http://foo.bar, wobei foo.bar die Domain ist, von der die Anfrage, alsodas JavaScript-Programm, kommt. Ein PHP-Skript kann diesen Headerindividuell senden, wenn es mit der Zeile
Mit dem Standardobjekt FormData kann man dynamisch erstellte For-mulardaten versenden.25 Ein einfaches Beispiel übermittelt die Formu-lardaten x=2 an ein PHP-Skript:
1.10.1 Aktionen nach dem Request: onreadystatechange
Bislang haben wir nur Beispiele von XMLHttpRequest-Objekten ken-nengelernt, deren Event-Handler onreadystatechange einfach nur dieempfangene Antwort des Servers, d.h. den String request.response,ausgibt. Häufig werden allerdings komplexere Daten übermittelt, diein dem Event-Handler weiter verarbeitet werden sollten. Grundsätz-lich können diese Daten als beliebiger Text vorliegen, üblich sind aberStrings in den drei folgenden Formaten HTML, JSON und XML. Die Ver-arbeitung
• HTML-Strings werden dabei in der Regel nicht weiterverar-beitet und unverändert dargestellt, also so wie in den obigenXMLHttpRequest-Beispielen mit request.response.
• Ein JSON-String kann mit der Standardmethode JSON.parse() di-rekt in ein JSON-Objekt umgewandelt werden, also beispielswei-se
var objekt = JSON.parse(request.respnse);
Dieses Objekt kann nun in JavaScript beliebig weiterverarbeitetwerden.
• Ein XML-String kann manuell geparst werden. Ist die Serverant-wort beispielsweise ein SVG-String, so kann die Grafik direkt imBrowser dargestelllt werden.
Betrachten wir als Beispiel das folgende Programm, das die Datendes aktuellen Sondernangebots im JSON-Format erhält und im Event-Handler verarbeitet:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8"/>
5 <script>
6 var ladenJSON = function() {
7 var request = new XMLHttpRequest();
8 request.onreadystatechange = function() {
9 if (request.readyState === 4 && request.status === 200)
{
10 var artikel = JSON.parse(request.response);
11 var element = document.getElementById("angebot");
Bei Aufruf der HTML-Datei erscheint unter der Überschrift zunächstder Text „Klicken Sie, um unser heutiges Sonderangebot zu sehen:“.Klickt man den Button, so wird sein Event-Handler onclick aufgerufen,der wiederum die Funktion ladenJSON aufruft. In ihr wird ein XMLHtt-pRequest request erzeugt, das ein PHP-Skript auf dem Hägar-Serveraufruft und einen JSON-String empfängt, der in dem Event-Handleronreadystatechange zu einem vollständigen Text „Kaufen Sie unseren
36
1.10 XMLHttpRequest und AJAX
Prozessor mit der Nummer 123 für 99.99 €!“ ausformuliert wird unddamit den vorherigen Text im <p>-Element überschreibt, allerdings nurunter der Bedingung, dass die HTTP-Antwort eingetroffen und derStatus-Code OK lautet. (Der Status-Code 200 besagt, dass die HTTP-Anfrage erfolgreich verlief.) Das PHP-Skript auf Hägar ist übrigens nurganz kurz und gibt einen immer gleichen String aus:
1 <?php
2 header("Access-Control-Allow-Origin: *");
3 echo ’{
4 "id" : "123",
5 "name" : "Prozessor",
6 "preis": 99.99
7 }’;
8 ?>
Wir können uns jedoch leicht vorstellen, dass das PHP-Programm statt-dessen einen Datenbankzugriff ausführen könnte und so das Tagesan-gebot aktuell aus der Datenbank selektiert.
1.10.2 AJAX
Viele moderne Webanwendungen basieren auf AJAX (Asynchronous Ja-vaScript and XML), das wiederum auf dem XMLHttpRequest-Objekt be-ruht. Ziel vieler AJAX-Anwendungen ist es, das starre Architekturmus-ter des Request-Response von HTTP zu überwinden, bei dem Anfra-gen nur vom Client ausgehen und der Server nur reagieren kann. Ha-ben sich jedoch zentrale Daten auf dem Server aktualisiert, so kann derServer die Clients nicht darüber informieren. Bei einer Internetauktionbeispielsweise würde ein Bieter nicht erfahren, wenn ein neues Geboteines anderen vorläge, wenn er nicht selber immer wieder nachfragt.Ebenso würde bei einem Chatserver beispielsweise ein angemeldeterUser nicht erfahren, wenn eine neue Nachricht eines Anderen einge-troffen wäre. Zwei Verfahren, den Client mit Hilfe eines asynchronenXMLHttpRequest-Objekts automatisiert von einer Datenaktualisierungin Kenntnis zu setzen, sind das Polling und das Long Polling, siehe Ab-bildung 1.7. Beim Polling wird in einem regelmäßigen Zeitabstand ∆teine Anfrage an den Server gestellt, auf die er unverzüglich antwortet.Beim Long Polling dagegen stellt der Client eine asynchrone Anfrage,auf die der Server jedoch erst nach einer Aktualisierung seiner Datenantwortet. Empfängt der Client eine Antwort, stellt er sofort eine neueAnfrage, auf die er wiederum eine Antwort erst nach erfolgter Daten-aktulisierung auf dem Server erhält.Das Polling ist ein in JavaScript clientseitig relativ einfach zu implemen-tierendes Verfahren, siehe Listing 4. Allerdings hat es den großen Nach-teil, dass eine große Anzahl unnützer Anfragen gestellt werden, wenndie Anfragefrequenz höher als die typische Änderungsfrequenz der Da-
37
1 JavaScript
Abb. 1.7: Polling und Long Polling als Methoden zur Synchronisation eines zentralenDatenbestandes. Vgl. [6, S. 27f].
ten ist. Vor allem Server mit sehr vielen Usern können dadurch unnötigbelastet werden. Das Long-Polling dagegen lastet den Server optimalaus, da er nur noch zu den notwendigen Zeitpunkten an die betroffe-nen Clients Nachrichten sendet.
Im Gegensatz zu Java oder C++ bietet JavaScript keine Möglichkeit,einzelne Threads zu programmieren, ein JavaScript-Programm wirdgrundsätzlich in nur einem einzigen Thread ausgeführt [7]. Bei rechen-intensiven Algorithmen bewirkt diese Eigenart, dass das Programm so-lange blockiert und keine weiteren Anweisungen ausführt oder auf Be-nutzereingaben reagiert, bis die Berechnungen beendet sind.Allerdings bietet JavaScript zur nebenläufigen Programmierung dasKonzept der Workers oder Web Workers an.26 Ein Worker in JavaScriptist ein Standardobjekt, das als Teilprozess im Hintergrund läuft, alsonachrangig zum Hauptprozess des eigentlichen JavaScript-Programms,und isoliert für sich ausgeführt wird, insbesondere unabhängig vonweiteren Benutzereingaben. Interaktionen sind ausschließlich mit demHauptprozess über die Methoden postMessage und terminate sowie denEvent-Handler onmessage möglich. Um ein Worker-Objekt zu erzeugen,muss Quelltext des Workerprogramms in einer externen JavaScript-Datei ausgelagert vorliegen. Dies sei beispielsweise worker.js; dannwird im Hauptdokument das Worker-Objekt wie folgt erzeugt:
var worker = new Worker("worker.js");
Die Kommunikation zwischen dem Hauptprozess und dem Workerpro-zess verläuft nun über den Austausch von Nachrichten. Wie in Abbil-
Abb. 1.8: Kommunikation zwischen Hauptprozess und Worker.
dung 1.8 dargestellt reagiert der Event-Handler des einen Prozesses
stets auf die von postMessage gesendeten Nachricht des jeweils anderenProzesses. Ein einfaches Beispiel ist das folgende HTML-Dokument, daseinen bidirektionalen Nachrichtenaustausch bewirkt:
4 self.postMessage(event.data + " (No " + count + ")");
5 };
1.12 DOM Storage
DOM Storage, oder Web Storage nach W3C,27 ist eine Web-Technik, mitder über einen Browser Daten von mehreren MB Größe auf einem Rech-ner gespeichert werden können. DOM Storage ermöglicht damit einepersistente Datenspeicherung ähnlich wie ein Cookie, allerdings mitder entscheidenden Einschränkung, dass Datenzugriffe nicht über dasHTTP-Protokoll geschehen, sondern vollständig vom Browser gesteu-ert und durch clientseitige Skripte (in der Regel JavaScript) durchge-führt werden.DOM Storage speichert Daten in einem assoziativen Array, in dem dieSchlüssel und Werte Strings sind. Sie können also in JavaScript einfach
27 Die Namensgebung ist einigermaßen kompliziert, nach W3C heißt es Web Storage,aber auch DOM Storage ist möglich, allerdings setzt es nicht die Existenz eines tatsäch-lichen Dokument-Objekts voraus http://dev.w3.org/html5/webstorage/#terminology.
mit JSON.parse als Objekt erzeugt und mit JSON.stringify in DOM Sto-rage gespeichert werden.
1.12.1 Lokale und sessionspezifische Speicherung
Daten, die lokal gespeichert werden, die sogenannten Local Shared Ob-jects (LSO), sind mit einer Domain verknüpft und bleiben auch nachBeenden des Browsers bestehen. Alle Skripte einer Domain, von deraus die Daten gespeichert wurden, können auf die Daten zugreifen. BeiMozilla Firefox werden die Daten in der Datenbankdatei webappssto-re.sqlite gespeichert.Session-spezifisch gespeicherte Daten sind mit dem erzeugendenBrowser-Fenster verknüpft und auf dieses beschränkt. GespeicherteDaten werden beim Schließen des Browser-Fensters gelöscht. DieseTechnik bietet die Möglichkeit, mehrere Instanzen derselben Anwen-dung in verschiedenen Fenstern laufen zu lassen, ohne dass es zu einergegenseitigen Beeinflussung kommt, was von Cookies nicht unterstütztwird.In JavaScript werden beide Speicherarten durch die StandardobjektelocalStorage und sessionStorage realisiert und bieten die MethodensetItem und getItem zum Speichern und Lesen der Daten:
// Speichert ein Key-Value-Paar im localStorage
localStorage.setItem(’schluessel’, ’wert’);
// Liest den eben gespeicherten Wert aus und zeigt ihn an
Aufgabe 1.1 (Ein- und Ausgabe in JavaScript) (a) Erstellen Sie ein Pro-gramm in JavaScript, das einen Euro-Betrag in Dollar zu einem einzu-gebenden Kurs umrechnet.
Die Umrechnung soll dabei nach Drücken des = -Buttons geschehen.
(b) Modifizieren Sie Ihr Programm so, dass die Ein- und Aus-gabe mit Dezimalkommas möglich ist. Finden Sie die dazunötigen Funktionen mit Hilfe der Objektreferenz auf http:
//de.selfhtml.org/javascript/objekte/, heraus, dort unter einempassenden der vordefinierten Objekte.
Aufgabe 1.2 (Eingabe und Ereignisbehandlung) Progammieren Sie eineWebseite zur Datenerfassung für den Browser, in dem für ein Unter-nehmen die Eigenkapitalquote und die Fremdkapitalquote einzugebenist:
Geben Sie die folgenden Daten Ihres Unternehmens ein:
Eigenkapitalquote: %
Fremdkapitalquote: %
Dabei soll nach jedem Tastendruck in einem der Eingabefelder der Dif-ferenzwert zu 100 im jeweiligen anderen Eingabefeld erscheinen. D.h.tippt man in das untere Feld 4 ein, so soll sofort 96 im oberen erschei-nen, und umgekehrt.
Hinweise: (i) Den notwendigen Ereignisbehandler finden Sie z.B. unterhttps://wiki.selfhtml.org/wiki/JavaScript/Event-Handler. (ii) So wieSie in JavaSript aus einem Eingabefeld lesen können, können Sie auchetwas hineinschreiben, d.h. das geeignete Attribut verändern!
Aufgabe 1.3 (Funktionale Programmierung) Nach der Regel von Weddle,auch Newton-Cotes-Formel vom Grad n = 6 genannt, wird das IntegralIf (a, b) =
∫ ba f (x) dx einer integrierbaren Funktion f : [a, b] → R mit a,
angenähert. Programmieren Sie diese Formel in JavaScript als eineFunktion, die neben den Zahlen a und b die Funktion f als Parametererwartet. Wenden Sie damit die Näherungsformel auf die Integrale
∫ 10
07x6 – 8x3 + 2x – 1 dx,
∫ 1
0sin x dx und
∫ 10
0sin x dx
und vergleichen Sie die Ergebnisse mit den analytisch berechnetenWerten. Die ersten beiden Integrale sollten dabei recht genau angenä-hert werden, das dritte dagegen hat einen Fehler von fast 20% des tat-sächlichen Wertes. Haben Sie eine Erklärung dafür?
Aufgabe 1.4 (Funktionsauswertung mit map) Erstellen Sie in JavaScripteine Funktion map(f,a), die eine Funktion f und ein Array a von Zahlenals Parameter erwartet und ein Array zurück gibt, das aus den Funkti-onswerten f(a[i]) der Werte von a besteht. Beispielsweise soll für dieFunktion f (x) = x3 gelten:
map (x3, [1, 2, 3, 4]) = [1, 8, 27, 64]
1.13.2 JavaScript, DOM und AJAX
Aufgabe 1.5 (DOMund Ereignisbehandlung in JavaScript) (a) Erstellen Sieein JavaScript-Programm, das zwei Buttons Grün und Rot anzeigt,die beim Anklicken entsprechend die Schriftfarbe in einem <p>-Elementändert. Dabei soll zum Verändern der Farbe nur eine Funktion verwen-det werden.
a) b)
(b) Schreiben Sie ein JavaScript Programm, das durch das Anklickendes Buttons Stern erzeugen einen neuen Stern unter dem Button ein-fügt, indem ein neues <img>-Element erzeugt wird. Entsprechend sollbeim Anklicken der Schaltfläche Stern löschen der letzte Stern ge-löscht werden. Die Bilddatei für den Stern finden Sie auf dem Hägar-Server.
Aufgabe 1.6 (Laden von JSON-Elementen mit AJAX) In dem Verzeich-nis http://haegar.fh-swf.de/Webtechnologie/Aufgaben/Woche_1-15/ be-finden sich der Quelltext einer HTML-Seite und mehrere JSON-Dateienmit Informationen zu verschiedenen Städten. Die HTML-Seite liefertdas Gerüst, mit dem die Städteinformationen HTML5-konform ange-zeigt werden sollen. (Insbesondere sollte sie auch auf mobilen Endge-räten ansprechend dargestellt werden, testen Sie es!)
Erweitern Sie den Quelltext um JavaScript-Anweisungen, so dass beimAnklicken der Buttons die jeweilige JSON-Datei geladen wird und de-ren Informationen in den Elementen titel und inhalt angezeigt wer-den. Zum Beispiel soll nach dem Laden der Datei Istanbul.json mit denDaten
{
"name": "Istanbul",
"state": "Turkey",
"capital": false,
"residents": "14 million",
"remark": "Istanbul is the most populous city of Turkey and
of Europe."
}
der folgende Text erscheinen:
Istanbul
Istanbul is a city in Turkey with a metropolitan area of14 million residents. Istanbul is the most populous cityof Turkey and of Europe.
Aufgabe 1.7 (Google Visualization API) (a) Erstellen Sie mit Hilfe der Goo-gle Visualization API und der Dokumentation
Erstellen Sie dabei zunächst jedes der Diagramme in einer eigenen Da-tei, bevor Sie sie auf eine gemeinsame Seite zusammenfassen.
(b) Erstellen Sie mit Hilfe der Google Visualization API die folgendenFunktionsgraphen im Browserfenster:
45
2 jQuery
2 jQuery
JavaScript spielt in der professionellen Webprogrammierung eineganz zentrale Rolle, insbesondere aufgrund seiner Fähigkeiten, DOM-Manipulationen und asynchrone HTTP-Requests dynamisch auszulö-sen. Da allerdings die dazu notwendigen Anweisungen in JavaScriptrecht aufwendig sind — mit Funktionen wie getElementById zur DOM-Manipulation oder dem im wesentlichen immer gleichen Dreisch-ritt zur Implementierung eines asynchronen HTTP-Requests — wur-den immer wieder spezielle JavaScript-Bibliotheken entwickelt, umdie Programmierung zu vereinfachen. Eine der wichtigsten und ver-breitesten dieser Bibliotheken ist jQuery, das zu einem De-Facto-Standard der Webprogrammierung geworden ist: Nach W3Techs (http://w3techs.com/) wird jQuery auf fast 70 % aller Webauftritte eingesetzt.
2.1 Entstehungsgeschichte, Lizenz, Dokumentation
jQuery wurde 2006 von John Resig veröffentlicht und ist seit April 2013in der Version 2 verfügbar. Da diese Version nur noch mit modernenBrowserversionen kompatibel ist (also insbesondere nicht mit dem In-ternet Explorer bis einschließlich Version 8), wird die Version 1 par-allel weitergeführt. jQuery ist als freie Software unter der MIT-Lizenz(https://tldrlegal.com/license/mit-license) verfügbar, darf also auchfür kommerzielle Zwecke verwendet werden, wobei jede Kopie ihr Co-pyright beinhalten muss.Die API-Dokumentation von jQuery ist unter
http://api.jquery.com/
verfügbar, ein sehr gutes Tutorial unter http:
//www.w3schools.com/jquery/.
2.2 Einbindung der Bibliothek
Da jQuery eine JavaScript-Bibliothek ist, benötigt man zur dessen Ver-wendung keine besondere Installation, sondern bindet es per Hyper-link in das HTML-Dokument ein. Die aktuellste Variante findet man un-ter
http://code.jquery.com/
Dort ist jede Version in einer „unkomprimierten“ und einer „minifizier-ten“ Fassung verfügbar. Die erste ist kommentiert und formatiert undsomit gut lesbar, die andere ist unformatiert und ohne Kommentare,aber mit deutlich weniger Speicherbedarf. Die minifizierte Fassung eig-net sich also zur reinen Nutzung besser aals die unkomprimierte. Mankann nun die gewünschte Version der Bibliothek einfach auf den eige-nen Server herunterladen und sie dann per Link einbinden, man kann
Basis einer jQuery-Anweisung ist der Aufruf der Funktion $, oder syn-onym jQuery, mit einem Selektor und einer Aktion:
$(Selektor).Aktion(...); oder synonymjQuery(Selektor).Aktion(...);
(Gebräuchlicher ist die Verwendung von $.) Der Selektor ist hierbei einCSS-Selektor zur Auswahl eines oder mehrerer HTML-Elemente, die Ak-tion ist eine auszuführende Funktion aus der jQuery-Bibliothek. Fürden Selektor gibt es im Wesentlichen vier Varianten, beispielhaft mitder Aktion hide() aufgelistet, die die ausgewählten HTML-Elemente perCSS verstecken lässt:
$("#test").hide() versteckt alle HTML-Elemente mit der ID "test".$(".test").hide() versteckt alle HTML-Elemente der Klasse "test".$("p").hide() versteckt alle <p>-Elemente.$(this).hide() versteckt das aktuelle Element (funktioniert normaler-
weise nur innerhalb eines selektierten Elements);
Diese Anweisungen müssen in eine anonyme Funktion (auch „Callback-Funktion“ oder „Lambda-Ausdruck“) eingepackt werden:
$(function(){
...
}
oder äquivalent$(document).ready(function(){
...
}
und sollten im <head> des HTML-Dokuments programmiert (bzw. alsexterne JS-Datei dort eingelesen) werden. Auf diese Weise wird garan-tiert, dass das gesamte Dokument vollständig geladen ist, bevor jQuery-Code ausgeführt wird.Neben diesen „Selektor-Aktion“-Anweisungen kann man in jQuery auchdirekt vordefinierte Nutzfunktionen durch
$.Nutzfunktion(...); oder synonymjQuery.Nutzfunktion(...);
aufrufen. In der API-Dokumention (http://api.jquery.com/) sind dievorhandenen Nutzfunktionen mit
aufgeführt. Die auf selektierte Elemente möglichen Aktionen sind da-gegen einfach mit
.Aktion (...)
beschrieben.
2.4 DOM-Manipulation mit jQuery
Als erstes Programmbeispiel mit jQuery betrachten wir eine Versiondes Programms aus Kapitel 16 (Listing 16.2), das nach Klicken derSchaltfläche ein neues <li>-Element an die geordnete Liste <ol> hängt:
Ein direkter Vergleich der jQuery-Anweisungen mit einem äquivalen-ten Programm in „reinen“ JavaScript zeigt die Philosophie und die funk-tional orientierte Sicht von jQuery. Das jQuery Programm
48
2.4 DOM-Manipulation mit jQuery
$(function() {
$("button").click(function(){ // Event-Handler für alle
Buttons
console.log("$(this).val(): " + $(this).val());
if ($(this).val() === "hinzufuegen") {
$("#liste")
.append($("<li>Die Zeichen an der Wand</li>"));
} else if ($(this).val() === "loeschen") {
$("#liste")
.children()
.last()
.remove();
}
});
});
würde in JavaScript (fast) äquivalent wie folgt lauten:
var modifizieren = function(aktion) {
var wurzel = document.getElementById(’liste’);
if (aktion === "hinzufuegen") {
var neu = document.createElement(’li’);
wurzel.appendChild(neu);
var neuerText = document.createTextNode("Die Zeichen an
Im jQuery-Quelltext wird die objektorientierte API des DOM derartgekapselt, dass sie eine „fluente“ („fließende“) Programmierung hin-tereinandergeschalteter Funktionen erlaubt, wie in Zeile 15 bis 17 inListing 5. Außerdem brauchen die Ereignisbehandler nicht mehr imHTML-Quelltext in den betreffenden Elementen implementiert zu wer-den, sondern über die Selektoren ausschließlich in JavaScript. Damit isteine saubere Trennung zwischen der Ablaufdynamik und den HTML-Inhalten möglich.
49
2 jQuery
2.5 CSS-Formatierungen
Etwas einfacher und auch durchweg gebräuchlicher als direkte DOM-Manipulationen, wie im vorigen Abschhnitt besprochen, sind dyna-mische Veränderungen von Formatierungen über CSS. Hier stehen injQuery mit hide, show und toggle (umschalten) drei wirkmächtige Funk-tionen zur Verfügung, die hier stellvertretend für dynamische Effek-te aufgelistet seien. Die Funktionen modifizieren dabei gar nicht dieStruktur des DOM, sondern ändern lediglich die style-Attribute derHTML-Elemente. Als Beispiel sei das folgende jQuery-Programm gelis-tet, das durch Klicken der Schaltfläche „Umschalten“ bewirkt, dass alleAbätze des HTML-Dokuments angezeigt werden oder nicht:
Listing 6: Zeigen und Verbergen von HTML-Elementen mit jQuery
Untersucht man die HTML-Elemente mit den Entwicklertools desBrowsers, so erkennt man, dass lediglich das style-Attribut aller <p>-Elemente verändert wird, entweder von <p style="display: block;"
(sichtbar) auf <p style="display: none;" (unsichtbar), oder umge-kehrt.Mit jQuery stehen aber auch Funktionen für Effekte mit CSS zur Ver-fügung, die lange und komplexe JavaScript-Anweisungen bündeln. Imfolgenden Beispielprogramm wird ein angeklickter Listeneintrag zu-nächst rot gefärbt und verblasst dann langsam, bevor er nach 3 Sekun-den (scheinbar) verschwindet.
Listing 7: Animationsartiger CSS-Effekt mit jQuery
Lassen Sie das Programm ablaufen und beobachten Sie dabei imEntwicklertool des Firefox („Inspector“) oder des Chrome Browsers(„Elements“) die sich dynamisch verändernden Einstellungen der CSS-Anweisungen!
2.6 AJAX mit jQuery
Die einfachste Möglichkeit zur Implementierung von AJAX-Ereignissenist über die Nutzfunktion $.ajax (bzw. jQuery.ajax). Es gibt zwei Ver-sionen (siehe http://api.jquery.com/jQuery.ajax/), die gebräuchliche-re erwartet als Arguent ein JSON-Objekt setting mit den Einstellungender asynchronen HTML-Anfrage:
• type: Die Methode der HTML-Anfrage, also "GET" oder "POST"
• url: Der URL der HTML-Anfrage
• data: Die zu übermittelnden Daten der HTML-Anfrage,
• success: Der Ereignisbehandler bei Erfolg der HTML-Anfrage.
Beispielhaft sei hier ein einfacher asynchroner Aufruf des Spiegel-skripts auf Hägar beschrieben:
Zu beachten ist dabei, dass in jQuery die AJAX-Anweisungen aufgrundder verzögerten Ausführung im <head> des Dokuments programmiertwerden können, während die reinen JavaScript-Anweisungen nach dem<p>-Element geschrieben werden sollten, also wenn es zum Ausfüh-rungszeitpunkt bekannt ist, oder als Funktionsaufruf des Ereignisbe-handlers onload im <body>-Element.Eine genauere Beschreibung der für die Funktion $.ajax möglichen Pa-rameter sind in der API-Dokumentation unter
http://api.jquery.com/jquery.ajax/
beschrieben. Die wichtigsten Parameter sind bereits in obigem Listing 8aufgeführt. Bemerkenswert ist außerdem der Parameter dataType, derals Standard per Intelligent Guess eines der Formate xml, json, script(für JavaScript-Quelltext) oder html auswählt.
2.7 jQuery Mobile
jQuery Mobile ist eine für Wischgesten optimierte JavaScript-Bibliothek, die auf jQuery und auf eine spezifische CSS-Bibliothekaufbaut. Sie ist kompatibel mit den gängigen Smartphones und Ta-blets. Sie erlaubt es durch gekapseltes JavaScript, vorwiegend mitHTML-Elementen und geeigneten Attributen dynamische Apps zuprogrammieren. Als ein einführendes Beispiel sei die folgende App, diezwei miteinander verlinkte Seiten mit einfachen Effekten darstellt:
Listing 9: Eine zweiseitige App für mobile Endgeräte
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8"/>
5 <title>jQuery Mobile Example</title>
6 <!-- Include meta tag to ensure proper rendering and touch zooming: -->
Testen Sie sie mit Ihrem mobilen Endgerät oder mit den Entwickler-tools des Google Chrome!Im <head> des Dokuments werden die notwendigen CSS- und Java-Script-Bibliotheken geladen, bevor mit <div>-Elementen über das At-tribut data-role die Struktur einer Seite festgelegt wird:
<div data-role="page" id="pageone">
<div data-role="header">
...
</div>
<div data-role="main" class="ui-content">
...
</div>
<div data-role="footer">
...
</div>
</div>
Jedes <div>-Element mit der data-role="page" sollte dabei eine eigeneID bekommen. Die Rollen von "header", "main" und "footer" sind (hof-fentlich) selbsterklärend und können bei Betrachtung der App nötigen-falls erschlossen werden.Weitere Informationen: Die Dokumentation zur API befindet sich unter
Aufgabe 2.1 (CSS-Selektoren) (a) Verändern Sie mit jQuery die CSS-Einstellungen, so dass die Hintergrundfarbe aller <tr>-Elemente hell-blau erscheinen.
(b) Modifizieren Sie das Dokument, so dass nur noch jede zweite Zeilemit der Hintergrundfarbe erscheint.
Aufgabe 2.2 (Animationseffekte) Programmieren Sie folgende mit jQue-ry folgende Animationseffekte:
Aufgabe 2.3 (Suchbegriffvervollständigung) (a) Programmieren Sie eineSuchanfrage, die mittels der autocomplete-Funktion aus einer vordefi-nierten Liste von Programmiersprachen nach jedem Tastendruck die-jenigen Begriffe anzeigt, die mit den bisher im Suchfeld eingegebenenBuchstaben übereinstimmen. Verwenden Sie dazu die bereitgestelltenFrameworks neben der Standardbibliothek von jQuery:
(letztere ist kein JavaScript!) und beachten Sie die Hinweise unter http://api.jqueryui.com/autocomplete/.
(b) Modifizieren Sie Ihr Programm, so dass die gefilterten Suchbegrif-fe dynamisch aus einer Datenbank selektiert und im Suchfeld anzeigtwerden.
Aufgabe 2.4 (AJAX mit jQuery) (Vgl. Aufgabe 1.6.) In dem Verzeich-nis http://haegar.fh-swf.de/Webtechnologie/Aufgaben/Woche_1-15/ be-finden sich der Quelltext einer HTML-Seite und mehrere JSON-Dateienmit Informationen zu verschiedenen Städten. Die HTML-Seite liefertdas Gerüst, mit dem die Städteinformationen HTML5-konform ange-zeigt werden sollen. (Insbesondere sollte sie auch auf mobilen Endge-räten ansprechend dargestellt werden, testen Sie es!)
Laden Sie die Dateien in ein Unterverzeichnis Ihres Webservers und er-weitern Sie den Quelltext der HTML-Datei um jQuery-Anweisungen, sodass beim Anklicken der Buttons die jeweilige JSON-Datei geladen wirdund deren Informationen in den Elementen titel und inhalt angezeigtwerden. Zum Beispiel soll nach dem Laden der Datei Istanbul.json mitden Daten
{
"name": "Istanbul",
"state": "Turkey",
"capital": false,
"residents": "14 million",
"remark": "Istanbul is the most populous city of Turkey and
of Europe."
}
der folgende Text erscheinen:
Istanbul
Istanbul is a city in Turkey with a metropolitan area of14 million residents. Istanbul is the most populous cityof Turkey and of Europe.
Beachten Sie, dass standardmäßig jQuery als empfangenen Datentypper „Intelligent Guess“ in JavaScript umformt.
57
3 AngularJS
3 AngularJS
AngularJS ist eine clientseitige JavaScript-Bibliothek zur Erstellung vonEinzelseiten-Webanwendungen nach dem Entwurfsmuster Model ViewViewModel (MVVM). AngularJS wird seit 2009 von Google als quellof-fenes Projekt entwickelt. Wichtigste Eigenschaften von AngularJS sinddie Zwei-Wege-Datenbindung zum Abgleich von Darstellung und Daten,und Dependency Injection zur Auflösung von Abhängigkeiten zwischenverschiedenen Komponenten. Sie stellen jede für sich sehr moderneKonzepte der Programmierung und des Software Engineering dar undwerden daher in einem ersten Abschnitt kurz theoretisch behandelt.AngularJS ist flexibel erweiterbar durch sogenannte Services zur Erstel-lung eigener Routinen und Algorithmen und durch Direktiven zur Er-stellung wiederverwendbarer HTML-Elemente.
3.1 Grundlegende Konzepte
3.1.1 Einzelseiten-Webanwendungen
Eine Einzelseiten- oder Single-Page-Webanwendung (englisch Single-page Web Application, SPA) ist eine Webanwendung, die aus einem ein-zigen HTML-Dokument besteht und deren Inhalte dynamisch nach-geladen werden. Diese Art von Web-Architektur steht im Gegen-satz zu klassischen Webanwendungen, welche aus mehreren, unter-einander verlinkten HTML-Dokumenten bestehen. Eine Einzelseiten-Webanwendung ermöglicht eine Reduzierung der Serverlast, gibt demAnwender das Gefühl einer klassischen Desktopanwendung und erlau-ben die Umsetzung von selbständigen Webclients, die auch temporäroffline verwendbar sind. Insbesondere aus letzterem Grund eignen siesich für den Einsatz in störanfälligen und oft unterbrochenen Verbin-dungen mobiler Endgeräte.Die Informationen dieses Kapitels basieren vor allem auf dem Buch [10]sowie auf der Website http://www.w3schools.com/angular/.
3.1.2 Model-View-ViewModel (MVVM)
Eines der wichtigsten Architekturmuster des Software Engineering istdas Model-View-Controller (MVC). Es zählt zu den Mustern der inter-aktiven Systeme, die allgemein Mensch-Maschine-Interaktion struktu-rieren. In den 1980er Jahren von Trygve Reenskaug für die Program-miersprache Smalltalk entwickelt, trennt es die Verantwortlichkeitenvon Datenhaltung (Model), Darstellung (View) und Ablauflogik (Con-troller) und lagert sie in separate Schichten aus. Siehe dazu Abbildung3.9 (rechts).In einer dynamischen Webanwendung kann die strikte Trennung vonAblauflogik (Controller) und Darstellung (View) allerdings nicht auf-
recht erhalten werden, da der Controller HTML-Code generieren muss,der grundsätzlich Teil der View-Komponente ist. Damit trägt aber amEnde der Server die Hauptlast der Webanwendung, worunter die In-teraktivität und das Antwortverhalten bei hoher Nutzung leiden kann,während der Browser vergleichsweise wenig zu tun hat. Er ist in die-sem Falle nur noch ein sogenannter Thin Client.Mit dem Muster Model-View-ViewModel (MVVM) wird der Controllerdurch eine Proxy-Schicht auf dem Client (!) ersetzt, die ViewModel ge-nannt wird. Dorthin werden lediglich diejenigen Daten geliefert, die tat-
Abb. 3.9: Das MVVM-Muster (links) für eine Webanwendung, im Vergleich dazu dasMVC-Muster (rechts). Da bei MVC die Hauptlast der Webanwendung auf dem Server läuft,ist der Browser in diesem Fall ein Thin Client. Bei MVVM dagegen hat er mit der Poxy-Schicht MVVM einen großen Teil der Arbeitslast und ist daher in diesem Fall ein Fat Cli-ent.
sächlich für die Anzeige gebraucht werden. Oft müssen die Daten auchauf bestimmte Art und Weise transformiert werden, bevor sie zur An-zeige kommen; auch hierfür ist das ViewModel zuständig. Außerdemdefiniert es die innerhalb der Anzeige benötigte Funktionalität: Dortmüsste beispielsweise ein Ereignisbehandler definiert werden, der aufeinen Button-Klick reagiert.So plausibel das MVVM-Muster auch auf den ersten Blick erscheint,wirft es sofort ein großes Problem auf: die Datenredundanz zwischenModel, ViewModel und View. Wie kann dieses Problem gelöst werden?Betrachten wir dazu im nächsten Abschnitt einen Ansatz, der sich alsgroßenteils erfolgreich realisierbar herausgestellt hat.
3.1.3 Datenbindung (data binding)
Aufgrund der engen Verzahnung von Model, ViewModel und Model unddadurch implizierten grundsätzlichen Datenredundanz ergibt sich so-fort das Problem der Synchronisation der Schichten. D.h. jede Daten-aktualisierung, sei sie im Model durch die Datenbank oder im Viewdurch eine Anwendereingabe, muss in den jeweils anderen Schichten
59
3 AngularJS
nachvollzogen werden. Ansonsten kann es sehr schnell zu Inkonsisten-zen der Daten kommen, beispielsweise weil mittlerweile ein Anwendereinen Dateninhalt geändert hat, den etwas später ein anderer verän-dern will: Hat zum Beispiel ein Anwender den letzten vorhanden Arti-kel im Bestand gekauft, so muss das ViewModel jedes anderen Anwen-ders sofort angepasst werden, sonst wird dieser Artikel möglicherwei-se mehrfach verkauft.Als ein Konzept zur Lösung dieses Synchronisationsproblems desMVVM-Musters hat sich die Datenbindung, vor allem die „Zwei-Wege-Datenbindung“, etabliert. Wir werden dieses gleich im nächstenProgrammierbeispiel betrachten. Die Zwei-Wege-Datenbindung ist imMVVM ein Mechanismus zur automatischen Synchronisation von View-modell und View bei Änderung von Daten, sei es durch den Nutzer inder View oder durch andere Nutzer oder Prozesse im mit dem Modelsynchronisierten Viewmodell.Normalerweise muss man eine solche Datenbindung zwischen denSchichten mühsam programmieren. Beispielsweise müssen für alle ein-gaberelevanten DOM-Elemente jeweils extra ein Ereignisbehandler re-gistriert werden, der die betroffenen Variablen des Models ändert. Ent-sprechend muss auch die Logik des umgekehrten Weges programmiertwerden, also die Aktualisierung der DOM-Elemente nach einer Ände-rung des Daten des Models. Auf diese Weise entsteht bereits für rela-tiv einfache Anwendungen jede Menge sogenannter „Boilerplate-Code“(etwa „Textbaustein-“ oder „Klebe-Code“), der die eigentliche Anwen-dungslogik verschmutzt.
3.1.4 Dependency Injection
Ein grundlegendes Problem komponentenbasierter Softwaresysteme,die wartbar, testbar und komponentenweise austauschbar sein sollen,ist die Auflösung von Abhängigkeiten der Komponenten untereinander.Eine einfache Abhängigkeit ist bereits gegeben, wenn eine Komponenteeine andere für ihren Ablauf benötigt. In einer objektorientierten Pro-grammiersprache beispielsweise wäre dies der Fall, wenn ein Objektzu seiner Erzeugung ein anderes verwendet. Durch solche Abhängig-keiten kann ganz schnell ein verschlungenes Netz von Abhängigkeitenentstehen, das eine Modifikation des Softwaresystems oder den Aus-tausch von Komponenten praktisch unmöglich macht.Im Software Engineering hat sich daher in den 2000er Jahren das aufMartin Fowler [4] zurück gehende Entwurfsmuster der Dependency In-jection (DI) etabliert. Ihr liegt das abstrakte Prinzip der Umkehrung desKontrollflusses (Inversion of Control (IoC)) zugrunde, also zum Beispieleine Umkehrung der Aufrufe von Funktionen oder der Ablaufsteuerungeines Programms. (Getreu dem Hollywood-Prinzip, “Don’t call us, we’llcall you!” [5]) Eine typische Realisierung dieses Prinzips sind beispiels-weise Event Handler, da sie Funktionen implementieren, deren Aufruf
60
3.1 Grundlegende Konzepte
nicht in der Anwendung selbst geschieht, sondern aus einer der Pro-gramme der API-Bibliothek erfolgt. Ermöglicht wird eine solche Um-kehrung des Kontrollflusses beispielsweise durch Interfaces, Plug-Insoder Callback-Funktionen. Ein anderes Beispiel für eine Kontrollfluss-umkehrung ist eine serverseitig programmierte Webanwendung, wieetwa mit PHP, da die Ausführungsverantwortung beim Server liegt [10,§2.1.3].
Das Entwurfsmuster der Dependency Injection oder der automatischenÜbergabe von Abhängigkeiten nun ist eine spezielle Form der Kontroll-flussumkehrung und besagt, dass eine Komponente ihre Abhängigkei-ten von anderen Komponenten nicht selbst erzeugt, sondern von einerzentralen Komponente des Systems, dem „Assembler“, übergeben be-kommt [4]. Dadurch können Abhängigkeiten zwischen Komponentenalso ausschließlich durch die zentrale Komponente erzeugt und damitzentral aufgelöst werden.
Listing 10: Einfache Implementierung einer Dependency Injection in Java
1 interface IAbhängiges {
2 public Abhängiges(Abhängigkeit abhängigkeit);
3 }
4
5 class Abhängiges implements IAbhängiges {
6 private Abhängigkeit abhängigkeit;
7
8 public Abhängiges(Abhängigkeit abhängigkeit) {
9 this.abhängigkeit = abhängigkeit;
10 }
11 }
12
13 class Injizierer {
14 void methode() {
15 Abhängigkeit abhängigkeit = ... ;
16 IAbhängiges abhängiges = new Abhängiges(abhängigkeit);
17 }
18 }
Mit der automatischen Übergabe von Abhängigkeiten weist ein Soft-waresystem eine lose Kopplung der Komponenten auf. Lose Kopplungführt dazu, dass Änderungen in einer Komponente nur dann Änderun-gen in einer anderen Komponente bedingen, wenn die Änderungen dieSchnittstelle betreffen. Lose Kopplung ist daher eine hinreichende Be-dingung für maximale Wartbarkeit und Testbarkeit eines Systems ge-gebener Komplexität.
61
3 AngularJS
3.2 Erste Beispiele: HTML wird (fast) eine Programmier-sprache
Genug der Theorie, wie kann man denn nun mit AngularJS programmie-ren? In diesem Abschnitt werden wir einführende Programmbeispie-le vorstellen, die die Datenbindung verwenden, aber auch ein Schlei-fenkonstrukt und eine (Art) Selektionsstruktur kennenlernen. Dadurchwird HTML scheinbar zu einer vollständigen Programmiersprache, inWirklichkeit ist es natürlich JavaScript, aber aufgerufen durch erwei-terte HTML-Attribute, die sogenannten Direktiven.Betrachten wir zunächst ein Programm mit AngularJS, das das Prinzipder Datenbindung (data binding) illustriert.
Listing 11: Beispiel einer Datenbindung in AngularJS
Zunächst sehen wir, dass die Bibliothek im <head> in Zeile 5 eingebun-den wird. Der Kern des Programms besteht aus den Zeilen 10 bis 13:
<div ng-app="">
<input type="text" ng-model="eingabe"/>
<p><tt>{{ eingabe }}</tt></p>
</div>
Mit der Direktive ng-app, also ein „künstliches“ HTML-Attribut, wirdeine Applikation in AngularJS initialisiert, hier ist es die als Standardvorhandene namenlose Applikation. Eine Applikation muss stets be-reits mit ihrem Namen definiert sein, um sie über diese Direktive da-mit aufrufen zu können. Mit der Direktive ng-model wird eine Variablein AngularJS festgelegt, hier ist es die Variable eingabe, die den Wert des<input>-Elements erhält. In dem Ausdruck (expression)
{{ eingabe }}
62
3.2 Erste Beispiele: HTML wird (fast) eine Programmiersprache
schließlich wird der aktuelle Wert der Variable ausgegeben. Hier ist eseingepackt in ein <p>- und ein tt-Element zur Ausgabe in Schreibma-schinenschrift.Was geschieht in diesem Programm? Gibt der Anwender in dem Einga-befeld einen Text ein, so wird nach jedem Tastendruck der aktualisierteWert der Variable angezeigt. Man hat also in dem HTML-Dokument zujedem Zeitpunkt in zwei verschiedenen Elementen denselben Wert ste-hen, es handelt sich um eine (hier noch einfache) Datenbindung.Die Datenbindung ist eine mächtige Technik und ermöglicht mit relativwenig Quelltext bemerkenswerte Effekte. So wird im nächsten Beispiel-programm ein Farbenwähler erstellt, der durch Schiebereglern festge-stellte Farben nach dem RGBA darstellt.28
Listing 12: 2-Wege-Datenbindung in AngularJS: Ein Farbenwähler (nach[10, §1.1])
Hier wird in Zeile 7 die Angularapplikation für das gesamte <body>-Element definiert. Hier werden auch mit der Direktive ng-init die Wer-te der verwendeten Variablen r, g, b und a initialisiert. Die entsprechen-den Schiebereglern (Zeilen 8 bis 11) werden über die Direktive ng-model
mit diesen Werten voreingestellt und im <div>-Element mit Hilfe der
28 RGBA erweitert das RGB-Farbmodell mit den Werten für Rot, Grün und Blau je-weils ganzzahlig zwischen 0 und 255 um den Alphawert α zwischen 0 und 1, der dieTransparenz der Farbe festlegt (0: transparent, also unsichtbar, 1: nicht transparent,also opak).
63
3 AngularJS
CSS-Funktion rgba als Farbe dargestellt.Im letzten Beispielprogramm dieses Abschnitts wird über die Direktiveng-repeat eine Schleife zum Durchlaufen eines Arrays erzeugt, die alleEinträge ausgibt, sowie eine zweite Schleife, die bestimmte Elementedes Arrays filtert, also selektiert. Damit bietet AngularJS, zumindest aufden ersten Blick, alle Kontrollstrukturen einer vollständigen Program-miersprache in HTML-Syntax. Aber es gibt Einschränkungen. Aber zu-nächst das Programm:
7 <h1><span ng-repeat="wort in woerter">{{ wort }}</span></h1>
8 <p> <span ng-repeat="wort in woerter | filter: ’gul’">{{ wort
}}</span></p>
9 </body>
10 </html>
Es gibt als <h1>-Überschrift „Hallo Welt, hallo Angular!“ aus, und in dem<p>-Element das gefilterte Wort „Angular!“. Das ergibt sich, da in Zei-le 6 die Angularapplikation mit dem Array woerter und vier Einträgeninitialisiert wird und die Direktive ng-repeat als eine foreach-Schleifedurch das Array woerter läuft. In Zeile 8 wird dieselbe Schleife mit| filter: ... durchlaufen, also einem Filter. Ein Filter übernimmt in
der funktionalen Programmierung die Rolle der Selektion, also der if-Anweisung der imperativen Programmierung.Ein Problem ergibt sich bei gleichen Einträgen des Arrays, AngularJSbricht dann die Verarbeitung ab und ... gibt nichts aus, was die Fehler-suche nicht gerade vereinfacht. Man muss in diesem Falle bei der Di-rektive ng-repeat zusätzlich die Option track by $index angeben:
<p> <span ng-repeat="wort in woerter track by $index">{{wort
}} </span></p>
</body>
Der doppelte Eintrag ist hier das Wort „ich“. In diesem Beispiel wirdüberdies die Direktive ng-bind benutzt, die eine ähnliche Wirkung wieein {{}}-Ausdruck hat. Obwohl etwas umständlicher in der Schreibwei-se, sollte sie bei komplexeren Webanwendungen bevorzugt werden, dasie als ein Elementattribut die Datenbindung erst anzeigt, wenn die Sei-
64
3.3 Grundelemente von AngularJS
te geladen ist. In extremen Fällen kann es dagegen bei einem {{xyz}}-Ausdruck passieren, dass er vor Vollendung des Ladens unausgewertetangezeigt wird, also wörtlich als „{{xyz}}“.Weitere Hinweise zur Direktive ng-repeat fin-det man in der Dokumentation der API https:
//docs.angularjs.org/api/ng/directive/ngRepeat, zur Direktiveng-bind siehe https://docs.angularjs.org/api/ng/directive/ngBind.Ist also HTML mit AngularJS eine vollständige Programmiersprachewie Java, JavaScript oder PHP? Immerhin ermöglicht die HTML-SyntaxSchleifen und Selektionen. Die Antwort ist Nein, da es, vereinfachtgesagt, keine while-Schleife gibt: Eine Programmiersprache muss dieMächtigkeit haben, Algorithmen auszuführen, die potenziell unendlichlang laufen können.29 Das ist mit AngularJS nicht möglich.
3.3 Grundelemente von AngularJS
Zunächst sei als Standardreferenz die Dokumentation der API von An-gularJS erwähnt:
https://docs.angularjs.org/api/
AngularJS basiert auf den folgenden Grundelementen, siehe Abbildung3.10. Das übergreifende Strukturelement in AngularJS bilden Module.Sie kapseln zusammenhängende Anwendungskomponenten und die-nen als Container für Controller, Routen, Services, Direktiven und Filter.Modulen in AngularJS können im Sinne der Dependency Injection be-
Abb. 3.10: Struktur der Grundelemente von AngularJS.
quem andere Module als Abhängigkeiten einbinden. Sofern diese Mo-dule zuvor in einem <script>-Element in der index.html eingebundenworden sind, übernimmt AngularJS die Abhängigkeitsauflösung auto-matisch.Eine Angularanwendung besteht aus mindestens einem Startmodul,das durch die Direktive ng-app festgelegt und durch AngularJS automa-tisch initialisiert und nach dem Laden der Anwendung ausgeführt wird.
29 Eine Programmiersprache muss eine universelle Turingmaschine realisieren kön-nen, die auch einen Algorithmus zur Lösung des (übrigens unentscheidbaren) Ent-scheidungsproblems umfasst [2].
Einfache Anwendungen basieren auf genau einem Modul, in großenProjekten mit mehreren Teams dagegen können nur mehrere Modulefür eine lose Kopplung des Systems sorgen.
3.4 Erste Datenbankzugriffe mit AngularJS
An Programmbeispielen haben wir bislang AngularJS lediglich im Be-reich des Clients gesehen, also der View und der ModelView mit derZwei-Wege-Datenbindung. Ohne Zweifel ist das eine der Stärken vonAngularJS und ermöglicht beeindruckende Effekte. Aber den serversei-tigen Anteil, also die Datensynchronisation mit dem Model in Abbil-dung 3.9 (links) haben wir noch nicht betrachtet.
Wir werden jedoch gleich sehen, dass dies eine weitere Stärke des An-satzes von AngularJS ist. Um das Prinzip dieses clientseitigen Ansatzeszu verstehen, betrachten wir zunächst eine einfache Webapplikation,die die Adressdatenbank aus Abschnitt 12.2 mit AngularJS darstellt. Inder HTML-Datei wird dazu der folgende Quelltext erstellt:
Die Funktion ist ein Promise30, also eine asynchron aufgerufene Funk-tion, auf deren Resultat eine then-Funktion mit zwei Callbackfunktio-nen reagiert, eine für den Erfolgsfall und eine für den Fehlerfall. DieKonstruktion mit der then-Funktion ist also die Entsprechung der Aus-nahmebehandlung mit try-catch in der synchronen objektorientiertenProgrammierung.
3.5 Single PageAppmit Components undDatenbankzugrif-fen
In diesem Abschnitt erstellen wir eine kleine Single-Page App (SPA) mitComponents. Components sind in AngularJS als Teil eines Moduls imple-mentierbar und lehnen sich an die Web-Components an, das sind selbstdefinierbare HTML-Tags. In AngularJS hat jede Component einen Na-men und bezieht sich damit auf HTML-Tags, die jeden Großbuchstabendurch einen Bindestrich und den entsprechenden Kleinbuchstaben er-setzt. Die Component "adressenListe"beispielsweise wird mit den Tags
<adressen-liste> ... </adressen-liste>
verwendet. Sie wird in AngularJS mit der Funktion component eines Mo-duls definiert und neben dem Namen mit einem Objekt
{
templateUrl: "...",
controller: function(...) {...},
bindings: {...}
}
versehen, das die Adresse der Templatedatei, den Controller und op-tional die Bindung zu importierenden oder exportierenden Daten be-nennt. In AngularJS zeichnet sich eine Component grundsätzlich da-durch aus, dass alle Daten nur innerhalb ihres Controllers gültig sind,ein- und ausgehende Datenflüsse sowie von der Component gefeuerteEreignisse müssen über das Bindings-Objekt definiert werden. Als Kon-sequenz ist die $scope-Variable von AngularJS als öffentliches Objektin einer Component wirkungslos. Stattdessen muss im entsprechendenTemplate mit $ctrl auf den Controller mit seinen Properties zugegrif-fen werden (Abbildung 3.11). Hierbei ist innerhalb einer Componentauch gewährleistet, dass immer nur auf das passende Controllerobjekt$ctrl zugegriffen wird.
3.5 Single Page App mit Components und Datenbankzugriffen
Abb. 3.11: Verantwortlichkeitsbereiche (Scopes) zweier verschachtelter Componentsund der Datenbindungen zwischen ihren Controllern ($ctrl).
Für weitere Details zu Components siehe den Developer Guide von An-gularJS, https://docs.angularjs.org/guide/component.
3.5.1 Bindings
Üblicherweise können in AngularJS Daten an irgendeiner Stelle verän-dert werden und sind mit der 2-Wege-Bindung auch überall verändert.In Components wird mit diesem allgemeinen Grundsatz gebrochen, ei-ne Component soll nur diejenigen Daten ihres lokalen Zuständigkeits-bereichs ändern können. Nur so kann in einer komplexen Anwendungnachverfoĺgt werden, wer welche Daten wann verändert hat. Für Com-ponents in AngularJS gelten daher folgende Konventionen:
• Eingaben in eine Component sollten mit den Binding < für ausder Elternkomponente eingehende Daten (Einwegbindung) ver-sehen werden, beispielsweise für ein Objekt adresse:
bindings: {
adresse: ’<’
}
• Ausgaben an die Elternkomponente werden mit den Binding & de-finiert, typischerweise als in der Component gefeuerte Ereignis-se. Beispielsweise würden die in den Funktionen onUpdate oderonDelete des Controllers der <inner>-Komponente gefeuerten Er-eignisse
bindings: {
onUpdate: ’&’,
onDelete: ’&’
}
in der Elternkomponente <outer> die Ereignisbehandleron-update oder on-delete aufrufen, wenn sie dort mit
<outer on-update="..." on-delete="...">
<inner> ... </inner>
</outer>
angegeben werden. Hierbei sind die drei Punkte in Anführungs-zeichen jeweils die zuständigen Ereignisbehandler im Controllerder <outer>-Komponente.
Mit Components lässt sich nun eine webbasierte Single-Page App pro-grammieren, indem einerseits gleich mit dem Startaufruf alle Com-ponents aufgebaut werden, allerdings mit den Direktiven ng-hide bzw.ng-show abhängig von dem aktuellen Wert von Schaltervariablen deszuständigen Controllers angezeigt bzw. verborgen werden. Abhängigvon spezifischen Ereignisbehandlern, beispielsweise über die Direktiveng-click können diese Schaltervariablen verändert werden. Eine Bei-spielanwendung ist mit den folgenden Listings gegeben. Zunächst deDatei index.html, die das Viewmodel implementiert:
Hier wird das Modul sowie seine beiden Components definiert. DieComponent adressenListe wird ab Zeile 10 definiert, Die erste ist zurDarstellung der gesamten Adressenliste zuständig und enthält denController zur Steuerung der Datenbindung zum Model. Die Compo-nent adressenDetail ab Zeile 36 ist zur Anzeige und Editierung einereinzelnen Adresse verantwortlich und hat einen Controller, der die An-zeige über einen Schalter editMode zur Editierung ein- oder ausschaltet.Über die Bindungen (Zeile 50 bis 53) wird ein Objekt adresse von außenimportiert und ein Ereignis onUpdate nach außen gefeuert.Aus diesem Viewmodel ergibt sich noch nicht unbedingt die Hierar-chie der Components, sie wird durch den HTML-Teil der Indexdatei unddurch die beiden Templates im Unterverzeichnis templates festgelegt.
Das erste Template ist zur Darstellung der vollständigen Adresslistevorgesehen, das andere zur editierbaren Darstellung einer einzelnenAdresse. Zusammen mit dem HTML-Teil der index.html ergibt sich da-durch die folgende Grobstruktur der Components in der View:
3.5 Single Page App mit Components und Datenbankzugriffen
...
</table>
</adressen-liste>
</body>
Der Datenbankkonnektor auf Serverseite schließlich ist in Listing 19angegeben.
Listing 19: Das serverseitige PHP-Skript, das in Listing 16 aufgerufenwird.
1 <?php
2 if (!isset($_GET[’action’])) {
3 die ("Kein Feld \"action\" in der GET-Method! Was soll ich
tun?");
4 }
5
6 $db = "AdressDB";
7 $table = "adressen";
8
9 $mysqli = new mysqli("localhost", "user", "c5dDC8VJemscKPQS",
$db);
10 $mysqli->query("SET CHARACTER SET ’utf8’");
11 $mysqli->query("SET NAMES ’utf8’");
12
13 if ($_GET[’action’] === "list") {
14 $sql = "SELECT * FROM $table";
15 $result = $mysqli->query($sql);
16 $array = array();
17 while ($entry = $result->fetch_assoc()) {
18 $array[] = $entry;
19 }
20 echo json_encode($array);
21 } else if ($_GET[’action’] === "update") {
22 $entry = json_decode($_GET[’json’]);
23 $sql = "UPDATE $table SET ";
24
25 foreach ($entry as $key => $value) {
26 if ($key === "\$\$hashKey") continue;
27 if ($key === "id") {
28 $where = " WHERE id=$value";
29 continue;
30 }
31 $sql .= " $key=’$value’,";
32 }
33 // Delete last comma:
34 $sql = substr($sql, 0, strlen($sql) - 1);
35
73
3 AngularJS
36 $sql .= $where;
37 $mysqli->query($sql);
38 }
39 ?>
Bekommt er per $_GET als Aufrufparameter action=list, so selektiert eralle Adressen der Datenbank und gibt sie als JSON-String an die Appli-kation aus, während mit action=update ein Parameter json mit der zuändernden Adresse als JSON-Objekt erwartet wird.
3.6 Bewertung und Ausblick
Es ist immer ein gewisses Risiko, ein neues Programmierkonzept odereine aktuelle Softwarebibliothek in ein Lehrwerk aufzunehmen. Insbe-sondere trifft dies zu, wenn es sich wie bei AngularJS um ein Frame-work handelt, das nicht standardisiert oder auf andere Art und Weiseübergeordnet legitimiert ist. So ist die Gefahr nicht vollkommen ausge-schlossen, dass zu dem Zeitpunkt, zu dem Sie diese Zeilen lesen, Angu-larJS bereits als veraltet gilt und ganz andere Konzepte zu empfehlensind. Für ein Lehrwerk, das auf die praktischen Probleme der Zukunftvorbereiten und das dafür notwendige Handwerkszeug bereit stellenmöchte, wäre das Aufzeigen einer fachlichen Sackgasse oder eines in-haltlichen Irrweges nicht zielführend.
Doch es sprechen aus meiner Sicht mehrere Gründe dafür, dass Angu-larJS auch im Verlaufe des nächsten Jahrzehnts eine bedeutende Rollespielen wird. Zum Ersten ist es seit mehr als einem halben Jahrzehntein Projekt des zur Zeit größten und mächtigsten Innovationstreibersder digitalen Ökonomie, der Google Inc. Ein Ende des Projekts seitensGoogle ist nicht erkennbar und wäre in den nächsten Jahren mindes-tens überraschend.
Ein weiteres Argument zur Behandlung von AngularJS ist die Tatsache,dass dort moderne und aktuelle Konzepte des Software Engineeringsangewandt werden, so Kontrollflussumkehr IoC, Dependency Injecti-on, Datenbindung und lose Kopplung. Selbst wenn AngularJS als Sys-tem vollständig in Vergessenheit geraten sein sollte, wäre es allein alsAnwendungsbeispiel dieser wichtigen Konzepte didaktisch wertvoll.
Zum Dritten bewirkt AngularJS einen sehr beachtenswerten Paradig-menwechsel der Softwareentwicklung im Web, die effiziente Aufgaben-verlagerung weg vom Server hin zum Client. Waren in den ersten Jah-ren des Internet, also Ende der 1990er Jahre, mit JavaScript, Java Ap-plets und Flash Webanwendungen vorherrschend, die dem Client fastdie gesamte Arbeit überließen, so war es in den 2000er und beginnen-den 2010er Jahren der Server, auf den aufgrund zentral zu verwalten-der Daten mit PHP, Java EE oder ASP konzeptionell die Hauptlast derWebanwendungen verlagert wurde; die serverseitigen Skripte und Pro-gramme waren zuständig sowohl für Darstellung als auch Ablauflogik
74
3.6 Bewertung und Ausblick
eines Webauftritts. Selbst modernere Ansätze wie Ruby on Rails, diemit einer strikteren Architektur die Webanwendungen nach dem MVC-Muster strukturieren, änderten nichts an der zentralen Rolle des Ser-vers. Erst durch das MVVM-Muster mit einem clientseitigen ViewMo-del werden große Teile der Ausführung einer Webanwendung dem Cli-ent übertragen. Die dadurch erst mögliche lose Kopplung hat mehrerewichtige Vorteile, vor allem die konsequente Trennung der zentralenFunktionen des Models und der Datenspeicherung von den Funktio-nen der Darstellung und der Bedieneroberfläche auf dem Client. Dieswiederum ermöglicht die weitgehend getrennte Programmierung vonGUI und Datenspeicherung, d.h. View und Model. Es liegt auf der Hand,dass auf diese Weise zentrale Datenspeicherungen von unterschiedli-chen Clientsystemen dargestellt und verarbeitet werden können, insbe-sondere von mobilen Endgeräten. Grundsätzlich könnte AngularJS oderein darauf aufbauender Ansatz sich zu einer Schlüsseltechnologie fürdie mobile ubiquitäre digitale Ökonomie entwickeln.
75
3 AngularJS
3.7 Übungsaufgaben
Aufgabe 3.1 (Direktiven und Datenbindung) (a) Schreiben Sie eine An-wendung, die zwei Textfelder „Menge“ und „Preis“ anzeigt und schonbei der Eingabe den Gesamtbetrag Menge mal Preis ausgibt.
(b) Schreiben Sie eine Webseite, in der mit einem Slider ein dargestell-tes Bild ausgeblendet werden kann. Benutzen Sie dazu das CSS-Attributopacity für Ihr Bild.
(c) Schreiben Sie eine Webanwendung, die einen Text und eine Check-box anzeigt, wobei der Text sich ändert, wenn die Checkbox selektiertist:
Verwenden Sie die Direktiven ng-hide und ng-show und dieAPI https://docs.angularjs.org/api/ng/directive/. (Soll-te dies nicht helfen, verwenden Sie die Hinweise auf http:
[10] Tarasiewicz, P. ; Böhm, R. : AngularJS. Eine praktische Einführungin das JavaScript-Framework. Heidelberg : dpunkt.verlag, 2014
[11] Wenz, C. : ‘Die 10 Gebote. Zehn Dinge, die man über JavaScriptwissen muss’. In: Entwickler Magazin Spezial 5 (2015), S. 10–16.– https://entwickler.de/entwickler-magazin/
[12] Zeidler, E. (Hrsg.): Teubner Taschenbuch der Mathematik. Teil 1.Leipzig : B. G. Teubner, 1996
Internetquellen
[DOM] https://w3.org/DOM – Spezifikation des W3C des DOM.
[JS] https://developer.mozilla.org/en-US/docs/Web/JavaScript –JavaScript-Dokumentation des Mozilla Developer Network.
[JSL] http://www.jslint.com/ – JSLint, Programm zur Überprüfung derQualität von JavaScript Quelltext.
[W3C] http://www.w3c.org/ – World Wide Web Consortium, Gremiumzur Standardisierung der Web-Techniken; eine deutsche Überset-zung wichtiger Teile dieses Webauftritts findet man unter http:
//www.edition-w3c.de/, auf die auch das Deutsch-ÖsterreichischeBüro W3C.DE/AT http://www.w3c.de/ bzw. http://www.w3c.at/
https://en.wikipedia.org/wiki/File:Callback-notitle.svg) . . . . . . 221.4 Objekt-Hierarchie des Browsers mit wichtigen Objekten, insbesondere
das document-Objekt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271.5 Der DOM-Baum des HTML-Dokuments aus Listing 3. . . . . . . . . . . 301.6 Zustandsdiagramm eines XMLHttpRequest-Objekts. Vgl. [6, S. 26]. . . 341.7 Polling und Long Polling als Methoden zur Synchronisation eines zen-
tralen Datenbestandes. Vgl. [6, S. 27f]. . . . . . . . . . . . . . . . . . . . 381.8 Kommunikation zwischen Hauptprozess und Worker. . . . . . . . . . 393.9 Das MVVM-Muster (links) für eine Webanwendung, im Vergleich dazu
das MVC-Muster (rechts). Da bei MVC die Hauptlast der Webanwendungauf dem Server läuft, ist der Browser in diesem Fall ein Thin Client. BeiMVVM dagegen hat er mit der Poxy-Schicht MVVM einen großen Teilder Arbeitslast und ist daher in diesem Fall ein Fat Client. . . . . . . . 59
3.10 Struktur der Grundelemente von AngularJS. . . . . . . . . . . . . . . . 653.11 Verantwortlichkeitsbereiche (Scopes) zweier verschachtelter Com-
