<h2>Grammatik bei Websprachen</h2> <p>Die Websprachen HTML, CSS und sämtliche rund um das Web verwendete Programmiersprachen sind in ihrem Aufbau bis ins Kleinste definiert und geregelt. Leider kommt man außerhalb eines Informatik- oder Linguistik-Studium nicht mit mit sogenannten <a href="http://de.wikipedia.org/wiki/Konstruierte_Sprache#Formale_Sprachen">Formalen Sprachen</a> in Berührung. Dabei erscheint mir ein gewisses Grundverständnis äußerst hilfreich.</p> <p>Wer HTML und CSS verstehen und anwenden will, kommt nicht darum herum, die Syntax-Bestandteile und Verkettungsegeln zu kennen. In HTML haben wir bekanntlich <dfn>Elemente</dfn> und deren <dfn>Tags</dfn>, die wiederum <dfn>Attribute</dfn> enthalten. Und dazwischen haben wir wiederum andere Elemente oder einfachen Text. Das sind die einfachen Grundlagen der Textauszeichnung.</p> <p>Die <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Syntax">grundlegende Syntax von CSS</a> ist nicht nennenswert komplizierter, aber ihre Benennungen meist unbekannt. Ein Stylesheet besteht aus sogenannten <dfn>Regeln</dfn>. Die bestehen aus einem <dfn>Selektor</dfn> und dem <dfn>Deklarationsblock</dfn>. Letzter enthält, wie der Name schon sagt, <dfn>Deklarationen</dfn>, die aus einer <dfn>Eigenschaft</dfn> und einem zugewiesenen <dfn>Wert</dfn> bestehen. Dieses Aufbauprinzip verdeutlicht gleichzeitig, wie CSS funktioniert.</p> <h2>JavaScript-Syntax &ndash; wer versteht die schon?!</h2> <p>Bei JavaScript ist es nicht mehr so einfach, schließlich geht es dabei weder um Textauszeichnung mit Elementen noch um Formatierungsregeln für entsprechend strukturierte Dokumente. JavaScript ist eine vollwertige Programmiersprache und ein Computerprogramm ist um einiges komplexer.</p> <p>Viele Fehler, die JavaScript-Anfänger machen, scheinen mir auf das mangelnde Verständnis der basalen Syntax zurückzugehen. Aber auch Profis müssen die Syntaxregeln kennen, um JavaScript wirklich ausschöpfen zu können und fortgeschrittene, elegante Programmiertechniken eigenständig anwenden zu können. Daher möchte ich eine Übersicht über die Grundstrukturen eines JavaScript-Programmes geben. Ich werde mich dabei am <a href="http://bclary.com/log/2004/11/07/">ECMAScript-Standard</a> orientieren und die englischen Originalbezeichnungen übernehmen. Es geht mir nicht um die korrekte und vollständige Wiedergabe der formalen Grammatik von ECMAScript, daher werde ich an manchen Stellen Kürzungen und Vereinfachungen vornehmen.</p> <h2 id="statements">Statements (Anweisungen)</h2> <p>Ein JavaScript-Programm besteht aus einer Aneinandereihung von <dfn>Statements</dfn>. Sie strukturieren ein Script grob oder stellen die einzelnen Anweisungen dar, die beim Ausführen des Programmes abgearbeitet werden.</p> <p>Die Statements, die die Struktur stark bestimmen, sind als <a href="https://wiki.selfhtml.org/wiki/Kontrollstruktur">Kontrollstrukturen</a> bekannt: <code>if</code>- und <code>switch</code>-Anweisungen, <code>while</code>- und <code>for</code>-Schleifen und so weiter.</p> <p>Daneben stehen als wichtiger Strukturbildner die Funktionsdeklarationen. (Diese laufen in der ECMAScript-Spezifikation als eigene Kategorie, aber ich zähle sie an dieser Stelle der Einfachheit halber zu den Statements.)</p> ~~~js function meineFunktion (...) { ... } ~~~ <p>Die restlichen Statements sind im Groben diejenigen Anweisungen, die mit einem Semikolon abgeschlossen werden und nach denen man in der Regel einen Zeilenumbruch einfügt. Sie stecken meist in den oben genannten Kontrollstrukturen und Funktionen. Dazu gehören <code>continue</code>, <code>break</code> und <code>return</code> sowie die Variablen-Deklaration mit <code>var bla = "wert"</code>.</p> <p>Das wohl häufigste Statement ist jedoch das sogenannte <dfn>Expression Statement</dfn>. Das ist ein Statement, das aus einer beliebigen Expression besteht. Dies führt uns zu der Frage: Was sind eigentlich Expressions?</p> <h2 id="expressions">Expressions (Ausdrücke)</h2> <p>Expressions kommen fast überall in JavaScript vor und bilden das große Gegenstück zu Statements. Expressions sind quasi mathematische Termini, die nach gewissen Regeln aufgelöst werden, sodass am Ende ein Ergebniswert herauskommt.</p> <p>Statements (die nicht weitere Statements enthalten können) enthalten für gewöhnlich Expressions. Der Witz dabei ist, dass in der Regel nicht festgelegt ist, wie diese Expressions zusammengesetzt sein müssen &ndash; es wird meist nur ein bestimmtes Ergebnis mit einem bestimmten Typ erwartet. Das lässt Programmierern viel Freiheit und ermöglicht besondere und elegante Umsetzungen.</p> <p>Nehmen wir eine ganz einfache Expression: <code>1 + 1</code>. Wir haben hier Werte, die mit einem Operator verknüpft werden. Dies ist das Grundmodell für alle Expressions, so kompliziert sie durch dutzende Operanden und Operatoren auch sein mögen.</p> <p>Die wichtigsten Bestandteile von Expressions sind <dfn>Identifier</dfn> (Bezeichner) und <dfn>Literale</dfn>. Identifier sind Namen für Variablen und Objekte. Mit Literalen notiert man unter anderem Strings (z.B. <code>"Hallo Welt!"</code>), Zahlen (z.B. <code>56.12</code>) oder Arrays in Kurzschreibweise (z.B. <code>[1, 2, 3]</code>). Die beiden Einsen im obigen Beispiel sind übrigens Zahlen-Literale.</p> <h3 id="operatoren">Operatoren</h3> <p>Zu den genannten Bestandteilen von Expressions kommt ein Arsenal von unterschiedlichen <a href="http://de.selfhtml.org/javascript/sprache/operatoren.htm">Operatoren</a> hinzu. Aus der Mathematik und der Logik sind die Rechenoperatoren (z.B. <code>+</code>) und die Vergleichsoperatoren (z.B. <code>==</code>) am bekanntesten. Daneben gibt es nicht minder wichtige Operatoren, die aber selten als solche wahrgenommen werden: Den <code>.</code> zum Zugriff auf Eigenschaften eines Objektes (z.B. <code>objekt<strong>.</strong>eigenschaft</code>) sowie <code>(&nbsp;)</code> zum Aufrufen einer Funktion (z.B. <code>funktion<strong>()</strong></code>). Das Zeichen <code>=</code> steht für den Zuweisungoperator. Aber auch <code>new</code> zum Instantiieren eines Objektes und <code>typeof</code> zur Abfrage eines Variablentyps sind Operatoren.</p> <p>Operatoren benötigen einen Operanden, wie der Negationsoperator <code>!</code>, oder zwei Operanden, wie der Vergleichsoperator <code>&lt;=</code>, oder auch drei, wie der Konditional-Operator <code> x <strong>?</strong> y <strong>:</strong> z</code>.</p> <p>Viele Operatoren benötigen Operanden von einem bestimmten Typ. Der Negationsoperator <code>!</code> erwartet zum Beispiel einen Operanden vom Typ <code>Boolean</code> (d.h. <code>true</code> oder <code>false</code>). Die Spezialität von JavaScript liegt darin, dass die Operandentypen bei der Berechnung automatisch umgewandelt werden, sodass sie den Ansprüchen der mit ihnen verknüpften Operatoren genügen &ndash; dies nennt sich <a href="http://de.wikipedia.org/wiki/Dynamische_Typisierung">dynamische Typisierung</a>. Dadurch kann man beispielsweise <code>!123</code> schreiben, ohne dass etwas Schlimmes passiert. Die Zahl 123 wird einfach in den Typ <code>Boolean</code> umgewandelt, dabei kommt <code>true</code> heraus, um anschließend den Operator anzuwenden.</p> <p>Die Berechnung des Ergebnisses einer Expression erfolgt nach der <a href="https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Operatorenrangfolge">Operatorenrangfolge</a>, die bestimmt, welche Teil-Expressions zuerst berechnet werden müssen. Das Prinzip kennen wir aus der Schulalgebra, eine Grundregel lautet etwa <em>»Punkt- vor Strichrechnung«</em>. Nur wird in JavaScript selbst das Aufrufen von Funktionen und das Ansprechen von Objekteigenschaften mit Operatoren gelöst, daher ist die Rangfolge entsprechend lang.</p> <h3 id="function-expressions">Function Expressions (Funktionsausdrücke)</h3> <p>Wir haben bereits die Funktionsdeklaration (Function Declaration) als Statement kennengelernt. Eine Alternative zum Erzeugen von Funktionen stellen die <dfn>Functions Expressions</dfn> dar. Dies ist eine Spezialität von JavaScript, die viele elegante, aber auch unverständliche Schreibweisen erlaubt. Dummerweise ist ihre Syntax mit der der Deklaration fast identisch. Der einzige Unterschied ist, dass die Function Expression eben überall vorkommen können, wo Expressions erlaubt sind. Und Function Expressions müssen keinen Namen haben. Daher nennt man sie auch <em>namenlose</em> oder <em>anonyme</em> Funktionen.</p> ~~~js function funktionsname () { window.alert("Dies ist eine Function Declaration."); } alert( function () { alert("Dies ist eine Function Expression!"); } ); ~~~ <p>Folgende Statements sind in jedem Fall äquivalent, sie legen im aktuellen Variablen-Geltungsbereich eine Funktion an:</p> ~~~js function funktionsname () { window.alert("Dies ist eine Function Declaration."); } var funktionsname = function () { window.alert("Dies ist eine Function Expression in einem Variable Statement!"); }; ~~~ <p>Das Ergebnis der Function Expression ist das erzeugte Funktionsobjekt. Dies wird hier in einer Variable gespeichert.</p> <h2 id="nutzen">Und was nützt dieses Wissen?</h2> <p>Nach diesen trockenen Beschreibungen seien einige Beispiele genannt. Moderne Scripte nutzen zunehmend die Einsicht in die JavaScript-Syntax, um Prozesse einfach und elegant umzusetzen. JavaScript-Anfänger sind manche Schreibweisen unbekannt, weil sich Lehrwerke sinnigerweise auf einfache und übliche Beispiele beschränken. Fortgeschrittene Programmierer übernehmen Schreibweisen, wissen aber häufig nicht, wie sie funktioniert und warum diese Schreibweisen erlaubt sind.</p> <p>Function Expressions finden überall dort Einsatz, wo man schnell eine Funktion erzeugen will, ohne dass sie im aktuellen Geltungsbereich gespeichert werden muss. Ein Beispiel ist die Übergabe eines Funktionsobjektes an <code>setTimeout</code> oder die Zuweisung als Event-Handler:</p> ~~~js window.setTimeout(function () { window.alert("Wird nach einer Sekunde ausgeführt"); }, 100); element.onclick = function () { window.alert("Element wurde geklickt"); }; ~~~ <p>Function Expressions spielen ferner eine wichtige Rolle beim Arbeiten mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/Scope#Closure">Closures</a>.</p> <p>Wir können anonyme Funktionen, die sofort ausgeführt werden, verwenden, um Teile des Scriptes zu kapseln:</p> ~~~js (function () { var lokaleVariable = "Diese Variable ist nur in dieser anonymen Funktion verfügbar."; })(); ~~~ <p>Diese Syntax mag obskur aussehen, ist aber leicht zerlegbar, wenn man den Aufbau von Statements und Expressions versteht: Es handelt sich um ein Expression Statement mit einer geklammerten Function Expression gefolgt von einem Call-Operator zum sofortigen Aufrufen der Funktion. (Die Parameterliste ist leer.)</p> <p>Wir kennen die Anwendung von Schleifen nach dem Schema <code>while (a > 5) ...</code>. Zwischen den Klammern steht eine Expression, die einen Boolean-Wert ergeben muss (wenn nicht, dann wird der Typ einfach automatisch umgewandelt). Wir sind es gewohnt, hier mit Variablen und Vergleichsoperatoren zu arbeiten. In manchen Fällen können wir jedoch völlig anders aufgebaute Expressions an dieser Stelle nutzen. Nehmen wir das Script <a href="http://www.quirksmode.org/js/findpos.html">Find position</a>. Das Script steigt von einem Element im Knotenbaum nach oben und addiert die Offset-Werte der Elemente, an denen es vorbeiläuft.</p> ~~~js function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (<strong>obj = obj.offsetParent</strong>); } return [curleft,curtop]; } ~~~ <p>Anstelle eines Vergleiches findet man hier eine Expression mit einem Zuweisungsoperator. Ja, eine Zuweisung ist auch nur eine Expression und hat ein Ergebnis &ndash; nämlich den zugewiesen Wert. Solange <code>obj.offsetParent</code> auf ein Elementknoten zeigt, wird <code>obj</code> aktualisiert und die Schleife immer wieder ausgeführt (denn in Boolean umgewandelt ergibt ein Objekt <code>true</code>).</p> <p>Beim obersten Elementknoten ergibt <code>obj.offsetParent</code> <code>undefined</code>. Somit ist das Ergebnis der Zuweisung <code>undefined</code>, das ist gleich <code>false</code>. An dieser Stelle bricht die Schleife also ab.</p> <p>Möglich ist das ganze, weil zwischen den Klammern <em>irgendeine</em> Expression stehen kann. Bei <code>for</code>-Schleifen gilt dasselbe, das Schema lautet <code>for (<em>Expression</em>; <em>Expression</em>; <em>Expression</em>) <em>Statement</em></code>.</p> <p>Der folgende Code durchläuft eine Elementliste:</p> ~~~js var elementList = document.getElementsByTagName("p"); for (var i = 0; i &lt; elementList.length; i++) { var element = elementList[i]; // Mach was mit element } ~~~ <p>Auch hier können wir die Zuweisung in den Schleifenkopf verlagern:</p> ~~~js var elementList = document.getElementsByTagName("p"); for (var i = 0, element; <strong>element = elementList[i]</strong>; i++) { // Mach was mit element } ~~~ <p>Wenn <code>i</code> so groß wird, dass ihm kein Element mehr in der Knotenliste entspricht, dann ergibt <code>elementList[i]</code> einfach <code>null</code>, was gleich <code>false</code> ist. Die Schleife bricht also rechtzeitig ab.</p> <p>Wenn man die aktuelle Zeit in Erfahrung bringen will, muss man üblicherweise mit <code>new Date()</code> ein <a href="http://de.selfhtml.org/javascript/objekte/date.htm">Date-Objekt</a> erzeugen. Will man anschließend sowieso nur eine Methode aufrufen und braucht das Objekt darüber hinaus nicht mehr, kann man ebenso in eine Zeile schreiben:</p> ~~~js >window.alert("Wir schreiben das Jahr " + (new Date).getFullYear()); ~~~ <p>Genauso kann man Literale direkt als Objekte behandeln:</p> <p>< ~~~js // String-Literal window.alert("test".toUpperCase()); // Literal für einen Regulären Ausdruck, erzeugt ein <a href="http://de.selfhtml.org/javascript/objekte/regexp.htm">RegExp-Object</a> window.alert(/^[a-z]+$/i.test("abc")); ~~~ <p>Am bekanntesten ist das <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#neue_Objekte_erzeugen">Object-Literal</a>, mit dem heutzutage viele Scripte organisiert werden. Dieses hat eine Eigenstruktur, die sich nicht allein mit den Begriffen Statement oder Expression beschreiben lassen. Es enthält aber an bestimmter Stelle Expressions, sehr häufig Function Expressions:</p> ~~~js var container = { funktion : function () { window.alert("Function Expression"); } }; container.funktion(); ~~~ <p>Der logische Oder-Operator (<code>||</code>) hat in JavaScript die Eigenheit, dass er nicht einen <code>Boolean</code>-Wert zurückgibt, sondern denjenigen Operanden, der <code>true</code> ergibt, wenn er in <code>Boolean</code> umgewandelt wird. Auf die Weise können wir Standardwerte für Funktionsparameter umsetzen, falls diese nicht gesetzt sind:</p> ~~~js function funktion (parameter) { parameter = parameter || "Standardwert"; window.alert(parameter); } funktion("Hallo!"); funktion(); <p>Häufige Verwendung findet dies bei Event-Handlern zum browserübergreifenden Zugriff auf das Event-Objekt:</p> ~~~js function handler (e) { // Wenn der Browser das Event-Objekt nicht als Parameter übergeben hat, // lese es aus window.event (Hallo, Internet Explorer!) e = e || window.event; window.alert(e.type); } ~~~ <p>Christian Heilmann bietet weitere Beispiele in seinem englischsprachigen Artikel <a href="http://www.wait-till-i.com/2007/11/27/javascript-shortcut-notations-that-shouldnt-be-black-magic-to-the-average-developer/" lang="en" xml:lang="en" hreflang="en">JavaScript shortcut notations that shouldn’t be black magic to the “average developer”</a>, darunter der oben genannte äußerst nützliche Konditional-Operator.</p> <p>Nun ist es nicht immer erstrebenswert, die kürzeste und unverständlichste Schreibweise zu verwenden. Aber das Wissen um Expressions kommt einem zu Gute, wenn Expressions zunehmend komplex werden und man deren Berechnung nachvollziehen will. Andererseits kann man Statements mit Expressions gekonnt mixen, wenn man weiß, dass beliebige Expressions an vielen Stellen erlaubt sind.</p>

