Kontakt aufnehmen

Syntax von JavaScript

Der Syntax einer (Programmier-)Sprache beschreibt den genauen Aufbau, die Grammatik und auch die Rechtschreibung dieser Sprache. Er besagt, wie was wo warum und wie was wo warum nicht geschrieben werden kann/darf. Der Syntax von JavaScript und JScript ist gleich und hat nur einige wenige Unterschiede.

Notation

Grundsätzlich ist bei der Notation von J(ava)Script-Skripten folgendes zu beachten:

  • Die Sprache ist case-sensitive, das bedeutet, dass Namen immer gleich geschrieben werden müssen (sollten). Beispielsweise besteht ein Unterschied zwischen der Variablen a und der Variablen A.
  • Selbstvergebene Namen dürfen keine Leer- oder Sonderzeichen beinhalten.
  • Selbstvergebene Namen sollten mit einem Buchstaben beginnen und kein ä, ö, ü oder ß enthalten.
  • Selbstvergebene Namen dürfen nicht mit einem reservierten Wort übereinstimmen.
  • Namen dürfen nicht doppelt vergeben werden, d.h. wenn z.B. eine Funktion abc heißt, darf es keine Variable abc geben (und umgekehrt).
Ein JavaScript Skript (also das wo der Code notiert wird) besteht zumeist aus mehreren Funktionen, Variablen und einigen Abläufen die nicht innerhalb einer Funktion definiert sind. Grundsätzlich besteht zu nichts eine Pflicht. D.h. vom Prinzip her können Sie in das Script schreiben wie, wo und was Sie wollen, solange es dem Syntax der Sprache entspricht. JavaScript ist grundsätzlich eine sehr einfache und zumeist übersichtliche Sprache. Innerhalb eines Scriptes können beliebig viele Funktionen, Variablen, Aufrufe, Bedingungen usw. verwendet werden - je nach Bedarf eben. Grundsätzlich könnte man sagen, dass JavaScript zeilenweise aufgebaut ist. Jede Anweisung sollte innerhalb einer Zeile Platz finden und mit einem Semikolon (;) beendet werden. Das Semikolon ist jedoch nicht Pflicht. Unbedingt notwendig wird es erst, wenn mehrere Anweisungen innerhalb einer Zeile stehen sollen - hier wird zur Abgrenzung der einzelnen untereinander das Semikolon als Trennzeichen verwendet. Beispiel:

// ohne Semikolon werden die Anweisungen durch das
// Zeilenende voneinander getrennt ...
Anweisung1
Anweisung2
// das Semikolon wäre hier jedoch auch nicht falsch ...
Anweisung3 ;
Anweisung4 ;
// hier muss das Zeichen unbedingt gesetzt werden ...
Anweisung5 ; Anweisung6 ; 

Werte

Bei der Verwendung von Werten gibt es bestimmte Regeln, an die es sich zu halten gilt. Diese Sind wie folgt:

  • Text (String) muss immer mit Anführungszeichen (" ... " oder ' ... ') umschlossen sein. Dabei muss das Anfangs-Zeichen gleich dem Endzeichen sein (Also "text" oder 'text' aber nicht 'text" oder "text'). Sollen innerhalb des Textes die gleichen Anführunsgzeichen verwendet werden, so müssen diese als Sonderzeichen deklariert sein (aus " wird " und aus ' wird ').
  • Zahlen werden ohne Anführungszeichen notiert (also 3 oder 566). Kommazahlen werden mit Punkt statt mit Komma notiert (also 3.45 statt 3,45).
  • Boolesche Werte (Wahrheitswerte) werden mit true für wahr und false für falsch notiert. Keine Anführunsgzeichen.
  • Typen, Objekte und Variablen werden lediglich mit Namen und ohne Anführungszeichen notiert (z.B. String oder window).

Objekte

