SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Grammatik bei Websprachen

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 Formalen Sprachen in Berührung. Dabei erscheint mir ein gewisses Grundverständnis äußerst hilfreich.

Wer HTML und CSS verstehen und anwenden will, kommt nicht darum herum, die Syntax-Bestandteile und Verkettungsegeln zu kennen. In HTML haben wir bekanntlich Elemente und deren Tags, die wiederum Attribute enthalten. Und dazwischen haben wir wiederum andere Elemente oder einfachen Text. Das sind die einfachen Grundlagen der Textauszeichnung.

Die grundlegende Syntax von CSS ist nicht nennenswert komplizierter, aber ihre Benennungen meist unbekannt. Ein Stylesheet besteht aus sogenannten Regeln. Die bestehen aus einem Selektor und dem Deklarationsblock. Letzter enthält, wie der Name schon sagt, Deklarationen, die aus einer Eigenschaft und einem zugewiesenen Wert bestehen. Dieses Aufbauprinzip verdeutlicht gleichzeitig, wie CSS funktioniert.

JavaScript-Syntax – wer versteht die schon?!

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.

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 ECMAScript-Standard 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.

Statements (Anweisungen)

Ein JavaScript-Programm besteht aus einer Aneinandereihung von Statements. Sie strukturieren ein Script grob oder stellen die einzelnen Anweisungen dar, die beim Ausführen des Programmes abgearbeitet werden.

Die Statements, die die Struktur stark bestimmen, sind als Kontrollstrukturen bekannt: if- und switch-Anweisungen, while- und for-Schleifen und so weiter.

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.)

function meineFunktio

on (...) {
   ...
}

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 continue, break und return sowie die Variablen-Deklaration mit var bla = "wert".

Das wohl häufigste Statement ist jedoch das sogenannte Expression Statement. Das ist ein Statement, das aus einer beliebigen Expression besteht. Dies führt uns zu der Frage: Was sind eigentlich Expressions?

Expressions (Ausdrücke)

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.

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 – 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.

Nehmen wir eine ganz einfache Expression: 1 + 1. 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.

Die wichtigsten Bestandteile von Expressions sind Identifier (Bezeichner) und Literale. Identifier sind Namen für Variablen und Objekte. Mit Literalen notiert man unter anderem Strings (z.B. "Hallo Welt!"), Zahlen (z.B. 56.12) oder Arrays in Kurzschreibweise (z.B. [1, 2, 3]). Die beiden Einsen im obigen Beispiel sind übrigens Zahlen-Literale.

Operatoren

Zu den genannten Bestandteilen von Expressions kommt ein Arsenal von unterschiedlichen Operatoren hinzu. Aus der Mathematik und der Logik sind die Rechenoperatoren (z.B. +) und die Vergleichsoperatoren (z.B. ==) am bekanntesten. Daneben gibt es nicht minder wichtige Operatoren, die aber selten als solche wahrgenommen werden: Den . zum Zugriff auf Eigenschaften eines Objektes (z.B. objekt.eigenschaft) sowie ( ) zum Aufrufen einer Funktion (z.B. funktion()). Das Zeichen = steht für den Zuweisungoperator. Aber auch new zum Instantiieren eines Objektes und typeof zur Abfrage eines Variablentyps sind Operatoren.

Operatoren benötigen einen Operanden, wie der Negationsoperator !, oder zwei Operanden, wie der Vergleichsoperator <=, oder auch drei, wie der Konditional-Operator x ? y : z.

Viele Operatoren benötigen Operanden von einem bestimmten Typ. Der Negationsoperator ! erwartet zum Beispiel einen Operanden vom Typ Boolean (d.h. true oder false). 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 – dies nennt sich dynamische Typisierung. Dadurch kann man beispielsweise !123 schreiben, ohne dass etwas Schlimmes passiert. Die Zahl 123 wird einfach in den Typ Boolean umgewandelt, dabei kommt true heraus, um anschließend den Operator anzuwenden.

Die Berechnung des Ergebnisses einer Expression erfolgt nach der Operatorenrangfolge, die bestimmt, welche Teil-Expressions zuerst berechnet werden müssen. Das Prinzip kennen wir aus der Schulalgebra, eine Grundregel lautet etwa »Punkt- vor Strichrechnung«. Nur wird in JavaScript selbst das Aufrufen von Funktionen und das Ansprechen von Objekteigenschaften mit Operatoren gelöst, daher ist die Rangfolge entsprechend lang.

Function Expressions (Funktionsausdrücke)

Wir haben bereits die Funktionsdeklaration (Function Declaration) als Statement kennengelernt. Eine Alternative zum Erzeugen von Funktionen stellen die Functions Expressions 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 namenlose oder anonyme Funktionen.

function funktionsname () {

	windo

ow.alert("Dies ist eine Function Declaration.");
}
alert( function () { alert("Dies ist eine Function Expression!"); } );

Folgende Statements sind in jedem Fall äquivalent, sie legen im aktuellen Variablen-Geltungsbereich eine Funktion an:

function funktionsname () { window.alert("Dies ist eine Function Declaration."); } var funktionsname = function () { window.alert("Dies ist eine Function Expression in einem Variable Statement!"); };

Das Ergebnis der Function Expression ist das erzeugte Funktionsobjekt. Dies wird hier in einer Variable gespeichert.

Und was nützt dieses Wissen?

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.

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 setTimeout oder die Zuweisung als Event-Handler:

wind

dow.setTimeout(function () {
	window.alert("Wird nach einer Sekunde ausgeführt");
}, 100);
element.onclick = function () {
	window.alert("Element wurde geklickt");
};

Function Expressions spielen ferner eine wichtige Rolle beim Arbeiten mit Closures.

Wir können anonyme Funktionen, die sofort ausgeführt werden, verwenden, um Teile des Scriptes zu kapseln:

>function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

>var elementList = document.getElementsByTagName("p");
for (var i = 0; i < elementList.length; i++) {
	var element = elementList[i];
	// Mach was mit element
}

>window.alert("Wir schreiben das Jahr " + (new Date).getFullYear());

// String-Literal
window.alert("test".toUpperCase());
// Literal für einen Regulären Ausdruck, erzeugt ein RegExp-Object
window.alert(/^[a-z]+$/i.test("abc"));

function funktion (parameter) {
	parameter = parameter || "Standardwert";
	window.alert(parameter);
}
funktion("Hallo!");
funktion();