<h2>Grammatik bei Websprachen</h2> <p>Die Websprachen HTML, CSS und sämtliche rund um das Web verwendete Programmiersprachen sind in ihrem Aufbau bis ins Kleinste definiert und geregelt. Leider kommt man außerhalb eines Informatik- oder Linguistik-Studium nicht mit mit sogenannten <a href="http://de.wikipedia.org/wiki/Konstruierte_Sprache#Formale_Sprachen">Formalen Sprachen</a> in Berührung. Dabei erscheint mir ein gewisses Grundverständnis äußerst hilfreich.</p> <p>Wer HTML und CSS verstehen und anwenden will, kommt nicht darum herum, die Syntax-Bestandteile und Verkettungsegeln zu kennen. In HTML haben wir bekanntlich <dfn>Elemente</dfn> und deren <dfn>Tags</dfn>, die wiederum <dfn>Attribute</dfn> enthalten. Und dazwischen haben wir wiederum andere Elemente oder einfachen Text. Das sind die einfachen Grundlagen der Textauszeichnung.</p> <p>Die <a href="http://jendryschik.de/wsdev/einfuehrung/css/syntax">grundlegende Syntax von CSS</a> ist nicht nennenswert komplizierter, aber ihre Benennungen meist unbekannt. Ein Stylesheet besteht aus sogenannten <dfn>Regeln</dfn>. Die bestehen aus einem <dfn>Selektor</dfn> und dem <dfn>Deklarationsblock</dfn>. Letzter enthält, wie der Name schon sagt, <dfn>Deklarationen</dfn>, die aus einer <dfn>Eigenschaft</dfn> und einem zugewiesenen <dfn>Wert</dfn> bestehen. Dieses Aufbauprinzip verdeutlicht gleichzeitig, wie CSS funktioniert.</p> <h2>JavaScript-Syntax &ndash; wer versteht die schon?!</h2> <p>Bei JavaScript ist es nicht mehr so einfach, schließlich geht es dabei weder um Textauszeichnung mit Elementen noch um Formatierungsregeln für entsprechend strukturierte Dokumente. JavaScript ist eine vollwertige Programmiersprache und ein Computerprogramm ist um einiges komplexer.</p> <p>Viele Fehler, die JavaScript-Anfänger machen, scheinen mir auf das mangelnde Verständnis der basalen Syntax zurückzugehen. Aber auch Profis müssen die Syntaxregeln kennen, um JavaScript wirklich ausschöpfen zu können und fortgeschrittene, elegante Programmiertechniken eigenständig anwenden zu können. Daher möchte ich eine Übersicht über die Grundstrukturen eines JavaScript-Programmes geben. Ich werde mich dabei am <a href="http://bclary.com/log/2004/11/07/">ECMAScript-Standard</a> orientieren und die englischen Originalbezeichnungen übernehmen. Es geht mir nicht um die korrekte und vollständige Wiedergabe der formalen Grammatik von ECMAScript, daher werde ich an manchen Stellen Kürzungen und Vereinfachungen vornehmen.</p> <h2 id="statements">Statements (Anweisungen)</h2> <p>Ein JavaScript-Programm besteht aus einer Aneinandereihung von <dfn>Statements</dfn>. Sie strukturieren ein Script grob oder stellen die einzelnen Anweisungen dar, die beim Ausführen des Programmes abgearbeitet werden.</p> <p>Die Statements, die die Struktur stark bestimmen, sind als <a href="http://de.wikipedia.org/wiki/Kontrollstruktur">Kontrollstrukturen</a> bekannt: <code>if</code>- und <code>switch</code>-Anweisungen, <code>while</code>- und <code>for</code>-Schleifen und so weiter.</p> <p>Daneben stehen als wichtiger Strukturbildner die Funktionsdeklarationen. (Diese laufen in der ECMAScript-Spezifikation als eigene Kategorie, aber ich zähle sie an dieser Stelle der Einfachheit halber zu den Statements.)</p> <pre>function meineFunktio</p> on (...) { ... }</pre> <p>Die restlichen Statements sind im Groben diejenigen Anweisungen, die mit einem Semikolon abgeschlossen werden und nach denen man in der Regel einen Zeilenumbruch einfügt. Sie stecken meist in den oben genannten Kontrollstrukturen und Funktionen. Dazu gehören <code>continue</code>, <code>break</code> und <code>return</code> sowie die Variablen-Deklaration mit <code>var bla = "wert"</code>.</p> <p>Das wohl häufigste Statement ist jedoch das sogenannte <dfn>Expression Statement</dfn>. Das ist ein Statement, das aus einer beliebigen Expression besteht. Dies führt uns zu der Frage: Was sind eigentlich Expressions?</p> <h2 id="expressions">Expressions (Ausdrücke)</h2> <p>Expressions kommen fast überall in JavaScript vor und bilden das große Gegenstück zu Statements. Expressions sind quasi mathematische Termini, die nach gewissen Regeln aufgelöst werden, sodass am Ende ein Ergebniswert herauskommt.</p> <p>Statements (die nicht weitere Statements enthalten können) enthalten für gewöhnlich Expressions. Der Witz dabei ist, dass in der Regel nicht festgelegt ist, wie diese Expressions zusammengesetzt sein müssen &ndash; es wird meist nur ein bestimmtes Ergebnis mit einem bestimmten Typ erwartet. Das lässt Programmierern viel Freiheit und ermöglicht besondere und elegante Umsetzungen.</p> <p>Nehmen wir eine ganz einfache Expression: <code>1 + 1</code>. Wir haben hier Werte, die mit einem Operator verknüpft werden. Dies ist das Grundmodell für alle Expressions, so kompliziert sie durch dutzende Operanden und Operatoren auch sein mögen.</p> <p>Die wichtigsten Bestandteile von Expressions sind <dfn>Identifier</dfn> (Bezeichner) und <dfn>Literale</dfn>. Identifier sind Namen für Variablen und Objekte. Mit Literalen notiert man unter anderem Strings (z.B. <code>"Hallo Welt!"</code>), Zahlen (z.B. <code>56.12</code>) oder Arrays in Kurzschreibweise (z.B. <code>[1, 2, 3]</code>). Die beiden Einsen im obigen Beispiel sind übrigens Zahlen-Literale.</p> <h3 id="operatoren">Operatoren</h3> <p>Zu den genannten Bestandteilen von Expressions kommt ein Arsenal von unterschiedlichen <a href="http://de.selfhtml.org/javascript/sprache/operatoren.htm">Operatoren</a> hinzu. Aus der Mathematik und der Logik sind die Rechenoperatoren (z.B. <code>+</code>) und die Vergleichsoperatoren (z.B. <code>==</code>) am bekanntesten. Daneben gibt es nicht minder wichtige Operatoren, die aber selten als solche wahrgenommen werden: Den <code>.</code> zum Zugriff auf Eigenschaften eines Objektes (z.B. <code>objekt<strong>.</strong>eigenschaft</code>) sowie <code>(&nbsp;)</code> zum Aufrufen einer Funktion (z.B. <code>funktion<strong>()</strong></code>). Das Zeichen <code>=</code> steht für den Zuweisungoperator. Aber auch <code>new</code> zum Instantiieren eines Objektes und <code>typeof</code> zur Abfrage eines Variablentyps sind Operatoren.</p> <p>Operatoren benötigen einen Operanden, wie der Negationsoperator <code>!</code>, oder zwei Operanden, wie der Vergleichsoperator <code>&lt;=</code>, oder auch drei, wie der Konditional-Operator <code> x <strong>?</strong> y <strong>:</strong> z</code>.</p> <p>Viele Operatoren benötigen Operanden von einem bestimmten Typ. Der Negationsoperator <code>!</code> erwartet zum Beispiel einen Operanden vom Typ <code>Boolean</code> (d.h. <code>true</code> oder <code>false</code>). Die Spezialität von JavaScript liegt darin, dass die Operandentypen bei der Berechnung automatisch umgewandelt werden, sodass sie den Ansprüchen der mit ihnen verknüpften Operatoren genügen &ndash; dies nennt sich <a href="http://de.wikipedia.org/wiki/Dynamische_Typisierung">dynamische Typisierung</a>. Dadurch kann man beispielsweise <code>!123</code> schreiben, ohne dass etwas Schlimmes passiert. Die Zahl 123 wird einfach in den Typ <code>Boolean</code> umgewandelt, dabei kommt <code>true</code> heraus, um anschließend den Operator anzuwenden.</p> <p>Die Berechnung des Ergebnisses einer Expression erfolgt nach der <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Operators:Operator_Precedence">Operatorenrangfolge</a>, die bestimmt, welche Teil-Expressions zuerst berechnet werden müssen. Das Prinzip kennen wir aus der Schulalgebra, eine Grundregel lautet etwa <em>»Punkt- vor Strichrechnung«</em>. Nur wird in JavaScript selbst das Aufrufen von Funktionen und das Ansprechen von Objekteigenschaften mit Operatoren gelöst, daher ist die Rangfolge entsprechend lang.</p> <h3 id="function-expressions">Function Expressions (Funktionsausdrücke)</h3> <p>Wir haben bereits die Funktionsdeklaration (Function Declaration) als Statement kennengelernt. Eine Alternative zum Erzeugen von Funktionen stellen die <dfn>Functions Expressions</dfn> dar. Dies ist eine Spezialität von JavaScript, die viele elegante, aber auch unverständliche Schreibweisen erlaubt. Dummerweise ist ihre Syntax mit der der Deklaration fast identisch. Der einzige Unterschied ist, dass die Function Expression eben überall vorkommen können, wo Expressions erlaubt sind. Und Function Expressions müssen keinen Namen haben. Daher nennt man sie auch <em>namenlose</em> oder <em>anonyme</em> Funktionen.</p> <pre>function funktionsname () {<br> windo</p> ow.alert("Dies ist eine Function Declaration."); } alert( <strong>function () { alert("Dies ist eine Function Expression!"); }</strong> );</pre> <p>Folgende Statements sind in jedem Fall äquivalent, sie legen im aktuellen Variablen-Geltungsbereich eine Funktion an:</p> <p pre>function funktionsname () { window.alert("Dies ist eine Function Declaration."); } var funktionsname = function () { window.alert("Dies ist eine Function Expression in einem Variable Statement!"); };</pre> <p>Das Ergebnis der Function Expression ist das erzeugte Funktionsobjekt. Dies wird hier in einer Variable gespeichert.</p> <h2 id="nutzen">Und was nützt dieses Wissen?</h2> <p>Nach diesen trockenen Beschreibungen seien einige Beispiele genannt. Moderne Scripte nutzen zunehmend die Einsicht in die JavaScript-Syntax, um Prozesse einfach und elegant umzusetzen. JavaScript-Anfänger sind manche Schreibweisen unbekannt, weil sich Lehrwerke sinnigerweise auf einfache und übliche Beispiele beschränken. Fortgeschrittene Programmierer übernehmen Schreibweisen, wissen aber häufig nicht, wie sie funktioniert und warum diese Schreibweisen erlaubt sind.</p> <p>Function Expressions finden überall dort Einsatz, wo man schnell eine Funktion erzeugen will, ohne dass sie im aktuellen Geltungsbereich gespeichert werden muss. Ein Beispiel ist die Übergabe eines Funktionsobjektes an <code>setTimeout</code> oder die Zuweisung als Event-Handler:</p> <pre>wind</p> dow.setTimeout(function () { window.alert("Wird nach einer Sekunde ausgeführt"); }, 100); element.onclick = function () { window.alert("Element wurde geklickt"); };</pre> <p>Function Expressions spielen ferner eine wichtige Rolle beim Arbeiten mit <a href="http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures">Closures</a>.</p> <p>Wir können anonyme Funktionen, die sofort ausgeführt werden, verwenden, um Teile des Scriptes zu kapseln:</p> <pr re> (function () { var lokaleVariable = "Diese Variable ist nur in dieser anonymen Funktion verfügbar."; })(); </pre> <p>Diese Syntax mag obskur aussehen, ist aber leicht zerlegbar, wenn man den Aufbau von Statements und Expressions versteht: Es handelt sich um ein Expression Statement mit einer geklammerten Function Expression gefolgt von einem Call-Operator zum sofortigen Aufrufen der Funktion. (Die Parameterliste ist leer.)</p> <p>Wir kennen die Anwendung von Schleifen nach dem Schema <code>while (a > 5) ...</code>. Zwischen den Klammern steht eine Expression, die einen Boolean-Wert ergeben muss (wenn nicht, dann wird der Typ einfach automatisch umgewandelt). Wir sind es gewohnt, hier mit Variablen und Vergleichsoperatoren zu arbeiten. In manchen Fällen können wir jedoch völlig anders aufgebaute Expressions an dieser Stelle nutzen. Nehmen wir das Script <a href="http://www.quirksmode.org/js/findpos.html">Find position</a>. Das Script steigt von einem Element im Knotenbaum nach oben und addiert die Offset-Werte der Elemente, an denen es vorbeiläuft.</p> <pre> >function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (<strong>obj = obj.offsetParent</strong>); } return [curleft,curtop]; }</pre> <p>Anstelle eines Vergleiches findet man hier eine Expression mit einem Zuweisungsoperator. Ja, eine Zuweisung ist auch nur eine Expression und hat ein Ergebnis &ndash; nämlich den zugewiesen Wert. Solange <code>obj.offsetParent</code> auf ein Elementknoten zeigt, wird <code>obj</code> aktualisiert und die Schleife immer wieder ausgeführt (denn in Boolean umgewandelt ergibt ein Objekt <code>true</code>).</p> <p>Beim obersten Elementknoten ergibt <code>obj.offsetParent</code> <code>undefined</code>. Somit ist das Ergebnis der Zuweisung <code>undefined</code>, das ist gleich <code>false</code>. An dieser Stelle bricht die Schleife also ab.</p> <p>Möglich ist das ganze, weil zwischen den Klammern <em>irgendeine</em> Expression stehen kann. Bei <code>for</code>-Schleifen gilt dasselbe, das Schema lautet <code>for (<em>Expression</em>; <em>Expression</em>; <em>Expression</em>) <em>Statement</em></code>.</p> <p>Der folgende Code durchläuft eine Elementliste:</p> <pre> >var elementList = document.getElementsByTagName("p"); for (var i = 0; i &lt; elementList.length; i++) { var element = elementList[i]; // Mach was mit element }</pre> <p>Auch hier können wir die Zuweisung in den Schleifenkopf verlagern:</p> <p pre>var elementList = document.getElementsByTagName("p"); for (var i = 0, element; <strong>element = elementList[i]</strong>; i++) { // Mach was mit element }</pre> <p>Wenn <code>i</code> so groß wird, dass ihm kein Element mehr in der Knotenliste entspricht, dann ergibt <code>elementList[i]</code> einfach <code>null</code>, was gleich <code>false</code> ist. Die Schleife bricht also rechtzeitig ab.</p> <p>Wenn man die aktuelle Zeit in Erfahrung bringen will, muss man üblicherweise mit <code>new Date()</code> ein <a href="http://de.selfhtml.org/javascript/objekte/date.htm">Date-Objekt</a> erzeugen. Will man anschließend sowieso nur eine Methode aufrufen und braucht das Objekt darüber hinaus nicht mehr, kann man ebenso in eine Zeile schreiben:</p> <pre> >window.alert("Wir schreiben das Jahr " + (new Date).getFullYear());</pre> <p>Genauso kann man Literale direkt als Objekte behandeln:</p> <p>< <pre>// String-Literal window.alert("test".toUpperCase()); // Literal für einen Regulären Ausdruck, erzeugt ein <a href="http://de.selfhtml.org/javascript/objekte/regexp.htm">RegExp-Object</a> window.alert(/^[a-z]+$/i.test("abc"));</pre> <p>Am bekanntesten ist das <a href="http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#object-literale">Object-Literal</a>, mit dem heutzutage viele Scripte organisiert werden. Dieses hat eine Eigenstruktur, die sich nicht allein mit den Begriffen Statement oder Expression beschreiben lassen. Es enthält aber an bestimmter Stelle Expressions, sehr häufig Function Expressions:</p> <pr re>var container = { funktion : function () { window.alert("Function Expression"); } }; container.funktion();</pre> <p>Der logische Oder-Operator (<code>||</code>) hat in JavaScript die Eigenheit, dass er nicht einen <code>Boolean</code>-Wert zurückgibt, sondern denjenigen Operanden, der <code>true</code> ergibt, wenn er in <code>Boolean</code> umgewandelt wird. Auf die Weise können wir Standardwerte für Funktionsparameter umsetzen, falls diese nicht gesetzt sind:</p> <pre e>function funktion (parameter) { parameter = parameter || "Standardwert"; window.alert(parameter); } funktion("Hallo!"); funktion();</pre> <p>Häufige Verwendung findet dies bei Event-Handlern zum browserübergreifenden Zugriff auf das Event-Objekt:</p> <pr re>function handler (e) { // Wenn der Browser das Event-Objekt nicht als Parameter übergeben hat, // lese es aus window.event (Hallo, Internet Explorer!) e = e || window.event; window.alert(e.type); }</pre> <p>Christian Heilmann bietet weitere Beispiele in seinem englischsprachigen Artikel <a href="http://www.wait-till-i.com/2007/11/27/javascript-shortcut-notations-that-shouldnt-be-black-magic-to-the-average-developer/" lang="en" xml:lang="en" hreflang="en">JavaScript shortcut notations that shouldn’t be black magic to the “average developer”</a>, darunter der oben genannte äußerst nützliche Konditional-Operator.</p> <p>Nun ist es nicht immer erstrebenswert, die kürzeste und unverständlichste Schreibweise zu verwenden. Aber das Wissen um Expressions kommt einem zu Gute, wenn Expressions zunehmend komplex werden und man deren Berechnung nachvollziehen will. Andererseits kann man Statements mit Expressions gekonnt mixen, wenn man weiß, dass beliebige Expressions an vielen Stellen erlaubt sind.</p>