Objekte sind fest definierte Dinge, dazu gehören u.A. Biblotheken (sie enthalten wichtige Eigenschaten und Methoden die zur Verarbeitung notwendig sind), das Browserfenster und die Inhalte eines Dokuments. Objekte enthalten Eigenschaften und Methoden die die Verarbeitung des jeweiligen Objektes oder eines anderen Objektes ermöglichen. Ein Objekt kann unter Umständen auch aus einem Objekt und seinen (mehreren) Unterobjekten bestehen. Diese werden durch einen Punkt (.) vom Objekt getrennt. Mehr zum Thema Objekte erfahren Sie im Kapitel Objekte.

Eigenschaften

Eine Eigenschaft gibt einen bestimmten Wert eines Objektes wieder. Um diesen abzufragen notiert man das Objekt, einen Punkt (.) und die Eigenschaft. Beispiel:

Tisch.Höhe
Schrank.Tür.Farbe 

Erklärung: In Zeile 1 heißt das Objekt Tisch. Die Eigenschaft die abgefragt wird heißt Höhe. Als Resultat könnte man also die Höhe des Tisches erhalten (alle anderen Eigenschaften, beispielsweise die Breite des Tisches wären dabei vernachlässigt). In Zeile 2 heißt das Objekt Schrank. Dazu wird das Unterobjekt Tür benannt und von diesem die Eigenschaft Farbe abgefragt. Als Resultat könnte man also von diesem Schrank die Farbe der Tür erhalten (alle anderen Farben, beispielsweise die der Schubkästen, wären dabei vernachlässigt).

Methoden

Eine Methode ist eine Funktion eines Objektes. Eine Methode wird, ebenso wie eine Eigenschaft, durch einen Punkt (.) getrennt an das jeweilige Objekt geschrieben (man sagt notiert). Einer Methode können dazu bestimmte Werte (Parameter) übergeben werden, die die Methode zur Verarbeitung benötigt. Diese Werte werden innerhalb von zwei runden Klammern (( und )) an die Methode heran notiert. Mehrere Werte werden dabei durch Kommas getrennt. Benötigt die Methode keine weiteren Werte, so sollten diese Klammern dennoch gesetzt werden (nur eben ohne Inhalt). Beispiel:

Tisch.AendereFarbe()
Buch.BerechneZeichenDerSeiten(1,7) 

Erklärung: In Zeile 1 wird mit dem Objekt Tisch gearbeitet. Die Methode heißt AendereFarbe(). Als Resultat könnte man hierbei erreichen, dass die Tischfarbe geändert wird. In Zeile 2 wird mit dem Objekt Buch gearbeitet. Als Methode wird BerechneZeichenDerSeiten() verwendet. Als Resultat könnte man die Anzahl der Zeichen der Seiten 1 bis 7 gegeben bekommen.

Variablen

Eine Variable reserviert einen Speicherplatz im Zwischenspeicher. Auf diesem Platz können dann Werte (Inhalte) abgelegt werden. Diese Werte können dabei beliebige Dinge sein: Text, Zahlen, Methoden, Eigenschaften, Objekte, Berechnungen usw. . Auf diesen Speicherplatz kann dann jederzeit wieder zugegriffen werden und der Inhalt gelesen oder verändert werden. Dieser Zugriff erfolgt jedesmal über den Namen der Variablen, der frei gewählt werden kann. Mögliche Variablennamen wären z.B.: a, Klaus oder var1234. Dabei ist es nicht notwendig eine Variable vorher zu deklarieren (definieren) wie es in anderen Programmiersprachen nötig ist. In JavaScript werden diese Variablen automatisch deklariert. Ebenso ist es auch nicht nötig den Typ einer Variablen (z.B. Integer, String ...) zu definieren, vielmehr kann fließend von einem Typ in den nächsten gesprungen werden, ohne, dass es Fehlermeldungen geben würde.

Anweisungen

Eine Anweisung besteht immer aus einem oder zwei Teilen. Dabei unterscheidet man zwischen Zuweisungen und Ausführungen.

Zuweisungen

