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 VariablenA
. - 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 Variableabc
geben (und umgekehrt).
;
) 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
oder566
). Kommazahlen werden mit Punkt statt mit Komma notiert (also3.45
statt3,45
). - Boolesche Werte (Wahrheitswerte) werden mit
true
für wahr undfalse
für falsch notiert. Keine Anführunsgzeichen. - Typen, Objekte und Variablen werden lediglich mit Namen und ohne Anführungszeichen notiert (z.B.
String
oderwindow
).
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
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)
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');
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();
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 */
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};">
...
<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); }
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
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project