diff options
Diffstat (limited to 'files/de/web/javascript/reference/statements')
28 files changed, 5319 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/statements/async_function/index.html b/files/de/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..1179b3f924 --- /dev/null +++ b/files/de/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,223 @@ +--- +title: async function +slug: Web/JavaScript/Reference/Statements/async_function +tags: + - Example + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +<div> +<div>{{jsSidebar("Statements")}}</div> + +<p><span class="seoSummary"> Die <code><strong>async function</strong></code> Deklaration definiert eine <strong>asynchrone Funktion</strong>, die ein {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}} Objekt zurück gibt.</span> Asynchrone Funktionen laufen über den <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop">Event Loop</a> außerhalb des üblichen Kontrollflusses, und geben als Ergebnis ein implizites {{jsxref("Promise")}} Objekt zurück. Die Syntax und der Aufbau des Codes bei einer asynchronen Funktion ähnelt allerdings der den standardmässigen synchronen Funktionen.</p> + +<div class="noinclude"> +<p>Eine <strong><code>async function</code></strong> kann auch durch den {{jsxref("Operators/async_function", "async function expression", "", 1)}} Ausdruck definiert werden.</p> +</div> +</div> + +<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<h3 id="Die_Parameter">Die Parameter</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Der Name der Funktion.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Der Name eines Arguments, welches der Funktion übergeben wird.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Die Ausdrücke, aus denen der Funktionskörper besteht.</dd> +</dl> + +<h3 id="Der_zurückgegebene_Wert">Der zurückgegebene Wert</h3> + +<p>Ein <code><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> Objekt. Das Promise wird entweder mit dem zurück gelieferten Wert der asnychronen Funktion eingehalten (Engl: "resolved"), oder mit einem unbehandelten Fehler innerhalb der asynchronen Funktion verworfen (Engl: "rejected").</p> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Eine <code>async</code> Funktion darf einen {{jsxref("Operators/await", "await")}} Ausdruck enthalten, der die Ausführung der asynchronen Funktion anhält. Die Funktion wartet auf die Entscheidung des übergebenen <code>Promise</code>, setzt dann die Ausführung der asynchronen Funktionen fort und wird als eingehaltener (Engl: "resolved") Wert ausgewertet.</p> + +<p><strong>Das Schlüsselwort <code>await</code> gilt nur innerhalb der <code>async</code> Funktionen.</strong> Die Verwendung außerhalb solcher Funktion wirft einen <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> auf.</p> + +<div class="note"> +<p>Das Ziel der <code>async</code>/<code>await</code> Funktionen ist zweifach. Erstens vereinfachen sie die Anwendung von <code>Promises</code> im Rahmen eines synchronen Verfahrens. Zweitens ermöglichen sie die kollektive Verarbeitung einer Gruppe von <code>Promises</code>. Genau wie die <code>Promises</code> dem Verhalten von callbacks ("Rückruffunktionen") ähneln, so ähnelt die <code>async</code>/<code>await</code> Methode der Zusammensetzung von <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generatoren</a> und <code>Promises</code>.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre class="brush: js">var resolveAfter2Seconds = function() { + //nach 2 Sek. einlösen + console.log("langsames Promise beginnt"); + return new Promise(resolve => { + setTimeout(function() { + resolve(20); //"20" taucht als der zurückgegebene Wert der Fkn. auf + console.log("langsames Promise fertig"); + }, 2000); + }); +}; + +var resolveAfter1Second = function() { + //nach 1 Sek. einlösen + console.log("schnelles Promise beginnt"); + return new Promise(resolve => { + setTimeout(function() { + resolve(10); //"10" taucht als der zurückgegebene Wert der Fkn. auf + console.log("schnelles Promise fertig"); + }, 1000); + }); +}; + +var sequentialStart = async function() { + console.log('==NACHEINANDER STARTEN=='); + // Falls der dem await Operator folgende Ausdruck kein Promise ist, + // wird jener Ausdruck in ein eingehaltenes ("resolved") Promise umgewandelt + + // 1. die Ausführung erfolgt fast sofort + const slow = await resolveAfter2Seconds(); + console.log(slow); // 2. das hier startet 2 Sekunden nach 1. + + const fast = await resolveAfter1Second(); + console.log(fast); // 3. das hier startet 3 Sekunden nach 1. +} + +var concurrentStart = async function() { + console.log('==ZEITGLEICH ANFANGEN mit await=='); + const slow = resolveAfter2Seconds(); // startet den Timer sofort + const fast = resolveAfter1Second(); // startet den Timer sofort + + // 1. die Ausführung erfolgt fast sofort + console.log(await slow); // 2. das hier startet 2 Sekunden nach 1. + console.log(await fast); // 3. das hier startet 2 Sekunden nach 1., also sofort nach 2., da "fast" bereits aufgelöst ist +} + +var stillConcurrent = function() { + console.log('==ZEITGLEICH ANFANGEN mit Promise.all=='); + Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => { + console.log(messages[0]); // "slow" + console.log(messages[1]); // "fast" + }); +} + +var parallel = function() { + console.log('==PARALLEL mit Promise.then=='); + resolveAfter2Seconds().then((message)=>console.log(message)); + resolveAfter1Second().then((message)=>console.log(message)); +} + +sequentialStart(); // loggt "slow" nach 2 Sek., dann "fast" nach einer weiteren Sek. + +// wartet, bis das obige Verfahren abschließt +setTimeout(concurrentStart, 4000); // loggt nach 2 Sek. erst "slow", dann "fast" + +// wieder warten +setTimeout(stillConcurrent, 7000); // genau wie concurrentStart + +// wieder warten +setTimeout(parallel, 10000); // echt parallel: loggt "fast" nach 1 Sek., dann "slow" nach einer weiteren Sek. +</pre> + +<h4 id="await_und_Parallelität"><code>await</code> und Parallelität</h4> + +<p>In der Funktion <code>sequentialStart</code> wird die Ausführung wegen dem ersten <code>await</code> für 2 Sekunden angehalten, und dann nochmal eine weitere Sekunde wegen dem zweiten <code>await</code>. Der zweite Timer wird erst erzeugt, sobald der erste durch ist, daher wird der Code nach 3 Sekunden durchgelaufen sein.</p> + +<p>In der Funktion <code>concurrentStart</code> werden beide Timer erzeugt und dann darauf gewartet (<code>await</code>). Die beiden Timer laufen zur selben Zeit, was bedeutet, dass der Code in 2 Sekunden statt 3 durchläuft, also wie der langsamste Timer. Trotzdem laufen die <code>await</code> Aufrufe immer noch nacheinander, was bedeutet, dass das zweite <code>await</code> auf das Ende des ersten Timers warten wird. In diesem Fall wird das Ergebnis des schnellsten Timers erst nach dem des langsamsten Timers verarbeitet.</p> + +<p>Wenn du wirklich zwei oder mehr Jobs gleichzeitig, also parallel, ausführen willst, musst du <code>await Promise.all([job1(), job2()])</code> wie in der <code>parallel</code> Funktion gezeigt verwenden.</p> + +<div class="warning"> +<h4 id="Merke_await_mit_Promisethen_nicht_verwechseln">Merke: <code>await</code> mit <code>Promise#then</code> nicht verwechseln</h4> + +<p>Bei <code>sequentialStart</code> wird die Programmausführung auf 2 Sek. aufgehalten wegen des ersten <code>await</code>, dann wieder auf 1 Sek. wegen des zweiten <code>await</code>. Die zweite Stoppuhr wird erst nach Ablauf der ersten Stoppuhr erstellt.</p> + +<p>Bei <code>concurrentStart</code> werden beide Stoppuhren gleichzeitig erstellt, dann in <code>await</code> versetzt. Obwohl beide Uhren nebeneinander laufen, laufen die <code>await</code> Abrufe serienweise. Das bedeutet, dass die zweite <code>await</code> Anweisung auf Ablauf der ersten wartet. Die Laufzeit dieses Abschnitts lautet daher 2--nicht 3--Sekunden, weil das langsamere Verfahren 2 Sek. braucht. Das Gleiche ereignet sich bei <code>stillConcurrent</code>, welcher Abschnitt die <code>Promise.all</code> Methode verwendet.</p> + +<p>Wenn man auf mehrfache <code>Promises</code> parallel warten (<code>await</code>) will, muss man <code>Promise#then</code> verwenden, gerade wie die <code>parallel</code> Funktion am Ende dieses Beispiels.</p> +</div> + +<h3 id="Umschreiben_einer_Promise-Kette_mittels_einer_async_Funktion">Umschreiben einer Promise-Kette mittels einer <code>async</code> Funktion</h3> + +<p>Eine API die ein {{jsxref("Promise")}} zurückgibt resultiert in einer vielteiligen Promise-Kette. Man beachte den folgenden Code:</p> + +<pre class="brush: js">function getProcessedData(url) { + return downloadData(url) // returns a promise + .catch(e => { + return downloadFallbackData(url) // returns a promise + }) + .then(v => { + return processDataInWorker(v); // returns a promise + }); +} +</pre> + +<p>das kann mit einer <code>async</code> Funktion folgendermaßen umgeschrieben werden:</p> + +<pre class="brush: js">async function getProcessedData(url) { + let v; + try { + v = await downloadData(url); + } catch(e) { + v = await downloadFallbackData(url); + } + return processDataInWorker(v); +} +</pre> + +<p>Im obigen Beispiel ist zu beachten, dass es keinen <code>await</code> Ausdruck auf dem <code>return</code> Ausdruck gibt, weil der Rückgabewert einer <code>async function</code> implizit im {{jsxref("Promise.resolve")}} eingeschlossen ist.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.statements.async_function")}}</p> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> + <li>{{jsxref("Operators/await", "await")}}</li> + <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" on "innolitics.com"</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/block/index.html b/files/de/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..788082aeae --- /dev/null +++ b/files/de/web/javascript/reference/statements/block/index.html @@ -0,0 +1,115 @@ +--- +title: block +slug: Web/JavaScript/Reference/Statements/block +tags: + - Anweisung + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/block +--- +<p>{{jsSidebar("Statements")}}</p> + +<p>Eine <strong>Blockanweisung</strong> (oder in anderen Sprachen <strong>Verbundanweisung</strong>) wird genutzt, um Anweisungen zu gruppieren. Ein Block wird durch ein Paar geschweifte Klammern abgegrenzt. Optional kann ihm ein {{jsxref("Statements/label", "Label")}} zugewiesen werden.</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-block.html", "taller")}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[label:] { + anweisung_1; + anweisung_2; + ... + anweisung_n; +} +</pre> + +<dl> + <dt><code>anweisung1</code>, <code>anweisung2</code>, <code>anweisungN</code></dt> + <dd>Anweisungen, die zu einer Blockanweisung gruppiert werden.</dd> + <dt><code>label</code></dt> + <dd>Ein optionales {{jsxref("Statements/label", "Label")}}, entweder nur als Kennzeichnung oder als Referenz für die Verwendung in einer {{jsxref("Statements/break", "break")}}-Anweisung.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Eine Blockanweisung wird meistens in Verbindung mit Komtrollfluss-Anweisungen (z. B. {{jsxref("Statements/if...else", "if…else")}}, {{jsxref("Statements/for", "for")}}, {{jsxref("Statements/while", "while")}}) genutzt. Zum Beispiel:</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p>Zu beachten ist, dass eine Blockanweisung nicht mit einem Semikolon endet.</p> + +<p>In anderen Sprachen wird eine Blockanweisung auch oftmals Verbundanweisung genannt. Dieser erlaubt den Einsatz mehrerer Anweisungen an Stellen, an denen JavaScript nur eine Anweisung erwartet. Das Kombinieren von Anweisungen in Blöcken ist in Javascript gängige Praxis. Mit einer {{jsxref("Statements/empty", "empty")}}-Anweisung ist auch der gegenteilige Fall umsetzbar (keine Anweisung an Stellen, an denen Anweisungen erwartet werden).</p> + +<h3 id="Variablen_in_Blockgültigkeitsbereichen">Variablen in Blockgültigkeitsbereichen</h3> + +<p><strong>Wichtig</strong>: Variablen, die mit {{jsxref("Statements/var", "var")}} deklariert werden, haben keinen Blockgültigkeitsbereich. Sie sind an den Gültigkeitsbereich der umschließenden Funktion oder des Skripts gebunden. Variablen sind folglich auch <span class="dpf_sent" id="dpfsent_4">außerhalb </span>des Blocks verfügbar, in dem sie deklariert wurden. Beispiel:</p> + +<pre class="brush: js example-bad">var x = 1; +{ + var x = 2; +} +console.log(x); // Ausgabe: 2 +</pre> + +<p>Die Ausgabe zeigt <em>2</em>, weil die Anweisungen <code>var x</code> <span class="dpf_sent" id="dpfsent_4">außerhalb </span>des Blocks und innerhalb des Blocks den gleichen Gültigkeitsbereich haben. In anderen Sprachen würde dieser Code <em>1</em> ausgeben.</p> + +<p>Um die Gültigkeit auf den Block zu begrenzen, muss {{jsxref("Statements/let", "let")}} eingesetzt werden:</p> + +<pre class="brush: js">let x = 1; +{ + let x = 2; // dieses x ist nur in diesem Block sichtbar +} +console.log(x); // Ausgabe: 1 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Erste Definition. Implementiert in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("javascript.statements.block")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/if", "if")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/break/index.html b/files/de/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..350ba91400 --- /dev/null +++ b/files/de/web/javascript/reference/statements/break/index.html @@ -0,0 +1,164 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<p>Die <strong>break</strong> Anweisung beendet die aktuelle Schleife, {{jsxref("Statements/switch", "switch")}}-Anweisung oder Anweisungen die mit einem {{jsxref("Statements/label", "label")}} versehen sind und sorgt dafür, dass das Programm mit der Anweisung weiterläuft, die auf die beendete <span class="dpf_sent" id="dpfsent_1">Anweisung </span>folgt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>break [Label];</code></pre> + +<dl> + <dt><code>Label</code></dt> + <dd>Optional. Ein Bezeichner, der mit einem {{jsxref("Statements/label", "Label")}} einer Anweisung in Verbindung gebracht werden kann. Es wird vorausgesetzt, dass die Anweisung, die <span class="dpf_sent" id="dpfsent_2">beendet </span>wird, eine Schleife oder ein {{jsxref("Statements/switch", "switch")}}-Statement ist.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die <code>break</code> Anweisung <span class="dpf_sent" id="dpfsent_1">enthält </span>ein optionales {{jsxref("Statements/label", "Label")}}, mit dem es möglich ist, eine mit einem {{jsxref("Statements/label", "Label")}} versehene Anweisung zu beenden. Dabei muss sich die <code>break</code> Anweisung innerhalb der Anweisung, die mit einem {{jsxref("Statements/label", "Label")}} versehen ist, befinden. Die Anweisung, die mit einem Label versehen ist, kann jede {{jsxref("Statements/block", "Block")}}-Anweisung sein und muss nicht zwingend eine Schleife sein.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Die folgende Funktion nutzt eine <code>break</code> Anweisung die die {{jsxref("Statements/while", "while")}} Schleife beendet, wenn <code>i</code> gleich <code>3</code> ist. Danach gibt die Funktion <code>3 * x</code> zurück.</p> + +<pre class="brush:js;highlight:[6];">function testBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + break; + } + i += 1; + } + return i * x; +}</pre> + +<p>Der folgende Quelltext benutzt die <code>break</code> Anweisungen mit einem {{jsxref("Statements/label", "Label")}} auf einem {{jsxref("Statements/block", "Block")}}. Weil <code>inner_block</code> innerhalb vom {{jsxref("Statements/block", "Block")}} mit dem <code>outer_block</code> {{jsxref("Statements/label", "Label")}} ist, funktioniert <code>break</code> fehlerfrei.</p> + +<pre class="brush:js;highlight:[1,2,4];">outer_block:{ + inner_block:{ + console.log ('1'); + break outer_block; // breaks out of both inner_block and outer_block + console.log (':-('); // skipped + } + + console.log ('2'); // skipped +} +</pre> + +<p>Der folgende Quelltext benutzt eine <code>break</code> Anweisung, die nicht auf ein {{jsxref("Statements/label", "Label")}} verweist, in dem sich das <code>break</code> befindet. Dieses ist nicht möglich, <span class="dpf_sent" id="dpfsent_1">weshalb </span>ein {{jsxref("Global_Objects/SyntaxError", "SyntaxError")}} erzeugt wird.</p> + +<pre class="brush:js;highlight:[1,3,6];">block_1:{ + console.log ('1'); + break block_2; // SyntaxError: Label nicht gefunden +} + +block_2:{ + console.log ('2'); +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. nur die Version ohne Labels hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Version mit Labels hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/label", "Label")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/class/index.html b/files/de/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..48fda4c9bb --- /dev/null +++ b/files/de/web/javascript/reference/statements/class/index.html @@ -0,0 +1,192 @@ +--- +title: Klasse +slug: Web/JavaScript/Reference/Statements/class +tags: + - Deklaration + - ECMAScript 2015 + - JavaScript + - Klasse + - Klassen + - Ref + - Statement +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>Die <strong>Klassendeklaration </strong>erstellt eine neue Klasse mit einem Namen unter Verwendung von prototypen Vererbung.</div> + +<div> </div> + +<div class="noinclude"> +<p>Sie können eine Klasse auch mit Hilfe einer {{jsxref("Operators/class", "class expression", "", 1)}} definieren. Unglücklicherweise ist es mit diesen class-Ausdrücken nicht möglich eine existierende Klasse erneut zu deklarieren. Dieses führt zu einem TypeError.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">class <em>name</em> [extends] { + // class body +} +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Genau wie mit class expressions, wird der body der Klassendeklaration im <a href="/de/docs/Web/JavaScript/Reference/Strict_mode"><u><font color="#0066cc">strict mode</font></u></a> ausgeführt. Die constructor Eigenschaft ist optional.</p> + +<p>Klassendeklarationen sind nicht {{Glossary("Hoisting", "hoisted")}} (im Gegensatz zu <a href="/de/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>).</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Eine_einfache_Klassendeklaration">Eine einfache Klassendeklaration</h3> + +<p>Im folgenden Beispiel definieren wir zuerst eine Klasse mit dem Namen Polygon. Diese wird danach erweitert, um eine Klasse mit dem Namen Square zu erstellen. Beachten Sie, dass die Anweisung<code> super() </code>nur im Konstruktor verwendet werden kann und vor dem <code>this </code>Schlüsselwort verwendet werden kann.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<div class="warning"> +<h3 id="Versuch_eine_Klasse_zweimal_zu_deklarieren">Versuch eine Klasse zweimal zu deklarieren</h3> + +<p>Neudeklarieren einer Klasse unter Einsatz von Klassendeklarationen führt zu einem TypeError.</p> + +<pre class="brush: js">class Foo {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared +</pre> + +<p>Der gleiche Fehler tritt auch auf, wenn eine Klasse zuvor mit einem class-Ausdruck definiert wurde.</p> + +<pre class="brush: js">var Foo = class {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared +</pre> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Erste Definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li> + <li><a href="/de/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/de/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/const/index.html b/files/de/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..2bd5b39928 --- /dev/null +++ b/files/de/web/javascript/reference/statements/const/index.html @@ -0,0 +1,170 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - ECMAScript 2015 + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<h2 id="Summary" name="Summary">Zusammenfassung</h2> + +<p>Die<strong> </strong><strong><code>const</code>-</strong>Deklaration erstellt eine Konstante. Wie bei der Deklaration einer Variablen mit {{jsxref("Statements/let", "let")}} ist der Gültigkeitsbereich auf den lokalen Block begrenzt. Der Wert einer Konstanten kann nicht verändert werden durch Zuweisung oder Neudeklaration.</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">const <em>name1 = wert<em>1 [</em>, <em>name2</em> = <em>wert2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>wertN]]]</em>;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Name der Konstanten. Dieser kann jeder gültige {{Glossary("Identifier", "Bezeichner")}} sein.</dd> + <dt><code>wertN</code></dt> + <dd>Wert der Konstanten. Dieser kann jeder gültige {{Glossary("Expression", "Ausdruck")}} sein, einschließlich einer Funktion.</dd> +</dl> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Die <code><strong>const</strong></code>-Deklaration erstellt eine Konstante, die entweder global sichtbar oder nur lokal in dem {{jsxref("Statements/Block", "Anweisungsblock")}}, in der sie deklariert wird, sichtbar ist.</p> + +<p>Die Konstante muss bei ihrer Definition mit einem Wert belegt werden. Eine spätere Zuweisung ist logischerweise nicht möglich, denn Sinn einer Konstanten ist, dass nach ihrer Definition keine Änderungen mehr vorgenommen werden können.</p> + +<p>Die <strong><code>const</code>-</strong>Deklaration erzeugt eine nicht veränderbare Referenz auf einen Wert. Dies bedeutet aber nicht, dass dieser Wert an sich unveränderlich ist, sondern nur, dass der Konstanten kein anderer Wert zugewiesen werden kann. Ist der Wert einer Konstanten zum Beispiel ein Objekt vom Typ {{jsxref("Global_Objects/Array", "Array")}}, können dessen Einträge durchaus verändert werden. Die Beispiele unten verdeutlichen dies.</p> + +<p>Eine Konstante kann nicht den gleichen Namen einer Funktion oder einer Variablen im gleichen Gültigkeitsbereich führen. Der Versuch, den Namen einer Konstanten nochmals zu verwenden, führt ebenso zu einem Fehler wie der Versuch, den Namen eines bestehenden Objektes für eine Konstante zu verwenden.</p> + +<p>Für const gelten die gleichen Regel hinsichtlich der <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/let#Zeitweilig_tote_Zonen_und_Fehler_mit_let">toten Zone</a> wie für {{jsxref("Statements/let", "let")}}. Auch Konstanten sind erst <em>nach</em> ihrer Deklaration verfügbar, nicht jedoch zwischen dem Beginn des Blocks und der Deklaration.<br> + Dies ist ein Unterschied zur Variablendeklaration mit {{jsxref("Statements/var", "var")}}. Mit var deklarierte Variablen sind in der gesamten Funktion verfügbar, in der sie deklariert wurden, selbst falls die Variablendeklaration die letzte Anweisung der Funktion war.</p> + +<h2 id="Beispiele" name="Beispiele">Beispiele</h2> + +<p>Die nachfolgenden Beispiele bauen aufeinander auf und sollten funktionell als ein Skript betrachtet werden. Sie sind lediglich in mehrere Absätze aufgeteilt, um die Teilaspekte der Konstantenbenutzung abzugrenzen.</p> + +<h3 id="Grundlagen">Grundlagen</h3> + +<p>Konstanten müssen bei Deklaration mit einem Wert belegt werden und sind danach nicht mehr änderbar.</p> + +<pre class="brush: js">// Definiert my_fav als eine Konstante und weist ihr den Wert 7 zu. +const MY_FAV = 7; + +// Ein Versuch, der Konstanten einen anderen Wert zuzuweisen, ergibt +// einen Fehler. +MY_FAV = 20; + +// Schreibt 7 auf die Konsole. +console.log("my favorite number is: " + MY_FAV); + +// Der Versuch, eine existierende Konstante neu zu definieren, +// erzeugt einen Fehler +const MY_FAV = 20; + +// Der Name my_fav ist für die obige Konstante reserviert, weshalb +// dieses ebenfalls einen Fehler erzeugt. +var MY_FAV = 20; +// Auch dies ergibt einen Fehler. +let MY_FAV = 20; + +// Konstanten benötigten einen Initialwert, weshalb hier ein SyntaxError +// erzeugt wird. +const FOO; + +// Konstanten sind erst nach ihrer Deklaration verfügbar, +// anders als var-Variablen. +console.log("konstante = " + KONST); // Fehler, KONST existiert noch nicht +console.log("variable = " + VAR); // VAR hingegen schon +const KONST = "23"; +var VAR = "32"; +console.log("konstante = " + KONST); // KONST existiert erst jetzt + +</pre> + +<h3 id="Der_Block_als_Gültigkeitsbereich">Der Block als Gültigkeitsbereich</h3> + +<p>Konstanten sind nur innerhalb des Blocks aus geschweiften Klammern sichtbar, in dem sie deklariert wurden.</p> + +<pre class="brush: js">// MY_FAV, in vorigem Beispiel erstellt, ist immer noch 7 +if (MY_FAV === 7) { + // Innerhalb dieses if-Blocks kann eine neue Konstante MY_FAV + // erzeugt werden, die nur für diesen Block gültig ist. + const MY_FAV = 20; + + // MY_FAV ist nun 20 + console.log("my favorite number is " + MY_FAV); + + // var-Variablen werden hingegen immer in den übergeordneten + // Funktions- oder den globalen Kontext eingebettet, weshalb + // dies zu einer Kollision mit der globalen Konstante MY_FAV + // aus vorigem Beispiel führen wird: + var MY_FAV = 20; +} +// MY_FAV ist immer noch 7, denn wir haben den if-Block verlassen. +console.log("my favorite number is " + MY_FAV); + +</pre> + +<h3 id="Die_Konstante_und_der_Wert_einer_Konstante">Die Konstante und der Wert einer Konstante</h3> + +<p>Obwohl Konstanten selbst nicht geändert werden können, kann sich der Wert des Objektes, auf das die Konstante verweist, ändern.</p> + +<pre class="brush: js">// Konstanten können auch komplexe Objekte sein. +const MY_OBJECT = {"key": "value"}; + +// Ein Versuch, der Konstanten ein anderes Objekt zuzuweisen, ergibt +// einen Fehler. +MY_OBJECT = {"OTHER_KEY": "value"}; + +// Das Objekt selber hingegen ist nicht vor Veränderungen geschützt. +// Die folgende Anweisung wird ohne Probleme ausgeführt. +MY_OBJECT.key = "otherValue"; + +// Das Gleiche gilt für Felder: +const MY_ARRAY = []; +// Es ist möglich, neue Einträge an das Feld anzufügen. +MY_ARRAY.push("A"); // ["A"] +// Jedoch führt der Versuch, der Konstanten ein anderes Feld +// zuzuweisen, zu einem Fehler. +MY_ARRAY = ["B"]</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table" style="height: 109px; width: 758px;"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col"></th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + <td> + <p>Erste Definition.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("javascript.statements.const")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> + <li><a href="/de-DE/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Konstanten in der JavaScript-Einführung</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/continue/index.html b/files/de/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..b6b00242de --- /dev/null +++ b/files/de/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,165 @@ +--- +title: continue +slug: Web/JavaScript/Reference/Statements/continue +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/continue +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Die <strong>continue </strong>Anweisung beendet die Ausführung von Anweisungen im aktuellen Durchlauf der aktuellen oder benannten Schleife und setzt die Schleife mit der nächsten Iteration fort.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">continue [<em>label</em>];</pre> + +<dl> + <dt><code>label</code></dt> + <dd>Bezeichner mit dem Namen der verbundenen Anweisung.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Im Gegensatz zur {{jsxref("Statements/break", "break")}} Anweisung, beendet <code>continue</code> die Ausführung der Schleife nicht komplett sondern:</p> + +<ul> + <li>In einer {{jsxref("Statements/while", "while")}} Schleife wird zur Bedingung gesprungen.</li> +</ul> + +<ul> + <li>In einer {{jsxref("Statements/for", "for")}} Schleife wird zur Schlussanweisung gesprungen.</li> +</ul> + +<p>Die <code>continue</code> Anweisung kann optional den Namen beinhalten und erlaubt dem Programm zum nächsten Durchlauf einer benannten Schleife zu springen anstatt der aktuellen. In diesem Fall muss die <code>continue</code> Anweisung innerhalb der benannten Anweisung liegen.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verwendung_von_continue_mit_while">Verwendung von <code>continue</code> mit <code>while</code></h3> + +<p>Das folgende Beispiel zeigt eine {{jsxref("Statements/while", "while")}} Schleife mit einer <code>continue</code> Anweisung, die ausgeführt wird, wenn <code>i</code> den Wert 3 hat. Daher nimmt <code>n</code> die Werte 1, 3, 7, und 12 an.</p> + +<pre class="brush: js">var i = 0; +var n = 0; + +while (i < 5) { + i++; + + if (i === 3) { + continue; + } + + n += i; +} +</pre> + +<h3 id="Verwendung_von_continue_mit_einem_Bezeichner">Verwendung von <code>continue</code> mit einem Bezeichner</h3> + +<p>Im folgenden Beispiel enthält die <code>checkiandj</code> benannte Anweisung eine benannte Anweisung namens <code>checkj</code>. Wenn <code>continue</code> erreicht wird, wird das Programm am Beginn der <code>checkj</code> Anweisung fortgesetzt. Jedes mal wenn <code>continue</code> erreicht wird, beginnt <code>checkj</code> einen neuen Durchlauf, bis die Bedingung <em>false</em> zurückgibt. Wenn <em>false</em> zurückgegeben wird, wird der Rest der <code>checkiandj</code> Anweisung ausgeführt.</p> + +<p>Falls <code>continue</code> einen Bezeichner <code>checkiandj</code> hätte, dann würde das Programm am Beginn der <code>checkiandj</code> Anweisung fortgesetzt.</p> + +<p>Siehe auch {{jsxref("Statements/label", "label")}}.</p> + +<pre class="brush: js">var i = 0; +var j = 8; + +checkiandj: while (i < 4) { + console.log('i: ' + i); + i += 1; + + checkj: while (j > 4) { + console.log('j: '+ j); + j -= 1; + + if ((j % 2) == 0) + continue checkj; + console.log(j + ' is odd.'); + } + console.log('i = ' + i); + console.log('j = ' + j); +} +</pre> + +<p>Ausgabe:</p> + +<pre class="brush: js">i: 0 + +// start checkj +j: 8 +7 is odd. +j: 7 +j: 6 +5 is odd. +j: 5 +// end checkj + +i = 1 +j = 4 + +i: 1 +i = 2 +j = 4 + +i: 2 +i = 3 +j = 4 + +i: 3 +i = 4 +j = 4 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition. Unbenannte Version.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Benannte Version hinzugefügt.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.statements.continue")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/debugger/index.html b/files/de/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..0beef2ded9 --- /dev/null +++ b/files/de/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,52 @@ +--- +title: debugger +slug: Web/JavaScript/Reference/Statements/debugger +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Die Anweisung <strong>debugger</strong> ruft eine nicht näher bestimmte Debugging-Funktionalität des Interpreters auf. Naheliegend, jedoch nicht vorgeschrieben, ist das Pausieren des Programmablaufs und Öffnen des Debuggers an dieser Stelle.<br> + Stellt der Interpreter keine Debugging-Möglichkeiten zur Verfügung, hat die Anweisung keine Auswirkungen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>debugger;</code></pre> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Dieses Beispiel zeigt eine Funktion, die mit der debugger-Anweisung beginnt.</p> + +<pre class="brush:js">function potentiallyBuggyCode() { + debugger; + // do potentially buggy stuff to examine, step through, etc. +}</pre> + +<p>Bei Aufruf der Funktion wird das Skript pausiert und der Debugger öffnet sich, um den weiteren Ablauf gezielt kontrollieren zu können.</p> + +<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'debugger')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.statements.debugger")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Debugging_JavaScript">Debugging JavaScript</a></li> + <li><a href="/en-US/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/default/index.html b/files/de/web/javascript/reference/statements/default/index.html new file mode 100644 index 0000000000..3d078df932 --- /dev/null +++ b/files/de/web/javascript/reference/statements/default/index.html @@ -0,0 +1,120 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Das <strong>default Schlüsselwort</strong> kann in JavaScript in zwei Situationen verwendet werden: Innerhalb eines {{jsxref("Statements/switch", "switch")}} Statements, oder mit einem {{jsxref("Statements/export", "export")}} Statement.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<p>Innerhalb eines {{jsxref("Statements/switch", "switch")}} Statements:</p> + +<pre class="syntaxbox">switch (expression) { + case value1: + // Das Statement wird ausgeführt, wenn das Ergebnis der expression mit value1 übereinstimmt + [break;] + default: + // Das Statement wird ausgeführt, wenn keiner Werte mit dem Wert der expression übereinstimmt + [break;] +}</pre> + +<p>Mit dem {{jsxref("Statements/export", "export")}} Statement:</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Für mehr Informationen, siehe die</p> + +<ul> + <li>{{jsxref("Statements/switch", "switch")}} Statement und</li> + <li>{{jsxref("Statements/export", "export")}} Statement Seiten</li> +</ul> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verwenden_von_default_in_switch_Statements">Verwenden von <code>default</code> in switch Statements</h3> + +<p>Wenn im folgenden Beispiel <code>expr</code> den Wert "Oranges" oder "Apples" hat, wird das Programm die jeweiligen Werte abgleichen und das dazugehörige Statement ausführen. Das <code>default</code> Schlüsselwort hilft, alle übrigen (nicht speziell behandelten) Fälle zu behandeln.</p> + +<pre class="brush: js">switch (expr) { + case 'Oranges': + console.log('Oranges are $0.59 a pound.'); + break; + case 'Apples': + console.log('Apples are $0.32 a pound.'); + break; + default: + console.log('Sorry, we are out of ' + expr + '.'); +}</pre> + +<h3 id="Verwenden_von_default_mit_export">Verwenden von <code>default</code> mit export</h3> + +<p>Wenn Sie einen einzelnen Wert oder einen "fallback" Wert für ein Modul brauchen, können Sie einen default export verwenden:</p> + +<pre class="brush: js">// module "my-module.js" +let cube = function cube(x) { + return x * x * x; +} +export default cube;</pre> + +<p>Dann kann der default export in einem anderen Skript direkt importiert werden:</p> + +<pre class="brush: js">// module "my-module.js" +import myFunction from 'my-module'; +console.log(cube(3)); // 27 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/do...while/index.html b/files/de/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..80dbf27192 --- /dev/null +++ b/files/de/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,132 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Das <strong><code>do...while</code> statement</strong> erstellt eine Schleife, die einen bestimmten Ausdruck ausführt, bis die zu überprüfende Aussage falsch wird. Die Aussage wird überprüft, nachdem der Ausdruck ausgeführt wurde, sodass der Ausdruck mindenstens einmal ausgeführt wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">do + <em>statement</em> +while (<em>condition</em>); +</pre> + +<dl> + <dt><code>statement</code></dt> + <dd>Ein Ausdruck, welcher mindestens einmal ausgeführt wird und jedes Mal, wenn die Aussage wahr ist, wieder ausgeführt wird. Um mehrere Ausdrücke in der Schleife auszuführen, nutzen Sie eine {{jsxref("Statements/block", "block")}} - Aussage (<code>{ ... }</code>) um diese Aussagen zu gruppieren.</dd> +</dl> + +<dl> + <dt><code>condition</code></dt> + <dd>Eine Aussage, die nach jedem Durchgang durch die Schleife überprüft wird. Falls <code>condition</code> wahr ist, wird das <code>statement</code> wieder ausgeführt. Wenn <code>condition</code> falsch wird, geht das Programm zu dem Ausdruck nach dem <code>do...while</code> über.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="do...while_benutzen"><code>do...while </code>benutzen</h3> + +<p> In dem folgendem Beispiel wird die <code>do...while</code> - Schleife mindestens einmal ausgeführt und wird wieder ausgeführt, bis <code>i</code> nicht länger weniger als 5 ist.</p> + +<pre class="brush: js">var i = 0; +do { + i += 1; + console.log(i); +} while (i < 5); +</pre> + +<h2 id="Spezialisierungen">Spezialisierungen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezialisierung</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Trailing ; ist jetzt optional.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisunterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basisunterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/empty/index.html b/files/de/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..d31a88d0bb --- /dev/null +++ b/files/de/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,147 @@ +--- +title: empty +slug: Web/JavaScript/Reference/Statements/Empty +tags: + - Anweisung + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Eine <strong>leere Anweisung</strong> dient der Angabe keiner Anweisung, obwohl die JavaScript Syntax eine erwarten würde.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Die leere Anweisung ist ein Semikolon (;) und zeigt an, dass keine Anweisung ausgeführt wird, selbst wenn die JavaScript Syntax eine erfordert. Das gegenteilige Verhalten, bei dem man mehrere Anweisungen haben will, aber JavaScript nur eine einzelne erlaubt, ist die Verwendung einer <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">Blockanweisung</a>; sie kombiniert mehrere Anweisungen in einer einzelnen.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Die leere Anweisung wird manchmal in Schleifenanweisungen verwendet. Siehe dazu das folgende Beispiel mit einem leeren Schleifenkörper:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Alle Arraywerte auf 0 setzen +for (i = 0; i < arr.length; arr[i++] = 0) /* leere Anweisung */ ; + +console.log(arr) +// [0, 0, 0] +</pre> + +<p><strong>Hinweis:</strong> Es ist gute Praxis, die beabsichtigte Verwendung der leeren Anweisung durch einen Kommentar zu erklären, da der Unterschied zu einem normalen Semikolon nicht offensichtlich ist. In dem folgenden Beispiel ist die Verwendung möglicherweise nicht beabsichtigt:</p> + +<pre class="brush: js">if (condition); // Achtung, der "if" Zweig tut nichts! + killTheUniverse() // Daher wird dies hier immer ausgeführt!!! +</pre> + +<p>Ein anderes Beispiel: Eine <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> Anweisung ohne geschweifte Klammern (<code>{}</code>). Falls <code>three</code> <code>wahr</code> ist, geschieht nichts, <code>four</code> trifft nicht zu und auch die <code>launchRocket()</code> Funktion im <code>else</code> Zweig wird nicht ausgeführt.</p> + +<pre class="brush: js">if (one) + doOne(); +else if (two) + doTwo(); +else if (three) + ; // nothing here +else if (four) + doFour(); +else + launchRocket();</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/block", "Blockanweisung")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/export/index.html b/files/de/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..ffeec6b683 --- /dev/null +++ b/files/de/web/javascript/reference/statements/export/index.html @@ -0,0 +1,126 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +tags: + - ECMAScript 2015 + - JavaScript + - Modules + - Statement + - export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Das <strong>export-Statement</strong> wird verwendet, um Funktionen und Objekte aus einer gegebenen Datei (oder <em>Modul</em>) zu exportieren.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // oder: var +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // oder: var, const + +export default <em>expression</em>; +export default function (…) { … } // oder: class, function* +export default function name1(…) { … } // oder: class, function* +export { <var>name1</var> as default, … }; + +export * from …; +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Bezeichner der exportiert werden soll (damit er in einem anderen Script via <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> importiert werden kann).</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Es gibt zwei verschiedene Arten von Exports, die jeweils der oben angegebene Syntax entsprechen:</p> + +<ul> + <li>Benannte Exports: + <pre class="brush: js">export { myFunction }; // exportiert eine Funktion, die zuvor deklariert wurde +export const foo = Math.sqrt(2); // exportiert eine Konstante</pre> + </li> + <li>Default-Exports (nur einer je Script): + <pre class="brush: js">export default function() {} // oder 'export default class {}' +// hier ist kein Semikolon</pre> + </li> +</ul> + +<p>Benannte Exports sind nützlich um mehrere Werte zu exportieren. Beim Import kann man den selben Namen verwenden um auf den entsprechenden Wert zu verweisen.</p> + +<p>Bezüglich Default-Export: es kann nur einen einzigen Default-Export pro Modul geben. Ein Default-Export kann eine Funktion sein, eine Klasse, ein Objekt oder irgendetwas anderes. Da dieser Wert am einfachsten importiert werden kann wird er als der "Haupt-Export" des Moduls angesehen.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Benannte_Exports">Benannte Exports</h3> + +<p>Im Modul können wir den folgenden Code verwenden:</p> + +<pre class="brush: js">// Modul "my-module.js" +function cube(x) { + return x * x * x; +} +const foo = Math.PI + Math.SQRT2; +export { cube, foo }; +</pre> + +<p>Daraufhin könnten wir nun in einem anderen Script (cf. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>) wie folgt vorgehen:</p> + +<pre class="brush: js">import { cube, foo } from 'my-module'; +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888</pre> + +<h3 id="Standard-Export">Standard-Export</h3> + +<p>Wenn wir nur einen einzelnen Wert exportieren wollen, oder einen Fallback-Wert für unser Modul zur Verfügung haben möchten, können wir einen Default-Export verwenden:</p> + +<pre class="brush: js">// Modul "my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>In einem anderen Script kann dieser Default-Export dann unkompliziert importiert werden:</p> + +<pre class="brush: js">import myFunction from 'my-module'; +console.log(myFunction(3)); // 27 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks Blog-Post von Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's Buch: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/for...in/index.html b/files/de/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..228f21927c --- /dev/null +++ b/files/de/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,227 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<p>Die Schleife <code>for…in</code> durchläuft alle <a href="/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften">aufzählbaren Eigenschaften</a> eines Objekts (mit Ausnahme jener, deren Name ein <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a> ist) in willkürlicher Reihenfolge und führt für jede ihren Anweisungsblock aus.</p> + +<p><strong style="">Syntax</strong></p> + +<pre class="syntaxbox">for (<var>variable</var> in <var>object</var>) {<em>...</em> }</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Bei jedem Schleifendurchlauf wird der Name der aktuellen Eigenschaft <em>variable</em> zugewiesen.</dd> + <dt><code>object</code></dt> + <dd>Das Objekt, dessen Eigenschaften durchlaufen werden sollen.</dd> +</dl> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Die Schleife <code>for…in</code> durchläuft alle eigenen und geerbten Eigenschaften, die als aufzählbar gekennzeichnet sind und deren Name kein <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a> ist, in einer nicht festgelegten Reihenfolge.</p> + +<h4 id="Aufzählbare_Eigenschaften">Aufzählbare Eigenschaften</h4> + +<p>Die Eigenschaften eines Javascript-Objekts können anhand ihres internen Statusfeldes <code>enumerable</code> als <a href="/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften">aufzählbar oder nicht aufzählbar</a> gekennzeichnet werden.</p> + +<p>Insbesondere erben manche eingebaute Objekte wie <code>Array</code> und <code>Object</code> nicht-aufzählbare Eigenschaften<span style="line-height: 1.5;"> von </span><code>Object.prototype</code> and <code>String.prototype</code><span style="line-height: 1.5;">, unter anderem die Methoden {{jsxref("String.indexOf")}} und {{jsxref("Object.toString")}}. </span></p> + +<p><span style="line-height: 1.5;">Nicht-aufzählbare Eigenschaften werden von </span> <code>for…in</code> ignoriert.</p> + +<h4 id="Reihenfolge">Reihenfolge</h4> + +<p>Obwohl die Reihenfolge bei Ausführung innerhalb desselben Interpreters als festgelegt erscheinen kann, darf von diesem Umstand nicht ausgegangen werden. Andere Versionen und insbesondere andere Javascript-Interpreter werden die Eigenschaften in einer anderen Reihenfolge durchlaufen.<br> + Die Gründe sind in der Beschreibung des Operators {{jsxref("Operators/delete", "delete")}} näher erklärt.</p> + +<h4 id="Gelöschte_hinzugefügte_oder_modifizierte_Eigenschaften">Gelöschte, hinzugefügte oder modifizierte Eigenschaften</h4> + +<p>Änderungen der Eigenschaften eines Objekts, während dieses Objekt von <code>for…in</code> durchlaufen wird, haben nachfolgende Auswirkungen:</p> + +<ul> + <li>Eine Änderung des Wertes einer Eigenschaft wirkt sich sofort auf alle nachfolgenden Schleifendurchläufe aus.</li> + <li>Eine Eigenschaft, die gelöscht wurde, bevor die Schleife sie eigentlich erreicht hätte, wird nicht mehr aufgerufen.</li> + <li>Eine Eigenschaft, die hinzugefügt wird, kann von der Schleife noch abgearbeitet werden, muss jedoch nicht. Das Verhalten ist nicht vorhersehbar.</li> +</ul> + +<p>Im Allgemeinen ist es ratsam, innerhalb einer Schleife keine Änderungen an den Eigenschaften des durchlaufenden Objekts vorzunehmen. Eine Ausnahme bildet lediglich die derzeit bearbeitete Eigenschaft.<br> + Es gibt keine Garantie, dass eine hinzugefügte Eigenschaft von der Schleife noch aufgerufen wird, ob eine geänderte (außer der aktuellen) Eigenschaft vor oder nach der Änderung aufgerufen wird oder ob eine gelöschte Eigenschaft aufgerufen wird, bevor sie gelöscht wird.</p> + +<h3 id="Array_und_for…in">Array und for…in</h3> + +<div class="note"> +<p><strong>Hinweis:</strong> <strong><code>for…in</code> sollte nicht für den Durchlauf eines {{jsxref("Array", "Arrays")}} verwendet werden, bei dem die Indexreihenfolge wichtig ist.</strong></p> +</div> + +<p>Anders als vielleicht von vielen anderen Programmiersprachen gewohnt sind bei Javascript die Indizes eines Feldes normale Objekt-Eigenschaften mit Ganzzahlen als Namen.</p> + +<p>Wie oben bereits erwähnt, ist nicht sichergestellt, dass <code>for…in</code> Eigenschaften eines Objektes in einer bestimmten Reihenfolge durchläuft. Dies gilt, da sie normale Eigenschaften sind, auch für die Feldindizes. Zudem durchläuft <code>for…in</code> auch alle anderen (aufzählbaren) Eigenschaften, einschließlich derer mit nicht ganzzahligen Namen sowie geerbte.</p> + +<p><code>for…in</code> ist daher nicht geeignet, um die Felder eines Objekts vom Typ Array von 0 bis Array.length der Reihenfolge nach zu durchlaufen.<br> + Zu diesem Zweck kann entweder auf eine {{jsxref("Statements/for", "for-Schleife")}} mit numerischem Zähler, die Array-eigene Methode {{jsxref("Array.prototype.forEach()", "forEach()")}} oder eine {{jsxref("Statements/for...of", "for...of-Schleife")}} verwendet werden.</p> + +<h3 id="Durchlauf_nur_über_eigene_Eigenschaften">Durchlauf nur über eigene Eigenschaften</h3> + +<p>Sollen nur Eigenschaften berücksichtigen möchten, die direkt mit dem Objekt verknüpft und nicht von dessen Prototypen geerbt sind, bietet sich {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} an. Die Zugehörigkeit auf einer bestimmten Eigenschaft kann mit {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} geprüft werden.<br> + Alternativ können eingebaute Prototypen mit einer Prüfmethode erweitert werden, sofern sichergestellt ist, dass es nicht zu einer Beeinflussung von externem Code kommt.</p> + +<h2 id="Example" name="Example">Beispiele</h2> + +<p>Die folgende Funktion erwartet ein Objekt als Argument. Es werden dann alle aufzählbaren Eigenschaften des Objekts durchlaufen und der Name der Eigenschaft mit dem entsprechenden Wert ausgegeben.</p> + +<pre class="brush: js">var obj = {a:1, b:2, c:3}; + +for (var prop in obj) { + console.log("o." + prop + " = " + obj[prop]); +} + +// Ausgabe: +// "o.a = 1" +// "o.b = 2" +// "o.c = 3"</pre> + +<p>Die folgende Funktion verdeutlicht die Verwendung von {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}}: die geerbten Eigenschaften werden nicht angezeigt.</p> + +<pre class="brush: js">var triangle = {a:1, b:2, c:3}; + +function ColoredTriangle() { + this.color = "red"; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (var prop in obj) { + if( obj.hasOwnProperty( prop ) ) { + console.log("o." + prop + " = " + obj[prop]); + } +} + +// Ausgabe: +// "o.color = red" +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Kompatibilität_Initialisierender_Ausdruck">Kompatibilität: Initialisierender Ausdruck</h3> + +<p>Vor SpiderMonkey 40 {{geckoRelease(40)}}, war es möglich einen initialisierenden Ausdruck (<code>i=0</code>) in einer <code>for…in</code>-Schleife zu benutzen:</p> + +<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3}; +for(var i=0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Dieses nicht standardisierte Verhalten wird ab der Version 40 ignoriert und führt im <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict-Modus</a> zu einem {{jsxref("SyntaxError")}}, "<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a>" (siehe {{bug(748550)}} und {{bug(1164741)}}).</p> + +<p>Andere Umgebungen wie v8 (Chrome), Chakra (IE/Edge), und JSC (WebKit/Safari) prüfen ebenfalls die Möglichkeit, dieses Verhalten zu entfernen.</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} – eine ähnliche Anweisung, die Eigenschafts<em>werte</em> durchläuft</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generatorausdrücke</a> (verwenden die <code>for…in</code>-Syntax)</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Aufzählbarkeit und Besitz von Eigenschaften</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/for...of/index.html b/files/de/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..4010e660e3 --- /dev/null +++ b/files/de/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,183 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - Experimental + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Mit dem <strong><code>for...of</code> statement</strong> können sogenannte <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> durchlaufen werden ({{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, das <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> Objekt und weitere eingeschlossen), wobei auf jeden gefundenen Wert eigene Statements ausgeführt werden können.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { + <em>statement +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Bei jedem Durchlauf wird <em>variable</em> der jeweils gefundene Wert zugewiesen.</dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">iterable</span></font></dt> + <dd>Objekt, dessen aufzählbare Eigenschaften durchlaufen werden.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Unterschied_zwischen_for...of_und_for...in">Unterschied zwischen <code>for...of</code> und <code>for...in</code></h3> + +<p>Das folgende Beispiel zeigt den Unterschied zwischen einer <code>for...of</code> und einer <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> Schleife. Während <code>for...in</code> über die Namen der Eigenschaften läuft, geht <code>for...of</code> über deren Werte:</p> + +<pre class="brush:js">let arr = [3, 5, 7]; +arr.foo = "hallo"; + +for (let i in arr) { + console.log(i); // logs "0", "1", "2", "foo" +} + +for (let i of arr) { + console.log(i); // logs "3", "5", "7" +} +</pre> + +<h3 id="Nutzen_von_Array.prototype.forEach">Nutzen von <code>Array.prototype.forEach()</code></h3> + +<p>Um dieselben Werte zu bekommen, die eine <code>for...of</code> Schleife zurückgeben würde, kann man auch die {{jsxref("Array.prototype.forEach()")}} Methode nutzen:</p> + +<pre class="brush: js">let arr = [3, 5, 7]; +arr.foo = "hallo"; + +arr.forEach(function (element, index) { + console.log(element); // logs "3", "5", "7" + console.log(index); // logs "0", "1", "2" +}); + +// or with Object.keys() + +Object.keys(arr).forEach(function (element, index) { + console.log(arr[element]); // logs "3", "5", "7", "hallo" + console.log(arr[index]); // logs "3", "5", "7" +});</pre> + +<h3 id="Durchlaufen_von_DOM_collections">Durchlaufen von DOM collections </h3> + +<p>DOM collections wie {{domxref("NodeList")}} durchlaufen: Das folgende Beispiel fügt eine <code>read</code> class zu allen Paragraphen hinzu, die direkte Nachfolger eines Artikels sind:</p> + +<pre class="brush:js">// Notiz: Das wird nur auf Plattformen funktionieren, die +// NodeList.prototype[Symbol.iterator] implementiert haben +let articleParagraphs = document.querySelectorAll("article > p"); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add("read"); +} +</pre> + +<h3 id="Durchlaufen_von_Generatoren">Durchlaufen von Generatoren</h3> + +<p>Man kann auch <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generatoren</a> durchlaufen:</p> + +<pre class="brush:js">function* fibonacci() { // ein Generator + let [prev, curr] = [0, 1]; + for (;;) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + // die Sequence bei 1000 abbrechen + if (n > 1000) + break; + console.log(n); +} +</pre> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(29)}}<a href="#chrome-note-1">[1]</a><br> + {{CompatChrome(38)}}</td> + <td>{{CompatGeckoDesktop("13")}}<br> + {{CompatGeckoDesktop("17")}} (.iterator)<br> + {{CompatGeckoDesktop("27")}} ("@@iterator")<br> + {{CompatGeckoDesktop("36")}} (Symbol.iterator)</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(29)}}<a href="#chrome-note-1">[1]</a><br> + {{CompatChrome(38)}}</td> + <td>{{CompatGeckoMobile("13")}}<br> + {{CompatGeckoMobile("17")}} (.iterator)<br> + {{CompatGeckoMobile("27")}} ("@@iterator")<br> + {{CompatGeckoMobile("36")}} (Symbol.iterator)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>iOS 8</td> + </tr> + </tbody> +</table> +</div> + +<p><a name="chrome-note-1"></a>[1] Dieses Feature ist als Option enthalten. In chrome://flags/#enable-javascript-harmony muss der Eintrag “Enable Experimental JavaScript” aktiviert werden.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - ein ähnliches Statement, durchläuft aber die Werte der Objekt-Eigenschaften statt der Namen der Eigenschaften selbst (veraltet).</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/for/index.html b/files/de/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..d77a89b846 --- /dev/null +++ b/files/de/web/javascript/reference/statements/for/index.html @@ -0,0 +1,201 @@ +--- +title: for +slug: Web/JavaScript/Reference/Statements/for +tags: + - Anweisung + - JavaScript + - Loop + - for +translation_of: Web/JavaScript/Reference/Statements/for +--- +<div>{{jsSidebar("Anweisungen")}}</div> + +<p>Die <strong>for Anweisung</strong> beschreibt eine Schleife mit drei optionalen Ausdrücken und einer oder mehreren Anweisungen.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>]) + <em>statement</em> +</pre> + +<dl> + <dt><code>initialization</code></dt> + <dd>Ein Ausdruck (inklusive Zuweisungen) oder eine Variablendeklaration. Normalerweise wird ein Schleifenzähler initialisiert. Neu deklarierte Variablen haben denselben Geltungsbereich wie die <code>for</code> Schleife (d.h. sie sind nicht lokal auf die Schleife begrenzt). Die Initialisierung ist optional.</dd> + <dt><code>condition</code></dt> + <dd>Die Bedingung wird <strong>vor</strong> jedem Schleifendurchlauf ausgewertet. Ergibt die Auswertung <em><strong>true</strong></em>, dann wird die Answeisung (<code>statement</code>) ausgeführt. Die Bedingung ist optional. Bei fehlender Bedingung gilt immer <em><strong>true</strong></em>. Bei <strong><em>false</em></strong> wird die Schleife verlassen (und bei der nächsten Anweisung, die dem Schleifenende folgt, weitergemacht).</dd> + <dt><code>final-expression</code></dt> + <dd>Dieser Ausdruck wird <strong>nach </strong>jedem Schleifendurchlauf ausgewertet. Dies findet vor der nächsten Auswertung der Schleifenbedinung statt. Üblicherweise wird der Schleifenzähler inkrementiert oder dekrementiert.</dd> + <dt><code>statement</code></dt> + <dd>Der Ausdruck wird ausgeführt solange die Bedingung erfüllt ist (<em><strong>true</strong></em>). Man kann mehrere Anweisungen ausführen, indem man sie in einer <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> Anweisung (<code style="font-style: normal;">{ ... }</code>) zusammenfasst. Eine leere Anweisung (<a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">empty</a> statement), markiert durch semikolon, kann auch ausgeführt werden.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verwendung_der_for_Schleife">Verwendung der <code>for</code> Schleife</h3> + +<p>Die folgende for Anweisung initialisiert die Variable <code>i</code> mit null. Die Bedingung prüft ob <code>i</code> kleiner neun ist, führt den Code in der <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> Anweisung aus und erhöht <code>i</code> um eins nach jedem Schleifendurchlauf.</p> + +<pre class="brush: js">for (var i = 0; i < 9; i++) { + console.log(i); + // more statements +} +</pre> + +<h3 id="Optionale_for_Ausdrücke">Optionale <code>for</code> Ausdrücke</h3> + +<p>Alle drei <code>for</code> Ausdrücke sind optional.</p> + +<p>Z.B. kann der Initialisierungsblock leer sein:</p> + +<pre class="brush: js">var i = 0; +for (; i < 9; i++) { + console.log(i); + // more statements +} +</pre> + +<p>Die Schleifenbedinung ist auch optional. Man muss jedoch darauf achten, dass in der Schleife eine Austrittsbedingung (<a href="/de/docs/Web/JavaScript/Reference/Statements/break">break</a> Anweisung) vorkommt, um nicht in eine Endlosschleife zu geraten.</p> + +<pre class="brush: js">for (var i = 0;; i++) { + console.log(i); + if (i > 3) break; + // more statements +}</pre> + +<p>Das gleiche gilt selbstverständlich wenn man alle drei Blöcke leer lässt. Hier wird <code>i</code> in der Schleife inkrementiert, um sicherzustellen, dass nach endlich vielen Durchläufen die Schleife abgebrochen wird.</p> + +<pre class="brush: js">var i = 0; + +for (;;) { + if (i > 3) break; + console.log(i); + i++; +} +</pre> + +<h3 id="Verwendung_von_for_Schleife_mit_leerer_Anweisung">Verwendung von <code>for</code> Schleife mit leerer Anweisung</h3> + +<p>Das folgende Beispiel zeigt eine leere Anweisung im Schleifenkörper. Die Berechnungen finden im Ausdruck <em>[final-expression] </em>statt. Die Schleife wird solange durchlaufen bis die Bedingung nicht mehr erfüllt ist.</p> + +<pre class="brush: js">function showOffsetPos (sId) { + var nLeft = 0, nTop = 0; + + for (var oItNode = document.getElementById(sId); // initialization + oItNode; // condition + nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression + /* empty statement */ ; + + console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;"); +} + +// Example call: + +showOffsetPos("content"); + +// Output: +// "Offset position of "content" element: +// left: 0px; +// top: 153px;"</pre> + +<div class="note"><strong>Beachte:</strong> Die leere Anweisung folgt der Schleife und besteht lediglich aus einem Semikolon.</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Ursprüngliche Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/empty", "empty")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></code></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/for_each...in/index.html b/files/de/web/javascript/reference/statements/for_each...in/index.html new file mode 100644 index 0000000000..34a52f5397 --- /dev/null +++ b/files/de/web/javascript/reference/statements/for_each...in/index.html @@ -0,0 +1,122 @@ +--- +title: for each...in +slug: Web/JavaScript/Reference/Statements/for_each...in +tags: + - Deprecated + - JavaScript + - Statement +translation_of: Archive/Web/JavaScript/for_each...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<div class="warning"> +<p>The <code>for each...in</code> statement is deprecated as the part of ECMA-357 (<a href="/de/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>) standard. E4X support has been removed, but for each...in will not be disabled and removed because of backward compatibility considerations. Consider using {{jsxref("Statements/for...of", "for...of")}} instead. (Please refer to {{bug("791343")}}.)</p> +</div> + +<p>Die<code> <strong>for each...in</strong></code><strong> </strong>Schleife wiederholt die definierteVariable in jeder Instanz eines Objekts. Für jedes einzelne Vorkommen wird der bestimmte Befehl ausgeführt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>for each (<em>variable</em> in <em>object</em>) { + <em>statement</em> +}</code></pre> + +<dl> + <dt><code>variable</code></dt> + <dd>die Variable, die innerhalb des durchsuchten Projekts gesucht wird. Diese kann durch das Schlüsselwort var bestimmt werden. Die Variable wird Lokal innerhalb der Funktion definiert, nicht für die ganze Schleife.</dd> +</dl> + +<dl> + <dt><code>object</code></dt> + <dd>das Objekt, innerhalb dessen die Werte gesucht werden.</dd> +</dl> + +<dl> + <dt><code>statement</code></dt> + <dd>am Befehl, der bei jedem auftreten der gesuchten Eigenschaft ausgeführt wird. Um mehrere Befehle innerhalb der Schleife auszuführen, nutzen Sie für deren Gruppierung das {{jsxref("Statements/block", "Block")}} statement (<code>{ ... }</code>) .</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>einige Eigenschaften werden nicht in der Schleife durchsucht. Diese umfassen alle standardmäßigen Methoden von Objekten, beispielsweise die String-Methode indexOf. Es werden jedoch alle vom Nutzer definierten Werte durchsucht.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Nutzung_von_for_each...in">Nutzung von <code>for each...in</code></h3> + +<p>Warnung: Nutzen Sie eine derartige Schleife niemals in Arrays. Nutzen Sie diese nur für Objekte. Weitere Einzelheiten bei {{jsxref("Statements/for...in", "for...in")}}.</p> + +<p>der folgende Code Ausschnitt durchsucht die Eigenschaften eines Objektes und errechnet ihre Summe:</p> + +<pre class="brush:js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; + +for each (var item in obj) { + sum += item; +} + +console.log(sum); // logs "26", which is 5+13+8</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<p>Kein teil der ECMA-262 Spezifikation. Implementiert in JavaScript 1.6 und deprecated.</p> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/for...in", "for...in")}} - ein ähnlicher Befehl, der die Namen der Eigenschaften durchsucht.</li> + <li>{{jsxref("Statements/for...of", "for...of")}} - a similar statement that iterates over the property <em>values</em> but can only be used for iteratable types, so not for generic objects</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/function_star_/index.html b/files/de/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..a8b2982dce --- /dev/null +++ b/files/de/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,200 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +tags: + - ECMAScript 2015 + - Function + - Iterator + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Die <code><strong>function*</strong></code>-Deklaration ( Schlüsselwort <code>function</code> gefolgt von einem Stern) definiert eine <em>Generatorfunktion</em>, welche ein {{jsxref("Global_Objects/Generator","Generator")}}-Objekt zurückgibt.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div> + + + +<div class="noinclude"> +<p>Eine Generatorfunktion kann auch mittels des {{jsxref("GeneratorFunction")}}-Konstruktors definiert werden.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Der Name der Funktion.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Der Name eines an die Funktion zu übergebenden Arguments. Eine Funktion kann bis zu 255 Argumente haben.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Die den Körper der Funktion ergebenden Anweisungen.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Generatoren sind Funktionen, die verlassen und später wieder betreten werden können. Ihr Kontext (Variablenbindung) bleibt über die Wiedereintritte hinweg erhalten.</p> + +<p>Der Aufruf einer Generatorfunktion führt ihren Körper nicht sofort aus; stattdessen wird ein <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">Iterator</a>-Objekt einer Funktion zurückgegeben. Wenn die <code>next()</code>-Methode des Iterators aufgerufen wird, wird der Körper der Generatorfunktion bis zum ersten {{jsxref("Operators/yield", "yield")}}-Ausdruck ausgeführt, der den vom Iterator zurückzugebenden Wert spezifiziert oder mittels {{jsxref("Operators/yield*", "yield*")}} an eine andere Generatorfunktion weitergibt. Die Methode <code>next()</code> gibt ein Objekt mit einer <code>value</code>-Eigenschaft zurück, die den zurückgegebenen Wert enthält, und eine Eigenschaft <code>done</code>, die anzeigt, ob der Generator seinen letzten Wert zurückgegeben hat (boolescher Wert). Beim Aufrufen der <code>next()</code>-Methode mit einem Argument wird die Generatorfunktion weiter ausgeführt.</p> + +<p>Ein <code>return</code>-Statement in einer Generatorfunktion sorgt dafür, dass der Generator fertig ist (Status <code>done</code>). Falls ein Wert zurückgegeben wird, dann wird dieser als <code>value</code> zurückgegeben. Anschließend wird kein weiterer Wert mehr zurückgegeben.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Einfaches_Beispiel">Einfaches Beispiel</h3> + +<pre class="brush: js">function* idMaker(){ + var index = 0; + while(index < index+1) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // 3 +// ...</pre> + +<h3 id="Beispiel_mit_yield*">Beispiel mit yield*</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i) { + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h3 id="Übergeben_von_Argumenten_in_Generatoren">Übergeben von Argumenten in Generatoren</h3> + +<pre class="brush: js">function* logGenerator() { + console.log(0); + console.log(1, yield); + console.log(2, yield); + console.log(3, yield); +} + +var gen = logGenerator(); + +// the first call of next executes from the start of the function +// until the first yield statement +gen.next(); // 0 +gen.next('pretzel'); // 1 pretzel +gen.next('california'); // 2 california +gen.next('mayonnaise'); // 3 mayonnaise +</pre> + +<h3 id="Return_Statement_in_einem_Generator">Return Statement in einem Generator</h3> + +<pre class="brush: js">function* yieldAndReturn() { + yield "Y"; + return "R"; + yield "unreachable"; +} + +var gen = yieldAndReturn() +console.log(gen.next()); // { value: "Y", done: false } +console.log(gen.next()); // { value: "R", done: true } +console.log(gen.next()); // { value: undefined, done: true } +</pre> + +<h3 id="Generatoren_haben_keinen_Konstruktor">Generatoren haben keinen Konstruktor</h3> + +<pre class="brush: js example-bad">function* f() {} +var obj = new f; // throws "TypeError: f ist kein Konstruktor"</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#', 'function*')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Änderung, dass Generatoren nicht über [[Construct]] trap verfügen und eine Ausnahme bei der Verwendung von <code>new</code> erzeugen.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<div> + + +<p>{{Compat("javascript.statements.generator_function")}}</p> +</div> + +<h2 id="Firefox-spezifische_Hinweise">Firefox-spezifische Hinweise</h2> + +<h4 id="Generatoren_und_Iteratoren_in_Firefox-Versionen_vor_26">Generatoren und Iteratoren in Firefox-Versionen vor 26</h4> + +<p>Ältere Firefox-Versionen implementierten eine ältere Version des Generatorenentwurfs. In den älteren Versionen wurden Generatoren, neben anderen Abweichungen, mit dem normalen Schlüsselwort <code>function</code> (ohne den Stern) definiert. Siehe <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">veraltete Generatorfunktion </a>für weitere Informationen.</p> + +<h4 id="IteratorResult-Objekt_zurückgegeben_anstatt_Ausnahme_erzeugt"><code>IteratorResult</code>-Objekt zurückgegeben anstatt Ausnahme erzeugt</h4> + +<p>Beginnend mit Gecko 29 {{geckoRelease(29)}} erzeugt die ausgeführte Generatorfunktion keine {{jsxref("TypeError")}} "generator has already finished"-Ausnahme mehr. Stattdessen gibt sie <code>ein IteratorResult</code>-Objekt mit <code>{ value: undefined, done: true }</code> ({{bug(958951)}}) zurück.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}} Objekt</li> + <li><a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">Das Iteratorprotokol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function declaration")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>Andere Quellen im Web: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&index=1">Hemanth.HM: The New gen of *gen(){}</a></li> + <li><a href="http://taskjs.org/">Task.js</a></li> + </ul> + </li> +</ul> diff --git a/files/de/web/javascript/reference/statements/funktion/index.html b/files/de/web/javascript/reference/statements/funktion/index.html new file mode 100644 index 0000000000..64a54347bc --- /dev/null +++ b/files/de/web/javascript/reference/statements/funktion/index.html @@ -0,0 +1,190 @@ +--- +title: Funktion +slug: Web/JavaScript/Reference/Statements/funktion +translation_of: Web/JavaScript/Reference/Statements/function +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Die <strong>Funktionsdeklaration</strong> definiert eine Funktion mit den angegebenen Parametern.</p> + +<p>Es kann auch eine Funktion mit dem {{jsxref("Function")}}-Konstruktor und einem {{jsxref("Operators/function", "Funktionsausdruck")}} deklariert werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) { + [<em>statements</em>] +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Der Funktionsname.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Der Name des Arguments, der an die Funktion übergeben werden soll. Eine Funktion kann bis zu 255 Argumente haben.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Die Ausdrücke, aus denen der Funktionskörper besteht.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">Eine Funktion, die mit der Funktionsdeklaration erstellt wurde, ist ein </span><code style="font-size: 14px; font-style: normal; line-height: 1.5;">Function</code><span style="font-size: 14px; font-weight: normal; line-height: 1.5;"> -Objekt und hat alle Eigenschaften, Methoden und Verhalten des <strong>Function</strong>-Objekts</span><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">. Siehe {{jsxref("Function")}} für detaillierte Information über Funktionen.</span></p> + +<p>Eine Funktion kann auch mit einem Ausdruck erzeugt werden (siehe {{jsxref("Operators/function", "function expression")}}).</p> + +<p>Standardmäßig geben Funktionen <code>undefined </code>zurück. Um einen beliebigen anderen Wert zurückzugeben muss die Funktion einen {{jsxref("Statements/return", "return")}}-Ausdruck haben, der den Wert der Rückgabe angibt.</p> + +<h3 id="Bedingungskreierte_Funktionen">Bedingungskreierte Funktionen</h3> + +<p>Funktionen können bedingungskreiert werden. Das heißt: Eine Funktionsanweisung kann innerhalb einer <code>if</code>-Anweisung verschachtelt werden. Die meisten modernen Browser, abseits von Mozilla, werden solche konditionsbasierten Deklarationen als unkonditionelle Deklarationen behandeln und die Funktion erstellen, ob wahr oder nicht, siehe <a href="http://kangax.github.io/nfe/#function-statements">dieser Artikel</a> für eine Übersicht. Deshalb sollten sie so nicht verwendet werden. Stattdessen sollten Funktionsausdrücke für eine konditionelle Erstellung verwendet werden.</p> + +<h3 id="Hochziehen_der_Funktionsdeklaration">Hochziehen der Funktionsdeklaration</h3> + +<p>Funktionsdeklarationen in Javascript ziehen die Funktionsdefinition hoch. D. h. Funktionen können benutzt werden noch bevor sie deklariert wurden:</p> + +<pre class="brush: js">hochgezogen(); // loggt "foo" + +function hochgezogen() { + console.log("foo"); +} +</pre> + +<p>Zu beachten ist aber, dass {{jsxref("Operators/function", "Funktionsausdrücke")}} nicht hochgezogen werden:</p> + +<pre class="brush: js">nichtHochgezogen(); // TypeError: nichtHochgezogen is not a function + +var nichtHochgezogen = function() { + console.log("bar"); +}; +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Mit_function">Mit <code>function</code></h3> + +<p>Der folgende Code deklariert eine Funktion, die die Summe aller Verkäufe zurückgibt, wenn sie die Anzahl der verkauften Einheiten <code>a</code>, <code>b</code>, und <code>c </code>übergeben bekommt.</p> + +<pre class="brush: js">function berechne_verkäufe(einheit_a, einheit_b, einheit_c) { + return einheit_a*79 + einheit_b * 129 + einheit_c * 699; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatChrome(49.0)}}</p> + </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/if...else/index.html b/files/de/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..f0d95829cf --- /dev/null +++ b/files/de/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,168 @@ +--- +title: if...else +slug: Web/JavaScript/Reference/Statements/if...else +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +<div>{{jsSidebar("Statements")}}</div> + +<p class="seoSummary">Die <strong>if-Anweisung</strong> führt Anweisungen aus, wenn eine bestimmte Bedingung zu <code>true</code> ausgewertet wird. Wird die Bedingung zu <code>false</code> ausgewertet, können andere Anweisungen ausgeführt werden.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">if (bedingung)<em> anweisung1</em> [else <em>anweisung2</em>] +</pre> + +<dl> + <dt><code>bedingung</code></dt> + <dd>Ein <a href="/de/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">Ausdruck</a>, der zu <code>true</code> oder <code>false</code> ausgewertet wird.</dd> +</dl> + +<dl> + <dt><code>anweisung1</code></dt> + <dd>Eine Anweisung, die ausgeführt wird, wenn <code>bedingung</code> zu <code>true</code> ausgewertet wird. Diese Anweisung kann jede gültige Anweisung sein, auch eine if-Anweisung. Um mehrere Anweisungen auszuführen, muss eine {{jsxref("Statements/block", "block")}}-Anweisung (<code>{...}</code>) genutzt werden, um die Anweisungen zu gruppieren. Wenn keine Anweisung ausgeführt werden soll, muss die {{jsxref("Statements/empty", "empty")}}-Anweisung genutzt werden.</dd> +</dl> + +<dl> + <dt><code>anweisung2</code></dt> + <dd>Eine Anweisung, die ausgeführt wird, wenn <code>bedingung</code> zu false ausgewertet wird und die <code>else</code> Klausel existiert. Auch hier können alle Anweisungen, egal ob {{jsxref("Statements/block", "block")}}-Anweisung (<code>{...}</code>) oder weitere if-Anweisungen genutzt werden.</dd> +</dl> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Mehrere <code>if...else</code>-Anweisungen können verschachtelt werden, wenn eine <code>else if</code>-Klausel erstellt wird. Zu beachten ist, dass es in JavaScript kein Schlüsselwort <code>elseif</code> (in einem Wort) gibt.</p> + +<pre class="eval">if (<em>bedingung1</em>) + <em>anweisung1</em> +else if (<em>bedingung2</em>) + <em>anweisung2</em> +else if (<em>bedingung3</em>) + <em>anweisung3</em> +... +else + <em>anweisungN</em> +</pre> + +<p>Um zu sehen wie das funktioniert, ist es hilfreich, die verschachtelten Anweisungen einzurücken:</p> + +<pre class="eval">if (<em>bedingung1</em>) + <em>anweisung1</em> +else + if (<em>bedingung2</em>) + <em>anweisung2</em> + else + if (<em>bedingung3</em>) +... +</pre> + +<p>Um mehrere Anweisungen in einer Klausel auszuführen, muss eine {{jsxref("Statements/block", "block")}}-Anweisung genutzt werden. Allgemein ist es immer gute Praxis (best practice) eine {{jsxref("Statements/block", "block")}}-Anweisung zu nutzen, besonders bei verschachtelten <code>if</code>-Anweisungen.</p> + +<pre class="eval">if (<em>bedingung</em>) { + <em>anweisung1</em> +} else { + <em>anweisung2</em> +} +</pre> + +<p>Man sollte den primitiven boolean-Datentyp nicht mit dem {{jsxref("Global_Objects/Boolean", "Boolean")}}-Objekt verwechseln. Jeder Wert, der nicht <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, oder der leere string (<code>""</code>) ist, wird zu <code>true</code> ausgewertet. Dabei ist auch ein {{jsxref("Global_Objects/Boolean", "Boolean")}}-Objekt mit dem Wert false inbegriffen.</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // wird zu true ausgewertet +</pre> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Example:_Using_if...else" name="Example:_Using_if...else">Einsatz von <code>if...else</code></h3> + +<pre class="brush: js">if (cipher_char === from_char) { + result = result + to_char; + x++; +} else { + result = result + clear_char; +} +</pre> + +<h3 id="Einsatz_von_else_if">Einsatz von <code>else if</code></h3> + +<p>Zu beachten ist, dass in JavaScript kein <code>elseif</code>-Schlüsselwort existiert. Man kann jedoch immer ein Leerzeichen zwischen <code>else</code> und <code>if</code> benutzen.</p> + +<pre class="brush: js">if (x > 5) { + +} else if (x > 50) { + +} else { + +}</pre> + +<h3 id="Example:_Assignment_within_the_conditional_expression" name="Example:_Assignment_within_the_conditional_expression">Zuweisungen in der Bedingung</h3> + +<p>Es ist nicht <span class="dpf_sent" id="dpfsent_1">ratsam </span>einfache Zuweisungen in die Bedingung zu schreiben, weil sie zu <span class="dpf_sent" id="dpfsent_1">Verwechselungen </span>mit dem Gleichheit-Operator führen kann. Zum Beispiel führt folgender Quelltext, der eine Zuweisung enthält immer zu 'true' und sollte daher so nicht benutzt werden:</p> + +<pre class="brush: js example-bad">if (x = y) { + /* tu das richtige */ +} +</pre> + +<p>Wenn es nötig ist, eine Zuweisung in einer Bedingungs-Anweisunge zu benutzen, dann sollten Klammern um die Zuweisung gesetzt werden. Der Effekt ist jedoch derselbe, wie im vorangegangenen Code. Zum Beispiel:</p> + +<pre class="brush: js example-good">if ((x = y)) { + /* tu das richtige */ +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.statements.if_else")}}</p> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/block", "block")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li>{{jsxref("Operators/conditional_operator", "Bedingter (ternärer) Operator")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/import/index.html b/files/de/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..07e1b12a7d --- /dev/null +++ b/files/de/web/javascript/reference/statements/import/index.html @@ -0,0 +1,151 @@ +--- +title: import +slug: Web/JavaScript/Reference/Statements/import +tags: + - ECMAScript 2015 + - JavaScript + - Module + - Statement +translation_of: Web/JavaScript/Reference/Statements/import +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Das <strong>import Statement </strong>wird verwendet um Funktionen, Objekte und Primitives zu importieren die von einem externen Modul, einem anderen Script, etc. exportiert wurden.</p> + +<p>{{noteStart}}Zur Zeit wird dieses Feature nicht von jedem Browser nativ unterstützt. Viele Transpiler implementieren es, wie beispielsweise der <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a>, <a href="https://github.com/rollup/rollup">Rollup</a> oder <a href="https://webpack.js.org/">Webpack</a>.{{noteEnd}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">import <em>name</em> from "<em>module-name</em>"; +import * as <em>name</em> from "<em>module-name</em>"; +import { <em>member </em>} from "<em>module-name</em>"; +import { <em>member</em> as <em>alias </em>} from "<em>module-name</em>"; +import { <em>member1 , member2</em> } from "<em>module-name</em>"; +import { <em>member1 , member2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>"; +import <em>defaultMember</em>, { <em>member</em> [ , <em>[...]</em> ] } from "<em>module-name</em>"; +import <em>defaultMember</em>, * as <em>alias</em> from "<em>module-name</em>"; +import <em>defaultMember</em> from "<em>module-name</em>"; +import "<em>module-name</em>";</pre> + +<dl> + <dt><font face="Courier New, Andale Mono, monospace">name</font></dt> + <dd>Name des Objekts, das die importierten Daten empfängt</dd> +</dl> + +<dl> + <dt><code>member, memberN</code></dt> + <dd>Namen der exportierten Member, die importiert werden</dd> + <dt><code>defaultMember</code></dt> + <dd>Name des exportierten Defaults, das importiert wird</dd> + <dt><code>alias, aliasN</code></dt> + <dd>Name des Objekts, das die importierte Property empfängt</dd> + <dt><code>module-name</code></dt> + <dd>Der Name des Moduls, das importiert wird. Also der Dateiname.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Der Parameter <em><code>name</code></em> ist der Name des Objekts, das die exportierten Member empfängt. Die <em><code>member-</code></em>Parameter legen einzelne Einheiten fest, während der <em><code>name</code></em> Parameter alles importiert. <em><code>name</code></em> kann auch eine Funktion sein, wenn das Modul nur eine Einheit hat. Es folgen ein paar Beispiele für die Syntax:</p> + +<p>Importieren der gesamten Inhalte des Moduls. Folgendes fügt <code>myModule</code> in den aktuellen Namensraum ein, mit allen exportierten Verbindungen von "my-module" bzw. "my-module.js".</p> + +<pre class="brush: js">import * as <em>myModule</em> from "my-module"; +</pre> + +<p>Einfügen einer einzelnen Einheit eines Moduls. Folgendes fügt <code>myMember</code> in den aktuellen Namensraum ein.</p> + +<pre class="brush: js">import {myMember} from "my-module";</pre> + +<p>Einfügen von mehreren Einheiten eines Moduls. Folgendes fügt <code>foo</code> und <code>bar</code> in den aktuellen Namensraum ein.</p> + +<pre class="brush: js">import {foo, bar} from "my-module";</pre> + +<p>Einfügen und Vergeben eines Alias. Folgendes fügt <code>shortName</code> in den aktuellen Namensraum ein.</p> + +<pre class="brush: js">import {reallyReallyLongModuleMemberName as shortName} from "my-module";</pre> + +<p>Einfügen und Vergeben von mehreren Aliasen</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">import</span> <span class="punctuation token">{</span>reallyReallyLongModuleMemberName <span class="keyword token">as</span> shortName<span class="punctuation token">,</span> anotherLongModuleName <span class="keyword token">as</span> short<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">"my-module"</span><span class="punctuation token">;</span></code></pre> + +<p>Einfügen eines ganzen Moduls, ohne dessen Namensbindungen zu importieren.</p> + +<pre class="brush: js">import 'my-module';</pre> + +<h3 id="Defaults_importieren">Defaults importieren</h3> + +<p>Ein Standardexport ist möglich (egal, ob es sich um ein Objekt, eine Funktion, eine Klasse oder anderes handelt). Dementsprechend ist es auch möglich einen Standard-<code>import</code> zu benutzen, um diese Standards zu importieren.</p> + +<p>Die einfachste Version importiert die Standards direkt:</p> + +<pre class="brush: js">import myModule from "my-module";</pre> + +<p>Man kann diese Syntax auch benutzen, um die oben genannten imports durchzufüren. In diesem Fall müssen die Standards aber wie folgt definiert werden:</p> + +<pre class="brush: js">import myDefault, * as myModule from "my-module"; +// myModule wird als namespace benutzt</pre> + +<p>oder</p> + +<pre class="brush: js">import myDefault, {foo, bar} from "my-module"; +// spezifische Imports nach Namen +</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Importieren einer weiteren Datei um AJAX JSON-Anfragen zu bearbeiten:</p> + +<pre class="brush: js; highlight: [14]">// --file.js-- +function getJSON(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + callback(this.responseText) + }; + xhr.open("GET", url, true); + xhr.send(); +} + +export function getUsefulContents(url, callback) { + getJSON(url, data => callback(JSON.parse(data))); +} + +// --main.js-- +import { getUsefulContents } from "file"; +getUsefulContents("http://www.example.com", data => { + doSomethingUseful(data); +});</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("javascript.statements.import")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Vorschau von Modulen und mehr von ES2015, ES2016 und darüber</a></li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks Blog Post vonJason Orendorff</li> + <li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's Buch: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/index.html b/files/de/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..a460b954d2 --- /dev/null +++ b/files/de/web/javascript/reference/statements/index.html @@ -0,0 +1,148 @@ +--- +title: Anweisungen und Deklarationen +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - Reference + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>JavaScript Anwendungen bestehen aus Anweisungen mit bestimmter Syntax. Eine Anweisung kann mehrere Zeilen umfassen und mehrere Anweisungen können in einer einzigen Zeile stehen, wenn sie mittels Semikolon voneinander getrennt sind.</p> + +<h2 id="Anweisungen_und_Deklarationen_nach_Kategorie">Anweisungen und Deklarationen nach Kategorie</h2> + +<p>Für eine alphabetische Auflistung, siehe Sidebar auf der linken Seite.</p> + +<h3 id="Kontrollfluss">Kontrollfluss</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>Anweisungsblöcke werden genutzt um ein oder mehrere Anweisungen zu gruppieren. Der Block wird von geschweiften Klammern umfasst.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Beendet die aktuelle Schleifen-, Switch-, oder mit Label versehene Anweisung und das Programm wird hinter dieser fortgesetzt.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Beendet den Durchlauf der aktuellen, bzw. der mittels Label angesprochenen Schleife und fährt mit dem nächsten Schleifendurchlauf fort.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>Man verwendet <em>empty </em>anstatt einer echten Anweisung, um keine Anweisung zu geben, an stellen an denen nach JavaScript-Syntax eine erwartet wird.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Führt eine Anweisung aus wenn eine zuvor festgelegte Bedingung erfüllt (als <em>true</em> gewertet) wird. Ist die Bedingung <em>false,</em> kann eine andere Anweisung ausgeführt werden.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Nach Auswertung eines Ausdrucks, wird anhand des Ergebnisses eine Fallunterscheidung durchgeführt und die entsprechende durch ein case-Label markierte Anweisung ausgeführt.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Leitet das Auswerfen eines Fehlerausdrucks ein.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Ein Anweisungsblock wird "ausprobiert" (try) und ein eventuell auftretender Fehler abgefangen (catch) und gegebenenfalls behandelt.</dd> +</dl> + +<h3 id="Deklarationen">Deklarationen</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Deklariert eine Variable und initialisiert sie optional mit einem Wert.</dd> + <dt>{{experimental_inline()}} {{jsxref("Statements/let", "let")}}</dt> + <dd>Deklariert eine Blocklokale variable und initialisiert sie optional mit einem Wert.</dd> + <dt>{{experimental_inline()}} {{jsxref("Statements/const", "const")}}</dt> + <dd>Deklariert eine Konstante auf welche nur lesend zugegriffen werden kann.</dd> +</dl> + +<h3 id="Funktionen_und_Klassen">Funktionen und Klassen</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Deklariert eine Funktion mit festgelegten Parametern.</dd> + <dt>{{experimental_inline()}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd>Erzeugt Funktionen mit denen Schleifen leichter zu schreiben sind.</dd> + <dt>{{jsxref("Statements/async_function", "async function")}}</dt> + <dd>Deklariert eine asynchrone Funktion mit festgelegten Parametern.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Legt den Rückgabewert einer Funktion fest.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Deklariert eine Klasse.</dd> +</dl> + +<h3 id="Schleifen">Schleifen</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Eine Schleife die solange ausgeführt wird bis die Bedingung false ist. Die Bedingung wird erst am Ende eines Durchgangs überprüft.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Erstellt eine von drei unerforderlichen, zwischen Parenthesen geklammerten, durch Semikola getrennten Ausdrücken geregelte Schleife, gefolgt von einem Anweisungsblock innerhalb der Schleife.</dd> + <dt>{{deprecated_inline()}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for_each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Stellt die aufzählbaren Eigenschaften eines Objektes in einer unbestimmten Reihenfolge zur Verfügung. Jede Eigenschaft kann durch Anweisungen in der Schleife ausgewertet werden.</dd> + <dt>{{experimental_inline()}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Durchläuft die Werte eines <a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">iterationsfähigen</a> Objektes, wie zum Beispiel eines <code><a href="/de/docs/Glossary/array">arrays</a></code>, eines Array-ähnlichen Objektes, oder eines <a href="/de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren">Iterators oder Generators</a>. Für jeden Wert des Objektes können Anweisungen ausgewertet werden.</dd> + <dt> </dt> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Erstellt eine Schleife, die solange durchlaufen wird, wie die Schleifenbedingung wahr ist. Die Schleifenbedingung wird am Anfang der Schleife (vor dem ersten Durchlauf des inneren Befehlsblocks) ausgewertet.</dd> +</dl> + +<h3 id="Weiteres">Weiteres</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Ruft irgendwelches verfügbare Fehlerentdeckungsvermögen auf. Steht keines zur Verfügung, hat dieser Befehl keine Wirkung.</dd> + <dt>{{experimental_inline()}} {{jsxref("Statements/export", "export")}}</dt> + <dd>Stellt eine Funktion zur Anwendung in anderen Modulen bereit. Dieser Ausdruck wird in dem Quellenmodul verwendet. Steht in Zusammenhang mit <code><a href="/de/docs/Web/JavaScript/Reference/Statements/import">import</a></code> auf der anderen Seite des Wechsels.</dd> + <dt>{{experimental_inline()}} {{jsxref("Statements/import", "import")}}</dt> + <dd>Importiert eine aus einem anderen Modul stammende Funktion, oder den gesamten Modul. Dieser Ausdruck wird in dem Entleihermodul verwendet, und arbeitet in Zusammenhang mit <code><a href="/de/docs/Web/JavaScript/Reference/Statements/export">export</a></code>.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Hängt ein Etikett an eine Anweisung an. Auf dieses Etikett können <code><a href="/de/docs/Web/JavaScript/Reference/Statements/break">break</a></code> (aussteigen) oder <code><a href="/de/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> (fortsetzen) hinweisen, um den Kontrollfluss mit einer größeren Genauigkeit zu steuern.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline()}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial Definition</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Neu: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.statements")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/label/index.html b/files/de/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..e9fcae4b50 --- /dev/null +++ b/files/de/web/javascript/reference/statements/label/index.html @@ -0,0 +1,205 @@ +--- +title: label +slug: Web/JavaScript/Reference/Statements/label +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/label +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Ein Statement kann ein Label erhalten und zusammen mit dem {{jsxref("Statements/break", "break")}} oder {{jsxref("Statements/continue", "continue")}} Statements verwendet werden. Das Label ist das Präfix von einem Statement mit einer Bezeichner zum referenzieren.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>label</em> : <em>statement</em> +</pre> + +<dl> + <dt><code>label</code></dt> + <dd>Jeder JavaScript Bezeichner, welches kein reserviertes Wort ist.</dd> + <dt><code>statement</code></dt> + <dd>Statements. <code>break</code> kann mit jedem gelabelten Statement und <code>continue</code> kann mit Schleifen-Statements verwendet werden.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Sie können ein Label verwenden, um eine Schleife zu identifizieren und danach einen <code>break </code>oder <code>continue </code>Statement verwenden, um anzugeben ob ein Programm die Schleife abbrechen oder weiter abarbeiten soll.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> JavaScript hat <strong>KEINE </strong><code>goto </code>Statements. Sie können die Labels nur mit <code>break</code> oder <code>continue </code>verwenden.</p> +</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verwenden_eines_continue_mit_Labels_in_for-Schleifen">Verwenden eines <code>continue</code> mit Labels in <code>for</code>-Schleifen</h3> + +<pre class="brush: js">var i, j; + +loop1: +for (i = 0; i < 3; i++) { // Das erste for Statement hat den Label "loop1" + loop2: + for (j = 0; j < 3; j++) { // Das zweite for Statement hat den Label "loop2" + if (i === 1 && j === 1) { + continue loop1; + } + console.log("i = " + i + ", j = " + j); + } +} + +// Ausgabe ist: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// "i = 2, j = 0" +// "i = 2, j = 1" +// "i = 2, j = 2" +// Schau, wie "i = 1, j = 1" und"i = 1, j = 2" übersprungen werden +</pre> + +<h3 id="Verwenden_eines_continue_Statements_mit_Label">Verwenden eines <code>continue</code> Statements mit Label</h3> + +<p>Gegeben sei ein Array von Elementen und ein Array von Tests. Dieses Beispiel zählt die Anzahl von Elemente, die alle Tests bestehen.</p> + +<pre class="brush: js">var itemsPassed = 0; +var i, j; + +top: +for (i = 0; i < items.length; i++){ + for (j = 0; j < tests.length; j++) { + if (!tests[j].pass(items[i])) { + continue top; + } + } + + itemsPassed++; +}</pre> + +<h3 id="Verwenden_eines_breaks_mit_Labels_für_for-Schleifen">Verwenden eines <code>breaks</code> mit Labels für <code>for</code>-Schleifen</h3> + +<pre class="brush: js">var i, j; + +loop1: +for (i = 0; i < 3; i++) { // Das erste for Statement hat den Label "loop1" + loop2: + for (j = 0; j < 3; j++) { // Das zweite for Statement hat den Label "loop2" + if (i === 1 && j === 1) { + break loop1; + } + console.log("i = " + i + ", j = " + j); + } +} + +// Ausgabe ist: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// Schau den Unterschied zu dem vorigen continue Beispiel an</pre> + +<h3 id="Verwenden_eines_Labels_im_break_Statement">Verwenden eines Labels im <code>break</code> Statement</h3> + +<p>Gegeben ist ein Array von Items und ein Array von Tests. Dieses Beispiel bestimmt, ob alle Items alle Tests bestehen.</p> + +<pre class="brush: js">var allPass = true; +var i, j; + +top: +for (i = 0; items.length; i++) + for (j = 0; j < tests.length; i++) + if (!tests[j].pass(items[i])){ + allPass = false; + break top; + }</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/let/index.html b/files/de/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..5c68f5eb96 --- /dev/null +++ b/files/de/web/javascript/reference/statements/let/index.html @@ -0,0 +1,454 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +tags: + - ECMAScript 2015 + - JavaScript + - Statement + - Variable declaration + - Variables + - let +translation_of: Web/JavaScript/Reference/Statements/let +--- +<div> +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> +</div> + +<p>Das Schlüsselwort <strong><code>let</code></strong> deklariert eine Variable im Gültigkeitsbereich des lokalen Blocks. Optional wird die Variable mit einem Wert initialisiert. <strong>let </strong>leitet sich vom englischen Verb "to let" ab, so daß man die Zeile "let x = 3" lesen kann als: "lassen wir x 3 sein" (let x be three), bekannt aus der Programmiersprache BASIC.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">let var1 [= wert1] [, var2 [= wert2]] [, ..., varN [= wertN]];</pre> + +<h3 id="Parameters" name="Parameters">Parameter</h3> + +<dl> + <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt> + <dd>Variablenname. Jeder legale Bezeichner ist erlaubt.</dd> + <dt><code>wert1</code>, <code>wert2</code>, …, <code>wertN</code></dt> + <dd>Initialwerte der Variablen. Jeder legale Ausdruck ist erlaubt.</dd> +</dl> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p><code>let</code> ermöglicht es Variablen zu deklarieren, deren Gültigkeitsbereich auf den Block, den Befehl oder den Ausdruck beschränkt ist, in dem sie deklariert sind. Der Unterschied zum <a href="/de/docs/JavaScript/Reference/Statements/var"><code>var</code></a> Schlüsselwort ist, dass der Gültigkeitsbereich auf Blöcke und nicht auf Funktionen bzw. Global beschränkt ist.</p> + +<h3 id="Regeln_für_Gültigkeitsbereiche_2">Regeln für Gültigkeitsbereiche</h3> + +<p>Variablen, die mit <code>let</code> deklariert werden, haben als Gültigkeitsbereich den Block in dem sie definiert wurden und alle weiteren Unterblöcke in denen sie nicht neu definiert werden. In dieser Hinsicht funktioniert <code>let</code> ähnlich wie <code>var</code>. Der Unterschied besteht darin, dass der Gültigkeitbereich bei <code>var</code> Deklarierten Variablen die umschließende Funktion ist:</p> + +<pre class="brush:js">function varTest() { + var x = 31; + if (true) { + var x = 71; // gleiche Variable! + console.log(x); // 71 + } + console.log(x); // 71 +} + +function letTest() { + let x = 31; + if (true) { + let x = 71; // andere variable + console.log(x); // 71 + } + console.log(x); // 31 +}</pre> + +<p id="Regeln_für_Gültigkeitsbereiche">Auf der ersten Ebene von Programmen und Funktionen erzeugt <code>let</code> im globalen Objekt keine Property, <code>var</code> hingegen schon. Deshalb ist <code>this.y</code> im folgenden Beispiel <code>undefined</code>.</p> + +<pre class="brush:js">var x = 'global'; +let y = 'global'; +console.log(this.x); // "global" +console.log(this.y); // undefined</pre> + +<h3 id="Private_Eigenschaften_emulieren">Private Eigenschaften emulieren</h3> + +<p>Beim Einsatz von <a href="https://developer.mozilla.org/de/docs/Glossary/Konstruktor">Konstruktoren</a> können <strong><code>let</code></strong>-Deklarationen (alternativ zu <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Closures">Closures</a>) genutzt werden, um private Eigenschaften in mehreren Methoden zu verwenden.</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> Thing<span class="punctuation token">;</span> + +<span class="punctuation token">{</span> + <span class="keyword token">let</span> privateScope <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">WeakMap</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> counter <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> + + <span class="function function-variable token">Thing</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>someProperty <span class="operator token">=</span> <span class="string token">'foo'</span><span class="punctuation token">;</span> + + privateScope<span class="punctuation token">.</span><span class="function token">set</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> + hidden<span class="punctuation token">:</span> <span class="operator token">++</span>counter<span class="punctuation token">,</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="class-name token">Thing</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function function-variable token">showPublic</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span>someProperty<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="class-name token">Thing</span><span class="punctuation token">.</span>prototype<span class="punctuation token">.</span><span class="function function-variable token">showPrivate</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> privateScope<span class="punctuation token">.</span><span class="function token">get</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span>hidden<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">typeof</span> privateScope<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// "undefined"</span> + +<span class="keyword token">var</span> thing <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Thing</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>thing<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Thing {someProperty: "foo"}</span> + +thing<span class="punctuation token">.</span><span class="function token">showPublic</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// "foo"</span> + +thing<span class="punctuation token">.</span><span class="function token">showPrivate</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// 1</span></code></pre> + +<p>Das selbe Kapselungsmuster mit Funktionsabschlüssen über lokale Variablen kann mit <code>var</code> erstellt werden, aber dieses benötigt dann funktionsweite Sichtbarkeit (üblicherweise eine IIFE im Modulmuster) anstatt nur blockweite Sichtbarkeit wie das obenstehende Beispiel.</p> + +<h3 id="Redeklarationen">Redeklarationen</h3> + +<p>Erneute Deklaration derselben Variable innerhalb desselben Gültigkeitsbereiches erzeugt einen Syntaxfehler ({{jsxref("SyntaxError")}}).</p> + +<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> foo<span class="punctuation token">;</span> + <span class="keyword token">let</span> foo<span class="punctuation token">;</span> <span class="comment token">// SyntaxError thrown.</span> +<span class="punctuation token">}</span></code></pre> + +<p>Der Körper einer <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/switch"><code>switch</code></a>-Anweisung ist nur ein einzelner Block, weshalb das folgende Beispiel einen Fehler verursacht.</p> + +<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> x <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> +<span class="keyword token">switch</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">case</span> <span class="number token">0</span><span class="punctuation token">:</span> + <span class="keyword token">let</span> foo<span class="punctuation token">;</span> + <span class="keyword token">break</span><span class="punctuation token">;</span> + + <span class="keyword token">case</span> <span class="number token">1</span><span class="punctuation token">:</span> + <span class="keyword token">let</span> foo<span class="punctuation token">;</span> <span class="comment token">// SyntaxError for redeclaration.</span> + <span class="keyword token">break</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Ist innerhalb einer case-Klausel jedoch ein innerer Block eingebettet, erzeugt dieser seinen eigenen lexikalischen Gültigkeitsbereich. Das folgende Beispiel erzeugt deshalb keine solchen Redeklarations-Fehler, wie sie im vorangegangenen Beispiel auftraten.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> x <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + +<span class="keyword token">switch</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">case</span> <span class="number token">0</span><span class="punctuation token">:</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> foo<span class="punctuation token">;</span> + <span class="keyword token">break</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">case</span> <span class="number token">1</span><span class="punctuation token">:</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> foo<span class="punctuation token">;</span> + <span class="keyword token">break</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="Sauberer_Quelltext_in_inneren_Funktionen">Sauberer Quelltext in inneren Funktionen</h3> + +<p><code>let</code> macht den Programmcode manchmal leserlicher, wenn innere Funktionen eingesetzt werden.</p> + +<pre class="brush:js">var list = document.getElementById("list"); + +for (var i = 1; i <= 5; i++) { + var item = document.createElement("li"); + item.appendChild(document.createTextNode("Item " + i)); + + let j = i; + item.onclick = function (ev) { + console.log("Item " + j + " is clicked."); + }; + list.appendChild(item); +} +</pre> + +<p>Dieses Beispiel funktioniert wie erwartet, weil alle fünf Instanzen der anonymen inneren Funktionen auf verschiedene Instanzen der Variable <code>j</code> zugreifen. Wenn stattdessen <code>var</code> verwendet wird oder in der inneren Funktion statt <code>j</code> zu deklarieren <code>i</code> benutzt wird, funktioniert dies nicht.</p> + +<h3 id="Zeitweilig_tote_Zonen_und_Fehler_mit_let">Zeitweilig tote Zonen und Fehler mit <code>let</code></h3> + +<p>In ECMAScript 2015, werden Deklarationen mit <code>let</code> nicht an den Anfang des Blocks verschoben (hoist). Wird eine Variable vor der Deklaration in einem Block referenziert, führt dies zu einem <code><a href="/de/docs/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>, weil sich die Variable bei Eintritt in den Block bis zur Verarbeitung der Deklaration in einer "zeitweilig toten Zone" (temporal dead zone) befindet.</p> + +<pre class="brush: js">function do_something() { + console.log(foo); // ReferenceError + let foo = 2; +}</pre> + +<p>Ein <a href="/de/docs/JavaScript/Reference/Statements/switch"><code>switch</code></a> Block besteht nur aus einem Block, so dass Fehler wie im folgenden Beispiel auftreten können.</p> + +<pre class="brush: js">switch (x) { + case 0: + let foo; + break; + + case 1: + let foo; // SyntaxError für erneute Deklaration + break; +}</pre> + +<h3 id="Ein_weiteres_Beispiel_zeitweilig_toter_Zonen_mit_lexikalischen_Gültigkeitsbereichen">Ein weiteres Beispiel zeitweilig toter Zonen mit lexikalischen Gültigkeitsbereichen</h3> + +<p>Aufgrund seines lexikalischen Gültigkeitsbereiches wird der Bezeichner<strong> "foo"</strong> im untenstehenden Ausdruck <code>(foo + 55)</code> als das foo <u>des if-Blocks</u> interpretiert, <strong>nicht</strong> aber als die <u>verdeckte Variable</u> foo mit dem Wert 33.<br> + Bei Auswertung des Ausdrucks existiert das foo <u>des if-Blocks</u> bereits im lexikalischen Gültigkeitsbereich, hat seine Initialisierung (welche Teil derselben Anweisung ist) aber noch nicht erreicht (und auch nicht <strong>abgeschlossen</strong>). Folglich ist es noch immer in seiner zeitweilig toten Zone.</p> + +<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">test</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="number token">33</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="boolean token">true</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> foo <span class="operator token">=</span> <span class="punctuation token">(</span>foo <span class="operator token">+</span> <span class="number token">55</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// ReferenceError</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> +<span class="function token">test</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Dieses Phänomen kann in einer Situation wie der folgenden verwirren. Die Anweisung <code>let n of n.a</code> gehört bereits zum eigenen Gültigkeitsbereich <u>des Blocks der for-Schleife</u>. Der Bezeichner<strong> "n.a"</strong> wird als Eigenschaft 'a' des Objektes 'n' interpretiert, <u>welches im ersten Teil derselben Anweisung deklariert wird</u> ("let n"). Dieses befindet sich noch immer in seiner zeitweilig toten Zone, da bei Auswertung des Ausdrucks die Deklarationsanweisung als noch nicht erreicht und <strong>abgeschlossen</strong> gilt.</p> + +<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">go</span><span class="punctuation token">(</span><span class="parameter token">n</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// n here is defined!</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>n<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Object {a: [1,2,3]}</span> + + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> n <span class="keyword token">of</span> n<span class="punctuation token">.</span>a<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// ReferenceError</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>n<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> + +<span class="function token">go</span><span class="punctuation token">(</span><span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">]</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Nicht-standardisierte_let_Ausdrücke">Nicht-standardisierte <code>let</code> Ausdrücke</h2> + +<h3 id="let_Blöcke"><code>let</code> Blöcke</h3> + +<div class="warning"> +<p>Die Unterstützung für <code>let</code> Blöcke wurde in Gecko 44 entfernt ({{bug(1167029)}}).</p> +</div> + +<p><strong><code>let</code> Blöcke </strong>ermöglichen es Werte von Variablen in einem Block zu bearbeiten, ohne gleichnamige Variablen außerhalb des Blocks zu beeinflussen.</p> + +<h4 id="Syntax_2">Syntax</h4> + +<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) block;</pre> + +<h4 id="Beschreibung">Beschreibung</h4> + +<p>Der <code>let</code> Block unterstützt lokales Scoping für Variablen. Es funktioniert mit dem Binden von keiner oder mehreren Variablen im lexikalischen Scope eines einzigen Blocks. Ansonsten ist es genau das selbe wie ein Block Statement. Zu beachten ist, dass Variablen, die innerhalb des <code>let</code> Blocks mit <code>var</code> definiert werden auch außerhalb des Blocks verfügbar sind, weil diese an die Funktion gebunden werden. Wenn ein <code>let</code> Block-Syntax benutzt wird, ist das <code>let</code> gefolgt von runden Klammern zwingend notwendig. Fehler beim benutzen führen zu einem Syntaxerror.</p> + +<h4 id="Beispiel">Beispiel</h4> + +<pre class="brush:js">var x = 5; +var y = 0; + +let (x = x+10, y = 12) { + console.log(x+y); // 27 +} + +console.log(x + y); // 5 +</pre> + +<p>Die Regeln für den Codeblock sind die gleichen wie für alle anderen Blöcke in JavaScript. Er hat seine Eigenen lokalen Variablen, die mit <code>let</code> deklariert sind.</p> + +<h4 id="Regeln_für_Gültigkeitsbereiche_3">Regeln für Gültigkeitsbereiche</h4> + +<p>Die Sichtbarkeit von mit <code>let</code> definierten Variablen ist der <code>let</code> Block selbst und auch jeder weitere innere Block in diesem Block, wenn die inneren Blöcke keine Variablen mit dem gleichen Namen definieren.</p> + +<h3 id="let_Ausdrücke"><code>let</code> Ausdrücke</h3> + +<div class="warning"> +<p>Die Unterstützung für <code>let</code> Blöcke wurde in Gecko 41 entfernt ({{bug(1023609)}}).</p> +</div> + +<p>Der <strong><code>let</code> Ausdruck</strong> setzt die Sichtbarkeit einer Variablen auf nur einen Ausdruck.</p> + +<h4 id="Syntax_3">Syntax</h4> + +<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre> + +<h4 id="Beispiel_2">Beispiel</h4> + +<p>Man kann <code>let</code> benutzen, um Variablen nur für einen Ausdruck zu benutzen:</p> + +<pre class="brush: js">var a = 5; +let(a = 6) console.log(a); // 6 +console.log(a); // 5</pre> + +<h4 id="Regeln_für_Gültigkeitsbereiche_4">Regeln für Gültigkeitsbereiche</h4> + +<p>Gegeben ist folgender <code>let</code> Ausdruck:</p> + +<pre class="eval">let (<var>decls</var>) <var>expr</var> +</pre> + +<p>Es wird ein impliziter Block um <var>expr</var> erstellt.</p> + +<h2 id="Name">Name</h2> + +<p>Die Erklärung, daß <strong>let</strong> von englisch "to let sth. be sth." abgeleitet ist und so "<strong>let</strong>" als Name (reserviertes Wort) ausgewählt wurde, ist <a href="https://stackoverflow.com/questions/37916940/js-why-let-have-this-name">hier (englisch)</a> zu finden.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initiale Definition. Definiert keine let Ausdrücke und let Blöcke.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(41.0)}}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop(44) }}</td> + <td>11</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Temporal dead zone</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop(35) }}</td> + <td>11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>let</code> expression {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>let</code> block {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Allowed in {{Glossary("sloppy mode")}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(41.0)}}</td> + <td>{{ CompatGeckoMobile(44) }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(41.0)}}</td> + </tr> + <tr> + <td>Temporal dead zone</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile(35) }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>let</code> expression {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>let</code> block {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Allowed in {{Glossary("sloppy mode")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-spezifische_Hinweise">Firefox-spezifische Hinweise</h2> + +<ul> + <li>Vor SpiderMonkey 46 {{geckoRelease(46)}}, wurde ein {{jsxref("TypeError")}} statt einem {{jsxref("SyntaxError")}} erzeugt, wenn Neudeklarationen durchgeführt wurden ({{bug(1198833)}}, {{bug(1275240)}}).</li> + <li>Vor SpiderMonkey 44 {{geckoRelease(44)}}, war <code>let</code> nur in Quelltexten verfügbar, die im HTML durch ein <code><script type="application/javascript;version=1.7"></code> Block umfasst wurden (oder höhere Versionen) und hatte eine andere Semantik.</li> + <li>Die Unterstützung in {{domxref("Worker")}} Codes ist hinter dem <code>dom.workers.latestJSVersion</code> flag versteckt ({{bug(487070)}}). Mit versionsfreiem <code>let</code>, wird das Flag für diese Funktion entfernt ({{bug(1219523)}}).</li> + <li>ES2015-Einhaltung für <code>let</code> für SpIderMonkey wird in {{bug(950547)}} nachverfolgt.</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/">ES6 In Depth: <code>let</code> and <code>const</code></a><a href="http://stackoverflow.com/questions/37916940/js-why-let-have-this-name"> (englisch)</a></li> + <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Breaking changes in <code>let</code> and <code>const</code> in Firefox 44 </a> <a href="http://stackoverflow.com/questions/37916940/js-why-let-have-this-name"> (englisch)</a></li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">You Don't Know JS: Scope & Closures: Chapter 3: Function vs. Block Scope </a> <a href="http://stackoverflow.com/questions/37916940/js-why-let-have-this-name"> (englisch)</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/return/index.html b/files/de/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..aff9552712 --- /dev/null +++ b/files/de/web/javascript/reference/statements/return/index.html @@ -0,0 +1,192 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Die <strong><code>return</code> </strong> Anweisung beendet einen Funktionsaufruf und spezifiziert einen Wert, der von der Funktion zum Aufrufer zurückgegeben wird.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">return [[expression]]; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Ausdruck, der zurückgegeben wird. Wenn er weggelassen wird, wird <code>undefined</code> zurückgegeben.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Wenn in einer Funktion eine <code>return</code> Anweisung aufgerufen wird, wird der Aufruf der Funktion gestoppt. Wenn ein Rückgabewert spezifiziert ist, wird dieser zu der aufrufenden Funktion zurückgegeben. Wenn kein Rückgabewert angegeben wird, wird stattdessen <code>undefined</code> zurückgegeben. Die folgenden <code>return</code> Anweisungen unterbrechen alle den Funktionsaufruf:</p> + +<pre class="brush: js">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 id="Automatische_Semikolon-Einfügung">Automatische Semikolon-Einfügung</h3> + +<p>Die <code>return</code> Anweisung wird von der <a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatischen Semikolon-Einfügung (Automatic semicolon insertion, kurz ASI)</a> beeinflusst. Es ist kein Zeilenumbruch zwischen dem <code>return</code> Schlüsselwort und dem nachfolgenden Ausdruck erlaubt.</p> + +<pre class="brush: js">return +a + b; +</pre> + +<p>wird durch ASI umgewandelt in:</p> + +<pre>return; +a + b; +</pre> + +<p>Die Konsole wird folgende Warnung ausgeben: "unreachable code after return statement".</p> + +<div class="note">Mit Gecko 40 {{geckoRelease(40)}}, wird eine Warnung in der Konsole ausgegeben, wenn Quelltext gefunden wird, der nach einer return Anweisung steht.</div> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="return">return</h3> + +<p>Die folgende Funktion gibt das Quadrat von <code>x</code> zurück. Dabei ist <code>x</code> eine Zahl.</p> + +<pre class="brush: js">function square(x) { + return x * x; +} +</pre> + +<h3 id="Unterbrechen_einer_Funktion">Unterbrechen einer Funktion</h3> + +<p>Eine Funktion stoppt die Ausführung, wenn <code>return</code> aufgerufen wird.</p> + +<pre class="brush: js">function counter() { + for (var count = 1; ; count++) { // infinite loop + console.log(count + "A"); // until 5 + if (count === 5) { + return; + } + console.log(count + "B"); // until 4 + } + console.log(count + "C"); // never appears +} + +counter(); + +// Output: +// 1A +// 1B +// 2A +// 2B +// 3A +// 3B +// 4A +// 4B +// 5A +</pre> + +<h3 id="Funktion_als_Rückgabewert">Funktion als Rückgabewert</h3> + +<p>Sie dazu auch im Artikel <a href="/de/docs/Web/JavaScript/Closures">Closures</a>.</p> + +<pre class="brush: js">function magic(x) { + return function calc(x) { return x * 42 }; +} + +var answer = magic(); +answer(1337); // 56154 +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Functions" title="En/Core_JavaScript_1.5_Reference/Functions">Functions</a></li> + <li><a href="/de/docs/Web/JavaScript/Closures">Closures</a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/switch/index.html b/files/de/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..e53dc84fbe --- /dev/null +++ b/files/de/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,289 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Statements/switch +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Die <strong>switch Anweisung</strong> wertet einen <a href="/de/docs/Web/JavaScript/Guide/Expressions_and_Operators">Ausdruck</a> aus. Diese Auswertung wird mit einer case Klausel verglichen und (bei Übereinstimmung) die entsprechenden <a href="/de/docs/Web/JavaScript/Reference/Statements">Anweisungen</a> ausgeführt.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">switch (expression) { + case value1: + // Anweisungen werden ausgeführt, + // falls <em>expression</em> mit value1 übereinstimmt + [break;] + case value2: + // Anweisungen werden ausgeführt, + // falls <em>expression</em> mit value2 übereinstimmt + [break;] + ... + case valueN: + // Anweisungen werden ausgeführt, + // falls <em>expression</em> mit valueN übereinstimmt + [break;] + default: + // Anweisungen werden ausgeführt, + // falls keine der case-Klauseln mit <em>expression</em> übereinstimmt + [break;] +}</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Ausdruck, der mit jeder case Klausel verglichen wird.</dd> + <dt><code>case valueN</code></dt> + <dd>Der Wert einer case Klausel wird mit <code>expression</code> verglichen.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Ein switch Statement wertet als erstes den Ausdruck aus. Danach wird nach der ersten <code>case</code> Klausel gesucht, die zu dem gleichen Wert ausgewertet wird wie der erste Ausdruck im <code>switch</code> (mit <a href="/de/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identität_strikte_Gleichheit_()">striktem Vergleich</a>, <code>===</code> ) und springt im Kontrollfluss zu der Klausel und führt die dort geschriebenen Statements aus. (Bei mehrfachen Übereinstimmungen springt das Programm zu der ersten gefundenen Klausel, auch wenn die gefunden Klausen nicht gleich sind.) Falls keine übereinstimmende <code>case</code> Klausel gefunden wird, sucht das Programm die optionale <code>default</code> Klausel und führt, wenn diese Klausel existiert, die Anweisungen in der Klausel aus. Wenn keine <code>default</code> Klausel vorhanden ist, wird das Programm nach dem switch Statement fortgesetzt. Konventionell ist die <code>default</code> Klausel die letzte Klausel, das muss aber nicht so sein.</p> + +<p>Die optionale <a href="/de/docs/Web/JavaScript/Reference/Statements/break" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="JavaScript/Reference/Statements/break">break</a> Anweisung in jedem <code>case</code> Block weist das Programm an die switch Anweisung zu beenden. Das Programm macht dann mit der Anweisung weiter, die dem Ende der switch Anweisung folgt. Wird die <code>break</code> Anweisung weggelassen, dann macht das Programm linear weiter; es wird die nächste Anweisung ausgeführt.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Verwendung_von_switch">Verwendung von <code>switch</code></h3> + +<p>Betrachten wir das folgende Beispiel. Falls <code>expr</code> zu "Bananas" ausgewertet wird, dann springt das Programm zu der case Klausel "Bananas" und führt die entsprechenden Anweisungen aus. Die <code>break</code> Anweisung füht dazu, dass das Programm die switch Anweisung verlässt und mit der ersten Anweisung weitermacht, die dem Ende der switch Anweisung folgt.<br> + Hätte man <code>break</code> weggelassen, dann hätte das Programm die Anweisungen der case Klausel "Cherries" ausgeführt.</p> + +<pre class="brush: js">switch (expr) { + case "Oranges": + console.log("Oranges are $0.59 a pound."); + break; + case "Apples": + console.log("Apples are $0.32 a pound."); + break; + case "Bananas": + console.log("Bananas are $0.48 a pound."); + break; + case "Cherries": + console.log("Cherries are $3.00 a pound."); + break; + case "Mangoes": + case "Papayas": + console.log("Mangoes and papayas are $2.79 a pound."); + break; + default: + console.log("Sorry, we are out of " + expr + "."); +} + +console.log("Is there anything else you'd like?"); +</pre> + +<h3 id="Was_passiert_falls_man_eine_break_Anweisung_weglässt">Was passiert, falls man eine <code>break</code> Anweisung weglässt?</h3> + +<p>Falls man eine break Anweisung vergisst, dann führt das Programm sowohl die übereinstimmende case Klausel als auch die darauf folgende case Klausel aus, unabhängig des Wertes der case Klausel.</p> + +<p>Im Allgemeinen fährt das Programm linear fort bis es auf eine <code>break</code> Anweisung stößt. Falls keine <code>break</code> Anweisung vorhanden ist, dann werden alle Anweisungen bis zum Ende der <code>switch</code> Anweisung ausgeführt.</p> + +<pre class="brush: js">var foo = 0; +switch (foo) { + case -1: + console.log('negative 1'); + break; + case 0: // foo ist 0 - diese case-Klausel wird ausgeführt + console.log(0) + // HINWEIS: <code>break</code> Anweisung wurde hier weggelassen + case 1: // Da keine break Anweisung in 'case 0:' + // wird diese Klausel ebenfalls ausgeführt, + // obwohl der Wert nicht mit dem Ausdruck von + // switch übereinstimmt + console.log(1); + break; // das Programm verlässt die switch Anweisung. + // 'case 2:' wird nicht ausgeführt + case 2: + console.log(2); + break; + default: + console.log('default'); +}</pre> + +<h3 id="Techniken_für_case_Klauseln_mit_mehr_als_einem_Kriterium">Techniken für case Klauseln mit mehr als einem Kriterium</h3> + +<p>Die Quelle der erwähnten Methode kann hier aufgerufen werden (auf Englisch):<br> + <a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p> + +<h4 id="Mehrere_case_Klauseln_mit_einer_einfachen_Anweisung">Mehrere case Klauseln mit einer einfachen Anweisung</h4> + +<p>Diese Technik macht es sich zum Vorteil, dass das Programm einfach bei der nächsten case Klausel weitermacht, wenn man die <code>break</code> Anweisung weglässt. Siehe Abschnitt "Was passiert, falls ich eine <code>break</code> Anweisung weglasse?"</p> + +<p>Dieses Beispiel zeigt eine einfache Operation, die für alle entsprechenden case Klauseln ausgeführt wird ('Cow', 'Giraffe', 'Dog', 'Pig').</p> + +<pre class="brush: js">var Animal = 'Giraffe'; +switch (Animal) { + case 'Cow': + case 'Giraffe': + case 'Dog': + case 'Pig': + console.log('This animal will go on Noah\'s Ark.'); + break; + case 'Dinosaur': + default: + console.log('This animal will not.'); +}</pre> + +<h4 id="Mehrere_case_Klauseln_mit_mehreren_Anweisungen">Mehrere case Klauseln mit mehreren Anweisungen</h4> + +<p>Dieses Beispiel zeigt wie mehrere Anweisungen verschiedener case Klauseln ausgeführt werden.<br> + Die case Klauseln werden in geschriebener Reihenfolge ausgeführt, also unabhängig jeglicher Ordnung der Ausdrücke der case Klauseln.</p> + +<pre class="brush: js">var foo = 1; +var output = 'Output: '; +switch (foo) { + case 10: + output += 'So '; + case 1: + output += 'What '; + output += 'Is '; + case 2: + output += 'Your '; + case 3: + output += 'Name'; + case 4: + output += '?'; + console.log(output); + break; + case 5: + output += '!'; + console.log(output); + break; + default: + console.log('Please pick a number from 0 to 6!'); +}</pre> + +<p>Mögliche Ergebnisse:</p> + +<table class="standard-table" style="height: 270px; width: 522px;"> + <tbody> + <tr> + <th scope="col">Wert</th> + <th scope="col">Ausgabe</th> + </tr> + <tr> + <td>10</td> + <td>Output: So What Is Your Name?</td> + </tr> + <tr> + <td>1</td> + <td>Output: What Is Your Name?</td> + </tr> + <tr> + <td>2</td> + <td>Output: Your Name?</td> + </tr> + <tr> + <td>3</td> + <td>Output: Name?</td> + </tr> + <tr> + <td>4</td> + <td>Output: ?</td> + </tr> + <tr> + <td>5</td> + <td>Output: !</td> + </tr> + <tr> + <td><em>Alle anderen Werte</em></td> + <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Please pick a number from 0 to 6!</span></td> + </tr> + </tbody> +</table> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition.<br> + Implementiert in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Unterstützt</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Unterstützt</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/throw/index.html b/files/de/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..e022b01b54 --- /dev/null +++ b/files/de/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,256 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +tags: + - Ausnahmen + - JavaScript + - exceptions + - throw +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Die <strong><code>throw</code> Anweisung</strong> "wirft" eine benutzerdefinierte Exception (Ausnahme). Die Programmausführung der aktuellen Funktion bzw. des globalen Codes wird angehalten (Anweisungen nach <code>throw</code> werden dann nicht mehr ausgeführt), und die Programmausführung wird an den nächsthöheren <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> Block in der Ausführungshierarchie übergeben. Falls in der gesamten Ausführungschierarchie kein <code>catch</code> Block definiert wurde, wird das Programm komplett angehalten.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">throw <em>ausdruck</em>; </pre> + +<dl> + <dt><code>ausdruck</code></dt> + <dd>Die zu werfende Ausnahme.</dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Verwenden Sie die <code>throw</code> Anweisung, um eine Ausnahme zu werfen. Wenn Sie eine Ausnahme werfen, bestimmt <code>ausdruck</code> den Typ der Ausnahme. Als Typ können Objekte (siehe Beispiel unten), als auch skalare Werte, wie Zeichenketten, Zahlen und boolesche Werte verwendet werden. Folgende Beispiele werfen jeweils eine Ausnahme:</p> + +<pre class="brush: js">throw "Fehler"; // erzeugt Ausnahme mit dem Wert "Fehler" (als String) +throw 42; // erzeugt Ausnahme mit dem Wert 42 (als Integer) +throw true; // erzeugt Ausnahme mit dem Wert TRUE (als boolescher Wert)</pre> + +<p>Beachten Sie auch, dass die <code>throw</code>-Anweisung von der <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> betroffen ist und daher kein Zeilenumbruch zwischen dem <code>throw</code> Schlüsselwort und dem Ausdruck zulässig ist.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<h3 id="Objekt_als_Ausnahme_werfen">Objekt als Ausnahme werfen</h3> + +<p>Als Ausnahme kann auch ein Objekt geworfen werden. Auf Eigenschaften des geworfenen Objektes kann dann im <code>catch</code> Block zugegriffen werden. Im folgenden Beispiel wird in der Funktion <code>divide</code> versucht Zahl <code>n</code> durch <code>m</code> zu dividieren. Falls <code>m</code> die Zahl 0 ist, wird ein Objekt (als Funktion) vom Typ <code>DivisionException</code> erzeugt und als Ausnahme geworfen, da Teilen durch 0 nicht möglich ist.</p> + +<pre class="brush: js">function DivisionException(message) { + this.message = message; + this.name = "DivisionException"; +} + +function divide(n, m) { + if (m == 0) { + throw new DivisionException("Teilen durch Null nicht möglich"); + } + + return n / m; +} + +try { + // versuche 5 / 2 zu teilen + alert(divide(5, 2)); // 2.5 + + // versuche 5 / 0 zu teilen + var ausgabe = divide(5, 0); + + // diese Zeile wird nie erreicht + alert(ausgabe); +} +catch (e) { + // "DivisionException: Teilen durch Null nicht möglich" + alert(e.name + ": " + e.message); +} +</pre> + +<p>Ausnahmen werden in der Regel als Funktionen definiert und mit dem <code>new</code> Schlüsselwort als Objekte instantiiert, da es in JavaScript kein direktes Konzept von Konstruktoren gibt, wie in anderen Programmiersprachen. Die Funktion dient dann selbst als Konstruktor. Falls in der <code>catch</code> Anweisung keine Unterscheidung der Ausnahme benötigt wird (z. B. mit Hilfe des <code>instanceof</code> Operators - siehe Beispiel unten), kann das Objekt direkt übergeben werden. Aus praktischen Gründen kann im geworfenen Objekt die Methode <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString</a> definiert werden, um es später einfacher ausgeben zu können:</p> + +<pre class="brush: js">try { + throw { + name: "MyException", + message: "Something is wrong", + toString: function() { + return this.name + ": " + this.message; + } + }; +} +catch (e) { + alert(e); // "MyException: Something is wrong" +}</pre> + +<h3 id="Unterschiedliche_Ausnahmen_werfen_und_unterscheiden">Unterschiedliche Ausnahmen werfen und unterscheiden</h3> + +<p>Es ist möglich unterschiedliche Ausnahmen in einem try Block zu werfen und im dazugehörigen catch Block abzufangen. Dies erlaubt ein gezielteres Abfangen von Ausnahmen.</p> + +<pre class="brush: js">function myException(message) { + this.message = message; +}; + +function myOtherException(text) { + this.text = text; +}; + +var exceptions = [ + "Don't panic! Where is my towel?", + 42, + new myException("So long, and thanks for all the fish!"), + new myOtherException("Deep Thought is still watching..."), +]; + +for (var i=0; i < exceptions.length; i++) { + try { + throw exceptions[i]; + } + catch (e) { + if (typeof e === "string") { + alert('String exception: ' + e); + } + else if (typeof e === "number") { + alert('Number exception: ' + e); + } + else if (typeof e === "object") + { + if (e instanceof myException) { + alert("myException: " + e.message); + } + else if (e instanceof myOtherException) { + alert("myOtherException: " + e.text); + } + } + } +} +</pre> + +<h3 id="Abgefangene_Ausnahmen_neu_werfen">Abgefangene Ausnahmen neu werfen</h3> + +<p>Die <code>throw</code> Anweisung kann auch innerhalb eines <code>catch</code> Blocks verwendet werden, um eine neue oder die bereits abgefangene Ausnahme erneut zu werfen. Alle Anweisungen folgenden Anweisungen im <code>catch</code> Block werden wieder nicht ausgeführt und die neu geworfene Ausnahme wird an die nächsthöheren <code>catch</code> Block übergeben. Somit können "Ebenen" entworfen werden, die jeweils nur bestimmte Ausnahmen behandeln.</p> + +<p>Folgender Quelltext zeigt <code>"myException: This is an exception!"</code> an, da der innere <code>catch</code> Block nicht für Ausnahmen vom Typ <code>myOtherException</code> zuständig ist und daher diese eine Ebene nach oben weiterleitet.</p> + +<pre class="brush: js">function myException(message) { + this.message = message; +}; + +function myOtherException(text) { + this.text = text; +}; + +try { + try { + throw new myOtherException("This is an exception!"); + } + catch (e) { + if (e instanceof myException) { + alert("myException: " + e.message); // wird nicht ausgeführt + } else { + throw e; // eine Ebene nach oben weiterleiten + } + } +} +catch (e) { + alert("myException: " + e.text); +} +</pre> + +<div class="note"> +<p>Falls eine Exception durch keinen catch Block abgefangen wird, wird die Ausnahme in der JavaScript Konsole ausgegeben und die Programmausführung komplett unterbrochen.</p> +</div> + +<p> </p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initiale Definition. Implementiert in JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/try...catch/index.html b/files/de/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..d86c0c8120 --- /dev/null +++ b/files/de/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,382 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Statements/try...catch +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Die <strong>try...catch</strong>-Anweisung (sinngemäß: testen und verarbeiten) rahmt einen Block von Anweisungen (<em>try statements)</em> ein und legt Reaktionen (<em>catch statementes</em>) fest, die im Fehlerfall ausgeführt werden.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">try { + <em>try_Anweisungen</em> +} +[catch (<em>Fehler_var_1</em> if <em>Bedingung_1</em>) { // nicht Standard + <em>catch_Anweisungen</em> +}] +... +[catch (<em>Fehler_var_2</em>) { + <em>catch_Anweisungen_2</em> +}] +[finally { + <em>finally_Anweisungen</em> +}] +</pre> + +<dl> + <dt><code>try_Anweisungen</code></dt> + <dd>Die auszuführenden Anweisungen.</dd> +</dl> + +<dl> + <dt><code>catch_Anweisungen_1</code>, <code>catch_Anweisungen_2</code></dt> + <dd>Anweisungen, die ausgeführt werden, wenn bei den <code>try</code>-Anweisungen ein Fehler auftritt.</dd> +</dl> + +<dl> + <dt><code>Fehler_var_1</code>, <code>Fehler_var_2</code></dt> + <dd>Ein Bezeichner der das Fehlerobjekt des zugehörigen <code>catch</code>-Abschnitts enthält.</dd> +</dl> + +<dl> + <dt><code>Bedingung_1</code></dt> + <dd>Ein Bedingungsausdruck.</dd> +</dl> + +<dl> + <dt><code>finally_Anweisungen</code></dt> + <dd>Die Schlussanweisungen werden nach den <code>try</code>-Anweisungen ausgeführt. Die Anweisungen werden immer ausgeführt, auch wenn ein Fehler ausgegeben wurde. </dd> +</dl> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Der <em>try</em>-Block besteht aus einer oder mehreren Anweisungen (der Absschnitt steht – auch bei nur einer Zeile – immer in geschweiften Klammern {}), mindestens einem <em>catch</em>- oder einem <em>finally</em>-Abschnitt oder beiden. Es gibt also drei Arten von <em>try</em>-Anweisungen:</p> + +<ol> + <li><code>try...catch</code></li> + <li><code>try...finally</code></li> + <li><code>try...catch...finally</code></li> +</ol> + +<p>Der <code>catch</code>-Abschnitt enthält Anweisungen, die ausgeführt werden, wenn im <code>try</code>-Abschnitt ein Fehler auftritt. Bei einer fehlerhaften Anweisung im Block im <code>try</code>-Abschnitt – oder in Funktionen, die von dort aufgerufen werden – geht die Kontrolle sofort an den <code>catch</code>-Abschnitt über. Wird kein Fehler gemeldet wird der <code>catch</code>-Abschnitt nicht ausgeführt.</p> + +<p>Der <code>finally</code>-Abschnitt wird nach dem <code>try</code>- und <code>catch</code>-Abschnitt ausgeführt. Der Abschnitt wird immer ausgeführt, egal ob ein Fehler aufgetreten ist oder nicht.</p> + +<p>Mehrere <code>try</code>-Anweisungen können verschachtelt werden. Wenn ein innerer <code>try</code>-Block keinen <code>catch</code>-Abschnitt hat, wird der <code>catch</code>-Abschnitt des nächsthöheren <code>try</code>-Blocks ausgeführt.</p> + +<p>Mit der try-Anweisungen können auch JavaScript-Fehler bearbeitet werden. Mehr zur Fehlerbearbeitung in JavaScript steht im <a href="/en-US/docs/Web/JavaScript/Guide" title="en/JavaScript/Guide">JavaScript Guide</a>.</p> + +<h3 id="Unbhängiger_catch-Abschnitt">Unbhängiger <code>catch-Abschnitt</code></h3> + +<p>Wenn mit einem einzelnen, ungebundenen <code>catch</code>-Abschnitt gearbeitet wird, dann wird der catch-Block bei jedem Fehler durchlaufen. Wenn der Fehler im folgenden Beispiel-Code auftritt geht die Kontrolle an den <code>catch</code>-Abschnitt über.</p> + +<pre class="brush: js">try { + throw "myException"; // Fehler wird ausgelöst +} +catch (e) { + // Anweisungen für jeden Fehler + logMyErrors(e); // Fehler-Objekt an die Error-Funktion geben +} +</pre> + +<p>Im <code>catch</code>-Block wird ein Bezeichner festgelegt (e im Beispiel), die den Wert enthält, der durch die <code>throw</code>-Anweisung entstanden ist. Der catch-Block ist besonders, weil er zu Beginn der Ausführung einen Bezeichner anlegt, der für den gesamten Block gilt. Wenn der catch-Block abgearbeitet ist steht der Bezeichner nicht mehr zur Verfügung.</p> + +<h3 id="Abhängige_catch-Abschnitte">Abhängige <code>catch</code>-Abschnitte</h3> + +<p>{{non-standard_header}}</p> + +<p>Mehrere abhängige catch-Abschnitte können spezifische Fehler bearbeiten. In diesem Fall wird der passende catch-Abschnitt aufgerufen, wenn der zugehörige Fehler aufgetreten ist. Im folgenden Beispiel kann der Code im <code>try</code>-Block drei mögliche Fehler ausgeben: {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, and {{jsxref("EvalError")}} (Typ-Fehler, Bereich-Fehler und Rechenfehler). Wenn ein Fehler auftritt geht die Kontrolle an den zugehörigen <code>catch</code>-Abschnitt. Wenn dem Fehler kein catch-Abschnitt entspricht und ein unabhäniger <code>catch</code>-Abschnitt vorhanden ist, geht die Kontrolle an ihn.</p> + +<p>Wenn mehrere abhängige catch-Abschnitt mit einem unabhängigen kombiniert werden, muss der unabhängige Abschnitt am Ende stehen: er fängt sonst alle Fehlertypen ab bevor sie die eigenen, abhängigen Abschnitte erreichen.</p> + +<p>Zu Erinnerung: diese Funktionalität ist kein Teil der ECMAScript-Spezifikation.</p> + +<pre class="brush: js">try { + myroutine(); // erzeugt drei mögliche Fehlertypen +} catch (e if e instanceof TypeError) { + // Anweisungen für die verschiedenen Fehlertypen +} catch (e if e instanceof RangeError) { + // Anweisungen für Bereichsfehler +} catch (e if e instanceof EvalError) { + // Anweisungen für Berechnungsfehler +} catch (e) { + // Anweisungen für nicht festgelegte Fehlertypen + logMyErrors(e); // Objekt an die Fehler-Funktion geben +} +</pre> + +<p>Das nächste Beispiel zeigt, wie die gleichen "abhängigen <code>catch</code>-Abschnitte" aussehen, wenn einfaches JavaScript benutzt wird, das den ECMAScript-Spezifikationen entspricht (etwas umfangreicher, funktioniert aber genauso).</p> + +<pre class="brush: js">try { + myroutine(); // erzeugt drei mögliche Fehlertypen +} catch (e) { + if (e instanceof TypeError) { + // Anweisungen für die verschiedenen Fehlertypen + } else if (e instanceof RangeError) { + // Anweisungen für Bereichsfehler + } else if (e instanceof EvalError) { + // Anweisungen für Berechnungsfehler + } else { + // Anweisungen für nicht festgelegte Fehlertypen + logMyErrors(e); // Objekt an die Fehler-Funktion geben + } +} +</pre> + +<h3 id="Der_Fehler-Bezeichner">Der Fehler-Bezeichner</h3> + +<p>Wenn im try-Block ein Fehler auftritt, enthält die <em>exception_var</em> (z.B. das e in catch(e)) den Wert, der durch die <em>throw</em>-Anweisung erzeugt wird. Mit diesem Bezeichner können also Informationen über den Fehler gewonnen werden.</p> + +<p>Der Bezeichner gilt nur innerhalb des <code>catch</code>-Abschnitts. Er wird zu Beginn des Abschnitts angelegt und steht nach der Abarbeitung nicht mehr zur Verfügung.</p> + +<h3 id="Der_finally-Abschnitt">Der finally-Abschnitt</h3> + +<p>Zum Abschluss-Abschnitt (<code>finally</code>) gehören die Anweisungen, die nach dem <code>try</code>- und dem <code>catch</code>-Block ausgeführt werden, noch bevor irgenwelche Anweisugnen nach den <code>try-/catch-/finally</code>-Abschnitten ausgeführt werden. Der finally-Abschnitt wird immer ausgeführt, auch wenn bei der Verarbeitung ein Fehler aufgetreten ist. Er wird auch ausgeführt, wenn kein catch-Abschnitt den Fehler bearbeitet. Der finally-Abschnitt kann dabei helfen, das eigene Script im Fehlerfall anständig zu beenden. Dort können zum Beispiel für ein übergreifendes Aufräumen Ressourcen wieder freigegeben werden, die durch das Script gebunden wurden.</p> + +<p>Vielleicht sieht ein Abschnitt, der sich auf Fehler bezieht, aber UNABHÄNGIG vom tatsächlichen Auftreten eines Fehlers immer ausgeführt wird, merkwürdig aus. Aber dieses Konstrukt dient tatsächlich einem Zweck. Wichtig dabei ist nicht, dass der <code>finally</code>-Abschnitt immer aussgeführt wird, sonder das der normale Code nach einem try...catch NICHT ausgeführt wird. Wenn zum Beispiel in einem catch-Abschnitt, der zu einem try-Block gehört, ein Fehler auftritt, dann wird nichts von dem umgebenden Code ausgeführt, gleichgültig ob es ein umgebende try-catch-Blöcke oder normale Anweisungen sind. Die Kontrolle wird stattdessen an den catch-Abschnitt übergeben, der zum umgebenden try-Abschnitt gehört oder – wenn es den nicht gibt – an die interne Fehlerroutine. </p> + +<p>Auf diese Weise wird jeder nachfolgende Aufräum-Code im eingeschlossenen Abschnitt oder im normalen Programmablauf übersprungen. Wenn aber zum <code>try</code>-Abschnitt ein finally-Abschnitt gehört, dann kann in diesem Abschnitt aufgeräumt werden, bevor es in einen umgebenden <code>catch</code>-Abschnitt (oder den Fehlergenerator) geht, der dann den zweiten Fehler bearbeitet. </p> + +<p>Wenn unabhängig vom Erfolg des <code>try...catch-</code>Blocks aufgeräumt werden muss und der finally-Abschnitt nur nach einem Fehler ausgeführt würde, dann müsste der Aufräum-Code doppelt verwendet werden, innerhalb und außerhalb des finally-Abschnitts. Deshalb wird der finally-Block unabhängig von auftretenden Fehlern ausgeführt.</p> + +<p>Das folgende Beispiel öffnet eine Datei und führt dann Anweisungen aus, die mit der Datei arbeiten (server-seitiges JavaScript lässt den Zugriff auf Dateien zu). Wenn ein Fehler ausgegeben wird solange die Datei geöffnet ist, dann schließt der <code>finally</code>-Abschnitt diese Datei bevor das Script stoppt. Der Code im Abschnitt wird auch bei <code>Returns</code> aus <code>try</code>- oder <code>catch</code>-Blöcken ausgeführt.</p> + +<pre class="brush: js">openMyFile() +try { + // bindet eine Ressource + writeMyFile(theData); +} +finally { + closeMyFile(); // Ressource immer wieder frei geben +} +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Verschachtelte_try-Blöcke">Verschachtelte try-Blöcke</h3> + +<p>Zuerst einmal untersuchen wir diese Beispiele:</p> + +<pre class="brush: js">try { + try { + throw new Error("oops"); + } + finally { + console.log("finally"); + } +} +catch (ex) { + console.error("outer", ex.message); +} + +// Output: +// "finally" +// "outer" "oops" +</pre> + +<p>Wenn wir den Fehler im inneren <code>try</code>-Block mit einem <code>catch</code>-Abschnitt bearbeiten</p> + +<pre class="brush: js">try { + try { + throw new Error("oops"); + } + catch (ex) { + console.error("inner", ex.message); + } + finally { + console.log("finally"); + } +} +catch (ex) { + console.error("outer", ex.message); +} + +// Output: +// "inner" "oops" +// "finally" +</pre> + +<p>Und jetzt wird der Fehler im catch-Abschnitt noch einmal produziert:</p> + +<pre class="brush: js">try { + try { + throw new Error("oops"); + } + catch (ex) { + console.error("inner", ex.message); + throw ex; + } + finally { + console.log("finally"); + } +} +catch (ex) { + console.error("outer", ex.message); +} + +// Output: +// "inner" "oops" +// "finally" +// "outer" "oops" +</pre> + +<p>Jeder auftretende Fehler wird nur einmal bearbeitet, durch den nächsten umgebenden <code>catch</code>-Block (es sei denn, er wird erneut ausgegeben). Natürlich werden alle im inneren Abschnitt neu auftretenden Fehler durch den umschließenden Block bearbeitet.</p> + +<h3 id="Rückgaben_aus_einem_finally-Block">Rückgaben aus einem finally-Block</h3> + +<p>Wenn der <code>finally</code>-Abschnitt ein Wert zurückgibt, wird dieser Wert zum Rückgabewert der gesamten <code>try-catch-finally</code>-Veranstaltung, unabhänig von allen return-Anweisungen in den <code>try</code>- oder <code>catch</code>-Blöcken. Das gilt auch für Fehler im <code>catch</code>-Block:</p> + +<pre class="brush: js">try { + try { + throw new Error("oops"); + } + catch (ex) { + console.error("inner", ex.message); + throw ex; + } + finally { + console.log("finally"); + return; + } +} +catch (ex) { + console.error("outer", ex.message); +} + +// Output: +// "inner" "oops" +// "finally" +</pre> + +<p>Der äußere "oops"-Fehler wird nicht ausgelöst wegen des <code>return</code> im finally-Block. Das gleiche gilt für alle Werte, die aus dem <code>catch</code>-Abschnitt zurück gegeben werden.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Erste Definition. Implementiert in JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.14', 'try statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-try-statement', 'try statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> + <p>Fällt nicht unter den aktuellen ECMA-262-Standard: Mehrfache catch-Abschnitte und abhängige Abschnitte (SpiderMonkey extension, JavaScript 1.5).</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Verträglichkeit">Browser-Verträglichkeit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundunter-stützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Abhängige Abschnitte<br> + (Non-Standard)</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Grundunter-stützung</td> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Abhängige Abschnitte<br> + (Non-Standard)</td> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> +</ul> diff --git a/files/de/web/javascript/reference/statements/var/index.html b/files/de/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..bd11e7efd0 --- /dev/null +++ b/files/de/web/javascript/reference/statements/var/index.html @@ -0,0 +1,243 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div> +<div>{{jsSidebar("Statements")}}</div> +</div> + +<p>Mit dem Schlüsselwort <strong><code>var</code> </strong>deklariert man Variablen und initialisiert diese optional.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>varname1 [</em>= <em>wert1] [</em>, <em>varname2 [</em><em>= wert2] ... [</em>, <em>varnameN [=wertN]]]</em>;</pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd>Variablenname. Jeder legale Bezeichner ist erlaubt.</dd> +</dl> + +<dl> + <dt><code>wertN</code></dt> + <dd>Initialwert der Variablen. Jeder legale Ausdruck ist erlaubt.</dd> +</dl> + +<h2 id="Description" name="Description">Beschreibung</h2> + +<p>Variablendeklarationen werden immer ausgeführt bevor Programmcode ausgeführt wird, egal wo sie im Programmcode vorkommen. Der Gültigkeitsbereich einer Variablendeklaration mit <code>var</code> ist der aktuelle Kontext. Dieser ist der Kontext der umschließenden Funktion oder für Deklarationen außerhalb von Funktionen der globale Kontext.</p> + +<p>Das Zuweisen eines Wertes zu einer nicht deklarierten Variablen führt immer dazu, dass eine globale Variable erstellt wird (die Variable wird auf dem globalen Objekt erstellt). Die Unterschiede zwischen deklarierten und nicht deklarierten Variablen sind:</p> + +<p>1. Deklarierte Variablen sind immer in dem Kontext gültig, in dem sie deklariert wurden. Undeklarierte Variablen sind immer globale Variablen.</p> + +<pre class="brush: js">function x() { + y = 1; // erzeugt einen ReferenceError im strict mode + var z = 2; +} + +x(); + +console.log(y); // gibt "1" aus +console.log(z); // erzeugt einen ReferenceError: z ist nur in x verfügbar. +</pre> + +<p>2. Deklarierte Variablen werden erstellt bevor Programmcode ausgeführt wird. Undeklarierte Variablen existieren nicht bevor die Zuweisung ausgeführt wurde.</p> + +<pre class="brush: js">console.log(a); // erzeugt einen ReferenceError. +console.log('still going...'); // wird nie ausgeführt</pre> + +<pre class="brush: js">var a; +console.log(a); // gibt "undefined" oder "" aus, abhängig vom Browser. +console.log('still going...'); // gibt "still going..." aus.</pre> + +<p>3. Deklarierte Variablen sind nicht konfigurierbare Attribute des ausführenden Kontexts (Funktion oder globaler Kontext). Undeklarierte Variablen sind konfigurierbar (z. B. sie können gelöscht werden).</p> + +<pre class="brush: js">var a = 1; +b = 2; + +delete this.a; // erzeugt einen TypeError im strict mode. Andernfalls wird es ignoriert +delete this.b; + +console.log(a, b); // erzeugt einen ReferenceError. +// Das 'b' Attribut wurde gelöscht und existiert nicht länger.</pre> + +<p>Wegen dieser drei Unterschiede führt das Fehlen der Variablendeklaration zu unerwarteten Ergebnissen. <strong>Deswegen ist es empfohlen immer Variablen zu deklarieren, unabhängig davon, ob sie sich in einer Funktion oder im globalen Kontext befinden.</strong> Zudem wird im ECMAScript 5 <code>{{jsxref("</code>Functions_and_function_scope/Strict_mode<code>", "strict mode")}} </code>ein Fehler erzeugt, wenn einer nicht deklarierten Variablen ein Wert zugewiesen wird.</p> + +<h3 id="var_hoisting">var hoisting</h3> + +<p>Weil Variablendeklarationen (und Deklarationen im Allgemeinen) vor dem Ausführen von Programmcode geschieht, ist das Deklarieren einer Variable irgendwo im Programmcode das gleiche, als würde sie am Anfang deklariert werden. Das bedeutet, dass eine Variable benutzt werden kann bevor sie im Programmcode deklariert wurde. Dieser Umstand wird "hoisting" genannt und wird möglich, weil die Deklaration der Variablen an den Anfang der Funktion oder den Anfang des globalen Programmcodes verschoben wird.</p> + +<pre class="brush: js">bla = 2 +var bla; +// ... + +// Implizit wird Folgendes gemacht: + +var bla; +bla = 2; +</pre> + +<p>Aus diesem Grund ist es empfohlen Variablen immer am Anfang ihres Gültigkeitsbereiches zu definieren. Dadurch wird klarer, welche Variable vom lokalen Gültigkeitsbereich stammt und welche über die Gültigkeitsbereichekette gefunden werden muss.</p> + +<h2 id="Examples" name="Examples">Beispiele</h2> + +<h3 id="Deklarieren_und_initialisieren_zweier_Variablen">Deklarieren und initialisieren zweier Variablen</h3> + +<pre>var a = 0, b = 0;</pre> + +<h3 id="Zuweisung_zweier_Variablen_mit_einer_Zeichenkette">Zuweisung zweier Variablen mit einer Zeichenkette</h3> + +<pre class="brush: js">var a = "A"; +var b = a; + +// Das gleiche wie: + +var a, b = a = "A"; +</pre> + +<p>Sei aufmerksam mit der Reihenfolge:</p> + +<pre class="brush: js">var x = y, y = 'A'; +console.log(x + y); // undefinedA +</pre> + +<p><code>x </code>und <code>y </code>werden deklariert bevor Programmcode ausgeführt wird. Die Zuweisungen geschehen später. Wenn "<code>x = y</code>" ausgeführt wird, existiert <code>y </code>schon mit dem Wert <code>undefined</code>, weshalb kein Fehler erzeugt wird. <code>x </code>wird der Wert <code>undefined</code> zugewiesen. Dann wird <code>y </code>der Wert 'A' zugewiesen. Nach dieser einen Zeile ist demnach das Resultat <code>x === undefined && y === 'A'</code>.</p> + +<h3 id="Initialisierung_mehrerer_Variablen">Initialisierung mehrerer Variablen</h3> + +<pre class="brush: js">var x = 0; + +function f(){ + var x = y = 1; // x ist lokal Deklariert. y nicht! +} +f(); + +console.log(x, y); // 0, 1 +// Nicht im strict-mode: +// x ist die erwartetete globale Variable und nicht die lokale. +// y wird global angelegt und der Wert 1 zugewiesen! </pre> + +<h3 id="Implizierte_globale_Variablen_und_Gültigkeitsbereiche_äußerer_Funktionen">Implizierte globale Variablen und Gültigkeitsbereiche äußerer Funktionen</h3> + +<p>Variablen die scheinbar global verfügbar sind, stammen manchmal aus dem Gültigkeitsbereich einer äußeren Funktion:</p> + +<pre class="brush: js">var x = 0; // x ist global deklariert und mit dem Wert 0 initialisiert. + +console.log(typeof z); // undefined, solange z noch nicht existiert + +function a() { // Wenn a aufgerufen wird, + var y = 2; // wird y in der Funktion a deklariert und der Wert 2 wird zugewiesen + + console.log(x, y); // 0 2 + + function b() { // Wenn b aufgerufen wird, + x = 3; // wird 3 der globalen Variablen x zugewiesen + // (es wird keine neue globale Variable erstellt) + y = 4; // wird 4 der Variablen y (äußere Funktion) zugewiesen + // (es wird keine neue globale Variable erstellt) + z = 5; // wird eine globale Variable z erstellt und der Wert 5 wird zugewiesen. + } // (erzeugt einen ReferenceError im strict mode.) + + b(); // Aufruf von b (erstellt z als globale Variable) + console.log(x, y, z); // 3 4 5 +} + +a(); // Aufruf von a und somit auch von b +console.log(x, z); // 3 5 +console.log(typeof y); // undefined weil y local in der Funktion a deklariert wurde.</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition.<br> + Implementiert in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><code>{{jsxref("Anweisungen/let", "let")}}</code></li> + <li><code>{{jsxref("Anweisungen/const", "const")}}</code></li> +</ul> diff --git a/files/de/web/javascript/reference/statements/while/index.html b/files/de/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..d391fdbab1 --- /dev/null +++ b/files/de/web/javascript/reference/statements/while/index.html @@ -0,0 +1,102 @@ +--- +title: while +slug: Web/JavaScript/Reference/Statements/while +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/while +--- +<div>{{jsSidebar("Anweisungen")}}</div> + +<p>Die <strong>while-Anweisung (Engl. <em>statement</em>)</strong> beschreibt eine Schleife, die solange durchlaufen wird wie die Schleifenbedingung wahr (Engl. <em><strong>true</strong></em>) ergibt. Die Schleifenbedingung (Engl. <strong><em>condition</em></strong>) wird am Anfang der Schleife ausgewertet.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">while (<em>condition</em>) { + <em>statement</em> +}</pre> + +<dl> + <dt><code>condition</code></dt> + <dd>Die Schleifenbedinung wird zu Anfang eines Schleifendurchlaufs ausgewertet. Ergibt die Auswertung wahr (<em><strong>true)</strong></em>, dann wird der Schleifenkörper durchlaufen (<code>statement</code> wird ausgeführt). Ist die Bedingung falsch (<strong><em>false)</em></strong>, dann fährt das Program mit der ersten Anweisung nach der <em><strong>while</strong></em><strong> </strong>Schleife<strong> </strong>fort.</dd> + <dt><code>statement</code></dt> + <dd>Eine optionale Anweisung wird ausgeführt solange die Bedingung wahr (<em><strong>true</strong></em>) ist. Mehrere Anweisungen müssen in einer <a href="/en-US/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> Anweisung (<code style="font-style: normal;">{ ... }</code>) gruppiert werden.<br> + <br> + Bemerkung: Ein break-Statement kann eingesetzt werden, um die Schleife vorzeitig zu beenden, bevor die Bedingung auf <code>false</code> wechselt.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Die folgende <code>while</code> Schleife wird so oft durchlaufen wie <code>n</code> kleiner drei ist.</p> + +<pre class="brush:js">var n = 0; +var x = 0; + +while (n < 3) { + n++; + x += n; +}</pre> + +<p>In jedem Durchlauf wird <code>n</code> inkrementiert und zu <code>x</code> addiert. Die Schleifendurchläufe können wie folgt beschrieben werden:</p> + +<ul> + <li>Nach 1. Durchlauf: <code>n</code> = 1 und <code>x</code> = 1</li> + <li>Nach 2. Durchlauf: <code>n</code> = 2 und <code>x</code> = 3</li> + <li>Nach 3. Durchlauf: <code>n</code> = 3 und <code>x</code> = 6</li> +</ul> + +<p>Nach dem dritten Durchlauf ist die Schleifenbedingung nicht mehr wahr, und die Schleife wird beendet.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("javascript.statements.while")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> |