Eine Zuweisung besteht immer aus zwei Teilen: einem linken und einem rechten Teil. Der linke Teil kann dabei eine Variable oder eine Eigenschaft eines Objekts sein. Der rechte Teil wird dem linken zugewiesen und kann ein Wert, ein Objekt, eine Eigenschaft, eine Methode oder eine selbstdefinierte Funktion sein. Die Zuweisung geschieht immer mit einem Operator und sollte mit einem Semikolon (;) beendet werden. Beispiel:

a = 3;
document.title = 'Abcdef';
b = document.title;
c = meineFunktion('abc'); 

Erklärung: In Zeile 1 wird einer Variablen a ein Wert zugewiesen. Würde man nun später die Variable a ausfragen, so würde man den Wert 3 erhalten. In Zeile 2 wird der Eigenschaft title des Objektes document der Wert Abcdef zugewiesen. Der Wert dieser Eigenschat ist nun Abcdef. In Zeile 3 wird einer Variablen der Wert der Eigenschaft title des Objektes document zugewiesen. Hat diese Eigenschaft vorher den Wert Abcdef zugewiesen bekommen ist nun auch der Wert der Variablen b gleich Abcdef. In Zeile 4 wird der Variablen c der (Rückgabe-)Wert der selbstdefinierten Funktion meineFunktion() übergeben.

Ausführungen

Eine Ausführung besteht nur aus einem Teil. Dieser sollte eine Methode oder einen Funktionsaufruf (eben etwas was ausgeführt werden kann) enthalten und ebenfalls durch ein Semikolon (;) beendet werden. Beispiel:

document.alert('Hallo Welt');
meineFunktion(); 

Erklärung: In Zeile 1 wird die Methode alert() des document-Objekts aufgerufen. Sie würde ein Popup-Fenster hervorrufen, welches den Text 'Hallo Welt' enthält. In Zeile 2 wird die Funktion meineFunktion() aufgerufen. Sie würde - je nach dem Inhalt der Funktion - diesen Inhalt ausführen.

Mehr Informationen zum Thema Funktionen finden Sie im Kapitel Funktionen. Mehr Informationen zu den einzelnen Methoden der Objekte erfahren Sie im Kapitel zu dem jeweiligen Objekt.

Blöcke

Zur besseren Übersicht und um den Ablauf zu kontrollieren, können Ablaufblöcke definiert werden. Sie werden von zwei geschweiften Klammern umschlossen. Sie sagen aus, dass erst der gesamte Block ausgeführt werden muss um danach fortzufahren. Steht beispielsweise eine Bedingung vor einem Block, so wird bei richtigem Eintreffen dieser Bedingung der gesamte Block ausgeführt - wäre hier kein Block, so würde nur die erste Anweisung ausgeführt werden. Ebenso dient ein Block auch, um bestimmte Anweisungen auszugrenzen oder sie nur bei bestimmten Ereignissen oder Zuständen durchlaufen zu lassen. Beispiel:

