-
Notifications
You must be signed in to change notification settings - Fork 17
/
werkzeuge.html
320 lines (278 loc) · 34.7 KB
/
werkzeuge.html
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript: Arbeitstechniken und Entwicklerwerkzeuge</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js-doku.css">
</head>
<body>
<div id="nav">
<p>Hier entsteht eine <strong>JavaScript-Dokumentation</strong> von <a href="https://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:molily@mailbox.org">E-Mail</a> entgegen genommen.</p>
<p class="contents-link"><a href="./">Zum Inhaltsverzeichnis</a></p>
</div>
<h1>JavaScript: Arbeitstechniken und Entwicklerwerkzeuge</h1>
<div class="section" id="einleitung">
<h2>Einleitung</h2>
<p>Wenn Sie in die JavaScript-Entwicklung einsteigen, sollte Sie sich mit einigen <strong>Werkzeugen</strong> vertraut machen, die Ihnen das Schreiben eines Scriptes vereinfachen. Um zu einem funktionsfähigen Script kommen, um Fehler zu finden und um Script-Abläufe zu verstehen, gibt es einige bewährte <strong>Arbeitsmethoden</strong> und Fertigkeiten.</p>
</div>
<div class="section" id="erste-schritte">
<h2>Erste Schritte mit Firefox, Firebug und einem Editor</h2>
<p>JavaScripte können Sie mit ganz unterschiedlichen Programmen und Hilfsmitteln entwickeln und jeder Webautor hat unterschiedliche Bedürfnisse und Gewohnheiten. Sobald Sie einige Erfahrung gesammelt haben, sollten Sie sich umschauen, welche Arbeitsweise Ihnen am besten zusagt. Für den Anfang sei hier aber eine einseitige und parteiische Empfehlung ausgesprochen.</p>
<div class="section" id="firefox">
<h3>Firefox</h3>
<p>Wenn Sie browserübergreifende JavaScripte für das öffentliche Web programmieren, so sollten Sie Ihre Scripte zunächst mit dem Browser <strong>Mozilla Firefox</strong> testen und sie mit dessen Hilfe fortentwickeln. Dieser Browser ist weit verbreitet, läuft auf allen relevanten Plattformen und ist einer der Ziel-Browser, auf dem Ihre Scripte auf jeden Fall funktionieren sollten. Firefox verfügt über ausgezeichnete JavaScript-Fähigkeiten und gibt präzise und hilfreiche JavaScript-Fehlermeldungen. Sie können Firefox unter <a href="http://getfirefox.com/">getfirefox.com</a> herunterladen.</p>
</div>
<div class="section" id="firefbug">
<h3>Firebug</h3>
<p>Eine entscheidende Hilfe stellt das Firefox-Zusatzprogramm <strong>Firebug</strong> dar. Firebug ist nicht nur ein mächtiges JavaScript-Werkzeug, sondern hilft auch enorm bei der HTML- und CSS-Entwicklung - insbesondere durch den sogenannten <em>DOM-Inspektor</em>, mit dem Sie den Elementbaum des HTML-Dokuments sowie die zugehörigen JavaScript- und CSS-Eigenschaften ansehen können. Nachdem Sie Firefox installiert haben, können Sie das Firebug-Addon über die <a href="https://addons.mozilla.org/de/firefox/addon/firebug/">Firefox-Addon-Datenbank</a> installieren.</p>
<p>Firebug gibt Lernenden einen wertvollen Einblick in das DOM, veranschaulicht den Aufbau von JavaScript-Objekten und macht die Zusammenarbeit zwischen HTML, CSS und JavaScript verständlich. Seien Sie neugierig und spielen Sie mit Firebug herum – es wird Ihr Verständnis der Webtechniken und insbesondere des <em>DOM Scripting</em> enorm verbessern.</p>
</div>
<div class="section" id="editor">
<h3>Texteditor</h3>
<p>Eine weitere Voraussetzung für die JavaScript-Programmierung ist natürlich ein <strong>Texteditor</strong>, mit dem Sie die JavaScripte schreiben. Auch in puncto Editoren haben Sie zwischen tausenden eine Auswahl. Für den Anfang brauchen Sie keinen Editor mit besonderen Fähigkeiten. Er sollte jedoch Syntax-Highlighting für JavaScript-Code sowie die Anzeige von Zeilen- und Spaltennummern beherrschen. Denn diese Features erweisen sich direkt als hilfreich. Ein brauchbarer einfacher Editor für Windows ist <a href="http://notepad-plus.sourceforge.net/">Notepad++</a>.</p>
</div>
<p>Mit diesem Dreiergespann bestehend aus einem komfortablen Texteditor, einem hochentwickelten Browser und einem Analyse-Werkzeug für JavaScripte können sie gut gewappnet in die Programmierung einsteigen.</p>
</div>
<div class="section" id="fehlerkonsole">
<h2>Fehlermeldungen und Fehlerkonsolen</h2>
<p>Der erste Anlaufpunkt beim Testen von Scripten in einem Browser ist die <strong>JavaScript-Konsole</strong> des Browsers. Darin werden Fehler aufgelistet, die bei der Ausführung aufgetreten sind. Eine solche Fehlermeldung besteht üblicherweise aus einer Fehlerbeschreibung, der Script-Adresse sowie der Zeilennummer.</p>
<p>In der JavaScript-Konsole finden sich in erster Linie <strong>Ausnahmefehler</strong> (englisch <em>exception</em>s). Ein solcher führt zum sofortigen Abbruch der Ausführung des Scriptes. Ein Ausnahmefehler tritt beispielsweise auf, wenn Sie auf eine nicht existente Variable zugreifen, eine nicht existente Methode aufrufen oder eine Objekteigenschaft ansprechen, obwohl es sich beim jeweiligen Wert nicht um ein Objekt handelt.</p>
<p>Die Browser unterscheiden sich darin, wie sie diese Fehlermeldungen darstellen und wie informativ diese sind. Die verständlichsten und präzisesten Fehlermeldungen liefert üblicherweise der Firefox-Browser.</p>
<div id="fehlermeldungen-firefox" class="section">
<h3>Firefox-Fehlerkonsole und Firebug</h3>
<p>Im Firefox können Sie die Meldungen über das Menü <em>Extras → Fehlerkonsole</em> erreichen:</p>
<p class="image"><img src="images/firefox-fehlerkonsole.png" alt=""></p>
<p>Der obige Screenshot zeigt eine beispielhafte Fehlermeldung, die auftritt, wenn auf eine nicht definierte Variable zugegriffen wird. Der Code, der diesen Fehler absichtlich ausgelöst hat, lautet:</p>
<pre>window.alert(nichtDefinierteVariable);</pre>
<p>Wie der Fehlerkonsole zu entnehmen ist, steht dieser Code in der Zeile 3 des HTML-Dokuments mit der Adresse <var>file:///C:/Users/molily/beispiel.html</var>.</p>
<p>In der Fehlerkonsole von Firefox werden nicht nur JavaScript-Exceptions angezeigt, sondern auch andere Meldungen und Warnungen, die Firefox beim Verarbeiten von HTML- und CSS-Code ausgibt. Als Webentwickler sollten Sie daher immer ein Auge auf diese Fehlerkonsole haben.</p>
<p>Mithilfe des empfohlenen Firefox-Zusatz <strong>Firebug</strong> ist der Zugriff auf die Fehlerkonsole einfacher. Wenn bei der Ausführung eines Scriptes ein Ausnahmefehler auftritt, dann erscheint rechts unten in der Statusleiste ein rotes Fehlersymbol mit der Anzahl der Fehler. Wenn Sie darauf klicken, klappt Firebug am unteren Fensterrand auf und zeigt die Konsole samt Fehlermeldungen:</p>
<p class="image"><img src="images/firebug-konsole.png" alt=""></p>
<p>Firebug zeigt nicht nur die aus der herkömmlichen Firefox-Konsole bekannten Informationen an, sondern zeigt sogar die JavaScript-Codezeile, in der der Fehler aufgetreten ist. Außerdem führt ein Klick auf den grünen Code oder den blauen Zeilenverweis in den <em>Script</em>-Tab von Firebug. Darin wird der gesamte JavaScript-Code dargestellt und direkt zu der verantwortlichen Zeile gesprungen:</p>
<p class="image"><img src="images/firebug-script-tab.png" alt=""></p>
<p>Nach Möglichkeit sollten Sie mit den JavaScript-Konsolen von Firefox bzw. dem Firebug-Zusatz arbeiten. Dennoch soll nicht verschwiegen werden, wie Sie in den anderen relevanten Browsern an die Fehlermeldungen kommen.</p>
</div>
<div id="fehlermeldungen-ie" class="section">
<h3>Fehlermeldungen im Internet Explorer ab Version 8</h3>
<p>Der Internet Explorer hat zwei verschiedene MNodi, was den Umgang mit JavaScript-Fehlermeldungen angeht. Entweder zeigt er jeden JavaScript-Fehler in einem Dialogfeld an. Oder er versteckt diese Meldungen und macht sie nur auf Abruf zugänglich.</p>
<p>Wenn Sie Scripte im Internet Explorer testen, sollten Sie zumindest zeitweise die Anzeige jedes Fehlers aktivieren. Beim normalen Surfen auf fremden Sites hingegen stören diese Fehlermeldungen. Um die Meldungen zu aktivieren, öffnen Sie die <em>Internetoptionen</em> des IE. Diese finden Sie im Menü <em>Extras</em>. In dem sich öffnenden Fenster wählen Sie die Registerkarte <em>Erweitert</em>. In der dortigen Liste nehmen Sie folgende Einstellungen vor:</p>
<ul>
<li><em>Skriptdebugging deaktivieren (Internet Explorer)</em>: Setzen Sie <strong>kein</strong> Häkchen in dieser Checkbox (d.h. Debugging soll aktiviert bleiben).</li>
<li><en>Skriptfehler anzeigen:</em> Setzen Sie ein Häkchen in dieser Checkbox (d.h. Skriptfehler sollen angezeigt werden).</li>
</ul>
<p>Der folgende Screenshot zeigt diese Einstellungen:</p>
<p class="image"><img src="images/ie-internetoptionen.png" alt=""></p>
<p>Verlassen Sie die Internetoptionen, indem Sie mit OK bestätigen. Wenn nun ein JavaScript-Fehler auftritt, öffnet sich automatisch ein solches Meldungsfenster. Dieses sieht im Internet Explorer 8 (englischsprachiges Windows) so aus:</p>
<p class="image"><img src="images/ie8-fehlermeldung.png" alt=""></p>
<p>Der Internet Explorer 9 zeigt ein ähnliches Meldungsfenster an und bietet Ihnen ebenfalls an, den Fehler mit den Entwicklertools (siehe unten) zu debuggen:</p>
<p class="image"><img src="images/ie9-fehlermeldung.png" alt=""></p>
<p>Das Anzeigen von JavaScript-Fehlern ist nur während der Entwicklung sinnvoll. Sie sollten diese Möglichkeit nur solange in Anspruch nehmen, wie sie an JavaScripten arbeiten. Danach können sie die Fehlermeldungen in den Internetoptionen wieder ausschalten, damit Sie nicht beim normalen Surfen gestört werden.</p>
</div>
<div class="section" id="ie-fehlerkonsole">
<h3>Internet Explorers: Fehlerkonsole der Entwicklertools</h3>
<p>Neben diesen Meldungsfenstern kennt der Internet Explorer ab Version 8 eine JavaScript-Konsole, in der alle Fehlermeldungen mitgeloggt werden. Der IE besitzt dazu die sogenannten <strong>Entwicklertools</strong>, die stark an Firebug angelehnt sind. Beim Drücken der Taste <kbd>F12</kbd> klappt eine Leiste am unteren Fensterrand auf. Um JavaScript-Fehler zu sehen, müssen Sie den Tab <em>Skript</em> anwählen:</p>
<p class="image"><img src="images/ie8-developertools.png" alt=""></p>
<p>Diese Ansicht ist zweigeteilt: Im linken Bereich können alle eingebundenen JavaScripte angesehen werden, im rechten Bereich erscheint standardmäßig die JavaScript-Konsole. Wenn Ausnahmefehler auftreten, werden sie dort aufgelistet. Wie bei Firebug zeigen die IE-Entwicklertools neben dem Fehler ein Verweis auf die verantwortliche JavaScript-Codezeile an. Wenn Sie diesen anklicken, wird im linken Bereich die Codezeile hervorgehoben.</p>
<p>Sie können aus den Fehlermeldungsfenstern, welche im vorherigen Abschnitt gezeigt wurden, direkt in die Entwicklertools springen. Der Internet Explorer ab Version 8 bietet Ihnen an, den Debugger zu öffnen. Wählen Sie <em>Ja</em> bei der Frage <em>Wollen Sie die Seite debuggen?</em>, so öffnet sich automatisch der Skript-Tab der Entwicklertools. Darin wird die Codezeile markiert, in der der Fehler aufgetreten ist:</p>
<p class="image"><img src="images/ie9-debugger.png" akt=""></p>
</div>
<div class="section" id="fehlermeldungen-alte-ies">
<h3>Fehlermeldungen in älteren Internet Explorern</h3>
<p>Sie sollten bei der JavaScript-Entwicklung die neueste Internet-Explorer-Version verwenden, wenn es nicht gerade um das absichtliche Testen mit älteren Versionen geht. Denn die Fehlermeldungen in älteren Versionen sind weniger präzise sowie oft unverständlich und verwirrend. In manchen Fällen wird die Zeilennummer nicht korrekt angegeben und bei ausgelagerten JavaScript-Dateien die tatsächliche Script-Adresse nicht angegeben, nur die Adresse des einbindenden HTML-Dokuments. Ältere Internet Explorer kennen keine Konsole, in der alle Fehlermeldungen mitgeloggt werden.</p>
<p class="image"><img src="images/ie7-fehlermeldung.png" alt=""></p>
<p>Ein komfortables Debugging von Scripten im Internet Explorer vor Version 8 ist daher ohne Zusatzprogramme schwer möglich. Ein mögliches Zusatzprogramm, das ein brauchbares Fehler-Logging anbietet, lautet <a href="http://www.my-debugbar.com/wiki/CompanionJS/HomePage">Companion.JS</a> bzw. <a href="http://www.debugbar.com/">DebugBar</a>. Einen komplexeren JavaScript-Debugger bietet die umfangreiche <a href="https://msdn.microsoft.com/en-us/library/dd537667(v=vs.110).aspx">Visual Studio Express for Web</a>, die sich kostenlos herunterladen lässt.</p>
</div>
<div id="opera" class="section">
<h3>Opera-Fehlerkonsole und Opera Dragonfly</h3>
<p>Im Opera-Browser erreichen Sie die Fehlerkonsole über den Menüeintrag <em>Extras → Weiteres → Fehlerkonsole</em>. Vorher müssen Sie die volle Menüleiste gegebenenfalls erst einblenden über <em>Menü → Menüleiste zeigen</em>.</p>
<p class="image"><img src="images/opera-fehlerkonsole1.png" alt=""></p>
<p>Die Fehlerbeschreibungen sind im Allgemeinen weniger verständlich als im Firefox, aber zeigen zumindest die Code-Zeile an, die den Fehler ausgelöst hat:</p>
<p class="image"><img src="images/opera-fehlerkonsole2.png" alt=""></p>
<p>Ähnlich wie beim Firefox handelt es sich um eine Mehrzweck-Konsole, in der sich u.a. auch HTML- und CSS-Warnungen finden. Eine Filterung nach JavaScript-Fehlern ist jedoch möglich, indem Sie im linken Aufklappmenü <em>JavaScript</em> wählen.</p>
<p>Zudem verfügt Opera über einen Firebug-ähnlichen Zusatz namens <em>Dragonfly</em>, der über das Menü <em>Extras → Weiteres → Opera Dragonfly</em> aktiviert werden kann (das ist das oben abgebildete Menü).</p>
<p>Dragonfly besitzt eine integrierte Fehlerkonsole, die die Meldungen etwas übersichtlicher auflistet und ein Springen zum JavaScript-Code ermöglicht, der den Fehler ausgelöst hat. Zudem kann Dragonfly wie Firebug und die Entwicklertools des Interent Explorers am unteren Fensterrand angezeigt werden:</p>
<p class="image"><img src="images/opera-dragonfly.png" alt=""></p>
</div>
<div id="fehlerkonsole-safari-chrome" class="section">
<h3>Fehlerkonsolen in Chrome und Safari</h3>
<p>Google Chrome und Apple Safari verfügen über dasselbe Entwicklerwerkzeug, den <em>Web Inspector</em>, mit dem sich JavaScript sehr gut debuggen lässt..</p>
<p>Um im Safari an die Fehlermeldungen zu kommen, müssen Sie zunächst das sogenannte Developer-Menü aktivieren, denn darüber lässt sich die JavaScript-Fehlerkonsole öffnen. Dazu wählen Sie im Menü <em>Safari → Einstellungen…</em> (Mac OS) beziehungsweise <em>Bearbeiten → Einstellungen</em> (Windows). Unter der Registerkarte <em>Erweitert</em> aktivieren Sie die Checkbox <em>Menü „Entwickler“ in der Menüleiste einblenden</em>.</p>
<p>Im Safari unter Mac OS sieht dieser Dialog so aus:</p>
<p class="image"><img src="images/safari-entwicklermenue-mac.png" alt=""></p>
<p>Dasselbe im Safari unter Windows:</p>
<p class="image"><img src="images/safari-entwicklermenue-win.png" alt=""></p>
<p>Wenn sie nun die Einstellungen schließen, erscheint im Safari-Hauptfenster das Menü <em>Developer</em>, in dem Sie den Eintrag <em>Fehlerkonsole einblenden</em> finden:</p>
<p class="image"><img src="images/safari-fehlerkonsole1.png" alt=""></p>
<p>Diese Konsole ist Teil der Entwicklertools, welche Firebug-ähnlich typischerweise am unteren Rand des Browserfensters auftauchen. Der Beispielcode erzeugt darin folgende Fehlermeldung:</p>
<p class="image"><img src="images/safari-fehlerkonsole2.png" alt=""></p>
<p>Mit einem Klick auf den Dateinamen können Sie in die Quelltext-Ansicht springen, um zur Code-Zeile zu gelangen, die den Fehler ausgelöst hat.</p>
<p>Im Chrome-Browser sieht die Fehlerkonsole sehr ähnlich aus. Sie öffnen die Konsole über <em>Tools → Entwicklertools</em> im Schraubenschlüssel-Menü.</p>
<p class="image"><img src="images/chrome-entwicklertools.png" alt=""></p>
<p>Dadurch offenbart sich folgende Fehlermeldung in der Konsole:</p>
<p class="image"><img src="images/chrome-fehlerkonsole.png" alt=""></p>
</div>
</div>
<div class="section" id="fehlersuche">
<h2>Fehlersuche mit Kontrollausgaben</h2>
<p><em>Hilfe, mein JavaScript funktioniert nicht!</em> - Keine Panik. Wenn Sie bei der JavaScript-Programmierung ein paar Faustregeln befolgen, kommen Sie schnell voran und finden die Ursache.</p>
<p>Bei der JavaScript-Entwicklung sollten Sie sich eine methodische Herangehensweise angewöhnen: Werden Sie sich klar darüber, <strong>was</strong> sie genau vorhaben und <strong>wie</strong>, das heißt mit welchen Einzelschritten Sie das erreichen wollen. Wenn Sie sich diesen Programmablauf überlegt haben, recherchieren Sie die dazu nötigen JavaScript-Techniken. Suchen Sie in einer Objektreferenz die Objekte heraus, mit denen Sie arbeiten wollen. Lesen Sie die Beschreibungen aufmerksam durch, sodass Sie die Objekte korrekt verwenden können. Beachten Sie unter anderem den Typ von Eigenschaften und die Parameter, die Methoden entgegennehmen.</p>
<p>Wenn ein Script nicht wie erwartet funktioniert, sollten Sie zunächst in der <em>Fehlerkonsole</em> des Browsers schauen, ob in ihrem Script Fehler auftraten und der Browser die Ausführung deshalb gestoppt hat. Die Fehlerkonsole liefert in der Regel die Nummer der Codezeile in Ihrem Script, in der der Fehler aufgetreten ist. Die letztliche Ursache des Fehlers <em>kann</em>, muss aber <em>nicht</em> genau in dieser Zeile liegen! Die Ursache kann genauso eine Anweisung in einer anderen Zeile im Script sein, die vorher ausgeführt wurde, sodass die Voraussetzungen für die spätere Anweisung nicht gegeben sind.</p>
<div class="section" id="alert-kontrollausgaben">
<h3>Kontrollausgaben über die <code>alert</code>-Methode</h3>
<p>Um Fehlern auf die Spur zu kommen, gehen Sie Ihr JavaScript-Programm Schritt für Schritt durch und notieren nach jeder relevanten Anweisung eine <strong>Kontrollausgabe</strong>. Dies geht am einfachsten mit der browserübergreifenden Methode <code>window.alert</code>, die ein Meldungsfenster erzeugt. Ein Beispiel:</p>
<pre>var element = document.getElementById("navigation");
window.alert("Navigationselement: " + element);
var textknoten = document.createTextNode("Hallo!");
window.alert("Neuer Textknoten: " + textknoten);
element.appendChild(textknoten);
window.alert("Textknoten wurde angehängt.");</pre>
<p>Wenn ein Fehler in Ihrem Script auftritt, dann bricht der Browser die Script-Ausführung ab, sodass die darauffolgende Kontrollausgabe nicht mehr ausgeführt wird. Somit können Sie einerseits den Fehler lokalisieren und andererseits gibt Ihnen die letzte Kontrollausgabe vor dem Abbruch eventuell Hinweise auf die Fehlerursache.</p>
<p>Um Fehler auf diese Weise eingrenzen zu können, sollten Sie die Anweisungen zwischen den Kontrollausgaben möglichst einfach halten - zumindest solange Ihr Script noch in der Entwicklungsphase ist. Die folgende Anweisung ist zusammengesetzt und kann an gleich mehreren Stellen zu einem Programmabbruch führen:</p>
<pre>document.getElementsByTagName("h1")[0].style.color = "red";</pre>
<p>Wenn in dieser Zeile ein JavaScript-Fehler auftritt, dann sollten Sie die Anweisung in ihre Teile aufspalten und Kontrollausgaben einfügen:</p>
<pre>window.alert("Suche alle Überschriften im Dokument…");
var überschriftenListe = document.getElementsByTagName("h1");
window.alert("Anzahl der gefundenen h1-Überschriften: " + überschriftenListe.length);
var ersteÜberschrift = überschriftenListe[0];
window.alert("Erste h1-Überschrift: " + ersteÜberschrift);
window.alert("Setze Farbe der Überschrift…");
ersteÜberschrift.style.color = "red";
window.alert("Farbe gesetzt.");</pre>
<p>Dieses Beispiel ist übertrieben, soll aber die Möglichkeiten von Kontrollausgaben veranschaulichen. Der Vorteil von <code>window.alert</code> ist, dass der Browser die Ausführung des Scriptes solange anhält, wie das Meldungsfenster geöffnet ist. Auf die Weise können Sie einem Script, das sonst ganz schnell ausgeführt wird, bei der Arbeit zuschauen und Fehler erkennen.</p>
<p>Der Nachteil von Kontrollausgaben mit <code>window.alert</code> ist, dass es JavaScript-Objekte in Strings umwandeln muss, um sie auszugeben. (Intern wird die Objektmethode <code>toString</code> aufgerufen.) Der String, der dabei herauskommt, gibt Ihnen nicht immer Aufschluss darüber, ob es sich um das erwartete Objekt handelt. Nur in einigen Browsern ist nachvollziehbar, um was für ein Objekt es sich handelt. Bei komplexen Objekten wie Arrays oder DOM-Knoten ist dies aber gewöhnungsbedürftig - mit der Zeit lernen Sie, wie sie solche Knoten am besten in Kontrollausgaben ansprechen.</p>
</div>
<div class="section" id="console-objekt">
<h3>Ablaufprotokolle mit Konsolen-Ausgaben (<code>console</code>-Objekt)</h3>
<p>Vielseitiger als Ausgaben mittels <code>window.alert</code> ist die Nutzung der Schnittstelle zur JavaScript-Konsole des Browsers. Diese wurde von Firebug für den Firefox erfunden, wurde aber mittlerweile vom Internet Explorer, Safari und Chrome für ihre Fehlerkonsolen zumndest rudimentär übernommen: <a href="https://getfirebug.com/wiki/index.php/Console_API">Dokumentation der Konsole-API von Firebug</a>.</p>
<p>Das globale Objekt <code>window.console</code> bietet verschiedene Methoden an, mit denen Sie Statusmeldungen in die browsereigene Konsole schreiben können. In der Konsole haben Sie dann ein Log aller Meldungen Ihres Scriptes - ebenso wie etwaige Fehlermeldungen.</p>
<p>Das obige Beispiel könnte für Firebug mithilfe der Methode <code>console.debug</code> folgendermaßen umgesetzt werden:</p>
<pre>var überschriftenListe = document.getElementsByTagName("h1");
console.debug("Gefundene h1-Überschriften:", überschriftenListe);
var ersteÜberschrift = überschriftenListe[0];
console.debug("Erste h1-Überschrift:", ersteÜberschrift);
console.debug("Setze nun die Farbe der Überschrift…");
ersteÜberschrift.style.color = "red";
console.debug("Farbe gesetzt. Zur Kontrolle:", ersteÜberschrift.style.color);</pre>
<p>Ein Vorteil dieser Konsolenausgabe liegt darin, dass Firebug auch komplexe Objekte sinnfällig darstellt und so detaillierte Einblicke in die verwendeten Objekte und Werte erlaubt. Die Ausgaben in der Konsole sind interaktiv, d.h. sie können ein dort ausgegebenes Objekt anklicken und sich dessen Eigenschaften auflisten lassen.</p>
<p class="image"><img src="images/firebug-konsole-log.png" alt=""></p>
<p>Das Objekt <code>console</code> bietet viele weitere Methoden, um Meldungen in die Konsole zu schreiben. Diese können Sie der besagten Dokumentation entnehmen.
Für den Anfang sollten Ihnen aber die Methoden <code>console.debug</code> und <code>console.log</code> ausreichen.</p>
<p>Auf diese Weise können Sie akribische <strong>Ablaufprotokolle</strong> Ihrer Scripte anlegen und haben die Objekte, mit denen Sie arbeiten, direkt im Blick. Dies macht Firebug zu einem unverzichtbaren Werkzeug. Mittlerweile bieten auch Entwicklerwerkzeuge für andere Browser ein <code>console</code>-Objekt mit den besagten Methoden an. Damit entsteht ein Quasi-Standard, mit dem hoffentlich irgendwann eine browserübergreifende JavaScript-Fehlersuche möglich sein wird.</p>
<p>Beachten Sie jedoch, dass Sie diese Methodenaufrufe nur während der Entwicklung ihrer Scripte nutzen können und am Ende wieder entfernen sollten - denn bei Ihren Webseiten-Besuchern wird das <code>console</code>-Objekt möglicherweise nicht zur Verfügung stehen. Ein Aufruf würde daher einen Fehler erzeugen und das Script abbrechen.</p>
</div>
</div>
<div class="section" id="dom-inspektor">
<h2>DOM-Inspektoren</h2>
<p>Beim Einlesen eines HTML-Dokuments erzeugt der Browser aus dem HTML-Code eine Baumstruktur aus Elementen - diese Vorgang nennt sich Parsing. Die auf HTML aufbauenden Webtechniken CSS und JavaScript operieren auf dieser Grundlage. Den JavaScript-Zugriff auf diese interne Baumstruktur regelt das <a href="dom.html">Document Object Model (DOM)</a>.</p>
<p>Zum Auslesen und Verändern des Dokuments bewegt sich ein Script im DOM-Baum. Um den Elementbaum des aktuellen Dokuments zu veranschaulichen, bieten verschiedene Browser sogenannte <strong>DOM-Inspektoren</strong> an. Diese bilden die Knotenstruktur ab, die sie aus dem Dokument generiert haben, und erlauben eine Navigation darin. Sie können in der Baumdarstellung einen Elementknoten anklicken, um die Lage im Dokument, seine JavaScript-Eigenschaften und -Methoden, die wirkenden CSS-Formatierungen sowie die Dimensionen zu sehen.</p>
<p>Eine Möglichkeit, Informationen zu einem gewissen Element abzurufen, nennt sich <em>Element untersuchen</em> oder ähnlich. Dabei können Sie einen beliebigen Bereich im Dokument anklicken und im DOM-Inspektor wird automatisch das zugehörige Element fokussiert.</p>
<p>Nehmen wir folgendes Beispieldokument und schauen uns an, wie die verschiedenen DOM-Inspektoren den Elementbaum wiedergeben:</p>
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document Object Model</title>
</head>
<body>
<h1>Document Object Model</h1>
<p>(aus: <a href="http://de.wikipedia.org/wiki/Document_Object_Model">Wikipedia,
der freien Enzyklopädie</a>.)</p>
<blockquote cite="http://de.wikipedia.org/wiki/Document_Object_Model">
<p>Das Document Object Model (DOM) ist eine Programmierschnittstelle (API) für den Zugriff
auf HTML- oder XML-Dokumente. Sie wird vom World Wide Web Consortium definiert.
<p>…</p>
</blockquote>
</body>
</html></pre>
<div id="dom-inspektor-firefox" class="section">
<h3>DOM-Inspektor von Firebug</h3>
<p>Zum DOM-Inspektor von Firebug gelangen Sie, indem Sie die Firebug-Leiste am unteren Fensterrand durch einen Klick auf das Käfer-Symbol aufklappen. Anschließend wählen Sie den Tab <em>HTML</em>. Auf der linken Seite findet sich der interaktive Elementbaum. Sie können die Verschachtelungen über die Plus-Symbole aufklappen, um die Kindelement eines Elements zu sehen. Um nähere Informationen zu einem Element zu bekommen, klicken Sie auf die blauen Elementnamen. In folgendem Screenshot wurde das <em>h1</em>-Element im Beispieldokument angeklickt:</p>
<p class="image"><img src="images/firebug-dom-inspector.png" alt=""></p>
<p>In der rechten Spalte finden Sie die drei Tabs <em>Styles</em>, <em>Layout</em> und <em>DOM</em>. Die ersten beiden sind in erster Linie bei der CSS-Entwicklung interessant, der dritte Tab insbesondere beim Schreiben von JavaScript. Darin sind alle Eigenschaften und Methoden des ausgewählten Elementobjekten aufgelistet. Viele dieser Eigenschaftswerte (z.B. <code>parentNode</code>) sind anklickbar und führen zur Ansicht des entsprechenden Knoten bzw. JavaScript-Objekts.</p>
<p>Um ein Element schnell zu finden, können Sie oben links in der Firebug-Leiste auf <em>Untersuchen</em> klicken. Nun können Sie im Dokument ein Element auswählen. Wenn Sie mit dem Mauszeiger durch das Dokument gehen, wird das Element, auf deren Fläche sich der Mauszeiger befindet, mit einem blauen Rahmen hervorgehoben. Außerdem wird das Element automatisch im DOM-Inspektor fokussiert. Klicken Sie ein Element an, um den Auswahl-Modus zu verlassen.</p>
<p>Alternativ zu dieser Vorgehensweise über die Schaltfläche <em>Untersuchen</em> können Sie ein Element im Dokument mit der rechten Maustaste anklicken und im Kontextmenü <em>Element untersuchen</em> wählen. Dies hat denselben Effekt.</p>
</div>
<div id="ie7-developer-toolbar" class="section">
<h3>Internet Explorer 8: DOM-Inspektor der Entwicklertools</h3>
<p>…</p>
<p class="image"><img src="images/ie8-dom-inspektor.png" alt=""></p>
</div>
<div id="ie7-developer-toolbar" class="section">
<h3>Internet Explorer 6 und 7: Developer Toolbar</h3>
<p>Der Internet-Explorer-Versionen vor 8 verfügen über keinen eingebauten DOM-Inspektor. Es existiert allerdings ein offizieller Zusatz: Die <a href="http://web.archive.org/web/20100328172952/http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038">Internet Explorer Developer Toolbar</a>. Diese ist ein Vorgänger der Entwicklertools im Internet Explorer 8 und die Bedienung gestaltet sich weitgehend gleich.</p>
<p>Nachdem Sie den Zusatz installiert haben, können Sie die Toolbar aktivieren, indem Sie im Menü <em>Ansicht → Explorer-Leiste → IE Developer Toolbar</em> aktivieren. Gegebenenfalls ist das Menü im Internet Explorer 7 standardmäßig ausgeblendet - Sie können es kurzzeitig einblenden, indem Sie die Alt-Taste drücken. Die Toolbar erscheint am unteren Fensterrand und Sie können deren Höhe variieren.</p>
<p>Das Beispieldokument wird in der IE Developer Toolbar folgendermaßen veranschaulicht:</p>
<p class="image"><img src="images/ie-developer-toolbar.png" alt=""></p>
<p>Die mittlere Spalte zeigt die HTML-Attribute und einige JavaScript-Eigenschaften des ausgewählten Elementobjekts an (hier wieder die <code>h1</code>-Überschrift). Die rechte Spalte listet CSS-Eigenschaften auf, die auf das gewählte Element wirken.</p>
<p>Um ein Element durch Anklicken zu untersuchen, klicken Sie das Icon oben links, auf dem ein Cursor und ein blaues Rechteck abgebildet sind. Damit befinden Sie sich im Element-Auswahlmodus und können den Mauszeiger über das Dokument bewegen und durch Klicken auswählen.</p>
</div>
<div class="section" id="dom-inspektor-dragonfly">
<h3>DOM-Inspektor von Opera Dragonfly</h3>
<p>Den DOM-Inspektor von Opera Dragonfly erreichen Sie über das Menü <em>Extras → Weiteres → Opera Dragonfly</em>. Den DOM-Baum finden Sie im Tab <em>DOM</em>. Mittels Schaltflächen können Sie zwischen verschiedene Darstellungen wechseln und manche Knotentypen ausblenden. Im rechten Bereich können Sie über drei Tabs <em>Styles</em>, <em>Properties</em> und <em>Layout</em> auf die Elementeigenschaften zugreifen. Diese entsprechen funktional den Tabs <em>Styles</em>, <em>DOM</em> und <em>Layout</em> in Firebug.</p>
<p>Wie auch die anderen vorgestellten DOM-Inspektoren bietet Opera an, ein Element durch Klicken im Dokument auszuwählen. Auf der entsprechenden Schalftläche ist ein Cursor abgebildet.</p>
<p>…</p>
</div>
<div class="section" id="dom-inspektor-safari">
<h3>Safari und Chrome Web Inspector</h3>
<p>…</p>
</div>
</div>
<div class="section" id="debugger">
<h2>Debugger</h2>
<p>Mithilfe von Kontrollausgaben können Sie den Ablauf eines Scriptes nachvollziehen und Variablen ausgeben, um deren Werte zu prüfen. Ein vielseitigeres und mächtigeres Werkzeug sind Debugger. Damit können Sie komfortabler die Funktionsweise eines Scriptes untersuchen, denn Sie müssen nicht nach jeder Anweisung eine Kontrollausgabe einfügen. Ein JavaScript-Debugger bietet im Allgemeinen folgende Möglichkeiten:</p>
<p>Sie können im Code sogenannte <strong>Haltepunkte</strong> (englisch <em>Breakpoints</em>) setzen. Die Ausführung des JavaScripts wird an dieser Stelle unterbrochen und der Browser öffnet den Debugger. Ausgehend von dieser Code-Zeile können Sie die folgenden Anweisungen nun Schritt für Schritt ausführen, Anweisungen überspringen und aus aufgerufenen Funktionen herausspringen. Bei dieser <strong>schrittweisen Ausführung</strong> können Sie überprüfen, welche Werte bestimmte Objekte und Variablen an dieser Stelle im Script haben. Eine Weiterentwicklung dieser <strong>Überwachung von Variablenwerten</strong> stellen sogenannte <strong>Watch-Expressions</strong> (englisch für Überwachungs-Ausdrücke) dar.</p>
<p>…</p>
<p>Wenn Sie viele Funktionen definieren, die sich gegenseitig aufrufen, hilft Ihnen ein Debugger, die Übersicht über das Aufrufen und Abarbeiten von Funktionen zu behalten. In der Einzelschritt-Ausführung haben Sie den sogenannten <strong>Call Stack</strong> (englisch für Aufruf-Stapel) im Blick. Das ist die Verschachtelung der Funktionen, die gerade abgearbeitet werden. Wenn beispeilsweise die Funktion <code>a</code> die Funktion <code>b</code> aufruft und diese wiederum die Funktion <code>c</code>, so ist der Stapel <code>a</code> > <code>b</code> > <code>c</code>. Die Funktion <code>c</code>, die gerade ausgeführt wird, liegt sozusagen oben auf dem Stapel. Nach dessen Ausführung wird <code>c</code> vom Stapel genommen und in die Funktion <code>b</code> zurückgekehrt - und so weiter.</p>
<p>…</p>
<div class="section">
<h3>Debugging mit Firebug</h3>
</div>
<div class="section">
<h3>Debugging mit den Internet Explorer Entwicklertools</h3>
</div>
<div class="section">
<h3>Debugging mit Microsoft Visual Web Developer Express</h3>
</div>
<div class="section">
<h3>Debugging von Opera Dragonfly</h3>
</div>
<div class="section">
<h3>Debugging mit Safari und Chrome Web Inspector</h3>
</div>
</div>
<div class="section" id="editoren">
<h2>Editoren und Entwicklungsumgebungen</h2>
<p>Aptana Studio, Netbeans IDE, …</p>
</div>
<div class="section" id="lints">
<h2>JavaScript-Lints</h2>
<ul>
<li><a href="http://www.jslint.com/">JSLint</a> – The JavaScript Code Quality Tool</a></li>
<li><a href="http://jshint.com/">JSHint</a> – community-driven tool to detect errors and potential problems in JavaScript code</li>
</ul>
</div>
<div class="section" id="packer">
<h2>Code-Komprimierer und -Formatierer</h2>
<p>Bei der JavaScript-Programmierung sollten Sie gewisse Konventionen zur Code-Formatierung einhalten. Das dient nicht nur der Lesbarkeit, Übersichtlichkeit und Klarheit des Quellcodes, sondern macht erst effektive Fehlersuche und Debugging möglich. Das beinhaltet grob gesagt eine Anweisung pro Zeile sowie eine Einrückung innerhalb von Blöcken (Funktionen, Kontrollstrukturen usw.). Wie das im Detail aussieht, ist Ihrem Geschmack überlassen.</p>
<p>Wenn das JavaScript jedoch im Browser ausgeführt wird, …</p>
<ul>
<li><a href="https://developers.google.com/closure/compiler/">Google Closure Compiler</a></a></li>
<li><a href="http://closure-compiler.appspot.com/home">Closure Compiler Service</a></li>
<li><a href="http://marijnhaverbeke.nl/uglifyjs">uglifyjs</a></li>
</ul>
</div>
<div class="sequence-navigation">
<p class="next"><a href="dom.html" rel="next">Arbeiten mit dem DOM</a></p>
<p class="prev"><a href="funktionen.html" rel="prev">Funktionen</a></p>
</div>
<div id="footer">
<p><strong>JavaScript-Dokumentation</strong> · <a href="./">Zum Inhaltsverzeichnis</a></p>
<p>Autor: <a href="https://molily.de/">molily</a> · Kontakt: <a href="mailto:molily@mailbox.org">molily@mailbox.org</a></p>
<p>Lizenz: <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/de/">Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0</a></p>
<p><a href="https://github.com/molily/javascript-einfuehrung">JavaScript-Einführung auf Github</a></p>
<p>Kostenloses Online-Buch und E-Book:<br><a href="https://testing-angular.com" lang="en" hreflang="en">Testing Angular – A Guide to Robust Angular Applications</a> (englisch)</p>
</div>
<script src="js-doku.js"></script>
</body>
</html>