forked from molily/javascript-einfuehrung
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsyntax.html
More file actions
127 lines (122 loc) · 7.89 KB
/
syntax.html
File metadata and controls
127 lines (122 loc) · 7.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript: Syntax-Grundlagen</title>
<link rel="stylesheet" href="js-doku.css">
<script type="text/javascript" src="js-doku.js"></script>
</head>
<body>
<div id="nav">
<p>Hier entsteht eine <strong>JavaScript-Dokumentation</strong> von <a href="http://molily.de/">molily</a>. Derzeit ist sie noch lückenhaft, wächst aber nach und nach. Kommentare und Feedback werden gerne per <a href="mailto:zapperlott@gmail.com">E-Mail</a> entgegen genommen.</p>
<p class="contents-link"><a href="./">Zum Inhaltsverzeichnis</a></p>
</div>
<h1>JavaScript: Syntax-Grundlagen</h1>
<div class="section" id="notizen">
<h2>Notizen</h2>
<p>siehe <a href="http://blog.selfhtml.org/2008/01/23/javascript-syntax/">Weblog-Artikel: Geheimnisse der JavaScript-Syntax</a></p>
</div>
<div class="section" id="aufbau">
<h2>Aufbau eines JavaScript-Programmes</h2>
<p>Ein JavaScript-Programm ist nach gewissen wiederkehrenden Regeln aufgebaut. Solche Syntax-Regeln kennen Sie aus der natürlichen, zum Beispiel der deutschen Sprache. Wenn Ihr Gesprächspartner Sie verstehen soll, müssen Sie beim Formulieren eines Satzes gewisse Grundregeln der Syntax und Grammatik einhalten, damit Sie verstanden werden.</p>
<p>Glücklicherweise verstehen unsere Mitmenschen uns auch dann, wenn wir kleinere Fehler machen und uns nur grob an die Regeln halten. Programmiersprachen sind jedoch viel strenger: Zum einen sind ihre Regeln vergleichsweise einfach, eindeutig und lassen wenig Spielraum. Zum anderen müssen sich Programmierer an diese Regeln halten und dürfen keine Ausnahmen machen. </p>
<p>Dies hat folgende Bewandnis: Damit der JavaScript-Interpreter ein Programm ausführen kann, muss er zunächst dessen Syntax verstehen. Dieses Aufsplitten in die Bestandteile nennt sich <strong>Parsing</strong>. Wenn der Interpreter dabei auf einen Syntaxfehler trifft, bricht er mit einer Fehlermeldung ab und das JavaScript-Programm wird gar nicht erst ausgeführt.</p>
<p>Die folgende Beschreibung der JavaScript-Syntax ist sehr theoretisch und formal. Sie soll ihnen den groben Aufbau eines JavaScript-Programmes vermitteln, damit Sie wissen, welche Bestandteile an welchen Stellen vorkommen dürfen.</p>
</div>
<div class="section" id="anweisungen">
<h2>Anweisungen (Statements)</h2>
<p>Vereinfachend gesagt besteht ein JavaScript-Programm aus einer Abfolge von einer oder mehreren Anweisungen, sogenannten Statements. Bei der Ausführung des JavaScripts werden die Anweisungen nacheinander abgearbeitet.</p>
<p>(Der Einfachheit halber rechnen wir die Funktionsdeklaration zu den Anweisungen, was der ECMAScript-Standard nicht tut. Aber Sonderfall der Funktionsdeklarationen, sie werden nicht in der Reihenfolge der anderen Anweisungen ausgeführt. Dasselbe bei Variablen-Deklarationen. TODO)</p>
<div class="subsection" id="variablen-deklaration">
<h3>Variablen-Deklaration</h3>
<p>Mit einer Variablen-Deklaration wird eine Variable im aktuellen Gültigkeitsbereich erzeugt, d.h. als globale Variable oder lokale Funktionsvariable. Sie kann entweder ohne Wert instantiiert werden:
<pre>var alter;</pre>
<p>Oder der Anfangswert kann gleich angegeben werden:</p>
<pre>var alter = 32;</pre>
<p>Anstelle der <code>32</code> kann ein beliebiger Ausdruck stehen. Das Schema lautet also:</p>
<pre>var <var>Bezeichner</var> = <var>Ausdruck</var>;</pre>
</div>
<div class="subsection" id="kontrollstrukturen">
<h3>Kontrollstrukturen: Verzweigungen und Schleifen</h3>
<p>Kontrollstrukturen sind Anweisungen, die wiederum Blöcke mit Anweisungen enthalten. Dadurch ist es möglich, die Ausführung der in den Blöcken enthaltenen Anweisungen entsprechend bestimmter Regeln zu kontrollieren.</p>
<p>Man unterscheidet grundsätzlich zwei Arten von Kontrollstrukturen: Verzweigungen und Schleifen. Mittels Verzweigungen ist es möglich, die Ausführung einer oder mehrer Anweisungs-Blöcke von Bedingungen abhängig zu machen. Schleifen ermöglichen, einen Anweisungs-Block wiederholt ausführen zu lassen.</p>
<h4>Verzweigungen</h4>
<p>Zu den Verzweigungen gehört die bedingte Anweisung, auch <code>if</code>-Anweisung genannt.</p>
<pre>if (alter >= 18) {
alert("Volljährig!");
} else {
alert("Noch nicht volljährig.");
}</pre>
<p>Zwischen den runden Klammern steht ein beliebiger Ausdruck, zwischen den geschweiften Klammern eine oder mehrere Anweisungen. Das allgemeine Schema lautet:</p>
<pre>if (<var>Ausdruck</var>) {
<var>Anweisungen</var>
} else {
<var>Anweisungen</var>
}</pre>
<p>Mit der <code>switch</code>-Anweisung lassen sich Verzweigungen notieren, bei denen ein Wert mit vielen anderen Werten verglichen wird und eine entsprechende Anweisung ausgeführt wird.</p>
<pre>switch (alter) {
case 10 :
alert("zehn");
case 20 :
alert("zwanzig");
}</pre>
<h4>Schleifen</h4>
<p>Ist zur Laufzeit die Anzahl der Wiederholungen bereits beim Eintritt in die Schleife bekannt, verwendet man häufig die <code>for</code>-Anweisung.</p>
<pre>for (var i = 0; i < 5; i++) {
alert("Sie müssen noch " + (5 - i) + " mal klicken.");
}</pre>
<p>Beim Schleifeneintritt wird zunächst die Variable <code>i</code> deklariert und mit dem Wert <code>0</code> initialisiert. Anschließend wird der Anweisungs-Block so oft ausgeführt, bis der Wert von <code>i</code> die Zahl 4 übersteigt. Da <code>i</code> nach jedem Schleifendurchlauf um eins erhöht wird, wird die Schleife nach fünf Durchläufen verlassen.</p>
<p>Allgemein wird die Ausführung einer <code>for</code>-Anweisung von drei Teilen bestimmt. Einmal der <strong>Initialisierung</strong>, in obigem Beispiel <code>var i = 0</code>. Hier wird im normalen Gebrauch eine so genannte <strong>Schleifenvariable</strong> mit einem Startwert initialisiert. Im zweiten Teil, der <strong>Bedingung</strong>, wird eine Eigenschaft der Schleifenvariable geprüft. Als drittes wird in der <strong>Fortsetzung</strong> angegeben, was nach jedem Durchlauf mit der Schleifenvariable getan werden soll.</p>
</div>
<div class="subsection" id="expression-statement">
<h3>Ausdruck-Anweisung (Expression-Statement)</h3>
<p>Die meisten Anweisungen sind sogenannte Ausdruck-Anweisungen. Sie bestehen lediglich aus einem Ausdruck, und ein Ausdruck kann sehr unterschiedlich aussehen.</p>
<pre>window.print();
alter = 18;
objekt.nummer = 5;
objekt.nummer++;
meldung = alter >= 18 ? "volljährig" : "noch nicht volljährig";
1 + 1;
</pre>
<p>Eine Ausdruck-Anweisung sollte immer mit einem Semikolon abgeschlossen werden. <!-- TODO Hinweis auf das Laissez-faire des ECMAScript-Standards und daraus entstehender Probleme? --></p>
</div>
<div class="subsection" id="weitere-statements">
<h3>Weitere Statements</h3>
<p>break, return, continue usw.</p>
</div>
</div>
<div class="section" id="ausdruecke">
<h2>Ausdrücke (Expressions)</h2>
<p>
Ein Ausdruck besteht aus Bezeichnern und Literalen, die mit Operatoren verknüpft werden
</p>
<pre>
alter = 18
element.appendChild(element2)
objekt.nummer++
alert("Vorname: " + vorname)
</pre>
</div>
<div class="section" id="operatoren">
<h2>Operatoren</h2>
<p>Ein, zwei oder drei Operanden. Die Operanden können selbst als Ausdrücke notiert sein.</p>
</div>
<div class="section" id="bezeichner">
<h2>Bezeichner (Identifier)</h2>
<p>siehe Kernobjekte</p>
</div>
<div class="section" id="literale">
<h2>Literale</h2>
<p>siehe Kernobjekte</p>
</div>
<div class="section" id="funktionen">
<h2>Funktionsdeklarationen</h2>
<p>siehe Funktionen</p>
</div>
<div id="footer">
<p><strong>JavaScript-Dokumentation</strong> · <a href="./">Zum Inhaltsverzeichnis</a></p>
<p>Autor: <a href="http://molily.de/">molily</a> · Kontakt: <a href="mailto:zapperlott@gmail.com">zapperlott@gmail.com</a></p>
<p>Lizenz: <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/de/">Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen</a>.</p>
</div>
</body>
</html>