function ABC()
{
 /* ... ein Funktions-Block ... */

 if(a == b)
 { /* ... ein Bedingungs-Block ... */ }

 while(a > b)
 { /* ... ein Schleifen-Block ... */ }

 { /* ... ein einfacher Block ... */ }

Ablauf

Der Ablauf eines Scriptes geschieht immer nach dem gleichen Muster. Wird das HTML-Dokument geladen, so wird der Script-Code von oben nach unten im Quelltext (Code) durchgegangen. Alle Anweisungen die nicht innerhalb einer Funktion stehen werden dann ausgeführt. Alle anderen Anweisungen werden erst dann durchgeführt, wenn die jeweilige Funktion aufgerufen wird. Dabei wird immer von oben nach unten im Quelltext (Code) vorgegangen, d.h. eine Anweisung die über bzw. vor einer anderen Anweisung steht wird vor dieser ausgeführt. Die Anweisungskette beginnt dabei mit der ersten Anweisung in der Funktion und beendet die Funktion mit der letzten Anweisung (wenn sie nicht vorher schon beendet wurde). Wird eine Funktion aus einer anderen heraus aufgerufen, so wird die aufgerufene Funktion (komplett) ausgeführt und danach die vorhergehende Funktion nach dem Aufruf weiter bearbeitet.

Zur Ablauf-Steuerung werden zusätzlich Abfragen und Schleifen zur Verfügung gestellt. Abfragen dienen dazu, bei bestimmten Umständen (Bedingungen) einen bestimmten Weg einzuschlagen. Schleifen dienen dazu bestimmte, innerhalb der Schleife definierte, Anweisungen zu wiederholen.

Mehr Informationen dazu finden Sie in den Kapiteln Abfragen, Schleifen und Verarbeitung.

Kommentare

Um einen Kommentar (Hinweis, der nicht zum Code gehört) zu schreiben, notiert man entweder zwei Schrägstriche (//), wenn es sich um einen Einzeiligen Kommentar handelt. Alles was in dieser Zeile hinter diesen beiden Schrägstrichen steht gilt dann als Kommentar. Handelt es sich um einen mehrzeiligen Kommentar, notiert man einen Schrägstrich gefolgt von einem Stern (/*), dann den Kommentar und dann einen Stern und einen Schrägstrich (*/). Beispiel:

//einzeiliger Kommenar
/* mehrzeiliger
Kommentar */ 

Kommentare werden beim Ausführen des Scriptes einfach übersehen und dienen dazu, sich selbst besser im Code zurecht zu finden.

JavaScript Entities

Ein sehr wenig genutztes Feature von JavaScript sind JavaScript Entites. Diese sind ab JavaScript 1.3 in JavaScript enthalten und werden wie normale HTML-Entities definiert - d.h. sie beginnen mit &, dann kommt der Ausdruck (Name) und sie enden dann wieder mit ;. Der Ausdruck sollte aus zwei geschweiten Klammern ({ und }) bestehen, in denen eine JavaScript Variable definiert wird. Es ergibt sich also folgendes Konstrukt: &{Variablenname};.
Um einen Entitie verwenden zu können, muss dieser zuerst innerhalb von JavaScript definiert werden - d.h. es wird eine Variable (var NAME = 'WERT';) erstellt. In einem HTML-Dokuments kann der Entitie dann beliebig oft verwendet werden - allerdings nur innerhalb eines Attributwerts. Beispiel:

<script>
<!--
var meinWert = Math.round(Math.random()*400);
</script>
...
<hr width="&{meinWert};"> 

... im Beispiel wird so bei jedem Aufruf eine anders breite Leiste erzeugt. Nicht zulässig wäre dagegen der folgende Einsatz:

...
<p>&{meinWert};</p> 

Getter & Setter

Java Script 1.5 führt ein weiteres Feature ein: getter und setter. Ein getter ist eine Funktion, die den Wert einer Eigenschaft ausgibt - ein setter wiederum ist eine Funktion, die den Wert einer Eigenschaft schreibt. Der Syntax ist laut JavaScript 1.5 wie folgt definiert:

var Eigenschaft;
Eigenschaft = getter function(Werte){ /*...*/ return(Wert); }
Eigenschaft = setter function(Werte){ /*...*/ Eigenschaft = Wert;
                                     return(true | false); } 

Der Eigenschaft wird also jeweils eine Funktion zugewiesen, der das Statement getter bzw. setter vorangestellt wird. Innerhalb der Funktion kann dann ein beliebiger Wert errechnet werden. getter-Funktionen müssen einen Rückgabewert erhalten, der einen möglichen Wert der Eigenschaft darstellt. setter-Funktionen sollten innerhalb der Funktion die Eigenschaft mit einem neuen Wert belegen und einen booleschen Rückgabewert (true oder false) erhalten.

Der Syntax von gettern und settern ist jedoch noch nicht klar definiert. Die ersten Ausarbeitungen von JavaScript 2.0 beschreiben die Statements mit get statt getter und set statt setter.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Operatoren

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern